:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface-1: #f5f6f6;
  --surface-2: #eceef0;
  --surface-3: #e3e5e8;
  --fg: #0f1011;
  --muted: #3e3e44;
  --subtle: #5f636b;
  --border: #e1e3e6;
  --border-strong: #8a8f98;
  --accent: #5d5294;
  --accent-hover: #4a4078;
  --accent-soft: #e9e6f8;
  --on-accent: #ffffff;
  --ring: #5d5294;
  --ok: #176b42;
  --warn: #8a5a06;
  --danger: #a03028;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --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-24: 96px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  --shadow-overlay: 0 12px 32px rgba(15, 16, 17, 0.12);
  --dur-fast: 140ms;
  --dur-live: 320ms;
  --dur-type: 28ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0e14;
  --surface-1: #15151c;
  --surface-2: #1c1c25;
  --surface-3: #23232e;
  --fg: #f2f2f5;
  --muted: #c9cbd4;
  --subtle: #9194a5;
  --border: #262631;
  --border-strong: #6e7284;
  --accent: #968ade;
  --accent-hover: #b5abfc;
  --accent-soft: #2a2545;
  --on-accent: #0e0e14;
  --ring: #968ade;
  --ok: #6fce9f;
  --warn: #e8bd6b;
  --danger: #ffa198;
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-live: 0ms; --dur-type: 0ms; }
}
*, *::before, *::after { box-sizing: border-box; }
:root { --lit: var(--accent); }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 400 1rem/1.5 var(--font-sans); letter-spacing: -0.05px; }
h1, h2, h3 { font-family: var(--font-sans); text-wrap: pretty; }
h1 { font-weight: 600; letter-spacing: -1px; }
h2 { font-weight: 600; letter-spacing: -0.6px; }
h3 { font-weight: 500; letter-spacing: -0.4px; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
.page { min-height: 100vh; padding: 24px 24px 64px; }
.wrap, main, .live { display: flex; flex-direction: column; gap: 32px; }
.wrap { max-width: 1280px; margin: 0 auto; }
.wrap.narrow { max-width: 880px; }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.col.tight { gap: 4px; }
.row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mono { font-family: var(--font-mono); }
.dim { color: var(--muted); }
.kicker { margin: 0; font-size: 0.875rem; line-height: 1.4; letter-spacing: 2.52px; text-transform: uppercase;
          color: var(--subtle); font-weight: 600; }
.hint { margin: 0; max-width: 52ch; font-size: 1rem; color: var(--muted); text-wrap: pretty; }

header.top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
             flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.brand { font-family: var(--font-sans); font-weight: 500; font-size: 1.125rem; letter-spacing: -0.015em; }
nav.top { display: flex; gap: 16px; font-size: 0.875rem; }
nav.top a { color: var(--muted); padding: 4px 0; }
.facts .top a, .hint a { padding: 4px 0; }
nav.top .here { color: var(--accent); }
nav.top a.here, nav.top span.here { background: var(--accent-soft); border-radius: var(--radius-pill); padding: 4px 12px; }
nav.langs, nav.regs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border);
                      border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 0.75rem; }
nav.langs a, nav.regs a { color: var(--muted); padding: 4px 8px; border-radius: var(--radius-pill); }
nav.langs a { display: inline-flex; min-width: 24px; min-height: 24px;
              align-items: center; justify-content: center; }
nav.langs .here, nav.regs .here { color: var(--accent); background: var(--accent-soft); }
.repo { display: inline-flex; padding: 4px; color: var(--muted); border-radius: var(--radius-pill); }
.repo:hover { color: var(--fg); }
.runid, .runstate { font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted); }
.runstate { display: flex; gap: 4px; margin: 0; }
.says-what { max-width: 46ch; }
.toggle { display: inline-flex; align-items: center; gap: 4px; background: transparent;
          color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-pill);
          padding: 4px 12px; font: 400 0.75rem/1.4 var(--font-mono); cursor: pointer; min-height: 32px; }
.toggle:hover { border-color: var(--accent); color: var(--accent); }

.pill { font: 400 0.75rem/1.4 var(--font-mono); padding: 2px 8px; border-radius: var(--radius-pill);
        border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.pill.on { border-color: var(--accent); color: var(--accent); }

.bar { display: flex; flex-direction: column; gap: 4px; }
.bar .rail { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--surface-3); }
.bar.lg .rail { height: 8px; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill);
             background: var(--accent-soft); }
