/* Layout: sticky app bar with six-tab nav; screens swap below it. Home = centered hero, ask card, three cards, exam banner. Chat = tutor panel (5 cols) beside ladder stage and 5-step roadmap (7 cols). Tokens follow the project's Kinetic Intuition system. */
:root{
  --canvas:#f7f8fd;
  --surface:#ffffff;
  --surface-2:#f1f3fb;
  --surface-3:#e7eaf8;
  --line:#dfe3f1;
  --ink:#171a2e;
  --ink-2:#464555;
  --muted:#6e6d82;
  --primary:#413fd6;
  --primary-2:#3a6ae0;
  --primary-soft:#e6eaff;
  --on-primary:#ffffff;
  --lip:#2f2db0;
  --dx:#0b84c6;
  --dy:#d2462c;
  --wood:#b8651b;
  --wall:#e9ecf8;
  --coral:#c2410c;
  --coral-soft:#fff0e8;
  --mint:#0b9a6c;
  --mint-soft:#e6f8f0;
  --amber:#b45309;
  --amber-soft:#fff6e0;
  --rasp:#d4264a;
  --rasp-soft:#ffecef;
  --scrim:rgba(20,23,43,.32);
  --glow-1:rgba(91,91,240,.13);
  --glow-2:rgba(58,106,224,.10);
  --glow-3:rgba(255,126,95,.10);
  --shadow:0 10px 30px -5px rgba(20,23,43,.06),0 4px 12px -2px rgba(91,91,240,.05);
  --f-display:"Quicksand","Nunito","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-serif:"Literata",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --canvas:#10131f;--surface:#181c2d;--surface-2:#1f2437;--surface-3:#272d44;--line:#2f3550;
    --ink:#ecebff;--ink-2:#c3c2dc;--muted:#9a99b6;
    --primary:#a9a8ff;--primary-2:#93b6ff;--primary-soft:#262d5c;--on-primary:#14153a;--lip:#6d6be0;
    --dx:#5cc2f5;--dy:#ff8a70;--wood:#e39a52;--wall:#262a46;--coral:#ff9a6b;--coral-soft:#3d2418;
    --mint:#4fd6a3;--mint-soft:#183a30;--amber:#f5b54a;--amber-soft:#3a2e15;--rasp:#ff7c96;--rasp-soft:#41202a;
    --scrim:rgba(5,6,15,.6);--glow-1:rgba(120,120,255,.11);--glow-2:rgba(120,160,255,.08);--glow-3:rgba(255,140,110,.06);
    --shadow:0 10px 30px -8px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#10131f;--surface:#181c2d;--surface-2:#1f2437;--surface-3:#272d44;--line:#2f3550;
  --ink:#ecebff;--ink-2:#c3c2dc;--muted:#9a99b6;
  --primary:#a9a8ff;--primary-2:#93b6ff;--primary-soft:#262d5c;--on-primary:#14153a;--lip:#6d6be0;
  --dx:#5cc2f5;--dy:#ff8a70;--wood:#e39a52;--wall:#262a46;--coral:#ff9a6b;--coral-soft:#3d2418;
  --mint:#4fd6a3;--mint-soft:#183a30;--amber:#f5b54a;--amber-soft:#3a2e15;--rasp:#ff7c96;--rasp-soft:#41202a;
  --scrim:rgba(5,6,15,.6);--glow-1:rgba(120,120,255,.11);--glow-2:rgba(120,160,255,.08);--glow-3:rgba(255,140,110,.06);
  --shadow:0 10px 30px -8px rgba(0,0,0,.45);
}

/* The student's own choice (Profile or the top-bar button) wins over the device and viewer theme. */
html.app-light:root{color-scheme:light;--canvas:#f7f8fd;--surface:#ffffff;--surface-2:#f1f3fb;--surface-3:#e7eaf8;--line:#dfe3f1;--ink:#171a2e;--ink-2:#464555;--muted:#6e6d82;--primary:#413fd6;--primary-2:#3a6ae0;--primary-soft:#e6eaff;--on-primary:#ffffff;--lip:#2f2db0;--dx:#0b84c6;--dy:#d2462c;--wood:#b8651b;--wall:#e9ecf8;--coral:#c2410c;--coral-soft:#fff0e8;--mint:#0b9a6c;--mint-soft:#e6f8f0;--amber:#b45309;--amber-soft:#fff6e0;--rasp:#d4264a;--rasp-soft:#ffecef;--scrim:rgba(20,23,43,.32);--glow-1:rgba(91,91,240,.13);--glow-2:rgba(58,106,224,.10);--glow-3:rgba(255,126,95,.10);--shadow:0 10px 30px -5px rgba(20,23,43,.06),0 4px 12px -2px rgba(91,91,240,.05);}
html.app-dark:root{color-scheme:dark;--canvas:#10131f;--surface:#181c2d;--surface-2:#1f2437;--surface-3:#272d44;--line:#2f3550;--ink:#ecebff;--ink-2:#c3c2dc;--muted:#9a99b6;--primary:#a9a8ff;--primary-2:#93b6ff;--primary-soft:#262d5c;--on-primary:#14153a;--lip:#6d6be0;--dx:#5cc2f5;--dy:#ff8a70;--wood:#e39a52;--wall:#262a46;--coral:#ff9a6b;--coral-soft:#3d2418;--mint:#4fd6a3;--mint-soft:#183a30;--amber:#f5b54a;--amber-soft:#3a2e15;--rasp:#ff7c96;--rasp-soft:#41202a;--scrim:rgba(5,6,15,.6);--glow-1:rgba(120,120,255,.11);--glow-2:rgba(120,160,255,.08);--glow-3:rgba(255,140,110,.06);--shadow:0 10px 30px -8px rgba(0,0,0,.45);}
*{box-sizing:border-box}
body{background:var(--canvas);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--surface)}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;color:var(--ink)}
p{margin:0}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.m{font-family:var(--f-mono);font-size:.92em;background:var(--surface-3);padding:1px 6px;border-radius:6px;white-space:nowrap}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.label{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.soon{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--surface-3);color:var(--muted);margin-left:6px;vertical-align:middle}
.sample{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--amber-soft);color:var(--amber)}
[aria-disabled="true"]{opacity:.62;cursor:not-allowed}

