From 744fa5263e1d6769a0bddaebc50602663daea46a Mon Sep 17 00:00:00 2001
From: Vuong Hoang <vh@phasefinal.com>
Date: Tue, 22 Sep 2026 22:12:52 -0700
Subject: [PATCH] =?UTF-8?q?feat(theme):=20SVOS=20retheme=20=E2=80=94=20con?=
 =?UTF-8?q?cept-round=20candidate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Re-skins every Booth surface in the SVOS design system (design-systems
palettes/svos @ ed2f8d8). Visual and interaction layer only: no route,
no copy, no ordering and no information-architecture change.

- _svos_tokens.css: SVOS semantic tokens vendored by copy, with the four
  [data-theme] scopes re-scoped onto prefers-color-scheme and
  prefers-contrast (dark, light, dark-hc, light-hc). Included into
  base.html's <style>; cached at startup like every other template.
- base.html: the accreted Australis sheet is rewritten against semantic
  tokens only. It also fixes four undefined variables (--line, --bg,
  --fg, --muted) that the keep/blur/reveal controls had been reading.
  The three SVOS devices each have exactly one job: reticle = selection
  (grid cursor, :target, picked option), hazard = irreversible (Wipe
  now, armed bulk delete), glow = live power (service dot, live bench).
- The flag list renders as wrapped chips, so a large flag set no longer
  pushes the grid below the fold. The list order is unchanged.
- IBM Plex Sans + JetBrains Mono load via Google Fonts with
  display=swap and system fallbacks (approved by booth-dev).
- view.html, doc.html: inline styles moved onto tokens.
- embed.js: fragment palette as custom properties scoped to .bk-ask;
  `.bk-ask-opt:has(input:checked)` still appears exactly once.
- Favicon (base.html + app.FAVICON_HREF, kept in sync): graphite tile
  with reticle corners.

Verified: 642 passed, the same count as the pre-change baseline.
Visual order matches document order on 32 renders (4 booths x 4 widths
x 2 schemes). A positive control, one tile given `order:-1`, is
detected by the same check.
---
 booth/app.py                     |    7 +-
 booth/static/embed.js            |   88 ++-
 booth/templates/_svos_tokens.css |  273 ++++++++
 booth/templates/base.html        | 1082 ++++++++++++++++--------------
 booth/templates/doc.html         |   12 +-
 booth/templates/view.html        |   18 +-
 6 files changed, 928 insertions(+), 552 deletions(-)
 create mode 100644 booth/templates/_svos_tokens.css

diff --git a/booth/app.py b/booth/app.py
index 2fe3b3d..d054e9f 100644
--- a/booth/app.py
+++ b/booth/app.py
@@ -559,9 +559,10 @@ def _zip_filename(name: str) -> str:
 # the same icon. Keep the two in sync if the Booth's icon ever changes.
 FAVICON_HREF = (
     "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'"
-    "%3E%3Crect width='32' height='32' rx='7' fill='%23171a23'/%3E%3Ccircle cx='16' "
-    "cy='16' r='6' fill='none' stroke='%2342dcd1' stroke-width='2.5'/%3E%3Ccircle "
-    "cx='16' cy='16' r='2.2' fill='%2342dcd1'/%3E%3C/svg%3E"
+    "%3E%3Crect width='32' height='32' rx='7' fill='%2315191d'/%3E%3Cpath d='M7 12V7h5"
+    "M20 7h5v5M7 20v5h5M25 20v5h-5' fill='none' stroke='%23b2cd12' stroke-width='2.5' "
+    "stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='16' r='3' "
+    "fill='%23b2cd12'/%3E%3C/svg%3E"
 )
 
 # The seam a verbatim report declares to get the Booth's chrome. ONE line, and
diff --git a/booth/static/embed.js b/booth/static/embed.js
index b4a3ec4..b552b10 100644
--- a/booth/static/embed.js
+++ b/booth/static/embed.js
@@ -28,53 +28,69 @@
   window.__boothEmbed = true;
 
   var CSS = [
+    /* SVOS values, written as literals: this sheet lands in a page we did not
+       write, so it can lean on none of base.html's tokens. Hex equivalents of
+       the SVOS semantic tokens (design-systems palettes/svos @ ed2f8d8). */
     /* ---- the way home, and the open-asks jump ---- */
     ".booth-nav-home,.booth-nav-asks{position:fixed;top:0;z-index:2147483647;",
-    "display:inline-block;margin:.6rem;padding:.34rem .72rem;border-radius:8px;",
-    "text-decoration:none;letter-spacing:.01em;box-shadow:0 2px 10px rgba(0,0,0,.35)}",
+    "display:inline-block;margin:.6rem;padding:.38rem .75rem;border-radius:8px;",
+    "text-decoration:none;letter-spacing:.01em;box-shadow:0 4px 14px rgba(0,0,0,.4)}",
     /* top-right: a top-left chip clips the page title on left-aligned report
        layouts, and this matches the zoom view's back affordance. */
-    ".booth-nav-home{right:0;font:600 13px/1.25 ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;",
-    "color:#dfe7ef;background:rgba(20,23,32,.82);border:1px solid rgba(66,220,209,.35);",
-    "-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .18s,border-color .18s}",
-    ".booth-nav-home:hover{background:rgba(28,33,46,.95);border-color:rgba(66,220,209,.75)}",
-    ".booth-nav-asks{right:7.2rem;font:700 13px/1.25 ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;",
-    "color:#171a23;background:#ffe14e;border:1px solid #ffe14e;transition:filter .18s}",
-    ".booth-nav-asks:hover{filter:brightness(1.08)}",
+    ".booth-nav-home{right:0;font:600 13px/1.25 'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;",
+    "color:#dce3e5;background:rgba(12,16,20,.86);border:1px solid rgba(255,255,255,.16);",
+    "-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .12s,border-color .12s}",
+    ".booth-nav-home:hover{background:rgba(31,35,40,.96);border-color:rgba(255,255,255,.34)}",
+    /* amber = needs you: the one chip that asks to be clicked */
+    ".booth-nav-asks{right:7.4rem;font:600 13px/1.25 'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;",
+    "color:#15191d;background:#fbc10f;border:1px solid #fbc10f;transition:filter .12s}",
+    ".booth-nav-asks:hover{filter:brightness(1.06)}",
     "@media print{.booth-nav-home,.booth-nav-asks{display:none}}",
     /* ---- ask fragments. Self-contained: the host page carries its own CSS and
-       nothing here may inherit from it, so the palette adapts via
-       prefers-color-scheme rather than borrowing. ---- */
-    ".bk-ask{margin:1.1rem 0;padding:.85rem .95rem;border:1px solid rgba(128,140,160,.34);",
-    "border-top:2px solid #e0b93c;border-radius:9px;background:rgba(128,140,160,.07);",
-    "font:15px/1.5 ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}",
-    ".bk-ask.bk-done{border-top-color:#3fae6a}",
-    ".bk-ask.bk-skip{border-top-color:#6f7c8c}",
-    ".bk-ask.bk-skip .bk-ask-tag{color:#8a97a6}",
-    ".bk-ask-tag{display:block;margin-bottom:.5rem;font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;",
-    "letter-spacing:.12em;text-transform:uppercase;color:#c9a227}",
-    ".bk-ask.bk-done .bk-ask-tag{color:#3fae6a}",
-    ".bk-ask-title{margin:0 0 .15rem;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;opacity:.62}",
+       nothing here may inherit from it. The palette is a set of custom
+       properties SCOPED TO .bk-ask, flipped by prefers-color-scheme — so each
+       rule below is written once and a host page cannot reach the values
+       without targeting our own class. Neutrals stay translucent so the
+       fragment sits on a light or a dark host alike. ---- */
+    ".bk-ask{--bk-accent:#b2cd12;--bk-accent-line:rgba(178,205,18,.55);--bk-accent-soft:rgba(178,205,18,.12);",
+    "--bk-on-accent:#0c1014;--bk-open:#d29a02;--bk-open-text:#fbc10f;--bk-done:#71a166;--bk-done-text:#9bce90;",
+    "--bk-skip:#868d91;--bk-err:#fea47d}",
+    "@media (prefers-color-scheme: light){.bk-ask{--bk-accent:#586519;--bk-accent-line:rgba(88,101,25,.55);",
+    "--bk-accent-soft:rgba(88,101,25,.11);--bk-on-accent:#fff;--bk-open:#7c5500;--bk-open-text:#7c5500;",
+    "--bk-done:#486741;--bk-done-text:#486741;--bk-skip:#52595e;--bk-err:#a42e07}}",
+    ".bk-ask{margin:1.1rem 0;padding:.9rem 1rem;border:1px solid rgba(128,140,160,.34);",
+    "border-top:2px solid var(--bk-open);border-radius:8px;background:rgba(128,140,160,.07);",
+    "font:15px/1.55 'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}",
+    ".bk-ask.bk-done{border-top-color:var(--bk-done)}",
+    ".bk-ask.bk-skip{border-top-color:var(--bk-skip)}",
+    ".bk-ask-tag{display:inline-block;margin-bottom:.6rem;padding:2px 7px;border:1.5px solid currentColor;border-radius:3px;",
+    "font:600 10.5px/1.3 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;",
+    "letter-spacing:.12em;text-transform:uppercase;color:var(--bk-open-text)}",
+    ".bk-ask.bk-done .bk-ask-tag{color:var(--bk-done-text)}",
+    ".bk-ask.bk-skip .bk-ask-tag{color:var(--bk-skip)}",
+    ".bk-ask-title{margin:0 0 .15rem;font:500 11px/1.4 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;",
+    "letter-spacing:.12em;text-transform:uppercase;opacity:.62}",
     ".bk-ask-prompt{margin:0 0 .6rem;font-weight:600}",
-    ".bk-ask-opts{display:flex;flex-direction:column;gap:.3rem}",
-    ".bk-ask-opt{display:flex;align-items:flex-start;gap:.55rem;padding:.45rem .6rem;cursor:pointer;",
-    "border:1px solid rgba(128,140,160,.3);border-radius:6px;background:rgba(128,140,160,.06)}",
+    ".bk-ask-opts{display:flex;flex-direction:column;gap:.35rem}",
+    ".bk-ask-opt{display:flex;align-items:flex-start;gap:.6rem;padding:.55rem .7rem;cursor:pointer;",
+    "border:1px solid rgba(128,140,160,.3);border-radius:8px;background:rgba(128,140,160,.06)}",
     ".bk-ask-opt:hover{border-color:rgba(128,140,160,.62)}",
-    ".bk-ask-opt:has(input:checked){border-color:#2fa8a0;background:rgba(47,168,160,.13)}",
-    ".bk-ask-opt input{margin:.25rem 0 0;flex:0 0 auto;accent-color:#2fa8a0}",
+    ".bk-ask-opt:has(input:checked){border-color:var(--bk-accent-line);background:var(--bk-accent-soft)}",
+    ".bk-ask-opt input{margin:.25rem 0 0;flex:0 0 auto;accent-color:var(--bk-accent)}",
     ".bk-ask-lab{display:flex;flex-direction:column;gap:.1rem;min-width:0}",
-    ".bk-ask-det{font-size:.8rem;opacity:.68}",
-    ".bk-ask-notes{display:block;width:100%;box-sizing:border-box;margin:.6rem 0 0;padding:.5rem .6rem;",
+    ".bk-ask-det{font-size:.82rem;opacity:.68}",
+    ".bk-ask-notes{display:block;width:100%;box-sizing:border-box;margin:.6rem 0 0;padding:.5rem .65rem;",
     "font:inherit;font-size:.9rem;color:inherit;background:rgba(128,140,160,.09);",
-    "border:1px solid rgba(128,140,160,.34);border-radius:6px;resize:vertical}",
-    ".bk-ask-go{margin-top:.7rem;cursor:pointer;font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;",
-    "letter-spacing:.06em;padding:.6rem 1.1rem;border-radius:6px;border:1px solid #2fa8a0;",
-    "background:#2fa8a0;color:#08131a}",
-    ".bk-ask-go:hover{filter:brightness(1.09)}",
-    ".bk-ask-was{margin:.15rem 0 .55rem;font-size:.84rem;opacity:.8}",
+    "border:1px solid rgba(128,140,160,.34);border-radius:8px;resize:vertical}",
+    ".bk-ask-notes:focus{outline:2px solid var(--bk-accent);outline-offset:1px}",
+    /* the primary — green, because submitting is what arms the answer */
+    ".bk-ask-go{margin-top:.75rem;cursor:pointer;font:600 13px/1 'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;",
+    "padding:.7rem 1.1rem;border-radius:8px;border:1px solid var(--bk-accent);",
+    "background:var(--bk-accent);color:var(--bk-on-accent)}",
+    ".bk-ask-go:hover{filter:brightness(1.06)}",
+    ".bk-ask-was{margin:.15rem 0 .55rem;font-size:.86rem;opacity:.8}",
     ".bk-ask-was b{opacity:1}",
-    ".bk-ask-err{color:#d6452a;font-size:.86rem}",
-    "@media (prefers-color-scheme: light){.bk-ask-tag{color:#8a6d10}.bk-ask-go{color:#fff}}",
+    ".bk-ask-err{color:var(--bk-err);font-size:.86rem}",
     "@media print{.bk-ask{break-inside:avoid}}"
   ].join("");
 