.bar .now { position: absolute; top: -4px; bottom: -4px; width: 2px;
            background: var(--lit); border-radius: var(--radius-xs); }
.bar.lg .now { top: -5px; bottom: -5px; }
.bar .mark { position: absolute; top: -7px; bottom: -7px; width: 2px;
             background: var(--fg); }
.bar.lg .mark { top: -9px; bottom: -9px; }
.bar .ends { display: flex; justify-content: space-between; gap: 12px;
             font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); }
.bar .ends .lit { color: var(--fg); }
.bar.ok { --lit: var(--ok); } .bar.warn { --lit: var(--warn); } .bar.bad { --lit: var(--danger); }
.bar.ok, .bar.warn, .bar.bad { --accent-soft: color-mix(in srgb, var(--lit) 30%, transparent); }
.bar .causal { align-self: start; max-width: 100%; font-family: var(--font-mono); font-size: 0.8125rem; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0px 16px; font-size: 0.875rem;
      color: var(--muted); font-family: var(--font-mono); overflow-x: auto; }
.kv .v { color: var(--fg); }

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 16px; }
figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
figure.evidence { max-width: 480px; }
figure img { width: 100%; display: block; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--border); }
figcaption { font-size: 0.8125rem; color: var(--muted); font-family: var(--font-mono); overflow-wrap: anywhere; }
.compare .split { display: none; }
.js .compare { display: flex; flex-direction: column; gap: 12px; }
.js .compare .shots { grid-template-columns: minmax(0, 1fr); }
.js .compare .shots > figure { grid-area: 1 / 1; }
.js .compare .shots > figure:first-child { z-index: 1;
     clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.js .compare .shots > figure:first-child figcaption { visibility: hidden; }
.js .compare .box, .js .compare .box.enter { z-index: 2; box-shadow: none; }
.js .compare .split { display: block; width: 100%; accent-color: var(--accent);
     cursor: ew-resize; }
.frame { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 0 0 1px var(--border); }
.frame img { border-radius: 0; box-shadow: none; }
.box { position: absolute; border: 2px solid var(--lit); border-radius: var(--radius-xs);
       box-shadow: 0 0 0 9999px color-mix(in srgb, var(--bg) 45%, transparent); }
.js .box { border-color: transparent; box-shadow: 0 0 0 9999px transparent;
           transition: box-shadow var(--dur-live) var(--ease-out); }
.js .box::before { content: ''; position: absolute; inset: -2px; border: 2px solid var(--lit);
                   border-radius: var(--radius-xs); clip-path: inset(0 100% 0 0);
                   transition: clip-path var(--dur-live) var(--ease-out); }
.js .box.enter { box-shadow: 0 0 0 9999px color-mix(in srgb, var(--bg) 45%, transparent); }
.js .box.enter::before { clip-path: inset(0); }
.box .tag { position: absolute; left: 0; top: -24px; white-space: nowrap;
            background: var(--bg); border: 1px solid var(--lit); border-radius: var(--radius-xs);
            padding: 0px 4px; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--fg); }

.panel { background: var(--surface-1); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--border);
         padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; }
.acts form { display: inline; }
.acts form.reject { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acts form.reject .input { min-width: 0; flex: 1 1 200px; }
.acts form.reject label { font-size: 0.875rem; color: var(--muted); }
.acts .say { flex: 0 0 100%; font-size: 0.875rem; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
       padding: 8px 14px; border-radius: var(--radius-md); font: 500 0.875rem/1.2 var(--font-sans);
       cursor: pointer; color: var(--fg); background: var(--surface-1); border: 1px solid var(--border-strong);
       transition: background var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--surface-2); }
