/* Layout: compact sidebar + one calm centred column; one primary action per screen. */
:root{
  --bg:#FFF8EE; --surface:#FFFFFF; --surface-2:#FFF1E0; --ink:#2A2733; --ink-2:#615B6E; --line:#EEE3D2;
  --focus:#2F6FDB; --on-accent:#24212C;
  --mint:#D5F3E5; --mint-ink:#16694A; --mint-strong:#63CB9E;
  --lav:#EAE2FC; --lav-ink:#553EA3; --lav-strong:#A18BEB;
  --sky:#D9EDFC; --sky-ink:#1B5E95; --sky-strong:#74B6EC;
  --peach:#FFE4D3; --peach-ink:#A1461F; --peach-strong:#F7A074;
  --butter:#FFF2B8; --butter-ink:#735700; --butter-strong:#F3CF4C;
  --pink:#FFDFEA; --pink-ink:#A2325F; --pink-strong:#F290B4;
  --good:#16694A; --good-bg:#D5F3E5; --oops:#A1461F; --oops-bg:#FFE4D3;
  --shadow:0 1px 2px rgba(90,60,20,.05),0 8px 24px rgba(90,60,20,.06);
  --f-display:"Fredoka","Baloo 2",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --f-body:"Lexend","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-lg:24px; --r-md:18px; --r-sm:12px;
}



*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55;margin:0}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.2;margin:0;text-wrap:balance}
h1{font-size:clamp(26px,3.4vw,34px)} h2{font-size:22px} h3{font-size:18px}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:10px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.acc-cream{--a:var(--surface-2);--ai:var(--ink);--as:var(--peach-strong)}
.acc-mint{--a:var(--mint);--ai:var(--mint-ink);--as:var(--mint-strong)}
.acc-lav{--a:var(--lav);--ai:var(--lav-ink);--as:var(--lav-strong)}
.acc-sky{--a:var(--sky);--ai:var(--sky-ink);--as:var(--sky-strong)}
.acc-peach{--a:var(--peach);--ai:var(--peach-ink);--as:var(--peach-strong)}
.acc-butter{--a:var(--butter);--ai:var(--butter-ink);--as:var(--butter-strong)}
.acc-pink{--a:var(--pink);--ai:var(--pink-ink);--as:var(--pink-strong)}

/* Shell */
#app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
#side{position:sticky;top:0;height:100vh;overflow-y:auto;padding:18px 12px 18px max(12px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line);background:var(--bg);z-index:30}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 12px;font:600 19px var(--f-display)}
.who{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;margin-bottom:10px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--surface);cursor:pointer;text-align:left}
.who .nm{font:600 17px var(--f-display);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .sw{font-size:13px;color:var(--ink-2)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:12px;min-height:46px;padding:6px 10px;border-radius:14px;text-decoration:none;font-weight:500;color:var(--ink)}
.nav-item .ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--a);color:var(--ai);flex:none}
.nav-item:hover{background:var(--surface)}
.nav-item[aria-current="page"]{background:var(--a);color:var(--ai);font-weight:600}
.nav-item[aria-current="page"] .ic{background:var(--surface)}
.nav-item .ext{margin-left:auto;opacity:.7}
.side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
#topbar{display:none}
#main{min-width:0;padding-block:28px 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.scrim{display:none}

@media (max-width:900px){
  #app{grid-template-columns:1fr}
  #topbar{display:flex;align-items:center;gap:10px;position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line);padding-block:8px;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
  body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bg)}
  #topbar .brand{padding:0;flex:1;font-size:18px}
  #side{position:fixed;inset:0 auto 0 0;width:280px;max-width:86vw;transform:translateX(-105%);transition:transform .2s ease;box-shadow:var(--shadow)}
  #side.open{transform:none}
  .scrim.open{display:block;position:fixed;inset:0;background:rgba(30,25,40,.35);z-index:25}
  #main{padding-block:20px 56px}
}

/* Common pieces */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:600 17px var(--f-display);cursor:pointer;text-decoration:none;text-align:center;line-height:1.2}
.btn:hover{border-color:var(--ink-2)}
.btn-primary{background:var(--as,var(--peach-strong));border-color:var(--as,var(--peach-strong));color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.04);border-color:var(--as)}
.btn-big{min-height:64px;font-size:20px;padding:0 30px;width:100%}
.btn-sm{min-height:42px;padding:0 16px;font-size:15px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.link{background:none;border:0;padding:4px 2px;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.icon-btn{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;flex:none}
.card{background:var(--surface);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow);border:1px solid var(--line)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:600;background:var(--a,var(--surface-2));color:var(--ai,var(--ink));white-space:nowrap}
.chip.plain{background:var(--surface-2);color:var(--ink-2)}
.chip.good{background:var(--good-bg);color:var(--good)}
.muted{color:var(--ink-2)}
.small{font-size:14px}
.eyebrow{font-size:14px;color:var(--ink-2);font-weight:500}
.page-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.page-head .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.head-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--a);color:var(--ai);flex:none}
.back{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;color:var(--ink-2);align-self:flex-start}
.row-actions{display:flex;flex-wrap:wrap;gap:10px}
.h-sm{font-size:17px;color:var(--ink-2);font-family:var(--f-body);font-weight:600}
details>summary{cursor:pointer;font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:8px;padding:6px 0}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"+";display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--surface-2);font-weight:700}
details[open]>summary::before{content:"–"}

/* Lists */
.list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.row{display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;border-radius:var(--r-md);background:var(--surface);border:1.5px solid var(--line);text-align:left;text-decoration:none;color:var(--ink);cursor:pointer;min-height:64px}
.row:hover{border-color:var(--as,var(--ink-2))}
.row .tile-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--a);color:var(--ai);flex:none}
.row .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row .t{font-weight:600}
.row .s{font-size:14px;color:var(--ink-2)}
.row .end{display:flex;align-items:center;gap:8px;flex:none}
.group-h{font:600 15px var(--f-body);color:var(--ink-2);margin:8px 0 2px;letter-spacing:.02em}
.bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;min-width:60px}
.bar>span{display:block;height:100%;background:var(--as,var(--mint-strong));border-radius:99px}
.dots{display:inline-flex;gap:3px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line)}
.dots i.on{background:var(--mint-strong);border-color:var(--mint-strong)}

/* Today */
.hello{display:flex;align-items:center;gap:14px}
.path{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;list-style:none;margin:16px 0 20px;padding:0}
.step{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:12px 4px;border-radius:var(--r-md);border:2px solid transparent;background:none;cursor:pointer;color:var(--ink)}
.step .step-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--a);color:var(--ai);position:relative}
.step .step-l{font-weight:600;font-size:15px}
.step.is-next{border-color:var(--as);background:var(--surface-2)}
.step.is-done .step-ic{background:var(--good-bg);color:var(--good)}
.step.is-done .step-l{color:var(--ink-2)}
.next-sub{text-align:center;margin-top:10px;color:var(--ink-2);font-size:14px}
.done-box{display:flex;align-items:center;gap:16px;padding:6px 0 4px;flex-wrap:wrap}
.tasks{display:flex;flex-direction:column;gap:10px;list-style:none;margin:12px 0 0;padding:0}
.task{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px;border-radius:var(--r-md);background:var(--a);}
.task .tile-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface);color:var(--ai);flex:none}
.task .main{flex:1;min-width:180px}
.task .t{font-weight:600}
.task .s{font-size:14px;color:var(--ink-2)}
.task .acts{display:flex;gap:8px;flex-wrap:wrap}

/* Quiz */
.quiz{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.quiz-top{display:flex;align-items:center;gap:12px}
.quiz-top .ttl{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.quiz-top .ttl b{font:600 17px var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.prog span{display:block;height:100%;background:var(--as);border-radius:99px;transition:width .25s ease}
.q-card{background:var(--surface);border-radius:var(--r-lg);padding:26px 24px;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:18px}
.instr{color:var(--ink-2);font-weight:500;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prompt{font:500 clamp(20px,2.6vw,24px)/1.45 var(--f-body);outline:none}
.prompt.ctx{font-size:17px;color:var(--ink-2);background:var(--surface-2);padding:10px 14px;border-radius:12px}
.blank{display:inline-block;min-width:3.2em;border-bottom:3px solid var(--as);margin:0 3px;height:1.1em;vertical-align:baseline}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:10px 16px;border-radius:16px;border:2px solid var(--line);background:var(--surface);text-align:left;cursor:pointer;font-size:18px}
.opt:hover:not([disabled]){border-color:var(--as)}
.opt .k{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--surface-2);font-size:14px;font-weight:700;flex:none;color:var(--ink-2)}
.opt.is-right{background:var(--good-bg);border-color:var(--good)}
.opt.is-wrong{background:var(--oops-bg);border-color:var(--oops)}
.opt.is-out{opacity:.4}
.opt[disabled]{cursor:default}
.opt u,.prompt u{text-decoration-thickness:3px;text-underline-offset:4px}
.gap-form{display:flex;gap:10px;flex-wrap:wrap}
.gap-form input{flex:1;min-width:200px;min-height:56px;padding:0 18px;border-radius:16px;border:2px solid var(--line);background:var(--bg);font-size:20px}
.gap-form input:focus{border-color:var(--as);outline:none}
.answer-line{min-height:64px;border:2px dashed var(--line);border-radius:16px;padding:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.answer-line .ph{color:var(--ink-2);font-size:15px;padding:0 8px}
.bank{display:flex;flex-wrap:wrap;gap:8px}
.tile{min-height:48px;padding:0 16px;border-radius:12px;border:2px solid var(--line);background:var(--surface);font-size:18px;cursor:pointer}
.tile.in{background:var(--a);border-color:var(--as)}
.tile[disabled]{visibility:hidden}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-size:15px;font-weight:600;cursor:pointer}
.pill:hover{border-color:var(--ink-2)}
.hint-box{background:var(--butter);color:var(--butter-ink);border-radius:12px;padding:10px 14px;font-weight:500}
.fb{border-radius:16px;padding:14px 18px;display:flex;flex-direction:column;gap:6px}
.fb strong{font:600 19px var(--f-display)}
.fb.good{background:var(--good-bg)} .fb.good strong{color:var(--good)}
.fb.oops,.fb.try{background:var(--oops-bg)} .fb.oops strong,.fb.try strong{color:var(--oops)}
.learn-word{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.learn-word .w{font:600 clamp(30px,4vw,40px) var(--f-display)}
.learn-def{font-size:20px}
.learn-ex{font-size:18px;background:var(--surface-2);padding:12px 16px;border-radius:14px}
.vi{background:var(--pink);color:var(--pink-ink);padding:8px 14px;border-radius:12px;font-weight:500;align-self:flex-start}

/* Reading */
.passage{font-size:19px;line-height:1.8;display:flex;flex-direction:column;gap:14px;max-width:64ch}
.passage .w{font:inherit;background:var(--sky);color:var(--ink);border:0;border-bottom:2px solid var(--sky-strong);border-radius:6px;padding:0 3px;cursor:pointer}
.textpanel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 16px}
.textpanel .passage{font-size:17px;padding:8px 0 12px}
@media (min-width:1180px){.quiz.wide{max-width:1120px}.read-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:start}.read-split .textpanel{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto}}
.read-split{display:flex;flex-direction:column;gap:16px}
#tip{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(460px,calc(100vw - 32px));z-index:40}
#tip .card{display:flex;flex-direction:column;gap:8px;padding:18px 20px}
#tip .top{display:flex;align-items:center;gap:10px}
#tip .top b{font:600 22px var(--f-display);flex:1}

/* Results */
.result{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:28px 22px}
.score-rows{width:100%;display:flex;flex-direction:column;gap:8px;text-align:left}
.score-rows .sr-row{display:flex;align-items:center;gap:12px}
.score-rows .sr-row span:first-child{flex:1}
.review-list{text-align:left;width:100%;display:flex;flex-direction:column;gap:10px;margin-top:8px}
.review-list li{list-style:none;background:var(--surface-2);border-radius:12px;padding:10px 14px}

/* Grammar rule */
.rule{background:var(--lav);color:var(--ink);border-radius:var(--r-md);padding:18px 20px;font-size:19px;font-weight:500}
.examples{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.examples li{padding:10px 14px;border-left:4px solid var(--lav-strong);background:var(--surface-2);border-radius:0 12px 12px 0}
.more-list{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--ink)}

/* Parent */
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px}
.tab{padding:8px 16px;border-radius:999px;text-decoration:none;font-weight:600;color:var(--ink-2)}
.tab[aria-current="page"]{background:var(--ink);color:var(--bg)}
.kid-switch{display:flex;gap:8px;flex-wrap:wrap}
.kid-btn{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:2px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600}
.kid-btn[aria-pressed="true"]{border-color:var(--ink)}
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{background:var(--surface-2);border-radius:var(--r-md);padding:14px}
.stat b{display:block;font:600 26px var(--f-display);font-variant-numeric:tabular-nums}
.stat span{font-size:14px;color:var(--ink-2)}
.skill-row{display:grid;grid-template-columns:120px 64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.skill-row:last-child{border-bottom:0}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end;height:120px;margin-top:8px}
.week .col{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.week .b{width:100%;max-width:34px;border-radius:8px 8px 4px 4px;background:var(--sky-strong);min-height:3px}
.week .col span{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.field .lbl{font-weight:600;font-size:15px}
.field input,.field select,.field textarea{min-height:48px;padding:8px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);width:100%}
.field textarea{min-height:90px;resize:vertical}
.field.full{grid-column:1/-1}
.av-pick{display:flex;gap:8px;flex-wrap:wrap}
.av-pick button{border:3px solid transparent;border-radius:50%;padding:2px;background:none;cursor:pointer}
.av-pick button[aria-pressed="true"]{border-color:var(--ink)}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:600}
.switch input{width:22px;height:22px;accent-color:var(--mint-ink)}
.kid-card{display:flex;flex-direction:column;gap:16px}
.kid-card .head{display:flex;align-items:center;gap:12px}
.mist{display:flex;flex-direction:column;gap:8px;list-style:none;padding:0;margin:0}
.mist li{padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:15px;display:flex;flex-direction:column;gap:2px}
.notice{background:var(--butter);color:var(--butter-ink);padding:12px 16px;border-radius:14px;font-weight:500}
.gate{max-width:420px;margin:40px auto;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.pin-in{font-size:28px;letter-spacing:.4em;text-align:center;width:200px;min-height:60px;border-radius:16px;border:2px solid var(--line);background:var(--surface)}

/* Modal + toast */
#modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(30,25,40,.4);padding:16px}
#modal .card{width:min(460px,100%);display:flex;flex-direction:column;gap:16px}
.who-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.who-pick{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;border-radius:var(--r-md);border:2px solid var(--line);background:var(--surface);cursor:pointer;font:600 20px var(--f-display)}
.who-pick:hover{border-color:var(--ink-2)}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;font-weight:600;z-index:60;max-width:calc(100vw - 32px)}

