/* ============================================================================
   Failed Star — design system
   One stylesheet, hand-written, no framework. Edit the tokens in :root and the
   whole site re-themes. Dark + warm ("brown dwarf": dim ember, rust, dusty red).
   ============================================================================ */

/* ---- Design tokens -------------------------------------------------------- */
:root {
  /* surfaces (deep, slightly warm space-black → lighter panels) */
  --bg:        #0e0d12;
  --surface:   #17151d;
  --surface-2: #201d28;
  --border:    #2e2a38;
  --border-2:  #3b3648;

  /* ink (warm off-white, with dimmer steps) */
  --text:        #e9e3d8;
  --text-dim:    #b3a896;
  --text-mute:   #7c7263;
  --text-strong: #f3eee4;

  /* the failed star's dim glow */
  --ember:     #e8a04b;   /* primary accent — amber */
  --ember-hi:  #f4bd78;   /* brighter ember (hover) */
  --rust:      #b56a4a;   /* red-brown */
  --dusk:      #a8607d;   /* dusty red-magenta (brown dwarfs glow dim red/IR) */

  /* citation chip hues */
  --book:      #6fae8f;   /* 📖 the book */
  --ds4:       #6f95c9;   /* 🔧 ds4 */
  --raschka:   --dusk;

  /* type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, ui-serif, serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo,
           Consolas, monospace;

  /* rhythm */
  --measure: 70ch;       /* comfortable prose width */
  --wide:    1080px;     /* diagram/container width */
  --radius:  12px;
  --radius-sm: 8px;
  --gap:     clamp(1rem, 2.5vw, 1.75rem);
}

/* ---- Reset-ish ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  color: var(--text);
  background:
    radial-gradient(1100px 600px at 78% -8%, rgba(232,160,75,0.10), transparent 60%),
    radial-gradient(900px 520px at 12% 4%, rgba(168,96,125,0.08), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--ember); text-decoration: none; }
a:hover { color: var(--ember-hi); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Layout --------------------------------------------------------------- */
.container { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.prose { max-width: var(--measure); }
section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
section + section { border-top: 1px solid var(--border); }

/* ---- Type ----------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15;
  letter-spacing: -0.01em; color: var(--text); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); margin: 0 0 0.4em; }
h3 { font-size: 1.25rem; margin: 2em 0 0.4em; color: var(--ember-hi); }
.eyebrow { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ember); margin: 0 0 0.8rem; }
.lead { font-size: 1.15rem; color: var(--text-dim); }
p { margin: 0 0 1rem; }
code { font-family: var(--mono); font-size: 0.88em; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 5px; padding: 0.08em 0.38em; }
pre { font-family: var(--mono); font-size: 0.85rem; line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.9rem 1.1rem; margin: 0 0 1rem; overflow-x: auto; color: var(--text-dim); }
pre code { background: none; border: 0; padding: 0; font-size: 1em; }
strong { color: var(--text-strong); font-weight: 650; }
mark { background: rgba(232,160,75,0.22); color: var(--ember-hi); border-radius: 3px;
  padding: 0 0.2em; }

/* ---- Header / nav --------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px); background: rgba(14,13,18,0.72);
  border-bottom: 1px solid var(--border); }
.site-header .container { display: flex; align-items: center; gap: 1rem;
  padding-block: 0.7rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--serif);
  font-size: 1.15rem; font-weight: 600; color: var(--text); }
.brand:hover { text-decoration: none; color: var(--text); }
.brand svg, .brand img { width: 30px; height: 30px; }
.brand .tld { color: var(--text-mute); font-family: var(--mono); font-size: 0.8rem; }
.nav { margin-left: auto; display: flex; gap: 1.3rem; font-size: 0.92rem; }
.nav a { color: var(--text-dim); }
.nav a:hover { color: var(--ember); text-decoration: none; }

/* ---- Hero ----------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 8vw, 6rem); }
.hero .container { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem,5vw,4rem);
  align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 1.6rem + 3.5vw, 4rem); margin: 0 0 0.5rem; }
.hero .tagline { font-size: 1.3rem; color: var(--text-dim); max-width: 36ch; }
.hero .star-art { justify-self: center; width: min(320px, 80%); filter:
  drop-shadow(0 18px 40px rgba(232,160,75,0.18)); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600;
  font-size: 0.95rem; padding: 0.6rem 1.1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); color: var(--text); }
.btn:hover { text-decoration: none; border-color: var(--ember); color: var(--ember-hi); }
.btn--primary { background: linear-gradient(180deg, var(--ember), var(--rust));
  color: #1a120a; border-color: transparent; }
.btn--primary:hover { color: #1a120a; filter: brightness(1.07); }

/* ---- Citation chips (📖 book · 🔧 ds4 · 🧭 Raschka) ----------------------- */
.cites { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono);
  font-size: 0.76rem; padding: 0.22rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text-dim); }
