:root {
  --bg: #ffffff;
  --ink: #0f1b33;
  --ink-2: #33415c;
  --muted: #6b7a93;
  --line: #e4eaf3;
  --panel: #f3f6fb;
  --plate: #ffffff;
  /* the one accent: swap this to recolour the site */
  --accent: #2257d6;
  --accent-2: #8fb0f0;
  --accent-soft: rgba(34, 87, 214, 0.08);
  --c-kw: #2257d6;
  --c-str: #0d7a6f;
  --c-num: #7a4fd0;
  --c-com: #8a97ad;

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --max: 1140px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1222;
    --ink: #e6ecf7;
    --ink-2: #b9c4d8;
    --muted: #7f8ca5;
    --line: #1c2840;
    --panel: #111b30;
    --plate: #eef2f8;
    --accent: #6c9cff;
    --accent-2: #34548f;
    --accent-soft: rgba(108, 156, 255, 0.12);
    --c-kw: #6c9cff;
    --c-str: #5cc8b8;
    --c-num: #b49cff;
    --c-com: #66748d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1222; --ink: #e6ecf7; --ink-2: #b9c4d8; --muted: #7f8ca5; --line: #1c2840;
  --panel: #111b30; --plate: #eef2f8; --accent: #6c9cff; --accent-2: #34548f; --accent-soft: rgba(108, 156, 255, 0.12);
  --c-kw: #6c9cff; --c-str: #5cc8b8; --c-num: #b49cff; --c-com: #66748d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
::selection { background: var(--accent); color: var(--bg); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 6px 10px; font-family: var(--mono); font-size: 12px; z-index: 10; }
.skip:focus { left: 8px; }

.top-nav, .ix-num, .ix-year, .proj-num, .stats dt, .built-label, .code-head, figcaption, .foot, .proj-links {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* top bar */
.top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: clamp(28px, 6vw, 64px); padding-bottom: clamp(20px, 3vw, 28px); }
.title { font-size: 24px; font-weight: 400; letter-spacing: -0.01em; margin: 0; }
.title em { color: var(--accent); }
.top-nav { display: flex; gap: 20px; color: var(--muted); }
.top-nav a { text-decoration: none; }
.top-nav a:hover { color: var(--ink); }

/* index */
.index { padding-bottom: clamp(48px, 8vw, 96px); }
.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.index-list a {
  display: grid;
  grid-template-columns: 3em minmax(0, 14em) minmax(0, 1fr) 4em;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.ix-num, .ix-year { color: var(--muted); }
.ix-year { text-align: right; }
.ix-name { font-size: 20px; letter-spacing: -0.01em; }
.ix-tag { font-size: 17px; color: var(--muted); }
.index-list a { transition: background 0.15s ease; }
.index-list a:hover { background: var(--accent-soft); }
.index-list a:hover .ix-name, .index-list a:hover .ix-num { color: var(--accent); }

/* project */
.proj { border-top: 1px solid var(--line); padding-top: clamp(36px, 5vw, 56px); padding-bottom: clamp(48px, 7vw, 88px); scroll-margin-top: 8px; }
.proj-head { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; gap: 16px; align-items: baseline; margin-bottom: clamp(22px, 3vw, 34px); }
.proj-num { color: var(--accent); }
.proj-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; }
h2 { font-weight: 400; font-size: clamp(26px, 3vw, 32px); line-height: 1.15; letter-spacing: -0.015em; margin: 0; }
.tagline { font-size: 17px; color: var(--muted); margin: 0; }
.proj-links { display: flex; gap: 18px; white-space: nowrap; }
.proj-links a { text-decoration: none; color: var(--muted); }
.proj-links a:hover { color: var(--ink); }
.proj-links a.primary { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
.proj-links a:hover { color: var(--accent); }

.proj-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4.5vw, 64px);
  margin-left: calc(3em + 16px);
}
.proj-body > * { min-width: 0; }
.summary { margin: 0 0 24px; hyphens: auto; }

