.vs{position:relative;margin:2rem 0 2.5rem;padding-top:1rem}.vs:before{content:"";position:absolute;left:50%;top:-10%;width:min(90%,760px);height:120%;transform:translateX(-50%);background:radial-gradient(ellipse 50% 60% at 50% 30%,rgba(244,201,93,.14),transparent 70%);pointer-events:none}.vs-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:.45rem;height:19rem;perspective:1200px;perspective-origin:50% 20%}.vs-slot{position:relative;width:4.1rem;height:var(--h);animation:vs-arrive .9s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * .08s + .15s)}.vs-vol{--depth:11.5rem;position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(0) rotateY(0deg);transition:transform .65s cubic-bezier(.22,1,.36,1);cursor:pointer}.vs-vol>span{position:absolute;backface-visibility:hidden}.vs-spine{inset:0;display:flex;flex-direction:column;align-items:center;padding:.9rem 0 1.1rem;border-radius:3px;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.1) 22%,rgba(255,255,255,.02) 50%,rgba(0,0,0,.35)),var(--spine);box-shadow:inset 0 10px 0 -8px rgba(244,201,93,.7),inset 0 -10px 0 -8px rgba(244,201,93,.7),0 18px 30px -18px rgba(0,0,0,.8);color:#f4c95d;overflow:hidden}.vs-num{font-size:1.05rem;font-weight:600}.vs-num,.vs-title{font-family:Georgia,serif}.vs-title{flex:1;margin-top:.7rem;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.95rem;letter-spacing:.04em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f3e3b5}.vs-fill{position:relative;width:60%;height:4px;margin-top:.6rem;border-radius:2px;background:rgba(243,238,226,.15);overflow:hidden;backface-visibility:visible!important}.vs-fill:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:#f4c95d;box-shadow:0 0 8px rgba(244,201,93,.8)}.vs-cover{top:0;left:100%;width:var(--depth);height:100%;transform-origin:left center;transform:rotateY(90deg);border-radius:0 6px 6px 0;background-color:var(--spine);background-size:cover;background-position:50%;box-shadow:inset 6px 0 12px rgba(0,0,0,.35)}.vs-top{left:0;top:0;width:100%;height:var(--depth);transform-origin:top center;transform:rotateX(90deg);background:repeating-linear-gradient(90deg,#efe7d4 0 2px,#d9cfb6 2px 3px)}.vs-tip{position:absolute;left:50%;bottom:calc(100% + .9rem);transform:translate(-50%,6px);padding:.35rem .7rem;border-radius:999px;font-size:.75rem;white-space:nowrap;color:var(--color-text);background:color-mix(in srgb,var(--color-card) 90%,transparent);border:1px solid var(--color-hairline);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .35s cubic-bezier(.22,1,.36,1)}.vs-board{position:relative;height:14px;margin:0 auto;width:min(100%,44rem);border-radius:3px;background:linear-gradient(180deg,#3a2e22,#241c15);box-shadow:inset 0 1px 0 rgba(244,201,93,.25),0 20px 40px -12px rgba(0,0,0,.8)}@media (hover:hover) and (pointer:fine){.vs-slot:hover .vs-vol,.vs-vol:focus-visible{transform:translateZ(70px) translateY(-14px) rotateY(-52deg)}.vs-slot:hover .vs-tip{opacity:1;transform:translate(-50%)}.vs-slot:hover{z-index:2}}.vs-vol:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}@keyframes vs-arrive{0%{opacity:0;transform:translateY(-40px) rotate(-4deg)}60%{opacity:1}}html.a11y-motion :is(.vs-slot,.vs-vol,.vs-tip){animation:none;transition:none}