.chip--book   { border-color: color-mix(in oklab, var(--book) 55%, var(--border)); }
.chip--ds4    { border-color: color-mix(in oklab, var(--ds4) 55%, var(--border)); }
.chip--rasch  { border-color: color-mix(in oklab, var(--dusk) 55%, var(--border)); }

/* ---- Callout -------------------------------------------------------------- */
.callout { border: 1px solid var(--border-2); border-left: 3px solid var(--ember);
  background: var(--surface); border-radius: var(--radius-sm); padding: 1rem 1.2rem;
  margin: 1.5rem 0; }
.callout strong { color: var(--ember-hi); }

/* ============================================================================
   THE LADDER — interactive abstraction ladder (the centerpiece diagram)
   ============================================================================ */
.ladder { display: flex; flex-direction: column; gap: 0.5rem; margin: 1.5rem 0;
  counter-reset: rung; }
.ladder-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  margin-bottom: 0.4rem; font-size: 0.88rem; color: var(--text-dim); }
.toggle { display: inline-flex; gap: 0.45rem; align-items: center; cursor: pointer;
  user-select: none; padding: 0.35rem 0.7rem; border: 1px solid var(--border-2);
  border-radius: 999px; background: var(--surface); }
.toggle input { accent-color: var(--ember); }
.ladder .axis { font-family: var(--mono); font-size: 0.72rem; color: var(--text-mute);
  letter-spacing: 0.12em; text-transform: uppercase; }

.rung { border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); overflow: hidden; transition: border-color .18s, transform .18s; }
.rung:hover { border-color: var(--border-2); }
.rung > summary { list-style: none; cursor: pointer; display: grid;
  grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: 1rem;
  padding: 0.85rem 1rem; }
.rung > summary::-webkit-details-marker { display: none; }
.rung .num { font-family: var(--mono); font-weight: 700; font-size: 1.2rem;
  color: var(--ember); text-align: center; }
.rung .title { font-weight: 600; color: var(--text); }
.rung .blurb { color: var(--text-dim); font-size: 0.9rem; }
.rung .mstone { font-family: var(--mono); font-size: 0.72rem; color: var(--text-mute);
  border: 1px solid var(--border-2); border-radius: 999px; padding: 0.15rem 0.55rem;
  white-space: nowrap; }
.rung[open] { border-color: var(--ember); transform: none; }
.rung .detail { padding: 0 1rem 1.1rem 4.2rem; color: var(--text-dim);
  border-top: 1px solid var(--border); margin-top: 0.2rem; padding-top: 0.9rem; }
.rung .detail p:last-child { margin-bottom: 0; }

/* "what we build" emphasis (toggled by JS via .show-build on .ladder) */
.rung[data-build="yes"] .num::after { content: "▸"; }
.ladder.show-build .rung[data-build="yes"] {
  border-color: color-mix(in oklab, var(--ember) 60%, var(--border));
  background: linear-gradient(90deg, rgba(232,160,75,0.10), transparent 40%); }
.ladder.show-build .rung[data-build="no"] { opacity: 0.5; }

/* ---- Pipeline (data's journey A→F) --------------------------------------- */
.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: 0.8rem; margin: 1.5rem 0; }
.stage { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); padding: 1rem; }
.stage .step { font-family: var(--mono); font-size: 0.72rem; color: var(--ember);
  letter-spacing: 0.1em; }
.stage h4 { margin: 0.3rem 0 0.4rem; font-family: var(--serif); font-size: 1.05rem;
  color: var(--text); }
.stage p { font-size: 0.88rem; color: var(--text-dim); margin: 0; }
.stage .mstone { position: absolute; top: 0.7rem; right: 0.7rem; font-family: var(--mono);
  font-size: 0.68rem; color: var(--text-mute); }

/* ---- Card grid (the three things) ---------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 1rem; margin: 1.5rem 0; }
.card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  padding: 1.3rem; transition: border-color .18s, transform .18s; }
.card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.card h3 { margin: 0 0 0.5rem; color: var(--ember-hi); font-size: 1.15rem; }
.card .mstone { font-family: var(--mono); font-size: 0.7rem; color: var(--text-mute); }

/* ---- Tables --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--border);
  border-radius: var(--radius-sm); }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border); }
thead th { background: var(--surface-2); color: var(--text); font-family: var(--mono);
  font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(232,160,75,0.04); }
td .yes { color: var(--book); } td .no { color: var(--text-mute); }

/* ---- Prefill / decode split ---------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.split .phase { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem;
  background: var(--surface); }
.phase--prefill { border-top: 3px solid var(--book); }
.phase--decode  { border-top: 3px solid var(--dusk); }
.phase h3 { margin-top: 0; }
.phase .stat { font-family: var(--mono); font-size: 1.5rem; color: var(--ember); }

/* ---- Build progress ------------------------------------------------------- */
.progress { max-width: var(--wide); }
.progress-bar { height: 6px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); overflow: hidden; }
.progress-bar span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--rust), var(--ember)); }
.progress-caption { font-family: var(--mono); font-size: 0.82rem; color: var(--text-mute);
  margin: 0.6rem 0 1.1rem; }
