/* A page has two faces and rotates around the book's spine. */
.flip-surface{perspective:2200px;overflow:visible;isolation:isolate;touch-action:pan-y;outline:none}
.flip-surface:focus-visible{outline:2px solid #b67d46;outline-offset:7px}
.flip-surface.is-turning{user-select:none;cursor:grabbing}
.flip-leaf{position:absolute;top:0;bottom:0;width:50%;z-index:20;transform-style:preserve-3d;will-change:transform;pointer-events:none}
.flip-forward{left:50%;transform-origin:0 50%}
.flip-backward{left:0;transform-origin:100% 50%}
.flip-single .flip-leaf{width:100%;left:0}
.flip-leaf .flip-face{position:absolute!important;inset:0;width:100%;height:100%;min-height:0!important;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 4px 14px #36210c20}
.flip-front{transform:rotateY(0deg) translateZ(.3px)}
.flip-back{transform:rotateY(180deg) translateZ(.3px)}
.flip-face:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(65,41,16,var(--fold-shadow,0)),transparent 32%,rgba(65,41,16,var(--fold-shadow,0)));border-radius:inherit}
.flip-edge{position:absolute;top:0;bottom:0;width:10%;z-index:9;border:0;background:transparent;color:#946b41;cursor:grab;touch-action:pan-y;padding:0}
.flip-edge-next{right:0}.flip-edge-prev{left:0}
.flip-edge span{position:absolute;top:48%;font-size:36px;opacity:.25;transition:opacity .2s}
.flip-edge-next span{right:12px}.flip-edge-prev span{left:12px}
.flip-edge:after{content:'';position:absolute;bottom:0;width:42px;height:42px;opacity:.55;transition:width .2s,height .2s,opacity .2s}
.flip-edge-next:after{right:0;background:linear-gradient(135deg,transparent 48%,#e9dcc5 50%,#fffdf6 78%);border-radius:0 0 5px 0}
.flip-edge-prev:after{left:0;background:linear-gradient(225deg,transparent 48%,#e9dcc5 50%,#fffdf6 78%);border-radius:0 0 0 5px}
.flip-edge:hover:after,.flip-edge:focus-visible:after{width:58px;height:58px;opacity:1}
.flip-edge:hover span,.flip-edge:focus-visible span{opacity:1}
.flip-edge:active{cursor:grabbing}.is-turning>.flip-edge{pointer-events:none;opacity:0}
.reader-font .page-sound,.page-sound{width:auto;height:auto;border:1px solid #d5c7b5;border-radius:20px;background:#fffaf2;color:#6c5134;font-size:12px;padding:8px 12px;white-space:nowrap;cursor:pointer}
.story-scene{transition:opacity .22s ease;visibility:hidden}
.story-scene:not(.active){opacity:0;visibility:hidden;transition:none}
.story-scene.active{visibility:visible;transition-delay:0}
.scene-welcome.active .home-reader,.scene-welcome.active .home-reader button,.scene-welcome.active .home-reader a{pointer-events:auto}
.home-reader{position:absolute;inset:12% 5% 7%;display:flex;flex-direction:column;justify-content:center;gap:15px}
.home-reader .book-binding{padding:11px 13px 16px;border-radius:22px;background:linear-gradient(100deg,#b79c79,#92704a 49%,#b09570);box-shadow:0 18px 60px #573b1820}
.home-reader .book-spread{min-height:0;height:min(65vh,660px)}
.home-reader .paper-page{min-height:0;height:100%;padding:clamp(20px,3vw,48px);overflow-y:auto;scrollbar-width:thin}
.home-reader .paper-copy{font-size:clamp(15px,1.55vw,20px);line-height:1.95}
.home-reader .paper-page h2{font-size:clamp(22px,2.5vw,34px);margin-bottom:20px}
.home-reader .paper-running{margin-bottom:20px}.home-reader .paper-number{margin-top:20px}
.home-reader .home-cover{justify-content:center;background:linear-gradient(100deg,#c9b69d,#bda587 93%,#a98c68);border:0;border-radius:12px 0 0 12px;color:#31220d}
.home-cover .scribble{font-size:clamp(18px,2vw,25px);margin-bottom:20px}
.home-reader .home-cover h2{font-size:clamp(27px,4.2vw,54px);line-height:1.5}
.home-cover h2 span{font-family:Gelica,serif;font-weight:900}.home-cover p:last-child{font-size:14px;color:#5e4930}
.home-title-page{justify-content:center;text-align:center;gap:20px}
.home-title-page:before{content:'';position:absolute;inset:9%;border:1px dashed #cbbba4;pointer-events:none;transform:rotate(-1deg)}
.home-title-page>*{position:relative}.home-title-page>span{font-size:14px;color:#90795e}
.home-book-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#786044;flex-wrap:wrap}
.home-book-controls .home-page-nav{display:flex;align-items:center;gap:14px}
.home-page-nav button{background:#fffaf2;border:1px solid #cdb99f;border-radius:50%;width:38px;height:38px;font-size:20px;color:#745331}
.home-book-help{margin:0;text-align:center;font-size:12px;color:#8b7357}
.home-book-error{background:#fff8ee;border-radius:15px;padding:30px}
.book-story{height:360vh;min-height:2100px}
@media(max-width:800px){
 .home-reader{inset:13% 6% 7%;gap:10px}.home-reader .book-spread{height:60vh;min-height:360px}
 .home-reader .paper-page{padding:25px 28px}.home-reader .home-cover{border-radius:8px}
 .home-reader .home-cover h2{font-size:38px}.home-reader .home-cover .scribble{font-size:22px}
 .home-reader .paper-copy{font-size:17px}.home-reader .paper-page h2{font-size:26px}
 .home-book-controls{font-size:11px;gap:8px}.home-book-controls .page-sound{font-size:10px;padding:6px 8px}
 .home-book-controls .home-page-nav{gap:7px}.home-page-nav button{width:30px;height:30px}
 .reader-font{flex-wrap:wrap;justify-content:flex-end}.reader-font .page-sound{font-size:10px;padding:7px 9px}
 .flip-edge{width:12%}.flip-edge span{font-size:29px}.flip-edge-next span{right:5px}.flip-edge-prev span{left:5px}
 .book-story{height:340vh;min-height:1900px}
}
@media(prefers-reduced-motion:reduce){
 .flip-edge:after,.flip-edge span{transition:none}
 .book-story{height:auto;min-height:0}.story-stage{height:auto;overflow:visible;padding-top:110px}
 .story-scene.scene-welcome{display:block!important;position:relative;visibility:visible;opacity:1;inset:auto;padding:20px 0}
 .scene-welcome .home-reader{position:relative;inset:auto;margin:0 5%}.story-scene.scene-intro{position:relative;height:690px}
 .sequence-position{height:650px!important}.home-reader .book-spread{height:620px}
}

.home-reader .home-lesson-page{padding:clamp(28px,4vw,56px);gap:18px}
.home-lesson-page h2 a:hover{color:#aa612e}
.home-lesson-page .lesson-entry{align-self:center;font-size:15px;background:#f7eddc;margin-top:15px}
.home-lesson-page .paper-number{position:absolute;bottom:26px;left:12%;right:12%;border:0;margin:0;padding:0}
.home-lesson-page>p{font-size:clamp(14px,1.4vw,18px);line-height:1.9}
@media(max-width:800px){.home-reader .home-lesson-page{padding:35px 32px}.home-lesson-page .lesson-entry{font-size:13px}.home-lesson-page .paper-number{bottom:20px}}
