:root {
  color-scheme: light; font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  --map-bg: #f6f5ef; --map-text: #263d39; --map-muted: #63786f;
  --map-accent: #304f43; --map-accent-text: #fff; --map-border: #d9e2db;
  --map-surface: #f9faf5; --map-hover: #e9ede5; --map-stage: #e7eeeb;
  --map-label: #243e38; --map-label-glow: #fff; --map-district: #654c38; --map-district-bg: #f6f5efc9;
  --map-detail-bg: #e8e1d2; --map-detail-text: #6a462f;
  --inner-bg: var(--map-bg); --inner-text: var(--map-text); --inner-muted: var(--map-muted);
  --inner-accent: var(--map-accent); --inner-paper-solid: var(--map-surface); --inner-line: var(--map-border); --inner-shadow: #0002;
  color: var(--map-text); background: var(--map-bg);
}
:root[data-theme='night'] {
  color-scheme: dark;
  --map-bg: #07110e; --map-text: #e5ece4; --map-muted: #a9b8aa;
  --map-accent: #afd49f; --map-accent-text: #0b1913; --map-border: #b9d3b92b;
  --map-surface: #10231b; --map-hover: #1a3226; --map-stage: #07151d;
  --map-label: #ecf5ed; --map-label-glow: #081712; --map-district: #e3cfaf; --map-district-bg: #112820dc;
  --map-detail-bg: #2a3224; --map-detail-text: #e1c99e;
}
* { box-sizing:border-box; }
body { margin:0; }
header,main { width:min(1180px,calc(100% - 64px)); margin:auto; }
header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:32px 0 24px; }
.eyebrow { margin:0 0 10px; font-size:11px; letter-spacing:2px; color:var(--map-muted); }
.back-link { display:inline-block; margin-bottom:18px; color:var(--map-muted); font-size:13px; text-decoration:none; }
.back-link:hover { text-decoration:underline; }
.back-link:focus-visible { outline:2px solid var(--map-accent); outline-offset:3px; }
h1 { margin:0; font-size:28px; font-weight:500; letter-spacing:1px; }
.draft { font-size:12px; color:var(--map-muted); }
nav { display:flex; gap:6px; margin-bottom:14px; }
button { font:inherit; font-size:13px; color:inherit; cursor:pointer; border:1px solid transparent; background:transparent; padding:10px 16px; border-radius:5px; }
button:hover { background:var(--map-hover); }
button:focus-visible { outline:2px solid var(--map-accent); outline-offset:3px; }
nav button[aria-pressed="true"] { color:var(--map-accent-text); background:var(--map-accent); }
#map-layers { display:flex; align-items:center; flex-wrap:wrap; gap:10px 24px; margin:-2px 0 14px; font-size:12px; color:var(--map-muted); }
#map-layers[hidden] { display:none; }
.detail-views { display:flex; gap:5px; margin:-2px 0 14px; }
.detail-views[hidden] { display:none; }
#city-areas { display:flex; align-items:center; gap:10px; margin:-2px 0 14px; font-size:12px; }
#city-areas[hidden] { display:none; }
#city-area { font:inherit; color:inherit; padding:6px 10px; border:1px solid var(--map-border); border-radius:5px; background:var(--map-surface); }
#city-area:focus-visible { outline:2px solid var(--map-accent); outline-offset:3px; }
.detail-views button { font-size:12px; padding:6px 12px; border-color:var(--map-border); }
.detail-views button[aria-pressed="true"] { background:var(--map-detail-bg); color:var(--map-detail-text); }
#map-layers label { cursor:pointer; display:flex; align-items:center; gap:5px; }
#district-toggle { accent-color:var(--map-district); }
.terrain-legend { display:flex; align-items:center; gap:8px; }
.terrain-legend i { width:65px; height:7px; border-radius:3px; background:linear-gradient(90deg,#82aa76,#b5ad79,#aca087,#85847e,#f1f1e7); }
.stage { position:relative; height:clamp(410px,65vh,700px); background:var(--map-stage); border:1px solid var(--map-border); border-radius:8px; overflow:hidden; }
#viewport,#labels { position:absolute; inset:0; }
#viewport canvas { display:block; width:100%; height:100%; touch-action:none; }
#viewport[data-drag-mode="pan"] canvas { cursor:move; }
#viewport[data-drag-mode="rotate"] canvas { cursor:grab; }
#viewport[data-drag-mode="rotate"] canvas:active { cursor:grabbing; }
#labels { pointer-events:none; overflow:hidden; }
.map-label { position:absolute; font-size:12px; white-space:nowrap; color:var(--map-label); text-shadow:0 1px 3px var(--map-label-glow),0 -1px 3px var(--map-label-glow),1px 0 3px var(--map-label-glow),-1px 0 3px var(--map-label-glow); transform:translate(-50%,-100%); }
.district-label { color:var(--map-district); font-weight:600; padding:2px 4px; border-radius:3px; background:var(--map-district-bg); }
.stage-top { position:absolute; top:20px; left:22px; right:22px; display:flex; justify-content:space-between; pointer-events:none; font-size:13px; }
#north { font-size:12px; color:var(--map-muted); }
.tools { position:absolute; right:16px; bottom:16px; display:flex; gap:4px; }
.tools button { background:var(--map-surface); border-color:var(--map-border); font-size:12px; padding:8px 12px; }
.tools button:disabled { cursor:wait; opacity:.6; }
.tools button[aria-pressed="true"] { color:var(--map-accent-text); background:var(--map-accent); }
#status { position:absolute; left:22px; bottom:12px; margin:0; max-width:60%; color:var(--map-muted); font-size:12px; }
#status:empty { display:none; }
.below { display:flex; justify-content:space-between; gap:15px; margin:12px 0 22px; font-size:12px; color:var(--map-muted); }
.below p { margin:0; }
.mobile-hint { display:none; }
.description { max-width:850px; line-height:1.8; font-size:14px; margin:0 0 30px; white-space:pre-line; }
@media (max-width:600px) {
  header,main { width:calc(100% - 28px); }
  header { padding-top:24px; gap:10px; }
  h1 { font-size:22px; }
  nav { gap:2px; }nav button { font-size:12px; padding:10px 12px; }
  .stage { height:490px; }
  .district-label { font-size:10px; padding:1px 2px; }
  .stage-top { left:14px; right:14px; top:14px; }
  .tools { right:10px; bottom:10px; }.tools button { padding:8px 10px; }
  .below { display:block; line-height:1.8; }.mobile-hint { display:block; }
  #status { left:12px; bottom:56px; max-width:85%; }
}