:root{color-scheme:dark;--ice:#b4e7f0;--muted:#73949f;--line:#91c5d333}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080f1a;color:#e3eef0;font-family:"Microsoft YaHei","PingFang SC",sans-serif}button,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:2px solid #85e9ff;outline-offset:5px}button:disabled{cursor:wait;opacity:.6}[hidden]{display:none!important}#world{position:fixed;inset:0;outline:none;touch-action:none}#world canvas{width:100%;height:100%;display:block}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(0deg,#02091488,transparent 32%,transparent 80%,#02091366),radial-gradient(ellipse,transparent 52%,#01060d77);z-index:1}.hud{position:fixed;z-index:2;transition:opacity .35s}.topbar{left:36px;right:36px;top:28px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.district{display:flex;align-items:center;gap:12px}.district-mark{display:grid;place-items:center;border:1px solid #9bdeef8c;width:38px;height:38px;font-size:20px;color:var(--ice);transform:skewY(-5deg);box-shadow:0 0 25px #358ba512}.district strong{display:block;letter-spacing:.18em;font-size:15px;font-weight:500}.district div>span{display:block;font-size:10px;margin-top:6px;letter-spacing:.16em;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:22px;pointer-events:auto}.weather{font-size:11px;color:#9cbcc8;letter-spacing:.15em}.weather b{font-family:Consolas,monospace;font-size:15px;font-weight:400;color:#d9e9ee;margin-left:15px}.weather i,.live-dot{display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:#73d9e9;box-shadow:0 0 8px #73d9e9}.quality-label{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:10px}.quality-label select{background:#08172399;border:1px solid var(--line);padding:6px 8px;font-size:11px;border-radius:3px}.top-actions button{border:1px solid var(--line);background:#06131b88;width:31px;height:31px;font-size:20px}.welcome{left:5.3vw;bottom:11vh;width:390px;text-shadow:0 2px 20px #010812}.eyebrow{display:flex;align-items:center;gap:12px;color:#99c9d9;font-size:11px;letter-spacing:.32em;margin:0 0 22px}.eyebrow span{width:24px;height:1px;background:#7bd8e9}h1{font-size:54px;line-height:1.1;font-weight:500;letter-spacing:.12em;margin:0;color:#eff9ff}h1 span{font-size:15px;letter-spacing:.3em;display:block;margin:18px 0 24px;color:#aed6e1;font-weight:400}.intro{font-size:12px;line-height:2.1;color:#a4b7c2;letter-spacing:.08em;margin-bottom:29px}.enter{display:flex;align-items:center;justify-content:space-between;min-width:230px;padding:16px 21px;border:1px solid #a7e4f584;background:linear-gradient(110deg,#2e5a698f,#0c253874);font-size:13px;letter-spacing:.16em;backdrop-filter:blur(12px);transition:background .3s,box-shadow .3s}.enter:hover{background:#386b7b9c;box-shadow:0 0 30px #74d7ed22}.arrow{font-size:20px;color:#a5eafa;margin-left:40px}#loading{font-size:10px;color:#84a6b6;margin-top:13px;min-height:14px}.loading-track{height:1px;background:#99d4e720;width:230px;margin-top:7px}.loading-track span{display:block;background:#a1e6f7;width:0;height:1px;transition:width .3s}.desktop-note{display:block;font-size:9px;letter-spacing:.17em;color:#667f8d;margin-top:16px}.walking-hud{inset:0;pointer-events:none}.location{position:absolute;left:36px;top:96px;font-size:11px;letter-spacing:.14em;color:#a9c3cd}.location small{display:block;margin-top:7px;font-size:9px;color:#7395a4;padding-left:13px}.views{position:absolute;bottom:83px;left:36px;display:flex;border-bottom:1px solid var(--line);pointer-events:auto}.views button{border:0;background:#08131c77;color:#8aa7b2;font-size:11px;padding:11px 17px;letter-spacing:.12em}.views button.active{color:#d4f5ff;background:#34556777;border-bottom:1px solid #9cefff}.controls{position:absolute;bottom:32px;left:36px;display:flex;align-items:center;gap:22px;color:#819aa7;font-size:10px}.controls span{display:flex;align-items:center;gap:4px}kbd{display:inline-flex;justify-content:center;align-items:center;min-width:19px;height:21px;font:10px Consolas,monospace;border:1px solid #abc5d333;background:#0b1728a8;color:#b1c9d2;padding:0 4px}.controls button{pointer-events:auto;font-size:10px;border:0;border-bottom:1px solid #7698a944;background:transparent;color:#a1bdc8;padding:5px}.mini-map{position:absolute;bottom:30px;right:36px;width:142px;padding:12px;background:radial-gradient(ellipse,#142b39bb,#06101bdd);border:1px solid #9bd7e729;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}.mini-map>span{font-size:9px;color:#a1c4d0;letter-spacing:.2em}.mini-map svg{width:100%;height:122px;display:block}.mini-map small{display:block;text-align:right;font-size:8px;color:#90b6c5}#toast{position:fixed;z-index:4;left:50%;top:17%;transform:translate(-50%,-8px);padding:10px 18px;border:1px solid var(--line);background:#091925b8;color:#b7d5df;font-size:11px;backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}#toast.show{opacity:1;transform:translate(-50%,0)}body.clean .hud{opacity:0;pointer-events:none}body.clean .hud *{pointer-events:none}#error{position:fixed;z-index:9;inset:0;background:#07121ef2;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px}#error h2{font-size:24px;font-weight:400}#error p{color:#94b5c5;max-width:480px;text-align:center;line-height:1.8;font-size:13px}#error button{padding:12px 25px;background:#163543;border:1px solid #609aaf77}@media(max-width:800px){.topbar{left:20px;right:20px;top:20px}.welcome{left:24px;right:24px;bottom:16vh;width:auto}h1{font-size:42px}.weather{display:none}.top-actions{gap:12px}.controls{left:20px;gap:10px;font-size:9px;max-width:70vw;flex-wrap:wrap}.mini-map{right:20px;width:100px}.views{left:20px;bottom:110px}.location{left:20px}.intro{font-size:11px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:560px){.topbar{align-items:flex-start}.district strong{font-size:12px}.district div>span{display:none}.top-actions{max-width:220px;flex-wrap:wrap;justify-content:flex-end;gap:8px}.top-actions>a{font-size:10px}.welcome{max-width:calc(100vw - 48px)}}
/* Bright skies retain contrast through readable HUD panels, not dark full-screen grading. */
.vignette{opacity:.12}.welcome{padding:22px;background:linear-gradient(110deg,#102b40e6,#102b4080);border-left:1px solid #b6deef66;border-radius:4px}.district,.top-actions{padding:8px 10px;background:#102b40bd;border-radius:4px}.location{padding:8px 12px;background:#102b40c9;border-radius:4px}