:root {
  --bg: #0b0f17;
  --bg-soft: #131926;
  --bg-card: #161d2b;
  --line: #263041;
  --fg: #e8eef6;
  --fg-dim: #a3b0c2;
  --fg-faint: #6b7891;
  --blue: #58a6ff;
  --red: #ff7b72;
  --green: #56d364;
  --purple: #d2a8ff;
  --gold: #f0b72f;
  --teal: #3ad0c0;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); background: var(--bg); color: var(--fg);
  line-height: 1.7; -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { color: #fff; font-weight: 650; }
i, em { color: var(--fg); font-style: italic; }
code, .mono { font-family: var(--mono); font-size: 0.9em; }
:not(pre) > code { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 5px; padding: 0.08em 0.4em; color: var(--purple); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Keep running text at a comfortable reading measure, but let the wide blocks
   (equations, figures, demos, tables, code) use the full page width. */
main.wrap section > p,
main.wrap section > ul,
main.wrap section > ol,
main.wrap section > .lede,
main.wrap section > .callout,
main.wrap section > .fignote,
main.wrap section > h2,
main.wrap section > h3 { max-width: 768px; }

/* ---------------- hero ---------------- */
header.hero {
  position: relative; overflow: hidden;
  padding: 86px 0 56px; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(820px 360px at 78% -8%, rgba(88,166,255,0.20), transparent 62%),
    radial-gradient(680px 320px at 8% 4%, rgba(210,168,255,0.14), transparent 60%),
    radial-gradient(520px 300px at 50% 120%, rgba(58,208,192,0.12), transparent 60%);
}
.hero .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue);
  background: rgba(88,166,255,0.10); border: 1px solid rgba(88,166,255,0.25);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 22px;
}
.hero h1 { font-size: 2.9rem; line-height: 1.08; margin: 0 0 16px; letter-spacing: -0.025em; font-weight: 750; }
.hero h1 .grad {
  background: linear-gradient(95deg, var(--teal), var(--blue) 55%, var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub { font-size: 1.16rem; color: var(--fg-dim); max-width: 600px; }
.hero .tags { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-family: var(--mono); font-size: 0.76rem; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; color: var(--fg-dim); background: var(--bg-soft); }
.tag.on { color: var(--bg); background: var(--blue); border-color: var(--blue); font-weight: 600; }

/* ---------------- sticky nav ---------------- */
nav.toc { position: sticky; top: 0; z-index: 50; background: rgba(11,15,23,0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
nav.toc .wrap { display: flex; gap: 2px; overflow-x: auto; padding: 9px 22px; scrollbar-width: none; }
nav.toc .wrap::-webkit-scrollbar { display: none; }
nav.toc a { font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; color: var(--fg-dim); padding: 6px 11px; border-radius: 7px; }
nav.toc a:hover { background: var(--bg-soft); color: var(--fg); text-decoration: none; }
nav.toc a.active { color: var(--blue); background: rgba(88,166,255,0.13); }

/* ---------------- sections ---------------- */
section { padding: 60px 0; border-bottom: 1px solid var(--line); }
section h2 { font-size: 1.95rem; margin: 0 0 4px; letter-spacing: -0.015em; display: flex; align-items: baseline; gap: 12px; font-weight: 720; }
section h2 .num { font-family: var(--mono); font-size: 0.95rem; color: var(--blue); font-weight: 500; }
section .lede { color: var(--fg-dim); font-size: 1.1rem; margin: 0 0 6px; }
section h3 { font-size: 1.15rem; margin: 32px 0 8px; }
p { margin: 14px 0; }
li { margin: 7px 0; }

.callout { border-left: 3px solid var(--blue); background: var(--bg-soft); padding: 13px 17px; margin: 22px 0; border-radius: 0 10px 10px 0; color: var(--fg-dim); font-size: 0.98rem; }
.callout.try { border-color: var(--green); }
.callout.try b { color: var(--green); }
.callout.warn { border-color: var(--gold); }
.callout.warn b { color: var(--gold); }
.callout .h { display: block; color: #fff; font-weight: 650; margin-bottom: 3px; }

.formula { font-family: var(--mono); background: #080c14; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 18px 0; overflow-x: auto; font-size: 1.02rem; text-align: center; }
.formula .hl-c { color: var(--green); } .formula .hl-s { color: var(--blue); } .formula .hl-i { color: var(--gold); }
.formula .small { color: var(--fg-faint); font-size: 0.82em; margin-top: 6px; }

pre { background: #080c14; border: 1px solid var(--line); border-radius: 12px; padding: 15px 17px; overflow-x: auto; font-family: var(--mono); font-size: 0.85rem; line-height: 1.55; color: #c9d6e3; }
pre .c { color: var(--fg-faint); font-style: italic; } pre .f { color: var(--purple); }

/* ---------------- demo widget ---------------- */
.demo { background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; margin: 26px 0; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-soft), transparent); }
.demo-head .title { font-family: var(--mono); font-size: 0.82rem; color: var(--fg); letter-spacing: 0.03em; }
.demo-head .stat { font-family: var(--mono); font-size: 0.78rem; color: var(--green); text-align: right; }

.demo-grid { display: grid; grid-template-columns: 1fr 290px; }
@media (max-width: 980px) { .demo-grid { grid-template-columns: 1fr 260px; } }
@media (max-width: 720px) { .demo-grid { grid-template-columns: 1fr; } }
.canvas-col { display: flex; flex-direction: column; min-width: 0; }
.canvas-wrap { position: relative; background: #05080e; min-height: 400px; }
.canvas-wrap.solo { min-height: 320px; }
.canvas-wrap canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }

.narration { font-family: var(--mono); font-size: 0.8rem; color: var(--fg-dim); padding: 9px 14px; border-top: 1px solid var(--line); background: var(--bg-soft); min-height: 38px; display: flex; align-items: center; }
.narration::before { content: "▸"; color: var(--blue); margin-right: 8px; }

.controls { padding: 15px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 13px; background: rgba(0,0,0,0.12); }
@media (max-width: 720px) { .controls { border-left: none; border-top: 1px solid var(--line); } }
.ctrl label { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--fg); margin-bottom: 4px; font-weight: 550; }
.ctrl label .val { color: var(--blue); font-family: var(--mono); }
.ctrl .hint { font-size: 0.68rem; color: var(--fg-faint); margin-top: 3px; line-height: 1.35; }
.ctrl input[type=range] { width: 100%; accent-color: var(--blue); }
.ctrl select { width: 100%; background: var(--bg-soft); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; font-size: 0.8rem; }

.btns, .demo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-actions { padding: 12px 14px; border-top: 1px solid var(--line); background: var(--bg-soft); }
button.btn { flex: 1; min-width: 70px; background: var(--blue); color: #051018; border: none; border-radius: 9px; padding: 9px 11px; font-family: var(--mono); font-size: 0.8rem; font-weight: 650; cursor: pointer; transition: filter 0.15s, transform 0.1s; }
button.btn:hover { filter: brightness(1.12); }
button.btn:active { transform: translateY(1px); }
button.btn.ghost { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--line); }
button.btn.ghost:hover { background: var(--line); }

.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.72rem; color: var(--fg-dim); font-family: var(--mono); padding-top: 2px; }
.legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(255,255,255,0.15); }

.demo-caption { font-size: 0.9rem; color: var(--fg-dim); padding: 14px 18px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(88,166,255,0.04), transparent); }
.demo-caption b { color: #fff; }

/* live state panel inside the controls */
.statepanel { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0a0f1a; }
.sp-title { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); padding: 7px 10px 4px; }
.sp-body { padding: 2px 10px 9px; display: flex; flex-direction: column; gap: 3px; }
.sp-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 0.74rem; gap: 8px; }
.sp-row span { color: var(--fg-dim); }
.sp-row b { color: var(--blue); font-weight: 600; white-space: nowrap; }

/* equation + pseudocode blocks for the maths */
.eq { font-family: "Cambria Math", "Latin Modern Math", Georgia, serif; background: #080c14; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 10px; padding: 16px 20px; margin: 18px 0; overflow-x: auto; font-size: 1.18rem; line-height: 1.9; }
.eq .blk { display: block; }
.eq sub { font-size: 0.7em; } .eq sup { font-size: 0.72em; }
.eq .hl-i { color: var(--gold); } .eq .hl-c { color: var(--green); } .eq .hl-s { color: var(--blue); } .eq .hl-d { color: var(--purple); }
.eq .note { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--fg-faint); margin-top: 8px; line-height: 1.5; }
.vec { font-weight: 700; font-style: italic; }

/* ---------------- KaTeX / pedagogical figures (PTT style, dark) ---------------- */
section h3 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-dim); margin: 34px 0 6px; }
.mathblock { background: #080c14; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 10px; padding: 8px 18px; margin: 18px 0; overflow-x: auto; }
.mathblock .katex-display { margin: 12px 0; }
.katex { color: var(--fg); }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
/* inline math shouldn't break the line height */
.katex { font-size: 1.04em; }

.fignote { font-family: var(--mono); font-size: 0.76rem; color: var(--fg-faint); line-height: 1.65; margin: 8px 0 0; }

/* a schematic figure card: light strokes on a slightly-raised dark panel */
.fig { background: radial-gradient(120% 140% at 50% 0%, #111a2b, #0a0f1a); border: 1px solid var(--line); border-radius: 14px; padding: 16px 14px 8px; margin: 18px 0 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.fig svg { width: 100%; height: auto; display: block; overflow: visible; }
/* dark halo behind every label: stays legible even if it grazes a line */
.fig text { font-family: var(--mono); paint-order: stroke; stroke: #0b1220; stroke-width: 3px; stroke-linejoin: round; }
.fig .plain { stroke: none; }            /* opt out where no halo is wanted */
.fig .muted { fill: var(--fg-faint); }
.fig .grid { stroke: rgba(255,255,255,0.07); stroke-width: 1; }
.fig .axis { stroke: rgba(255,255,255,0.28); stroke-width: 1.2; }
.fig .ttl { fill: var(--fg-dim); font-size: 11px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
/* two-up figure rows for side-by-side schematics */
.fig-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .fig-row { grid-template-columns: 1fr; } }

.caption { text-align: center; font-size: 0.83rem; line-height: 1.6; color: var(--fg-faint); font-style: italic; max-width: 640px; margin: 0 auto 22px; }
.caption b { color: var(--fg-dim); font-style: normal; font-weight: 650; }

.pseudo { background: #080c14; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 16px 0; font-family: var(--mono); font-size: 0.8rem; line-height: 1.6; color: #c9d6e3; overflow-x: auto; }
.pseudo .kw { color: var(--red); } .pseudo .cm { color: var(--fg-faint); font-style: italic; } .pseudo .op { color: var(--gold); }
.pseudo .lbl { display: block; color: var(--fg-faint); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }

/* ---------------- comparison table ---------------- */
table.cmp { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 0.92rem; }
table.cmp th, table.cmp td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cmp th { font-family: var(--mono); font-size: 0.76rem; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.05em; }
table.cmp td:first-child { font-weight: 650; color: #fff; white-space: nowrap; }
table.cmp tr:hover td { background: var(--bg-soft); }

/* ---------------- stat strip (Delta numbers) ---------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0; }
@media (max-width: 600px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center; }
.stat-card .big { font-size: 1.5rem; font-weight: 750; color: var(--blue); font-family: var(--mono); letter-spacing: -0.02em; }
.stat-card .lbl { font-size: 0.72rem; color: var(--fg-faint); margin-top: 3px; }

footer { padding: 46px 0 70px; color: var(--fg-faint); font-size: 0.9rem; }
footer code { color: var(--fg-dim); }
.pill { font-family: var(--mono); font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-dim); }

/* ---------------- responsive / mobile ---------------- */
.sp-row span { word-break: break-word; }

@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  header.hero { padding: 54px 0 38px; }
  .hero .kicker { margin-bottom: 16px; }
  .hero h1 { font-size: 2.0rem; }
  .hero .sub { font-size: 1.04rem; }
  section { padding: 44px 0; }
  section h2 { font-size: 1.5rem; }
  section .lede { font-size: 1.02rem; }
  /* text uses the full width on small screens */
  main.wrap section > p,
  main.wrap section > ul,
  main.wrap section > ol,
  main.wrap section > .lede,
  main.wrap section > .callout,
  main.wrap section > .fignote,
  main.wrap section > h2,
  main.wrap section > h3 { max-width: 100%; }
  .mathblock { padding: 6px 12px; }
  .katex-display { font-size: 0.92em; }
  .eq { font-size: 1.02rem; padding: 14px 14px; }
  .demo { margin: 20px 0; }
  .caption { max-width: 100%; }
}

@media (max-width: 600px) {
  .hero h1 { font-size: 1.72rem; }
  .katex-display { font-size: 0.86em; }
  table.cmp { font-size: 0.82rem; }
  table.cmp th, table.cmp td { padding: 8px 8px; }
  table.cmp td:first-child { white-space: normal; }
}