:root{
  /* accent is set per-subject at runtime by app.js */
  --accent:#36c5f0; --accent-soft:rgba(54,197,240,.22); --accent-ink:#7dd8f5;
  --board:#0b0f17; --card:#121a28; --card2:#1a2436; --edge:#22304a; --edge2:#1a2436;
  --ink:#eef3fb; --muted:#9fb0cc; --faint:#67779a;
  --good:#3fd07f; --good-bg:rgba(63,208,127,.14); --good-line:rgba(63,208,127,.4);
  --bad:#ff6b6b; --bad-bg:rgba(255,107,107,.14); --bad-line:rgba(255,107,107,.4);
  --warn:#f5a623; --warn-bg:rgba(245,166,35,.14); --warn-line:rgba(245,166,35,.4);
  --paper2:#0e1420;
  --display:"Bricolage Grotesque",sans-serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html,body{margin:0; overscroll-behavior-y:none;}
body{font-family:var(--body); color:var(--ink); line-height:1.55;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,155,255,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(77,219,139,.06), transparent 55%),
    var(--board);
  -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
  padding:calc(18px + var(--safe-top)) 0 calc(74px + var(--safe-bot));}
.wrap{max-width:900px; margin:0 auto; padding:0 24px;}

/* ---------- persistent top nav ---------- */
.mainnav{position:sticky; top:0; z-index:60; background:var(--board);
  border-bottom:1px solid var(--edge); box-shadow:0 2px 12px rgba(0,0,0,.2);}
.mainnav-inner{max-width:900px; margin:0 auto; padding:13px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.mainlogo{background:none; border:0; cursor:pointer; padding:0; font-family:var(--display); font-weight:600;
  text-transform:uppercase; letter-spacing:.005em; font-size:17px; color:var(--ink);}
.mainlogo .u{position:relative; color:var(--accent);}
.mainlinks{display:flex; gap:8px; flex:0 0 auto;}
.navlink{background:none; border:1px solid var(--edge); border-radius:8px; padding:8px 14px; cursor:pointer;
  font-family:var(--mono); font-size:12.5px; color:var(--muted); white-space:nowrap; transition:color .15s,border-color .15s;}
.navlink:hover{color:var(--ink); border-color:var(--accent-soft);}
@media(max-width:480px){.mainlinks .navlink{padding:8px 10px; font-size:11.5px;}}
::selection{background:var(--accent-soft);}
button{font:inherit;}

/* ---------- subject tabs (top nav) ---------- */
.subtabs{display:flex; gap:2px; overflow-x:auto; border-bottom:1px solid var(--edge); margin:4px 0 20px; scrollbar-width:none;}
.subtabs::-webkit-scrollbar{display:none;}
.subtab{flex:0 0 auto; font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); background:none; border:none; cursor:pointer; padding:11px 14px;
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:color .15s;}
.subtab:hover{color:var(--ink);}
.subtab.on{color:var(--sub); border-bottom-color:var(--sub);}
.subtab.showall{color:var(--accent); opacity:.85;}
.subtab.showall:hover{opacity:1;}

/* ---------- shared bits ---------- */
.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600;}
h1{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.005em;
   font-size:clamp(36px,10vw,54px); line-height:.94; margin:.1em 0 .12em;}
h1 .u{position:relative; display:inline-block;}
h1 .u::after{content:""; position:absolute; left:-2px; right:-2px; bottom:.07em; height:.13em; background:var(--accent-soft); border-radius:2px;}
.lede{color:var(--muted); font-size:15.5px; max-width:46ch; margin:.4em 0 0;}

.notesbtn{display:inline-flex; align-items:center; gap:6px; margin-top:12px; background:var(--card2);
  border:1px solid var(--edge); border-radius:99px; padding:8px 15px; font-family:var(--mono); font-size:12.5px;
  color:var(--muted); cursor:pointer;}
.notesbtn:hover{color:var(--ink); border-color:var(--accent-soft);}

