/* ============================================================
   Strang 6e Mastery
   Monochrome. Zinc scale on #111. Colour only where it carries
   meaning: green = correct, red = wrong. Nothing else competes
   with the mathematics.
   ============================================================ */

:root{
  /* surfaces — layered opacities over #111, never opaque grey */
  --bg:#111111;
  --bg-deep:#0b0b0c;
  --panel:rgba(24,24,27,.60);      /* zinc-900/60 */
  --panel-quiet:rgba(24,24,27,.45);
  --panel-solid:#18181b;
  --inset:rgba(39,39,42,.50);      /* zinc-800/50 */
  --line:rgba(39,39,42,.50);       /* zinc-800/50 */
  --line-soft:rgba(39,39,42,.32);
  --line-strong:rgba(63,63,70,.60);

  /* type — zinc ramp */
  --text:#f4f4f5;                  /* zinc-100 */
  --text-2:#e4e4e7;                /* zinc-200 */
  --dim:#a1a1aa;                   /* zinc-400 */
  --dim2:#71717a;                  /* zinc-500 */
  --hint:#52525b;                  /* zinc-600 */
  --ghost:#3f3f46;                 /* zinc-700 */

  /* meaning only */
  --ok:#34d399;                    /* emerald-400 */
  --ok-bg:rgba(16,185,129,.10);
  --ok-line:rgba(16,185,129,.30);
  --bad:#f87171;                   /* red-400 */
  --bad-bg:rgba(239,68,68,.09);
  --bad-line:rgba(239,68,68,.28);
  --amber:#fbbf24;                 /* used sparingly: "due for review" */
  --amber-bg:rgba(245,158,11,.09);
  --amber-line:rgba(245,158,11,.24);

  --r-lg:16px;
  --r:12px;
  --r-sm:9px;

  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,monospace;

  /* 640px at 17.5px gives ~68 characters per line — the range readability
     research consistently finds best. 720px at 16px was 90, which reads as a wall. */
  --read:640px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font:15.5px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--text-2);text-decoration:none;transition:color .14s}
