/* Shared palette for CSS, MapLibre and custom WebGL layers. */
:root{
 color-scheme:dark;
 --map-ground:#202020;--map-land:#292929;--map-outside:#1b1b1b;--map-water:#151515;
 --map-road:#777777;--map-edge:#a3a3a3;--map-building:#414141;--map-building-edge:#858585;--map-landmark:#d2d2d2;
 --traffic-slow:#8ca9ba;--blue:#16b9ff;--blue-soft:#9bdfff;--red-soft:#ff8599;--red:#ff304f;--data-unknown:#747474;
 --ink:#ededed;--muted:#a6a6a6;--panel:#202020;
}
*{box-sizing:border-box}html,body,#map{width:100%;height:100%;margin:0;overflow:hidden}body{background:var(--map-ground);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:1px solid #77777755;background:#202020c9;border-radius:4px;padding:9px 14px;cursor:pointer}button:hover,button[aria-pressed=true]{border-color:var(--blue);color:var(--blue)}button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#10101070,transparent 30%,transparent 75%,#101010b0),radial-gradient(ellipse at 60% 55%,transparent 35%,#10101085 100%)}header{position:absolute;left:4%;top:6%;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:.2em;color:var(--blue)}h1{font-size:34px;font-weight:300;letter-spacing:-.04em;margin:12px 0}#status{font-size:13px;color:var(--muted);line-height:1.6}.controls{position:absolute;top:6%;right:3%;display:flex;align-items:center;gap:8px;font-size:12px}#metrics{color:var(--muted);min-width:70px;text-align:right;font-variant-numeric:tabular-nums}footer{position:absolute;bottom:18px;left:3%;right:3%;display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#a6a6a6;text-shadow:0 1px 3px #000}.legend{display:flex;align-items:center;gap:7px}.legend i{width:16px;height:2px;margin-left:10px;box-shadow:0 0 7px currentColor}.free{background:var(--blue);color:var(--blue)}.slow{background:var(--traffic-slow);color:var(--traffic-slow)}.congested{background:var(--red);color:var(--red)}.muted{opacity:.7;margin-left:10px}.credits{opacity:.65}#warning{position:absolute;bottom:50px;left:3%;font-size:12px;color:var(--red-soft);text-shadow:0 1px 3px #000}#detail{position:absolute;right:3%;bottom:65px;padding:14px 18px;border-left:2px solid var(--blue);background:#202020db;font-size:14px;line-height:1.6;white-space:pre-line;max-width:320px}.output .operator{display:none}.output footer{font-size:10px}.output .legend{display:none}.output .credits{margin-left:auto}.maplibregl-canvas:focus{outline:none}

.city-label{font-size:13px;font-weight:400;letter-spacing:.06em;color:#c4c4c4;text-shadow:0 0 6px #101010,0 1px 4px #101010;pointer-events:none}.city-label::before{content:'';position:absolute;left:-8px;top:6px;width:3px;height:3px;background:#b0b0b0;border-radius:50%;box-shadow:0 0 7px #b0b0b0}body:not([data-view=korea]) .city-label{display:none}

.island-label{font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap}
.island-label::before{left:-11px;top:50%;transform:translateY(-50%);width:5px;height:5px;background:var(--ink);box-shadow:0 0 8px #ededed80}
#signals{display:none}
@media(max-width:700px), (pointer:coarse){
 body:not(.output) header{left:20px;right:20px;top:max(20px,env(safe-area-inset-top))}
 h1{font-size:27px;margin:8px 0} .eyebrow{font-size:10px} #status{font-size:12px;margin:6px 0;max-width:100%}
 body:not(.output) .controls{left:16px;right:16px;top:auto;bottom:calc(78px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;font-size:13px}
 .controls button{min-height:44px;padding:8px 3px;background:#202020eb;border-radius:8px}#metrics{display:none}#fullscreen{grid-column:3/5}
 body:not(.output) #signals{position:absolute;left:20px;right:20px;top:calc(max(20px,env(safe-area-inset-top)) + 111px);display:flex;gap:12px;font-size:11px;color:#b5b5b5;pointer-events:none}
 #signals span::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#747474;margin-right:5px}#signals [data-state=connected]::before{background:var(--blue);box-shadow:0 0 6px var(--blue)}#signals [data-state=partial]::before{background:var(--red-soft)}#signals [data-state=unavailable]::before{background:var(--red)}
 footer{left:16px;right:16px;bottom:calc(10px + env(safe-area-inset-bottom));display:block;font-size:10px}.legend{justify-content:center;margin-bottom:8px}.legend .muted{display:none}.credits{display:block;text-align:center;line-height:1.5;font-size:8px}
 #warning{left:20px;right:20px;bottom:calc(185px + env(safe-area-inset-bottom));font-size:11px}#detail{bottom:calc(190px + env(safe-area-inset-bottom));right:16px;max-width:calc(100% - 32px);font-size:12px}
 .output #signals{display:none}
}
@media(max-height:500px) and (pointer:coarse){h1{font-size:20px}#status{max-width:310px}body:not(.output) #signals{top:112px}.credits{display:none}body:not(.output) .controls{left:auto;right:16px;width:340px;bottom:40px}footer{right:auto}.legend{margin-bottom:0}}