.product-stage{--pointer-x:0deg;--pointer-y:0deg;--turn:0deg;position:relative;min-height:600px;background:radial-gradient(ellipse at 48% 42%,#f0e3d0 0,#ddd5c3 70%,#c9c5b4 100%);perspective:1200px;overflow:hidden;isolation:isolate}.stage-kicker{position:absolute;top:33px;left:35px;font-size:9px;font-weight:700;letter-spacing:.18em;z-index:3}.stage-orbit{position:absolute;width:440px;height:440px;border:1px solid #fff7;border-radius:50%;left:50%;top:45%;transform:translate(-50%,-50%) rotateX(30deg);z-index:0}.stage-orbit:after{content:'';position:absolute;inset:40px;border:1px solid #fff6;border-radius:50%}.stage-ground{position:absolute;width:390px;height:90px;bottom:115px;left:50%;background:#4b4b3545;border-radius:50%;filter:blur(28px);transform:translateX(-50%) rotate(-8deg)}.book-float{position:absolute;transform-style:preserve-3d;z-index:2;animation:bookFloat 7s ease-in-out infinite}.float-one{left:12%;top:18%;--book-z:-8deg;--book-y:-28deg;--book-x:9deg}.float-two{left:49%;top:40%;--book-z:9deg;--book-y:-30deg;--book-x:8deg;animation-delay:-3.4s;z-index:3}.book-object{--book-width:240px;--book-height:312px;width:var(--book-width);height:var(--book-height);position:relative;transform-style:preserve-3d;transform:rotateX(calc(var(--book-x,8deg) + var(--pointer-x,0deg))) rotateY(calc(var(--book-y,-24deg) + var(--pointer-y,0deg) + var(--turn,0deg))) rotateZ(var(--book-z,-5deg));transition:transform .6s cubic-bezier(.2,.7,.2,1)}.book-face{position:absolute;backface-visibility:hidden;box-sizing:border-box}.book-front,.book-back{width:100%;height:100%;border-radius:1px 5px 5px 1px}.book-front{transform:translateZ(16px);overflow:hidden;box-shadow:inset 4px 0 7px #0006}.book-front:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0004 0,transparent 2%,#fff5 3%,transparent 6%,transparent 75%,#fff1 100%);pointer-events:none}.book-front img{height:100%;width:100%;object-fit:fill;box-shadow:none!important;max-height:none!important}.book-back{transform:rotateY(180deg) translateZ(16px);background:#284a3b;color:#eee9d9;padding:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:Georgia,serif;gap:35px}.book-back span{font-size:18px}.book-back strong{font-size:20px;font-weight:400;line-height:1.25}.book-spine{height:100%;width:32px;left:-16px;top:0;transform:rotateY(-90deg);background:linear-gradient(90deg,#233d2c,#46634b 28%,#2b4a35 70%,#162e23);color:#f4edcf;display:flex;align-items:center;justify-content:center}.book-spine span{writing-mode:vertical-rl;text-orientation:mixed;font-family:Georgia,serif;font-size:12px;max-height:90%;overflow:hidden}.book-pages{height:calc(100% - 8px);width:28px;right:-14px;top:4px;transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#dfddcf 0,#f6f3e9 1px,#f6f3e9 2px)}.book-top,.book-bottom-edge{height:28px;width:calc(100% - 3px);left:2px;background:repeating-linear-gradient(0deg,#dfddcf 0,#f6f3e9 1px,#f6f3e9 2px)}.book-top{top:-14px;transform:rotateX(90deg)}.book-bottom-edge{bottom:-14px;transform:rotateX(-90deg)}.book-object.wide{--book-width:260px;--book-height:201px}.book-object.guide{--book-width:310px;--book-height:173px}.english-stage .float-one{top:24%;left:10%}.english-stage .float-two{top:48%;left:34%}.stage-note{position:absolute;left:35px;bottom:82px;font-family:Georgia,serif;font-size:20px;letter-spacing:-.02em;z-index:4}.stage-controls{position:absolute;bottom:28px;left:30px;right:25px;display:flex;gap:9px;align-items:center;z-index:5}.stage-controls button{width:31px;height:31px;background:#f6f3eb80;border:1px solid #8c9c8880;color:#203f36;border-radius:50%;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0}.stage-controls>span{font-size:9px;margin:0 3px}.stage-controls .motion-toggle{border-radius:0;background:none;border:0;border-bottom:1px solid #6a7c6260;font-size:9px;width:auto;height:auto;margin-left:auto;padding:5px 0;display:block}.product-stage.is-still .book-float{animation-play-state:paused}.book-card-stage{perspective:1000px;overflow:visible;padding:25px 0;transition:background .3s}.book-card-stage .book-object{--book-width:180px;--book-height:234px;--book-z:0deg;--book-x:7deg;--book-y:-22deg}.book-card-stage .book-object.wide{--book-width:235px;--book-height:181px}.book-card-stage:hover .book-object,.book-card-stage:focus-visible .book-object{--book-y:15deg;--book-x:0deg;transform:rotateX(var(--book-x)) rotateY(var(--book-y)) translateY(-6px)}.book-card-stage .book-front{box-shadow:6px 14px 22px #0003}.book-card-stage .book-back{font-size:12px}.book-card-stage .book-spine span{font-size:9px}@keyframes bookFloat{0%,100%{translate:0 0}50%{translate:0 -16px}}@media(min-width:1500px){.product-stage{min-height:700px}.float-one{top:21%;left:15%}.float-two{top:44%;left:51%}.product-stage .book-object{--book-width:270px;--book-height:351px}.product-stage .book-object.wide{--book-width:290px;--book-height:224px}.product-stage .book-object.guide{--book-width:350px;--book-height:196px}}@media(max-width:1100px) and (min-width:701px){.float-one{left:10%;top:20%}.float-two{left:44%;top:42%}.product-stage .book-object{--book-width:215px;--book-height:279px}.product-stage .book-object.wide{--book-width:235px;--book-height:181px}.product-stage .book-object.guide{--book-width:255px;--book-height:143px}.stage-note{font-size:18px}.book-card-stage .book-object{--book-width:145px;--book-height:188px}.book-card-stage .book-object.wide{--book-width:190px;--book-height:147px}}@media(max-width:700px){.product-stage{min-height:490px;perspective:950px}.stage-kicker{top:23px;left:25px;font-size:8px}.stage-orbit{width:320px;height:320px;top:43%}.stage-ground{width:290px;height:60px;bottom:105px}.float-one{left:12%;top:18%}.float-two{left:49%;top:44%}.product-stage .book-object{--book-width:170px;--book-height:221px}.product-stage .book-object.wide{--book-width:185px;--book-height:143px}.product-stage .book-object.guide{--book-width:235px;--book-height:131px}.english-stage .float-one{top:23%;left:8%}.english-stage .float-two{top:47%;left:30%}.stage-note{left:25px;bottom:83px;font-size:18px}.stage-controls{left:23px;right:23px;bottom:27px;gap:7px}.stage-controls>span{font-size:8px}.stage-controls .motion-toggle{font-size:8px}.book-card-stage .book-object{--book-width:200px;--book-height:260px}.book-card-stage .book-object.wide{--book-width:260px;--book-height:201px}.book-back strong{font-size:15px}.book-back{gap:20px;padding:15px}.book-spine span{font-size:10px}}@media(prefers-reduced-motion:reduce){.book-float{animation:none}.book-object{transition:none}}