/* app bar */
.bar{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px)));padding:12px max(16px, env(safe-area-inset-left, 0px));background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none;border-radius:12px}
.brand-name{display:flex;flex-direction:column;line-height:1.1}
.brand-name b{font-family:var(--f-display);font-size:15px;font-weight:700;white-space:nowrap}
.brand-name small{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.logo{width:38px;height:38px;flex:none;border-radius:11px;display:block}
.nav{display:flex;gap:4px;padding:4px;background:var(--surface-2);border-radius:999px;overflow-x:auto;scrollbar-width:none;min-width:0}
.nav a{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-weight:600;font-size:13.5px;color:var(--ink-2);white-space:nowrap;text-decoration:none}
.nav a:hover{background:var(--surface-3);color:var(--ink)}
.nav a[aria-current="page"]{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:var(--on-primary)}
.nav svg{width:16px;height:16px}
.right-cluster{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.streak{display:flex;align-items:center;gap:8px;background:var(--coral-soft);color:var(--coral);border-radius:999px;padding:7px 12px;font-weight:700;font-size:13.5px;white-space:nowrap}
.streak svg{width:16px;height:16px}
.streak .fz{font-weight:600;font-size:12.5px;color:var(--muted);border-left:1px solid var(--line);padding-left:8px}
.themebtn{width:40px;height:40px;border-radius:50%;border:0;background:var(--surface-2);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;flex:none}
.themebtn:hover{color:var(--ink);background:var(--surface-3)}
.themebtn svg{width:19px;height:19px;grid-area:1 / 1}
.themebtn .moon{display:none}
.themebtn.is-light .sun{display:none}
.themebtn.is-light .moon{display:block}
.who{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;white-space:nowrap;background:var(--surface-2);border:0;border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-family:var(--f-display);font-weight:700;font-size:13px}
.menu{position:fixed;right:max(16px, env(safe-area-inset-right, 0px));top:calc(68px + env(safe-area-inset-top, 0px));z-index:40;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px -12px rgba(20,23,43,.25);padding:8px;width:min(280px,calc(100vw - 32px));display:flex;flex-direction:column;gap:2px}
.menu .mhead{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.menu .mhead b{display:block}
.menu .mhead span{font-size:12.5px;color:var(--muted)}
.menu button{text-align:left;background:none;border:0;border-radius:10px;padding:9px 10px;font-weight:600;font-size:14px;cursor:pointer;color:var(--ink-2)}
.menu button:hover{background:var(--surface-2);color:var(--ink)}
.menu .note{font-size:12.5px;color:var(--muted);padding:8px 10px 4px;border-top:1px solid var(--line);margin-top:4px}
/* The header gets more compact step by step, so all six tabs stay visible at every width. Hidden tab labels stay readable to screen readers. */
@media (max-width:1440px){.brand-name{display:none}}
@media (max-width:1280px){.streak .fz{display:none}.nav a{padding:7px 11px}}
@media (max-width:1100px){.who b{display:none}}
@media (max-width:980px){.nav a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.nav a{padding:8px 10px}}
@media (max-width:640px){.streak .txt{display:none}}

.page{max-width:1320px;margin:0 auto;padding-block:20px 48px}
.screen{display:flex;flex-direction:column;gap:18px}
@media (prefers-reduced-motion:no-preference){.screen{animation:rise .35s cubic-bezier(.34,1.56,.64,1) backwards}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;padding:9px 16px;border-radius:999px;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--muted)}
.btn.primary{border:0;background:linear-gradient(90deg,var(--primary),var(--primary-2));color:var(--on-primary);box-shadow:0 4px 0 var(--lip)}
.btn.primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--lip)}
.btn.soft{background:var(--surface-2);border-color:transparent;color:var(--primary)}
.btn.end{background:var(--rasp-soft);color:var(--rasp);border-color:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:16px;height:16px;flex:none}
.card{background:var(--surface);border-radius:24px;box-shadow:var(--shadow);border:1px solid var(--line)}

/* home */
.home{max-width:1180px;margin:0 auto;width:100%;gap:28px}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding-top:20px}
.pill{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:var(--surface-3);padding:7px 18px;border-radius:999px}
.hero h1{font-size:clamp(34px,6vw,52px);line-height:1.1;letter-spacing:-0.02em}
.hero .serif{font-family:var(--f-serif);font-size:clamp(18px,2.6vw,24px);color:var(--ink-2)}
.hero .serif em{color:var(--primary)}
.askcard{width:min(900px,100%);margin:0 auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.askrow{display:flex;gap:10px;align-items:center}
.askrow svg.bulb{width:26px;height:26px;color:var(--primary);flex:none}
.askrow input{flex:1;min-width:0;border:0;background:transparent;font-size:17px;padding:10px 4px;color:var(--ink)}
.askrow input::placeholder{color:var(--muted)}
.askrow input:focus-visible{outline:none}
.askcard:focus-within{border-color:var(--primary)}
.tinker{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:12px}
.askacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:12px}
.home-match{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--muted)}
.home-match .chip{font-size:13.5px;padding:6px 12px}
.home-sugs{width:min(900px,100%);margin:-4px auto 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.home-sugs .sug{font-size:13.5px}
.hcards.two{grid-template-columns:repeat(2,minmax(0,1fr));width:min(900px,100%);margin:0 auto}
@media (max-width:760px){.hcards.two{grid-template-columns:1fr}}
.nx-acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.explore{width:min(900px,100%);margin:0 auto}
.explore summary{cursor:pointer;font-weight:600;color:var(--ink-2);font-size:14px;padding:6px 2px;list-style-position:inside}
.explore summary:hover{color:var(--ink)}
.pf-week{padding:18px 22px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 24px;align-items:center}
.pf-week .week{grid-row:1 / span 2;grid-column:2;max-width:420px;justify-self:end;width:100%}
@media (max-width:640px){.pf-week{grid-template-columns:1fr}.pf-week .week{grid-row:auto;grid-column:auto;justify-self:stretch}}
.tinker .lab{font-size:14px;color:var(--muted);margin-right:4px}
.chip{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:7px 14px;font-weight:600;font-size:14px;cursor:pointer;color:var(--ink)}
.chip.go{background:var(--primary-soft);border-color:transparent;color:var(--primary)}
@media (max-width:560px){.askrow{flex-wrap:wrap}.askrow input{flex-basis:100%;order:-1}}
.hcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:960px){.hcards{grid-template-columns:1fr}}
.hcard{padding:24px;display:flex;flex-direction:column;gap:14px}
.hcard h2{font-size:22px}
.hcard .sub{color:var(--ink-2)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--primary-soft);color:var(--primary)}
.badge.coral{background:var(--coral-soft);color:var(--coral)}
.resume-box{display:flex;gap:14px;align-items:center;background:var(--surface-2);border-radius:16px;padding:12px}
.resume-box svg{width:72px;height:60px;flex:none;background:var(--surface);border-radius:12px}
.resume-box b{display:block;font-family:var(--f-display);font-size:16px}
.resume-box span{font-size:13.5px;color:var(--ink-2)}
.progress{height:6px;background:var(--surface-3);border-radius:999px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2));border-radius:999px}
.nudge{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface-2);border-radius:14px;padding:12px 14px}
.nudge b{display:block;font-size:15px}
.nudge span{font-size:13px;color:var(--ink-2)}
.nudge .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--coral);vertical-align:middle}
.bigstreak{display:flex;align-items:baseline;gap:10px}
.bigstreak b{font-family:var(--f-display);font-size:40px;line-height:1}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.week span{font-size:11.5px;font-weight:600;color:var(--muted)}
.week i{width:34px;height:34px;margin:4px auto 0;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--surface);font-style:normal;font-size:14px;font-weight:700}
.week i.on{background:var(--primary)}
.week i.today{outline:2px solid var(--primary);outline-offset:2px}
.week i.today.on{background:var(--primary-2)}
.grow{flex:1}
.exam{display:flex;align-items:center;gap:16px;padding:18px 22px;background:var(--surface-3);border-radius:24px;flex-wrap:wrap}
.exam .ico{width:52px;height:52px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;flex:none}
.exam .ico svg{width:24px;height:24px}
.exam b{display:block;font-size:17px}
.exam span{color:var(--ink-2);font-size:14.5px}

