html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#container { position: relative; width: 100%; height: 100%; }
#map { position: absolute; inset: 0; }
#deck-canvas { position: absolute; inset: 0; pointer-events: auto; }

#controls {
  position: absolute;
  top: 10px;
  Left: 10px;
  z-index: 10;
  background: rgba(0,0,0,0.65);
  color: white;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
}

#controls label { margin-right: 8px; cursor: pointer; }
#controls input { margin-right: 4px; }
#controls input:disabled { opacity: 0.5; cursor: not-allowed; }
#controls label:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

.legend{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:10;
  background:rgba(0,0,0,0.65);
  color:#fff;
  font:12px/1.2 sans-serif;
  padding:10px 10px 8px;
  border-radius:8px;
  max-width:260px;
}

.legend .title{font-weight:600; margin-bottom:8px;}
.legend .row{display:flex; align-items:center; margin:4px 0;}
.legend .swatch{width:14px; height:14px; border-radius:3px; margin-right:8px; flex:0 0 auto;}
.legend input{width:72px; margin:0 6px; background:#111; color:#fff; border:1px solid #333; border-radius:4px; padding:2px 4px;}
.legend button{margin-top:8px; width:100%; padding:6px 8px; border:0; border-radius:6px; cursor:pointer;}