/* Hallmark · macrostructure: Portfolio Grid · tone: technical/utilitarian · anchor hue: cyan
   genre: editorial · theme: VRAM Arcade house · enrichment: real artifact screenshots
   nav: N9 · footer: Ft1 · audience: people comparing local-model output
   use: filter to a coordinate, then open or compare it
   contrast: pass (40–41) · slop: pass (42–49) · mobile: pass (34, 49–57)
   pre-emit critique: P5 H5 E4 S5 R5 V5 */
/* VRAM Arcade — one stylesheet, no build step, no webfonts.
   Every colour comes from tokens.css, and every token is a `light-dark()` pair, so the whole
   site follows the system theme (or the switch in the masthead) without a second stylesheet.
   Nothing anywhere should be a bare hex: a bare hex is the one thing that will not flip.
   Nor should there be a `light-dark()` in this file — even a one-off scrim gets a token, so
   that tokens.css is the single place the build has to read to emit the flat fallback for
   browsers without `light-dark()` (see build_tokens_css in lib/report.py). */
@import url("tokens.css");

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 50% -220px, var(--bg-glow) 0%, transparent 70%),
    var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 {
  line-height: 1.2; margin: 0 0 .4em; letter-spacing: -.015em;
  font-family: var(--font-display); font-style: normal;
}
h1, h2, h3 { min-width: 0; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
h2 { font-size: 1.4rem; margin-top: 0; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }
.mono { font-family: var(--font-mono); font-size: .88em; }
/* A heading that is itself an id — a model page's title — keeps the heading scale; the size
   in .mono is for monospace *inside* running text. */
h1.mono { font-size: clamp(1.9rem, 4vw, 2.7rem); }
h2.mono { font-size: 1.4rem; }
h3.mono { font-size: 1.05rem; }
.small { font-size: .85rem; color: var(--muted); }
.lede { color: var(--muted); max-width: 68ch; }
.spacer { flex: 1; }
img { max-width: 100%; }

/* ---------- chrome ---------- */
.topbar {
  display: flex; align-items: center; flex-wrap: nowrap; gap: .5rem 1rem;
  padding-block: .7rem;
  padding-inline-start: max(1rem, env(safe-area-inset-left));
  padding-inline-end: max(1rem, env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
  background: var(--scrim);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.topbar > * { min-width: 0; }
.brand {
  font-weight: 700; letter-spacing: -.03em; font-size: 1.05rem;
  color: var(--text); text-decoration: none;
}
.brand span { color: var(--accent-2); }
.topbar nav { display: flex; gap: .75rem; margin-inline-start: auto; }
.topbar nav a { color: var(--muted); font-size: .92rem; white-space: nowrap; }
.topbar nav a:hover { color: var(--text); }
.topbar nav a.on { color: var(--text); }

/* the theme switch: auto / light / dark, Auto being the CSS default and not a mode of its own */
.theme-switch {
  display: flex; align-items: center; gap: .1rem; padding: .15rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
}
.theme-switch button {
  display: grid; place-items: center; min-width: 1.9rem; height: 1.7rem; padding: 0 .45rem;
  border: 0; border-radius: 999px; background: none; color: var(--muted);
  font: 400 .72rem/1 inherit; cursor: pointer;
}
.theme-switch button:hover { color: var(--text); }
.theme-switch button.on { background: var(--sel-bg); color: var(--text); }
.theme-switch .glyph { font-size: .9rem; line-height: 1; }

main {
  padding-block: clamp(1.2rem, 4vw, 3rem);
  padding-inline-start: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-left));
  padding-inline-end: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-right));
  max-width: 1500px; margin: 0 auto;
}
main > section { margin-bottom: 3.4rem; }

/* A section title that carries its own one-line explanation, so a heading never has to do
   both jobs. `h2 + .lede` is the shape everywhere on the site. */
.section-head { margin-bottom: 1.1rem; }
.section-head h2 { margin-bottom: .2rem; }
.section-head .lede { margin: 0; font-size: .92rem; }
.count { color: var(--muted); font-weight: 400; font-size: .78em; }