/* library and photo uploads */
.attach{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;flex:none}
.attach svg,.btn svg{width:18px;height:18px;flex:none}
.attach:disabled{opacity:.5;cursor:default}
.msg-photo{display:block;max-width:min(240px,100%);max-height:220px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.msg .acts{display:flex;gap:6px;flex-wrap:wrap}
.msg .acts .btn{padding:6px 12px;font-size:13px}
.lib-bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.lib-reading{padding:14px 18px;display:flex;gap:12px;align-items:center;color:var(--ink-2);font-weight:600}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px}
.lcard{padding:14px;display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:start}
.lcard .ph{width:88px;height:88px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface-3);padding:0;cursor:zoom-in}
.lcard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.lcard .bd{display:flex;flex-direction:column;gap:6px;min-width:0}
.lcard h3{font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.lcard .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--muted)}
.lcard .txt{font-size:13.5px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lcard .acts{grid-column:1 / -1;display:flex;gap:6px;flex-wrap:wrap}
.lcard .acts .btn{padding:6px 12px;font-size:13px}
.lcard .acts .del{margin-left:auto;color:var(--muted)}
.lcard .acts .del.sure{color:var(--coral);border-color:var(--coral)}
.ktag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--primary-soft);color:var(--primary)}
.ktag.work{background:var(--amber-soft);color:var(--amber)}
.ktag.notes{background:var(--surface-3);color:var(--ink-2)}
.lib-empty{padding:28px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;grid-column:1 / -1}
.lib-empty p{color:var(--ink-2);max-width:60ch}
.tryit{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.tryit h2{font-size:19px}
.tryit .row-between{justify-content:flex-start;flex-wrap:wrap}
.try-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.try-item{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;background:var(--surface-2);border:1.5px solid transparent;border-radius:14px;padding:10px 12px;font-size:14.5px}
.try-item .ck{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--surface);margin-top:1px}
.try-item.done .ck{background:var(--mint);border-color:var(--mint)}
.try-item.done .tx{color:var(--ink-2)}
.try-item.next{border-color:var(--primary);background:var(--primary-soft)}
.try-item .why{display:block;font-size:13.5px;color:var(--ink);margin-top:4px}
.try-item .link{white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.try-item.flash{animation:pop .5s cubic-bezier(.34,1.56,.64,1)}}
.try-formula{display:flex;flex-direction:column;gap:6px}
.try-formula .out{font-family:var(--f-mono);font-size:14px;background:var(--surface-2);border-radius:10px;padding:8px 12px;overflow-wrap:anywhere}
.chat-tools{display:flex;align-items:center;gap:8px}
.btn.sm{padding:6px 12px;font-size:13px;gap:6px}
.btn.sm svg{width:15px;height:15px}
.hist-list{display:flex;flex-direction:column;gap:6px;max-height:min(55vh,560px);overflow-y:auto}
.hist-list h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:8px 0 0}
.hrow{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:14px;padding:4px 8px 4px 4px}
.hopen{flex:1;min-width:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:8px 10px;border-radius:10px;display:flex;flex-direction:column;gap:4px}
.hopen:hover{background:var(--surface-3)}
.hopen b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hopen > span{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--muted)}
.hopen .stag{font-size:11px;padding:2px 8px}
.hopen i.sample{font-style:normal}
.hrow .del{padding:6px 12px;font-size:13px;color:var(--muted)}
.hrow .del.sure{color:var(--coral);border-color:var(--coral)}
.hist-note{align-self:center;font-size:12.5px;color:var(--muted);background:var(--surface-2);border-radius:12px;padding:5px 14px;text-align:center}
#hist .sy-search{flex:none}
.ob-sheet{width:min(780px,100%)}
.ob-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.ob-only{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;margin-left:auto}
.ob-only input{width:16px;height:16px;accent-color:var(--primary)}
.ob-list{display:flex;flex-direction:column;gap:6px;max-height:min(52vh,560px);overflow-y:auto;padding-right:4px;margin-right:-4px}
.ob-course{font-family:var(--f-display);font-size:17px;margin:10px 0 2px;display:flex;align-items:baseline;gap:8px}
.ob-course small{font-family:var(--f-body,inherit);font-size:12.5px;color:var(--muted);font-weight:500}
.ob-list h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:6px 0 0;display:flex;gap:8px;align-items:baseline}
.ob-list h3 span{font-weight:600;letter-spacing:0;text-transform:none}
.ob-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
@media (max-width:640px){.ob-grid{grid-template-columns:1fr}.ob-only{margin-left:0}}
.ob-item{display:grid;grid-template-columns:20px 44px minmax(0,1fr);gap:8px;align-items:start;background:var(--surface-2);border:1px solid transparent;border-radius:12px;padding:9px 12px;cursor:pointer;font-size:14px;line-height:1.35}
.ob-item:hover{border-color:var(--line)}
.ob-item input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--primary);cursor:pointer}
.ob-item .wk{font-size:12px;font-weight:700;color:var(--muted);padding-top:2px;font-variant-numeric:tabular-nums}
.ob-item .tx small{display:block;font-size:11.5px;color:var(--primary);font-weight:600;margin-top:2px}
.ob-item.on{background:var(--primary-soft);border-color:var(--primary)}
.ob-item.done{opacity:.8}
.ob-count{font-size:13.5px;color:var(--ink-2);font-weight:600;align-self:center}
.ob-empty{font-size:14px;color:var(--muted);padding:16px 4px}
.foryou{display:flex;flex-direction:column;gap:10px}
.foryou .rec{background:var(--surface-2);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.foryou .rec b{font-size:14.5px}
.foryou .rec span{font-size:13px;color:var(--ink-2)}
.foryou .rec.good{background:var(--mint-soft)}
.foryou .rec.good span{color:var(--ink)}
.photo-view{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);display:flex;justify-content:center}
.photo-view img{max-width:100%;max-height:60vh;display:block}
.photo-text{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-2)}
.photo-text pre{margin:0;white-space:pre-wrap;font:inherit;background:var(--surface-2);border-radius:12px;padding:10px 12px;color:var(--ink)}
/* coming soon screens */
.soonpage{max-width:720px;margin:40px auto;padding:36px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.soonpage h1{font-size:32px}
.soonpage p{color:var(--ink-2);max-width:60ch}
.soonpage ul{margin:0;padding-left:20px;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}

/* chat strip */
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.crumb{background:var(--primary-soft);color:var(--primary);font-weight:600;font-size:13.5px;padding:6px 12px;border-radius:999px}
.strip h1{font-size:20px}
.stepname{color:var(--primary);font-weight:600}
.strip .actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px;align-items:start}
.rightcol{display:flex;flex-direction:column;gap:18px;min-width:0}
@media (max-width:1023px){.layout{grid-template-columns:1fr}.tutor{order:2}.rightcol{order:1}}

