.bookshelf{--wood:oklch(84% .075 72);--stone:oklch(87% .008 85);--lamp:transparent;--pages:oklch(96% .015 90);--glow:oklch(97% .04 85/.9);--tone-l:.97;--tone-c:.72;--dim:transparent;--cat:oklch(22% .012 55);--cat-lit:oklch(34% .015 55);--cat-shade:oklch(16% .01 55);--cat-eye:oklch(76% .14 75);--cat-tongue:oklch(72% .09 10);--stone-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0 0 0 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");container-type:inline-size}[data-theme=dark] .bookshelf{--wood:oklch(50% .06 48);--stone:oklch(50% .01 70);--lamp:oklch(75% .07 70/.16);--pages:oklch(80% .015 85);--glow:oklch(80% .06 75/.22);--tone-l:.8;--tone-c:.6;--dim:#0003;--cat:oklch(26% .012 55);--cat-lit:oklch(42% .025 60);--cat-shade:oklch(19% .01 55)}.bookshelf>*{--unit:min(1.3px, 100cqi / var(--plank-mm));--u:var(--unit)}.bookshelf-wall{--plank-t:35;z-index:1;isolation:isolate;width:calc(var(--plank-mm) * var(--u));padding:calc(32 * var(--u)) 0 calc((var(--plank-t) + 16) * var(--u));perspective:calc(1000 * var(--u));perspective-origin:50% calc(100 * var(--u));margin-inline:auto;position:relative}.bookshelf-wall:before,.bookshelf-wall:after{content:"";z-index:-1;position:absolute}.bookshelf-wall:before{inset:calc(-40 * var(--u)) 0 0;background:radial-gradient(closest-side, var(--lamp), transparent)}.bookshelf-wall:after{inset-inline:calc(6 * var(--u));top:calc((32 + var(--max-h) + var(--plank-t)) * var(--u));height:calc(24 * var(--u));background:linear-gradient(#00000052,#0000001a 40%,#0000);mask-image:linear-gradient(90deg,#0000,#000 6% 94%,#0000)}.bookshelf-row{height:calc(var(--max-h) * var(--u));padding-inline:calc(var(--overhang) * var(--u));transform-style:preserve-3d;align-items:flex-end;display:flex;position:relative}.bookshelf-slot{width:calc(var(--T) * var(--u));height:calc(var(--H) * var(--u));transform-style:preserve-3d;cursor:pointer;flex:none}.bookshelf-slot:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.bookshelf-plank{--front:15;--depth:calc(var(--max-w) + 25);transform-style:preserve-3d;position:absolute;inset:100% 0 auto}.bookshelf-plank-top,.bookshelf-plank-front{background-color:var(--wood);background-size:100% 100%, calc(1830 * var(--u)) calc(300 * var(--u));background-blend-mode:normal, multiply;position:absolute;inset-inline:0}.bookshelf-plank-top{height:calc(var(--depth) * var(--u));transform-origin:bottom;transform:translateZ(calc(var(--front) * var(--u))) rotateX(90deg);background-image:radial-gradient(calc(80 * var(--u)) calc(55 * var(--u)) at right calc(85 * var(--u)) bottom calc(75 * var(--u)), #00000073, transparent), linear-gradient(to top, #ffffff26, transparent 10% 40%, #0006), url(/_astro/wood.C6tGxE7T.webp);background-size:100% 100%, 100% 100%, calc(1830 * var(--u)) calc(300 * var(--u));background-blend-mode:normal, normal, multiply;bottom:0}.bookshelf-plank-front{height:calc(var(--plank-t) * var(--u));transform:translateZ(calc(var(--front) * var(--u)));border-radius:0 0 calc(3 * var(--u)) calc(3 * var(--u));box-shadow:inset calc(6 * var(--u)) 0 calc(6 * var(--u)) calc(-3 * var(--u)) #00000073, inset calc(-6 * var(--u)) 0 calc(6 * var(--u)) calc(-3 * var(--u)) #00000073;background-image:linear-gradient(#fff6, #ffffff1a calc(2 * var(--u)), #0000001a calc(5 * var(--u)), #00000052), url(/_astro/wood.C6tGxE7T.webp);top:0}.bookshelf-bookend{--deep:120;width:calc(var(--bookend-w) * var(--u));height:calc(var(--bookend-h) * var(--u));transform-style:preserve-3d;flex:none;position:relative}.bookshelf-bookend[data-side=right]{margin-left:calc(var(--slack) * var(--u))}.bookend-face{background:var(--shade), var(--stone-grain) 0 0 / calc(200 * var(--u)), var(--stone);position:absolute;top:0;left:0}.bookend-front{--shade:linear-gradient(#fff3, transparent 30%, #0000001f);width:100%;height:100%;transform:translateZ(calc(-5 * var(--u)));box-shadow:inset 0 calc(3 * var(--u)) calc(3 * var(--u)) calc(-1 * var(--u)) #ffffff80, inset calc(5 * var(--u)) 0 calc(5 * var(--u)) calc(-2 * var(--u)) #00000047, inset calc(-5 * var(--u)) 0 calc(5 * var(--u)) calc(-2 * var(--u)) #00000047}.bookend-top{--shade:linear-gradient(#ffffff4d, #ffffff4d);width:100%;height:calc(var(--deep) * var(--u));transform-origin:top;transform:translateZ(calc(-5 * var(--u))) rotateX(-90deg)}.bookend-side{--shade:linear-gradient(90deg, #00000026, #0000004d);width:calc(var(--deep) * var(--u));transform-origin:0;height:100%;transform:translateX(var(--inner,0)) translateZ(calc(-5 * var(--u))) rotateY(90deg)}.bookshelf-bookend[data-side=left] .bookend-side{--inner:calc(var(--bookend-w) * var(--u))}.book{width:calc(var(--T) * var(--u));height:calc(var(--H) * var(--u));transform-style:preserve-3d;position:relative}.book-lean,.book-pull,.book-box{transform-style:preserve-3d;position:absolute;inset:0}.book-pull{transform-origin:50% 100%;transform:translateZ(calc(max(var(--pull,0) * var(--W) * .3, var(--out,0) * (var(--W) + 30)) * var(--u))) rotateX(calc(var(--pull,0) * (1 - var(--out,0)) * -6deg))}.book-box{transform-origin:50% 50% calc(var(--W) * var(--u) * -.5)}.book-face{background-color:var(--bg);height:100%;color:var(--fg);position:absolute;top:0}@supports (color:oklch(from red l c h)){.book-face{background-color:oklch(from var(--bg) calc(l * var(--tone-l)) calc(c * var(--tone-c)) h);color:oklch(from var(--fg) calc(l * var(--tone-l)) calc(c * var(--tone-c)) h)}}.book-spine{padding:calc(14 * var(--u)) 0 calc(10 * var(--u));writing-mode:vertical-rl;font-size:clamp(7px, calc(min(var(--T) * .42, 7.5) * var(--u)), 13px);white-space:nowrap;background-image:linear-gradient(to bottom, transparent 4%, color-mix(in srgb, currentColor 35%, transparent) 4% 4.6%, transparent 4.6% 95.4%, color-mix(in srgb, currentColor 35%, transparent) 95.4% 96%, transparent 96%), linear-gradient(90deg, #0000004d, #ffffff1f 22%, #fff0 45%, #00000014 75%, #00000057);justify-content:space-between;align-items:center;line-height:1;display:flex;inset:0}.book-spine-title{text-overflow:ellipsis;letter-spacing:.02em;min-inline-size:0;font-weight:600;overflow:hidden}.book-spine-author{opacity:.8;flex:none;margin-block-start:calc(6 * var(--u));font-size:.8em}.book-cover,.book-back{left:calc((var(--T) - var(--W)) * var(--u) / 2);width:calc(var(--W) * var(--u));--side:calc(var(--T) * var(--u) * .5 - 1px)}.book-cover{padding:calc(var(--W) * var(--u) * .12) calc(var(--W) * var(--u) * .1) calc(var(--W) * var(--u) * .1) calc(var(--W) * var(--u) * .14);transform:translateZ(calc(var(--W) * var(--u) * -.5)) rotateY(90deg) translateZ(var(--side));background-image:linear-gradient(90deg, #00000047, #ffffff1a 3%, transparent 7%), linear-gradient(160deg, #ffffff1f, transparent 40%), var(--cover-art,none);background-position:50%;background-size:cover;flex-direction:column;justify-content:space-between;display:flex;box-shadow:inset 0 0 0 1px #00000014}.book-cover[data-cover]{--cover-art:linear-gradient(var(--dim), var(--dim)), var(--cover)}.book-cover[data-cover]>*,.bookshelf-row .book-cover>*{visibility:hidden}.book-cover-title{font-size:calc(var(--W) * .085 * var(--u));letter-spacing:-.01em;text-wrap:balance;font-weight:700;line-height:1.1}.book-cover-author{font-size:calc(var(--W) * .045 * var(--u));opacity:.85}.book-back{transform:translateZ(calc(var(--W) * var(--u) * -.5)) rotateY(-90deg) translateZ(var(--side))}.book-top{width:100%;height:calc(var(--W) * var(--u));transform-origin:top;background:repeating-linear-gradient(90deg, var(--pages) 0 1px, oklch(from var(--pages) calc(l - .08) c h) 1px 2px);left:0;transform:rotateX(-90deg)}.bookshelf-stage{grid-template-columns:calc(var(--max-w) * var(--u)) 1fr;align-items:center;gap:1.5rem 2rem;margin-top:1rem;display:grid;overflow-x:clip}@container (width<=520px){.bookshelf-stage{--u:calc(var(--unit) * .8);grid-template-columns:1fr}}.bookshelf-stage-book{z-index:1;isolation:isolate;height:calc((var(--max-h) + 10) * var(--u));perspective:calc(1000 * var(--u));perspective-origin:calc(50% + var(--eye-dx,0) * 1px) calc(70% + var(--eye-dy,0) * 1px);justify-content:center;align-items:flex-end;display:flex;position:relative}.bookshelf-stage-book:before,.bookshelf-stage-book:after{content:"";z-index:-1;opacity:0;transition:opacity .8s;position:absolute;left:50%;translate:-50%}.bookshelf-stage-book:before{background:radial-gradient(ellipse 50% 30% at 50% 70%, var(--glow), transparent);width:150%;height:90%;bottom:-8%}.bookshelf-stage-book:after{bottom:calc(-3 * var(--u));width:calc(var(--W,0) * var(--u) * .95);height:calc(8 * var(--u));filter:blur(calc(4 * var(--u)));background:#00000073;border-radius:50%;transition:opacity .4s .6s,width .4s .6s}.bookshelf-stage[data-active] .bookshelf-stage-book:before,.bookshelf-stage[data-active] .bookshelf-stage-book:after{opacity:1}.bookshelf-cat{width:calc(var(--corner) * var(--u));height:calc(248 * var(--u));margin-bottom:calc(-8 * var(--u));transform:translateZ(calc(-60 * var(--u)));pointer-events:none;flex:none;overflow:visible}.bookshelf-cat g,.bookshelf-cat path{transform-box:view-box}.cat-breath{transform-origin:96px 240px;animation:3.2s ease-in-out infinite cat-breath}.cat-tail-tip{transform-origin:54px 239px;animation:5s ease-in-out infinite cat-tail-tip}.cat-ear{transform-origin:72px 44px;animation:9s ease-in-out infinite cat-ear}.cat-arm{transform-origin:64px 124px;animation:12s ease-in-out infinite cat-arm}.cat-forearm{transform-origin:59px 172px;animation:12s ease-in-out infinite cat-forearm}.cat-head{transform-origin:80px 86px;animation:12s ease-in-out infinite cat-head}.cat-tongue{transform-origin:31px 70px;animation:12s ease-in-out infinite cat-tongue}.cat-eye{transform-origin:45px 52px;animation:12s ease-in-out infinite cat-eye}@keyframes cat-breath{50%{transform:scaleY(1.012)}}@keyframes cat-tail-tip{0%,70%,to{transform:none}77%{transform:rotate(-16deg)}84%{transform:rotate(6deg)}}@keyframes cat-ear{0%,60%,66%,to{transform:none}62%{transform:rotate(-14deg)}68%{transform:rotate(-7deg)}71%{transform:none}}@keyframes cat-arm{0%,18%,70%,to{transform:none}25%,62%{transform:rotate(25deg)}}@keyframes cat-forearm{0%,18%,70%,to{transform:none}25%,62%{transform:rotate(-224deg)}}@keyframes cat-head{0%,22%,68%,to{transform:none}27%,32%,37%,42%,47%,52%{transform:rotate(-32deg)}29.5%,34.5%,39.5%,44.5%,49.5%,54.5%{transform:rotate(-26deg)}60%{transform:rotate(-30deg)}}@keyframes cat-tongue{0%,27%,29.5%,32%,34.5%,37%,39.5%,42%,44.5%,47%,49.5%,52%,54.5%,to{transform:scale(0)}28.5%,33.5%,38.5%,43.5%,48.5%,53.5%{transform:none}}@keyframes cat-eye{0%,23%,63%,86%,90%,to{transform:none}26%,60%,88%{transform:scaleY(.12)}}@media (prefers-reduced-motion:reduce){.book-pull{transform:none}.bookshelf-cat *{animation:none}}.bookshelf3d{--lamp:transparent;--pool:oklch(97% .04 85/.9)}[data-theme=dark] .bookshelf3d{--lamp:oklch(75% .07 70/.16);--pool:oklch(80% .06 75/.22)}.bookshelf3d-scene{isolation:isolate;z-index:1;pointer-events:none;margin-inline:auto;position:relative}.bookshelf3d-scene:before,.bookshelf3d-scene:after{content:"";z-index:-1;pointer-events:none;position:absolute}.bookshelf3d-scene:before{inset:0 0 var(--stage-h);background:radial-gradient(closest-side, var(--lamp), transparent)}.bookshelf3d-scene:after{left:calc(var(--spot-x) - 160px);top:calc(var(--spot-y) - 70px);background:radial-gradient(closest-side, var(--pool), transparent);opacity:0;width:320px;height:110px;transition:opacity .6s}.bookshelf3d[data-active] .bookshelf3d-scene:after{opacity:1}.bookshelf3d-canvas{opacity:0;transition:opacity .4s;position:absolute;inset:0}.bookshelf3d-canvas[data-ready]{opacity:1}.bookshelf3d-slot{pointer-events:auto;cursor:pointer;position:absolute}.bookshelf3d-slot:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.bookshelf3d[data-wide] .bookshelf3d-text{min-height:var(--stage-h);margin:calc(-1 * var(--stage-h)) 0 0 48%;align-content:center;position:relative}.bookshelf3d:not([data-wide]) .bookshelf3d-text{margin-top:1rem}@media (prefers-reduced-motion:reduce){.bookshelf3d-canvas,.bookshelf3d-scene:after{transition:none}}