.site-footer {
  display: flex; flex-direction: column; gap: var(--space-lg);
  padding-block: var(--space-xl) max(var(--space-xl), env(safe-area-inset-bottom));
  padding-inline-start: max(1rem, env(safe-area-inset-left));
  padding-inline-end: max(1rem, env(safe-area-inset-right));
  border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem;
}
.footer-mast p { max-width: 48ch; margin: var(--space-xs) 0 0; }
.footer-meta { display: flex; flex-direction: column; gap: var(--space-xs); }

/* ---------- hero ---------- */
.hero { padding-bottom: .5rem; }
.hero p { max-width: 62ch; color: var(--muted); font-size: 1.05rem; }
.index-hero { display: grid; gap: var(--space-lg); align-items: end; }
.index-hero h1 { max-width: 21ch; font-size: clamp(2rem, 4.5vw, 4.25rem); }
.hero-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; margin: 0; border-block: 1px solid var(--line);
}
.hero-metrics div { padding: var(--space-sm) 0; }
.hero-metrics div:nth-child(even) { padding-inline-start: var(--space-md); border-inline-start: 1px solid var(--line); }
.hero-metrics dt { color: var(--muted); font-size: .72rem; }
.hero-metrics dd {
  margin: 0; font: 700 1.7rem/1.2 var(--font-mono); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.hero-coverage { justify-self: start; font-size: .88rem; white-space: nowrap; }
.stat-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem 1.2rem; min-width: 0; flex: 1 1 8rem; box-shadow: var(--shadow);
}
.stat b { display: block; font-size: 1.7rem; letter-spacing: -.03em; }
.stat span { color: var(--muted); font-size: .82rem; }
.stat-link { display: block; font-size: .82rem; margin-top: .3rem; }

/* ---------- shared: a screenshot in a frame ----------
   Artifacts are bright pages photographed on white, so every frame keeps a mat under the
   image (see --shot-mat): a JPEG that fails to load then looks like a blank page rather than a
   hole in the UI. */
.shot img, .strip-shot img, .demo-cover img {
  display: block; width: 100%; background: var(--shot-mat);
  object-fit: cover; object-position: top center;
}
.noshot {
  display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--radius-sm);
  border: 1px dashed var(--line); color: var(--muted); font-size: .75rem; text-align: center;
  background: var(--panel-2);
}
.noshot.wide { width: 100%; }

/* ---------- browse demos: one compact index entry per prompt ---------- */
.demo-index { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
.demo-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}

