/* Decorative hero compass. The fixed center is reserved for a state mascot. */
.navigator-compass{position:relative;width:156px;height:156px;margin:0 auto;isolation:isolate;pointer-events:none;flex-shrink:0}
.navigator-compass__face{display:block;width:100%;height:100%;overflow:visible}
.navigator-compass__ring{fill:none;stroke:#dfd3a4;stroke-opacity:.48;stroke-width:1}
.navigator-compass__ticks{fill:none;stroke:#e9dfb8;stroke-opacity:.62;stroke-width:1}
.navigator-compass__directions{fill:#fff6d9;font:700 9px/1 system-ui,sans-serif;letter-spacing:1px;text-anchor:middle;dominant-baseline:central}
.navigator-compass__needle{transform-box:view-box;transform-origin:80px 80px;will-change:transform}
.navigator-compass__needle--primary{transform:rotate(-35deg);animation:navigator-compass-primary 18s linear infinite}
.navigator-compass__needle--secondary{transform:rotate(55deg);animation:navigator-compass-secondary 27s linear infinite}
.navigator-compass__mascot-slot{position:absolute;inset:23%;border-radius:50%;background:#f0f3e5;border:1px solid #fff7dc80;box-shadow:0 0 0 1px #14291f12;overflow:hidden;display:grid;place-items:center;z-index:1}
.navigator-compass__mascot-slot>img,.navigator-compass__mascot-slot>svg{display:block;width:100%;height:100%;object-fit:contain}
.mode-panel:not(.active) .navigator-compass__needle{animation-play-state:paused}
@keyframes navigator-compass-primary{from{transform:rotate(-35deg)}to{transform:rotate(325deg)}}
@keyframes navigator-compass-secondary{from{transform:rotate(55deg)}to{transform:rotate(-305deg)}}
@media(max-width:650px){.navigator-compass{width:132px;height:132px}}
@media(prefers-reduced-motion:reduce){.navigator-compass__needle{animation:none;will-change:auto}}
@media print{.navigator-compass__needle{animation:none;will-change:auto}}