:root {
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --surface: #fcfcfb;
  --line: #d6d5d0;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: #f2f3f0; color: var(--ink);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
#map { position: fixed; inset: 0; }
.embed #panel { display: none; }
#panel {
  position: fixed; top: 12px; left: 12px; width: 300px; max-height: calc(100% - 24px);
  overflow: auto; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 10px rgb(0 0 0 / 0.12);
}
h1 { font-size: 17px; margin: 0 0 6px; }
#summary { margin: 0 0 12px; }
.legend { margin: 12px 0 6px; }
.legend .bar {
  height: 8px; border-radius: 4px;
  background: linear-gradient(to right, #6da7ec, #3987e5, #256abf, #184f95, #0d366b);
}
.legend .ticks { display: flex; justify-content: space-between; color: var(--ink-2); font-size: 12px; }
footer { color: var(--ink-2); font-size: 11px; margin-top: 10px; }
footer a { color: inherit; }
.maplibregl-map { font: inherit; }
.maplibregl-popup-content dl {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0;
}
.maplibregl-popup-content dt { color: var(--ink-2); }
.maplibregl-popup-content dd { margin: 0; }
@media (max-width: 600px) {
  #panel {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 42%;
    border-radius: 12px 12px 0 0; padding: 12px 16px;
  }
  h1 { font-size: 16px; }
}