:root{color-scheme:dark;--bg:#060a11;--card:#0d1520;--border:#263240;--faint:#64788a;--ink:#e7f6f8;--accent:#60eced;--muted:#a0b0c0;font-family:'Inter',system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse 80% 70% at 25% 35%,#112434 0%,#08111c 38%,#06090e 100%);color:var(--ink);min-height:100vh}
.shell{max-width:1536px;margin:auto;padding:22px 30px}.masthead{display:flex;align-items:center;gap:19px;min-height:83px;border-bottom:1px solid var(--border);padding-bottom:18px}
.brandMark{width:54px;height:54px;border:1px solid #4a777e;box-shadow:inset 0 0 18px #15373c;color:#e1ffff;display:grid;place-items:center;font-size:23px;font-weight:800;letter-spacing:-.09em}.brandMark span{font-size:15px;align-self:start;position:absolute;transform:translate(14px,11px);color:var(--accent)}
.eyebrow,.liveBadge,.panelHead,.control label,.control output,.hudCap,.hudDigit,.hudBig,.viewportTop,.viewBottom,.panelFoot,.footCard>div,.metrics,footer,.rowControl label,.rowControl small,.toggle,button,select{font-family:'DM Mono',monospace}
.eyebrow{font-size:10px;letter-spacing:.22em;color:var(--accent);margin-bottom:7px}.sep{color:#5d7d83;margin:0 7px}h1{font-size:19px;letter-spacing:.035em;margin:0;font-weight:600}h1 span{color:#647584}.liveBadge{margin-left:auto;font-size:10px;color:#a4beca;letter-spacing:.065em;white-space:nowrap}.liveDot,.statusPip{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6ce8cb;box-shadow:0 0 10px #39f6d1;margin-right:10px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:18px;padding-top:21px}.viewColumn{min-width:0}.viewport{position:relative;height:610px;border:1px solid #284554;background:#060d17;overflow:hidden}.viewport:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 130px 20px #070b1270}.viewportTop,.viewBottom{position:absolute;z-index:4;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.11em;color:#84a2b7;pointer-events:none}.viewportTop{top:20px}.viewBottom{bottom:19px}.viewBottom>div:first-child{color:#bcd8e4}.dotSep{padding:0 8px}#canvasWrap,canvas{width:100%;height:100%;display:block}.hudLeft{pointer-events:none;position:absolute;z-index:3;left:24px;top:74px}.hudCap{font-size:10px;color:#7293a5;letter-spacing:.18em}.hudBig{font-size:33px;margin:9px 0 25px;color:#d5fff9;letter-spacing:-.05em}.hudDigit{font-size:15px;color:#a4ebeb;margin-top:9px;letter-spacing:.04em}
.transport{border:1px solid var(--border);border-top:none;display:flex;align-items:center;gap:8px;padding:13px 15px;flex-wrap:wrap;background:#09131d}button{background:#121e2a;border:1px solid #334653;color:#d1e2ea;padding:11px 13px;font-size:10px;font-weight:500;cursor:pointer;letter-spacing:.045em;min-height:38px;transition:.15s ease}button:hover{border-color:#6de3e5;background:#1b313d}button.primary{background:#c2f5f1;color:#0b202b;border-color:#c2f5f1;font-weight:700}button.primary:hover{background:white}.split{width:1px;height:26px;background:#42505b;margin:0 2px}.audio{margin-left:auto;border-color:#4c6675}button.audio[aria-pressed=true]{color:#80f4d5;border-color:#3e8a80}
.footCard{margin-top:14px;background:#0c1721;border:1px solid #24323e;padding:19px 21px}.footCard>div:first-child{color:#7bdde0;letter-spacing:.17em;font-size:11px}.footCard p{font-size:12px;line-height:1.7;color:#9db2c0;max-width:730px}.metrics{display:flex;flex-wrap:wrap;gap:19px;color:#88a5b3;font-size:10px;letter-spacing:.06em;margin-top:14px}
.side{background:#0a141f;border:1px solid #283846;min-height:610px;padding:22px 20px}.panelHead{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#e5f9fa;letter-spacing:.09em;border-bottom:1px solid #263643;padding-bottom:21px;margin-bottom:23px}.panelHead span:last-child{color:#6a8795}.control{margin-bottom:25px}.controlHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.control label,.rowControl label,.toggle{font-size:10px;color:#9bb1c0;letter-spacing:.07em}.control output{font-size:11px;color:#a5f0ec}select{background:#142430;color:#d2e6eb;border:1px solid #2d4855;padding:12px;width:100%;outline:none;font-size:10px}input[type=range]{width:100%;accent-color:#69e7de;cursor:pointer;height:5px}input[type=color]{border:none;width:43px;height:34px;padding:0;background:transparent;cursor:pointer}.colorLine{display:flex;gap:8px;align-items:center}.colorStrip{height:7px;flex:1;border-radius:10px;background:linear-gradient(to right,#4de4ef,#93fbce,#f9ac5e,#ff7296,#a489ff)}.rowControl{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #22313e;padding:17px 0;gap:5px}.rowControl select{width:137px}.rowControl small{display:block;font-size:9px;color:#627d8f;margin-top:7px}.toggle{display:flex;align-items:center;justify-content:space-between;min-height:50px;border-top:1px solid #22313e;cursor:pointer;gap:10px}.toggle input{position:absolute;opacity:0}.switch{position:relative;width:32px;height:18px;border:1px solid #405665;background:#18222b;border-radius:12px;flex:none}.switch:after{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:#607485;transition:.2s}.toggle input:checked+.switch{background:#245f60;border-color:#5bc4c6}.toggle input:checked+.switch:after{left:17px;background:#97fff2}.panelFoot{font-size:9px;letter-spacing:.07em;line-height:1.8;color:#577486;border-top:1px solid #22313e;margin-top:20px;padding-top:19px}.panelFoot strong{display:block;color:#7bd3d5}footer{padding:19px 0;display:flex;justify-content:space-between;color:#526a7c;font-size:9px;letter-spacing:.09em}
@media(max-width:950px){.layout{grid-template-columns:1fr}.side{min-height:0}.viewport{height:540px}.liveBadge{display:none}}
@media(max-width:560px){.shell{padding:15px}.brandMark{display:none}.masthead h1{font-size:15px}.viewport{height:480px}.hudLeft{top:62px;left:16px}.hudBig{font-size:24px}.hudDigit{font-size:12px}.viewportTop,.viewBottom{left:12px;right:12px;font-size:8px}.viewportTop span:first-child{display:none}.transport{gap:5px;padding:9px}.transport button{font-size:9px;padding:9px}.audio{margin-left:0}.split{display:none}footer span{display:none}}