:root{
  --paper:#F5F3EE; --surface:#FFFFFF; --sunk:#ECE9E2; --ink:#16202B; --graphite:#5B6470; --line:#DCD8CF;
  --signal:#E4572E; --signal-ink:#FFFFFF; --signal-soft:#FBE3DA;
  --good:#23845A; --good-soft:#DDF1E6; --bad:#C0432E; --bad-soft:#F7E0DA;
  --finance:#1F7A55; --finance-soft:#DCEFE5;
  --tech:#2F5FB3; --tech-soft:#DEE7F7;
  --health:#B8434A; --health-soft:#F6E0E1;
  --reasoning:#6B4BB0; --reasoning-soft:#E9E2F6;
  --skills:#A4660E; --skills-soft:#F6E9D2;
  --social:#1D7C86; --social-soft:#DAF0F1;
  --shadow:0 1px 0 rgba(22,32,43,.05),0 8px 20px -14px rgba(22,32,43,.35);
  --display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --read:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --paper:#10151C; --surface:#18202A; --sunk:#212A36; --ink:#E9ECF0; --graphite:#9BA4B0; --line:#2C3644;
  --signal:#F2704B; --signal-ink:#10151C; --signal-soft:#3B2219;
  --good:#4CC08A; --good-soft:#15362A; --bad:#EE7862; --bad-soft:#3D1F1A;
  --finance:#5BC794; --finance-soft:#16342A;
  --tech:#7FA6EC; --tech-soft:#1B2A45;
  --health:#EC8A90; --health-soft:#3A1F23;
  --reasoning:#AE92EC; --reasoning-soft:#2A2143;
  --skills:#E3AA55; --skills-soft:#3A2C16;
  --social:#5CC6CF; --social-soft:#16343A;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 10px 24px -14px rgba(0,0,0,.7);
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.5;
  padding:env(safe-area-inset-top,0px) 16px calc(env(safe-area-inset-bottom,0px) + 40px)}
.wrap{max-width:640px;margin:0 auto}
h1,h2,h3{margin:0;line-height:1.15;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);font-weight:600}
.muted{color:var(--graphite)}
.small{font-size:13px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;padding:18px 0 10px}
.brand{display:flex;align-items:center;gap:10px}
.brand b{font-weight:800;font-stretch:75%;font-size:19px;letter-spacing:.02em}
.brand i{width:20px;height:20px;border-radius:6px;background:var(--ink);position:relative}
.brand i::after{content:"";position:absolute;right:-3px;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--signal);border:2px solid var(--paper)}
.iconbtn{border:1px solid var(--line);background:var(--surface);border-radius:10px;width:40px;height:40px;display:grid;place-items:center}

