/* Self-hosted fonts (vendor/fonts, OFL-1.1; tools/fetch_site_vendor.sh) */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("vendor/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("vendor/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #0b0c0e;
  --bg-2: #121317;
  --panel: rgba(20, 21, 25, 0.78);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #eceae6;
  --soft: #b8b9bd;
  --muted: #85888f;
  --accent: #ff6a1a;
  --accent-soft: rgba(255, 106, 26, 0.14);
  --head: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(70% 50% at 70% 0%, rgba(255, 106, 26, 0.07) 0%, transparent 70%), var(--bg);
  font: 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

a { overflow-wrap: anywhere; color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.panel {
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.label, .eyebrow, dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px max(16px, calc((100vw - 1200px) / 2));
  background: rgba(11, 12, 14, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { font: 800 1.35rem/1 var(--head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.brand span { color: var(--accent); }
.topbar nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font: 600 1rem/1 var(--head); letter-spacing: 0.06em; text-transform: uppercase; }
.topbar nav a { color: var(--soft); text-decoration: none; }
.topbar nav a:hover { color: var(--text); }

main, footer { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Hero */
.hero { padding: 24px 0 14px; max-width: 980px; }
.eyebrow { color: var(--accent); margin: 0 0 10px; }
h1 { margin: 0; font: 800 clamp(2.8rem, 6.5vw, 4.4rem)/0.9 var(--head); letter-spacing: -0.01em; text-transform: uppercase; }
.lede { margin: 10px 0 16px; font-size: 1.1rem; line-height: 1.5; color: var(--soft); max-width: 720px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn, .controls button, .controls select, .setup select {
  font: 700 1rem/1 var(--head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover, .controls button:hover, .controls select:hover, .setup select:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.btn.primary { color: #140a04; background: var(--accent); border-color: var(--accent); }
.btn.primary:hover { color: #140a04; background: #ff8642; }
.controls button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.controls select, .setup select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
/* The open menu: a dark list (color-scheme), items in the body font, group names small and grey. */
.controls select, .setup select { color-scheme: dark; }
/* Font only, and system fonts (a web font still loading when the popup is first measured makes it scroll once; no
   line-height, the browser sizes the popup from its own item height). Group names are
   disabled options (main.js), not optgroups: those indent their items. */
.controls select option, .setup select option { background: var(--bg-2); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 500; font-size: 0.92rem; letter-spacing: 0; text-transform: none; }
.controls select option.group { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.hud-col.left { width: 220px; }
.setup { pointer-events: auto; display: grid; gap: 10px; }
.setup label { display: grid; gap: 5px; }
.setup select { width: 100%; padding: 8px 30px 8px 10px; font-size: 0.82rem; text-align: left; }
.setup select:disabled { opacity: 0.4; cursor: default; }
/* Floor friction slider: the band training drew from (0.3-1.2 of 0.1-1.5) is lit on the track. */
.friction .label { display: flex; justify-content: space-between; }
.friction output { font: 600 0.8rem var(--mono); color: var(--text); letter-spacing: 0; }
.friction input[type="range"] { width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.friction input[type="range"]:disabled { opacity: 0.4; cursor: default; }
.friction input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 14.3%, rgba(255, 106, 26, 0.8) 14.3% 78.6%, rgba(255, 255, 255, 0.08) 78.6%); }
.friction input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 14.3%, rgba(255, 106, 26, 0.8) 14.3% 78.6%, rgba(255, 255, 255, 0.08) 78.6%); }
.friction input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.friction input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.friction-note { font: 0.66rem/1.4 var(--mono); color: var(--muted); white-space: pre-line; }
.friction-note.warn { color: var(--accent); }
.setup-note { margin: 0; font: 0.66rem/1.45 var(--mono); color: var(--muted); }

/* Demo stage */
#demo { padding-top: 6px; scroll-margin-top: 70px; }
.stage {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  background: #0d0e11;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.viewport { position: absolute; inset: 0; }
#demo-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#demo-canvas:active { cursor: grabbing; }

.hud { position: absolute; z-index: 2; }
.hud.panel { padding: 10px 14px; }
.hud-tl { top: 14px; left: 14px; min-width: 170px; pointer-events: none; }
.hud-tr { top: 14px; right: 14px; }
.hud-bl { bottom: 14px; left: 14px; }
.hud-br { top: 18px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2 * 260px); pointer-events: none; } /* top centre, between the side panels (the control bar runs along the bottom) */
.hud-c { top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }

.hud-title { display: flex; align-items: center; gap: 8px; font: 700 1rem/1 var(--head); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.readouts { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; }
.readouts dd { margin: 0; font: 0.85rem/1.5 var(--mono); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.caret { display: none; }

.force-value { font: 700 2rem/1 var(--head); font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
#force-hud.active .force-value { color: var(--accent); }
#force-hud.capped .force-sub { color: var(--accent); }
.gauge { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.gauge-fill { height: 100%; width: 0; background: linear-gradient(90deg, #ffb37a, var(--accent)); transition: width 0.08s linear; }
.force-sub { font: 0.7rem/1.6 var(--mono); color: var(--muted); margin-top: 6px; }
#force-hud { pointer-events: auto; }
.push-test { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.push-buttons { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.push-buttons button { flex: 1 1 0; min-width: 0; padding: 7px 0; font: 700 0.9rem/1 var(--head); color: var(--text); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); border-radius: 4px; cursor: pointer; }
.push-buttons button:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.push-buttons button:disabled { opacity: 0.4; cursor: default; }
.push-buttons .unit { font: 0.68rem var(--mono); color: var(--muted); }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.controls label { display: flex; align-items: center; gap: 8px; }
.controls button, .controls select { padding: 9px 14px; font-size: 0.9rem; }
.hint-touch { display: none; }
@media (pointer: coarse) {
  .hint-mouse { display: none; }
  .hint-touch { display: inline; }
}
.hint { font: 0.78rem/1.4 var(--body); color: var(--soft); text-align: center; transition: opacity 0.8s ease; }
.hint.used { opacity: 0; } /* faded out after the visitor's first push or view drag (main.js) */
.banner { font: 800 1.6rem/1 var(--head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); background: rgba(11, 12, 14, 0.7); border: 1px solid var(--accent); border-radius: 4px; padding: 10px 18px; }

/* On phones: poster + load button before any big download */
/* Opening montage (recorded in this scene) over the live canvas until "Try it live". */
.hero-video { position: absolute; inset: 0; z-index: 4; background: #0d0e11; transition: opacity 0.5s ease; }
.hero-video.leaving { opacity: 0; pointer-events: none; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage.hero-on .hud, .stage.hero-on .loader { visibility: hidden; }
.hero-tag { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 8px; font: 700 0.78rem/1 var(--head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.hero-tag .rec { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--soft); }
.hero-cap { position: absolute; left: 16px; top: 40px; right: 220px; pointer-events: none; }
.hero-move { font: 800 clamp(1.4rem, 3vw, 2.2rem)/1 var(--head); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); min-height: 1em; }
.hero-credit { position: absolute; left: 16px; bottom: 14px; font: 0.68rem/1.4 var(--mono); color: var(--soft); }
.hero-credit a { color: var(--soft); }
.hero-error { position: absolute; left: 16px; right: 16px; bottom: 40px; margin: 0; padding: 10px 12px; font: 0.8rem/1.45 var(--mono); color: var(--text); background: rgba(11, 12, 14, 0.85); border: 1px solid var(--accent); border-radius: 6px; }
.try-live { position: absolute; right: 16px; top: 16px; overflow: hidden; padding: 14px 22px; font-size: 1rem; }
.try-fill { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: rgba(255, 255, 255, 0.85); transition: width 0.3s; }
.try-live.ready .try-fill { opacity: 0; }
.try-live.loading .try-fill { height: 100%; background: rgba(255, 255, 255, 0.18); }
.try-label { position: relative; }
.try-live.failed { background: transparent; color: var(--soft); border-color: var(--line-2); }

/* Loading */
.loader { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 16px; background: rgba(11, 12, 14, 0.72); transition: opacity 0.4s; }
.loader.compact { inset: auto 14px 72px auto; display: block; padding: 0; background: none; }
.loader.compact .loader-panel { width: 300px; }
.loader.compact .assets, .loader.compact .loader-note { display: none; }
.loader.done { opacity: 0; pointer-events: none; }
.loader-panel { width: min(520px, 100%); padding: 18px 20px; }
.loader-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font: 0.85rem var(--mono); }
.loader-head .label { font: 700 1.1rem/1 var(--head); letter-spacing: 0.06em; color: var(--text); }
.bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.15s linear; }
.assets { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.asset { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font: 0.78rem/1.3 var(--mono); }
.asset .name { color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset .state { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.asset .bar { grid-column: 1 / -1; height: 2px; }
.asset .bar-fill { background: var(--soft); }
.asset.ready .state { color: var(--text); }
.asset.ready .bar-fill { background: var(--accent); }
.asset.error .state { color: var(--accent); }
.loader-note { margin: 16px 0 0; font: 0.72rem/1.5 var(--mono); color: var(--muted); }

/* Under the demo: four short notes side by side across the frame's width (two, then one, on narrower screens). */
.caption { color: var(--muted); font-size: 0.88rem; line-height: 1.5; margin: 16px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; }
@media (max-width: 1000px) { .caption { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .caption { grid-template-columns: 1fr; } }

/* Sections */
section { scroll-margin-top: 70px; }
h2 { display: flex; align-items: baseline; gap: 14px; margin: 80px 0 16px; font: 800 2.4rem/1 var(--head); letter-spacing: 0.01em; text-transform: uppercase; }
h2 .idx { font: 600 0.8rem var(--mono); color: var(--accent); letter-spacing: 0.08em; }
section > p { color: var(--soft); max-width: 900px; }

.table-panel { padding: 6px 4px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.table-panel::-webkit-scrollbar { height: 6px; }
.table-panel::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
th { font: 0.7rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
@media (max-width: 900px) { th, td { padding: 10px 9px; } } /* tablets: the wide tables fit without a scroll */
.pending { color: var(--muted); font-size: 0.85rem; }

.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
@media (min-width: 900px) { .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hw-line { color: var(--soft); }
.video-slot { aspect-ratio: 16 / 9; display: grid; place-items: center; color: var(--muted); font: 0.78rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }

#credits ul { padding-left: 20px; color: var(--soft); }
#credits li { margin: 8px 0; }
#credits li::marker { color: var(--accent); }

footer { margin-top: 80px; padding-top: 20px; padding-bottom: 40px; border-top: 1px solid var(--line); color: var(--muted); font: 0.78rem var(--mono); }


@media (prefers-reduced-motion: reduce) {
  .live { animation: none; }
  .bar-fill, .gauge-fill, .loader { transition: none; }
}

/* World model vs reality */
.hud-col { display: flex; flex-direction: column; gap: 10px; width: 240px; pointer-events: none; }
#wm-hud { pointer-events: auto; }
.wm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wm-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
#wm-body { margin-top: 6px; }
/* On/off switch: track + thumb + state word; blue for the world model (its ghost), accent otherwise. */
.switch { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; background: none; border: 0; color: var(--soft); font: 600 0.72rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.switch .track { position: relative; width: 34px; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, 0.12); border: 1px solid var(--line-2); transition: background 0.15s, border-color 0.15s; }
.switch .thumb { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--soft); transition: transform 0.15s, background 0.15s; }
.switch[aria-checked="true"] .track { background: var(--accent); border-color: var(--accent); }
.switch.wm[aria-checked="true"] .track { background: #3d8bff; border-color: #3d8bff; }
.switch[aria-checked="true"] .thumb { transform: translateX(16px); background: #fff; }
.switch[aria-checked="true"] .state { color: var(--text); }
.switch .state { min-width: 2.2em; text-align: left; }
.switch:hover .track { border-color: var(--text); }
.switch:disabled { opacity: 0.4; cursor: default; }
.switch.target[aria-checked="true"] .track { background: #f4f1ec; border-color: #f4f1ec; }
.switch.target[aria-checked="true"] .thumb { background: #16171b; }
.target-toggle { display: inline-flex; align-items: center; gap: 8px; }
.hud-col .panel { padding: 10px 14px; }
.wm-value { color: #3d8bff; font: 700 2rem/1 var(--head); font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
.wm-readout { display: flex; flex-direction: column; gap: 2px; } /* live value, then the window-end value under it */
.wm-readout small { white-space: nowrap; }
.wm-end { font: 700 1.15rem/1 var(--head); font-variant-numeric: tabular-nums; color: var(--soft); }
.wm-end small { font-size: 0.8rem; color: var(--muted); }
/* World model alone: no reference to measure divergence against; the drag needs MuJoCo. */
#wm-hud.solo .wm-readout, #wm-hud.solo #div-graph, #wm-hud.solo .wm-legend { display: none; }
#force-hud.nodrag .force-value, #force-hud.nodrag .gauge { opacity: 0.35; }
.wm-value small, .force-value small { font-size: 1rem; color: var(--muted); }
#div-graph { display: block; width: 100%; height: 56px; }
.wm-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font: 0.68rem/1.4 var(--mono); color: var(--soft); }
.wm-legend .dim { color: var(--muted); }
.wm-note { margin: 8px 0 0; font: 0.68rem/1.45 var(--mono); color: var(--muted); }
.controls button:disabled, .controls select:disabled { opacity: 0.4; cursor: default; }
.file-btn { padding: 9px 14px; font-size: 0.9rem; }
.file-btn:has(input:disabled) { opacity: 0.4; cursor: default; }
/* The file input stays in the tab order (keyboard: focus it, Enter or Space opens the picker); the label shows its focus. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.file-btn:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.controls button:disabled:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.04); }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Phones, portrait: section chips under the brand (swipe sideways), hero buttons as a 2 x 2 grid. */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; row-gap: 0; padding-top: 12px; padding-bottom: 0; }
  /* The five links share the full width, no sideways scrolling (fits from 320 px). */
  .topbar nav { order: 2; flex: 0 0 calc(100% + 32px); margin: 4px -16px 0; padding: 0 6px; flex-wrap: nowrap; justify-content: space-between; gap: 0; letter-spacing: 0.03em; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { flex: none; padding: 12px 6px; font-size: 0.92rem; white-space: nowrap; border-bottom: 2px solid transparent; }
  .topbar nav a.active { color: var(--text); border-bottom-color: var(--accent); }
  section, #demo, h3.part { scroll-margin-top: 104px; }
  .hero { padding: 22px 0 14px; }
  .lede { font-size: 1.05rem; }
  .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .actions .btn { padding: 14px 10px; text-align: center; }
  .actions .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .byline { font-size: 0.74rem; }
  h2 { font-size: 2rem; margin-top: 56px; }
  .label, .eyebrow, dt { font-size: 0.74rem; }
  /* Montage: the credit and the button sit under the picture, not over the robot (framed low). */
  .hero-video { display: flex; flex-direction: column; }
  .hero-video video { flex: 1 1 auto; min-height: 0; height: auto; }
  .hero-video .hero-credit { position: static; padding: 10px 12px 0; }
  .hero-video .try-live { position: relative; inset: auto; margin: 10px 12px 12px; }
}

/* Phones (portrait, and landscape: short touch screens): the 3D view gets its own frame and nothing covers
   the robot; the panels follow below it (controls, live readouts and push force side by side, the world
   model, the robot setup). Before "Try it live" only the montage shows. Every control is a 44 px target. */
@media (max-width: 720px), (max-height: 520px) and (pointer: coarse) {
  .stage { aspect-ratio: auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none; }
  /* Capped so there is always page left to scroll past it: the canvas takes every drag (push, orbit). */
  .viewport { position: relative; grid-column: 1 / -1; aspect-ratio: 4 / 5; max-height: 62vh; max-height: 62svh; width: 100%; background: #0d0e11; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
  .hud { position: static; }
  .hud-br, .hud-c { position: absolute; }
  .hud-br { top: auto; left: 12px; right: 12px; bottom: 10px; transform: none; white-space: normal; text-align: center; font-size: 0.74rem; max-width: none; width: auto; }
  .hud-bl { order: 1; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
  .hud-bl > * { min-width: 0; } /* nothing in the bar may widen it past the screen */
  .hud-bl label:first-child select { width: 100%; }
  .hud-bl .target-toggle { gap: 6px; padding: 0 8px 0 12px; }
  .hud-bl .target-toggle .label { overflow: hidden; text-overflow: ellipsis; }
  .hud-bl .target-toggle .state { display: none; } /* the switch shows on/off; the label gets the room */
  .hud-bl label:first-child { grid-column: 1 / -1; }
  .hud-bl label:first-child select { flex: 1 1 auto; min-width: 0; }
  .hud-bl .target-toggle { justify-content: space-between; padding: 0 12px; min-height: 44px; border: 1px solid var(--line-2); border-radius: 4px; }
  .hud-bl .file-btn { display: flex; align-items: center; justify-content: center; white-space: nowrap; padding: 9px 10px; grid-column: 1 / -1; }
  .hud-bl .target-toggle .label { white-space: nowrap; }
  .hud-bl .target-toggle .switch { min-height: 42px; padding: 0; border: 0; background: none; } /* the toggle's box is the frame */
  .hud-tl { order: 2; min-width: 0; }
  #live-hud { order: 2; }
  #setup-hud { order: 5; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  #setup-hud .setup-note { grid-column: 1 / -1; }
  .hud-col { display: contents; }
  #force-hud { order: 3; }
  #wm-hud { order: 4; grid-column: 1 / -1; }
  .hud.panel, .hud-col .panel { padding: 12px; }
  .force-value, .wm-value { font-size: 1.6rem; }
  .force-sub, .setup-note, .wm-note, .wm-legend { font-size: 0.7rem; }
  #div-graph { height: 64px; }
  .controls button, .controls select, .file-btn, .setup select, .push-buttons button { min-height: 44px; }
  .friction input[type="range"] { height: 44px; }
  .controls select, .setup select { font-size: 1rem; } /* 16 px: iOS zooms into smaller form fields */
  .switch { min-height: 44px; }
  .push-buttons { gap: 8px; }
  .push-buttons button { font-size: 1rem; min-width: 44px; }
  .push-buttons { display: grid; grid-template-columns: repeat(2, minmax(44px, 1fr)); } /* 2 x 2, full-size targets */
  .push-buttons .unit { grid-column: 1 / -1; }

  .hero-tag { top: 12px; left: 12px; }
  .hero-cap { left: 12px; right: 12px; top: 34px; }
  .hero-credit { left: 12px; right: 12px; bottom: 70px; font-size: 0.7rem; }
  .try-live { top: auto; left: 12px; right: 12px; bottom: 12px; min-height: 48px; }
  .stage.hero-on .hud-col, .stage.hero-on .hud-bl { display: none; }
  .loader { padding: 12px; }
  .loader-panel { padding: 14px 14px; }
  .asset { font-size: 0.7rem; }
  .loader.compact { inset: auto 12px 34px 12px; }
  .loader.compact .loader-panel { width: auto; }
  .caption { font-size: 0.9rem; }
  th, td { padding: 10px 10px; }
}

/* Phones held sideways: the 3D view as wide as the screen and almost as tall; the bar scrolls away. */
@media (max-height: 520px) and (pointer: coarse) and (min-width: 721px) {
  .topbar { position: static; }
  .viewport { aspect-ratio: auto; height: 78vh; height: 78svh; max-height: none; }
  .hud-bl { grid-template-columns: minmax(0, 2fr) auto auto auto minmax(0, 1fr) minmax(0, 1fr); }
  .hud-bl .file-btn { grid-column: auto; }
  .hud-bl label:first-child { grid-column: auto; }
  .hero-cap { right: 220px; }
  .hero-credit { bottom: 14px; right: 220px; }
  .try-live { top: auto; left: auto; right: 14px; bottom: 14px; }
}

/* Desktop: the frame always spans the content width (aligned with the title). While the montage plays it is only as
   tall as the screen leaves room for (nav.js sets --fit-h), the 16:9 video cropped top and bottom (object-fit:
   cover), but never shorter than width / 2.26: the robot stays whole in every frame of the montage at that crop
   (79% of the height, measured). "Try it live" grows it to 16:9 for the demo's panels. */
@media (min-width: 721px) and (min-height: 521px), (min-width: 721px) and (pointer: fine) {
  #demo { container-type: inline-size; }
  .stage { aspect-ratio: auto; min-height: 0; height: calc(100cqw * 9 / 16); transition: height 0.6s ease; }
  .stage.hero-on { height: clamp(calc(100cqw / 2.26), var(--fit-h, 100vh), calc(100cqw * 9 / 16)); }
}
@media (min-width: 721px) and (max-height: 820px) {
  .hero { padding: 16px 0 12px; }
  h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); }
  .lede { margin: 6px 0 12px; font-size: 1.02rem; }
  .actions .btn { padding-top: 9px; padding-bottom: 9px; }
  .byline { margin-top: 8px; }
}

/* Phones: the secondary tables fold behind "Show the table" (nav.js closes them there), long notes and explanations
   show three lines and a "more" link. Wider screens: the folds stay open and their toggles are hidden. */
.fold > summary { display: none; }
@media (max-width: 600px) {
  .fold > summary { display: flex; align-items: center; min-height: 44px; margin: 8px 0; padding: 0 14px; font: 600 0.76rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; list-style: none; }
  .fold > summary::-webkit-details-marker { display: none; }
  .fold > summary::after { content: "+"; margin-left: auto; font-size: 1.1rem; color: var(--accent); }
  .fold[open] > summary::after { content: "−"; }
  .clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .more-btn { display: block; min-height: 32px; margin: -4px 0 8px; padding: 0; font: 600 0.72rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: none; border: 0; cursor: pointer; }
}

@media (max-width: 420px) { .wide-only { display: none; } } /* "Target pose" -> "Target" in the narrow control bar */

/* Content sections */
h3, h4 { margin: 32px 0 10px; font: 700 1.35rem/1.15 var(--head); letter-spacing: 0.02em; text-transform: uppercase; }
/* The parts of a section (Results: on video, all runs, what we found): bigger, with a rule above. */
h3.part { margin: 64px 0 14px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 1.85rem; scroll-margin-top: 70px; }
.byline { margin: 12px 0 0; font: 0.75rem/1.5 var(--mono); color: var(--muted); }
.btn.disabled { opacity: 0.45; cursor: default; }
.btn.disabled:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.04); }
.caption p { margin: 0; }
.caption strong { display: block; margin-bottom: 4px; font: 700 0.78rem/1.3 var(--head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.note { color: var(--muted); font-size: 0.9rem; max-width: none; } /* short notes run the full width, in line with the tables; long prose (section > p, .finding p) keeps 900 px */
.sources { font: 0.72rem/1.5 var(--mono); color: var(--muted); }
.facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.facts li { padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--soft); }
.facts strong { display: block; margin-bottom: 6px; font: 700 1.15rem/1.2 var(--head); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); }
.placeholder { padding: 26px 18px; text-align: center; font: 0.75rem/1.5 var(--mono); letter-spacing: 0.06em; color: var(--muted); border-style: dashed; }
.plain { padding-left: 20px; color: var(--soft); }
.plain li { margin: 6px 0; }
.plain li::marker { color: var(--accent); }

.finding { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; } /* figure on its own row, text under it */
.finding h4 { grid-column: 1 / -1; margin-top: 0; }
.finding .fig { margin-bottom: 16px; }
.finding p { max-width: 900px; }
.finding p { margin: 0 0 12px; color: var(--soft); }
.finding.text-only { grid-template-columns: minmax(0, 900px); } /* no figure: one column of text */
.fig { margin: 0; padding: 16px 18px; }
.fig figcaption { margin-top: 12px; font: 0.72rem/1.5 var(--mono); color: var(--muted); }
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 17em 1fr 3em; align-items: center; gap: 10px; font: 0.78rem var(--mono); color: var(--soft); }
.bar-track { height: 12px; background: rgba(255, 255, 255, 0.05); border-radius: 2px; overflow: hidden; }
.bar-val { display: block; height: 100%; min-width: 2px; }
.bar-val.warn { background: #ff3b30; }
.bar-val.ok { background: #3d8bff; }
.bar-num { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }


code { font: 0.8rem/1.55 var(--mono); color: var(--text); }
/* Code blocks (Get started, the citation): scroll sideways on wide lines, a Copy button in the corner (copy.js). */
pre { position: relative; margin: 10px 0 0; padding: 14px 84px 14px 16px; overflow-x: auto; background: #08090b; border: 1px solid var(--line); border-radius: 6px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
pre code { white-space: pre; }
pre .copy { position: absolute; top: 8px; right: 8px; min-height: 32px; padding: 0 12px; font: 600 0.72rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 4px; cursor: pointer; }
pre .copy:hover { color: var(--text); border-color: var(--accent); }
@media (max-width: 600px) { pre { padding: 50px 14px 14px; } pre .copy { min-height: 36px; } }

.video-slot { margin: 0; text-align: center; }
.video-slot span { display: block; font: 700 1.05rem var(--head); letter-spacing: 0.04em; color: var(--soft); text-transform: uppercase; }
.video-slot figcaption { margin-top: 6px; font: 0.68rem var(--mono); color: var(--muted); text-transform: none; letter-spacing: 0; }
.video-slot.coming { border-style: dashed; }
.video-card { margin: 0; padding: 0; overflow: hidden; }
.vframe { position: relative; }
.video-card video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0d0e11; }
/* Under the picture, one half per pane: its name and its latest event. */
.vstatus { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.vs { display: flex; flex-direction: column; gap: 3px; padding: 8px 14px; }
.vs + .vs { border-left: 1px solid var(--line); }
.vs b { font: 700 0.8rem/1.2 var(--head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.vs em { font: 0.72rem/1.2 var(--mono); font-style: normal; color: var(--muted); white-space: nowrap; }
.vs em[data-state="off"] { color: #ffb37a; }
.vs em[data-state="fell"] { color: #ff6b5e; }
.video-card figcaption { padding: 10px 14px 12px; font: 0.8rem/1.5 var(--body); color: var(--muted); }
.video-card figcaption strong { display: block; font: 700 1rem var(--head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.pending-box { margin-top: 22px; padding: 16px 18px; }
/* The RTX 4090 beside the title (demo/gpu.js): wide screens only. The still of the same view shows until the 3D model
   has drawn its first frame, then steps aside (on Save-Data, or if the model fails, the still stays). */
.hero-gpu { display: none; }
@media (min-width: 1000px) {
  .hero { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: center; column-gap: 24px; }
  .hero-gpu { display: block; height: 230px; background: url("assets/gpu/rtx4090.webp") center / 100% 100% no-repeat; }
}
#gpu-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
#gpu-canvas.dragging { cursor: grabbing; }
.hero-gpu.ready { background-image: none; }
.not-box { margin-top: 14px; padding: 14px 18px; }
.not-box .plain { margin: 6px 0 0; }
.chart { display: block; width: 100%; height: auto; }
/* Scroll-in motion (demo/reveal.js adds html.reveal unless the visitor asked for reduced motion; .in when on screen). */
/* Line charts (inlined by reveal.js): the frame stays, each series (--k) draws along its length at a constant rate,
   a point appears when the line reaches it (--d: its distance along the line), end labels when the line is done. */
.reveal .fig { --start: 0.25s; --draw: 1.1s; --stagger: 0.3s; }
.reveal .fig svg .series { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.reveal .fig.in svg .series { stroke-dashoffset: 0; transition: stroke-dashoffset var(--draw) linear calc(var(--start) + var(--k) * var(--stagger)); }
.reveal .fig svg .pt { opacity: 0; transform: scale(0.2); transform-box: fill-box; transform-origin: center; }
.reveal .fig.in svg .pt { opacity: 1; transform: none; transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
  transition-delay: calc(var(--start) + var(--k) * var(--stagger) + var(--d) * var(--draw)); }
.reveal .fig svg .end, .reveal .fig svg .ref { opacity: 0; }
.reveal .fig.in svg .end { opacity: 1; transition: opacity 0.4s ease calc(var(--start) + var(--k) * var(--stagger) + var(--draw)); }
.reveal .fig.in svg .ref { opacity: 1; transition: opacity 0.6s ease 0.1s; }
.reveal .bar-val { transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal .fig.in .bar-val { transform: none; }
.reveal .bar-row:nth-child(2) .bar-val { transition-delay: 0.12s; }
.reveal .bar-row:nth-child(3) .bar-val { transition-delay: 0.24s; }
.reveal .bar-row:nth-child(4) .bar-val { transition-delay: 0.36s; }
.reveal .bar-num { opacity: 0; transition: opacity 0.4s ease 0.6s; }
.reveal .fig.in .bar-num { opacity: 1; }
.reveal .table-panel { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal .table-panel.in { opacity: 1; transform: none; }
.compute td:last-child, .compute th:last-child { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.compute tr.total td { font-weight: 600; color: var(--text); border-top: 1px solid var(--line-2); }
table.lafan td { white-space: nowrap; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.lafan td:first-child { white-space: normal; font-family: var(--body); }
table.lafan td::before { white-space: normal; } /* phone cards: the labels wrap, the numbers do not */
.byline a { color: var(--soft); }
.pending-box .plain { margin: 8px 0 0; }

@media (max-width: 720px) {
  .finding { grid-template-columns: 1fr; }
  .finding .fig { grid-row: auto; margin-bottom: 14px; }
  .bar-row { grid-template-columns: 9.5em 1fr 2.2em; font-size: 0.7rem; gap: 8px; }
  h3, h4 { font-size: 1.2rem; }
  h3.part { margin-top: 48px; font-size: 1.5rem; }
}

/* Results from assets/results (results.js) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 18px 0 12px; }
.stat { padding: 16px 18px; display: grid; gap: 6px; }
.stat-num { font: 800 2.6rem/1 var(--head); font-variant-numeric: tabular-nums; }
.stat:first-child .stat-num { color: var(--accent); }
/* Completion tiles: the share completed leads; counts and failures under it. */
.stats.completion { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.stat-line { color: var(--text); font-size: 0.95rem; }
.stat-sub { font: 0.74rem/1.45 var(--mono); color: var(--muted); }
.stat-hw { font: 600 0.78rem/1.45 var(--mono); color: var(--accent); letter-spacing: 0.02em; margin-top: 2px; }
.lead-stat .stat-num { font-size: 3.4rem; }
.completion .stat:not(.lead-stat) .stat-num { color: var(--soft); }
@media (max-width: 720px) {
  .stats.completion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats.completion .lead-stat { grid-column: 1 / -1; }
  .lead-stat .stat-num { font-size: 2.8rem; }
  .completion .stat:not(.lead-stat) .stat-num { font-size: 1.7rem; }
}
.lead { color: var(--text); font-size: 1rem; }
/* A grey second line inside a table cell (a note under a run's name, the last three checkpoints). */
table .sub { display: block; margin-top: 4px; font: 0.8rem/1.4 var(--body); color: var(--muted); }
.tag { display: inline-block; margin-left: 8px; padding: 1px 6px; font: 0.68rem var(--mono); color: var(--muted); border: 1px solid var(--line-2); border-radius: 3px; }
.figs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } /* one graph per row */
table.groups td.ours { color: var(--accent); font-weight: 600; }
table.groups td { white-space: nowrap; }
table.groups th { white-space: normal; vertical-align: bottom; } /* long headers wrap: the table fits its panel */
table.groups td:first-child { white-space: normal; min-width: 11em; }
table td.over { color: #ff6b5e; font-weight: 600; }
tr.total td { font-weight: 600; color: var(--text); border-top: 1px solid var(--line-2); }
#results table.results td:nth-child(n + 5), table.deploy td:nth-child(n + 2) { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.note.warn { color: #ffb37a; }
.cards { list-style: none; padding: 0; margin: 16px 0 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cards li { padding: 16px 18px; color: var(--soft); font-size: 0.92rem; }
.cards strong { display: block; margin-bottom: 6px; font: 700 1.1rem/1.15 var(--head); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); }

/* Grids without orphans: stats 2 x 2 (4 across on wide screens); three-card rows 3 / 2 + a full-width last
   card / 1. */
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* as many as there are findings */
@media (max-width: 899px) {
  .facts, .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:last-child:nth-child(odd), .cards li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .facts, .cards { grid-template-columns: 1fr; }
}

/* Phones: wide result tables become one card per row (labels from the header, set by results.js); the group
   table keeps its columns and scrolls sideways under a pinned first column; the videos swipe sideways. */
@media (max-width: 720px) {
  .stat { padding: 14px; }
  .stat-num { font-size: 2.1rem; }
  .table-panel:has(table.results) { padding: 0; overflow: visible; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  table.results, table.results tbody, table.results tr, table.results td { display: block; width: 100%; }
  table.results thead { display: none; }
  /* A card per row: the row's name, then label-above-value cells two across (three for the short numbers of
     LAFAN1 and the deploy table, one for the deviations' sentences). */
  table.results tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; margin: 0 0 10px; padding: 12px 14px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
  #res-lafan table.results tr, table.results.deploy tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  table.results.dev td:nth-child(4) { grid-column: 1 / -1; } /* paper | here side by side, why below */
  table.results td { display: flex; flex-direction: column; justify-content: space-between; gap: 1px; padding: 6px 0; border: 0; text-align: left; overflow-wrap: anywhere; } /* values line up across a row even when a label wraps */
  table.results td::before { content: attr(data-label); font: 0.68rem/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  table.results td:first-child { grid-column: 1 / -1; display: block; padding: 0 0 8px; margin-bottom: 2px; border-bottom: 1px solid var(--line); font: 700 1.1rem/1.2 var(--head); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); }
  table.results td:first-child::before { content: none; }
  table.results tr.total { border-color: var(--line-2); }
  table.results td:empty { display: none; }
  table.results .tag { display: block; margin: 6px 0 0; padding: 0; border: 0; font: 0.74rem/1.4 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }
  .stat { align-content: start; }
  .stat .label { letter-spacing: 0.04em; line-height: 1.45; }
  table.results.groups tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  table.results.groups td, table.results.groups td:first-child { min-width: 0; white-space: normal; }
  table.results.groups td.ours { color: var(--accent); }
  table.results.dev td { justify-content: flex-start; }
  code { font-size: 0.78rem; }
  .video-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .video-grid::-webkit-scrollbar { display: none; }
  .video-grid > * { scroll-snap-align: start; align-self: start; }
  .video-slot.coming { aspect-ratio: auto; }
  .vs { padding: 8px 10px; }
  .bar-row { font-size: 0.74rem; }
  .fig figcaption { font: 0.82rem/1.5 var(--body); }
  .sources { font-size: 0.74rem; }
}