.hubactions{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.hubactions .notesbtn{margin-top:0;}
.howto-answer{margin-top:16px; padding:16px 18px; background:var(--card); border:1px solid var(--edge);
  border-radius:11px; font-size:15px; line-height:1.6;}
.howto-answer:empty{display:none;}

.fboverlay{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:80;
  display:flex; align-items:flex-end; justify-content:center; padding:0;}
@media(min-width:640px){.fboverlay{align-items:center; padding:20px;}}
.fbcard{width:100%; max-width:520px; border-radius:16px 16px 0 0; margin:0;}
@media(min-width:640px){.fbcard{border-radius:14px;}}
.fbcard h3{font-family:var(--display); font-size:19px; margin-bottom:12px;}

.checklist{margin-top:26px;}
.clist{list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:8px;}
.citem{background:var(--card); border:1px solid var(--edge); border-left:3px solid var(--accent);
  border-radius:0 9px 9px 0; padding:11px 14px;}
.citem.term{border-left-color:var(--warn);}
.clab{display:block; font-weight:600; font-size:14.5px; margin-bottom:3px;}
.cdet{display:block; font-size:13px; color:var(--muted); line-height:1.5;}

.notepad-wrap{margin-top:30px;}
.notepad-area{width:100%; background:var(--card); border:1px solid var(--edge); border-radius:11px;
  padding:16px; font-family:var(--body); font-size:15.5px; line-height:1.6; color:var(--ink);
  resize:vertical; margin-top:12px;}
.notesaved{display:block; font-family:var(--mono); font-size:11.5px; color:var(--good); margin-top:8px; height:1.2em;}

.newterms{background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:10px;
  padding:13px 15px; font-size:14px; line-height:1.55; color:var(--ink); margin-top:16px;}
.newterms b{color:var(--warn);}
.fwarn{background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:10px;
  padding:12px 14px; font-size:13.5px; line-height:1.5; color:var(--ink); margin-top:14px;}

.searchbox{width:100%; background:var(--card); border:1px solid var(--edge); border-radius:11px;
  padding:14px 16px; font-family:var(--body); font-size:16px; color:var(--ink); margin-top:8px;
  -webkit-appearance:none;}
.searchbox:focus{outline:none; border-color:var(--accent);}
.searchresults{display:flex; flex-direction:column; gap:9px; margin-top:16px;}
.sresult{display:block; width:100%; text-align:left; background:var(--card); border:1px solid var(--edge);
  border-left:3px solid var(--sub, var(--accent)); border-radius:0 10px 10px 0; padding:12px 15px; cursor:pointer;}
.sresult:hover{border-color:var(--sub, var(--accent));}
.sr-top{display:flex; justify-content:space-between; gap:10px; margin-bottom:4px;}
.srkind{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--sub, var(--accent));}
.srsub{font-family:var(--mono); font-size:10.5px; color:var(--faint);}
.srlabel{font-weight:600; font-size:15px; margin-bottom:3px;}
.srsnip{font-size:13.5px; color:var(--muted); line-height:1.5;}

.dym{margin-top:10px; font-size:14.5px; color:var(--muted);}
.dymlabel{font-family:var(--mono); font-size:12px; color:var(--faint); margin-right:2px;}

.btn{font-family:var(--mono); font-weight:600; font-size:13.5px; letter-spacing:.04em; text-transform:uppercase;
  border-radius:10px; padding:14px 20px; cursor:pointer; border:1px solid var(--accent); width:100%;
  background:var(--accent); color:#fff;}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.3; cursor:default;}
.btn.ghost{background:transparent; color:var(--accent);}
.btn+.btn{margin-top:9px;}
.actions{margin-top:15px; display:flex; gap:10px;}
.actions .btn{width:auto; flex:1;}
.badge.review{background:var(--faint);}

/* ---------- hub ---------- */
.subjects{display:grid; gap:11px; margin-top:22px;}
.subject{display:block; width:100%; text-align:left; background:var(--card); border:1px solid var(--edge);
  border-left:5px solid var(--sub); border-radius:12px; padding:16px 16px; cursor:pointer; color:var(--ink);
  transition:border-color .15s, transform .1s;}
.subject:hover{border-color:var(--faint); border-left-color:var(--sub);}
.subject:active{transform:translateY(1px);}
.subject:focus-visible{outline:2px solid var(--sub); outline-offset:2px;}
.subject .row{display:flex; align-items:baseline; gap:10px;}
.subject h2{font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:20px; margin:0; letter-spacing:.02em;}
.subject .n{font-family:var(--mono); font-size:11.5px; color:var(--faint); margin-left:auto;}
.subject .stat{font-size:13.5px; color:var(--muted); margin-top:5px;}
.subject .stat b{color:var(--sub); font-weight:600;}
.subject .meter{height:4px; background:var(--edge); border-radius:99px; overflow:hidden; margin-top:9px;}
.subject .meter>i{display:block; height:100%; background:var(--sub); border-radius:99px;}

.hubfoot{margin-top:24px; border-top:1px solid var(--edge2); padding-top:16px;}
.hubfoot h3{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 9px;}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{font-family:var(--mono); font-size:11.5px; background:var(--bad-bg); border:1px solid var(--bad-line); color:var(--bad);
  border-radius:6px; padding:4px 9px;}
.chip.none{background:var(--good-bg); border-color:var(--good-line); color:var(--good);}

/* ---------- subject view ---------- */
.back{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  background:none; border:0; padding:6px 0; cursor:pointer; display:inline-flex; align-items:center; gap:6px;}
.back:hover{color:var(--accent);}

.routine{background:var(--card); border:1px solid var(--edge); border-radius:12px; padding:18px 18px 16px; margin:20px 0 14px;}
.routine h2{font-family:var(--display); text-transform:uppercase; font-weight:500; letter-spacing:.03em; font-size:18px; margin:0 0 12px;}
.routine ol{margin:0; padding:0; list-style:none; counter-reset:r; display:grid; gap:11px;}
.routine li{counter-increment:r; position:relative; padding-left:38px; font-size:14.5px; color:var(--muted);}
.routine li::before{content:counter(r); position:absolute; left:0; top:1px; width:24px; height:24px; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-family:var(--mono); font-weight:600; border-radius:6px; font-size:12px;}
.routine b{color:var(--ink); font-weight:600;}

.cheat{margin:8px 0 4px;}
.cheat>summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:9px; padding:14px 16px;
  background:var(--card); border:1px solid var(--edge); border-radius:12px; font-family:var(--mono); font-weight:600; font-size:13px;}
