.compass-stage{height:500px;perspective:1300px;overflow:visible}.grand-compass{--size:400px;--tilt-x:5deg;--tilt-y:-2deg;isolation:isolate;filter:drop-shadow(0 34px 38px rgba(49,103,111,.2))!important;transform-style:preserve-3d!important}.grand-compass:before{content:"";position:absolute;z-index:-3;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.88),rgba(185,241,236,.28) 53%,rgba(132,114,224,.08) 67%,transparent 69%);transform:translateZ(-25px);filter:blur(5px)}
.compass-aura{inset:-15%;background:radial-gradient(circle,rgba(54,211,200,.2),rgba(151,127,234,.06) 48%,transparent 67%)!important;animation:premium-breathe 6s ease-in-out infinite!important}.compass-aura:before,.compass-aura:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.compass-aura:before{inset:4%;border:1px dashed rgba(21,148,155,.18);box-shadow:0 0 24px rgba(46,189,181,.12);animation:premium-spin 50s linear infinite}.compass-aura:after{inset:12%;background:conic-gradient(from 0deg,transparent 0 12%,rgba(42,181,177,.13) 13%,transparent 16% 45%,rgba(126,104,211,.1) 47%,transparent 51% 100%);mask:radial-gradient(circle,transparent 0 70%,#000 71% 74%,transparent 75%);animation:premium-spin-reverse 34s linear infinite}
.compass-bezel{transform:translateZ(0);background:repeating-conic-gradient(from -1deg,rgba(22,137,144,.56) 0 1deg,transparent 1deg 5deg),radial-gradient(circle at 35% 24%,transparent 0 10%,rgba(255,255,255,.75) 10.5% 11%,transparent 11.5% 57%,rgba(23,145,151,.13) 57.5% 58.5%,transparent 59% 73%,#62cec6 73.5% 75%,#edfbfa 75.5% 78%,#22a4a2 78.5% 79.5%,#f8ffff 80% 82%,#bfe9e5 83%)!important;box-shadow:inset 0 0 0 2px rgba(27,143,149,.65),inset 0 0 0 9px rgba(255,255,255,.9),inset 0 0 0 11px rgba(41,162,164,.28),inset 0 0 52px rgba(43,163,161,.12),0 0 0 1px rgba(22,131,139,.24),0 28px 65px rgba(48,103,113,.17)!important}.compass-bezel:before{inset:13%!important;border:1px solid rgba(28,143,149,.24)!important;box-shadow:0 0 0 7px rgba(255,255,255,.6),0 0 0 8px rgba(37,156,159,.2),inset 0 0 32px rgba(57,186,178,.09)!important}.compass-bezel:after{inset:31%!important;border:1px solid rgba(119,100,205,.3)!important;box-shadow:0 0 0 5px rgba(255,255,255,.65),0 0 0 6px rgba(118,100,205,.15),0 0 30px rgba(106,92,194,.08)!important;animation:premium-core-pulse 5s ease-in-out infinite}
.time-orbit{animation:none!important;transform:translateZ(18px)}.time-orbit:before{content:"";position:absolute;inset:5.7%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 8%,rgba(255,255,255,.9) 9%,transparent 10% 34%,rgba(69,200,192,.2) 35%,transparent 38% 72%,rgba(132,111,216,.14) 73%,transparent 77%);mask:radial-gradient(circle,transparent 0 88%,#000 89% 90%,transparent 91%);animation:premium-spin 24s linear infinite}.time-orbit span{width:25px!important;height:25px!important;border:1px solid rgba(26,137,144,.16)!important;background:rgba(255,255,255,.82)!important;color:#496c70!important;font:600 11px/1 system-ui,"Microsoft YaHei",sans-serif!important;box-shadow:0 3px 10px rgba(49,105,113,.09)!important;backdrop-filter:blur(8px);text-shadow:none!important}
.palace-orbit{animation:none!important;transform:translateZ(42px)}.palace-orbit:before{inset:17%!important;background:repeating-conic-gradient(from -30deg,rgba(33,145,151,.2) 0 1px,transparent 1px 60deg)!important;mask:radial-gradient(circle,transparent 0 66%,#000 67% 68%,transparent 69%)!important}.palace-orbit span{width:94px!important;min-height:48px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px 10px;border:1px solid rgba(28,143,149,.2);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(232,249,248,.84));color:#153c43!important;font:700 18px/1.05 "STSong","SimSun",serif!important;letter-spacing:2px!important;text-shadow:none!important;box-shadow:inset 0 1px rgba(255,255,255,.95),0 8px 20px rgba(43,107,115,.12),0 0 0 3px rgba(255,255,255,.28);backdrop-filter:blur(12px)}.palace-orbit small{margin-top:5px!important;color:#7a6a46!important;font:600 9px/1 system-ui,"Microsoft YaHei",sans-serif!important;letter-spacing:2px!important}.palace-orbit span:nth-child(1),.palace-orbit span:nth-child(3),.palace-orbit span:nth-child(5){border-color:rgba(24,151,155,.25)}.palace-orbit span:nth-child(2),.palace-orbit span:nth-child(4),.palace-orbit span:nth-child(6){border-color:rgba(119,101,205,.2)}
.compass-axis{inset:29%;transform:translateZ(20px);background:conic-gradient(from 15deg,rgba(40,178,173,.07),transparent 18%,rgba(130,111,210,.08) 33%,transparent 52%,rgba(40,178,173,.07) 67%,transparent 86%)!important;animation:premium-spin-reverse 45s linear infinite!important}.compass-axis:before,.compass-axis:after{opacity:.5;box-shadow:none!important}.compass-needle{top:17%;height:66%;transform:translateZ(65px);animation:premium-needle 16s ease-in-out infinite!important;filter:drop-shadow(0 2px 5px rgba(35,115,123,.3))!important}.compass-hub{inset:39%;transform:translateZ(75px);background:radial-gradient(circle at 34% 25%,#fff,#e1f7f4 55%,#b8e5e1)!important;color:#087f88!important;border:1px solid rgba(31,150,155,.5)!important;box-shadow:inset 0 1px 5px white,0 0 0 5px rgba(255,255,255,.9),0 0 0 7px rgba(38,153,157,.35),0 13px 28px rgba(45,111,120,.2),0 0 32px rgba(50,186,178,.16)!important}.compass-hub b{font-size:24px!important;color:#087f88;text-shadow:0 1px white}.compass-hub small{color:#8a6a30!important;font-weight:700!important;letter-spacing:3px!important}
.grand-compass .active{color:#087f88!important;border-color:rgba(9,139,146,.6)!important;background:linear-gradient(145deg,#ffffff,#d8f6f2)!important;box-shadow:inset 0 1px white,0 10px 24px rgba(31,137,143,.18),0 0 0 4px rgba(52,190,181,.12),0 0 22px rgba(38,179,172,.14)!important}.grand-compass .active:after{width:28px!important;height:2px!important;margin:5px auto 0!important;background:linear-gradient(90deg,transparent,#079298,transparent)!important;box-shadow:0 0 7px rgba(14,151,155,.3)!important}
.grand-compass.result-size{--size:300px;margin:8px auto 30px}.grand-compass.result-size .palace-orbit span{width:72px!important;min-height:39px;padding:5px 6px;font-size:15px!important;border-radius:11px}.grand-compass.result-size .palace-orbit small{font-size:7px!important;margin-top:3px!important}.grand-compass.result-size .time-orbit span{width:20px!important;height:20px!important;font-size:8px!important}.grand-compass.result-size .compass-hub b{font-size:18px!important}.grand-compass.result-size .compass-hub small{font-size:7px!important}
@keyframes premium-spin{to{transform:rotate(360deg)}}@keyframes premium-spin-reverse{to{transform:rotate(-360deg)}}@keyframes premium-breathe{0%,100%{opacity:.62;transform:scale(.97)}50%{opacity:1;transform:scale(1.035)}}@keyframes premium-core-pulse{0%,100%{opacity:.7;filter:drop-shadow(0 0 0 rgba(50,186,178,0))}50%{opacity:1;filter:drop-shadow(0 0 8px rgba(50,186,178,.2))}}@keyframes premium-needle{0%,100%{rotate:-4deg}45%{rotate:8deg}55%{rotate:8deg}}
@media(max-width:800px){.compass-stage{height:390px;overflow:hidden}.grand-compass{--size:320px}.grand-compass.result-size{--size:260px}.palace-orbit span{width:76px!important;min-height:41px;padding:5px 6px;font-size:15px!important;border-radius:11px}.palace-orbit small{font-size:7px!important;margin-top:3px!important}.time-orbit span{width:21px!important;height:21px!important;font-size:9px!important}}
@media(max-width:380px){.grand-compass{--size:290px}.grand-compass.result-size{--size:238px}.palace-orbit span{width:67px!important;font-size:14px!important}}
@media(prefers-reduced-motion:reduce){.compass-aura,.compass-aura:before,.compass-aura:after,.time-orbit:before,.compass-bezel:after,.compass-axis,.compass-needle{animation:none!important}}