.mp3d{position:relative;display:block;container-type:inline-size;--mp3d-w:100cqw;--mp3d-h:141.1765cqw;--mp3d-tf:0.197;--mp3d-t:calc(var(--mp3d-w) * var(--mp3d-tf));--mp3d-pad:1.5cqw}.mp3d-stage{position:relative;aspect-ratio:510/720;perspective:calc(var(--mp3d-w) * 2);perspective-origin:50% 50%}.mp3d-book{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--mp3d-ry,0deg)) scale(var(--mp3d-sc,1));transition:transform .7s cubic-bezier(.22,.68,.28,1)}.mp3d-book>img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;background:#fff;display:block;border-radius:2px 4px 4px 2px;box-shadow:5px 5px 20px rgba(43,38,32,.26),inset 0 0 0 1px rgba(43,38,32,.1)}.mp3d-book:before{content:"";position:absolute;left:0;top:var(--mp3d-pad);--mp3d-pt:calc(var(--mp3d-t) * 0.92);width:var(--mp3d-pt);height:calc(var(--mp3d-h) - 2 * var(--mp3d-pad));transform:translateX(calc(var(--mp3d-w) - var(--mp3d-pt) / 2 - var(--mp3d-pad))) rotateY(90deg) translateX(calc(var(--mp3d-t) / 2));background:repeating-linear-gradient(90deg,#fffdf9 0 1.5px,#efe9dd 1.5px 2px,#fffdf9 2px 3.5px,#f4eee3 3.5px 4px);border-radius:1px}.mp3d-book:after{content:"";position:absolute;inset:0;transform:translateZ(calc(-1 * var(--mp3d-t)));background:#1d2637;border-radius:2px 4px 4px 2px;box-shadow:-10px 0 50px 10px rgba(43,38,32,.2)}@media (hover:hover) and (pointer:fine){.group:focus-visible .mp3d-book,.group:hover .mp3d-book{--mp3d-ry:-30deg;--mp3d-sc:0.875;will-change:transform}}@media (hover:none){.mp3d-book{--mp3d-ry:-24deg;--mp3d-sc:0.9;transition:none}}@media (prefers-reduced-motion:reduce){.mp3d-book{transition:none}}.mp3d-badge{position:absolute;top:3.2%;right:3.2%;z-index:3;filter:drop-shadow(0 6px 14px rgb(43 38 32/.28))}