:root{color-scheme:dark;--bg:#03101e;--panel:#071728e8;--border:#31516b99;--text:#e3f0f7;--muted:#83a0af;--cyan:#61e6ed;--gold:#efbe73;--font:Inter,'Segoe UI',system-ui,sans-serif;--mono:'Consolas','SFMono-Regular',monospace}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:#020914;color:var(--text);font-family:var(--font)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
#app,#world{position:fixed;inset:0;width:100%;height:100%}#world{display:block;touch-action:none;outline:none}
.viewport-shade{pointer-events:none;position:fixed;inset:0;background:linear-gradient(180deg,#020c1dba 0%,transparent 25%,transparent 64%,#020a19db 100%),linear-gradient(90deg,#02102088 0,transparent 28%,transparent 72%,#021020aa);z-index:1}
.masthead{height:81px;position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid #66829c33;background:linear-gradient(180deg,#041325dc,#04132533)}
.brand{display:flex;align-items:center;gap:13px;min-width:310px}.logo{width:43px;height:43px;color:#82e6ea}.logo svg{width:100%;height:100%}.brand strong{font-size:15px;letter-spacing:2px;font-weight:800;white-space:nowrap}.brand small{font-family:var(--mono);font-size:9px;letter-spacing:2.3px;color:#91b1c6;display:block;margin-top:4px}.brand .slash{color:#90c5d4}.brand .accent{color:var(--gold)}.mini-dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--cyan);vertical-align:middle;margin:0 2px}
.view-tabs{display:flex;height:100%;gap:0}.tab{border:0;border-bottom:2px solid transparent;background:transparent;color:#adc4d0;padding:2px 22px;display:flex;gap:9px;align-items:center;font-size:12px;letter-spacing:.6px}.tab-number{font:9px var(--mono);color:#708da1}.tab:hover{background:#4bbfd013}.tab.active{border-bottom-color:var(--cyan);color:#ecfbff;background:#3bcee814}.tab.active .tab-number{color:#62d4e0}
.online-status{display:flex;align-items:center;gap:9px;font:10px var(--mono);letter-spacing:1.2px;color:#8eecde}.pulse{width:7px;height:7px;border-radius:50%;background:#65efcc;box-shadow:0 0 11px #5df3c2;animation:pulse 2s infinite}.pill-version{margin-left:10px;padding:6px 8px;border:1px solid #47738a66;color:#a9d5e1;font-size:9px}
.scene-label{position:absolute;top:120px;left:40px;z-index:2;pointer-events:none}.eyebrow,.section-number{font:10px var(--mono);letter-spacing:2.1px;color:#a4e4ea}.scene-label h1{font-size:clamp(25px,2.2vw,36px);font-weight:700;letter-spacing:2.3px;margin:12px 0 9px;text-shadow:0 2px 24px #030d19}.scene-label p{font-size:12px;margin:0;color:#b9cad5;letter-spacing:.4px}.coordinate{display:flex;align-items:center;gap:16px;color:#85b8cc;margin-top:20px;font:10px var(--mono);letter-spacing:1.7px}.divider-vertical{height:12px;border-left:1px solid #4e7d94}.slash{color:var(--gold)}
.panel{background:linear-gradient(145deg,#0b2133ee,#071524f0);border:1px solid var(--border);backdrop-filter:blur(18px);box-shadow:0 17px 60px #0008}.control-panel{position:absolute;z-index:4;top:255px;left:36px;width:317px;bottom:94px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#42677c transparent;padding:20px 22px 16px}.panel-heading{display:flex;align-items:center;justify-content:space-between}.panel-indicator{font:9px var(--mono);color:#74eac2;display:flex;gap:7px;align-items:center}.panel-indicator i{width:5px;height:5px;background:#62eac3;border-radius:50%}.control-panel h2{font-size:22px;margin:16px 0 5px;letter-spacing:-.45px}.panel-intro{color:#92aab8;font-size:11px;line-height:1.65;margin:0 0 22px;max-width:235px}.parameter{margin:0 0 19px}.parameter label{display:flex;justify-content:space-between;align-items:center;font:10px var(--mono);letter-spacing:1px;color:#91aabd}.parameter output{color:#e1f8fe;font:12px var(--mono);letter-spacing:0}.parameter input{width:100%;height:3px;display:block;margin:15px 0 9px;accent-color:#68e0e7;cursor:pointer}.range-labels{display:flex;justify-content:space-between;color:#718c9d;font:9px var(--mono)}.parameter.compact{margin:14px 0}
.dispatch-row{display:flex;gap:7px;margin:23px 0 20px}.primary-action{min-width:0;flex:1;background:#8fe6ec;color:#061c2a;border:1px solid #e2fcff;padding:12px 8px;font:700 10px var(--mono);letter-spacing:.6px;box-shadow:0 0 18px #31b7ce39}.primary-action:hover{background:#d5fbff}.primary-action .symbol{font-size:15px;margin-right:4px}.secondary-action{background:#152d42;color:#c3e3ed;border:1px solid #4a748c;padding:12px 10px;font:700 10px var(--mono);white-space:nowrap}.secondary-action:hover{background:#265068}.panel-separator{height:1px;background:#51738b48;margin:6px 0 15px}
.switch-row{display:flex;justify-content:space-between;align-items:center;margin:14px 0}.switch-row strong{font-size:11px;display:block;font-weight:600}.switch-row small{font-size:10px;color:#819ba9;margin-top:4px;display:block}.switch{display:block;position:relative;width:33px;height:19px}.switch input{opacity:0;position:absolute}.switch span{display:block;position:absolute;inset:0;border-radius:20px;background:#314554;transition:background .2s}.switch span::after{content:'';position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:#bbd0db;transition:transform .2s}.switch input:checked+span{background:#1c91a6}.switch input:checked+span::after{transform:translateX(14px);background:#f3ffff}.panel-footer{border-top:1px solid #3353687d;padding-top:15px;display:flex;justify-content:space-between;align-items:center;gap:5px}.text-button{background:transparent;border:0;color:#a8dce6;font:10px var(--mono);padding:8px 2px}.text-button:hover{color:white}select{background:#10273b;border:1px solid #3f667a;color:#b7dbe8;font:9px var(--mono);padding:7px 4px;width:106px}
.right-panel{position:absolute;z-index:3;right:35px;top:121px;width:295px;bottom:95px;display:flex;flex-direction:column;gap:14px;pointer-events:auto}.telemetry-head{text-align:right;padding-bottom:9px}.telemetry-head .eyebrow{color:#b0c7d5;font-size:9px}.data-dot{color:#6af1ca;margin:0 3px}.telemetry-head h2{font-size:21px;margin:8px 0 0;font-weight:600;letter-spacing:.1px}.telemetry-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #52718c88;background:#051629d9;backdrop-filter:blur(12px)}.metric{padding:18px 13px 14px;min-height:116px;border-right:1px solid #44617a63;border-bottom:1px solid #44617a63}.metric:nth-child(2n){border-right:0}.metric:nth-child(n+3){border-bottom:0}.metric small{font:9px var(--mono);color:#9cb0bf;letter-spacing:.55px}.metric strong{display:block;font:600 28px var(--mono);letter-spacing:-1.3px;color:#f1f9fe;margin-top:12px;white-space:nowrap}.metric em{font:12px var(--mono);font-style:normal;color:#8ab6c8;letter-spacing:0}.metric-bar{height:3px;margin-top:12px;background:#264559}.metric-bar span{display:block;height:100%;background:#61d9e8;transition:width .25s}.metric-mini{margin-top:12px;color:#719eae;font:8px var(--mono);letter-spacing:.3px}.chart-card{padding:16px 14px 10px;background:#071726e8;border:1px solid #3c617b75;backdrop-filter:blur(13px)}.card-title,.event-head{display:flex;justify-content:space-between;align-items:center;font:9px var(--mono);color:#b7d8e2;letter-spacing:1px}.card-title span:last-child{color:#6b90a4}#graph{display:block;width:100%;height:113px;margin-top:10px}.chart-legend{display:flex;justify-content:flex-end;gap:14px;font:9px var(--mono);color:#93a9b9;margin-top:4px}.chart-legend span{display:flex;align-items:center;gap:5px}.chart-legend i{display:inline-block;height:2px;width:15px}.cyan-key{background:#5de9ef}.gold-key{background:#e4ae72}.event-head{padding-top:4px}.live-word{color:#6ae4c1}.events{min-height:0;flex:1;overflow-y:auto;border-left:1px solid #3c667a7d;padding:5px 0 0 12px;scrollbar-width:thin;scrollbar-color:#42677c transparent}.events p{font:10px/1.65 var(--mono);color:#b6d0db;margin:0 0 13px}.events p span{color:#5fb2c8;margin-right:7px}.events p.success{color:#8ff6d1}.events p.warning{color:#f3ca83}
.bottom-bar{position:absolute;z-index:4;bottom:0;left:0;right:0;min-height:79px;display:flex;align-items:center;gap:0;border-top:1px solid #57758b6e;background:#041422e6;backdrop-filter:blur(12px);padding:0 37px}.bottom-stat{min-width:135px;border-right:1px solid #4d71883b;padding:0 26px 0 0;margin-right:27px}.bottom-stat small{display:block;font:9px var(--mono);color:#7c9cab;letter-spacing:1px;margin-bottom:8px}.bottom-stat strong{font:18px var(--mono);color:#d8f2f7;white-space:nowrap}.help-info{margin-left:auto;align-self:end;margin-bottom:25px;white-space:nowrap;color:#8ba0aa;font:9px var(--mono)}.help-info span{color:#dbf0f7}
.toast{position:absolute;bottom:94px;left:50%;transform:translate(-50%,10px);z-index:15;background:#073044ee;color:#c0f2fc;padding:12px 19px;border:1px solid #40b8d5;opacity:0;transition:.25s;pointer-events:none;font:11px var(--mono)}.toast.visible{opacity:1;transform:translate(-50%,0)}.fatal{position:absolute;inset:30%;z-index:100;background:#071d2c;padding:40px;border:1px solid #de946f;color:white}.fatal[hidden]{display:none}
.loader{position:absolute;inset:0;z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:23px;background:radial-gradient(circle at 50% 50%,#15344b,#020d1b 67%);transition:opacity .8s,visibility .8s}.loader.done{opacity:0;visibility:hidden}.loader-symbol{font-size:64px;font-weight:800;letter-spacing:-8px;color:#e7f7ff}.loader-symbol span{color:#51d8e4;margin:0 13px;font-weight:200}.loader-text{font:11px var(--mono);letter-spacing:2.9px;color:#93dce5}.loader-progress{width:258px;height:2px;background:#294a5b;overflow:hidden}.loader-progress span{display:block;height:100%;background:#69e4e7;width:75%;animation:loadslide 1.3s infinite alternate}.loader small{font:9px var(--mono);letter-spacing:1.4px;color:#668d9b}
@keyframes pulse{50%{opacity:.25;box-shadow:0 0 3px #5df3c2}}@keyframes loadslide{0%{transform:translateX(-150%)}to{transform:translateX(180%)}}
@media(max-width:1320px){.control-panel{width:282px;padding:17px}.right-panel{width:252px;right:18px}.brand{min-width:245px}.brand strong{font-size:12px}.masthead{padding:0 20px}.tab{padding:2px 13px}.bottom-stat{margin-right:12px;padding-right:14px;min-width:112px}.help-info{display:none}}
@media(max-width:1000px){.right-panel{display:none}.control-panel{top:auto;bottom:92px;max-height:51vh}.scene-label{top:104px;left:25px}.masthead{height:66px}.online-status{display:none}.view-tabs{margin-left:auto}.bottom-stat:nth-child(n+4){display:none}}
@media(max-width:620px){.brand{min-width:0}.brand small{display:none}.brand strong{font-size:11px}.logo{width:28px;height:28px}.view-tabs{position:absolute;top:66px;left:0;right:0;height:45px;background:#041829d9;justify-content:space-around}.tab{flex:1;justify-content:center;font-size:11px}.tab-number{display:none}.scene-label{top:122px}.scene-label h1{font-size:22px}.scene-label p{font-size:10px}.control-panel{left:10px;bottom:83px;width:min(290px,calc(100vw - 20px));max-height:44vh}.bottom-bar{padding:0 14px;min-height:68px;justify-content:space-around}.bottom-stat{min-width:0;margin:0;padding:0 8px}.bottom-stat:nth-child(n+3){display:none}.bottom-stat small{font-size:8px}.bottom-stat strong{font-size:15px}}