/* English 90 shared theme (grammar-page style): tokens, navy title band, numbered pastel panels, pills, buttons,
   track colours, entrance animation, and the skin for every page. Loaded last so it wins over style.css / guide.css.
   Components keep their original g- names (g-band, g-panel, g-pill, g-btn...) so grammar.css and the JS did not need renaming. */

/* ---------- tokens ---------- */
:root{
  --font:"Baloo 2","Nunito","Segoe UI Rounded","Segoe UI",system-ui,sans-serif;
  --ink:#1e2a4a;--navy:#1f3a78;
  --bg:#fffdf8;--surface:#fff;--surface2:#eef4ff;--text:#1e2a4a;--muted:#4f5b82;--border:#cdd9f2;
  --brand:#1f3a78;--brand2:#2f7de1;--ok:#1b7a36;--bad:#b3202f;--warn:#8a5a00;
  --shadow:0 5px 0 rgba(31,58,120,.10);--radius:24px;
  --redS:#ffe1e1;--greenS:#dcf8e2;--green:#35c46a;--greenD:#1b7a36;
  --band:#1f3a78;--band-ink:#fff;--sub-bg:#ffc4dc;--sub-ink:#7a1f48;
  --on-pill:#1e2a4a;--panel-edge:rgba(255,255,255,.85);--wrapbg:#fffdf8;--btnbg:#fff;--focus:#ff9f1c;
}
:root[data-theme="dark"]{
  --ink:#eef2ff;--bg:#0e1630;--surface:#18234a;--surface2:#1f2d5c;--text:#eef2ff;--muted:#b3bfe6;--border:#34457c;
  --brand:#a9c4ff;--brand2:#6db3ff;--ok:#7be39b;--bad:#ff9aa5;--warn:#ffd27a;--shadow:0 5px 0 rgba(0,0,0,.35);
  --redS:#4a1f2c;--greenS:#17361f;--greenD:#8ff0ab;
  --band:#1a2f66;--sub-bg:#7a2f55;--sub-ink:#ffe3f0;--on-pill:#fff;--panel-edge:rgba(255,255,255,.12);--wrapbg:#121c3d;--btnbg:#223063;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#eef2ff;--bg:#0e1630;--surface:#18234a;--surface2:#1f2d5c;--text:#eef2ff;--muted:#b3bfe6;--border:#34457c;
    --brand:#a9c4ff;--brand2:#6db3ff;--ok:#7be39b;--bad:#ff9aa5;--warn:#ffd27a;--shadow:0 5px 0 rgba(0,0,0,.35);
    --redS:#4a1f2c;--greenS:#17361f;--greenD:#8ff0ab;
    --band:#1a2f66;--sub-bg:#7a2f55;--sub-ink:#ffe3f0;--on-pill:#fff;--panel-edge:rgba(255,255,255,.12);--wrapbg:#121c3d;--btnbg:#223063;
  }
}

