/* Layout: benchmark site prototype. Sticky top nav with hash routes; one column of pages built from results.json. */
:root {
  --bg: #f4f5f2; --panel: #ffffff; --fg: #1a1f24; --muted: #5b646e; --line: #d8dcd6; --soft: #eaece7;
  --accent: #1f5f8b; --gr00t: #13795b; --cosmos: #b0560d; --ok: #2f7d4f; --bad: #b3402b; --warn: #946400; --proto: #6b5aa6;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "IBM Plex Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #111417; --panel: #181c20; --fg: #e3e6e9; --muted: #98a1ab; --line: #2b3137; --soft: #1f2429;
  --accent: #79b4dd; --gr00t: #4cc39a; --cosmos: #f0a35c; --ok: #63c08a; --bad: #ef8a75; --warn: #e2b450; --proto: #b3a6ea; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #111417; --panel: #181c20; --fg: #e3e6e9; --muted: #98a1ab; --line: #2b3137; --soft: #1f2429;
  --accent: #79b4dd; --gr00t: #4cc39a; --cosmos: #f0a35c; --ok: #63c08a; --bad: #ef8a75; --warn: #e2b450; --proto: #b3a6ea; color-scheme: dark }
* { box-sizing: border-box }
body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 15px; line-height: 1.6; margin: 0 }
.wrap { max-width: 1100px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 0 64px }
.protobar { background: var(--proto); color: var(--bg); font-size: 13px; padding-block: 7px; }
.protobar .wrap { padding-block: 0 }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line) }
.top .wrap { display: flex; align-items: center; gap: 18px; padding-block: 0; overflow-x: auto }
.brand { font-family: var(--serif); font-weight: 600; font-size: 18px; white-space: nowrap; color: var(--fg); text-decoration: none }
.top nav { display: flex; gap: 2px }
.top nav a { padding: 13px 10px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent }
.top nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent) }
.top nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }
h1 { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.2; margin: 26px 0 8px; text-wrap: balance }
h2 { font-family: var(--serif); font-weight: 600; font-size: 23px; margin: 34px 0 10px; text-wrap: balance }
h3 { font-size: 16px; margin: 22px 0 8px }
p { margin: 0 0 12px; max-width: 72ch }
.lede { font-size: 17px; color: var(--muted); max-width: 72ch }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 26px }
.muted { color: var(--muted) } .small { font-size: 13px }
code, .mono { font-family: var(--mono); font-size: 12.8px }
a { color: var(--accent) }
.tw { overflow-x: auto; min-width: 0 }
table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top }
th { font-weight: 600; color: var(--muted); font-size: 12.5px; background: var(--soft); white-space: nowrap }
td.num, th.num { text-align: right; white-space: nowrap }
tr.ref td { color: var(--muted) }
.notice { border-left: 3px solid var(--accent); background: var(--panel); padding: 10px 14px; font-size: 14px; margin: 10px 0 14px; border-radius: 0 6px 6px 0; max-width: 90ch }
.notice.pt { border-left-color: var(--warn) }
.notice.open { border-left-color: var(--proto) }
.sr { font-weight: 600 }
.bar { display: block; position: relative; height: 4px; background: var(--soft); border-radius: 2px; margin-top: 4px; min-width: 70px }
.bar i { position: absolute; top: 0; bottom: 0; background: var(--accent); opacity: .55; border-radius: 2px }
.bar b { position: absolute; top: -2px; width: 2px; height: 8px; background: var(--fg) }
.ci { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400 }
.rank { font-family: var(--mono); font-size: 13px; color: var(--muted) }
.pill { display: inline-block; font-size: 11.5px; padding: 0 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; line-height: 1.7; font-weight: 500 }
.pill.ok { color: var(--ok) } .pill.bad { color: var(--bad) } .pill.soon { color: var(--muted) } .pill.int { color: var(--warn) }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0 }
.tasks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 6px }
@media (max-width: 860px) { .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.tcard { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--fg); display: flex; flex-direction: column }
.tcard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; max-width: 100% }
.tcard .tx { padding: 9px 12px 11px }
.tcard .id { font-family: var(--mono); font-size: 12px; color: var(--muted) }
.tcard .nm { font-weight: 600; font-size: 14.5px }
.tcard:focus-visible { outline: 2px solid var(--accent) }
.facts { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: 6px 18px; font-size: 14.5px; margin: 0 }
.facts dt { color: var(--muted) } .facts dd { margin: 0; min-width: 0 }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr } .facts dd { margin-bottom: 6px } }
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 18px }
@media (max-width: 860px) { .split { grid-template-columns: 1fr } }
.vid { position: relative; background: #000; border-radius: 6px; overflow: hidden; max-width: 100% }
.vid img, .vid video { width: 100%; display: block; max-width: 100% }
.vid button { position: absolute; inset: 0; background: transparent; border: 0; cursor: pointer; display: grid; place-items: center }
.vid button span { background: rgba(0,0,0,.6); color: #fff; font-size: 13px; padding: 6px 12px; border-radius: 999px }
.vid button:focus-visible span { outline: 2px solid #fff }
.cap { font-size: 12.5px; color: var(--muted); margin-top: 6px }
.matrices { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 10px }
.mx { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; min-width: 0 }
.mx h4 { margin: 0 0 8px; font-size: 14px }
.mx .g { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 4px; font-size: 12px }
.mx .h { color: var(--muted); text-align: center }
.mx .rl { color: var(--muted); align-self: center }
.mx .c { border-radius: 4px; padding: 8px 4px; text-align: center; min-height: 56px }
.mx .c b { display: block; font-size: 16px; font-variant-numeric: tabular-nums }
.mx .c span { font-size: 11px }
.mx .c.na { border: 1px dashed var(--line); color: var(--muted); display: grid; place-items: center; font-size: 11px }
.gap svg { width: 100%; height: auto; display: block }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px }
.chip { font: inherit; font-size: 13px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg) }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px }
.clip { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; min-width: 0 }
.clip .vid { border-radius: 0 }
.clip .lab { padding: 7px 10px; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: space-between }
.empty { border: 1px dashed var(--line); border-radius: 8px; padding: 18px; color: var(--muted); font-size: 14px; text-align: center }
.funnel li { margin: 3px 0 }
.tasklayout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 30px; align-items: start }
.side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 60px); padding-top: 26px; font-size: 14px }
.side .env { font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px }
.side .env:first-child { margin-top: 0 }
.side a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--fg); text-decoration: none; border-left: 2px solid transparent }
.side a span { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--muted) }
.side a[aria-current="page"] { background: var(--panel); border-left-color: var(--accent) }
.side a:focus-visible { outline: 2px solid var(--accent) }
@media (max-width: 860px) { .tasklayout { grid-template-columns: 1fr; gap: 0 } .side { position: static; padding-top: 16px; display: flex; gap: 6px; overflow-x: auto } .side .env { display: none } .side a { white-space: nowrap; border: 1px solid var(--line); border-left-width: 1px } }
.sens { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 10px 0 }
.sens summary { cursor: pointer; font-size: 14.5px }
.sens summary:focus-visible { outline: 2px solid var(--accent) }
.sens figure { margin: 10px 0 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px; max-width: 100% }
.sens figure img { width: 100%; height: auto; display: block; max-width: 100% }
.sens figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px }
footer { margin-top: 44px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted) }
@media (prefers-reduced-motion: no-preference) { .top nav a, .chip { transition: color .15s, background .15s, border-color .15s } }