.cheat>summary::-webkit-details-marker{display:none;}
.cheat>summary .note{font-family:var(--body); font-weight:400; color:var(--faint);}
.cheat>summary .chev{margin-left:auto; transition:transform .2s; color:var(--accent);}
.cheat[open]>summary .chev{transform:rotate(90deg);}
.cuecard{background:var(--card); border:1px solid var(--edge); border-radius:12px; padding:2px 2px 8px; margin:10px 0;}
.cuecard h3{font-family:var(--display); text-transform:uppercase; font-weight:500; letter-spacing:.04em; font-size:14px; margin:12px 14px 4px; color:var(--accent-ink);}
.cuerow{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.05fr); gap:9px; align-items:center;
  padding:8px 14px; border-top:1px solid var(--edge2); font-size:13.5px;}
.cuerow:first-of-type{border-top:none;}
.cuerow .see{font-weight:600;}
.cuerow .see i{font-style:normal; background:var(--accent-soft); padding:1px 3px; border-radius:3px;}
.cuerow .arr{color:var(--accent); font-family:var(--mono);}
.cuerow .do{color:var(--muted);}

.quizhead{display:flex; align-items:baseline; justify-content:space-between; margin:24px 2px 9px;}
.quizhead h2{font-family:var(--display); text-transform:uppercase; font-weight:600; letter-spacing:.03em; font-size:22px; margin:0;}
.score{font-family:var(--mono); font-size:13px; color:var(--muted); border:1px solid var(--edge); background:var(--card); padding:3px 10px; border-radius:99px;}
.bar{height:5px; background:var(--edge); border-radius:99px; overflow:hidden; margin:0 2px 16px;}
.bar>i{display:block; height:100%; width:0; background:var(--accent); transition:width .35s ease;}

/* ---------- question card ---------- */
.card{background:var(--card); border:1px solid var(--edge); border-radius:14px; padding:18px 17px 16px;}
.qnum{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--faint); text-transform:uppercase;}
.badge{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:var(--accent); border-radius:4px; padding:2px 6px; margin-left:8px;}
.stem{font-size:18px; line-height:1.45; margin:12px 0 2px; font-weight:500;}
.stem mark{background-color:transparent; color:inherit;
  background-image:linear-gradient(var(--accent-soft),var(--accent-soft)); background-repeat:no-repeat;
  background-size:0% 44%; background-position:0 86%; padding:0 2px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
  animation:swipe .5s cubic-bezier(.4,.9,.3,1) forwards;}
@keyframes swipe{to{background-size:100% 44%;}}
.ask{font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin:15px 0 10px; color:var(--accent);}

.opts{display:grid; gap:9px;}
.opt{display:flex; gap:11px; align-items:center; width:100%; text-align:left; cursor:pointer; background:var(--card);
  border:1px solid var(--edge); border-radius:10px; padding:13px; font-size:15px; color:var(--ink);
  transition:border-color .15s, background .15s;}
.opt:hover{border-color:var(--faint);}
.opt:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.opt .key{flex:0 0 auto; width:24px; height:24px; border-radius:5px; background:var(--edge); color:var(--muted);
  font-family:var(--mono); font-weight:600; font-size:12px; display:grid; place-items:center;}
