/* VELNIS instrument: vector dial, satin bezel and independent moving rings. */
.compass-scene{height:360px;margin:24px 0 28px;background:radial-gradient(ellipse at 50% 38%,#fffdf6,#eee8dc 74%);isolation:isolate}
.velnis-compass{display:block;width:min(100%,355px);height:auto;overflow:visible;filter:drop-shadow(0 16px 17px #112d362b)}
.compass-ticks line{stroke:#b8c8c6;stroke-width:.8;opacity:.3}
.compass-ticks .medium{opacity:.53;stroke-width:.9}
.compass-ticks .major{stroke:#dac6a0;stroke-width:1.5;opacity:.9}
.compass-indexes{fill:#8ba0a5;font-family:'DM Sans',sans-serif;font-size:7px;font-weight:400;letter-spacing:1px}
.compass-cardinals{fill:#e3d4b6;font-family:Manrope,sans-serif;font-size:15px;font-weight:500;letter-spacing:1px}
.compass-cardinals .north{fill:#ffedc7;font-weight:700}
.compass-bearing{fill:#8b7045;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:3px;font-variant-numeric:tabular-nums}
.compass-orbit,.compass-counter,.compass-sweep{transform-origin:240px 240px;animation:compass-rotation 48s linear infinite;animation-play-state:paused}
.compass-counter{animation-duration:38s;animation-direction:reverse}
.compass-sweep{animation-duration:12s}
.compass-scene.is-running .compass-orbit,.compass-scene.is-running .compass-counter,.compass-scene.is-running .compass-sweep{animation-play-state:running}
.compass-motion{position:absolute;bottom:14px;right:14px;display:grid;place-items:center;width:34px;height:34px;background:#f7f2e86b;border:1px solid #aa947547;border-radius:50%;color:#6c7776;cursor:pointer;transition:color .2s,border-color .2s}
.compass-motion:hover{color:#10232b;border-color:#8f7a54}
.compass-motion svg{width:13px;height:13px;fill:currentColor}
.compass-motion .play-icon{display:none}
.compass-motion[aria-pressed=true] .pause-icon{display:none}
.compass-motion[aria-pressed=true] .play-icon{display:block}
@keyframes compass-rotation{to{transform:rotate(360deg)}}
@media(max-width:650px){.compass-scene{height:310px;margin-left:-6px;margin-right:-6px}.velnis-compass{width:min(100%,305px)}.compass-motion{bottom:9px;right:9px;width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){.compass-orbit,.compass-counter,.compass-sweep{animation:none!important}.compass-motion{display:none}}