/* =========================================================================
   Build an LLM from Scratch -- advanced.css
   Extends the shared design system (styles.css) with what the technical
   course needs: code blocks, typeset math, and new interactive demos.
   ========================================================================= */

:root{
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --code-bg:#0f1117;     /* dark code surface, sets code apart on the light page */
  --code-ink:#e6e7ee;
  --ok:#1f7a3d; --ok-weak:#e9f7ee;
  --warn:#b42318; --warn-weak:#fef3f2;
}

/* ---- Part badges on the contents page ------------------------------------ */
.part-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-ink);background:var(--accent-weak);
  padding:4px 10px;border-radius:999px;margin-bottom:10px}

/* ---- Code blocks --------------------------------------------------------- */
.code{position:relative;margin:18px 0;border-radius:12px;overflow:hidden;
  border:1px solid #20242e;background:var(--code-bg);box-shadow:0 1px 3px rgba(10,12,20,.18)}
.code-head{display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:#161a22;border-bottom:1px solid #20242e;color:#8b93a7;
  font:600 .74rem/1 var(--font);letter-spacing:.04em}
.code-head .dot{width:10px;height:10px;border-radius:50%;background:#2a2f3a}
.code-head .lang{margin-left:auto;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem}
.code pre{margin:0;padding:16px 18px;overflow-x:auto;font:0.86rem/1.6 var(--mono);
  color:var(--code-ink);-webkit-font-smoothing:auto}
.code pre code{font-family:var(--mono);background:none;padding:0;font-size:inherit;white-space:pre}
/* inline code in prose */
:not(pre) > code{font-family:var(--mono);font-size:.86em;background:var(--accent-weak);
  color:var(--accent-ink);padding:.12em .42em;border-radius:5px}

/* program output, shown under code */
.out{margin:-8px 0 18px;padding:12px 16px;border:1px solid var(--line);border-top:none;
  border-radius:0 0 12px 12px;background:var(--bg-soft);color:var(--ink);
  font:0.82rem/1.55 var(--mono);white-space:pre-wrap}
.out .lbl{display:block;font:600 .68rem/1 var(--font);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.out.attached{margin-top:-18px;border-radius:0 0 12px 12px}

/* ---- Math --------------------------------------------------------------- */
.katex{font-size:1.04em}
.katex-display{margin:18px 0;overflow-x:auto;overflow-y:hidden;padding:4px 0}
.mathbox{margin:18px 0;padding:14px 18px;border-left:3px solid var(--accent);
  background:var(--accent-weak);border-radius:0 10px 10px 0}
.mathbox .katex-display{margin:6px 0}
.mathbox .why{font-size:.9rem;color:var(--accent-ink);margin-top:6px}

/* a key-idea callout */
.keyidea{margin:20px 0;padding:16px 20px;border:1px solid var(--line-strong);
  border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(20,23,28,.05)}
.keyidea .k{font:700 .72rem/1 var(--font);letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:8px}

/* ---- Architecture diagram (build-the-GPT lessons) ------------------------ */
.diagram{display:flex;flex-direction:column;gap:0;align-items:center;margin:20px 0}
.dbox{width:min(420px,100%);text-align:center;padding:12px 16px;border-radius:10px;
  border:1px solid var(--line-strong);background:var(--bg-soft);font-weight:600;color:var(--ink)}
.dbox small{display:block;font-weight:400;color:var(--muted);font-size:.8rem;margin-top:3px}
.dbox.accent{background:var(--accent-weak);border-color:var(--accent);color:var(--accent-ink)}
.dbox.stack{border-style:dashed}
.darrow{color:var(--line-strong);font-size:.85rem;line-height:1;margin:5px 0}

/* ---- Attention heatmap demo (single grid: corner + key row + query rows) - */
.attn-grid{display:grid;gap:3px;align-items:stretch;margin:10px 0 4px;max-width:520px}
.attn-corner{}
.attn-klab{font:600 .72rem/1 var(--mono);color:var(--muted);text-align:center;align-self:end;padding-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attn-qlab{font:600 .78rem/1 var(--mono);color:var(--ink);text-align:right;align-self:center;padding-right:9px;white-space:nowrap}
.attn-cell{aspect-ratio:1;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font:600 .64rem/1 var(--mono);min-width:28px;cursor:default}
.attn-legend{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);margin-top:12px}
.attn-legend .bar{height:10px;width:120px;border-radius:5px;background:linear-gradient(90deg,#eceafe,#4f46e5)}
@media (max-width:560px){ .attn-cell{font-size:0;min-width:18px} .attn-klab,.attn-qlab{font-size:.62rem} }

/* ---- Token chips (tokenizer demo) --------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0}
.chip{font:600 .8rem/1 var(--mono);padding:6px 9px;border-radius:7px;
  background:var(--accent-weak);color:var(--accent-ink);border:1px solid #dcd9fb;white-space:pre}
.chip.alt{background:#eef7f0;color:#1f7a3d;border-color:#cbe9d4}

/* ---- generic stat row (param counts, loss numbers) ---------------------- */
.stats{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.stat{flex:1;min-width:120px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft)}
.stat .n{font:700 1.35rem/1 var(--font);color:var(--accent-ink);font-variant-numeric:tabular-nums}
.stat .l{font-size:.78rem;color:var(--muted);margin-top:4px}

/* loss curve canvas + misc */
canvas.plot{width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:#fff;display:block}

/* small responsive guard */
@media (max-width:640px){
  .attn-cell{font-size:0}
  .code pre{font-size:.8rem}
}

/* ---- in-page Run button + output (Pyodide) ------------------------------ */
.run-btn{font:600 .73rem/1 var(--font);background:#2a8c4a;color:#fff;border:none;
  padding:6px 12px;border-radius:7px;cursor:pointer;letter-spacing:.02em}
.run-btn:hover{background:#22713c}
.run-btn:disabled{opacity:.55;cursor:default}
.run-status{font:500 .72rem/1 var(--font);color:#8b93a7}
.run-out{margin:-8px 0 18px;padding:12px 16px;border:1px solid var(--line);border-top:none;
  border-radius:0 0 12px 12px;background:var(--bg-soft)}
.run-out .run-text{margin:0;font:.82rem/1.55 var(--mono);white-space:pre-wrap;color:var(--ink)}
.run-out .run-img{max-width:100%;height:auto;display:block;margin:10px auto 0;border-radius:8px;background:#fff}
.run-out .run-err{margin:0;font:.8rem/1.5 var(--mono);white-space:pre-wrap;color:var(--warn);
  background:var(--warn-weak);padding:8px 10px;border-radius:8px}

/* ---- notebook link (Part 2 / "run the real thing") ---------------------- */
.nb-link{display:inline-flex;align-items:center;gap:8px;margin:8px 0;
  font:600 .85rem/1 var(--font);color:var(--accent-ink);background:var(--accent-weak);
  border:1px solid #dcd9fb;padding:10px 14px;border-radius:10px;text-decoration:none}
.nb-link:hover{background:#e4e6fd;text-decoration:none}
.nb-link .ic{font-size:1rem}

/* ---- home / contents ---------------------------------------------------- */
header.top.home{justify-content:space-between}
.home-main{max-width:880px;margin:0 auto;padding:0 22px 80px}
.hero{padding:60px 0 34px;border-bottom:1px solid var(--line);margin-bottom:30px}
.hero h1{font-size:clamp(1.9rem,5vw,3rem);letter-spacing:-.03em;margin:.15em 0 .35em}
.hero .lead{font-size:1.12rem;max-width:62ch}
.cta{display:inline-block;margin-top:22px;background:var(--accent);color:#fff;
  font-weight:600;padding:12px 22px;border-radius:10px;text-decoration:none}
.cta:hover{background:var(--accent-ink);text-decoration:none;color:#fff}
.toc-part{margin:34px 0 14px}
.toc-grid{display:grid;gap:9px}
.toc-card{display:flex;gap:14px;align-items:flex-start;padding:13px 16px;border:1px solid var(--line);
  border-radius:11px;text-decoration:none;color:var(--ink);background:#fff;transition:border-color .15s,background .15s}
.toc-card:hover{border-color:var(--accent);background:var(--bg-soft);text-decoration:none}
.toc-card .tnum{font:700 .9rem/1.4 var(--font);color:var(--accent);font-variant-numeric:tabular-nums;min-width:1.7em}
.toc-card .tt{font-weight:620}
.toc-card .td{color:var(--muted);font-size:.89rem;margin-top:2px}
.runnable-badge{font:600 .62rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase;
  color:#1f7a3d;background:#e9f7ee;border:1px solid #cbe9d4;padding:3px 7px;border-radius:6px;margin-left:8px;white-space:nowrap}

/* ---- demo canvases ------------------------------------------------------ */
canvas.demo-canvas{width:100%;max-width:520px;height:auto;display:block;margin:6px auto 0;
  border:1px solid var(--line);border-radius:10px;background:#fff}

/* ---- code block that has an attached output (Part 2, read-only) ---------- */
.code.with-out{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0;border-bottom:none}

/* ---- glossary ----------------------------------------------------------- */
dl.gloss{margin:18px 0}
dl.gloss dt{font:650 .98rem/1.3 var(--font);color:var(--ink);margin-top:18px}
dl.gloss dt code{font-size:.86em}
dl.gloss dd{margin:4px 0 0;color:var(--muted);font-size:.93rem;line-height:1.56}
.gloss-group{font:700 .72rem/1 var(--font);letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin:28px 0 4px;padding-top:14px;border-top:1px solid var(--line)}

/* ---- horizontal-scroll wrapper for wide tables on mobile ---------------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0}
.table-scroll table.cmp{margin:0}

/* ---- mobile pass -------------------------------------------------------- */
@media (max-width:720px){
  header.top .course-mid{display:none}        /* dots/counter crowd the small header */
}
@media (max-width:600px){
  .home-main{padding:0 16px 60px}
  .hero{padding:44px 0 26px}
  .stats{gap:8px}
  .stat{min-width:calc(50% - 8px)}
  .row{gap:10px}
  .nb-link{font-size:.8rem}
  .keyidea,.mathbox{padding-left:14px;padding-right:14px}
}

/* ---- comparison table (scaling, etc.) ----------------------------------- */
table.cmp{width:100%;border-collapse:collapse;margin:16px 0;font-size:.9rem}
table.cmp th,table.cmp td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.cmp th{font-weight:650;color:var(--ink);background:var(--bg-soft)}
table.cmp td{color:var(--muted);font-variant-numeric:tabular-nums}
table.cmp td:first-child,table.cmp th:first-child{color:var(--ink);font-weight:600}
@media (max-width:600px){ table.cmp{font-size:.8rem} table.cmp th,table.cmp td{padding:7px 8px} }

/* ---- probability-bar widget (next-token / softmax demos) ---------------- */
.probrow{display:grid;grid-template-columns:96px 1fr 50px;align-items:center;gap:10px;margin:7px 0}
.probrow .lab{font:600 .84rem/1 var(--mono);color:var(--ink);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.probrow .track{height:20px;background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.probrow .fill{height:100%;background:var(--accent);transition:width .25s ease}
.probrow .pct{font:600 .8rem/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.slider input[type=range]{accent-color:var(--accent);vertical-align:middle}

/* ---- Notebook-generated content (built by tools/build_web.py) ------------ */
.out .nb-fig{display:block;max-width:100%;height:auto;margin:10px auto 0;
  border-radius:8px;background:#fff}
.md ul,.md ol{color:var(--ink);line-height:1.65;margin:12px 0 16px;padding-left:24px}
.md li{margin:6px 0}
.md blockquote{margin:14px 0;padding:8px 16px;border-left:3px solid var(--accent);
  color:var(--muted);background:var(--bg-soft);border-radius:0 8px 8px 0}
.md blockquote p{margin:4px 0}

/* ---- "Read this cell line by line" toggles -------------------------------- */
details.code-read{margin:-6px 0 20px;border:1px dashed var(--line-strong);
  border-radius:12px;background:#fbfbff;padding:10px 16px}
details.code-read summary{cursor:pointer;font:600 .82rem/1.4 var(--font);
  color:var(--accent-ink);list-style-position:inside}
details.code-read summary:hover{color:var(--accent)}
details.code-read ul{margin:10px 0 4px;padding-left:20px;line-height:1.62;
  color:var(--ink);font-size:.92rem}
details.code-read li{margin:8px 0}

/* ---- Lesson 03: live bigram trainer ------------------------------------- */
.ui:disabled{opacity:.5;cursor:not-allowed}
.bt-stages{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 16px}
.bt-stage{font:600 .72rem/1 var(--mono);color:var(--muted);background:var(--bg-soft);
  border:1px solid var(--line);border-radius:999px;padding:6px 11px;
  transition:background .12s,color .12s,border-color .12s}
.bt-stage.on{color:var(--accent-ink);background:var(--accent-weak);border-color:var(--accent)}
.bt-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){ .bt-cols{grid-template-columns:1fr} }
.bt-card{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:#fff}
.bt-card .demo-canvas{max-width:100%;margin:0}
.bt-cap{font:600 .7rem/1.3 var(--font);letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.bt-text{font:.92rem/1.75 var(--mono);color:var(--muted);word-break:break-word}
.bt-text .cur{background:var(--accent);color:#fff;padding:.08em .32em;border-radius:5px;font-weight:700}
.bt-text .arr{color:var(--accent);font-weight:700;padding:0 .2em}
.bt-text .nxt{background:var(--accent-weak);color:var(--accent-ink);padding:.08em .32em;border-radius:5px;font-weight:700}
.bt-sample{font:.8rem/1.5 var(--mono);color:var(--ink);white-space:pre-wrap;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;height:160px;overflow:hidden}
.bt-stat{font:600 .82rem/1 var(--mono);color:var(--accent-ink);font-variant-numeric:tabular-nums;margin-left:auto}
.probrow .lab .true{color:var(--accent);font-weight:700}

/* ---- Lesson 03: one-update stepper -------------------------------------- */
.os-stages{display:flex;gap:6px;margin:2px 0 14px}
.os-stage{font:600 .74rem/1 var(--mono);color:var(--muted);background:var(--bg-soft);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.os-stage.on{color:var(--accent-ink);background:var(--accent-weak);border-color:var(--accent)}
.os-cols{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
@media (max-width:720px){ .os-cols{grid-template-columns:1fr} }
.os-grid{border:1px solid var(--line);border-radius:8px;background:#fff;max-width:100%;height:auto;
  image-rendering:pixelated}
.os-stat{font:.9rem/1 var(--mono);color:var(--accent-ink);margin-top:12px;font-variant-numeric:tabular-nums}

/* ---- one-update stepper: diverging gradient bars ------------------------ */
.gbar{display:grid;grid-template-columns:96px 1fr 58px;align-items:center;gap:10px;margin:7px 0}
.gbar .lab{font:600 .84rem/1 var(--mono);color:var(--ink);text-align:right;white-space:nowrap}
.gtrack{position:relative;height:18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:6px}
.gtrack::before{content:"";position:absolute;left:50%;top:-1px;bottom:-1px;width:1px;background:var(--line-strong)}
.gfill{position:absolute;top:1px;bottom:1px;min-width:2px;border-radius:2px}
.gfill.up{left:50%;background:#2e9d5b}
.gfill.dn{right:50%;background:#d98a80}
.gval{font:600 .78rem/1 var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.gval.up{color:#2e7d32}
.gval.dn{color:#c62828}

/* ---- Lesson 04: the autograd graph (live forward + animated backward) ---- */
.cg-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 2px}
.cg-svg{width:100%;min-width:540px;max-width:560px;height:auto;display:block;margin:0 auto}
.cg-edge{fill:none;stroke:var(--line-strong);stroke-width:1.6;transition:stroke .2s,stroke-width .2s}
.cg-edge.hot{stroke:#2e9d5b;stroke-width:2.8}
.cg-elab{fill:#2e7d32;font:600 10px/1 var(--mono)}
.cg-box{fill:#fff;stroke:var(--line-strong);stroke-width:1.4}
.cg-box.op{fill:var(--bg-soft)}
.cg-box.leaf{fill:var(--accent-weak);stroke:var(--accent)}
.cg-box.out{fill:#eaf7ee;stroke:#2e9d5b;stroke-width:1.8}
.cg-name{fill:var(--ink);font:700 12px/1 var(--mono)}
.cg-data{fill:var(--accent-ink);font:700 11px/1 var(--mono)}
.cg-grad{fill:#2e7d32;font:700 11px/1 var(--mono)}
.cg-grad.off{fill:#c7cad3}
.cg-legend{display:flex;justify-content:center;gap:18px;font-size:.76rem;color:var(--muted);margin-top:4px}
.cg-legend b{font-family:var(--mono)}
.cg-legend .d{color:var(--accent-ink)}
.cg-legend .g{color:#2e7d32}

/* ---- Lesson 04: the neural network you built (net graph + boundary pad) --- */
.nn-cols{display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:18px;align-items:center;margin:8px 0}
@media (max-width:720px){ .nn-cols{grid-template-columns:1fr;gap:12px} }
.nn-svg{width:100%;max-width:340px;height:auto;display:block;margin:0 auto}
.nn-node{stroke:#fff;stroke-width:1.3}
.nn-lab{font:600 11px/1 var(--mono);fill:var(--muted)}
.nn-pad{width:100%;max-width:380px;height:auto;display:block;margin:0 auto;border:1px solid var(--line-strong);
  border-radius:10px;background:#fff;cursor:crosshair;touch-action:none}
.nn-read{font:600 .84rem/1.4 var(--mono);color:var(--ink);text-align:center;margin-top:9px;font-variant-numeric:tabular-nums}
.nn-cap{font:600 .68rem/1.3 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:6px}

/* ---- Lesson 04: one neuron, drawn ---------------------------------------- */
.neuron-svg{width:100%;min-width:460px;max-width:540px;height:auto;display:block;margin:6px auto 2px}
.nu-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.nu-in{fill:var(--accent-weak);stroke:var(--accent);stroke-width:1.4}
.nu-sum{fill:var(--bg-soft);stroke:var(--line-strong);stroke-width:1.4}
.nu-act{fill:#eaf7ee;stroke:#2e9d5b;stroke-width:1.6}
.nu-edge{stroke:var(--line-strong);stroke-width:1.6;fill:none}
.nu-t{fill:var(--ink);font:600 12px/1 var(--mono)}
.nu-sub{fill:var(--muted);font:500 10px/1 var(--mono)}
.nu-w{fill:var(--accent-ink);font:700 11px/1 var(--mono)}

/* ---- Lesson 06: Transformer block as a residual stream (staged animation) - */
.bf-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
.bf-svg{width:100%;min-width:420px;max-width:440px;height:auto;display:block;margin:0 auto}
.bf-stream{stroke:var(--accent);stroke-width:9;stroke-linecap:round;opacity:.22}
.bf-spine{fill:var(--accent-ink);font:600 10px/1 var(--mono);opacity:.75}
.bf-band{fill:none;stroke:var(--line-strong);stroke-dasharray:5 5}
.bf-band-t{fill:var(--muted);font:700 9.5px/1 var(--font);letter-spacing:.06em;text-transform:uppercase}
.bf-edge{fill:none;stroke:var(--line-strong);stroke-width:1.8}
.bf-edge.on{stroke:var(--accent);stroke-width:2.6}
.bf-box rect{fill:#fff;stroke:var(--line-strong);stroke-width:1.4}
.bf-box.io rect{fill:var(--bg-soft)}
.bf-box.sub rect{fill:var(--accent-weak);stroke:var(--accent)}
.bf-box.out rect{fill:#eaf7ee;stroke:#2e9d5b;stroke-width:1.6}
.bf-box.done rect{stroke:var(--accent)}
.bf-box.on rect{stroke:var(--accent);stroke-width:2.6}
.bf-box.dim{opacity:.42}
.bf-t{fill:var(--ink);font:700 10.5px/1 var(--mono)}
.bf-sub{fill:var(--muted);font:500 9px/1 var(--mono)}
.bf-plus circle{fill:#fff;stroke:var(--accent);stroke-width:1.8}
.bf-plus text{fill:var(--accent-ink);font:700 15px/1 var(--mono)}
.bf-plus.on circle{fill:var(--accent)}
.bf-plus.on text{fill:#fff}
.bf-plus.dim{opacity:.42}

/* ---- Lesson 06: sinusoidal positional-encoding heatmap --------------------- */
.pe-canvas{width:100%;max-width:512px;height:auto;display:block;margin:6px auto 0;border:1px solid var(--line);
  border-radius:8px;cursor:crosshair;image-rendering:pixelated;touch-action:none}
.pe-fp{display:flex;gap:0;height:16px;max-width:512px;margin:8px auto 0;border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.pe-fp span{flex:1}

/* ---- Lesson 06: multi-head split ----------------------------------------- */
.mh-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0}
.mh-svg{width:100%;min-width:400px;max-width:440px;height:auto;display:block;margin:0 auto}
.mh-lab{fill:var(--ink);font:700 10px/1 var(--mono)}
.mh-sub{fill:var(--muted);font:500 9px/1 var(--mono)}

/* ---- Lesson 08: shape-tracer through one forward pass -------------------- */
.st-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
.st-svg{width:100%;min-width:600px;max-width:640px;height:auto;display:block;margin:0 auto}
.st-tensor{fill:var(--accent-weak);stroke:var(--accent);stroke-width:1.3}
.st-name{fill:var(--ink);font:700 10px/1 var(--mono)}
.st-shape{fill:var(--accent-ink);font:700 11px/1 var(--mono)}
.st-ax{fill:var(--muted);font:600 9px/1 var(--mono)}
.st-arrow{stroke:var(--line-strong);stroke-width:1.6;fill:none}

/* ---- Lesson 01: matrix multiply ----------------------------------------- */
.mm-wrap,.bc-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
.mm-svg{width:100%;min-width:320px;max-width:340px;height:auto;display:block;margin:0 auto}
.mm-c{fill:#fff;stroke:var(--line-strong);stroke-width:1.2}
.mm-c.cc{fill:var(--bg-soft)}
.mm-c.row,.mm-c.col{fill:var(--accent-weak);stroke:var(--accent);stroke-width:1.5}
.mm-c.out{fill:var(--accent-weak);stroke:var(--accent);stroke-width:2.6}
.mm-v{fill:var(--ink);font:600 12px/1 var(--mono)}
.mm-op{fill:var(--muted);font:700 17px/1 var(--mono)}
.mm-lab,.bc-lab{fill:var(--muted);font:600 10px/1 var(--mono)}

/* ---- Lesson 01: broadcasting --------------------------------------------- */
.bc-svg{width:100%;min-width:492px;max-width:520px;height:auto;display:block;margin:0 auto}
.bc-c{fill:#fff;stroke:var(--line-strong);stroke-width:1.2}
.bc-c.on{fill:var(--accent-weak);stroke:var(--accent);stroke-width:1.7}
.bc-c.bias{fill:#eaf7ee;stroke:#2e9d5b;stroke-width:1.4}
.bc-c.ghost{fill:#f6f7f9;stroke:var(--line);opacity:.55}
.bc-c.res{fill:var(--bg-soft);stroke:var(--line-strong)}
.bc-c.empty{fill:#fff;stroke:var(--line);stroke-dasharray:3 3}
.bc-v{fill:var(--ink);font:600 12px/1 var(--mono)}
.bc-op{fill:var(--muted);font:700 17px/1 var(--mono)}

/* ---- Lesson 01: cross-entropy -------------------------------------------- */
.ce-cols{display:grid;grid-template-columns:1fr 210px;gap:18px;align-items:center;margin:10px 0}
@media (max-width:640px){ .ce-cols{grid-template-columns:1fr} }
.ce-curve{width:210px;max-width:100%;height:auto;display:block;margin:0 auto;border:1px solid var(--line);border-radius:8px;background:#fff}

/* ---- Lesson 05: causal averaging matrix ---------------------------------- */
.ca-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
.ca-svg{width:100%;min-width:260px;max-width:300px;height:auto;display:block;margin:0 auto}
.ca-w{font:600 9.5px/1 var(--mono)}
.ca-lab{fill:var(--muted);font:600 10px/1 var(--mono)}

/* ---- Lesson 02: context windows / batching ------------------------------- */
.ba-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
.ba-svg{width:100%;min-width:290px;max-width:320px;height:auto;display:block;margin:0 auto}
.ba-x{fill:var(--accent-weak);stroke:var(--accent);stroke-width:1.3}
.ba-y{fill:#eaf7ee;stroke:#2e9d5b;stroke-width:1.3}
.ba-c{fill:var(--ink);font:700 13px/1 var(--mono)}
.ba-ctx{fill:var(--bg-soft);stroke:var(--line-strong);stroke-width:1.1}
.ba-ctx.on{fill:var(--accent-weak);stroke:var(--accent);stroke-width:1.5}
.ba-tgt{fill:#eaf7ee;stroke:#2e9d5b;stroke-width:1.3}
.ba-cc{fill:var(--ink);font:700 11px/1 var(--mono)}
.ba-arr{fill:var(--accent);font:700 13px/1 var(--mono)}
.ba-lab{fill:var(--ink);font:700 12px/1 var(--mono)}
.ba-sub{fill:var(--muted);font:500 10px/1 var(--mono)}

/* ---- Lesson 09: loss descent past the reference lines -------------------- */
.ld-canvas{width:100%;max-width:560px;height:auto;display:block;margin:6px auto 0;
  border:1px solid var(--line);border-radius:10px;background:#fff}
.ld-sample{font:.82rem/1.55 var(--mono);white-space:pre-wrap;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-top:10px;color:var(--ink);min-height:46px}

/* ---- Lesson 10: the KV-cache -------------------------------------------- */
.kv-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
.kv-svg{width:100%;min-width:366px;max-width:392px;height:auto;display:block;margin:0 auto}
.kv-tok.have{fill:var(--accent-weak);stroke:var(--accent);stroke-width:1.2}
.kv-tok.new{fill:var(--accent-weak);stroke:var(--accent);stroke-width:2.4}
.kv-tok.future{fill:#fff;stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.kv-c{fill:var(--ink);font:700 13px/1 var(--mono)}
.kv-kv{stroke-width:1.2}
.kv-kv.cached{fill:#eaf7ee;stroke:#2e9d5b}
.kv-kv.new{fill:var(--accent);stroke:var(--accent)}
.kv-kv.redo{fill:#fdeceb;stroke:#d98a80}
.kv-kc{fill:#3a3f48;font:700 10px/1 var(--mono)}
.kv-kc.ok{fill:#2e7d32}
.kv-kc.w{fill:#fff}
.kv-lab{fill:var(--muted);font:600 10px/1 var(--mono)}

/* ---- Lesson 00: the course map ------------------------------------------ */
.cm-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
.cm-svg{width:100%;min-width:740px;max-width:772px;height:auto;display:block;margin:0 auto}
.cm-edge{stroke:var(--line-strong);stroke-width:1.8;fill:none}
.cm-edge.on{stroke:var(--accent);stroke-width:2.4}
.cm-loop{stroke:var(--line-strong);stroke-width:1.5;fill:none;stroke-dasharray:4 4}
.cm-loop-t{fill:var(--muted);font:600 10px/1 var(--mono)}
.cm-node{fill:#fff;stroke:var(--line-strong);stroke-width:1.6}
.cm-node.on{fill:var(--accent-weak);stroke:var(--accent);stroke-width:2.2}
.cm-node.done{stroke:var(--accent)}
.cm-num{fill:var(--accent-ink);font:700 12px/1 var(--mono)}
.cm-t{fill:var(--ink);font:700 11px/1 var(--mono)}
.cm-d{fill:var(--muted);font:500 9px/1 var(--mono)}