.btn:active { background: var(--surface-3); transform: translateY(1px); }
.btn.ok { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.btn.ok:hover, .btn.ok:active { background: var(--accent-hover); color: var(--on-accent); border-color: var(--accent-hover); }
.btn:disabled, .btn[aria-busy='true'] { background: var(--surface-3); color: var(--subtle);
       border-color: transparent; cursor: not-allowed; transform: none; }
.btn.sm { min-height: 32px; padding: 4px 12px; }

footer.bot { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.8125rem;
             color: var(--muted); padding-top: 12px; border-top: 1px solid var(--border); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::view-transition-group(*) { animation-duration: var(--dur-live); }

.hero { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
        gap: 32px; align-items: start; }
@media (max-width: 768px) { .hero { grid-template-columns: minmax(0,1fr); } }
.hero h1, .hero h2 { margin: 0; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.6px; }
.lede { margin: 0; max-width: 52ch; color: var(--muted); font-size: 1rem; text-wrap: pretty; }
.lede .mono { color: var(--fg); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

.big { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.big .n { font: 500 2.5rem/1.1 var(--font-mono); letter-spacing: -1px; color: var(--lit);
          font-variant-numeric: tabular-nums; }
.big .u { font-family: var(--font-mono); font-size: 1rem; color: var(--muted); padding-bottom: 8px; }

.big.ok { --lit: var(--ok); } .big.warn { --lit: var(--warn); } .big.bad { --lit: var(--danger); }

.spark { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.spark svg { width: 100%; height: 72px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--border); stroke-width: 1.5; }
.spark line { stroke: var(--muted); stroke-width: 7; stroke-linecap: round; }
.spark line.mark { stroke: var(--fg); stroke-width: 1;
                   stroke-dasharray: 3 3; opacity: .45; }
.spark line.ok { stroke: var(--ok); }
.spark line.warn { stroke: var(--warn); }
.spark line.bad { stroke: var(--danger); }
.spark figcaption { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); }

.flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.step { flex: 1 1 150px; min-width: 0; background: var(--surface-1); border-radius: var(--radius-md);
        box-shadow: 0 0 0 1px var(--border); border-left: 2px solid var(--lit);
        padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.step.err { border-left-color: var(--danger); }
.step .name { font-size: 0.875rem; font-family: var(--font-sans); font-weight: 500;
              overflow-wrap: anywhere; }
.step .br { font-family: var(--font-mono); font-size: 0.875rem; color: var(--lit); overflow-wrap: anywhere; }
.step.err .br { color: var(--danger); }
.step .ms { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); }
.arrow { align-self: center; color: var(--muted); font-size: 1rem; }
.step.pending, .step.skipped { background: none; box-shadow: none;
        border: 1px dashed var(--border); border-left: 1px dashed var(--border); }
.step.pending .name, .step.skipped .name, .step.pending .br, .step.skipped .br { color: var(--muted); }
.step.ok { border-left-color: var(--ok); } .step.ok .br { color: var(--ok); }
.step.warn { border-left-color: var(--warn); } .step.warn .br { color: var(--warn); }
.step.bad { border-left-color: var(--danger); } .step.bad .br { color: var(--danger); }
.step.active { border-left-color: var(--accent); }
.step.active .br { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.step.done { animation: lit var(--dur-live) var(--ease-out); }
@keyframes lit { from { opacity: .35 } to { opacity: 1 } }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lit);
       animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; opacity: 1; } }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 8px; }
.ghost { border: 1px dashed var(--border); border-radius: var(--radius-md); padding: 8px 12px;
         display: flex; flex-direction: column; gap: 0px; font-family: var(--font-mono); }
.ghost .t { font-size: 0.875rem; color: var(--muted); }
.ghost .r { font-size: 0.8125rem; color: var(--muted); opacity: .75; overflow-wrap: anywhere; }

.terminal { margin: 0; padding: 20px; overflow-x: auto; background: var(--surface-1);
            border: 1px solid var(--border); border-radius: var(--radius-md);
            font: 400 0.8125rem/18px var(--font-mono); }
.terminal .chrome { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; color: var(--subtle); }
.terminal .chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.terminal .chrome span { margin-left: 8px; }
.terminal ol { margin: 0; padding: 0; list-style: none; }
.terminal li { width: max-content; white-space: pre; }
.js .terminal li { clip-path: inset(0 calc(100% - var(--shown, 100%)) 0 0); }
.terminal .tool { color: var(--muted); }
.terminal b { font-weight: 500; color: var(--fg); }
.terminal .ok { color: var(--ok); } .terminal .warn { color: var(--warn); }
.terminal .bad { color: var(--danger); } .terminal .last { color: var(--subtle); }
@media (prefers-reduced-motion: reduce) {
  .js .terminal li { clip-path: none; }
}

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 16px; }
@media (max-width: 768px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--surface-1); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--border);
        padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card .head .name { font-family: var(--font-sans); font-weight: 500; font-size: 1rem;
                    overflow-wrap: anywhere; }
