/* Nunito (SIL Open Font License) — hosted here, so no requests go to font services */
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nunito-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/nunito-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/nunito-latin-900-normal.woff2) format('woff2')}
/* TM StudyPrep — family app (kid homes + grown-ups area) */
:root{
  --ink:#1a2233;--muted:#5d6782;--bg:#f4f6fb;--card:#fff;--line:#e3e7f1;--soft:#eef1f8;
  --brand:#1f2a44;--accent:#0e6b6b;--accent-lt:#e3f3f2;--gold:#e8a020;--gold-lt:#fff4dc;
  --ok:#1e8449;--ok-lt:#e4f5ea;--bad:#c0392b;--bad-lt:#fdecea;
  --math:#4f46e5;--english:#e8590c;--science:#0f9d58;
  --on-accent:#fff;--r:20px;--shadow:0 6px 22px rgba(31,42,68,.09);
  --font:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#e9edf5;--muted:#9fa9c0;--bg:#0e121b;--card:#171d2a;--line:#283147;--soft:#1e2536;
  --brand:#0a0e16;--accent:#4fb8b3;--accent-lt:#132d2c;--gold:#f2b53f;--gold-lt:#2c230f;
  --ok:#52c784;--ok-lt:#12281a;--bad:#ff7b6c;--bad-lt:#321716;
  --math:#8b85ff;--english:#ff8a4c;--science:#3fcf8e;--shadow:0 6px 22px rgba(0,0,0,.35);--on-accent:#06201f;}}
:root[data-theme="dark"]{
  --ink:#e9edf5;--muted:#9fa9c0;--bg:#0e121b;--card:#171d2a;--line:#283147;--soft:#1e2536;
  --brand:#0a0e16;--accent:#4fb8b3;--accent-lt:#132d2c;--gold:#f2b53f;--gold-lt:#2c230f;
  --ok:#52c784;--ok-lt:#12281a;--bad:#ff7b6c;--bad-lt:#321716;
  --math:#8b85ff;--english:#ff8a4c;--science:#3fcf8e;--shadow:0 6px 22px rgba(0,0,0,.35);--on-accent:#06201f}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.45;min-height:100vh;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* top bar */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));
  background:var(--brand);color:#fff}
.bar .logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.05rem;color:#fff;text-decoration:none;flex:1;min-width:0}
.bar .logo img{width:30px;height:30px;border-radius:8px}
.bar .logo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pillbtn{text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-weight:800;font-size:.88rem;white-space:nowrap}
.pillbtn:hover{background:rgba(255,255,255,.22)}
.pillbtn svg{width:16px;height:16px}
@media (max-width:430px){.bar.kid .logo span{display:none}}

.wrap{max-width:880px;margin:0 auto;padding:18px 16px calc(40px + env(safe-area-inset-bottom))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.stack{display:grid;gap:16px}
h1{font-size:1.75rem;line-height:1.15;letter-spacing:-.01em;font-weight:900}
h2{font-size:1.15rem;font-weight:900;margin-bottom:10px}
h3{font-size:1rem;font-weight:800}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.center{text-align:center}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}
.sec{font-size:.8rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:6px 2px -4px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:16px;font-weight:900;font-size:1.02rem;
  background:var(--accent);color:var(--on-accent);text-decoration:none;min-height:52px;transition:transform .1s}
.btn:active{transform:scale(.97)}
.btn.block{width:100%}
.btn.gold{background:var(--gold);color:#1a1a1a}
.btn.ghost{background:var(--soft);color:var(--ink)}
.btn.line{background:transparent;border:2px solid var(--line);color:var(--ink)}
.btn.danger{background:var(--bad)}
.btn.sm{min-height:40px;padding:9px 14px;font-size:.9rem;border-radius:12px}
.btn:disabled{opacity:.5}
.linkbtn{color:var(--accent);font-weight:800;text-decoration:underline}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:900;background:var(--accent-lt);color:var(--accent)}
.pill.gold{background:var(--gold-lt);color:#9a6400}
.pill.grey{background:var(--soft);color:var(--muted)}

/* ── welcome ── */
.welcome{min-height:calc(100vh - 60px);display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:560px;margin:0 auto}
.welcome .hero{text-align:center}
.welcome .hero .zoo{font-size:52px;letter-spacing:4px;margin-bottom:6px}
.welcome .hero p{font-size:1.08rem;margin-top:8px}
.ticks{list-style:none;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;font-weight:700}
.ticks li>b{font-size:1.4rem;line-height:1;flex:none}.ticks li>span{font-weight:600}.ticks li>span b{font-weight:900}

/* ── who's learning ── */
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:18px}
.kidcard{text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 12px;border-radius:24px;background:var(--card);border:2px solid var(--line);
  box-shadow:var(--shadow);transition:transform .12s,border-color .12s;text-align:center}
.kidcard:hover{transform:translateY(-3px);border-color:var(--accent)}
.kidcard .face{width:96px;height:96px;font-size:58px}
.kidcard b{font-size:1.25rem;font-weight:900}
.kidcard.add{border-style:dashed;color:var(--muted);box-shadow:none;background:transparent}
.kidcard.add .face{background:var(--soft);font-size:44px}
.face{border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;line-height:1}
.face.sm{width:44px;height:44px;font-size:26px}
.face.md{width:64px;height:64px;font-size:38px}

/* ── kid home ── */
.khero{display:flex;align-items:center;gap:16px;padding:20px;border-radius:26px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--k1,#4f46e5),var(--k2,#0e9f8f))}
.khero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.1)}
.khero .face{width:84px;height:84px;font-size:52px;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.45)}
.khero h1{font-size:1.9rem}
.khero .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.khero .chip{background:rgba(255,255,255,.2);border-radius:999px;padding:5px 12px;font-weight:900;font-size:.9rem}
.speak{position:absolute;right:14px;top:14px;z-index:1;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:22px}