/* tutor */
.tutor{display:flex;flex-direction:column;min-height:0}
.tutor-head{padding:16px 18px 12px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
.link{background:none;border:0;color:var(--primary);font-weight:600;font-size:13px;cursor:pointer;padding:2px}
.modes{display:flex;flex-wrap:wrap;gap:6px}
.mode{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.mode[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.thread{display:flex;flex-direction:column;gap:14px;padding:16px 18px;overflow-y:auto;height:min(58vh,560px);min-height:300px}
.msg{display:flex;flex-direction:column;gap:6px;max-width:92%}
.msg.you{align-self:flex-end;background:var(--surface-3);border-radius:18px 18px 4px 18px;padding:10px 14px}
.msg.you .who-line{font-size:12px;color:var(--muted);font-weight:600}
.msg.ai{align-self:flex-start;background:var(--surface-2);border-radius:18px 18px 18px 4px;padding:12px 14px}
@media (prefers-reduced-motion:no-preference){.msg{animation:pop .3s cubic-bezier(.34,1.56,.64,1) backwards}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
.ai-head{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ai-name{font-family:var(--f-display);font-weight:700;color:var(--primary);font-size:14px}
.tag{font-size:11px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:999px;background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.tag.lvl{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.msg .body{color:var(--ink);font-size:15px}
.msg .body p+p{margin-top:8px}
.msg.err{background:var(--rasp-soft);align-self:stretch;max-width:100%}
.thinking{color:var(--muted);font-style:italic}
.sugs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.sug{border:1px dashed var(--primary);background:var(--surface);color:var(--primary);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;text-align:left}
.sug:disabled{opacity:.5;cursor:not-allowed}
.meter{display:flex;align-items:center;gap:10px;padding:8px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.dots{display:flex;gap:4px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--primary)}
.composer{display:flex;gap:8px;align-items:flex-end;padding:12px 14px 6px}
.composer textarea{flex:1;resize:none;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:18px;padding:10px 14px;font:inherit;font-size:15px;min-height:44px;max-height:140px}
.send{width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:var(--on-primary);box-shadow:0 3px 0 var(--lip);flex:none}
.send:disabled{opacity:.5;cursor:not-allowed}
.send svg{width:18px;height:18px}
.honest{font-size:12px;color:var(--muted);padding:0 18px 12px}

/* stage */
.stage{padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--surface-2)}
.readouts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ro{background:var(--surface);border-radius:999px;padding:6px 12px;font-family:var(--f-mono);font-size:13.5px;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px;border:1px solid var(--line);white-space:nowrap}
.ro i{width:9px;height:9px;border-radius:50%;display:inline-block}
.ro.first{margin-right:auto;font-family:var(--f-body);font-weight:600}
.svgbox{background:var(--surface);border-radius:18px;border:1px solid var(--line);overflow:hidden}
svg.scene{display:block;width:100%;height:auto;touch-action:none;user-select:none}
.scene text{font-family:var(--f-mono);font-size:12px}
.handle{cursor:grab}
.handle:active{cursor:grabbing}
.controls{background:var(--surface);border-radius:18px;border:1px solid var(--line);padding:12px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:center}
.controls label{font-weight:600;font-size:14px;display:flex;justify-content:space-between;gap:10px}
.controls input[type=range]{width:100%;accent-color:var(--primary)}
.ctl-btns{display:flex;gap:8px}
.eq{grid-column:1 / -1;background:var(--surface-2);border-radius:12px;padding:10px 14px;font-family:var(--f-mono);font-size:14px;font-variant-numeric:tabular-nums;overflow-x:auto;white-space:nowrap}
.eq b{color:var(--dy)}
.caveat{grid-column:1 / -1;background:var(--amber-soft);color:var(--ink);border-radius:12px;padding:10px 14px;font-size:13.5px}
@media (max-width:560px){.controls{grid-template-columns:1fr}}

/* roadmap */
.detail{background:var(--surface-2);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.detail .big{font-family:var(--f-serif);font-style:italic;font-size:19px;line-height:1.55;color:var(--ink);max-width:60ch}
.detail p{color:var(--ink-2);max-width:68ch}
.conf{padding:14px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.conf h3{font-size:17px}
.conf p{font-size:13.5px;color:var(--muted)}
.conf .opts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* overlays */
.overlay{position:fixed;inset:0;z-index:50;background:var(--scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;padding:max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.sheet{background:var(--surface);border-radius:28px;width:min(720px,100%);padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 32px 64px -16px rgba(20,23,43,.3);border:1px solid var(--line)}
@media (prefers-reduced-motion:no-preference){.overlay:not([hidden]) .sheet{animation:rise .4s cubic-bezier(.34,1.56,.64,1) backwards}}
.sheet h2{font-size:24px}
.sheet .sub{color:var(--muted);font-size:14px}
.x{margin-left:auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:grid;place-items:center;flex:none}
.x svg{width:16px;height:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:14px}
.field textarea{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:14px;padding:10px 12px;font-family:var(--f-mono);font-size:13.5px;line-height:1.6;resize:vertical}
.sheet-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.stages{list-style:none;margin:0;padding:12px 14px;background:var(--surface-2);border-radius:14px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.stages li{display:flex;align-items:center;gap:10px;color:var(--muted)}
.stages li::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--line);flex:none}
.stages li.run{color:var(--ink);font-weight:600}
.stages li.run::before{border-color:var(--primary);background:var(--primary-soft)}
.stages li.done{color:var(--ink-2)}
.stages li.done::before{border-color:var(--mint);background:var(--mint)}
.stages li.fail::before{border-color:var(--rasp);background:var(--rasp)}
@media (prefers-reduced-motion:no-preference){.stages li.run::before{animation:pulse 1s ease-in-out infinite alternate}}
@keyframes pulse{from{transform:scale(.8)}to{transform:scale(1.15)}}
.verdict{border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.verdict.good{background:var(--mint-soft)}
.verdict.fix{background:var(--rasp-soft)}
.verdict h3{font-size:18px}
.verdict .cat{font-size:13px;color:var(--ink-2)}
.lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lines li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);align-items:start}
.lines .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.lines li.ok .n{background:var(--mint);color:var(--surface);border-color:var(--mint)}
.lines li.first_error{background:var(--rasp-soft);outline:2px solid var(--rasp)}
.lines li.first_error .n{background:var(--rasp);color:var(--surface);border-color:var(--rasp)}
.lines li.after_error{opacity:.7}
.lines code{font-family:var(--f-mono);font-size:13px;color:var(--ink);word-break:break-word}
.lines .note{font-size:13.5px;color:var(--ink-2)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.pair{grid-template-columns:1fr}}
.box{background:var(--surface-2);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;font-size:14.5px}
.box .label{font-size:11.5px}
.rchip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px}
.rchip.ok{background:var(--mint-soft);color:var(--mint)}
.rchip.bad{background:var(--rasp-soft);color:var(--rasp)}
.rchip.na{background:var(--surface-2);color:var(--muted)}
.rchip.warn{background:var(--amber-soft);color:var(--amber)}
.saved{background:var(--amber-soft);border-radius:12px;padding:10px 14px;font-size:13.5px}
details.ref{background:var(--surface-2);border-radius:14px;padding:10px 14px;font-size:14px}
details.ref summary{cursor:pointer;font-weight:600;color:var(--primary)}
details.ref ol{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-family:var(--f-mono);font-size:13px}
.wrapgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:560px){.wrapgrid{grid-template-columns:1fr 1fr}}
.stat{background:var(--surface-2);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.stat b{font-family:var(--f-display);font-size:24px;font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px;color:var(--muted)}
.wrap-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--ink-2)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom, 0px));z-index:60;background:var(--ink);color:var(--canvas);padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:600}

/* practice */
.p-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px}
.p-head h1{font-size:clamp(28px,4.5vw,40px);letter-spacing:-0.015em}
.p-head p{color:var(--ink-2)}
.p-head .ctrls{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.switch{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px;font-weight:600;font-size:13.5px;cursor:pointer}
.switch i{width:34px;height:20px;border-radius:999px;background:var(--line);position:relative;flex:none}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:transform .2s}
.switch[aria-checked="true"] i{background:var(--primary)}
.switch[aria-checked="true"] i::after{transform:translateX(14px)}
.infochip{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 12px}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.filters button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.p-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:18px;align-items:start}
@media (max-width:1023px){.p-grid{grid-template-columns:1fr}.p-left{order:2}}
.p-left{display:flex;flex-direction:column;gap:18px;min-width:0}
.panel{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.panel h2{font-size:18px}
.rings{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ring{background:var(--surface-2);border-radius:16px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.ring svg{width:84px;height:84px}
.ring b{font-family:var(--f-display);font-size:15px}
.ring span{font-size:12px;color:var(--muted)}
.streakcard{background:var(--coral-soft);border-radius:20px;padding:14px 16px;display:flex;align-items:center;gap:12px}
.streakcard .flame{width:40px;height:40px;border-radius:50%;background:var(--coral);color:var(--surface);display:grid;place-items:center;flex:none}
.streakcard .flame svg{width:20px;height:20px}
.streakcard b{display:block;font-family:var(--f-display);font-size:18px;color:var(--ink)}
.streakcard span{font-size:13px;color:var(--ink-2)}
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bdg{background:var(--surface-2);border-radius:14px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:0;cursor:pointer}
.bdg .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.bdg.on .ic{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.bdg .ic svg{width:18px;height:18px}
.bdg b{font-size:12px;line-height:1.2}
.bdg span{font-size:11px;color:var(--muted);font-family:var(--f-mono)}
.trace{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.trace button{width:100%;display:flex;align-items:center;gap:10px;background:var(--surface-2);border:0;border-radius:12px;padding:9px 12px;font-size:13px;text-align:left;cursor:pointer;color:var(--ink)}
.trace i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--mint)}
.trace i.miss{background:var(--rasp)}
.trace .k{margin-left:auto;font-family:var(--f-mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.qcard{padding:22px 24px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.qtop{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.qnum{background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px}
.qmeta{font-size:13.5px;color:var(--ink-2)}
.qkind{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-2)}
.qstem{font-family:var(--f-serif);font-size:clamp(18px,2.2vw,21px);line-height:1.6;color:var(--ink);max-width:62ch}
.anchor{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;background:var(--surface-2);border-radius:18px;padding:12px;align-items:center}
.anchor svg{width:100%;height:auto;background:var(--surface);border-radius:12px}
.anchor .q{font-family:var(--f-serif);font-style:italic;font-size:16px;line-height:1.55;color:var(--ink)}
@media (max-width:520px){.anchor{grid-template-columns:1fr}.anchor svg{max-width:220px}}
.qopts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface-2);border:2px solid transparent;border-radius:999px;padding:10px 16px 10px 10px;cursor:pointer;font-size:15px;color:var(--ink);min-height:54px}
.opt .L{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--surface);font-weight:700;font-size:13px;flex:none;color:var(--ink-2)}
.opt[aria-checked="true"]{border-color:var(--primary);background:var(--primary-soft)}
.opt[aria-checked="true"] .L{background:var(--primary);color:var(--on-primary)}
.opt .cur{margin-left:auto;font-size:12px;font-weight:700;color:var(--primary);white-space:nowrap}
.opt.right{border-color:var(--mint);background:var(--mint-soft)}
.opt.right .L{background:var(--mint);color:var(--surface)}
.opt.miss{border-color:var(--rasp);background:var(--rasp-soft)}
.opt:disabled{cursor:default}
.ansrow{display:flex;flex-direction:column;gap:6px;max-width:420px}
.ansbox{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:2px solid var(--line);border-radius:14px;padding:4px 14px}
.ansbox:focus-within{border-color:var(--primary)}
.ansbox.ok{border-color:var(--mint)}
.ansbox input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-family:var(--f-mono);font-size:18px;padding:9px 0;color:var(--ink)}
.ansbox input:focus-visible{outline:none}
.ansbox .unit{font-family:var(--f-mono);font-size:15px;color:var(--muted);white-space:nowrap}
.qmsg{background:var(--amber-soft);color:var(--ink);border-radius:12px;padding:10px 14px;font-size:14.5px;max-width:66ch}
.hints{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:66ch}
.hints li{background:var(--primary-soft);border-radius:12px;padding:10px 14px;font-size:14.5px;color:var(--ink)}
.hints li b{color:var(--primary);margin-right:6px}
.qhelp{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.appr{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.appr.ok{background:var(--mint-soft);color:var(--mint)}
.appr.no{background:var(--surface-3);color:var(--muted)}
.appr.src{background:var(--primary-soft);color:var(--primary)}
.appr.changed{background:var(--amber-soft);color:var(--amber)}
.appr-slot{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.appr-btn{font-size:12px;padding:3px 10px;border-radius:999px;border:1px dashed var(--primary);background:transparent;color:var(--primary);font-weight:700;cursor:pointer}
.notes{background:var(--surface-2);border-radius:14px}
.notes summary{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;font-weight:700;font-size:14.5px;list-style:none}
.notes summary::-webkit-details-marker{display:none}
.notes summary::before{content:"▸";color:var(--muted);transition:transform .2s}
.notes[open] summary::before{transform:rotate(90deg)}
.notes-body{padding:0 16px 14px;display:flex;flex-direction:column;gap:6px;font-size:14.5px;line-height:1.6;color:var(--ink);max-width:72ch}
#notes .notes-body{padding:0;max-height:min(62vh,640px);overflow-y:auto}
.notes-body h4{font-family:var(--f-display);font-size:15.5px;margin:10px 0 0;color:var(--ink)}
.notes-body p{margin:0}
.notes-src{font-size:12.5px;color:var(--muted);margin-top:8px!important}
.qsrc{font-size:12.5px;color:var(--muted);margin:-6px 0 0}
.teach-list{display:flex;flex-direction:column;gap:6px;max-height:min(60vh,640px);overflow-y:auto}
.teach-list h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 0 0}
.trow{background:var(--surface-2);border-radius:14px}
.trow summary{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;list-style:none}
.trow summary::-webkit-details-marker{display:none}
.trow .ttl{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow[open] .ttl{white-space:normal}
.trow .tbody{padding:0 14px 12px;font-size:14px;color:var(--ink-2);display:flex;flex-direction:column;gap:6px}
.trow .tbody ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.p-legend{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.ai-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--surface-3);color:var(--muted);margin-left:6px}
.qactions{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.fb{border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.fb.good{background:var(--mint-soft)}
.fb.fix{background:var(--rasp-soft)}
.fb h3{font-size:18px}
.fb p{color:var(--ink);max-width:66ch}
.fb .acts{display:flex;flex-wrap:wrap;gap:8px}
.burst{position:absolute;inset:0;pointer-events:none}
.burst i{position:absolute;width:9px;height:9px;border-radius:50%;left:50%;top:40%;opacity:0}
@media (prefers-reduced-motion:no-preference){.burst i{animation:splash .9s cubic-bezier(.2,.8,.3,1) forwards}}
@keyframes splash{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.4)}}
.summary{padding:28px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.summary .score{font-family:var(--f-display);font-size:48px;line-height:1;font-variant-numeric:tabular-nums}
.sumlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%}
.sumlist li{display:flex;justify-content:space-between;gap:10px;background:var(--surface-2);border-radius:12px;padding:10px 14px;font-size:14px}
.ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ladder li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;background:var(--surface-2);border-radius:14px;padding:12px 14px;align-items:start}
.ladder li .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:13px}
.ladder li b{display:block;font-size:14.5px}
.ladder li span{color:var(--ink-2);font-size:14.5px}
.ladder li.hl{outline:2px solid var(--rasp);background:var(--rasp-soft)}
.ladder li.hl .n{background:var(--rasp);color:var(--surface);border-color:var(--rasp)}

/* review */
.milestone{border-radius:28px;padding:24px 26px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;background:linear-gradient(110deg,var(--primary) 0%,var(--primary-2) 55%,var(--coral) 100%);color:var(--on-primary)}
.milestone .ico{width:56px;height:56px;border-radius:18px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.milestone .ico svg{width:28px;height:28px}
.milestone h2{color:inherit;font-size:clamp(22px,3.4vw,30px)}
.milestone p{opacity:.9}
.milestone .tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.milestone .t{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.2)}
.milestone .btn{margin-left:auto;background:var(--surface);color:var(--primary);border:0}
.rv-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.rv-head h1{font-size:clamp(28px,4.5vw,36px)}
.rv-head .ctrls{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:820px){.stats{grid-template-columns:1fr}}
.statc{padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.statc b{font-family:var(--f-display);font-size:30px;line-height:1.15;font-variant-numeric:tabular-nums}
.statc .s{font-size:13.5px;color:var(--ink-2)}
.statc .s.warn{color:var(--rasp)}
.hbar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--surface-3);margin-top:6px}
.hbar i{display:block;height:100%}
.qhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.qhead h2{font-size:20px}
.cnt{font-size:12.5px;font-weight:600;background:var(--surface-3);padding:3px 10px;border-radius:999px;margin-left:8px;vertical-align:middle;font-family:var(--f-body)}
.rvlist{display:flex;flex-direction:column;gap:12px}
.rvcard{padding:16px 18px;display:grid;grid-template-columns:auto 76px minmax(0,1fr) auto;gap:16px;align-items:center}
.rvcard .sel{width:20px;height:20px;accent-color:var(--primary)}
.rvcard .thumb{width:76px;height:60px;border-radius:14px;background:var(--surface-2);overflow:hidden;display:grid;place-items:center}
.rvcard .thumb svg{width:100%;height:100%}
.rvcard .tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--ink-2)}
.prio{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.prio.High{background:var(--rasp-soft);color:var(--rasp)}
.prio.Medium{background:var(--amber-soft);color:var(--amber)}
.prio.Low{background:var(--surface-3);color:var(--ink-2)}
.subj{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--surface-2)}
.rvcard h3{font-size:18px;margin:4px 0 2px}
.rvcard .why{font-size:13.5px;color:var(--ink-2)}
.rvcard .why.hot{color:var(--rasp)}
.rvcard .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.rvcard .editor{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--surface-2);border-radius:14px;padding:12px 14px;font-size:14px}
.rvcard .editor input{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:7px 10px;font:inherit}
@media (max-width:760px){.rvcard{grid-template-columns:auto minmax(0,1fr)}.rvcard .thumb{display:none}.rvcard .acts{grid-column:1 / -1;justify-content:flex-start}}
.rvcard.nosel{grid-template-columns:76px minmax(0,1fr) auto}
@media (max-width:760px){.rvcard.nosel{grid-template-columns:minmax(0,1fr)}}
.bigidea{padding:22px 24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--surface-3);border-radius:24px}
.bigidea p{font-size:15px;line-height:1.6;max-width:68ch;color:var(--ink-2);margin-top:4px}
.rq{display:flex;flex-direction:column;gap:8px;background:var(--surface-2);border-radius:16px;padding:14px}
.rq .stem{font-weight:600}
.rq .opt{min-height:44px;font-size:14px;background:var(--surface)}
.rq .exp{font-size:14px;color:var(--ink-2)}