.card .head .ms { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.verdict, .err { font-family: var(--font-mono); font-size: 0.875rem;
                 border-top: 1px solid var(--border); padding-top: 8px;
                 overflow-wrap: anywhere; }
.verdict { color: var(--lit); }
.err { color: var(--danger); }

.cta { background: var(--surface-1); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--border);
       padding: 24px; display: flex; flex-wrap: wrap; align-items: center;
       justify-content: space-between; gap: 16px; }
.cta .t { font-family: var(--font-sans); font-weight: 500; font-size: 1.375rem; }
.cta .s { font-size: 0.875rem; color: var(--muted); text-wrap: pretty; }
.cta:has(.cta-shot) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                      grid-template-areas: 'shot text' 'shot acts'; align-items: start; }
.cta:has(.cta-shot) > .col { grid-area: text; }
.cta:has(.cta-shot) > .acts { grid-area: acts; }
.cta-shot { grid-area: shot; min-width: 0; }
.cta-shot .frame { width: fit-content; max-width: 100%; }
.cta-shot .tag { display: none; }
.zooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.zoom { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.zoom-box { border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 0 0 1px var(--border); }
.zoom-box img { display: block; max-width: 100%; border-radius: 0; box-shadow: none; }
.zoomed .zoom-box { position: relative; aspect-ratio: 1; }
.zoomed .zoom-box img { position: absolute; max-width: none; height: auto; }
.zoom figcaption { font-size: 0.875rem; color: var(--muted); }
.zoom-full { display: inline-block; margin-top: 8px; font-size: 0.875rem; }
.cta-shot .frame img { display: block; max-width: 100%; max-height: 280px; width: auto; height: auto; }
@media (max-width: 768px) {
  .cta:has(.cta-shot) { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'text' 'shot' 'acts'; }
  .cta-shot .frame img { max-height: 220px; }
}

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
           gap: 12px; }
.asset { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-md);
         color: var(--fg); background: var(--surface-1); box-shadow: 0 0 0 1px var(--border);
         transition: box-shadow var(--dur-fast) var(--ease-out); }
.asset:hover { text-decoration: none; box-shadow: 0 0 0 1px var(--border); }
.asset img, .asset .noshot { flex: none; width: 90px; height: 60px; border-radius: var(--radius-xs);
         object-fit: cover; }
.asset .noshot { border: 1px dashed var(--border); }
.asset .meta { display: flex; flex-direction: column; align-items: start; gap: 4px;
         min-width: 0; }
.asset .name { font-family: var(--font-sans); font-weight: 500; overflow-wrap: anywhere; }
.asset .ms { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); }
.pill.ok { border-color: var(--ok); color: var(--ok); }
.pill.warn { border-color: var(--warn); color: var(--warn); }
.pill.bad { border-color: var(--danger); color: var(--danger); }

.empty { display: flex; align-items: center; gap: 16px; padding: 24px;
         border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.empty .ring { flex: none; width: 56px; height: 56px; border-radius: 50%;
               border: 2px dashed var(--border); }


.samples { display: flex; flex-direction: column; gap: 12px; padding-top: 16px;
           border-top: 1px solid var(--border); }
.samples [data-sample-inspect] { align-self: flex-start; }
.own-photo { display: flex; flex-direction: column; gap: 12px; padding-top: 16px;
             border-top: 1px solid var(--border); }
.own-photo .field { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px; max-width: 60ch; }
.own-photo .field > * { min-width: 0; }
.own-photo .field .btn { align-self: flex-start; }
.own-photo .field .hint { max-width: 60ch; margin: 0; font-size: 0.875rem; }
.samples .strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 768px) { .samples .strip { grid-template-columns: minmax(0, 1fr); } }
.sample { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-md);
          text-align: start; font: inherit; color: var(--fg); cursor: pointer;
          background: var(--bg); border: 1px solid var(--border);
          transition: border-color var(--dur-fast) var(--ease-out); }
.sample:hover, .sample[aria-pressed=true] { border-color: var(--accent); }
.sample[aria-disabled=true] { border-style: dashed; cursor: not-allowed; }
.sample[aria-disabled=true]:hover { border-color: var(--border); }
.sample img { flex: none; width: 72px; height: 48px; object-fit: cover; border-radius: var(--radius-xs); }
.sample .meta { display: flex; flex-direction: column; align-items: start; gap: 4px;
                min-width: 0; }
