:root{--bg:#091923;--panel:#0c1e2a;--panel2:#102633;--grid:#244051;--muted:#84a0ac;--bright:#f3e9d9;--amber:#e8bd6d;--teal:#47d4b6;--sans:'DM Sans',Arial,sans-serif;--display:'Barlow Condensed','Arial Narrow',Arial,sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--bright);font-family:var(--sans);overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:3px}[hidden]{display:none!important}
#app{width:100%;height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) 334px;grid-template-rows:minmax(0,1fr) 43px;overflow:hidden}
#stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#284a60 0%,#0d2130 67%)}
#viewport{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}#viewport:active{cursor:grabbing}
#stage:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(5,16,24,.6),transparent 24%,transparent 74%,rgba(5,15,23,.55)),linear-gradient(90deg,rgba(5,17,24,.17),transparent 34%)}
.stage-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:25px 28px;pointer-events:none}
.brand-wrap{display:flex;align-items:flex-start;gap:13px}.monogram{background:var(--amber);color:#132733;width:46px;height:46px;font-family:var(--display);font-size:27px;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:-4px;padding-right:4px;transform:skewX(-6deg)}.monogram span{color:#fff}
.eyebrow,.micro,.tiny-meta,.edition,.camera-palette>span,.subline,.signal,.stage-caption,.top-actions,.panel-header p,.panel-header .heading,.section-title,.control-head,.metrics small,.graph-head,.part-card,.disclaimer,.panel-footer,.hud-right,#hud,.dialog-head{letter-spacing:.08em}
.eyebrow{font-size:10px;font-weight:700;color:#d9e1de}.split{color:var(--amber);margin:0 3px}.brand-wrap h1{font:800 37px/1 var(--display);letter-spacing:.05em;margin:3px 0;color:#fff}.slash{color:var(--amber);font-weight:400}.subline{font-size:10px;color:#d0e0df;font-weight:700;letter-spacing:.21em}
.top-actions{display:flex;align-items:center;gap:8px;pointer-events:auto}.edition{font-size:10px;white-space:nowrap;color:#d0d8d5;padding-right:9px}.edition i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--teal);margin:0 4px;vertical-align:middle;box-shadow:0 0 8px var(--teal)}.icon-button{border:1px solid #7895a078;color:#e4e5e0;background:rgba(7,23,34,.45);padding:9px 11px;font-size:13px;font-weight:800}.icon-button span{font-size:10px;letter-spacing:.08em;margin-left:4px}.icon-button:hover{background:#274357}
.stage-lower-left{position:absolute;bottom:94px;left:28px;z-index:3}.signal{font-size:10px;font-weight:800;display:flex;align-items:center;gap:8px}.signal-dot{width:8px;height:8px;display:inline-block;background:var(--teal);box-shadow:0 0 11px var(--teal);border-radius:50%}.signal-dot.warn{background:#efa861;box-shadow:0 0 11px #efa861}.tiny-meta{font-size:9px;font-weight:600;color:#b0c9d1;margin-top:9px}.tiny-meta span{color:var(--amber);margin:0 5px}
.camera-palette{position:absolute;bottom:23px;left:25px;z-index:3;display:flex;align-items:center;gap:4px;max-width:calc(100% - 50px);overflow:auto hidden}.camera-palette>span{font-size:10px;color:#a5bdc3;font-weight:700;margin-right:9px}.camera-palette button{background:rgba(9,29,40,.76);border:1px solid #6b8b967a;color:#adc3c9;font:600 13px var(--display);padding:9px 9px;min-width:41px;white-space:nowrap}.camera-palette button b{display:none;font-weight:600;margin-left:2px;font-size:12px}.camera-palette button.active{background:var(--amber);color:#112935;border-color:var(--amber)}.camera-palette button.active b{display:inline}.camera-palette button:hover:not(.active){background:#1a3748}.stage-caption{position:absolute;right:19px;bottom:23px;color:#bed1d8;z-index:2;font-size:9px;line-height:1.6;text-align:right;pointer-events:none;opacity:.8}
#sidebar{display:flex;flex-direction:column;min-height:0;background:#0b1d29;border-left:1px solid #335364;color:#e8e9df} .panel-header{padding:23px 23px 19px;border-bottom:1px solid #28414e;flex:none}.micro{color:var(--amber);font-size:10px;font-weight:800}.panel-header .heading{font:800 29px var(--display);margin-top:5px;line-height:1}.panel-header .heading span{font-weight:400;color:#b5c3c7}.panel-header p{font-size:10px;letter-spacing:0;color:#9bb2bb;margin:9px 0 0;line-height:1.5}
.panel-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 23px 24px;scrollbar-color:#466273 #0d222e;scrollbar-width:thin}.section-title{color:#e3c38b;display:flex;align-items:center;gap:11px;font:800 16px var(--display);letter-spacing:.1em;margin:20px 0 15px;border-bottom:1px solid #34515d;padding-bottom:10px}.section-title span{color:#829da9;font-size:12px}.section-title em{font:800 9px var(--sans);letter-spacing:.1em;color:#46d9ad;margin-left:auto;font-style:normal}.control{margin:0 0 15px}.control-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px}.control-head label{font-size:11px;color:#d5e0de}.control-head output{font:700 13px var(--display);color:var(--amber);letter-spacing:.06em;white-space:nowrap}.control input[type=range]{width:100%;height:3px;display:block;appearance:none;background:#3b5866;outline:0;cursor:pointer;margin:11px 0 7px;accent-color:#e8bd6d}.control input[type=range]::-webkit-slider-thumb{appearance:none;height:12px;width:12px;background:var(--amber);border:2px solid #0b1d29;box-shadow:0 0 0 1px var(--amber);border-radius:50%}.control input[type=range]::-moz-range-thumb{height:10px;width:10px;background:var(--amber);border:1px solid #e8bd6d;border-radius:50%}
.switches{background:#102733;border:1px solid #244250;padding:9px 12px;margin-top:19px}.switch-row{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:11px;min-height:32px;color:#c0d2d8}.switch-row+.switch-row{border-top:1px solid #2a404a}.switch-row input{position:absolute;opacity:0}.switch-row i{height:14px;width:27px;border-radius:14px;background:#47616b;position:relative;transition:.2s;flex:none}.switch-row i:before{content:'';position:absolute;width:10px;height:10px;background:#aabac0;top:2px;left:2px;border-radius:50%;transition:.2s}.switch-row input:checked+i{background:#367562}.switch-row input:checked+i:before{background:#b4f3df;transform:translateX(13px)}.switch-row input:focus-visible+i{outline:2px solid var(--amber);outline-offset:3px}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metrics>div{border:1px solid #2c4756;background:#112937;padding:10px 11px}.metrics small{display:block;color:#789aaa;font-size:9px;font-weight:700}.metrics strong{display:block;color:#f2e8d9;font:800 23px var(--display);letter-spacing:.03em;margin-top:4px}.graph-head{margin:17px 0 8px;display:flex;justify-content:space-between;align-items:center;gap:5px;font:700 11px var(--display);color:#cbd7d7}.graph-head b{font-weight:800;font-size:15px;color:var(--amber);margin-left:4px}.graph-head small{font:600 8px var(--sans);color:#718e99;white-space:nowrap}#telemetry-chart{width:100%;height:86px;display:block;border:1px solid #23434f;background:#0c2633}
.part-card{background:#112937;border:1px solid #314e58;color:#95b1bb;font-size:11px;padding:14px 15px;line-height:1.6}.part-crosshair{font-size:24px;color:var(--amber);padding-bottom:5px}.part-card small{color:var(--amber);display:block;font-weight:700;font-size:9px}.part-card strong{display:block;font:800 22px var(--display);color:white;letter-spacing:.05em;margin-top:5px}.part-card p{letter-spacing:0;line-height:1.65;margin:7px 0 12px}.part-card button{background:transparent;color:var(--amber);font-size:10px;font-weight:700;letter-spacing:.08em;border:1px solid #937849;padding:7px 9px}.part-card button:hover{background:#273941}.disclaimer{font-size:9px;letter-spacing:0;line-height:1.6;color:#7893a0;margin:18px 0 5px}
.panel-footer{padding:13px 23px 14px;border-top:1px solid #35515d;display:flex;gap:9px;flex:none;background:#0a1b26}.panel-footer button{height:40px;font:800 16px var(--display);letter-spacing:.09em}.primary{flex:1;background:#e8bd6d;border:1px solid #e8bd6d;color:#142d38}.secondary{width:95px;background:#152b38;border:1px solid #456575;color:#d3dedd}.panel-footer button:hover{filter:brightness(1.08)}
#hud{background:#071721;border-top:1px solid #314c59;display:flex;align-items:center;grid-column:1/-1;gap:0;white-space:nowrap;min-width:0;overflow:hidden}#hud>span{display:flex;align-items:center;gap:13px;height:100%;padding:0 22px;border-right:1px solid #304753}#hud b{font-size:9px;color:#7898a5}#hud em{font:700 13px var(--display);font-style:normal;letter-spacing:.04em;color:#d3e0dd}.hud-right{font-size:9px;color:#7595a4;margin-left:auto;padding-right:20px}.hud-right b{color:var(--amber)!important}
.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:15;background:#0a1d28;gap:10px}.loading.hidden{display:none}.spinner{height:35px;width:35px;border:2px solid #476273;border-top-color:var(--amber);border-radius:50%;animation:spin .8s linear infinite}.loading strong{font:800 25px var(--display);letter-spacing:.2em}.loading span{font-size:10px;color:#84a9bb;letter-spacing:.2em}@keyframes spin{to{transform:rotate(360deg)}}.fatal{position:absolute;z-index:20;top:35%;left:14%;right:14%;background:#142e3c;padding:22px;border:1px solid #c68e56}.fatal strong{font-size:18px}.fatal p{font-size:12px;line-height:1.5;color:#dfcfb8}.fatal code{color:#ffcc90}
.help-dialog{border:1px solid #d3a965;background:#112b38;color:#e5e9e5;padding:27px;max-width:min(560px,92vw);box-shadow:0 22px 80px #020d14a0}.help-dialog::backdrop{background:#030b12bd}.dialog-head{color:var(--amber);display:flex;justify-content:space-between;align-items:center;font:800 13px var(--display);letter-spacing:.16em}.dialog-head button{background:none;color:#fff;border:0;font-size:28px}.help-dialog h2{font:800 37px var(--display);margin:16px 0 8px}.help-dialog p{font-size:12px;line-height:1.7;color:#bdd0d6}.help-dialog dl{display:grid;grid-template-columns:1fr 2fr;gap:12px 15px;font-size:11px;border-top:1px solid #41606f;padding-top:20px}.help-dialog dt{color:var(--amber);font-weight:700}.help-dialog dd{margin:0}.dialog-note{font-size:10px!important;color:#8da9b5!important}
@media(max-width:1170px){#app{grid-template-columns:minmax(0,1fr) 303px}.panel-header,.panel-scroll,.panel-footer{padding-left:17px;padding-right:17px}.stage-caption{display:none}.edition{display:none}.camera-palette button b{display:none!important}}
@media(max-width:730px){html,body{overflow:auto}#app{display:flex;flex-direction:column;overflow:auto;height:auto;min-height:100dvh}#stage{height:68dvh;min-height:400px;flex:none}#sidebar{height:auto;max-height:none;min-height:340px} .panel-scroll{max-height:none;overflow:visible}.stage-top{padding:13px}.brand-wrap h1{font-size:27px}.monogram{width:36px;height:36px;font-size:22px}.brand-wrap{gap:8px}.eyebrow{font-size:8px}.subline{font-size:8px}.icon-button span{display:none}.icon-button{padding:8px}.stage-lower-left{bottom:81px;left:13px}.camera-palette{bottom:15px;left:11px;max-width:calc(100% - 22px)}.camera-palette>span{display:none}.camera-palette button{font-size:11px;padding:7px}.panel-header{padding-top:18px}.panel-scroll{padding-bottom:15px}.panel-footer{position:sticky;bottom:0;z-index:6}.hud-right{display:none}#hud{height:39px;min-height:39px;order:2}#hud>span{padding:0 11px;gap:5px}#hud b{font-size:8px}#hud em{font-size:11px}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}