/* Phone simulator: the app, running in the page. Shared by the three sites; the
   palette comes from [data-app]. Everything is scoped under .sim. */
.sim{--k:1;position:relative;width:calc(372px*var(--k));height:calc(770px*var(--k));flex:none;-webkit-tap-highlight-color:transparent}
:where(.sim *){box-sizing:border-box;margin:0;padding:0}
:where(.sim button){font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
.sim button:focus-visible,.sim [tabindex]:focus-visible{outline:2px solid var(--a-pd);outline-offset:2px}
.s-phone{
  --a-p:#77D959;--a-pd:#4FA834;--a-pl:#E4F7DC;--a-card:#DDFBEF;--a-ink:#2E8B57;
  --a-bg:#F6F8F6;--a-sf:#fff;--a-tx:#131712;--a-sub:#6D8566;--a-line:#E6EBE4;--a-ok:#10B981;--a-no:#EF4444;--a-warn:#F59E0B;
  --a-cjk:"Klee One","Hiragino Sans","Yu Gothic",sans-serif;--fs:1;
  position:absolute;left:0;top:0;width:372px;height:770px;transform:scale(var(--k));transform-origin:0 0;
  border-radius:56px;padding:11px;background:#16171a;
  box-shadow:0 0 0 1.5px #3a3c42 inset,0 40px 60px -30px rgba(20,18,12,.45),0 18px 28px -18px rgba(20,18,12,.35);
  font-family:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.4;color:var(--a-tx);
}
.sim[data-app="hanzijo"] .s-phone{font-family:"Lexend","Noto Sans SC",system-ui,sans-serif;--a-p:#F5C84B;--a-pd:#9A7400;--a-pl:#FFF1C9;--a-card:#FFF6DC;--a-ink:#765B00;--a-bg:#FFFDF7;--a-tx:#1F1A12;--a-sub:#6B6052;--a-line:#F0E8D6;--a-cjk:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
.sim[data-app="hanguljo"] .s-phone{font-family:"Lexend","Noto Sans KR",system-ui,sans-serif;--a-p:#F48FB1;--a-pd:#C2386C;--a-pl:#FFE3EC;--a-card:#FFF0F5;--a-ink:#964261;--a-bg:#FFF8F8;--a-tx:#1F1A1C;--a-sub:#6B5A5E;--a-line:#F3E1E6;--a-cjk:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
.s-phone[data-theme="dark"]{--a-bg:#161F13;--a-sf:#1F2B1B;--a-tx:#EEF3EC;--a-sub:#9DB096;--a-line:#2C3A27;--a-card:#22331F;--a-pl:#2A3D24;--a-ink:#8FE471}
.sim[data-app="hanzijo"] .s-phone[data-theme="dark"]{--a-bg:#161616;--a-sf:#1F1F1F;--a-tx:#F4EFE2;--a-sub:#B8B0A0;--a-line:#2A2A2A;--a-card:#2A2414;--a-pl:#3A2F12;--a-ink:#F5C84B;--a-pd:#F5C84B}
.sim[data-app="hanguljo"] .s-phone[data-theme="dark"]{--a-bg:#161214;--a-sf:#1F1B1D;--a-tx:#F5EFEF;--a-sub:#B8A8AC;--a-line:#2A2426;--a-card:#2D1B23;--a-pl:#3D1F2A;--a-ink:#F48FB1;--a-pd:#F48FB1}
.s-phone h1,.s-phone h2,.s-phone h3,.s-phone h4{font-family:inherit;color:inherit;line-height:inherit;letter-spacing:0;text-wrap:wrap;text-transform:none}
.s-phone b,.s-phone strong{color:inherit}
.s-phone p{max-width:none}
.s-phone img{max-width:none}
.s-phone em{font-style:normal}
.s-bezel{position:relative;height:100%;border-radius:45px;overflow:hidden;background:var(--a-bg);display:flex;flex-direction:column;isolation:isolate}
.s-status{flex:none;height:46px;display:flex;align-items:center;justify-content:space-between;padding:6px 26px 0;font-weight:600;font-size:14px;position:relative;z-index:6}
.s-island{position:absolute;left:50%;top:10px;width:104px;height:30px;margin-left:-52px;border-radius:20px;background:#0b0b0d}
.s-sys{display:flex;gap:5px;align-items:center}
.s-sys svg{display:block}
.s-view{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;position:relative}
.s-view::-webkit-scrollbar{display:none}
.s-view.s-in{animation:sIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes sIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.s-homebar{position:absolute;left:50%;bottom:7px;width:126px;height:5px;margin-left:-63px;border-radius:3px;background:var(--a-tx);opacity:.82;z-index:9;pointer-events:none}
.s-phone[data-full="1"] .s-view{margin-top:-46px}
.s-phone[data-full="1"] .s-status{color:#fff}
.s-phone[data-full="1"] .s-homebar{background:#fff}
.s-cjk{font-family:var(--a-cjk)}
.sim ruby{ruby-position:over}
.sim rt{font-size:.5em;font-weight:400;color:var(--a-sub);letter-spacing:0}
:where(.sim) svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* tab bar */
.s-tabs{flex:none;display:flex;height:70px;padding:6px 8px 20px;background:var(--a-sf);border-top:1px solid var(--a-line);z-index:5}
.s-tabs[hidden]{display:none}
.s-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;color:var(--a-sub);border-radius:14px;position:relative}
.s-tab[aria-current="true"]{color:var(--a-pd);font-weight:600}
.s-tab[aria-current="true"]::before{content:"";position:absolute;top:-6px;width:22px;height:3px;border-radius:2px;background:var(--a-p)}
.s-tab .s-badge{position:absolute;top:4px;left:54%;min-width:15px;height:15px;border-radius:8px;background:var(--a-no);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* app bars */
.s-appbar{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:8px;height:50px;padding:0 14px;background:var(--a-bg)}
.s-appbar h1{font-size:15.5px;font-weight:600;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-ib{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;position:relative}
.s-ib:hover{background:var(--a-pl)}
.s-brand{display:flex;align-items:center;gap:7px;font-weight:700;font-size:17px}
.s-brand img{width:26px;height:26px;border-radius:7px}
.s-dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--a-no)}
.s-pad{padding:4px 16px 26px}

/* home */
.s-hello{display:flex;justify-content:space-between;align-items:center;margin:4px 0 12px}
.s-hello small{color:var(--a-sub);font-size:11.5px}
.s-hello h2{font-size:18px;font-weight:600;line-height:1.3}
.s-streak{background:var(--a-pl);border-radius:14px;padding:8px 12px;text-align:center;font-size:11.5px;font-weight:600;color:var(--a-tx)}
.s-streak svg.i{display:block;margin:0 auto 2px;fill:#FF7A1A;stroke:none}
.s-recent{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;background:var(--a-sf);border-radius:16px;box-shadow:0 1px 0 var(--a-line),0 6px 16px -12px rgba(0,0,0,.25)}
.s-recent small{display:block;color:var(--a-sub);font-size:10.5px}
.s-recent b{font-weight:600;font-size:13.5px}
.s-recent>span:nth-child(2){flex:1}
.s-play{width:36px;height:36px;border-radius:50%;background:var(--a-pl);color:var(--a-pd);display:flex;align-items:center;justify-content:center}
.s-play svg.i{fill:currentColor;stroke:none}
.s-h{font-size:14.5px;font-weight:600;margin:18px 0 9px;display:flex;justify-content:space-between;align-items:baseline}
.s-h small{font-weight:500;font-size:11px;color:var(--a-pd)}
.s-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.s-tile{display:block;padding:12px;background:var(--a-sf);border-radius:16px;box-shadow:0 1px 0 var(--a-line);transition:transform .15s}
.s-tile:active{transform:scale(.97)}
.s-tile i{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--a-pl);color:var(--a-pd);font-style:normal;font-family:var(--a-cjk);font-weight:700;font-size:18px;margin-bottom:8px}
.s-tile b{display:block;font-weight:600;font-size:12.8px;line-height:1.25}
.s-tile span{display:block;color:var(--a-sub);font-size:10.5px;margin-top:2px}

/* lesson tabs */
.s-ltabs{display:flex;border-bottom:1px solid var(--a-line);margin:0 0 12px}
.s-ltab{flex:1;padding:6px 0 8px;text-align:center;font-size:9.5px;letter-spacing:.08em;font-weight:600;color:var(--a-sub);border-bottom:2.5px solid transparent;margin-bottom:-1px;display:flex;flex-direction:column;align-items:center;gap:2px}
.s-ltab[aria-selected="true"]{color:var(--a-pd);border-color:var(--a-p)}
.s-ltab svg{width:16px;height:16px}

/* flashcard */
.s-card{position:relative;height:468px;perspective:1100px}
.s-flip{position:absolute;inset:0;transition:transform .55s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.s-card.is-back .s-flip{transform:rotateY(180deg)}
.s-face{position:absolute;inset:0;border-radius:22px;background:var(--a-card);backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:14px;overflow:hidden;display:flex;flex-direction:column}
.s-face.back{transform:rotateY(180deg);overflow-y:auto;scrollbar-width:none}
.s-face.back::-webkit-scrollbar{display:none}
.s-cardtop{display:flex;justify-content:space-between;flex:none}
.s-round{width:34px;height:34px;border-radius:50%;background:var(--a-sf);display:flex;align-items:center;justify-content:center}
.s-round.on{color:var(--a-no)}
.s-round.on svg.i{fill:currentColor}
.s-bigch{font-family:var(--a-cjk);font-weight:600;line-height:1.1;text-align:center;color:var(--a-tx)}
.s-face.front .s-bigch{font-size:calc(150px*var(--fs));margin:auto 0}
.s-face.front .s-hint{text-align:center;color:var(--a-sub);font-size:11.5px;padding-bottom:6px}
.s-face.back .s-bigch{font-size:calc(58px*var(--fs));margin:-18px 0 8px}
.s-kv{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:calc(12px*var(--fs))}
.s-lab{display:block;font-size:9.5px;letter-spacing:.09em;font-weight:600;color:var(--a-ink);text-transform:uppercase;margin-bottom:2px}
.s-row{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(0,0,0,.07);border-bottom:1px solid rgba(0,0,0,.07);padding:7px 0;margin:9px 0;font-size:calc(12.5px*var(--fs))}
.s-row .s-lab{margin:0}
.s-parts{text-align:center}
.s-parts span:not(.s-lab){display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:3px;border-radius:9px;background:#FFF4D6;border:1px solid #F1DFA6;font-family:var(--a-cjk);font-size:17px;color:#3b3320}
.s-mn{background:var(--a-sf);border-radius:12px;padding:8px 10px;margin-top:8px;font-size:calc(11.8px*var(--fs));line-height:1.45}
.s-mn small{display:flex;align-items:center;gap:5px;color:var(--a-sub);font-size:10.5px;margin-bottom:2px}
.s-mn small svg{width:13px;height:13px}
.s-pill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:7px 14px;border-radius:999px;border:1px solid var(--a-p);color:var(--a-pd);font-size:11.5px;font-weight:500;background:var(--a-pl)}
.s-pill svg{width:14px;height:14px}
.s-pill.solid{background:var(--a-p);border-color:var(--a-p);color:#0f2a08;font-weight:600}
.sim[data-app="hanguljo"] .s-pill.solid{color:#4a0e26}
.sim[data-app="hanzijo"] .s-pill.solid{color:#3d2f00}
.s-center{text-align:center;margin-top:10px}
.s-pager{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.s-pager .s-ib{background:var(--a-sf);box-shadow:0 1px 0 var(--a-line)}
.s-pager b{font-size:12.5px;font-weight:600}
.s-pager b small{color:var(--a-sub);font-weight:400}
.s-pager i{display:block;height:3px;border-radius:2px;background:var(--a-p);margin:4px auto 0;width:22px}
.s-wordbig{font-family:var(--a-cjk);font-size:calc(52px*var(--fs));font-weight:600;text-align:center;line-height:1.5;margin-top:6px}
.s-wordbig rt{font-size:.3em}
.s-ex{background:var(--a-sf);border-radius:12px;padding:10px;margin-top:8px}
.s-ex .jp{font-family:var(--a-cjk);font-size:calc(16px*var(--fs));line-height:2.1}
.s-ex .en{color:var(--a-sub);font-size:11.5px}
.s-ex .s-ib{float:right;width:30px;height:30px;color:var(--a-pd)}

/* stroke order */
.s-stroke{position:absolute;inset:0;border-radius:22px;background:var(--a-card);padding:12px;display:flex;flex-direction:column;z-index:3}
.s-stroke header{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px}
.s-stroke header span{flex:1}
.s-chip{font-size:10.5px;font-weight:500;padding:3px 9px;border-radius:999px;background:var(--a-sf);color:var(--a-sub)}
.s-sq{position:relative;flex:1;margin:10px 4px;min-height:0;display:flex;align-items:center;justify-content:center}
.s-sq svg,.s-sq canvas{position:absolute;inset:0;margin:auto;height:100%;max-width:100%;aspect-ratio:1}
.s-sq canvas{touch-action:none;cursor:crosshair}
.brush .bg-line{stroke:rgba(0,0,0,.13);stroke-width:3;stroke-dasharray:14 14;fill:none}
.brush .ghost{fill:rgba(0,0,0,.09)}
.brush .ink{fill:none;stroke:var(--brush-ink,#1f1d1a);stroke-width:150;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.brush .ink.now{stroke:var(--brush-now,#2196F3)}
.s-phone[data-theme="dark"] .brush .ghost{fill:rgba(255,255,255,.12)}
.s-phone[data-theme="dark"] .brush .bg-line{stroke:rgba(255,255,255,.16)}
.s-phone[data-theme="dark"] .brush{--brush-ink:#EEF3EC}
.s-btnrow{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.s-btnrow .s-pill{padding:6px 10px;font-size:10.5px;background:var(--a-sf);border-color:var(--a-line);color:var(--a-tx)}
.s-btnrow .s-pill[aria-pressed="true"]{background:var(--a-pl);border-color:var(--a-p);color:var(--a-pd)}

/* quiz */
.s-qhead{display:flex;justify-content:space-between;align-items:flex-start;padding:0 16px 4px}
.s-qhead h1{font-size:14.5px;font-weight:600;text-align:center;flex:1}
.s-qhead .sc{text-align:right;font-size:9.5px;color:var(--a-sub);min-width:46px}
.s-qhead .sc b{display:block;font-size:14px;color:var(--a-pd)}
.s-prog{height:4px;border-radius:2px;background:var(--a-line);margin:6px 60px 4px;overflow:hidden}
.s-prog i{display:block;height:100%;background:var(--a-p);border-radius:2px;transition:width .3s}
.s-qn{text-align:center;color:var(--a-sub);font-size:11px;margin-bottom:8px}
.s-qcard{margin:0 16px;height:230px;border-radius:22px;background:var(--a-pl);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px}
.s-qcard small{color:var(--a-sub);font-size:12px;margin-bottom:6px}
.s-qcard b{font-family:var(--a-cjk);font-size:64px;font-weight:600;line-height:1.15}
.s-qcard b.txt{font-family:inherit;font-size:24px}
.s-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px}
.s-opt{min-height:64px;padding:8px;border-radius:14px;background:var(--a-sf);border:1.5px solid var(--a-line);font-weight:500;font-size:13px;text-align:center;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.s-opt.cjk{font-family:var(--a-cjk);font-size:18px}
.s-opt.ok{background:#E3F8EC;border-color:var(--a-ok);color:#066a46}
.s-opt.no{background:#FDE7E7;border-color:var(--a-no);color:#a11616;animation:sShake .3s}
.s-phone[data-theme="dark"] .s-opt.ok{background:#12382a;color:#8de9c2}
.s-phone[data-theme="dark"] .s-opt.no{background:#431a1a;color:#ffb1b1}
@keyframes sShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.s-opts.list{grid-template-columns:1fr}
.s-opts.list .s-opt{min-height:46px;justify-content:flex-start;gap:10px;text-align:left;padding:8px 12px}
.s-opt .n{width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;font-size:11px;display:flex;align-items:center;justify-content:center;flex:none;font-family:"Lexend",sans-serif;opacity:.75}
.s-explain{margin:0 16px 14px;padding:10px 12px;border-radius:12px;background:var(--a-sf);font-size:11.8px;line-height:1.5;border-left:3px solid var(--a-p)}
.s-result{padding:22px 20px;text-align:center}
.s-ring{width:132px;height:132px;margin:8px auto 14px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:conic-gradient(var(--a-p) calc(var(--v)*1%),var(--a-line) 0);position:relative}
.s-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--a-bg)}
.s-ring b,.s-ring small{position:relative}
.s-ring b{font-size:32px;font-weight:700}
.s-ring small{color:var(--a-sub);font-size:11px}
.s-result h2{font-size:18px;font-weight:600;margin-bottom:6px}
.s-result p{color:var(--a-sub);font-size:12.5px;margin-bottom:14px}
.s-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:14px;background:var(--a-p);color:#0f2a08;font-weight:600;font-size:13.5px;margin-top:8px}
.sim[data-app="hanguljo"] .s-btn{color:#4a0e26}
.sim[data-app="hanzijo"] .s-btn{color:#3d2f00}
.s-btn.ghost{background:var(--a-sf);border:1px solid var(--a-line);color:var(--a-tx);font-weight:500}
.s-btn[disabled]{opacity:.45;cursor:default}

/* grammar */
.s-gcard{background:var(--a-card);border-radius:22px;padding:14px}
.s-gbadge{display:inline-block;background:var(--a-p);color:#0f2a08;font-size:10px;font-weight:700;padding:3px 8px;border-radius:7px}
.s-gpat{font-family:var(--a-cjk);font-size:30px;font-weight:600;text-align:center;margin:10px 0 0}
.s-grom{text-align:center;font-style:italic;color:var(--a-sub);font-size:12px;margin-bottom:10px}
.s-gsec{margin-top:11px;font-size:12.3px;line-height:1.55}
.s-gbox{background:var(--a-sf);border-radius:10px;padding:8px 10px;font-family:var(--a-cjk);font-size:13.5px}
.s-gnote+.s-gnote{margin-top:6px}
.s-more{color:var(--a-pd);font-weight:600;font-size:11.5px;margin-top:4px}
.s-gex{background:var(--a-sf);border-radius:12px;padding:8px 10px;margin-top:7px;display:flex;gap:8px;align-items:flex-start}
.s-gex .jp{font-family:var(--a-cjk);font-size:16px;line-height:2}
.s-gex .en{color:var(--a-sub);font-size:11.5px}
.s-gex>div{flex:1}
.s-gex .s-ib{width:30px;height:30px;color:var(--a-pd)}
.s-w{border-bottom:1.5px dotted var(--a-pd);border-radius:0;font:inherit;display:inline}
.s-tip{color:var(--a-sub);font-size:10.5px;font-style:italic;display:flex;gap:5px;align-items:center;margin:6px 0 0}
.s-tip svg{width:13px;height:13px}
.s-cloze{font-family:var(--a-cjk);font-size:24px;text-align:center;font-weight:600}

/* sheet + toast */
.s-scrim{position:absolute;inset:0;background:rgba(0,0,0,.32);z-index:10;opacity:0;pointer-events:none;transition:opacity .2s}
.s-scrim.on{opacity:1;pointer-events:auto}
.s-sheet{position:absolute;left:0;right:0;bottom:0;z-index:11;background:var(--a-sf);border-radius:22px 22px 0 0;padding:10px 18px 30px;transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);max-height:70%;overflow:auto}
.s-sheet.on{transform:none}
.s-sheet::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--a-line);margin:0 auto 12px}
.s-sheet .w{font-family:var(--a-cjk);font-size:30px;font-weight:600;line-height:1.3}
.s-sheet .r{color:var(--a-pd);font-size:13px;font-family:var(--a-cjk)}
.s-sheet .m{font-size:14px;margin:6px 0 10px}
.s-sheet .tag{display:inline-block;font-size:10px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--a-pl);color:var(--a-pd);margin-bottom:6px}
.s-toast{position:absolute;left:50%;bottom:92px;transform:translate(-50%,12px);background:#1d211c;color:#fff;font-size:11.8px;padding:8px 14px;border-radius:999px;opacity:0;transition:opacity .2s,transform .2s;z-index:12;pointer-events:none;white-space:nowrap;max-width:90%}
.s-toast.on{opacity:1;transform:translate(-50%,0)}

/* conversation */
.s-cover{border-radius:18px;padding:14px;background:var(--a-card);margin-bottom:10px}
.s-cover small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--a-ink)}
.s-cover h2{font-family:var(--a-cjk);font-size:25px;font-weight:600;line-height:1.3}
.s-cover p{font-size:11.8px;color:var(--a-sub)}
.s-toggles{display:flex;gap:6px;margin:8px 0 12px;flex-wrap:wrap}
.s-tg{font-size:10.8px;padding:5px 10px;border-radius:999px;border:1px solid var(--a-line);background:var(--a-sf);color:var(--a-sub)}
.s-tg[aria-pressed="true"]{background:var(--a-pl);border-color:var(--a-p);color:var(--a-pd);font-weight:600}
.s-line{display:flex;gap:8px;margin-bottom:10px;align-items:flex-end}
.s-line.m{flex-direction:row-reverse}
.s-av{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--a-cjk);font-size:13px;font-weight:700;background:#FFE1EC;color:#B13A66}
.s-line.m .s-av{background:#DCEBFF;color:#2B5FA8}
.s-bub{max-width:82%;padding:9px 12px 8px;border-radius:16px 16px 16px 4px;background:var(--a-sf);box-shadow:0 1px 0 var(--a-line);text-align:left;display:block}
.s-line.m .s-bub{border-radius:16px 16px 4px 16px;background:var(--a-pl)}
.s-bub .jp{font-family:var(--a-cjk);font-size:15.5px;line-height:2}
.s-bub .ro{display:block;font-size:10.8px;color:var(--a-sub);font-style:italic}
.s-bub .en{display:block;font-size:11.3px;color:var(--a-sub);margin-top:2px}
.s-bub.now{outline:2px solid var(--a-p)}
.s-bub .kw{transition:color .15s}
.s-bub.now .kw.hit{color:var(--a-pd)}
.s-point{background:var(--a-sf);border-radius:14px;padding:10px 12px;margin-top:8px;font-size:11.8px;line-height:1.5}
.s-point b{font-family:var(--a-cjk);font-size:16px;display:block;line-height:1.9}
.s-point i{color:var(--a-sub);font-size:11px}
.s-point em{font-style:normal;color:var(--a-pd);font-weight:600}

/* shadowing */
.s-shcard{background:var(--a-card);border-radius:22px;padding:18px 14px;text-align:center;min-height:170px;display:flex;flex-direction:column;justify-content:center}
.s-shcard .jp{font-family:var(--a-cjk);font-size:21px;line-height:2.1;font-weight:600}
.s-shcard .jp .kw{border-radius:5px;padding:0 1px;transition:background .2s,color .2s}
.s-shcard .jp .kw.ok{color:#0a8a5b}
.s-shcard .jp .kw.miss{color:#c2410c;background:rgba(245,158,11,.22)}
.s-shcard .en{color:var(--a-sub);font-size:12px;margin-top:6px}
.s-mic{width:74px;height:74px;border-radius:50%;background:var(--a-p);color:#0f2a08;display:flex;align-items:center;justify-content:center;margin:18px auto 8px;position:relative}
.s-mic svg{width:30px;height:30px}
.s-mic.live{background:var(--a-no);color:#fff}
.s-mic.live::before,.s-mic.live::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--a-no);animation:sPulse 1.3s ease-out infinite}
.s-mic.live::after{animation-delay:.5s}
@keyframes sPulse{to{transform:scale(1.7);opacity:0}}
.s-wave{display:flex;gap:3px;justify-content:center;align-items:center;height:26px}
.s-wave i{width:3px;border-radius:2px;background:var(--a-p);height:6px}
.s-wave.live i{animation:sWave .7s ease-in-out infinite alternate}
.s-wave i:nth-child(3n){animation-delay:.12s}.s-wave i:nth-child(3n+1){animation-delay:.3s}.s-wave i:nth-child(4n){animation-delay:.45s}
@keyframes sWave{to{height:24px}}
.s-verdict{text-align:center;font-size:12.5px;font-weight:600;min-height:20px;margin-top:4px}
.s-fine{font-size:10.3px;color:var(--a-sub);text-align:center;margin-top:12px;line-height:1.5}

/* dictation */
.s-player{border-radius:18px;background:#1b211a;color:#fff;padding:14px;display:flex;align-items:center;gap:12px}
.s-player .s-play{background:var(--a-p);color:#0f2a08;width:44px;height:44px}
.s-player .s-wave{flex:1;justify-content:flex-start}
.s-player .s-wave i{background:rgba(255,255,255,.55)}
.s-player .s-tg{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.s-slots{min-height:104px;border-radius:16px;border:1.5px dashed var(--a-line);background:var(--a-sf);padding:10px;margin:12px 0;display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start}
.s-slots.ok{border-style:solid;border-color:var(--a-ok);background:#E9F9F0}
.s-phone[data-theme="dark"] .s-slots.ok{background:#12382a}
.s-slots.no{animation:sShake .3s;border-color:var(--a-no)}
.s-pool{display:flex;flex-wrap:wrap;gap:7px;min-height:52px}
.s-tok{font-family:var(--a-cjk);font-size:16px;line-height:1.9;padding:3px 11px 1px;border-radius:11px;background:var(--a-sf);border:1.5px solid var(--a-line);box-shadow:0 2px 0 var(--a-line)}
.s-tok[disabled]{opacity:.28;box-shadow:none}
.s-tok.bad{border-color:var(--a-no);color:#b91c1c}
.s-ans{font-size:12px;color:var(--a-sub);margin-top:8px;line-height:1.5}
.s-ans b{color:var(--a-tx);font-weight:500}

/* video */
.s-video{position:relative;height:186px;background:linear-gradient(180deg,#f3c46b 0%,#eaa955 55%,#6b8f4e 55%,#557a40 100%);overflow:hidden}
.sim[data-app="hanzijo"] .s-video{background:linear-gradient(180deg,#b7dcec 0%,#dcecf0 55%,#c9a56a 55%,#a98248 100%)}
.sim[data-app="hanguljo"] .s-video{background:linear-gradient(180deg,#f7c2d2 0%,#fde3ea 55%,#9fb9d8 55%,#7f9cc2 100%)}
.s-video .sun{position:absolute;right:38px;top:26px;width:44px;height:44px;border-radius:50%;background:#fff3c4}
.s-video .p1,.s-video .p2{position:absolute;bottom:0;width:78px;height:120px;border-radius:40px 40px 0 0;background:#d96b3c}
.s-video .p1{left:54px}.s-video .p2{left:150px;background:#f3e9da;height:108px}
.s-video .p1::before,.s-video .p2::before{content:"";position:absolute;left:50%;top:-34px;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:#f1c9a5}
.s-video .sub{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(0,0,0,.62);color:#fff;border-radius:10px;padding:6px 10px;font-family:var(--a-cjk);font-size:15px;text-align:center}
.s-video .tc{position:absolute;left:12px;top:10px;font-size:10px;color:#fff;background:rgba(0,0,0,.45);border-radius:6px;padding:2px 6px}
.s-video .s-play{position:absolute;left:50%;top:50%;margin:-34px 0 0 -24px;width:48px;height:48px;background:rgba(255,255,255,.9);color:#222}
.s-vline{background:var(--a-sf);border-radius:16px;padding:12px;margin:12px 0 4px}
.s-vline .jp{font-family:var(--a-cjk);font-size:19px;line-height:2.2}
.s-vline .vw{border-radius:6px;padding:1px 2px;font:inherit;font-family:var(--a-cjk);display:inline}
.s-vline .vw.known{border-bottom:2px solid var(--a-p)}
.s-vline .vw.sel{background:var(--a-pl)}
.s-vline .en{color:var(--a-sub);font-size:12px;margin-top:6px}
.s-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.s-two h4{font-size:12.5px;font-weight:600;margin-bottom:6px}
.s-two button{display:block;width:100%;background:var(--a-sf);border-radius:10px;padding:7px 10px;margin-bottom:6px;font-family:var(--a-cjk);font-size:14px;box-shadow:0 1px 0 var(--a-line)}

/* scanner */
.s-cam{position:relative;height:100%;min-height:600px;padding-top:46px;background:#111;color:#fff;display:flex;flex-direction:column}
.s-cam .s-appbar{background:transparent;color:#fff;position:relative}
.s-cam .s-ib:hover{background:rgba(255,255,255,.15)}
.s-scene{position:relative;flex:1;margin:6px 18px 0;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#6a5a48,#3d342b)}
.s-sign{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%) rotate(-2deg);width:230px;background:#f4ecd8;color:#211c15;border-radius:6px;padding:14px 14px 16px;font-family:"Shippori Mincho","Noto Serif JP","Noto Serif SC","Noto Serif KR",serif;box-shadow:0 18px 30px rgba(0,0,0,.45);text-align:center}
.s-sign .ban{background:#b3261e;color:#fff;font-size:30px;font-weight:700;letter-spacing:.14em;padding:6px 0;margin-bottom:12px}
.s-sign .rw{display:flex;justify-content:space-between;align-items:center;font-size:25px;font-weight:700;border-bottom:1.5px solid #211c15;padding:6px 4px}
.s-sign .rw small{font-size:14px;font-family:sans-serif}
.s-sign .nb{font-size:22px;font-weight:700;padding-top:10px;letter-spacing:.2em}
.s-sign .hit{outline:2px solid transparent;outline-offset:2px;border-radius:3px;transition:outline-color .2s}
.s-scene.done .hit{outline-color:#7CFF6B}
.s-corners i{position:absolute;width:26px;height:26px;border:3px solid #fff;opacity:.9}
.s-corners i:nth-child(1){left:14px;top:14px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.s-corners i:nth-child(2){right:14px;top:14px;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.s-corners i:nth-child(3){left:14px;bottom:14px;border-right:0;border-top:0;border-radius:0 0 0 8px}
.s-corners i:nth-child(4){right:14px;bottom:14px;border-left:0;border-top:0;border-radius:0 0 8px 0}
.s-beam{position:absolute;left:0;right:0;top:0;height:3px;background:#7CFF6B;box-shadow:0 0 18px 6px rgba(124,255,107,.5);opacity:0}
.s-scene.run .s-beam{opacity:1;animation:sBeam 1.3s ease-in-out}
@keyframes sBeam{from{top:4%}to{top:94%}}
.s-shut{flex:none;padding:14px 0 30px;text-align:center}
.s-shut p{font-size:11.5px;opacity:.8;margin-bottom:10px}
.s-shut button{width:66px;height:66px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.35);background-clip:padding-box}
.s-rowbtn{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border-radius:12px;background:var(--a-pl);color:var(--a-pd);font-size:12px;font-weight:500;margin-bottom:8px;border:1px solid var(--a-line)}
.s-seg{display:flex;gap:6px;margin:4px 0 10px}
.s-seg button{flex:1;padding:8px 4px;border-radius:10px;font-size:11.5px;font-weight:500;color:var(--a-sub);text-align:center}
.s-seg button[aria-selected="true"]{background:var(--a-p);color:#0f2a08;font-weight:600}
.s-item{display:flex;gap:12px;align-items:center;background:var(--a-sf);border-radius:16px;padding:11px 12px;margin-bottom:9px;box-shadow:0 1px 0 var(--a-line)}
.s-item .k{font-family:var(--a-cjk);font-size:36px;line-height:1;color:#E5484D;min-width:42px;text-align:center}
.s-item .k.w{font-size:22px;color:var(--a-tx);min-width:64px}
.s-item .d{flex:1;font-size:11.3px;color:var(--a-sub);line-height:1.5}
.s-item .d b{color:var(--a-tx);font-size:13.5px;font-weight:600;margin-left:6px}
.s-item .d .t{display:inline-block;font-size:9.5px;font-weight:600;color:#C2362F;background:#FDE8E7;border-radius:5px;padding:1px 6px}
.s-item .s-ib{color:var(--a-pd);background:var(--a-pl);width:30px;height:30px}

/* analyser */
.s-input{background:var(--a-sf);border:1.5px solid var(--a-line);border-radius:14px;padding:11px 12px;font-family:var(--a-cjk);font-size:16px;line-height:1.7;min-height:66px}
.s-input::after{content:"";display:inline-block;width:1.5px;height:1em;background:var(--a-pd);vertical-align:-2px;margin-left:1px;animation:sBlink 1s steps(2) infinite}
@keyframes sBlink{50%{opacity:0}}
.s-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 12px}
.s-toks{display:flex;flex-wrap:wrap;gap:6px 5px;margin:10px 0}
.s-atok{display:flex;flex-direction:column;align-items:center;padding:6px 8px 5px;border-radius:11px;background:var(--a-sf);box-shadow:0 1px 0 var(--a-line);opacity:0;animation:sPop .3s forwards}
@keyframes sPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.s-atok b{font-family:var(--a-cjk);font-size:17px;font-weight:600;line-height:1.9}
.s-atok small{font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.s-atok.noun small{color:#2563EB}.s-atok.verb small{color:#DB2777}.s-atok.particle small{color:#9CA3AF}.s-atok.aux small{color:#D97706}.s-atok.adj small{color:#059669}
.s-atok.noun{border-bottom:2.5px solid #93B4F8}.s-atok.verb{border-bottom:2.5px solid #F29BC3}.s-atok.particle{border-bottom:2.5px solid #D1D5DB}.s-atok.aux{border-bottom:2.5px solid #F0C27A}.s-atok.adj{border-bottom:2.5px solid #86D9B9}
.s-atok.adv small{color:#7C3AED}.s-atok.adv{border-bottom:2.5px solid #C4B5FD}.s-atok.conj small{color:#0891B2}.s-atok.conj{border-bottom:2.5px solid #A5E4F0}
.s-gfound{display:flex;gap:10px;align-items:flex-start;background:var(--a-sf);border-radius:12px;padding:9px 11px;margin-bottom:7px;font-size:11.5px;color:var(--a-sub);line-height:1.45}
.s-gfound b{display:block;font-family:var(--a-cjk);color:var(--a-tx);font-size:14px;font-weight:600}
.s-lv{flex:none;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--a-p);color:#0f2a08}

/* mock exam */
.s-steps{display:flex;align-items:flex-start;justify-content:space-between;padding:2px 26px 8px;position:relative}
.s-steps::before{content:"";position:absolute;left:44px;right:44px;top:14px;height:1.5px;background:var(--a-line)}
.s-step{position:relative;text-align:center;font-size:9px;color:var(--a-sub);width:60px}
.s-step i{display:flex;width:26px;height:26px;margin:0 auto 3px;border-radius:50%;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:600;background:var(--a-bg);border:1.5px solid var(--a-line)}
.s-step.on i{background:var(--a-p);border-color:var(--a-p);color:#0f2a08}
.s-step.on{color:var(--a-pd);font-weight:600}
.s-box{background:var(--a-sf);border-radius:16px;padding:12px;margin-bottom:10px;box-shadow:0 1px 0 var(--a-line)}
.s-box h3{font-size:12.5px;font-weight:600;display:flex;justify-content:space-between;gap:8px}
.s-timer{display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;color:var(--a-pd);font-size:12px;white-space:nowrap}
.s-timer svg{width:14px;height:14px}
.s-nums{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.s-nums i{width:20px;height:20px;border-radius:50%;border:1.3px solid var(--a-line);font-style:normal;font-size:9.5px;display:flex;align-items:center;justify-content:center;color:var(--a-sub)}
.s-nums i.done{background:var(--a-p);border-color:var(--a-p);color:#0f2a08;font-weight:600}
.s-nums i.cur{border-color:var(--a-pd);color:var(--a-pd);font-weight:700}
.s-ins{font-size:11px;color:var(--a-sub);line-height:1.5;margin-bottom:8px}
.s-mq{font-family:var(--a-cjk);font-size:17px;line-height:1.9;font-weight:500}
.s-mq u{text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--a-pd)}
.s-bars{margin:12px 0;text-align:left}
.s-bar{font-size:11.5px;margin-bottom:8px}
.s-bar span{display:flex;justify-content:space-between}
.s-bar i{display:block;height:7px;border-radius:4px;background:var(--a-line);margin-top:3px;overflow:hidden}
.s-bar i b{display:block;height:100%;background:var(--a-p);border-radius:4px}
.s-rev{text-align:left;font-size:11.5px;line-height:1.5;border-top:1px solid var(--a-line);padding:9px 0}
.s-rev b{font-family:var(--a-cjk);font-size:13.5px;display:block}
.s-rev .v{font-weight:600}
.s-rev .v.ok{color:var(--a-ok)}.s-rev .v.no{color:var(--a-no)}

/* widgets (iOS home + lock screen) */
.s-ios{position:absolute;inset:0;background:linear-gradient(155deg,#f6b7a6 0%,#f0a9c0 34%,#8fb2e0 70%,#3f7fb6 100%);color:#fff;display:flex;flex-direction:column;padding:50px 16px 24px}
.sim[data-app="hanzijo"] .s-ios{background:linear-gradient(155deg,#f9df9b 0%,#f2b56b 38%,#c8683f 74%,#63323a 100%)}
.sim[data-app="hanguljo"] .s-ios{background:linear-gradient(155deg,#ffd2de 0%,#f7a4c0 36%,#b79be0 72%,#5f6fc0 100%)}
.s-ios.lock{align-items:center;background:linear-gradient(180deg,#5c8be0 0%,#7ba8ee 45%,#a99df0 100%)}
.sim[data-app="hanzijo"] .s-ios.lock{background:linear-gradient(180deg,#3a2a22 0%,#8a4a2c 55%,#e0a04a 100%)}
.sim[data-app="hanguljo"] .s-ios.lock{background:linear-gradient(180deg,#e58aa9 0%,#f3b0c6 50%,#c9b3ee 100%)}
.s-iosbar{display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(0,0,0,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);align-self:center;margin-bottom:12px;position:relative;z-index:2}
.s-iosbar button{font-size:10.5px;padding:5px 10px;border-radius:999px;color:#fff;font-weight:500}
.s-iosbar button[aria-selected="true"]{background:#fff;color:#111;font-weight:600}
.s-wg{background:var(--a-sf);color:var(--a-tx);border-radius:22px;padding:11px 12px;box-shadow:0 10px 24px -14px rgba(0,0,0,.5);position:relative}
.s-wg.md{display:grid;grid-template-columns:1fr 1.15fr;gap:10px;min-height:128px}
.s-wg .seed{display:inline-flex;align-items:center;gap:3px;background:var(--a-p);color:#0f2a08;font-size:8.5px;font-weight:700;border-radius:999px;padding:2px 7px}
.s-wg .rf{position:absolute;right:10px;top:9px;width:24px;height:24px;border-radius:50%;background:var(--a-p);color:#0f2a08;display:flex;align-items:center;justify-content:center}
.s-wg .rf svg{width:13px;height:13px}
.s-wg.md .rf{right:auto;left:calc(46.5% - 34px)}
.s-wg .c{font-family:var(--a-cjk);font-size:34px;font-weight:600;text-align:center;line-height:1.2;margin-top:8px}
.s-wg .r{text-align:center;font-size:10px;color:var(--a-sub);font-family:var(--a-cjk)}
.s-wg .m{text-align:center;font-size:10.5px;color:var(--a-pd);font-weight:500}
.s-wg .bar{height:3px;border-radius:2px;background:var(--a-p);width:70%;margin:6px auto 0}
.s-wg .mn{font-size:10.3px;line-height:1.45;border-left:1px solid var(--a-line);padding-left:10px}
.s-wg .mn small{display:block;font-size:8px;letter-spacing:.07em;font-weight:700;color:var(--a-sub);margin-bottom:3px}
.s-iosrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.s-apps{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;align-content:start}
.s-apps i{display:block;aspect-ratio:1;border-radius:15px;background:rgba(255,255,255,.3);backdrop-filter:blur(4px)}
.s-apps i:nth-child(2){background:rgba(255,255,255,.5)}.s-apps i:nth-child(3){background:rgba(20,20,30,.45)}
.s-wg.quiz{margin-top:14px}
.s-wg.quiz .hd{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;font-weight:700;color:var(--a-pd)}
.s-wg.quiz .c{font-size:38px;margin-top:0}
.s-wq{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.s-wq button{padding:9px 4px;border-radius:10px;border:1px solid var(--a-line);font-size:10.8px;text-align:center;background:var(--a-bg)}
.s-wq button.ok{background:#1f8a4c;border-color:#1f8a4c;color:#fff}
.s-wq button.no{background:#c0392b;border-color:#c0392b;color:#fff}
.s-ltime{font-size:76px;font-weight:300;line-height:1;letter-spacing:-.02em;margin-top:4px}
.s-ldate{font-size:14px;font-weight:500;opacity:.92;margin-top:14px}
.s-lwg{margin-top:12px;display:flex;gap:10px;align-items:center;align-self:stretch;padding:9px 12px;border-radius:16px;background:rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:left}
.s-lwg b{font-family:var(--a-cjk);font-size:26px;font-weight:600;line-height:1.15}
.s-lwg span{font-size:11.5px;line-height:1.4;flex:1}
.s-lwg span small{display:block;opacity:.8;font-family:var(--a-cjk)}
.s-lfoot{margin-top:auto;display:flex;justify-content:space-between;align-self:stretch;padding:0 20px 12px}
.s-lfoot i{width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.3)}
.s-lhint{font-size:10.5px;opacity:.85;margin-top:10px;text-align:center}

/* review + stats + settings */
.s-water{background:var(--a-pl);border-radius:20px;padding:16px;margin-bottom:12px}
.s-water small{font-size:9.5px;letter-spacing:.09em;font-weight:700;color:var(--a-ink);text-transform:uppercase}
.s-water h2{font-size:19px;font-weight:600;margin:2px 0 4px}
.s-water p{font-size:11.8px;color:var(--a-sub);margin-bottom:10px}
.s-statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.s-stat{background:var(--a-sf);border-radius:16px;padding:12px;box-shadow:0 1px 0 var(--a-line)}
.s-stat small{font-size:10.5px;color:var(--a-sub)}
.s-stat b{display:block;font-size:22px;font-weight:600}
.s-stat b span{font-size:11.5px;font-weight:500;color:var(--a-sub)}
.s-garden{border-radius:18px;margin-top:12px;overflow:hidden;background:linear-gradient(180deg,#bfe6f5 0%,#e6f6ee 62%,#8cc871 62%,#6fb257 100%);height:178px;position:relative}
.s-phone[data-theme="dark"] .s-garden{background:linear-gradient(180deg,#141a33 0%,#27314f 62%,#2c5a2a 62%,#1f4320 100%)}
.s-garden svg{position:absolute;inset:0;width:100%;height:100%}
.s-stages{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.s-stages div{text-align:center;font-size:8px;color:var(--a-sub);line-height:1.25}
.s-stages b{display:block;font-size:13px;color:var(--a-tx)}
.s-stages svg{width:26px;height:26px;display:block;margin:0 auto}
.s-set{background:var(--a-sf);border-radius:16px;box-shadow:0 1px 0 var(--a-line);margin-bottom:12px;overflow:hidden}
.s-setrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--a-line);font-size:12.8px;width:100%}
.s-setrow:last-child{border:0}
.s-setrow span{flex:1}
.s-setrow span small{display:block;color:var(--a-sub);font-size:10.5px}
.s-sw{width:42px;height:25px;border-radius:13px;background:var(--a-line);position:relative;flex:none;transition:background .2s}
.s-sw::after{content:"";position:absolute;left:3px;top:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.s-sw[aria-checked="true"]{background:var(--a-p)}
.s-sw[aria-checked="true"]::after{transform:translateX(17px)}
.s-sizes{display:flex;gap:6px}
.s-sizes button{width:30px;height:30px;border-radius:9px;border:1px solid var(--a-line);font-weight:600;display:flex;align-items:center;justify-content:center}
.s-sizes button[aria-pressed="true"]{background:var(--a-pl);border-color:var(--a-p);color:var(--a-pd)}
.s-three{display:flex;gap:8px}
.s-three img{width:34px;height:34px;border-radius:9px}
.s-recall{background:var(--a-card);border-radius:22px;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;text-align:center}
.s-recall .c{font-family:var(--a-cjk);font-size:110px;font-weight:600;line-height:1.1}
.s-recall .a{font-size:14px;margin-top:6px}
.s-recall .a small{display:block;color:var(--a-sub);font-family:var(--a-cjk);font-size:13px}
.s-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.s-grow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;color:var(--a-sub);margin-top:12px;min-height:44px}
.s-grow svg{width:40px;height:40px}
.s-grow b{color:var(--a-pd)}

/* kana */
.s-kana{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.s-kana button{aspect-ratio:1;border-radius:12px;background:var(--a-sf);box-shadow:0 1px 0 var(--a-line);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--a-cjk);font-size:22px;font-weight:600;line-height:1.1}
.s-kana button small{font-family:"Lexend",sans-serif;font-size:8.5px;font-weight:400;color:var(--a-sub)}
.s-kana button.sel{background:var(--a-pl);outline:1.5px solid var(--a-p)}
.s-kana span{display:block}
.s-kbig{height:190px;border-radius:20px;background:var(--a-card);margin-bottom:12px;position:relative;display:flex;align-items:center;justify-content:center}
.s-kbig svg.brush{height:86%;aspect-ratio:1}
.s-kbig .txt{font-family:var(--a-cjk);font-size:110px;font-weight:600}
.s-kbig .ro{position:absolute;left:14px;top:10px;font-size:13px;font-weight:600;color:var(--a-pd)}
.s-kbig .s-ib{position:absolute;right:10px;top:8px;background:var(--a-sf)}

@media (prefers-reduced-motion:reduce){
  .sim *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* tone trainer (Hanzijo) */
.s-phone{--tone1:#E53935;--tone2:#FB8C00;--tone3:#43A047;--tone4:#1E88E5;--tone5:#9E9E9E}
.sim .t1{color:var(--tone1)}.sim .t2{color:var(--tone2)}.sim .t3{color:var(--tone3)}.sim .t4{color:var(--tone4)}.sim .t5{color:var(--tone5)}
/* hangul block builder (Hanguljo) */
.s-jstage{display:flex;align-items:center;justify-content:center;gap:14px;background:var(--a-card);border-radius:22px;padding:18px 10px}
.s-jblock{width:112px;height:112px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:5px}
.s-jblock.v{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.s-jblock.t{grid-template-rows:1.25fr .9fr}
.s-jblock.v.t{grid-template-rows:1fr 1fr .9fr}
.s-jblock i{display:flex;align-items:center;justify-content:center;border-radius:10px;font-style:normal;font-family:var(--a-cjk);font-weight:700;font-size:30px;line-height:1;color:#fff;animation:sPop .3s both}
.s-jblock .a{background:#EC407A}.s-jblock .b{background:#5C7FD6;animation-delay:.06s}.s-jblock .c{background:#3F9E72;grid-column:1/-1;animation-delay:.12s}
.s-jstage .eq{font-size:22px;color:var(--a-sub)}
.s-jsyl{width:112px;height:112px;border-radius:20px;background:var(--a-sf);font-family:var(--a-cjk);font-size:76px;font-weight:700;line-height:112px;text-align:center;box-shadow:0 1px 0 var(--a-line)}
.s-jrow{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.s-jrow::-webkit-scrollbar{display:none}
.s-jrow button{flex:none;width:44px;height:50px;border-radius:12px;background:var(--a-sf);box-shadow:0 1px 0 var(--a-line);font-family:var(--a-cjk);font-size:20px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.s-jrow button small{font-family:"Lexend",sans-serif;font-size:8.5px;font-weight:400;color:var(--a-sub)}
.s-jrow button.sel{background:var(--a-pl);outline:1.5px solid var(--a-p)}

/* Korean words are wider than a single character */
.sim[data-app="hanguljo"] .s-face.front .s-bigch{font-size:calc(104px*var(--fs))}
.sim[data-app="hanguljo"] .s-face.back .s-bigch{font-size:calc(46px*var(--fs))}
.sim[data-app="hanguljo"] .s-recall .c{font-size:84px}
.sim[data-app="hanguljo"] .s-qcard b{font-size:52px}
/* fill-in-the-blank sentence of the grammar quiz: .s-qcard b (64px, 52px for Korean) is for a single character or word (20 Oct 2026) */
.sim .s-qcard b.s-cloze{font-size:26px;line-height:1.35;text-wrap:balance;word-break:keep-all}
.sim[data-app="hanguljo"] .s-item .k.w{color:#C2386C}
.sim[data-app="hanguljo"] .s-sign,.sim[data-app="hanguljo"] .s-sign .ban{font-family:"Black Han Sans","Noto Sans KR",sans-serif;font-weight:400}
.sim[data-app="hanguljo"] .s-sign .ban{background:#C2386C}
.sim[data-app="hanzijo"] .s-sign .ban{letter-spacing:.3em}

/* Study lock screen wallpaper: study panels drawn onto a photo */
.s-lw{--lw:119,217,89;position:absolute;inset:0;color:#fff;display:flex;flex-direction:column;align-items:stretch;padding:50px 12px 18px;overflow:hidden;background:#222}
.sim[data-app="hanzijo"] .s-lw{--lw:245,200,75}
.sim[data-app="hanguljo"] .s-lw{--lw:247,160,196}
.s-lw .lw-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.s-lw>*:not(.lw-bg){position:relative;z-index:1}
.s-lw .s-iosbar{margin-bottom:6px}
.s-lw .s-iosbar button[aria-selected="true"]{background:rgba(var(--lw),.95);color:#111}
.lw-date{text-align:center;font-size:13.5px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.25)}
.lw-time{text-align:center;font-size:64px;font-weight:600;line-height:1;letter-spacing:-.02em;margin:0 0 10px;text-shadow:0 2px 12px rgba(0,0,0,.2)}
.lw-panels{display:flex;flex-direction:column;gap:8px}
.lw-p{border-radius:20px;padding:10px 13px 11px;background:rgba(18,18,20,.34);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);transition:opacity .35s,transform .35s}
.lw-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.lw-h b{font-size:13px;font-weight:700}
.lw-badge{min-width:30px;text-align:center;background:#fff;color:#111;font-weight:700;font-size:12px;border-radius:999px;padding:1px 8px}
.lw-acc{color:rgb(var(--lw));font-size:11.5px;font-weight:600}
.lw-w{display:grid;grid-template-columns:auto auto 1fr;gap:9px;align-items:center;padding:2px 0}
.lw-w .w{font-family:var(--a-cjk);font-size:21px;font-weight:600;line-height:1.15}
.lw-w .rd{display:flex;flex-direction:column;line-height:1.15;font-size:10.5px}
.lw-w .rd small{font-family:var(--a-cjk);font-size:9.5px;opacity:.9}
.lw-w .rd i{font-style:normal;color:rgb(var(--lw));font-weight:500}
.lw-w .mn{text-align:right;font-size:11.5px;opacity:.95}
.lw-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.lw-cal em{font-style:normal;text-align:center;font-size:8.5px;opacity:.75;font-weight:600}
.lw-cal i{font-style:normal;text-align:center;font-size:9.5px;font-weight:600;line-height:19px;border-radius:6px;border:1.5px solid transparent}
.lw-cal .l0{background:rgba(255,255,255,.12)}
.lw-cal .l1{background:rgba(var(--lw),.4)}
.lw-cal .l2{background:rgba(var(--lw),.62)}
.lw-cal .l3{background:rgba(var(--lw),.9);color:#14210f}
.sim[data-app="hanzijo"] .lw-cal .l3{color:#2a2000}
.sim[data-app="hanguljo"] .lw-cal .l3{color:#3a1222}
.lw-cal .fut{border-color:rgba(255,255,255,.2);opacity:.55}
.lw-cal .today{border-color:#fff}
.lw-foot{font-size:10px;opacity:.85;margin-top:6px}
.lw-big{font-size:21px;font-weight:700;line-height:1.2;margin:2px 0 7px}
.lw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lw-stats.n2{grid-template-columns:repeat(2,1fr)}
.lw-stats small{display:block;font-size:9.5px;opacity:.8}
.lw-stats b{display:block;font-size:13px;margin:1px 0 4px}
.lw-bar{display:block;height:4px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}
.lw-bar i{display:block;height:100%;border-radius:3px;background:rgb(var(--lw));transition:width .5s}
.lw-todo{list-style:none;display:flex;flex-direction:column;gap:5px;font-size:12px}
.lw-todo li{display:flex;align-items:center;gap:8px}
.lw-todo li::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;border:2px solid rgb(var(--lw))}
.lw-note{margin-top:auto;text-align:center;font-size:10px;opacity:.9;padding:8px 18px 0;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.s-lw.lw-shut .lw-p,.s-lw.lw-shut .lw-note{opacity:0;transform:scale(.97)}
.s-lw.lw-new .lw-p{animation:lwGlow 1.4s ease-out}
@keyframes lwGlow{from{outline:2px solid rgba(var(--lw),.95);outline-offset:0}to{outline:2px solid rgba(var(--lw),0);outline-offset:4px}}
.lw-sh{font-size:14px;font-weight:600;margin:6px 0 2px}
.lw-shs{font-size:11px;color:var(--a-sub);line-height:1.45;margin-bottom:8px}
.lw-mods{display:flex;flex-direction:column;gap:6px}
.lw-mods button{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:9px 11px;border-radius:14px;border:1.5px solid var(--a-line);background:var(--a-sf)}
.lw-mods button[aria-pressed="true"]{border-color:var(--a-p);background:var(--a-pl)}
.lw-mods .n{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--a-line);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.lw-mods button[aria-pressed="true"] .n{background:var(--a-p);border-color:var(--a-p);color:#111}
.lw-mods b{display:block;font-size:12.5px}
.lw-mods small{display:block;font-size:10.5px;color:var(--a-sub);line-height:1.35}
.lw-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lw-photos button{position:relative;border-radius:12px;overflow:hidden;height:86px;border:2px solid transparent}
.lw-photos button[aria-pressed="true"]{border-color:var(--a-p)}
.lw-photos .lw-bg{position:absolute;inset:0;width:100%;height:100%}
.lw-photos span{position:absolute;left:0;right:0;bottom:0;font-size:10px;color:#fff;padding:3px 6px;background:rgba(0,0,0,.35);text-align:center}
.lw-lvs{display:flex;flex-wrap:wrap;gap:6px}
.lw-lvs button{font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px;border:1.5px solid var(--a-line)}
.lw-lvs button[aria-pressed="true"]{background:var(--a-p);border-color:var(--a-p);color:#111}