.geo-map {
  --map-water: #dceff9;
  --map-land: #8bcba2;
  --map-border: #377d71;
  --map-ink: #153b51;
  position: relative;
  width: 100%;
  min-height: 210px;
  aspect-ratio: 1.65;
  overflow: hidden;
  isolation: isolate;
  background: var(--map-water);
  border-radius: 22px;
  border: 1px solid #bfdde9;
}
.geo-map--usa { aspect-ratio: 1.54; }
.geo-map__canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline-offset: -4px; }
.geo-map.is-dragging .geo-map__canvas { cursor: grabbing; }
.geo-map__canvas:focus-visible { outline: 3px solid #1768ed; }
.geo-map__water { fill: var(--map-water); }
.geo-map__grid { fill: none; stroke: #9bc9df; stroke-width: .5px; opacity: .44; pointer-events: none; }
.geo-map__land { fill: var(--map-land); stroke: var(--map-border); stroke-width: .85px; stroke-linecap: round; stroke-linejoin: round; }
.geo-map__land.is-context { fill: #c6dcd0; stroke: #7ca89e; }
.geo-map__land.is-highlighted { fill: #ffd56b; stroke: #976020; stroke-width: 1.7px; }
.geo-map__land.is-selected { fill: #ffc05a; stroke: #91521b; stroke-width: 2px; }
.geo-map__land.is-revealed { fill: #66c793; stroke: #165c40; stroke-width: 2px; }
.geo-map__anchor { fill: #2875c8; stroke: #fff; stroke-width: 1.5px; pointer-events: none; }
.geo-map__anchor.is-highlighted, .geo-map__anchor.is-selected { fill: #bc650e; }
.geo-map__anchor.is-revealed { fill: #106a43; }
.geo-map__insets { fill: #456d78; font: 16px var(--font); pointer-events: none; }
.geo-map__controls {
  position: absolute; right: 12px; bottom: 12px;
  display: flex; gap: 3px; padding: 4px;
  border: 1px solid #bfd9e5; border-radius: 18px;
  background: #fff; box-shadow: 0 3px 12px #21557712;
}
.geo-map__button {
  display: grid; place-items: center;
  min-width: 44px; width: 44px; min-height: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 12px;
  background: #fff; color: var(--map-ink);
  font: 500 28px/1 var(--font); cursor: pointer;
}
.geo-map__button:hover { background: #e9f3ff; }
.geo-map__button:active { background: #d9eaff; transform: translateY(1px); }
.geo-map__button:focus-visible { outline: 3px solid #1768ed; outline-offset: -2px; }
.geo-map__reset { border-left: 1px solid #dfebf0; border-top-left-radius: 0; border-bottom-left-radius: 0; font-size: 27px; }
.geo-map__hint {
  position: absolute; left: 12px; top: 10px; margin: 0;
  max-width: calc(100% - 24px); padding: 5px 8px;
  color: #315568; background: #f5fbffed;
  border-radius: 9px; font: 500 11px/1.3 var(--font);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .geo-map__button { transition: background .12s ease, transform .12s ease; }
  .geo-map__land { transition: fill .14s ease; }
}
@media (forced-colors: active) {
  .geo-map__land { fill: Canvas; stroke: CanvasText; }
  .geo-map__land.is-selected, .geo-map__land.is-revealed, .geo-map__land.is-highlighted { fill: Highlight; stroke: HighlightText; }
  .geo-map__anchor { fill: Highlight; stroke: CanvasText; }
  .geo-map__button { border: 1px solid ButtonText; }
}