:root{--bg:#080f1c;--panel:#0c1525;--line:#1f3245;--aqua:#5ffadd;--text:#e4f3fa;--muted:#8ba2b6;--soft:#142637;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}body{margin:0;overflow:hidden}#app{display:grid;grid-template-columns:minmax(300px,345px) 1fr;height:100dvh;min-height:540px}.sidebar{background:linear-gradient(145deg,#101f31,#0a1220 57%);border-right:1px solid #27364a;overflow-y:auto;padding:28px 26px 25px;scrollbar-width:thin;scrollbar-color:#25475b transparent;z-index:3}.eyebrow{font-size:10px;letter-spacing:.17em;color:#87a6b9;font-weight:700;display:flex;align-items:center;gap:9px}.dot{width:7px;height:7px;background:var(--aqua);border-radius:100%;box-shadow:0 0 13px var(--aqua)}.header{display:flex;gap:17px;align-items:center;padding:25px 0 24px}.symbol{font-family:Georgia,serif;font-size:67px;font-weight:400;color:#83dcef;line-height:1;text-shadow:0 0 30px #3be4df60}.header h1{font-weight:790;font-size:30px;letter-spacing:.13em;line-height:1.02;margin:0}.header h1 em{font-style:normal;color:#64e9e2}.header p{font-size:11px;color:#91acbb;letter-spacing:.12em;text-transform:uppercase;margin:9px 0 0}.status{border:1px solid var(--line);border-radius:4px;display:flex;justify-content:space-between;padding:12px;font-size:10px;color:#c3d2df;letter-spacing:.1em;font-weight:800}.status-live{color:var(--aqua)}.lead{font-size:12px;line-height:1.7;color:#9cb2c5;margin:20px 0 26px}.section-head{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #24384c;padding-top:20px;margin:21px 0 17px;font-size:10px;font-weight:800;letter-spacing:.12em;color:#d6eaf4}.section-head span{color:#64869b}.control{margin:0 0 19px}.control label,.field-row label{font-size:11px;color:#9aafc1;display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.control output{color:#b8fef3;font-variant-numeric:tabular-nums;font-size:11px}input[type=range]{appearance:none;width:100%;height:3px;background:linear-gradient(90deg,#26c8be,#384761);border:0;border-radius:99px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:100%;background:#d4fffa;border:3px solid #2b9f9a;box-shadow:0 0 10px #4fe3d660}.field-row{margin-bottom:15px}.field-row label{margin:0 0 7px}.field-row select{appearance:none;width:100%;background:#101d2d;color:#d9edf5;padding:11px 12px;border-radius:3px;border:1px solid #2c4356;font-size:10px;letter-spacing:.08em;cursor:pointer}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}button{border:1px solid #355066;padding:13px 8px;border-radius:3px;background:#142435;color:#b9d2dc;cursor:pointer;font-weight:750;letter-spacing:.07em;font-size:10px;transition:background .2s,border-color .2s}button:hover{background:#20384b;border-color:#61b4b7}button.primary{background:#54e6d2;border-color:#54e6d2;color:#0a2230}button.primary:hover{background:#a2fff0}.audio{width:100%;margin-top:10px;border-color:#38685f;color:#7cf5d8}.audio.active{color:#08272e;background:#66f1d6}.footer-note{font-size:10px;color:#708b9d;line-height:1.7;margin:21px 0 0}.footer-note code{color:#acded9}.viewport{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 40%,#17283f,#080f1c 62%)}#canvas-host{position:absolute;inset:0}#canvas-host canvas{width:100%;height:100%;display:block}.viewport-top{position:absolute;top:26px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:flex-start;z-index:2;pointer-events:none}.viewport-top small{display:block;color:#6e8ca6;letter-spacing:.15em;font-size:10px;margin-bottom:7px}.viewport-top strong{font-size:15px;letter-spacing:.12em;font-weight:680}.readout{display:flex;gap:17px;color:#8ba7b8;font-size:10px;letter-spacing:.08em}.viewport-label{position:absolute;z-index:1;pointer-events:none;border-left:2px solid #63efd3;padding-left:13px}.viewport-label span{font-size:9px;color:#718ea3;letter-spacing:.14em;display:block;margin-bottom:7px}.viewport-label b{font-size:11px;letter-spacing:.09em;font-weight:600}.top-left{top:128px;left:36px}.bottom-left{bottom:101px;left:36px}.viewport-help{position:absolute;bottom:55px;left:36px;color:#608099;font-size:10px;letter-spacing:.12em;pointer-events:none}.viewport-foot{display:flex;position:absolute;z-index:2;bottom:0;left:0;right:0;justify-content:space-between;padding:16px 36px;border-top:1px solid #1a3147;background:#091423aa;color:#7394a6;font-size:9px;letter-spacing:.14em;pointer-events:none}#error{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:20px;background:#50252b;color:white;z-index:10;max-width:700px;box-shadow:0 5px 35px #0008}@media(max-width:850px){body{overflow:auto}#app{grid-template-columns:1fr;height:auto;min-height:100dvh}.sidebar{order:2;overflow:visible;border-right:0}.viewport{order:1;height:55vh;min-height:360px}.viewport-top{left:20px;right:20px}.viewport-label{left:20px}.viewport-help{left:20px;font-size:8px}.viewport-foot{padding:13px 20px}}@media(prefers-reduced-motion:reduce){button{transition:none}}