/* syllabus */
.sy-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 24px}
.sy-head h1{font-size:clamp(30px,5vw,44px);letter-spacing:-0.02em}
.sy-head .sub{color:var(--ink-2);max-width:60ch}
.sy-head .quote{font-family:var(--f-serif);font-style:italic;font-size:clamp(17px,2.2vw,21px);color:var(--primary-2);max-width:52ch}
.sy-head .ctrls{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.sy-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.sy-tabs{display:flex;gap:6px;background:var(--surface-2);border-radius:18px;padding:5px}
.sy-tabs button{border:0;background:transparent;border-radius:13px;padding:8px 16px;cursor:pointer;color:var(--ink-2);display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;text-align:left}
.sy-tabs button b{font-size:14.5px}
.sy-tabs button small{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.sy-tabs button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.sy-tabs[data-off] button[aria-pressed="true"]{background:transparent;box-shadow:none;color:var(--ink-2)}
.sy-search{flex:1 1 260px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:0 14px;color:var(--muted)}
.sy-search:focus-within{border-color:var(--primary)}
.sy-search svg{width:18px;height:18px;flex:none}
.sy-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;padding:11px 0;color:var(--ink)}
.sy-search input:focus-visible{outline:none}
.sy-course{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font-size:14px;color:var(--ink-2)}
.sy-course b{font-family:var(--f-display);font-size:18px;color:var(--ink)}
.sy-course .link{font-size:14px}
.sy-list{display:flex;flex-direction:column;gap:10px}
.sy-group{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.sy-group span{font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2);margin-left:6px}
.sy-row{padding:0;overflow:hidden}
.sy-row.out .sy-sum{opacity:.6}
.sy-sum{width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;display:grid;grid-template-columns:62px minmax(0,1fr) auto auto 20px;gap:14px;align-items:center;padding:14px 18px}
.sy-sum:hover{background:var(--surface-2)}
.sy-sum .wk{font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.sy-sum .nm{display:flex;flex-direction:column;min-width:0}
.sy-sum .nm b{font-size:16px}
.sy-sum .nm small{font-size:13px;color:var(--muted)}
.sy-sum .tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sy-sum .ms{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.mbar{width:70px;height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden;display:block}
.mbar i{display:block;height:100%;background:var(--primary);border-radius:999px}
.sy-sum .chev{width:18px;height:18px;color:var(--muted);transition:transform .2s}
.sy-row.open .chev{transform:rotate(180deg)}
.sy-detail{padding:4px 18px 18px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line)}
.sy-detail > :first-child{margin-top:14px}
@media (max-width:640px){.sy-sum{grid-template-columns:minmax(0,1fr) auto 20px;gap:10px}.sy-sum .wk,.sy-sum .tags{display:none}.mbar{width:44px}}
.stag{font-size:12px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:999px}
.stag.phys{background:var(--coral-soft);color:var(--coral)}
.stag.calc{background:var(--primary-soft);color:var(--primary)}
.stag.exam{background:var(--surface-2);color:var(--ink-2);font-weight:600;letter-spacing:0}
.stag.weak{background:var(--amber-soft);color:var(--amber);letter-spacing:0}
.insy{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink-2)}
.insy[aria-pressed="true"]{background:var(--primary-soft);border-color:transparent;color:var(--primary)}
.sy-big{background:var(--surface-2);border-radius:14px;padding:12px 16px;font-family:var(--f-serif);font-style:italic;font-size:17px;line-height:1.55;color:var(--ink)}
.widget{background:var(--surface-2);border-radius:18px;padding:14px;display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
.widget svg{width:100%;height:auto;background:var(--surface);border-radius:14px}
.widget .wctl{display:flex;flex-direction:column;gap:8px;min-width:0}
.widget label{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:600}
.widget label .num{color:var(--primary)}
.widget input[type=range]{width:100%;accent-color:var(--primary)}
.widget .out{font-family:var(--f-mono);font-size:13.5px;background:var(--surface);border-radius:10px;padding:8px 10px;font-variant-numeric:tabular-nums;overflow-x:auto;white-space:nowrap}
.widget.wide{grid-template-columns:minmax(0,1fr);align-items:stretch}
.widget.wide svg{max-height:260px}
.tq-presets{display:flex;flex-wrap:wrap;gap:6px}
.tq-presets .chip{font-size:13px;padding:6px 12px;background:var(--surface)}
.tq-presets .chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.tq-forces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
@media (max-width:640px){.tq-forces{grid-template-columns:1fr}}
.tq-f{display:flex;flex-direction:column;gap:6px;background:var(--surface);border-radius:14px;padding:10px 12px}
.tq-f h4{margin:0;font-size:13.5px;display:flex;align-items:center;gap:8px}
.tq-f h4 i{width:10px;height:10px;border-radius:50%;display:inline-block}
.tq-two{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;cursor:pointer}
.tq-note{font-size:14px;color:var(--ink-2);line-height:1.5}
.tq-note.ok{color:var(--mint);font-weight:600}
.ebar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--surface)}
.ebar i{display:block;height:100%}
.rw{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink)}
@media (max-width:480px){.widget{grid-template-columns:1fr}.widget svg{max-width:180px}.widget.wide svg{max-width:100%}}
.rw .label{display:block;margin-bottom:2px}
.sy-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:14px}
.sy-acts .grow{flex:1}