diff --git a/booth/templates/_svos_tokens.css b/booth/templates/_svos_tokens.css
new file mode 100644
index 0000000..f5486c9
--- /dev/null
+++ b/booth/templates/_svos_tokens.css
@@ -0,0 +1,273 @@
+/* SVOS tokens — VENDORED BY COPY from design-systems
+   palettes/svos/colors.css + svos-theme.css @ ed2f8d8. Do not hand-edit values;
+   re-vendor from the source. The only transform: SVOS scopes its four themes
+   by [data-theme]; the Booth has no theme switch and follows the OS, so the
+   blocks are re-scoped onto prefers-color-scheme / prefers-contrast queries.
+   Semantic tokens only in the Booth layer below — never a primitive, never
+   a raw hex. */
+:root {
+  --graphite-10: oklch(0.17 0.01 250);
+  --graphite-15: oklch(0.21 0.01 248);
+  --graphite-20: oklch(0.255 0.011 246);
+  --graphite-25: oklch(0.31 0.012 244);
+  --graphite-30: oklch(0.37 0.012 242);
+  --graphite-40: oklch(0.46 0.012 238);
+  --graphite-50: oklch(0.55 0.011 234);
+  --graphite-60: oklch(0.64 0.01 230);
+  --graphite-65: oklch(0.69 0.009 228);
+  --graphite-70: oklch(0.73 0.009 226);
+  --graphite-75: oklch(0.79 0.009 224);
+  --graphite-80: oklch(0.84 0.009 222);
+  --graphite-90: oklch(0.91 0.008 216);
+  --graphite-94: oklch(0.945 0.006 214);
+  --graphite-96: oklch(0.965 0.005 212);
+  --graphite-98: oklch(0.985 0.003 210);
+  --green-deep: oklch(0.48 0.1 119);
+  --green-base: oklch(0.66 0.15 119);
+  --green-bright: oklch(0.8 0.185 119);
+  --sage-deep: oklch(0.48 0.07 140);
+  --sage-base: oklch(0.66 0.1 140);
+  --sage-bright: oklch(0.8 0.1 140);
+  --amber-deep: oklch(0.48 0.1 78);
+  --amber-base: oklch(0.72 0.148 82);
+  --amber-bright: oklch(0.84 0.17 86);
+  --orange-deep: oklch(0.48 0.16 36);
+  --orange-base: oklch(0.66 0.213 38.5);
+  --orange-bright: oklch(0.8 0.12 44);
+  --intel-deep: oklch(0.48 0.09 235);
+  --intel-base: oklch(0.66 0.1 235);
+  --intel-bright: oklch(0.8 0.08 235);
+  --armed-green: var(--green-bright);
+  --hazard-orange: var(--orange-base);
+  --graphite-ink: var(--graphite-15);
+}
+
+/* dark — the lair default */
+:root {
+  color-scheme: dark;
+  --surface-sunken: var(--graphite-10);
+  --surface-base: var(--graphite-15);
+  --surface-raised: var(--graphite-20);
+  --surface-overlay: oklch(0.31 0.012 244);
+  --surface-card: var(--graphite-20);
+  --surface-input: var(--graphite-10);
+  --surface-scrim: oklch(0.14 0.01 250 / 0.72);
+  --text-heading: var(--graphite-90);
+  --text-body: var(--graphite-75);
+  --text-muted: var(--graphite-70);
+  --text-faint: var(--graphite-60);
+  --text-inverse: var(--graphite-15);
+  --text-link: var(--intel-bright);
+  --text-link-hover: var(--graphite-90);
+  --border-subtle: var(--graphite-25);
+  --border-default: var(--graphite-25);
+  --border-strong: var(--graphite-40);
+  --border-focus: var(--green-bright);
+  --accent: var(--green-bright);
+  --accent-hover: oklch(0.845 0.185 119);
+  --accent-active: oklch(0.73 0.17 119);
+  --accent-text: var(--green-bright);
+  --accent-contrast: var(--graphite-10);
+  --accent-soft: color-mix(in oklab, var(--green-bright) 12%, transparent);
+  --accent-soft-hover: color-mix(in oklab, var(--green-bright) 20%, transparent);
+  --success: var(--sage-base);
+  --success-text: var(--sage-bright);
+  --success-soft: color-mix(in oklab, var(--sage-base) 14%, transparent);
+  --warning: var(--amber-base);
+  --warning-text: var(--amber-bright);
+  --warning-soft: color-mix(in oklab, var(--amber-base) 13%, transparent);
+  --danger: var(--orange-base);
+  --danger-hover: oklch(0.71 0.18 38.5);
+  --danger-text: var(--orange-bright);
+  --danger-contrast: var(--graphite-10);
+  --danger-soft: color-mix(in oklab, var(--orange-base) 14%, transparent);
+  --intel: var(--intel-base);
+  --intel-text: var(--intel-bright);
+  --intel-soft: color-mix(in oklab, var(--intel-base) 14%, transparent);
+  --selection-bg: var(--green-bright);
+  --selection-fg: var(--graphite-10);
+}
+
+/* art layer: voices, type, space, radii, motion, elevation, the devices */
+:root {
+  /* voices — Plex speaks, mono records, Exan appears on the letterhead */
+  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --font-brand: "Exan", "IBM Plex Sans", sans-serif;
+
+  /* type — 14px base, calm ladder */
+  --size-display: 38px; --size-h1: 25px; --size-h2: 18px; --size-h3: 15px;
+  --size-body: 14px; --size-sm: 13px; --size-caption: 12px;
+  --size-micro: 11px; --size-mono: 12.5px;
+  --tracking-display: -0.02em; --tracking-h: -0.01em; --tracking-caps: 0.12em;
+  --leading-body: 1.55; --leading-tight: 1.12;
+
+  /* spacing — 4px base, roomier than an ops console has any right to be */
+  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
+  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
+  --space-16: 64px; --space-24: 96px;
+
+  /* radii — calm 8/12; the Bureau stamps square off at 3 */
+  --radius-sm: 3px; --radius-md: 6px; --radius-lg: 8px;
+  --radius-xl: 12px; --radius-pill: 999px;
+
+  /* motion — unhurried decel; nothing loops, nothing bounces */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 300ms;
+
+  /* elevation (dark default: heavier, cool) */
+  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
+  --shadow-md: 0 4px 14px rgb(0 0 0 / 0.4);
+  --shadow-lg: 0 14px 36px rgb(0 0 0 / 0.5);
+
+  /* device 2 — the hazard stripe (irreversible actions ONLY) */
+  --hazard-alt: color-mix(in oklab, var(--danger) 25%, var(--surface-sunken));
+  --hazard-stripe: repeating-linear-gradient(-45deg,
+    var(--danger) 0 8px, var(--hazard-alt) 8px 16px);
+
+  /* device 3 — the armed glow (live power ONLY) */
+  --glow-armed: 0 0 12px color-mix(in oklab, var(--accent) 40%, transparent);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color-scheme: light;
+    --surface-sunken: var(--graphite-94);
+    --surface-base: var(--graphite-96);
+    --surface-raised: var(--graphite-98);
+    --surface-overlay: #ffffff;
+    --surface-card: var(--graphite-98);
+    --surface-input: #ffffff;
+    --surface-scrim: oklch(0.21 0.01 248 / 0.4);
+    --text-heading: var(--graphite-15);
+    --text-body: var(--graphite-30);
+    --text-muted: var(--graphite-40);
+    --text-faint: var(--graphite-50);
+    --text-inverse: var(--graphite-90);
+    --text-link: oklch(0.455 0.097 235);
+    --text-link-hover: var(--graphite-15);
+    --border-subtle: oklch(0.89 0.006 218);
+    --border-default: oklch(0.85 0.008 220);
+    --border-strong: var(--graphite-75);
+    --border-focus: var(--green-deep);
+    --accent: var(--green-deep);
+    --accent-hover: oklch(0.44 0.1 119);
+    --accent-active: oklch(0.4 0.09 119);
+    --accent-text: oklch(0.44 0.1 119);
+    --accent-contrast: #ffffff;
+    --accent-soft: color-mix(in oklab, var(--green-deep) 11%, transparent);
+    --accent-soft-hover: color-mix(in oklab, var(--green-deep) 18%, transparent);
+    --success: var(--sage-deep);
+    --success-text: var(--sage-deep);
+    --success-soft: color-mix(in oklab, var(--sage-deep) 10%, transparent);
+    --warning: var(--amber-deep);
+    --warning-text: var(--amber-deep);
+    --warning-soft: color-mix(in oklab, var(--amber-base) 18%, transparent);
+    --danger: var(--orange-deep);
+    --danger-hover: oklch(0.44 0.15 36);
+    --danger-text: var(--orange-deep);
+    --danger-contrast: #ffffff;
+    --danger-soft: color-mix(in oklab, var(--orange-deep) 9%, transparent);
+    --intel: var(--intel-deep);
+    --intel-text: var(--intel-deep);
+    --intel-soft: color-mix(in oklab, var(--intel-deep) 9%, transparent);
+    --selection-bg: var(--green-deep);
+    --selection-fg: #ffffff;
+    --shadow-sm: 0 1px 2px rgb(23 31 38 / 0.07);
+    --shadow-md: 0 4px 14px rgb(23 31 38 / 0.1);
+    --shadow-lg: 0 14px 36px rgb(23 31 38 / 0.14);
+    --glow-armed: 0 0 10px color-mix(in oklab, var(--accent) 30%, transparent);
+  }
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --surface-sunken: var(--graphite-10);
+    --surface-base: var(--graphite-15);
+    --surface-raised: var(--graphite-20);
+    --surface-overlay: oklch(0.31 0.012 244);
+    --surface-card: var(--graphite-20);
+    --surface-input: var(--graphite-10);
+    --surface-scrim: oklch(0.14 0.01 250 / 0.72);
+    --text-heading: var(--graphite-90);
+    --text-body: var(--graphite-75);
+    --text-muted: var(--graphite-70);
+    --text-faint: oklch(0.7142 0.0085 230);
+    --text-inverse: var(--graphite-15);
+    --text-link: var(--intel-bright);
+    --text-link-hover: var(--graphite-90);
+    --border-subtle: var(--graphite-25);
+    --border-default: var(--graphite-40);
+    --border-strong: var(--graphite-50);
+    --border-focus: var(--green-bright);
+    --accent: var(--green-bright);
+    --accent-hover: oklch(0.845 0.185 119);
+    --accent-active: oklch(0.73 0.17 119);
+    --accent-text: var(--green-bright);
+    --accent-contrast: var(--graphite-10);
+    --accent-soft: color-mix(in oklab, var(--green-bright) 12%, transparent);
+    --accent-soft-hover: color-mix(in oklab, var(--green-bright) 20%, transparent);
+    --success: var(--sage-base);
+    --success-text: var(--sage-bright);
+    --success-soft: color-mix(in oklab, var(--sage-base) 14%, transparent);
+    --warning: var(--amber-base);
+    --warning-text: var(--amber-bright);
+    --warning-soft: color-mix(in oklab, var(--amber-base) 13%, transparent);
+    --danger: var(--orange-base);
+    --danger-hover: oklch(0.71 0.18 38.5);
+    --danger-text: var(--orange-bright);
+    --danger-contrast: var(--graphite-10);
+    --danger-soft: color-mix(in oklab, var(--orange-base) 14%, transparent);
+    --intel: var(--intel-base);
+    --intel-text: var(--intel-bright);
+    --intel-soft: color-mix(in oklab, var(--intel-base) 14%, transparent);
+    --selection-bg: var(--green-bright);
+    --selection-fg: var(--graphite-10);
+  }
+}
+
+@media (prefers-color-scheme: light) and (prefers-contrast: more) {
+  :root {
+    --surface-sunken: var(--graphite-94);
+    --surface-base: var(--graphite-96);
+    --surface-raised: var(--graphite-98);
+    --surface-overlay: #ffffff;
+    --surface-card: var(--graphite-98);
+    --surface-input: #ffffff;
+    --surface-scrim: oklch(0.21 0.01 248 / 0.4);
+    --text-heading: var(--graphite-15);
+    --text-body: var(--graphite-30);
+    --text-muted: oklch(0.4403 0.0102 238);
+    --text-faint: oklch(0.4403 0.00935 234);
+    --text-inverse: var(--graphite-90);
+    --text-link: oklch(0.4371 0.08245 235);
+    --text-link-hover: var(--graphite-15);
+    --border-subtle: oklch(0.89 0.006 218);
+    --border-default: var(--graphite-60);
+    --border-strong: var(--graphite-40);
+    --border-focus: var(--green-deep);
+    --accent: var(--green-deep);
+    --accent-hover: oklch(0.44 0.1 119);
+    --accent-active: oklch(0.4 0.09 119);
+    --accent-text: oklch(0.436 0.085 119);
+    --accent-contrast: #ffffff;
+    --accent-soft: color-mix(in oklab, var(--green-deep) 11%, transparent);
+    --accent-soft-hover: color-mix(in oklab, var(--green-deep) 18%, transparent);
+    --success: var(--sage-deep);
+    --success-text: oklch(0.4033 0.0595 140);
+    --success-soft: color-mix(in oklab, var(--sage-deep) 10%, transparent);
+    --warning: var(--amber-deep);
+    --warning-text: oklch(0.4103 0.085 78);
+    --warning-soft: color-mix(in oklab, var(--amber-base) 18%, transparent);
+    --danger: var(--orange-deep);
+    --danger-hover: oklch(0.44 0.15 36);
+    --danger-text: oklch(0.4225 0.136 36);
+    --danger-contrast: #ffffff;
+    --danger-soft: color-mix(in oklab, var(--orange-deep) 9%, transparent);
+    --intel: var(--intel-deep);
+    --intel-text: oklch(0.4373 0.0765 235);
+    --intel-soft: color-mix(in oklab, var(--intel-deep) 9%, transparent);
+    --selection-bg: var(--green-deep);
+    --selection-fg: #ffffff;
+  }
+}
diff --git a/booth/templates/base.html b/booth/templates/base.html
index 710e4f4..46e6e62 100644
--- a/booth/templates/base.html
+++ b/booth/templates/base.html
@@ -4,541 +4,625 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>{% block title %}The Booth{% endblock %}</title>
-<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23171a23'/%3E%3Ccircle cx='16' cy='16' r='6' fill='none' stroke='%2342dcd1' stroke-width='2.5'/%3E%3Ccircle cx='16' cy='16' r='2.2' fill='%2342dcd1'/%3E%3C/svg%3E">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%2315191d'/%3E%3Cpath d='M7 12V7h5M20 7h5v5M7 20v5h5M25 20v5h-5' fill='none' stroke='%23b2cd12' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='16' r='3' fill='%23b2cd12'/%3E%3C/svg%3E">
+{# The two SVOS voices. display=swap and the system stacks in --font-sans /
+   --font-mono are the failure mode booth-dev named: a dead or slow link must
+   degrade to instantly-readable text, never to invisible text. The request
+   carries the origin only (strict-origin-when-cross-origin), so booth names do
+   not reach Google. #}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400..700&family=JetBrains+Mono:wght@400..700&display=swap">
 <style>
+{% include "_svos_tokens.css" %}
+
   /* ============================================================
-     The Booth — Corviduo "Australis" theme (aurora accents, dark-first).
-     Token values adopted from ratatoskr-web (colors_and_type.css canonical
-     palette). Self-contained, no webfont CDN — system fallback stacks.
+     The Booth — SVOS layer.
+
+     Every colour below is a SEMANTIC token from _svos_tokens.css, so dark,
+     light and both high-contrast variants follow the OS with no second copy.
+     --text-faint is audited by SVOS as a PLACEHOLDER pair only, so it is kept
+     to placeholders and decorative glyphs; anything a person reads is
+     --text-muted or stronger.
+
+     The three SVOS devices, each with one job here and nowhere else:
+       reticle = selection        the grid cursor, the jumped-to tile, the
+                                  picked option in an ask
+       hazard  = irreversible     Wipe now, and bulk-delete once armed
+       glow    = live power       the service dot, a live bench
+     Colour carries one meaning each:
+       green   = armed / primary / focus / selection (and nothing else)
+       amber   = needs you        open asks, partial answers, held booths
+       sage    = judged           flags, answered asks
+       intel   = information      links, notes, the pickup badge
+       orange  = destructive      and unreadable state somebody must fix
+
+     ORDER IS LOAD-BEARING (CLAUDE.md invariant 6): nothing in this sheet
+     reorders a collection. No `order`, no column/masonry flow, no reversed
+     flex. Every wrapped row reads left-to-right in document order.
      ============================================================ */
-  :root{
-    /* ---- Australis raw palette ---- */
-    --aus-black:#222531; --aus-white:#a9bcc3; --aus-bright-white:#cce7ec; --aus-bright-black:#373b46;
-    --aus-dark-30:#414751; --aus-dark-40:#565f69; --aus-dark-50:#6e7882; --aus-dark-60:#86929d;
-    --aus-bright-70:#9daeb6; --aus-bright-80:#b3cbcf;
-    --aus-blue:#6388d8; --aus-bright-blue:#a4c4ff;
-    --aus-cyan:#00b1a8; --aus-bright-cyan:#42dcd1;
-    --aus-green:#16b866; --aus-bright-green:#51e08a;
-    --aus-red:#ff491a;  --aus-bright-red:#ff854f;
-    --aus-yellow:#e1c631; --aus-bright-yellow:#ffe14e;
-    --aus-magenta:#9d78ff; --aus-bright-magenta:#d8adff;
-
-    /* ---- semantic surface / foreground ---- */
-    --border-subtle:var(--aus-dark-30); --border-default:var(--aus-dark-40); --border-strong:var(--aus-dark-50);
-    --fg-0:var(--aus-bright-white); --fg-1:var(--aus-white); --fg-2:var(--aus-bright-70);
-    --fg-3:var(--aus-dark-60); --fg-muted:var(--aus-dark-50); --fg-on-accent:var(--aus-black);
-
-    /* ---- ratatoskr console surfaces ---- */
-    --rk-deep:#14161d; --rk-canvas:#171a23; --rk-well:#1b1e28; --rk-panel:#1d2029; --rk-ghost:#2c3040;
-
-    /* ---- type ---- */
-    --font-display:"Space Grotesk","Inter",ui-sans-serif,system-ui,sans-serif;
-    --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
-    --font-mono:"Berkeley Mono","JetBrains Mono","IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
-
-    /* ---- radius / shadow / motion ---- */
-    --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-pill:9999px;
-    --shadow-2:0 2px 6px rgba(10,12,18,.45),0 1px 2px rgba(10,12,18,.4);
-    --shadow-3:0 8px 24px rgba(10,12,18,.5),0 2px 6px rgba(10,12,18,.4);
-    --glow-cyan:0 0 0 3px rgba(66,220,209,.26);
-    --ease-out:cubic-bezier(.2,.8,.2,1);
-    --ease-aurora:cubic-bezier(.65,0,.35,1);
-  }
-  @media (prefers-color-scheme: light){
-    :root{
-      --rk-deep:#e5edef; --rk-canvas:#eef4f6; --rk-well:#ffffff; --rk-panel:#f6fafb; --rk-ghost:#cad8dd;
-      --border-subtle:#d3dfe3; --border-default:#bccad0; --border-strong:#9fb0b7;
-      --fg-0:#10151c; --fg-1:#26313a; --fg-2:#48555f; --fg-3:#64727c; --fg-muted:#8a99a1; --fg-on-accent:#ffffff;
-      --aus-bright-cyan:#0a938b; --aus-cyan:#0a938b; --aus-bright-green:#12925a; --aus-green:#12925a;
-      --aus-bright-blue:#3f66bd; --aus-blue:#4a6fc0; --aus-bright-magenta:#7a52d8; --aus-magenta:#7a52d8;
-      --aus-bright-red:#d63a15; --aus-red:#d63a15; --aus-bright-yellow:#a9820a; --aus-yellow:#b98f0c;
-      --aus-dark-40:#b0bec4;
-      --shadow-3:0 8px 24px rgba(30,50,60,.16),0 2px 6px rgba(30,50,60,.1);
-      --glow-cyan:0 0 0 3px rgba(10,147,139,.2);
-    }
-  }
 
   *{box-sizing:border-box}
   html,body{margin:0}
-  body{background:var(--rk-canvas);color:var(--fg-1);font-family:var(--font-sans);
-    line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;
-    transition:background-color .32s var(--ease-aurora),color .32s var(--ease-aurora)}
-  a{color:var(--aus-bright-cyan);text-decoration:none}
-  a:hover{color:var(--aus-cyan);text-decoration:underline}
-  code{font-family:var(--font-mono);font-size:.84em;background:var(--rk-well);color:var(--fg-2);
-    padding:.12em .42em;border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}
+  body{background:var(--surface-base);color:var(--text-body);font-family:var(--font-sans);
+    font-size:var(--size-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;
+    min-height:100vh;display:flex;flex-direction:column}
+  ::selection{background:var(--selection-bg);color:var(--selection-fg)}
+  :focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
+  a{color:var(--text-link);text-decoration:none}
+  a:hover{color:var(--text-link-hover);text-decoration:underline}
+  code{font-family:var(--font-mono);font-size:.9em;background:var(--surface-sunken);color:var(--text-body);
+    padding:1px 6px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}
 
-  .topbar{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
-    padding:1rem 1.5rem;border-bottom:1px solid var(--border-subtle);
-    background:linear-gradient(180deg,var(--rk-panel),transparent)}
-  .brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--fg-0)}
-  .brand:hover{text-decoration:none}
-  .brand .dot{width:.62rem;height:.62rem;border-radius:50%;background:var(--aus-bright-cyan);
-    box-shadow:0 0 0 4px rgba(66,220,209,.15),0 0 12px rgba(66,220,209,.5);
-    animation:pulse 2.8s var(--ease-aurora) infinite}
-  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
-  .brand .name{font-family:var(--font-display);font-size:1.22rem;font-weight:600;letter-spacing:-.01em}
-  .tagline{color:var(--aus-cyan);font-size:.66rem;font-family:var(--font-mono);
-    letter-spacing:.2em;text-transform:uppercase}
+  /* ---- base controls ----------------------------------------------------
+     A bare <button>, <textarea> or text <input> in the chrome is a quiet SVOS
+     control. :where() holds specificity at zero, so every classed rule below
+     wins without a fight and nothing here can override a deliberate one. */
+  :where(main) :where(button){font:inherit;font-size:var(--size-sm);font-weight:500;line-height:1.2;
+    padding:6px 11px;border-radius:var(--radius-md);border:1px solid var(--border-strong);
+    background:var(--surface-raised);color:var(--text-heading);cursor:pointer;
+    transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
+  :where(main) :where(button):hover{background:var(--surface-overlay)}
+  :where(main) :where(textarea,input[type=text],input[type=url]){font:inherit;font-size:var(--size-body);
+    color:var(--text-body);background:var(--surface-input);border:1px solid var(--border-strong);
+    border-radius:var(--radius-lg);padding:8px 11px}
+  :where(main) :where(textarea,input[type=text],input[type=url])::placeholder{color:var(--text-faint)}
+  :where(main) :where(textarea,input[type=text],input[type=url]):focus{outline:2px solid var(--border-focus);outline-offset:1px}
+  :where(main) :where(textarea){resize:vertical}
+  input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
 
-  main{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:1.7rem 1.5rem 3rem}
+  /* the primary — SVOS primaries arm things, so they are the only green fill */
+  .drop.has+.up-go,.mark-submit{cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:var(--size-sm);
+    line-height:1;padding:11px 16px;border-radius:var(--radius-lg);border:1px solid var(--accent);
+    background:var(--accent);color:var(--accent-contrast);
+    transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
+  .drop.has+.up-go:hover,.mark-submit:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
+  .drop.has+.up-go:active,.mark-submit:active{background:var(--accent-active)}
 
-  /* ---- upload / pickup ---- */
-  .uploader{display:flex;gap:.9rem;align-items:stretch;margin-bottom:1.7rem;flex-wrap:wrap}
+  /* ---- the letterhead --------------------------------------------------- */
+  .topbar{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
+    padding:14px 24px;border-bottom:1px solid var(--border-subtle);background:var(--surface-base)}
+  .brand{display:inline-flex;align-items:center;gap:10px;color:var(--text-heading)}
+  .brand:hover{text-decoration:none;color:var(--text-heading)}
+  /* Device 3. The service answering is the one thing on this page that is
+     live power, so the dot glows — statically. SVOS: nothing loops. */
+  .brand .dot{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--accent);
+    box-shadow:var(--glow-armed)}
+  .brand .name{font-weight:650;font-size:var(--size-h2);letter-spacing:var(--tracking-h)}
+  .tagline{font-family:var(--font-mono);font-size:var(--size-micro);font-weight:500;
+    letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
+
+  main{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:28px 24px 48px}
+
+  .foot{border-top:1px solid var(--border-subtle);color:var(--text-muted);
+    font-size:var(--size-micro);font-family:var(--font-mono);letter-spacing:.04em;padding:16px 24px;text-align:center}
+  .foot code{font-size:1em}
+
+  .empty{border:1.5px dashed var(--border-strong);border-radius:var(--radius-xl);
+    padding:48px 24px;text-align:center;color:var(--text-muted);background:var(--surface-sunken);
+    font-family:var(--font-mono);font-size:var(--size-sm)}
+
+  /* ---- upload / pickup -------------------------------------------------- */
+  .uploader{display:flex;gap:var(--space-3);align-items:stretch;margin-bottom:28px;flex-wrap:wrap}
   .drop{flex:1 1 300px;position:relative;display:flex;flex-direction:column;align-items:center;
-    justify-content:center;gap:.15rem;text-align:center;cursor:pointer;padding:1.1rem 1rem;
-    border:1.5px dashed var(--border-default);border-radius:var(--radius-lg);background:var(--rk-well);
-    transition:border-color .16s var(--ease-out),background .16s var(--ease-out),box-shadow .16s var(--ease-out)}
-  .drop:hover{border-color:var(--aus-cyan)}
-  .drop.over{border-color:var(--aus-bright-cyan);background:rgba(66,220,209,.06);box-shadow:var(--glow-cyan)}
-  .drop.has{border-style:solid;border-color:var(--aus-cyan)}
+    justify-content:center;gap:2px;text-align:center;cursor:pointer;padding:18px 16px;
+    border:1.5px dashed var(--border-strong);border-radius:var(--radius-xl);background:var(--surface-sunken);
+    transition:border-color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}
+  .drop:hover{border-color:var(--text-faint)}
+  .drop:focus-within{outline:2px solid var(--border-focus);outline-offset:2px}
+  .drop.over{border-color:var(--accent);background:var(--accent-soft)}
+  .drop.has{border-style:solid;border-color:var(--accent)}
   .drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
-  .drop-icon{font-size:1.2rem;color:var(--aus-bright-cyan)}
-  .drop-main{font-family:var(--font-display);font-weight:600;color:var(--fg-0);font-size:.98rem}
-  .drop-sub{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.03em;color:var(--fg-3)}
-  .up-go{flex:0 0 auto;align-self:stretch;cursor:pointer;font-family:var(--font-mono);font-size:.74rem;
-    letter-spacing:.1em;text-transform:uppercase;padding:0 1.15rem;border-radius:var(--radius-lg);
-    background:transparent;border:1px solid var(--aus-cyan);color:var(--aus-bright-cyan);
-    transition:.14s var(--ease-out)}
-  .up-go:hover{background:var(--aus-bright-cyan);color:var(--fg-on-accent);border-color:var(--aus-bright-cyan)}
+  .drop-icon{font-size:18px;color:var(--text-muted)}
+  .drop-main{font-weight:600;color:var(--text-heading);font-size:var(--size-h3)}
+  .drop-sub{font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-muted)}
+  /* Quiet until files are chosen: the upload is secondary on the index, and a
+     green slab there would be the loudest thing on the page. Once .drop.has is
+     set, the upload is ARMED and the rule above turns it primary. With JS off
+     it stays quiet and still submits. */
+  .up-go{flex:0 0 auto;align-self:stretch;padding:0 20px;cursor:pointer;font-family:var(--font-sans);
+    font-weight:600;font-size:var(--size-sm);border-radius:var(--radius-xl);border:1px solid var(--border-strong);
+    background:var(--surface-raised);color:var(--text-heading);
+    transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
+  .up-go:hover{background:var(--surface-overlay)}
+  .drop.has+.up-go{color:var(--accent-contrast);padding:0 20px;border-radius:var(--radius-xl)}
 
-  .badge{display:inline-block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;
-    text-transform:uppercase;font-weight:600;color:var(--fg-on-accent);background:var(--aus-bright-cyan);
-    padding:.08rem .42rem;border-radius:var(--radius-pill);vertical-align:middle}
-  .card .thumb{position:relative}
-  .thumb .badge{position:absolute;top:.5rem;left:.5rem;box-shadow:var(--shadow-2)}
+  .pickup-note{margin:-8px 0 24px;padding:10px 14px;border:1px solid var(--border-subtle);
+    border-left:3px solid var(--intel);border-radius:var(--radius-md);background:var(--intel-soft);
+    font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-body)}
+  .copy-btn{cursor:pointer;font-family:var(--font-mono);font-size:var(--size-micro);
+    padding:3px 8px;margin:0 4px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
+    background:transparent;color:var(--text-muted);vertical-align:middle;
+    transition:border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
+  .copy-btn:hover{border-color:var(--text-faint);color:var(--text-heading)}
+  .copy-btn.copied{border-color:var(--success);color:var(--success-text)}
+  .dl-link{font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-link);margin-right:6px}
+  .dl-link:hover{color:var(--text-link-hover)}
+  .cap-text{color:var(--text-body)}
 
