.shelf{--case-h:340px;--case-w:calc(var(--case-h) * .6176);--spine-w:calc(var(--case-h) * .0646);--shelf-flip:.65s;--shelf-turn:.45s;--shelf-dwell:4s;--shelf-tilt-max:26;--shelf-tilt-gain:3.4;--shelf-tilt-accent:9;--shelf-tilt-accent-x:14;--shelf-tilt-ease:.45s;--shelf-cam-range:200;--shelf-open-gap:34px;--shelf-pop:26px;--shelf-clear:64px;--shelf-perspective:1500px;--shelf-count:88;width:100%;margin:3rem 0 0;overflow-x:clip}@media (width<=700px){.shelf{--case-h:200px}}.shelf3d{perspective:var(--shelf-perspective,900px);transition:perspective-origin var(--shelf-tilt-ease,.45s) cubic-bezier(.22, 1, .36, 1);overscroll-behavior-x:contain;scrollbar-width:thin;padding:var(--shelf-clear) 1.25rem var(--shelf-clear);scroll-padding:0 1.25rem;overflow-x:auto}.shelfrow{height:calc(var(--case-h) + 18px);width:max-content;padding-right:calc(var(--case-w) - var(--spine-w));transform-style:preserve-3d;justify-content:flex-start;align-items:flex-end;gap:4px;margin:0 auto;display:flex}@media (prefers-reduced-motion:reduce){.shelf3d{transition:none}}.case3d{flex:0 0 var(--spine-w);height:var(--case-h);cursor:pointer;transform-origin:0;transform-style:preserve-3d;transition:transform var(--shelf-flip) ease, margin var(--shelf-flip) ease;will-change:transform;background:0 0;border:0;margin:0;padding:0;font-size:0;position:relative;transform:translate(0)rotateY(90deg)translateZ(0)}.case3d .case3d__face{pointer-events:none}.case3d.is-active~.case3d{transform:translateX(calc(var(--case-w) - var(--spine-w))) rotateY(90deg) translateZ(0)}.case3d.is-active{margin-left:var(--shelf-open-gap);margin-right:var(--shelf-open-gap)}.case3d:has(+.case3d.is-active){margin-left:calc(var(--shelf-open-gap) * .5)}.case3d:has(+.case3d+.case3d.is-active){margin-left:calc(var(--shelf-open-gap) * .22)}.case3d.is-active+.case3d{margin-right:calc(var(--shelf-open-gap) * .5)}.case3d.is-active+.case3d+.case3d{margin-right:calc(var(--shelf-open-gap) * .22)}.case3d img{width:var(--case-w);height:var(--case-h);object-fit:cover;object-position:100% 50%;max-width:none;transform:translateZ(var(--spine-w));backface-visibility:hidden;border-radius:2px 5px 5px 2px;position:absolute;top:0;left:0;box-shadow:0 10px 16px #0000004d}.case3d:before{content:"";width:var(--spine-w);height:var(--case-h);transform-origin:0;background-color:var(--case-red);background-image:var(--case-art,linear-gradient(102deg, var(--case-red-deep) 0 12%, var(--case-red) 12% 100%));background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:2px;position:absolute;top:0;left:0;transform:rotateY(-90deg);box-shadow:inset -3px 0 5px #00000038}.case3d__face{width:var(--case-w);height:var(--spine-w);opacity:0;backface-visibility:hidden;background:linear-gradient(90deg,#c9c9cf,#9d9da6 55%,#b5b5bd);transition:opacity .2s;position:absolute;left:0}.shelfrow.is-tilt-down .case3d__face--top,.shelfrow.is-tilt-up .case3d__face--bot{opacity:1}.case3d__face--top{transform-origin:top;border-radius:2px 5px 0 0;top:0;transform:rotateX(90deg)}.case3d__face--bot{transform-origin:bottom;background:linear-gradient(90deg,#b5b5bd,#85858e 55%,#a2a2ab);border-radius:0 0 5px 2px;bottom:0;transform:rotateX(-90deg)}.case3d__face--side{top:0;left:var(--case-w);width:var(--spine-w);height:var(--case-h);transform-origin:0;opacity:1;backface-visibility:visible;background:linear-gradient(#c9c9cf 0 4%,#a8a8b1 50%,#bcbcc4);border-radius:0 3px 3px 0;transform:rotateY(-90deg)}.case3d.is-active{transform:translateX(0) rotateY(0deg) translateZ(var(--shelf-pop)) translateX(calc(var(--case-w) / 2)) rotateY(var(--flip-turn,0deg)) rotateX(var(--case-tilt,0deg)) rotateY(var(--case-tilt-y,0deg)) translateX(calc(var(--case-w) / -2))}.case3d.is-tracking{transition-duration:.17s}.case3d.is-turning{transition-duration:var(--shelf-turn,.45s)!important}.case3d.no-transition{transition:none!important}.case3d.is-active.is-flipped~.case3d{transform:translateX(calc(var(--case-w) - var(--spine-w))) rotateY(90deg) translateZ(0)}.case3d:after{content:"";width:var(--case-w);height:var(--case-h);background-color:var(--case-red);background-image:var(--case-art);backface-visibility:hidden;background-position:0%;background-repeat:no-repeat;background-size:cover;border-radius:5px 2px 2px 5px;position:absolute;top:0;left:0;transform:rotateY(180deg);box-shadow:0 10px 16px #0000004d}.case3d.is-active img{box-shadow:0 14px 24px #00000059}.case3d:focus-visible{outline:none}.case3d:focus-visible img,.case3d.is-active:focus-visible:before{box-shadow:0 14px 24px #00000059, var(--glow)}@media (prefers-reduced-motion:reduce){.case3d{transition:none}}.shelfrow{position:relative}.shelf3d__ceiling{transform-origin:top;background:linear-gradient(#0000008c,#18181e1f);top:0;transform:rotateX(90deg)}.shelf3d__floor{transform-origin:bottom;background:linear-gradient(#18181e1f,#0000008c);bottom:0;transform:rotateX(-90deg)}