.demo-cover {
  position: relative; display: block; line-height: 0;
  border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.demo-cover img { aspect-ratio: 16 / 10; }
.demo-cover .noshot { border: 0; border-radius: 0; }
/* Who built the cover shot, on a bar under it rather than floated over it. Overlaid, the
   caption sat on top of whatever the model put along the bottom of its page — a HUD, a
   footer — and the two read as one thing. */
.cover-tag {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: .4rem .8rem; line-height: 1.4;
  background: var(--panel-2); border-top: 1px solid var(--line);
  color: var(--muted); font-size: .74rem;
}
.cover-tag .mono { color: var(--text); }
.cover-tag .cover-play { margin-inline-start: auto; color: var(--accent); }
.cover-coordinate { display: flex; min-width: 0; gap: var(--space-xs); align-items: baseline; }
.cover-coordinate span {
  min-width: 0; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.demo-body { padding: var(--space-md) 1.2rem var(--space-sm); flex: 1 1 auto; }
.demo-body h3 { margin-bottom: .3rem; }
.demo-body h3 a { color: var(--text); }
.demo-body p {
  color: var(--muted); font-size: .9rem; margin-bottom: var(--space-sm);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.demo-facts {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-sm); color: var(--muted); font-size: .74rem;
  font-variant-numeric: tabular-nums;
}
.demo-facts b { color: var(--text); font-family: var(--font-mono); }
.row-link {
  border-top: 1px solid var(--line); padding: .7rem 1.2rem; font-size: .85rem;
  margin-top: auto; color: var(--accent); white-space: nowrap;
}

/* ---------- fresh off the GPU ---------- */
.mini-grid {
  display: flex; gap: var(--space-md); overflow-x: auto; padding-bottom: var(--space-xs);
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.mini { display: block; color: inherit; flex: 0 0 min(78vw, 15rem); scroll-snap-align: start; }
.mini .shot {
  border-radius: var(--radius-sm); border: 1px solid var(--line); overflow: hidden;
  line-height: 0; background: var(--panel-2); box-shadow: var(--shadow);
}
.mini .shot img { aspect-ratio: 16 / 10; }
.mini .shot .noshot { border: 0; border-radius: 0; }
.mini:hover { text-decoration: none; }
.mini-meta { padding-top: .5rem; font-size: .85rem; display: flex; flex-direction: column; gap: .15rem; }
.mini-meta b { font-weight: 600; }
.mini:hover .mini-meta b { color: var(--accent); }
.mini-meta .mono { color: var(--muted); }
.mini-meta .tags { margin-top: .15rem; }

/* Mobile-target screenshots stay portrait everywhere they are surfaced. Responsive demos use
   the ordinary crop because the same result belongs to both screen views. */
[data-demo-target="mobile"] .strip-shot img,
.mini[data-demo-target="mobile"] .shot img,
.result-card[data-demo-target="mobile"] .shot img,
[data-demo-target="mobile"] .noshot { aspect-ratio: 9 / 16; }
/* ...except a card cover, which would become a column two screens tall. */
[data-target="mobile"] .demo-cover img { aspect-ratio: 4 / 5; }

/* ---------- coverage leaders ---------- */
.coverage-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.coverage-panel {
  min-width: 0; padding: var(--space-md) var(--space-lg);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.coverage-panel h3 { margin-bottom: var(--space-sm); }
.coverage-panel ol { list-style: none; margin: 0; padding: 0; }
.coverage-panel li + li { border-top: 1px solid var(--line-soft); }
.leader-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md);
  width: 100%; min-height: 3.7rem; padding: var(--space-sm) 0;
  border: 0; background: transparent; color: var(--text); text-align: start;
  font: inherit; cursor: pointer;
}
.leader-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-value {
  color: var(--muted); font-size: .76rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.leader-value b { color: var(--text); }
.leader-track {
  grid-column: 1 / -1; display: block; height: 3px; overflow: hidden;
  background: var(--line-soft); border-radius: 999px;
}
.leader-track i { display: block; width: var(--coverage); height: 100%; background: var(--accent); }
.leader-row[aria-pressed="true"] .leader-label { color: var(--accent); }
.leader-row:active { transform: translateY(1px); }
.leader-row:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- landing-page filters ---------- */
.browse-controls {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm);
  padding-block: var(--space-lg); border-block: 1px solid var(--line);
}
.browse-field { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2xs); }
.browse-field > span { color: var(--muted); font-size: .74rem; }
.browse-field input, .browse-field select, .browse-reset {
  width: 100%; height: 44px; min-width: 0; padding: 0 var(--space-sm);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  outline: 2px solid transparent; outline-offset: 1px;
  background: var(--panel); color: var(--text); font: .86rem/1 var(--font-body);
}
.browse-field input::placeholder { color: var(--dim); }
.browse-field input:disabled, .browse-field select:disabled, .browse-reset:disabled {
  opacity: .55; cursor: not-allowed;
}
.browse-reset { align-self: end; cursor: pointer; white-space: nowrap; }
.browse-reset:active { transform: translateY(1px); }
.browse-status {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 3.25rem; gap: var(--space-md); color: var(--muted); font-size: .82rem;
}
.browse-status p { margin: 0; }
.browse-status b { color: var(--text); font-family: var(--font-mono); }
.browse-status a {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.catalogue-empty {
  padding: var(--space-xl) 0; border-bottom: 1px solid var(--line); color: var(--muted);
}
.catalogue-empty h3 { color: var(--text); }
.catalogue-empty .browse-reset { width: auto; }

@media (max-width: 48rem) {
  html:not(.device-ready) [data-demo-target="desktop"][data-device-item] { display: none; }
}
@media (min-width: 48.001rem) {
  html:not(.device-ready) [data-demo-target="mobile"][data-device-item] { display: none; }
}

/* ---------- screen target filter ---------- */
.device-picker {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
  margin: 0 0 1.6rem; color: var(--muted); font-size: .78rem;
}
.device-picker-label { margin-inline-end: .2rem; font-family: var(--mono); }
.device-picker button {
  min-height: 2rem; padding: .25rem .65rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel); color: var(--muted); cursor: pointer;
  font: inherit; white-space: nowrap;
}
.device-picker button:active { background: var(--panel-2); }
.device-picker button.on,
.device-picker button[aria-pressed="true"] {
  border-color: var(--sel-line); background: var(--sel-bg); color: var(--text);
}
.device-picker button:disabled { opacity: .55; cursor: not-allowed; }
.device-status { min-width: 8rem; margin-inline-start: .25rem; }
.badge.target { color: var(--text); }
.badge.target.mobile { border-color: var(--mode-line); }
.badge.target.responsive { border-color: var(--sel-line); }

/* ---------- badges ---------- */
.tags { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.badge {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--muted); font-size: .72rem; white-space: nowrap;
}
.badge.warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--stale); }
.badge.mode { border-color: var(--mode-line); background: var(--mode-bg); color: var(--accent-2); }
.badge.harness { font-family: var(--mono); }
.badge.ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.badge.stale { border-color: var(--warn-line); background: var(--warn-bg); color: var(--stale); }
.badge.error { border-color: var(--error-line); background: var(--error-bg); color: var(--error); }
.badge.empty { border-color: var(--line); }

