html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #d9d5cc;
}
#map {
  position: fixed;
  inset: 0;
}
.caption {
  position: fixed;
  z-index: 800;
  top: calc(10px + env(safe-area-inset-top));
  /* Starts right of Leaflet's zoom control (10px margin + 34px touch bar + 10px) so it never covers it. */
  left: calc(54px + env(safe-area-inset-left));
  margin: 0;
  max-width: min(42rem, calc(100vw - 64px));
  font: 12px/1.35 system-ui, sans-serif;
  color: #1c1c1c;
  background: rgba(255, 255, 255, 0.88);
  padding: 4px 8px;
  pointer-events: none;
}