:root { color-scheme:dark; --background:#181818; --foreground:#fff; --muted:rgb(255 255 255 / 10%); --muted-foreground:rgb(255 255 255 / 49.8%); --border:rgb(255 255 255 / 8.2%); --blue:rgb(51 156 255); --green:rgb(64 201 119); --yellow:rgb(255 210 64); --orange:rgb(251 106 34); --red:rgb(255 103 100); --purple:rgb(173 123 249); }
* { box-sizing:border-box; }
body { margin:0; background:var(--background); color:var(--foreground); font:14px/1.5 -apple-system,system-ui,"Segoe UI",sans-serif; }
main { max-width:1024px; margin:0 auto; padding:16px 20px 40px; }
h1 { font-size:20px; line-height:1.4; margin:0; font-weight:600; }
h2 { font-size:18px; line-height:1.4; margin:12px 0 4px; font-weight:600; }
p { margin:0 0 8px; }
.intro, .city-count, .comparison-legend, .comparison-detail, footer { font-size:12px; }
.subtle { color:var(--muted-foreground); }
.mode-switch { display:flex; flex-wrap:wrap; gap:4px 18px; border:0; margin:10px 0 4px; padding:0; font-size:12px; }
.mode-switch label { cursor:pointer; white-space:nowrap; }
.mode-switch input { accent-color:var(--blue); vertical-align:middle; }
.mode-note { font-size:12px; margin:0; }
.comparison-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin:12px 0 0; }
.legend-item { display:inline-flex; gap:5px; align-items:center; white-space:nowrap; }
.swatch { width:22px; height:12px; opacity:.64; display:inline-block; }
.comparison-maps { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.city-panel { min-width:0; }
.map-frame { position:relative; overflow:hidden; }
.city-map { display:block; width:100%; touch-action:none; cursor:grab; }
.city-map:active { cursor:grabbing; }
.map-controls { position:absolute; top:8px; right:8px; display:flex; gap:4px; }
.map-controls button { min-width:32px; min-height:32px; padding:0 8px; background:#303034; color:var(--foreground); border:1px solid rgb(255 255 255 / 28%); border-radius:5px; cursor:pointer; font:inherit; }
.map-controls button:hover, .map-controls button:focus-visible { background:#48484e; }
.map-controls button:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.map-help { margin:8px 0 0; font-size:12px; }
.district { fill:color-mix(in srgb,var(--muted) 14%,transparent); stroke:var(--border); stroke-width:.75; }
.street { fill:none; stroke:var(--muted-foreground); stroke-opacity:.42; stroke-width:.55; }
.street-highlight { opacity:0; pointer-events:none; }
.has-street-labels .street-highlight { opacity:.75; stroke:#d4d6da; stroke-opacity:.6; stroke-width:.4; }
.street-labels { pointer-events:none; fill:#fff; font:500 11px/1 sans-serif; text-anchor:middle; dominant-baseline:middle; paint-order:stroke; stroke:#181818; stroke-width:3px; stroke-linejoin:round; }
.cell { stroke:color-mix(in srgb,var(--background) 45%,transparent); stroke-width:.5; fill-opacity:.64; cursor:pointer; }
.modeled-blocks { filter:blur(4px); opacity:.58; pointer-events:none; }
.modeled-blocks path { fill-rule:evenodd; }
.comparison-detail { margin:8px 0; min-height:1.5em; }
.context { margin:20px 0 12px; border-top:1px solid var(--border); padding-top:10px; }
.context h2 { font-size:16px; }
footer { border-top:1px solid var(--border); padding-top:12px; }
a { color:inherit; text-underline-offset:2px; }
a:hover, a:focus-visible { color:var(--blue); }
.data-view { margin-top:12px; font-size:12px; }
.data-view summary { cursor:pointer; }
.data-view label { margin:8px 4px 8px 12px; display:inline-block; }
.data-view label:first-of-type { margin-left:0; }
select { max-width:100%; padding:4px; background:var(--background); color:var(--foreground); border:1px solid var(--muted-foreground); border-radius:4px; }
@media(pointer:coarse) { .map-controls button { min-width:44px; min-height:44px; } }
@media(max-width:600px) { main { padding:16px; } .comparison-maps { grid-template-columns:minmax(0,1fr); gap:4px; } .data-view label { margin-left:0; } }