.book-stage{perspective:1400px;isolation:isolate;--book-cover:#8a1c2b;--book-paper:#f8f1e4;--book-ink:#4a2f22;--book-gold:#c9a35a;width:100%;height:100%;color:var(--book-ink);font-family:var(--font-cormorant), "Cormorant Garamond", Georgia, serif;touch-action:pan-y;background:radial-gradient(120% 80% at 50% 28%,#fbf3e4 0%,#efe0c8 70%);place-items:center;display:grid;position:relative;overflow:hidden}.book-body{aspect-ratio:3/4.2;width:min(62vw,300px);transform-style:preserve-3d;transition:transform 1.8s cubic-bezier(.37,0,.18,1);position:relative}.book-body.book-closed{cursor:pointer;transform:rotateX(55deg)rotate(-10deg)translateY(0)}@media (prefers-reduced-motion:no-preference){.book-body.book-closed{animation:4s ease-in-out infinite book-bob}}@keyframes book-bob{0%,to{filter:drop-shadow(0 24px 22px #1e0e0861);transform:rotateX(55deg)rotate(-10deg)translateY(0)}50%{filter:drop-shadow(0 30px 26px #1e0e0852);transform:rotateX(55deg)rotate(-10deg)translateY(-6px)}}.book-body.book-opening,.book-body.book-open{transform:rotateX(0deg) rotateZ(0deg) scale(var(--book-open-scale,1))}.book-body.book-open{transition:none}.book-block{z-index:3;background:repeating-linear-gradient(#efe3c8 0 2px,#e2d3ae 2px 3px);border-radius:.35rem;position:absolute;inset:0;transform:translate(2%,1.5%);box-shadow:inset -3px 0 #4a2f221f,inset 0 -3px #4a2f221f}.book-cover{z-index:6;transform-origin:0%;backface-visibility:hidden;appearance:none;font:inherit;cursor:pointer;background:var(--book-cover-image,linear-gradient(160deg, color-mix(in srgb, var(--book-cover) 88%, #fff), var(--book-cover) 55%));box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--book-gold) 70%, transparent), inset 0 0 0 10px transparent, inset 0 0 0 12px color-mix(in srgb, var(--book-gold) 45%, transparent), 0 18px 30px #1408044d;background-size:cover;border:0;border-radius:.35rem;place-items:center;padding:10%;transition:transform 1.6s cubic-bezier(.37,0,.18,1);display:grid;position:absolute;inset:0}.book-body.book-opening .book-cover,.book-body.book-open .book-cover{transform:rotateY(-165deg)}.book-body.book-open .book-cover,.book-body.book-open .book-leaf-left{visibility:hidden}.book-cover-names{font-family:var(--font-great-vibes), "Great Vibes", cursive;color:color-mix(in srgb, var(--book-gold) 85%, #fff);text-align:center;letter-spacing:.02em;text-shadow:0 1px #00000040;font-size:clamp(1.3rem,7cqw,2.1rem)}.book-leaf-left,.book-leaf-right{background:var(--book-paper-image,var(--book-paper));backface-visibility:hidden;background-size:cover;border-radius:.35rem;position:absolute;inset:0;overflow:hidden}.book-leaf-left{z-index:4;background:var(--book-paper-image,linear-gradient(160deg, color-mix(in srgb, var(--book-paper) 90%, #000 10%), var(--book-paper)));background-size:cover}.book-leaf-right{z-index:5}.book-turning{z-index:7;background:var(--book-paper-image,var(--book-paper));transform-origin:0%;backface-visibility:hidden;background-size:cover;border-radius:.35rem;transition:transform 1.1s cubic-bezier(.37,0,.18,1);position:absolute;inset:0;overflow:hidden;box-shadow:2px 0 10px #1408042e}.book-turning:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000 65%,#ffffff59 88%,#4a2f2247 100%);position:absolute;inset:0}.book-hint{text-align:center;letter-spacing:.32em;text-transform:uppercase;color:color-mix(in srgb, var(--book-ink) 65%, transparent);pointer-events:none;font-size:.68rem;position:absolute;bottom:9%;left:0;right:0}@media (prefers-reduced-motion:no-preference){.book-hint{animation:2.4s ease-in-out infinite book-hint-pulse}}@keyframes book-hint-pulse{0%,to{opacity:.5}50%{opacity:1}}.book-canvas-fallback{display:none}.book-canvas-page-layer{overflow:visible}