.mapZoomHint {
    --zoom-hint-surface: #2a2d31;
    --zoom-hint-ink: #f7f6f4;
    --zoom-hint-muted: #a4a7ad;
    --zoom-hint-accent: #8eb5ff;
    position: absolute;
    z-index: 29;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    width: min(290px, calc(100% - 32px));
    padding: 20px 24px 24px;
    border: 1px solid rgb(152 155 160 / 30%);
    border-radius: 18px;
    color: var(--zoom-hint-ink);
    background: var(--zoom-hint-surface);
    box-shadow: 0 12px 40px rgb(0 0 0 / 26%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-align: center;
    animation: map-zoom-hint-reveal 180ms ease-out both;
}

.mapZoomHint[hidden] { display: none !important; }

.mapZoomHint__close {
    position: absolute;
    top: 3px;
    right: 3px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--zoom-hint-muted);
    pointer-events: auto;
}

.mapZoomHint .mapZoomHint__close svg {
    position: static;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.mapZoomHint__close:hover { color: var(--zoom-hint-ink); }
.mapZoomHint__close:focus-visible { outline: 2px solid var(--zoom-hint-accent) !important; outline-offset: -5px; }
.mapZoomHint__diagram { height: 100px; margin: 0 auto 9px; }
.mapZoomHint .mapZoomHint__diagram > svg { position: static; display: block; width: 180px; height: 100px; margin: auto; }
.mapZoomHint__device { fill: none; stroke: var(--zoom-hint-ink); stroke-width: 2; }
.mapZoomHint__wheel { fill: var(--zoom-hint-accent); animation: map-zoom-wheel 1.7s ease-in-out infinite; }
.mapZoomHint__scroll { fill: none; stroke: var(--zoom-hint-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mapZoomHint__guide { fill: none; stroke: var(--zoom-hint-accent); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .4; }
.mapZoomHint__hand { fill: var(--zoom-hint-surface); stroke: var(--zoom-hint-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mapZoomHint__touch { fill: none; stroke: var(--zoom-hint-accent); stroke-width: 1.5; opacity: .6; }
.mapZoomHint__finger--first { animation: map-zoom-finger-first 2s ease-in-out infinite; }
.mapZoomHint__finger--second { animation: map-zoom-finger-second 2s ease-in-out infinite; }
.mapZoomHint__copy strong { display: block; color: inherit; font-size: 16px; font-weight: 500; line-height: 1.4; }
.mapZoomHint__copy span { display: block; margin-top: 5px; color: var(--zoom-hint-muted); font-size: 13px; font-weight: 300; line-height: 1.45; }
.mapZoomHint:not([data-gesture="pinch"]) .mapZoomHint__pinch,
.mapZoomHint:not([data-gesture="pinch"]) [data-map-zoom-hint-pinch],
.mapZoomHint[data-gesture="pinch"] .mapZoomHint__mouse,
.mapZoomHint[data-gesture="pinch"] [data-map-zoom-hint-wheel] { display: none; }

html.light .mapZoomHint {
    --zoom-hint-surface: #fff;
    --zoom-hint-ink: #20242b;
    --zoom-hint-muted: #5f6671;
    --zoom-hint-accent: #3e6fd4;
    box-shadow: 0 12px 40px rgb(20 25 33 / 16%);
}

@keyframes map-zoom-hint-reveal {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 6px)); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes map-zoom-wheel {
    0%, 15% { opacity: 0; transform: translateY(6px); }
    35%, 60% { opacity: 1; }
    80%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes map-zoom-finger-first {
    0%, 12% { transform: translate(0, 0); opacity: 0; }
    25% { opacity: 1; }
    70%, 85% { transform: translate(-34px, 16px); opacity: 1; }
    100% { transform: translate(-34px, 16px); opacity: 0; }
}
@keyframes map-zoom-finger-second {
    0%, 12% { transform: translate(0, 0); opacity: 0; }
    25% { opacity: 1; }
    70%, 85% { transform: translate(34px, -16px); opacity: 1; }
    100% { transform: translate(34px, -16px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mapZoomHint, .mapZoomHint__wheel, .mapZoomHint__finger { animation: none; }
    .mapZoomHint__finger--first { transform: translate(-22px, 10px); }
    .mapZoomHint__finger--second { transform: translate(22px, -10px); }
}
/* Cache refresh.                              */