.bookshelf-patterns{--shelf-edge:#6f4c35;--shelf-edge-dark:#281a15}.book{position:relative;width:var(--book-width);height:280px;flex:0 0 var(--book-width);transform:rotate(var(--book-tilt));transform-origin:bottom center;transform-style:preserve-3d;transition:transform .56s cubic-bezier(.16,1,.3,1),filter .26s ease;animation:book-enter .5s cubic-bezier(.16,1,.3,1) var(--book-delay) backwards;will-change:transform}.book-side{position:absolute;border:1px solid color-mix(in srgb,var(--book-accent) 26%,var(--book-edge));border-radius:2px 2px 1px 1px;font-weight:600;text-align:center;transform-origin:left center;backface-visibility:hidden}:is(.dark) .book-side{border-color:color-mix(in srgb,var(--book-accent) 42%,var(--book-edge))}.book-spine{z-index:2;width:var(--book-width);overflow:hidden;color:var(--book-ink);background:linear-gradient(180deg,var(--book-accent) 0 3px,transparent 3px 10px,color-mix(in srgb,var(--book-accent) 66%,transparent) 10px 11px,transparent 11px calc(100% - 11px),color-mix(in srgb,var(--book-accent) 66%,transparent) calc(100% - 11px) calc(100% - 10px),transparent calc(100% - 10px) calc(100% - 3px),var(--book-accent) calc(100% - 3px) 100%),radial-gradient(circle at 23% 18%,rgba(255,240,214,.18) 0 .6px,transparent .9px),linear-gradient(90deg,rgba(255,229,185,.1),transparent 14%,transparent 84%,rgba(26,12,12,.22)),var(--book-surface);background-size:auto,15px 17px,auto,auto;box-shadow:inset 2px 0 rgba(255,231,196,.16),inset -4px 0 7px rgba(24,12,14,.28),1px 2px 0 rgba(0,0,0,.14)}.book-spine:before{position:absolute;top:10px;right:6px;left:6px;height:28px;border-top:1px solid color-mix(in srgb,var(--book-accent) 62%,transparent);border-bottom:1px solid color-mix(in srgb,var(--book-accent) 62%,transparent);color:color-mix(in srgb,var(--book-ink) 84%,transparent);content:attr(data-index);font-size:8px;font-weight:650;letter-spacing:.05em;line-height:27px;text-align:center}.book-spine:after{position:absolute;top:43px;right:6px;left:6px;height:1px;background:color-mix(in srgb,var(--book-accent) 76%,transparent);box-shadow:0 2px 0 color-mix(in srgb,var(--book-accent) 32%,transparent);content:""}.book-spine-title{top:54px;left:50%;max-height:calc(100% - 99px);transform:translateX(-50%);color:var(--book-ink);font-family:var(--font-source-serif),Georgia,serif;font-size:11px;font-weight:600;letter-spacing:.015em;line-height:1.08;text-align:left;writing-mode:vertical-rl}.book-spine-author,.book-spine-title{position:absolute;overflow:hidden;text-shadow:none}.book-spine-author{right:7px;bottom:9px;left:7px;color:color-mix(in srgb,var(--book-accent) 76%,var(--book-ink));font-size:7px;font-weight:720;letter-spacing:.08em;text-overflow:ellipsis;white-space:nowrap}.book-top{width:var(--book-width);height:14px;background:repeating-linear-gradient(90deg,#f2ead9 0 2px,#c8bba6 2px 3px),linear-gradient(180deg,#f5eddf,#cbbda7);transform:skewX(-9deg) translateY(-7px)}:is(.dark) .book-top{background:repeating-linear-gradient(90deg,#f2ead9 0 2px,#c8bba6 2px 3px),linear-gradient(180deg,#f5eddf,#cbbda7)}.book-cover{z-index:1;left:calc(var(--book-width) - 1px);width:170px;opacity:0;pointer-events:none;background-color:var(--book-edge);background-position:50%;background-repeat:no-repeat;background-size:cover;border-color:color-mix(in srgb,var(--book-accent) 72%,var(--book-edge));box-shadow:0 12px 28px rgba(0,0,0,.28);transform:translateX(-24px) translateY(7px) scale(.9);transform-origin:left bottom;transition:opacity .18s ease,transform .56s cubic-bezier(.16,1,.3,1)}.book-cover:after{position:absolute;inset:0;border:4px solid color-mix(in srgb,var(--book-accent) 32%,transparent);background:linear-gradient(115deg,rgba(255,255,255,.11),transparent 36%);content:"";pointer-events:none}:is(.dark) .book-cover{background-color:var(--book-edge)}.book:nth-last-child(-n+2) .book-cover{right:calc(var(--book-width) - 1px);left:auto;transform:translateX(24px) translateY(7px) scale(.9);transform-origin:right bottom}@media (hover:hover) and (pointer:fine){.book:hover{z-index:20;filter:saturate(1.08) brightness(1.04);transform:translateX(-3px) translateY(-12px) rotateY(-5deg) rotate(-1deg)}.book:hover+.book{transform:translateX(11px) rotate(var(--book-tilt))}.book:hover .book-cover{opacity:1;transform:translateX(8px) translateY(-3px) rotate(1deg) scale(.95)}.book:nth-last-child(-n+2):hover .book-cover{transform:translateX(-8px) translateY(-3px) rotate(-1deg) scale(.95)}}.shelf-row{position:relative;display:flex;width:100%;min-height:318px;align-items:flex-end;gap:2px;overflow-x:auto;overflow-y:hidden;margin-bottom:8px;padding:28px 14px 14px;border-bottom:0;background:radial-gradient(circle at 23% 22%,color-mix(in srgb,#c9a66b 9%,transparent) 0 .6px,transparent 1px),linear-gradient(180deg,color-mix(in srgb,#7a5136 10%,transparent),transparent 58%),linear-gradient(180deg,color-mix(in srgb,hsl(var(--foreground)) 4%,hsl(var(--background))),hsl(var(--background)));background-size:19px 21px,auto,auto;box-shadow:inset 0 1px color-mix(in srgb,#c9a66b 12%,transparent),inset 0 -24px 32px rgba(0,0,0,.18);perspective:1100px;isolation:isolate;overscroll-behavior-x:contain;scrollbar-width:none}.shelf-row::-webkit-scrollbar{display:none}.shelf-row:after{position:absolute;right:0;bottom:0;left:0;z-index:30;height:10px;border-top:1px solid color-mix(in srgb,#c49a64 48%,hsl(var(--border)));background:linear-gradient(180deg,color-mix(in srgb,var(--shelf-edge) 78%,hsl(var(--background))) 0 20%,color-mix(in srgb,#543728 76%,hsl(var(--background))) 20% 72%,color-mix(in srgb,var(--shelf-edge-dark) 84%,hsl(var(--background))) 72%);box-shadow:inset 0 1px rgba(255,230,188,.14),0 4px 10px rgba(0,0,0,.26);content:"";pointer-events:none}@keyframes book-enter{0%{opacity:0;transform:translateY(10px) scale(.985) rotate(var(--book-tilt))}to{opacity:1;transform:translateY(0) scale(1) rotate(var(--book-tilt))}}@media (max-width:560px){.shelf-row{min-height:306px;gap:2px;padding-inline:10px}}@media (hover:none),(max-width:767px),(pointer:coarse){.book,.book:hover,.book:hover+.book{z-index:auto;filter:none;transform:rotate(var(--book-tilt));transition:none}.book-cover,.book:hover .book-cover,.book:nth-last-child(-n+2) .book-cover,.book:nth-last-child(-n+2):hover .book-cover{display:none}}@media (prefers-reduced-motion:reduce){.book{animation:none}.book,.book-cover{transition-duration:.01ms}}