:root {
  color-scheme: dark;
  font-family: var(--f-primary, "HagerScale", Arial, sans-serif);
  background: #ffffff;

  /* One design pixel of the 1920x1080 concept, for viewport-fixed chrome. */
  --u: min(100vw / 1920, 100vh / 1080);

  /* Camera dolly: accelerate toward the POI, then settle softly. */
  --zoom-duration: 1650ms;
  --zoom-ease: cubic-bezier(0.33, 0.02, 0.12, 1);
  /* Stronger map push so the dolly reads as altitude loss. */
  --zoom-scale: 3.2;
  --zoom-blur: 6.8px;
  --zoom-opacity: 0.12;
  --crossfade-duration: 1180ms;
  --crossfade-ease: cubic-bezier(0.18, 0.55, 0.22, 1);
  /* Detail fades in 900ms before the map dolly settles. */
  --crossfade-in-delay: calc(var(--zoom-duration) - 900ms);
  --detail-fade-in-duration: 2000ms;
  /* Exit mirrors the in-bloom: hold briefly, then dissolve over the pullback. */
  --crossfade-out-delay: 160ms;
  --ui-settle-delay: 1180ms;
  /* POIs appear only after the camera move has fully settled. */
  --detail-poi-delay: calc(var(--zoom-duration) + 500ms);

  --hager-blue: #0078c3;
  --hager-sky: #8ccdfa;
  --hager-navy: #004673;
  --hager-orange: #fd5000;
  --hager-pale: #dcf0ff;
  --hager-grey: #282828;
  --glass: linear-gradient(160deg, rgba(0, 70, 115, 0.5) 0%, rgba(0, 120, 195, 0.5) 103%);
  /* Map POI title pill (Figma Tiny World node 192:26538). */
  --map-poi-pill: linear-gradient(
      90deg,
      rgba(102, 102, 102, 0) 0%,
      rgba(0, 0, 0, 0.2) 38.92%
    ),
    linear-gradient(
      166deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(0, 82, 134, 0.3) 103.24%
    );
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

button {
  font: inherit;
}