/* 3D episode replay (v3d/viewer3d.js) */
.v3d { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden }
.v3d-stage { position: relative; background: var(--soft); outline: none; touch-action: none }
.v3d-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--accent) }
.v3d-stage canvas { display: block; width: 100%; height: 100% }
.v3d [hidden] { display: none !important }
.v3d-load { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; background: var(--soft) }
.v3d-views { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 20px) }
.v3d-views button, .v3d-bar button, .v3d-bar select { font: 500 12.5px var(--sans); color: var(--fg); background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; cursor: pointer; backdrop-filter: blur(4px) }
.v3d-views button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg) }
.v3d-views button:focus-visible, .v3d-bar button:focus-visible, .v3d-bar select:focus-visible, .v3d-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.v3d-legend { position: absolute; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); background: color-mix(in srgb, var(--panel) 85%, transparent); padding: 4px 9px; border-radius: 6px; max-width: calc(100% - 20px) }
.v3d-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px }
.v3d-legend i.ring { border-radius: 50%; border: 2px solid; background: transparent }
.v3d-legend i.ln { height: 3px; width: 14px; vertical-align: 2px }
.v3d-toast { position: absolute; top: 46px; left: 50%; transform: translate(-50%, -6px); background: var(--fg); color: var(--bg); font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: 999px; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap }
.v3d-toast.on { opacity: .92; transform: translate(-50%, 0) }
.v3d-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px 4px; flex-wrap: wrap }
.v3d-play { width: 34px; height: 30px; padding: 0 !important; font-size: 13px !important }
.v3d-time { font-size: 12px; color: var(--muted); min-width: 92px }
.v3d-track { position: relative; flex: 1 1 200px; height: 26px; cursor: pointer; touch-action: none }
.v3d-track::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; background: var(--soft); border-radius: 2px }
.v3d-fill { position: absolute; left: 0; top: 11px; height: 4px; background: var(--muted); opacity: .55; border-radius: 2px; width: 0 }
.v3d-head { position: absolute; top: 6px; width: 3px; height: 14px; margin-left: -1px; background: var(--fg); border-radius: 2px }
.v3d-mk { position: absolute; top: 5px; width: 12px; height: 16px; margin-left: -6px; border-radius: 3px; border: 0; padding: 0 !important; background: var(--accent) !important; cursor: pointer }
.v3d-end { position: absolute; top: 4px; width: 2px; height: 18px; background: var(--bad) }
@media (max-width: 600px) { .v3d-legend { display: none } }
.v3d-plotkey { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 2px 12px 0; font-size: 11.5px; color: var(--muted) }
.v3d-plotkey i { display: inline-block; width: 14px; height: 3px; margin-right: 5px; vertical-align: 3px; border-radius: 2px }
.v3d-plotkey i.dash { background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 6px) }
.v3d-plot { display: block; width: calc(100% - 24px); margin: 0 12px; cursor: pointer; touch-action: none }
.v3d-keys { padding: 4px 12px 10px }