.sample .name { font-family: var(--font-sans); font-weight: 500; font-size: 0.875rem; }
.sample .ms { font-size: 0.8125rem; color: var(--muted); text-wrap: pretty; }
.carousel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.carousel-bar { display: flex; align-items: center; gap: 8px; }
.carousel-bar .btn[aria-disabled=true] { color: var(--subtle); cursor: not-allowed; }
.carousel-count { flex: 1; margin: 0; text-align: center; font-size: 0.875rem; color: var(--muted); }
.groups { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
          overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--radius-md); }
.groups::-webkit-scrollbar { display: none; }
.group { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
@media (prefers-reduced-motion: no-preference) { .groups { scroll-behavior: smooth; } }

.dropzone { position: relative; display: inline-flex; max-width: 100%; min-width: 0;
            flex-wrap: wrap; align-items: center; gap: 8px; }
.dropzone.over .input { border-color: var(--accent); }
.drop-hint { display: none; max-width: 100%; font-size: 0.875rem; color: var(--muted);
             overflow-wrap: anywhere; }
.js .drop-hint { display: inline; }
.js .dropzone.picked .drop-hint { display: none; }
.drop-preview { width: 54px; height: 36px; object-fit: cover; border-radius: var(--radius-xs);
                box-shadow: 0 0 0 1px var(--border); }
.thumb { width: 90px; height: 60px; object-fit: cover; border-radius: var(--radius-xs);
         box-shadow: 0 0 0 1px var(--border); }
.field { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.field label { font-size: 0.875rem; color: var(--muted); }
.input { min-height: 40px; max-width: 100%; padding: 8px 12px; font: 400 1rem/1.5 var(--font-mono);
         color: var(--fg); caret-color: var(--accent); background: var(--surface-1);
         border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.input:hover { border-color: var(--fg); }
.input[aria-invalid='true'] { border-color: var(--danger); }
.input::placeholder { color: var(--muted); opacity: 1; }
.input::file-selector-button { margin-right: 8px; padding: 4px 12px; font: inherit;
                               font-size: 0.875rem; color: var(--muted); background: transparent;
                               border: 1px solid var(--border); border-radius: var(--radius-sm);
                               cursor: pointer; }
.input::file-selector-button:hover { color: var(--accent); border-color: var(--accent); }
details > summary, .stages .raw { cursor: pointer; font-family: var(--font-mono); font-size: 0.8125rem;
                    color: var(--muted); letter-spacing: 0.06em; }
details > summary:hover { color: var(--accent); }
details pre { margin: 8px 0 0; padding: 12px; border-radius: var(--radius-md); background: var(--bg);
              box-shadow: 0 0 0 1px var(--border); font-family: var(--font-mono); font-size: 0.8125rem;
              color: var(--fg); overflow-x: auto; }

.timeline { display: flex; flex-direction: column; }
.tl { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 16px; }
.tl .rail { position: relative; display: flex; justify-content: center; }
.tl .rail::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1px;
                    background: color-mix(in srgb, var(--fg) 30%, transparent); }
.tl:first-child .rail::before { top: 16px; }
.tl:last-child .rail::before { bottom: calc(100% - 16px); }
.tl .node { position: relative; margin-top: 12px; width: 9px; height: 9px; border-radius: 50%;
            background: var(--surface-3); box-shadow: 0 0 0 3px var(--bg); }
.tl.promoted .node { background: var(--accent); }
.tl.now .node { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent); }
.tl.now .facts { border-left: 2px solid var(--accent); padding-left: 12px; }
.tl .entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px;
             align-items: start; padding: 4px 0 24px; min-width: 0; }
@media (max-width: 768px) { .tl .entry { grid-template-columns: minmax(0, 1fr); } }
.tl .facts { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.queue { display: flex; flex-direction: column; gap: 16px; }
.tl .top, .queue .top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                        font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted); }
.queue .foot { display: flex; align-items: center; justify-content: space-between; gap: 16px;
               flex-wrap: wrap; }

/* a hidden tooltip must leave the flow entirely: `visibility: hidden` keeps its box, and an
   absolutely positioned box past the right edge grows the page's scroll width on a phone */
.tip { position: relative; cursor: help; border-bottom: 1px dotted var(--muted); }
.tip::after { content: attr(data-tip); display: none; position: absolute; left: 0;
              bottom: calc(100% + 6px); z-index: 5; width: max-content;
              max-width: min(34ch, 68vw); padding: 4px 8px; border-radius: var(--radius-sm);
              background: var(--surface-1); color: var(--fg);
              box-shadow: 0 0 0 1px var(--border); font-family: var(--font-sans); font-size: 0.875rem;
              font-weight: 400; line-height: 1.35; text-transform: none; letter-spacing: normal;
              white-space: normal; text-align: left; }
