:root{color-scheme:dark;--bg:#050c17;--panel:rgba(8,18,31,.91);--line:rgba(123,178,196,.18);--dim:#7392a5;--ink:#d6eaf1;--ice:#91e7e0;--aqua:#51dfcb;--amber:#dea77a;--font:'DM Sans','Segoe UI',Arial,sans-serif;--display:'Barlow Condensed','Arial Narrow',sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);font-family:var(--font);color:var(--ink);user-select:none}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
#viewport{display:block;width:100vw;height:100vh;touch-action:none;cursor:grab;outline:none}#viewport:active{cursor:grabbing}
#vignette{pointer-events:none;position:fixed;inset:0;box-shadow:inset 0 0 190px 65px rgba(0,5,15,.61);z-index:1}#grain{pointer-events:none;position:fixed;inset:0;z-index:1;opacity:.095;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,rgba(164,212,233,.07) 4px,transparent 5px)}
.topbar{position:fixed;z-index:10;top:0;left:0;right:0;height:75px;padding:0 33px 0 37px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(5,14,26,.98),rgba(5,14,26,.8),rgba(5,14,26,.78));backdrop-filter:blur(13px)}
.brand{display:flex;gap:14px;color:#e6f7f7;text-decoration:none;align-items:center;min-width:260px}.brand-glyph{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--ice);color:var(--ice);font-size:36px;font-weight:300;line-height:1;transform:rotate(0deg)}.brand b{font:800 24px/.98 var(--display);letter-spacing:3.2px;display:block}.brand small{display:block;margin-top:7px;color:var(--dim);font:600 9px var(--font);letter-spacing:2.05px;white-space:nowrap}
.header-center{display:flex;align-items:center;gap:13px;font-size:10px;letter-spacing:2.1px;font-weight:700;color:#b1c6d1}.header-divider{display:block;width:1px;height:19px;background:#496072;margin:0 7px}.signal-dot{display:inline-block;width:7px;height:7px;background:#56eed6;border-radius:50%;box-shadow:0 0 14px 3px #22d9c55e;flex:none}.top-actions{display:flex;gap:8px;min-width:260px;justify-content:flex-end}.icon-button{display:grid;place-items:center;background:rgba(63,100,123,.16);border:1px solid var(--line);color:#c7e3eb;width:34px;height:34px;font-size:17px}.icon-button:hover,.icon-button:focus{background:#14374b;color:#70ffdb}
.sidebar{position:fixed;z-index:8;left:0;top:75px;bottom:74px;width:334px;display:flex;flex-direction:column;border-right:1px solid rgba(116,167,184,.2);background:linear-gradient(180deg,rgba(6,17,30,.94),rgba(6,16,29,.87));backdrop-filter:blur(14px)}.side-scroll{padding:29px 32px 20px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#325163 transparent;flex:1}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.1px;color:#78f1dd;display:flex;justify-content:space-between}.eyebrow span{color:var(--dim);letter-spacing:1px}
h1{font:700 64px/.94 var(--display);letter-spacing:1.4px;color:#e8f6f3;margin:23px 0 9px}h1 .title-outline{font-size:64px;letter-spacing:-1.5px;color:transparent;-webkit-text-stroke:1px #729aab;margin-left:3px}.subtitle{font-size:11px;line-height:1.68;color:#8da6b5;margin:2px 0 25px;letter-spacing:.3px}
.spec-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:31px;padding:16px 0 14px;gap:10px}.spec-row>div:nth-child(2){padding-left:16px;border-left:1px solid var(--line)}.spec-row small{color:#7795a6;font-size:8px;letter-spacing:1.05px;display:block;font-weight:700}.spec-row b{display:block;margin-top:8px;color:#e5f6f8;font:600 34px var(--display)}.spec-row b span{font-size:13px;letter-spacing:0;color:#7ca7b4;font-weight:500}
.section-header{display:flex;gap:10px;align-items:center;margin:24px 0 18px;letter-spacing:1.2px;font-size:10px;font-weight:800;color:#d9eaf1}.section-header>span{color:var(--aqua);font-size:11px}.section-header i{height:1px;background:var(--line);flex:1}.control-line{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin:17px 0 8px;color:#a9c0cb}.control-line output{color:#8de8d8;font-weight:700;font-size:11px}
input[type=range]{display:block;width:100%;height:17px;appearance:none;background:transparent;margin:0 0 5px;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,#53d9c6 var(--filled,50%),#264254 var(--filled,50%));border-radius:2px}input[type=range]::-moz-range-track{height:3px;background:#264254}input[type=range]::-moz-range-progress{height:3px;background:#53d9c6}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border:2px solid #d0fff1;background:#2fbcab;border-radius:50%;margin-top:-4px;box-shadow:0 0 0 4px #3fcab528}input[type=range]::-moz-range-thumb{width:9px;height:9px;background:#2fbcab;border:2px solid #d0fff1;border-radius:50%}
.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#afc5ce;padding:9px 0;border-bottom:1px solid rgba(87,127,144,.12)}.toggle-row input{appearance:none;position:relative;cursor:pointer;width:32px;height:17px;border-radius:20px;background:#2a4659;border:1px solid #436579;transition:background .2s}.toggle-row input:before{content:'';position:absolute;width:11px;height:11px;left:2px;top:2px;background:#91a6b0;border-radius:50%;transition:transform .2s}.toggle-row input:checked{background:#277f7a;border-color:#53caba}.toggle-row input:checked:before{transform:translateX(15px);background:#d5fff8}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:19px}.button-grid button{font-size:10px;letter-spacing:1.1px;font-weight:700;color:#bee1e5;padding:12px 8px;background:#173145aa;border:1px solid #355669;transition:.15s}.button-grid button:hover{background:#215367;border-color:#59cfcb}
.side-footer{padding:16px 31px;flex:none;font-size:9px;font-weight:700;letter-spacing:1.05px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;color:#8dbfaf;white-space:nowrap}.side-footer small{margin-left:auto;color:#536c7c;font-size:8px}
.right-overlay{position:fixed;z-index:5;right:33px;top:111px;width:246px;pointer-events:none}.corner-label{font-size:9px;color:#b7d9e5;letter-spacing:1.5px;font-weight:700;text-align:right;margin-bottom:18px}.telemetry-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 9px}.telemetry-grid>div{border-top:1px solid #4a79903d;padding-top:10px}.telemetry-grid small{font-size:8px;letter-spacing:.85px;color:#83a8b9;font-weight:700;display:block}.telemetry-grid b{display:block;font:600 30px/1.3 var(--display);color:#d5edf5;margin-top:3px;letter-spacing:.4px}.telemetry-grid em{font:400 11px var(--font);color:#88c4cc;font-style:normal}.mini-graphic{margin:31px 0 0 auto;width:198px;padding:13px 11px;border:1px solid #4b8d9d26;background:rgba(3,14,27,.24);text-align:center}.mini-graphic span{font-size:8px;letter-spacing:1.4px;color:#72a8b8;font-weight:700}.mini-graphic svg{display:block;width:176px;margin:0 auto}
.scene-label{position:fixed;left:370px;bottom:113px;z-index:7;display:flex;align-items:center;gap:13px;padding:14px 20px;min-width:285px;border-left:2px solid #7de8d5;background:linear-gradient(90deg,rgba(7,21,36,.86),rgba(7,21,36,.11));pointer-events:none;transition:opacity .25s}.scene-label-dot{width:8px;height:8px;background:#77dfd1;box-shadow:0 0 0 6px #58ceba24,0 0 14px #7ef9e1;border-radius:50%}.scene-label small{display:block;font-size:8px;color:#82a8b9;letter-spacing:1.4px}.scene-label b{display:block;margin:5px 0 6px;color:#dcf4f0;font-size:11px;letter-spacing:1px}.scene-label.selected{border-color:#f8d08f}.scene-label.selected .scene-label-dot{background:#ffca83;box-shadow:0 0 0 6px #ffc37c24,0 0 14px #ffd29a}
.bottom-nav{position:fixed;z-index:9;bottom:0;left:0;right:0;min-height:74px;display:flex;align-items:center;gap:0;padding:0 32px;background:rgba(5,15,27,.94);border-top:1px solid var(--line);backdrop-filter:blur(12px)}.nav-caption{font-size:9px;letter-spacing:1.4px;font-weight:700;color:#72a4ae;white-space:nowrap;margin-right:24px}.preset{color:#7c9ba9;transition:.2s;background:transparent;border:0;border-top:2px solid transparent;padding:21px 12px 18px;letter-spacing:.5px;font:600 12px var(--display);white-space:nowrap;height:74px}.preset span{font:600 10px var(--font);letter-spacing:.1px;margin-left:8px;color:#b7cbd2}.preset.active,.preset:hover{color:#85ead9;border-top-color:#57cfc0;background:linear-gradient(180deg,#28636a1c,transparent)}.preset.active span{color:#ddf5f1}.nav-hint{font-size:9px;font-weight:700;color:#5c7b8b;margin-left:auto;letter-spacing:.8px;text-align:right;max-width:225px;line-height:1.55}
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#01060fd9;backdrop-filter:blur(9px)}.modal-body{width:min(560px,90vw);padding:35px 42px 42px;position:relative;border:1px solid #356978;background:linear-gradient(145deg,#0c2638,#06111e);box-shadow:0 28px 100px #000a}.modal-body .close{position:absolute;top:18px;right:18px;border:1px solid #4b7383;background:#143243;color:#d0e8ef;width:33px;height:33px}.modal-body h2{font:700 43px var(--display);margin:16px 0}.modal-body p{font-size:12px;line-height:1.9;color:#9cb8c7}.help-list{display:grid;grid-template-columns:140px 1fr;gap:13px;margin-top:29px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.help-list span{font-size:9px;letter-spacing:1px;color:#65dfcd;font-weight:700}.help-list b{font-size:11px;line-height:1.6;font-weight:500;color:#e0e9ed}.modal-body .help-note{font-size:10px;color:#66899b;margin-top:22px}
.loading{position:fixed;inset:0;background:#030b15;z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;color:#cfece7;font-size:11px;letter-spacing:3px;font-weight:700;transition:opacity .6s}.loading-ring{font-size:88px;color:#76ddce;font-weight:300;margin-bottom:12px;text-shadow:0 0 44px #4dffd755;animation:rotate 6s linear infinite}.loading small{font-size:10px;letter-spacing:1.1px;color:#83aab9;font-weight:400}.loading-progress{margin-top:20px;width:230px;height:2px;background:#2c4756}.loading-progress i{height:100%;width:6%;background:#85fae2;display:block;box-shadow:0 0 18px #64f8d9;transition:width .2s}@keyframes rotate{to{transform:rotate(360deg)}}.hidden,.loading.hidden{display:none!important}.error-panel{position:fixed;z-index:40;left:50%;top:50%;transform:translate(-50%,-50%);background:#102235;max-width:520px;width:80vw;padding:30px;border:1px solid #9d5252;box-shadow:0 0 90px #000}.error-panel h2{font:700 34px var(--display);color:#f5b6a8}.error-panel p{line-height:1.6;word-break:break-word}.error-panel small{color:#95afbd}
.hud-hidden .sidebar,.hud-hidden .topbar,.hud-hidden .right-overlay,.hud-hidden .scene-label,.hud-hidden .bottom-nav{display:none}
@media(max-width:1200px){.sidebar{width:292px}.side-scroll{padding-left:24px;padding-right:24px}.scene-label{left:316px}.topbar{padding-left:25px}.nav-hint{display:none}.preset{padding:21px 9px}.right-overlay{right:22px}}
@media(max-width:850px){.topbar{height:65px;padding:0 16px}.brand{min-width:0}.brand b{font-size:19px}.brand small{font-size:7px;letter-spacing:1.1px}.brand-glyph{width:32px;height:32px;font-size:25px}.header-center,.nav-caption{display:none}.top-actions{min-width:0}.sidebar{width:230px;top:65px;bottom:58px}.side-scroll{padding:17px 18px}.sidebar h1{font-size:44px}.sidebar .title-outline{font-size:44px}.spec-row b{font-size:25px}.right-overlay{top:80px;width:140px}.telemetry-grid b{font-size:23px}.mini-graphic{display:none}.scene-label{left:249px;bottom:76px;min-width:0;max-width:calc(100vw - 250px)}.bottom-nav{min-height:58px;padding:0 5px;overflow-x:auto}.preset{height:58px;padding:14px 11px;flex:none}.preset span{font-size:9px}}
@media(max-width:560px){.sidebar{width:100%;height:180px;top:auto;bottom:58px;opacity:.93}.side-scroll{padding:8px 16px}.sidebar h1,.sidebar .subtitle,.sidebar .spec-row,.sidebar .section-header,.sidebar .control-line,.sidebar input[type=range],.sidebar .toggle-row,.side-footer{display:none}.side-scroll>.eyebrow{display:none}.side-scroll .button-grid{display:flex;position:absolute;right:12px;bottom:12px}.right-overlay{top:77px;right:10px}.scene-label{left:12px;bottom:251px}.brand small{display:none}.bottom-nav{min-height:58px}.topbar{height:59px}}