:root{color-scheme:dark;font-family:Manrope,system-ui,-apple-system,Segoe UI,sans-serif;background:#060e1a;color:#f5f8ff;--edge:#263247;--muted:#8698b3;--cyan:#65e5f4;--mono:'DM Mono',ui-monospace,Consolas,monospace}
*{box-sizing:border-box}html,body{margin:0;height:100%;min-height:100%;overflow:hidden}button,input,select{font:inherit}button,select{cursor:pointer}.shell{display:grid;grid-template-columns:375px minmax(0,1fr);height:100vh;min-height:610px}.sidebar{display:flex;flex-direction:column;gap:0;overflow:auto;position:relative;z-index:3;background:linear-gradient(155deg,#101b2b,#0a1321 67%);border-right:1px solid #354159;scrollbar-width:thin}.brand{display:flex;gap:14px;padding:25px 25px 22px;border-bottom:1px solid var(--edge);align-items:center}.brand-symbol{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border:1px solid #55b8c3;border-radius:6px;color:#94f0fc;font-size:25px;font-weight:800;background:#0d333e;box-shadow:inset 0 0 22px #0b596680}.brand-symbol span{font-size:23px}.eyebrow,.brand p,.hero-id,.section-title,.mini-row label,.slider-control label,.sidebar-footer,.viewport-top,.viewport-bottom,.helper,.switch,.sound,.pulse,.transport button{font-family:var(--mono);letter-spacing:.085em}.eyebrow{font-size:9px;color:#66bfc7}.brand h1{font-size:22px;letter-spacing:.02em;margin:4px 0 1px;font-weight:800}.dot{color:#62c9d8}.brand p{font-size:10px;color:#8598b6;margin:0}.hero{padding:29px 26px 21px;border-bottom:1px solid var(--edge);background:radial-gradient(circle at 100% 35%,#15425144,transparent 45%)}.hero-id{font-size:10px;color:#58c2d0}.hero h2{font-size:45px;letter-spacing:-.06em;line-height:.99;font-weight:800;margin:13px 0}.hero h2 em{color:#6aebf8;font-style:normal}.hero p{color:#a3b4ca;font-size:11.5px;line-height:1.7;margin:14px 0 0}.control-section{padding:18px 26px;border-bottom:1px solid var(--edge)}.section-title{font-size:10px;color:#8a9ab2;display:flex;justify-content:space-between;margin:0 0 14px}.section-title span:last-child{color:#4ab9b9}select{display:block;width:100%;border:1px solid #334056;background:#111e31;color:#e4f4ff;padding:12px 12px;border-radius:3px;outline:none;font-family:var(--mono);letter-spacing:.03em;font-size:11px}.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mini-row{margin-top:14px}.mini-row label{display:block;color:#91a4ba;font-size:9px}.mini-row select{margin-top:6px;padding:9px 8px}.slider-control{margin:15px 0 17px}.slider-control>div{display:flex;justify-content:space-between;margin-bottom:9px}.slider-control label{font-size:10px;color:#a6b9cc}.slider-control output{font:11px var(--mono);color:#86ecf3}input[type=range]{width:100%;height:4px;accent-color:#73d7e1;cursor:ew-resize}.switch-row{gap:11px 14px;margin-top:8px}.switch{font-size:9px;display:flex;align-items:center;gap:6px;color:#b0c0d2}.switch input{width:16px;height:16px;accent-color:#55cad8;cursor:pointer}.color-picker{font:9px var(--mono);color:#b0c0d2;display:flex;align-items:center;justify-content:space-between;gap:8px}.color-picker input{width:25px;height:24px;padding:0;border:none;background:transparent}.controls-bottom{margin-top:auto}.transport{display:flex;gap:6px}.transport button{flex:1;border:1px solid #35475c;background:#152239;color:#d9e9fb;font-size:11px;padding:11px 5px;border-radius:3px}.transport button.primary{border-color:#8be8ed;color:#09232c;background:#83e9ef;font-weight:700}.pulse,.sound{display:block;width:100%;margin-top:10px;padding:13px 14px;background:#152c39;color:#8be6f0;border:1px solid #3a8994;text-align:left;border-radius:3px;font-size:10px}.pulse span{float:right}.sound{color:#b4c2d3;background:#102031;border-color:#344259}.sidebar-footer{display:flex;justify-content:space-between;gap:8px;padding:15px 25px;font-size:9px;color:#6c86a1}.viewport-section{position:relative;background:radial-gradient(ellipse at 55% 55%,#11354a,#050b15 75%);min-width:0;overflow:hidden}.viewport{position:absolute;inset:0}.viewport canvas{display:block;width:100%;height:100%}.viewport-top{position:absolute;left:31px;right:31px;top:27px;display:flex;justify-content:space-between;font-size:10px;color:#b8edfa;pointer-events:none}.viewport-top .muted{color:#7190a2}.top-right{color:#729caf}.top-right span{color:#5ceacb}.live-dot{display:inline-block;border-radius:50%;width:8px;height:8px;background:#70eed7;box-shadow:0 0 10px #36dcbf;margin-right:10px}.viewport-bottom{position:absolute;left:31px;right:31px;bottom:51px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none;gap:20px}.data-readout{display:flex;gap:13px;align-items:center;color:#81a5ba;font-size:10px}.data-readout .marker{font-size:35px;color:#8be9f5}.data-readout strong{display:block;color:#e1f7ff;font-size:18px;letter-spacing:.04em;margin-top:5px}.hud-metrics{display:flex;gap:38px;color:#8caabb;font-size:9px;text-align:right}.hud-metrics strong{display:block;font-size:19px;color:#effbff;font-weight:400;margin-top:7px}.helper{position:absolute;bottom:23px;left:0;right:0;text-align:center;color:#536e81;font-size:9px;pointer-events:none}.helper span{color:#76e0e6;margin:0 8px}.error-panel{position:absolute;left:18px;right:18px;top:70px;background:#501c34e6;color:#ffe9ee;border:1px solid #de6a8d;padding:20px;font:13px var(--mono);z-index:5}.error-panel[hidden]{display:none}@media(max-width:850px){html,body{overflow:auto}.shell{display:flex;flex-direction:column;min-height:100vh;height:auto}.viewport-section{height:70vh;min-height:420px;order:0}.sidebar{order:1;overflow:visible}.hero{display:none}.brand{padding:18px 20px}.control-section{padding:17px 20px}.viewport-top{left:18px;right:18px;top:18px}.viewport-top .muted{display:none}.viewport-bottom{left:18px;right:18px;bottom:55px}.hud-metrics{gap:13px}.hud-metrics strong{font-size:16px}.helper{font-size:7px}.sidebar-footer{padding:17px 20px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}