:root {
  color-scheme: light dark;
  --bg: #f5f7f4;
  --surface: #ffffff;
  --ink: #20332c;
  --muted: #59665f;
  --cpu: #13775f;
  --gpu: #465ca4;
  --warning: #b44825;
  --line: #dce3dd;
  --track: #edf1ed;
  --control-line: #85928a;
  --focus: #465ca4;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.page { max-width: 1200px; margin: auto; padding: 0 40px; }
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }
button, summary, .switch-label { cursor: pointer; }
button:disabled, select:disabled { cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible + .switch-track { outline: 3px solid var(--focus); outline-offset: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
.topbar { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wordmark { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 24px; font-weight: 700; letter-spacing: -1px; }
.wordmark svg { width: 27px; height: 28px; fill: var(--cpu); stroke: var(--cpu); stroke-width: 2.5; }
.wordmark svg path { fill: none; }
.intro .connection { margin-top: 6px; color: var(--muted); font-size: 12px; }
body[data-connection=offline] .connection { color: var(--warning); }
body[data-connection=offline] .workspace, body[data-connection=offline] .metrics { opacity: .6; }
.intro { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px 0 30px; }
h1 { font-size: 34px; font-weight: 600; letter-spacing: -1.3px; line-height: 1.2; margin: 0 0 7px; }
.intro p { margin: 0; color: var(--muted); }
.intro .dataset { font-size: 13px; text-align: right; }
.intro-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.source-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--control-line); border-radius: 8px; background: var(--surface); font-size: 13px; font-weight: 600; text-decoration: none; }
.source-button:hover { background: var(--track); }
body[data-mode=recorded] #controls, body[data-mode=live] .recording { display: none; }
.recording { border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; background: var(--surface); }
.recording > p { color: var(--muted); font-size: 13px; margin: 10px 0 16px; }
.recording .recording-subtitle { margin: 2px 0 16px; font-size: 12px; }
.recording #recording-description { margin-bottom: 2px; }
.recording .recording-caption { margin-top: 0; font-size: 12px; }
.recording-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; color: var(--muted); font-size: 12px; }
.playback { display: flex; align-items: center; gap: 16px; }
.playback button, .chapters button { border: 1px solid var(--control-line); border-radius: 7px; background: var(--surface); min-height: 44px; padding: 8px 14px; }
.playback button { min-width: 130px; background: var(--ink); color: var(--surface); border-color: var(--ink); }
.playback input { flex: 1; min-width: 0; accent-color: var(--cpu); min-height: 44px; }
.playback output { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); white-space: nowrap; }
.chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chapters button { font-size: 12px; }
.chapters button[aria-pressed=true] { background: var(--track); border-color: var(--cpu); }
.chapters button:hover { background: var(--track); }
.recording .recording-stage { color: var(--ink); min-height: 1.5em; }
.recording .fine-print { font-size: 12px; margin-bottom: 0; }
.controls { display: grid; grid-template-columns: 1.6fr 1fr .85fr; gap: 36px; padding: 0; margin: 0; border: 0; min-width: 0; }
.control-group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.control-label { font-size: 12px; font-weight: 600; }
.segmented { display: flex; width: 100%; padding: 3px; border: 1px solid var(--control-line); border-radius: 9px; }
.segmented button { flex: 1; min-width: 0; min-height: 44px; padding: 8px; border: 0; border-radius: 6px; background: transparent; font-size: 13px; }
.segmented button span { color: var(--muted); font-size: 11px; margin-left: 4px; white-space: nowrap; }
.segmented button[aria-pressed=true] { background: var(--surface); box-shadow: 0 1px 4px #20332c18; font-weight: 600; }
.segmented button:hover:not(:disabled) { background: var(--track); }
.segmented button:active:not(:disabled) { box-shadow: inset 0 0 0 1px var(--control-line); }
select { min-height: 52px; width: 100%; padding: 8px 12px; background: var(--surface); border: 1px solid var(--control-line); border-radius: 9px; font-size: 13px; }
.switch-label { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; min-width: 100px; font-size: 13px; }
.switch-label input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; }
.switch-track { pointer-events: none; display: block; width: 36px; height: 22px; border-radius: 20px; background: var(--muted); flex-shrink: 0; }
.switch-track::after { content: ""; display: block; width: 16px; height: 16px; margin: 3px; border-radius: 50%; background: var(--surface); transition: transform .15s; }
input:checked + .switch-track { background: var(--warning); }
input:checked + .switch-track::after { transform: translateX(14px); }
input:disabled + .switch-track { opacity: .5; }
.control-feedback { margin: 12px 0 0; color: var(--warning); font-size: 13px; }
.control-feedback:empty { display: none; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding: 32px 0 28px; }
.metrics article { min-width: 0; }
.metrics p { color: var(--muted); font-size: 13px; margin: 0 0 7px; }
.metrics article > div { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.metrics strong { font-size: 32px; font-weight: 500; line-height: 1.2; letter-spacing: -.9px; font-variant-numeric: tabular-nums; }
.metric-unit, .metrics small { font-size: 12px; color: var(--muted); }
.metrics small { display: block; margin-top: 5px; }
.metrics .over-target { color: var(--warning); }
.workspace { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.runtime-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; padding: 28px 32px; }
h2 { font-size: 14px; font-weight: 600; margin: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.routing-panel .section-heading { display: block; }
.routing-panel .section-heading .muted { display: block; margin-top: 2px; }
.muted { font-size: 12px; color: var(--muted); font-weight: 400; }
.backend { margin-top: 20px; }
.backend-heading, .backend-heading > div { display: flex; align-items: center; gap: 9px; }
.backend-heading { justify-content: space-between; margin-bottom: 7px; }
.backend-heading strong { font-weight: 550; }
.backend-kind { font-size: 11px; color: var(--muted); }
.backend-share { font-variant-numeric: tabular-nums; }
.bar-track { height: 10px; background: var(--track); border-radius: 3px; overflow: hidden; }
.bar-fill { width: 0; height: 100%; background: var(--cpu); transition: width .35s ease; }
.gpu-backend .bar-fill { background: var(--gpu); }
.backend-foot { margin: 5px 0 0; color: var(--muted); font-size: 12px; text-align: right; }
.backend-foot b { font-weight: 500; color: var(--ink); }
.policy-panel { padding-left: 32px; border-left: 1px solid var(--line); min-width: 0; }
.policy-panel h3 { margin: 18px 0 7px; font-size: 27px; line-height: 1.2; font-weight: 550; letter-spacing: -.8px; }
.policy-panel > p { font-size: 13px; color: var(--muted); margin: 0; max-width: 32em; }
.policy-panel .controller-kind { font-size: 12px; margin-top: 18px; white-space: pre-line; }
.model-status { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.model-status > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.model-status p { font-size: 12px; color: var(--muted); margin: 5px 0 0; white-space: pre-line; }
.chart-panel { border-top: 1px solid var(--line); padding: 22px 32px 18px; }
.chart-heading { display: flex; align-items: baseline; gap: 12px; }
.legend, .legend span { display: flex; align-items: center; gap: 6px; }
.legend { gap: 16px; color: var(--muted); font-size: 12px; }
.legend i { width: 14px; border-top: 2px solid; }
.p95-key { color: var(--cpu); }
.p99-key { color: var(--gpu); border-top-style: dashed !important; }
.slo-key { color: var(--muted); border-top-style: dotted !important; }
.latency-chart { display: block; width: 100%; height: 165px; margin-top: 18px; overflow: visible; }
.latency-chart path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
#p95-line { stroke: var(--cpu); }
#p99-line { stroke: var(--gpu); stroke-dasharray: 6 3; }
#slo-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 5; }
.latency-chart line { stroke: var(--line); stroke-width: 1; }
.latency-chart text { font: 11px var(--mono); fill: var(--muted); }
#chart-empty { font-family: inherit; font-size: 13px; }
.chart-foot, .chart-foot > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; }
.chart-foot { justify-content: space-between; margin-top: 9px; font-size: 12px; color: var(--muted); }
.chart-foot b { font-weight: 500; color: var(--ink); }
.disclosure { border-bottom: 1px solid var(--line); }
.disclosure summary { display: flex; align-items: baseline; gap: 8px 20px; padding: 18px 2px; list-style: none; font-size: 13px; min-height: 56px; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: auto; align-self: center; flex-shrink: 0; }
.disclosure[open] > summary::after { transform: rotate(225deg); }
.disclosure summary:hover { color: var(--cpu); }
.disclosure-hint { color: var(--muted); font-size: 12px; }
.details-body { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; padding: 4px 2px 24px; }
.policy-history h2 .muted { display: block; margin-top: 2px; }
.policy-history ol { list-style: none; padding: 0; margin: 14px 0 0; }
.policy-history li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
.policy-history li:first-child { font-weight: 600; }
.policy-history time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.measurements { margin: 14px 0 0; font-size: 13px; }
.measurements > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.measurements dt { color: var(--muted); }
.measurements dd { margin: 0; font-variant-numeric: tabular-nums; }
.measurement-notes { grid-column: 1/-1; color: var(--muted); font-size: 12px; }
.measurement-notes p { margin: 0 0 5px; }
#runtime-note, #comparison-setup { white-space: pre-line; }
.comparison-body { min-width: 0; padding: 4px 2px 24px; }
#comparison-setup, .fine-print { color: var(--muted); font-size: 12px; margin: 0 0 16px; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; text-align: right; white-space: nowrap; font-size: 13px; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; font-weight: 500; color: var(--muted); }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
td:not(:first-child) { font-variant-numeric: tabular-nums; }
tr[data-mode=gpu_batch] { background: var(--track); }
.comparison-note { font-size: 13px; max-width: 80em; margin: 16px 0 10px; }
.fine-print { margin: 0; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0 26px; color: var(--muted); font-size: 12px; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer small { display: block; margin-top: 2px; font-size: inherit; }
@media (max-width: 850px) {
  .page { padding: 0 28px; }
  .controls { gap: 24px; grid-template-columns: 1.5fr 1fr .8fr; }
  .segmented button span { display: block; margin: 0; }
  .runtime-grid { gap: 24px; padding: 24px; grid-template-columns: 1.3fr 1fr; }
  .policy-panel { padding-left: 24px; }
  .chart-panel { padding: 22px 24px 18px; }
}
@media (max-width: 620px) {
  .page { padding: 0 20px; }
  .topbar { min-height: 72px; gap: 12px; }
  .wordmark { font-size: 22px; }
  .intro { padding: 16px 0 26px; display: block; }
  h1 { font-size: 30px; }
  .intro-actions { align-items: flex-start; margin-top: 18px; }
  .intro .dataset { text-align: left; font-size: 12px; }
  .recording { padding: 18px 16px; }
  .playback { flex-wrap: wrap; gap: 4px 12px; }
  .playback input { order: 3; flex-basis: 100%; }
  .playback output { margin-left: auto; }
  .controls { grid-template-columns: 1fr 1fr; gap: 18px 24px; }
  .traffic-group { grid-column: 1/-1; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 22px 20px; padding: 28px 0; }
  .metrics strong { font-size: 29px; }
  .runtime-grid { grid-template-columns: 1fr; gap: 26px; padding: 24px 20px; }
  .policy-panel { border-left: 0; border-top: 1px solid var(--line); padding: 22px 0 0; }
  .policy-panel h3 { margin-top: 12px; font-size: 25px; }
  .policy-panel .controller-kind { margin-top: 12px; }
  .chart-panel { padding: 22px 16px 18px; }
  .chart-panel > .section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .latency-chart { height: 160px; }
  .chart-foot { gap: 5px; }
  .chart-foot > div { gap: 5px 12px; }
  .disclosure summary { flex-wrap: wrap; column-gap: 8px; position: relative; padding-right: 20px; }
  .disclosure-hint { flex-basis: 100%; font-size: 11px; }
  .disclosure summary::after { position: absolute; right: 2px; top: 24px; }
  .details-body { grid-template-columns: 1fr; gap: 24px; }
  footer { font-size: 11px; }
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141c18; --surface: #1b2420; --ink: #edf3ee; --muted: #b1beb5;
    --cpu: #80d5b7; --gpu: #a5b7fb; --warning: #ffb196;
    --line: #35423a; --track: #2b3930; --control-line: #7e8f83; --focus: #a5b7fb;
  }
}
@media (prefers-contrast: more) {
  :root { --line: var(--muted); --control-line: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}