.opt .mk{flex:0 0 auto; width:18px; text-align:center; font-family:var(--mono); font-weight:600; opacity:0;}
.opt.correct{background:var(--good-bg); border-color:var(--good-line);}
.opt.correct .key{background:var(--good); color:#fff;}
.opt.correct .mk{opacity:1; color:var(--good);}
.opt.wrong{background:var(--bad-bg); border-color:var(--bad-line);}
.opt.wrong .key{background:var(--bad); color:#fff;}
.opt.wrong .mk{opacity:1; color:var(--bad);}
.opt.dim{opacity:.45;}
.opt[disabled]{cursor:default;}

.why{margin-top:13px; padding:13px 14px; border-radius:10px; background:var(--card2); border:1px solid var(--edge); font-size:14.5px; display:none;}
.why.show{display:block; animation:fade .25s ease;}
.why .lab{font-family:var(--mono); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:5px;}
.why.ok .lab{color:var(--good);}
.why.no .lab{color:var(--bad);}
.why .topic{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent-soft); padding:2px 7px; border-radius:4px; margin-top:9px;}
@keyframes fade{from{opacity:0; transform:translateY(4px);}to{opacity:1; transform:none;}}

/* ---------- summary ---------- */
.done h2{font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:26px; margin:0; text-align:center;}
.big{font-family:var(--display); font-size:56px; font-weight:600; line-height:1; color:var(--accent); text-align:center; margin:8px 0 0;}
.big small{font-size:22px; color:var(--faint);}
.msg{color:var(--muted); font-size:15px; margin:10px auto 0; max-width:38ch; text-align:center;}
.rev{margin-top:20px; border-top:1px solid var(--edge2); padding-top:16px;}
.rev h3{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 9px;}
.rev ul{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.rev li{display:flex; align-items:center; gap:9px; font-size:14px; background:var(--card); border:1px solid var(--edge2); border-radius:8px; padding:9px 11px;}
.rev li .n{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--bad); background:var(--bad-bg); border-radius:4px; padding:2px 6px;}
.rev .clean{font-size:14px; color:var(--good); background:var(--good-bg); border:1px solid var(--good-line); border-radius:8px; padding:10px 12px;}

.coach{margin-top:16px; border:1px solid var(--accent-soft); background:var(--card2); border-radius:12px; padding:15px;}
.coach h3{font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:16px; margin:0 0 6px; color:var(--accent-ink);}
.coach p{margin:0; font-size:14.5px;}
.coach .status{font-family:var(--mono); font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:8px;}
.dot{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:.25;}50%{opacity:1;}}
.coach.err{background:var(--bad-bg); border-color:var(--bad-line);}
.coach .note{font-size:13px; color:var(--muted); margin-top:6px;}

.paste label{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:block; margin:12px 0 6px;}
.paste textarea{width:100%; min-height:110px; font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--ink);
  background:var(--card); border:1px solid var(--edge); border-radius:9px; padding:11px; resize:vertical;}
.paste textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
.step{display:flex; gap:9px; align-items:flex-start; font-size:14px; margin:10px 0;}
.step .n{font-family:var(--mono); font-size:11px; font-weight:600; color:#fff; background:var(--accent);
  border-radius:4px; padding:2px 7px; flex:0 0 auto; margin-top:2px;}

.toast{position:fixed; left:50%; bottom:calc(18px + var(--safe-bot)); transform:translateX(-50%);
  background:var(--card2); border:1px solid var(--edge2); color:#fff; font-family:var(--mono); font-size:12.5px; padding:10px 16px; border-radius:99px;
  opacity:0; pointer-events:none; transition:opacity .25s; z-index:50;}
.toast.show{opacity:1;}

.foot{font-family:var(--mono); color:var(--faint); font-size:11.5px; text-align:center; margin:26px 8px 0; line-height:1.8;}
.foot a{color:var(--muted);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  .stem mark{background-size:100% 44%;}
}

/* ---------- word check ---------- */
.wordcta{background:var(--card); border:1px solid var(--edge); border-left:5px solid var(--accent);
  border-radius:12px; padding:16px 16px 14px; margin:14px 0 4px;}
.wc-head{display:flex; align-items:baseline; gap:10px;}
.wordcta h3{font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:17px; margin:0; letter-spacing:.02em;}
.wc-n{font-family:var(--mono); font-size:11px; color:var(--faint); margin-left:auto;}
.wordcta p{font-size:14px; color:var(--muted); margin:6px 0 12px;}
.wordcta p b{color:var(--ink);}
.wordcta .btn{padding:12px 18px;}

.term{font-family:var(--display); text-transform:uppercase; font-weight:600; letter-spacing:.02em;
  font-size:26px; line-height:1.1; margin:12px 0 2px; color:var(--accent-ink);}
.opt.unsure{background:transparent; border-style:dashed; color:var(--muted);}
.opt.unsure .key{background:transparent; border:1px solid var(--edge); color:var(--faint);}
.opt.unsure.wrong{background:var(--warn-bg); border-color:var(--warn-line); border-style:solid; color:var(--ink);}
.opt.unsure.wrong .key{background:var(--warn); color:#06101e; border:0;}
.opt.unsure.wrong .mk{color:var(--warn);}

.why .trap{margin-top:10px; padding-top:9px; border-top:1px solid var(--edge2);}
.why .trap span{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--bad); margin-bottom:3px;}
.why .topic+.topic{margin-left:5px;}
.chip.word{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn);}

/* ---------- word usage: tap a topic to see the word in the wild ---------- */
.usewhere{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin:12px 0 7px;}
.tags{display:flex; flex-wrap:wrap; gap:6px;}
.topic.tap{cursor:pointer; border:1px solid var(--accent-soft); background:var(--card2); color:var(--ink);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 9px; border-radius:5px; display:inline-flex; align-items:center; gap:5px; transition:background .15s;}
.topic.tap::after{content:"+"; font-weight:600; color:var(--accent-ink); opacity:.9;}
.topic.tap:hover{background:var(--accent-soft);}
.topic.tap:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.topic.tap.open{background:var(--accent); color:#fff; border-color:var(--accent);}
.topic.tap.open::after{content:"–";}
.usage{display:none;}
.usage.show{display:block; margin-top:10px; animation:fade .2s ease;}
.unote{margin:0 0 9px; font-size:14px;}
.unote.soft{color:var(--muted); font-size:13px;}
.uex{background:var(--card); border:1px solid var(--edge); border-radius:9px; padding:11px 12px;}
.ulab{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin-bottom:6px;}
.ustem{font-size:14.5px; font-weight:500; line-height:1.4;}
.ustem mark{background-color:transparent; background-image:linear-gradient(var(--accent-soft),var(--accent-soft));
  background-repeat:no-repeat; background-size:100% 44%; background-position:0 86%; padding:0 2px; animation:none;}
.umove{margin-top:9px; padding-top:8px; border-top:1px solid var(--edge2); font-size:13.5px; color:var(--muted);}
.umove span{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--good); margin-bottom:2px;}

