@keyframes book-rock{0%,100%{transform:translateZ(var(--translate-z)) rotateY(30deg) rotateX(-5deg)}50%{transform:translateZ(var(--translate-z)) rotateY(-30deg) rotateX(5deg)}}.book-scene{perspective:calc(var(--target-height,300px) * 5);perspective-origin:50% 50%}.book-3d{--scale:calc(var(--target-height,300px) / var(--original-height,200));--book-height:var(--target-height,300px);--book-width:calc(var(--original-width,200) * var(--scale));--book-depth:calc(var(--original-depth,15) * var(--scale));--translate-z:calc(var(--target-height,300px) * -0.5);width:var(--book-width);height:var(--book-height);position:relative;transform-style:preserve-3d;animation:book-rock 4s ease-in-out infinite;transition:transform 1.6s ease;cursor:url('/static/cursors/grab_hand_open.png') 16 16,grab}.book-scene:hover .book-3d{animation-play-state:paused}.book-scene.dragging .book-3d{animation:none;cursor:url('/static/cursors/grab_hand_closed.png') 16 16,grabbing}.book-face{position:absolute;background-size:100% 100%;background-position:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;filter:blur(0);-webkit-filter:blur(0);transform:translateZ(0);will-change:transform;overflow:hidden}.book-face img{width:100%;height:100%;object-fit:cover;display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden;filter:blur(0);-webkit-filter:blur(0);transform:translateZ(0)}.book-front{width:var(--book-width);height:var(--book-height);transform:translateZ(calc(var(--book-depth) / 2))}.book-back{width:var(--book-width);height:var(--book-height);transform:rotateY(180deg) translateZ(calc(var(--book-depth) / 2))}.book-back img{-webkit-backface-visibility:visible;backface-visibility:visible}.book-left{width:var(--book-depth);height:var(--book-height);left:calc(var(--book-depth) / -2);transform:rotateY(-90deg)}.book-right{width:var(--book-depth);height:var(--book-height);right:calc(var(--book-depth) / -2);transform:rotateY(90deg)}.book-top{width:var(--book-width);height:var(--book-depth);top:calc(var(--book-depth) / -2);transform:rotateX(90deg)}.book-bottom{width:var(--book-width);height:var(--book-depth);bottom:calc(var(--book-depth) / -2);transform:rotateX(-90deg)}.book-3d-container{display:flex;justify-content:center;align-items:center;padding:10px;position:relative}.book-3d-thumb{width:100px;height:100px;padding:0;display:flex;align-items:center;justify-content:center;overflow:visible;pointer-events:none}.book-3d-thumb .book-scene{display:flex;align-items:center;justify-content:center}.book-3d-thumb .book-3d{cursor:default;--scale-by-height:calc(100px / var(--original-height,200));--scale-by-width:calc(100px / var(--original-width,200));--scale:min(var(--scale-by-height),var(--scale-by-width));--book-height:calc(var(--original-height,200) * var(--scale));--book-width:calc(var(--original-width,200) * var(--scale));--book-depth:calc(var(--original-depth,15) * var(--scale));--translate-z:calc(var(--book-height) * -0.5);animation-duration:3s}.expand-3d-btn{position:absolute;top:10px;right:10px;width:32px;height:32px;background:linear-gradient(135deg,var(--color-pink),var(--color-peach));color:white;border:none;border-radius:4px;font-size:18px;cursor:pointer;opacity:0;transition:all 0.2s ease;z-index:100;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,0.2)}.book-3d-container:hover .expand-3d-btn{opacity:1}.expand-3d-btn:hover{transform:scale(1.1)}.modal-3d-content{display:flex;justify-content:center;align-items:center;padding:40px}.modal-3d-content .book-scene{perspective:calc(var(--target-height,500px) * 5)}.modal-3d-content .book-3d{--scale:calc(var(--target-height,500px) / var(--original-height,200));--book-height:var(--target-height,500px);--book-width:calc(var(--original-width,200) * var(--scale));--book-depth:calc(var(--original-depth,15) * var(--scale));--translate-z:calc(var(--target-height,500px) * -0.5)}