-  /* Kept lane. The accent is a 2px TOP edge in aurora blue — the one accent
-     border Australis sanctions (never a coloured left border), and it marks the
-     card as featured without changing its fill, so kept and ephemeral still
-     read as the same family of object. */
-  .lane-head{margin:1.9rem 0 .8rem;font-family:var(--font-mono);font-size:.68rem;font-weight:600;
-    letter-spacing:.14em;text-transform:uppercase;color:var(--aus-bright-cyan);
-    display:flex;align-items:center;gap:.7rem}
+  /* ---- badges and stamps -----------------------------------------------
+     A badge is a fact about a booth. On a thumbnail it sits on an opaque
+     scrim, because a tinted-glass badge is illegible over half the images a
+     booth can hold. */
+  .badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:var(--size-micro);
+    font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;
+    padding:2px 7px;border-radius:var(--radius-sm);vertical-align:middle;
+    color:var(--intel-text);background:var(--intel-soft);border:1px solid color-mix(in oklab,var(--intel) 40%,transparent)}
+  .badge-kept{color:var(--text-muted);background:var(--surface-sunken);border-color:var(--border-strong)}
+  .badge-mark{color:var(--warning-text);background:var(--warning-soft);border-color:color-mix(in oklab,var(--warning) 45%,transparent)}
+  .thumb .badge{position:absolute;top:10px;left:10px;background:color-mix(in oklab,var(--surface-base) 88%,transparent);
+    box-shadow:var(--shadow-sm)}
+  .thumb .badge+.badge-mark{top:36px}
+
+  /* ---- index: lanes and cards ------------------------------------------ */
+  .lane-head{margin:28px 0 12px;font-family:var(--font-mono);font-size:var(--size-micro);font-weight:500;
+    letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted);
+    display:flex;align-items:center;gap:10px}
   .lane-head::after{content:"";flex:1;height:1px;background:var(--border-subtle)}