.loading{display:flex;align-items:center;gap:10px;padding:48px 0;color:var(--graphite)}
.loading span{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--signal);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* hero */
.hero{padding:6px 0 16px}
.hero .date{font-size:13px;color:var(--graphite);font-weight:600}
.hero h1{font-size:clamp(28px,8vw,38px);font-weight:800;font-stretch:72%;letter-spacing:-.01em;margin:2px 0 14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.stat b{display:block;font-family:var(--mono);font-size:22px;font-weight:600;line-height:1.1}
.stat span{font-size:12px;color:var(--graphite);font-weight:600}
.stat.hot b{color:var(--signal)}

.progress{margin:14px 0 6px;display:grid;gap:6px}
.progress .bar{height:8px;border-radius:99px;background:var(--sunk);overflow:hidden}
.progress .bar i{display:block;height:100%;background:var(--signal);border-radius:99px;transition:width .5s ease}
.progress .lbl{display:flex;justify-content:space-between;font-size:13px;font-weight:600}

.coach{background:var(--signal-soft);border-radius:14px;padding:14px 16px;margin:10px 0 4px;font-family:var(--read);font-size:16px}
.coach .eyebrow{color:var(--signal);display:block;margin-bottom:4px;font-family:var(--display)}
.stale{background:var(--sunk);border-radius:12px;padding:10px 14px;font-size:14px;margin-top:10px}

/* cards */
.feed{display:grid;gap:12px;margin-top:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.card>.head{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:start;padding:14px 16px;width:100%;text-align:left;background:none;border:0}
.card .tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:99px}
.card .tag.finance{background:var(--finance-soft);color:var(--finance)}
.card .tag.tech{background:var(--tech-soft);color:var(--tech)}
.card .tag.health{background:var(--health-soft);color:var(--health)}
.card .tag.reasoning{background:var(--reasoning-soft);color:var(--reasoning)}
.card .tag.skills{background:var(--skills-soft);color:var(--skills)}
.card .tag.social{background:var(--social-soft);color:var(--social)}
.card .tag.world{background:var(--sunk);color:var(--ink)}
.terms{margin:0;display:grid;gap:10px}
.terms dt{font-weight:800;font-size:16px}
.terms dd{margin:2px 0 0;font-size:15px;line-height:1.45}
.terms .ex{display:block;color:var(--graphite);font-style:italic;font-family:var(--read);margin-top:2px}
.lines,.say,.mission{border-radius:12px;padding:10px 12px;font-size:15px;display:grid;gap:4px}
.lines{background:var(--social-soft)}
.lines b,.say b{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--social)}
.lines ul{margin:0;padding-left:18px;display:grid;gap:4px;font-family:var(--read);font-size:16px}
.say{background:var(--social-soft);font-family:var(--read);font-size:16px}
.say b{font-family:var(--display)}
.mission{background:var(--signal-soft)}
.mission b{color:var(--signal)}
.talk.reflect .q::before{content:"🪞 "}
.checkin{background:var(--surface);border:1.5px dashed var(--signal);border-radius:16px;padding:14px 16px;display:grid;gap:8px;margin-top:14px}
.checkin .q{font-family:var(--read);font-size:16px}
.goalsbox{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:8px}
.goals{margin:8px 0;padding-left:20px;display:grid;gap:6px;font-size:14.5px}
.goals li span{margin-right:8px}
.goals .linkbtn{font-size:13px}
.addgoal{display:flex;gap:8px}
.addgoal input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);font-size:16px;color:var(--ink)}
.card .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card .region{font-size:12px;color:var(--graphite);font-weight:600}
.card h2{font-size:20px;font-weight:750;font-stretch:85%;grid-column:1/-1;margin-top:6px}
.card .chev{transition:transform .2s ease;color:var(--graphite)}
.card.open .chev{transform:rotate(180deg)}
.card .inner{padding:0 16px 16px;display:grid;gap:14px}
.card .body{font-family:var(--read);font-size:17.5px;line-height:1.6}
.why{border-left:3px solid var(--signal);padding:2px 0 2px 12px;font-size:15px}
.why b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.source{font-size:13px;color:var(--graphite)}
.source a{color:var(--ink);font-weight:600}
.card.done{box-shadow:none;background:transparent}
.card.done h2{font-size:16px;color:var(--graphite)}
.card.done .pts{color:var(--good)}
.pts{font-family:var(--mono);font-size:13px;font-weight:600;white-space:nowrap}

.check{background:var(--sunk);border-radius:12px;padding:12px;display:grid;gap:8px}
.check .q{font-weight:700;font-size:15.5px}
.opt{display:block;width:100%;text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:15px;line-height:1.35}
.opt:hover:not(:disabled){border-color:var(--ink)}
.opt:disabled{cursor:default}
.opt.right{border-color:var(--good);background:var(--good-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.dim{opacity:.55}
.explain{font-size:14.5px;line-height:1.5}
.explain b{margin-right:4px}
.tip{font-size:14px;background:var(--skills-soft);border-radius:10px;padding:10px 12px}
.tip b{color:var(--skills)}

.talk{display:grid;gap:8px}
.talk .q{font-weight:700;font-size:15px}
.talk .q::before{content:"💬 "}
textarea{width:100%;min-height:84px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);resize:vertical;font-size:15px}
.saved{font-size:14px;background:var(--sunk);border-radius:10px;padding:10px 12px;font-family:var(--read)}

.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{border:1.5px solid var(--ink);background:var(--surface);border-radius:12px;padding:11px 16px;font-weight:700;font-size:15px;min-height:44px}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.signal{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}
.btn.ghost{border-color:var(--line);background:transparent}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:default}

/* quiz */
.section-h{display:flex;justify-content:space-between;align-items:baseline;margin:26px 0 8px}
.section-h h3{font-size:20px;font-weight:800;font-stretch:78%}
.locked{background:var(--sunk);border-radius:14px;padding:16px;text-align:center;color:var(--graphite);font-size:14px}
.quiz{display:grid;gap:12px}
.quiz .card{padding:14px 16px;display:grid;gap:10px}
.quiz .ref{font-size:12px;color:var(--graphite);font-weight:600}

.finish{margin-top:22px;text-align:center;padding:26px 16px;border-radius:18px;background:var(--ink);color:var(--paper)}
.finish h3{font-size:26px;font-weight:800;font-stretch:72%;margin-bottom:6px}
.finish p{margin:0;opacity:.85}

/* sign in */
.auth{margin-top:24px;display:grid;gap:14px}
.auth h1{font-size:34px;font-weight:800;font-stretch:72%}
.auth p{margin:0}
label.f{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--graphite)}
input[type=email],input[type=password],select{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--surface);font-size:16px;color:var(--ink)}
.linkbtn{background:none;border:0;padding:0;text-decoration:underline;color:var(--graphite);font-size:14px}
.err{color:var(--bad);font-size:14px}
.card.pad{padding:18px}

