/* Layout: one 720px reading column; figures break out to 1080px; a contents rail sits left of the column on wide screens.
   Color: two "channels" from the subject itself. Amber = what the video shows (observation), blue = what the simulator predicts. */
:root {
  --bg: #f3f5f4;
  --surface: #ffffff;
  --surface-2: #e8edeb;
  --band: #e4eae8;
  --ink: #131d1e;
  --muted: #566664;
  --line: #d3dbd9;
  --sim: #1b5d88;
  --sim-soft: #dbe8f1;
  --src: #ad5d16;
  --src-soft: #f4e4d3;
  --good: #2c7a4b;
  --bad: #b03636;
  --warn: #946712;
  --placeholder: #7a5aa8;
  --cam2: #7d55c7;   /* the unseen view (Motivation 03) */
  --s-codex: #eb6834;
  --s-r90: #2a78d6;
  --s-r96: #2a78d6;
  --text: #2b3637;     /* prose, a step below --ink */
  --accent: #18705d;   /* section numbers, run-in heads and list markers */
  /* Wordmark: softly shaded silver, with a muted teal finish on the first swinging ball. */
  --cr-steel-1: #f5f7f6; --cr-steel-2: #dbe2df; --cr-steel-3: #b9c5c0; --cr-steel-4: #96a69e;
  --cr-accent-1: #abc5bb; --cr-accent-2: #779d8e; --cr-accent-3: #557b6c; --cr-accent-4: #3c6053;
  --cr-engrave: #263b34; --cr-accent-letter: #f5f8f6;
  --cr-metal-1: #a3afad; --cr-metal-2: #566362; --cr-metal-3: #273130;
  --cr-string: #7d8b89; --cr-shadow: #0b1a1c;
  --cr-teal: #33c9a6; --cr-amber: #f6b840; --cr-blue: #5ba6f5; --cr-pink: #f47ba8; --cr-green: #86cc5c;   /* legacy wordmark lab palettes */

  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --body: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* One content width for every module (text, figures, tables), as on the reference page. */
  --col: 1100px;
  --wide: 1100px;
  --radius: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1415; --surface: #151e20; --surface-2: #1c2729; --band: #131b1d; --ink: #e2eae8; --muted: #93a4a1; --line: #2a393b;
    --sim: #72b2de; --sim-soft: #17303f; --src: #e39b58; --src-soft: #3a2817;
    --good: #6cc492; --bad: #ef8282; --warn: #dcb25e; --placeholder: #b79be0; --cam2: #b294ee;
    --s-codex: #d95926; --s-r90: #3987e5; --s-r96: #3987e5;
    --text: #c9d3d1; --accent: #5cc7ab;
    --cr-steel-1: #dce4e0; --cr-steel-2: #bbc9c2; --cr-steel-3: #9aada2; --cr-steel-4: #788d80;
    --cr-accent-1: #b5cdc2; --cr-accent-2: #85aa99; --cr-accent-3: #608673; --cr-accent-4: #466a58;
    --cr-engrave: #1d3027;
    --cr-metal-1: #8d9b99; --cr-metal-2: #3f4c4b; --cr-metal-3: #1a2223;
    --cr-string: #6c7c79; --cr-shadow: #000;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1415; --surface: #151e20; --surface-2: #1c2729; --band: #131b1d; --ink: #e2eae8; --muted: #93a4a1; --line: #2a393b;
  --sim: #72b2de; --sim-soft: #17303f; --src: #e39b58; --src-soft: #3a2817;
  --good: #6cc492; --bad: #ef8282; --warn: #dcb25e; --placeholder: #b79be0; --cam2: #b294ee;
  --s-codex: #d95926; --s-r90: #3987e5; --s-r96: #3987e5;
  --text: #c9d3d1; --accent: #5cc7ab;
  --cr-steel-1: #dce4e0; --cr-steel-2: #bbc9c2; --cr-steel-3: #9aada2; --cr-steel-4: #788d80;
  --cr-accent-1: #b5cdc2; --cr-accent-2: #85aa99; --cr-accent-3: #608673; --cr-accent-4: #466a58;
  --cr-engrave: #1d3027;
  --cr-metal-1: #8d9b99; --cr-metal-2: #3f4c4b; --cr-metal-3: #1a2223;
  --cr-string: #6c7c79; --cr-shadow: #000;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.7 var(--body); text-rendering: optimizeLegibility;
  padding-inline: 20px;
}
img, video, canvas { display: block; max-width: 100%; }
button, select, input { font: inherit; color: inherit; }
a { color: var(--sim); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--sim); outline-offset: 3px; }
code, kbd, .mono { font-family: var(--mono); font-size: .86em; }
p code, li code, td code { padding: .05em .3em; background: var(--surface-2); border-radius: 3px; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.2; }
h2 { font: 500 34px/1.15 var(--display); letter-spacing: -.01em; margin: 0 0 18px; }
h3 { font: 600 21px/1.3 var(--body); margin: 0 0 10px; }
h4 { font: 600 16px/1.4 var(--body); margin: 22px 0 6px; }
p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li + li { margin-top: 6px; }
strong { font-weight: 600; }
/* Prose a step lighter than the headings with its bold terms at full ink; run-in heads and list markers in the accent;
   the two systems, in the comparison text and table, in the colours of their figure labels. */