-  .lane-note{font-weight:400;letter-spacing:.06em;color:var(--fg-3);text-transform:none}
-  .lane-note code{font-size:.95em;color:var(--fg-2)}
-  .kept-grid{margin-bottom:.4rem}
-  .card-kept{border-top:2px solid var(--aus-blue)}
-  .card-kept:hover{border-color:var(--aus-blue);border-top-color:var(--aus-bright-blue)}
-  .badge-kept{background:var(--aus-blue);color:var(--fg-on-accent)}
-  /* Release sits where the ephemeral card's × sits, but reads as a word rather
-     than a destructive glyph — it is not the delete, it is what unlocks it. */
-  /* One positioned row holds BOTH kept-card controls. They used to pin
-     themselves to the same corner independently and the later sibling won. */
-  .kept-actions{position:absolute;top:.4rem;right:.4rem;display:flex;gap:.3rem;
-    align-items:center;opacity:0;transition:opacity .12s}
+  .lane-note{font-weight:400;letter-spacing:.04em;color:var(--text-muted);text-transform:none}
+  .lane-note code{font-size:1em;color:var(--text-muted)}
+  .uploader+.lane-head{margin-top:8px}
+  .kept-grid{margin-bottom:4px}
+
+  .grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
+  .card{position:relative;background:var(--surface-card);border:1px solid var(--border-default);
+    border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);
+    transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
+  .card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
+  .card .thumb{position:relative;display:block;aspect-ratio:16/10;background:var(--surface-sunken);
+    overflow:hidden;border-bottom:1px solid var(--border-subtle)}
+  .card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
+  .card .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
+    color:var(--text-faint);font-family:var(--font-mono);font-size:var(--size-caption);
+    letter-spacing:var(--tracking-caps);text-transform:uppercase}
+  .card .meta{padding:12px 14px 14px}
+  .card .name{display:block;font-weight:600;font-size:var(--size-h3);color:var(--text-heading);word-break:break-word}
+  .card .name:hover{text-decoration:none;color:var(--text-link)}
+  .card .sub{color:var(--text-muted);font-size:var(--size-caption);font-family:var(--font-mono);margin-top:4px}
+
+  /* THE ANNOUNCEMENT — who posted this booth and why (U5). Same size and
+     rhythm as .sub above it: a second line of card metadata, not a heading.
+     The handle carries the brightest ink, so a scan down the index reads as a
+     column of posters. */
+  .prov{margin-top:6px;font-size:var(--size-caption);font-family:var(--font-mono);
+    color:var(--text-muted);line-height:1.5;overflow-wrap:anywhere}
+  .prov-who{color:var(--text-heading);font-weight:500}
+  .prov-why{color:var(--text-muted)}
+  /* Quiet on purpose — visible if you look, never a badge shouting 26 times.
+     `unreadable` gets the warning ink because somebody has to fix it. */
+  .prov-none{color:var(--text-muted);font-style:italic}
+  .prov-broken{color:var(--warning-text);font-style:italic;cursor:help}
+
+  /* card-shoulder controls: an opaque scrim and an always-light glyph, so
+     they read over any thumbnail in both themes */
+  .wipe{position:absolute;top:10px;right:10px;margin:0}
+  .wipe button,.keepit button,.wipe-kept button,.release button{cursor:pointer;font:inherit;
+    font-size:var(--size-sm);line-height:1;height:28px;min-width:28px;padding:0 8px;
+    border-radius:var(--radius-md);border:1px solid rgb(255 255 255 / .16);
+    background:oklch(0.17 0.01 250 / .86);color:oklch(0.91 0.008 216);
+    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
+    transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
+  .wipe button{font-size:16px}
+  .wipe button:hover,.wipe-kept button:hover{background:var(--danger);border-color:var(--danger);color:var(--danger-contrast)}
+  .keepit{position:absolute;top:10px;left:10px;margin:0;opacity:0;transition:opacity var(--dur-1)}
+  .card:hover .keepit,.keepit:focus-within{opacity:1}
+  .keepit button:hover,.release button:hover{background:oklch(0.31 0.012 244 / .95);border-color:rgb(255 255 255 / .32)}
+  /* One positioned row holds BOTH kept-card controls — they used to pin
+     themselves to the same corner and the later sibling won. */
+  .kept-actions{position:absolute;top:10px;right:10px;display:flex;gap:6px;
+    align-items:center;opacity:0;transition:opacity var(--dur-1)}
   .card-kept:hover .kept-actions,.kept-actions:focus-within{opacity:1}
   .kept-actions form{position:static;opacity:1;margin:0}
-  .release{opacity:0;transition:opacity .12s}
+  .release{opacity:0;transition:opacity var(--dur-1)}
   .card-kept:hover .release,.release:focus-within{opacity:1}
-  .release button{font:inherit;font-size:.72rem;line-height:1;padding:.22rem .45rem;
-    border-radius:.3rem;cursor:pointer;border:1px solid var(--aus-blue);
-    background:var(--rk-panel);color:var(--aus-blue)}
-  .release button:hover{background:var(--aus-blue);color:var(--fg-on-accent)}
+  .release button{font-size:var(--size-caption);font-family:var(--font-mono)}
+
+  /* ---- lifetime ---------------------------------------------------------
+     U4: a booth that stopped counting down says so where the countdown was. */
+  .held{color:var(--warning-text)}
+  .held-broken{color:var(--danger-text);text-decoration:underline dotted}
+
+  /* ---- the booth page header ------------------------------------------- */
+  .boothhead{display:flex;align-items:center;gap:var(--space-3) var(--space-4);flex-wrap:wrap;
+    padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--border-subtle)}
+  .boothhead .back{font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-muted)}
+  .boothhead .back:hover{color:var(--text-heading)}
+  .boothhead h1{margin:0;font-weight:650;font-size:var(--size-h1);line-height:var(--leading-tight);
+    letter-spacing:var(--tracking-h);word-break:break-word;flex:1 1 auto;color:var(--text-heading)}
+  .boothhead .sub{color:var(--text-muted);font-size:var(--size-caption);font-family:var(--font-mono)}
+  /* Its own row under the title — a `why` can run to WHY_MAX and would
+     otherwise shove the zip link around. */
+  .boothhead .prov{flex:0 0 100%;margin-top:-4px}
+  /* The directory name beside a manifest title: quieter than the title, never
+     absent — it is what the URL says and what "the third one" refers to. */
+  .h1-slug{font-family:var(--font-mono);font-size:.54em;font-weight:400;
+    letter-spacing:0;color:var(--text-muted);margin-left:8px;white-space:nowrap}
+  .keep-lg{display:inline-block;margin:0}
+  .keep-lg button{font-size:var(--size-sm)}
+  .wipe-lg{position:static}
+  /* Device 2. Wiping a booth is the one act on this page that nothing brings
+     back, so it alone wears the stripe. The fill waits for the hover. */
+  .wipe-lg button{height:auto;min-width:0;padding:10px 14px 8px;border-radius:var(--radius-md);
+    font-family:var(--font-sans);font-size:var(--size-sm);font-weight:600;letter-spacing:.02em;
+    background:var(--hazard-stripe) top / 100% 3px no-repeat,transparent;
+    border:1px solid var(--danger);color:var(--danger-text);-webkit-backdrop-filter:none;backdrop-filter:none}
+  .wipe-lg button:hover{background:var(--hazard-stripe) top / 100% 3px no-repeat,var(--danger);
+    color:var(--danger-contrast);border-color:var(--danger)}
+
+  /* ---- marks: the Bureau ------------------------------------------------
+     Judgment is paperwork. A pick is a form, a note is a memo, a flag is a
+     stamp. The state word is a stamp in the header; only a mark that still
+     needs the operator carries a coloured top edge, so an open ask is the one
+     thing in the panel that asks to be looked at. */
+  .marks{display:flex;flex-direction:column;gap:var(--space-3);margin:0 0 24px}
+  .mark{background:var(--surface-card);border:1px solid var(--border-default);
+    border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
+  .mark-pick:not(.is-answered):not(.is-broken){border-top:2px solid var(--warning)}
+  .mark-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:9px 14px;
+    border-bottom:1px solid var(--border-subtle);background:var(--surface-raised);
+    font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-muted)}
+  .mark-head code{font-size:1em}
+  .mark-state{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:var(--tracking-caps);
+    text-transform:uppercase;line-height:1.3;padding:2px 7px;border:1.5px solid currentColor;
+    border-radius:var(--radius-sm);color:var(--warning-text)}
+  .mark.is-answered .mark-state{color:var(--success-text);transform:rotate(-2deg)}
+  .mark.is-partial .mark-state{color:var(--warning-text)}
+  .mark.is-broken .mark-state{color:var(--danger-text)}
+  .mark-state-note{color:var(--intel-text)}
+  .mark-state-flag{color:var(--success-text)}
+  .mark-part{font-family:var(--font-mono);font-size:var(--size-caption);color:var(--warning-text);font-weight:600}
+  .mark-when{white-space:nowrap;color:var(--text-muted)}
+  .mark-target a{font-family:var(--font-mono)}
+  .mark-x{background:none;border:0;color:var(--text-faint);cursor:pointer;font-size:16px;line-height:1;
+    padding:2px 6px;border-radius:var(--radius-sm)}
+  .mark-x:hover{color:var(--danger-text);background:var(--danger-soft)}
+  .mark-undo{margin:0}
+  .board-spacer{flex:1 1 auto}
+
+  .mark-title{margin:14px 16px -4px;font-family:var(--font-mono);font-size:var(--size-micro);
+    letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
+  .mark-prompt{margin:14px 16px 8px;font-size:var(--size-h3);font-weight:600;color:var(--text-heading);white-space:pre-wrap}
+  .mark-error{margin:14px 16px;color:var(--danger-text);font-size:var(--size-sm)}
+  .mark-answer{margin:4px 16px 12px;padding:10px 14px;border:1px solid color-mix(in oklab,var(--success) 35%,transparent);
+    border-radius:var(--radius-md);background:var(--success-soft)}
+  .mark-answer-choice{font-weight:600;color:var(--text-heading)}
+  .mark-answer-choice::before{content:"✓ ";color:var(--success-text)}
+  .mark-answer-choice.is-skipped{opacity:.6;font-style:italic;font-weight:500}
+  .mark-answer-choice.is-skipped::before{content:"— ";color:var(--text-faint)}
+  .mark-answer-notes{margin:6px 0 0;white-space:pre-wrap;font-family:var(--font-sans);font-size:var(--size-sm);color:var(--text-body)}
+  .mark-answer-file{display:block;margin-top:6px;font-family:var(--font-mono);font-size:var(--size-micro);color:var(--text-muted)}
+  .mark-answer-file a{color:var(--text-muted)}
+  .mark-answer-q{padding:6px 0;border-bottom:1px dashed var(--border-default)}
+  .mark-answer-q:last-of-type{border-bottom:0}
+  .mark-answer-qprompt{display:block;font-size:var(--size-caption);color:var(--text-muted)}
+  .mark-formwrap{margin:0 16px 14px}
+  .mark-change{cursor:pointer;font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--tracking-caps);
+    text-transform:uppercase;color:var(--text-muted);list-style:none;user-select:none;padding:2px 0}
+  .mark-change::-webkit-details-marker{display:none}
+  .mark-formwrap[open]>.mark-change{margin-bottom:8px}
+  .mark-formwrap:not([open])>.mark-change{color:var(--text-link)}
+  .mark-q{border:0;margin:0 0 16px;padding:0;min-width:0}
+  .mark-q:last-of-type{margin-bottom:0}
+  .mark-q-prompt{padding:0;margin:0 0 8px;font-size:var(--size-body);font-weight:600;color:var(--text-heading)}
+  .mark-options{display:flex;flex-direction:column;gap:6px}
+  .mark-opt{position:relative;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;cursor:pointer;
+    border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-base);
+    transition:border-color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}
+  .mark-opt:hover{border-color:var(--border-strong)}
+  .mark-opt:has(input:checked){border-color:color-mix(in oklab,var(--accent) 55%,transparent);background:var(--accent-soft)}
+  .mark-opt input{margin:3px 0 0;flex:0 0 auto}
+  .mark-opt-main{display:flex;flex-direction:column;gap:2px;min-width:0}
+  .mark-opt-label{font-size:var(--size-body);font-weight:500;color:var(--text-heading)}
+  .mark-opt-detail{font-size:var(--size-caption);color:var(--text-muted);white-space:pre-wrap}
+  .mark-notes{display:block;width:100%;margin:10px 0 0}
+  .mark-qnotes{margin-top:6px;font-size:var(--size-sm)}
+  .mark-actions{display:flex;justify-content:flex-end;margin-top:12px}
+
+  /* a note is a memo: the operator's words, set to be read */
+  .mark-text,.vnote pre,pre.vnote,.item-note pre{margin:0;padding:8px 14px;white-space:pre-wrap;
+    font-family:var(--font-sans);font-size:var(--size-sm);line-height:var(--leading-body);color:var(--text-body);
+    border-left:3px solid var(--border-strong);background:none}
+  .mark-text{margin:12px 16px}
+  /* The flag list is the way back to the flagged tiles. Wrapped chips, not a
+     column: a 37-flag booth must not push its own grid below the fold. The
+     chips wrap left-to-right in list order, so the sequence is untouched. */
+  .mark-flaglist{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:12px 14px;list-style:none}
+  .mark-flaglist a{display:inline-block;font-family:var(--font-mono);font-size:var(--size-caption);
+    padding:3px 8px;border-radius:var(--radius-sm);border:1px solid color-mix(in oklab,var(--success) 40%,transparent);
+    background:var(--success-soft);color:var(--success-text)}
+  .mark-flaglist a:hover{text-decoration:none;border-color:var(--success)}
+  .mark-add,.vaddnote,.item-addnote form{display:flex;gap:8px;align-items:flex-start;margin:0}
+  .mark-add textarea,.vaddnote textarea,.item-addnote textarea{flex:1;min-width:0}
+  .mark-add{margin-top:2px}
+
+  /* ---- the gallery ------------------------------------------------------ */
+  /* THE RAIL. Sticky, opaque, and counted in mono because the counts are
+     records. The active filter is a place you are, not an armed thing, so it
+     is lifted rather than coloured. */
+  .rail{position:sticky;top:0;z-index:5;display:flex;gap:6px 8px;align-items:center;flex-wrap:wrap;
+    padding:10px 0;margin:0 0 16px;background:var(--surface-base);
+    border-bottom:1px solid var(--border-subtle);font-family:var(--font-mono);font-size:var(--size-caption)}
+  .rail-total{font-family:var(--font-sans);font-weight:600;font-size:var(--size-sm);color:var(--text-heading);margin-right:4px}
+  .rail-f,.rail-g{padding:3px 9px;border-radius:var(--radius-md);text-decoration:none;
+    color:var(--text-muted);border:1px solid transparent;
+    transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}
+  .rail-f b,.rail-g b{font-weight:600;color:var(--text-body);margin-left:2px}
+  .rail-f:hover,.rail-g:hover{color:var(--text-heading);border-color:var(--border-default);text-decoration:none}
+  .rail-f.on{color:var(--text-heading);background:var(--surface-raised);border-color:var(--border-strong)}
+  .rail-f.on b{color:var(--text-heading)}
+  /* The group row wraps rather than scrolls: 16 groups is the live maximum
+     and a horizontal scroller hides half of them behind a gesture. */
+  .rail-groups{display:flex;gap:4px;flex-wrap:wrap;align-items:center;
+    padding-left:10px;margin-left:4px;border-left:1px solid var(--border-default)}
+
+  /* align-items:start — each tile ends where its content does, instead of
+     every tile in a row stretching to the longest caption. Row-major order is
+     untouched: this sizes boxes, it moves none. */
+  .gallery{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(320px,1fr));align-items:start}
+  .item{position:relative;margin:0;background:var(--surface-card);border:1px solid var(--border-default);
+    border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
+    scroll-margin-top:72px}
+  .item img,.item video{width:100%;height:auto;display:block;background:var(--surface-sunken)}
+  .item audio{width:100%;margin:20px 14px 6px;max-width:calc(100% - 28px)}
+  .item .dl{padding:22px 14px;font-family:var(--font-mono);font-size:var(--size-sm);word-break:break-all}
+  /* The caption is the poster's prose (up to CAPTION_MAX), so it is SET TO BE
+     READ, in the speaking voice, at the tile's full measure; the controls are
+     records, stay mono, and wrap onto their own row at the right edge — the
+     same place on every tile, however long the caption runs. */
+  .item figcaption{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px;align-items:baseline;
+    padding:10px 12px;color:var(--text-muted);font-size:var(--size-caption);font-family:var(--font-mono);
+    border-top:1px solid var(--border-subtle);word-break:break-word}
+  .item figcaption .cap-text{grid-column:2 / -1;font-family:var(--font-sans);font-size:var(--size-sm);line-height:1.5}
+  .item figcaption .blurtoggle{grid-row:2;grid-column:3}
+  .item figcaption .flagtoggle{grid-row:2;grid-column:4}
+  .item figcaption .dl-link{margin:0}
+  .item-audio figcaption,.item-other figcaption{border-top:none}
+  /* note slots on a tile: the memo, then the quiet "+ note" disclosure */
+  .item-note{display:flex;align-items:flex-start;gap:4px;padding:0 12px 8px}
+  .item-note pre{flex:1;min-width:0}
+  .item-addnote{padding:0 12px 10px}
+  .item-addnote summary{cursor:pointer;font-family:var(--font-mono);font-size:var(--size-micro);
+    color:var(--text-muted);padding:2px 0;list-style:none}
+  .item-addnote summary::-webkit-details-marker{display:none}
+  .item-addnote summary:hover{color:var(--text-heading)}
+  .item-addnote[open] summary{margin-bottom:6px}
+
+  /* the tile toggles — small, quiet, and legible; a control nobody can find
+     is a control that is not there */
+  .flagtoggle,.blurtoggle{display:inline-block;margin:0}
+  .flagtoggle button,.blurtoggle button{font-family:var(--font-mono);font-size:var(--size-micro);
+    font-weight:500;line-height:1.3;padding:3px 8px;border-radius:var(--radius-sm);white-space:nowrap;
+    background:transparent;border:1px solid var(--border-strong);color:var(--text-muted)}
+  .flagtoggle button:hover{border-color:var(--success);color:var(--success-text);background:var(--success-soft)}
+  .blurtoggle button:hover{border-color:var(--text-faint);color:var(--text-heading);background:transparent}
+  /* state read off the form itself (`on=0` means "currently set"), so every
+     branch — tile, doc bar, other — shows it without a class of its own */
+  .flagtoggle:has(input[name="on"][value="0"]) button{border-color:var(--success);color:var(--success-text);
+    background:var(--success-soft);font-weight:600}
+  .blurtoggle:has(input[name="on"][value="0"]) button{color:var(--text-heading);border-style:dashed}
+
+  /* A flag is the operator's stamp. Sage, not green: judged, not armed. The
+     stamp is drawn by the tile itself, so no markup is added. */
+  .item.is-flagged{border-color:var(--success);box-shadow:0 0 0 1px var(--success),var(--shadow-sm)}
+  .item.is-flagged::before{content:"flagged";position:absolute;top:10px;right:10px;z-index:2;pointer-events:none;
+    font:600 10.5px/1.3 var(--font-mono);letter-spacing:var(--tracking-caps);text-transform:uppercase;
+    padding:3px 8px;border:1.5px solid currentColor;border-radius:var(--radius-sm);color:var(--success-text);
+    background:color-mix(in oklab,var(--surface-base) 88%,transparent);transform:rotate(-2deg)}
+
+  /* Device 1 — the RETICLE: selection. Four corner brackets drawn by ONE
+     pseudo-element, so no markup is added. They sit 4px INSIDE the box: an
+     overflow:hidden tile clips an outside bracket's entire stroke (the SVOS
+     foot-gun). A hairline shadow keeps them visible over a bright image. */
+  .item.is-cursor::after,.item:target::after,.mark-opt:has(input:checked)::after{content:"";position:absolute;inset:4px;z-index:3;
+    pointer-events:none;--rl:16px;--rt:2px;
+    background:
+      linear-gradient(var(--accent) 0 0) top left / var(--rl) var(--rt),
+      linear-gradient(var(--accent) 0 0) top left / var(--rt) var(--rl),
+      linear-gradient(var(--accent) 0 0) top right / var(--rl) var(--rt),
+      linear-gradient(var(--accent) 0 0) top right / var(--rt) var(--rl),
+      linear-gradient(var(--accent) 0 0) bottom left / var(--rl) var(--rt),
+      linear-gradient(var(--accent) 0 0) bottom left / var(--rt) var(--rl),
+      linear-gradient(var(--accent) 0 0) bottom right / var(--rl) var(--rt),
+      linear-gradient(var(--accent) 0 0) bottom right / var(--rt) var(--rl);
+    background-repeat:no-repeat;filter:drop-shadow(0 0 1px oklch(0.14 0.01 250 / .7))}
+  .mark-opt:has(input:checked)::after{inset:3px;--rl:10px;--rt:1.5px;filter:none}
+  .item.is-cursor{border-color:color-mix(in oklab,var(--accent) 60%,transparent)}
+
+  /* ⚠ Blur is COSMETIC. The file is still served at its own URL and still in
+     the zip. This hides an item from a glance, nothing more — and nothing here
+     may style it as though it were secured: no lock, no shield, no seal. */
+  .item.blurred img,.item.blurred video,
+  .item.blurred .doc-body,.item.blurred .textview{filter:blur(22px);transition:filter var(--dur-2)}
+  .item.blurred.revealed img,.item.blurred.revealed video,
+  .item.blurred.revealed .doc-body,.item.blurred.revealed .textview{filter:none}
+  .item.blurred .reveal{position:absolute;top:10px;left:10px;z-index:2;cursor:pointer;
+    font-family:var(--font-mono);font-size:var(--size-micro);line-height:1;padding:6px 9px;
+    border-radius:var(--radius-md);border:1px solid rgb(255 255 255 / .16);
+    background:oklch(0.17 0.01 250 / .86);color:oklch(0.91 0.008 216)}
+  .item.blurred .reveal:hover{background:oklch(0.31 0.012 244 / .95)}
+  /* Cover thumbs on the index inherit the blur so the front page cannot undo it. */
+  .blurred-thumb{filter:blur(16px)}
+
+  /* ---- inline docs ------------------------------------------------------
+     A .md/.txt/.log shows in place, collapsible and closable, spanning the
+     full grid width so prose has a readable measure. */
+  .item-doc{grid-column:1 / -1}
+  .item-doc.is-closed{display:none}
+  .doc-inline{display:block}
+  .doc-inline > .doc-bar{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
+    padding:9px 14px;font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-muted);
+    background:var(--surface-raised);border-bottom:1px solid var(--border-subtle);user-select:none}
+  .doc-inline > .doc-bar::-webkit-details-marker{display:none}
+  .doc-chevron{color:var(--text-faint);transition:transform var(--dur-1) var(--ease-out);font-size:10px}
+  .doc-inline[open] > .doc-bar .doc-chevron{transform:rotate(90deg)}
+  .doc-name{color:var(--text-heading);word-break:break-all}
+  .doc-spacer{flex:1}
+  .doc-act{color:var(--text-muted);text-decoration:none;padding:2px 6px;border-radius:var(--radius-sm);
+    font-size:13px;line-height:1;background:none;border:0;cursor:pointer;font-family:inherit}
+  .doc-act:hover{color:var(--text-heading);background:var(--surface-sunken);text-decoration:none}
+  .doc-close:hover{color:var(--text-heading)}
+  .doc-bar .blurtoggle,.doc-bar .flagtoggle{padding:0;background:none}
+  .doc-bar .blurtoggle{margin-left:4px}
+  .doc-body{margin:0;border:0;border-radius:0;max-height:32rem;overflow:auto;padding:18px 20px}
+  .doc-body.textview{background:var(--surface-card);border:0;border-radius:0}
+
+  /* Shared doc typography — the inline body above AND the full-page doc view
+     (doc.html) — so both surfaces render identically. */
+  .textview{white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono);
+    font-size:var(--size-mono);line-height:1.6;color:var(--text-body);background:var(--surface-sunken);
+    border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:16px 18px;overflow-x:auto}
+  .markdown-body{color:var(--text-body);line-height:1.65;font-size:15px;overflow-wrap:break-word}
+  .markdown-body h1,.markdown-body h2,.markdown-body h3{color:var(--text-heading);line-height:1.25;
+    letter-spacing:var(--tracking-h);margin:1.6em 0 .5em;font-weight:650}
+  .markdown-body h1{font-size:1.6em}.markdown-body h2{font-size:1.3em}.markdown-body h3{font-size:1.08em;font-weight:600}
+  .markdown-body h1,.markdown-body h2{border-bottom:1px solid var(--border-subtle);padding-bottom:.3em}
+  .markdown-body :first-child{margin-top:0}
+  .markdown-body p,.markdown-body ul,.markdown-body ol,.markdown-body blockquote{margin:.7em 0}
+  .markdown-body strong{color:var(--text-heading)}
+  .markdown-body a{color:var(--text-link)}
+  .markdown-body code{font-family:var(--font-mono);font-size:.86em;background:var(--surface-sunken);
+    padding:.12em .38em;border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}
+  .markdown-body pre{background:var(--surface-sunken);border:1px solid var(--border-subtle);
+    border-radius:var(--radius-lg);padding:14px 16px;overflow-x:auto}
+  .markdown-body pre code{background:none;padding:0;border:0}
+  .markdown-body blockquote{border-left:3px solid var(--border-strong);padding-left:1em;color:var(--text-muted);margin-left:0}
+  .markdown-body table{border-collapse:collapse;display:block;overflow-x:auto;font-size:var(--size-sm)}
+  .markdown-body th{text-align:left;font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:.08em;
+    text-transform:uppercase;font-weight:500;color:var(--text-muted);border-bottom:1px solid var(--border-strong)}
+  .markdown-body th,.markdown-body td{border:1px solid var(--border-subtle);padding:7px 11px}
+  .markdown-body img{max-width:100%}
+  .markdown-body hr{border:0;border-top:1px solid var(--border-subtle)}
+
+  /* ---- the zoom viewer (fixed full-viewport overlay) -------------------- */
+  .viewer{position:fixed;inset:0;z-index:50;background:var(--surface-sunken);display:flex;flex-direction:column}
+  .vbar{display:flex;align-items:center;gap:10px;padding:8px 12px;
+    border-bottom:1px solid var(--border-subtle);background:var(--surface-base)}
+  .vname{font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-body);
+    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50vw}
+  .vspacer{flex:1}
+  .vbtn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;
+    padding:0 10px;border:1px solid var(--border-strong);border-radius:var(--radius-md);
+    color:var(--text-body);background:var(--surface-raised);font-family:var(--font-mono);font-size:var(--size-sm);
+    cursor:pointer;transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
+  .vbtn:hover{border-color:var(--text-faint);color:var(--text-heading);background:var(--surface-overlay);text-decoration:none}
+  .vbtn.is-flagged{color:var(--success-text);border-color:var(--success);background:var(--success-soft);font-weight:600}
+  .vtoggle{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-md);overflow:hidden}
+  .vseg{cursor:pointer;border:0;background:transparent;color:var(--text-muted);font-family:var(--font-mono);
+    font-size:var(--size-caption);padding:7px 12px;transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
+  .vseg+.vseg{border-left:1px solid var(--border-strong)}
+  .vseg:hover{color:var(--text-heading)}
+  .vseg.on{background:var(--surface-overlay);color:var(--text-heading)}
+  .vstage{flex:1;min-height:0;background:var(--surface-sunken)}
+  .vstage.fit{display:flex;align-items:center;justify-content:center;overflow:hidden;padding:16px}
+  .vstage.fit img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:var(--shadow-lg)}
+  .vstage.one{overflow:auto;text-align:center}
+  .vstage.one img{max-width:none;max-height:none;margin:auto}
+  .vmarks{margin:0 auto;padding:10px 12px 12px;width:min(92vw,900px);display:flex;flex-direction:column;gap:8px}
+  .vflag{display:flex}
+  .vnote{display:flex;align-items:flex-start;gap:4px}
+  .vnote pre{flex:1;min-width:0}
+  pre.vnote{display:block}
 
   /* ---- the standing link board ------------------------------------------
      Rows, not a markdown blob. Dense enough that thirty entries stay
-     scannable, with provenance de-emphasised so the description leads and the
-     × only surfaces on hover — destructive controls should not compete for
-     attention with the thing you came to read. */
-  .board{border:1px solid var(--border-subtle);border-radius:.5rem;overflow:hidden;
-    background:var(--rk-panel);margin:.6rem 0 1rem}
-  .board-head{display:flex;align-items:center;gap:.6rem;padding:.45rem .75rem;
-    border-bottom:1px solid var(--border-subtle);background:var(--rk-well)}
+     scannable; provenance recedes so the description leads, and the × only
+     surfaces on hover — destructive controls do not compete for attention
+     with the thing you came to read. */
+  .board{border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;
+    background:var(--surface-card);margin:10px 0 16px;box-shadow:var(--shadow-sm)}
+  .board-head{display:flex;align-items:center;gap:10px;padding:10px 14px;
+    border-bottom:1px solid var(--border-subtle);background:var(--surface-raised)}
   .board-selall{display:inline-flex;align-items:center;cursor:pointer;flex:0 0 auto}