/* parent */
.kid{display:grid;gap:14px;padding:18px}
.kid h2{font-size:24px;font-weight:800;font-stretch:78%}
.spark{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;align-items:end;height:64px}
.spark i{display:block;background:var(--signal);border-radius:3px 3px 0 0;min-height:2px}
.spark i.zero{background:var(--line)}
.sparkl{display:flex;justify-content:space-between;font-size:11px;color:var(--graphite)}
.report{font-family:var(--read);font-size:15.5px;line-height:1.55;white-space:pre-wrap}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{font-size:13px;padding:4px 10px;border-radius:99px;background:var(--sunk);font-weight:600}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--skills-soft);color:var(--skills)}
.catbars{display:grid;gap:6px}
.catbar{display:grid;grid-template-columns:90px 1fr 42px;gap:8px;align-items:center;font-size:13px}
.catbar .t{height:8px;border-radius:99px;background:var(--sunk);overflow:hidden}
.catbar .t i{display:block;height:100%}
.op{border-top:1px solid var(--line);padding-top:10px;font-size:14px}
.op q{font-family:var(--read);font-size:15px;quotes:"“" "”"}
details summary{cursor:pointer;font-weight:700}
.preview-banner{background:var(--tech-soft);color:var(--tech);border-radius:12px;padding:10px 14px;font-size:14px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:10px}

