:root{--ink:#183a38;--muted:#667875;--paper:#fffdf6;--cream:#f6f1df;--orange:#e76f3d;--orange-dark:#bd4728;--teal:#176f68;--line:#ddd7c6}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(circle at 92% 4%,#ffe4a7,transparent 26%),var(--cream);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.story-app{min-height:100vh;padding-bottom:45px}.story-topbar{min-height:70px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:15px;padding:11px clamp(17px,5vw,64px);border-bottom:1px solid #ded8c8;background:rgba(255,253,246,.93)}.brand{display:inline-flex;align-items:center;justify-self:start;color:var(--ink);font-size:22px;font-weight:950;letter-spacing:-1px;text-decoration:none}.brand:before{content:'p';display:inline-grid;place-items:center;width:31px;height:31px;margin-right:6px;border-radius:50% 50% 50% 11px;color:#fff;background:var(--orange);font:italic 22px Georgia,serif}.story-topbar>div{display:grid;gap:2px;text-align:center}.story-topbar b{font:600 16px Georgia,serif}.story-topbar small{color:var(--muted);font-size:10px;font-weight:850}.read-aloud{justify-self:end;padding:9px 13px;border:1px solid var(--line);border-radius:99px;color:var(--teal);font-size:11px;font-weight:900;text-decoration:none}.story-progress{height:7px;background:#d9e3e3}.story-progress i{display:block;width:16.66%;height:100%;background:linear-gradient(90deg,var(--orange),#f4bf34);transition:width .35s}.story-intro{width:min(680px,calc(100% - 36px));margin:clamp(27px,5vw,55px) auto 24px;text-align:center}.story-intro span{color:var(--orange-dark);font-size:10px;font-weight:950;letter-spacing:1.5px}.story-intro h1{margin:8px 0;font:500 clamp(37px,5vw,60px)/.98 Georgia,serif;letter-spacing:-2px}.story-intro p{margin:0;color:var(--muted);font-size:14px}.carousel-wrap{overflow:hidden}.page-carousel{display:flex;gap:18px;overflow-x:auto;padding:5px max(18px,calc((100vw - 850px)/2)) 16px;scroll-snap-type:x mandatory;scrollbar-width:none}.page-carousel::-webkit-scrollbar{display:none}.story-page{flex:0 0 min(760px,84vw);overflow:hidden;border:1px solid rgba(64,75,54,.18);border-radius:25px;background:var(--paper);box-shadow:0 17px 42px rgba(62,53,30,.13);scroll-snap-align:center;transition:transform .25s,opacity .25s}.story-page:not(.current){opacity:.72;transform:scale(.96)}.page-image{aspect-ratio:1.55/1;background-image:url('../animal-rescue-storyboard.png');background-size:300% 200%;background-repeat:no-repeat}.p1{background-position:0 0}.p2{background-position:50% 0}.p3{background-position:100% 0}.p4{background-position:0 100%}.p5{background-position:50% 100%}.p6{background-position:100% 100%}.page-copy{padding:clamp(23px,4.2vw,43px)}.page-copy>span{color:var(--orange-dark);font-size:10px;font-weight:950;letter-spacing:1.4px}.page-copy h2{margin:7px 0 12px;font:500 clamp(30px,4vw,43px)/1.02 Georgia,serif;letter-spacing:-1.4px}.page-copy p{margin:0;font:500 clamp(21px,2.7vw,28px)/1.58 Georgia,serif}.help-word{border-bottom:3px solid #f2b650;color:var(--orange-dark)}.swipe-hint{margin:0;text-align:center;color:var(--muted);font-size:11px;font-weight:850}.page-tools{display:grid;grid-template-columns:1fr 1fr;gap:11px;width:min(760px,calc(100% - 36px));margin:24px auto 0}.page-tools button{display:grid;grid-template-columns:36px 1fr;column-gap:9px;align-items:center;min-height:70px;padding:12px;border:1px solid #b8d8ca;border-radius:16px;color:var(--ink);background:#eef7f1;text-align:left}.page-tools button+button{border-color:#f0d6a1;background:#fff5df}.page-tools span{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;background:var(--teal);font-size:16px}.page-tools button+button span{background:var(--orange)}.page-tools b{font-size:12px}.page-tools small{color:var(--muted);font-size:10px;line-height:1.3}.word-drawer{width:min(760px,calc(100% - 36px));margin:12px auto 0;padding:16px;border:1px solid #ecd7a9;border-radius:16px;background:#fff9ea}.word-drawer>div{display:flex;gap:9px;flex-wrap:wrap}.word-drawer article{padding:9px 11px;border-radius:10px;background:#fff}.word-drawer b{display:block;font:600 17px Georgia,serif}.word-drawer span{display:block;margin-top:2px;color:var(--muted);font-size:11px}.word-drawer button{margin-top:13px;padding:8px 12px;border:0;border-radius:9px;color:var(--teal);background:#eaf3ed;font-size:11px;font-weight:900}[hidden]{display:none!important}@media(max-width:600px){.story-topbar{min-height:61px;grid-template-columns:auto 1fr auto;padding:8px 11px;gap:9px}.brand{font-size:0}.brand:before{margin:0}.story-topbar b{font-size:13px}.story-topbar small{font-size:9px}.read-aloud{padding:8px 9px;font-size:10px}.story-intro{margin:28px auto 19px}.story-intro h1{font-size:42px}.story-intro p{font-size:13px}.page-carousel{gap:12px;padding-left:18px;padding-right:18px}.story-page{flex-basis:87vw;border-radius:19px}.page-image{aspect-ratio:1.25/1}.page-copy{padding:23px 19px 25px}.page-copy h2{font-size:31px}.page-copy p{font-size:21px;line-height:1.56}.page-tools{grid-template-columns:1fr;margin-top:18px}.page-tools button{min-height:62px}.swipe-hint{font-size:10px}.word-drawer{width:calc(100% - 36px)}}
.story-page{position:relative}.page-actions{position:absolute;z-index:3;top:14px;right:14px;display:flex;gap:8px}.page-action{display:grid;place-items:center;width:84px;height:84px;padding:0;border:1px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 4px 14px rgba(21,42,37,.22);font-size:38.5px;cursor:pointer;transition:transform .18s,background .18s}.page-action:hover{transform:scale(1.07)}.speak-action{background:#fff8df}.listen-action{background:#dff3eb}.story-page.is-listening .listen-action{background:var(--orange);box-shadow:0 0 0 5px rgba(231,111,61,.25);animation:listening-pulse 1.1s infinite}.turn-toast{position:fixed;z-index:10;left:50%;bottom:18px;display:flex;align-items:center;gap:17px;width:min(530px,calc(100% - 32px));padding:12px 14px 12px 17px;border:1px solid #bfdbc9;border-radius:17px;color:var(--ink);background:rgba(255,253,246,.97);box-shadow:0 12px 35px rgba(51,64,46,.23);transform:translateX(-50%)}.turn-toast div{display:grid;gap:2px;flex:1}.turn-toast b{font-size:13px}.turn-toast small{color:var(--muted);font-size:10px}.turn-toast button{padding:10px 12px;border:0;border-radius:11px;color:#fff;background:var(--teal);font-size:12px;font-weight:900;white-space:nowrap;cursor:pointer}.turn-toast button span{font-size:20px;line-height:0;vertical-align:-2px}@keyframes listening-pulse{50%{transform:scale(1.08)}}@media(max-width:600px){.page-actions{top:10px;right:10px;gap:6px}.page-action{width:73.5px;height:73.5px;font-size:33.25px}.turn-toast{bottom:11px;gap:8px;padding:10px 11px 10px 13px;border-radius:14px}.turn-toast b{font-size:12px}.turn-toast small{font-size:9px}.turn-toast button{padding:9px 10px;font-size:11px}}