:root{
  --ground:#0D1015;
  --panel:rgba(13,16,21,.88);
  --line:#232B34;
  --ink:#E8E4DC;
  --mid:#A0A0A0;
  --contour:#8E979E;
  --faint:#5E6A76;
  --mono:ui-monospace,"Cascadia Code",Consolas,Menlo,monospace;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}
html,body{margin:0;height:100%;background:var(--ground);font-family:var(--sans)}
#map{position:absolute;inset:0}

#panel{
  position:absolute;top:18px;left:18px;z-index:10;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:16px 20px 14px;max-width:250px;color:var(--ink);
  backdrop-filter:blur(6px);
}
#panel h1{
  margin:0;font-size:22px;font-weight:600;letter-spacing:-.01em;
  text-transform:lowercase;color:#fff;line-height:1.1;
}
#panel .sub{margin:5px 0 2px;font-size:12px;color:var(--mid);text-transform:lowercase}
#panel .coords{margin:0 0 12px;font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.04em}
.controls{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line);padding-top:11px}
.controls label{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mid);
  text-transform:lowercase;cursor:pointer;user-select:none;
}
.controls .hint{color:var(--faint);font-size:10.5px}
.controls input[type=checkbox]{
  appearance:none;width:11px;height:11px;margin:0;border:1px solid var(--contour);
  border-radius:2px;background:transparent;cursor:pointer;flex:none;
}
.controls input[type=checkbox]:checked{background:var(--contour);box-shadow:inset 0 0 0 2px var(--ground)}
.controls input[type=checkbox]:focus-visible{outline:1.5px solid #fff;outline-offset:2px}
.controls .slider{gap:10px}
.controls input[type=range]{
  flex:1;appearance:none;height:2px;background:var(--line);border-radius:1px;cursor:pointer;
}
.controls input[type=range]::-webkit-slider-thumb{
  appearance:none;width:10px;height:10px;border-radius:50%;background:var(--ink);border:none;
}

#credit{
  position:absolute;right:8px;bottom:6px;z-index:10;
  font-family:var(--mono);font-size:9.5px;color:var(--faint);
  text-transform:lowercase;letter-spacing:.03em;
  background:rgba(13,16,21,.7);padding:3px 8px;border-radius:2px;
}
#credit a{color:var(--faint)}

.maplibregl-ctrl-attrib{display:none}
.maplibregl-ctrl-scale{
  background:transparent;border:1px solid var(--faint);border-top:none;
  color:var(--mid);font-family:var(--mono);font-size:9.5px;
}
.maplibregl-ctrl-group{background:var(--panel);border:1px solid var(--line);border-radius:2px;box-shadow:none}
.maplibregl-ctrl-group button{background:transparent}
.maplibregl-ctrl-group button + button{border-top:1px solid var(--line)}
.maplibregl-ctrl button .maplibregl-ctrl-icon{filter:invert(.75)}

@media (max-width:600px){
  #panel{top:10px;left:10px;right:10px;max-width:none;padding:12px 16px}
  #panel h1{font-size:18px}
}