/* ---------- demo + model pages ---------- */
.crumb { color: var(--muted); font-size: .85rem; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--accent); }
.demo-head-full { max-width: 70ch; }
.demo-head-full .tags { margin-top: .9rem; }
.prompt-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem 1.2rem; margin-bottom: 2.5rem; box-shadow: var(--shadow);
}
.prompt-box summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.prompt-box summary:hover { color: var(--text); }
.prompt-box pre {
  white-space: pre-wrap; font-family: var(--mono); font-size: .82rem; line-height: 1.6;
  color: var(--code-text); background: var(--code-bg); border: 1px solid var(--code-line);
  border-radius: var(--radius-sm); padding: .8rem .9rem;
  margin: 1rem 0 .2rem; max-height: 60vh; overflow: auto;
}

.result-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.result-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow); transition: box-shadow .15s, border-color .15s, translate .15s;
}
.result-card:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); translate: 0 -2px; }
/* The state stripe. It sits on top so a shelf of cards can be read for failures at a glance,
   without any of them having to shout in the metadata. */
.result-card::before {
  content: ""; display: block; height: 3px; background: var(--empty);
}
.result-card.ok::before { background: var(--ok); }
.result-card.stale::before { background: var(--stale); }
.result-card.error::before { background: var(--error); }
.result-card .shot { display: block; line-height: 0; background: var(--panel-2); }
.result-card .shot img { aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line); }
.result-card .noshot { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.result-meta { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.result-meta h3 { margin-bottom: .5rem; font-family: var(--mono); font-size: .92rem; }
.result-meta h3 a { color: var(--text); }
.result-card:hover .result-meta h3 a { color: var(--accent); }

/* What the run cost, as a row of value-over-label pairs rather than a mono sentence: the
   numbers are the comparable part, so they get the weight and the units get out of the way. */
.statline {
  display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; margin: .7rem 0 0; padding: 0;
  list-style: none;
}
.statline li { display: flex; flex-direction: column; min-width: 0; }
.statline b { font: 600 .85rem/1.3 var(--mono); color: var(--text); }
.statline span { color: var(--muted); font-size: .7rem; text-transform: lowercase; }

.result-meta .links {
  margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line-soft);
  font-size: .85rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center;
}
.result-meta .links::before { content: none; }
.links .go {
  font-weight: 600; padding: .18rem .7rem; border-radius: 999px;
  border: 1px solid var(--sel-line); background: var(--sel-bg); color: var(--text);
}
.links .go:hover { border-color: var(--accent); text-decoration: none; color: var(--accent); }
.links .quiet { color: var(--muted); }
.links .quiet:hover { color: var(--accent); }
.missing-note { color: var(--muted); font-size: .85rem; margin-top: 1.2rem; }
.missing-note .mono { white-space: nowrap; }

.two-col { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.two-col aside {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; align-self: start; box-shadow: var(--shadow);
}
.two-col aside h2 { font-size: 1rem; }
table.params { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.params th {
  text-align: left; font-weight: 500; color: var(--muted); padding: .35rem 0;
  border-bottom: 1px solid var(--line); width: 50%;
}
table.params td { text-align: right; padding: .35rem 0; border-bottom: 1px solid var(--line); }

/* ---------- play (the cabinet) ----------
   A photograph of the thing, what it cost to build, and the door. The artifact itself is not
   on this page — it is one click away in its own tab, which is the only place a game can
   actually be played. */
.play { display: flex; flex-direction: column; gap: 1.2rem; }
.play-head { max-width: 70ch; }
.play-head h1 { margin-bottom: .3rem; }

/* The picker is a filmstrip, not a row of names: which model you want to look at next is a
   question about the pictures, so the pictures are what you choose from. */
.model-rail {
  display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .5rem;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.rail-item {
  flex: 0 0 auto; width: 9.5rem; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: .35rem; padding: .35rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
  color: var(--muted); font: inherit; text-align: start; cursor: pointer;
}
.rail-item:hover { border-color: var(--accent); color: var(--text); }
.rail-item[aria-pressed="true"] {
  border-color: var(--accent); background: var(--sel-bg); color: var(--text);
}
.rail-shot {
  display: block; line-height: 0; border-radius: 5px; overflow: hidden;
  background: var(--panel-2); aspect-ratio: 16 / 10;
}
.rail-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; background: var(--shot-mat); }
.rail-shot.blank { display: grid; place-items: center; }
.rail-shot.blank::after { content: "no shot"; font-size: .62rem; color: var(--muted); }
.rail-name {
  font: 600 .72rem/1.25 var(--mono); color: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-harness {
  font: 400 .64rem/1.2 var(--mono); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-hint { margin: -.4rem 0 0; }

.cabinet { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); }
/* align-self and line-height both exist to keep the frame tight around the photograph: the
   grid would otherwise stretch it to the height of the panel beside it, and the whitespace
   around the <img> would otherwise add a stray line box under it. */
.cabinet-shot {
  position: relative; display: block; align-self: start; line-height: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--panel-2); box-shadow: var(--shadow);
}
.cabinet-shot img { display: block; width: 100%; height: auto; background: var(--shot-mat); }
.cabinet-shot.empty { display: grid; place-items: center; aspect-ratio: 16 / 10; }
.cabinet-empty { color: var(--muted); font-size: .85rem; line-height: 1.5; }
/* The whole photograph is the play button; the disc is what says so. */
.cabinet-play {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  translate: -50% -50%; display: grid; place-items: center;
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: var(--play-disc);
  border: 1px solid var(--accent);
  color: var(--accent); font-size: 1.5rem; padding-inline-start: .2rem;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: scale .12s, background .12s;
}
.cabinet-shot:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.cabinet-shot:hover .cabinet-play {
  scale: 1.08; background: var(--play-disc-hover);
}
.cabinet-shot.empty .cabinet-play { display: none; }
[data-demo-target="mobile"] .cabinet-shot img { max-width: 430px; margin-inline: auto; }

.cabinet-side {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; align-self: start; box-shadow: var(--shadow);
}
.cabinet-side h2 { font-size: 1rem; margin-bottom: .5rem; overflow-wrap: anywhere; }
.stat-list {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .7rem;
  margin: 1rem 0; font-size: .85rem;
}
.stat-list dt { font-family: var(--mono); color: var(--text); }
.stat-list dd { color: var(--muted); margin: 0; }

.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.4rem;
  padding: .4rem 1rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-size: .85rem; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--color-accent-ink);
  font-weight: 600; flex: 1 1 auto;
}
.btn.primary:hover {
  background: var(--focus); border-color: var(--focus); color: var(--color-accent-ink);
}
.btn.ghost { color: var(--muted); }

.play-hint { color: var(--muted); font-size: .8rem; margin-top: .8rem; }
.errbox { margin-top: .9rem; font-size: .8rem; }
.errbox summary { cursor: pointer; color: var(--stale); }
.errbox ul { margin: .5rem 0 0; padding-inline-start: 1.1rem; color: var(--muted); }
.errbox li { overflow-wrap: anywhere; margin-bottom: .3rem; }
.shot-note { color: var(--muted); margin-top: .9rem; }

/* ---------- the run log ----------
   A run is a list of steps, and a step is "it thought, it acted, it got an answer back". The
   page is that list and nothing else. Everything expensive to read starts folded, because the
   shape of a run is legible from the tool names and the token meters alone. */
.log-head { margin-bottom: 1.6rem; }
.log-head .stat-row { margin-top: 1.1rem; }
.log-links { margin-top: 1rem; font-size: .85rem; color: var(--muted); }

/* the attempt rail: one chip per pass this model made at this demo, newest last */
.attempt-rail { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .9rem; }
.attempt-rail .rail-label { margin: 0 .2rem 0 0; }
.att {
  display: flex; align-items: baseline; gap: .4rem; padding: .22rem .6rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  color: var(--muted); font-size: .76rem;
}
.att:hover { border-color: var(--accent); text-decoration: none; }
.att b { color: var(--text); font: 600 .8rem var(--mono); }
.att.on { border-color: var(--sel-line); background: var(--sel-bg); }
.att.on b, .att.on span { color: var(--text); }
.att.error b, .att.error span { color: var(--error); }

.fix-note {
  border: 1px solid var(--mode-line); background: var(--mode-bg); border-radius: var(--radius);
  padding: .8rem 1rem; margin-bottom: 1rem;
}
.fix-note h3 {
  margin: 0 0 .4rem; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--accent-2);
}
.fix-note pre {
  margin: 0; white-space: pre-wrap; font-family: inherit; font-size: .9rem; color: var(--text);
}
.fixing { margin: .3rem 0 0; }
.fixing em { color: var(--accent-2); font-style: normal; }
.badge.attempts { border-color: var(--mode-line); background: var(--mode-bg); color: var(--accent-2); }