.progress-caption .cur { color: var(--ember); }
.milestones { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: 0; margin: 0; }
.ms { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 6rem; min-width: 5rem;
  padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); }
.ms-id { font-family: var(--mono); font-weight: 700; font-size: 0.92rem; color: var(--text-mute); }
.ms-name { font-size: 0.78rem; color: var(--text-mute); }
.ms--done { border-color: color-mix(in oklab, var(--ember) 45%, var(--border));
  background: color-mix(in oklab, var(--ember) 12%, var(--surface)); }
.ms--done .ms-id, .ms--done .ms-name { color: var(--text-dim); }
.ms--done .ms-id::after { content: " ✓"; color: var(--ember); }
.ms--now { border-color: var(--ember);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--ember) 40%, transparent),
              0 0 16px -6px var(--ember); }
.ms--now .ms-id { color: var(--ember); }
.ms--now .ms-id::after { content: " ●"; font-size: 0.7em; vertical-align: 0.12em; }
.ms--now .ms-name { color: var(--text-dim); }
.ms--stretch { border-style: dashed; }

/* ---- Footer --------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); color: var(--text-mute);
  font-size: 0.86rem; padding-block: 2.5rem; }
.site-footer a { color: var(--text-dim); }
.site-footer .meta { font-family: var(--mono); font-size: 0.76rem; margin-top: 0.6rem; }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 760px) {
  .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero .star-art { grid-row: 1; width: min(220px, 60%); }
  .btn-row { justify-content: center; }
  .split { grid-template-columns: 1fr; }
  .rung > summary { grid-template-columns: 2.4rem 1fr; }
  .rung .mstone { display: none; }
  .rung .detail { padding-left: 1rem; }
  .nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important;
  transition: none !important; } }

/* ============================================================================
   LIGHT THEME — toggled via <html data-theme="light">. Just re-point the tokens;
   everything built from them re-themes for free. (A few hardcoded-dark spots get
   explicit overrides below.)
   ============================================================================ */
html[data-theme="light"] {
  --bg:        #f4efe4;
  --surface:   #fffdf7;
  --surface-2: #ece4d4;
  --border:    #e3dac7;
  --border-2:  #cfc4ac;
  --text:        #2b2620;
  --text-dim:    #5f574a;
  --text-mute:   #938872;
  --text-strong: #1f1b15;
  --ember:    #b4691d;
  --ember-hi: #8c4f10;
  --rust:     #a8553a;
  --dusk:     #9c4f6e;
  --book:     #2f8f66;
  --ds4:      #3a6db0;
}
html[data-theme="light"] body {
  background:
    radial-gradient(1100px 600px at 78% -8%, rgba(232,160,75,0.12), transparent 60%),
    radial-gradient(900px 520px at 12% 4%, rgba(168,96,125,0.08), transparent 55%),
    var(--bg);
}
html[data-theme="light"] .site-header { background: rgba(244,239,228,0.82); }

/* ---- Theme toggle button (lives outside .nav so it survives the mobile menu) -- */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--border-2); border-radius: 8px; background: var(--surface);
  color: var(--text-dim); transition: color .15s, border-color .15s; }
.theme-toggle:hover { color: var(--ember); border-color: var(--ember); }
.theme-toggle svg { width: 18px; height: 18px; }
.ic-moon { display: none; } .ic-sun { display: inline; }
html[data-theme="light"] .ic-sun { display: none; }
html[data-theme="light"] .ic-moon { display: inline; }

/* ---- Cross-page nav: mark the current page -------------------------------- */
.nav a.current { color: var(--ember); }

/* ---- Prose lists (subpages) ----------------------------------------------- */
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.prose li { margin: .35rem 0; }
.prose li::marker { color: var(--ember); }

/* ---- Tier cards (prerequisites) ------------------------------------------- */
.card--floor   { border-top: 3px solid var(--book); }
.card--helpful { border-top: 3px solid var(--ember); }
.card--teach   { border-top: 3px solid var(--dusk); }
.card .tier-tag { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--text-mute); }

/* ---- Checklist (self-check) ----------------------------------------------- */
.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 1.8rem; margin: .55rem 0; }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--book); font-weight: 700; }

