.wheel.wheel--spatial{position:absolute;right:2.6%;top:16%;width:285px;height:68%;min-height:480px;z-index:5;isolation:isolate;perspective:650px;overflow:visible;touch-action:none;color:#e9fff9;font-family:"PingFang SC","Microsoft YaHei",sans-serif}
.wheel--spatial *{box-sizing:border-box}.wheel--spatial:focus-visible{outline:2px solid #bbfff2;outline-offset:5px}
.wheel--spatial .spatial-ring{position:absolute;inset:7% 10% 9%;border:1px solid #81fce94f;border-radius:50%;transform:rotate(-8deg);box-shadow:inset 0 0 45px #3ef6d415,0 0 35px #35f6d416;pointer-events:none}
.wheel--spatial .spatial-ring::before,.wheel--spatial .spatial-ring::after{content:"";position:absolute;inset:8% 18%;border:1px dashed #9affef30;border-radius:50%}.wheel--spatial .spatial-ring::after{inset:19% 30%;border-style:solid;border-color:#a6fff119}
.wheel--spatial .spatial-rail{position:absolute;inset:0;transform-style:preserve-3d}
.wheel--spatial .spatial-card{position:absolute;left:50%;top:49%;display:block;width:205px;height:123px;overflow:hidden;border:1px solid #94fce3a8;background:linear-gradient(130deg,#1d4b5b,#041523);box-shadow:0 13px 36px #000b,0 0 22px #42ffd42b;text-decoration:none;color:#fff;will-change:transform,opacity;backface-visibility:hidden;transition:border-color .18s,box-shadow .18s}
.wheel--spatial .spatial-card::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#c8fff625 48%,transparent 68%);transform:translateX(-120%);pointer-events:none}
.wheel--spatial.is-entered:not(.is-reduced) .spatial-card.is-front::after{animation:spatial-sheen 3.4s ease-in-out infinite}
@keyframes spatial-sheen{0%,50%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.wheel--spatial .spatial-icon{position:absolute;inset:0;display:grid;place-items:center;color:#a3efed;z-index:2;pointer-events:none}
.wheel--spatial .spatial-icon svg{width:clamp(31px,4vw,56px);height:auto;filter:drop-shadow(0 0 9px #5ee7ee75)}
.wheel--spatial .spatial-card.is-front .spatial-icon{color:#d2fffb}
.wheel--spatial .spatial-card::before{content:"";position:absolute;inset:32% 0 0;background:linear-gradient(transparent,#020b17ed);z-index:1}
.wheel--spatial .spatial-card strong,.wheel--spatial .spatial-card small{position:absolute;z-index:2;text-shadow:0 2px 10px #000}.wheel--spatial .spatial-card strong{left:14px;bottom:13px;font-size:17px;letter-spacing:2px}.wheel--spatial .spatial-card small{right:13px;top:10px;font:10px monospace;color:#dbfff7}
.wheel--spatial .spatial-card.is-front{border-color:#d2fff3;box-shadow:0 17px 48px #000d,0 0 31px #70ffe971}.wheel--spatial .spatial-card:hover,.wheel--spatial .spatial-card:focus-visible{border-color:#fff;outline:2px solid #c8fff5;outline-offset:3px}
.wheel--spatial .spatial-tools{position:absolute;left:8%;right:8%;bottom:-11px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;letter-spacing:1px;color:#b9e2da}.wheel--spatial .spatial-pause{border:1px solid #72ddc69c;background:#0a2935ec;color:#dcfff5;font:inherit;padding:7px 10px;cursor:pointer;white-space:nowrap}.wheel--spatial .spatial-pause:hover,.wheel--spatial .spatial-pause:focus-visible{outline:1px solid #d9fff5;outline-offset:3px}
@media(max-width:650px){.wheel.wheel--spatial{right:8px;top:31%;width:155px;height:41%;min-height:260px;perspective:420px}.wheel--spatial .spatial-ring{inset:5% 6% 5%}.wheel--spatial .spatial-card{width:133px;height:83px;top:47%}.wheel--spatial .spatial-card strong{left:8px;bottom:8px;font-size:11px;letter-spacing:1px}.wheel--spatial .spatial-card small{right:7px;top:6px;font-size:8px}.wheel--spatial .spatial-tools{left:0;right:0;bottom:-43px;font-size:8px}.wheel--spatial .spatial-pause{padding:5px 6px}}
@media(prefers-reduced-motion:reduce){.wheel--spatial .spatial-card::after{animation:none!important}.wheel--spatial .spatial-card{transition:none!important}}

@media(max-height:600px) and (orientation:landscape){.wheel.wheel--spatial{right:2%;top:9%;width:180px;height:78%;min-height:0}.wheel--spatial .spatial-card{width:134px;height:76px;top:47%}.wheel--spatial .spatial-card strong{font-size:12px;bottom:8px}.wheel--spatial .spatial-tools{bottom:0;left:0;right:0}}