@layer components{.zone-map{margin:0;& .zone-map__stage{position:relative;aspect-ratio:var(--zone-map-ratio);overflow:hidden;border-radius:var(--radius-m);background:var(--color-surface-alt)}& .zone-map__canvas{display:block;inline-size:100%;block-size:100%}& .zone-map__land{transform-box:view-box;transform-origin:0 0;transition:transform 450ms cubic-bezier(.22,.61,.36,1)}& .zone-map__district{fill:var(--color-border);stroke:var(--color-surface-alt);stroke-width:.6;vector-effect:non-scaling-stroke}& .zone-map__district[data-zone]{stroke:var(--color-surface);stroke-width:1.1}& .zone-map__district[data-zone='1']{fill:var(--color-zone-1)}& .zone-map__district[data-zone='2']{fill:var(--color-zone-2)}& .zone-map__district[data-zone='3']{fill:var(--color-zone-3)}& .zone-map__district[data-zone='4']{fill:var(--color-zone-4)}& .zone-map__border{fill:none;stroke:var(--color-border-strong);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}& .zone-map__pins{position:absolute;inset:0;margin:0;padding:0;list-style:none;opacity:0;transition:opacity 260ms ease;pointer-events:none}& .zone-map__pin{position:absolute;inset-inline-start:var(--zone-map-x);inset-block-start:var(--zone-map-y);inline-size:0;block-size:0}& .zone-map__pin-dot{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:.5rem;block-size:.5rem;transform:translate(-50%,-50%);border-radius:var(--radius-pill);background:var(--color-zone-1);box-shadow:0 0 0 2px var(--color-surface)}& .zone-map__pin-dot[data-zone='2']{background:var(--color-zone-2)}& .zone-map__pin-dot[data-zone='3']{background:var(--color-zone-3)}& .zone-map__pin-dot[data-zone='4']{background:var(--color-zone-4)}& .zone-map__pin-name{position:absolute;inset-block-end:.5rem;inset-inline-start:0;transform:translateX(-50%);padding-inline:.4em;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);font-size:.72rem;line-height:1.5;white-space:nowrap;z-index:1}& .zone-map__pin[data-place=below] .zone-map__pin-name{inset-block-end:auto;inset-block-start:.5rem}& .zone-map__pin[data-place=none] .zone-map__pin-name{display:none}&:has(.zone-map__input:checked) .zone-map__land, &:has(.zone-map__input:focus-visible) .zone-map__land, & .zone-map__stage:hover .zone-map__land{transform:var(--zone-map-zoom)}&:has(.zone-map__input:checked) .zone-map__pins, &:has(.zone-map__input:focus-visible) .zone-map__pins, & .zone-map__stage:hover .zone-map__pins{opacity:1}& .zone-map__controls{display:flex;flex-wrap:wrap;gap:var(--space-2xs)var(--space-s);align-items:center;margin-block-start:var(--space-s)}& .zone-map__switch{display:inline-flex;gap:var(--space-3xs);align-items:center;inline-size:fit-content}& .zone-map__switch-icon{color:var(--color-accent-strong)}& .zone-map__hint{flex:1 1 14rem;margin:0;color:var(--color-text-muted);font-size:var(--size-step--1)}& .zone-map__source{display:block;margin-block-start:var(--space-xs);color:var(--color-text-muted);font-size:var(--size-step--2)}@media(max-width:639px){& .zone-map__pin-name{display:none}}}@media(prefers-reduced-motion:reduce){.zone-map{& .zone-map__land, & .zone-map__pins{transition:none}}}}