.goal{display:flex;align-items:center;gap:16px}
.ring{--p:0;width:88px;height:88px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--soft) 0)}
.ring>div{width:68px;height:68px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-weight:900;font-size:1.05rem;text-align:center;line-height:1.05}
.ring small{display:block;font-size:.66rem;color:var(--muted);font-weight:800}
.ring.done{background:conic-gradient(var(--ok) 100%,var(--ok) 0)}

.continue{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px;border-radius:22px;color:#fff;background:linear-gradient(120deg,var(--c,#0e6b6b),#1f2a44);box-shadow:var(--shadow)}
.continue .ic{width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:32px;flex:none}
.continue small{display:block;font-weight:900;opacity:.85;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}
.continue b{display:block;font-size:1.12rem;line-height:1.25}
.continue .go{margin-left:auto;width:48px;height:48px;border-radius:50%;background:#fff;color:#1f2a44;display:grid;place-items:center;font-size:22px;flex:none}

.subjects{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.subj{position:relative;display:flex;flex-direction:column;gap:10px;text-align:left;padding:18px;border-radius:24px;background:var(--card);border:2px solid var(--line);box-shadow:var(--shadow);transition:transform .12s,border-color .12s;min-height:150px}
.subj:hover{transform:translateY(-3px);border-color:var(--sc)}
.subj .icon{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-size:36px;background:color-mix(in srgb,var(--sc) 14%,transparent)}
.subj b{font-size:1.25rem;font-weight:900}
.subj .meta{font-size:.85rem;color:var(--muted);font-weight:700}
.bar2{height:10px;border-radius:6px;background:var(--soft);overflow:hidden}
.bar2 i{display:block;height:100%;border-radius:6px;background:var(--sc,var(--accent))}
.subj .tag{position:absolute;right:14px;top:14px}
.subjects.big .subj{min-height:170px;align-items:center;text-align:center}
.subjects.big .subj .icon{width:84px;height:84px;font-size:52px;border-radius:26px}
.subjects.big .subj b{font-size:1.5rem}

.chips2{display:flex;flex-wrap:wrap;gap:10px}
.chipbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:var(--gold-lt);color:var(--ink);font-weight:800;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.countdown{display:flex;gap:14px;align-items:center}
.countdown .num{font-size:2.2rem;font-weight:900;color:var(--gold);line-height:1;min-width:64px;text-align:center}
.countdown .num small{display:block;font-size:.7rem;color:var(--muted);letter-spacing:.06em}

/* ── grown-ups ── */
.gtabs{display:flex;gap:6px;background:var(--soft);padding:5px;border-radius:16px;overflow-x:auto}
.gtabs a{flex:1;text-align:center;padding:10px 12px;border-radius:12px;font-weight:900;color:var(--muted);text-decoration:none;white-space:nowrap;font-size:.95rem}
.gtabs a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 5px rgba(0,0,0,.08)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.stat{background:var(--soft);border-radius:14px;padding:10px;text-align:center}
.stat b{display:block;font-size:1.35rem;font-weight:900}
.stat span{font-size:.75rem;color:var(--muted);font-weight:800}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:92px;margin-top:6px}
.week div{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.week i{display:block;width:100%;max-width:30px;border-radius:7px 7px 3px 3px;background:var(--accent);min-height:3px}
.week i.zero{background:var(--line)}
.week span{font-size:.7rem;color:var(--muted);font-weight:800}
.list{display:grid;gap:8px}
.li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--soft);font-weight:700;font-size:.93rem}
.li .grow{min-width:0}
.li .acc{font-weight:900}
.acc.good{color:var(--ok)}.acc.low{color:var(--bad)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.two{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}

label.f{display:block;font-weight:900;font-size:.9rem;margin:14px 0 6px}
input.t,select.t{width:100%;padding:13px 14px;border:2px solid var(--line);border-radius:14px;font:inherit;font-weight:700;background:var(--card);color:var(--ink)}
input.t:focus,select.t:focus{outline:none;border-color:var(--accent)}
.avs{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}
.avs button{height:58px;border-radius:16px;font-size:34px;background:var(--soft);border:3px solid transparent}
.avs button.on{border-color:var(--accent);background:var(--accent-lt)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{padding:9px 13px;border-radius:12px;background:var(--soft);font-weight:800;font-size:.9rem;border:2px solid transparent}
.seg button.on{border-color:var(--accent);background:var(--accent-lt);color:var(--accent)}
.hint{font-size:.82rem;color:var(--muted);margin-top:6px}
.err{background:var(--bad-lt);color:var(--bad);border-radius:12px;padding:10px 12px;font-weight:700;font-size:.9rem;margin-top:10px}
.ok{background:var(--ok-lt);color:var(--ok);border-radius:12px;padding:10px 12px;font-weight:700;font-size:.9rem;margin-top:10px}
.faq details{border-bottom:1px solid var(--line);padding:12px 2px}
.faq summary{font-weight:900;cursor:pointer}
.faq p{margin-top:8px;color:var(--muted)}

/* parent gate */
.gate{max-width:380px;margin:30px auto;text-align:center}
.gate .q{font-size:2.2rem;font-weight:900;margin:14px 0}
.pin{display:flex;justify-content:center;gap:10px;margin:14px 0}
.pin i{width:16px;height:16px;border-radius:50%;border:2px solid var(--muted)}
.pin i.on{background:var(--ink);border-color:var(--ink)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:300px;margin:0 auto}
.pad button{height:62px;border-radius:18px;background:var(--card);border:1px solid var(--line);font-size:1.5rem;font-weight:900;box-shadow:var(--shadow)}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* modal + video */
.modal{position:fixed;inset:0;z-index:100;background:rgba(10,14,22,.78);display:flex;align-items:center;justify-content:center;padding:16px}
.modal .box{background:var(--card);border-radius:22px;max-width:920px;width:100%;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.modal video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.modal .foot{display:flex;align-items:center;gap:10px;padding:12px 14px}
.modal .pad-in{padding:20px}

/* coach-mark tour */
.coach{position:fixed;inset:0;z-index:90;pointer-events:none}
.coach .hole{position:absolute;border-radius:22px;box-shadow:0 0 0 9999px rgba(10,14,22,.72);transition:all .35s ease;pointer-events:none}
.coach .tip{position:absolute;left:16px;right:16px;max-width:420px;margin:0 auto;background:var(--card);color:var(--ink);border-radius:20px;padding:16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.35);pointer-events:auto;transition:top .35s ease}
.coach .tip b{display:block;font-size:1.1rem;margin-bottom:4px}
.coach .tip .row{margin-top:12px}
.coach .dots{display:flex;gap:5px}.coach .dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.coach .dots i.on{background:var(--accent)}

.toast{visibility:hidden;opacity:0;position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(120px);background:#1f2a44;color:#fff;padding:12px 18px;border-radius:14px;font-weight:800;z-index:120;transition:transform .25s;max-width:90vw}
.toast.show{visibility:visible;opacity:1;transform:translateX(-50%) translateY(0)}
.foot-note{text-align:center;color:var(--muted);font-size:.8rem;margin-top:26px}
.foot-note a{color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* missions (practice a grown-up set) */
.missions{display:grid;gap:12px}
.mission{background:var(--card);border:2px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:22px;padding:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.mission::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--gold)}
.mission .grow>b{display:block;font-size:1.12rem;font-weight:900;line-height:1.25}
.mission .grow>.small{display:block}
.mission .mi-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:30px;background:var(--gold-lt);flex:none}
.mission .due{font-weight:900;font-size:.85rem;color:var(--muted)}
.mission .due.late{color:#b35c00}
.mission .mi-note{margin-top:10px;font-weight:700;font-style:italic;background:var(--soft);border-radius:12px;padding:8px 12px}
.mission.done{display:flex;align-items:center;gap:12px;border-color:color-mix(in srgb,var(--ok) 45%,transparent);padding:12px 16px}
.mission.done::before{background:var(--ok)}
.mission.done .mi-ic{background:var(--ok-lt);width:40px;height:40px;font-size:22px}
.mission.done .grow>b{font-size:1rem}
.li .asgn{font-size:.78rem;font-weight:900;color:var(--accent);text-decoration:none;background:var(--accent-lt);padding:4px 8px;border-radius:8px;white-space:nowrap}
.li .x{width:28px;height:28px;border-radius:8px;color:var(--muted);font-weight:900}
.li .x:hover{background:var(--bad-lt);color:var(--bad)}
.pickrow{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border-radius:14px;background:var(--soft);border:2px solid transparent;cursor:pointer;margin-top:8px}
.pickrow:hover{border-color:var(--line)}
.pickrow.on{border-color:var(--accent);background:var(--accent-lt)}
.units details{border-bottom:1px solid var(--line);padding:10px 2px}
.units summary{cursor:pointer;font-weight:700}
.chosen{margin-top:16px;background:var(--gold-lt);border-radius:12px;padding:10px 14px;font-weight:700}