.stats { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 0 0 24px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats div { min-width: 0; display: flex; flex-direction: column-reverse; }
.stats dd { margin: 0; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
.stats dt { color: var(--muted); margin-top: 3px; }

.eq { margin: 0 0 24px; padding: 16px; background: var(--panel); border-radius: 2px; overflow-x: auto; overflow-y: hidden; font-size: 15px; }
.eq .katex-display { margin: 0; }
.eq .katex { font-size: 1.1em; }
.eq.raw { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; }

.built-label { color: var(--muted); margin: 0 0 8px; }
.built { list-style: none; margin: 0; padding: 0; font-size: 16.5px; }
.built li { position: relative; padding: 5px 0 5px 18px; color: var(--ink-2); }
.built li::before { content: "–"; position: absolute; left: 0; color: var(--accent); }

/* visuals */
.visual { display: flex; flex-direction: column; gap: 20px; }
figure { margin: 0; }
.fig-frame { background: var(--panel); border-radius: 2px; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.fig-frame.plate { background: var(--plate); padding: clamp(10px, 2vw, 18px); }
.fig-frame img { display: block; width: 100%; height: auto; }
.fig-frame.narrow img { max-width: 380px; }
.fig-frame.pixel img { image-rendering: pixelated; max-width: 300px; }
.fig-frame.diagram { padding: clamp(12px, 2.4vw, 24px); color: var(--ink); }
.fig-frame.diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
figcaption { color: var(--muted); margin-top: 8px; line-height: 1.5; }

.sample { background: var(--panel); border-radius: 2px; padding: 20px 22px; font-size: 18px; line-height: 1.55; font-style: italic; color: var(--ink-2); }
.sample p { margin: 0; }
.sample .cursor { display: inline-block; width: 0.45em; height: 1.05em; vertical-align: -0.15em; background: var(--accent); margin-left: 2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sample .cursor { animation: none; } }

/* code */
.code { border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.code-head { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--muted); }
.code-head .file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-head a { text-decoration: none; white-space: nowrap; }
.code-head a:hover { color: var(--accent); }
.code pre { margin: 0; padding: 12px 0; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; tab-size: 4; color: var(--ink-2); }
.code code { display: block; min-width: max-content; }
.ln { display: block; padding: 0 18px 0 0; }
.ln::before { content: attr(data-n); display: inline-block; width: 3.6em; padding-right: 1.2em; text-align: right; color: var(--muted); opacity: 0.6; user-select: none; }
.code.nb .ln::before { content: ""; width: 1.4em; padding-right: 0; }
.gap { display: block; color: var(--muted); padding-left: 1.2em; user-select: none; }
.code.nb .gap { padding-left: 1.4em; }
.tk-kw { color: var(--c-kw); }
.tk-fn { color: var(--ink); font-weight: 500; }
.tk-self { color: var(--c-kw); font-style: italic; }
.tk-str { color: var(--c-str); }
.tk-num { color: var(--c-num); }
.tk-com { color: var(--c-com); font-style: italic; }

/* diagrams */
.dg-line { stroke: var(--muted); stroke-width: 1.1; fill: none; }
.dg-line.hl { stroke: var(--accent); stroke-width: 1.4; }
.dg-box { fill: var(--bg); stroke: var(--ink); stroke-width: 1; }
.dg-box.soft { stroke: var(--line); }
.dg-box.on { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; }
.dg-frozen { fill: var(--panel); stroke: var(--muted); stroke-width: 1; }
.dg-hatch { stroke: var(--line); stroke-width: 1; }
.dg-t { fill: var(--ink); font-family: var(--serif); font-size: 16px; }
.dg-tm { fill: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.dg-ta { fill: var(--accent); font-family: var(--mono); font-size: 11.5px; }
.dg-op { fill: var(--ink); font-family: var(--serif); font-size: 17px; font-style: italic; }
.dg-bar { fill: var(--line); }
.dg-bar.on { fill: var(--accent); }
.dg-arrow { fill: var(--muted); }

/* footer */
.foot { border-top: 1px solid var(--line); padding-top: 20px; padding-bottom: 48px; color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
.foot p { margin: 0; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--accent); }

/* responsive */
@media (max-width: 960px) {
  .proj-body { grid-template-columns: minmax(0, 1fr); margin-left: 0; }
  .visual { order: -1; }
  .index-list a { grid-template-columns: 2.6em minmax(0, 1fr) auto; }
  .ix-tag { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .fig-frame.diagram { justify-content: flex-start; overflow-x: auto; }
  .fig-frame.diagram svg { min-width: 520px; }
  .proj-head { grid-template-columns: 2.4em minmax(0, 1fr); gap: 8px; }
  .proj-links { grid-column: 2; }
  .index-list a { grid-template-columns: 2.4em minmax(0, 1fr); gap: 8px; }
  .ix-year { display: none; }
  .ix-name { font-size: 19px; }
  .code pre { font-size: 11.5px; }
  .foot { flex-direction: column; }
}

/* ---------- interactive widgets ---------- */
.wfig figcaption { margin-top: 10px; }
.widget { display: flex; flex-direction: column; gap: 12px; }
.widget .wnote { font-family: var(--mono); font-size: 12px; color: var(--muted); line-height: 1.55; margin: 0; }
.wbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.wread { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

.seg, .chips { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; background: var(--bg); }
.seg button, .chips button, .wbtn {
  font: 500 12px/1 var(--mono); letter-spacing: 0.01em; color: var(--muted);
  background: none; border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.seg button:hover, .chips button:hover { color: var(--ink); }
.seg button[aria-pressed="true"], .chips button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.wbtn { border: 1px solid var(--accent); color: var(--accent); }
.wbtn:hover { background: var(--accent); color: #fff; }
.wbtn.ghost { border-color: var(--line); color: var(--muted); }
.wbtn.ghost:hover { background: var(--panel); color: var(--ink); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rng { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.rng input { width: clamp(120px, 22vw, 200px); accent-color: var(--accent); }
.rng output { color: var(--ink); min-width: 2.6em; font-variant-numeric: tabular-nums; }

.dg-arrow.hl { fill: var(--accent); }

/* reifusion pipeline */
.pipe { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 14px 20px; background: var(--panel); padding: 16px; border-radius: 4px; }
.pipe-img { grid-row: 1 / span 2; }
.pipe-img img { display: block; width: 100%; height: auto; border-radius: 2px; }
.pipe-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pipe-steps button { width: 100%; text-align: left; display: flex; gap: 10px; align-items: center; font: 15px/1.2 var(--serif); color: var(--ink-2); background: none; border: 1px solid transparent; border-radius: 4px; padding: 7px 10px; cursor: pointer; }
.pipe-steps button:hover { background: var(--bg); }
.pipe-steps button[aria-pressed="true"] { background: var(--bg); border-color: var(--accent); color: var(--ink); }
.pipe-n { font: 11px var(--mono); color: var(--muted); width: 1.4em; }
.pipe-steps button[aria-pressed="true"] .pipe-n { color: var(--accent); }
.pipe-detail { border-top: 1px solid var(--line); padding-top: 12px; }
.pipe-shape { font: 500 15px var(--mono); color: var(--accent); margin: 0 0 6px; }
.pipe-text { font-size: 15.5px; line-height: 1.5; margin: 0 0 6px; color: var(--ink-2); }

/* DDPM */
.ddpm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; background: var(--panel); padding: 16px; border-radius: 4px; }
.ddpm canvas { width: 100%; max-width: 300px; aspect-ratio: 1; border-radius: 2px; image-rendering: auto; justify-self: center; background: var(--line); }
.ddpm-t { font: 13px var(--mono); color: var(--muted); margin: 0 0 10px; }
.ddpm-t b { color: var(--ink); font-weight: 500; font-size: 22px; }
.ddpm-read { margin: 0 0 14px; display: grid; gap: 6px; }
.ddpm-read div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.ddpm-read dt { font: 12px var(--mono); color: var(--muted); }
.ddpm-read dd { margin: 0; font: 500 13px var(--mono); color: var(--accent); }
.ddpm-chart { width: 100%; height: auto; overflow: visible; }
.ddpm-nb { margin-top: 4px; }
.ddpm-nb img { display: block; width: 100%; height: auto; background: var(--plate); padding: 8px; border-radius: 2px; }

/* positional encoding */
.pe { background: var(--panel); padding: 16px; border-radius: 4px; display: flex; flex-direction: column; gap: 10px; }
.pe canvas { width: 100%; height: auto; display: block; border-radius: 2px; cursor: crosshair; image-rendering: pixelated; }
.pe-line { width: 100%; height: auto; display: block; overflow: visible; }

/* causal mask */
.causal { background: var(--panel); padding: 16px; border-radius: 4px; display: flex; flex-direction: column; gap: 12px; }
.causal-h { font: 12px var(--mono); color: var(--muted); margin: 0; }
.causal-row { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: 2px; }
.causal-row button { font: 500 13px var(--mono); padding: 7px 0; border: 0; border-radius: 3px; background: var(--bg); color: var(--ink-2); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.causal-row button.k { background: var(--accent-soft); color: var(--accent); }
.causal-row button.q { background: var(--accent); color: #fff; }
.causal-row button.x { color: var(--muted); opacity: 0.45; }
.causal-grid { display: grid; gap: 1px; aspect-ratio: 1; max-width: 220px; }
.causal-grid i { background: var(--bg); border-radius: 1px; }
.causal-grid i.tri { background: var(--accent-2); opacity: 0.45; }
.causal-grid i.row { background: var(--accent); }

/* FrozenLake */
.lake-wrap { background: var(--panel); padding: 16px; border-radius: 4px; display: flex; justify-content: center; }
.lake { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: min(100%, 340px); aspect-ratio: 1; }
.lake .cell { position: relative; border-radius: 4px; display: flex; align-items: center; justify-content: center; font: 500 20px var(--mono); color: var(--ink); background: color-mix(in srgb, var(--accent) calc(var(--q, 0) * 38%), var(--bg)); border: 1px solid var(--line); }
.lake .cell.H { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line) 6px 7px); border: 1px dashed var(--muted); color: var(--muted); }
.lake .cell.G { background: var(--accent); border-color: var(--accent); color: #fff; }
.lake .cell .lbl { position: relative; z-index: 1; }
.lake .cell .lbl.txt { font-size: 11px; letter-spacing: 0.04em; }
.lake .agent { position: absolute; inset: 22%; border-radius: 50%; background: #ffcf3f; box-shadow: 0 0 0 3px rgba(255, 207, 63, 0.35); }

@media (max-width: 640px) {
  .pipe, .ddpm { grid-template-columns: minmax(0, 1fr); }
  .pipe-img { grid-row: auto; max-width: 260px; }
  .causal-row button { font-size: 11px; padding: 6px 0; }
  .rng input { width: 140px; }
}
.fig-frame.diagram > div { width: 100%; }