-  .board-title{font-weight:600;font-size:.85rem}
-  .board-note{font-size:.72rem;color:var(--fg-3)}
-  .board-spacer{flex:1 1 auto}
-  /* Bulk delete: quiet until something is selected. Red-outline danger word,
-     matching the .wipe-lg language — fills on hover, greys out when disabled. */
-  .board-del-sel{flex:0 0 auto;cursor:pointer;font-family:var(--font-mono);font-size:.7rem;
-    letter-spacing:.06em;padding:.28rem .6rem;border-radius:var(--radius-sm);
-    background:transparent;border:1px solid var(--aus-red);color:var(--aus-bright-red);
-    transition:.14s var(--ease-out)}
-  .board-del-sel:hover:not(:disabled){background:var(--aus-red);border-color:var(--aus-red);color:#fff}
-  .board-del-sel:disabled{opacity:.4;cursor:default;border-color:var(--border-default);color:var(--fg-3)}
+  .board-title{font-weight:600;font-size:var(--size-sm);color:var(--text-heading)}
+  .board-note{font-family:var(--font-mono);font-size:var(--size-micro);color:var(--text-muted)}
+  /* Bulk delete: quiet until something is selected. Once rows are ticked it
+     is ARMED with the hazard stripe — device 2, earned by the selection. */
+  .board-del-sel{flex:0 0 auto;cursor:pointer;font-family:var(--font-mono);font-size:var(--size-micro);
+    padding:6px 10px 5px;border-radius:var(--radius-sm);
+    background:var(--hazard-stripe) top / 100% 3px no-repeat,transparent;
+    border:1px solid var(--danger);color:var(--danger-text);transition:background var(--dur-1) var(--ease-out)}
+  .board-del-sel:hover:not(:disabled){background:var(--hazard-stripe) top / 100% 3px no-repeat,var(--danger);color:var(--danger-contrast)}
+  .board-del-sel:disabled{background:transparent;opacity:.5;cursor:default;border-color:var(--border-strong);color:var(--text-faint)}
 
-  .board-row{display:flex;align-items:center;gap:.6rem;padding:.45rem .75rem;
-    border-bottom:1px solid var(--border-subtle);transition:background .1s}
+  .board-row{display:flex;align-items:center;gap:10px;padding:9px 14px;
+    border-bottom:1px solid var(--border-subtle);transition:background var(--dur-1)}
   .board-row:last-child{border-bottom:0}
-  .board-row:hover{background:var(--rk-well)}
-  /* Pinned rows: a subtle cyan wash + a filled star. NOT a coloured left border
-     (Australis forbids it); the tint is enough to group them, and the ★ carries
-     the state at the row level. */
-  .board-row.is-pinned{background:rgba(66,220,209,.05)}
-  .board-row.is-pinned:hover{background:rgba(66,220,209,.09)}
-  .board-check{flex:0 0 auto;width:1rem;height:1rem;cursor:pointer;accent-color:var(--aus-bright-cyan)}
-  .board-selall input{width:1rem;height:1rem;cursor:pointer;accent-color:var(--aus-bright-cyan)}
-  /* ★ favorite toggle. Always visible (unlike ×) because it carries state you
-     need to see; dim-hollow when off, warm-gold and filled when pinned. */
+  .board-row:hover{background:var(--surface-sunken)}
+  /* Pinned rows are lifted, not coloured; the ★ carries the state. */
+  .board-row.is-pinned{background:var(--surface-overlay)}
+  .board-row.is-pinned:hover{background:var(--surface-sunken)}
+  .board-check,.board-selall input{flex:0 0 auto;width:15px;height:15px;cursor:pointer;margin:0}
   .board-pin{flex:0 0 auto;border:0;background:none;cursor:pointer;line-height:1;
-    font-size:1.02rem;padding:.05rem .2rem;border-radius:.25rem;color:var(--fg-3);
-    transition:color .12s,transform .12s var(--ease-out)}
-  .board-pin:hover{color:var(--aus-bright-yellow);transform:scale(1.15)}
-  .board-pin.on{color:var(--aus-bright-yellow)}
+    font-size:16px;padding:2px 4px;border-radius:var(--radius-sm);color:var(--text-faint);
+    transition:color var(--dur-1)}
+  .board-pin:hover,.board-pin.on{color:var(--text-heading)}
   .board-main{flex:1 1 auto;min-width:0}