.log-layout {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
}

.log-rail {
  position: static; align-self: start; max-height: none; overflow: auto;
}
.rail-block { margin-bottom: 1.4rem; }
.rail-block h3 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
}
.rail-block .tags { margin-top: .35rem; }
.rail-label { margin: .8rem 0 0; font-size: .72rem; color: var(--muted); }
.peek {
  color: var(--muted); font-weight: 400; font-size: .78rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-list { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.file-list li {
  display: flex; justify-content: space-between; gap: .6rem;
  padding: .2rem 0; border-bottom: 1px solid var(--line);
}

.jump-list { display: flex; flex-direction: column; }
.jump {
  display: flex; gap: .5rem; align-items: baseline; padding: .16rem .4rem;
  border-radius: 6px; color: var(--muted); font-size: .78rem;
}
.jump:hover { background: var(--panel); text-decoration: none; }
.jump.dim { opacity: .3; }
.jump-n { width: 1.6em; text-align: right; color: var(--text); font: .72rem var(--mono); }
.jump-tools { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.log-controls {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  position: static; z-index: 10;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .7rem;
}
.chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.chip {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: .2rem .7rem; cursor: pointer;
  font: 400 .78rem/1.5 inherit;
}
.chip:hover { border-color: var(--accent); }
.chip.on { color: var(--text); border-color: var(--sel-line); background: var(--sel-bg); }
.chip[data-only].on { color: var(--error); border-color: var(--error-line); background: var(--error-bg); }
#log-search {
  flex: 1 1 12rem; min-width: 8rem; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .3rem .6rem;
  font: 400 .85rem inherit;
}
#log-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
#log-count { margin: .6rem 0 1.2rem; }

.steps { list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: 2rem minmax(0, 1fr); }
.step[hidden] { display: none; }
.step-gutter { position: relative; display: flex; flex-direction: column; align-items: center; }
/* the timeline: one continuous line down the gutter, behind the step numbers */
.step-gutter::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--line);
}
.step:last-child .step-gutter::before { bottom: auto; height: 1.5rem; }
.step-n {
  position: relative; z-index: 1; width: 1.7rem; height: 1.7rem; margin-top: .35rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--muted); font: 600 .72rem var(--mono);
}
.step-n:hover, .step.cursor .step-n { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.step-body { padding: 0 0 1.4rem .5rem; min-width: 0; }
.step.cursor .step-body { outline: 1px solid var(--sel-line); outline-offset: .4rem; border-radius: 6px; }
.step-head {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  min-height: 1.7rem; margin-top: .35rem;
}

/* magnitude meter: one hue, fixed track, the value itself stated in text beside it */
.meter {
  display: inline-block; width: 88px; height: 6px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line); overflow: hidden;
}
.meter i { display: block; height: 100%; width: var(--w); background: var(--accent); border-radius: 999px; }

