:root { color-scheme:dark; font-family:'DM Sans',Arial,sans-serif; background:#08121c; color:#eaf5fb; font-synthesis:none; }
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #4fd5ff;outline-offset:3px}
#viewport{position:absolute;inset:0;touch-action:none}#viewport canvas{display:block;width:100%;height:100%}.vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at 68% 48%,transparent 32%,rgba(5,15,25,.18) 85%),linear-gradient(90deg,rgba(4,15,25,.26),transparent 48%)}
.topbar{position:absolute;top:0;left:0;right:0;height:92px;display:flex;justify-content:space-between;align-items:center;padding:0 42px;pointer-events:none;border-bottom:1px solid rgba(160,210,235,.11);background:linear-gradient(#07121bdc,#07121b00);z-index:5}.topbar>*{pointer-events:auto}.brand{display:flex;gap:14px;align-items:center}.mark{width:43px;height:43px;border:1px solid rgba(106,204,242,.7);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:25px;font-family:'Space Grotesk',sans-serif;font-weight:700;color:#cceffd;position:relative}.mark span{position:absolute;font-size:11px;color:#39d4ff;transform:translate(11px,-8px)}.brand-overline{display:block;letter-spacing:.2em;color:#75a3bb;font-size:9px;font-weight:700;margin-bottom:4px}.brand strong{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:.045em}.brand em{color:#50d1ff;font-style:normal;font-weight:500}.topstats{display:flex;align-items:center;gap:22px;font-size:10px;letter-spacing:.12em;color:#8eabb9;font-weight:700}.live-dot{width:7px;height:7px;background:#72e9bb;box-shadow:0 0 12px #60ffa4;display:inline-block;border-radius:50%;margin-right:5px}.mono{font-variant-numeric:tabular-nums;font-family:'Space Grotesk',monospace}.icon-button{border:1px solid rgba(168,205,225,.25);background:#112837b8;border-radius:8px;color:#dff2fa;width:33px;height:33px;font-size:19px}.icon-button:hover{background:#21435c}
.console{position:absolute;z-index:4;left:24px;top:112px;bottom:65px;width:330px;max-height:calc(100vh - 176px);overflow-y:auto;scrollbar-color:#2e5664 transparent;scrollbar-width:thin;background:#091824ed;border:1px solid #30516a9a;box-shadow:0 16px 55px #020911b5,inset 0 1px #6dd4f01a;border-radius:13px;padding:23px 22px}.eyebrow,.section-title,.telemetry-heading{font-size:9px;letter-spacing:.175em;font-weight:700;color:#57bddc}.console-head h1{font-family:'Space Grotesk',Arial,sans-serif;font-weight:600;letter-spacing:-.045em;font-size:29px;line-height:1.11;margin:12px 0 9px}.console-head p{color:#88a8b7;font-size:11px;line-height:1.65;margin:0 0 20px}.readouts{border:1px solid #294459;border-radius:8px;display:grid;grid-template-columns:1fr 1fr 1.12fr;margin-bottom:23px;background:#1528369a}.readouts>div{padding:12px 8px;border-right:1px solid #294459}.readouts>div:last-child{border-right:0}.readouts small,.telemetry-grid small{display:block;font-size:8px;color:#789ba8;letter-spacing:.08em}.readouts strong{font-family:'Space Grotesk',sans-serif;display:block;margin-top:7px;font-size:18px;color:#f1fbff}.readouts sub{font-size:9px;color:#62bedb;vertical-align:baseline}.control-section{border-top:1px solid #284251;padding:18px 0 21px}.section-title{display:flex;justify-content:space-between;color:#8ac3d5;margin-bottom:21px}.status,.running{color:#71d8ba;font-size:9px;letter-spacing:.05em}.running{color:#dfc581}.control-section label{display:flex;justify-content:space-between;align-items:center;color:#b3ccd9;font-size:11px;margin:12px 0 8px}.control-section output{color:#f1faff;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}input[type=range]{width:100%;appearance:none;-webkit-appearance:none;height:4px;border-radius:10px;background:linear-gradient(90deg,#3287b1,#53d9f6);cursor:pointer;display:block;margin:0 0 6px}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#e6f9ff;border:2px solid #397e9d;box-shadow:0 0 0 3px #46c5fa28}input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#e6f9ff;border:2px solid #397e9d}.slider-captions{display:flex;justify-content:space-between;font-size:8px;font-weight:700;letter-spacing:.08em;color:#647f90;margin-top:10px}.preset-row{display:flex;gap:6px;margin-top:13px}.preset{flex:1;background:#152735;border:1px solid #2e4552;border-radius:5px;color:#90acba;font-size:10px;padding:8px 4px}.preset.active,.preset:hover{color:#b9efff;background:#194059;border-color:#3587a4}.wide-button{width:100%;margin-top:18px;background:#143349;border:1px solid #32627c;border-radius:6px;display:flex;align-items:center;gap:9px;color:#b8deed;padding:11px;font-size:10px;font-weight:700;text-align:left}.wide-button span:last-child{margin-left:auto;font-size:15px}.wide-button.enabled{background:#175567;border-color:#45c6df}.button-indicator{display:inline-block;width:7px;height:7px;border:1px solid #4cccef;border-radius:50%}.enabled .button-indicator{background:#5be6cb;box-shadow:0 0 8px #6fffe3}.toggle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:19px}.tile{padding:10px 3px;background:#122736;color:#6f9bae;border:1px solid #2d4558;border-radius:7px;display:flex;flex-direction:column;gap:6px;align-items:center}.tile b{font-size:19px;font-weight:400}.tile small{font-size:8px;letter-spacing:.065em}.tile.active,.tile:hover{color:#92e7ff;border-color:#398eaa;background:#164157}.console-foot{display:flex;gap:9px;padding-top:2px}.secondary{flex:1;padding:11px 5px;background:#172b38;border:1px solid #344c5b;border-radius:7px;color:#a8c6d7;font-size:10px}.secondary:hover{color:white;background:#274454}
.view-label{position:absolute;top:117px;right:44px;display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-shadow:0 2px 8px #071521}.view-label strong{font-family:'Space Grotesk',sans-serif;letter-spacing:.055em;font-size:14px}.view-muted{font-size:9px;color:#85aabc;letter-spacing:.13em}.telemetry{position:absolute;right:27px;bottom:62px;width:326px;background:#091a27df;border:1px solid #365669ad;padding:20px;border-radius:12px;box-shadow:0 15px 35px #0008}.telemetry-heading{display:flex;justify-content:space-between}.active-icon{color:#7bdfb6;font-size:9px;letter-spacing:.035em}.telemetry-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:19px}.telemetry-grid strong{font-family:'Space Grotesk',sans-serif;font-size:18px;display:block;margin-top:4px;font-variant-numeric:tabular-nums}.progress{height:4px;background:#203847;border-radius:10px;overflow:hidden;margin:20px 0 11px}.progress div{height:100%;width:100%;background:linear-gradient(90deg,#338ba8,#63e6e4);transition:width .18s}.telemetry-footer{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.05em;color:#7c9ba9}.hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.08em;font-weight:700;color:#8eaabb;white-space:nowrap;text-shadow:0 1px 5px #05121c}.hint span{color:#45afca;margin:0 7px}.toast{position:absolute;z-index:15;left:50%;bottom:75px;transform:translateX(-50%);color:#fff;background:#123a4c;border:1px solid #42a7ca;border-radius:7px;padding:9px 15px;font-size:11px;opacity:0;pointer-events:none;transition:opacity .2s}.toast.visible{opacity:1}
@media(max-width:900px){.topbar{padding:0 20px;height:76px}.console{width:292px;left:13px;top:88px;bottom:13px;max-height:none;padding:18px}.view-label{right:20px;top:95px}.telemetry{right:15px;bottom:50px;width:250px;padding:13px}.hint{bottom:18px;left:auto;right:20px;transform:none;font-size:8px}}
@media(max-width:680px){#viewport{inset:0}.topbar{height:68px}.brand strong{font-size:14px}.brand-overline{font-size:7px}.topstats{gap:9px}.topstats>span:first-child{display:none}.console{position:absolute;top:auto;bottom:0;left:0;width:100%;height:245px;max-height:45vh;border-radius:12px 12px 0 0;padding:13px 17px;overflow-y:auto}.console-head h1{font-size:21px;margin:5px 0}.console-head p{display:none}.readouts{margin-top:12px;margin-bottom:10px}.readouts>div{padding:8px}.readouts strong{font-size:15px}.control-section{padding:13px 0}.control-section label{margin:9px 0}.view-label{top:80px;right:16px;gap:3px}.view-label strong{font-size:10px}.view-muted{font-size:7px}.telemetry{display:none}.hint{display:none}.console-foot{padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}