.tip:hover::after, .tip:focus::after, .tip:focus-visible::after { display: block; }
.stage .m .tip::after { left: auto; right: 0; }

.stages { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.stage { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
         flex-wrap: wrap; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.stage .q { font-size: 0.875rem; color: var(--fg); text-wrap: pretty; }
.stage .m { font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted); white-space: nowrap; }
.stage .m b { font-weight: 500; color: var(--lit); }


figcaption .note { display: block; margin-top: 0px; font-family: var(--font-sans);
                   text-wrap: pretty; }

.alert { display: flex; flex-direction: column; gap: 4px; background: var(--surface-1);
         border-radius: var(--radius-md); padding: 12px 16px; box-shadow: 0 0 0 1px var(--danger);
         font-size: 0.875rem; text-wrap: pretty; }
.alert .why { font-family: var(--font-mono); font-size: 0.875rem; color: var(--danger); }

.landing-shell { display: flex; flex-direction: column; gap: 96px; padding-top: 48px; }
header.top:has(~ main .landing-shell) { position: sticky; top: 0; z-index: 20;
  padding: 12px 0; background: var(--bg); }
.landing-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
  gap: 48px; align-items: center; min-height: min(640px, calc(100vh - 180px)); }
.landing-hero-copy { display: flex; flex-direction: column; align-items: start; gap: 16px; }
.landing-eyebrow { margin: 0; font: 600 .875rem/1.4 var(--font-sans); color: var(--subtle);
  letter-spacing: 2.52px; text-transform: uppercase; }
.landing-hero h1 { max-width: 12ch; margin: 0;
  font: 600 clamp(2.25rem, 5vw, 3.5rem)/1.1 var(--font-sans); letter-spacing: -1.8px;
  text-wrap: balance; }
.landing-hero-lede { max-width: 54ch; margin: 0; color: var(--muted); font-size: 1.125rem;
  text-wrap: pretty; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.landing-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center;
  padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  color: var(--fg); background: var(--surface-1); font: 500 .875rem/1.2 var(--font-sans); }
.landing-button:hover { background: var(--surface-2); text-decoration: none; color: var(--fg); }
.landing-button-primary { color: var(--on-accent); background: var(--accent);
  border-color: var(--accent); }
.landing-button-primary:hover { color: var(--on-accent); background: var(--accent-hover); }
.landing-demo { min-width: 0; padding: 24px; border: 1px solid var(--border);
  border-radius: var(--radius-xl); background: var(--surface-1); }
.landing-demo-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.landing-demo h2 { margin: 8px 0 0; font: 500 1.375rem/1.25 var(--font-sans); }
.landing-demo-live { flex: none; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 15%, transparent); }
.landing-demo-hint { max-width: 58ch; margin: 8px 0 16px; color: var(--muted); font-size: .875rem; }
.landing-scenario-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0px; padding: 4px; border-radius: var(--radius-md); background: var(--bg); }
.landing-scenario-tab { min-width: 0; padding: 8px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); font: 500 .75rem/1.25 var(--font-sans);
  text-align: left; cursor: pointer; }
.landing-scenario-tab span { display: block; margin-bottom: 0px; font-family: var(--font-mono);
  color: var(--accent); }
.landing-scenario-tab[aria-selected='true'] { color: var(--fg); background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border); }
.landing-scenario-panel { padding-top: 16px; }
.landing-capture { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px;
  align-items: center; margin-bottom: 16px; }
.landing-capture img { width: 110px; height: 74px; object-fit: cover; border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px var(--border); }
.landing-capture-label { font-weight: 600; }
.landing-capture p { margin: 4px 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.landing-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
  margin: 0; padding: 0; list-style: none; }
.landing-rail-step { min-width: 0; padding: 8px 8px; border-radius: var(--radius-md);
  background: var(--bg); border-top: 2px solid var(--border); }
.landing-rail-index, .landing-rail-state { display: block; color: var(--muted);
  font: .75rem/1.25 var(--font-mono); }
.landing-rail-name { display: block; margin: 4px 0; font: 500 .75rem/1.2 var(--font-sans);
  overflow-wrap: anywhere; }