/* pastel sets: --bg panel, --bd thick border, --inner lighter card, --badge dark number/heading, --pill big word pill */
.c-blue,.tk-software,.chip.software,.node.t-software,.ubanner.t-software,.lvl.software{--bg:#cfe8ff;--bd:#9bcdf5;--inner:#eef7ff;--badge:#1e4f9c;--pill:#b5dcff}
.c-yellow,.tk-business,.chip.business,.node.t-business,.ubanner.t-business,.lvl.business{--bg:#ffedb0;--bd:#f2d36e;--inner:#fff9e1;--badge:#7a5608;--pill:#ffe08a}
.c-green,.tk-foundation,.chip.foundation,.node.t-foundation,.ubanner.t-foundation,.lvl.core{--bg:#d3f2c4;--bd:#99d983;--inner:#f0fbe9;--badge:#2b6b25;--pill:#b5e8a0}
.c-purple,.tk-marketing,.chip.marketing,.node.t-marketing,.ubanner.t-marketing,.lvl.marketing{--bg:#e5d6fb;--bd:#bfa2f2;--inner:#f6f0ff;--badge:#5a2fa0;--pill:#d6bffa}
.c-pink,.tk-advertising,.chip.advertising,.node.t-advertising,.ubanner.t-advertising,.lvl.advertising{--bg:#ffd3e4;--bd:#f5a3c4;--inner:#fff0f6;--badge:#9c2a5b;--pill:#ffbad6}
.c-orange,.tk-review,.chip.review,.node.t-review,.ubanner.t-review{--bg:#ffdcc2;--bd:#f5b27c;--inner:#fff3e8;--badge:#8a3d0a;--pill:#ffc99a}
/* everyday course tracks: travel = teal, social = coral, daily-life = lime, services = sky */
.c-teal,.tk-travel,.chip.travel,.node.t-travel,.ubanner.t-travel,.lvl.travel{--bg:#c8f0ec;--bd:#6fcfc4;--inner:#effbf9;--badge:#0c5c55;--pill:#a3e6de}
.c-coral,.tk-social,.chip.social,.node.t-social,.ubanner.t-social,.lvl.social{--bg:#ffd6d1;--bd:#f59a8f;--inner:#fff1ef;--badge:#8a2318;--pill:#ffbdb4}
.c-lime,.tk-daily-life,.chip.daily-life,.node.t-daily-life,.ubanner.t-daily-life,.lvl.daily-life{--bg:#e3f5c4;--bd:#a9d66a;--inner:#f6fcea;--badge:#3d5c0a;--pill:#cdeb9c}
.c-sky,.tk-services,.chip.services,.node.t-services,.ubanner.t-services,.lvl.services{--bg:#d3ecff;--bd:#7cbcf0;--inner:#f0f8ff;--badge:#0d4a7a;--pill:#b0dafc}
:root[data-theme="dark"] .c-teal,:root[data-theme="dark"] .tk-travel,:root[data-theme="dark"] .chip.travel,:root[data-theme="dark"] .node.t-travel,:root[data-theme="dark"] .ubanner.t-travel,:root[data-theme="dark"] .lvl.travel{--bg:#123f3b;--bd:#3e9a90;--inner:#0b2b28;--badge:#bff3ec;--pill:#1f6b63}
:root[data-theme="dark"] .c-coral,:root[data-theme="dark"] .tk-social,:root[data-theme="dark"] .chip.social,:root[data-theme="dark"] .node.t-social,:root[data-theme="dark"] .ubanner.t-social,:root[data-theme="dark"] .lvl.social{--bg:#55211b;--bd:#b5584c;--inner:#3a1511;--badge:#ffd6d1;--pill:#8a3a30}
:root[data-theme="dark"] .c-lime,:root[data-theme="dark"] .tk-daily-life,:root[data-theme="dark"] .chip.daily-life,:root[data-theme="dark"] .node.t-daily-life,:root[data-theme="dark"] .ubanner.t-daily-life,:root[data-theme="dark"] .lvl.daily-life{--bg:#2f4212;--bd:#7da33f;--inner:#1f2d0b;--badge:#e0f5bd;--pill:#4f6b1f}
:root[data-theme="dark"] .c-sky,:root[data-theme="dark"] .tk-services,:root[data-theme="dark"] .chip.services,:root[data-theme="dark"] .node.t-services,:root[data-theme="dark"] .ubanner.t-services,:root[data-theme="dark"] .lvl.services{--bg:#123552;--bd:#4a8cc0;--inner:#0b2338;--badge:#cfe8ff;--pill:#235a85}
:root[data-theme="dark"] .c-blue,:root[data-theme="dark"] .tk-software,:root[data-theme="dark"] .chip.software,:root[data-theme="dark"] .node.t-software,:root[data-theme="dark"] .ubanner.t-software,:root[data-theme="dark"] .lvl.software{--bg:#1c3560;--bd:#3f6fb0;--inner:#14264a;--badge:#b8dcff;--pill:#2b5a98}
:root[data-theme="dark"] .c-yellow,:root[data-theme="dark"] .tk-business,:root[data-theme="dark"] .chip.business,:root[data-theme="dark"] .node.t-business,:root[data-theme="dark"] .ubanner.t-business,:root[data-theme="dark"] .lvl.business{--bg:#4a3b12;--bd:#9b7b22;--inner:#31270b;--badge:#ffe08a;--pill:#7d6218}
:root[data-theme="dark"] .c-green,:root[data-theme="dark"] .tk-foundation,:root[data-theme="dark"] .chip.foundation,:root[data-theme="dark"] .node.t-foundation,:root[data-theme="dark"] .ubanner.t-foundation,:root[data-theme="dark"] .lvl.core{--bg:#1d4220;--bd:#3f8a45;--inner:#142e16;--badge:#bff0b0;--pill:#2f6a35}
:root[data-theme="dark"] .c-purple,:root[data-theme="dark"] .tk-marketing,:root[data-theme="dark"] .chip.marketing,:root[data-theme="dark"] .node.t-marketing,:root[data-theme="dark"] .ubanner.t-marketing,:root[data-theme="dark"] .lvl.marketing{--bg:#3a2866;--bd:#7456b8;--inner:#271a49;--badge:#dccbff;--pill:#58409a}
:root[data-theme="dark"] .c-pink,:root[data-theme="dark"] .tk-advertising,:root[data-theme="dark"] .chip.advertising,:root[data-theme="dark"] .node.t-advertising,:root[data-theme="dark"] .ubanner.t-advertising,:root[data-theme="dark"] .lvl.advertising{--bg:#5a2340;--bd:#b0507c;--inner:#3d1729;--badge:#ffc8df;--pill:#8a3a62}
:root[data-theme="dark"] .c-orange,:root[data-theme="dark"] .tk-review,:root[data-theme="dark"] .chip.review,:root[data-theme="dark"] .node.t-review,:root[data-theme="dark"] .ubanner.t-review{--bg:#58300f;--bd:#b57a3c;--inner:#3b200a;--badge:#ffd9b3;--pill:#8a5320}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .c-blue,:root:not([data-theme="light"]) .tk-software,:root:not([data-theme="light"]) .chip.software,:root:not([data-theme="light"]) .node.t-software,:root:not([data-theme="light"]) .ubanner.t-software,:root:not([data-theme="light"]) .lvl.software{--bg:#1c3560;--bd:#3f6fb0;--inner:#14264a;--badge:#b8dcff;--pill:#2b5a98}
  :root:not([data-theme="light"]) .c-yellow,:root:not([data-theme="light"]) .tk-business,:root:not([data-theme="light"]) .chip.business,:root:not([data-theme="light"]) .node.t-business,:root:not([data-theme="light"]) .ubanner.t-business,:root:not([data-theme="light"]) .lvl.business{--bg:#4a3b12;--bd:#9b7b22;--inner:#31270b;--badge:#ffe08a;--pill:#7d6218}
  :root:not([data-theme="light"]) .c-green,:root:not([data-theme="light"]) .tk-foundation,:root:not([data-theme="light"]) .chip.foundation,:root:not([data-theme="light"]) .node.t-foundation,:root:not([data-theme="light"]) .ubanner.t-foundation,:root:not([data-theme="light"]) .lvl.core{--bg:#1d4220;--bd:#3f8a45;--inner:#142e16;--badge:#bff0b0;--pill:#2f6a35}
  :root:not([data-theme="light"]) .c-purple,:root:not([data-theme="light"]) .tk-marketing,:root:not([data-theme="light"]) .chip.marketing,:root:not([data-theme="light"]) .node.t-marketing,:root:not([data-theme="light"]) .ubanner.t-marketing,:root:not([data-theme="light"]) .lvl.marketing{--bg:#3a2866;--bd:#7456b8;--inner:#271a49;--badge:#dccbff;--pill:#58409a}
  :root:not([data-theme="light"]) .c-pink,:root:not([data-theme="light"]) .tk-advertising,:root:not([data-theme="light"]) .chip.advertising,:root:not([data-theme="light"]) .node.t-advertising,:root:not([data-theme="light"]) .ubanner.t-advertising,:root:not([data-theme="light"]) .lvl.advertising{--bg:#5a2340;--bd:#b0507c;--inner:#3d1729;--badge:#ffc8df;--pill:#8a3a62}
  :root:not([data-theme="light"]) .c-orange,:root:not([data-theme="light"]) .tk-review,:root:not([data-theme="light"]) .chip.review,:root:not([data-theme="light"]) .node.t-review,:root:not([data-theme="light"]) .ubanner.t-review{--bg:#58300f;--bd:#b57a3c;--inner:#3b200a;--badge:#ffd9b3;--pill:#8a5320}
  :root:not([data-theme="light"]) .c-teal,:root:not([data-theme="light"]) .tk-travel,:root:not([data-theme="light"]) .chip.travel,:root:not([data-theme="light"]) .node.t-travel,:root:not([data-theme="light"]) .ubanner.t-travel,:root:not([data-theme="light"]) .lvl.travel{--bg:#123f3b;--bd:#3e9a90;--inner:#0b2b28;--badge:#bff3ec;--pill:#1f6b63}
  :root:not([data-theme="light"]) .c-coral,:root:not([data-theme="light"]) .tk-social,:root:not([data-theme="light"]) .chip.social,:root:not([data-theme="light"]) .node.t-social,:root:not([data-theme="light"]) .ubanner.t-social,:root:not([data-theme="light"]) .lvl.social{--bg:#55211b;--bd:#b5584c;--inner:#3a1511;--badge:#ffd6d1;--pill:#8a3a30}
  :root:not([data-theme="light"]) .c-lime,:root:not([data-theme="light"]) .tk-daily-life,:root:not([data-theme="light"]) .chip.daily-life,:root:not([data-theme="light"]) .node.t-daily-life,:root:not([data-theme="light"]) .ubanner.t-daily-life,:root:not([data-theme="light"]) .lvl.daily-life{--bg:#2f4212;--bd:#7da33f;--inner:#1f2d0b;--badge:#e0f5bd;--pill:#4f6b1f}
  :root:not([data-theme="light"]) .c-sky,:root:not([data-theme="light"]) .tk-services,:root:not([data-theme="light"]) .chip.services,:root:not([data-theme="light"]) .node.t-services,:root:not([data-theme="light"]) .ubanner.t-services,:root:not([data-theme="light"]) .lvl.services{--bg:#123552;--bd:#4a8cc0;--inner:#0b2338;--badge:#cfe8ff;--pill:#235a85}
}

/* ---------- base ---------- */
html{scroll-behavior:smooth}
body{font-family:var(--font);font-size:17px;line-height:1.45;background:var(--bg);color:var(--text)}
a{color:var(--brand)}
h1,h2,h3{font-weight:800;line-height:1.1}
.hint{color:var(--muted);font-weight:600}
:focus-visible{outline:4px solid var(--focus);outline-offset:2px}
.topbar{background:var(--band);border-bottom:0;border-radius:0 0 26px 26px/0 0 18px 18px;padding-bottom:14px;box-shadow:0 4px 0 rgba(31,58,120,.18)}
.brand,.brand span{color:#fff}
.brand span{background:var(--sub-bg);color:var(--sub-ink);border-radius:999px;padding:0 10px;margin-left:6px}
.topbar nav a{color:#dbe6ff;font-weight:700}
.topbar nav a:hover,.topbar nav a.active{background:#fff;color:var(--navy)}
:root[data-theme="dark"] .topbar nav a:hover,:root[data-theme="dark"] .topbar nav a.active{background:#dbe6ff}
.theme-btn{font:inherit;border:2px solid rgba(255,255,255,.6);background:transparent;color:#fff;border-radius:999px;width:38px;height:38px;cursor:pointer;flex:none;font-size:1.1rem;line-height:1}
.theme-btn:hover{background:rgba(255,255,255,.2)}

/* ---------- the page sheet, title band, buttons (moved from grammar.css) ---------- */
.g-wrap{--shadow:0 5px 0 rgba(31,58,120,.10);font-family:var(--font);color:var(--text);background:var(--wrapbg);border-radius:28px;padding:0 0 clamp(14px,3vw,28px);
  overflow:hidden;overflow:clip;box-shadow:var(--shadow);border:1px solid var(--border);margin-bottom:22px}
.g-band{position:relative;background:var(--band);color:var(--band-ink);padding:clamp(16px,3vw,26px) clamp(16px,4vw,36px) 38px;border-radius:0 0 46% 46%/0 0 26px 26px;
  display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.g-band .g-flag,.g-band>.gart{width:clamp(64px,10vw,96px);height:clamp(64px,10vw,96px);flex:none}
.g-band h1{margin:0;font-size:clamp(1.7rem,5vw,3rem);line-height:1.05;font-weight:800;color:#fff;letter-spacing:.01em}
.g-sub{display:inline-block;margin-top:8px;background:var(--sub-bg);color:var(--sub-ink);border-radius:999px;padding:4px 20px;font-weight:700;font-size:clamp(.95rem,2.4vw,1.25rem)}
.g-spark{position:absolute;right:22px;top:18px;width:46px;height:46px;opacity:.9}
.g-body{padding:12px clamp(12px,3vw,28px) 0;display:flex;flex-direction:column;gap:clamp(12px,2vw,20px)}
.g-btn,.btn{font:inherit;font-weight:800;border:3px solid var(--navy);background:var(--btnbg);color:var(--navy);padding:6px 18px;border-radius:999px;cursor:pointer;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
:root[data-theme="dark"] .g-btn,:root[data-theme="dark"] .btn{border-color:var(--brand);color:var(--brand)}
.g-btn:hover,.btn:hover{background:var(--surface2);border-color:var(--navy)}
.g-btn.go,.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.primary:hover{background:#2a4a96;color:#fff}
:root[data-theme="dark"] .g-btn.go,:root[data-theme="dark"] .btn.primary{background:#3a5fc0;border-color:#a9c4ff;color:#fff}
.btn[disabled],.btn.disabled{opacity:.45}
.g-btn:focus-visible,.g-opt:focus-visible,.g-play:focus-visible{outline:4px solid var(--focus);outline-offset:2px}

/* ---------- numbered pastel panels, pills ---------- */
.g-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,2vw,20px);padding:12px clamp(12px,3vw,28px) 0}
.g-panel{grid-column:span 2;border-radius:26px;border:5px solid var(--bd);background:var(--bg);padding:0 0 10px;min-width:0}
.g-panel.w3{grid-column:span 3}
.g-panel.w6{grid-column:span 6}
.g-body>.g-panel{grid-column:auto}
.g-head{display:flex;align-items:center;gap:10px;padding:10px 14px}
.g-num{flex:none;width:44px;height:44px;border-radius:50%;background:var(--badge);color:var(--bg);font-weight:800;font-size:1.6rem;display:grid;place-items:center;border:3px solid #fff;box-shadow:0 2px 0 rgba(0,0,0,.15)}
:root[data-theme="dark"] .g-num{border-color:var(--bd)}
.g-head h2{margin:0;font-size:clamp(1.15rem,2.4vw,1.55rem);font-weight:800;color:var(--badge);line-height:1.1}
.g-inner{margin:0 10px;background:var(--inner);color:var(--text);border-radius:20px;padding:14px;border:2px solid var(--panel-edge)}
.g-pill{display:inline-block;background:var(--pill);color:var(--on-pill);border-radius:999px;padding:3px 18px;font-weight:800;font-size:1.2rem;border:3px solid rgba(255,255,255,.9);box-shadow:0 2px 0 rgba(0,0,0,.08)}
:root[data-theme="dark"] .g-pill{border-color:rgba(255,255,255,.25)}
.g-op{font-weight:800;font-size:1.4rem;color:var(--badge)}
.g-esl{font-weight:600;font-size:.92rem;color:var(--muted)}
.g-lead{color:var(--muted)}

/* ---------- skin for the rest of the app ---------- */
main{max-width:1100px}
.card{background:var(--surface);border:4px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.g-inner .card,.g-inner .vcard{box-shadow:none}
h1{font-size:clamp(1.7rem,4.5vw,2.4rem)}
.chip{background:var(--pill,var(--brand));color:var(--on-pill);border:2px solid var(--bd,transparent);font-weight:800;font-size:.82rem;padding:1px 12px}
.chip:not([class*="software"]):not([class*="business"]):not([class*="advertising"]):not([class*="marketing"]):not([class*="foundation"]):not([class*="review"]){background:var(--brand);color:#fff}
.daycount{color:var(--badge,var(--brand))}
.task{background:var(--inner,var(--surface2));border-left:6px solid var(--bd,var(--brand2));border-radius:16px}
.jobcard{border:3px solid var(--bd,var(--brand));border-radius:18px;background:var(--surface)}
.jobtag{color:var(--badge,var(--brand))}
.infographic{background:#fffdf8;border:3px solid var(--bd,var(--border));border-radius:20px}
.vcard{background:var(--surface);border:3px solid var(--bd,var(--border));border-radius:20px}
.vmedia{background:var(--pill,var(--surface2))}
.ven{color:var(--text)}.ves{color:var(--badge,var(--brand))}.vex{color:var(--muted)}
.speak{background:var(--pill,var(--surface2));color:var(--on-pill,var(--brand));border:2px solid var(--bd,transparent);font-weight:800}
.speak:hover{background:var(--badge,var(--brand));color:var(--bg,#fff)}
.tip{background:var(--surface);border:3px dashed var(--bd,var(--border))}
.tip b{color:var(--badge,var(--brand))}
.phrases li{background:var(--surface);border:3px solid var(--bd,var(--border));border-radius:999px;padding:8px 8px 8px 20px;font-weight:700}
.ex{background:var(--surface);border:3px solid var(--bd,var(--border));border-radius:20px}
.opt{border:3px solid var(--bd,var(--border));border-radius:999px;font-weight:700;background:var(--surface);color:var(--text)}
.opt:hover:not([disabled]){background:var(--pill,var(--surface2));border-color:var(--badge,var(--brand))}
.opt.right{border-color:var(--greenD);background:var(--greenS);color:var(--text)}
.opt.wrong{border-color:var(--bad);background:var(--redS);color:var(--text)}
.fillrow input,.linput,.gl-search,.gl-controls select,input[type=text],input[type=search]{font-family:var(--font);font-weight:700;border:3px solid var(--bd,var(--border));border-radius:999px;background:var(--surface);color:var(--text);padding:8px 16px}
.fillrow input.right,.linput.right{border-color:var(--greenD);background:var(--greenS)}
.fillrow input.wrong,.linput.wrong{border-color:var(--bad);background:var(--redS)}
.fb.ok{color:var(--ok)}.fb.no{color:var(--bad)}
.check{border:3px solid var(--bd,var(--border));border-radius:999px;background:var(--surface)}
.check.on{border-color:var(--greenD);background:var(--greenS)}
.progress{background:rgba(255,255,255,.7);border:2px solid var(--bd,var(--border));height:14px}
.progress>i{background:linear-gradient(90deg,var(--brand2),var(--green))}
.placeholder{border:3px dashed var(--bd,var(--border));border-radius:20px;background:var(--surface)}
.wday{border:3px solid var(--bd,var(--border));border-radius:999px;background:var(--surface);font-weight:700}
.wday:hover{border-color:var(--badge,var(--brand))}
.wday.done{background:var(--greenS);border-color:var(--greenD)}
.wday b{color:var(--badge,var(--brand))}
.stat{background:var(--pill,var(--surface2));color:var(--on-pill);border:3px solid rgba(255,255,255,.9);font-weight:800}
.fcface{border:5px solid var(--bd);background:var(--bg);color:var(--text);border-radius:30px}
.fcface .en{color:var(--badge)}
.rate .btn{border-radius:999px}
.r-again{border-color:var(--bad);color:var(--bad)}.r-hard{border-color:var(--warn);color:var(--warn)}.r-good{border-color:var(--greenD);color:var(--greenD)}.r-easy{border-color:var(--brand2);color:var(--brand2)}
.bubble{background:var(--inner,var(--surface2));border:3px solid var(--bd,var(--border));border-radius:24px 24px 24px 6px;color:var(--text)}
.bubble.user{background:var(--navy);color:#fff;border-color:var(--navy);border-radius:24px 24px 6px 24px}
:root[data-theme="dark"] .bubble.user{background:#3a5fc0;border-color:#a9c4ff}

/* HUD, path */
.hud{--bg:#ffedb0;--bd:#f2d36e;--inner:#fff9e1;--badge:#7a5608;background:var(--bg);border:5px solid var(--bd);box-shadow:none;position:sticky;top:64px;z-index:4}
:root[data-theme="dark"] .hud{--bg:#4a3b12;--bd:#9b7b22;--badge:#ffe08a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hud{--bg:#4a3b12;--bd:#9b7b22;--badge:#ffe08a}}
.hstat{font-weight:800;color:var(--text)}
.hstat small,.htimer{color:var(--muted)}
.hstat select{border:2px solid var(--bd);border-radius:999px;font-family:var(--font);font-weight:700}
.hud .lvl{background:var(--pill);color:var(--on-pill);border:2px solid var(--bd);font-weight:800;font-size:.78rem}
.hud .lvl:not(.software):not(.business):not(.advertising):not(.marketing):not(.core){--pill:#ffc99a}
.ring-bg{stroke:rgba(0,0,0,.12)}
.unit .ubanner{display:flex;align-items:center;gap:12px;background:var(--bg);color:var(--badge);border:5px solid var(--bd);border-radius:26px;box-shadow:none;padding:10px 14px}
.ubanner .g-num{flex:none}
.ubanner>div:first-of-type{flex:1;min-width:0}
.ukick{color:var(--badge);opacity:.9;font-weight:800}
.utitle{color:var(--badge);font-weight:800}
.ucount{background:var(--surface);color:var(--text);border:3px solid var(--bd);font-weight:800}
.unit{max-width:560px}
.path .node{background:var(--pill);color:var(--badge);border:5px solid var(--badge);box-shadow:0 6px 0 var(--bd);font-family:var(--font)}
.node.done{background:linear-gradient(145deg,#ffe58a,#f5b301);color:#5a3d00;border-color:#b98700;box-shadow:0 6px 0 #b98700}
.node.locked,.node.soon{background:#dfe5f3;color:#4f5b82;border-color:#9aa6c8;box-shadow:0 6px 0 #b6c0dc}
:root[data-theme="dark"] .node.locked,:root[data-theme="dark"] .node.soon{background:#2a3763;color:#b3bfe6;border-color:#4a5b94;box-shadow:0 6px 0 #1a2347}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .node.locked,:root:not([data-theme="light"]) .node.soon{background:#2a3763;color:#b3bfe6;border-color:#4a5b94;box-shadow:0 6px 0 #1a2347}}
.node .nnum{background:var(--surface);color:var(--text);border:3px solid var(--badge);font-family:var(--font)}
.startbub{background:var(--navy);color:#fff;border:0;border-radius:999px;padding:2px 14px;font-weight:800}
.ncap{color:var(--muted);font-weight:700;font-size:.86rem}

/* lesson session */
.lesson{font-family:var(--font)}
.lbar{background:var(--surface2);border:3px solid var(--bd,var(--border));height:20px}
.lbar>i{background:linear-gradient(90deg,var(--brand2),var(--green))}
.lhearts{color:#d6304a}
.ltitle{color:var(--brand);font-weight:800}
.imedia{background:var(--pill,#b5dcff);border:5px solid var(--bd,#9bcdf5);border-radius:30px}
.lesson{--bg:#cfe8ff;--bd:#9bcdf5;--inner:#eef7ff;--badge:#1e4f9c;--pill:#b5dcff}
:root[data-theme="dark"] .lesson{--bg:#1c3560;--bd:#3f6fb0;--inner:#14264a;--badge:#b8dcff;--pill:#2b5a98}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lesson{--bg:#1c3560;--bd:#3f6fb0;--inner:#14264a;--badge:#b8dcff;--pill:#2b5a98}}
.iword{background:var(--pill);color:var(--on-pill);border-radius:999px;padding:4px 26px;border:4px solid rgba(255,255,255,.9);box-shadow:0 3px 0 rgba(0,0,0,.1)}
:root[data-theme="dark"] .iword{border-color:rgba(255,255,255,.25)}
.ies{color:var(--brand)}
.ipa,.iex{color:var(--muted)}
.lopt,.wtile,.mtile{font-family:var(--font);font-weight:800;border:4px solid var(--bd);background:var(--surface);color:var(--text);border-radius:999px;border-bottom-width:6px}
.lopt{padding:10px 20px}
.lopt .key{border-radius:50%;border:2px solid var(--badge);color:var(--badge)}
.lopt.sel,.mtile.sel{border-color:var(--navy);background:var(--pill);color:var(--on-pill)}
:root[data-theme="dark"] .lopt.sel,:root[data-theme="dark"] .mtile.sel{border-color:#a9c4ff}
.lopt.right,.mtile.ok{border-color:var(--greenD);background:var(--greenS);color:var(--text)}
.lopt.wrong,.mtile.bad{border-color:var(--bad);background:var(--redS);color:var(--text)}
.wtile{border-radius:20px}.mtile{border-radius:22px}
.bline{border-color:var(--bd)}
.bigspeak{border-radius:50%;border:4px solid var(--badge);background:var(--pill);box-shadow:0 5px 0 var(--bd)}
.slowspeak{border-radius:50%;border:3px solid var(--bd);background:var(--surface);color:var(--text)}
.cloze{color:var(--text)}
.cbanner{background:#e5d6fb;color:#4a2590;border:3px solid #bfa2f2;font-weight:800}
.sheet{background:var(--surface);border-top:5px solid var(--bd);border-radius:26px 26px 0 0}
.sheet.ok{background:var(--greenS);border-color:var(--greenD)}
.sheet.bad{background:var(--redS);border-color:var(--bad)}
.sheet.ok .sheetmsg{color:var(--greenD)}
.sheet.bad .sheetmsg{color:var(--bad)}
.sheet.ok.typo{background:#fff1c2;border-color:#d9a406}
.sheet.ok.typo .sheetmsg{color:#6b4700}
.sheet.ok.typo .sheetmsg .expected{color:#3d2a00}
:root[data-theme="dark"] .sheet.ok.typo{background:#4a3b12;border-color:#d9a406}
:root[data-theme="dark"] .sheet.ok.typo .sheetmsg,:root[data-theme="dark"] .sheet.ok.typo .sheetmsg .expected{color:#ffe9a8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sheet.ok.typo{background:#4a3b12;border-color:#d9a406}:root:not([data-theme="light"]) .sheet.ok.typo .sheetmsg,:root:not([data-theme="light"]) .sheet.ok.typo .sheetmsg .expected{color:#ffe9a8}}
.sheetmsg .expected{color:var(--text)}
.lcheck{font-family:var(--font);font-weight:800;border-radius:999px;border-bottom-width:6px}
.sheet.bad .lcheck{background:#d6304a;border-color:#a3182f}
.lcheck[disabled]{background:var(--surface2);border-color:var(--border);color:var(--muted)}
.linkbtn{color:var(--brand);font-family:var(--font);font-weight:700}

/* end screen */
.endcard.g-wrap{max-width:560px;margin:20px auto;text-align:center;padding-bottom:22px}
.endcard .g-band{text-align:left;justify-content:center}
.endcard .g-body{align-items:center}
.es{border:4px solid var(--bd);background:var(--bg);color:var(--badge);border-radius:24px}
.es small{color:var(--badge);font-weight:800}
.es.xp{--bg:#ffedb0;--bd:#f2d36e;--badge:#7a5608;border-color:var(--bd)}
.es.acc{--bg:#d3f2c4;--bd:#99d983;--badge:#2b6b25;border-color:var(--bd)}
.es.fire{--bg:#ffd3e4;--bd:#f5a3c4;--badge:#9c2a5b;border-color:var(--bd)}
:root[data-theme="dark"] .es.xp{--bg:#4a3b12;--bd:#9b7b22;--badge:#ffe08a}
:root[data-theme="dark"] .es.acc{--bg:#1d4220;--bd:#3f8a45;--badge:#bff0b0}
:root[data-theme="dark"] .es.fire{--bg:#5a2340;--bd:#b0507c;--badge:#ffc8df}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .es.xp{--bg:#4a3b12;--bd:#9b7b22;--badge:#ffe08a}:root:not([data-theme="light"]) .es.acc{--bg:#1d4220;--bd:#3f8a45;--badge:#bff0b0}:root:not([data-theme="light"]) .es.fire{--bg:#5a2340;--bd:#b0507c;--badge:#ffc8df}}
.toast{background:var(--navy);font-family:var(--font);border-radius:999px;padding:10px 22px}

/* glossary */
.gentry{background:var(--bg);border:5px solid var(--bd);border-radius:26px;box-shadow:none;color:var(--text)}
.gentry.playing{border-color:var(--navy);box-shadow:0 0 0 4px rgba(31,58,120,.25)}
.gmedia{background:var(--inner);border:3px solid rgba(255,255,255,.8)}
.gen{color:var(--badge);font-size:1.3rem}
.gfav{color:var(--muted)}
.gfav.on{color:#e0a000}
.gmeta .chip{margin-left:0}
.gl-check{font-weight:700}

/* ---------- animated infographic svg inside the day page ---------- */
.infographic svg{border-radius:16px}

/* ---------- entrance animation for panels outside the grammar page ---------- */
.g-wrap.js-anim>.g-body>.g-panel{opacity:0;transform:translateY(26px) scale(.96)}
.g-wrap.js-anim>.g-body>.g-panel.in{animation:g-pop .6s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(var(--i,0)*.08s)}
.g-wrap.js-anim .g-band .gart{animation:g-float 2.8s ease-in-out infinite}
.g-wrap.js-anim .g-band h1{animation:g-bounce .8s cubic-bezier(.3,1.6,.5,1) both}
.g-wrap.js-anim .g-band .g-sub{animation:g-bounce .8s cubic-bezier(.3,1.6,.5,1) .2s both}
@keyframes g-pop{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
@keyframes g-bounce{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.12)}80%{transform:scale(.97)}100%{opacity:1;transform:scale(1)}}
@keyframes g-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.node.done .nicon{animation:none}

@media (max-width:900px){.g-panel,.g-panel.w3{grid-column:span 6}}
@media (max-width:560px){
  body{font-size:16px}
  .topbar{padding-left:12px;padding-right:12px}
  .g-body{padding-left:10px;padding-right:10px}
  .g-inner{margin:0 6px;padding:10px}
  .g-head{padding:8px 10px}
  .hud{top:58px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .g-wrap *,.g-wrap *::before{animation:none!important;transition:none!important}
  .g-wrap.js-anim>.g-body>.g-panel{opacity:1;transform:none}
}

/* day infographic svg animates when its panel scrolls into view */
.g-wrap.js-anim .g-panel:not(.in) .infographic svg *{animation-play-state:paused}
.g-lead{margin:6px clamp(14px,3vw,28px) 0;font-size:1.05rem;font-weight:600}
.g-tools{display:flex;flex-wrap:wrap;gap:10px;padding:16px clamp(14px,3vw,28px) 4px}