html, body { margin: 0; height: 100%; background: #0b0d10; color: #b7c4b0; font: 12px/1.4 ui-monospace, monospace; }
#map { position: absolute; inset: 0; }
#overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#panel {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 300px;
  z-index: 2;
  background: #000c;
  border: 1px solid #2a3328;
  padding: 12px;
}
h1 { margin: 0 0 4px; font-size: 13px; color: #d4e8c8; font-weight: 600; }
.sub { margin: 0 0 10px; color: #7a8874; }
#hud { margin: 0 0 12px; color: #9f6; white-space: pre; }
label { display: block; margin: 8px 0 2px; color: #8a9a82; }
.chk { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.chk input { width: auto; }
input, select { width: 100%; background: #111; color: #cde; border: 1px solid #333; }
.maplibregl-ctrl-attrib { font-size: 10px; }