:root{color-scheme:dark;--bg:#0c161f;--panel:rgba(9,23,32,.88);--line:rgba(192,215,223,.14);--muted:#8196a4;--font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--gold:#e1b578}
*{box-sizing:border-box}html,body{height:100%;width:100%;margin:0;overflow:hidden;background:var(--bg);font-family:var(--font);color:#ecf4f4}button,input,select{font-family:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #d2af77;outline-offset:3px}#viewport{display:block;position:fixed;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,12,18,.42),transparent 31%,transparent 73%,rgba(8,17,23,.22)),linear-gradient(180deg,rgba(5,13,18,.45),transparent 24%,transparent 72%,rgba(4,11,16,.45))}
[hidden]{display:none!important}.topbar{display:flex;position:absolute;top:0;left:0;right:0;padding:24px 28px;align-items:flex-start;gap:36px;z-index:3;pointer-events:none}.topbar>*{pointer-events:auto}.brandmark{display:flex;align-items:center;gap:10px;flex:0 0 280px}.brandglyph{width:46px;height:46px;border:1px solid #b79a65;color:#f0e8c6;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:800;letter-spacing:-3px}.brandglyph span{color:#d2ad67}.brandtext strong{display:block;font-size:13px;letter-spacing:2.1px}.brandtext small{display:block;letter-spacing:1.9px;font-size:8px;color:#8198a8;margin-top:5px}.city-title{flex:1}.eyebrow{color:#d0b987;font-size:10px;letter-spacing:2.6px;font-weight:750}.livepulse{display:inline-block;height:6px;width:6px;background:#7ab5a5;border-radius:50%;box-shadow:0 0 9px #7ab5a5;vertical-align:middle;margin-right:6px}h1{font-weight:730;font-size:clamp(21px,2vw,34px);letter-spacing:3.5px;line-height:1.1;margin:10px 0 8px}.city-title p{font-size:10px;color:#bfced2;letter-spacing:1.5px;margin:0}.top-actions{display:flex;gap:7px}.iconbtn{width:36px;height:36px;border:1px solid var(--line);background:rgba(15,27,35,.72);color:#e5f0f0;border-radius:5px;font-size:17px}.iconbtn:hover{background:#31414c}
.leftpanel{position:absolute;top:112px;bottom:66px;left:21px;width:297px;background:var(--panel);border:1px solid var(--line);border-radius:7px;backdrop-filter:blur(20px);overflow:auto;scrollbar-width:thin;scrollbar-color:#334750 transparent;padding:17px 16px;box-shadow:0 18px 90px #07101988}.section-header{display:flex;justify-content:space-between;align-items:center;letter-spacing:1.55px;font-size:10px;font-weight:750;color:#e5e7d8;padding:0 0 12px;margin-top:8px}.section-header:not(:first-child){padding-top:20px;border-top:1px solid var(--line);margin-top:18px}.live-marker{font-size:8px;color:#8bc6a4}.minor{color:#7e99a7;font-size:8px;letter-spacing:1px}.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat{background:rgba(49,71,80,.19);border:1px solid rgba(169,193,204,.09);border-radius:3px;padding:11px}.stat b{display:block;font-size:23px;font-weight:620;letter-spacing:-.7px}.stat small{color:#7b96a5;display:block;font-size:8px;letter-spacing:1.15px;margin-top:4px}.search{height:36px;background:rgba(27,45,54,.7);border:1px solid var(--line);border-radius:3px;display:flex;align-items:center;padding:0 10px;gap:10px}.search span{color:#bba57b;font-size:20px}.search input{background:transparent;border:0;outline:0;min-width:0;color:#e3edf1;width:100%;font-size:11px}.search-results{display:grid}.search-results button{background:#1b303b;color:#e9f2f1;border:1px solid var(--line);padding:9px;text-align:left;font-size:11px}.search-results button:hover{background:#294856}.search-results small{display:block;font-size:9px;color:#8aabbd}.noresults{font-size:10px;padding:10px;color:#93a0a5}.district{height:28px;display:flex;align-items:center;gap:9px;color:#b6c6c9;font-size:11px;border-bottom:1px solid #ffffff06}.district strong{font-weight:550;color:#e5e9e4;margin-left:auto}.color-dot{height:8px;width:8px;background:#859ba8;display:inline-block;border-radius:2px}.cbd{background:#b3bdd8}.industrial{background:#c6a274}.airport{background:#8faebb}.waterfront{background:#7aaeb4}.old_town{background:#c6a386}.suburb{background:#719e85}.garden{background:#a2c992}.mixed{background:#91a3a8}.control{margin:0 0 15px}.control label{display:flex;justify-content:space-between;margin-bottom:8px;font-size:11px;color:#b8c5c8}.control strong{color:#ead19f}.control input[type=range]{accent-color:#d6af78;width:100%;height:3px;cursor:pointer}.ticks{display:flex;justify-content:space-between;color:#708593;font-size:8px;margin-top:5px}.control select{appearance:none;width:100%;border-radius:3px;border:1px solid var(--line);height:34px;background:#1e313d;color:#d2e0e2;padding:0 10px;font-size:11px}.button-stack{display:grid;gap:8px;padding-bottom:8px}.button-stack button,.selection-actions button{font-size:11px;letter-spacing:1px;padding:11px 10px;background:#203744;border:1px solid var(--line);border-radius:3px;color:#e4ebeb}.button-stack button:hover{background:#395365}.button-stack .primary,.selection-actions .primary{background:linear-gradient(135deg,#c4a06d,#d9bc84);color:#18212a;border:0;font-weight:800}.right-top{position:absolute;top:118px;right:22px;width:280px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:6px;backdrop-filter:blur(20px)}.map-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;font-weight:700;align-items:center;margin-bottom:11px}.map-heading small{font-size:8px;color:#90a9b4}.right-top canvas{width:100%;height:auto;display:block;cursor:crosshair;border:1px solid #a2c6cd30}.map-coordinates{text-align:center;color:#a4bcbf;font-size:9px;letter-spacing:1px;padding-top:11px}
#selection-panel{position:absolute;bottom:79px;right:22px;width:280px;padding:17px;background:var(--panel);border:1px solid #d1ad7355;border-radius:5px;backdrop-filter:blur(16px)}.selection-eyebrow{color:#d6b786;font-size:9px;letter-spacing:1.65px}.selection-eyebrow span{float:right;color:#74b697}#selection-panel h2{font-size:17px;font-weight:650;letter-spacing:1px;line-height:1.3;margin:11px 0 9px}#selected-meta{font-size:11px;line-height:1.9;color:#aabcc4}#selected-meta b{font-size:10px;color:#dec8a6}#selected-meta strong{color:#83d9c7}.selection-actions{margin-top:12px}.selection-actions button{width:100%}.footer{position:absolute;bottom:0;left:0;right:0;min-height:45px;background:rgba(6,18,26,.86);border-top:1px solid var(--line);padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:10px;color:#b6cad0;letter-spacing:.45px}.green-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7bbda8;box-shadow:0 0 10px #5aaa90;margin-right:8px}.footer-right{display:flex;gap:22px;color:#9faeb5;letter-spacing:1px}.footer-right strong{color:#e2ebe9}.keyhint{color:#66818c}
#loading{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#08131b;color:#dce8e4;text-align:center;gap:8px}#loading h2{margin:15px 0 0;font-size:21px;letter-spacing:2px}#loading p{font-size:12px;color:#849fa8}.spinner{width:38px;height:38px;border:2px solid #293f4a;border-top-color:#d3b37e;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{padding:25px;max-width:650px}.error code{color:#eec28a}#help{position:fixed;inset:0;background:#000b;backdrop-filter:blur(8px);z-index:10;display:grid;place-items:center}.helpbox{width:min(700px,90vw);background:#101f2a;padding:36px;border:1px solid #c4a17266;box-shadow:0 20px 90px #0009;position:relative}.helpclose{position:absolute;right:15px;top:12px;background:transparent;border:0;color:#fff}.helpbox h2{font-size:27px;margin:12px 0 26px}.helpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.helpgrid b{color:#e8bf82;font-size:13px}.helpgrid p{font-size:11px;line-height:2;color:#adc2c7}.helpnote{margin-top:28px;color:#819ba8;font-size:10px}
@media(max-width:1000px){.brandmark{flex-basis:auto}.brandtext{display:none}.city-title h1{font-size:20px}.leftpanel{width:250px;left:10px}.right-top{right:10px;width:200px}.keyhint{display:none}}@media(max-width:700px){.topbar{padding:14px;gap:10px}.brandglyph{width:32px;height:32px}.city-title{overflow:hidden}.city-title .eyebrow,.city-title p{font-size:8px;letter-spacing:.5px}.city-title h1{font-size:15px;letter-spacing:1px}.top-actions .iconbtn{width:28px;height:29px}.leftpanel{top:auto;bottom:46px;height:180px;left:8px;width:55vw;overflow:auto}.right-top{right:8px;top:80px;width:33vw;padding:8px}.map-heading small{display:none}.map-heading{font-size:8px}.footer{font-size:8px;padding:9px}.footer-right{display:none}#selection-panel{bottom:235px;right:8px;width:45vw}.helpgrid{grid-template-columns:1fr}.helpbox{overflow:auto;max-height:85vh}}