body{background:#dedbd3;color:#493c2b;background-image:radial-gradient(ellipse at 50% 32%,#f2f0e8 0,#dedbd3 65%,#cec9bd 100%)}header{height:76px;max-width:1450px}.brand{font-size:23px;color:#4b4e3e}.brand>svg{color:#8c6c43}.brand-sub{font-size:9px;color:#85816c}nav{background:#cecbbd75}nav a[aria-current]{background:#eee8d8}nav a{font-size:12px}.intro{margin:5px auto 24px}.intro h1{font:30px/1.6 Story,serif;color:#65533c;margin:0 0 3px}.intro p{font-size:11px;color:#8b7a60}.reading-room{position:relative;perspective:2400px;width:min(1060px,calc(100% - 110px));margin:auto;padding:0 0 22px}.book{position:relative;aspect-ratio:1.34;padding:5px 6px 10px;background:#463729;border-radius:18px 24px 21px 16px;box-shadow:0 34px 45px -24px #2c261c70,0 9px 11px -4px #211a1960;transform:rotate(-.35deg)}.binding{position:absolute;inset:-2px;background:#3a3027;border-radius:20px 26px 24px 18px;box-shadow:inset 0 0 0 2px #8e766055;z-index:-1}.book:before,.book:after{content:'';position:absolute;left:10px;right:9px;height:15px;bottom:4px;background:#c5b396;border-radius:0 0 15px 12px;box-shadow:0 1px 0 #796b56,inset 0 3px #e6d6b6,inset 0 5px #a58d6b,inset 0 7px #e8d9bd,inset 0 9px #c6ae85}.book:after{left:50%;right:9px;bottom:6px;height:12px;transform:rotate(-.25deg);transform-origin:left}.spread{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;height:100%;border-radius:15px 19px 14px 12px;isolation:isolate;background:#f7e4c9}.page{position:relative;min-width:0;background-color:#f4e3c9;background-image:url('./assets/paper.webp');background-size:100% 100%;overflow:hidden}.text-page{border-radius:14px 0 0 13px;padding:10% 10% 7% 11%;display:flex;flex-direction:column;box-shadow:inset -16px 0 25px -17px #4c2c1590}.art-page{border-radius:0 18px 13px 0;box-shadow:inset 18px 0 28px -20px #422c1880;display:flex;flex-direction:column;padding:20px 12px 0 7px}.spread:after{content:'';position:absolute;left:calc(50% - 17px);width:34px;top:0;bottom:0;background:linear-gradient(90deg,transparent,#6c48211a 30%,#5a3e292e 48%,#a6874c12 54%,transparent);pointer-events:none;z-index:5}.spread:before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 2px 5px #fffcdd90,inset 0 -3px 7px #956b392a;pointer-events:none;z-index:6}.chapter-line{display:flex;align-items:center;justify-content:space-between;color:#98805d;font-size:11px;margin-bottom:29px}.chapter-decoration{height:1px;width:46px;background:#a8895255;position:relative}.chapter-decoration:after{content:'';width:5px;height:5px;border:1px solid #a8895270;position:absolute;right:-4px;top:-3px;transform:rotate(45deg)}.text-page h2{font:clamp(26px,3vw,42px)/1.55 Story,serif!important;color:#503c28;margin:0 0 29px;letter-spacing:-.3px!important;text-wrap:balance}.story-copy{font:clamp(17px,1.65vw,23px)/2.05 Friendly,sans-serif;color:#67513c}.story-copy p{margin:0 0 20px}.story-copy .spoken{color:#9b612d}.margin-drawing{position:relative;margin:auto -12px 0;height:170px;flex:1;min-height:100px;max-height:205px;display:flex;align-items:center;justify-content:center;transform:rotate(-3deg)}#vignette{height:100%;width:100%;object-fit:contain;opacity:.85;mix-blend-mode:multiply}.drawing-note{position:absolute;bottom:12px;right:12px;font:11px Story;color:#9a7954}.lesson{display:flex;gap:10px;align-items:flex-start;margin-top:14px;color:#9a7953}.lesson p{font:14px/1.85 Story,serif;margin:0}.lesson svg{width:15px;height:19px;margin-top:2px}.page-bottom{display:flex;justify-content:space-between;color:#a48f70;font-size:9px;margin-top:20px}.page-bottom span:last-child{font-size:11px}.scene-wrap{position:relative;flex:1;min-height:0;isolation:isolate}#story-scene{position:absolute;width:100%;height:100%;object-fit:fill;inset:0;mix-blend-mode:multiply}.scene-loading{position:absolute;inset:0;display:grid;place-items:center;font:16px Story;color:#967954}.scene-loading[hidden]{display:none}.illustration-caption{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#9d8765;padding:14px 17px 21px 22px;flex:none;min-height:50px}.ribbon{position:absolute;left:49.4%;width:16px;height:90px;bottom:-32px;background:linear-gradient(90deg,#846a46,#bc9a64 45%,#846a46);clip-path:polygon(0 0,100% 0,100% 100%,50% 90%,0 100%);z-index:0}.turn-sheet{position:absolute;z-index:8;top:5px;left:50%;right:6px;bottom:10px;transform-origin:0 50%;transform-style:preserve-3d;display:none;pointer-events:none}.turn-front,.turn-back{position:absolute;inset:0;backface-visibility:hidden;background:#f5e4c9 url('./assets/paper.webp') center/100% 100%;border-radius:0 14px 14px 0;box-shadow:inset 18px 0 45px #62401718}.turn-front canvas{width:100%;height:100%;mix-blend-mode:multiply}.turn-back{transform:rotateY(180deg);box-shadow:inset -18px 0 40px #62401730}.turn-back:after{content:'';position:absolute;inset:8% 14%;opacity:.2;background:none center/contain no-repeat}.turning .turn-sheet{display:block;animation:leaf-turn 1350ms cubic-bezier(.37,.02,.18,1) forwards}.turning .turn-sheet:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#573a2320,transparent 35%);backface-visibility:hidden}.reader-bar{display:flex;align-items:center;justify-content:center;gap:35px;margin:9px auto 0}.controls{margin:0;gap:18px}.play-button{background:#654f36;color:#fff0d6;min-width:168px;height:46px;box-shadow:0 4px 8px #50372118}.round-button{width:40px;height:40px;color:#766448;background:#eee8d7;border-color:#bfb29a}.reader-options{display:flex;gap:17px;align-items:center;color:#8c7a61;font-size:11px}.page-count{color:#8c7a61}.chapter-dot.active{background:#987847;box-shadow:0 0 0 3px #98784722}.chapter-dot{background:#b9b09a}.auto-toggle{accent-color:#8f7349}.scene-replay{border:0;background:transparent;color:#907749;display:flex;align-items:center;padding:8px}.scene-replay svg{width:18px;height:18px}.progress-track{width:150px;height:2px;background:#c9bda5;margin:16px auto 0}.progress-fill{background:#9d7f4f}.status{color:#958269;font-size:10px;min-height:17px;margin-top:10px}footer{margin:0 auto;padding:10px 5% 22px;color:#9a896f;font-size:9px}.notes-button{font-size:10px}.footer-star svg{width:13px}.loading-error{font-size:13px;padding:40px;text-align:center;line-height:2}.book.paused #story-scene{opacity:1}@keyframes leaf-turn{0%{transform:rotateY(0deg);filter:brightness(1)}40%{transform:rotateY(-73deg) rotateZ(-.7deg);filter:brightness(.8)}70%{filter:brightness(.9)}100%{transform:rotateY(-180deg);filter:brightness(1)}}@media(hover:hover) and (pointer:fine){.play-button:hover{background:#7c603d}.round-button:not(:disabled):hover{background:#e0d6bf}}@media(min-width:1400px) and (max-height:950px){.reading-room{width:min(1000px,calc((100svh - 240px)*1.34))}.text-page{padding-top:8%}.chapter-line{margin-bottom:21px}.text-page h2{font-size:32px!important;margin-bottom:22px}.story-copy{font-size:18px;line-height:1.9}.story-copy p{margin-bottom:14px}.margin-drawing{max-height:150px;min-height:70px}.lesson p{font-size:12px}.page-bottom{margin-top:13px}}
@media(max-width:1000px){.reading-room{width:calc(100% - 60px)}.text-page{padding:8% 9% 6% 10%}.chapter-line{font-size:9px;margin-bottom:19px}.text-page h2{font-size:30px!important;margin-bottom:18px}.story-copy{font-size:17px;line-height:1.9}.story-copy p{margin-bottom:15px}.margin-drawing{min-height:70px;max-height:150px}.lesson p{font-size:12px}.page-bottom{margin-top:12px}.reader-bar{gap:18px}.reader-options{gap:12px}.auto-label{font-size:10px}.intro h1{font-size:27px}}
@media(max-width:760px){.reading-room{width:calc(100% - 32px)}.book{aspect-ratio:1.22}.text-page{padding:9% 9% 6%}.text-page h2{font-size:24px!important;margin-bottom:14px}.story-copy{font-size:15px;line-height:1.8}.margin-drawing{min-height:65px;max-height:110px}.lesson p{font-size:10px}.page-bottom{font-size:7px}.chapter-line{margin-bottom:15px}.art-page{padding:12px 6px 0 3px}.illustration-caption{font-size:8px;padding:12px}.reader-bar{flex-direction:column;gap:15px}.intro{margin-bottom:19px}.intro p{font-size:10px}}
@media(max-width:540px){header{height:117px}.intro h1{font-size:25px}.reading-room{width:calc(100% - 30px);max-width:430px}.book{aspect-ratio:auto;padding:4px 5px 9px;transform:none}.spread{display:flex;flex-direction:column}.text-page{border-radius:12px 12px 0 0;padding:30px 30px 18px;background-size:100% auto;box-shadow:none}.text-page h2{font-size:29px!important;margin-bottom:18px}.chapter-line{font-size:10px;margin-bottom:17px}.story-copy{font-size:17px;line-height:1.95}.story-copy p{margin-bottom:15px}.margin-drawing,.lesson,.text-page .page-bottom{display:none}.art-page{height:560px;border-radius:0 0 12px 12px;padding:0 12px 0;background-size:100% auto;box-shadow:none}.spread:after{display:none}.illustration-caption{min-height:40px;padding:10px 15px 20px}.turn-sheet{left:5px}.ribbon{left:75%;height:50px;bottom:-22px}.reader-bar{margin-top:6px}.reader-options{gap:13px}.status{padding:0 20px;line-height:1.8}footer>span:last-child{display:none}footer{padding-top:13px}.drawing-note{display:none}}
@media(prefers-reduced-motion:reduce){.turning .turn-sheet{display:none}}
@media(max-width:540px){header{position:relative;height:128px;padding-top:0}.brand{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:max-content}.brand-sub{font-size:8px;margin-top:4px}header nav{position:absolute;top:77px;left:50%;transform:translateX(-50%);width:max-content}header .sound{position:absolute;right:5%;top:17px}.text-page,.art-page{background-size:100% 100%;background-repeat:no-repeat}}
/* Retain the paper fibres, soften the brown pigment into warm ivory. */
.page,.turn-front,.turn-back{background-color:#fffaf0;background-image:linear-gradient(rgba(255,253,245,.72),rgba(255,253,245,.72)),url('./assets/paper.webp');background-size:100% 100%}.spread{background:#fffaf0}.text-page{box-shadow:inset -16px 0 25px -17px #4c2c1560}.art-page{box-shadow:inset 18px 0 28px -20px #422c1860}
/* Each spread has one reading page and one illustrated page. */
.text-page{justify-content:center}.text-page .chapter-line{margin-top:auto}.text-page .story-copy{margin-bottom:auto}.page-bottom{margin-top:28px}.reversed .art-page{order:0;border-radius:14px 0 0 13px;box-shadow:inset -16px 0 25px -17px #4c2c1560;padding:20px 7px 0 12px}.reversed .text-page{order:1;border-radius:0 18px 13px 0;box-shadow:inset 18px 0 28px -20px #422c1860;padding-left:10%;padding-right:11%}.reversed .art-page .illustration-caption{flex-direction:row-reverse}.reversed .text-page .page-bottom{flex-direction:row-reverse}.turn-copy{width:100%;height:100%;padding:10% 10% 7% 11%;border-radius:0 14px 14px 0;box-shadow:none}.turn-copy h2{font-size:38px!important}.turn-back:after{display:none}
@media(max-width:540px){.text-page{justify-content:flex-start}.text-page .chapter-line{margin-top:0}.text-page .story-copy{margin-bottom:0}.reversed .text-page{order:0;border-radius:12px 12px 0 0;box-shadow:none;padding:30px 30px 18px}.reversed .art-page{order:1;border-radius:0 0 12px 12px;box-shadow:none;padding:0 12px}.reversed .art-page .illustration-caption{flex-direction:row}.turn-copy{padding:30px}}
/* A real two-sided leaf covers a frozen underlying spread for the entire turn. */
.book{transform-style:preserve-3d}.is-flipping>.spread{visibility:hidden}.flip-stage{position:absolute;inset:5px 6px 10px;z-index:12;perspective:1900px;transform-style:preserve-3d;border-radius:14px 18px 13px 13px;pointer-events:none}.flip-base{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:#fff9ed;box-shadow:inset 0 0 10px #a4864630}.left-base{left:0;border-radius:14px 0 0 13px}.right-base{right:0;border-radius:0 18px 13px 0}.turn-leaf{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;will-change:transform}.forward-leaf{left:50%;transform-origin:0 50%}.backward-leaf{left:0;transform-origin:100% 50%}.leaf-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#fff9ed;transform-style:flat;box-shadow:0 1px 2px #6c50382b}.leaf-front{transform:translateZ(.6px);border-radius:0 15px 13px 0}.leaf-back{transform:rotateY(180deg) translateZ(.6px);border-radius:14px 0 0 13px}.backward-leaf .leaf-front{border-radius:14px 0 0 13px}.backward-leaf .leaf-back{border-radius:0 15px 13px 0}.leaf-face:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#62431d35,transparent 35%,#62431d0a);animation:leaf-light 1550ms cubic-bezier(.35,0,.18,1) both}.leaf-back:after{background:linear-gradient(90deg,#62431d10,transparent 60%,#62431d45)}.flip-stage .page{position:absolute;inset:0;width:100%;height:100%;border-radius:0;order:initial!important;box-shadow:none}.flip-stage .text-page{padding:10% 10% 7% 11%;display:flex;flex-direction:column;justify-content:center}.flip-stage .art-page{display:flex;flex-direction:column;padding:20px 12px 0 7px}.frozen-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;mix-blend-mode:multiply}.flip-stage .text-page .chapter-line{margin-top:auto}.flip-stage .text-page .story-copy{margin-bottom:auto}.leaf-front:before{content:'';position:absolute;inset:0;border-right:1px solid #bfae8e;border-radius:inherit;z-index:3;pointer-events:none}@keyframes leaf-light{0%{opacity:.15}45%{opacity:.85}100%{opacity:.2}}@media(min-width:1400px) and (max-height:950px){.flip-stage .text-page{padding-top:8%}}@media(max-width:1000px){.flip-stage .text-page{padding:8% 9% 6% 10%}}@media(max-width:760px){.flip-stage .text-page{padding:9% 9% 6%}.flip-stage .art-page{padding:12px 6px 0 3px}}

.spread.reversed .text-page .page-bottom{flex-direction:row}

.scene-wrap{border-radius:48% 48% 4px 4px;overflow:hidden}.chapter-dots{gap:7px}.chapter-dot{width:7px;height:7px}.intro h1{letter-spacing:0}.status:empty{display:none}

/* Continuous prose: the story title appears only above the book. */
.text-page h2,.chapter-line{display:none!important}.text-page .story-copy{margin-top:auto;margin-bottom:auto}.text-page .page-bottom{margin-top:0}