.compass-stage{height:430px;display:grid;place-items:center;overflow:hidden;perspective:900px}
.grand-compass{--size:370px;position:relative;width:var(--size);height:var(--size);border-radius:50%;isolation:isolate;filter:drop-shadow(0 25px 25px rgba(70,45,12,.18));transform:rotateX(3deg)}
.compass-aura{position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(circle,rgba(213,172,86,.2),transparent 64%);animation:breathe 5s ease-in-out infinite;z-index:-2}
.compass-bezel{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -1deg,#70501d 0 1deg,transparent 1deg 5deg),radial-gradient(circle at 38% 30%,transparent 0 12%,rgba(255,255,255,.55) 12.5% 13%,transparent 13.5% 57%,rgba(74,47,12,.18) 57.5% 59%,transparent 59.5% 74%,#c19a50 74.5% 76%,#7b5a25 76.5% 77.5%,#e3c77e 78% 81%,#8d682e 82% 83%,#d9b96c 84%);box-shadow:inset 0 0 0 2px #7d5c26,inset 0 0 0 8px #e1c67f,inset 0 0 0 11px rgba(78,51,14,.35),inset 0 0 32px rgba(73,45,9,.24),0 0 0 1px rgba(87,58,18,.35)}
.compass-bezel:before,.compass-bezel:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.compass-bezel:before{inset:12%;border:1px solid rgba(111,72,24,.45);box-shadow:0 0 0 7px rgba(245,232,194,.75),0 0 0 8px rgba(115,78,28,.35),inset 0 0 25px rgba(173,126,54,.12)}.compass-bezel:after{inset:34%;border:1px solid rgba(151,52,38,.5);box-shadow:0 0 0 5px rgba(168,59,46,.07),0 0 0 6px rgba(103,65,22,.3)}
.time-orbit,.palace-orbit{position:absolute;inset:0;border-radius:50%}.time-orbit{animation:orbit-reverse 100s linear infinite}.time-orbit span{--a:calc(var(--i)*30deg);position:absolute;left:50%;top:50%;width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(119,79,28,.28);border-radius:50%;background:rgba(255,251,238,.86);color:#755627;font:12px "STSong","SimSun",serif;transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--size)*-.435)) rotate(calc(var(--a)*-1));box-shadow:0 2px 5px rgba(83,52,13,.1)}
.palace-orbit{animation:orbit 56s linear infinite}.palace-orbit:before{content:"";position:absolute;inset:18%;border-radius:50%;background:repeating-conic-gradient(from -30deg,rgba(139,96,35,.38) 0 1px,transparent 1px 60deg);mask:radial-gradient(circle,transparent 0 66%,#000 67%)}.palace-orbit span{--a:calc(var(--i)*60deg);position:absolute;left:50%;top:50%;width:78px;text-align:center;color:#372d20;font:22px/1.15 "STSong","SimSun",serif;letter-spacing:2px;transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--size)*-.305)) rotate(calc(var(--a)*-1));text-shadow:0 1px 0 #fff}.palace-orbit small{display:block;margin-top:5px;color:#9f372c;font:10px/1.2 "Microsoft YaHei",sans-serif;letter-spacing:3px}
.compass-axis{position:absolute;inset:28%;border-radius:50%;background:conic-gradient(from 15deg,rgba(168,59,46,.08),transparent 18%,rgba(180,138,69,.13) 33%,transparent 52%,rgba(49,92,80,.09) 67%,transparent 86%);animation:orbit-reverse 36s linear infinite}.compass-axis:before,.compass-axis:after{content:"";position:absolute;inset:50% -13%;height:1px;background:linear-gradient(90deg,transparent,#a98950 20% 80%,transparent)}.compass-axis:after{transform:rotate(90deg)}
.compass-needle{position:absolute;left:50%;top:18%;width:2px;height:64%;background:linear-gradient(to bottom,#a83b2e 0 41%,transparent 41% 59%,#315c50 59%);transform-origin:50% 50%;animation:needle 18s ease-in-out infinite;filter:drop-shadow(0 2px 2px rgba(60,36,9,.25))}.compass-needle:before,.compass-needle:after{content:"";position:absolute;left:50%;transform:translateX(-50%);border-left:7px solid transparent;border-right:7px solid transparent}.compass-needle:before{top:-1px;border-bottom:0;border-top:18px solid #a83b2e}.compass-needle:after{bottom:-1px;border-top:0;border-bottom:14px solid #315c50}
.compass-hub{position:absolute;inset:39%;display:grid;place-content:center;text-align:center;border-radius:50%;background:radial-gradient(circle at 36% 28%,#c85b47,#9f2f25 55%,#702018);color:#fff9e9;border:1px solid #6e241c;box-shadow:0 0 0 5px #e0c477,0 0 0 7px #8b6429,0 10px 22px rgba(77,40,15,.28);z-index:3}.compass-hub b{font:23px/1 "STSong","SimSun",serif;letter-spacing:4px}.compass-hub small{font:9px/1 "Microsoft YaHei",sans-serif;letter-spacing:4px;margin:8px 0 0 3px;color:#f4dca9}
.grand-compass.result-size{--size:270px;margin:0 auto 22px}.grand-compass.result-size .time-orbit span{width:18px;height:18px;font-size:9px}.grand-compass.result-size .palace-orbit span{font-size:16px;width:58px}.grand-compass.result-size .palace-orbit small{font-size:8px;letter-spacing:1px}.grand-compass.result-size .compass-hub b{font-size:17px}.grand-compass.result-size .compass-hub small{font-size:7px}.grand-compass .active{color:#a83b2e!important;font-weight:700}.grand-compass .active:after{content:"";display:block;width:22px;height:2px;margin:4px auto 0;background:#a83b2e;box-shadow:0 0 8px #c95843}
@keyframes orbit{to{transform:rotate(360deg)}}@keyframes orbit-reverse{to{transform:rotate(-360deg)}}@keyframes needle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(12deg)}}@keyframes breathe{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
@media(max-width:800px){.compass-stage{height:350px}.grand-compass{--size:300px}.grand-compass.result-size{--size:245px}.palace-orbit span{font-size:18px;width:66px}.time-orbit span{width:20px;height:20px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.time-orbit,.palace-orbit,.compass-axis,.compass-needle,.compass-aura{animation:none}}