.landing-rail-done { border-color: var(--ok); }
.landing-rail-warn { border-color: var(--warn); }
.landing-rail-bad { border-color: var(--danger); }
.landing-rail-skipped, .landing-rail-skipped .landing-rail-index,
.landing-rail-skipped .landing-rail-state { color: var(--subtle); }
.landing-outcome { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.landing-outcome span { color: var(--muted); font: .75rem var(--font-mono); text-transform: uppercase;
  letter-spacing: .08em; }
.landing-outcome strong { text-align: right; font-size: .875rem; }
.landing-demo-controls { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px;
  margin-top: 12px; }
.landing-demo-controls button { min-height: 36px; padding: 4px 8px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--muted); background: transparent; font: .75rem var(--font-mono);
  cursor: pointer; }
.landing-demo-controls button:hover { color: var(--fg); border-color: var(--accent); }
.landing-demo-ready .landing-rail-step:not(.landing-step-visible),
.landing-demo-ready .landing-outcome:not(.landing-step-visible) { opacity: .2; }
.landing-rail-step, .landing-outcome { transition: opacity var(--dur-live) var(--ease-out); }
.landing-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--border); }
.landing-metrics article { display: flex; flex-direction: column; min-width: 0; padding: 24px 24px;
  border-left: 1px solid var(--border); }
.landing-metrics article:first-child { border-left: 0; }
.landing-metrics strong { font: 500 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--font-mono);
  letter-spacing: -1px; color: var(--fg); font-variant-numeric: tabular-nums; }
.landing-metrics span { margin-top: 8px; font-weight: 600; }
.landing-metrics small { margin-top: 4px; color: var(--muted); line-height: 1.35; }
.landing-section { display: flex; flex-direction: column; gap: 32px; }
.landing-section-heading { display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, 1fr);
  gap: 12px 32px; align-items: end; }
.landing-section-heading .landing-eyebrow { grid-column: 1 / -1; }
.landing-section h2, .landing-memory h2, .landing-final h2 { margin: 0;
  font: 600 clamp(1.75rem, 3.5vw, 2.5rem)/1.15 var(--font-sans); letter-spacing: -1px;
  text-wrap: balance; }
.landing-section-heading > p:last-child, .landing-memory-copy > p:last-child,
.landing-final p { max-width: 58ch; margin: 0; color: var(--muted); text-wrap: pretty; }
.landing-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.landing-flow-card { min-height: 230px; padding: 20px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface-1); }
.landing-flow-number { color: var(--accent); font: .75rem var(--font-mono); }
.landing-flow-card h3 { margin: 64px 0 8px; font: 500 1.375rem/1.25 var(--font-sans); }
.landing-flow-card p { margin: 0; color: var(--muted); }
.landing-memory { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: 48px; align-items: center; padding: 48px; border-radius: var(--radius-xl);
  background: var(--surface-1); box-shadow: 0 0 0 1px var(--border); overflow: hidden; }
.landing-memory-copy { display: flex; flex-direction: column; gap: 16px; }
.landing-memory-visual { position: relative; min-height: 270px; perspective: 800px; }
.landing-memory-card { position: absolute; inset: 48px 7% auto; display: flex; align-items: center;
  justify-content: space-between; min-height: 140px; padding: 24px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--bg); transform: translateY(42px) scale(.88);
  opacity: .35; }
.landing-memory-card:nth-child(2) { transform: translateY(21px) scale(.94); opacity: .6; }
.landing-memory-card-current { transform: none; opacity: 1; z-index: 2;
  border-color: var(--accent); }
.landing-memory-card span { color: var(--muted); font: .75rem var(--font-mono); text-transform: uppercase; }
.landing-memory-card b { color: var(--accent); font: 500 2.5rem/1.1 var(--font-mono); }
.landing-stack-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: 16px; }
.landing-stack-list { display: flex; flex-wrap: wrap; align-content: start; gap: 8px; }
.landing-stack-list span { padding: 8px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-pill); font: .8125rem var(--font-mono); }
.landing-limits { padding: 24px; border-radius: var(--radius-lg); background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border); }
.landing-limits h3 { margin: 0 0 12px; font: 500 1rem var(--font-sans); }
.landing-limits ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 20px;
  color: var(--muted); }
.landing-final { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 48px; border-radius: var(--radius-xl); background: var(--surface-1); box-shadow: 0 0 0 1px var(--border); }
.landing-final > div { display: flex; flex-direction: column; gap: 12px; }
.landing-final .landing-button { flex: none; }

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 12px;
  border-radius: var(--radius-sm); color: var(--on-accent); background: var(--accent);
  transform: translateY(calc(-100% - 16px)); }
