.book-3d-stage{aspect-ratio:504.21/720;perspective:1200px;width:100%;display:block;container-type:inline-size}.book-3d{width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--book-tilt,5deg)) rotateY(var(--book-rotation,26deg));transition:transform .65s cubic-bezier(.22,.61,.36,1);display:block;position:relative}.book-3d-face{backface-visibility:hidden;background-color:#fff;display:block;position:absolute}.book-3d-face img{object-fit:fill}.book-3d-front,.book-3d-back{inset:0;box-shadow:2px 15px 24px #140f233d}.book-3d-front{transform:translateZ(calc(var(--book-depth) / 2))}.book-3d-front:before{content:"";z-index:1;pointer-events:none;background:linear-gradient(90deg,#00000029,#0000 2%,#0000000f 3%,#0000 5% 97%,#fff3);position:absolute;inset:0}.book-3d-back{transform:rotateY(180deg) translateZ(calc(var(--book-depth) / 2));background:#efede8}.book-3d-spine,.book-3d-pages{width:var(--book-depth);transform-origin:0;height:100%;top:0}.book-3d-spine{transform:translateZ(calc(var(--book-depth) / -2)) rotateY(-90deg);background:#eeeae3;left:0}.book-3d-spine-title{writing-mode:vertical-rl;color:#29252f;max-height:85%;margin:15% auto;font-size:3cqw;display:block;overflow:hidden}.book-3d-pages{height:calc(100% - 4px);transform:translateZ(calc(var(--book-depth) / 2)) rotateY(90deg);background:repeating-linear-gradient(90deg,#e0dcd4 0 1px,#faf8f2 1px 3px);top:2px;left:100%}.book-3d-top,.book-3d-bottom{width:100%;height:var(--book-depth);transform-origin:top;background:repeating-linear-gradient(#e0dcd4 0 1px,#faf8f2 1px 3px);left:0}.book-3d-top{transform:translateZ(calc(var(--book-depth) / -2)) rotateX(90deg);top:0}.book-3d-bottom{transform:translateZ(calc(var(--book-depth) / 2)) rotateX(-90deg);top:100%}@media (prefers-reduced-motion:reduce){.book-3d{transition-duration:1ms}}