:root{color-scheme:light;background:#fff}
@font-face{font-family:Chivo;src:url('./chivo.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#fff}
canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}

[hidden]{display:none!important}
.selectors{position:fixed;top:12px;left:12px;z-index:3;display:flex;gap:20px;padding:4px 8px;background:#fff;font:12px/1.4 system-ui,sans-serif;color:#000}
.selectors fieldset{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.selectors label{display:flex;align-items:center;gap:6px;min-height:25px;cursor:pointer}
.selectors input{margin:0;accent-color:#000;width:13px;height:13px;cursor:pointer}

#labels{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.map-label{opacity:0;position:absolute;top:0;left:0;font-family:Chivo,Arial,sans-serif;font-weight:900;line-height:1;text-align:center;white-space:nowrap;color:#000;letter-spacing:-.04em}
.over-polygons .map-label{-webkit-text-stroke:1.5px #fff;paint-order:stroke fill}
#expand{position:fixed;top:16px;right:16px;z-index:3;width:30px;height:30px;padding:5px;border:0;background:#fff;color:#000;cursor:pointer}
#expand svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2}
:focus-visible{outline:2px solid #000;outline-offset:4px}
@media(max-width:480px){.selectors{left:8px;top:8px;gap:15px;padding:4px}#expand{top:12px;right:8px}}

#polygons{position:fixed;inset:0;pointer-events:none;z-index:0}
#map{position:relative;z-index:1}

body.immersive .selectors{display:none}
body.immersive #expand{opacity:.18;background:transparent;top:calc(16px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right))}
body.immersive #expand:hover,body.immersive #expand:focus-visible{opacity:1}
.fs-exit{display:none}
.immersive .fs-enter{display:none}
.immersive .fs-exit{display:block}
#map:focus-visible{outline:none}