.compass{width:272px;height:272px;margin:var(--sp5) auto;border-radius:50%;border:1px solid var(--line);position:relative;background:radial-gradient(circle,var(--s3),var(--bg) 72%);box-shadow:0 0 90px -30px rgba(217,174,107,.4),inset 0 0 0 14px rgba(217,174,107,.04)}
.needle{position:absolute;inset:0;transition:transform .35s var(--ease)}.needle:before{content:'';position:absolute;top:44px;bottom:50%;left:calc(50% - 1.5px);width:3px;border-radius:3px;background:linear-gradient(var(--gold),transparent)}
.needle:after{content:'';position:absolute;top:10px;left:calc(50% - 15px);width:30px;height:30px;border-radius:7px;border:1px solid var(--gold);background:linear-gradient(#0c0805 58%,var(--gold) 58% 70%,#0c0805 70%)}