-  .board-link{font-size:.9rem;text-decoration:none;font-weight:500}
-  .board-link:hover{text-decoration:underline}
-  .board-url{font-size:.7rem;color:var(--fg-3);opacity:.8;overflow:hidden;text-overflow:ellipsis;
+  .board-link{font-size:var(--size-body);font-weight:500}
+  .board-url{font-size:var(--size-micro);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;
     white-space:nowrap;font-family:var(--font-mono)}
   .board-meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;
-    gap:.05rem;font-size:.68rem;color:var(--fg-3);white-space:nowrap}
-  .board-who{font-weight:600}
-  .board-copy,.board-rm-btn{opacity:0;transition:opacity .12s;flex:0 0 auto}
+    gap:1px;font-family:var(--font-mono);font-size:var(--size-micro);color:var(--text-muted);white-space:nowrap}
+  .board-who{color:var(--text-body);font-weight:500}
+  .board-copy,.board-rm-btn{opacity:0;transition:opacity var(--dur-1);flex:0 0 auto}
   .board-row:hover .board-copy,.board-row:hover .board-rm-btn,
   .board-copy:focus,.board-rm-btn:focus{opacity:1}
-  .board-rm-btn{font:inherit;font-size:1rem;line-height:1;padding:.1rem .35rem;
-    border:0;background:none;cursor:pointer;color:var(--fg-2);border-radius:.25rem}
-  .board-rm-btn:hover{background:var(--aus-red);color:#fff}
+  .board-rm-btn{font:inherit;font-size:16px;line-height:1;padding:3px 7px;
+    border:0;background:none;cursor:pointer;color:var(--text-muted);border-radius:var(--radius-sm)}
+  .board-rm-btn:hover{background:var(--danger);color:var(--danger-contrast)}
+  /* A board row whose booth has been swept. Marked, never auto-removed. */
+  .board-row.board-dead{opacity:.5}
+  .board-dead-tag{font-style:italic;color:var(--text-muted)}
   @media (max-width:600px){
     /* No hover on touch — controls must be permanently visible or unreachable. */
     .board-copy,.board-rm-btn{opacity:1}
     .board-meta{display:none}
   }
 
-  .pickup-note{margin:-.5rem 0 1.5rem;padding:.6rem .85rem;border:1px solid var(--border-subtle);
-    border-left:3px solid var(--aus-bright-cyan);border-radius:var(--radius-md);background:var(--rk-well);
-    font-family:var(--font-mono);font-size:.78rem;color:var(--fg-2)}
-  .copy-btn{cursor:pointer;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;
-    padding:.12rem .5rem;margin:0 .25rem;border:1px solid var(--border-default);border-radius:var(--radius-sm);
-    background:transparent;color:var(--aus-bright-cyan);vertical-align:middle;transition:.12s var(--ease-out)}
-  .copy-btn:hover{border-color:var(--aus-cyan);background:rgba(66,220,209,.08)}
-  .copy-btn.copied{border-color:var(--aus-green);color:var(--aus-bright-green)}
-  .dl-link{color:var(--aus-bright-cyan);text-decoration:none;margin-right:.4rem;font-size:.95em}
-  .dl-link:hover{color:var(--aus-cyan)}
-  .cap-text{color:var(--fg-2)}
+  /* ---- U6: the bench registry, on the standing board's page only -------- */
+  .benches{margin:0 0 16px;border:1px solid var(--border-default);border-radius:var(--radius-xl);
+    overflow:hidden;background:var(--surface-card);box-shadow:var(--shadow-sm)}
+  .bench-head{display:flex;gap:10px;align-items:baseline;padding:10px 14px;
+    background:var(--surface-raised);border-bottom:1px solid var(--border-subtle)}
+  .bench-title{font-weight:600;font-size:var(--size-sm);color:var(--text-heading)}
+  .bench-note{font-family:var(--font-mono);font-size:var(--size-micro);color:var(--text-muted)}
+  .bench-empty{padding:12px 14px;color:var(--text-muted);font-size:var(--size-sm)}
+  /* DAMAGED AND ABSENT MUST NOT RENDER THE SAME. */
+  .bench-err{padding:12px 14px;color:var(--danger-text);background:var(--danger-soft);font-size:var(--size-sm)}
+  .bench-row{display:flex;gap:10px;align-items:center;padding:9px 14px;border-top:1px solid var(--border-subtle)}
+  .bench-head+.bench-row{border-top:0}
+  .bench-row.is-retired{opacity:.5}
+  .bench-state{display:inline-flex;align-items:center;gap:6px;flex:0 0 5.6rem;justify-content:flex-start;
+    font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:.08em;text-transform:uppercase;
+    color:var(--text-muted)}
+  /* Device 3: a live bench is a running thing — the one row that glows. */
+  .bench-row.is-live .bench-state{color:var(--accent-text)}
+  .bench-row.is-live .bench-state::before{content:"";width:6px;height:6px;border-radius:var(--radius-pill);
+    background:var(--accent);box-shadow:var(--glow-armed)}
+  .bench-row.is-promoted .bench-state{color:var(--intel-text)}
+  .bench-row.is-promoted .bench-state::before{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:var(--intel)}
+  .bench-main{flex:1;min-width:0}
+  .bench-link{font-weight:500}
+  .bench-url{font-family:var(--font-mono);font-size:var(--size-micro);color:var(--text-muted);
+    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .bench-meta{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--font-mono);
+    font-size:var(--size-micro);color:var(--text-muted)}
+  .bench-who{color:var(--text-body)}
+  .bench-acts{display:flex;gap:4px;margin:0}
+  .bench-to{font-family:var(--font-mono);font-size:var(--size-micro);padding:3px 8px}
+  .bench-rm{font-size:14px;padding:3px 8px;background:none;border-color:transparent;color:var(--text-muted)}
+  .bench-rm:hover{background:var(--danger);border-color:var(--danger);color:var(--danger-contrast)}
+  .bench-add{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--border-subtle);background:var(--surface-raised)}
+  .bench-add input[type=url]{flex:2;min-width:0}
+  .bench-add input[type=text]{flex:1;min-width:0}
 
