:root{--book-height:400px;--book-width:276px;--book-depth:78px;--book-color:#1e293b;--book-text-color:#f8fafc;--book-font-sans:"Outfit",sans-serif}.interactive-book-container{font-family:var(--book-font-sans);color:var(--book-text-color);display:flex;align-items:center;justify-content:center;height:100%;width:100%}.book-perspective{perspective:900px;z-index:10;display:inline-block}.book{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;width:var(--book-width);height:var(--book-height);border-radius:5.4px 1.8px 1.8px 5.4px;background:linear-gradient(180deg,rgba(255,255,255,.06) 0,transparent 50%,transparent 100%),var(--book-color);box-shadow:0 1.8px 3.6px rgb(0 0 0/15%),0 10.8px 21.6px rgb(0 0 0/25%),inset 0 -.9px rgb(0 0 0/20%),inset 0 1.8px 1.8px rgb(255 255 255/5%),inset 3.6px 0 3.6px rgb(0 0 0/20%)}.book .book-bind{opacity:.3;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0) 12%,rgba(255,255,255,25%) 29.25%,rgba(255,255,255,0) 50.5%,rgba(255,255,255,0) 75.25%,rgba(255,255,255,25%) 91%,rgba(255,255,255,0)),linear-gradient(90deg,rgba(0,0,0,3%),rgba(0,0,0,10%) 12%,rgba(0,0,0,0) 30%,rgba(0,0,0,2%) 50%,rgba(0,0,0,20%) 73.5%,rgba(0,0,0,50%) 75.25%,rgba(0,0,0,15%) 85.25%,rgba(0,0,0,0));width:12px;height:100%}.book-cover{flex:1;padding:12px;background-color:var(--book-color);background-image:var(--book-cover-image,none);background-size:cover;background-repeat:no-repeat;background-position:50%}.book-rotate-wrapper{cursor:pointer;width:fit-content;transform-style:preserve-3d;min-width:var(--book-width);min-height:var(--book-height);transition:transform .25s ease-out;position:relative;transform:rotate(0deg)}.book-rotate-wrapper>:first-child{min-width:var(--book-width);height:var(--book-height);position:absolute}.book-rotate-wrapper .book-side{height:calc(var(--book-height) - 2 * 3px);width:calc(var(--book-depth) - 2px);transform:translateX(calc(var(--book-width) - var(--book-depth) / 2 - 3px)) rotateY(90deg) translateX(calc(var(--book-depth) / 2));background:linear-gradient(90deg,rgba(30,41,59,1),rgba(0,0,0,0) 70%),linear-gradient(rgba(51,65,85,1),rgba(30,41,59,1));position:absolute;top:3px}.book-rotate-wrapper .book-back{width:var(--book-width);height:var(--book-height);border-radius:5.4px 1.8px 1.8px 5.4px;background:var(--book-color);transform:translateZ(calc(-1 * var(--book-depth)));position:absolute;left:0}.book-link{transform-origin:center center}@media (width >= 769px){.book-link:hover .book-rotate-wrapper{transform:rotateY(-20deg) scale(1.066) translateX(-.5em)}}