/* ---------- word check v2: definition reveal ---------- */
.mixup{background:var(--bad-bg); border:1px solid var(--bad-line); border-radius:8px; padding:9px 11px;
  font-size:14px; margin-bottom:10px;}
.mean{font-size:15px; margin-bottom:11px;}
.illus{background:var(--card); border:1px solid var(--edge); border-radius:9px; padding:11px 12px;}
.ilab{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin-bottom:6px;}
.ishow{font-family:var(--mono); font-size:14px; background:var(--paper2); border-radius:6px; padding:8px 10px; margin-bottom:8px;}
.isays{font-size:14px; color:var(--muted); line-height:1.45;}
.why .trap{margin-top:11px;}
.mixrow{background:var(--bad-bg) !important; border-color:var(--bad-line) !important;}
.topic.flat{border:1px solid var(--edge); background:transparent; color:var(--muted);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 9px; border-radius:5px; display:inline-block;}

/* ---------- the review gate ---------- */
.review{margin-top:20px; border-top:1px solid var(--edge2); padding-top:16px;}
.review h3{font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:17px; margin:0 0 2px;}
.rsub{font-size:13.5px; color:var(--muted); margin:0 0 12px;}

.ritem{border:1px solid var(--edge); border-radius:10px; margin-bottom:8px; background:var(--card); overflow:hidden;}
.ritem.done{border-color:var(--good-line); background:var(--good-bg);}
.rhead{display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; background:none; border:0;
  padding:12px 13px; cursor:pointer; color:var(--ink); font:inherit;}
.rhead:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.rtick{flex:0 0 auto; width:19px; height:19px; border-radius:5px; border:1.5px solid var(--faint); margin-top:2px;}
.ritem.done .rtick{background:var(--good); border-color:var(--good); position:relative;}
.ritem.done .rtick::after{content:"✓"; color:#fff; font-size:12px; position:absolute; inset:0;
  display:grid; place-items:center; line-height:1;}
.rtext{flex:1; font-size:14.5px; line-height:1.4;}
.rkind{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); margin-bottom:3px;}
.rchev{flex:0 0 auto; color:var(--faint); transition:transform .2s; font-size:16px; margin-top:1px;}
.ritem.open .rchev{transform:rotate(90deg);}

.rbody{display:none; padding:0 13px 13px 42px;}
.ritem.open .rbody{display:block;}
.rbody p{margin:0 0 11px; font-size:14px; line-height:1.5;}
.rwrong,.rright{font-size:14px; border-radius:8px; padding:9px 11px; margin-bottom:7px;}
.rwrong{background:var(--bad-bg); border:1px solid var(--bad-line);}
.rright{background:var(--good-bg); border:1px solid var(--good-line);}
.rwrong span,.rright span{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:3px;}
.rwrong span{color:var(--bad);} .rright span{color:var(--good);}
.rack{margin-top:6px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  background:var(--accent); color:#fff; border:0; border-radius:8px; padding:9px 16px; cursor:pointer;}
.rack:disabled{background:var(--good); cursor:default;}

.rprog{font-family:var(--mono); font-size:12px; color:var(--muted); text-align:center; margin:0 0 10px;}

/* ---------- add-to-home-screen bar ---------- */
.installbar{position:fixed; left:12px; right:12px; bottom:12px; z-index:50;
  display:flex; align-items:center; gap:10px; background:var(--card2); border:1px solid var(--edge2); color:#fff;
  border-radius:12px; padding:10px 12px; box-shadow:0 6px 24px rgba(0,0,0,.45);
  max-width:616px; margin:0 auto;}
.installbar .btn{flex:1; width:auto; margin:0; background:var(--accent); border-color:var(--accent);}
.installbar.ios{font-size:13.5px; line-height:1.45; padding:12px 14px;}
.installbar.ios b{color:#fff;}
.installx{flex:0 0 auto; background:transparent; border:0; color:#fff; opacity:.6;
  font-size:15px; cursor:pointer; padding:6px 8px; line-height:1;}
.installx:hover{opacity:1;}
@supports (padding: max(0px)){ .installbar{bottom:max(12px, env(safe-area-inset-bottom));} }

/* ---------- intake ---------- */
.ihead{margin-bottom:14px;}
.ibar{height:4px; background:var(--edge); border-radius:99px; overflow:hidden; margin-top:8px;}
.ibar>i{display:block; height:100%; background:var(--accent); transition:width .3s;}
.iq{font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:22px; line-height:1.15; margin:0 0 6px;}
.isub{color:var(--muted); font-size:14px; margin:0 0 14px;}
.itest{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink);
  background:var(--accent-soft); border-radius:6px; padding:7px 9px; margin-bottom:14px;}
.iopt{display:block;}
.inote{display:block; font-size:12.5px; color:var(--muted); margin-top:2px;}
.opt.on{background:var(--accent-soft); border-color:var(--accent);}

/* ---------- worked example (experiment arm) ---------- */
.worked{margin-top:12px; padding-top:11px; border-top:1px dashed var(--edge);}
.wlab{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin-bottom:7px;}
.wstem{font-size:14px; font-weight:500; line-height:1.4; margin-bottom:8px;}
.wstem mark{background-image:linear-gradient(var(--accent-soft),var(--accent-soft)); background-repeat:no-repeat;
  background-size:100% 44%; background-position:0 86%; padding:0 2px; animation:none;}
.wmove{font-size:13.5px; color:var(--ink);}
.wmove span{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--good); margin-bottom:2px;}
.wwhy{font-size:13px; color:var(--muted); margin-top:6px;}

