html, body, #map { margin: 0; height: 100%; width: 100%; font-family: system-ui, sans-serif; }
#panel {
  position: absolute; top: 10px; left: 10px; width: 230px; padding: 10px 12px;
  background: rgba(255, 255, 255, 0.92); border-radius: 6px; font-size: 13px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#panel h1 { font-size: 15px; margin: 0 0 8px; }
.row { margin-bottom: 6px; }
.row label { display: block; cursor: pointer; }
#ramp { height: 14px; border: 1px solid #888; }
#ticks { position: relative; height: 14px; font-size: 10px; }
#ticks span { position: absolute; transform: translateX(-50%); }
.unit { font-size: 11px; color: #555; text-align: center; }
#info { margin-top: 8px; font-size: 11px; color: #333; line-height: 1.35; }
#status { margin-top: 8px; font-size: 11px; color: #555; }
#about { margin-top: 6px; font-size: 11px; color: #555; }
#about a { color: #0b60b0; }