:root{--bg:#06131f;--ink:#e3eef7;--muted:#8297a7;--line:rgba(147,192,209,.17);--panel:rgba(8,25,38,.88);--accent:#64e0ec;--amber:#ffc27e;--soft:#142c3c;--mono:'DM Sans',Arial,sans-serif;--headline:'Barlow Condensed','Arial Narrow',Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:13px var(--mono);overflow:hidden}button,input{font:inherit}button{cursor:pointer;transition:background .2s,color .2s,border-color .2s}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#app{height:100dvh;min-height:660px;overflow:hidden;position:relative;background:linear-gradient(130deg,#061722,#1a3443)}.viewport{position:absolute;inset:0;overflow:hidden}.viewport canvas{display:block;width:100%;height:100%;touch-action:none}.viewport:after{content:'';pointer-events:none;position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,transparent 20%,rgba(2,13,24,.10) 65%,rgba(1,7,14,.48) 100%)}
.topbar{position:absolute;z-index:10;top:0;left:0;right:0;height:94px;padding:17px 34px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(4,16,29,.97),rgba(5,20,32,.83));backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:14px;min-width:330px}.brand img{width:48px;height:48px}.brand .eyebrow,.micro-label{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.19em}.sep{opacity:.5;margin:0 5px}.brand h1{font:700 32px/.95 var(--headline);letter-spacing:.045em;margin:7px 0 0}.brand h1 em{font:600 16px var(--headline);font-style:normal;color:var(--amber);letter-spacing:.1em;padding-left:5px}.header-stats{display:flex;margin-left:auto;gap:46px}.header-stats>div{display:flex;flex-direction:column;gap:7px}.header-stats span{font-size:9px;color:var(--muted);letter-spacing:.16em;font-weight:700}.header-stats strong{font-family:var(--headline);font-size:18px;font-weight:600;letter-spacing:.07em}.header-stats strong small{font-size:11px;color:var(--muted);padding-left:3px}.header-stats strong i{display:inline-block;width:7px;height:7px;background:#81e5c5;border-radius:100%;box-shadow:0 0 10px #81e5c5;margin-right:6px}.header-stats strong.warning{color:#ffc27e}.header-stats strong.warning i{background:#ffc27e;box-shadow:0 0 10px #ffc27e}.icon-button{border:1px solid var(--line);background:rgba(42,84,103,.24);width:34px;height:34px;border-radius:50%;color:var(--ink);font-size:18px}
.panel{background:var(--panel);border:1px solid var(--line);box-shadow:0 14px 70px #0004;backdrop-filter:blur(22px);z-index:7}.control-panel{position:absolute;top:113px;left:24px;width:310px;padding:22px 23px 21px;border-radius:8px;max-height:calc(100dvh - 204px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#426172 transparent}.panel-heading{display:flex;justify-content:space-between;align-items:center}.control-led{display:inline-block;width:7px;height:7px;background:#78e7b8;border-radius:100%;box-shadow:0 0 0 4px #78e7b81c,0 0 15px #78e7b8}.control-panel h2,.inspector h2{font-family:var(--headline);text-transform:uppercase;font-size:27px;letter-spacing:.02em;font-weight:600;line-height:1.02;margin:20px 0 9px}.panel-intro{font-size:11px;line-height:1.65;color:#97aebd;margin:0 0 25px}.control-field{margin-bottom:22px}.field-title{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:12px}.field-title label{font-size:11px;font-weight:600;color:#cadae2}.field-title output{font-family:var(--headline);font-size:17px;color:var(--accent);font-weight:700;white-space:nowrap}.control-field input[type=range]{width:100%;height:4px;appearance:none;-webkit-appearance:none;background:linear-gradient(90deg,#69dce9 0%,#69dce9 50%,#324a59 50%,#324a59);border-radius:6px;cursor:pointer}.control-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#e9f8fb;border:3px solid #37bdcf;box-shadow:0 0 0 4px #64e0ec15}.control-field input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:100%;background:#edfafa;border:2px solid #37bdcf}.minmax{display:flex;justify-content:space-between;color:#718c9f;font-size:9px;letter-spacing:.07em;margin-top:10px}.divider-line{height:1px;background:var(--line);margin:20px 0}.section-header,.subhead{display:flex;justify-content:space-between;align-items:center;color:#acc0ce;letter-spacing:.15em;font-size:10px;font-weight:700;margin-bottom:13px}.section-header span{color:var(--muted)}.toggle-row{position:relative;display:flex;align-items:center;justify-content:space-between;padding:9px 0;color:#cedce6;font-size:11px;cursor:pointer}.toggle-row>span:first-child{display:flex;align-items:center;gap:9px}.toggle-row input{opacity:0;position:absolute;right:0}.layer-mark{display:inline-block;width:8px;height:8px;border-radius:2px;background:#59bace}.layer-mark.blue{background:#668fca}.layer-mark.amber{background:#e7ae65}.layer-mark.green{background:#84c4a5}.switch{width:29px;height:16px;border-radius:99px;background:#385266;position:relative;transition:.2s;flex-shrink:0}.switch:after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;background:#dcebf3;border-radius:100%;transition:.2s}.toggle-row input:checked+.switch{background:#378b9d}.toggle-row input:checked+.switch:after{transform:translateX(13px)}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mode-button,.secondary-wide,.focus-button{background:#133142;border:1px solid #315062;color:#d6e9f1;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:.07em;padding:12px 8px}.mode-button span{font-size:15px;margin-right:3px;color:var(--accent)}.mode-button[aria-pressed=true]{color:#0c2636;background:#9aeaf1;border-color:#9aeaf1}.mode-button[aria-pressed=true] span{color:#0c2636}.mode-button:hover,.secondary-wide:hover{background:#24506a}.secondary-wide{width:100%;margin-top:14px}.small-footnote{margin-top:19px;color:#5f8191;font-size:9px;line-height:1.55}
.inspector{position:absolute;top:113px;right:24px;width:290px;padding:21px 22px 23px;border-radius:8px;max-height:calc(100dvh - 204px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#426172 transparent}.live-word{color:#9ce8b5;font-size:9px;letter-spacing:.1em}.inspect-art{height:112px;margin:20px 0 19px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 50%,#183d51,#102637 50%,#092030 65%);border:1px solid var(--line)}.inspect-radar{position:absolute;inset:-55px 30px;border-radius:50%;border:1px solid #5bc4d126;box-shadow:0 0 0 23px #72d2e60c,0 0 0 46px #72d2e60d}.inspect-radar:after{content:'';position:absolute;inset:31px;border-radius:100%;border:1px dashed #76dfef73;animation:spin 22s linear infinite}.inspect-symbol{position:absolute;font-size:54px;font-weight:100;line-height:1;top:20px;left:calc(50% - 22px);color:#8be1ed}.inspect-art>span{position:absolute;bottom:10px;left:12px;color:#7eafc2;font-size:8px;letter-spacing:.18em}.inspector h2{font-size:26px;margin:12px 0 10px}.inspector p{color:#8ea8b8;font-size:11px;line-height:1.65;margin:0 0 14px}.subhead{margin-bottom:10px}.subhead span{color:#6c8e9f}.specs{display:grid;gap:0;border-top:1px solid var(--line)}.specs>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-size:11px}.specs span{color:#7e98a7}.specs strong{color:#cfe6f0;font-weight:600;text-align:right}.focus-button{width:100%;background:#174d5a;border-color:#3b9aaa;color:#b9f4fb;margin-top:14px}.focus-button:hover{background:#247b8b}.telemetry-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.telemetry-grid>div{min-height:74px;background:#0d2736;border:1px solid #24485a;padding:13px 10px}.telemetry-grid span{display:block;color:#7293a6;font-size:9px;font-weight:700;letter-spacing:.07em;white-space:nowrap}.telemetry-grid strong{display:block;font:600 26px var(--headline);letter-spacing:.02em;margin-top:8px;color:#e9f6fc}.telemetry-grid strong small{font-size:11px;color:#87aabd}.energy-meter{margin-top:19px}.energy-meter .field-title{margin-bottom:9px}.energy-meter label{font-size:9px;letter-spacing:.13em;color:#86a3b5}.energy-meter output{font-size:13px;color:#9adeb6}.meter{height:6px;background:#23404d;overflow:hidden;border-radius:5px}.meter>div{height:100%;width:0%;background:linear-gradient(90deg,#71dec9,#ead27f,#eb856a);transition:width .25s}
.scene-title{z-index:4;position:absolute;bottom:103px;left:365px;pointer-events:none;text-shadow:0 2px 15px #0015}.tag{font-size:10px;letter-spacing:.18em;color:#a3dfe7;font-weight:700}.scene-title h2{font:800 clamp(30px,3.6vw,61px)/.95 var(--headline);letter-spacing:.02em;margin:9px 0 10px;text-transform:uppercase}.scene-title h2 em{color:#ace8ef;font-style:normal}.scene-title p{font-size:11px;line-height:1.6;color:#bed2e1}.toolbar{position:absolute;z-index:8;bottom:21px;left:365px;right:339px;display:flex;justify-content:space-between;gap:16px;align-items:center;background:#091e2ddd;border:1px solid #3c5c6d80;padding:9px 12px;backdrop-filter:blur(20px);border-radius:5px}.view-buttons,.action-buttons{display:flex;align-items:center;gap:5px}.view-buttons>span{color:#7a99aa;font-size:9px;font-weight:700;letter-spacing:.15em;margin:0 12px 0 3px}.toolbar button{white-space:nowrap;font-size:10px;font-weight:700;letter-spacing:.04em;padding:10px 11px;color:#a5c2d1;background:transparent;border:1px solid transparent;border-radius:3px}.toolbar button.active{background:#1b4555;border-color:#347586;color:#a1f4ff}.toolbar button:hover{background:#1b4555;color:white}.action-buttons button{border:1px solid #3b5e70}.corner-annotation{position:absolute;right:350px;top:110px;z-index:5;color:#b4cbd5;font-size:9px;letter-spacing:.12em;display:flex;gap:18px;text-shadow:0 2px 10px #001}.corner-annotation span i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#89e6cb;margin-right:5px}.labels{position:absolute;inset:0;pointer-events:none;z-index:3}.world-label{position:absolute;left:-999px;top:-999px;display:flex;align-items:center;gap:8px;background:#0d2839bd;color:#def3fc;border:1px solid #7ca5b74a;padding:6px 9px;white-space:nowrap;font-size:9px;letter-spacing:.08em;backdrop-filter:blur(7px);transform:translate(8px,-26px)}.world-label b{font-weight:600}.world-label small{color:#7fa6b6;font-size:8px}.signal-dot{width:7px;height:7px;background:#70dce9;border-radius:100%;box-shadow:0 0 10px #70dce9}.signal-dot.amber{background:#edbd7a;box-shadow:0 0 10px #edbd7a}.scan-crosshair{position:absolute;left:50%;top:50%;width:16px;height:16px;opacity:.38;z-index:2;pointer-events:none;transform:translate(-50%,-50%)}.scan-crosshair span:first-child{position:absolute;top:7px;left:0;width:16px;height:1px;background:#c1e3ed}.scan-crosshair span:last-child{position:absolute;top:0;left:7px;height:16px;width:1px;background:#c1e3ed}
.toast{z-index:50;position:absolute;bottom:85px;left:50%;transform:translateX(-50%);background:#16404e;color:#b6f3f8;border:1px solid #5faebb;padding:10px 17px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .3s}.toast.show{opacity:1}.modal-backdrop{position:absolute;inset:0;background:#020912c9;backdrop-filter:blur(8px);display:grid;place-items:center;z-index:100}.hidden{display:none!important}.help-dialog{position:relative;padding:31px;background:#0c2534;border:1px solid #5b8199;max-width:460px;width:calc(100% - 36px);box-shadow:0 40px 100px #0009}.help-dialog h2{font:700 38px var(--headline);margin:11px 0 19px}.help-rows>div{display:flex;justify-content:space-between;gap:13px;padding:10px 0;border-bottom:1px solid var(--line);font-size:11px}.help-rows>div b{color:#cef2f5}.help-rows>div span{color:#93adbd;text-align:right}.help-dialog p{font-size:10px;color:#819eae;line-height:1.6;margin-top:22px}.close-btn{position:absolute;right:16px;top:11px;color:#fff;border:0;background:transparent;font-size:28px}.fatal-error{position:absolute;z-index:100;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #df9672;background:#271d20;padding:25px;max-width:540px;line-height:1.6}.viewport canvas.grabbing{cursor:grabbing}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1420px){.header-stats{gap:24px}.control-panel{width:278px;left:14px;padding:18px}.inspector{width:269px;right:14px;padding:18px}.scene-title{left:310px}.toolbar{left:310px;right:298px}.corner-annotation{right:302px}}
@media(max-width:1120px){.topbar{height:78px;padding:12px 19px}.brand{min-width:260px}.brand h1{font-size:26px}.header-stats>div:nth-child(2){display:none}.control-panel{top:90px;width:248px;max-height:calc(100dvh - 180px)}.inspector{top:90px;width:245px;max-height:calc(100dvh - 180px)}.scene-title{left:283px;bottom:104px}.scene-title h2{font-size:36px}.toolbar{left:282px;right:274px;flex-wrap:wrap}.toolbar button{padding:9px 6px}.corner-annotation{right:280px;top:90px}}
@media(max-width:850px){body{overflow:auto}#app{min-height:850px;height:100dvh}.topbar{padding:10px 15px}.header-stats{display:none}.viewport{inset:0 0 225px}.control-panel{top:auto;left:10px;right:auto;bottom:14px;width:calc(50% - 15px);height:218px;overflow-y:auto;max-height:none}.inspector{top:auto;right:10px;bottom:14px;width:calc(50% - 15px);height:218px;overflow-y:auto;max-height:none}.toolbar{bottom:245px;left:12px;right:12px}.scene-title{left:20px;bottom:318px}.scene-title h2{font-size:39px}.corner-annotation{right:15px;top:87px}.control-panel h2{font-size:24px}.inspector .inspect-art{display:none}.small-footnote{display:none}}
@media(max-width:570px){#app{min-height:800px}.brand{min-width:0}.brand img{width:37px;height:37px}.brand h1{font-size:23px}.brand .eyebrow{font-size:8px}.topbar{height:68px}.scene-title{bottom:340px}.scene-title h2{font-size:29px}.scene-title p{display:none}.toolbar{bottom:245px;gap:5px;justify-content:center}.view-buttons{width:100%;justify-content:center}.action-buttons{width:100%;justify-content:center}.view-buttons>span{display:none}.toolbar button{font-size:9px;padding:7px 5px}.control-panel,.inspector{height:218px;padding:13px}.micro-label{font-size:8px}.panel-intro{margin-bottom:9px}.control-panel h2,.inspector h2{margin-top:11px}.corner-annotation{font-size:8px}.corner-annotation span:first-child{display:none}}