/* ---------- findings ---------- */
.finding{margin-bottom:12px;}
.fhead{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:9px;}
.flab{font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:16px;}
.fpill{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:99px; flex:0 0 auto;}
.fpill.wait{background:var(--edge2); color:var(--muted);}
.fpill.null{background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-line);}
.fpill.win{background:var(--good-bg); color:var(--good); border:1px solid var(--good-line);}
.fclaim{font-size:14px; color:var(--muted); margin:0 0 10px;}
.fbar{height:5px; background:var(--edge); border-radius:99px; overflow:hidden; margin-bottom:9px;}
.fbar>i{display:block; height:100%; background:var(--accent);}
.frow{display:flex; align-items:center; gap:10px; font-size:14.5px; padding:8px 0; border-bottom:1px solid var(--edge2);}
.frow span:first-child{flex:1;}
.fnum{font-family:var(--mono); font-weight:600; font-size:15px;}
.fnum.over{color:var(--bad);} .fnum.under{color:var(--accent);}
.fn{font-family:var(--mono); font-size:11px; color:var(--faint);}
.fmsg{font-size:14px; margin:10px 0 0; line-height:1.5;}
.fverdict{margin-top:11px; padding:10px 12px; border-radius:9px; font-size:14px;}
.fverdict.right{background:var(--good-bg); border:1px solid var(--good-line);}
.fverdict.wrong{background:var(--bad-bg); border:1px solid var(--bad-line);}
.fverdict.flat{background:var(--warn-bg); border:1px solid var(--warn-line);}
.findlink{display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:14px;
  background:var(--card); border:1px solid var(--accent-soft); border-radius:12px; padding:15px 16px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent-ink); cursor:pointer;}
.findlink:hover{background:var(--accent-soft);}
.findlink .chev{font-size:17px; opacity:.6;}
.fpill.lean{background:var(--accent-soft); color:var(--accent-ink);}
.frange{font-family:var(--mono); font-size:12px; color:var(--muted); margin:8px 0 0; line-height:1.5;}
.challenge{border-left:3px solid var(--accent); padding-left:14px;}
.clab{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px;}
.cask{font-size:15.5px; margin:8px 0 0; line-height:1.5;}
.cwhy{font-size:13.5px; color:var(--muted); margin:10px 0 0; line-height:1.5;}

/* ---------- essay workbench ---------- */
.essaylink{border-color:var(--edge); color:var(--ink);}
.elab{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin:14px 0 5px;}
.elab.hot{color:var(--accent); font-weight:600;}
.etext{width:100%; border:1px solid var(--edge); border-radius:9px; padding:10px 11px; font:inherit;
  font-size:15px; line-height:1.5; background:var(--card); resize:vertical; margin-bottom:16px; color:var(--ink);}
.etext:focus{outline:none; border-color:var(--accent);}

.gradepick{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.gradebtn{font-family:var(--mono); font-size:13px; padding:9px 15px; border-radius:8px; border:1px solid var(--edge);
  background:var(--card2); color:var(--muted); cursor:pointer;}
.gradebtn.on{background:var(--accent); color:#fff; border-color:var(--accent);}

.accordion{margin-top:6px;}
.grade-sec{border:1px solid var(--edge); border-radius:10px; margin-bottom:9px; overflow:hidden;}
.grade-head{display:flex; align-items:center; justify-content:space-between; padding:13px 16px; cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:14.5px; background:var(--card2);}
.grade-head .cnt{font-family:var(--mono); font-size:11px; color:var(--faint); font-weight:400;}
.grade-body{display:none; padding:4px 16px 12px;}
.grade-sec.open .grade-body{display:block;}
.course-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--edge2);}
.course-row:first-child{border-top:0;}
.course-row input[type=checkbox]{width:17px; height:17px; flex:0 0 auto;}
.course-row label{margin:0; font-weight:500; font-size:14px; cursor:pointer;}
.cnt-inline{font-family:var(--mono); font-size:11px; color:var(--muted); font-weight:400;}
.eprompt{background:var(--paper2); border-left:3px solid var(--edge); padding:11px 13px; border-radius:0 8px 8px 0;
  font-size:14.5px; line-height:1.55; margin-bottom:4px;}