-  /* ---- image viewer (fixed full-viewport overlay) ---- */
-  .viewer{position:fixed;inset:0;z-index:50;background:var(--rk-canvas);display:flex;flex-direction:column}
-  .vbar{display:flex;align-items:center;gap:.7rem;padding:.5rem .8rem;
-    border-bottom:1px solid var(--border-subtle);background:var(--rk-panel)}
-  .vname{font-family:var(--font-mono);font-size:.8rem;color:var(--fg-2);
-    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50vw}
-  .vspacer{flex:1}
-  .vbtn{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;
-    padding:0 .55rem;border:1px solid var(--border-default);border-radius:var(--radius-md);
-    color:var(--fg-1);background:transparent;font-family:var(--font-mono);font-size:.9rem;
-    transition:.14s var(--ease-out)}
-  .vbtn:hover{border-color:var(--aus-cyan);color:var(--aus-bright-cyan);text-decoration:none}
-  .vx:hover{border-color:var(--aus-red);color:#fff;background:var(--aus-red)}
-  .vtoggle{border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}
-  .vseg{cursor:pointer;border:0;background:transparent;color:var(--fg-3);font-family:var(--font-mono);
-    font-size:.72rem;letter-spacing:.06em;padding:.4rem .75rem;transition:.14s var(--ease-out)}
-  .vseg+.vseg{border-left:1px solid var(--border-default)}
-  .vseg:hover{color:var(--fg-1)}
-  .vseg.on{background:var(--aus-bright-cyan);color:var(--fg-on-accent)}
-  .vstage{flex:1;min-height:0;background:var(--rk-deep)}
-  .vstage.fit{display:flex;align-items:center;justify-content:center;overflow:hidden;padding:1rem}
-  .vstage.fit img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:var(--shadow-3)}
-  .vstage.one{overflow:auto;text-align:center}
-  .vstage.one img{max-width:none;max-height:none;margin:auto}
-
-  .foot{border-top:1px solid var(--border-subtle);color:var(--fg-muted);
-    font-size:.72rem;font-family:var(--font-mono);letter-spacing:.04em;padding:1rem 1.5rem;text-align:center}
-
-  .empty{border:1px dashed var(--border-default);border-radius:var(--radius-lg);
-    padding:3rem 1.5rem;text-align:center;color:var(--fg-3);background:var(--rk-well);font-family:var(--font-mono);font-size:.92rem}
-
-  /* index grid */
-  .grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
-  .card{position:relative;background:var(--rk-panel);border:1px solid var(--border-subtle);
-    border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-2);
-    transition:transform .16s var(--ease-out),border-color .16s var(--ease-out),box-shadow .16s var(--ease-out)}
-  .card:hover{transform:translateY(-3px);border-color:var(--aus-cyan);box-shadow:var(--shadow-3),var(--glow-cyan)}
-  .card .thumb{display:block;aspect-ratio:16/10;background:var(--rk-deep);overflow:hidden}
-  .card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
-  .card .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
-    color:var(--fg-3);font-family:var(--font-mono);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase}
-  .card .meta{padding:.7rem .85rem .85rem}
-  .card .name{display:block;font-family:var(--font-display);font-weight:600;color:var(--fg-0);word-break:break-word}
-  .card .name:hover{text-decoration:none;color:var(--aus-bright-cyan)}
-  .card .sub{color:var(--fg-3);font-size:.72rem;font-family:var(--font-mono);letter-spacing:.03em;margin-top:.3rem}
-
-  /* THE ANNOUNCEMENT — who posted this booth and why (U5). Same size and
-     rhythm as .sub above it, because it is the same class of information: a
-     second line of card metadata, not a heading. The handle carries the only
-     colour, so a scan down the index reads as a column of posters. */
-  .prov{margin-top:.28rem;font-size:.72rem;font-family:var(--font-mono);
-    letter-spacing:.03em;color:var(--fg-3);line-height:1.45;
-    overflow-wrap:anywhere}
-  .prov-who{color:var(--fg-2)}
-  .prov-why{color:var(--fg-3)}
-  /* Quiet on purpose. 26 booths arrived before this convention existed and
-     rsync keeps making more, so the marker has to be visible-if-you-look and
-     never a badge shouting 26 times. `unreadable` gets the warning tint
-     because, unlike `unannounced`, it is something somebody has to fix. */
-  .prov-none{color:var(--fg-muted);font-style:italic}
-  .prov-broken{color:var(--aus-bright-yellow,#e8c547);font-style:italic;cursor:help}
-
-  .wipe{position:absolute;top:.5rem;right:.5rem;margin:0}
-  /* ★ keep, mirroring .wipe on the other shoulder of the card. Same
-     hover-to-reveal language as .release in the kept lane. */
-  .keepit{position:absolute;top:.5rem;left:.5rem;margin:0;opacity:0;transition:opacity .12s}
-  /* × on a KEPT card. Same shoulder as the ephemeral ×, deliberately tinted so
-     it does not read as the same weight of action. */
-  /* positioned by .kept-actions, not by itself */
-  .wipe-kept button{font:inherit;line-height:1;cursor:pointer;border:1px solid var(--line);
-    border-radius:.3rem;padding:.02rem .3rem;background:var(--bg);color:var(--muted)}
-  .wipe-kept button:hover{background:var(--aus-red,#ff6b6b);color:var(--fg-on-accent,#fff);
-    border-color:var(--aus-red,#ff6b6b)}
-  /* keep / release from inside a booth, beside "Wipe now" */
-  .keep-lg{display:inline-block;margin:0 .4rem 0 0}
-  .keep-lg button{font:inherit;font-size:.8rem;line-height:1;padding:.32rem .6rem;
-    cursor:pointer;border:1px solid var(--line);border-radius:.3rem;
-    background:var(--bg);color:var(--fg)}
-  .keep-lg button:hover{background:var(--aus-blue);color:var(--fg-on-accent)}
-  .card:hover .keepit,.keepit:focus-within{opacity:1}
-  .keepit button{font:inherit;font-size:.9rem;line-height:1;padding:.1rem .34rem;
-    cursor:pointer;border:1px solid var(--line);border-radius:.3rem;
-    background:var(--bg);color:var(--fg)}
-  .keepit button:hover{background:var(--aus-blue);color:var(--fg-on-accent)}
-
-  /* ⚠ Blur is COSMETIC. The file is still served at its own URL and still in
-     the zip. This hides an item from a glance, nothing more. */
-  .item.blurred img,.item.blurred video,
-  .item.blurred .doc-body,.item.blurred .textview{filter:blur(22px);transition:filter .15s}
-  .item.blurred.revealed img,.item.blurred.revealed video,
-  .item.blurred.revealed .doc-body,.item.blurred.revealed .textview{filter:none}
-  .item.blurred{position:relative}
-  .item.blurred .reveal{position:absolute;top:.5rem;left:.5rem;z-index:2;
-    font:inherit;font-size:.72rem;line-height:1;padding:.24rem .5rem;cursor:pointer;
-    border:1px solid var(--line);border-radius:.3rem;background:var(--bg);color:var(--fg)}
-  .item.blurred .reveal:hover{background:var(--aus-blue);color:var(--fg-on-accent)}
-  /* Legible on purpose. v1 was a bare muted glyph with no border and no label,
-     and the operator's reaction to it was "no UI option to blur/unblur?" — a
-     control nobody can find is a control that is not there. */
-  .blurtoggle{display:inline-block;margin:0}
-  .blurtoggle button{font:inherit;font-size:.7rem;line-height:1;padding:.2rem .4rem;
-    cursor:pointer;border:1px solid var(--line);border-radius:.3rem;
-    background:var(--bg);color:var(--fg);white-space:nowrap}
-  .blurtoggle button:hover{background:var(--aus-blue);color:var(--fg-on-accent)}
-  /* In the doc bar it sits beside ⤢ ⬇ ✕ and should not out-shout them. */
-  .doc-bar .blurtoggle{margin-left:.35rem}
-  .doc-bar .blurtoggle button{font-size:.66rem;padding:.14rem .34rem}
-  /* Cover thumbs on the index inherit the blur so the front page cannot undo it. */
-  .blurred-thumb{filter:blur(16px)}
-  /* opaque dark control-scrim + always-light glyph — legible over any thumbnail
-     AND in both themes (glyph must NOT follow --fg-*, which flips dark on light). */
-  .wipe button{cursor:pointer;border:1px solid rgba(255,255,255,.16);background:rgba(16,18,25,.86);
-    color:#e9eef0;width:1.9rem;height:1.9rem;border-radius:var(--radius-md);font-size:1.1rem;line-height:1;
-    backdrop-filter:blur(6px);transition:.14s var(--ease-out)}
-  .wipe button:hover{border-color:var(--aus-red);color:#fff;background:var(--aus-red)}
-
-  /* Asks — a session's multiple-choice question awaiting the operator.
-     Amber = "needs you" while open (the one colour the page does not otherwise
-     use for state), green check once answered; the accent is a TOP edge, per
-     Australis, never a coloured left border. */
-  .badge-mark{background:var(--aus-bright-yellow);color:var(--fg-on-accent)}
-  /* U4: the lifetime line's HELD states. Marked rather than styled into
-     invisibility — the whole safety argument for an unbounded hold is that
-     a booth which stopped counting down says so where the countdown was. */
-  .held{color:var(--aus-bright-yellow)}
-  .held-broken{color:var(--fg-3);text-decoration:underline dotted}
-  .thumb .badge+.badge-mark{top:2.2rem}
-  .marks{display:flex;flex-direction:column;gap:.9rem;margin:.2rem 0 1.4rem}
-  .mark{border:1px solid var(--border-subtle);border-top:2px solid var(--aus-bright-yellow);
-    border-radius:.5rem;background:var(--rk-panel);overflow:hidden}
-  .mark.is-answered{border-top-color:var(--aus-bright-green)}
-  /* Partial: answered SOME questions. Not a failure and not done — blanks are a
-     legal outcome (operator ruling 2026-09-09), so it gets its own state rather
-     than being forced into one of the other two. */
-  .mark.is-partial{border-top-color:var(--aus-bright-blue)}
-  .mark.is-partial .mark-state{color:var(--aus-bright-blue)}
-  .mark-part{font-family:var(--font-mono);font-size:.68rem;color:var(--aus-bright-blue);font-weight:700}
-  .mark-answer-choice.is-skipped{opacity:.55;font-style:italic}
-  .mark-answer-choice.is-skipped::before{content:"— ";color:var(--fg-3)}
-  .mark.is-broken{border-top-color:var(--aus-bright-red)}
-  .mark-head{display:flex;align-items:center;gap:.6rem;padding:.4rem .8rem;
-    border-bottom:1px solid var(--border-subtle);background:var(--rk-well);
-    font-family:var(--font-mono);font-size:.68rem;color:var(--fg-3)}
-  .mark-state{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--aus-bright-yellow)}
-  .mark.is-answered .mark-state{color:var(--aus-bright-green)}
-  .mark.is-broken .mark-state{color:var(--aus-bright-red)}
-  .mark-when{white-space:nowrap}
-  /* ---- marks: the per-item controls and the note slots ------------------- */
-  .mark-state-note{color:var(--aus-bright-cyan,#42dcd1)}
-  .mark-state-flag{color:var(--aus-bright-green)}
-  .mark-text,.vnote pre,.item-note pre{margin:.3rem 0;padding:.5rem .7rem;white-space:pre-wrap;
-    background:var(--bg-2,rgba(128,140,160,.10));border-radius:6px;font-size:.82rem}
-  .mark-flaglist{margin:.3rem 0 .2rem;padding-left:1.1rem;font-size:.84rem}
-  .mark-add,.vaddnote,.item-addnote form{display:flex;gap:.5rem;align-items:flex-start;margin:.6rem 0}
-  .mark-add textarea,.vaddnote textarea,.item-addnote textarea{flex:1;min-width:0}
-  .mark-x{background:none;border:0;color:var(--fg-3);cursor:pointer;font-size:1rem;line-height:1;padding:0 .3rem}
-  .mark-x:hover{color:var(--aus-bright-red)}
-  .mark-undo{margin-left:.4rem}
-  .flagtoggle button{background:none;border:1px solid var(--border-subtle);border-radius:6px;
-    padding:.12rem .45rem;font-size:.72rem;color:var(--fg-2);cursor:pointer}
-  .flagtoggle button:hover{border-color:var(--aus-bright-green);color:var(--aus-bright-green)}
-  .item.is-flagged{outline:2px solid var(--aus-bright-green);outline-offset:2px}
-  .item-note{display:flex;align-items:flex-start;gap:.3rem}
-  .item-addnote summary{cursor:pointer;font-size:.72rem;color:var(--fg-3);padding:.15rem 0}
-  .vmarks{margin:.6rem auto 0;max-width:min(92vw,900px);display:flex;flex-direction:column;gap:.4rem}
-  .vflag{display:flex}
-  .vbtn.is-flagged{color:var(--aus-bright-green);border-color:var(--aus-bright-green)}
-  .vnote{display:flex;align-items:flex-start;gap:.3rem}
-  .mark-title{margin:.8rem .9rem -.35rem;font-family:var(--font-mono);font-size:.7rem;
-    letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
-  .mark-prompt{margin:.85rem .9rem .5rem;font-size:1.02rem;font-weight:600;color:var(--fg-0);white-space:pre-wrap}
-  .mark-error{margin:.8rem .9rem;color:var(--aus-bright-red);font-size:.85rem}
-  .mark-answer{margin:.2rem .9rem .6rem;padding:.55rem .75rem;border:1px solid var(--border-subtle);
-    border-radius:var(--radius-md);background:rgba(81,224,138,.06)}
-  .mark-answer-choice{font-weight:600;color:var(--fg-0)}
-  .mark-answer-choice::before{content:"✓ ";color:var(--aus-bright-green)}
-  .mark-answer-notes{margin:.4rem 0 0;white-space:pre-wrap;font-family:var(--font-sans);font-size:.86rem;
-    color:var(--fg-1)}
-  .mark-answer-file{display:block;margin-top:.35rem;font-family:var(--font-mono);font-size:.68rem;color:var(--fg-3)}
-  .mark-answer-file a{color:var(--fg-2)}
-  .mark-formwrap{margin:0 .9rem .8rem}
-  .mark-change{cursor:pointer;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
-    text-transform:uppercase;color:var(--fg-3);list-style:none;user-select:none}
-  .mark-change::-webkit-details-marker{display:none}
-  .mark-formwrap[open]>.mark-change{margin-bottom:.4rem}
-  .mark-formwrap:not([open])>.mark-change{color:var(--aus-bright-cyan)}
-  .mark-q{border:0;margin:0 0 .7rem;padding:0;min-width:0}
-  .mark-q:last-of-type{margin-bottom:0}
-  .mark-q-prompt{padding:0;margin:0 0 .35rem;font-size:.9rem;font-weight:600;color:var(--fg-0)}
-  .mark-qnotes{margin-top:.35rem;font-size:.82rem}
-  .mark-answer-q{padding:.3rem 0;border-bottom:1px dashed var(--border-subtle)}
-  .mark-answer-q:last-of-type{border-bottom:0}
-  .mark-answer-qprompt{display:block;font-size:.76rem;color:var(--fg-3)}
-  .mark-options{display:flex;flex-direction:column;gap:.35rem}
-  .mark-opt{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem .65rem;cursor:pointer;
-    border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--rk-well);
-    transition:border-color .12s,background .12s}
-  .mark-opt:hover{border-color:var(--border-strong)}
-  .mark-opt:has(input:checked){border-color:var(--aus-bright-cyan);background:rgba(66,220,209,.07)}
-  .mark-opt input{margin:.2rem 0 0;accent-color:var(--aus-bright-cyan);flex:0 0 auto}
-  .mark-opt-main{display:flex;flex-direction:column;gap:.1rem;min-width:0}
-  .mark-opt-label{font-size:.92rem;color:var(--fg-0)}
-  .mark-opt-detail{font-size:.76rem;color:var(--fg-3);white-space:pre-wrap}
-  .mark-notes{display:block;width:100%;box-sizing:border-box;margin:.6rem 0 0;padding:.5rem .6rem;
-    font:inherit;font-size:.88rem;color:var(--fg-0);background:var(--rk-well);
-    border:1px solid var(--border-subtle);border-radius:var(--radius-md);resize:vertical}
-  .mark-notes:focus{outline:none;border-color:var(--aus-bright-cyan);box-shadow:var(--glow-cyan)}
-  .mark-actions{display:flex;justify-content:flex-end;margin-top:.6rem}
-  .mark-submit{cursor:pointer;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;
-    padding:.42rem .9rem;border-radius:var(--radius-sm);border:1px solid var(--aus-bright-cyan);
-    background:var(--aus-bright-cyan);color:var(--fg-on-accent);font-weight:700;transition:.14s var(--ease-out)}
-  .mark-submit:hover{background:var(--aus-cyan);border-color:var(--aus-cyan)}
-
-  /* booth page */
-  .boothhead{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
-    padding-bottom:1rem;margin-bottom:1.4rem;border-bottom:1px solid var(--border-subtle)}
-  .boothhead .back{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;color:var(--fg-3)}
-  .boothhead h1{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.5rem;
-    letter-spacing:-.01em;word-break:break-word;flex:1 1 auto;color:var(--fg-0)}
-  .boothhead .sub{color:var(--fg-3);font-size:.74rem;font-family:var(--font-mono);letter-spacing:.06em}
-  /* Its own row under the title, not another chip in the flex line — a `why`
-     can run to WHY_MAX and would otherwise shove the zip link around. */
-  .boothhead .prov{flex:0 0 100%;margin-top:-.35rem}
-  /* The directory name beside a manifest title: quieter than the title, but
-     never absent — it is what the URL says and what "the third one" refers to. */
-  .h1-slug{font-family:var(--font-mono);font-size:.62em;font-weight:400;
-    letter-spacing:.06em;color:var(--fg-3);margin-left:.5rem;white-space:nowrap}
-  .wipe-lg{position:static}
-  /* red-outline danger button — legible on the dark canvas, fills on hover */
-  .wipe-lg button{width:auto;height:auto;padding:.42rem .85rem;border-radius:var(--radius-md);
-    font-size:.72rem;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
-    background:transparent;border-color:var(--aus-red);color:var(--aus-bright-red)}
-  .wipe-lg button:hover{background:var(--aus-red);border-color:var(--aus-red);color:#fff}
-
-  .gallery{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
-  .item{margin:0;background:var(--rk-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
-    overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-2)}
-  .item img,.item video{width:100%;height:auto;display:block;background:var(--rk-deep)}
-  .item audio{width:100%;margin:1.3rem .9rem .4rem;max-width:calc(100% - 1.8rem)}
-  .item .dl{padding:1.4rem .9rem;font-family:var(--font-mono);font-size:.86rem;word-break:break-all}
-  .item figcaption{padding:.6rem .85rem .75rem;color:var(--fg-2);font-size:.78rem;
-    font-family:var(--font-mono);letter-spacing:.02em;border-top:1px solid var(--border-subtle);word-break:break-word}
-  .item-audio figcaption,.item-other figcaption{border-top:none}
-
-  /* Inline doc rendering — a .md/.txt/.log shows in place, collapsible and
-     closable, instead of a link to a separate page. The item spans the full
-     grid width so prose has a readable measure. */
-  .item-doc{grid-column:1 / -1}
-  .item-doc.is-closed{display:none}
-  .doc-inline{display:block}
-  .doc-inline > .doc-bar{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.55rem;
-    padding:.6rem .85rem;font-family:var(--font-mono);font-size:.8rem;color:var(--fg-2);
-    background:var(--rk-well);border-bottom:1px solid var(--border-subtle);user-select:none}
-  .doc-inline > .doc-bar::-webkit-details-marker{display:none}
-  .doc-chevron{color:var(--fg-3);transition:transform .12s ease;font-size:.7rem}
-  .doc-inline[open] > .doc-bar .doc-chevron{transform:rotate(90deg)}
-  .doc-name{color:var(--fg-1);word-break:break-all}
-  .doc-spacer{flex:1}
-  .doc-act{color:var(--fg-3);text-decoration:none;padding:.1rem .35rem;border-radius:5px;
-    font-size:.9rem;line-height:1;background:none;border:0;cursor:pointer;font-family:inherit}
-  .doc-act:hover{color:var(--aus-bright-cyan,#42dcd1);background:var(--rk-deep)}
-  .doc-close:hover{color:var(--aus-red,#ff6b6b)}
-  .doc-body{margin:0;border:0;border-radius:0;max-height:32rem;overflow:auto;padding:1rem 1.15rem}
-  .doc-body.textview{background:var(--rk-panel)}
-
-  /* Shared doc typography — used by the inline body above AND the full-page
-     doc view (doc.html). Kept here so both surfaces render identically. */
-  .textview{white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono);
-    font-size:.86rem;line-height:1.5;color:var(--fg-1);background:var(--rk-well);
-    border:1px solid var(--rk-line,#252a35);border-radius:10px;padding:1rem 1.15rem;overflow-x:auto}
-  .markdown-body{color:var(--fg-1);line-height:1.62;font-size:.98rem;overflow-wrap:break-word}
-  .markdown-body h1,.markdown-body h2,.markdown-body h3{line-height:1.25;margin:1.6em 0 .5em}
-  .markdown-body h1{font-size:1.7em}.markdown-body h2{font-size:1.35em}.markdown-body h3{font-size:1.12em}
-  .markdown-body h1,.markdown-body h2{border-bottom:1px solid var(--rk-line,#252a35);padding-bottom:.3em}
-  .markdown-body :first-child{margin-top:0}
-  .markdown-body p,.markdown-body ul,.markdown-body ol,.markdown-body blockquote{margin:.7em 0}
-  .markdown-body a{color:var(--aus-bright-cyan,#42dcd1)}
-  .markdown-body code{font-family:var(--font-mono);font-size:.86em;background:var(--rk-well);
-    padding:.12em .38em;border-radius:5px}
-  .markdown-body pre{background:var(--rk-well);border:1px solid var(--rk-line,#252a35);
-    border-radius:10px;padding:.9rem 1.05rem;overflow-x:auto}
-  .markdown-body pre code{background:none;padding:0}
-  .markdown-body blockquote{border-left:3px solid var(--aus-bright-cyan,#42dcd1);
-    padding-left:1em;color:var(--fg-2);margin-left:0}
-  .markdown-body table{border-collapse:collapse;display:block;overflow-x:auto}
-  .markdown-body th,.markdown-body td{border:1px solid var(--rk-line,#252a35);padding:.4em .7em}
-  .markdown-body img{max-width:100%}
-
-    /* U6 — the bench registry, on the standing board's page only. */
-    .benches{margin:1rem 0;border:1px solid var(--line,#2a2a2a);border-radius:6px;overflow:hidden}
-    .bench-head{display:flex;gap:.6rem;align-items:baseline;padding:.5rem .7rem;background:rgba(255,255,255,.03)}
-    .bench-title{font-weight:600}
-    .bench-note,.bench-empty{opacity:.6;font-size:.85em}
-    .bench-empty{padding:.6rem .7rem}
-    .bench-err{padding:.6rem .7rem;color:#f2b8b5;background:rgba(242,184,181,.08)}
-    .bench-row{display:flex;gap:.6rem;align-items:center;padding:.45rem .7rem;border-top:1px solid var(--line,#2a2a2a)}
-    .bench-row.is-retired{opacity:.5}
-    .bench-state{font-size:.7em;text-transform:uppercase;letter-spacing:.06em;padding:.1rem .4rem;border-radius:3px;background:rgba(255,255,255,.08)}
-    .bench-row.is-live .bench-state{background:rgba(120,200,140,.18)}
-    .bench-row.is-promoted .bench-state{background:rgba(130,170,240,.18)}
-    .bench-main{flex:1;min-width:0}
-    .bench-url{font-size:.78em;opacity:.55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-    .bench-meta{display:flex;flex-direction:column;align-items:flex-end;font-size:.75em;opacity:.6}
-    .bench-acts{display:flex;gap:.3rem}
-    .bench-to,.bench-rm{font-size:.75em;padding:.15rem .4rem;cursor:pointer}
-    .bench-add{display:flex;gap:.4rem;padding:.5rem .7rem;border-top:1px solid var(--line,#2a2a2a)}
-    .bench-add input[type=url]{flex:2;min-width:0}
-    .bench-add input[type=text]{flex:1;min-width:0}
-    /* A board row whose booth has been swept. Marked, never auto-removed. */
-    .board-row.board-dead{opacity:.45}
-    .board-dead-tag{font-size:.9em;color:#f2b8b5;opacity:.9}
-      /* U7 — the rail, and the grid cursor. */
-    .rail{position:sticky;top:0;z-index:5;display:flex;gap:.5rem;align-items:baseline;
-          padding:.4rem .6rem;margin:.6rem 0;background:var(--bg,#111);
-          border-bottom:1px solid var(--line,#2a2a2a);flex-wrap:wrap}
-    .rail-total{font-weight:600}
-    .rail-f{font-size:.85em;padding:.1rem .45rem;border-radius:3px;text-decoration:none;
-            opacity:.65;border:1px solid transparent}
-    .rail-f:hover{opacity:1}
-    .rail-f.on{opacity:1;border-color:var(--line,#2a2a2a);background:rgba(255,255,255,.06)}
-    /* The group row. Wraps rather than scrolls: 16 groups is the live maximum
-       and a horizontal scroller hides half of them behind a gesture. */
-    .rail-groups{display:flex;gap:.35rem;flex-wrap:wrap;align-items:baseline;
-                 padding-left:.5rem;margin-left:.25rem;border-left:1px solid var(--line,#2a2a2a)}
-    .rail-g{font-size:.8em;padding:.1rem .4rem;border-radius:3px;text-decoration:none;
-            opacity:.6;border:1px solid transparent}
-    .rail-g:hover{opacity:1;border-color:var(--line,#2a2a2a)}
-    /* The jumped-to tile, so a fragment jump says where it landed. */
-    figure.item:target{outline:2px dashed #7aa2f7;outline-offset:3px}
-    figure.item.is-cursor{outline:2px solid #7aa2f7;outline-offset:2px}
+  @media (max-width:600px){
+    main{padding:20px 16px 40px}
+    .topbar{padding:12px 16px}
+    .gallery{grid-template-columns:1fr}
+  }
+  @media (prefers-reduced-motion: reduce){
+    *{transition:none !important}
+  }
   </style>
 </head>
 <body>
diff --git a/booth/templates/doc.html b/booth/templates/doc.html
index d2ded30..2f89bb9 100644
--- a/booth/templates/doc.html
+++ b/booth/templates/doc.html
@@ -23,14 +23,14 @@
   {% endif %}
 </div>
 <style>
-  /* .markdown-body and .textview now live in base.html (shared with the inline
+  /* .markdown-body and .textview live in base.html (shared with the inline
      gallery view). Only the full-page layout wrapper is page-specific. */
-  .docview{max-width:52rem;margin:0 auto;padding:0 clamp(12px,3vw,20px) 4rem}
+  .docview{max-width:52rem;margin:0 auto;padding:0 clamp(12px,3vw,20px) 64px}
+  .docview .vbar{margin:0 calc(-1 * clamp(12px,3vw,20px)) 20px;border-radius:0}
   .docview .textview{overflow-x:auto}
-  .doccap{margin:.9rem 0 1.2rem;padding:.6rem .85rem;font-size:.85rem;line-height:1.5;
-    color:var(--fg-1);background:var(--rk-surface,rgba(255,255,255,.04));
-    border-left:2px solid var(--aus-bright-cyan,#42dcd1);border-radius:0 6px 6px 0;
-    white-space:pre-wrap}
+  .doccap{margin:0 0 20px;padding:8px 14px;font-size:var(--size-body);line-height:var(--leading-body);
+    color:var(--text-body);border-left:3px solid var(--border-strong);white-space:pre-wrap}
+  .docmarks{display:flex;flex-direction:column;gap:8px;margin:0 0 20px}
 </style>
 <script>
   (function () {
diff --git a/booth/templates/view.html b/booth/templates/view.html
index 0493738..2b174ba 100644
--- a/booth/templates/view.html
+++ b/booth/templates/view.html
@@ -47,17 +47,19 @@
 </div>
 <style>
   .vnav{position:fixed;top:50%;transform:translateY(-50%);z-index:40;display:flex;
-    align-items:center;justify-content:center;width:2.6rem;height:3.4rem;font-size:2rem;
-    line-height:1;text-decoration:none;color:var(--fg-1);background:rgba(20,23,32,.55);
-    border:1px solid rgba(255,255,255,.10);border-radius:10px;margin:0 .5rem;user-select:none;
-    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s,border-color .15s}
-  .vnav:hover{background:rgba(28,33,46,.92);border-color:var(--aus-bright-cyan,#42dcd1)}
+    align-items:center;justify-content:center;width:40px;height:56px;font-size:28px;
+    line-height:1;text-decoration:none;color:oklch(0.91 0.008 216);background:oklch(0.17 0.01 250 / .6);
+    border:1px solid rgb(255 255 255 / .12);border-radius:var(--radius-lg);margin:0 8px;user-select:none;
+    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
+    transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
+  .vnav:hover{background:oklch(0.21 0.01 248 / .92);border-color:rgb(255 255 255 / .3);text-decoration:none;
+    color:oklch(0.91 0.008 216)}
   .vprev{left:0}.vnext{right:0}
   /* Bottom bar rather than the top chrome: a caption can run to CAPTION_MAX
      (800 chars), which would shove the filename and the Fit/1:1 toggle around. */
-  .vcap{flex:0 0 auto;max-height:22vh;overflow-y:auto;padding:.6rem clamp(12px,3vw,20px);
-    font-size:.85rem;line-height:1.5;color:var(--fg-1);background:var(--rk-surface,rgba(20,23,32,.92));
-    border-top:1px solid rgba(255,255,255,.10);white-space:pre-wrap}
+  .vcap{flex:0 0 auto;max-height:22vh;overflow-y:auto;padding:10px clamp(12px,3vw,20px);
+    font-size:var(--size-body);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-base);
+    border-top:1px solid var(--border-subtle);white-space:pre-wrap}
   @media print{.vcap{max-height:none;overflow:visible}}
   @media print{.vnav{display:none}}
 </style>