.col > p, .col > ul > li, .col > ol > li, ol.tldr li { color: var(--text); }
.col > p strong, .col li strong { color: var(--ink); }
.col li > strong:first-child, .col .prob-n + strong { color: var(--accent); }
.col ul > li::marker { color: var(--accent); }
.sys-codex { color: var(--bad); font-weight: 600; }
.sys-plumb { color: var(--sim); font-weight: 600; }

.skip-link { position: fixed; left: 16px; top: -60px; z-index: 50; padding: 8px 12px; background: var(--ink); color: var(--bg); }
.skip-link:focus { top: 12px; }

/* Placeholder marker: everything that still needs real content */
.ph { color: var(--placeholder); border-bottom: 1px dashed currentColor; font-style: normal; }
.ph-box {
  display: grid; place-items: center; text-align: center; gap: 6px;
  min-height: 160px; padding: 20px; border: 1.5px dashed var(--placeholder);
  border-radius: var(--radius); color: var(--placeholder); font: 500 14px/1.5 var(--mono);
  background: color-mix(in srgb, var(--placeholder) 6%, transparent);
}

/* ---------- page frame ---------- */
.page { max-width: var(--wide); margin: 0 auto; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.article { min-width: 0; }
.col, .wide { max-width: var(--wide); margin-inline: 0; }
/* Sections: alternate full-bleed bands (box-shadow spread clipped to the section's height, so no horizontal
   overflow), numbered headings. The counter skips the citation. */
.article { counter-reset: section; }
section.block { padding-block: 84px 60px; }
section.block:nth-of-type(odd) { background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
section.block:not(#citation) { counter-increment: section; }
section.block > .col > h2 { font-size: clamp(34px, 3.6vw, 44px); margin-bottom: 26px; }
section.block:not(#citation) > .col > h2::before {
  content: counter(section, decimal-leading-zero);
  display: inline-grid; place-items: center; width: 2.3em; height: 2.3em; margin-right: .9em; vertical-align: .55em;
  border-radius: 5px; background: var(--accent); color: var(--bg); font: 600 .36em/1 var(--mono); letter-spacing: 0;
}

/* ---------- header ---------- */
.hero { padding-block: 48px 8px; }
/* The title stays on one line from ~650px viewports up (it is ~29.3em wide); narrower screens wrap. */
h1 { margin: 0; font: 400 clamp(22px, 3.2vw, 36px)/1.15 var(--display); letter-spacing: -.015em; }
/* the P of Physics in the title, green like the P ball above it (in the page accent: the ball's own sage is too faint as text) */
h1 .h1-p { color: var(--accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Wordmark: the five letters of Plumb on the balls of a Newton's cradle (assets/cradle.js), hanging on strings from
   the top of the page (they and the swings draw outside the svg box); the title follows. On a phone the row is
   centred and smaller, leaving room for the end balls to swing out. */
.hero .cradle { margin-bottom: 16px; }
.cradle { display: block; width: min(100%, 320px); height: auto; overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cr-ball { cursor: grab; touch-action: none; }
.cradle.dragging, .cradle.dragging .cr-ball { cursor: grabbing; }
.cr-letter { font: 500 34px var(--body); text-anchor: middle; fill: var(--cr-engrave); }
.cr-ball-accent .cr-letter { fill: var(--cr-accent-letter); }
.cr-rim { fill: none; stroke: var(--cr-engrave); stroke-opacity: .16; stroke-width: .7; }
.cr-eye { fill: var(--cr-metal-2); }
.cr-eye-ring { fill: none; stroke: var(--cr-metal-2); stroke-width: 1.6; }
.cr-string { stroke: var(--cr-string); stroke-width: 1.3; }
@media (max-width: 640px) { .cradle { width: min(72%, 320px); margin-inline: auto; } }
.cr-ball-shadow { fill: var(--cr-shadow); opacity: .11; }
.cr-string-shadow { stroke: var(--cr-shadow); stroke-width: 1.3; opacity: .04; }
.cradle-ctl { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 12px/1.4 var(--mono); color: var(--muted); }
.cradle-ctl button { font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.cradle-ctl button:hover { border-color: var(--muted); }
.authors { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 16px; }
.authors a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.authors a:hover, .authors a:focus-visible { color: var(--sim); border-bottom-color: currentColor; }
.affil { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 2px 18px; color: var(--muted); font-size: 14px; }
.authors sup, .affil sup { margin-left: 1px; font-size: .68em; color: var(--sim); }
.affil sup { margin: 0 2px 0 0; }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 20px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--bg); text-decoration: none;
  font: 500 14px/1.3 var(--body); cursor: pointer;
}
.btn:hover { background: var(--sim); border-color: var(--sim); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--sim); color: var(--sim); background: transparent; }
.btn svg { width: 16px; height: 16px; fill: currentColor; }
.btn[disabled] { opacity: .5; cursor: default; }
/* A button without a link yet (arXiv): no hover change, and a quieter "coming soon" label. */
.btn:not([href]) { cursor: default; }
.btn:not([href]):hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn .soon { font-size: 12px; opacity: .7; }
.hero-text { max-width: var(--wide); }
.tldr { margin: 28px 0 0; padding: 14px 20px; background: var(--surface); border-left: 3px solid var(--accent); font-size: 19px; line-height: 1.55; }
ol.tldr { padding: 14px 20px 14px 44px; }
ol.tldr li + li { margin-top: 6px; }
ol.tldr li::marker { color: var(--accent); font: 600 .8em var(--mono); }

/* ---------- featured comparison ---------- */
.featured { margin-top: 36px; }
.demo-video { margin: 32px 0 0; }
.demo-frame { position: relative; border-radius: 6px; overflow: hidden; background: #0b0f10; }
.demo-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0b0f10; }
.demo-frame::after { content: ""; position: absolute; inset: 0; background: rgba(6, 10, 12, .28); pointer-events: none; transition: opacity .2s; }
.demo-frame.playing::after { opacity: 0; }
.demo-play { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 22px 10px 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(10, 16, 20, .72); color: #fff;
  font: 600 17px/1 var(--body); cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 8px 28px rgba(0, 0, 0, .35); transition: transform .15s, background .15s; }
.demo-play:hover, .demo-play:focus-visible { transform: translate(-50%, -50%) scale(1.04); background: rgba(10, 16, 20, .86); }
.demo-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.demo-play-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.demo-play-icon svg { width: 20px; height: 20px; margin-left: 3px; fill: #0b0f10; }
.demo-play-time { font: 500 13px/1 var(--mono); opacity: .75; }
.demo-frame.playing .demo-play { display: none; }
.case-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.case-tab {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border: 1px solid var(--line);
  background: var(--surface); border-radius: var(--radius); cursor: pointer; text-align: left; font-size: 13px; line-height: 1.3;
}
.case-tab img { width: 64px; height: 40px; object-fit: cover; border-radius: 3px; background: var(--surface-2); }
.case-tab small { display: block; color: var(--muted); font: 500 11px/1.3 var(--mono); letter-spacing: .04em; }
.case-tab[aria-pressed="true"] { border-color: var(--sim); box-shadow: inset 0 0 0 1px var(--sim); }
.stage-frame { background: #0b0f10; border-radius: var(--radius); overflow: hidden; }
.stage-frame video { width: 100%; height: auto; }
.channel-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font: 500 12px/1.4 var(--mono); color: var(--muted); }
.channel-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.channel-legend .src::before { background: var(--src); }
.channel-legend .sim::before { background: var(--sim); }
.case-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font: 500 12.5px/1.5 var(--mono); color: var(--muted); }
.case-meta b { color: var(--ink); font-weight: 600; }

/* ---------- motivation: failure cards ---------- */
.failure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 12px; margin: 20px 0 24px; }
.failure { padding: 14px 16px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.failure h4 { margin: 0 0 4px; font-size: 15px; }
.failure p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.failure .value { display: block; margin: 6px 0 6px; font: 500 17px/1.3 var(--mono); color: var(--bad); letter-spacing: -.01em; }
.failure .cases { display: block; margin-top: 8px; font: 500 11.5px/1.4 var(--mono); color: var(--muted); letter-spacing: .03em; }
.failure .n { display: block; font: 600 12px/1 var(--mono); letter-spacing: .1em; color: var(--bad); margin-bottom: 8px; }
.failure p.stmt { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.failure p.stmt b { display: block; margin-bottom: 2px; font-size: 17px; }
/* Motivation 05: Codex's saved fits, one dot each */
.search-chart { margin: 18px 0 0; padding: 14px 16px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.search-chart figcaption { font-size: 13.5px; color: var(--muted); }
.search-chart figcaption b { margin-right: 8px; color: var(--ink); font-weight: 600; }
.search-plot { margin-top: 6px; min-height: 270px; }
.search-plot svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.search-plot text { fill: var(--muted); font: 500 11px var(--mono); }
.search-plot text.note { fill: var(--ink); font-weight: 600; }
.search-plot .grid { stroke: var(--line); stroke-width: 1; }
.search-plot .best { stroke: var(--sim); stroke-width: 1.5; stroke-dasharray: 4 3; }
.search-plot .explore { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; opacity: .55; }
.search-plot .gap { stroke: var(--bad); stroke-width: 1.5; }
.search-plot text.gap-l { fill: var(--bad); font-weight: 600; }
.search-plot text.note.bad { fill: var(--bad); }
.search-plot .dot { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.search-plot .dot.best-dot { fill: var(--sim); stroke: var(--surface); }
.search-plot .dot.delivered { fill: var(--bad); stroke: var(--surface); }
/* Motivation 01: domino count, video / Codex / Plumb */
.countfig { margin: 8px 0 0; }
.countfig a { display: block; cursor: zoom-in; }
.countfig img { display: block; width: 100%; height: auto; border-radius: 4px; }
/* Motivation 03: camera trajectory */
.cam-traj { margin: 0; max-width: 560px; min-width: 0; padding: 12px 14px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); align-self: start; }
.cam-traj .label { color: var(--ink); }
.cam3d { max-width: none; }
.cam3d-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.camviz { width: 100%; aspect-ratio: 16 / 9; background: #0b0f10; border-radius: 4px; overflow: hidden; color: #cfd6d8; font-size: 14px; }
.camviz canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; }
.cam-plot { display: flex; justify-content: center; }
.cam-plot svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.cam-plot text { fill: var(--muted); font: 500 11px var(--mono); }
.cam-plot text.note, .cam-plot text.tick-l { fill: var(--ink); font-weight: 600; }
.cam-plot .grid { stroke: var(--line); stroke-width: 1; }
.cam-plot .traj { fill: none; stroke: var(--sim); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cam-plot .tick { fill: var(--surface); stroke: var(--sim); stroke-width: 2; }
.cam-plot .dot.sim { fill: var(--sim); stroke: var(--surface); stroke-width: 2.5; }
.cam-plot .codex-mark path { stroke: var(--bad); stroke-width: 3; stroke-linecap: round; }
.cam-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.cam-key span { display: inline-flex; align-items: center; gap: 6px; }
.cam-key .sw { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.cam-key .sw.sim { background: var(--sim); } .cam-key .sw.bad { background: var(--bad); }
.cam-readout { margin: 4px 0 0; min-height: 1.3em; font: 500 12px var(--mono); color: var(--ink); }
/* numbers for the problems told in the text, in the same style as the cards above */
.prob-n { margin-right: 10px; font: 600 12px/1 var(--mono); letter-spacing: .1em; color: var(--accent); vertical-align: 1px; }
.principles { list-style: none; padding: 0; display: grid; gap: 14px; margin: 22px 0 26px; }
.principles li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.principles .k { font: 600 13px/1.9 var(--mono); color: var(--sim); }
.principles b { display: block; }
.versus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 8px; }
.versus figure { margin: 0; min-width: 0; }
figure.ph-box { margin: 18px 0; }
.versus video, .versus .ph-box { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #0b0f10; border-radius: 4px; }
.versus .ph-box { background: color-mix(in srgb, var(--placeholder) 6%, transparent); min-height: 0; }
.versus.wide16 video, .versus.wide16 .ph-box { aspect-ratio: 16 / 9; }
.errfig { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px 16px; margin-top: 8px; }
.errfig-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.errfig figure { margin: 0; min-width: 0; }
.errfig a { display: block; cursor: zoom-in; }
.errfig video, .errfig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0b0f10; border-radius: 4px; }
.errfig .label { font: 600 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; display: block; }
.errfig .label.src { color: var(--src); } .errfig .label.bad { color: var(--bad); } .errfig .label.sim { color: var(--sim); }
.errfig figcaption { margin-top: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.versus figcaption { margin-top: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.versus .label { font: 600 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; display: block; }
.versus .label.src { color: var(--src); } .versus .label.sim { color: var(--sim); } .versus .label.bad { color: var(--bad); }

/* ---------- workflow diagram ---------- */
.flow { margin: 26px 0 24px; }
.flow-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; position: relative; }
.flow-stage { position: relative; padding: 12px 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.flow-stage .n { font: 600 11px/1 var(--mono); color: var(--muted); letter-spacing: .1em; }
.flow-stage h3 { font-size: 17px; margin: 6px 0 2px; }
.flow-stage .note { font-size: 12.5px; line-height: 1.4; color: var(--muted); margin: 0 0 10px; }
.flow-stage.obs { border-top: 3px solid var(--src); }
.flow-stage.agent { border-top: 3px solid var(--ink); }
.flow-stage.eval { border-top: 3px solid var(--sim); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { display: inline-block; padding: 2px 7px; border-radius: 3px; background: var(--surface-2); font: 500 11.5px/1.5 var(--mono); color: var(--ink); text-decoration: none; }
a.chip:hover { background: var(--sim-soft); color: var(--sim); }
.flow-stage + .flow-stage::before {
  content: ""; position: absolute; left: -10px; top: 24px; width: 10px; height: 2px; background: var(--muted);
}
/* a toolkit, not a pipeline: four groups, no arrows between them */
.flow-stages.toolkit { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flow-stages.toolkit .flow-stage h3 { margin-top: 0; }
.flow-stages.toolkit .flow-stage + .flow-stage::before { content: none; }
@media (max-width: 760px) { .flow-stages.toolkit { grid-template-columns: minmax(0, 1fr); } }
.flow-loops { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.loop { grid-row: 1; padding: 6px 10px; border: 1.5px dashed var(--line); border-top: 0; border-radius: 0 0 10px 10px; font: 500 12px/1.4 var(--mono); color: var(--muted); text-align: center; }
.loop b { color: var(--ink); font-weight: 600; }
.loop.inner { grid-column: 2 / 4; border-color: var(--ink); }
.loop.outer { grid-column: 2 / 5; grid-row: 2; border-color: var(--sim); margin-top: 6px; }
.loop.outer b { color: var(--sim); }
@media (max-width: 760px) {
  .flow-stages { grid-template-columns: minmax(0, 1fr); }
  .flow-stage + .flow-stage::before { left: 22px; top: -10px; width: 2px; height: 10px; }
  .flow-loops { grid-template-columns: minmax(0, 1fr); }
  .loop.inner, .loop.outer { grid-column: 1; grid-row: auto; border-radius: 6px; border-top: 1.5px dashed; }
  .loop.inner { border-color: var(--ink); } .loop.outer { border-color: var(--sim); }
}

/* ---------- walkthrough (interactive run timeline) ---------- */
.walk { margin: 30px 0 12px; padding: 18px 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.walk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 14px; }
.walk-head h3 { margin: 0; font: 500 24px/1.2 var(--display); }
.walk-head .sub { font: 500 12.5px/1.4 var(--mono); color: var(--muted); }
.walk-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.icon-btn { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 17px; background: var(--bg); cursor: pointer; font: 500 13px/1 var(--mono); }
.icon-btn:hover { border-color: var(--sim); color: var(--sim); }
.icon-btn[aria-pressed="true"] { background: var(--sim); border-color: var(--sim); color: #fff; }
.step-count { font: 500 12.5px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }

.track-wrap { overflow-x: auto; padding-bottom: 4px; }
.track { position: relative; display: flex; gap: 3px; min-width: 560px; height: 46px; }
.seg {
  position: relative; flex: var(--w, 1) 1 0; min-width: 22px; border: 0; padding: 0 6px; border-radius: 4px;
  cursor: pointer; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 600 11.5px/46px var(--mono); color: var(--ink);
}
.seg.init { background: var(--src-soft); }
.seg.round { background: var(--sim-soft); }
.seg.round.obs { background: repeating-linear-gradient(135deg, var(--sim-soft) 0 6px, var(--surface-2) 6px 12px); }
.seg.deliver { background: var(--surface-2); flex: 0 0 64px; }
.seg.concl { flex: 0 0 66px; }
.seg.init { color: var(--src); }
.seg .fill { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, currentColor 14%, transparent); pointer-events: none; }
.seg.init .fill { color: var(--src); }
.seg.round .fill, .seg.deliver .fill { color: var(--sim); }
.seg.done .fill { width: 100%; }
.seg.current { box-shadow: inset 0 0 0 2px var(--ink); }
.seg.delivered { box-shadow: inset 0 -3px 0 var(--sim); }
.seg.delivered.current { box-shadow: inset 0 0 0 2px var(--ink), inset 0 -4px 0 var(--sim); }
.axis { position: relative; height: 18px; min-width: 560px; font: 500 11px/18px var(--mono); color: var(--muted); }
.axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.axis span:first-child { transform: none; }
.track-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; font: 500 11.5px/1.4 var(--mono); color: var(--muted); }
.track-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

.walk-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; }
@media (min-width: 900px) { .walk-body.has-media { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.walk-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; }
.walk-title h4 { margin: 0; font: 600 18px/1.3 var(--body); }
.walk-title .when { font: 500 12px/1.4 var(--mono); color: var(--muted); }
.rer { display: grid; gap: 10px; }
.rer-item { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 5px; background: var(--bg); font-size: 14.5px; line-height: 1.55; }
.rer-item > b { font: 600 11px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.rer-item.why > b { color: var(--src); }
.rer-item.decide > b { color: var(--good); }
.rer-item.expect > b { color: var(--ink); }
.rer-item.result > b { color: var(--sim); }
.rer-item ul { margin: 6px 0 0; padding-left: 18px; }
.rer-item li + li { margin-top: 2px; }
.metrics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.metric { padding: 2px 8px; border-radius: 3px; border: 1px solid var(--line); font: 500 12px/1.6 var(--mono); font-variant-numeric: tabular-nums; background: var(--surface); }
.metric.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.metric.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.walk-media video, .walk-media img { width: 100%; border-radius: 5px; background: #0b0f10; }
.walk-media figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.walk-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }
.scene-edit { min-width: 0; padding: 10px 12px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.scene-edit h5 { margin: 0 0 6px; font: 600 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.scene-edit h5 span { margin-left: 6px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.scene-edit table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; }
.scene-edit th, .scene-edit td { padding: 5px 0; vertical-align: top; text-align: left; border-top: 1px solid var(--line); }
.scene-edit th { width: 42%; padding-right: 10px; font-weight: 500; color: var(--muted); }
.scene-edit .arrow { color: var(--sim); }
.scene-edit pre.diff {
  margin: 4px -12px -8px; max-height: 300px; overflow: auto; padding: 8px 0; border-top: 1px solid var(--line);
  background: var(--bg); border-radius: 0 0 5px 5px; font: 11.5px/1.55 var(--mono);
}
.scene-edit pre.diff code { display: block; min-width: max-content; }
.scene-edit pre.diff span { display: block; padding: 0 12px; white-space: pre; }
.scene-edit pre.diff .meta { color: var(--muted); }
.scene-edit pre.diff .del { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.scene-edit pre.diff .add { color: var(--good); background: color-mix(in srgb, var(--good) 11%, transparent); }
.walk-media { position: relative; }
.walk-media img { cursor: zoom-in; }
.zoom-btn {
  position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .35); background: rgb(11 15 16 / .62); color: #fff;
  font-size: 16px; line-height: 1; cursor: zoom-in;
}
.zoom-btn:hover, .zoom-btn:focus-visible { background: rgb(11 15 16 / .85); }
/* Enlarged figure */
.lightbox { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.lightbox::backdrop { background: rgb(8 12 13 / .84); }
.lightbox img, .lightbox video {
  display: block; width: min(96vw, 1280px); height: auto; max-height: 86vh; object-fit: contain; border-radius: 6px;
}
.lb-cap { color: #e6ecea; font-size: 13.5px; margin: 8px 4px 0; text-align: center; }
.lb-close {
  position: absolute; top: 8px; right: 8px; z-index: 1; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: var(--surface); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / .35);
}
.init-stages { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.init-stages td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.init-stages td:first-child { font-weight: 600; white-space: nowrap; }
.init-stages td.t { font: 500 12px/1.6 var(--mono); text-align: right; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.init-stages tr.hl td { background: var(--src-soft); }
.obj-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.obj { padding: 3px 8px; border-radius: 3px; background: var(--bg); border: 1px solid var(--line); font: 500 12px/1.5 var(--mono); }
.obj em { font-style: normal; color: var(--muted); }
.img-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.img-pair figure { margin: 0; }
.img-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.init-stages td:nth-child(2) { min-width: 260px; }
.ade-chart { margin-top: 16px; }
.ade-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.ade-chart text { fill: var(--muted); font: 500 11px var(--mono); }
.ade-chart .grid { stroke: var(--line); stroke-width: 1; }
.ade-chart .line { fill: none; stroke: var(--sim); stroke-width: 2; }
.ade-chart .best { fill: none; stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ade-chart .dot { fill: var(--surface); stroke: var(--sim); stroke-width: 2; cursor: pointer; }
.ade-chart .dot.on { fill: var(--sim); }
.walk-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
details.more { margin-top: 10px; font-size: 14px; }
details.more summary { cursor: pointer; font: 500 12.5px/1.6 var(--mono); color: var(--muted); }

/* ---------- tool sections ---------- */
.tool { padding-block: 22px 16px; }
/* Tools are collapsed by default: the stage strip and heading form the toggle. */
.tool > details > summary { position: relative; padding-right: 36px; list-style: none; cursor: pointer; }
.tool > details > summary::-webkit-details-marker { display: none; }
.tool > details > summary h3 { margin: 0; }
.tool > details > summary::after {
  content: ""; position: absolute; right: 8px; bottom: 9px; width: 9px; height: 9px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s;
}
.tool > details[open] > summary::after { bottom: 4px; transform: rotate(-135deg); }
.tool > details > summary:hover h3, .tool > details > summary:focus-visible h3 { color: var(--sim); }
.tool > details[open] > summary { margin-bottom: 12px; }
.tool + .tool { border-top: 1px dashed var(--line); }
.finding { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface); font-size: 15px; }
.finding > b { display: block; font: 600 11px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--warn); margin-bottom: 2px; }
.finding p:last-child { margin-bottom: 0; }
pre.code { margin: 16px 0 20px; padding: 14px 16px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font: 13px/1.55 var(--mono); }
pre.code .c { color: var(--muted); }
pre.code .s { color: var(--src); }
pre.code .k { color: var(--sim); }
.cap { font-size: 13.5px; color: var(--muted); margin-top: -8px; }
.rule-list { list-style: none; padding: 0; margin: 14px 0 20px; display: grid; gap: 8px; }
.rule-list li { margin: 0; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: 16px 0 22px; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.data caption { caption-side: top; text-align: left; font: 600 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; }
table.data th, table.data td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data thead th { font: 600 12px/1.4 var(--mono); color: var(--muted); border-bottom: 1.5px solid var(--ink); }
table.data td.num, table.data th.num { text-align: right; font-family: var(--mono); font-size: 13px; }
table.data .bad { color: var(--bad); }
table.data .good { color: var(--good); }
table.data tfoot td { color: var(--muted); font-size: 12.5px; border-bottom: 0; }

/* ---------- 3D replay ---------- */
.replay { margin: 24px 0 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.replay-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.replay-bar label { font: 500 12px/1 var(--mono); color: var(--muted); }
.replay-bar select { padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.replay-view { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #0b0f10; }
.replay-view canvas { width: 100% !important; height: 100% !important; }
.replay-view .poster { position: absolute; inset: 0; display: grid; place-items: center; gap: 10px; color: #e2eae8; text-align: center; padding: 16px; }
.replay-view .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; filter: blur(3px); }
.replay-view .poster > div { position: relative; display: grid; gap: 10px; justify-items: center; }
.replay-view .poster small { font: 500 12px/1.4 var(--mono); }
.replay-time { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.replay-time input[type="range"] { flex: 1; accent-color: var(--sim); min-width: 0; }
.replay-time output { font: 500 12px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; }

/* ---------- gallery ---------- */
.gallery-viewer { margin: 14px 0 8px; }
#gal-sv-pair { --aspect: 1; margin-top: 14px; }   /* the second-view renders are square */
#gal-sv-pair[hidden] { display: none; }
/* Motivation 03: a schematic to the left of the grid of views, which keeps its place and size (assets/viewcones.js):
   two cameras' view cones cross at the scene and end on the first video of each row. It needs the margin left of the
   grid, so it shows only on wide screens: the figure breaks out of the column to the left, the panel taking that
   margin (at least 200px; where the margin is narrower the figure runs past the column on the right by the
   difference). The svg spans the panel and the gap, up to the grid. */
.views-figure { position: relative; }
.view-cones-panel, .view-cones { display: none; }
@media (min-width: 1420px) {
  .views-figure { --panel: clamp(200px, calc((100vw - 1100px) / 2 - 36px), 380px); display: grid; grid-template-columns: var(--panel) minmax(0, 1fr);
    gap: 16px; width: calc(100% + var(--panel) + 16px); margin-left: calc(-1 * min(var(--panel) + 16px, (100vw - 1100px) / 2 - 20px)); }
  .view-cones-panel { display: block; min-width: 0; }   /* holds the grid's first column; the svg draws over it */
  .view-cones { display: block; position: absolute; left: 0; top: 0; width: calc(var(--panel) + 16px); height: 100%; overflow: visible; pointer-events: none; }
}
.vc-edge { fill: none; stroke-width: 1.2; stroke-opacity: .75; }
.vc-name { font: 600 11px var(--mono); letter-spacing: .04em; }
.vc-table { fill: var(--surface-2); stroke: var(--muted); stroke-width: .7; }
.vc-rod { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; }
.vc-lantern { fill: var(--surface); stroke-width: 1.4; }
.sv-readout { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }   /* as the figure captions */
.gal-cap { margin: 8px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- references / citation ---------- */
.bib { position: relative; }
.bib pre { margin: 0; padding: 14px 16px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font: 13px/1.55 var(--mono); }
.bib .copy { position: absolute; top: 8px; right: 8px; }
details.provenance { margin: 18px 0; font-size: 14px; }
details.provenance summary { cursor: pointer; font-weight: 600; }
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 56px; padding-block: 20px 40px; border-top: 1px solid var(--line); font: 500 12px/1.5 var(--mono); color: var(--muted); }
.footer a { color: inherit; }

/* ---------- results ---------- */
.results-table td[rowspan] { font-weight: 600; vertical-align: top; }
.results-table .sub, table.data .sub { display: block; font: 400 11.5px/1.4 var(--mono); color: var(--muted); }
table.data td.num .sub { text-align: right; }
.results-table .best { font-weight: 600; color: var(--sim); }
table.data thead .sys-codex { color: var(--bad); } table.data thead .sys-plumb { color: var(--sim); }
.results-table .wins { margin-left: 4px; font: 400 11px/1 var(--mono); color: var(--muted); }
.results-table .muted { color: var(--muted); }
.results-table tr.tokens td { color: var(--muted); font-size: 13px; }
.results-table tr.tokens td.num { font-family: var(--mono); }
.pervideo { position: relative; margin: 28px 0 24px; padding: 16px 18px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.pervideo-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.pervideo-head h3 { margin: 0; font: 500 22px/1.2 var(--display); }
.seg-control { display: inline-flex; border: 1px solid var(--line); border-radius: 18px; padding: 2px; background: var(--bg); }
.seg-control button { border: 0; background: transparent; padding: 5px 12px; border-radius: 16px; cursor: pointer; font: 500 12.5px/1.2 var(--mono); color: var(--muted); }
.seg-control button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 4px; font: 500 12.5px/1.4 var(--body); color: var(--ink); }
.legend .k { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 2px var(--surface); }
.k.codex { background: var(--s-codex); } .k.r90 { background: var(--s-r90); } .k.r96 { background: var(--s-r96); }
.pervideo-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pervideo-chart text { fill: var(--muted); font: 400 11.5px var(--mono); }
.pervideo-chart .note { font-style: italic; }
.pervideo-chart .grp { fill: var(--ink); font: 600 12px var(--body); }
.pervideo-chart .grid { stroke: var(--line); stroke-width: 1; }
.pervideo-chart .range { stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.pervideo-chart .dot { stroke: var(--surface); stroke-width: 2; }
.pervideo-chart .dot.codex { fill: var(--s-codex); } .pervideo-chart .dot.r90 { fill: var(--s-r90); } .pervideo-chart .dot.r96 { fill: var(--s-r96); }
.pervideo-chart .hit { fill: transparent; cursor: default; }
.pervideo-chart .row.on .hit, .pervideo-chart .row:focus .hit { fill: var(--bg); }
.pervideo-chart .row:focus { outline: none; }
.pervideo-chart .row.on text.lbl, .pervideo-chart .row:focus text.lbl { fill: var(--ink); }
.viz-tip { position: absolute; z-index: 5; min-width: 170px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgb(0 0 0 / .12); font-size: 12.5px; pointer-events: none; }
.viz-tip .t { font: 600 12px/1.4 var(--body); margin-bottom: 4px; color: var(--ink); }
.viz-tip .r { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 6px; line-height: 1.6; color: var(--muted); }
.viz-tip .r b { color: var(--ink); font: 600 12.5px/1.6 var(--mono); font-variant-numeric: tabular-nums; }
.viz-tip .r i { height: 2px; border-radius: 1px; }

.sync-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.sync-bar input[type="range"] { flex: 1; min-width: 0; accent-color: var(--sim); }
.sync-bar output { font: 500 12px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }
.errfig video[data-sync] { cursor: pointer; }
.errfig-cap { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.errfig-cap li { margin: 0; }
.errfig-cap b { color: var(--bad); font: 600 12px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; margin-right: 6px; }

/* showcase: input and simulation side by side, interactive scene below */
.pair { --aspect: 1.7778; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pair[data-n="2"], .pair[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pair[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.pair figure { margin: 0; min-width: 0; }
.pair .label, .replay-bar .label { display: block; margin-bottom: 6px; font: 600 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pair .label.src { color: var(--src); } .pair .label.sim, .replay-bar .label.sim { color: var(--sim); } .pair .label.bad { color: var(--bad); }
.pair video { width: 100%; aspect-ratio: var(--aspect); object-fit: contain; background: #0b0f10; border-radius: 4px; cursor: pointer; }
#featured .replay { margin-top: 14px; }
@media (max-width: 720px) { .pair, .pair[data-n="2"], .pair[data-n="4"] { grid-template-columns: minmax(0, 1fr); } }
#gallery .case-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 76px), 1fr)); gap: 8px; }
/* the showcase's examples in two rows of equal length (site.js sets --cols to half the case count) */
#featured .case-tabs { display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); gap: 8px; }
#featured .case-tab, #gallery .case-tab { flex-direction: column; align-items: stretch; padding: 4px; }
#featured .case-tab img, #gallery .case-tab img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 520px) { #featured .case-tabs { gap: 4px; } #featured .case-tab { padding: 2px; } }