.fold { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin: .45rem 0; }
.fold[hidden] { display: none; }
.fold > summary {
  cursor: pointer; padding: .4rem .7rem; display: flex; gap: .6rem; align-items: baseline;
  font-size: .84rem; color: var(--muted);
}
.fold > summary:hover { color: var(--text); }
.fold-title { display: flex; gap: .5rem; align-items: baseline; min-width: 0; flex: 1; }
.fold-note { color: var(--muted); font-size: .74rem; white-space: nowrap; }
.fold-body { padding: 0 .7rem .7rem; }
.fold.wide { background: var(--panel-2); }
.fold.reasoning { background: var(--panel-2); border-style: dashed; }

.think, .code {
  margin: .4rem 0 0; padding: .6rem .7rem; background: var(--code-bg);
  border: 1px solid var(--code-line);
  border-radius: var(--radius-sm); font-family: var(--mono); font-size: .78rem; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; overflow: auto; max-height: 26rem;
}
.think { color: var(--code-text); }
.code code, .think code { font: inherit; color: inherit; background: none; padding: 0; }
.reply .md { margin: .3rem 0; }
.fold.reply-fold .fold-body { max-height: 32rem; overflow: auto; }
.reply code {
  font-family: var(--mono); font-size: .84em; background: var(--panel-2);
  padding: .05em .3em; border-radius: 4px;
}