.ecalm{background:var(--accent-soft); border-radius:10px; padding:16px; font-size:15px; line-height:1.6;}
.eblock{flex:1; font-size:13px; color:var(--bad); margin:0; line-height:1.45;}
.rubric-analysis{background:var(--paper2); border-left:3px solid var(--edge); padding:16px 18px;
  border-radius:0 8px 8px 0; font-size:14.5px; line-height:1.65; margin-top:8px;}
.ehint{font-size:13px; color:var(--muted); line-height:1.5; margin:8px 0 0;}
.ewarn{background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:9px; padding:12px;
  font-size:14px; line-height:1.55; margin-bottom:10px;}
.edraft{background:var(--paper2); border-radius:8px; padding:10px 12px; font-size:14px; margin:12px 0;}
.edraft span{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); margin-bottom:3px;}

.cap{border:1px solid var(--edge); border-left:3px solid var(--edge); border-radius:9px; padding:12px; margin-bottom:10px;}
.cap.ok{border-left-color:var(--good);}
.capcol label{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--faint); margin:8px 0 3px;}
.capcol textarea{width:100%; border:1px solid var(--edge); border-radius:7px; padding:8px 9px;
  font:inherit; font-size:14px; line-height:1.45; resize:vertical;}
.capdel{background:none; border:0; color:var(--faint); font-size:12px; cursor:pointer; margin-top:8px; padding:4px 0;}
.capdel:hover{color:var(--bad);}
.ediscard{font-size:13px; color:var(--good); margin-top:8px;}
.btn.ghost{background:var(--card); color:var(--ink); border:1px dashed var(--edge);}

.pile{border:1px solid var(--edge); border-radius:9px; padding:11px; margin-bottom:9px;}
.pname{width:100%; border:0; border-bottom:1px solid var(--edge); padding:4px 0 6px; font:inherit;
  font-weight:600; font-size:15px; margin-bottom:8px;}
.pname:focus{outline:none; border-color:var(--accent);}
.chip{display:inline-block; background:var(--accent-soft); color:var(--accent-ink); border-radius:6px;
  padding:5px 9px; font-size:13px; margin:0 5px 5px 0; cursor:pointer; line-height:1.35;}
.loose{margin-top:12px; padding-top:11px; border-top:1px dashed var(--edge);}
.loose h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint); margin:0 0 7px; font-weight:400;}
.loosechip{background:var(--warn-bg); color:var(--warn);}

.skel{border:1px solid var(--edge); border-radius:10px; padding:13px; margin-bottom:12px;}
.skel h4{font-family:var(--display); text-transform:uppercase; font-size:14px; margin:0 0 8px;}
.skelev{margin-bottom:4px;}
.skelplan{background:var(--paper2); border-radius:8px; padding:10px; margin-bottom:10px;}
.skelplan div{font-size:13.5px; line-height:1.45; margin-bottom:6px;}
.skelplan span{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint);}

.ratio{margin:14px 0;}
.rbar{height:12px; background:var(--bad-bg); border-radius:99px; overflow:hidden;}
.rbar>i{display:block; height:100%; background:var(--good);}
.rlab{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11.5px;
  color:var(--muted); margin-top:6px;}
.audit{display:flex; gap:9px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--edge2);
  font-size:14px; line-height:1.5;}
.amark{flex:0 0 auto; font-weight:700;}
.audit.pass .amark{color:var(--good);}
.audit.fail .amark{color:var(--bad);}

/* ---------- diagnostic: exam paper, not an app ---------- */
.diaglink{border-color:var(--bad-line); color:var(--bad);}
.dmast{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  border-bottom:2px solid var(--ink); padding-bottom:9px; margin-bottom:10px;}
.dcourse{font-family:var(--mono); font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  font-size:11px; color:var(--ink);}
.dno{font-family:var(--mono); font-size:10px; color:var(--faint); letter-spacing:.05em;}
.dtitle{font-family:var(--display); text-transform:uppercase; font-size:22px; line-height:1.15;
  margin:0 0 4px; font-weight:600;}
.dcond{border:1px solid var(--edge); border-left:3px solid var(--bad); padding:13px 15px; margin-top:16px;}
.dcond h3{font-family:var(--mono); text-transform:uppercase; letter-spacing:.09em; font-size:10.5px;
  color:var(--bad); margin:0 0 8px; font-weight:600;}
.dcond ul{margin:0; padding-left:17px; font-size:14.5px; line-height:1.6;}
.dcond li{margin-bottom:4px;}