.v3c-models { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px 0 }
.v3c-model { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 13px; background: var(--panel) }
.v3c-model label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 500 }
.v3c-model label i { display: inline-block; width: 12px; height: 12px; border-radius: 3px }
.v3c-model .v3c-out { color: var(--muted); font-size: 12px }
.v3c-model input[type=range] { width: 80px; accent-color: var(--fg) }
.v3c-split .v3c-model input[type=range] { display: none }
.v3c-mode { display: flex; gap: 0 }
.v3c-mode button { border-radius: 0 !important } .v3c-mode button:first-child { border-radius: 999px 0 0 999px !important } .v3c-mode button:last-child { border-radius: 0 999px 999px 0 !important }
.v3c-mode button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg) }
.v3c-panes { position: absolute; inset: 0; pointer-events: none }
.v3c-pane { position: absolute; box-shadow: inset 0 0 0 1px var(--line) }
.v3c-pane span { position: absolute; left: 8px; bottom: 8px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--panel) 88%, transparent); border-left: 3px solid; padding: 2px 8px; border-radius: 4px }
.v3c-pane span i { display: none }
.v3c-pane em { position: absolute; right: 8px; bottom: 8px; font-style: normal; font-size: 11.5px; color: var(--muted); background: color-mix(in srgb, var(--panel) 88%, transparent); padding: 2px 6px; border-radius: 4px; opacity: 0 }
.v3c-pane.ended em { opacity: 1 }
.v3c-split .v3d-views { z-index: 2 }
.v3c-track { height: 30px }