/* ==========================================================================
   microllm · /learn — shared stylesheet
   One file for the hub and every lesson, so pages carry only their own demo
   markup. Theme: "neural terminal" — deep slate, bone text, cyan signal accent,
   magenta for weights/attention, green for low-loss/good.
   Class vocabulary mirrors the sibling AcidLab / Mudline curricula.
   ========================================================================== */

:root{
  --bg:#0a0d13; --panel:#121722; --panel2:#1a2130;
  --ink:#e7edf7; --dim:#8494ad;
  --spark:#49d0ff;   /* cyan — primary accent, "the signal" */
  --syn:#ff5c9a;     /* magenta — weights / attention / parameters */
  --ok:#66e0a3;      /* green — good / low loss / "grip" */
  --sky:#7fb0ff;     /* cooler blue — deeper-theory asides */
  --warn:#ffcf5a;    /* amber — highlight */
  --line:#26314a;    /* hairline borders */
}

*{box-sizing:border-box}

/* ===== iOS/touch: these are instruments you poke, not documents =====
   Kill the Safari gestures that fight sliders & tappable diagrams on iPhone. */
*{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:pan-x pan-y}
html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
input[type=range]{touch-action:none}

body{
  margin:0;
  background:radial-gradient(1200px 620px at 50% -12%,#131a28,var(--bg)),var(--bg);
  color:var(--ink);
  font:15px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  padding:32px 18px 110px;
}
.wrap{max-width:900px;margin:0 auto}

/* ---- links & headings ---- */
a.back{color:var(--dim);text-decoration:none;font-size:13px}
a.back:hover{color:var(--spark)}
h1{font-size:26px;margin:10px 0 2px;letter-spacing:-.3px}
h1 .n{color:var(--spark)}
h2{font-size:18px;margin:18px 0 12px;color:var(--syn);letter-spacing:.4px}
h2 .k{color:var(--dim);font-size:12px;font-weight:400;letter-spacing:2px;
  text-transform:uppercase;display:block;margin-bottom:2px}
.sub{color:var(--dim);margin:0 0 22px}

/* ---- content blocks ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;margin:16px 0}
p{margin:10px 0} b{color:var(--ink)}
.hl{color:var(--spark)} .kbd{color:var(--syn)}
code{color:var(--spark);background:#070a10;padding:1px 5px;border-radius:4px}
.hint{color:var(--dim);font-size:12.5px}
ul{margin:10px 0;padding-left:20px} li{margin:5px 0}

/* the "you already know this" tie-back callout */
.tie{border-left:3px solid var(--syn);background:#1c1420;border-radius:0 8px 8px 0;
  padding:10px 14px;margin:12px 0;font-size:13.5px;color:var(--ink)}
.tie b{color:var(--syn)}

/* key insight — the one thing to carry out */
.key{border-left:3px solid var(--spark);background:#0e1a22;border-radius:0 8px 8px 0;
  padding:10px 14px;margin:12px 0;font-size:13.5px;color:var(--ink)}
.key b{color:var(--spark)}

/* ELI5 callout — plain-language restatement of the maths */
.eli5{border-left:3px solid var(--ok);background:#0f1c17;border-radius:0 8px 8px 0;
  padding:10px 14px;margin:12px 0;font-size:13.5px;color:var(--ink)}
.eli5 b{color:var(--ok)} .eli5 .tag{color:var(--ok);font-weight:700;letter-spacing:1px}

/* deeper-theory / "under the hood" aside */
.aside{border:1px dashed var(--sky);border-radius:8px;padding:8px 12px;margin:10px 0;
  font-size:13px;color:var(--dim)}
.aside b{color:var(--sky)} .aside code{color:var(--sky);background:#070d15}

/* historical perspective — the human/real-life story behind the theory */
.history{border-left:3px solid var(--warn);background:#1a1710;border-radius:0 8px 8px 0;
  padding:10px 14px;margin:12px 0;font-size:13.5px;color:var(--ink)}
.history b{color:var(--warn)} .history i{color:var(--dim)}

/* display equation block — scrolls horizontally on phones */
.eq{background:#070a10;border:1px solid var(--line);border-radius:8px;padding:10px 14px;
  margin:10px 0;color:var(--sky);font-size:13.5px;overflow-x:auto;white-space:nowrap}
.eq b{color:var(--ink)} .eq i{color:var(--dim);white-space:normal}

table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13.5px}
td,th{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
th{color:var(--syn);font-weight:600}

/* ---- figures / diagrams ---- */
.fig{margin:14px 0;text-align:center}
.fig svg,.fig canvas{max-width:100%;background:#070a10;border:1px solid var(--line);border-radius:10px}
.cap{color:var(--dim);font-size:12px;margin-top:6px}

/* ---- interactive controls ---- */
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}
button{background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:8px 13px;cursor:pointer;font:inherit;font-size:13px;transition:.12s}
button:hover{border-color:var(--spark)}
button.on{background:var(--spark);color:#070a10;border-color:var(--spark);font-weight:700}
input[type=range]{flex:1;min-width:170px;accent-color:var(--spark);height:26px}
input[type=text]{background:#070a10;color:var(--ink);border:1px solid var(--line);
  border-radius:6px;padding:8px 10px;font:inherit;font-size:14px;flex:1;min-width:180px}
label.fld{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--dim)}
label.fld b{color:var(--spark)}

/* live readout strip */
.readout{display:flex;gap:18px;flex-wrap:wrap;background:#070a10;border:1px solid var(--line);
  border-radius:8px;padding:8px 14px;font-size:13px}
.readout b{color:var(--spark);font-size:16px}
.readout .lbl{color:var(--dim);font-size:11px;display:block}

/* probability bars (next-token demos) */
.bars{display:flex;flex-direction:column;gap:5px;margin:12px 0}
.bar{display:grid;grid-template-columns:96px 1fr 56px;gap:10px;align-items:center;font-size:13px}
.bar .tok{color:var(--ink);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .track{background:#070a10;border:1px solid var(--line);border-radius:5px;height:20px;overflow:hidden}
.bar .fill{height:100%;background:linear-gradient(90deg,#1c6a8a,var(--spark));
  width:0;transition:width .25s ease}
.bar .pct{color:var(--dim);text-align:right;font-variant-numeric:tabular-nums}
.bar.pick .fill{background:linear-gradient(90deg,#8a2f57,var(--syn))}
.bar.pick .tok{color:var(--syn);font-weight:700}

/* generated-text output box */
.output{background:#070a10;border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  min-height:52px;font-size:15px;line-height:1.7;color:var(--ink)}
.output .seed{color:var(--dim)}
.output .new{color:var(--spark)}
.output .cursor{color:var(--syn);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---- nav ---- */
.next{display:inline-block;margin-top:6px;color:var(--spark);text-decoration:none;
  border:1px solid var(--spark);border-radius:8px;padding:8px 14px}
.next:hover{background:var(--spark);color:#070a10}

/* ==========================================================================
   Hub page only (the curriculum card grid)
   ========================================================================== */
.mod{margin:26px 0 10px;color:var(--syn);font-size:13px;letter-spacing:2px;text-transform:uppercase}
a.card{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:12px 16px;margin:8px 0;transition:.15s}
a.card:hover{border-color:var(--spark);transform:translateX(3px)}
a.card.todo{opacity:.5;pointer-events:none}
.num{font-size:18px;color:var(--spark);min-width:40px;font-weight:700}
.title{font-weight:600}
.desc{color:var(--dim);font-size:13px}
.badge{margin-left:auto;font-size:11px;padding:3px 8px;border-radius:20px;border:1px solid var(--line);white-space:nowrap}
.badge.done{color:var(--ok);border-color:var(--ok)}
.badge.todo{color:var(--dim)}
footer{margin-top:48px;color:var(--dim);font-size:12px;border-top:1px solid var(--line);padding-top:16px}