.fold.call > summary { font-family: var(--mono); font-size: .8rem; }
.tool-glyph { color: var(--accent); width: 1em; display: inline-block; }
.tool-name { color: var(--text); }
.tool-arg {
  color: var(--muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arg { margin-top: .5rem; }
.arg-k {
  display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
}
.arg-v { display: block; word-break: break-all; }
.tool-out { margin-top: .7rem; }
.tool-out.is-error .code { border-color: var(--error-line); background: var(--error-bg); }
.step-error { border-left: 3px solid var(--error); padding-left: .7rem; margin: .5rem 0; }
.step-error b { color: var(--error); font-size: .85rem; }
.fail-note { color: var(--error); font-size: .8rem; margin: .3rem 0 0; }
.log-link { font-weight: 600; }

/* ---------- coverage ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; font-size: .82rem; color: var(--muted); }
.key { display: flex; align-items: center; gap: .4rem; }
.key i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

.matrix-block { margin-bottom: 2rem; }
.matrix-block h3 { font-family: var(--mono); font-size: .95rem; }
.matrix-scroll { overflow-x: auto; padding-bottom: .5rem; }
table.matrix { border-collapse: separate; border-spacing: 3px; }
table.matrix th.rot { height: 130px; vertical-align: bottom; padding: 0; width: 22px; }
table.matrix th.rot span {
  display: block; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 400 .72rem/1 var(--mono); color: var(--muted); white-space: nowrap;
}
table.matrix th.rowhead {
  text-align: right; font-weight: 500; font-size: .85rem; padding-right: .6rem;
  white-space: nowrap; position: sticky; left: 0; background: var(--bg);
}
table.matrix th.rowhead a { color: var(--text); }
.matrix-target { display: block; color: var(--muted); font: 400 .62rem var(--mono); }
td.cell, .cell { width: 22px; height: 22px; border-radius: 4px; padding: 0; }
td.cell a { display: block; width: 100%; height: 100%; }
.cell.ok { background: var(--ok); }
.cell.stale { background: var(--stale); }
.cell.empty { background: var(--empty); }
.cell.error { background: var(--error); }
.cell.missing { background: var(--cube-void); border: 1px solid var(--line); }
td.cell:hover { outline: 2px solid var(--accent); outline-offset: 1px; }

.cube-wrap { position: relative; }
#cube {
  width: 100%; max-width: 900px; height: auto; touch-action: none; cursor: grab;
  background: linear-gradient(180deg, var(--cube-sky-1), var(--cube-sky-2));
  border: 1px solid var(--line); border-radius: var(--radius);
}
#cube.dragging { cursor: grabbing; }
.cube-tip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift); color: var(--text);
  padding: .45rem .6rem; font-size: .78rem; line-height: 1.4; max-width: 260px; z-index: 5;
}
.cube-tip b { display: block; }
.cube-controls { display: flex; gap: .6rem; align-items: center; margin-top: .8rem; flex-wrap: wrap; }
.cube-controls button {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .35rem .8rem; font-size: .82rem; cursor: pointer;
  white-space: nowrap;
}
.cube-controls button:hover { border-color: var(--accent); }
.cube-controls label { color: var(--muted); font-size: .82rem; display: flex; gap: .35rem; align-items: center; }

/* ---------- keyboard, touch, and wider layouts ---------- */
:where(a, button, select, summary, input, canvas):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .device-picker button:hover {
    border-color: var(--accent); color: var(--text);
  }
  .demo-card:hover { border-color: var(--accent); }
  .demo-card:hover .demo-body h3 a, .mini:hover .mini-meta b { color: var(--accent); }
  .mini:hover .shot { border-color: var(--accent); }
  .leader-row:hover .leader-label { color: var(--accent); }
  .browse-field input:hover, .browse-field select:hover, .browse-reset:hover {
    background: var(--panel-2); border-color: var(--sel-line);
  }
}

@media (pointer: coarse) {
  .topbar nav a, .row-link, .btn, .device-picker button,
  .cube-controls button, .cube-controls label, .chip, .att, .fold > summary,
  .leader-row, .browse-reset {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .leader-row { display: grid; }
  .theme-switch button { min-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-card, .result-card, .mini .shot, .cabinet-play { transition: none; }
  .demo-card:hover, .result-card:hover, .mini:hover .shot { translate: none; }
}

@media (min-width: 40rem) {
  .demo-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .browse-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .browse-search { grid-column: 1 / -1; }
  .site-footer { flex-direction: row; justify-content: space-between; align-items: end; }
  .footer-meta { text-align: end; }
  .result-grid { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
  .topbar {
    gap: 1.5rem; padding-block: .9rem;
    padding-inline-start: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-left));
    padding-inline-end: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-right));
  }
  .site-footer {
    padding-inline-start: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-left));
    padding-inline-end: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-right));
  }
}

@media (min-width: 56.25rem) {
  .index-hero { grid-template-columns: minmax(0, 1.4fr) minmax(18rem, .6fr); }
  .hero-coverage { grid-column: 1; }
  .two-col { grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); }
  .cabinet { grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem); }
}

@media (min-width: 60rem) {
  .coverage-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .browse-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .browse-search { grid-column: span 2; }
}

@media (min-width: 62.5rem) {
  .log-layout { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); }
  .log-rail { position: sticky; top: 4.6rem; max-height: calc(100dvh - 6rem); }
  .log-controls { position: sticky; top: 3.6rem; }
  .step { grid-template-columns: 2.4rem minmax(0, 1fr); }
}

@media (min-width: 64rem) {
  .mini-grid {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible;
  }
  .mini { min-width: 0; }
}

@media (min-width: 78rem) {
  .demo-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 90rem) {
  .browse-controls { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}