/* profile */
.calm *, .calm *::before, .calm *::after{animation:none !important;transition:none !important}
.pf-head{padding:24px;display:flex;flex-wrap:wrap;gap:18px 24px;align-items:center}
.crop-stage{position:relative;width:min(280px,72vw);aspect-ratio:1/1;max-width:100%;border-radius:18px;overflow:hidden;background:var(--surface-3);cursor:grab;touch-action:none;user-select:none}
.crop-stage:active{cursor:grabbing}
.crop-stage img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;pointer-events:none}
.crop-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(20,23,43,.5);outline:2px solid rgba(255,255,255,.9);outline-offset:-2px;pointer-events:none}
.crop-zoomrow{display:flex;align-items:center;gap:12px;width:min(280px,72vw);font-size:14px;font-weight:600}
.crop-zoomrow input{flex:1;accent-color:var(--primary)}
.avatar,.pf-av{overflow:hidden}
.avatar img,.pf-av img{width:100%;height:100%;object-fit:cover;display:block}
.pf-photo{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.pf-photo .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.pf-photo .btn{padding:6px 12px;font-size:13px}
.pf-av{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:var(--on-primary);font-family:var(--f-display);font-weight:700;font-size:30px;flex:none}
.pf-id{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.pf-id h1{font-size:clamp(26px,4vw,34px)}
.pf-id p{color:var(--ink-2);font-size:14.5px}
.pf-name{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pf-name input{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:12px;padding:8px 12px;font:inherit;min-width:0;width:min(260px,100%)}
.pf-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:820px){.pf-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pf-stat{padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.pf-stat b{font-family:var(--f-display);font-size:28px;line-height:1.15;font-variant-numeric:tabular-nums}
.pf-stat span{font-size:13px;color:var(--ink-2)}
.pf-badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.pf-badges{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.pf-badges{grid-template-columns:1fr}}
.bcard{padding:18px;display:flex;flex-direction:column;gap:8px}
.bcard .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.bcard .ic svg{width:22px;height:22px}
.bcard.on .ic{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.bcard h3{font-size:17px}
.bcard p{font-size:13.5px;color:var(--ink-2)}
.bcard .st{font-size:12.5px;font-weight:700;font-family:var(--f-mono);color:var(--muted)}
.bcard.on .st{color:var(--mint)}
.pbar{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:999px;background:var(--primary)}
.pf-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:860px){.pf-two{grid-template-columns:1fr}}
.pf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pf-list li{display:flex;justify-content:space-between;gap:10px;background:var(--surface-2);border-radius:12px;padding:10px 14px;font-size:14px}
.pf-list li span:last-child{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface-2);border-radius:14px;padding:12px 14px}
.setrow b{display:block;font-size:14.5px}
.setrow span{font-size:13px;color:var(--ink-2)}

/* lessons */
.lesson-pick{font:inherit;font-weight:600;font-size:13.5px;color:var(--ink);background:var(--surface);border:1.5px solid var(--primary);border-radius:999px;padding:6px 12px;cursor:pointer;max-width:100%}
.sl-grid{display:flex;flex-direction:column;gap:8px;min-width:0}
.sl{display:flex;flex-direction:column;gap:4px}
[hidden]{display:none!important}
.sl[hidden]{display:none}
.filters [hidden]{display:none}
.filters .f-sep{width:1px;align-self:stretch;background:var(--line);margin:0 4px}
.filters .f-break{flex-basis:100%;height:0}
.filters .f-subj{font-weight:700}
.filters .f-subj[aria-pressed="true"]{background:var(--surface-2);color:var(--ink);border-color:var(--primary)}
.sl input[type=range]{width:100%;accent-color:var(--primary)}
.av3d{touch-action:none;cursor:grab}
.av3d canvas{display:block;width:100%;height:auto}

/* motion: everything below is off under prefers-reduced-motion and the in-app Reduce motion switch (.calm) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.page{position:relative;z-index:1}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;width:55vmax;height:55vmax;border-radius:50%}
.ambient i:nth-child(1){left:-15vmax;top:-22vmax;background:radial-gradient(circle,var(--glow-1) 0%,transparent 62%)}
.ambient i:nth-child(2){right:-20vmax;top:8vmax;background:radial-gradient(circle,var(--glow-2) 0%,transparent 62%)}
.ambient i:nth-child(3){left:18vmax;bottom:-32vmax;background:radial-gradient(circle,var(--glow-3) 0%,transparent 62%)}
.nav{position:relative}
.nav a{position:relative;z-index:1;transition:color .25s}
.nav a[aria-current="page"]{background:transparent;color:var(--on-primary)}
.nav-ind{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--primary-2));box-shadow:0 4px 12px -4px var(--primary);opacity:0;pointer-events:none}
.nav-ind.ready{transition:transform .5s cubic-bezier(.34,1.45,.64,1),width .5s cubic-bezier(.34,1.45,.64,1),opacity .2s}
.modes.slide{position:relative}
.modes.slide .mode{position:relative;z-index:1}
.modes.slide.placed .mode{background:transparent}
.modes.slide.placed .mode[aria-pressed="true"]{border-color:transparent}
.modes.slide.placed .mode[aria-pressed="true"]:hover{transform:none}
.mode-ind{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;background:var(--primary);box-shadow:0 4px 12px -4px var(--primary);opacity:0;pointer-events:none}
.mode-ind.ready{transition:transform .45s cubic-bezier(.34,1.4,.64,1),width .45s cubic-bezier(.34,1.4,.64,1),height .3s,opacity .2s}
.typing{display:inline-flex;gap:5px;align-items:center;height:18px;vertical-align:middle}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--primary);opacity:.55}
.celebrate{position:fixed;inset:0;z-index:70;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .screen{animation:none}
  .screen > *{animation:rise .55s cubic-bezier(.22,1,.36,1) backwards}
  .screen > *:nth-child(2){animation-delay:0.06s}
  .screen > *:nth-child(3){animation-delay:0.12s}
  .screen > *:nth-child(4){animation-delay:0.18s}
  .screen > *:nth-child(5){animation-delay:0.24s}
  .screen > *:nth-child(n+6){animation-delay:.3s}
  .hcards > *,.sy-grid > *,.rvlist > *,.pf-badges > *,.pf-stats > *,.stats > *{animation:rise .5s cubic-bezier(.22,1,.36,1) backwards}
  .hcards > *:nth-child(2),.sy-grid > *:nth-child(2),.rvlist > *:nth-child(2),.pf-badges > *:nth-child(2),.pf-stats > *:nth-child(2),.stats > *:nth-child(2){animation-delay:0.07s}
  .hcards > *:nth-child(3),.sy-grid > *:nth-child(3),.rvlist > *:nth-child(3),.pf-badges > *:nth-child(3),.pf-stats > *:nth-child(3),.stats > *:nth-child(3){animation-delay:0.14s}
  .hcards > *:nth-child(4),.sy-grid > *:nth-child(4),.rvlist > *:nth-child(4),.pf-badges > *:nth-child(4),.pf-stats > *:nth-child(4),.stats > *:nth-child(4){animation-delay:0.21s}
  .hcards > *:nth-child(5),.sy-grid > *:nth-child(5),.rvlist > *:nth-child(5),.pf-badges > *:nth-child(5),.pf-stats > *:nth-child(5),.stats > *:nth-child(5){animation-delay:0.28s}
  .hcards > *:nth-child(6),.sy-grid > *:nth-child(6),.rvlist > *:nth-child(6),.pf-badges > *:nth-child(6),.pf-stats > *:nth-child(6),.stats > *:nth-child(6){animation-delay:0.35s}
  .hcards > *:nth-child(7),.sy-grid > *:nth-child(7),.rvlist > *:nth-child(7),.pf-badges > *:nth-child(7),.pf-stats > *:nth-child(7),.stats > *:nth-child(7){animation-delay:0.42s}
  .hcards > *:nth-child(8),.sy-grid > *:nth-child(8),.rvlist > *:nth-child(8),.pf-badges > *:nth-child(8),.pf-stats > *:nth-child(8),.stats > *:nth-child(8){animation-delay:0.49s}
  .progress i,.pbar i,.hbar i{animation:barIn 1s cubic-bezier(.22,1,.36,1) .15s backwards;transform-origin:left center}
  .overlay:not([hidden]){animation:fade .25s ease backwards}
  .toast:not([hidden]){animation:toastIn .35s cubic-bezier(.34,1.56,.64,1) backwards}
  .typing i{animation:typing 1.1s ease-in-out infinite}
  .typing i:nth-child(2){animation-delay:.15s}
  .typing i:nth-child(3){animation-delay:.3s}
  .ambient i:nth-child(1){animation:drift1 26s ease-in-out infinite alternate}
  .ambient i:nth-child(2){animation:drift2 31s ease-in-out infinite alternate}
  .ambient i:nth-child(3){animation:drift3 35s ease-in-out infinite alternate}
  .streak svg{transform-origin:50% 90%;animation:flick 2.6s ease-in-out infinite}
  .hero .serif em{background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--coral),var(--primary));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s linear infinite}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn,.chip,.mode,.opt,.sug{transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .2s,border-color .2s,box-shadow .2s}
  .btn:hover:not(:disabled),.chip:hover,.mode:hover,.sug:hover:not(:disabled){transform:translateY(-2px)}
  .btn:active:not(:disabled){transform:translateY(1px) scale(.98)}
  .opt:hover:not(:disabled){transform:translateX(3px)}
  .hcard,.rvcard,.sy-card,.bcard,.pf-stat,.statc{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
  .hcard:hover,.rvcard:hover,.sy-card:hover,.bcard:hover,.pf-stat:hover,.statc:hover{transform:translateY(-3px);box-shadow:0 18px 38px -12px rgba(20,23,43,.18),0 4px 12px -2px rgba(91,91,240,.08)}
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(8vmax,6vmax) scale(1.12)}}
@keyframes drift2{from{transform:translate(0,0) scale(1.05)}to{transform:translate(-7vmax,8vmax) scale(.92)}}
@keyframes drift3{from{transform:translate(0,0) scale(.95)}to{transform:translate(6vmax,-8vmax) scale(1.1)}}
@keyframes pulseRing{0%,100%{box-shadow:0 0 0 0 rgba(91,91,240,.3)}50%{box-shadow:0 0 0 7px rgba(91,91,240,0)}}
@keyframes flick{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.08) rotate(-4deg)}60%{transform:scale(.96) rotate(3deg)}}
@keyframes sheen{from{background-position:0% 50%}to{background-position:300% 50%}}

.explain{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.55}
.explain h3{font-size:15px;margin-bottom:4px}
.explain ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;color:var(--ink-2)}
.explain p{color:var(--ink-2);max-width:70ch}
.explain .warn{background:var(--amber-soft);color:var(--ink);border-radius:10px;padding:8px 12px;margin-top:6px}
.k-f{color:var(--primary);font-weight:700}
.k-g{color:var(--coral);font-weight:700}
.k-l{color:var(--mint);font-weight:700}

@media (prefers-reduced-motion:no-preference){.fl-wave{animation:flwave 2.4s linear infinite}}
@keyframes flwave{from{transform:translateX(0)}to{transform:translateX(40px)}}
#pf-delete.sure{color:var(--coral);border-color:var(--coral)}
.m.tex{font-family:inherit;font-size:1em;background:var(--surface-3);padding:2px 7px;border-radius:7px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.m.tex .katex{font-size:1.12em}
.m.tex.disp{display:block;white-space:normal;overflow-x:auto;overflow-y:hidden;margin:6px 0}
/* Practice: every problem in the topic, grouped by type */
.plist{gap:14px}
.pgroup{display:flex;flex-direction:column;gap:6px}
.pghead{display:flex;align-items:center;gap:8px;font-size:13px}
.pghead .muted{font-size:12px;font-variant-numeric:tabular-nums}
.pgo{margin-left:auto;border:1px solid var(--line);background:var(--surface);color:var(--primary);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;cursor:pointer}
.pgo:hover,.pgo[aria-pressed="true"]{background:var(--primary-soft);border-color:transparent}
.pgroup ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.pq{width:100%;display:flex;align-items:flex-start;gap:10px;background:var(--surface-2);border:1px solid transparent;border-radius:12px;padding:8px 11px;font-size:13px;line-height:1.4;text-align:left;cursor:pointer;color:var(--ink-2);transition:background .15s,border-color .15s,transform .15s}
.pq:hover{background:var(--surface-3);color:var(--ink)}
.pq.cur{border-color:var(--primary);background:var(--primary-soft);color:var(--ink)}
.pq i{width:10px;height:10px;margin-top:4px;border-radius:50%;flex:none;border:2px solid var(--muted);opacity:.6}
.pq.done i{background:var(--mint);border-color:var(--mint);opacity:1}
.pq.missed i{background:var(--rasp);border-color:var(--rasp);opacity:1}
.pq span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.filters .f-kind{background:var(--primary-soft);border-color:transparent;color:var(--primary)}
.fb .acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* Home: lesson tiles, one scrolling row per course */
.explore summary{font-family:var(--f-display);font-size:18px;color:var(--ink);padding:4px 2px 10px}
.lrows{display:flex;flex-direction:column;gap:18px}
.lrow h3{font-size:14px;font-family:var(--f-body);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}
.ltiles{display:grid;grid-auto-flow:column;grid-auto-columns:max(160px, calc((100% - 48px) / 4.4));gap:12px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.ltile{scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px 10px 12px;cursor:pointer;color:var(--ink);transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,border-color .2s}
.ltile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--primary-soft)}
.ltile:active{transform:translateY(-1px) scale(.98)}
.ltile:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.lthumb{display:block;width:100%;aspect-ratio:150/96;background:var(--surface-2);border-radius:12px;overflow:hidden}
.lthumb svg{width:100%;height:100%;display:block}
.ltile b{font-family:var(--f-display);font-size:15px;line-height:1.25}
.lmeta{font-size:12px;color:var(--muted)}
.lbar{display:block;width:100%;height:5px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.lbar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2));border-radius:999px}
.resume-box svg{width:120px;height:92px}
@media (max-width:520px){.resume-box{flex-direction:column;align-items:stretch}.resume-box svg{width:100%;height:auto;aspect-ratio:150/96}}
/* more motion: replies flow in, problems slide in, hints rise, wrong answers shake, tiles arrive in turn */
@keyframes flowIn{from{clip-path:inset(0 0 100% 0);opacity:.25}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes slideIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .msg .body.reveal{animation:flowIn 900ms cubic-bezier(.3,.7,.2,1) both}
  .qcard.enter{animation:slideIn .45s cubic-bezier(.22,1,.36,1) backwards}
  .fb{animation:rise .45s cubic-bezier(.22,1,.36,1) backwards}
  .hints li.new{animation:rise .4s cubic-bezier(.22,1,.36,1) backwards}
  .qmsg{animation:pop .3s cubic-bezier(.34,1.56,.64,1) backwards}
  .ansbox.shake{animation:shake .4s ease-in-out}
  .ltile{animation:rise .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i, 0) * 35ms)}
  .pq,.chip,.filters button,.mode,.sug,.hcard{transition:background-color .18s,border-color .18s,color .18s,transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s}
  .hcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .sug:hover,.chip:hover{transform:translateY(-1px)}
}
.nx-thumb{display:block;width:150px;max-width:100%;aspect-ratio:150/96;background:var(--surface-2);border-radius:16px;overflow:hidden}
.nx-thumb svg{width:100%;height:100%;display:block}
.nx-thumb:empty{display:none}
/* prepared help: free replies with buttons to climb the help levels */
.ai-tag.prep{background:var(--mint-soft);color:var(--mint)}
.lad-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.lad-acts .muted{font-size:12.5px}