:root{color-scheme:dark;--bg:#030914;--text:#eef6ff;--muted:#7c92aa;--cyan:#47ddf5;--orange:#ff8c51;--line:rgba(147,198,226,.14);--glass:rgba(9,20,35,.80);--shadow:0 20px 70px rgba(0,0,0,.5);font-family:Inter,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
#view{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;background:#030916}.vignette,.grain{pointer-events:none;position:fixed;inset:0}.vignette{background:radial-gradient(ellipse 68% 76% at 47% 47%,transparent 39%,rgba(0,5,15,.44) 100%)}.grain{opacity:.09;background-image:url(../../assets/textures/noise.png);background-size:256px}
.glass{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px)}
.topbar{position:absolute;left:25px;right:25px;top:21px;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-radius:6px;z-index:10}
.brand{display:flex;align-items:center;gap:11px}.brandmark{font-size:29px;color:var(--cyan);filter:drop-shadow(0 0 6px #36cfff66)}.brand strong{font-size:14px;letter-spacing:2px;font-weight:900}.brand strong span{color:var(--cyan)}.brand small{display:block;color:#6c829c;letter-spacing:2.1px;font-size:8px;margin-top:4px}.top-meta{font-size:10px;display:flex;align-items:center;gap:13px;letter-spacing:1.8px;color:#98afc8}.top-meta b{color:#3c5269}.status-dot{width:6px;height:6px;border-radius:50%;background:#39edc2;box-shadow:0 0 9px #38ffcd}.header-actions{display:flex;gap:6px}.iconbtn{height:34px;width:38px;border:1px solid #30445a;color:#d7ebff;background:#152338;font-size:19px}.iconbtn:hover{color:#59e5ff;border-color:#59e5ff}
.hero{position:absolute;left:5%;top:19.8%;width:340px;z-index:2;pointer-events:none}.eyebrow{font-family:ui-monospace,Menlo,monospace;color:var(--cyan);font-size:10px;font-weight:600;letter-spacing:2px}.eyebrow-line{display:inline-block;width:19px;height:1px;background:var(--cyan);vertical-align:middle;margin-right:10px}.hero h1{margin:16px 0 3px;line-height:1.05;font-size:clamp(38px,3.9vw,62px);font-weight:850;letter-spacing:-2.8px;text-shadow:0 0 45px #00121b}.name-bar{display:block;color:var(--cyan);font-size:.36em;letter-spacing:6px;margin-top:10px}.hero-strap{margin-top:22px;letter-spacing:3px;font-size:11px;color:#cce9f5}.hero p{font-size:12px;line-height:1.95;color:#8ba2b8;max-width:285px;margin-top:17px}.hero-tags{display:flex;gap:24px;margin-top:25px}.hero-tags>span{font-size:22px;font-weight:700;color:#e0f7ff}.hero-tags small{font-size:8px;letter-spacing:1px;color:#768ca3;display:block;margin-top:5px}.scene-label{position:absolute;font-family:ui-monospace,Consolas,monospace;color:#698aa9;letter-spacing:2px;font-size:9px;left:5%;top:13%;z-index:2}
.panel{position:absolute;right:25px;top:104px;bottom:105px;width:344px;overflow-y:auto;overflow-x:hidden;z-index:10;border-radius:6px;scrollbar-color:#324b65 transparent;scrollbar-width:thin;padding:22px 21px 18px}.panel-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-eyebrow{font-size:9px;letter-spacing:2px}.panel h2{font-size:18px;letter-spacing:1.25px;margin:8px 0 0;font-weight:800}.module-id{font-size:9px;color:#879eaf;white-space:nowrap;font-family:ui-monospace,monospace}.modebar{display:flex;gap:3px;padding:3px;background:rgba(0,0,0,.42);border:1px solid #243b50;margin:22px 0 25px}.modebar button{background:transparent;border:0;color:#829ab0;flex:1;letter-spacing:1px;font-size:9px;font-weight:750;height:32px}.modebar button.active{background:#194357;color:#b3f5ff;box-shadow:inset 0 0 0 1px #316d82}.modebar button:hover{color:white}
.section-label{font:600 10px ui-monospace,monospace;letter-spacing:1.7px;color:#5d8ca6;display:flex;gap:10px;align-items:center;margin-bottom:20px}.section-label span{color:#cde0ee}.section-label i{flex:1;height:1px;background:var(--line)}.control-block{margin:0 0 22px}.control-block.compact{margin-top:22px}.slider-wrap{margin-bottom:20px}.slider-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;gap:5px}.slider-head label{color:#c4d5e3;font-size:11px;letter-spacing:.25px}.value{font-family:ui-monospace,Consolas,monospace;font-weight:700;color:var(--cyan);font-size:11px}.slider-head em{font-size:9px;color:#829ba9;font-style:normal;margin-left:3px}.range{width:100%;height:4px;margin:0;display:block;appearance:none;-webkit-appearance:none;outline:0;background:linear-gradient(90deg,#1dd4ef var(--fill),#273b53 var(--fill));border-radius:0;cursor:pointer}.range::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#d5faff;border:2px solid #42d9ff;border-radius:2px;box-shadow:0 0 10px #20d4ff77}.range::-moz-range-thumb{width:9px;height:9px;background:#d5faff;border:2px solid #42d9ff;border-radius:2px}.switches{display:grid;gap:11px}.switchrow{display:flex;align-items:center;color:#b6cadb;font-size:11px;justify-content:space-between;cursor:pointer}.switchrow input{position:absolute;opacity:0;pointer-events:none}.toggle{position:relative;background:#1d2f41;height:17px;width:32px;border:1px solid #43617c;transition:.2s}.toggle:before{content:"";position:absolute;left:3px;top:3px;width:9px;height:9px;background:#7d9ab2;transition:.2s}.switchrow input:checked+.toggle{background:#0b5264;border-color:#24c5e8}.switchrow input:checked+.toggle:before{left:18px;background:#6ceaff;box-shadow:0 0 8px #49e4ff}.quality{display:flex;justify-content:space-between;align-items:center;margin-top:21px;font-size:9px;letter-spacing:1px;color:#98aec2}.quality-options{display:flex;gap:4px}.quality button{border:1px solid #33475d;background:#111f32;color:#809bb0;font-size:9px;padding:6px 10px}.quality button.active{border-color:#3684a0;background:#14394c;color:#adf2ff}.control-footer{border-top:1px solid #294054;padding-top:16px;display:flex;gap:8px}.primarybtn{background:#20bddb;border:1px solid #58e4fb;color:#061522;letter-spacing:1.3px;font-size:10px;font-weight:800;padding:13px;flex:1}.primarybtn:hover{background:#78ecff}.primarybtn span{font-size:13px;margin-right:8px}.secondarybtn{width:46px;border:1px solid #435c72;background:#182738;color:#d1ecf3;font-size:20px}
.bottom{position:absolute;z-index:7;bottom:20px;left:25px;right:25px;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 23px;border-radius:6px}.telemetry{display:flex;gap:clamp(20px,3.4vw,65px);align-items:center}.readout span{display:block;font-size:8px;color:#7b96ab;letter-spacing:1.6px;margin-bottom:5px}.readout strong{font-size:24px;font-family:ui-monospace,Consolas,monospace;letter-spacing:-.9px;font-weight:650;color:#edfbff}.readout small{color:var(--cyan);font-size:11px;margin-left:3px}.lower-right{display:flex;align-items:center;gap:13px}.orbit-icon{font-size:35px;color:#35b9d5}.lower-right strong{display:block;font-size:10px;letter-spacing:1.5px}.lower-right small{display:block;font-size:8px;letter-spacing:.7px;color:#7d96a9;margin-top:6px}.lower-right>span:last-child{border-left:1px solid var(--line);padding-left:14px;font:10px ui-monospace,monospace;color:#5f91a4}
.hotspots{position:absolute;inset:0;pointer-events:none;z-index:4}.hotspot{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:1px solid rgba(119,225,244,.5);border-radius:4px;background:rgba(7,21,34,.74);color:#ccebf5;padding:6px 9px 6px 28px;text-transform:uppercase;white-space:nowrap;font-size:9px;letter-spacing:1.15px;backdrop-filter:blur(8px);box-shadow:0 0 20px #0007;transition:opacity .2s,background .2s}.hotspot:before{content:"+";position:absolute;left:8px;top:3px;font-size:18px;color:#56edff}.hotspot:hover{background:rgba(18,78,103,.9);border-color:#8af1ff}.popup{position:absolute;z-index:20;top:43%;left:34%;width:270px;padding:18px 20px;border-radius:4px;box-shadow:var(--shadow)}.popup[hidden]{display:none}.popup h3{font-size:17px;line-height:1.25;margin:13px 0 10px}.popup p{font-size:12px;line-height:1.7;color:#a1b6c7}.part-spec{border-top:1px solid #284357;padding-top:11px;color:#49dff5;font:10px ui-monospace,monospace;letter-spacing:1px}.popup-close{position:absolute;right:10px;top:9px;border:0;background:transparent;color:#afc9d5;font-size:20px}.mobile-toggle{display:none}.toast{position:fixed;bottom:108px;left:50%;transform:translateX(-50%);padding:10px 19px;background:#0c283a;border:1px solid #1d8caa;color:#e9faff;font-size:12px;letter-spacing:.5px;opacity:0;pointer-events:none;transition:opacity .3s;z-index:30}.toast.visible{opacity:1}
@media(max-width:1250px){.hero{left:34px;width:260px}.hero h1{font-size:42px}.panel{width:306px;right:18px}.topbar{left:18px;right:18px}.bottom{left:18px;right:18px}.telemetry{gap:16px}.readout strong{font-size:18px}.lower-right small{display:none}}
@media(max-width:860px){.topbar{top:10px;height:54px;left:10px;right:10px;padding:0 10px}.top-meta{display:none}.hero{left:18px;top:14%;width:220px}.hero h1{font-size:35px}.hero p{font-size:11px;max-width:200px}.hero-strap{font-size:9px;letter-spacing:1.8px}.hero-tags{gap:14px}.hero-tags>span{font-size:16px}.scene-label{display:none}.panel{top:73px;right:10px;bottom:93px;width:min(335px,calc(100vw - 20px));display:none}.panel.mobile-open{display:block}.mobile-toggle{position:absolute;display:block;bottom:101px;right:12px;z-index:14}.mobile-toggle button{background:#0d3e53;border:1px solid #29abc7;padding:12px 18px;font-size:10px;letter-spacing:1.3px;color:#c8faff;font-weight:800}.bottom{left:10px;right:10px;bottom:10px;height:71px;padding:0 12px}.lower-right{display:none}.telemetry{justify-content:space-between;width:100%;gap:4px}.readout span{font-size:7px;letter-spacing:.7px}.readout strong{font-size:17px}.readout small{font-size:9px}.hotspot{font-size:8px;padding:5px 7px 5px 22px}.hotspot:before{left:6px;top:2px}.popup{left:18px;top:auto;bottom:181px;width:260px}}
@media(max-width:470px){.hero{top:16%;width:190px}.hero p{display:none}.hero-tags{margin-top:17px}.hero h1{font-size:33px}.eyebrow{font-size:8px}.hero-strap{font-size:8px}.brand strong{font-size:12px}.header-actions .iconbtn{width:29px;height:31px}.readout span{font-size:6px}.readout strong{font-size:15px}}
body.embedded .hero,body.embedded .topbar,body.embedded .bottom,body.embedded .scene-label{display:none}body.embedded .panel{right:14px;top:14px;bottom:14px}body.embedded .mobile-toggle{bottom:14px}body.embedded .popup{left:25px}
