:root{color-scheme:dark;--bg:#06101b;--panel:rgba(8,21,35,.89);--panel2:rgba(8,20,33,.83);--line:rgba(121,178,207,.18);--light:#d6e9ee;--dim:#75919e;--cyan:#66ecf3;--gold:#ffbc7e;--violet:#baa4ff;--font:'Segoe UI',Inter,'Helvetica Neue',Arial,sans-serif}
*{box-sizing:border-box}
html,body{height:100%;width:100%;overflow:hidden;margin:0;font-family:var(--font);background:var(--bg);color:var(--light)}
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}
#stage,#viewport{width:100%;height:100%;position:absolute;inset:0;display:block;touch-action:none;outline:none}
#stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,transparent 18%,rgba(2,6,15,.34) 96%)}
.hud{transition:opacity .28s,transform .28s}
.kicker{font-size:9px;letter-spacing:2.1px;color:var(--cyan);font-weight:750}
.panel-index{font-size:9px;color:#607b8b;letter-spacing:1px}
.muted{color:#6f95a7}
.slash{color:var(--gold);margin:0 7px}
#topbar{position:absolute;z-index:4;top:0;left:0;right:0;height:74px;display:flex;justify-content:space-between;align-items:center;padding:0 34px;background:linear-gradient(180deg,rgba(4,13,25,.94),rgba(4,13,25,.53) 80%,transparent);border-bottom:1px solid rgba(128,195,225,.14)}
.brand{display:flex;gap:12px;align-items:center;min-width:280px}
.brand-icon,.loading-emblem{height:36px;width:36px;border:1px solid var(--cyan);color:#e3ffff;display:flex;justify-content:center;align-items:center;font-weight:800;font-size:20px;transform:skewX(-10deg)}
.brand-icon span,.loading-emblem span{color:var(--cyan);font-size:15px;margin-left:-3px}
.brand strong{font-size:15px;font-weight:850;letter-spacing:3px;display:block}
.brand small{color:#718b9c;font-size:8px;letter-spacing:1.6px;display:block;margin-top:4px}
.header-center,.right-foot{display:flex;align-items:center;gap:11px;letter-spacing:1.5px;color:#97aeba;font-size:10px;font-weight:700}
.live-dot{background:#62ddc7;width:6px;height:6px;display:inline-block;border-radius:50%;box-shadow:0 0 11px #3af5ba;animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.head-sep,.footer-sep{opacity:.33}
.header-actions{display:flex;gap:10px}
.btn{background:#0d2235;border:1px solid var(--line);color:#b5d0df;padding:11px 16px;font-size:10px;font-weight:800;letter-spacing:1.3px}
.btn:hover{border-color:var(--cyan);color:#fff}
.btn.subtle{background:transparent}
.btn.accent{color:#071b26;background:var(--cyan);border-color:var(--cyan)}
.btn.accent:hover{background:#b5ffff}
.panel{position:absolute;z-index:3;top:94px;bottom:70px;overflow-y:auto;overflow-x:hidden;background:linear-gradient(155deg,rgba(12,30,47,.91),rgba(3,15,27,.87));border:1px solid var(--line);backdrop-filter:blur(15px);scrollbar-color:#2a4e62 transparent;scrollbar-width:thin}
#left-panel{width:290px;left:22px;padding:22px 21px 25px}
#right-panel{width:286px;right:22px;padding:22px 20px 25px;bottom:auto;max-height:calc(100% - 166px)}
.panel-head{display:flex;justify-content:space-between;align-items:center}
.panel-title{font-size:24px;font-weight:600;letter-spacing:.1px;margin:12px 0 17px}
.separator{border-top:1px solid var(--line);margin:19px 0}
.section-heading{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.3px;font-weight:800;color:#a9c2ce;margin:8px 0 12px}
.section-heading span:not(.kicker){color:var(--cyan)}
.section-heading.with-space{margin-top:25px}
.mode-toggle{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);padding:3px;gap:4px;background:#061421}
.mode{color:#839eac;background:transparent;border:0;padding:10px 5px;font-size:9px;font-weight:850;letter-spacing:1.1px}
.mode.active{color:#071822;background:var(--cyan);box-shadow:0 0 20px rgba(73,228,242,.13)}
.bookmark-stack{border-top:1px solid rgba(124,184,206,.09)}
.bookmark{height:39px;display:flex;gap:12px;align-items:center;width:100%;border:0;border-bottom:1px solid rgba(124,184,206,.09);text-align:left;background:transparent;color:#a5bdc9;font-size:11px;padding:0 8px;transition:all .15s}
.bookmark:hover,.bookmark.active{background:rgba(89,206,229,.09);color:#e8faff}
.bookmark.active{border-left:2px solid var(--cyan);padding-left:6px}
.bookmark .num{font-size:9px;color:#4b798c;font-weight:800;letter-spacing:1px}
.bookmark .trailing{margin-left:auto;color:#5bdbe8;font-size:13px}
.switch-row{display:flex;justify-content:space-between;align-items:center;margin:12px 0;min-height:36px;gap:12px}
.switch-row strong{display:block;font-size:9px;font-weight:800;letter-spacing:1px;color:#c3d8e0}
.switch-row small{display:block;font-size:9px;color:#638293;margin-top:4px}
.switch{width:37px;height:20px;background:#162b39;border:1px solid #294353;border-radius:20px;padding:2px;flex-shrink:0}
.switch span{width:14px;height:14px;background:#7c8d99;display:block;border-radius:50%;transition:transform .17s,background .17s}
.switch.enabled{background:#1b5e68;border-color:#4bdbe8}
.switch.enabled span{background:var(--cyan);transform:translateX(17px)}
input[type=range]{width:100%;appearance:none;-webkit-appearance:none;height:4px;background:linear-gradient(90deg,#69e7f4,#23495d);border:0;margin:6px 0;cursor:pointer}
input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--cyan);border:2px solid #1b4351;border-radius:0;width:12px;height:17px}
input[type=range]::-moz-range-thumb{background:var(--cyan);border:2px solid #1b4351;border-radius:0;width:12px;height:17px}
.range-labels{display:flex;justify-content:space-between;color:#597a8a;font-size:8px;letter-spacing:1px;margin-top:3px}
select{background:#0b2333;border:1px solid var(--line);padding:10px;color:#c7dee9;font-size:11px;width:100%;cursor:pointer}
#scene-heading{position:absolute;z-index:2;top:17%;left:calc(50% - 295px);text-align:left;width:590px;pointer-events:none;transition:opacity .4s}
#scene-heading .kicker{color:#a9c9d9;letter-spacing:2.4px}
#scene-heading h1{font-size:clamp(32px,4vw,63px);font-weight:800;letter-spacing:-2.7px;line-height:1.03;margin:14px 0;text-shadow:0 7px 24px #06111e}
#scene-heading h1 em{font-style:normal;color:#91eaf4;font-weight:300}
.scene-divider{height:2px;width:63px;background:var(--cyan);margin:18px 0}
#scene-heading p{font-size:9px;letter-spacing:1.7px;color:#a0bdcb;font-weight:800;text-shadow:0 4px 10px #050b16}
#scene-heading p span{color:var(--gold);padding:0 6px}
.metric{margin:21px 0}
.metric>div:first-child{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.metric span{font-size:9px;letter-spacing:1.1px;font-weight:700;color:#8ba7b7}
.metric strong{font-family:ui-monospace,Consolas,monospace;font-weight:500;font-size:14px;color:#eefcff;white-space:nowrap}
.mini-bar{height:3px;background:#153245;margin-top:10px}
.mini-bar span{display:block;width:5%;height:100%;background:var(--cyan);box-shadow:0 0 10px rgba(102,236,243,.7);transition:width .15s}
.mini-bar.amber span{background:var(--gold)}.mini-bar.purple span{background:var(--violet)}
#inspect-box{min-height:189px;background:rgba(3,14,25,.6);border:1px solid rgba(81,147,166,.2);padding:15px 15px 20px;margin-top:14px}
#inspect-icon{font-size:28px;color:var(--cyan);line-height:1}
#inspect-code{font-family:ui-monospace,Consolas,monospace;font-size:9px;letter-spacing:1px;color:#729ba9;margin-top:13px}
#inspect-title{font-size:14px;font-weight:800;letter-spacing:.1px;margin:8px 0 7px}
#inspect-desc{font-size:11px;line-height:1.7;color:#8ea7b4;margin:0}
.coords{font-family:ui-monospace,Consolas,monospace;color:var(--cyan);font-size:11px}
.right-foot{font-size:9px;color:#698e9c;margin-top:20px;letter-spacing:.9px}
#bottombar{position:absolute;left:0;bottom:0;right:0;height:52px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 28px;border-top:1px solid var(--line);background:rgba(4,16,28,.85);backdrop-filter:blur(12px);font-size:9px;color:#8aa4b5;letter-spacing:1.1px;font-weight:700;z-index:3}
#bottombar>div:first-child{display:flex;align-items:center;gap:10px}
#bottombar strong{font-size:9px;color:#cfebf3}
.footer-center{white-space:nowrap;color:#6a8c9c}
.footer-center b{color:var(--cyan);padding:0 4px}
#crosshair{display:none;position:absolute;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%);font-size:27px;line-height:1;color:rgba(131,245,255,.74);font-weight:200;text-shadow:0 0 14px var(--cyan)}
.flight #crosshair{display:block}
#toast{position:absolute;z-index:9;bottom:83px;left:50%;transform:translate(-50%,10px);opacity:0;transition:.23s;background:rgba(8,29,42,.93);border:1px solid #306577;color:var(--cyan);padding:12px 20px;pointer-events:none;font-size:10px;letter-spacing:1.3px;font-weight:800}
#toast.show{opacity:1;transform:translate(-50%,0)}
.cinema .hud{opacity:0;pointer-events:none;transform:translateY(-5px)}
.cinema #scene-heading{opacity:0}
#loading{z-index:40;position:fixed;inset:0;background:#050c17;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .55s,visibility .55s;gap:14px}
#loading.finished{visibility:hidden;opacity:0;pointer-events:none}
.loading-emblem{height:84px;width:84px;font-size:41px;box-shadow:0 0 60px rgba(0,194,234,.11);margin-bottom:23px}
.loading-emblem span{font-size:35px}
.load-overline{font-size:10px;color:#5397ac;font-weight:800;letter-spacing:4px}
.load-title{font-size:33px;letter-spacing:5px;font-weight:800}
.load-title .muted{font-weight:300}
.load-bar{margin:8px;width:280px;height:3px;background:#143b4f}
.load-bar div{width:0;height:100%;background:var(--cyan);transition:width .4s}
#load-message{font-size:11px;letter-spacing:1.2px;color:#9bb8c3}
.tiny{color:#638391;font-size:10px;text-align:center}
.tiny code{color:#93e4ee}
#help-dialog{border:1px solid #366b82;background:linear-gradient(145deg,#102539,#07121f);color:#d2e5ed;padding:29px;max-width:min(650px,93vw);width:100%;box-shadow:0 15px 90px #000a}
#help-dialog::backdrop{background:rgba(0,4,13,.8);backdrop-filter:blur(4px)}
.modal-head{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:2px;color:var(--cyan)}
#help-dialog h2{font-size:29px;letter-spacing:-.8px;margin:20px 0}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:23px}
.help-grid span{display:block;color:var(--cyan);font-size:12px;margin-bottom:7px}
.help-grid b{font-size:11px;letter-spacing:1.3px}
.help-grid p{line-height:1.6;font-size:12px;color:#93aeba}
.disclaimer{border-top:1px solid var(--line);padding-top:14px;margin-top:21px;font-size:10px;color:#809fac;line-height:1.6}
@media(max-width:1280px){#left-panel{width:260px;left:11px;padding:18px 15px}#right-panel{width:252px;right:11px;padding:18px 15px}#scene-heading{left:calc(50% - 235px);width:470px;top:15%}#scene-heading h1{font-size:47px}#bottombar .footer-center{display:none}}
@media(max-width:900px){#topbar{padding:0 14px;height:60px}.header-center{display:none}.brand{min-width:auto}.brand small{letter-spacing:1px;font-size:7px}#scene-heading{top:70px;left:20px;width:auto}#scene-heading h1{font-size:32px;margin:9px 0}.scene-divider,#scene-heading p{display:none}#left-panel{top:auto;bottom:52px;left:10px;width:min(58vw,310px);height:35vh;min-height:180px;overflow:auto}#right-panel{top:auto;bottom:52px;right:10px;width:min(38vw,260px);max-height:35vh;overflow:auto}#bottombar{padding:0 15px}#bottombar>div:last-child{display:none}#right-panel .metric{margin:13px 0}}
@media(max-width:590px){#topbar .btn{padding:7px 8px;font-size:9px}.brand strong{font-size:12px}.brand-icon{width:27px;height:27px;font-size:16px}.brand small{display:none}#topbar{height:52px}#scene-heading{top:64px;left:14px}#scene-heading h1{font-size:24px;letter-spacing:-1px}#left-panel{left:5px;width:55vw;height:28vh;min-height:160px;padding:10px;font-size:10px}#right-panel{right:5px;width:42vw;height:28vh;padding:10px}#right-panel .metric:nth-of-type(n+4),#right-panel .separator,#inspect-box,#right-panel .section-heading,#right-panel .coords,#right-panel .right-foot{display:none}.panel-title{font-size:18px;margin:7px 0}.section-heading.with-space{margin-top:15px}#bottombar{height:42px;font-size:8px}#bottombar strong{display:none}.help-grid{grid-template-columns:1fr}}
