.shelf{--spine-h:20rem;--book-depth:7rem;--cover-w:13rem;--card-w:17rem;--open-grow:1.12;--spine-scale:1;position:relative}@media (max-width:40rem){.shelf{--spine-h:15rem;--book-depth:5rem;--spine-scale:.82}}@media (min-width:64rem){.shelf{--spine-scale:1.2}}@media (min-width:80rem){.shelf{--spine-scale:1.3}}.shelf-scroller{overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;perspective:90rem;perspective-origin:50% 0;-webkit-mask-image:linear-gradient(90deg, transparent, var(--ink-950) 2.5rem, var(--ink-950) calc(100% - 2.5rem), transparent);mask-image:linear-gradient(90deg, transparent, var(--ink-950) 2.5rem, var(--ink-950) calc(100% - 2.5rem), transparent);padding-top:4.5rem;overflow:auto hidden}.shelf-scroller::-webkit-scrollbar{display:none}.shelf-row{width:max-content;min-width:100%;transform-style:preserve-3d;justify-content:center;align-items:flex-end;gap:.375rem;margin:0;padding:0 3rem;list-style:none;display:flex}.book{width:calc(var(--spine-w) * var(--spine-scale));scroll-snap-align:center;transform-style:preserve-3d;transition:width var(--duration-4) var(--ease-out);flex:none;position:relative}.book[data-open]{z-index:2;width:calc(var(--cover-w) * var(--spine-scale) * var(--open-grow) + 1rem + var(--card-w))}.spine{width:calc(var(--spine-w) * var(--spine-scale));height:calc((var(--spine-h) - var(--spine-drop)) * var(--spine-scale));background:linear-gradient(90deg, color-mix(in oklab, var(--cloth) 76%, var(--ink-950)) 0%, var(--cloth) 16%, var(--cloth) 74%, color-mix(in oklab, var(--cloth) 84%, var(--ink-0)) 100%);color:var(--cloth-ink);box-shadow:inset 1px 0 0 color-mix(in oklab, var(--ink-0) 16%, transparent), inset -1px 0 0 color-mix(in oklab, var(--ink-950) 28%, transparent), var(--shadow-md);transform-origin:50% 100%;transform-style:preserve-3d;transition:transform var(--duration-3) var(--ease-out), box-shadow var(--duration-3) var(--ease-out);border-radius:3px 3px 2px 2px;display:block;position:relative}.spine:focus-visible{outline-offset:4px}.book:hover .spine,.book:focus-within .spine{z-index:1;box-shadow:inset 1px 0 0 color-mix(in oklab, var(--ink-0) 16%, transparent), inset -1px 0 0 color-mix(in oklab, var(--ink-950) 28%, transparent), var(--shadow-xl);transform:translateY(-.875rem)rotateY(-26deg)translateZ(.75rem)}.book[data-open] .spine,.book[data-open]:hover .spine,.book[data-open]:focus-within .spine{transform-origin:100% 100%;transform:translateX(calc(-1 * var(--spine-w) * var(--spine-scale))) rotateY(-90deg) scale(var(--open-grow));box-shadow:none}.book[data-open] .spine:focus-visible{outline:none}.spine-top{width:100%;height:calc(var(--book-depth) * var(--spine-scale));background:var(--ink-50);background-image:repeating-linear-gradient(90deg, transparent 0 3px, color-mix(in oklab, var(--ink-950) 7%, transparent) 3px 4px);box-shadow:inset 0 0 0 2px var(--cloth);transform-origin:50% 0;border-radius:2px;position:absolute;top:0;left:0;transform:rotateX(-90deg)}.spine-cover{width:calc(var(--book-depth) * var(--spine-scale));height:100%;padding:calc(1.25rem * var(--spine-scale));background:linear-gradient(135deg, color-mix(in oklab, var(--cloth) 90%, var(--ink-0)), var(--cloth) 55%, color-mix(in oklab, var(--cloth) 88%, var(--ink-950)));box-shadow:inset 1px 0 0 color-mix(in oklab, var(--ink-950) 30%, transparent);color:var(--cloth-ink);text-align:left;transform-origin:0%;transition:width var(--duration-4) var(--ease-out), box-shadow var(--duration-4) var(--ease-out);border-radius:0 3px 3px 0;flex-direction:column;display:flex;position:absolute;top:0;left:100%;overflow:hidden;transform:rotateY(90deg)}.book[data-open] .spine-cover{width:calc(var(--cover-w) * var(--spine-scale));box-shadow:inset 1px 0 0 color-mix(in oklab, var(--ink-950) 30%, transparent), var(--shadow-xl)}.cover-date,.cover-title,.cover-foot{width:calc((var(--cover-w) - 2.5rem) * var(--spine-scale))}.cover-date{font-family:var(--font-mono);font-size:calc(.625rem * var(--spine-scale));letter-spacing:var(--tracking-wide);text-transform:uppercase;opacity:.8}.cover-title{margin-top:calc(1.25rem * var(--spine-scale));font-size:calc(1.375rem * var(--spine-scale));letter-spacing:var(--tracking-headline);text-wrap:balance;font-weight:500;line-height:1.15}.cover-foot{gap:calc(.875rem * var(--spine-scale));opacity:.85;flex-direction:column;margin-top:auto;display:flex}.cover-rule{background:currentColor;width:2rem;height:1px}.book-card{bottom:28%;left:calc(var(--cover-w) * var(--spine-scale) * var(--open-grow) + 1rem);z-index:3;width:var(--card-w);border:1px solid var(--hairline);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-lg);animation:rise var(--duration-3) var(--ease-out) both;animation-delay:var(--duration-2);padding:1.25rem;position:absolute}.book-card[hidden]{display:none}.book-card:focus-visible{outline:none}.book-card-close{border-radius:var(--radius-sm);width:2rem;height:2rem;color:var(--fg-subtle);transition:color var(--duration-2) var(--ease-out), background-color var(--duration-2) var(--ease-out);justify-content:center;align-items:center;display:inline-flex;position:absolute;top:.5rem;right:.5rem}.book-card-close:hover{color:var(--fg);background:var(--surface-sunken)}.spine-face{flex-direction:column;align-items:center;padding:.75rem 0;display:flex;position:absolute;inset:0}.spine-no{font-family:var(--font-mono);letter-spacing:var(--tracking-wide);text-transform:uppercase;opacity:.8;flex:none;font-size:.5625rem;line-height:1}.spine-title{writing-mode:vertical-rl;min-height:0;font-size:calc((.5rem + var(--spine-w) * .12) * var(--spine-scale));letter-spacing:var(--tracking-tight);white-space:nowrap;text-overflow:ellipsis;flex:auto;margin-top:.875rem;font-weight:500;line-height:1;overflow:hidden}.spine-foot{opacity:.8;background:currentColor;border-radius:999px;flex:none;width:.3125rem;height:.3125rem;margin-top:.75rem}.book-tip{z-index:2;border-radius:var(--radius-md);background:var(--ink-950);max-width:16rem;color:var(--ink-0);font-family:var(--font-mono);text-align:left;white-space:nowrap;text-overflow:ellipsis;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity var(--duration-2) var(--ease-out), transform var(--duration-2) var(--ease-out);padding:.5rem .75rem;font-size:.6875rem;line-height:1.35;position:absolute;bottom:calc(100% + 1.5rem);left:50%;overflow:hidden;transform:translate(-50%,.375rem)}.book-tip time{color:var(--ink-400);margin-top:.125rem;display:block}.book:first-child .book-tip{left:0;transform:translateY(.375rem)}.book:last-child .book-tip{left:auto;right:0;transform:translateY(.375rem)}.book:hover .book-tip,.book:focus-within .book-tip{opacity:1;transform:translate(-50%)}.book[data-open] .book-tip{display:none}.book:first-child:hover .book-tip,.book:first-child:focus-within .book-tip,.book:last-child:hover .book-tip,.book:last-child:focus-within .book-tip{transform:translate(0)}.shelf-board{background:linear-gradient(var(--ink-200), var(--ink-300));height:.625rem;box-shadow:0 1px 0 color-mix(in oklab, var(--ink-950) 18%, transparent), 0 18px 32px -14px color-mix(in oklab, var(--ink-950) 32%, transparent);border-radius:2px;margin:0 1.25rem;position:relative}@media (hover:none){.book-tip{display:none}}