a:hover{color:#fff}
::selection{background:rgba(244,244,245,.18)}

/* ---------- backdrop: one hairline, no ornament ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none}
.ambient>*{display:none}
.ambient::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(255,255,255,.045), transparent 65%),
    radial-gradient(ellipse 120% 90% at 50% 110%, rgba(255,255,255,.018), transparent 70%);
}

/* ---------- top bar ---------- */
.bar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;
  padding:11px 24px;
  background:rgba(17,17,17,.82);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.grow{flex:1}

.brand{display:flex;align-items:center;gap:11px;color:var(--text)}
.brand:hover{color:#fff}
.emblem{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto}
.emblem svg{width:30px;height:30px}
.wordmark{display:flex;flex-direction:column;line-height:1.1}
.wordmark b{
  font:600 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--text);
}
.wordmark i{
  font:400 10px/1 var(--sans);letter-spacing:.1em;color:var(--hint);font-style:normal;margin-top:4px;
}

.nav{display:flex;gap:2px;margin-left:10px}
.nav a{
  display:flex;align-items:center;gap:7px;color:var(--dim2);
  padding:7px 12px;border-radius:var(--r-sm);
  font:500 13px/1 var(--sans);transition:all .14s;white-space:nowrap;
}
.nav a:hover{color:var(--text-2);background:rgba(255,255,255,.05)}
.nav a.on{color:var(--text);background:rgba(255,255,255,.08)}
.nav a.on .ic,.nav a.on .nvi{opacity:1}

.hud{display:flex;gap:7px;align-items:center}
.hud-chip{
  display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:rgba(255,255,255,.025);
  font:500 12.5px/1 var(--sans);color:var(--dim2);
  font-variant-numeric:tabular-nums;
}
.hud-chip b{color:var(--text-2);font-weight:600}
.hud-chip.cta{
  background:#f4f4f5;border-color:#f4f4f5;color:#09090b;
}
.hud-chip.cta b,.hud-chip.cta .ic,.hud-chip.cta .nvi{color:#09090b}
.hud-chip.cta:hover{background:#fff;border-color:#fff}

/* course switcher: collapses to a label with one course, a select with several */
.course-picker{
  display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:rgba(255,255,255,.025);color:var(--dim2);
}
.course-picker:hover{border-color:var(--line-strong);color:var(--text-2)}
.course-picker select{
  appearance:none;background:transparent;border:0;outline:none;
  color:var(--text-2);font:500 12.5px/1 var(--sans);cursor:pointer;
  padding-right:14px;
  background-image:linear-gradient(45deg,transparent 50%,var(--hint) 50%),
                   linear-gradient(135deg,var(--hint) 50%,transparent 50%);
  background-position:calc(100% - 6px) 55%, calc(100% - 2px) 55%;
  background-size:4px 4px, 4px 4px;
  background-repeat:no-repeat;
}
.course-picker select option{background:#18181b;color:var(--text)}

@media(max-width:960px){
  .bar{flex-wrap:wrap;gap:9px;padding:10px 15px}
  .nav{order:3;width:100%;margin:0;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .hud{order:2;margin-left:auto}
  .wordmark i{display:none}
}

/* ---------- page shells ---------- */
.page{position:relative;z-index:1;padding:34px 22px 110px}
.wrap{max-width:1000px;margin:0 auto}
.read{max-width:var(--read);margin:0 auto}          /* centered reading column */
.read-wide{max-width:780px;margin:0 auto}

/* ---------- type ---------- */
h1{font:600 30px/1.22 var(--serif);letter-spacing:-.015em;margin:0 0 8px;color:var(--text)}
h2{
  font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim2);margin:38px 0 14px;
  padding-bottom:9px;border-bottom:1px solid var(--line);
}
h3{font:600 15.5px/1.45 var(--sans);margin:20px 0 7px;color:var(--text)}
p{margin:0 0 13px}
.sub{color:var(--dim);font-size:15px;margin:0 0 24px;max-width:68ch;line-height:1.62}
.dim{color:var(--dim)}
.dim2{color:var(--dim2)}
.small{font-size:12.5px}
.eyebrow{
  font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--hint);margin:0 0 10px;
}

/* ---------- cards ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px;
}
.card.tight{padding:8px 10px}
.card.quiet{background:var(--panel-quiet)}
.row{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:880px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
button,.btn{
  font:500 13px/1 var(--sans);cursor:pointer;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.045);color:var(--text-2);
  padding:10px 15px;border-radius:var(--r-sm);transition:all .14s;
  display:inline-flex;align-items:center;gap:7px;
  font-variant-numeric:tabular-nums;
}
button:hover,.btn:hover{background:rgba(255,255,255,.1);color:#fff;border-color:var(--line-strong)}
button:active,.btn:active{transform:scale(.98)}
button.primary{
  background:#f4f4f5;color:#09090b;border-color:#f4f4f5;font-weight:600;
}
button.primary:hover{background:#fff;color:#09090b;border-color:#fff}
button.ghost{background:transparent;border-color:var(--line)}
button.ghost:hover{background:rgba(255,255,255,.05)}
button:disabled{opacity:.3;cursor:not-allowed;transform:none!important}
button .ic,.btn .ic{width:14px;height:14px;flex:0 0 auto}
.icon-btn{padding:0;width:32px;height:32px;justify-content:center;border-radius:var(--r-sm)}
.link-btn{
  background:none;border:0;padding:4px 2px;color:var(--hint);
  font:500 12px/1 var(--sans);cursor:pointer;
}
.link-btn:hover{color:var(--text-2);background:none;transform:none}

/* ---------- icons ---------- */
.ic{width:16px;height:16px;display:inline-block;vertical-align:-.16em;flex:0 0 auto;opacity:.9}
.nvi{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 auto;opacity:.85}
.nvi>svg,.nvi>.ic{width:100%;height:100%;display:block}
.blk-t .nvi{width:14px;height:14px;opacity:.7}
.qex summary .nvi{width:14px;height:14px;opacity:.7}
.fb h3 .nvi{width:16px;height:16px;opacity:1}
.empty .nvi{width:30px;height:30px;opacity:.35;margin-bottom:12px}
.modal-bar .nvi{width:15px;height:15px;color:var(--dim)}
button .ic,.hud-chip .ic,.hud-chip .nvi{width:14px;height:14px}
.nav a .ic,.nav a .nvi{width:14px;height:14px;opacity:.7}

/* ---------- pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font:500 10px/1.6 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--hint);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.pill.new{color:var(--hint)}
.pill.seen{color:var(--dim);border-color:var(--line-strong)}
.pill.solid{color:var(--text-2);border-color:rgba(244,244,245,.28);background:rgba(244,244,245,.07)}
.pill.forged{color:#09090b;background:#e4e4e7;border-color:#e4e4e7;font-weight:600}
.pill.weak{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}

/* ---------- meters ---------- */
.meter{height:4px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;display:flex}
.meter i{display:block;height:100%;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.meter .ok{background:#d4d4d8}
.meter .mid{background:#a1a1aa}
.meter .low{background:#71717a}

.stat{font:600 27px/1 var(--serif);color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat small{
  display:block;font:400 10.5px/1.45 var(--sans);color:var(--hint);
  margin-top:9px;letter-spacing:.09em;text-transform:uppercase;
}

/* ---------- hero ---------- */
.hero{
  text-align:center;padding:40px 24px 36px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);
}
.hero .lion{width:52px;height:52px;margin:0 auto 16px;color:var(--ghost)}
.hero h1{font-size:33px;margin-bottom:10px}
.hero p{color:var(--dim);max-width:54ch;margin:0 auto 22px;font-size:15px;line-height:1.68}
.hero .row{justify-content:center}

/* ---------- section rows ---------- */
.sec{
  display:grid;grid-template-columns:58px 1fr auto;gap:13px;align-items:center;
  padding:11px 10px;border-radius:var(--r-sm);transition:background .12s;
}
.sec:hover{background:rgba(255,255,255,.03)}
.sec+.sec{border-top:1px solid var(--line-soft)}
.sec .num{font:500 12px/1 var(--mono);color:var(--hint);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.sec .ttl{font:500 14.5px/1.42 var(--sans);color:var(--text-2)}
.sec .ttl small{display:block;font:400 11.5px/1.5 var(--sans);color:var(--hint);margin-top:2px}
.sec .acts{display:flex;gap:5px;align-items:center}
.sec .acts button{padding:7px 11px;font-size:12px}

/* ============================================================
   LESSON — the reading column
   ============================================================ */
.lesson-head{text-align:center;margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.lesson-head .kicker{
  font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--hint);margin-bottom:13px;
}
.lesson-head h1{font-size:31px;line-height:1.25}
.lesson-head .cite{font:400 12px/1.7 var(--sans);color:var(--hint);margin-top:11px}
.lesson-head .cite a{border-bottom:1px solid var(--line-strong);color:var(--dim)}
.lesson-head .cite a:hover{color:var(--text)}

.lesson-body{font-size:17.5px;line-height:1.82;color:var(--text-2);letter-spacing:.003em}
.lesson-body p{margin:0 0 1.15em}
.lesson-body h2{
  font:600 19.5px/1.35 var(--serif);letter-spacing:-.005em;text-transform:none;
  color:var(--text);margin:52px 0 16px;padding-bottom:11px;border-bottom:1px solid var(--line);
}
.lesson-body h3{font:600 15.5px/1.45 var(--sans);color:var(--text);margin:32px 0 10px}
.lesson-body .h2ref{
  font:400 10.5px/1.4 var(--sans);color:var(--hint);
  letter-spacing:.06em;margin:-8px 0 20px;
}
.lesson-body .h2ref a{color:var(--dim2);border-bottom:1px solid var(--line)}
.lesson-body .h2ref a:hover{color:var(--text)}
.lesson-body h4{
  font:600 10.5px/1.4 var(--sans);color:var(--hint);text-transform:uppercase;
  letter-spacing:.13em;margin:24px 0 9px;
}
.lesson-body ul,.lesson-body ol{padding-left:23px;margin:0 0 1.15em}
.lesson-body li{margin:9px 0;line-height:1.78}
.lesson-body li::marker{color:var(--hint)}
.lesson-body strong{color:#fff;font-weight:600}
.lesson-body em{color:var(--text);font-style:italic}
.lesson-body code{
  font:500 13.5px/1 var(--mono);background:rgba(255,255,255,.08);
  padding:2px 6px;border-radius:5px;color:var(--text-2);
}
.lesson-body pre{
  background:rgba(0,0,0,.4);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:15px 17px;overflow-x:auto;margin:1.2em 0;
}
.lesson-body pre code{background:none;padding:0}
.lesson-body blockquote{
  margin:1.4em 0;padding:4px 0 4px 18px;
  border-left:2px solid var(--line-strong);color:var(--dim);
}
.lesson-body hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.lesson-body table{
  border-collapse:collapse;margin:1.4em 0;width:100%;font-size:14.5px;
}
.lesson-body th,.lesson-body td{
  border:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top;
  line-height:1.6;
}
.lesson-body th{
  background:rgba(255,255,255,.04);font-weight:600;color:var(--text);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
/* Inline math with subscripts and superscripts (x_p, A^{-1}, a_{ij}) has a taller
   natural line box than plain text, so lines containing it look squashed against
   the ones above and below. Giving inline KaTeX a little vertical padding opens
   the whole paragraph up. */
.lesson-body .katex,
.qprompt .katex,
.fb .solve .katex,
.qex-b .katex{padding:.12em 0}

/* Display math is the thing people actually stop and read. Give it air on both
   sides so it never crowds the prose above or below. */
.lesson-body .katex-display{margin:1.5em 0;padding:.35em 0}
.lesson-body .katex{font-size:1.06em}

/* The under-brace label on a big formula renders very small; keep it legible. */
.lesson-body .katex .vlist-t2 .mord,
.lesson-body .katex .tag{font-size:1em}

/* teaching blocks — differentiated by rule and label, not by colour */
.blk{
  border-radius:var(--r);padding:20px 22px 18px;margin:30px 0;
  border:1px solid var(--line);background:rgba(255,255,255,.022);
}
.blk .blk-t{
  display:flex;align-items:center;gap:8px;
  font:600 10px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--hint);margin-bottom:14px;
}
.blk p{margin:0 0 .95em}
.blk p:last-child,.blk ul:last-child,.blk ol:last-child{margin-bottom:0}
.blk .katex-display{margin:1.3em 0}

/* the idea: lifted out with a white rule */
.blk.idea{
  background:rgba(255,255,255,.045);
  border-color:var(--line-strong);
  border-left:2px solid #d4d4d8;
  font-size:16.5px;line-height:1.72;
}
.blk.idea .blk-t{color:var(--dim)}

/* why it is true: recessed, like a proof margin */
.blk.why{background:rgba(0,0,0,.22);border-color:var(--line-soft)}
.blk.why .blk-t{color:var(--dim2)}

/* how to do it: numbered steps */
.blk.do{background:rgba(255,255,255,.035);border-color:var(--line-strong)}
.blk.do .blk-t{color:var(--dim)}

/* worked example: the cleanest surface — this is what you study */
.blk.ex{
  background:var(--panel-solid);
  border-color:var(--line-strong);
  box-shadow:var(--shadow);
}
.blk.ex .blk-t{color:var(--text-2)}

/* mistakes: greyscale like everything else — the label carries the warning,
   and colour is reserved for marking the student's own right/wrong answers */
.blk.trap{border-left:2px solid var(--hint);background:rgba(255,255,255,.03);border-color:var(--line)}
.blk.trap .blk-t{color:var(--dim2)}

/* exam weapon: solid label inverted */
.blk.exam{border-left:2px solid var(--ghost);background:rgba(255,255,255,.05)}
.blk.exam .blk-t{color:var(--text-2)}

.blk.check{background:transparent;border-style:dashed;border-color:var(--line-strong)}
.blk.check .blk-t{color:var(--dim2)}

/* A matrix that follows a line break should sit on its own line, not float
   mid-sentence beside the prose. */
.lesson-body .katex:has(mtable){display:inline-block}
.lesson-body br + .katex{display:inline-block;margin-top:.15em}

/* Sentence breaks inside lesson prose need real vertical room, otherwise the
   paragraph still reads as a solid block. */
.lesson-body p br,
.lesson-body li br{display:block;content:"";margin-top:.42em}

/* numbered steps */
.steps{counter-reset:st;margin:16px 0 0;padding:0;list-style:none}
.steps li{
  counter-increment:st;position:relative;padding-left:38px;margin:0 0 18px;line-height:1.78;
}
.steps li::before{
  content:counter(st);position:absolute;left:0;top:3px;width:23px;height:23px;
  display:grid;place-items:center;border-radius:6px;
  background:rgba(255,255,255,.08);border:1px solid var(--line-strong);
  color:var(--text-2);font:600 11px/1 var(--mono);
}
.steps li:last-child{margin-bottom:0}
.steps li .katex-display{margin:1.1em 0}

/* reveal */
details.reveal{margin:14px 0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
details.reveal>summary{
  cursor:pointer;padding:10px 14px;background:rgba(255,255,255,.035);
  font:500 12.5px/1 var(--sans);color:var(--dim);list-style:none;
  display:flex;align-items:center;gap:8px;
}
details.reveal>summary::-webkit-details-marker{display:none}
details.reveal>summary::before{content:"▸";color:var(--hint);transition:transform .14s}
details.reveal[open]>summary::before{transform:rotate(90deg)}
details.reveal>summary:hover{color:var(--text-2)}
details.reveal .rv{padding:14px 16px;background:rgba(0,0,0,.18);border-top:1px solid var(--line)}

.lesson-foot{
  margin:52px auto 0;max-width:var(--read);text-align:center;
  padding-top:28px;border-top:1px solid var(--line);
}
.lesson-foot .row{justify-content:center}

.rprog{
  position:fixed;top:0;left:0;height:2px;z-index:60;
  background:#e4e4e7;width:0;transition:width .1s linear;
}

/* ============================================================
   ARENA
   ============================================================ */
.arena{max-width:800px;margin:0 auto}
.ahead{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;
  font:400 12px/1.4 var(--sans);color:var(--hint);gap:14px;
}
.ahead .lhs{display:flex;align-items:center;gap:9px;min-width:0}
.ahead .tag{color:var(--dim);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ahead .dotline{width:1px;height:12px;background:var(--line-strong);flex:0 0 auto}

.qcard{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;
  background:var(--panel);
}
.qprompt{font-size:17px;line-height:1.72;margin:0 0 20px;color:var(--text);overflow-x:auto}
.qprompt .katex-display{margin:14px 0}
/* Matrices make a line several times taller than prose. The <br> breaks inserted
   by breakSentences()/breakBeforeMatrices() need real vertical room, otherwise the
   prose reads as one dense block against the matrix brackets.
   `content:""` + display:block on a <br> produces a genuine line box. */
.qprompt br,
.opt .ov br,
.qex-b br,
.fb .solve br,
.fb .diag br,
.fb .trick br{
  display:block;
  content:"";
  margin-top:.55em;
}
/* A matrix starting a new line should hug that line, not float mid-sentence. */
.qprompt br + .katex,
.qex-b br + .katex,
.fb .solve br + .katex{ display:inline-block; }
.qprompt p, .qex-b p{ margin:0 0 .35em }

.opts{display:grid;gap:8px}
.opt{
  display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  padding:13px 15px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.025);border:1px solid var(--line);
  color:var(--text-2);font:400 15px/1.6 var(--sans);transition:all .12s;
  font-variant-numeric:tabular-nums;
}
.opt .k{
  font:600 10.5px/1 var(--mono);color:var(--hint);min-width:20px;height:20px;
  display:grid;place-items:center;border-radius:5px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  flex:0 0 auto;margin-top:3px;
}
.opt .ov{flex:1;min-width:0;overflow-x:auto}
.opt:hover:not(:disabled){background:rgba(255,255,255,.06);border-color:var(--line-strong)}
.opt.good{border-color:var(--ok-line);background:var(--ok-bg)}
.opt.good .k{background:rgba(16,185,129,.16);border-color:var(--ok-line);color:var(--ok)}
.opt.bad{border-color:var(--bad-line);background:var(--bad-bg)}
.opt.bad .k{background:rgba(239,68,68,.16);border-color:var(--bad-line);color:var(--bad)}
.opt:disabled{opacity:1;cursor:default;transform:none}
.opt.quiet{opacity:.38}

.hintline{
  font-size:12px;color:var(--hint);margin-top:14px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.hintline kbd{
  font:600 10px/1 var(--mono);padding:3px 6px;border-radius:4px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--dim2);
}

/* worked example panel */
.qex{
  margin:0 0 16px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--panel-quiet);
}
.qex>summary{
  cursor:pointer;padding:11px 15px;font:500 12.5px/1.4 var(--sans);color:var(--dim);
  list-style:none;display:flex;align-items:center;gap:8px;
}
.qex>summary::-webkit-details-marker{display:none}
.qex>summary:hover{color:var(--text-2)}
.qex>summary small{margin-left:auto;font-weight:400;color:var(--hint);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase}
.qex .qex-b{
  padding:6px 17px 16px;font-size:14px;line-height:1.72;color:var(--dim);
  border-top:1px solid var(--line-soft);
}
.qex .qex-b strong{color:var(--text-2)}

/* feedback */
.fb{
  margin-top:18px;border-radius:var(--r);padding:17px 19px;
  border:1px solid var(--line);background:rgba(255,255,255,.025);
}
.fb.ok{border-color:var(--ok-line);background:var(--ok-bg)}
.fb.no{border-color:var(--bad-line);background:var(--bad-bg)}
.fb h3{
  margin:0 0 10px;font:600 14.5px/1.4 var(--sans);
  display:flex;align-items:center;gap:8px;
}
.fb.ok h3{color:var(--ok)}
.fb.no h3{color:var(--bad)}

.diag{
  margin:12px 0;padding:11px 14px;border-radius:var(--r-sm);
  background:rgba(239,68,68,.09);border-left:2px solid var(--bad);
  font-size:14px;line-height:1.66;color:var(--text-2);
}
.diag b{color:var(--bad);font-weight:600}

.solve{margin:14px 0 0;font-size:14.5px;line-height:1.76;color:var(--text-2);overflow-x:auto}
.solve .katex-display{margin:12px 0}
.solve strong{color:#fff}

.trick{
  margin:14px 0 0;padding:11px 14px;border-radius:var(--r-sm);
  font-size:13.5px;line-height:1.66;
  background:rgba(255,255,255,.055);border-left:2px solid #a1a1aa;color:var(--text-2);
}
.trick b{color:#fff;font-weight:600}

.cite{
  font:400 11px/1.5 var(--sans);color:var(--hint);margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line-soft);letter-spacing:.02em;
}
.others{margin-top:12px}
.others summary{cursor:pointer;font:500 12px/1 var(--sans);color:var(--hint)}
.others summary:hover{color:var(--dim)}
.others ul{margin:10px 0 0;padding-left:17px;font-size:13px;line-height:1.6;color:var(--hint)}
.others li::marker{color:var(--ghost)}
.others li b{color:var(--dim2)}

.anext{display:flex;align-items:center;gap:13px;margin-top:18px;flex-wrap:wrap}
.anext .kbdhint{font-size:11.5px;color:var(--hint)}
.anext .kbdhint kbd{
  font:600 10px/1 var(--mono);padding:3px 5px;border-radius:4px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--dim2);
}

/* results */
.score-hero{text-align:center;padding:34px 20px}
.score-hero .n{
  font:600 60px/1 var(--serif);letter-spacing:-.04em;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.score-hero .n.good{color:var(--ok)}
.score-hero .n.mid{color:var(--text)}
.score-hero .n.bad{color:var(--bad)}
.score-hero .lbl{
  font:500 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--hint);margin-top:13px;
}

.res-item{
  margin:8px 0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:rgba(255,255,255,.018);
}
.res-item summary{
  cursor:pointer;padding:11px 14px;display:flex;align-items:center;gap:10px;
  font:400 13.5px/1.5 var(--sans);list-style:none;color:var(--dim);
}
.res-item summary::-webkit-details-marker{display:none}
.res-item summary:hover{background:rgba(255,255,255,.03)}
.res-item .body{
  padding:4px 16px 16px;border-top:1px solid var(--line-soft);
  font-size:14px;line-height:1.72;color:var(--text-2);
}
.dotm{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.dotm.g{background:var(--ok)}
.dotm.r{background:var(--bad)}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;background:rgba(6,6,7,.9);z-index:80;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);padding:18px;
}
.modal[hidden]{display:none}
.modal-card{
  background:var(--panel-solid);border:1px solid var(--line-strong);
  border-radius:var(--r-lg);max-width:960px;width:100%;max-height:94vh;
  display:flex;flex-direction:column;box-shadow:0 40px 100px -30px #000;
}
.modal-bar{
  display:flex;gap:9px;align-items:center;padding:9px 13px;
  border-bottom:1px solid var(--line);
}
.modal-title{font:500 12.5px/1 var(--sans);color:var(--dim)}
.modal-body{overflow:auto;background:#fafaf9;border-radius:0 0 var(--r-lg) var(--r-lg)}
.modal-body img{width:100%;display:block}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:90;
  background:#27272a;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:11px 19px;font:500 13px/1 var(--sans);color:var(--text);
  box-shadow:0 18px 40px -16px #000;
}
.toast[hidden]{display:none}

/* ---------- forms ---------- */
.field-label{
  display:block;font:600 10px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--hint);margin-bottom:7px;
}
.field{
  width:100%;padding:11px 13px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.28);border:1px solid var(--line);
  color:var(--text);font:400 14.5px/1.4 var(--sans);
  transition:border-color .14s,background .14s;
}
.field::placeholder{color:var(--hint)}
.field:focus{
  outline:none;border-color:var(--line-strong);background:rgba(0,0,0,.4);
  box-shadow:0 0 0 3px rgba(255,255,255,.05);
}
textarea.field{
  font:400 15px/1.7 var(--sans);resize:vertical;min-height:120px;
  font-family:var(--sans);
}
.auth-err{
  margin-top:13px;padding:10px 12px;border-radius:var(--r-sm);
  font-size:13px;line-height:1.5;
  background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad);
}
.auth-err[hidden]{display:none}

/* ---------- math ---------- */
.katex{font-size:1.02em}
.katex-display{overflow-x:auto;overflow-y:hidden;padding:2px 0}
.km{overflow-x:auto;overflow-y:hidden}
.math-err{color:var(--bad);font-family:var(--mono);font-size:12px}

/* ---------- misc ---------- */
a.pg{border-bottom:1px solid var(--line-strong);cursor:pointer;color:var(--dim)}
a.pg:hover{color:var(--text);border-bottom-color:var(--dim)}
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.fade-in{animation:fade .26s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(4px)}}
.empty{text-align:center;padding:42px 20px;color:var(--hint)}

/* scrollbars: quiet */
*{scrollbar-width:thin;scrollbar-color:var(--ghost) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--ghost);border-radius:99px}
*::-webkit-scrollbar-track{background:transparent}