:root {
  --bg: #090c10;
  --surface: #0e1319;
  --surface-2: #131a22;
  --line: #26313d;
  --line-bright: #405061;
  --text: #f3f6f8;
  --muted: #9aa8b7;
  --mint: #7fe8cb;
  --mint-deep: #153b35;
  --cyan: #70b7ff;
  --amber: #ffc56f;
  --red: #ff7979;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font-family: var(--sans); }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 72% 8%, rgba(69, 142, 168, .08), transparent 27rem), var(--bg); }
button, select, input { font: inherit; }
button { color: inherit; }
.topbar { height: 66px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(20px, 4vw, 64px); position: sticky; top: 0; z-index: 20; background: rgba(9,12,16,.88); backdrop-filter: blur(16px); }
.brand { color: var(--text); text-decoration: none; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 21px; height: 17px; display: block; border: 2px solid var(--mint); clip-path: polygon(0 25%, 42% 0, 42% 35%, 100% 0, 100% 80%, 42% 100%, 42% 66%, 0 100%); }
.connection { font: 12px var(--mono); color: var(--muted); display: flex; align-items: center; gap: 8px; }
.connection span, .status-badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px var(--mint); }
.connection.disconnected { color: var(--amber); }.connection.disconnected span { background: var(--amber); box-shadow: 0 0 12px rgba(255,197,111,.55); }
.outline-button { justify-self: end; background: transparent; border: 1px solid var(--line-bright); border-radius: 4px; padding: 9px 13px; cursor: pointer; }
main { max-width: 1560px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 64px) 90px; }
.workspace-header { display: flex; justify-content: space-between; gap: 40px; align-items: end; padding: 58px 0 36px; }
.eyebrow, .section-label { font: 500 12px var(--mono); letter-spacing: .12em; color: var(--mint); margin: 0 0 12px; }
h1 { font-size: clamp(2.3rem, 5.5vw, 5.2rem); line-height: .98; letter-spacing: -.055em; margin: 0; max-width: 820px; }
.lede { color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 700px; margin: 22px 0 0; }
.run-controls { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.run-button { background: var(--mint); color: #07110e; border: 0; border-radius: 4px; padding: 13px 17px; font-weight: 700; cursor: pointer; display: flex; gap: 9px; align-items: center; }
.run-icon { width: 9px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.run-button.paused .run-icon { width: 0; height: 0; border: 6px solid transparent; border-left: 10px solid currentColor; border-right: 0; }
.clock, .mono { font-family: var(--mono); }
.clock { color: var(--muted); font-size: 13px; }
.source-bar { border: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 16px; background: var(--surface); padding-right: 18px; }
.source-tabs { display: flex; overflow-x: auto; }
.source-tab { appearance: none; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); padding: 15px 18px; cursor: pointer; white-space: nowrap; font-size: 14px; }
.source-tab.active { color: var(--text); background: var(--surface-2); box-shadow: inset 0 -2px var(--mint); }
.primary-upload { color: var(--mint); }
.source-meta { display: flex; gap: 16px; font: 12px var(--mono); color: var(--muted); }
.source-meta span + span::before { content: "·"; margin-right: 16px; }
.worker-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; border: 1px solid #65502e; background: linear-gradient(90deg,rgba(255,197,111,.09),rgba(14,19,25,.94)); padding: 15px 18px; margin: -1px 0 16px; }
.worker-icon { width: 44px; height: 44px; border: 1px solid var(--amber); color: var(--amber); display: grid; place-items: center; font: 10px var(--mono); }
.worker-banner strong { font-size: 13px; }.worker-banner p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }.worker-banner > span { color: var(--amber); font: 10px var(--mono); white-space: nowrap; }
.primary-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(330px, .7fr); gap: 16px; }
.panel { border: 1px solid var(--line); background: rgba(14,19,25,.92); }
.panel-heading { min-height: 78px; display: flex; justify-content: space-between; align-items: center; padding: 19px 22px; border-bottom: 1px solid var(--line); gap: 20px; }
.panel-heading.compact { min-height: 73px; }
.panel-heading h2, .section-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.panel-heading .section-label { margin-bottom: 6px; }
.status-badge { color: var(--mint); font: 12px var(--mono); display: flex; gap: 8px; align-items: center; }.status-badge > span:last-child { width:auto;height:auto;border-radius:0;background:none;box-shadow:none; }
.video-frame { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #111820; }
.video-frame canvas, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-frame video { display: none; }
.frame-chip { position: absolute; z-index: 3; padding: 7px 9px; background: rgba(6,9,13,.7); border: 1px solid rgba(255,255,255,.15); font: 11px var(--mono); backdrop-filter: blur(5px); }
.top-left { top: 14px; left: 14px; }.top-right { top: 14px; right: 14px; }.bottom-left { bottom: 14px; left: 14px; }
.rec-dot { display: inline-block; width: 6px; height: 6px; background: var(--red); border-radius: 50%; margin-right: 5px; }
.event-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 18px; min-height: 57px; border-top: 1px solid var(--line); font-size: 13px; }
.event-strip > div { display: flex; align-items: center; gap: 13px; min-width: 0; }
.event-time { font: 11px var(--mono); color: var(--muted); }.event-type { font: 10px var(--mono); padding: 4px 6px; }.warning { color: #1a1103; background: var(--amber); }
.event-type.media { color: #06120f; background: var(--mint); }
.event-strip button, .text-button { border: 0; background: none; color: var(--mint); cursor: pointer; white-space: nowrap; }
.subtle { color: var(--muted); font-size: 11px; }
.hero-metric { padding: 24px 22px 12px; border-bottom: 1px solid var(--line); }
.hero-metric > span, .metric-grid span, .slo-block span { color: var(--muted); font-size: 12px; }
.hero-metric > div { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.hero-metric strong { font: 500 46px var(--mono); }.hero-metric em, .metric-grid em { font: normal 11px var(--mono); color: var(--muted); }
#sparkline { width: 100%; height: 66px; display: block; margin-top: 5px; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.metric-grid > div { padding: 18px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric-grid > div:nth-child(2n) { border-right: 0; }
.metric-grid strong { font: 500 22px var(--mono); display: block; margin: 5px 0 1px; }
.slo-block { padding: 20px 22px; }.slo-block > div:first-child { display: flex; justify-content: space-between; }.slo-block strong { color: var(--mint); font-size: 12px; }
.progress { height: 5px; background: #1b252f; margin-top: 14px; overflow: hidden; }.progress span { height: 100%; background: var(--mint); display: block; width: 42%; transition: width .25s ease, background .25s; }
.slo-block p { margin: 9px 0 0; color: var(--muted); font: 11px var(--mono); }
.pipeline-section, .comparison-section { padding: 70px 0 0; }
.bitstream-section { margin-top: 16px; }
.bitstream-grid { display: grid; grid-template-columns: .8fr 1.2fr 1.2fr; }
.codec-facts { display: grid; grid-template-columns: repeat(2,1fr); }
.codec-facts > div { padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.codec-facts span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 8px; }
.codec-facts strong { font: 13px var(--mono); }
.byte-view { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 20px; min-width: 0; }
.binary-view { border-right: 0; }
.byte-heading { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font: 9px var(--mono); margin-bottom: 13px; }
.byte-view code { color: var(--cyan); font: 12px/1.75 var(--mono); overflow-wrap: anywhere; }
.binary-view code { color: var(--mint); }
.decode-flow { display: flex; align-items: stretch; padding: 20px; overflow-x: auto; }
.decode-flow > div { min-width: 132px; flex: 1; }
.decode-flow span { color: var(--mint); font: 9px var(--mono); display: block; margin-bottom: 8px; }
.decode-flow strong { display: block; font-size: 13px; }
.decode-flow small { color: var(--muted); font-size: 10px; }
.decode-flow i { width: 40px; min-width: 40px; position: relative; }
.decode-flow i::before { content:""; position:absolute; left:7px; right:7px; top:23px; height:1px; background:var(--line-bright); }
.decode-flow i::after { content:""; position:absolute; right:6px; top:20px; width:6px; height:6px; border-top:1px solid var(--mint); border-right:1px solid var(--mint); transform:rotate(45deg); }
.inspector-note { border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; margin: 0; padding: 12px 20px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; gap: 30px; }.section-heading .section-label { margin-bottom: 7px; }.section-heading > p { margin: 0; color: var(--muted); font-size: 14px; }
.pipeline { display: grid; grid-template-columns: repeat(8, 1fr); border: 1px solid var(--line); overflow-x: auto; }
.pipeline-stage { min-width: 140px; min-height: 148px; border: 0; border-right: 1px solid var(--line); background: var(--surface); text-align: left; padding: 18px 16px; cursor: pointer; position: relative; }
.pipeline-stage:last-child { border-right: 0; }.pipeline-stage:hover, .pipeline-stage.active { background: var(--surface-2); }.pipeline-stage.active { box-shadow: inset 0 -3px var(--mint); }
.stage-number { font: 10px var(--mono); color: var(--muted); }.stage-device { position: absolute; top: 15px; right: 14px; font: 9px var(--mono); color: var(--cyan); border: 1px solid #31475c; padding: 3px 5px; }
.stage-node { width: 15px; height: 15px; border-radius: 50%; background: var(--mint-deep); border: 2px solid var(--mint); margin: 24px 0 14px; box-shadow: 0 0 0 5px rgba(127,232,203,.06); }.pipeline-stage.active .stage-node { background: var(--mint); box-shadow: 0 0 18px rgba(127,232,203,.5); }
.pipeline-stage h3 { font-size: 14px; margin: 0 0 8px; }.stage-ms { color: var(--muted); font: 11px var(--mono); }
.stage-detail { border: 1px solid var(--line); border-top: 0; background: linear-gradient(90deg, rgba(127,232,203,.08), transparent 40%), var(--surface); padding: 24px; display: grid; grid-template-columns: 1fr 1.6fr 1.4fr; gap: 30px; }
.stage-detail h3 { margin: 0 0 8px; }.stage-detail p { color: var(--muted); line-height: 1.6; margin: 0; font-size: 14px; }.detail-label { color: var(--mint); font: 10px var(--mono); margin-bottom: 8px; display: block; }
.lab-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; padding-top: 70px; }
.controls-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 24px; padding: 24px; }.controls-grid label { color: var(--muted); font-size: 13px; }.controls-grid select { width: 100%; color: var(--text); background: #0a0f14; border: 1px solid var(--line-bright); margin-top: 9px; padding: 11px 12px; border-radius: 3px; }
.range-row { display: flex; gap: 14px; align-items: center; margin-top: 14px; }.range-row input { width: 100%; accent-color: var(--mint); }.range-row output { color: var(--text); font: 12px var(--mono); min-width: 75px; text-align: right; }
.toggle-row { border-top: 1px solid var(--line); padding: 17px 24px; display: flex; gap: 28px; }.toggle-row label { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 13px; cursor: pointer; }.toggle-row input { accent-color: var(--mint); }
.score { width: 45px; height: 45px; border: 1px solid var(--mint); color: var(--mint); border-radius: 50%; display: grid; place-items: center; font: 12px var(--mono); }.explanation-panel > p { color: var(--muted); line-height: 1.7; padding: 23px 24px; margin: 0; border-bottom: 1px solid var(--line); }
.recommendation-list { padding: 5px 24px 22px; }.recommendation-item { display: grid; grid-template-columns: 23px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }.recommendation-item:last-child { border: 0; }.recommendation-item span { color: var(--mint); font: 12px var(--mono); }.recommendation-item strong { display: block; font-size: 13px; margin-bottom: 4px; }.recommendation-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.comparison-table { border: 1px solid var(--line); }.comparison-row { display: grid; grid-template-columns: 1.3fr repeat(2, 1fr) .8fr; min-height: 62px; border-bottom: 1px solid var(--line); }.comparison-row:last-child { border: 0; }.comparison-row > div { padding: 17px 20px; border-right: 1px solid var(--line); display: flex; align-items: center; }.comparison-row > div:last-child { border: 0; }.comparison-row.header { min-height: 45px; font: 10px var(--mono); color: var(--muted); letter-spacing: .08em; }.comparison-row strong { font-family: var(--mono); }.delta.good { color: var(--mint); }.delta.bad { color: var(--red); }
dialog { width: min(600px, calc(100% - 32px)); color: var(--text); background: var(--surface); border: 1px solid var(--line-bright); padding: 32px; box-shadow: 0 24px 80px #000; } dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(5px); } dialog h2 { margin: 0 0 20px; font-size: 28px; } dialog ol { padding-left: 22px; color: var(--muted); line-height: 1.6; } dialog li { margin: 12px 0; padding-left: 7px; } dialog strong { color: var(--text); }.dialog-close { float: right; border: 0; background: none; color: var(--muted); font-size: 28px; cursor: pointer; }.dialog-note { border-top: 1px solid var(--line); padding-top: 18px; color: var(--mint); font-size: 13px; line-height: 1.6; }
@media (max-width: 1100px) { .primary-grid, .lab-grid { grid-template-columns: 1fr; }.pipeline { grid-template-columns: repeat(4, 1fr); }.pipeline-stage:nth-child(4) { border-right: 0; }.stage-detail { grid-template-columns: 1fr 1fr; }.stage-detail > div:last-child { grid-column: 1 / -1; }.metrics-panel { display: grid; grid-template-columns: .8fr 1.2fr; }.metrics-panel .panel-heading, .metrics-panel .slo-block { grid-column: 1 / -1; }.hero-metric { border-right: 1px solid var(--line); }.workspace-header { align-items: start; }.source-meta { display: none; } }
@media (max-width: 1100px) { .bitstream-grid { grid-template-columns: 1fr 1fr; }.codec-facts { grid-column: 1 / -1; }.codec-facts > div:nth-child(4) { border-right: 0; } }
@media (max-width: 700px) { .topbar { grid-template-columns: 1fr auto; }.connection { display: none; }.workspace-header { padding-top: 35px; flex-direction: column; align-items: stretch; }.run-controls { justify-content: space-between; }.source-bar { padding: 0; }.primary-grid { display: block; }.metrics-panel { display: block; margin-top: 16px; }.hero-metric { border-right: 0; }.bitstream-grid { grid-template-columns: 1fr; }.codec-facts { grid-template-columns: 1fr 1fr; }.byte-view { border-right: 0; }.decode-flow { padding: 18px 16px; }.pipeline { grid-template-columns: repeat(8, 145px); }.stage-detail { grid-template-columns: 1fr; }.stage-detail > div:last-child { grid-column: auto; }.controls-grid { grid-template-columns: 1fr; }.section-heading { display: block; }.section-heading > p { margin-top: 10px; }.comparison-table { overflow-x: auto; }.comparison-row { min-width: 650px; }.event-strip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.event-time { display: none; } }
@media (max-width: 700px) { .worker-banner { grid-template-columns: auto 1fr; }.worker-banner > span { grid-column: 2; } }