@media (max-width:560px){
  body{font-size:16px}
  .path{gap:4px}.step{padding:8px 0}.step .step-ic{width:44px;height:44px}.step .step-l{font-size:13px}
  .card{padding:18px}.q-card{padding:20px 16px}
  .form-grid{grid-template-columns:1fr}
  .skill-row{grid-template-columns:1fr auto;}
  .skill-row .bar{grid-column:1/-1}
  .stats3 .stat b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* ===== v2 additions ===== */
:root{--seg-s:#2F64C9;--seg-s-bg:#E3ECFC;--seg-v:#1C7A55;--seg-v-bg:#DDF3E8;--seg-t:#9A6A00;--seg-t-bg:#FFF1C4;--bad:#C2412D;--bad-bg:#FDE6E1;--board-bg:#F1F5FB}


.center{text-align:center}.up{text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:13px;color:var(--ai,var(--ink-2))}
.kid-chip{width:auto;padding:0 10px 0 4px;gap:6px;display:inline-flex;align-items:center}
.path4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lesson-head{display:flex;flex-direction:column;gap:6px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tile-i{background:var(--board-bg);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.tile-i span{font-size:13px;color:var(--ink-2)}.tile-i b{font:600 18px/1.25 var(--f-display)}
@media (max-width:640px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stepper{display:flex;gap:6px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:thin}
.stepper li{flex:1 0 auto}
.stp{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600;font-size:14px;white-space:nowrap}
.stp .n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-2);font-size:13px;flex:none}
.stp.done .n{background:var(--good-bg);color:var(--good)}
.stp.cur{background:var(--a);border-color:var(--as);color:var(--ai)}
.stp.cur .n{background:var(--surface)}
.mini-steps{display:inline-flex;gap:3px}.mini-steps i{width:10px;height:10px;border-radius:3px;background:var(--surface-2);border:1px solid var(--line)}.mini-steps i.on{background:var(--lav-strong);border-color:var(--lav-strong)}
.ready{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.center-card{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
/* segments */
.seg{padding:1px 4px;border-radius:5px;border-bottom:2px solid currentColor;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.seg-s{color:var(--seg-s);background:var(--seg-s-bg)}.seg-v{color:var(--seg-v);background:var(--seg-v-bg);font-weight:600}.seg-t{color:var(--seg-t);background:var(--seg-t-bg)}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:14px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}.lg{display:inline-block;width:26px;height:10px;border-radius:4px;border-bottom:2px solid}
.lg-s{background:var(--seg-s-bg);border-color:var(--seg-s)}.lg-v{background:var(--seg-v-bg);border-color:var(--seg-v)}.lg-t{background:var(--seg-t-bg);border-color:var(--seg-t)}
.sit{display:flex;flex-direction:column;gap:14px;background:linear-gradient(var(--surface),var(--surface))}
.sit-lines{display:flex;flex-direction:column;gap:10px;font-size:20px;line-height:1.7;padding:14px 18px;border-left:4px solid var(--lav-strong);background:var(--board-bg);border-radius:0 14px 14px 0}
/* board */
.board-card{display:flex;flex-direction:column;gap:16px}
.bc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bc-head h2{display:flex;align-items:center;gap:10px;font-size:19px}
.timeline{position:relative;background:var(--board-bg);border:1px solid var(--line);border-radius:16px;padding:34px 14px 14px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.tl-axis{position:absolute;inset:10px 14px auto 14px;height:16px;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--ink-2)}
.tl-axis span{position:absolute;left:0}
.tl-now{position:absolute;top:30px;bottom:10px;left:calc(14px + (100% - 28px)*.42);border-left:2px dashed var(--ink-2);opacity:.6}
.tl-row{position:relative;height:30px}
.tl-bar{position:absolute;top:0;height:28px;border-radius:999px;border:1.5px solid;display:flex;align-items:center;padding:0 12px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tl-bar.v{color:var(--seg-v);border-color:var(--seg-v);background:var(--seg-v-bg)}
.tl-bar.v.striped{background:repeating-linear-gradient(-45deg,var(--seg-v-bg) 0 10px,var(--surface) 10px 20px)}
.tl-bar.s{color:var(--seg-s);border-color:var(--seg-s);background:var(--seg-s-bg)}
.tl-bar.dim{opacity:.35;border-style:dashed}
.g-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.g-cards.one{grid-template-columns:1fr}
.g-card{border:1px solid var(--line);border-radius:18px;background:var(--surface);display:flex;flex-direction:column;gap:10px;padding:0 0 14px;overflow:hidden;min-width:0}
.g-card>*:not(header){margin:0 14px}
.g-card header{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--board-bg)}
.g-card header h3{flex:1;font-size:17px}
.gc-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--surface);color:var(--lav-ink)}
.gc-tag{font-size:11px;font-weight:800;letter-spacing:.06em;padding:3px 9px;border-radius:999px;background:var(--seg-v);color:var(--surface)}
.g-card.careful .gc-tag{background:var(--seg-s)}
.g-card.careful header{background:var(--seg-s-bg)}
.formula{display:flex;flex-direction:column;gap:6px;margin-top:12px!important}
.f-row{display:flex;flex-wrap:wrap;gap:4px 10px;border:1.5px solid var(--seg-s);background:var(--seg-s-bg);border-radius:10px;padding:7px 10px;font-size:15px}
.f-a{font-weight:700;color:var(--seg-s);min-width:5ch}.f-b{color:var(--ink)}
.g-ex{background:var(--board-bg);border-left:4px solid var(--seg-s);border-radius:0 10px 10px 0;padding:8px 10px;line-height:1.9;font-size:16px}
.g-ex.wrong{border-left-color:var(--bad);color:var(--bad);display:flex;align-items:center;gap:8px}
.xmark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--bad-bg);color:var(--bad);flex:none}
.icon-btn.sm{width:32px;height:32px;border-radius:10px;vertical-align:middle}
/* worksheet */
.ex{display:flex;flex-direction:column;gap:12px}
.ex-head{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.ex-head h3{font-size:19px}
.ex-foot{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.wbox{display:flex;flex-wrap:wrap;gap:8px;border:1.5px dashed var(--ink-2);border-radius:12px;padding:10px 12px}
.wbox span{font-weight:700;padding:2px 10px;background:var(--surface-2);border-radius:8px}
.cloze{display:flex;flex-direction:column;gap:10px;font-size:18px;line-height:2.1}
.cloze.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 18px}
.cl-line{margin:0}
.bl{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.bl input{font:inherit;font-size:17px;padding:2px 8px;border:none;border-bottom:2.5px solid var(--as,var(--ink-2));background:var(--surface-2);border-radius:8px 8px 0 0;max-width:100%;min-width:0}
.bl input:focus{outline:none;background:var(--a,var(--surface-2));border-bottom-color:var(--focus)}
.bl.ok input{background:var(--good-bg);border-bottom-color:var(--good);color:var(--good);font-weight:600}
.bl.bad input{background:var(--bad-bg);border-bottom-color:var(--bad)}
.ans{font-size:14px;font-weight:700;color:var(--good);background:var(--good-bg);border-radius:8px;padding:1px 8px}
.wrongw{text-decoration-color:var(--bad);text-decoration-thickness:2px;color:var(--bad)}
.ch{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;padding:2px;border-radius:12px}
.ch.ok{background:var(--good-bg)}.ch.bad{background:var(--bad-bg)}
.sl{color:var(--ink-2)}
.chopt{font:inherit;font-size:16px;line-height:1.3;padding:4px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;text-align:left}
.chopt:hover:not([disabled]){border-color:var(--as,var(--ink-2))}
.chopt.on{background:var(--as,var(--lav-strong));border-color:var(--as,var(--lav-strong));color:var(--on-accent);font-weight:600}
.chopt.right{outline:2.5px solid var(--good);outline-offset:1px}
.chopt[disabled]{cursor:default}
.mcq{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.mq{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;background:var(--surface-2)}
.mq.ok{background:var(--good-bg)}.mq.bad{background:var(--bad-bg)}
.mq-q{font-weight:600;font-size:17px}.mq-o{display:flex;flex-wrap:wrap;gap:8px}
.match{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px;align-items:start}
.m-left,.m-right{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.m-item,.m-opt{width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font-size:15px;display:flex;flex-direction:column;gap:4px}
.m-item.sel{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 25%,transparent)}
.m-item.ok{background:var(--good-bg);border-color:var(--good)}.m-item.bad{background:var(--bad-bg);border-color:var(--bad)}
.m-pick{font-size:13px;font-weight:700;color:var(--ai,var(--lav-ink))}
.m-opt[disabled]{opacity:.55;cursor:default}
.m-opt:hover:not([disabled]){border-color:var(--as,var(--ink-2))}
@media (max-width:640px){.match{grid-template-columns:1fr}}
.writes{display:flex;flex-direction:column;gap:14px;padding-left:0;list-style:none;margin:0}
.writes li{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:14px;background:var(--surface-2)}
.writes li.ok{background:var(--good-bg)}.writes li.bad{background:var(--bad-bg)}
.writes textarea{font:inherit;font-size:17px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);resize:vertical;width:100%}
.ex-ans{color:var(--ink-2);font-style:italic}
.ex-discuss .disc{display:flex;gap:10px;align-items:flex-start;font-size:17px}
/* vocab */
.boards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.board{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:var(--r-lg);background:var(--a);color:var(--ink);text-decoration:none;border:2px solid transparent;min-height:180px}
.board:hover{border-color:var(--as)}
.b-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--surface);color:var(--ai)}
.b-t{font:600 22px var(--f-display)}.b-s{color:var(--ink-2);font-size:15px}
.b-p{margin-top:auto;display:flex;flex-direction:column;gap:6px}.b-p .bar{background:var(--surface)}
.seg-tabs{display:flex;gap:6px;background:var(--surface-2);padding:5px;border-radius:999px;align-self:flex-start;flex-wrap:wrap}
.seg-tabs button{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:8px 16px;border-radius:999px;font-weight:600;cursor:pointer;color:var(--ink-2)}
.seg-tabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.seg-tabs .n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--a);color:var(--ai);font-size:12px}
.fc-wrap{display:flex;flex-direction:column;gap:14px}
.fc-top{display:flex;align-items:center;gap:10px}.fc-top .pill{margin-left:auto}
.flashcard{position:relative;min-height:320px;border-radius:26px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;padding:28px 24px 44px;cursor:pointer;text-align:center}
.flashcard.flipped{background:var(--a)}
.fc-face{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:600px}
.fc-term{font:600 clamp(30px,4.6vw,44px)/1.15 var(--f-display)}
.fc-ipa{font-size:18px;color:var(--ink-2)}
.fc-img{max-width:min(320px,100%);max-height:180px;border-radius:14px;object-fit:contain;background:var(--surface)}
.fc-lab{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ai)}
.fc-en{font:500 24px/1.35 var(--f-body)}.fc-vi{font:500 22px/1.35 var(--f-body);color:var(--pink-ink)}
.fc-ex{margin-top:8px;font-size:16px;color:var(--ink-2);font-style:italic}
.fc-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--ink-2);display:inline-flex;gap:6px;align-items:center}
.fc-ctrl{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.pill.on-good{background:var(--good-bg);border-color:var(--good);color:var(--good)}
.pill.sm{min-height:32px;font-size:13px;padding:0 10px}
.termlist summary{font-size:17px}
.terms{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:8px}
.terms li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:14px;align-items:center;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.tl-t{display:flex;flex-direction:column}.tl-d{display:flex;flex-direction:column;gap:2px}
.vi-s{color:var(--pink-ink);font-size:15px}
@media (max-width:560px){.terms li{grid-template-columns:1fr auto}.terms .tl-d{grid-column:1/-1;grid-row:2}}
.passage .w{font:inherit;background:var(--mint);color:var(--ink);border:0;border-bottom:2px solid var(--mint-strong);border-radius:6px;padding:0 3px;cursor:pointer}
/* reading */
.video-card{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.video-card .main{flex:1;min-width:180px}
.video-card .tile-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--sky);color:var(--sky-ink)}
.passage.pick{font-size:19px;line-height:1.85}
.pw{font:inherit;background:none;border:0;padding:0 1px;margin:0;border-radius:5px;cursor:pointer;color:inherit}
.pw:hover{background:var(--sky)}
.pw.picked{background:var(--sky);border-bottom:2px solid var(--sky-strong)}
.tray{border:2px dashed var(--sky-strong)}
.wcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.wcard{display:flex;gap:12px;padding:12px;border-radius:16px;background:var(--surface-2);min-width:0}
.wcard.drop{animation:drop .45s ease-out}
@keyframes drop{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}
.wcard img,.wcard .noimg{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none;background:var(--surface);display:grid;place-items:center;color:var(--ink-2)}
.wc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.wc-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}.wc-top b{font:600 19px var(--f-display)}
.wc-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
/* quiz extras */
.prompt.big{font:600 clamp(26px,3.4vw,34px) var(--f-display)}
.q-img{max-width:min(320px,100%);max-height:200px;border-radius:14px;align-self:center}
.gap-form textarea{flex:1;min-width:200px;padding:10px 14px;border-radius:16px;border:2px solid var(--line);background:var(--bg);font-size:18px;font-family:inherit}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pcol{display:flex;flex-direction:column;gap:8px}
.pcard{min-height:56px;padding:10px 12px;border-radius:14px;border:2px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;font-size:16px}
.pcard.r{font-size:14px}
.pcard.sel{border-color:var(--focus);background:var(--a)}
.pcard.matched{background:var(--good-bg);border-color:var(--good);opacity:.7}
.pcard.bad{border-color:var(--bad);background:var(--bad-bg)}
/* parent pictures */
.pic-grid{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pic-grid li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;border-radius:14px;background:var(--surface-2);min-width:0}
.pic-grid img,.pic-grid .noimg{width:100%;aspect-ratio:4/3;max-width:100%;object-fit:cover;border-radius:10px;background:var(--surface);display:grid;place-items:center;color:var(--ink-2)}
.pic-grid b{font-size:14px}
#modal .fc-img{align-self:center}
/* ===== Storybook theme: a paper sheet floating over a pink cloud sky (single light theme by design) ===== */
:root{
  --bg:#F6EEE2; --surface:#FFFBF4; --surface-2:#F2E8D9; --ink:#2F2A35; --ink-2:#675E6E; --line:#E5D7C2; --focus:#2C6FC4; --on-accent:#2F2A35;
  --plum:#5B3E8E; --rust:#B65D3E; --rust-d:#97462B; --teal:#2C7893; --band:#E4ECEC;
  --mint:#DCEBD8; --mint-ink:#2E6A4A; --mint-strong:#7DB892;
  --lav:#E7DEF3; --lav-ink:#5B3E8E; --lav-strong:#A58BD8;
  --sky:#D9E7EE; --sky-ink:#245C80; --sky-strong:#7FB2CC;
  --peach:#F6DFCB; --peach-ink:#A4512F; --peach-strong:#E39A70;
  --butter:#F6EBC0; --butter-ink:#735A0E; --butter-strong:#E5C55A;
  --pink:#F6DCE2; --pink-ink:#A3405F; --pink-strong:#E79AB0;
  --good:#2E6A4A; --good-bg:#DCEBD8; --oops:#A4512F; --oops-bg:#F6DFCB;
  --paper-cream:#F3EADB; --paper-sky:#D6E4EE; --paper-sage:#DAE3CF; --paper-peach:#F3DDC6; --paper-pink:#F5DADF; --paper-lav:#E4DBF1; --paper-butter:#F5E7B8; --paper-mint:#D3EBDD;
  --shadow:0 1px 2px rgba(90,50,30,.06),0 10px 26px rgba(90,50,30,.08);
  --f-display:"Baloo 2","Fredoka",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --f-body:"Nunito","Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --gut:clamp(16px,3.4vw,44px);
  color-scheme:light;
}
html{background:#6E8A90}
body{background:linear-gradient(180deg,#56757E 0%,#879FA4 28%,#C9A6B6 62%,#E8B6C4 100%) fixed;color:var(--ink);font-family:var(--f-body);font-size:17px;padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px));min-height:100vh}
#sky{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
.sky-css{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;background:
 radial-gradient(40vmax 22vmax at 6% 92%,#F6B3C9 0,#F6B3C900 70%),radial-gradient(34vmax 20vmax at 94% 88%,#F7C2D3 0,#F7C2D300 70%),
 radial-gradient(28vmax 16vmax at 2% 45%,#EFA8C2cc 0,#EFA8C200 70%),radial-gradient(30vmax 18vmax at 99% 40%,#F5BBD0cc 0,#F5BBD000 70%),radial-gradient(60vmax 20vmax at 50% 110%,#FAD0DC 0,#FAD0DC00 70%)}
body.no-webgl .sky-css{display:block}body.no-webgl #sky{display:none}
#sheet{position:relative;z-index:1;max-width:1180px;margin:clamp(10px,3.4vw,44px) auto;background:var(--bg) var(--noise);border-radius:30px;box-shadow:0 2px 0 rgba(255,255,255,.4) inset,0 40px 90px -20px rgba(70,30,60,.45),0 10px 30px rgba(70,30,60,.18);overflow:hidden}
h1,h2,h3{font-family:var(--f-display);font-weight:700;color:var(--plum);line-height:1.15}
h1{font-size:clamp(28px,3.6vw,38px)} h2{font-size:23px} h3{font-size:19px}
.muted{color:var(--ink-2)}
/* top navigation */
#topnav{display:flex;align-items:center;gap:14px;padding:14px var(--gut);flex-wrap:wrap;border-bottom:1.5px dashed var(--line)}
.brand{display:flex;gap:10px;align-items:center;font:800 19px/1 var(--f-display);color:var(--plum);text-decoration:none;text-transform:uppercase;letter-spacing:.04em}
.brand small{font-size:12px;letter-spacing:.24em;color:var(--rust)}
.pills{display:flex;flex-wrap:wrap;gap:6px;flex:1;justify-content:center}
.pill-nav{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap}
.pill-nav:hover{border-color:var(--as)}
.pill-nav svg{color:var(--ai)}
.pill-nav[aria-current="page"]{background:var(--a);border-color:var(--as);color:var(--ai)}
.nav-end{display:flex;gap:8px;align-items:center}
.me-chip{display:inline-flex;align-items:center;gap:8px;padding:3px 14px 3px 3px;min-height:40px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font:700 15px var(--f-body);color:var(--ink)}
.me-chip svg{margin-left:10px;color:var(--rust)}
.pill-cta{display:inline-flex;gap:6px;align-items:center;background:var(--plum);color:#fff;padding:9px 16px;border-radius:999px;text-decoration:none;font-weight:800;font-size:14px}
.pill-cta[aria-current="page"]{background:var(--rust)}
.menu-btn{display:none}
.ini{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font:800 15px/1 var(--f-display);flex:none}
@media (max-width:1060px){.menu-btn{display:inline-grid}.pills{display:none;order:5;flex-basis:100%;flex-direction:column;align-items:stretch;padding-top:8px}.pills.open{display:flex}.pill-nav{padding:12px 16px;font-size:16px}.nav-end{margin-left:auto}}
@media (max-width:560px){.brand span{display:none}.me-chip b{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pill-cta span{display:none}}
#main{padding:10px var(--gut) 60px!important;min-height:60vh}
.wrap{max-width:860px}.wrap.wide{max-width:1080px}
.foot{padding:18px var(--gut);text-align:center;font-size:13px;color:var(--ink-2);border-top:1.5px dashed var(--line)}
/* buttons & cards */
.btn.btn-primary{background:var(--rust);border-color:var(--rust);color:#fff}
.btn.btn-primary:hover{background:var(--rust-d);border-color:var(--rust-d);filter:none}
.btn{font-family:var(--f-display);font-weight:700}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.page-head h1{text-transform:uppercase;letter-spacing:.03em}
.eyebrow.up,.up{color:var(--teal)}
.row{background:var(--surface)}
.group-h{color:var(--teal);text-transform:uppercase;letter-spacing:.08em;font-size:13px;font-weight:800}
.chip.next{background:var(--rust);color:#fff}
/* hero (Today) */
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);align-items:center;gap:20px;padding:22px 0 6px}
.hero-h{display:flex;flex-direction:column;gap:2px;font:800 clamp(32px,5.2vw,58px)/1.02 var(--f-display);text-transform:uppercase;letter-spacing:.015em;color:var(--plum);margin:6px 0 0;text-wrap:balance}
.hero-h .l1{font-size:.5em;color:var(--teal);letter-spacing:.06em;margin-bottom:6px}
.hero-h .l3{color:var(--rust)}
.lead{font-size:18px;color:var(--ink-2);max-width:44ch;margin:14px 0 22px}
.hero-cta .btn-big{width:auto;max-width:100%}
.done-line{display:inline-flex;gap:8px;align-items:center;font:700 19px var(--f-display);color:var(--good)}
.hero-art{display:grid;place-items:center}
.boat{max-width:100%;height:auto;animation:bob 7s ease-in-out infinite;transform-origin:50% 80%}
@keyframes bob{50%{transform:translateY(-8px) rotate(-2.5deg)}}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero-art{display:none}.hero-cta .btn-big{width:100%}}
.scallop{height:30px;margin:22px calc(-1 * var(--gut)) 0;background:radial-gradient(circle at 24px 0,var(--bg) 24px,var(--band) 25px) repeat-x;background-size:48px 30px}
.band{background:var(--band);margin:0 calc(-1 * var(--gut));padding:26px var(--gut) 34px}
.band+.band{padding-top:6px}
.sec-h{text-align:center;font:800 clamp(24px,3.4vw,36px)/1.08 var(--f-display);text-transform:uppercase;color:var(--plum);margin:4px 0 26px;letter-spacing:.02em}
.sec-h span{color:var(--rust)}
/* torn paper */
.paper-wrap{position:relative;filter:drop-shadow(0 7px 9px rgba(80,50,30,.17)) drop-shadow(0 1px 1px rgba(80,50,30,.14));transition:transform .2s ease}
.paper{background-color:var(--pc);background-image:var(--noise);padding:28px 22px 22px;height:100%}
.tape{position:absolute;top:-11px;left:50%;width:86px;height:25px;transform:translateX(-50%) rotate(-3deg);background:rgba(216,192,140,.78);z-index:2;clip-path:polygon(0 8%,4% 0,9% 10%,14% 2%,20% 9%,26% 0,32% 8%,38% 1%,45% 9%,52% 0,58% 8%,65% 1%,72% 10%,79% 0,86% 9%,92% 1%,100% 8%,98% 50%,100% 92%,94% 100%,88% 91%,81% 100%,74% 92%,67% 100%,60% 91%,53% 100%,46% 92%,39% 100%,32% 91%,25% 100%,18% 92%,11% 100%,5% 91%,0 100%,2% 50%)}
.p-cream{--pc:var(--paper-cream)}.p-sky{--pc:var(--paper-sky);--tc:#245C8F}.p-sage{--pc:var(--paper-sage);--tc:#3E6A3A}.p-peach{--pc:var(--paper-peach);--tc:#A4512F}.p-pink{--pc:var(--paper-pink);--tc:#A3405F}.p-lav{--pc:var(--paper-lav);--tc:#5B3E8E}.p-butter{--pc:var(--paper-butter);--tc:#7A5E10}.p-mint{--pc:var(--paper-mint);--tc:#2C6B45}
.notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 20px}
.notes .paper-wrap:nth-child(odd),.topics .paper-wrap:nth-child(3n+1){transform:rotate(-1.1deg)}
.notes .paper-wrap:nth-child(even),.topics .paper-wrap:nth-child(3n+2){transform:rotate(.9deg)}
.notes .paper-wrap:hover,.topics .paper-wrap:hover{transform:rotate(0) translateY(-4px)}
.note.is-done{opacity:.86}
.note-btn{background:none;border:0;padding:0;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;width:100%;cursor:pointer;font:inherit;color:inherit;min-height:150px}
.note-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.7);color:var(--ai)}
.note-t{font:800 21px/1.1 var(--f-display);color:var(--plum)}
.note-s{font-size:15px;color:var(--ink-2)}
.note-btn .chip{margin-top:auto}
@media (max-width:900px){.notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.notes{gap:22px 14px}.paper{padding:24px 14px 16px}.note-t{font-size:18px}}
.tasks .task{background:var(--surface);border:1px solid var(--line)}
/* grammar topics */
.topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px;margin-top:8px}
@media (max-width:900px){.topics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.topics{grid-template-columns:1fr}}
.topic{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink);min-height:160px}
.q-badge{align-self:flex-end;font-size:13px;font-weight:800;padding:2px 11px;border-radius:999px;border:2px solid var(--tc);color:var(--tc);background:rgba(255,255,255,.55);margin-bottom:2px}
.q-badge.full{background:var(--tc);color:#fff}.q-badge.empty{opacity:.55;border-style:dashed}
.tp-t{font:800 25px/1.08 var(--f-display);color:var(--tc,var(--plum))}
.tp-vi{font-weight:700;color:var(--tc,var(--plum));opacity:.85}
.tp-ex{margin-top:auto;background:#fff;border-radius:12px;padding:8px 12px;font-size:15px;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.topic-big{margin:6px 0 4px}.topic-big .paper{padding:30px 26px 24px}
.topic-head{display:flex;flex-direction:column;gap:6px}.topic-head h1{color:var(--tc);text-transform:uppercase;letter-spacing:.02em}.topic-head .tp-ex{align-self:flex-start}
/* vocabulary boards as paper too */
.board{background:var(--a) var(--noise);border-radius:6px;clip-path:var(--torn-b);filter:none}
/* name dialog */
.name-card{gap:18px}.name-paper{margin-top:8px}.name-paper .paper{padding:24px 20px 16px}.name-paper h2{font-size:26px}
#nm-in{font-size:22px;min-height:58px;border-radius:14px;border:2px solid var(--line);padding:0 16px;width:100%;background:#fff;font-family:var(--f-body)}
#nm-in:focus{outline:none;border-color:var(--rust)}
.name-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.name-chip{display:inline-flex;align-items:center;gap:8px;padding:3px 14px 3px 3px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-weight:700;cursor:pointer}
.name-chip:hover{border-color:var(--rust)}
.lv-sel{min-height:36px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);padding:0 8px;font:inherit}
#modal{background:rgba(60,35,55,.45)}
#modal .card{max-height:calc(100vh - 32px);overflow:auto}
.quiz{position:relative}
@media (prefers-reduced-motion:reduce){.boat{animation:none}.paper-wrap{transition:none}}
.wrap.today{max-width:none;gap:0}.today .hero{max-width:1080px;margin:0 auto;width:100%}.today .band>*{max-width:1080px;margin-left:auto;margin-right:auto}.today .band .tasks{margin-top:0}
.skill-row{grid-template-columns:110px 90px minmax(0,1fr) auto}
@media (max-width:560px){.skill-row{grid-template-columns:1fr auto}}
#main:has(> .today){padding-bottom:0!important}
:root{--torn-b:polygon(0.0% 0.7%,3.8% 0.9%,7.7% 1.5%,11.5% 0.7%,15.4% 0.8%,19.2% 0.9%,23.1% 0.3%,26.9% 0.8%,30.8% 1.0%,34.6% 1.3%,38.5% 0.2%,42.3% 0.5%,46.2% 0.1%,50.0% 1.3%,53.8% 1.1%,57.7% 0.1%,61.5% 1.6%,65.4% 1.5%,69.2% 1.0%,73.1% 1.0%,76.9% 0.3%,80.8% 0.0%,84.6% 0.8%,88.5% 0.1%,92.3% 0.3%,96.2% 0.4%,100.0% 0.0%,99.4% 3.8%,99.4% 7.7%,98.8% 11.5%,99.3% 15.4%,99.1% 19.2%,99.3% 23.1%,99.1% 26.9%,99.4% 30.8%,99.6% 34.6%,98.6% 38.5%,98.6% 42.3%,98.8% 46.2%,99.0% 50.0%,99.6% 53.8%,99.7% 57.7%,99.6% 61.5%,99.9% 65.4%,98.9% 69.2%,99.4% 73.1%,98.8% 76.9%,99.5% 80.8%,98.7% 84.6%,98.8% 88.5%,100.0% 92.3%,99.7% 96.2%,100.0% 98.4%,96.2% 99.2%,92.3% 98.2%,88.5% 99.3%,84.6% 99.9%,80.8% 98.9%,76.9% 98.6%,73.1% 99.5%,69.2% 99.8%,65.4% 99.4%,61.5% 98.3%,57.7% 98.6%,53.8% 99.8%,50.0% 99.6%,46.2% 99.8%,42.3% 99.9%,38.5% 98.6%,34.6% 99.7%,30.8% 99.0%,26.9% 99.2%,23.1% 99.7%,19.2% 98.7%,15.4% 99.8%,11.5% 98.8%,7.7% 99.8%,3.8% 99.2%,0.0% 99.6%,0.4% 96.2%,1.4% 92.3%,1.1% 88.5%,0.4% 84.6%,1.2% 80.8%,0.3% 76.9%,0.6% 73.1%,1.2% 69.2%,0.9% 65.4%,0.1% 61.5%,1.4% 57.7%,0.3% 53.8%,0.4% 50.0%,1.1% 46.2%,0.5% 42.3%,0.4% 38.5%,0.1% 34.6%,0.1% 30.8%,0.8% 26.9%,0.3% 23.1%,0.8% 19.2%,0.5% 15.4%,0.6% 11.5%,1.3% 7.7%,0.7% 3.8%)}
.torn-a{clip-path:polygon(0.0% 0.4%,3.8% 0.9%,7.7% 0.6%,11.5% 1.0%,15.4% 1.0%,19.2% 0.1%,23.1% 0.0%,26.9% 1.3%,30.8% 0.4%,34.6% 0.4%,38.5% 1.6%,42.3% 0.8%,46.2% 1.3%,50.0% 0.8%,53.8% 1.0%,57.7% 0.2%,61.5% 1.0%,65.4% 1.4%,69.2% 0.8%,73.1% 1.2%,76.9% 1.1%,80.8% 0.1%,84.6% 1.2%,88.5% 0.9%,92.3% 0.5%,96.2% 0.0%,100.0% 1.4%,99.3% 3.8%,99.0% 7.7%,98.8% 11.5%,99.0% 15.4%,98.7% 19.2%,99.4% 23.1%,98.9% 26.9%,99.4% 30.8%,98.7% 34.6%,98.8% 38.5%,99.9% 42.3%,99.8% 46.2%,99.7% 50.0%,98.6% 53.8%,99.4% 57.7%,99.1% 61.5%,99.6% 65.4%,99.3% 69.2%,99.5% 73.1%,99.5% 76.9%,99.2% 80.8%,99.2% 84.6%,98.7% 88.5%,99.0% 92.3%,98.7% 96.2%,100.0% 98.5%,96.2% 98.2%,92.3% 98.8%,88.5% 99.7%,84.6% 98.5%,80.8% 98.3%,76.9% 98.4%,73.1% 99.0%,69.2% 98.7%,65.4% 99.6%,61.5% 98.5%,57.7% 99.0%,53.8% 99.5%,50.0% 99.9%,46.2% 98.5%,42.3% 98.2%,38.5% 99.8%,34.6% 98.6%,30.8% 99.3%,26.9% 99.7%,23.1% 99.5%,19.2% 98.6%,15.4% 98.4%,11.5% 99.9%,7.7% 98.9%,3.8% 99.9%,0.0% 98.7%,0.5% 96.2%,1.2% 92.3%,1.4% 88.5%,0.7% 84.6%,1.4% 80.8%,0.4% 76.9%,0.1% 73.1%,0.8% 69.2%,0.0% 65.4%,0.3% 61.5%,0.6% 57.7%,0.9% 53.8%,0.2% 50.0%,0.1% 46.2%,1.2% 42.3%,0.4% 38.5%,1.3% 34.6%,1.3% 30.8%,0.5% 26.9%,0.6% 23.1%,0.7% 19.2%,0.9% 15.4%,0.8% 11.5%,0.8% 7.7%,0.9% 3.8%)}
.torn-b{clip-path:polygon(0.0% 0.7%,3.8% 0.9%,7.7% 1.5%,11.5% 0.7%,15.4% 0.8%,19.2% 0.9%,23.1% 0.3%,26.9% 0.8%,30.8% 1.0%,34.6% 1.3%,38.5% 0.2%,42.3% 0.5%,46.2% 0.1%,50.0% 1.3%,53.8% 1.1%,57.7% 0.1%,61.5% 1.6%,65.4% 1.5%,69.2% 1.0%,73.1% 1.0%,76.9% 0.3%,80.8% 0.0%,84.6% 0.8%,88.5% 0.1%,92.3% 0.3%,96.2% 0.4%,100.0% 0.0%,99.4% 3.8%,99.4% 7.7%,98.8% 11.5%,99.3% 15.4%,99.1% 19.2%,99.3% 23.1%,99.1% 26.9%,99.4% 30.8%,99.6% 34.6%,98.6% 38.5%,98.6% 42.3%,98.8% 46.2%,99.0% 50.0%,99.6% 53.8%,99.7% 57.7%,99.6% 61.5%,99.9% 65.4%,98.9% 69.2%,99.4% 73.1%,98.8% 76.9%,99.5% 80.8%,98.7% 84.6%,98.8% 88.5%,100.0% 92.3%,99.7% 96.2%,100.0% 98.4%,96.2% 99.2%,92.3% 98.2%,88.5% 99.3%,84.6% 99.9%,80.8% 98.9%,76.9% 98.6%,73.1% 99.5%,69.2% 99.8%,65.4% 99.4%,61.5% 98.3%,57.7% 98.6%,53.8% 99.8%,50.0% 99.6%,46.2% 99.8%,42.3% 99.9%,38.5% 98.6%,34.6% 99.7%,30.8% 99.0%,26.9% 99.2%,23.1% 99.7%,19.2% 98.7%,15.4% 99.8%,11.5% 98.8%,7.7% 99.8%,3.8% 99.2%,0.0% 99.6%,0.4% 96.2%,1.4% 92.3%,1.1% 88.5%,0.4% 84.6%,1.2% 80.8%,0.3% 76.9%,0.6% 73.1%,1.2% 69.2%,0.9% 65.4%,0.1% 61.5%,1.4% 57.7%,0.3% 53.8%,0.4% 50.0%,1.1% 46.2%,0.5% 42.3%,0.4% 38.5%,0.1% 34.6%,0.1% 30.8%,0.8% 26.9%,0.3% 23.1%,0.8% 19.2%,0.5% 15.4%,0.6% 11.5%,1.3% 7.7%,0.7% 3.8%)}
.torn-c{clip-path:polygon(0.0% 0.9%,3.8% 0.6%,7.7% 1.4%,11.5% 0.5%,15.4% 0.8%,19.2% 0.6%,23.1% 0.7%,26.9% 1.6%,30.8% 0.2%,34.6% 0.7%,38.5% 0.4%,42.3% 0.6%,46.2% 1.6%,50.0% 0.5%,53.8% 1.0%,57.7% 0.7%,61.5% 1.2%,65.4% 0.7%,69.2% 0.3%,73.1% 0.7%,76.9% 0.7%,80.8% 1.3%,84.6% 0.9%,88.5% 0.3%,92.3% 1.1%,96.2% 0.5%,100.0% 0.8%,99.7% 3.8%,99.4% 7.7%,98.9% 11.5%,99.3% 15.4%,98.9% 19.2%,98.9% 23.1%,99.2% 26.9%,99.1% 30.8%,99.4% 34.6%,99.1% 38.5%,98.9% 42.3%,99.9% 46.2%,98.7% 50.0%,99.5% 53.8%,99.8% 57.7%,99.8% 61.5%,99.5% 65.4%,99.9% 69.2%,99.4% 73.1%,99.4% 76.9%,99.1% 80.8%,99.3% 84.6%,98.7% 88.5%,99.1% 92.3%,99.6% 96.2%,100.0% 98.4%,96.2% 98.7%,92.3% 98.3%,88.5% 98.7%,84.6% 98.3%,80.8% 99.6%,76.9% 99.5%,73.1% 98.2%,69.2% 100.0%,65.4% 98.3%,61.5% 98.4%,57.7% 99.8%,53.8% 99.7%,50.0% 98.4%,46.2% 98.3%,42.3% 98.4%,38.5% 98.7%,34.6% 98.6%,30.8% 99.4%,26.9% 100.0%,23.1% 98.9%,19.2% 98.4%,15.4% 98.3%,11.5% 99.1%,7.7% 100.0%,3.8% 99.7%,0.0% 99.2%,0.3% 96.2%,0.0% 92.3%,0.3% 88.5%,0.7% 84.6%,0.2% 80.8%,0.2% 76.9%,0.2% 73.1%,0.0% 69.2%,1.1% 65.4%,1.2% 61.5%,0.3% 57.7%,0.9% 53.8%,1.2% 50.0%,0.3% 46.2%,0.5% 42.3%,1.2% 38.5%,1.1% 34.6%,0.9% 30.8%,1.1% 26.9%,0.8% 23.1%,0.4% 19.2%,1.0% 15.4%,1.1% 11.5%,0.1% 7.7%,0.5% 3.8%)}
/* ===== Hand-drawn storybook theme: white page, sky-blue band with a big white cloud, hand-lettered titles, peach band, charcoal footer ===== */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7F2EC; --ink:#3A3F46; --ink-2:#6A6E75; --line:#E4DDD3; --focus:#2C6FC4;
  --charcoal:#3A3F46; --skyb:#A6D6DF; --brown:#7A4A1E; --orange:#EC7B38; --orange-d:#D0652A; --mustard:#E2B23C; --peachb:#FCE6DA;
  --plum:#7A4A1E; --rust:#EC7B38; --rust-d:#D0652A; --teal:#2F7F93; --band:#FCE6DA;
  --paper-sky:#D7EEF2; --paper-peach:#FCE3D4; --paper-butter:#FBEFC6; --paper-mint:#DDF0E3; --paper-pink:#FBE0E6; --paper-lav:#EAE3F6; --paper-cream:#FAF4EA; --paper-sage:#E6EEDC;
  --f-display:"Grandstander","Baloo 2",ui-rounded,system-ui,sans-serif;
  --f-slab:"Roboto Slab",Georgia,serif;
  --f-nav:"Raleway","Nunito",system-ui,sans-serif;
  --f-hand:"Mali","Grandstander",cursive;
  --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:255px 18px 225px 18px/18px 225px 18px 255px;
  --hand2:18px 225px 18px 255px/255px 18px 225px 18px;
  --shadow:3px 4px 0 rgba(58,63,70,.10);
}
html{background:#fff}
body{background:#fff;padding:0;overflow-x:clip;font-family:var(--f-body)}
#sheet{max-width:none;margin:0;border-radius:0;box-shadow:none;background:#fff;overflow:visible}
#main{padding:0!important;min-height:50vh}
.wrap{margin:28px auto 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:900px;box-sizing:content-box}
.wrap.wide{max-width:1080px}
.bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
h1,h2,h3{font-family:var(--f-display);color:var(--brown);font-weight:800}
.muted{color:var(--ink-2)}
.eyebrow.up,.up{color:var(--teal);font-family:var(--f-nav)}
/* header */
#topnav{display:block;padding:10px max(16px,env(safe-area-inset-left,0px)) 6px;border:0;background:#fff;position:relative;z-index:5}
.hdr-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:1120px;margin:0 auto}
.hdr-left{display:flex}
.logo{display:flex;flex-direction:column;align-items:center;text-decoration:none;gap:0}
.logo-doodle{margin-bottom:-6px;position:relative;z-index:1}
.logo-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:86px;height:80px;background:var(--charcoal);border-radius:20px 24px 18px 26px;transform:rotate(-4deg);color:#fff;font:600 19px/1 var(--f-hand)}
.logo-badge span:last-child{font-size:16px;transform:rotate(-6deg) translateX(6px);margin-top:4px;color:#FCE6DA}
.hdr-right{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.me-chip{border:1.5px solid var(--charcoal);border-radius:var(--hand);font:700 14px var(--f-nav);min-height:38px}
.hdr-link{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--f-nav);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:8px 6px}
.hdr-link[aria-current="page"]{color:var(--orange)}
.mainnav{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 26px;padding:14px 0 10px;max-width:1120px;margin:0 auto}
.mn{font:700 13px var(--f-nav);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:6px 2px;border-bottom:3px solid transparent;display:inline-flex;gap:6px;align-items:center}
.mn .chev{font-size:12px;line-height:1;transform:translateY(-2px)}
.mn:hover{color:var(--orange)}
.mn[aria-current="page"]{border-bottom:3px dashed var(--mustard);color:var(--brown)}
.menu-btn{display:none;border:1.5px solid var(--charcoal);border-radius:var(--hand)}
@media (max-width:900px){.menu-btn{display:inline-grid}.mainnav{display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px 0}.mainnav.open{display:flex}.mn{padding:14px 8px;border-bottom:1.5px dashed var(--line);font-size:15px;font-weight:800}.mn[aria-current="page"]{border-bottom:1.5px dashed var(--mustard);background:var(--peachb)}}
@media (max-width:480px){.me-chip b{max-width:70px}.hdr-link span{display:none}.logo-badge{width:70px;height:64px;font-size:16px}}
/* buttons, cards */
.btn{border:2px solid var(--charcoal);border-radius:var(--hand);font:700 16px var(--f-display);background:#fff;color:var(--ink)}
.btn:hover{border-color:var(--charcoal);transform:translateY(-1px)}
.btn.btn-primary{background:var(--orange);border-color:var(--charcoal);color:#fff;box-shadow:var(--shadow)}
.btn.btn-primary:hover{background:var(--orange-d)}
.btn-big{border-radius:var(--hand2)}
.card{border:2px solid var(--charcoal);border-radius:22px 28px 20px 26px/26px 20px 28px 22px;box-shadow:var(--shadow);background:#fff}
.sk{border:2px solid var(--charcoal);border-radius:var(--hand)}
.row{border:2px solid var(--charcoal);border-radius:16px 22px 18px 24px/22px 16px 24px 18px;background:#fff;box-shadow:var(--shadow)}
.row:hover{background:var(--paper-cream)}
.row .tile-ic{background:var(--paper-sky);color:var(--charcoal);border:1.5px solid var(--charcoal);border-radius:12px 16px 12px 14px}
.chip.next{background:var(--orange);color:#fff}
.group-h{font:800 13px var(--f-nav);letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:18px 0 8px}
.pill{border:1.5px solid var(--charcoal);border-radius:var(--hand)}
.icon-btn{border:1.5px solid var(--charcoal);border-radius:14px 18px 14px 16px}
.tasks .task{background:#fff;border:2px solid var(--charcoal);border-radius:var(--hand);box-shadow:var(--shadow)}
.tasks .task .tile-ic{border:1.5px solid var(--charcoal)}
/* lettering */
.letter{font-family:var(--f-display);font-weight:800;line-height:.95;letter-spacing:-.01em;margin:0;text-wrap:balance}
.lw{display:inline-block;transform:rotate(var(--r,0deg))}
.c0{color:var(--brown)}.c1{color:var(--orange)}
/* hero */
.hero2{position:relative;background:var(--skyb);padding:40px 16px 150px;overflow:hidden;text-align:center}
.h2-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px}
.banner{display:inline-block;position:relative;transform:rotate(-2.5deg);background:#fff;border:2px solid var(--charcoal);padding:6px 26px;font:600 clamp(18px,2.6vw,24px) var(--f-hand);color:var(--ink)}
.banner::before,.banner::after{content:"";position:absolute;top:50%;width:18px;height:18px;background:#fff;border:2px solid var(--charcoal);transform:translateY(-50%) rotate(45deg)}
.banner::before{left:-11px;border-right:0;border-top:0}.banner::after{right:-11px;border-left:0;border-bottom:0}
.banner span{position:relative;z-index:1}
.bigcloud{position:relative;width:min(640px,100%);padding:56px 40px 64px}
.bc-svg{position:absolute;inset:0;width:100%;height:100%}
.letter.big{position:relative;font-size:clamp(52px,10vw,108px)}
/* hero quote */
.letter.quote{position:relative;display:flex;flex-direction:column;align-items:center;gap:.04em;font-size:clamp(22px,3.9vw,46px);line-height:1;text-transform:uppercase;letter-spacing:.005em}
.letter.quote .ql{display:block;white-space:nowrap}
.letter.quote .ql.xl{font-size:1.9em;line-height:.92;letter-spacing:.01em}
.letter.quote .ql.qsm{font-size:.86em}
.letter.quote .ql.qbig{font-size:1.45em;line-height:.95}
.qw{display:inline-block;transform:rotate(var(--r,0deg))}
.q-lav{color:#8572C4}.q-lime{color:#9DAF1E}.q-pink{color:#EE6DB9}.q-teal{color:#1AA9A4}.q-orange{color:#F07A2E}
.q-plum{color:#6A4CA0}.q-green{color:#5E9424}.q-yellow{color:#EFA712}.q-magenta{color:#C0408A}.q-dot{color:#F07A2E}
.bigcloud:has(.quote){width:min(880px,100%);padding:178px 110px 78px}
@media (max-width:700px){.bigcloud:has(.quote){padding:104px 34px 44px}.letter.quote{font-size:clamp(17px,5.6vw,30px)}}
.h2-sub{color:#fff;font:800 clamp(20px,2.6vw,26px)/1.25 var(--f-nav);letter-spacing:.03em;margin:0;text-shadow:0 1px 0 rgba(58,63,70,.15)}
.btn-outline{background:transparent;border:2px solid #fff;color:#fff;font:800 14px var(--f-nav);letter-spacing:.22em;text-transform:uppercase;padding:0 30px;min-height:52px;cursor:pointer}
.btn-outline:hover{background:#fff;color:var(--teal)}
.h2-meta{color:#fff;font:700 13px var(--f-nav);letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.done-line{color:#fff;font:700 20px var(--f-display)}
.plane{position:absolute;right:4%;top:26px;z-index:1;max-width:30vw;height:auto}
.bunting{position:absolute;left:3%;top:40px;z-index:1;max-width:28vw;height:auto}
.fc{position:absolute;z-index:1;opacity:.95;animation:drift 38s linear infinite}
.fc1{left:8%;top:52%}.fc2{right:10%;top:44%;animation-duration:46s;animation-direction:reverse}.fc3{left:30%;top:18%;animation-duration:54s}
@keyframes drift{0%{transform:translateX(0)}50%{transform:translateX(40px)}100%{transform:translateX(0)}}
.ground{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;pointer-events:none}
.ground .hill{position:absolute;inset:auto 0 0 0;width:100%;height:120px}
.ground .trees{position:absolute;left:4%;bottom:44px}
.ground .houses{position:absolute;right:5%;bottom:40px}
@media (max-width:700px){.plane,.bunting{display:none}.ground .trees{left:0;transform:scale(.7);transform-origin:left bottom}.ground .houses{right:0;transform:scale(.7);transform-origin:right bottom}.hero2{padding-bottom:120px}.bigcloud{padding:40px 22px 46px}}
/* section sky header */
/* hero flying doodles */
.fly{position:absolute;z-index:1;pointer-events:none;height:auto}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-14px) rotate(calc(var(--rot,0deg)*-1))}}
@keyframes rise{0%{transform:translateY(0)}50%{transform:translateY(-22px)}100%{transform:translateY(0)}}
@keyframes sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(6deg) translateY(-8px)}}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
@keyframes glide{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(-18px,10px) rotate(3deg)}}
.fly-balloon{left:7%;top:24%;--rot:3deg;animation:bob 7s ease-in-out infinite}
.fly-kite{right:6%;top:28%;transform-origin:50% 0;animation:sway 6s ease-in-out infinite}
.fly-lan1{left:22%;top:58%;animation:rise 6s ease-in-out infinite}
.fly-lan2{right:24%;top:14%;animation:rise 7.5s ease-in-out infinite .8s}
.fly-lan3{right:19%;top:62%;animation:rise 6.8s ease-in-out infinite 1.6s}
.fly-la{left:19%;top:30%;--rot:-6deg;animation:bob 5.5s ease-in-out infinite}
.fly-lb{left:4%;top:60%;--rot:5deg;animation:bob 6.4s ease-in-out infinite .6s}
.fly-lc{right:14%;top:44%;--rot:-4deg;animation:bob 5.8s ease-in-out infinite 1.2s}
.fly-birds1{left:27%;top:10%}.fly-birds2{right:30%;top:36%;transform:scale(.75)}
.fly .wing{transform-box:fill-box;transform-origin:50% 100%;animation:flap 1.1s ease-in-out infinite}.fly .w2{animation-delay:.3s}.fly .w3{animation-delay:.6s}
.spark{animation:twinkle 3.2s ease-in-out infinite}
.sp1{left:33%;top:20%}.sp2{left:11%;top:46%;animation-delay:.8s}.sp3{right:9%;top:16%;animation-delay:1.4s}.sp4{right:33%;top:56%;animation-delay:.4s}.sp5{left:30%;top:70%;animation-delay:2s}.sp6{right:4%;top:62%;animation-delay:1s}
.hero2 .plane{animation:glide 9s ease-in-out infinite}
@media (min-width:901px){
 .hero2{padding:36px 24px 120px;min-height:560px;display:flex;align-items:center;justify-content:center}
 .hero2 .h2-in{gap:12px;width:100%}
 .bigcloud:has(.quote){width:min(760px,100%);padding:112px 80px 50px}
 .letter.quote{display:block;text-align:center;font-size:clamp(26px,2.6vw,36px);line-height:1.05}
 .letter.quote .ql:nth-child(1),.letter.quote .ql:nth-child(2),.letter.quote .ql:nth-child(4),.letter.quote .ql:nth-child(5){display:inline}
 .letter.quote .ql.qsm{font-size:1em}
 .letter.quote .ql:nth-child(1)::after,.letter.quote .ql:nth-child(4)::after{content:" "}
 .letter.quote .ql:nth-child(2)::after{content:"";display:block}
 .letter.quote .ql.xl{font-size:2.1em;margin:.04em 0 .02em}
 .letter.quote .ql.qbig{font-size:1.25em}
 .hero2 .fc1{top:70%;left:12%}.hero2 .fc2{top:8%;right:40%}.hero2 .fc3{top:76%;left:auto;right:30%}
 .mainnav{padding:6px 0 6px}
}
@media (max-width:1180px) and (min-width:901px){.fly-balloon{left:2%}.fly-kite{right:1%}.fly-la{left:14%;top:36%}.fly-lan1{left:12%}.fly-lan3{right:12%}.fly-birds1,.sp1,.sp5{display:none}}
@media (max-width:900px){.fly-kite,.fly-lan3,.fly-lb,.fly-birds2,.sp4,.sp5,.sp6{display:none}.fly-balloon{left:-4px;top:auto;bottom:150px;width:58px}.fly-la{left:6px;top:8px;width:40px}.fly-lc{right:6px;top:10px;width:40px}.fly-lan1{left:auto;right:8px;top:auto;bottom:160px;width:30px}.fly-lan2{right:auto;left:24%;top:4px;width:22px}.fly-birds1{left:auto;right:22%;top:34px;width:60px}.sp1{left:8%;top:30%}.sp2{left:auto;right:6%;top:42%}.sp3{right:30%;top:5%}}
.skyhead{position:relative;background:var(--skyb);text-align:center;padding:26px 16px 96px;overflow:hidden}
.sh-in{position:relative;z-index:2;width:min(560px,100%);margin:0 auto;padding:74px 30px 34px}
.sh-cloud{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.sh-sec{font:800 12px var(--f-nav);letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin:0 0 6px}
.skyhead .letter{font-size:clamp(34px,6vw,62px)}
.sh-sub{margin:10px 0 0;font:600 16px var(--f-hand);color:var(--ink)}
.skyhead .ground{height:90px}.skyhead .ground .hill{height:90px}.skyhead .ground .trees{bottom:28px;transform:scale(.75);transform-origin:left bottom}.skyhead .ground .houses{bottom:26px;transform:scale(.75);transform-origin:right bottom}
@media (max-width:700px){.skyhead .ground .trees,.skyhead .ground .houses{display:none}}
/* peach band */
.peach{background:var(--peachb);padding:22px 0 44px;position:relative}
.peach .wrap{margin-top:0;margin-bottom:0}
.slab{text-align:center;font:600 clamp(22px,2.8vw,28px)/1.25 var(--f-slab);color:var(--charcoal);margin:0}
.dash{display:block;width:170px;height:4px;margin:10px auto 22px;background:repeating-linear-gradient(90deg,var(--mustard) 0 16px,transparent 16px 24px);border-radius:3px}
.sec-gap{margin-top:44px}
.rounds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 18px}
@media (max-width:820px){.rounds{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}}
@media (max-width:560px){.frame{width:96px;margin-bottom:8px;box-shadow:0 0 0 6px #fff,0 0 0 8px var(--charcoal)}.round-t{font-size:15px;letter-spacing:.02em}.round-s{min-height:0}}
.round{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;cursor:pointer;color:var(--ink);font:inherit;text-align:center;padding:4px}
.frame{display:grid;place-items:center;width:clamp(110px,15vw,150px);aspect-ratio:1;max-width:100%;border-radius:50%;background:var(--pc,#fff);color:var(--charcoal);border:2px solid var(--charcoal);box-shadow:0 0 0 7px #fff,0 0 0 9px var(--charcoal);margin-bottom:12px;transition:transform .2s ease}
.round:hover .frame{transform:rotate(-5deg) scale(1.03)}
.round-t{font:700 18px var(--f-slab);text-transform:uppercase;letter-spacing:.04em;color:var(--charcoal)}
.round-s{font-size:14px;color:var(--ink-2);min-height:2.6em}
.round-go{font:800 12px var(--f-nav);letter-spacing:.2em;text-transform:uppercase;padding-bottom:5px;border-bottom:3px solid var(--mustard)}
.round-go.next{color:var(--orange)}.round-go.done{color:var(--good);border-bottom-color:var(--good)}
/* tab tree */
.tabtree{display:flex;flex-direction:column;gap:6px;margin:0 0 22px}
.tabrow{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;align-items:center;scrollbar-width:thin}
.tabrow.lv1{padding-left:16px}.tabrow.lv2{padding-left:32px}.tabrow.lv3{padding-left:48px}
.tr-arrow{flex:none;font:700 20px var(--f-display);color:var(--mustard)}
.tabp{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border:2px solid var(--charcoal);background:#fff;border-radius:var(--hand);text-decoration:none;color:var(--ink);font:700 15px var(--f-display);white-space:nowrap}
.tabp .chev{font-size:18px;line-height:1}
.tabp:hover{background:var(--paper-cream)}
.lv0 .tabp.on{background:var(--orange);color:#fff}
.lv1 .tabp.on{background:var(--skyb);color:var(--charcoal)}
.lv2 .tabp.on{background:var(--mustard);color:var(--charcoal)}
.tabrow.lv1 .tabp,.tabrow.lv2 .tabp{font-size:14px;padding:6px 13px}
.tcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.tcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.tcards{grid-template-columns:1fr}}
.tcard{display:flex;flex-direction:column;gap:4px;padding:18px 20px;text-decoration:none;color:var(--ink);background:var(--pc);min-height:150px;box-shadow:var(--shadow);transition:transform .2s ease}
.tcards .tcard:nth-child(3n+1){transform:rotate(-.8deg)}.tcards .tcard:nth-child(3n+2){transform:rotate(.6deg)}
.tcard:hover{transform:rotate(0) translateY(-3px)}
.p-sky{--pc:var(--paper-sky);--tc:#24617A}.p-peach{--pc:var(--paper-peach);--tc:#A4512F}.p-butter{--pc:var(--paper-butter);--tc:#7A5A0E}.p-mint{--pc:var(--paper-mint);--tc:#2C6B45}.p-pink{--pc:var(--paper-pink);--tc:#A3405F}.p-lav{--pc:var(--paper-lav);--tc:#5B3E8E}.p-cream{--pc:var(--paper-cream);--tc:var(--brown)}.p-sage{--pc:var(--paper-sage);--tc:#3E6A3A}
.tp-t{font:800 24px/1.1 var(--f-display);color:var(--tc,var(--brown))}
.tp-vi{font:600 15px var(--f-hand);color:var(--tc)}
.tp-ex{margin-top:auto;background:#fff;border:1.5px solid var(--charcoal);border-radius:12px 16px 12px 14px;padding:7px 11px;font-size:14px}
.tc-more{margin-top:8px;font:800 12px var(--f-nav);letter-spacing:.16em;text-transform:uppercase;color:var(--tc)}
.q-badge{border:2px solid var(--tc);border-radius:999px;align-self:flex-end;font:800 12px var(--f-nav);padding:2px 10px;background:rgba(255,255,255,.7);color:var(--tc)}
.sk-card{background:var(--pc);padding:20px 20px 16px}
/* vocabulary in topics */
.topic-words{display:flex;flex-direction:column;gap:14px}
.wlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.wlist li{padding:14px 16px;background:#fff;display:flex;flex-direction:column;gap:8px;min-width:0}
.wlist li:nth-child(4n+1){background:var(--paper-sky)}.wlist li:nth-child(4n+2){background:var(--paper-peach)}.wlist li:nth-child(4n+3){background:var(--paper-butter)}.wlist li:nth-child(4n+4){background:var(--paper-mint)}
.wl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.wl-head b{font:800 19px var(--f-display);color:var(--brown)}.wl-head .icon-btn{margin-left:auto}
.wl-dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;font-size:15px}
.wl-dl dt{font:800 11px/1.9 var(--f-nav);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);white-space:nowrap}
.wl-dl dd{margin:0;display:flex;flex-direction:column}
.fc-fam{font-size:17px;color:var(--ink)}
.fam-s{font-size:14px;color:var(--ink-2)}
/* flashcards, lessons */
.flashcard{border:2px solid var(--charcoal);border-radius:var(--hand);box-shadow:var(--shadow)}
.flashcard.flipped{background:var(--paper-butter)}
.fc-term{color:var(--brown);font-family:var(--f-display)}
.fc-lab{color:var(--teal);font-family:var(--f-nav)}
.seg-tabs{border:2px solid var(--charcoal);border-radius:var(--hand);background:#fff}
.seg-tabs button.on{background:var(--skyb);box-shadow:none}
.stp{border:2px solid var(--charcoal);border-radius:var(--hand)}
.stp.cur{background:var(--skyb);color:var(--charcoal);border-color:var(--charcoal)}
.lesson-page .lesson-head h1,.g-wrap .lesson-head h1{font-size:clamp(28px,4vw,40px)}
.tile-i{border:1.5px solid var(--charcoal);border-radius:14px 20px 14px 18px;background:var(--paper-cream)}
.g-card{border:2px solid var(--charcoal);border-radius:18px 22px 16px 24px/22px 16px 24px 18px}
.timeline{border:2px solid var(--charcoal);border-radius:var(--hand)}
.qwrap{max-width:1120px}
/* footer */
.foot{position:relative;background:var(--charcoal);color:#fff;margin-top:70px;padding:64px 16px 34px;text-align:center;border:0}
.foot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:26px;background:radial-gradient(circle at 20px 0,#fff 19px,transparent 20px) repeat-x;background-size:40px 26px}
.foot::after{content:"";position:absolute;left:0;right:0;top:34px;height:16px;background:radial-gradient(circle at 12px 16px,transparent 8px,rgba(255,255,255,.35) 8.5px,rgba(255,255,255,.35) 10px,transparent 10.5px) repeat-x;background-size:24px 16px;opacity:.7}
.foot-in{display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;z-index:1}
.foot-script{font:600 clamp(32px,5vw,48px)/1 var(--f-hand);transform:rotate(-4deg);margin:10px 0 0;color:#fff}
.stamp{display:inline-flex;flex-direction:column;align-items:center;background:var(--mustard);color:var(--charcoal);text-decoration:none;padding:10px 22px;border-radius:8px;outline:2px dashed var(--charcoal);outline-offset:-7px;font:800 22px/1 var(--f-display);transform:rotate(3deg)}
.stamp span:last-child{font-size:16px;margin-top:4px}
.stamp:hover{transform:rotate(0)}
.foot-small{font:700 12px var(--f-nav);letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin:6px 0 0}
#modal{background:rgba(58,63,70,.5)}
@media (prefers-reduced-motion:reduce){.fc{animation:none}.tcard,.frame{transition:none}}
@media (min-width:700px){.tabrow{flex-wrap:wrap;overflow:visible}}

#ww-host{padding:0 0 32px}
#ww-host .ww-box{max-width:1120px;margin:0 auto;padding:0 max(8px,env(safe-area-inset-left,0px))}
#ww-host .ww-frame{display:block;width:100%;height:calc(100vh - 24px);min-height:640px;border:0;background:#fff}
/* ===== Writing tab ===== */
.w-crumb{margin:4px 0 18px}
.w-crumb ol{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;margin:0;padding:0;font:700 13px var(--f-nav);letter-spacing:.06em}
.w-crumb li{display:flex;align-items:center}
.w-crumb li+li::before{content:"→";margin:0 10px;color:var(--ink-2);font-weight:600}
.w-crumb a{color:var(--teal);text-decoration:none}.w-crumb a:hover{text-decoration:underline}
.w-crumb [aria-current]{color:var(--brown)}
.w-tracks{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.w-mine{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.w-rub-note{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-2);margin:0 0 14px}
.w-pick{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.w-radios{display:flex;flex-direction:column;gap:8px}
.w-radio{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer}
.w-radio:has(input:checked){border-color:var(--charcoal);background:var(--paper-butter)}
.w-radio input{margin-top:5px;accent-color:var(--orange)}
.w-att .w-head{margin:0 0 14px}
.w-head h1{font-size:clamp(26px,3.6vw,38px);margin:2px 0 8px}
.w-head .sh-sec{margin:0}
.w-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.w-timer{font:800 14px var(--f-nav);letter-spacing:.04em;color:var(--teal);padding:3px 12px;border:1.5px solid var(--teal);border-radius:999px}
.w-timer.late{color:var(--orange-d);border-color:var(--orange-d)}
.w-att .stepper{margin:6px 0 16px}
.w-tabs{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.w-tab{border:2px solid var(--charcoal);border-radius:var(--hand);background:#fff;padding:8px 16px;font:700 15px var(--f-display);cursor:pointer}
.w-tab.on{background:var(--charcoal);color:#fff}
.w-card{display:flex;flex-direction:column;gap:14px;padding:22px 24px;margin-bottom:16px}
.w-task{display:flex;flex-direction:column;gap:12px}
.w-task-txt{white-space:pre-line}
.w-q{font:700 19px var(--f-display);color:var(--brown)}
.w-notes,.w-think,.w-story{background:var(--paper-cream);border-radius:14px;padding:12px 16px;display:flex;flex-direction:column;gap:6px}
.w-story{background:var(--paper-sky)}.w-story p{margin:0}
.w-notes ol,.w-think ul{margin:0;padding-left:22px}
.w-text{margin:0;padding:12px 16px;border-left:4px solid var(--mustard);background:var(--paper-butter);border-radius:0 12px 12px 0;font-style:italic}
.w-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:0}
.w-facts>div{background:var(--surface-2);border-radius:12px;padding:10px 14px}
.w-facts dt{font:800 11px var(--f-nav);letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.w-facts dd{margin:4px 0 0;font-weight:600}
.w-facts .w-must{grid-column:1/-1}.w-must ul{margin:0;padding-left:20px}
.w-how{border:1.5px dashed var(--charcoal);border-radius:14px;padding:8px 14px}
.w-how-in{display:flex;flex-direction:column;gap:10px;padding:6px 0}
.w-rtable,.w-cmp{width:100%;border-collapse:collapse;font-size:15px}
.w-rtable th,.w-rtable td,.w-cmp th,.w-cmp td{border-top:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
.w-rtable thead th,.w-cmp thead th{font:800 11px var(--f-nav);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);border-top:0}
.w-bands{margin:6px 0 0;padding-left:0;list-style:none;color:var(--ink-2);font-size:14px}
.w-bands b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:6px;background:var(--surface-2);color:var(--ink);margin-right:6px;font-size:12px}
.w-modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.w-mode{display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px 16px;border:2px solid var(--line);border-radius:var(--hand2);background:#fff;cursor:pointer;font:inherit}
.w-mode b{font:700 18px var(--f-display);color:var(--brown)}
.w-mode span{font-size:15px;color:var(--ink-2)}
.w-mode.on{border-color:var(--charcoal);background:var(--paper-peach);box-shadow:var(--shadow)}
.w-mode[disabled]{cursor:default;opacity:.8}
.w-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:4px}
.w-plan{display:flex;flex-direction:column;gap:12px}
.w-plan-top{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.w-f textarea{min-height:56px;font-size:16px;background:#fff}
.w-feats{border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px 16px;margin:0}
.w-feats legend{font-weight:700;padding:0 6px}
.w-sub{font-size:18px;margin-top:4px}
.w-chk{display:inline-flex;gap:8px;align-items:flex-start;cursor:pointer;font-size:15px}
.w-chk input{margin-top:4px;accent-color:var(--orange);width:17px;height:17px;flex:none}
.w-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.w-main{margin-bottom:0}
.w-ed-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.w-wc{font-size:15px;color:var(--ink-2)}
.w-ok{color:var(--good);font-weight:700}.w-bad{color:var(--orange-d);font-weight:700}
.w-editor{width:100%;min-height:420px;padding:16px 18px;border:2px solid var(--charcoal);border-radius:16px;font:17px/1.7 var(--f-body);resize:vertical;background:#fff}
.w-editor:focus{outline:3px solid var(--focus);outline-offset:2px}
.w-editor[readonly]{background:var(--surface-2)}
.w-side{display:flex;flex-direction:column;gap:12px;position:sticky;top:12px}
.w-box{padding:14px 16px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.w-box>summary{font-weight:800}
.w-box .w-task-txt{font-size:14px;max-height:220px;overflow:auto}
.w-box .w-q{font-size:16px}
.w-plan-sum{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.w-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.w-hint-h{display:flex;justify-content:space-between;align-items:center}
.w-chips2{display:flex;flex-wrap:wrap;gap:6px}
.w-structs{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.w-mini{font-size:15px}
.w-auto{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-weight:600}
.w-auto li{display:flex;align-items:center;gap:8px}.w-auto .ok{color:var(--good)}.w-auto .no{color:var(--orange-d)}
.w-total{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.w-big{font:800 56px/1 var(--f-display);color:var(--brown);margin:4px 0 0}.w-big small{font-size:24px;color:var(--ink-2)}
.w-labels{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.w-scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.w-sc{border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.w-sc-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.w-sc-n{font:800 22px var(--f-display);color:var(--brown)}.w-sc-n small{font-size:14px;color:var(--ink-2)}
.w-bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}.w-bar span{display:block;height:100%;background:var(--orange);border-radius:99px}
.w-quote{display:block;font-size:14px;color:var(--teal);font-style:italic;margin-top:2px}
.w-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.w-good,.w-fix{border-radius:16px;padding:14px 16px}
.w-good{background:var(--paper-mint)}.w-fix{background:var(--paper-peach)}
.w-good h3,.w-fix h3{font-size:18px;margin-bottom:6px}
.w-good ul,.w-fix ol,.w-fixes{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.w-fixes li span,.w-fix li span{display:block}
.w-cmp td.up{color:var(--good);font-weight:800}.w-cmp td.down{color:var(--orange-d);font-weight:800}
.w-cmp-t th,.w-cmp-t td{font-weight:800}
.w-diff{line-height:1.9}.w-diff del{background:#FBE0E6;color:#A3405F}.w-diff ins{background:#DDF0E3;color:#2F6E48;text-decoration:none;border-bottom:2px solid #7DB892}
.w-orig{white-space:pre-wrap;font-size:14px;max-height:300px;overflow:auto}
.w-spin{width:42px;height:42px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--orange);animation:wspin 1s linear infinite}
@keyframes wspin{to{transform:rotate(360deg)}}
.w-ewform{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:10px;align-items:end}
@media (max-width:900px){.w-grid{grid-template-columns:1fr}.w-side{position:static}}
@media (max-width:640px){.w-modes,.w-two,.w-plan-top{grid-template-columns:1fr}.w-ewform{grid-template-columns:1fr 1fr}.w-editor{min-height:320px}}

.w-up{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.w-upc{background:var(--pc);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.w-upw{font:800 19px var(--f-display);color:var(--brown)}
.w-upex{font-size:15px;font-style:italic;color:var(--ink)}
.w-ups{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.w-ups li{display:flex;flex-direction:column;gap:2px}
.w-model{background:#fff}
.w-model-txt{background:var(--paper-cream);border-radius:16px;padding:16px 20px;display:flex;flex-direction:column;gap:10px;font-size:17px;line-height:1.7}
.w-model-notes{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
/* ===== Reading ===== */
.chip.warn{background:#FCE3D4;color:#A34A16}
.rd-h2{margin:28px 0 12px;font-size:26px}
.rd-cont{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;background:var(--paper-butter);margin:4px 0 6px}
.rd-cont h2{font-size:22px;margin:2px 0}
.rd-skills{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.rd-papers{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.rd-paper{display:flex;flex-direction:column;gap:8px;padding:20px 22px}
.rd-results{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.rd-example{gap:10px}.rd-snip{white-space:pre-line;font-style:normal}
.rd-model{background:var(--paper-mint);border-radius:14px;padding:10px 14px}.rd-model ul{margin:4px 0 0;padding-left:20px}
.rd-cmd{background:#FBEFC6;color:inherit;border-bottom:2px solid var(--mustard);padding:0 3px;border-radius:4px;font-weight:700;cursor:help}
.rd-tip{display:flex;gap:6px;align-items:center;color:var(--teal);margin:2px 0 0}
.rd-wrap{max-width:1240px}
.rd-bar{position:sticky;top:0;z-index:6;background:#fff;border:2px solid var(--charcoal);border-radius:16px;padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin-bottom:12px;box-shadow:var(--shadow)}
.rd-bar-t{display:flex;flex-direction:column}.rd-bar-c{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rd-toggle{display:none;border:2px solid var(--charcoal);border-radius:999px;overflow:hidden}
.rd-toggle button{border:0;background:#fff;padding:6px 16px;font:700 14px var(--f-nav);cursor:pointer}.rd-toggle button.on{background:var(--charcoal);color:#fff}
.rd-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.rd-insert,.rd-qs{max-height:calc(100vh - 110px);overflow:auto;position:sticky;top:76px;border:2px solid var(--charcoal);border-radius:18px;background:#fff;padding:16px 20px}
.rd-insert{background:#FFFDF8}
.rd-ins-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;position:sticky;top:-16px;background:#FFFDF8;padding:6px 0;z-index:2}
.rd-tabs{display:flex;gap:6px}.rd-tab{border:2px solid var(--charcoal);border-radius:999px;background:#fff;padding:4px 14px;font:700 14px var(--f-display);cursor:pointer}.rd-tab.on{background:var(--charcoal);color:#fff}
.rd-hide{display:none}
.rd-title{font-size:24px;margin:4px 0 6px}.rd-stand{font-style:italic;color:var(--ink-2);margin:0 0 10px}
.rd-sub{font:800 17px var(--f-display);color:var(--teal);margin:14px 0 4px}
.rd-p{margin:0 0 10px;line-height:1.75;transition:background .3s}.rd-pn{font:800 13px var(--f-nav);color:var(--teal)}
.rd-ul{margin:0 0 10px;padding-left:24px;line-height:1.7}
.rd-gloss{font-size:14px;color:var(--ink-2);border-top:1px dashed var(--line);padding-top:8px;margin-top:10px}
mark.rd-hl{background:#FFE58A;color:inherit;border-radius:3px}
mark.rd-ev{background:#BFE6D0;color:inherit;border-radius:3px;box-shadow:0 0 0 2px #7DB892}
.rd-evp{background:#F1FAF4;border-radius:8px;box-shadow:-6px 0 0 #F1FAF4,6px 0 0 #F1FAF4}
.rd-hlbtn{position:fixed;z-index:60;background:var(--charcoal);color:#fff;border:0;border-radius:999px;padding:8px 16px;font:700 14px var(--f-nav);cursor:pointer;box-shadow:var(--shadow)}
.rd-hint{margin-top:8px}
.rd-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.rd-nq{min-width:42px;height:32px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font:700 13px var(--f-nav);cursor:pointer;position:relative}
.rd-nq.ans{background:var(--paper-sky);border-color:var(--teal)}.rd-nq.fl::after{content:"⚑";position:absolute;top:-8px;right:-4px;font-size:12px;color:var(--orange-d)}
.rd-nq.ok{background:var(--paper-mint);border-color:#7DB892}.rd-nq.part{background:var(--paper-butter);border-color:var(--mustard)}.rd-nq.no{background:var(--paper-pink);border-color:#E38FA5}
.rd-intro{font:700 15px var(--f-body);background:var(--surface-2);border-radius:12px;padding:8px 12px;margin:14px 0 8px}
.rd-q{border-top:1px dashed var(--line);padding:12px 0;scroll-margin-top:20px}.rd-q.flagged{background:linear-gradient(90deg,#FFF4E8,transparent)}
.rd-qh{display:flex;gap:10px;align-items:baseline;margin-bottom:6px}.rd-qn{font:800 20px var(--f-display);color:var(--brown)}.rd-stem{font-weight:700}
.rd-qb{display:grid;grid-template-columns:30px 1fr;gap:6px}.rd-sublab{font-weight:800;color:var(--ink-2)}
.rd-qmain{display:flex;flex-direction:column;gap:8px;min-width:0}
.rd-qline{margin:0}.rd-mk{font-weight:800;color:var(--ink-2);white-space:nowrap}
.rd-in{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font:16px var(--f-body);background:#fff}
.rd-in:focus{outline:3px solid var(--focus);outline-offset:1px}
.rd-two{display:flex;flex-direction:column;gap:8px}.rd-lab{display:flex;flex-direction:column;gap:4px}.rd-lab>span{font-size:14px;font-weight:700;color:var(--ink-2)}
.rd-ticks{display:flex;flex-direction:column;gap:6px}.rd-ticks.rd-row{flex-direction:row;gap:16px}
.rd-tick{display:flex;gap:10px;align-items:center;padding:6px 10px;border:1.5px solid var(--line);border-radius:10px;cursor:pointer}
.rd-tick:has(input:checked){border-color:var(--charcoal);background:var(--paper-butter)}.rd-tick input{width:18px;height:18px;accent-color:var(--orange);flex:none}
.rd-match{border-collapse:collapse;width:100%}.rd-match td,.rd-match th{border:1px solid var(--line);padding:6px 8px;text-align:left}.rd-match select{width:100%;min-height:36px;border-radius:8px;border:1.5px solid var(--line)}
.rd-flag{align-self:flex-start;border:0;background:none;color:var(--ink-2);font:600 13px var(--f-body);cursor:pointer;padding:2px 0}.rd-flag.on{color:var(--orange-d)}
.rd-confirm{background:var(--paper-peach);margin-bottom:12px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.rd-sum{padding:16px 18px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.rd-weak{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rd-wk{border:1.5px solid var(--charcoal);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.rd-rev{border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.rd-rev.ok{background:#F1FAF4}.rd-rev.no{background:#FFF6EE}
.rd-rr{display:grid;grid-template-columns:150px 1fr;gap:8px}.rd-rr>b{font:800 11px var(--f-nav);letter-spacing:.1em;text-transform:uppercase;color:var(--teal);padding-top:3px}
.rd-m{font:800 17px var(--f-display);color:var(--brown)}.rd-note{display:block}
.rd-words{border-top:2px dashed var(--line);margin-top:14px;padding-top:10px}.rd-words ul{margin:4px 0 0;padding-left:20px}
.rd-plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.rd-plist li{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}.rd-pbtns{display:flex;gap:6px;flex-wrap:wrap}
.rd-end{margin-top:14px}
@media (max-width:900px){
 .rd-toggle{display:inline-flex}.rd-cols{display:block}.rd-insert,.rd-qs{max-height:none;position:static;overflow:visible;padding:14px}
 .rd-ex.show-q .rd-insert{display:none}.rd-ex.show-t .rd-qs{display:none}.rd-ins-h{position:static}
 .rd-rr{grid-template-columns:1fr;gap:2px}.rd-weak{grid-template-columns:1fr}.rd-bar{top:0}
}
@media (max-width:900px){.rd-bar-t .tiny{display:none}.rd-bar{padding:8px 10px;gap:6px}.rd-bar .chip{font-size:12px}}

/* ===== My Review ===== */
.rv-today{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--paper-butter);padding:20px 24px}
.rv-done{font:800 24px var(--f-display);color:var(--brown);margin:4px 0}
.rv-sec{margin-top:26px;display:flex;flex-direction:column;gap:12px}.rv-sh{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.rv-filters{display:flex;gap:6px;flex-wrap:wrap}.rv-f{border:1.5px solid var(--charcoal);border-radius:999px;background:#fff;padding:5px 14px;font:700 14px var(--f-body);cursor:pointer}.rv-f span{opacity:.6;margin-left:4px}.rv-f.on{background:var(--charcoal);color:#fff}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.rv-mini{display:flex;flex-direction:column;gap:6px;padding:16px 18px}.rv-mt{font-weight:700;margin:0}
.rv-ch{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.rv-orig{margin-left:auto}
.rv-sk-vocab{background:var(--paper-peach)!important}.rv-sk-grammar{background:var(--paper-butter)!important}.rv-sk-writing{background:var(--paper-lav)!important}.rv-sk-reading{background:var(--paper-sky)!important}
.rv-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:auto}
.rv-card{display:flex;flex-direction:column;gap:10px;padding:22px 24px}
.rv-term{font:800 30px var(--f-display);color:var(--brown);margin:4px 0 0}.rv-sent{font-style:italic;background:var(--paper-cream);border-radius:12px;padding:8px 12px}
.rv-ans{background:var(--paper-mint);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:4px}
.rv-rate{display:flex;gap:10px;flex-wrap:wrap}
.rv-q{font-weight:700;font-size:18px;margin:0}.rv-rule{display:flex;gap:6px;align-items:flex-start;color:var(--teal)}
mark.rv-wrong{background:#FBE0E6;color:#A3405F;border-radius:4px;padding:0 2px}
.rv-sbs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rv-sbs>div{background:var(--surface-2);border-radius:12px;padding:10px 12px}.rv-sbs>div:last-child{background:var(--paper-mint)}
.rv-para{white-space:pre-wrap}
.rv-ev{background:#FFFDF8;border:1.5px dashed var(--charcoal);border-radius:12px;padding:10px 14px}
.rv-prog{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-weight:700}.rv-bar{flex:1;height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}.rv-bar span{display:block;height:100%;background:var(--orange)}
.rv-stats{margin-bottom:6px}.rv-rep{display:flex;gap:6px;flex-wrap:wrap}
.rv-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}.rv-pg{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.rv-pr{display:flex;flex-direction:column;gap:2px}.rv-pts{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.rv-pt{background:var(--surface-2);border-radius:8px;padding:2px 8px;font-weight:700;font-size:14px}
.rv-savebtn.on{background:var(--paper-butter)}.rv-qsave{margin-top:10px}
@media (max-width:700px){.rv-two,.rv-sbs{grid-template-columns:1fr}}

/* ===== tense pages ===== */
.tz-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
.tz-top h2{font:700 clamp(24px,3vw,32px) var(--f-display);margin:2px 0 0}
.tz-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:12px 0 10px;font-size:14px;font-weight:600}
.tz-meta .chip.lv{background:var(--butter);color:var(--butter-ink);border:1.5px solid var(--charcoal)}
.tz-st{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2)}.tz-st.ok{color:var(--good)}.tz-st.bad{color:var(--bad)}
.tz-top .prog{max-width:420px}.tz-top .prog span{background:var(--mint-strong)}
.tz-top-r{display:flex;flex-direction:column;gap:6px}.tz-top-r .btn-big{width:auto}
@media (max-width:760px){.tz-top{grid-template-columns:1fr}.tz-top-r .btn-big{width:100%}}
.tz-slides{display:flex;flex-direction:column;gap:14px;padding:18px 22px 22px}
.tz-dots{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.tz-dot{flex:1 0 auto;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:600 14px var(--f-body);cursor:pointer;white-space:nowrap;color:var(--ink-2)}
.tz-dot span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-2);font-size:12px}
.tz-dot.past span{background:var(--good-bg);color:var(--good)}
.tz-dot.on{background:var(--paper-sky,#D9EDFC);border-color:var(--charcoal);color:var(--ink)}.tz-dot.on span{background:var(--charcoal);color:#fff}
.tz-count{align-self:center;font:700 13px var(--f-nav);letter-spacing:.12em;color:var(--ink-2)}
.tz-body{min-height:240px;display:flex;flex-direction:column;gap:14px}
.tz-h{font:700 clamp(20px,2.4vw,24px) var(--f-display);text-align:center;color:var(--teal,#1B5E95)}
.tz-h .muted{font-weight:500;font-size:.75em}
.tz-lead{font-size:18px;text-align:center;max-width:60ch;margin:0 auto}
.tz-tip{background:var(--mint);border:1.5px solid var(--charcoal);border-radius:16px 20px 14px 22px;padding:14px 18px}
.tz-tip ul{margin:8px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:4px}
.tz-formula{display:flex;justify-content:center}.tz-fchip{font:700 18px var(--f-display);background:var(--butter);border:2px solid var(--charcoal);border-radius:12px;padding:8px 18px;transform:rotate(-1deg)}
.tz-tbl-wrap{overflow-x:auto}
.tz-tbl-t{font-weight:700;margin:0 0 6px;color:var(--ink-2)}
.tz-tbl{width:100%;border-collapse:separate;border-spacing:0;border:2px solid var(--charcoal);border-radius:14px;overflow:hidden;font-size:16px;background:#fff}
.tz-tbl th,.tz-tbl td{padding:9px 12px;border-bottom:1.5px solid var(--line);border-right:1.5px solid var(--line);text-align:center}
.tz-tbl tr>*:last-child{border-right:0}.tz-tbl tbody tr:last-child>*{border-bottom:0}
.tz-tbl thead th{background:var(--butter);font:700 15px var(--f-display)}
.tz-tbl thead th.pos{background:var(--good-bg);color:var(--good)}.tz-tbl thead th.neg{background:var(--bad-bg);color:var(--bad)}.tz-tbl thead th.q{background:var(--sky);color:var(--sky-ink)}
.tz-tbl tbody th{background:var(--surface-2);font-weight:700;white-space:nowrap}
.tz-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tz-rules li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;align-items:center;padding:10px 14px;border-radius:14px;background:var(--surface-2)}
.tz-rule{font-weight:700}.tz-eg{color:var(--ink)}
@media (max-width:600px){.tz-rules li{grid-template-columns:1fr;gap:2px}}
.hl{color:var(--seg-v,#1C7A55);background:var(--seg-v-bg,#DDF3E8);border-radius:5px;padding:0 3px}
.tz-uses{display:flex;flex-direction:column;gap:10px}
.tz-use{border:1.5px solid var(--charcoal);border-radius:16px;background:#fff;overflow:hidden}
.tz-use>summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;width:100%}
.tz-use>summary::before{display:none}
.tz-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--peach);border:1.5px solid var(--charcoal);font-weight:800;flex:none}
.tz-ut{flex:1;display:flex;flex-direction:column}
.tz-see{font:800 12px var(--f-nav);letter-spacing:.12em;text-transform:uppercase;color:var(--orange,#EE7D3A);white-space:nowrap}
.tz-see::after{content:" ↓"}.tz-use[open] .tz-see::after{content:" ↑"}
.tz-use ul{margin:0;padding:4px 16px 14px 56px;display:flex;flex-direction:column;gap:6px;font-size:17px}
.tz-sigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.tz-sig{border:1.5px solid var(--charcoal);border-radius:16px 20px 14px 22px;padding:12px 14px;background:#fff}
.tz-sig-t{font:700 14px var(--f-nav);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 8px}
.tz-chips{display:flex;flex-wrap:wrap;gap:6px}.tz-chips span{padding:4px 10px;border-radius:999px;background:var(--butter);font-weight:600;font-size:15px}
.tz-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tz-bars li{display:grid;grid-template-columns:110px minmax(0,1fr) 40px;gap:8px;align-items:center;font-size:15px}
.tz-bar{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden}.tz-bar i{display:block;height:100%;background:var(--orange,#EE7D3A);border-radius:99px}
.tz-bars b{text-align:right;font-variant-numeric:tabular-nums}
.tz-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.tz-note{border:1.5px solid var(--charcoal);border-radius:16px;padding:14px;background:var(--surface-2);display:flex;flex-direction:column;gap:8px}
.tz-note h4{margin:0;font:700 17px var(--f-display);display:flex;align-items:center;gap:6px}
.tz-note.careful{background:var(--bad-bg)}.tz-note.careful h4{color:var(--bad)}
.tz-tip.careful{background:var(--bad-bg)}
.tz-exs{display:flex;flex-direction:column;gap:8px}
.tz-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1.5px dashed var(--line);padding-top:14px}
/* lesson page */
.lz{display:flex;flex-direction:column;gap:16px;scroll-margin-top:12px}
.lz-bar{position:sticky;top:8px;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 18px}
@media (max-width:900px){.lz-bar{top:64px}}
.lz-bar-t{display:flex;flex-direction:column}
.lz-prog{display:flex;align-items:center;gap:10px;min-width:220px;flex:0 1 340px}.lz-prog .prog{flex:1}.lz-prog .prog span{background:var(--mint-strong)}
.lz-count{font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.lz-map{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.lz-map a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 8px;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;align-items:center}
.lz-map a:hover{border-color:var(--charcoal)}
.lz-k{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--charcoal);color:#fff;font-weight:800}
.lz-map .lz-lv{justify-self:start}.lz-n{display:none}
.lz-lv{display:inline-block;font:800 11px var(--f-nav);letter-spacing:.1em;text-transform:uppercase;padding:2px 9px;border-radius:999px;border:1.5px solid currentColor}
.lv-easy{color:var(--good);background:var(--good-bg)}.lv-mid{color:var(--butter-ink);background:var(--butter)}.lv-hard{color:var(--bad);background:var(--bad-bg)}
.lz-part{position:relative;display:flex;flex-direction:column;gap:6px}
.lz-part>.lz-lv{align-self:flex-start;margin-left:8px}
.lz-part .ex{scroll-margin-top:96px}
.lz-end{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--paper-cream,#FFF8EE)}
.lz-score{margin-top:6px;display:flex;gap:6px}
.lz-rail-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.lz-rail{list-style:none;margin:0;padding:4px 0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:100%;position:relative}
.lz-rail::before{content:"";position:absolute;left:6%;right:6%;top:34px;border-top:3px dashed var(--line);z-index:0}
.lz-rail li{display:flex;justify-content:center;position:relative;z-index:1}
.lz-node{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;cursor:pointer;font:inherit;color:var(--ink);padding:4px 2px;border-radius:14px}
.lz-ring{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:conic-gradient(var(--mint-strong) var(--p),var(--surface-2) 0);border:2px solid var(--charcoal);transition:transform .15s ease}
.lz-ring>span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--charcoal);font:800 18px var(--f-display)}
.lz-node:hover .lz-ring{transform:translateY(-2px)}
.lz-node.on .lz-ring{box-shadow:0 0 0 4px var(--butter),0 0 0 6px var(--charcoal)}.lz-node.on .lz-ring>span{background:var(--butter)}
.lz-node.done .lz-ring>span{background:var(--good-bg);color:var(--good)}
.lz-node.soon .lz-ring{border-style:dashed;background:#fff}.lz-node.soon .lz-ring>span{color:var(--ink-2);border-style:dashed}
.lz-nl{font:700 14px var(--f-display);white-space:nowrap}.lz-ns{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lz-node.on .lz-nl{text-decoration:underline;text-decoration-color:var(--mustard,#E2B23C);text-decoration-thickness:3px;text-underline-offset:4px}
.lz-pager{display:flex;gap:6px;align-items:center}
.pg{min-width:36px;height:36px;padding:0 10px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font:700 15px var(--f-body);cursor:pointer;display:inline-grid;place-items:center}
.pg.on{background:var(--charcoal);border-color:var(--charcoal);color:#fff}.pg[disabled]{opacity:.35;cursor:default}
@media (max-width:700px){.lz-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76px;overflow-x:auto;scrollbar-width:thin}.lz-rail::before{left:30px;right:auto;width:calc(76px*7)}}
.wk-note{display:flex;gap:14px;align-items:flex-start;background:var(--sky,#D9EDFC)}
.wk-note h3{font:700 19px var(--f-display);margin:0 0 4px}.wk-note ul{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:3px}
.wk-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--charcoal);flex:none}
.wk-home{display:flex;flex-direction:column;gap:16px;align-items:center}.wk-home .btn-big{width:auto}
.wk-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.wk-test{display:flex;flex-direction:column;gap:14px}
.wk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.wk-q{display:flex;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface-2)}
.wk-q.ok{background:var(--good-bg)}.wk-q.bad{background:var(--bad-bg)}
.wk-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;border:1.5px solid var(--charcoal);font-weight:800;font-size:14px;flex:none}
.wk-qb{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.wk-line{font-size:18px;line-height:2.1;margin:0}
.wk-why{background:#fff;border:1.5px solid var(--charcoal);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:5px;font-size:15px}
.wk-why p{margin:0}.wk-lab{display:inline-block;font:800 11px var(--f-nav);letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:999px;margin-right:4px}
.wk-lab.bad{background:var(--bad-bg);color:var(--bad)}.wk-lab.ok{background:var(--good-bg);color:var(--good)}
.wk-rule{color:var(--ink-2)}
.tz-tabs{display:flex;gap:0;border-bottom:2px solid var(--charcoal);margin-top:8px;scroll-margin-top:12px}
.tz-tab{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:2px solid transparent;border-bottom:0;border-radius:16px 18px 0 0;background:none;font:800 17px var(--f-display);color:var(--ink-2);cursor:pointer;margin-bottom:-2px}
.tz-tab:hover{color:var(--ink)}
.tz-tab.on{background:#fff;border-color:var(--charcoal);color:var(--ink);box-shadow:inset 0 4px 0 var(--mustard,#E2B23C)}
.lzs{display:flex;flex-direction:column;gap:16px;scroll-margin-top:12px}
.lz-tabs{display:flex;gap:10px;flex-wrap:wrap}
.lz-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:150px;padding:10px 18px;border:2px solid var(--charcoal);border-radius:16px 20px 14px 22px;background:#fff;cursor:pointer;font:inherit;text-align:left;box-shadow:var(--shadow)}
.lz-tab b{font:700 17px var(--f-display)}.lz-tab span{font-size:13px;color:var(--ink-2);display:inline-flex;align-items:center;gap:4px}
.lz-tab.on{background:var(--butter)}
.lz-tab:hover:not(.on){background:var(--paper-cream,#FFF8EE)}
@media (max-width:600px){.tz-slides{padding:14px 12px 16px}.tz-tbl{font-size:14px}.tz-tbl th,.tz-tbl td{padding:7px 6px}.tz-tbl tbody th{white-space:normal}.tz-use ul{padding-left:20px}.lz-bar{padding:10px 14px}.lz-prog{min-width:0;flex:1 1 100%}}
@media (min-width:901px){
 #topnav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:28px;padding:8px max(24px,calc((100% - 1200px)/2)) 8px;border-bottom:1.5px dashed var(--line)}
 #topnav .hdr-top{display:contents}#topnav .hdr-left{display:none}
 #topnav .logo{grid-column:1;grid-row:1}
 #topnav .mainnav{grid-column:2;grid-row:1;margin:0;max-width:none;padding:0;justify-content:center;gap:6px 24px}
 #topnav .mn{font-size:15.5px;font-weight:800;letter-spacing:.12em}
 #topnav .hdr-right{grid-column:3;grid-row:1}
 #topnav .logo-badge{width:64px;height:58px;font-size:15px}#topnav .logo-badge span:last-child{font-size:13px}
}
@media (min-width:1121px) and (max-width:1400px){#topnav .mainnav{gap:6px 16px}#topnav .mn{font-size:14px;letter-spacing:.08em}}
@media (min-width:901px) and (max-width:1120px){#topnav .mainnav{gap:6px 14px}#topnav .mn{font-size:13px;letter-spacing:.08em}#topnav .hdr-link span{display:none}}
.foot-script{text-align:center;line-height:1.1}
.show-sm{display:none}@media (max-width:480px){.hide-sm{display:none}.show-sm{display:inline}}
.tcards.two{grid-template-columns:repeat(2,minmax(0,1fr))}@media (max-width:560px){.tcards.two{grid-template-columns:1fr}}
.rd-h2-sub{font-size:.7em;font-weight:600;color:var(--ink-2)}
.rd-guides{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-top:18px;border-top:2px dashed var(--line)}
.rd-guides-lead{margin:-4px 0 10px}
.guide-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:700px){.guide-list{grid-template-columns:1fr}}
.guide-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink);height:100%}
.guide-card:hover{border-color:var(--charcoal)}
.guide-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--a);color:var(--ai);flex:none}
.guide-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.guide-tag{font:800 10px var(--f-nav);letter-spacing:.14em;text-transform:uppercase;color:var(--ai);}
.guide-t{font:700 16px var(--f-display);line-height:1.2}
.guide-ex{font-size:13px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.guide-go{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font:700 12px var(--f-nav);letter-spacing:.06em;color:var(--ink-2);white-space:nowrap;flex:none}
.guide-pct{font-size:12px;color:var(--good)}
.acc-sage{--a:#E3EED9;--ai:#3F6B2A;--as:#9CC27E}
@media (max-width:420px){.guide-go{display:none}}
.mc-intro{display:flex;flex-direction:column;gap:8px}.mc-intro .chip.lv{background:var(--butter);color:var(--butter-ink)}
.mc-bar{position:sticky;top:8px;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 18px}
@media (max-width:900px){.mc-bar{top:64px}}
.mc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.mc-q{display:flex;gap:14px;padding:16px 18px;border-radius:18px;background:#fff;border:1.5px solid var(--line)}
.mc-q.picked{border-color:var(--charcoal)}
.mc-q.res.ok{background:#F4FBF6;border-color:var(--good)}.mc-q.res.bad{background:#FFF6F3;border-color:var(--bad)}
.mc-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--butter);border:1.5px solid var(--charcoal);font-weight:800;flex:none}
.mc-q.res.ok .mc-n{background:var(--good-bg)}.mc-q.res.bad .mc-n{background:var(--bad-bg)}
.mc-qb{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.mc-text{font-size:18px;line-height:1.6;margin:0;font-weight:500}
.mc-blank{display:inline-block;width:64px;border-bottom:2.5px solid var(--ink);margin:0 4px;vertical-align:-3px}
.mc-fill{color:var(--good);background:var(--good-bg);padding:0 5px;border-radius:6px}
.mc-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:640px){.mc-opts{grid-template-columns:1fr}}
.mc-opt{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 12px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font:500 16px var(--f-body);color:var(--ink);cursor:pointer;min-height:46px}
button.mc-opt:hover{border-color:var(--charcoal)}
.mc-opt.on{background:var(--sky,#D9EDFC);border-color:var(--charcoal);font-weight:700}
.mc-l{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--surface-2);font-weight:800;font-size:14px;flex:none}
.mc-opt.on .mc-l{background:var(--charcoal);color:#fff}
.mc-opt.right{background:var(--good-bg);border-color:var(--good);color:var(--good);font-weight:700}.mc-opt.right .mc-l{background:var(--good);color:#fff}
.mc-opt.wrong{background:var(--bad-bg);border-color:var(--bad);color:var(--bad);text-decoration:line-through}.mc-opt.wrong .mc-l{background:var(--bad);color:#fff}
.mc-exp{background:#fff;border:1.5px solid var(--charcoal);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:6px}
details.mc-exp{display:block}details.mc-exp>summary{font-size:14px;color:var(--ink-2)}
.mc-f{margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mc-flab{font:800 11px var(--f-nav);letter-spacing:.08em;text-transform:uppercase;background:var(--lav);color:var(--lav-ink);padding:3px 9px;border-radius:999px}
.mc-ftxt{font:700 15px var(--f-body);background:var(--butter);padding:3px 10px;border-radius:8px}
.mc-why{margin:0;font-size:15px}
.bad-t{color:var(--bad);margin:0}
.mc-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px}
.mc-pnums{display:flex;gap:6px;flex-wrap:wrap}.pg.full:not(.on){background:var(--good-bg);border-color:var(--good)}
.mc-score{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.mc-ring{display:grid;place-items:center;width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--mint-strong) var(--p),var(--surface-2) 0);border:2px solid var(--charcoal);flex:none}
.mc-ring>span{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:#fff;border:1.5px solid var(--charcoal);font-size:15px}.mc-ring b{font:800 30px var(--f-display);line-height:1}
.mc-score-t{flex:1;min-width:240px;display:flex;flex-direction:column;gap:8px}.mc-score-t h2{font:700 24px var(--f-display);margin:0}
.mc-tags{display:flex;flex-wrap:wrap;gap:6px}.mc-tag{font-size:13px;padding:3px 10px;border-radius:999px;background:var(--surface-2)}.mc-tag.full{background:var(--good-bg);color:var(--good)}.mc-tag.zero{background:var(--bad-bg);color:var(--bad)}
.mc-filter{margin:4px 0}
@media (max-width:640px){.mc-bar{padding:8px 12px;gap:6px 10px;flex-wrap:nowrap}.mc-bar>div:first-child .muted{display:none}.mc-bar>div:first-child b{font-size:14px;white-space:nowrap}.mc-bar .lz-prog{min-width:0;flex:1 1 auto}.mc-bar .lz-count{font-size:12px}.mc-bar .btn-sm{min-height:36px;padding:0 10px;font-size:13px}.mc-q{padding:12px;gap:10px}.mc-text{font-size:17px}}
.rd-guides{border:2px solid var(--charcoal);border-radius:18px 22px 16px 24px;background:#fff;box-shadow:var(--shadow);margin:0 0 18px;padding:0;border-top:2px solid var(--charcoal)}
.rd-guides-sum{display:flex;align-items:center;gap:14px;width:100%;padding:14px 18px;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.rd-gi{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--sky);color:var(--sky-ink);flex:none;border:1.5px solid var(--charcoal)}
.rd-gt{flex:1;display:flex;flex-direction:column}.rd-gt b{font:700 20px var(--f-display)}.rd-gt span{font-size:14px;color:var(--ink-2)}
.rd-gchev{display:inline-flex;align-items:center;gap:4px;font:800 12px var(--f-nav);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.rd-guides-body{padding:0 18px 20px;display:flex;flex-direction:column;gap:14px}
.rd-guides-body .tcards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.rd-guides-body .tcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rd-guides-body .tcards{grid-template-columns:1fr}}

/* phonetics */
.ph-u{text-decoration-thickness:3px;text-underline-offset:4px;text-decoration-color:var(--orange,#EE7D3A);font-weight:800}
.ph-ipa{font-family:"Lucida Sans Unicode","Arial Unicode MS","Segoe UI","Noto Sans",system-ui,sans-serif;color:var(--sky-ink,#1B5E95)}
.ph-ipa.big{font-size:1.15em;font-weight:700}
.ph-warn{background:var(--bad-bg);color:var(--bad)}
.ph-voice{margin:-6px 0 6px}
.ph-daily{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--butter)}
.ph-daily h2{font:700 24px var(--f-display);margin:0 0 6px}.ph-plan{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:2px}.ph-daily .btn-big{width:auto}
.ph-links{text-align:right;margin:18px 0 -8px}.ph-links a{font-weight:700}.ph-modes{grid-template-columns:repeat(5,minmax(0,1fr))}@media (max-width:1100px){.ph-modes{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:640px){.ph-modes{grid-template-columns:1fr}}
button.tcard{text-align:left;font:inherit;cursor:pointer;width:100%}
.ph-exrow{cursor:default}.ph-exrow .main .bar{max-width:260px;margin-top:4px}.ph-exbtns{display:flex;gap:6px;flex-wrap:wrap}
.ph-theory .tz-tip,.ph-theory .tz-note{margin-top:14px}@media (max-width:640px){.ph-tbl thead{display:none}.ph-tbl,.ph-tbl tbody,.ph-tbl tr,.ph-tbl th,.ph-tbl td{display:block;width:100%}.ph-tbl tr{border-bottom:2px solid var(--line,#ddd);padding:8px 0}.ph-tbl th[scope=row]{background:none;font-size:22px;padding:6px 12px 0}.ph-tbl td{padding:4px 12px;border:0}}
.ph-theory h2{font:700 24px var(--f-display);margin:0 0 6px}.ph-tbl td,.ph-tbl th{text-align:left}
.ph-exs{display:flex;flex-wrap:wrap;gap:6px 14px}.ph-ex{display:inline-flex;align-items:center;gap:6px}
.ph-spk{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--charcoal);background:#fff;cursor:pointer;flex:none;color:var(--ink)}
.ph-spk:hover:not([disabled]){background:var(--sky)}.ph-spk[disabled]{opacity:.35;cursor:not-allowed}
.ph-spk.loading{animation:phpulse 1s infinite}.ph-spk.playing{background:var(--mint);border-color:var(--good)}
@keyframes phpulse{50%{opacity:.4}}
.ph-bar{position:sticky;top:8px;z-index:15;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px}.ph-bar .prog{flex:1;min-width:120px}.ph-bar .chip.lv{background:var(--butter);color:var(--butter-ink)}
@media (max-width:900px){.ph-bar{top:64px}}
.ph-time{font-variant-numeric:tabular-nums;font-weight:700}
.ph-qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}.ph-qh{display:flex;align-items:center;gap:10px}.ph-qh .eyebrow{margin:0}.ph-q.ok{border-color:var(--good)}.ph-q.bad{border-color:var(--bad)}.ph-top{margin:4px 0}
.ph-end{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.ph-end p{margin:2px 0 0}.ph-end .btn-big{width:auto}
@media (max-width:640px){.ph-bar{gap:6px 10px;padding:8px 12px}.ph-bar b{font-size:14px}.ph-bar .btn-sm{min-height:34px;padding:0 10px}.ph-w{font-size:20px}}
.ph-q{display:flex;flex-direction:column;gap:14px}.ph-instr{font:700 20px var(--f-display);margin:0}
.ph-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}@media (max-width:640px){.ph-opts{grid-template-columns:1fr}}
.ph-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}@media (max-width:760px){.ph-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ph-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid var(--line);border-radius:16px;background:#fff}
.ph-opt.on{border-color:var(--charcoal);background:var(--sky)}.ph-opt.right{border-color:var(--good);background:var(--good-bg)}.ph-opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.ph-pick{flex:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:none;border:0;padding:6px 4px;font:inherit;cursor:pointer;text-align:left;color:var(--ink);min-height:48px}
.ph-pick[disabled]{cursor:default}
.ph-l{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--surface-2);font-weight:800;flex:none}.ph-l.sm{width:24px;height:24px;font-size:13px;display:inline-grid}
.ph-opt.on .ph-l{background:var(--charcoal);color:#fff}
.ph-w{font-size:22px;font-weight:600}.ph-opt .ph-ipa{font-size:17px}
.ph-tools{display:flex;gap:8px;flex-wrap:wrap}
.ph-fb{border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;border:2px solid}
.ph-fb.good{background:#F4FBF6;border-color:var(--good)}.ph-fb.bad{background:#FFF6F3;border-color:var(--bad)}
.ph-res{font:800 20px var(--f-display);display:flex;align-items:center;gap:8px;margin:0}.ph-fb.good .ph-res{color:var(--good)}.ph-fb.bad .ph-res{color:var(--bad)}
.ph-cmp{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1.5px solid var(--line)}
.ph-cmp th,.ph-cmp td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}.ph-cmp thead th{background:var(--surface-2);font-size:13px}
.ph-cmp tr.odd td{background:var(--butter);font-weight:700}.ph-cmp .ph-spk{width:30px;height:30px;vertical-align:middle;margin-left:4px}
.ph-modal{background:transparent;max-width:780px;width:100%;max-height:90vh;overflow:auto;display:flex;flex-direction:column;gap:10px}
.ph-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}@media (max-width:900px){.ph-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:520px){.ph-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ph-chart{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;height:170px;align-items:end;padding-top:10px}
.ph-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:2px}.ph-bar-v{width:70%;background:var(--sky-strong,#74B6EC);border-radius:6px 6px 2px 2px;display:block}.ph-col small{font-size:10px;color:var(--ink-2)}.ph-col em{font-style:normal;font-size:11px;color:var(--ink-2)}
.ph-cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.ph-cats li{display:grid;grid-template-columns:170px minmax(0,1fr) 50px auto;gap:10px;align-items:center}
@media (max-width:600px){.ph-cats li{grid-template-columns:1fr auto}.ph-cats li .bar{grid-column:1/-1}}
.ph-filters{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0}.ph-filters select{min-height:38px;border-radius:10px;border:1.5px solid var(--line);padding:0 8px;margin-left:4px}
.ph-mis{font-size:14px}.ph-mis td{text-align:left}
.ph-up{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.ph-src .row-actions{margin-top:6px}
.ph-aud{margin-top:14px;border-top:1.5px dashed var(--line);padding-top:12px}.ph-aud-h{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.ph-aud input,.ph-aud textarea,.ph-aud select{border:1.5px solid var(--line);border-radius:8px;padding:4px 6px;font:inherit;font-size:14px;background:#fff}
.ph-wide{width:min(100%,520px)}
.ph-audit{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px;min-width:900px}.ph-audit th,.ph-audit td{border:1px solid var(--line);padding:6px;vertical-align:top;text-align:left}.ph-audit thead th{background:var(--surface-2)}
.ph-audit tr.need td{background:#FFF8E6}
.ph-aopt{display:flex;gap:4px;align-items:center;margin-bottom:4px;flex-wrap:wrap}.ph-aopt input{width:120px}.ph-aopt input.ipa{width:120px;font-family:"Lucida Sans Unicode","Segoe UI",sans-serif}.ph-aopt input.ipa.sm{width:64px}.ph-prev{font-size:13px}
.ph-audit textarea{width:220px}.ph-flag{color:var(--bad);margin:4px 0 0}
.ph-aqs{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.ph-aq{border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;background:#fff;display:flex;flex-direction:column;gap:8px}.ph-aq.need{background:#FFF8E6;border-color:#E2B23C}
.ph-aq header{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.ph-prevs{display:flex;gap:12px;flex-wrap:wrap;flex:1}.ph-needchip{background:var(--bad-bg);color:var(--bad)}
.ph-aq .ph-audit{min-width:0;width:100%}.ph-aq .ph-audit input{width:100%}.ph-aq .ph-audit tr.odd td,.ph-aq .ph-audit tr.odd th{background:var(--butter)}
.ph-arow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:14px}.ph-why{display:flex;flex-direction:column;gap:4px;font-size:14px}.ph-why textarea{width:100%}
.mx-bubble{max-width:520px;margin:0 auto;background:#fff;border:2px solid var(--charcoal);border-radius:40px 46px 38px 44px;padding:14px 26px;text-align:center}.mx-bubble p{margin:2px 0}
.mx-chips span{font-size:16px;padding:6px 14px}
.mx-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}@media (max-width:700px){.mx-cmp{grid-template-columns:1fr}}
.mx-box{background:var(--paper-cream,#FFF8EE)}.mx-iow{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}.mx-iow li{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px}.mx-iow p{margin:2px 0}
.mx-kw{display:inline-block;background:var(--charcoal);color:#fff;border-radius:6px;padding:0 8px;margin-right:6px}
.mx-exm{display:flex;flex-direction:column;gap:2px}.mx-exm p{margin:0}
.pg-card{--pg-surf:#fff;--pg-all:#2a2733;--pg-1:#2a78d6;--pg-2:#eb6834;--pg-3:#1baf7a;--pg-4:#eda100;--pg-5:#e87ba4;display:flex;flex-direction:column;gap:12px}
.pg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.pg-head h2{font:700 22px var(--f-display);margin:0}
.pg-legend{display:flex;flex-wrap:wrap;gap:6px}.pg-key{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:600 13px var(--f-body);cursor:pointer;color:var(--ink-2)}
.pg-key i{width:12px;height:4px;border-radius:2px;display:inline-block;opacity:.35}.pg-key.on{border-color:var(--charcoal);color:var(--ink)}.pg-key.on i{opacity:1}.pg-key[disabled]{opacity:.5;cursor:default}
.pg-wrap{position:relative}.pg-svg{width:100%;height:auto;display:block;overflow:visible}
.pg-grid{stroke:var(--line);stroke-width:1}.pg-ax{font:12px var(--f-body);fill:var(--ink-2)}.pg-dl{font:600 12px var(--f-body);fill:var(--ink)}.pg-cross{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:3 3}
.pg-tip{position:absolute;min-width:180px;background:#fff;border:1.5px solid var(--charcoal);border-radius:10px;padding:8px 10px;font-size:13px;display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow);pointer-events:none}.pg-tip i{display:inline-block;width:10px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle}
.pg-tbl summary{font-size:14px;color:var(--ink-2)}.pg-tbl .tz-tbl{font-size:13px}.pg-empty{padding:30px 0}
.mat-form{display:flex;flex-direction:column;gap:10px;margin:8px 0 14px}.mat-filters{margin:4px 0 10px}.mat-list .end{flex-wrap:wrap;justify-content:flex-end}.mat-st{border:0;cursor:pointer;font:inherit;font-size:13px}
.mat-list .row{cursor:default}
.kw{font-weight:800;color:var(--ink);background:linear-gradient(transparent 60%,rgba(243,207,76,.55) 60%);padding:0 1px;font-style:normal}
.mx-tl{display:block;width:calc(100% - 32px);max-width:640px;margin:2px 16px 4px;height:auto;color:var(--ink-2);font-family:var(--f-body)}
.mx-tlw{overflow-x:auto;padding:0 0 4px}@media (max-width:640px){.mx-tl{min-width:560px;margin:2px 8px}}
.mx-ax{stroke:var(--ink-2);stroke-width:2}.mx-now{stroke:var(--orange,#EE7D3A);stroke-width:2;stroke-dasharray:4 4}
.mx-tt{font:800 11px var(--f-nav);letter-spacing:.12em;fill:var(--ink-2)}.mx-tt.now{fill:var(--orange,#EE7D3A)}
.mx-bar{fill:#DDF3E8;stroke:#1C7A55;stroke-width:2}.mx-bar.cont{fill:repeating-linear-gradient(0deg,#fff,#fff);fill:#fff;stroke-dasharray:5 4}
.mx-start{fill:#1C7A55}.mx-end{fill:#fff;stroke:#1C7A55;stroke-width:3}
.mx-tl-t{font:700 13px var(--f-body);fill:var(--ink)}.mx-tl-s{font:12px var(--f-body);fill:var(--ink-2)}
.mx-res rect{fill:#FFF2B8;stroke:var(--charcoal);stroke-width:1.5}.mx-res text{font:12px var(--f-body);fill:var(--ink)}.mx-res text:first-of-type{font-weight:700}
.mx-legend{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:13px;color:var(--ink-2)}.mx-legend i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:6px;vertical-align:-2px;border:1.5px solid var(--charcoal)}
.mx-legend i.c-s{background:#E3ECFC}.mx-legend i.c-a{background:#FFE4D3}.mx-legend i.c-n{background:#FDE6E1;border-color:#C2412D}.mx-legend i.c-v{background:#DDF3E8}
.mx-form{display:flex;flex-direction:column;gap:6px}
.mx-form-t{margin:0;font:800 14px var(--f-nav);letter-spacing:.06em;text-transform:uppercase;display:inline-block;align-self:flex-start;padding:3px 12px;border-radius:999px;border:1.5px solid currentColor}
.mx-form.pos .mx-form-t{color:#16694A;background:#D5F3E5}.mx-form.neg .mx-form-t{color:#C2412D;background:#FDE6E1}.mx-form.q .mx-form-t{color:#1B5E95;background:#D9EDFC}
.mx-ftbl{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:6px;border:2px solid var(--charcoal);border-radius:14px;background:#fff}
.mx-ftbl td{padding:10px 12px;text-align:center;border-radius:10px;font-weight:700;font-size:16px;line-height:1.5;border:1.5px solid}
.mx-ftbl td.c-s{background:#E3ECFC;color:#2F64C9;border-color:#2F64C9}.mx-ftbl td.c-a{background:#FFE4D3;color:#A1461F;border-color:#F7A074}.mx-ftbl td.c-v{background:#DDF3E8;color:#1C7A55;border-color:#1C7A55}
.mx-ftbl .c-n{color:#C2412D;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:560px){.mx-ftbl td{font-size:14px;padding:8px 6px}}
.mx-c{font-weight:800}.mx-c.s{color:#2F64C9}.mx-c.a{color:#A1461F}.mx-c.n{color:#C2412D;text-decoration:underline}.mx-c.v{color:#1C7A55}
.ex-hr{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}.hz-btn.on{background:var(--butter)}.hz-box{background:var(--butter);color:var(--ink);border:2px solid var(--ink);border-radius:14px;padding:12px 16px;margin:10px 0 14px}.hz-box .hz-t{font-weight:800;margin:0 0 8px;display:flex;gap:6px;align-items:center}.hz-box .hz-t2{font-weight:700;margin:12px 0 4px}.hz-box .tz-tbl-wrap{margin:6px 0;background:#fff;border-radius:12px}.hz-box .tz-tbl-t{margin:6px 10px;font-weight:700;font-size:14px}.hz-rules{margin:4px 0;padding-left:20px}.hz-rules li{margin:3px 0}.hz-sig{margin:10px 0 0}.hz-w{display:inline-block;background:#fff;border:1px solid var(--ink);border-radius:999px;padding:1px 9px;margin:2px 2px;font-size:14px}
.mc-hbtn{align-self:flex-start}.mc-hint{margin:0;font-size:15px}

/* writing lab + diary */
.wl-path{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px}
.wl-cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}@media (max-width:1100px){.wl-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:640px){.wl-cats{grid-template-columns:1fr}}
.wl-n{font:800 13px var(--f-nav);letter-spacing:.1em;color:var(--ink-2)}
.wl-diary{background:linear-gradient(135deg,#FFE4EF,#EAE2FC 60%,#D9EDFC)!important}
.wl-tabs{margin:4px 0 6px;display:flex;flex-wrap:wrap;gap:6px}
.wl-tabs .tabp{padding:7px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px}.wl-tabs .tabp.on{background:var(--mustard,#E2B23C);border-color:var(--charcoal)}
.ge5-units{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}@media (max-width:760px){.ge5-units{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ge5-u{display:flex;flex-direction:column;gap:2px;padding:10px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font:inherit}.ge5-u.on{border-color:var(--charcoal);background:var(--mint)}.ge5-u span{font-size:12px;color:var(--ink-2)}
.wl-genres{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.wl-genre{display:flex;flex-direction:column;gap:6px}.wl-genre h3{margin:0;font:700 18px var(--f-display)}.wl-genre ul{margin:0;padding-left:18px}.wl-genre .btn{align-self:flex-start}
.wl-lv{margin:4px 0}.wl-lvcard{background:var(--butter)}
.wl-etypes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}@media (max-width:760px){.wl-etypes{grid-template-columns:1fr}}
.wl-etype h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:700 18px var(--f-display)}.wl-etype .wl-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--peach);color:var(--ink);border:1.5px solid var(--charcoal)}
.wl-fb{display:flex;flex-direction:column;gap:6px}.wl-fb .btn{align-self:flex-start}
.wl-bars{display:flex;gap:10px;align-items:flex-end;height:160px;overflow-x:auto;padding-top:10px}.wl-bar{position:relative;display:flex;align-items:flex-end;gap:2px;height:100%;min-width:44px;flex-direction:row;flex-wrap:wrap;justify-content:center}
.wl-bar span{width:16px;border-radius:5px 5px 2px 2px;display:inline-block}.b1{background:var(--sky-strong,#74B6EC)}.b2{background:var(--mint-strong,#63CB9E)}.wl-bar small{width:100%;text-align:center;font-size:11px}.wl-bar em{width:100%;text-align:center;font-size:10px;color:var(--ink-2);font-style:normal}
.wl-k{display:inline-block;width:12px;height:8px;border-radius:2px;margin:0 4px 0 10px}
.wl-weak{display:grid;grid-template-columns:200px minmax(0,1fr) 50px;gap:10px;align-items:center;margin:6px 0}
.wl-mis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.wl-mis li{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:12px;background:var(--surface-2)}
.dy-wrap{display:flex;flex-direction:column;gap:16px}
.dy-book{position:relative;background:#FFFBF4;border-radius:26px 30px 24px 32px;display:flex;flex-direction:column;gap:14px;background-image:repeating-linear-gradient(transparent 0 33px,rgba(116,182,236,.18) 33px 34px);overflow:hidden}
.dy-deco span{position:absolute;font-size:22px;opacity:.75;animation:dyfloat 6s ease-in-out infinite}.dy-deco span:nth-child(1){top:10px;right:22px}.dy-deco span:nth-child(2){top:52px;right:70px;animation-delay:1s}.dy-deco span:nth-child(3){bottom:70px;right:16px;animation-delay:2s}.dy-deco span:nth-child(4){top:14px;left:48%;animation-delay:3s}
@keyframes dyfloat{50%{transform:translateY(-6px) rotate(6deg)}}
.dy-hello{font:700 clamp(20px,2.6vw,26px) var(--f-display);margin:0;color:var(--plum,#553EA3)}
.dy-mood p{margin:0 0 8px}.dy-moods{display:flex;flex-wrap:wrap;gap:8px}
.dy-m{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:600 15px var(--f-body);cursor:pointer;transition:transform .15s}.dy-m span{font-size:22px}.dy-m:hover{transform:translateY(-2px)}.dy-m.on{border-color:var(--charcoal);background:var(--butter)}
.dy-idea{background:#fff;border:1.5px dashed var(--lav-strong,#A18BEB);border-radius:16px;padding:10px 14px}.dy-idea p{margin:4px 0;font:600 17px var(--f-body)}.dy-idea-l{font-size:12px;font-weight:800;color:var(--lav-ink,#553EA3);text-transform:uppercase;letter-spacing:.06em}.dy-idea-b{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dy-text{width:100%;min-height:220px;border:2px solid var(--line);border-radius:18px;padding:14px 16px;font:500 18px/1.7 var(--f-body);background:rgba(255,255,255,.85);resize:vertical}.dy-text:focus{outline:none;border-color:var(--lav-strong,#A18BEB)}
.dy-acts{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.dy-btns{display:flex;gap:8px;flex-wrap:wrap}
.dy-after{display:flex;flex-direction:column;gap:12px;align-items:flex-start;background:linear-gradient(135deg,#FFF2B8,#FFE4EF);animation:dypop .5s ease}.dy-after .btn{align-self:flex-start}
@keyframes dypop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.dy-burst{font-size:40px;animation:dyspin 1.2s ease}@keyframes dyspin{from{transform:scale(0) rotate(-90deg)}60%{transform:scale(1.3)}to{transform:none}}
.dy-saved{font:700 20px var(--f-display);margin:0}
.dy-reply{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1.5px solid var(--charcoal);border-radius:18px 22px 18px 6px;padding:12px 16px;max-width:640px}.dy-reply p{margin:0}.dy-reply.loading p{color:var(--ink-2)}.dy-reply.off{border-style:dashed}
.dy-mascot{font-size:34px;line-height:1}.dy-from{font-size:12px!important;font-weight:800;color:var(--lav-ink,#553EA3);text-transform:uppercase;letter-spacing:.06em}
.dy-safe{background:#FFF6E0;border:2px solid #E2B23C;border-radius:16px;padding:12px 16px;max-width:640px}.dy-safe p{margin:6px 0 0}
.dy-count{display:flex;gap:12px;align-items:center}.dy-count span{font-size:30px}.dy-count p{margin:0}
.dy-priv summary{font-weight:700}
.dy-cal .dy-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.dy-dn{font-size:12px;color:var(--ink-2);text-align:center;font-weight:700}
.dy-day{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;border-radius:14px;background:var(--surface-2);text-decoration:none;color:var(--ink)}.dy-day b{font-size:13px}.dy-day.has{background:#FFE4EF;border:1.5px solid var(--pink-strong,#F290B4)}.dy-day.has span{font-size:20px}
.dy-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.dy-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:20px 24px 18px 26px;background:#FFFBF4;border:1.5px solid var(--charcoal);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s}.dy-card:hover{transform:translateY(-3px) rotate(-.5deg)}
.dy-card p{margin:0;font-size:14px;color:var(--ink-2)}.dy-st{position:absolute;top:-10px;right:10px;font-size:26px}.dy-cm{font-size:22px}
.dy-page p{font:500 18px/1.8 var(--f-body);margin:0 0 8px}
/* ===== CAT4 vocabulary ===== */
.c4-lvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.c4-lv{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:18px 20px;border-radius:18px;border:2px solid var(--line);background:var(--paper-sky);cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.c4-lv:nth-child(2){background:var(--paper-peach)}
.c4-lv:hover{border-color:var(--plum)}
.c4-lvbar{width:100%;margin-top:6px;background:var(--surface)}
.c4-lv b{font:800 24px var(--f-display);color:var(--plum)}
.c4-pick,.c4-head{display:flex;flex-direction:column;gap:10px}
.c4-head-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.c4-today{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--paper-butter)}
.c4-today>div{flex:1;min-width:220px;display:flex;flex-direction:column;gap:4px}
.c4-miss{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.c4-week{margin-top:10px}
.c4-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.c4-dc{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:74px;padding:8px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font:inherit;color:var(--ink);text-align:left;min-width:0}
.c4-dc:hover{border-color:var(--plum)}
.c4-dc b{font:700 15px var(--f-display)}
.c4-dw{font-size:12px;color:var(--ink-2);white-space:nowrap}
.c4-ds{font-size:11px;font-weight:700;color:var(--rust);margin-top:auto}
.c4-dc.rev{background:var(--paper-lav)}
.c4-dc.done{background:var(--good-bg);border-color:var(--good)}.c4-dc.done .c4-ds{color:var(--good)}
.c4-dc.part{background:var(--paper-butter);border-color:var(--butter-strong)}
.c4-dc.miss{border-color:var(--peach-strong);border-style:dashed}
.c4-dc.today{box-shadow:0 0 0 3px var(--rust)}
.c4-dot{display:inline-block;width:10px;height:10px;border-radius:3px;border:1.5px solid var(--line);vertical-align:middle;margin-right:4px}
.c4-dot.done{background:var(--good-bg);border-color:var(--good)}.c4-dot.part{background:var(--paper-butter);border-color:var(--butter-strong)}.c4-dot.miss{border-color:var(--peach-strong);border-style:dashed}
@media (max-width:640px){.c4-cal{grid-template-columns:repeat(4,minmax(0,1fr))}}
.c4-hardlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.c4-fcw{display:flex;flex-direction:column;gap:14px}
.c4-card{position:relative;min-height:320px;border-radius:26px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;padding:28px 24px 44px;cursor:pointer;text-align:center}
.c4-card.flipped{background:var(--paper-mint)}
.c4-rel{font-size:17px}.c4-rel b{color:var(--teal);margin-right:4px}
.c4-hl{color:var(--rust);font-style:normal}
.c4-num{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--plum);color:#fff;font-size:12px;font-style:normal}
.cloze.c4-para{display:block;line-height:2.4}
.c4-para .bl{margin:0 2px}

.c4-search{min-height:42px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg);min-width:200px}
.c4-tbl{display:flex;flex-direction:column;margin-top:10px;border-top:1px solid var(--line)}
.c4-tr{display:grid;grid-template-columns:44px minmax(90px,1fr) minmax(110px,1.1fr) minmax(110px,1.1fr) minmax(160px,2fr) 70px;gap:10px;align-items:start;padding:10px 4px;border-bottom:1px solid var(--line);font-size:15px}
.c4-th{font-weight:800;font-size:13px;color:var(--teal);text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;background:var(--surface);z-index:1}
.c4-edited{background:var(--good-bg)}
.c4-editrow{display:flex;flex-direction:column;gap:10px;background:var(--paper-butter);padding:14px;border-radius:12px}
@media (max-width:760px){.c4-tr{grid-template-columns:36px 1fr 1fr}.c4-tr>span:nth-child(4),.c4-tr>span:nth-child(5){grid-column:2/-1}.c4-th>span:nth-child(n+4){display:none}}

.fx-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:12px}.fx-tools .field{min-width:220px;flex:1}
.fx-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.fx-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface)}
.fx-item.fixed{background:var(--good-bg);border-color:var(--good)}.fx-item.editing{background:var(--paper-butter)}
.fx-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.fx-end{display:flex;gap:8px;align-items:center;flex:none}
.fx-crumb{font-size:12px;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.04em}
.fx-q{font-weight:600}.fx-a{font-size:15px;color:var(--ink-2)}
.fx-opts{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.fx-opts li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.fx-opts input[type=radio],.fx-opts input[type=checkbox]{width:20px;height:20px;accent-color:var(--good)}
.fx-opt{flex:1;min-width:160px;min-height:40px;padding:6px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg)}
.fx-ml{flex:1;min-width:160px}.fx-match{max-width:100%;min-height:40px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg)}
.imp-help{margin:6px 0}.imp-help code{background:var(--surface-2);padding:1px 6px;border-radius:6px;font-size:14px}
.imp-block{margin-top:18px}