.shelves{--film:cubic-bezier(.22, .61, .12, 1);--snap:cubic-bezier(.2, .9, .25, 1);--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.55' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 0 0.02 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");--wood:#b98f66}.toc>li:before{content:"";inset-inline:calc(var(--gap) / -2);z-index:-1;block-size:calc(var(--lip) + 1.1rem);background-image:linear-gradient(to bottom, #ffeed633, #ffeed657 1.35rem, #fff6e8b3 1.4rem, #fff6e8b3 calc(1.4rem + 1px), #3c24101a calc(1.4rem + 2px), #3c241052 100%), var(--grain);background-color:var(--wood);background-size:auto, calc(var(--book-w) + var(--gap)) 220px;position:absolute;inset-block-end:0}.toc>li:after{content:"";inset-inline:calc(var(--gap) / -2);z-index:-1;background-image:linear-gradient(#3c241052,#3c24101f .6rem,#0000);block-size:1.5rem;position:absolute;inset-block-start:100%}.toc>li:last-child:before,.toc>li:last-child:after{inset-inline-end:-100vw}.bo{--bo-depth:1.3rem;--bo-pose:translateZ(0);--bo-lift:0;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateY(var(--bo-turn,0deg)) var(--bo-pose);transition:transform .7s var(--film);margin-block-end:-1.1rem;display:block;position:relative}.toc>li:nth-child(3n+1) .bo{--bo-turn:2deg}.toc>li:nth-child(3n+2) .bo{--bo-turn:-1.5deg}.bo-cover{min-block-size:var(--bo-h,auto);background-color:var(--bo-cloth);border-radius:1px 4px 4px 1px;display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 -8px 14px -8px #00000073}.bo-cloth{opacity:.5;mix-blend-mode:overlay;background-image:repeating-linear-gradient(0deg,#ffffff17 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#00000029 0 1px,#0000 1px 3px);position:absolute;inset:0}.bo-stamp{min-block-size:var(--bo-h,auto);flex-direction:column;justify-content:center;align-items:center;padding:1.5rem 1rem 1.15rem 1.3rem;display:flex;position:relative;container-type:inline-size}.bo-light{pointer-events:none;mix-blend-mode:soft-light;background:linear-gradient(90deg,#04020cbf,#ffffff1f 3%,#04020c33 6%,#04020c99 8.5%,#ffffff14 10%,#0000 15%),linear-gradient(125deg,#ffdeaa3d,#0000 42%,#04020c59);position:absolute;inset:0}.bo-face{position:absolute}.bo-face--spine{inline-size:var(--bo-depth);transform-origin:100%;background-color:var(--bo-cloth);background-image:linear-gradient(90deg,#04020c99,#ffffff1a 45%,#04020c73);border-radius:5px 0 0 5px;inset-block:0;inset-inline-end:100%;transform:rotateY(-90deg)}.bo-face--fore{inline-size:calc(var(--bo-depth) - .2rem);transform-origin:0;background-color:#e9e1d2;background-image:linear-gradient(to bottom, #1e10284d, transparent 6%, transparent 94%, #1e102859), linear-gradient(to right, #3c281440, transparent 30%, transparent 70%, #3c28144d), repeating-linear-gradient(to right, var(--book-paper) 0 1.5px, #cfc4b0 1.5px 2.2px);box-shadow:inset 3px 0 0 var(--bo-cloth), inset -3px 0 0 var(--bo-cloth);inset-block:.2rem;inset-inline-start:calc(100% - .15rem);transform:rotateY(90deg)}.bo-face--head{block-size:calc(var(--bo-depth) - .2rem);transform-origin:bottom;background-color:#eee7da;background-image:linear-gradient(to right, #1e10284d, transparent 8%, transparent 92%, #1e10284d), repeating-linear-gradient(to bottom, var(--book-paper) 0 1.5px, #d2c9b8 1.5px 2px);inset-block-end:calc(100% - .15rem);inset-inline:.2rem;transform:rotateX(90deg)}.bo-shadow{filter:blur(9px);opacity:calc(.85 - var(--bo-lift) * .25);transform:translateZ(calc(var(--bo-depth) * -1 - 1px)) translate(var(--bo-cast-x,.4rem), var(--bo-cast-y,.3rem)) scale(calc(1 + var(--bo-lift) * .06));transition:opacity .7s var(--film), transform .7s var(--film);background-color:#04020ab8;border-radius:6px;position:absolute;inset:3% -3% -2% 4%}@media (prefers-reduced-motion:reduce){.toc-row:hover .bo,.toc-row:focus-visible .bo{--bo-pose:translateZ(0)}}