header{text-align:center;padding:clamp(32px,7vh,72px) 16px 0}header .wordmark{font-size:clamp(2.6rem,8vw,4.4rem)}header p{color:var(--text-dim);margin:10px 0 0;font-size:clamp(1rem,2.4vw,1.2rem);font-weight:300}main{padding:0 16px}.shelf{--size:min(280px, 58vw);--centre:calc(var(--size) * .72);--floor:calc(var(--centre) + var(--size) * .56);height:calc(var(--floor) + var(--size) * .32);margin-top:12px;position:relative}.stage{perspective:1600px;perspective-origin:50% 25%;position:absolute;inset:0}.ring{left:50%;top:var(--centre);width:0;height:0;transform-style:preserve-3d;transform:translateZ(calc(var(--radius) * -1)) rotateX(-6deg) rotateY(calc(var(--at,0) * var(--step) * -1));transition:transform .9s cubic-bezier(.2,.8,.2,1);position:absolute}.slot{left:calc(var(--size) / -2);top:calc(var(--size) / -2);width:var(--size);height:var(--size);transform-style:preserve-3d;transform:rotateY(calc(var(--i) * var(--step))) translateZ(var(--radius));position:absolute}.slot .disc{cursor:pointer;transition:transform .5s}.slot.front .disc{transform:translateZ(30px)}.copy{transform-style:preserve-3d;transform:translate3d(0, calc(var(--k) * var(--size) * -.08), calc(var(--k) * -18px)) scale(calc(1 - var(--k) * .04));transition:transform .5s cubic-bezier(.2,.8,.2,1);position:absolute;top:0;left:0}.floor{pointer-events:none;-webkit-mask:linear-gradient(180deg, transparent var(--floor), #00000052 var(--floor), transparent calc(var(--floor) + var(--size) * .3));mask:linear-gradient(180deg, transparent var(--floor), #00000052 var(--floor), transparent calc(var(--floor) + var(--size) * .3));position:absolute;inset:0}.floor .stage{transform-origin:50% var(--floor);transform:scaleY(-1)}.horizon{left:50%;top:var(--floor);pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff73,#0000);width:min(900px,100%);height:1px;position:absolute;transform:translate(-50%);box-shadow:0 0 18px 2px #78d2ff40}.turn{top:var(--centre);z-index:2;width:34px;padding:0;position:absolute;transform:translateY(-50%)}.turn.prev{left:max(0px, calc(50% - var(--size) * 1.3))}.turn.next{right:max(0px, calc(50% - var(--size) * 1.3))}.dots{justify-content:center;gap:6px;margin:4px 0 18px;display:flex}.dots button{cursor:pointer;background:#ffffff4d;border:0;border-radius:50%;width:8px;height:8px;padding:0}.dots button[aria-current=true]{box-shadow:0 0 8px 1px var(--glow);background:#fff}.details{align-items:center;gap:20px;max-width:640px;margin:0 auto;padding:18px 22px;display:flex}.details[hidden]{display:none}.details .text{flex:1;min-width:0}.details h2{text-shadow:0 0 16px #6ec8ff59;font-size:clamp(1.6rem,5vw,2.1rem);line-height:1.15}.details .byline{color:var(--text-dim);margin:4px 0 0}.details .blurb{margin:10px 0 6px}.details .variants{flex-wrap:wrap;gap:6px;margin:0 0 8px;display:flex}.details .variants .btn{height:26px;padding:0 12px;font-size:.8rem}.details .variants .btn[aria-pressed=true]{box-shadow:inset 0 0 0 1px #ffffff8c, 0 0 10px var(--glow)}.details .note{color:var(--text-dim);margin:0 0 6px}.details .facts{color:var(--text-faint);margin:0;font-size:.85rem}.details .play{color:var(--text-dim);flex-direction:column;align-items:center;gap:6px;font-size:.85rem;text-decoration:none;display:flex}.details .play .orb{width:68px;height:68px}.about{max-width:640px;margin:20px auto 0;padding:14px 22px}.about h3{font-size:1.05rem;font-weight:400}.about p{color:var(--text-dim);margin:4px 0 0}@media (width<=520px){.details{text-align:left;flex-direction:column;align-items:stretch}.details .play{flex-direction:row;justify-content:center}}