.skip-link:focus { color: var(--on-accent); transform: translateY(0); }
.asset-filters, .activity-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 8px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-1); }
.asset-filters label, .activity-filters label { color: var(--muted); font-size: .875rem; }
.asset-filters .input { flex: 1 1 210px; }
.activity-page { gap: 24px; }
.activity-page > div:first-child { display: flex; flex-direction: column; gap: 8px; }
.activity-list { display: flex; flex-direction: column; gap: 8px; }
.activity-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 16px; border-radius: var(--radius-md); background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border); }
.activity-main { display: flex; min-width: 0; flex-direction: column; align-items: start; gap: 4px; }
.activity-main .top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.activity-main strong { overflow-wrap: anywhere; }
.activity-actions, .error-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.activity-actions form, .error-actions form { display: inline; margin: 0; }
.error-page { display: grid; grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
  align-items: center; gap: 32px; padding-block: 48px; }
.error-number { color: var(--accent); font: 500 clamp(4.5rem, 12vw, 9rem)/.8 var(--font-mono);
  letter-spacing: -.08em; }
.error-page h1 { margin: 0; font: 500 clamp(2rem, 5vw, 3.5rem)/1 var(--font-sans); }

@media (max-width: 1024px) {
  .landing-shell { gap: 64px; }
  .landing-hero { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .landing-hero h1 { max-width: 15ch; }
  .landing-section-heading, .landing-memory, .landing-stack-grid {
    grid-template-columns: minmax(0, 1fr); }
  .landing-memory { padding: 32px; }
  .landing-memory-visual { min-height: 230px; }
}

@media (max-width: 768px) {
  .page { padding: 12px 16px 48px; }
  .wrap, main, .live { gap: 20px; }
  .panel { padding: 12px; }
  header.top { align-items: stretch; gap: 8px; }
  header.top > .row { width: 100%; flex-wrap: nowrap; gap: 8px; }
  header.top > .row:first-child { align-items: center; }
  header.top > .row:last-child { justify-content: flex-end; }
  header.top > .row:last-child > .hint, header.top .runid { display: none; }
  nav.top { min-width: 0; overflow-x: auto; gap: 12px; white-space: nowrap; }
  nav.langs, nav.regs { gap: 4px; font-size: .8125rem; white-space: nowrap; }
  .toggle { padding-inline: 8px; }
  .landing-shell { gap: 64px; padding-top: 24px; }
  .landing-hero { gap: 32px; }
  .landing-demo { padding: 16px; }
  .landing-scenario-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-rail { display: flex; flex-direction: column; }
  .landing-rail-step { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px;
    align-items: center; border-top: 0; border-left: 2px solid var(--border); }
  .landing-rail-done { border-left-color: var(--ok); }
  .landing-rail-warn { border-left-color: var(--warn); }
  .landing-rail-bad { border-left-color: var(--danger); }
  .landing-rail-name { margin: 0; }
  .landing-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-metrics article { padding: 20px 12px; }
  .landing-metrics article:nth-child(odd) { border-left: 0; }
  .landing-metrics article:nth-child(n+3) { border-top: 1px solid var(--border); }
  .landing-flow { grid-template-columns: minmax(0, 1fr); }
  .landing-flow-card { min-height: 0; }
  .landing-flow-card h3 { margin-top: 32px; }
  .landing-memory { padding: 24px 16px; }
  .landing-memory-visual { min-height: 200px; }
  .landing-final { align-items: start; flex-direction: column; padding: 24px 20px; }
  .asset-filters, .activity-filters { align-items: stretch; flex-direction: column; }
  .asset-filters .input, .activity-filters .input { width: 100%; flex-basis: auto; }
  .activity-row { align-items: stretch; flex-direction: column; }
  .activity-actions .btn { flex: 1; }
  .error-page { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .landing-capture { grid-template-columns: 82px minmax(0, 1fr); }
  .landing-capture img { width: 82px; height: 62px; }
  .landing-outcome { align-items: start; flex-direction: column; }
  .landing-outcome strong { text-align: left; }
  .landing-memory-card { inset-inline: 2%; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-button, .landing-scenario-tab, .landing-rail-step, .landing-outcome, .skip-link {
    scroll-behavior: auto; transition: none; }
}