/* ============================================================================
   SAMPLING EXPLORER (diagrams page) — real softmax math, live in the browser.
   ============================================================================ */
.preview-banner { border: 1px solid color-mix(in oklab, var(--dusk) 50%, var(--border));
  background: color-mix(in oklab, var(--dusk) 12%, var(--surface));
  border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin: 1.5rem 0;
  color: var(--text-dim); }
.preview-banner strong { color: var(--ember-hi); }

.explorer { border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: clamp(1rem, 3vw, 1.5rem); margin: 1.5rem 0; }
.prompt-line { font-family: var(--mono); font-size: 1.05rem; margin: 0 0 1.2rem;
  color: var(--text); }
.prompt-line .blank { color: var(--ember); border-bottom: 2px solid var(--ember);
  padding: 0 .7rem; }
.controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
  margin-bottom: 1.3rem; }
.control label { display: block; font-family: var(--mono); font-size: .78rem;
  color: var(--text-dim); margin-bottom: .35rem; }
.control label b { color: var(--ember); }
.control input[type="range"] { width: 100%; accent-color: var(--ember); }
.dist { display: flex; flex-direction: column; gap: .4rem; }
.tok-row { display: grid; grid-template-columns: 5.5rem 1fr 3.4rem; align-items: center;
  gap: .7rem; padding: .25rem .45rem; border-radius: 7px; transition: opacity .15s; }
.tok-row .tok { font-family: var(--mono); font-size: .9rem; color: var(--text); }
.tok-row .track { background: var(--surface-2); border-radius: 999px; height: .72rem;
  overflow: hidden; }
.tok-row .bar { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--ember), var(--rust)); transition: width .25s; }
.tok-row .pct { font-family: var(--mono); font-size: .8rem; color: var(--text-dim);
  text-align: right; }
.tok-row.cut { opacity: .38; }
.tok-row.cut .bar { background: var(--text-mute); }
.tok-row.sampled { outline: 2px solid var(--ember); outline-offset: 1px;
  background: rgba(232,160,75,0.06); }
.sample-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem;
  flex-wrap: wrap; }
.sample-out { font-size: .98rem; color: var(--text); }

@media (max-width: 760px) {
  .controls { grid-template-columns: 1fr; gap: .8rem; }
  .tok-row { grid-template-columns: 4.5rem 1fr 3rem; gap: .5rem; }
}

/* ---- Attention visualizer (diagrams) -------------------------------------- */
.attn-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem;
  margin-bottom: 1.2rem; }
.attn-hint { font-family: var(--mono); font-size: .78rem; color: var(--text-dim); }
.attn-tokens { display: flex; flex-wrap: wrap; gap: .4rem; }
.attn-chip { position: relative; overflow: hidden; font-family: var(--mono);
  font-size: .92rem; padding: .3rem .6rem .5rem; border-radius: 7px;
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text);
  cursor: pointer; transition: border-color .15s, opacity .15s; }
.attn-chip:hover { border-color: var(--ember); }
.attn-chip.query { outline: 2px solid var(--ember); outline-offset: 1px; }
.attn-chip.masked { opacity: .32; }
.attn-wbar { position: absolute; left: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--ember), var(--rust));
  border-radius: 0 2px 2px 0; transition: width .25s; }
.attn-caption { margin-top: 1rem; color: var(--text-dim); font-size: .95rem; }

/* ---- Tokenizer playground (diagrams) -------------------------------------- */
.tok-stream { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0; min-height: 2.6rem; }
.tok-chip { display: inline-flex; flex-direction: column; align-items: center;
  border: 1px solid var(--border-2); border-radius: 6px; padding: .25rem .45rem;
  background: var(--surface-2); }
.tok-chip .tok-text { font-family: var(--mono); font-size: .92rem; color: var(--text);
  white-space: pre; }
.tok-chip .tok-id { font-family: var(--mono); font-size: .62rem; color: var(--text-mute);
  margin-top: .1rem; }
.tok-chip.space { opacity: .55; }

/* ---- KV cache stepper (diagrams) ------------------------------------------ */
.kv-cache { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.2rem 0; min-height: 2.8rem; }
.kv-cell { min-width: 3rem; height: 2.8rem; display: flex; align-items: center;
  justify-content: center; padding: 0 .4rem; border-radius: 8px; font-family: var(--mono);
  font-size: .82rem; border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--text-dim); transition: background .2s, color .2s, border-color .2s; }
.kv-cell.computed { background: linear-gradient(180deg, var(--ember), var(--rust));
  color: #1a120a; border-color: transparent; }
.kv-tally { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .8rem;
  font-family: var(--mono); font-size: .85rem; color: var(--text-dim); }
.kv-tally b { color: var(--ember); }