:root{color-scheme:dark;--panel:rgba(11,19,30,.75);--stroke:rgba(167,190,214,.19);--sub:#9cabbc;--accent:#efb17a;--ice:#b7d5da;--white:#edf1ef;--dark:#070c14;font-family:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif}
*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#08111d;color:var(--white)}button,select,input{font:inherit}button{cursor:pointer}canvas#scene{display:block;width:100%;height:100%;outline:0}#rain{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}#vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(1,8,15,.27),transparent 45%,rgba(1,8,15,.15)),linear-gradient(0deg,rgba(1,9,17,.42),transparent 35%,rgba(1,9,17,.12));}#crosshair{position:absolute;left:50%;top:50%;width:16px;height:16px;opacity:.35;pointer-events:none;transform:translate(-50%,-50%)}#crosshair i{display:block;position:absolute;background:#d9e9e5}#crosshair i:first-child{width:16px;height:1px;top:7px}#crosshair i:last-child{height:16px;width:1px;left:7px}
.glass{background:var(--panel);border:1px solid var(--stroke);backdrop-filter:blur(22px) saturate(125%);box-shadow:0 18px 46px rgba(0,0,0,.2)}.topbar{position:absolute;inset:0 0 auto 0;height:87px;padding:20px 34px 16px 34px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(2,9,18,.71),rgba(2,9,18,0));pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:15px}.brand-symbol,.welcome-ornament{font-weight:900;font-size:36px;letter-spacing:-6px;line-height:1;color:#f2f4ee;font-family:Arial,sans-serif;transform:skew(-9deg)}.brand-symbol span,.welcome-ornament span{color:var(--accent)}.eyebrow,.welcome-eyebrow,.panel-label,.dock-eyebrow,.mini-heading{font-size:9px;font-weight:750;letter-spacing:2.1px;color:#a6b6bf}.brand-title{font-size:18px;letter-spacing:1.8px;font-weight:350;white-space:nowrap}.brand-title b{font-weight:800}.brand-title small{margin-left:13px;font-size:8px;color:var(--sub);font-weight:700;letter-spacing:1.5px}.topbar-right{display:flex;align-items:center;gap:10px}.pill{background:rgba(8,17,25,.62);border:1px solid rgba(191,212,210,.25);padding:11px 16px;border-radius:2px;font-size:10px;font-weight:800;letter-spacing:1px}.online{color:#d6efda}.pulsedot{display:inline-block;width:6px;height:6px;background:#85d3a8;box-shadow:0 0 10px #85d3a8;border-radius:50%;margin-right:7px;animation:blink 2s infinite}@keyframes blink{50%{opacity:.3}}.icon-btn{background:rgba(9,20,32,.7);width:39px;height:39px;color:#e4e6df;border:1px solid var(--stroke);font-weight:800}
.leftnav{position:absolute;left:26px;top:50%;transform:translateY(-45%);width:68px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:9px;border:1px solid rgba(184,204,205,.15);background:rgba(7,15,24,.64);backdrop-filter:blur(14px)}.nav-btn{width:54px;height:60px;color:#c8d1d5;border:1px solid transparent;background:transparent;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}.nav-btn span{font-size:24px;font-weight:200;line-height:1}.nav-btn small{font-size:8px;font-weight:800;letter-spacing:1px}.nav-btn:hover,.nav-btn.active{background:rgba(230,179,127,.12);border-color:rgba(237,184,128,.3);color:#ffcd99}.nav-spacer{height:18px;border-top:1px solid var(--stroke);width:34px;margin-top:10px}
.city-overview{position:absolute;top:108px;left:117px;width:354px;padding:24px 26px 20px}.panel-label{display:flex;gap:8px;align-items:center;color:#adbfca;white-space:nowrap}.tiny-dash{width:18px;height:2px;background:var(--accent);display:inline-block}.minor{margin-left:auto;letter-spacing:.7px;font-size:8px;color:#7e90a2}.city-overview h1{font-size:34px;line-height:1.04;margin:19px 0 9px;letter-spacing:-1.4px;font-weight:850}.city-identity{font-size:12px;color:#b2c1c4;line-height:1.6;min-height:34px;margin:0 0 17px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px 10px}.stat-grid strong{display:block;font-size:26px;font-weight:600;letter-spacing:-.75px;line-height:1.1}.stat-grid small{font-weight:760;letter-spacing:1.15px;font-size:8px;color:#8196a8}.divider{border-top:1px solid var(--stroke);margin:20px 0 17px}.mini-heading{margin-bottom:11px}.loc-line{display:flex;align-items:center;gap:7px;color:#e9dfd2;font-size:11px;font-weight:700}.blip{color:var(--accent);font-size:17px}.coordinate{margin-left:auto;color:#89a1aa;font-size:10px;font-weight:600}.preview-prompt{display:flex;align-items:center;gap:5px;margin-top:18px;color:#9daab4;white-space:nowrap;font-size:8px;font-weight:800;letter-spacing:.4px}.preview-prompt .sep{width:1px;height:14px;background:#45515c;margin:0 2px}kbd{display:inline-flex;min-width:19px;height:19px;align-items:center;justify-content:center;padding:1px 5px;border:1px solid rgba(191,204,215,.35);background:rgba(192,210,217,.065);font-size:10px;border-radius:2px;font-weight:650;color:#e9e7d9}
.right-inspector{position:absolute;right:28px;top:108px;width:282px;padding:20px 22px 19px}.tiny-btn{margin-left:auto;color:#bac5c6;border:0;background:transparent;font-size:22px;line-height:.8;padding:2px 0}.inspector-icon{width:100%;height:75px;display:flex;align-items:center;justify-content:center;font-size:55px;font-weight:200;color:var(--accent);opacity:.8}.inspector-name{font-size:17px;font-weight:800;letter-spacing:1px}.inspector-type{font-size:9px;color:var(--accent);letter-spacing:1.1px;font-weight:800;margin-top:9px}.right-inspector p{color:#a6b9c1;font-size:12px;line-height:1.65;min-height:50px}.inspector-rows{margin-top:16px;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);padding:10px 0}.inspector-rows div{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#96a8b6;margin:7px 0;font-weight:750}.inspector-rows b{color:#edf1ee;font-size:10px}.outline-action{width:100%;margin-top:16px;height:39px;color:#f1dfc9;border:1px solid rgba(243,182,115,.49);background:rgba(239,177,122,.07);font-weight:850;letter-spacing:1.2px;font-size:10px}.outline-action span{margin-left:13px}.outline-action:hover{background:rgba(239,177,122,.19)}
.bottom-left{position:absolute;left:26px;bottom:92px;width:264px;padding:16px 17px 13px}.bottom-left canvas{width:100%;height:auto;display:block;margin:11px 0 9px;cursor:crosshair;border:1px solid rgba(212,219,221,.18);background:#111f29}.map-meta{display:flex;gap:8px;justify-content:space-between;color:#9aadb4;font-size:7px;font-weight:750;letter-spacing:.2px}.map-meta i{width:7px;height:7px;display:inline-block;margin-right:2px}.legend-district{background:#596369}.legend-water{background:#2c7282}.legend-camera{background:#f9c88e}
.bottom-dock{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:min(850px,calc(100% - 420px));min-width:510px;height:104px;padding:0 22px}.dock-tabs{display:flex;gap:25px;align-items:center;height:37px;border-bottom:1px solid var(--stroke)}.dock-tab{height:100%;font-size:9px;letter-spacing:1.4px;color:#a5b2bd;font-weight:780;border:0;background:none;padding:0 0 1px;position:relative}.dock-tab.active{color:#f5d3b0}.dock-tab.active::after{content:'';height:2px;position:absolute;bottom:-1px;left:0;right:0;background:var(--accent)}.dock-content{display:flex;align-items:center;gap:10px;min-height:64px}.dock-leading{margin-right:auto}.dock-eyebrow{font-size:8px;color:#93a5ae;margin-bottom:5px}.mode-title{font-size:13px;font-weight:800;letter-spacing:1px}.live-indicator{color:#8ed3a9;letter-spacing:0;font-size:8px;margin-left:9px}.small-action{color:#e3e8e5;white-space:nowrap;border:1px solid var(--stroke);padding:11px 12px;background:rgba(176,190,202,.08);font-size:9px;letter-spacing:1px;font-weight:850}.small-action:hover{background:rgba(176,190,202,.18)}.accent-action{border-color:rgba(240,182,118,.37);color:#f2c38e}.hidden{display:none!important}.district-list{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:100%;padding:8px 0}.district-choice{display:flex;justify-content:space-between;align-items:center;background:rgba(151,170,183,.08);border:1px solid rgba(145,170,190,.11);padding:5px 9px;text-align:left;color:#d0ddd9;font-weight:800;letter-spacing:.45px;font-size:8px}.district-choice span{color:var(--accent);font-size:11px}.district-choice:hover{border-color:var(--accent)}.setting-time{font-size:9px;min-width:190px;max-width:210px;flex:1;color:#a8bac1;font-weight:800;letter-spacing:1px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:5px}.setting-time span{color:#f3d0aa}.setting-time input{width:100%;height:5px;accent-color:#efa969;cursor:pointer}.quality-wrap{font-size:9px;color:#a3b9bd;letter-spacing:1px;font-weight:800;display:flex;align-items:center;gap:8px}.quality-wrap select{background:#1e3038;color:#e5e9e7;border:1px solid #57616b;font-size:9px;padding:8px 4px}.telemetry{position:absolute;bottom:9px;right:30px;font-size:9px;font-weight:700;color:#a8b8bb;letter-spacing:1.15px;text-shadow:0 1px 8px #000}.toast{position:absolute;bottom:151px;left:50%;transform:translateX(-50%) translateY(14px);padding:10px 18px;border:1px solid rgba(238,193,144,.4);background:#10202aea;color:#f5d9ae;font-size:11px;letter-spacing:1px;opacity:0;transition:.3s;pointer-events:none;white-space:nowrap}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.welcome-backdrop,.help-backdrop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,rgba(4,13,22,.95),rgba(5,13,21,.86) 42%,rgba(4,13,22,.23)),rgba(1,10,17,.18);backdrop-filter:blur(4px);z-index:9}.welcome-card{width:min(610px,calc(100% - 55px));margin-right:min(22vw,350px);padding:35px}.welcome-ornament{font-size:56px;margin-bottom:25px}.welcome-eyebrow{color:var(--accent);font-size:10px;letter-spacing:2.3px}.welcome-card h2{font-size:clamp(52px,6vw,91px);line-height:.99;font-weight:900;letter-spacing:-3px;margin:19px 0 21px}.welcome-card h2 em{font-style:normal;color:var(--accent)}.welcome-card p{max-width:510px;color:#c6d4d7;font-size:15px;line-height:1.8}.welcome-facts{display:flex;gap:16px;flex-wrap:wrap;margin:26px 0;color:#f4e4c6;font-size:10px;font-weight:850;letter-spacing:1.4px}.welcome-facts span{border-top:1px solid #cdaa7e;padding-top:10px}.enter-button{width:100%;height:59px;border:0;background:#efb477;color:#15202a;font-weight:900;letter-spacing:1.7px;text-align:left;padding:0 22px;margin-top:13px;font-size:12px}.enter-button span{float:right;font-size:24px;font-weight:400}.enter-button:hover{background:#ffd4a1}.welcome-card>small{display:block;color:#86989f;font-size:10px;font-weight:750;letter-spacing:1px;margin-top:15px}.help-backdrop{background:rgba(2,10,19,.75)}.help-card{width:min(480px,calc(100% - 32px));padding:27px 33px;position:relative}.help-close{position:absolute;right:29px;top:24px}.help-card h2{font-size:32px;letter-spacing:-1px}.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 10px;color:#c5d2d7;font-size:12px;align-items:center;margin:20px 0 28px}.shortcut-grid>span:nth-child(2n){text-align:right;color:#f2d6ac;font-weight:700}
@media(max-width:1180px){.city-overview{left:110px;width:310px}.right-inspector{width:245px}.bottom-dock{width:calc(100% - 455px);min-width:450px;left:55%}.bottom-left{width:238px}.preview-prompt{font-size:7px}.small-action{padding:9px 7px;font-size:8px}}
@media(max-width:850px){.topbar{padding:14px}.brand-title small,.topbar-right .pill:nth-child(2),.leftnav,.right-inspector,.city-overview{display:none}.bottom-left{left:10px;bottom:155px;width:165px;padding:10px}.bottom-dock{width:calc(100% - 20px);min-width:0;left:50%;bottom:26px;height:auto;min-height:104px;padding:0 12px 5px}.dock-content{flex-wrap:wrap;padding:9px 0}.dock-leading{width:100%}.small-action{flex:1}.dock-tab{font-size:8px}.district-list{grid-template-columns:1fr 1fr}.telemetry{bottom:8px;right:12px;font-size:7px}.welcome-card{margin-right:0;padding:20px}.welcome-card h2{font-size:50px}.welcome-card p{font-size:12px}.welcome-facts{font-size:9px}}
@media(max-height:710px){.city-overview{top:85px;padding:15px 20px}.city-overview h1{font-size:25px;margin:8px 0}.stat-grid{gap:6px}.stat-grid strong{font-size:20px}.divider{margin:10px 0}.bottom-left{width:210px;bottom:112px}.right-inspector{top:85px}.bottom-dock{bottom:15px}}