/* sheet */
.sheet{position:fixed;inset:0;background:rgba(10,14,20,.45);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet .panel{background:var(--paper);width:100%;max-width:640px;border-radius:20px 20px 0 0;padding:18px 18px calc(env(safe-area-inset-bottom,0px) + 22px);max-height:88vh;overflow:auto;display:grid;gap:14px}
.sheet .panel header{display:flex;justify-content:space-between;align-items:center}
.sheet .panel header strong{font-size:20px;font-weight:800;font-stretch:80%}
.steps{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px}
.chip{display:inline-block;font-size:13px;font-weight:700;padding:4px 10px;border-radius:99px}
.chip.good{background:var(--good-soft);color:var(--good)}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translate(-50%,30px);opacity:0;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:99px;font-weight:700;font-size:14px;transition:all .25s ease;pointer-events:none;z-index:30;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.plus{background:var(--signal);color:var(--signal-ink)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* parent: answers by day */
.daynav{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.card.ans{padding:14px 16px;display:grid;gap:6px;margin-top:10px}
.card.ans h3{font-size:17px;font-weight:750;font-stretch:85%}
.aq{font-size:14px;font-weight:700;margin-top:4px}
.his{font-size:14.5px;border-radius:8px;padding:6px 10px;background:var(--sunk)}
.his.right{background:var(--good-soft);color:var(--good);font-weight:600}
.his.wrong{background:var(--bad-soft);color:var(--bad);font-weight:600}
.his.none{color:var(--graphite);font-style:italic}
.his.text q{font-family:var(--read);font-size:15.5px}
.note{font-size:14px;border-left:3px solid var(--signal);padding-left:10px}
.plan{background:var(--signal-soft);border-radius:12px;padding:10px 12px}

/* ================= Vibrant learner experience ================= */
:root{--ring-track:rgba(255,255,255,.16);--grad-cta:linear-gradient(135deg,#FF7A45,#FF2E83)}
.g-finance{--g1:#0FB77F;--g2:#0A8FD8}
.g-tech{--g1:#5B5CF6;--g2:#2E8BFF}
.g-health{--g1:#FF5A6E;--g2:#FF9F43}
.g-world{--g1:#8B5CF6;--g2:#D946EF}
.g-reasoning{--g1:#7C3AED;--g2:#E1306C}
.g-skills{--g1:#F59E0B;--g2:#EF4444}
.g-social{--g1:#06B6D4;--g2:#7C5CFF}
.g-quiz{--g1:#FFB020;--g2:#FF5E3A}
.g-finish{--g1:#7C5CFF;--g2:#FF2E83}

.btn.signal{background:var(--grad-cta);border:0;color:#fff;box-shadow:0 8px 20px -10px rgba(255,46,131,.7)}
.btn{transition:transform .12s ease,box-shadow .2s ease}
.btn:active:not(:disabled),.opt:active:not(:disabled),.tile:active,.cta:active{transform:scale(.97)}

/* home hero */
.hero2{position:relative;margin:4px 0 14px;padding:20px 18px 18px;border-radius:26px;color:#fff;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 0% 0%,#7C5CFF 0%,transparent 55%),radial-gradient(90% 90% at 100% 0%,#FF2E83 0%,transparent 55%),radial-gradient(120% 120% at 100% 100%,#FF7A45 0%,transparent 50%),#1A1430;
  box-shadow:0 18px 40px -22px rgba(124,92,255,.8)}
.hero2::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 30% 110%,rgba(34,195,166,.55),transparent 70%);animation:drift 12s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(18%,-12%)}}
.hero2 .date{font-size:13px;font-weight:700;opacity:.85}
.hero2 h1{font-size:clamp(28px,8.4vw,40px);font-weight:800;font-stretch:72%;margin:2px 0 14px;letter-spacing:-.01em}
.hud{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center}
.ringbox{position:relative;width:96px;height:96px}
.ring{width:96px;height:96px}
.ring-fill{transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}
.ringtxt{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.ringtxt b{font-family:var(--mono);font-size:28px}
.ringtxt span{font-size:11px;opacity:.8;font-weight:700;margin-top:2px}
.hudstats{display:grid;gap:10px}
.flame{display:flex;align-items:baseline;gap:6px}
.flame b{font-family:var(--mono);font-size:24px}
.flame span:last-child{font-size:13px;font-weight:700;opacity:.85}
.flame .fl{font-size:22px;filter:grayscale(1);opacity:.5}
.flame.lit .fl{filter:none;opacity:1;display:inline-block;animation:flicker 1.6s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.15) rotate(3deg)}}
.lvlrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badge{font-family:var(--mono);font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.2)}
.lvl b{font-size:15px}
.lvl .muted{color:rgba(255,255,255,.75)}
.pts-pill{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.18);white-space:nowrap}
.pts-pill.bump{animation:bump .5s ease}
@keyframes bump{40%{transform:scale(1.25);background:#FFC53D;color:#1A1430}}
.xp{height:8px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;margin:6px 0 2px}
.xp i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#FFC53D,#FF7A45,#FF2E83);transition:width .8s ease}
.cta{margin-top:16px;width:100%;display:flex;justify-content:space-between;align-items:center;border:0;border-radius:18px;padding:16px 18px;font-size:17px;font-weight:800;
  background:#fff;color:#1A1430;box-shadow:0 10px 24px -12px rgba(0,0,0,.6);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,122,69,.28),transparent);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{60%,100%{left:130%}}
.cta .arr{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--grad-cta);color:#fff}
.cta-sub{text-align:center;margin-top:8px;color:rgba(255,255,255,.8)!important}

.coach2{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:start;margin:4px 0 6px}
.coach2 .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--surface);border:1px solid var(--line)}
.coach2 b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.coach2 p{margin:2px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:10px 14px;font-family:var(--read);font-size:16px}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border:0;border-radius:20px;padding:14px;min-height:124px;color:#fff;
  background:linear-gradient(145deg,var(--g1),var(--g2));box-shadow:0 10px 22px -16px var(--g1);transition:transform .15s ease,opacity .3s}
.tile.wide{grid-column:1/-1;min-height:84px;margin-top:10px;flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap}
.tile.wide .tt{flex-basis:100%;margin-left:44px;margin-top:-8px}
.tile .te{font-size:26px;line-height:1}
.tile .tk{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.tile .tt{font-size:14.5px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tile.read{opacity:.5}
.tile .tick{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;background:#fff;color:#0FB77F;display:grid;place-items:center;font-weight:900;font-size:13px}
.tile.locked{filter:grayscale(.6);opacity:.75}

.week{margin-top:18px}
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:6px}
.wd{display:grid;justify-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--graphite)}
.wd i{width:100%;max-width:34px;aspect-ratio:1;border-radius:10px;background:var(--sunk)}
.wd.some i{background:linear-gradient(145deg,#FFD1B8,#FFB3CF)}
.wd.on i{background:var(--grad-cta)}
.wd.today span{color:var(--ink)}

.checkin{border:0;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad-cta) border-box;border:2px solid transparent}

/* deck */
body.in-deck .top{display:none}
/* Embedded in Test Prep Hub (News tab): the hub supplies the header. */
html.embed .top{display:none}
html.embed .wrap{padding-top:6px}
body.in-deck{overflow:hidden}
.deck{position:fixed;inset:0;z-index:15;display:grid;grid-template-rows:auto 1fr auto;background:var(--paper);max-width:640px;margin:0 auto;padding-top:env(safe-area-inset-top,0px)}
.deck-top{padding:10px 14px 6px;display:grid;gap:8px}
.segs{display:flex;gap:4px}
.segs i{flex:1;height:4px;border-radius:99px;background:var(--sunk);transition:background .3s}
.segs i.done{background:linear-gradient(90deg,#FF7A45,#FF2E83)}
.segs i.cur{background:var(--ink)}
.deck-row{display:flex;align-items:center;gap:10px}
.deck-row .pos{font-weight:800;font-size:14px}
.deck-row .pts-pill{background:var(--grad-cta);color:#fff}
.iconbtn.ghosty{border:0;background:var(--sunk);font-size:16px}
.slide{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 14px 20px;overscroll-behavior:contain}
.slide.from-right{animation:inR .28s cubic-bezier(.2,.8,.2,1)}
.slide.from-left{animation:inL .28s cubic-bezier(.2,.8,.2,1)}
@keyframes inR{from{opacity:0;transform:translateX(28px)}}
@keyframes inL{from{opacity:0;transform:translateX(-28px)}}
.shead{border-radius:24px;padding:18px 18px 20px;color:#fff;background:linear-gradient(145deg,var(--g1),var(--g2));box-shadow:0 14px 30px -18px var(--g1);position:relative;overflow:hidden}
.shead::after{content:"";position:absolute;width:220px;height:220px;right:-70px;top:-90px;border-radius:50%;background:rgba(255,255,255,.14)}
.shead .meta{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.24)}
.chip.ghost{background:transparent;border:1px solid rgba(255,255,255,.5)}
.shead .big{font-size:46px;line-height:1;margin:14px 0 8px}
.shead h2{font-size:clamp(23px,6.6vw,29px);font-weight:800;font-stretch:78%;line-height:1.12;position:relative;z-index:1}
.shead .sub{margin:8px 0 0;opacity:.92;font-size:15px;position:relative;z-index:1}
.slide .inner{display:grid;gap:16px;padding:18px 2px 0}
.slide .body{font-family:var(--read);font-size:18.5px;line-height:1.62}
.deck-bar{display:flex;gap:10px;padding:10px 14px calc(env(safe-area-inset-bottom,0px) + 12px);background:var(--paper);border-top:1px solid var(--line)}
.deck-bar .nav{width:52px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);font-size:26px;line-height:1}
.deck-bar .nav:disabled{opacity:.35}
.deck-bar .grow{flex:1;font-size:16px;min-height:52px;border-radius:14px}
.check{border-radius:18px;padding:14px}
.check .q{font-size:16px}
.opt{border-radius:14px;padding:12px 14px;font-size:15.5px;transition:transform .12s ease,border-color .2s,background .2s}
.opt.right{animation:pop .4s ease}
.opt.wrong{animation:shake .35s ease}
@keyframes pop{50%{transform:scale(1.03)}}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.finstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.finstats div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 6px}
.finstats b{display:block;font-family:var(--mono);font-size:22px}
.finstats span{font-size:12px;color:var(--graphite);font-weight:700}
.xp.big{height:12px;background:var(--sunk)}
.ref{font-size:12px;color:var(--graphite);font-weight:700}

.floatpts{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 90px);transform:translateX(-50%);z-index:40;pointer-events:none;
  background:var(--grad-cta);color:#fff;font-weight:800;font-family:var(--mono);padding:8px 16px;border-radius:99px;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(255,46,131,.8);animation:floatup 1.2s ease forwards}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}20%{opacity:1;transform:translate(-50%,0) scale(1.08)}100%{opacity:0;transform:translate(-50%,-60px) scale(1)}}
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:50}
@media (prefers-reduced-motion:reduce){.hero2::after,.cta::before,.flame.lit .fl{animation:none}}

/* help for beginners */
.g-basics{--g1:#0EA5A4;--g2:#16A34A}
.word{display:inline;font:inherit;color:inherit;background:none;border:0;padding:0;border-bottom:2px dotted var(--signal);cursor:pointer;line-height:inherit}
.word.on{background:var(--signal-soft);border-bottom-style:solid;border-radius:3px}
.defbox{margin-top:8px;background:var(--surface);border:1.5px solid var(--signal);border-radius:12px;padding:10px 12px;font-size:15px;animation:inR .2s ease}
.bodywrap{display:grid;gap:4px}
.catchup{background:var(--sunk);border-radius:14px;padding:10px 14px}
.catchup summary{font-weight:700;font-size:15px;list-style:none}
.catchup summary::-webkit-details-marker{display:none}
.catchup p{margin:8px 0 2px;font-family:var(--read);font-size:16px;line-height:1.55}
.help{display:grid;gap:8px}
.helpbtn{justify-self:start;font-size:14px;min-height:40px;padding:8px 14px}
.simple{background:linear-gradient(145deg,#E0FBF4,#E6F0FF);border-radius:14px;padding:12px 14px;font-family:var(--read);font-size:16.5px;line-height:1.55;color:#10202B}
.simple b{display:block;font-family:var(--display);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#0E8A7E;margin-bottom:2px}
.asked{background:var(--sunk);border-radius:12px;padding:10px 12px;display:grid;gap:4px}
.asked b,.answers .eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.answers{margin:6px 0;display:grid;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.qa b{display:block;font-size:15px}
.qa p{margin:4px 0 0;font-family:var(--read);font-size:16px}

/* timer, required checks, new categories */
.timer{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:99px;padding:4px 10px;font-family:var(--mono);font-size:13px;font-weight:700;background:var(--sunk);color:var(--ink);margin-left:auto}
.timer .pz{font-size:10px;opacity:.7}
.timer.over{background:var(--skills-soft);color:var(--skills)}
.deck-row .timer + .pts-pill{margin-left:0}
.needcheck{background:var(--sunk);color:var(--graphite);border:1.5px dashed var(--line)}
.check.nudge{animation:nudge .6s ease}
@keyframes nudge{30%{box-shadow:0 0 0 4px rgba(255,46,131,.45)}100%{box-shadow:0 0 0 0 transparent}}
.pausebox{position:fixed;inset:0;z-index:45;background:rgba(16,12,30,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px}
.pz-in{background:var(--paper);border-radius:24px;padding:24px;max-width:360px;width:100%;text-align:center;display:grid;gap:10px}
.pz-in .big{font-size:44px}
.pz-in h3{font-size:26px;font-weight:800;font-stretch:78%}
.pz-in p{margin:0;color:var(--graphite)}
.g-local{--g1:#0284C7;--g2:#F97316}
.g-science{--g1:#1E3A8A;--g2:#7C3AED}
.g-climate{--g1:#16A34A;--g2:#0891B2}
.g-civics{--g1:#1D4ED8;--g2:#DC2626}
.g-culture{--g1:#DB2777;--g2:#F59E0B}

/* speaking + question challenges */
.speak,.curious{border-radius:16px;padding:14px;display:grid;gap:8px}
.speak{background:linear-gradient(145deg,#FFE7DC,#FFE0EE);color:#2A1030}
.curious{background:linear-gradient(145deg,#E6E9FF,#E4F6FF);color:#101A3A}
.speak>b,.curious>b{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.speak .q,.curious .q{font-weight:700;font-size:15.5px}
.speak textarea,.curious textarea{background:#fff;color:#16202B}
.mic{background:#fff;color:#2A1030;border:0;border-radius:99px;padding:10px 18px;font-weight:800}
.speakclock{font-size:18px;font-weight:700}
.transcript{font-family:var(--read);font-size:16px;min-height:1.4em}
.speak .saved,.curious .saved{background:rgba(255,255,255,.7);color:#16202B}
.speak .muted,.curious .muted{color:rgba(20,20,40,.65)}

/* reactions */
.react{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-top:1px dashed var(--line);padding-top:12px}
.react .muted{margin-right:auto}
.rx{border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:8px 14px;font-weight:700;font-size:14px;transition:transform .12s ease}
.rx:active{transform:scale(.94)}
.rx.on{background:var(--grad-cta);border-color:transparent;color:#fff}
.rx.on.down{background:var(--graphite);color:var(--paper)}
.tile .heart{position:absolute;bottom:10px;right:10px;font-size:16px}

.addform{display:grid;grid-template-columns:1fr 1fr 90px;gap:8px}
.addform input{width:100%;min-width:0;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);font-size:16px;color:var(--ink)}
@media (max-width:420px){.addform{grid-template-columns:1fr 90px}.addform input[type=text]{grid-column:1/-1}}
input[type=number]{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);font-size:16px;color:var(--ink)}

/* parent timing */
.cardtimes{display:grid;gap:8px;margin-top:8px}
.ct{display:grid;grid-template-columns:1fr 70px 42px;gap:4px 8px;align-items:center;font-size:13px}
.ct .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct .t{height:8px;border-radius:99px;background:var(--sunk);overflow:hidden}
.ct .t i{display:block;height:100%;background:var(--grad-cta)}
.ct .s{text-align:right}
.ct .fl{grid-column:1/-1;font-size:12px;color:var(--skills);margin-top:-4px}

/* Instant coaching checklist + next-morning feedback */
.tips{margin-top:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:14px}
.tips.live{border-style:dashed}
.tips-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.tips-h b{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.tips ul,.tips-l{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.tips li,.tips-l li{display:grid;grid-template-columns:20px 1fr;gap:6px;align-items:start}
.tips .tk,.tips-l .tk{font-weight:700;text-align:center}
.tips li.ok .tk,.tips-l li.ok .tk{color:var(--good)}
.tips li.todo .tk,.tips-l li.todo .tk{color:var(--graphite)}
.fb,.wkrev{margin:8px 0;display:grid;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.fb-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fb-h .eyebrow{flex:1;min-width:0}
.fb-h .small{white-space:nowrap}
.fb .eyebrow,.wkrev .eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.fbi{border:1px solid var(--line);border-radius:14px;background:var(--paper);overflow:hidden}
.fbi.hasfix{border-color:var(--signal)}
.fbi.done{opacity:.8}
.fbi summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 12px}
.fbi summary::-webkit-details-marker{display:none}
.fbi .fk{font-size:12px;font-weight:700;letter-spacing:.04em}
.fbi .ft{flex:1 1 100%;font-size:15px;order:3}
.dots{display:inline-flex;gap:3px;margin-left:auto}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--good)}
.fixtag{font-size:11px;font-weight:700;color:var(--signal);background:var(--signal-soft);border-radius:99px;padding:2px 8px}
.fbb{padding:0 12px 12px;display:grid;gap:8px;font-size:15px}
.fbb p{margin:0}
.fbb .said{display:block;font-family:var(--read);font-style:italic;color:var(--graphite);border-left:3px solid var(--line);padding-left:10px}
.fbb .good b{color:var(--good)}
.fbb .next b{color:var(--signal)}
.fix{background:var(--signal-soft);border-radius:12px;padding:10px 12px;display:grid;gap:4px;font-size:15px}
.fix p{margin:0}
.fix ul{margin:4px 0 0;padding-left:18px}
.better{border:1.5px dashed var(--good);border-radius:12px;padding:8px 12px}
.better b{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--good)}
.better p{margin:4px 0 0;font-family:var(--read)}
.wkrev p{margin:0;font-size:15px}
.wkrev ul{margin:0;padding-left:18px;font-size:14px}
.pausebox.nudge .pz-in{animation:nudgeIn .45s cubic-bezier(.2,1.4,.4,1)}
.pausebox.nudge .big{animation:wiggle 1.2s ease-in-out 2}
.pausebox.nudge .btn.ghost{margin-top:8px}
@keyframes nudgeIn{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
@media (prefers-reduced-motion:reduce){.pausebox.nudge .pz-in,.pausebox.nudge .big{animation:none}}

/* Bonus rounds + mini-games */
.g-fun{--g1:#FFB020;--g2:#FF5E8A}
.g-game{--g1:#7C5CFF;--g2:#22C3A6}
.segs i.mini{flex:.45}
.inner.fun{display:grid;gap:14px}
.inner.fun .setup,.inner.fun .factt{font-family:var(--read);font-size:20px;line-height:1.45;margin:0}
.inner.fun .punch{font-family:var(--display);font-weight:800;font-size:22px;margin:0;animation:inR .3s ease}
.actions.center{justify-content:center}
.tot{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.totb{min-height:90px;border-radius:16px;border:2px solid var(--line);background:var(--surface);font:inherit;font-weight:700;font-size:16px;color:inherit;padding:12px;cursor:pointer}
.totb.on{border-color:var(--signal);background:var(--signal-soft)}
.inner.game{display:grid;gap:14px}
.btn.big{min-height:60px;font-size:20px}
.gres{text-align:center;font-size:18px}
.ghud{display:flex;align-items:center;gap:12px}
.gbar{flex:1;height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.gbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#22C3A6,#7C5CFF);transition:width .2s linear}
.gsc{font-size:28px;font-weight:800;min-width:2ch;text-align:right}
.stage{display:grid;gap:12px;border-radius:18px;padding:4px}
.stage.ok{animation:flashOk .35s}
.stage.no{animation:shake .35s}
@keyframes flashOk{50%{background:var(--good-soft)}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.gcard{font-family:var(--read);font-size:21px;line-height:1.4;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px}
.gbtns,.gopts{display:grid;gap:10px}
.gbtns{grid-template-columns:1fr 1fr}
.gbtns .btn,.gopts .btn{min-height:56px;font-size:17px}
.gnote{font-size:15px;background:var(--surface);border-radius:12px;padding:8px 12px}
.hlrow{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch}
.hl{min-height:110px;border-radius:18px;border:2px solid var(--line);background:var(--surface);font:inherit;color:inherit;padding:12px;cursor:pointer;font-size:16px}
.vs{align-self:center;font-weight:800;color:var(--graphite)}
.emo{font-size:54px;text-align:center;letter-spacing:6px}
.mgrid{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.mcol{display:grid;gap:8px;align-content:start}
.mb{border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:10px;font:inherit;font-size:14px;color:inherit;text-align:left;cursor:pointer;min-height:48px}
.mb.sel{border-color:var(--signal);background:var(--signal-soft)}
.mb.gone{visibility:hidden}
.mb.miss{border-color:var(--bad);animation:shake .3s}
.gover{text-align:center;display:grid;gap:4px;padding:10px 0}
.gover h3{font-size:40px;margin:0}
@media (prefers-reduced-motion:reduce){.stage.ok,.stage.no,.mb.miss{animation:none}}
.tiles.two{grid-template-columns:1fr 1fr;margin-top:10px}

/* Home: slim hero + two-step checklist */
.hero2.slim{padding-bottom:18px}
.hero2.slim h1{margin-bottom:10px}
.hudline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px;font-size:14px}
.hudline .flame{display:inline-flex;align-items:center;gap:4px}
.hero2.slim .xp{margin-bottom:4px}
.steps{display:grid;gap:10px;margin:14px 0}
.steps .eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.step{display:grid;grid-template-columns:44px 1fr 20px;gap:12px;align-items:center;text-align:left;width:100%;padding:16px;border-radius:20px;cursor:pointer;font:inherit;color:inherit;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad-cta) border-box;border:2px solid transparent;box-shadow:0 6px 20px -12px rgba(255,46,131,.5)}
.step .num{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:20px;color:#fff;background:var(--grad-cta)}
.step .sbody{display:grid;gap:4px;min-width:0}
.step .st{font-family:var(--display);font-weight:800;font-size:19px}
.step .ss{font-size:13.5px;color:var(--graphite)}
.step .sbar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:4px}
.step .sbar i{display:block;height:100%;background:var(--grad-cta);border-radius:99px}
.step .arr{font-size:20px;color:var(--signal)}
.step.done{background:var(--surface);border:2px solid var(--good-soft);box-shadow:none}
.step.done .num{background:var(--good)}
.step.done .sbar i{background:var(--good)}
.step.done .arr{color:var(--graphite)}
.lineup{margin:14px 0}
.lineup summary{cursor:pointer;color:var(--graphite);font-size:14px;padding:8px 0}
.lineup .tiles{margin-top:8px}
.revtop{display:flex;align-items:center;gap:10px;margin:8px 0 12px}
.revtop b{flex:1;font-size:18px}
.hero2.slim .muted{color:rgba(255,255,255,.75)}

/* Tabs + My progress */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px;margin:4px 0 12px;position:sticky;top:0;z-index:5}
.tab{border:0;background:none;font:inherit;font-weight:700;font-size:15px;color:var(--graphite);padding:10px;border-radius:10px;cursor:pointer}
.tab.on{background:var(--grad-cta);color:#fff}
.gn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.gcol{border-radius:16px;padding:12px 14px;font-size:14px}
.gcol.good{background:var(--good-soft)}
.gcol.next{background:var(--signal-soft)}
.gcol ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px}
.skillmap{display:grid;gap:12px}
.sk{display:grid;grid-template-columns:28px 1fr auto 40px;gap:8px;align-items:center}
.ski{font-size:20px;text-align:center}
.skn{display:grid;min-width:0}
.skn b{font-size:15px}
.pips{display:flex;gap:4px}
.pips i{width:14px;height:14px;border-radius:4px;background:var(--line)}
.pips i.on{background:var(--grad-cta)}
.lvn{font-size:13px;font-weight:700;text-align:right}
.hbars{display:grid;gap:8px}
.hb{display:grid;grid-template-columns:120px 1fr 42px 34px;gap:8px;align-items:center;font-size:14px}
.hbt{height:12px;background:var(--line);border-radius:99px;overflow:hidden}
.hbt i{display:block;height:100%;background:var(--grad-cta);border-radius:99px}
.hbv{text-align:right;font-weight:700}
.hbd{color:var(--graphite)}
.hbd.up{color:var(--good);font-weight:700}
.cols{display:flex;align-items:flex-end;gap:8px;height:150px;padding-top:6px}
.col{flex:1;display:grid;grid-template-rows:18px 1fr 18px;height:100%;min-width:0;text-align:center}
.cv{font-size:12px;font-weight:700}
.cbar{position:relative;display:flex;align-items:flex-end;justify-content:center}
.cbar i{display:block;width:70%;max-width:34px;background:var(--grad-cta);border-radius:4px 4px 0 0}
.cbar .tgt{position:absolute;left:5%;right:5%;border-top:2px dashed var(--ink,#1b2330);opacity:.55}
.cl{font-size:12px;color:var(--graphite)}
.badges{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.bdg{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:10px;border-radius:14px;border:1px solid var(--line);opacity:.6;filter:grayscale(1)}
.bdg .bi{grid-row:1/3;font-size:24px;text-align:center}
.bdg b{font-size:13.5px}
.bdg.on{opacity:1;filter:none;border-color:var(--signal);background:var(--signal-soft)}
@media (max-width:360px){.hb{grid-template-columns:96px 1fr 38px 30px}.gn{grid-template-columns:1fr}}
.strictrow{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;font-size:14px;margin:8px 0}
.strictrow input{width:20px;height:20px;margin-top:1px}
.talk.nudge,.speak.nudge,.curious.nudge{animation:shake .4s;outline:2px solid var(--signal);outline-offset:4px;border-radius:12px}
.toast{white-space:normal;max-width:calc(100vw - 32px);text-align:center}
.linkerr{background:var(--signal-soft);border-radius:12px;padding:10px 12px;font-size:14.5px}
.signhelp{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.signhelp .addgoal{display:flex;gap:8px}