.tool[data-tool=compass] .compass{aspect-ratio:1;border:2px solid var(--c-border-strong);background:var(--c-surface-2);border-radius:50%;inline-size:min(100%,280px);margin-inline:auto;position:relative}.tool[data-tool=compass] .compass-dial{transition:transform .1s linear;position:absolute;inset:0}.tool[data-tool=compass] .mark{font-weight:700;position:absolute;transform:translate(-50%,-50%)}.tool[data-tool=compass] .mark.n{color:var(--c-danger);inset-block-start:12%;inset-inline-start:50%}.tool[data-tool=compass] .mark.e{inset-block-start:50%;inset-inline-start:88%}.tool[data-tool=compass] .mark.s{inset-block-start:88%;inset-inline-start:50%}.tool[data-tool=compass] .mark.w{inset-block-start:50%;inset-inline-start:12%}.tool[data-tool=compass] .compass-needle{z-index:1;border-inline:8px solid #0000;border-block-end:16px solid var(--c-primary);position:absolute;inset-block-start:4%;inset-inline-start:50%;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){.tool[data-tool=compass] .compass-dial{transition:none}}