@layer theme,base;@layer components{.book-shelf{--book-angle:90deg;--book-spine-angle:-90deg;--book-origin:left;--book-fore-angle:90deg;--book-fore-origin:right;--book-light-direction:90deg;--book-grain:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22128%22%20height%3D%22128%22%20viewBox%3D%220%200%20128%20128%22%3E%3Cfilter%20id%3D%22grain%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url\(%23grain\)%22%20opacity%3D%22.075%22%2F%3E%3C%2Fsvg%3E);padding-block-end:1.5rem}.book-shelf-stage{--book-shelf-fade-start:0;--book-shelf-fade-end:0;--book-shelf-fade-left:var(--book-shelf-fade-start);--book-shelf-fade-right:var(--book-shelf-fade-end);transition:--book-shelf-fade-start .2s ease-out,--book-shelf-fade-end .2s ease-out;position:relative}.book-shelf-stage[data-fade-start]{--book-shelf-fade-start:1}.book-shelf-stage[data-fade-end]{--book-shelf-fade-end:1}.book-shelf-stage:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){--book-shelf-fade-left:var(--book-shelf-fade-end);--book-shelf-fade-right:var(--book-shelf-fade-start)}.book-shelf-canvas,.book-shelf-viewport{-webkit-mask-image:linear-gradient(to right, rgb(0 0 0/calc(1 - var(--book-shelf-fade-left))), #000 28px, #000 calc(100% - 28px), rgb(0 0 0/calc(1 - var(--book-shelf-fade-right))));mask-image:linear-gradient(to right, rgb(0 0 0/calc(1 - var(--book-shelf-fade-left))), #000 28px, #000 calc(100% - 28px), rgb(0 0 0/calc(1 - var(--book-shelf-fade-right))))}.book-shelf-canvas{pointer-events:none;position:absolute;inset:0}.book-shelf-stage:after{inset-inline:0;border-bottom:4px solid color-mix(in oklab, var(--border), var(--foreground) 8%);height:4px;box-shadow:0 8px 12px -12px var(--foreground);clip-path:inset(0 0 -1rem);pointer-events:none;content:"";position:absolute;bottom:20px}.book-shelf-viewport{scrollbar-width:none;padding-block:90px 24px;overflow-x:auto}.book-shelf-viewport::-webkit-scrollbar{display:none}.book-shelf:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){--book-angle:-90deg;--book-spine-angle:90deg;--book-origin:right;--book-fore-angle:-90deg;--book-fore-origin:left;--book-light-direction:-90deg}.book-shelf-books{justify-content:center;align-items:flex-end;gap:var(--book-gap);width:max-content;min-width:100%;height:292px;padding-block:0;padding-inline:0;display:flex;position:relative}.book-shelf-item{width:var(--book-closed-slot);height:var(--book-height);perspective:4000px;perspective-origin:var(--book-origin) bottom;flex:none;transition:width .65s cubic-bezier(.2,.65,.3,1);position:relative}.book-shelf-item[data-selected]{width:242px}.book-shelf-viewport[data-rendered] .book-shelf-books{padding:0;display:block}.book-shelf-viewport[data-rendered] .book-shelf-item{transition:none;position:absolute}.book-shelf-viewport[data-rendered] .book-shelf-tilt,.book-shelf-viewport[data-rendered] .book-shelf-contact-shadow{display:none}.book-shelf-trigger{outline-offset:6px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;transform-style:preserve-3d;border-radius:2px;position:absolute;inset:0}.book-shelf-trigger:focus-visible{outline:2px solid var(--ring)}.book-shelf-item:not([data-selected]) .book-shelf-trigger:before{inset-block:0;inset-inline:0 calc(-1 * var(--book-gap));content:"";position:absolute}.book-shelf-item:last-child .book-shelf-trigger:before{inset-inline-end:0}.book-shelf-contact-shadow{inset-inline-start:1px;width:calc(var(--book-depth) + 2px);pointer-events:none;height:10px;transform-origin:var(--book-origin) center;background:radial-gradient(#00000070,#00000028 45%,#0000 70%);border-radius:50%;position:absolute;bottom:-3px}.book-shelf-tilt,.book-shelf-object{width:var(--book-width);color:var(--book-ink);transform-origin:var(--book-origin) bottom;transform-style:preserve-3d;position:absolute;inset-block:0;inset-inline-start:0}.book-shelf-tilt{transition:transform .65s cubic-bezier(.2,.65,.3,1);transform:rotateX(0)}.book-shelf-item[data-selected] .book-shelf-tilt{transition-duration:0s}.book-shelf-object{transform:translateY(0) rotateY(var(--book-angle)) scale(1)}.book-shelf-pages,.book-shelf-pages-bottom,.book-shelf-pages-edge{backface-visibility:hidden;background-color:#eeeadd;background-image:repeating-linear-gradient(#0000,#0000 .8px,#5e513a21 .8px 1.3px);position:absolute}.book-shelf-pages,.book-shelf-pages-bottom{height:calc(var(--book-depth) - 5px);border-inline-start:1px solid #4d3d2838;inset-inline:5px 3px;box-shadow:inset 0 0 3px #3e332129}.book-shelf-pages{transform-origin:top;top:4px;transform:translateZ(2.5px)rotateX(90deg)}.book-shelf-pages-bottom{transform-origin:bottom;bottom:4px;transform:translateZ(2.5px)rotateX(-90deg)}.book-shelf-pages-edge{width:calc(var(--book-depth) - 5px);transform:translateZ(2.5px) rotateY(var(--book-fore-angle));transform-origin:var(--book-fore-origin) center;background-image:linear-gradient(90deg,#3b2e1d1a,#0000 30%),repeating-linear-gradient(#0000,#0000 .9px,#5e513a24 .9px 1.4px);inset-block:4px;inset-inline-end:3px}.book-shelf-top-case,.book-shelf-bottom-case,.book-shelf-fore-case{background-image:linear-gradient(to bottom, var(--book-cover) 2px, transparent 2px, transparent calc(var(--book-depth) - 2px), var(--book-cover) calc(var(--book-depth) - 2px));backface-visibility:hidden;position:absolute}.book-shelf-top-case,.book-shelf-bottom-case{height:var(--book-depth);inset-inline:0}.book-shelf-top-case:before,.book-shelf-bottom-case:before{background:var(--book-cover);content:"";border-radius:2px;width:5px;position:absolute;inset-block:0;inset-inline-start:0}.book-shelf-top-case{transform-origin:top;top:0;transform:rotateX(90deg)}.book-shelf-bottom-case{transform-origin:bottom;bottom:0;transform:rotateX(-90deg)}.book-shelf-fore-case{width:var(--book-depth);background-image:linear-gradient(90deg, var(--book-cover) 2px, transparent 2px, transparent calc(var(--book-depth) - 2px), var(--book-cover) calc(var(--book-depth) - 2px));transform:rotateY(var(--book-fore-angle));transform-origin:var(--book-fore-origin) center;inset-block:0;inset-inline-end:0}.book-shelf-cover,.book-shelf-back,.book-shelf-spine{background-color:var(--book-cover);backface-visibility:hidden;position:absolute;inset-block:0}.book-shelf-cover,.book-shelf-back{background-image:linear-gradient(var(--book-light-direction), #00000029, #ffffff1a 1.5%, #0000001a 3.5%, #0000000d 5.5%, transparent 9%, #ffffff05 55%, #0000000a), var(--book-grain);border:1px solid #0000001f;border-radius:2px 4px 4px 2px;inset-inline:0;box-shadow:inset 0 1px #ffffff2e,inset 0 -1px 1px #00000024,1px 2px 3px #00000014}:is(.book-shelf-cover:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),.book-shelf-back:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-radius:4px 2px 2px 4px}.book-shelf-cover{transform:translateZ(var(--book-depth))}.book-shelf-back{transform:rotateY(180deg);box-shadow:inset 0 1px #ffffff1a,4px 5px 9px #00000021}.book-shelf-cover:after{border-radius:inherit;pointer-events:none;content:"";background:linear-gradient(135deg,#ffffff0d,#0000 45%,#00000005);position:absolute;inset:0}.book-shelf-cover-frame{text-align:center;border:1px solid #0000;flex-direction:column;justify-content:center;align-items:center;gap:1rem;height:calc(100% - 2rem);margin:1rem;padding:1rem .5rem;display:flex;position:relative}.book-shelf-cover-pattern{border-radius:inherit;background:var(--book-ink);-webkit-mask-image:var(--book-pattern-image);mask-image:var(--book-pattern-image);-webkit-mask-size:var(--book-pattern-size);mask-size:var(--book-pattern-size);opacity:.025;pointer-events:none;position:absolute;inset:0;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:repeat;mask-repeat:repeat}.book-shelf-cover-outline{width:100%;height:100%;color:color-mix(in oklab, var(--book-ink) 35%, transparent);pointer-events:none;position:absolute;inset:0;overflow:visible}.book-shelf-cover-mark{opacity:.65;width:auto;height:1.75rem}.book-shelf-cover-title{text-wrap:balance;-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:1rem;font-weight:600;line-height:1.35;display:-webkit-box;overflow:hidden}.book-shelf-cover-author{opacity:.8;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.625rem;line-height:1.6;display:-webkit-box;overflow:hidden}.book-shelf-spine{width:var(--book-depth);background-image:linear-gradient(var(--book-light-direction), #0000002e, #ffffff1c 16%, #ffffff0a 40%, transparent 65%, #0000001f 88%, #00000042), var(--book-grain);transform:rotateY(var(--book-spine-angle));transform-origin:var(--book-origin) center;border:1px solid #0000001f;border-radius:2px;inset-inline-start:0;box-shadow:inset 0 1px #ffffff24,inset 0 -1px #0000002e,0 2px 3px #0000001a}.book-shelf-spine-title{width:calc(var(--book-height) - 4.5rem);text-overflow:ellipsis;text-align:left;white-space:nowrap;transform-origin:0 0;font-size:.9375rem;font-weight:500;position:absolute;top:1rem;left:50%;overflow:hidden;transform:rotate(90deg)translateY(-50%)}.book-shelf-spine-mark{opacity:.7;width:auto;height:.875rem;position:absolute;bottom:1rem;left:50%;transform:translate(-50%)}.book-shelf-item[data-selected]{z-index:1}.book-shelf-item:not([data-selected]):has(.book-shelf-trigger:focus-visible) .book-shelf-tilt{transform:rotateX(-12deg)}@media (hover:hover) and (pointer:fine){.book-shelf-item:not([data-selected]):hover .book-shelf-tilt{transform:rotateX(-12deg)}}.book-shelf-selection{text-align:center;align-items:start;width:100%;min-height:4.5rem;padding-top:.5rem;display:grid}.book-shelf-name{text-wrap:balance;overflow-wrap:anywhere;border-radius:2px;align-items:baseline;gap:.25rem;max-width:100%;font-size:1rem;font-weight:500;line-height:1.35;display:inline-flex}a.book-shelf-name:focus-visible{outline:2px solid var(--ring);outline-offset:4px}a.book-shelf-name:hover{text-underline-offset:4px;text-decoration:underline}.book-shelf-name-caret{width:.875rem;height:.875rem;color:var(--muted-foreground);flex:none;align-self:center}.book-shelf:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .book-shelf-name-caret{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){.book-shelf-stage,.book-shelf-item,.book-shelf-contact-shadow,.book-shelf-tilt,.book-shelf-object{transition:none}.book-shelf-item:not([data-selected]):hover .book-shelf-tilt{transform:none}.book-shelf-item:not([data-selected]):has(.book-shelf-trigger:focus-visible) .book-shelf-tilt{transform:none}}}@layer utilities;@property --book-shelf-fade-start{syntax:"<number>";inherits:true;initial-value:0}@property --book-shelf-fade-end{syntax:"<number>";inherits:true;initial-value:0}