:root{color-scheme:dark;--bg:#07111a;--panel:#0a1620;--edge:#1a303c;--text:#e9f4f9;--muted:#78939f;--accent:#63dce9;--gold:#d2ac78;font-family:Inter,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#03080d;color:var(--text)}body{overflow-x:hidden}button,select,input{font:inherit}button{cursor:pointer}
.app{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at 19% 15%,#0c202a,#050d14 58%,#03070d)}
.header{height:83px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #1b333f;background:#08121b}
.identity{display:flex;align-items:center;gap:18px}.mark{height:43px;width:43px;display:flex;align-items:center;justify-content:center;border:1px solid #67c4d3;font-size:25px;letter-spacing:-6px;padding-right:4px;color:#91edf6}.mark span{color:#d5ae78;font-weight:200}.brand{font-size:17px;font-weight:700;letter-spacing:.18em}.brand-note{font-size:10px;font-weight:500;letter-spacing:.22em;color:#8798a2}.tiny{font-size:9px;letter-spacing:.25em;color:#5f7b86;margin-top:7px}.top-status{display:flex;align-items:center;gap:11px;font-size:10px;letter-spacing:.21em;color:#90acb8}.live-dot{height:7px;width:7px;border-radius:50%;background:#46deb3;box-shadow:0 0 10px #46deb3}.divider{height:17px;width:1px;background:#29404b;margin:0 15px}
.layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 348px;min-height:680px}.stage{position:relative;overflow:hidden;min-height:590px;background:#081620}.stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,10,15,.35),transparent 18%,transparent 78%,rgba(4,10,15,.34));z-index:1}#viewport{position:absolute;inset:0}#viewport canvas{width:100%;height:100%;display:block;outline:0}
.stage-top,.stage-bottom,.stage-left,.reticle-center{position:absolute;z-index:2;pointer-events:none}.stage-top{top:35px;left:38px;right:40px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em}.stage-top .index{color:#9ebec7}.stage-top .icon-text{color:#62cddd}.stage-left{top:50%;left:39px;display:flex;gap:14px;align-items:center;writing-mode:vertical-lr;transform:rotate(180deg);color:#5d8390;font-size:9px;letter-spacing:.25em}.stage-left .cross{font-size:25px;color:#55818c}.reticle-center{top:49%;left:50%;font-size:19px;color:#76cbd2;opacity:.25;transform:translate(-50%,-50%)}
.stage-bottom{bottom:34px;left:39px;right:39px;display:flex;align-items:end;gap:33px}.telemetry{display:flex;flex-direction:column;gap:7px;min-width:70px}.telemetry-label{font-size:9px;letter-spacing:.16em;color:#6c8994}.telemetry strong{font-size:19px;font-weight:400;font-family:ui-monospace,monospace;color:#e0eef6;letter-spacing:.05em}.stage-hint{margin-left:auto;white-space:nowrap;color:#5b7e8a;font-size:9px;letter-spacing:.16em}
.panel{border-left:1px solid #24404c;background:linear-gradient(170deg,#0b1923,#08131e 70%);padding:29px 26px 24px;overflow:auto;max-height:calc(100vh - 83px);min-height:670px;scrollbar-width:thin;scrollbar-color:#21404b transparent}.panel-title{display:flex;gap:14px;align-items:baseline;margin-bottom:27px}.panel-title>span{color:#b79c75;font:13px ui-monospace,monospace}.panel h1{margin:0;font-size:21px;font-weight:550;letter-spacing:-.035em}.panel p{margin:7px 0 0;font-size:11px;color:#75949d}.section-title{font-size:9px;font-weight:700;letter-spacing:.20em;color:#c0d6dc;margin:25px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--edge);display:flex;justify-content:space-between}.section-title>span{color:#577582;font-weight:400}.field{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 18px;font-size:11px;color:#abbfc9}.select-field select{max-width:180px}.field select,select{background:#112532;border:1px solid #27404d;color:#cbe0e8;padding:10px 8px;border-radius:2px;font-size:10px;letter-spacing:.07em;outline:0}.slider-control{margin:16px 0}.slider-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px;font-size:11px;color:#a9bdc7}.slider-heading output{font:12px ui-monospace,monospace;color:#79d5e1}.slider-control input{width:100%;height:3px;appearance:none;background:#28434d;border-radius:5px;display:block;margin:14px 0 21px;accent-color:#63dce9}.slider-control input::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#85e4eb;box-shadow:0 0 0 4px #0d2834;cursor:pointer}.switch-row{display:grid;gap:10px}.switch-row label{display:flex;align-items:center;gap:9px;font-size:11px;color:#9db7c0;cursor:pointer}.switch-row input{accent-color:#5cbed0;width:13px;height:13px}
.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.button-grid button,.extras button{border:1px solid #2c4d5b;color:#b7d5df;background:#102735;padding:11px 5px;font-size:11px;transition:background .16s}.button-grid button:hover,.extras button:hover{background:#174253}.button-grid .primary{background:#3d8c9a;color:#ebfbfc;border-color:#5ab7c0}.button-grid .primary:hover{background:#56aab8}.extras{margin-top:16px;display:flex;justify-content:space-between;gap:8px}.extras label{font-size:9px;letter-spacing:.08em;color:#78939f;display:flex;gap:7px;align-items:center}.extras select{font-size:9px;padding:7px 2px;max-width:102px}.extras button{font-size:9px;white-space:nowrap;padding:8px}.footer-note{margin-top:25px;padding-top:15px;display:flex;gap:11px;border-top:1px solid #213743;font-size:10px;line-height:1.6;color:#5c7a85}.footer-glyph{color:#58beca}
@media(max-width:1000px){.layout{grid-template-columns:minmax(0,1fr) 316px}.stage-bottom{gap:16px}.stage-hint{display:none}.header{padding:0 22px}.panel{padding:28px 20px}}
@media(max-width:740px){.layout{display:flex;flex-direction:column}.stage{min-height:58vh}.panel{max-height:none;min-height:0}.stage-bottom{bottom:18px;left:18px;right:18px;gap:14px}.stage-top{top:20px;left:19px;right:19px}.top-status{display:none}.brand-note{display:none}.stage-left{display:none}.telemetry strong{font-size:15px}.telemetry-label{font-size:7px}.panel .section-title{margin-top:19px}}