.case{--row:15.5rem;--gap:1.6rem;--board-h:.7rem;background:radial-gradient(120% 60% at 50% 0%, #ffecc817, transparent 60%), linear-gradient(var(--case), var(--case-back));border-radius:6px;padding:1.25rem clamp(.75rem,2.5vw,1.75rem) .25rem;position:relative;box-shadow:inset 0 10px 18px -8px #0009,inset 0 0 0 1px #00000059}.case__books{align-items:flex-end;gap:var(--gap) 0;background:repeating-linear-gradient(to bottom, transparent 0 var(--row), var(--board) var(--row) calc(var(--row) + 3px), var(--board-edge) calc(var(--row) + 3px) calc(var(--row) + var(--board-h)), transparent calc(var(--row) + var(--board-h)) calc(var(--row) + var(--gap)));flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.spine{height:var(--row);color:#fff;font:inherit;background:0 0;border:0;align-items:flex-end;margin:0 1px;padding:0;text-decoration:none;display:flex}.spine[hidden]{display:none}.spine__body{width:var(--w);height:var(--h);background:linear-gradient(90deg, #ffffff24, transparent 24%, transparent 76%, #00000040), var(--c);color:var(--tc,#fff);transition:transform .26s var(--ease-out);border-radius:2px 2px 0 0;flex-direction:column;align-items:center;gap:.35rem;padding:.45rem 0 0;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0000002e}.spine>.spine__body{width:max(1.5rem, var(--w))}.spine__body:before{content:"";background:#ffd682b3;height:2px;position:absolute;top:.3rem;left:0;right:0;box-shadow:0 5px #ffd68273}.spine__vol{font-family:var(--font-display);flex:none;margin-top:.4rem;font-size:.85rem;font-weight:750;line-height:1}.spine__title{writing-mode:vertical-rl;text-overflow:ellipsis;white-space:nowrap;min-height:0;font-family:var(--font-display);flex:1;margin-top:.35rem;font-size:.78rem;font-weight:700;font-stretch:78%;line-height:1;overflow:hidden;transform:rotate(180deg)}.spine__foot{writing-mode:vertical-rl;text-align:center;width:100%;font-family:var(--font-display);letter-spacing:.04em;background:#00000047;border-top:2px solid #ffd6828c;flex:none;padding:.45rem 0;font-size:.58rem;font-weight:750;line-height:1;transform:rotate(180deg)}.spine[data-status=ordered] .spine__body{background:repeating-linear-gradient(135deg, var(--c) 0 3px, transparent 3px 7px), color-mix(in oklch, var(--c) 35%, #f4f1e8);color:#1c1f23}.spine[data-status=ordered] .spine__title{background:#f9faf7;border-radius:1px;flex:0 auto;padding:.3rem .1rem}.spine[data-status=ordered] .spine__vol{background:#f9faf7;border-radius:1px;padding:.15rem .2rem}.spine[data-status=ordered] .spine__foot{background:#f9faf7}.spine[data-status=wishlist] .spine__body{outline:1.5px dashed color-mix(in oklch, var(--c) 55%, #fff);outline-offset:-1.5px;color:#ffffffc7;background:0 0}.spine[data-status=wishlist] .spine__body:before,.spine[data-status=wishlist] .spine__foot{box-shadow:none;background:0 0;border-color:#0000}.spine[data-status=gone] .spine__body{background:color-mix(in srgb, var(--c) 35%, var(--case));color:#fff}.spine[data-status=gone] .spine__body:before{opacity:.4}a.spine:hover .spine__body,button.spine:hover .spine__body{transform:translateY(-.35rem)}.spine[aria-selected=true] .spine__body,.spine[aria-current=true] .spine__body{box-shadow:0 0 0 2px var(--case), 0 0 0 4px var(--process-yellow);transform:translateY(-1.1rem)}.spine:focus-visible{outline:none}.spine:focus-visible .spine__body{outline:2px solid var(--process-yellow);outline-offset:2px}@media (width<=40rem){.case{--row:11.5rem;--gap:1.25rem}.spine>.spine__body{height:calc(var(--h) * .72);width:max(1.5rem, calc(var(--w) * .8))}.spine__title{font-size:.62rem}}.stage{background:radial-gradient(circle, color-mix(in srgb, var(--process-magenta) 42%, transparent) 0 32%, transparent 35%) 0 0 / 13px 13px, color-mix(in srgb, var(--process-yellow) 86%, var(--paper));cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;border-radius:8px;place-items:center;min-height:24rem;display:grid;position:relative}.stage:active{cursor:grabbing}.book3d{--ry:24deg;width:var(--bw);height:var(--bh);perspective:1200px}.book3d__inner{width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-7deg) rotateY(var(--ry));position:relative}.book3d.is-turning .book3d__inner{transition:transform 1.1s cubic-bezier(.2,.9,.25,1.05)}.book3d__inner>*{backface-visibility:hidden;position:absolute}.book3d__front{background:var(--c);transform:translateZ(calc(var(--bt) / 2));border-radius:1px 4px 4px 1px;inset:0;overflow:hidden}.book3d__front img{object-fit:cover;width:100%;height:100%}.book3d__gloss{pointer-events:none;background:linear-gradient(90deg,#00000059 0,#ffffff2e 3%,#0000 8%),linear-gradient(115deg,#0000 35%,#ffffff29 48%,#0000 60%);position:absolute;inset:0}.book3d__printed{background:radial-gradient(circle, #fff3 0 30%, transparent 33%) 0 0 / 9px 9px, var(--c);height:100%;color:var(--tc);font-family:var(--font-display);flex-direction:column;justify-content:flex-end;padding:.9rem;font-size:1.3rem;font-weight:800;font-stretch:72%;line-height:1;display:flex}.book3d__sticker{background:var(--process-yellow);color:#1c1f23;padding:.2rem .6rem;font-size:.72rem;font-weight:700;position:absolute;top:38%;left:-.3rem;rotate:-7deg;box-shadow:0 2px #0003}.book3d__back{background:color-mix(in oklch, var(--c) 30%, #15181c);color:#fff;transform:rotateY(180deg) translateZ(calc(var(--bt) / 2));place-items:end center;padding-bottom:1rem;display:grid;inset:0}.book3d__exlibris{font-family:var(--font-display);opacity:.8;border:1px solid;padding:.3rem .6rem;font-size:.62rem;font-weight:600}.book3d__spine{top:0;left:calc(50% - var(--bt) / 2);width:var(--bt);height:100%;transform:rotateY(-90deg) translateZ(calc(var(--bw) / 2))}.book3d__spine .spine__body{--w:100%;--h:100%;border-radius:0}.book3d__pages{top:1.5%;left:calc(50% - var(--bt) / 2);width:var(--bt);height:97%;transform:rotateY(90deg) translateZ(calc(var(--bw) / 2 - 3px));background:repeating-linear-gradient(90deg,#f4f0e6 0 1px,#ddd6c4 1px 2px)}.book3d__top{left:0;top:calc(50% - var(--bt) / 2);width:calc(100% - 3px);height:var(--bt);transform:rotateX(90deg) translateZ(calc(var(--bh) / 2 - 2px));background:repeating-linear-gradient(0deg,#f4f0e6 0 1px,#ddd6c4 1px 2px)}.book3d[data-status=wishlist],.book3d[data-status=gone]{opacity:.85}