.b3{position:relative;width:var(--bw);height:var(--bh);perspective:900px;margin:0 auto}.b3-book{transform-style:preserve-3d;transform:rotateY(-38deg) rotateX(4deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}.b3-book,.b3-front{position:absolute;inset:0}.b3-front{transform:translateZ(calc(var(--bd) / 2));overflow:hidden}.b3-front,.b3-front .cover{border-radius:3px 10px 10px 3px}.b3-front .cover{width:100%;height:100%;aspect-ratio:auto;box-shadow:inset 4px 0 0 rgba(0,0,0,.18),inset 7px 0 0 rgba(255,255,255,.07)}.b3-pages{position:absolute;top:4px;left:0;width:calc(var(--bd) - 4px);height:calc(100% - 8px);transform:translateX(calc(var(--bw) - var(--bd) / 2 - 6px)) rotateY(90deg) translateX(calc(var(--bd) / 2));background:repeating-linear-gradient(90deg,#fffdf8 0 1.6px,#e7dccd 1.6px 2.2px),#fffaf2;box-shadow:inset 0 0 0 1px rgba(42,31,28,.08),inset -6px 0 10px rgba(42,31,28,.08);border-radius:0 2px 2px 0}.b3-back{position:absolute;inset:0;transform:translateZ(calc(var(--bd) / -2));background:linear-gradient(160deg,var(--c2),var(--c1));border-radius:3px 10px 10px 3px}.b3-shadow{position:absolute;left:6%;right:-4%;bottom:-14px;height:26px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(42,31,28,.32),transparent 70%);filter:blur(4px);transform:translateZ(-60px);z-index:-1;transition:transform .6s,opacity .6s}.b3:focus-within .b3-book,.b3:hover .b3-book{animation:b3-sway 2.4s ease-in-out}@keyframes b3-sway{0%{transform:rotateY(-38deg) rotateX(4deg)}30%{transform:rotateY(-28deg) rotateX(3deg) translateY(-4px)}65%{transform:rotateY(-45deg) rotateX(4deg) translateY(-4px)}to{transform:rotateY(-38deg) rotateX(4deg)}}.b3-float .b3-book{animation:b3-float 9s ease-in-out infinite}@keyframes b3-float{0%,to{transform:rotateY(-38deg) rotateX(4deg) translateY(0)}50%{transform:rotateY(-34deg) rotateX(3deg) translateY(-6px)}}.b3-float:hover .b3-book{animation:b3-sway 2.4s ease-in-out}@media (prefers-reduced-motion:reduce){.b3-book,.b3-float .b3-book,.b3:hover .b3-book{animation:none!important}}