.compass{width:260px;height:260px;margin:20px auto;border-radius:50%;border:3px solid var(--br);position:relative;background:radial-gradient(var(--s1),var(--bg))}.needle{position:absolute;inset:0;transition:transform .3s}.needle:after{content:'🕋';position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:34px}.needle:before{content:'';position:absolute;top:50px;bottom:50%;left:calc(50% - 2px);width:4px;background:var(--gold);border-radius:4px}