.states-percentage-map__canvas { position: relative; }
.states-percentage-map__svg { display: block; width: 100%; height: auto; }
.states-percentage-map__svg .map-state-shape { fill: #e2e8f0; cursor: pointer; }
.states-percentage-map__svg .map-state-shape:hover { filter: brightness(1.08); }
.states-percentage-map__svg .map-state-shape:focus-visible { outline: none; stroke: #111827; stroke-width: 7; }
.states-percentage-map__svg .state-label { pointer-events: none; }
.states-percentage-map__svg .state-label path { fill: #111827; }
.states-percentage-map__tooltip {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -100%);
    pointer-events: none;
    padding: 6px 9px;
    border-radius: 4px;
    background: #111827;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
}
.states-percentage-map__tooltip.is-below { transform: translateX(-50%); }
.states-percentage-map__tooltip[hidden] { display: none; }
.states-percentage-map__legend { display: flex; align-items: center; gap: 10px; }
.states-percentage-map__gradient {
    flex: 1;
    height: 12px;
    background: linear-gradient(to right, var(--map-low, #DCEAF7), var(--map-high, #243873));
}