:root{--bg:#081a23;--panel:#071b24eb;--panel2:#0c222de8;--ink:#eaf4f2;--muted:#92a8af;--hair:#355361;--mint:#6bdbc5;--amber:#edc27b;--highlight:#c4ece1;--side:308px}
*{box-sizing:border-box}html,body{margin:0;overflow:hidden;width:100%;height:100%;color:var(--ink);background:var(--bg);font-family:'DM Sans',system-ui,sans-serif;font-size:12px}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:3px}#viewport{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#08212a51,transparent 42%,transparent 70%,#06192326),linear-gradient(180deg,#06192345,transparent 20%,transparent 75%,#06192385)}
.topbar{position:absolute;left:0;top:0;right:0;height:77px;border-bottom:1px solid #8cc0bd35;background:#071b24dd;display:flex;align-items:center;padding:0 31px;gap:25px;z-index:5;backdrop-filter:blur(17px)}.brand{display:flex;align-items:center;gap:15px;color:inherit;text-decoration:none}.brandmark{width:48px;height:48px;display:grid;place-items:center;letter-spacing:-3px;font-weight:800;font-size:23px;font-family:'Barlow Condensed',sans-serif;color:var(--mint);border:1px solid #65ceb888;background:#14333d;clip-path:polygon(0 0,92% 0,100% 15%,100% 100%,8% 100%,0 85%)}.brandmark span{color:#d3b982}.brand strong{display:block;font-size:16px;letter-spacing:3.3px;font-weight:700;line-height:1.2}.brand small{font-family:'Barlow Condensed',sans-serif;display:block;color:#78a2ab;font-size:10px;letter-spacing:2.4px;margin-top:4px;font-weight:600}.top-divider{width:1px;height:35px;background:#3c5360}.project-label{font-family:'Barlow Condensed';letter-spacing:1.4px;font-weight:600;font-size:14px;color:#bbccd0}.project-label span{color:#59818d;margin:0 10px}.top-right{margin-left:auto;display:flex;gap:12px;align-items:center}.chip{border:1px solid #47706a;font-family:'Barlow Condensed';font-size:12px;letter-spacing:1px;padding:9px 12px;display:inline-flex;gap:9px;align-items:center;color:var(--mint)}.chip.darkchip{border-color:#364f5a;color:#9cb9bd}.pulse{width:6px;height:6px;border-radius:100%;background:#6ce5b8;box-shadow:0 0 10px #6ce5b8;animation:pulse 2s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}.icon-btn{background:transparent;border:1px solid #53707888;color:#b5d4d5;width:28px;height:28px;font-weight:700;border-radius:3px}
.left-panel{position:absolute;z-index:4;top:94px;left:18px;bottom:122px;width:var(--side);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3a5c64 transparent;border:1px solid #63858860;background:var(--panel);backdrop-filter:blur(22px);padding:22px 22px 18px;box-shadow:0 12px 65px #07161b70;display:flex;flex-direction:column}.eyebrow,.label-row,.control-label{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:2px;font-weight:600;color:var(--mint)}.eyebrow{display:flex;justify-content:space-between}.eyebrow span{color:#6c8d97}.left-panel h1{font-family:'Barlow Condensed',sans-serif;font-size:38px;line-height:.98;text-transform:uppercase;letter-spacing:.15px;font-weight:700;margin:21px 0 13px}.left-panel h1 em{color:var(--mint);font-style:normal}.intro{color:#a3b7bb;line-height:1.65;font-size:11px;margin:0 0 13px}.divider{height:1px;flex-shrink:0;background:#49717a56;margin:18px 0}.label-row{display:flex;justify-content:space-between;align-items:center;color:#d9e8e5;font-size:11px;letter-spacing:1.6px;margin-bottom:10px}.label-row .subtle{font-size:10px;color:#709aa0}.nav-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.view-button{text-align:left;height:55px;position:relative;border:1px solid #405b6688;background:#112a34b5;color:#cad9d9;padding:10px 8px 8px;display:flex;gap:8px;align-items:center;transition:.17s}.view-button .view-icon{display:grid;place-items:center;width:25px;height:27px;flex-shrink:0;border:1px solid #48656c;color:#91b6ba;font-size:19px}.view-button span:nth-child(2){font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.7px;line-height:1.05}.view-button small{position:absolute;right:6px;top:4px;font-family:'Barlow Condensed';font-size:10px;color:#5f7f88}.view-button:hover,.view-button.active{background:#204c51;border-color:var(--mint);color:#fff}.view-button.active .view-icon{color:var(--mint);border-color:var(--mint)}.layer-list{overflow:auto;scrollbar-width:thin;scrollbar-color:#45616c transparent;min-height:95px;padding-right:4px}.layer-option{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid #36525c51;color:#adbec2;cursor:pointer;font-family:'Barlow Condensed';font-size:13px;letter-spacing:.5px}.layer-option input{appearance:none;width:13px;height:13px;flex-shrink:0;border:1px solid #6b9a9d;background:#0c2932;cursor:pointer;position:relative}.layer-option input:checked{background:#7ce1cd;border-color:#7ce1cd}.layer-option input:checked:after{content:'✓';position:absolute;inset:0;color:#0a3032;font-size:11px;font-weight:700;text-align:center;line-height:12px}.layer-option strong{margin-left:auto;font-weight:500;font-family:'DM Sans';color:#648d93;font-size:10px}.left-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:16px}.mapchip{font-family:'Barlow Condensed';font-size:10px;color:#6898a1;letter-spacing:1px}.mapchip b{font-weight:600;color:#c2dbda}
.inspector{position:absolute;z-index:4;width:265px;right:18px;top:95px;background:#071b24e8;backdrop-filter:blur(18px);border:1px solid #66878a6e;padding:20px;box-shadow:0 12px 60px #07151b77}.inspector-head{font-family:'Barlow Condensed';font-size:12px;letter-spacing:1.7px;color:#8bb9b8;display:flex;justify-content:space-between;align-items:center}.tiny-square{display:inline-block;width:7px;height:7px;background:var(--mint);margin-right:8px}.inspect-id{margin-top:30px;color:#78a1aa;font-size:10px;letter-spacing:1.8px;font-family:'Barlow Condensed'}.inspector h2{font-family:'Barlow Condensed';font-size:27px;line-height:1;letter-spacing:.3px;text-transform:uppercase;margin:8px 0 12px}.inspector p{font-size:11px;line-height:1.6;color:#98b4b9;margin:0 0 18px}.inspect-properties{border-top:1px solid #405961}.inspect-properties div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #40596172;padding:11px 0}.inspect-properties span{font-family:'Barlow Condensed';letter-spacing:1px;color:#769ca4;font-size:11px}.inspect-properties strong{text-align:right;font-size:10px;font-weight:600;color:#d3e4e4}.action-secondary{margin-top:18px;width:100%;height:38px;border:1px solid #6ecfbb;background:#1b464b;color:#c9f0e8;font-size:11px;letter-spacing:1px;font-weight:700;display:flex;align-items:center;justify-content:space-between;padding:0 13px}.action-secondary:hover{background:#306c6a}.scale-display{position:absolute;right:27px;bottom:133px;display:flex;align-items:center;gap:8px;color:#bed6d6;font-family:'Barlow Condensed';font-weight:500;font-size:12px;letter-spacing:1.4px;text-shadow:0 1px 5px #001}.scale-display span{color:var(--mint)}.scale-display i{display:block;width:46px;height:7px;border-top:2px solid #d2e3e3;border-left:2px solid #d2e3e3;border-right:2px solid #d2e3e3}.compass{position:absolute;top:92px;left:50%;color:#eff3e8;font-family:'Barlow Condensed';font-size:13px;display:flex;flex-direction:column;align-items:center;text-shadow:0 2px 5px #0008;pointer-events:none}.compass span{color:var(--mint);font-size:16px}.hud-crosshair{position:absolute;left:50%;top:50%;font-size:16px;color:#fff7;pointer-events:none}.world-label{position:absolute;left:0;top:0;white-space:nowrap;padding:6px 9px;background:#0b2834d9;border:1px solid #81b0b574;border-left:2px solid var(--mint);font-family:'Barlow Condensed';font-weight:700;letter-spacing:.8px;font-size:12px;color:#d7ece9;pointer-events:none;text-shadow:0 1px 4px #001}.view-labels{position:absolute;pointer-events:none;inset:0;overflow:hidden}
.controls{position:absolute;bottom:23px;left:18px;right:18px;z-index:5;height:88px;display:flex;align-items:stretch;gap:0;border:1px solid #77939382;background:#071a23ed;backdrop-filter:blur(20px);box-shadow:0 10px 30px #06131a8a}.control-main{width:34%;padding:13px 22px;min-width:250px}.control-main .control-label{display:flex;justify-content:space-between}.control-main .control-label strong{letter-spacing:1.3px;color:#ecf3e9;font-size:15px}.transport{display:flex;align-items:center;gap:14px;margin-top:9px}.play-btn{background:#62c9b5;color:#092c2a;width:29px;height:27px;border:0;font-size:12px;font-weight:800}.control-small{font-family:'Barlow Condensed';font-size:14px;color:#c9e3df;min-width:27px}.transport input[type=range]{flex:1}.control-group{border-left:1px solid #37535d;padding:17px 24px;min-width:165px;display:flex;flex-direction:column;gap:14px}.control-group.quality-group{flex:1}.control-group.last{min-width:200px}.slider-line{display:flex;gap:15px;align-items:center;font-family:'Barlow Condensed';font-size:11px;color:#b1c9cb;letter-spacing:1px}.slider-line input{flex:1;width:70px}.btn-group{display:flex;gap:5px}.btn-group button{background:#0a2731;border:1px solid #44626a;color:#adc5c7;min-width:42px;height:30px;padding:0 9px;font-family:'Barlow Condensed';font-size:12px;letter-spacing:.7px;font-weight:600}.btn-group button:hover,.btn-group button.active{color:#052526;background:var(--mint);border-color:var(--mint)}input[type=range]{height:4px;accent-color:#7fd9c9;cursor:pointer}.bottom-credit{position:absolute;bottom:4px;left:20px;font-family:'Barlow Condensed';font-size:10px;letter-spacing:1.7px;color:#78949b}.bottom-credit span{color:var(--mint);margin:0 8px}.loading{position:absolute;inset:0;background:#061923;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .5s;pointer-events:none}.loading.done{opacity:0}.loading-bar{position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,var(--mint),transparent);animation:bar 2s ease-in-out infinite}@keyframes bar{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.load-symbol{font-family:'Barlow Condensed';font-size:70px;color:#8ae1ce;letter-spacing:3px;font-weight:700}.load-symbol span{color:#5b8190}.loading p{font-family:'Barlow Condensed';font-size:16px;letter-spacing:3px;color:#cde0de}.loading small{font-family:'Barlow Condensed';letter-spacing:1px;color:#6f9fa8}.modal{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;background:#041218be;backdrop-filter:blur(7px)}.modal.hide{display:none}.help-card{position:relative;width:min(490px,90vw);border:1px solid #5aa89e;background:#08242e;padding:32px 36px;box-shadow:0 20px 70px #0009}.help-card h2{font-family:'Barlow Condensed';font-size:34px;text-transform:uppercase}.help-keys{display:grid;grid-template-columns:1fr 1fr;gap:7px}.help-keys p{display:flex;align-items:center;gap:10px;font-size:11px;color:#b3d1ce}.help-keys kbd{border:1px solid #678487;background:#103340;padding:5px;min-width:58px;text-align:center;font:12px 'Barlow Condensed'}.help-note{line-height:1.7;color:#7fabae;margin-top:20px}.close-modal{position:absolute;right:18px;top:16px;border:0;background:transparent;font-size:22px}
@media(max-width:1190px){.left-panel{width:265px;padding:17px}.left-panel h1{font-size:33px}.inspector{width:226px}.control-group{padding-left:13px;padding-right:13px}.project-label{display:none}}@media(max-width:900px){.topbar{padding:0 14px;height:63px}.top-divider,.chip.darkchip{display:none}.left-panel{top:73px;left:10px;bottom:115px;width:215px}.inspector{right:8px;top:74px;width:195px;padding:12px}.inspector h2{font-size:21px}.control-main{width:36%;min-width:200px}.control-group{min-width:110px}.control-group.last{display:none}.scale-display{right:14px;bottom:120px}.controls{left:8px;right:8px;bottom:15px;height:86px}.brand strong{font-size:13px}.brandmark{height:36px;width:36px;font-size:18px}.intro{display:none}.left-panel h1{font-size:28px}.top-right .chip{display:none}}@media(max-width:620px){.left-panel{width:185px;max-height:45vh;bottom:auto}.inspector{width:180px;right:7px;top:73px}.inspector p{display:none}.nav-grid{grid-template-columns:1fr 1fr}.view-button{height:47px}.view-button .view-icon{display:none}.controls{height:84px}.quality-group{display:none}.control-main{width:66%;min-width:0}.control-group{flex:1}.world-label{display:none}}