:root {
  color-scheme: dark;
  --bg:#0c1016; --panel:#151b24; --panel2:#1d2531; --soft:#273140;
  --text:#eef4fb; --muted:#9facbd; --line:#344154; --blue:#58b7ff;
  --amber:#ffb454; --green:#62d38d; --red:#ff7373; --shadow:#05080d;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(circle at 72% -20%,#142842 0,transparent 40%),var(--bg); color:var(--text); font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif; }
button,input,select { font:inherit; }
button,select,input[type="search"] { padding:8px 10px; color:var(--text); background:var(--soft); border:1px solid #465873; border-radius:7px; }
button { cursor:pointer; }
button:hover,button:focus-visible,select:focus-visible,input:focus-visible { border-color:#7dd3fc; outline:none; }
button:disabled { opacity:.45; cursor:not-allowed; }
.hero,.control-shell,.method-note,.legend,main,footer { max-width:1800px; margin-inline:auto; }
.hero { padding:38px 24px 18px; }
.eyebrow { margin:0; color:#8fc5ff; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
h1 { max-width:1400px; margin:.15em 0; font-size:clamp(2.2rem,5vw,4.8rem); line-height:.96; letter-spacing:-.04em; }
.dek { max-width:1050px; color:#c4cfdd; font-size:1.1rem; }
.summary { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.stat { min-width:140px; padding:11px 14px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(145deg,var(--panel2),var(--panel)); box-shadow:0 8px 25px #05080d44; }
.stat strong { display:block; font-size:1.5rem; font-variant-numeric:tabular-nums; }
.stat span { color:var(--muted); font-size:1rem; }
.control-shell { position:relative; z-index:20; padding:12px 24px; border-block:1px solid var(--line); background:#0c1016f5; box-shadow:0 8px 24px var(--shadow); backdrop-filter:blur(12px); }
.baseline-section { margin-bottom:14px; padding:16px; border:1px solid #40516a; border-radius:14px; background:linear-gradient(145deg,#152131,#101720 70%); box-shadow:0 14px 40px #03070d66; }
.baseline-intro { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:13px; }
.baseline-intro p { max-width:900px; margin:3px 0 0; color:#aebdce; }
.control-step { color:#7fc8ff !important; font-weight:900; letter-spacing:.075em; text-transform:uppercase; }
.baseline-intro h2 { margin:1px 0; font-size:clamp(1.45rem,2.4vw,2.15rem); line-height:1.08; letter-spacing:-.025em; }
.baseline-menu { flex:0 0 auto; color:var(--muted); font-size:.9rem; }
.baseline-menu select { display:block; min-width:265px; margin-top:4px; }
.baseline-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
.baseline-card { position:relative; display:flex; flex-direction:column; width:100%; min-width:0; min-height:176px; padding:15px; overflow:hidden; text-align:left; border:1px solid #44546a; border-radius:11px; color:var(--text); background:linear-gradient(150deg,#222d3b,#151c26); box-shadow:0 8px 22px #05080d55; transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease; }
.baseline-card::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--case); opacity:.75; }
.baseline-card:hover { transform:translateY(-2px); border-color:var(--case); box-shadow:0 13px 28px #03070d99; }
.baseline-card:focus-visible { outline:3px solid #c7e9ff; outline-offset:2px; border-color:var(--case); }
.baseline-card.selected { border-color:var(--case); background:linear-gradient(145deg,color-mix(in srgb,var(--case) 24%,#19232f),#15221d 72%); box-shadow:0 0 0 2px color-mix(in srgb,var(--case) 55%,transparent),0 15px 34px #03070dbb; transform:translateY(-2px); }
.baseline-card-kicker { color:#91a4ba; font-size:.76rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.baseline-card-heading { display:flex; justify-content:space-between; align-items:start; gap:8px; margin:7px 0 9px; }
.baseline-card-hardware { min-width:0; font-size:clamp(1.18rem,1.7vw,1.6rem); font-weight:900; line-height:1.05; letter-spacing:-.025em; overflow-wrap:anywhere; }
.baseline-card-arch { flex:0 0 auto; padding:3px 7px; border-radius:999px; color:#e5f3ff; background:#183a54; font:900 .78rem ui-monospace,SFMono-Regular,monospace; }
.baseline-coordinates { display:flex; flex-wrap:wrap; gap:5px; }
.baseline-coordinate { padding:3px 6px; border:1px solid #405068; border-radius:5px; color:#cbd8e7; background:#202b39; font-size:.78rem; font-weight:750; }
.baseline-card-foot { display:flex; justify-content:space-between; align-items:end; gap:8px; margin-top:auto; padding-top:12px; }
.baseline-runtime { color:#91a2b7; font-size:.76rem; }
.baseline-future { display:block; color:#b7c5d5; }
.baseline-card-action { flex:0 0 auto; color:#9ed9ff; font-size:.8rem; font-weight:900; text-align:right; }
.baseline-card.selected .baseline-card-action { color:#a9efc0; }
.range-control { display:none !important; }
.primary-controls,.action-controls,.scenario-tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.primary-controls label,.action-controls label,.scenario-tools label { color:var(--muted); font-size:1rem; }
.primary-controls select { max-width:360px; }
.action-controls { margin-top:10px; }
#play { margin-left:0; color:#dff4ff; border-color:#3185b8; background:#10324b; font-weight:800; }
.status { min-width:260px; padding:6px 9px; border-left:3px solid var(--blue); color:#cfeeff; background:#10202d; font:700 1rem ui-monospace,SFMono-Regular,monospace; }
.playback-stage { display:none; }
.playback-stage-head { display:flex; justify-content:space-between; gap:12px; color:#c8d7e8; font-size:.75rem; }
.playback-stage-head strong { color:#8fd3ff; letter-spacing:.05em; text-transform:uppercase; }
.playback-tokens { display:flex; flex-wrap:wrap; align-content:start; gap:3px; min-height:34px; max-height:92px; margin-top:7px; padding:7px; overflow:auto; border-radius:6px; background:#080d13; }
.playback-token { padding:2px 4px; border-radius:4px; background:#e5e7eb; color:#111827; font:800 .82rem ui-monospace,SFMono-Regular,monospace; animation:token-in .12s ease-out; }
.playback-token:last-child { outline:2px solid var(--blue); outline-offset:1px; }
.playback-empty { color:var(--muted); font-size:.78rem; }
@keyframes token-in { from { opacity:.15; transform:translateY(3px); } to { opacity:1; transform:none; } }
.scenario-drawer { margin-top:10px; border:1px solid var(--line); border-radius:9px; background:#111821; }
.scenario-drawer summary { padding:9px 12px; cursor:pointer; color:#dce9f7; font-weight:800; }
.comparison-context { margin:0; padding:9px 12px; border-top:1px solid var(--line); color:#c4d1df; background:#14202b; }
.scenario-tools { padding:9px 12px; border-top:1px solid var(--line); }
.scenario-picker { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:9px; max-height:430px; padding:0 12px 12px; overflow:auto; }
.scenario-choice { position:relative; display:grid; grid-template-columns:auto 1fr; gap:5px 9px; padding:11px; border:1px solid var(--line); border-radius:8px; background:var(--panel); cursor:pointer; }
.scenario-choice:hover { border-color:#526885; }
.scenario-choice.selected { border-color:var(--case); box-shadow:inset 3px 0 var(--case); }
.scenario-choice.baseline { background:#143022; border-color:#3f8b5d; }
.scenario-choice.hidden { display:none; }
.scenario-choice input { margin-top:4px; }
.scenario-title { font-weight:800; font-size:1rem; }
.scenario-meta { grid-column:2; display:flex; flex-wrap:wrap; gap:4px; }
.chip { padding:2px 6px; border-radius:4px; background:#293545; color:#b9c8d9; font-size:.875rem; }
.chip.hardware { color:#d9edff; background:#163651; }
.chip.weights { color:#ffe3b9; background:#49321c; }
.chip.kv { color:#e7d8ff; background:#392854; }
.chip.axis { color:#bcebd0; background:#17432d; }
.chip.p0 { color:#b8e4ff; background:#16425e; font-weight:800; }
.chip.p1 { color:#ffe1ad; background:#51381d; font-weight:800; }
.chip.base { color:#bdf2cf; background:#205638; font-weight:800; }
.scenario-coverage,.scenario-rationale { grid-column:2; }
.scenario-coverage { color:#aebdce; font:700 .875rem ui-monospace,SFMono-Regular,monospace; }
.scenario-coverage.captured { color:#9fe8b9; }
.scenario-coverage.uncaptured { color:#ffc77f; }
.scenario-rationale { color:#9facbd; font-size:.9375rem; }
.check { white-space:nowrap; }
.method-note { padding:14px 24px; color:#bfccdb; }
.method-note strong { color:#fff; }
.method-note .range-route { margin-top:9px; }
.legend { display:flex; flex-wrap:wrap; gap:9px 16px; padding:0 24px 15px; color:var(--muted); }
.legend-item { display:flex; gap:7px; align-items:center; }
.dot { width:10px; height:10px; border-radius:50%; }
main { padding:0 24px 60px; }
.head-row,.token-row { display:grid; grid-template-columns:95px minmax(150px,.5fr) minmax(620px,2.7fr); gap:12px; }
.head-row { position:sticky; top:0; z-index:12; padding:8px 12px; border:1px solid var(--line); background:#111821f7; color:var(--muted); font-size:1rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.token-row { padding:9px 12px; border:1px solid var(--line); border-top:0; background:var(--panel); scroll-margin-top:300px; transition:.15s ease; }
.token-row.flip { box-shadow:inset 4px 0 var(--amber); }
.token-row.scatter { background:#291e20; box-shadow:inset 4px 0 #f97316; }
.token-row.playback-current { position:relative; z-index:2; outline:2px solid var(--blue); outline-offset:-2px; background:linear-gradient(90deg,#08253a,#14334b 24%,#202936); }
.position { color:var(--muted); font-variant-numeric:tabular-nums; }
.recorded { display:flex; flex-wrap:wrap; gap:6px; align-items:start; }
.token { max-width:100%; padding:4px 7px; border:1px solid #8592a3; border-radius:6px; background:#e5e7eb; color:#111827; font:800 1rem ui-monospace,SFMono-Regular,monospace; overflow-wrap:anywhere; }
.token.recorded-miss { outline:2px solid var(--amber); outline-offset:1px; }
.token-meta { color:var(--muted); font-size:.875rem; }
.predictions { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:8px; align-items:start; }
.prediction { min-width:0; padding:8px; border:1px solid var(--line); border-top:3px solid var(--case); border-radius:8px; background:#202936; }
.prediction.diverged { border-color:#875d2e; border-top-color:var(--amber); background:#3b2c20; }
.prediction.baseline { background:#173124; border-color:#397c54; border-top-color:var(--case); }
.case-name { color:#cbd7e5; font-size:.875rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pred-token { display:block; width:fit-content; max-width:100%; margin:5px 0; padding:2px 4px; border-radius:4px; font:800 1rem ui-monospace,SFMono-Regular,monospace; overflow-wrap:anywhere; }
.token-row.playback-current .pred-token { outline:2px solid var(--case); outline-offset:1px; box-shadow:0 0 12px color-mix(in srgb,var(--case) 45%,transparent); }
.badges { display:flex; flex-wrap:wrap; gap:3px; }
.badge { padding:2px 4px; border-radius:4px; background:#303c4b; color:#c1ccda; font-size:.875rem; }
.badge.bad { color:#ffd08a; background:#4a3420; }
.scatter-note { grid-column:1/-1; color:#ffc582; font:800 .68rem ui-monospace,SFMono-Regular,monospace; }
.fork-panel { grid-column:2/-1; min-width:0; margin-top:4px; border:1px solid #815925; border-radius:9px; background:#121820; overflow:hidden; }
.fork-panel[open] { box-shadow:inset 4px 0 var(--amber); }
.fork-panel.playing { outline:2px solid var(--blue); outline-offset:2px; }
.fork-panel.playing.focused {
  position:sticky;
  top:12px;
  z-index:40;
  max-height:calc(100vh - 24px);
  overflow:auto;
  box-shadow:0 18px 60px #03070dcc,inset 4px 0 var(--amber);
}
.fork-panel.playing.focused .future-flow {
  height:min(150px,22vh);
  max-height:none;
}
.fork-panel.returning { outline:2px solid var(--green); outline-offset:2px; }
.fork-summary { padding:8px 10px; color:#ffd093; background:#2d2319; cursor:pointer; font:800 1rem ui-monospace,SFMono-Regular,monospace; letter-spacing:.025em; }
.fork-body { padding:9px; }
.fork-explanation { margin:7px 0 9px; color:var(--muted); font-size:1rem; }
.recorded-route { display:flex; flex-wrap:wrap; gap:5px 12px; padding:7px 9px; border:1px solid var(--line); border-radius:6px; color:#bac6d5; background:#17202a; font-size:1rem; }
.recorded-route strong { color:#d8e4f1; }
.recorded-route.runtime-failed { border-color:#b94848; color:#ffd1d1; background:#351b20; }
.recorded-route.runtime-failed strong { color:#ff8989; }
.recorded-route.runtime-observed { border-color:#376e50; background:#15271e; }
.recorded-recovery { color:#a8d5ff; }
.future-lanes { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:8px; align-items:start; }
.future-lane { min-width:0; padding:8px; border:1px solid var(--line); border-top:3px solid var(--case); border-radius:7px; background:#1b2430; }
.future-lane.unavailable { opacity:.72; border-top-color:#667386; }
.future-case { margin:0 0 6px; color:#d7e2ee; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.future-unavailable { min-height:42px; margin:8px 0; color:#9daabb; font-size:1rem; }
.future-badges { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
.future-grade,.future-runtime,.future-route { padding:2px 5px; border-radius:4px; background:#303c4b; color:#c7d3e1; font-size:.875rem; }
.future-grade.complete { color:#a8f0c1; background:#1b4930; }
.future-grade.failed { color:#ffb0b0; background:#63272d; font-weight:900; }
.future-grade.incomplete { color:#ffd291; background:#54391e; }
.future-runtime { color:#d9c6ff; background:#3c2d54; }
.future-route { color:#b9dfff; background:#183a50; }
.future-flow { display:flex; flex-wrap:wrap; align-content:start; gap:2px; min-height:42px; max-height:150px; padding:5px; overflow:auto; border-radius:5px; background:#090e14; }
.future-token { display:none; padding:1px 3px; border-radius:3px; color:#111827; background:#e5e7eb; font:800 .875rem ui-monospace,SFMono-Regular,monospace; overflow-wrap:anywhere; animation:token-in .1s ease-out; }
.future-token.revealed { display:inline; }
.future-token.root { outline:2px solid var(--case); outline-offset:1px; }
.future-token.future-head { outline:2px solid var(--blue); outline-offset:1px; transform:scale(1.08); }
.future-token.future-converged { background:#b9f6cf; outline-color:var(--green); }
.future-token.future-diverged { background:#ffd0aa; outline-color:var(--amber); }
.root-warning { margin:5px 0; color:#ffd08a; font-size:.66rem; }
.generated-calls { margin-top:7px; color:#c9d5e2; font-size:.68rem; }
.tool-call { margin-top:4px; border:1px solid #4a5b70; border-radius:5px; background:#111821; }
.tool-call summary { padding:5px 7px; cursor:pointer; color:#a8d8ff; font:700 .66rem ui-monospace,SFMono-Regular,monospace; overflow-wrap:anywhere; }
.tool-arguments { display:grid; grid-template-columns:minmax(55px,auto) 1fr; gap:3px 7px; max-height:180px; margin:0; padding:7px; overflow:auto; border-top:1px solid #354356; font:10px/1.35 ui-monospace,SFMono-Regular,monospace; }
.tool-arguments dt { color:#8fb3d1; }
.tool-arguments dd { min-width:0; margin:0; color:#d8e2ed; white-space:pre-wrap; overflow-wrap:anywhere; }
.preexecution-failure { margin-top:7px; padding:6px; border:1px solid #a74545; border-radius:5px; color:#ffc1c1; background:#431e23; font-size:.68rem; font-weight:800; }
.future-return { display:none; margin-top:7px; color:#9fe2b6; font:800 .65rem ui-monospace,SFMono-Regular,monospace; }
.fork-panel.returning .future-return { display:block; }
.gap-row { display:grid; grid-template-columns:95px minmax(0,1fr); gap:12px; padding:8px 12px; border:1px solid var(--line); border-top:0; background:#10151d; }
.gap-flow { display:flex; flex-wrap:wrap; gap:2px; }
.gap-token { padding:1px 3px; border-radius:3px; color:#aeb9c7; font:12px ui-monospace,SFMono-Regular,monospace; }
.gap-token.playback-current { outline:3px solid var(--blue); outline-offset:1px; background:#e5e7eb; color:#111827; transform:scale(1.1); }
.output-divider { display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-top:16px; padding:10px 12px; border:1px solid #40516a; border-left:4px solid var(--blue); border-radius:8px 8px 0 0; color:#d8e8f8; background:linear-gradient(90deg,#17334a,#151d27); }
.output-divider:first-child { margin-top:0; }
.output-divider strong { font-size:1rem; }
.output-divider span { color:#9fb0c3; font-size:.875rem; text-align:right; }
.empty { padding:30px; color:var(--muted); }
footer { padding:20px 24px 55px; border-top:1px solid var(--line); color:var(--muted); }
#privacy-note { display:block; margin-top:8px; color:#ffcb83; font-weight:800; }
@media(max-width:1100px) {
  .control-shell { position:relative; }
  .head-row { top:0; }
  .head-row,.token-row { grid-template-columns:75px 130px 1fr; }
  .predictions { grid-template-columns:repeat(2,minmax(145px,1fr)); }
}
@media(max-width:900px) {
  .baseline-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .baseline-intro { align-items:start; }
}
@media(max-width:720px) {
  .baseline-intro { display:block; }
  .baseline-menu { display:block; margin-top:12px; }
  .baseline-menu select { width:100%; min-width:0; }
  .baseline-cards { grid-template-columns:1fr; }
  .baseline-card { min-height:150px; }
  .output-divider { display:block; }
  .output-divider span { display:block; margin-top:3px; text-align:left; }
  .head-row { display:none; }
  .token-row { grid-template-columns:1fr; }
  .fork-panel { grid-column:1; }
  .gap-row { grid-template-columns:1fr; }
  .predictions { grid-template-columns:1fr; }
  .status { min-width:0; width:100%; }
}