.dpaper{background:#fffefb; --ink:#161c22; --muted:#69737c; --faint:#98a1a9; --edge:#e3e7e3; --edge2:#eef1ee; --card2:#161c22; color:var(--ink);}
.dstory{margin-top:14px;}
.dline{display:grid; grid-template-columns:26px 1fr; column-gap:11px; align-items:baseline; margin-bottom:.95em;}
.dline .dn{font-family:var(--mono); font-size:10px; color:#b9b4ab; text-align:right; padding-top:.5em;}
.dline p{margin:0; font-size:16.5px; line-height:1.62;}
.dline em{font-style:italic;}
.dsect{font-family:var(--mono); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  font-size:10.5px; color:var(--accent); margin:22px 0 11px; padding-left:37px;}

.dprompt{border:1px solid var(--accent); padding:15px 16px; background:var(--accent-soft);}
.dlead{margin:0 0 10px; font-size:15px; line-height:1.55;}
.dtask{margin:0 0 10px; font-size:16px; line-height:1.5;}
.dnote{margin:0; font-size:13.5px; font-style:italic; color:var(--muted);}
.dpromptmini{font-size:14.5px; line-height:1.5; padding:11px 13px; background:var(--paper2);
  border-radius:8px; margin:0 0 14px;}

.dclock{position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
  background:var(--card2); border:1px solid var(--edge2); color:#fff; border-radius:10px; padding:9px 13px; margin-bottom:12px;}
.dtime{font-family:var(--mono); font-size:19px; font-weight:600; letter-spacing:.04em;}
.dtime.low{color:#ffb4a2;}
.dtime.over{color:#ff6b6b;}
.dref{background:rgba(255,255,255,.14); border:0; color:#fff; border-radius:7px; padding:6px 12px;
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; cursor:pointer;}
.dscratch{margin-bottom:12px;}
.dscratch summary{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--faint); cursor:pointer; padding:6px 0;}
.dessay{min-height:340px; font-size:16px; line-height:1.7;}
.dcount{font-family:var(--mono); font-size:11px; color:var(--faint); text-align:right; margin-top:6px;}

.dmodal{position:fixed; inset:0; background:rgba(20,23,26,.55); z-index:60; overflow-y:auto; padding:16px;}
.dmodalin{max-width:640px; margin:0 auto; background:#fffefb; border-radius:12px; padding:18px;
  --ink:#161c22; --muted:#69737c; --faint:#98a1a9; --edge:#e3e7e3; --edge2:#eef1ee; color:var(--ink);}
.dclose{background:var(--ink); color:#fff; border:0; border-radius:7px; padding:8px 14px;
  font-family:var(--mono); font-size:11px; text-transform:uppercase; cursor:pointer; margin-bottom:12px;}

/* ---------- accounts ---------- */
.joincode{font-family:var(--mono); font-size:38px; font-weight:600; letter-spacing:.14em;
  text-align:center; padding:20px; background:var(--accent-soft); color:var(--accent-ink);
  border-radius:12px; margin:14px 0;}
.joininput{font-family:var(--mono); font-size:28px; letter-spacing:.2em; text-align:center;
  text-transform:uppercase; padding:14px;}
.jc{font-family:var(--mono); letter-spacing:.08em;}
.claimnote{background:var(--good-bg); border:1px solid var(--good-line); border-radius:9px;
  padding:12px 14px; font-size:14px; color:var(--ink); text-align:left; margin-top:14px;}
.contract{text-align:left; margin-top:6px;}
.contract h3{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  margin:14px 0 7px; font-weight:600;}
.contract ul{margin:0; padding-left:18px; font-size:14.5px; line-height:1.6;}
.contract .see li{color:var(--ink);}
.contract .nosee li{color:var(--good);}
.cfoot{font-size:14px; line-height:1.55; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--edge2); color:var(--muted);}

/* ---------- watch how (video) ---------- */
.watchhowrow{margin-top:12px;}
.watchhow{font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--accent-ink);
  background:var(--accent-soft); border-radius:99px; padding:7px 13px; display:inline-block; text-decoration:none;}
.watchhow:hover{filter:brightness(1.1);}

/* ---------- flag a question ---------- */
.flagrow{margin-top:12px;}
.flaglink{background:none; border:0; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--faint); cursor:pointer; padding:4px 0; text-decoration:underline; text-underline-offset:2px;}
.flaglink:hover{color:var(--muted);}
.flagpicker{display:flex; flex-wrap:wrap; gap:7px; margin-top:9px;}
.flagchip{font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--muted);
  background:var(--card2); border:1px solid var(--edge); border-radius:99px; padding:6px 12px; cursor:pointer;}
.flagchip:hover{border-color:var(--bad); color:var(--ink);}
.flagdone{font-family:var(--mono); font-size:11.5px; color:var(--good); margin-top:9px;}
.card.daily{border-left:3px solid var(--accent);}
.dailyhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.dailylab{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.dailyskip{background:none;border:0;font-family:var(--mono);font-size:11px;color:var(--faint);
  cursor:pointer;padding:4px 0;letter-spacing:.04em;}
.dailyskip:hover{color:var(--ink);}