:root{
  --ink:#1b2430; --muted:#6b7280; --line:#e6eadf; --paper:#f6f4ee;
  --day:#eef3e8; --night:#0d1420; --accent:#2f6b4f;
}
*{box-sizing:border-box} html,body,#app{height:100%;margin:0}
body{font-family:"PingFang SC","Noto Sans SC",system-ui,sans-serif;color:var(--ink);background:var(--paper);overflow:hidden}
#app{position:relative}
#stage{position:absolute;inset:0;z-index:0}
#labels{position:absolute;inset:0;pointer-events:none;z-index:2}
.lbl{position:absolute;transform:translate(-8px,-120%);font-size:12px;color:#2a3544;white-space:nowrap;background:rgba(255,255,255,.92);border:1px solid #d7ddd0;padding:3px 8px;border-radius:99px;pointer-events:auto;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.lbl::before{content:"";position:absolute;left:-18px;bottom:-6px;width:18px;height:1px;background:#9aa394;transform:rotate(-28deg);transform-origin:right center}
.lbl b{font-weight:700}
body.night .lbl{background:rgba(16,22,32,.78);color:#f4efe4;border-color:#334}
.top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;gap:18px;padding:14px 22px;background:linear-gradient(#fff,transparent)}
.brand b{font-size:18px;letter-spacing:.08em}
.brand span{display:block;font-size:10px;letter-spacing:.18em;color:var(--muted)}
nav{display:flex;gap:16px;font-size:14px}
nav a{cursor:pointer;color:#4b5563}
nav a.on{color:#111;font-weight:700;border-bottom:2px solid #111}
.right{margin-left:auto;display:flex;gap:10px;align-items:center}
.ghost, .pill button, .roam-bar button, .sheet button{border:1px solid #cfd6c8;background:#fff;border-radius:8px;padding:7px 12px;cursor:pointer}
.pill{display:flex;background:#fff;border:1px solid #cfd6c8;border-radius:999px;overflow:hidden}
.pill button{border:0;border-radius:0}
.pill button.on{background:#111;color:#fff}
.copy{position:absolute;left:28px;top:92px;z-index:4;max-width:340px}
.copy h1{font-size:34px;line-height:1.2;margin:8px 0 10px}
.copy p{font-size:13px;line-height:1.7;color:#374151}
.ice{display:inline-block;background:#dbe8ff;color:#1e3a8a;border-radius:6px;padding:2px 8px;font-size:12px}
.en{margin-top:18px;font-size:11px;letter-spacing:.2em;color:#6b7280}
.more{opacity:.85}
.hud-left{position:absolute;left:28px;bottom:22px;z-index:4;font-size:12px;color:#4b5563}
.region{letter-spacing:.2em;font-size:10px}
.hud-right{position:absolute;right:18px;top:46%;z-index:4;display:flex;flex-direction:column;gap:8px}
.hud-right button{width:36px;height:36px;border-radius:10px;border:1px solid #cfd6c8;background:#fff;cursor:pointer}
.hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;font-size:12px;color:#6b7280;background:rgba(255,255,255,.75);padding:6px 12px;border-radius:999px}
.cities{position:absolute;right:22px;bottom:22px;z-index:4;display:flex;gap:6px}
.cities span{width:28px;height:28px;border-radius:50%;border:1px solid #cfd6c8;display:grid;place-items:center;font-size:11px;background:#fff;cursor:pointer}
.cities span.on{background:#111;color:#fff}
.modal{position:fixed;inset:0;background:rgba(20,24,20,.35);z-index:20;display:grid;place-items:center}
.modal.hide{display:none}
.sheet{background:#fff;border-radius:16px;padding:22px;min-width:520px;max-width:80vw}
.sheet.narrow{min-width:360px;max-width:480px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.card{border:1px solid #e5e7eb;border-radius:12px;padding:12px;cursor:pointer}
.card:hover{border-color:#111}
.card b{display:block}
.muted{color:#6b7280;font-size:13px}
.roam-bar{position:absolute;left:50%;top:70px;transform:translateX(-50%);z-index:6;background:#fff;border:1px solid #d7ddd0;border-radius:12px;padding:8px 12px;display:flex;gap:10px;align-items:center;font-size:13px}
.roam-bar.hide{display:none}
.roam-bar em{font-style:normal;color:#6b7280;font-size:12px}
body.night{background:#0d1420;color:#f4efe4}
body.night .top{background:linear-gradient(#0d1420,transparent)}
body.night nav a{color:#cbd5e1}
body.night nav a.on{color:#fff;border-color:#fff}
body.night .copy p,.hud-left,.hint,.en,.more{color:#cbd5e1}
body.night .ghost,.hud-right button,.cities span,.pill,.roam-bar{background:#151c28;color:#f4efe4;border-color:#334}
body.night .pill button.on{background:#f4efe4;color:#111}
@media(max-width:800px){
  .copy{max-width:88vw;top:78px}
  .copy h1{font-size:26px}
  .sheet{min-width:90vw}
  nav{display:none}
}