/* The library stays beneath the grade cards. Glup uses the existing character atlas. */
.story-library{margin:38px 0 20px;width:100%}
.story-library h2{font:600 30px var(--display);margin:0 0 16px;text-align:left}
.story-cover{width:100%;max-width:720px;display:flex;align-items:center;gap:26px;padding:13px 28px 13px 13px;border:3px solid #fff6db;border-radius:27px;background:#fff7e5;box-shadow:0 6px 0 #b7a18344,0 13px 22px #365b4622;text-align:left;transition:transform .2s}
.story-cover:hover{transform:translateY(-4px)}
.story-cover-art{display:block;width:235px;min-width:180px;height:158px;position:relative;background:linear-gradient(#cee5cf,#eff0b8);border-radius:19px;overflow:hidden}
.story-glup{width:190px;aspect-ratio:1;background-size:300% 300%;background-image:url('../assets/playroom-atlas.png');background-position:var(--x) var(--y);display:block}
.story-cover-art .story-glup{position:absolute;width:138px;left:0;bottom:-5px;z-index:2}
.cover-bug{position:absolute;width:117px;right:0;bottom:0}.cover-bug svg{width:100%;height:auto;stroke:none;fill:none}
.cover-spark{position:absolute;right:25px;top:10px;font-size:35px;color:#e2ab4d}
.story-cover-title{font:600 clamp(23px,2.5vw,34px)/1.18 var(--display);flex:1}.story-open-icon{display:flex;align-items:center;gap:14px;color:#458c7c;font-size:34px;margin-top:12px}.story-open-icon span{font-size:44px;line-height:.7}
body[data-screen=grades] main{padding-top:90px;padding-bottom:30px;justify-content:flex-start}
body[data-screen=story] .glup-panel,body[data-screen=story] .top-actions{display:none}
body[data-screen=story] .brand{width:185px}
body[data-screen=story] .layout{display:block;padding:108px 25px 35px;min-height:100svh;max-width:1320px}
body[data-screen=story] main{padding:0;display:block}
.storybook{background:#fff9ea;border:4px solid #fffcf2;border-radius:30px;box-shadow:0 9px 0 #b8a08077,0 25px 55px #294d3c40;overflow:hidden;color:#16474d}
.story-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 22px;border-bottom:1px solid #ddcaa866}
.book-home,.book-replay{display:flex;gap:9px;align-items:center;justify-content:center;background:#e6efe0;border:2px solid #fff;border-radius:18px;min-width:58px;min-height:54px;padding:5px 15px;font:600 32px var(--display);box-shadow:0 3px 0 #b4c7b36b}.book-home span{font-size:15px}.story-book-name{font:500 17px var(--display);text-align:center}.story-page-number{white-space:nowrap;font:500 16px var(--display);color:#71846e}
.book-spread{display:grid;grid-template-columns:1.1fr 1fr;min-height:420px;position:relative}.book-spread:after{content:'';position:absolute;top:0;bottom:0;left:52.38%;width:20px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#76623a15,transparent);pointer-events:none}
.story-garden{position:relative;overflow:hidden;min-height:420px;background:linear-gradient(#c6e6e3 0%,#e5efcf 65%,#adcc8c 65%,#c9d79a 100%)}
.story-garden:after{content:'';position:absolute;width:120%;height:90px;bottom:-30px;left:-10%;background:#85b07355;border-radius:50%;pointer-events:none}
.garden-sun{position:absolute;top:24px;right:35px;width:68px;height:68px;border-radius:50%;background:#ffe7a6;box-shadow:0 0 0 14px #ffe7a625,0 0 0 27px #ffe7a615}
.garden-cloud{position:absolute;top:46px;left:40px;width:115px;height:29px;border-radius:40px;background:#ffffff99;box-shadow:25px -15px 0 -2px #ffffff99}
.garden-flower{position:absolute;bottom:18px;z-index:1;font-size:55px;color:#edacaa;line-height:1}.flower-one{left:12px}.flower-two{right:21px;color:#fff0af;font-size:44px}
.story-garden>.story-glup{position:absolute;left:0;bottom:36px;width:43%;z-index:2}
.story-actor{position:absolute;left:36%;right:1%;bottom:55px;height:260px;display:flex;align-items:flex-end;justify-content:center;z-index:2}
.story-actor svg,.story-item svg,.extra-treats svg{width:100%;height:auto;display:block;stroke:none;fill:none}
.story-bug{width:100%;transform:scale(var(--bug-scale));transform-origin:50% 100%}.story-bug.nibble{animation:bug-nibble .45s ease}
.story-focus-object{display:block;position:relative;width:190px;height:220px;padding:8px;background:none;border:0;border-radius:40%;align-self:flex-end}.story-focus-object svg{height:100%;overflow:visible}.story-focus-object:not(div){animation:egg-wiggle 3s ease-in-out infinite}
.tap-rings{position:absolute;width:32px;height:32px;border:4px solid #fff;border-radius:50%;bottom:28px;right:19px;box-shadow:0 0 0 7px #fff7,0 0 0 14px #fff3;animation:tap-pulse 1.7s ease-in-out 3;pointer-events:none}
.story-butterfly{width:100%;position:relative;animation:butterfly-float 3s ease-in-out infinite}.story-sparkles{position:absolute;left:0;right:0;top:-30px;letter-spacing:16px;text-align:center;color:#fff3b8;font-size:35px}
.story-page-copy{padding:32px 28px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse at center,#fffdf3,#fbf1dd)}
.story-page-copy h1{font:600 clamp(26px,3vw,41px)/1.08 var(--display);letter-spacing:-1px;margin:0 0 14px}.story-page-copy>p{font:600 18px/1.5 var(--body);max-width:340px;margin:0 0 20px;color:#607568}
.story-interaction{width:100%;min-height:95px;display:flex;flex-direction:column;justify-content:center;gap:10px}.story-items{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}.story-item{width:90px;height:94px;position:relative;padding:6px;border:2px solid #e8d9bd;background:#fffdf2;border-radius:23px;box-shadow:0 4px 0 #c6bda150;transition:transform .2s}.story-item:hover:not(:disabled){transform:translateY(-5px) rotate(-4deg)}.story-item:active:not(:disabled){transform:scale(.92)}.story-item svg{height:100%}.food-check{display:none}.story-item.eaten{background:#edf0e2;box-shadow:none;border-style:dashed}.story-item.eaten svg{opacity:.16;transform:scale(.72)}.story-item.eaten .food-check{display:block;position:absolute;inset:0;align-content:center;color:#408a6a;font-size:36px}
.story-count{display:flex;justify-content:center;gap:8px;margin:15px 0}.story-count span{display:grid;place-items:center;border:2px solid #d7d6b9;width:31px;height:31px;border-radius:50%;color:#adba99;background:#f6f1df;font-size:21px}.story-count .filled{background:#90bea0;color:white;border-color:#82b095}
.story-page-copy .story-response{font-size:16px;min-height:48px;margin:15px 0 0;color:#548574}
.book-pager{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:92px;padding:13px 24px;border-top:1px solid #ddcaa877;background:#f6ecd8}.page-arrow{width:66px;height:62px;border-radius:21px;border:3px solid #fff6dc;background:#4b9e96;color:#fff;font:500 55px/.8 var(--display);box-shadow:0 4px 0 #317e79;display:grid;place-items:center}.page-arrow:disabled{opacity:.32;box-shadow:none;background:#92aaa0}.next-space{width:66px;height:62px}.page-dots{display:flex;align-items:center;gap:8px}.page-dots span{width:9px;height:9px;border-radius:50%;background:#d3ccb5}.page-dots .read{background:#95bb9a}.page-dots .current{width:25px;border-radius:8px;background:#d9ac5c}.story-ending{display:flex;gap:10px}
.story-night .story-garden{background:linear-gradient(#6e83a7,#b9c5ca 65%,#95b394 65%,#9fb995)}.story-night .garden-sun{background:#fff0c3;box-shadow:0 0 0 20px #fff0c311}.sleep-stars{position:absolute;top:0;left:0;right:0;letter-spacing:9px;color:#fff1b8;font-size:26px}.extra-treats{display:flex;position:absolute;top:105px;left:40%;width:53%;opacity:.8;gap:3px}.extra-treats svg{width:32%}.page-arrival{animation:page-turn .28s ease-out}
@keyframes egg-wiggle{0%,65%,100%{rotate:0deg}72%,85%{rotate:-4deg}78%,92%{rotate:4deg}}@keyframes tap-pulse{50%{scale:1.12;opacity:.55}}@keyframes bug-nibble{50%{translate:0 -8px;rotate:2deg}}@keyframes butterfly-float{50%{translate:0 -12px;rotate:2deg}}@keyframes page-turn{from{opacity:.4;transform:translateX(8px)}to{opacity:1;transform:none}}
@media(max-width:900px){.story-item{width:73px;height:80px}.story-page-copy{padding:25px 17px}.story-garden{min-height:360px}.story-actor{height:225px;bottom:35px}.book-spread{min-height:360px}.story-focus-object{width:155px;height:190px}.story-library h2{font-size:26px}}
@media(max-width:760px){body[data-screen=grades] main{padding-top:0}.story-library{margin-top:32px}.story-cover{gap:13px;padding:10px}.story-cover-art{width:42%;min-width:110px;height:137px}.story-cover-art .story-glup{width:106px;left:-12px}.cover-bug{width:85px;right:-4px}.story-cover-title{font-size:22px}.story-open-icon{margin-top:8px;font-size:25px}.story-library h2{text-align:center}.story-cover-art .cover-spark{right:15px;font-size:24px}body[data-screen=story] .topbar{height:100px}body[data-screen=story] .layout{padding:0 10px 20px;min-height:calc(100svh - 100px)}body[data-screen=story] .brand{width:170px}.storybook{border-radius:23px}.story-toolbar{padding:10px;gap:10px}.story-book-name{font-size:12px;max-width:145px}.story-page-number{font-size:12px}.book-home{min-width:45px;min-height:46px;padding:2px 10px}.book-home span{display:none}.book-spread{grid-template-columns:1fr;min-height:0}.book-spread:after{display:none}.story-garden{min-height:245px}.story-garden>.story-glup{width:140px;left:4%;bottom:15px}.story-actor{left:38%;bottom:17px;height:190px;right:3%}.story-focus-object{width:145px;height:177px}.garden-cloud{top:29px;left:20px;scale:.7}.garden-sun{top:18px;right:22px;width:43px;height:43px}.garden-flower{font-size:33px;bottom:5px}.story-page-copy{padding:19px 13px 8px}.story-page-copy h1{font-size:28px;margin-bottom:9px}.story-page-copy>p{font-size:16px;margin-bottom:12px}.story-interaction{min-height:0}.story-items{gap:7px}.story-item{width:70px;height:76px}.story-count{margin:10px 0}.story-count span{width:26px;height:26px;font-size:18px}.story-page-copy .story-response{font-size:14px;min-height:40px;margin-top:6px}.book-pager{padding:10px 12px;gap:10px;min-height:76px}.page-arrow{width:54px;height:52px;font-size:45px}.next-space{width:54px;height:52px}.page-dots{gap:5px}.page-dots span{width:6px;height:6px}.page-dots .current{width:15px}.story-ending{gap:5px}.book-replay{min-width:44px;min-height:49px;padding:5px;font-size:28px}.extra-treats{top:48px}}
@media(prefers-reduced-motion:reduce){.storybook *,.story-cover{animation:none!important;transition:none!important}}

.hatch-sparkles{position:absolute;left:0;right:0;top:42px;color:#fff9d8;font-size:35px;letter-spacing:12px;text-align:center;animation:page-turn .4s ease-out}.cocoon-wrap{position:absolute;width:155px;height:185px;bottom:0;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none}.cocoon-wrap svg{height:100%}

/* Second story: the same book, with a seed, pot and growing garden. */
.story-shelf{display:grid;gap:18px}.seed-cover{background:linear-gradient(#dde9c8,#f4e7bf)}.seed-cover .cover-bug{width:96px;right:6px;bottom:0}
.seed-plant{width:220px;height:270px;position:relative;align-self:flex-end}.seed-plant svg{height:100%;width:100%}.seed-bud-button{border:0;background:none;padding:0;border-radius:30px}.plant-happy{animation:seed-grow .5s ease-out}.seed-found{animation:seed-grow .5s ease-out!important}.seed-planting{position:relative;width:220px;height:270px}.planting-pot{position:absolute;inset:0}.planting-pot svg{width:100%;height:100%}.plant-seed{position:absolute;left:76px;top:0;width:68px;height:75px;padding:0;background:#fff8df;border:2px solid #eed7a9;border-radius:50%;cursor:grab;touch-action:none;z-index:5;box-shadow:0 4px 0 #b9967044}.plant-seed:active{cursor:grabbing}.plant-seed svg{width:100%;height:100%;pointer-events:none}.plant-guide{position:absolute;top:76px;left:94px;font-size:36px;color:#ad986b;pointer-events:none}.planted-spark{position:absolute;left:96px;top:136px;font-size:35px;color:#fff3ae;animation:seed-grow .6s ease-out}
.plant-water{position:absolute;top:75px;left:20%;right:5%;color:#80bad1;font-size:29px;text-align:center;animation:seed-rain .9s ease-in-out 3;pointer-events:none}.seed-cloud-shade{position:absolute;left:10%;right:5%;top:35px;height:42px;border-radius:45%;background:#d8e6e7aa;box-shadow:0 14px 40px #a7bfc7aa;pointer-events:none}.seed-scene-sun.scene-complete .garden-sun{box-shadow:0 0 0 20px #ffe7a640,0 0 50px 30px #ffe7a675}.seed-scene-sun.scene-complete .garden-cloud{opacity:.2}.seed-scene-rain .story-garden{background:linear-gradient(#bbcfd9,#dce8d1 65%,#adcc8c 65%,#c9d79a)}.seed-items .story-item.eaten svg{animation:friend-hello .5s ease-in-out}.bloom-sparkles{position:absolute;top:8px;left:0;right:0;color:#ffe7a6;font-size:35px;letter-spacing:10px;text-align:center;animation:seed-grow .6s ease-out}.seed-scene-bloom.scene-complete .seed-plant{animation:seed-grow .8s ease-out}
@keyframes seed-grow{from{scale:.8;opacity:.5}to{scale:1;opacity:1}}@keyframes seed-rain{0%{translate:0 -12px;opacity:.3}60%{opacity:1}100%{translate:0 20px;opacity:0}}@keyframes friend-hello{50%{rotate:12deg;translate:0 -8px}}
@media(max-width:760px){.seed-plant,.seed-planting{width:165px;height:213px}.seed-planting .plant-seed{width:57px;height:61px;left:55px;top:5px}.plant-guide{left:68px;top:61px;font-size:30px}.planted-spark{left:70px;top:100px}.plant-water{top:25px;font-size:25px}.seed-cloud-shade{top:25px}.bloom-sparkles{top:-6px;font-size:25px}.seed-cover .cover-bug{width:79px;right:0}}

/* Compact story shelves, with solid color bands behind each section title. */
.story-library{margin:26px 0 0;--shelf-color:#ffe1a0;--shelf-edge:#e8bd68}
.story-library#read-along-stories{--shelf-color:#dedaf2;--shelf-edge:#b8acd8}
.story-library h2{font-size:clamp(20px,2.2vw,27px);line-height:1.25;text-align:left;margin:0 0 14px;padding:12px 19px;background:var(--shelf-color);border:2px solid #fff5;border-bottom:4px solid var(--shelf-edge);border-radius:14px;color:#174650;box-shadow:0 3px 10px #294d3c12}
.story-library .story-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.story-library .story-cover{max-width:none;min-width:0;gap:13px;padding:9px 14px 9px 9px;border-width:2px;border-radius:20px;box-shadow:0 4px 0 #b7a18333,0 7px 15px #365b4618}
.story-library .story-cover-art{width:120px;min-width:0;flex:0 0 120px;height:105px;border-radius:13px}
.story-library .story-cover-art .story-glup{width:96px;left:-10px;bottom:-3px}
.story-library .cover-bug{width:72px;right:-3px;bottom:2px}
.story-library .seed-cover .cover-bug{width:66px;right:1px;bottom:0}
.story-library .moonlight-cover .cover-bug{width:52px;right:4px;bottom:25px}
.story-library .cover-spark{font-size:21px;right:14px;top:7px}
.story-library .story-cover-title{min-width:0;font-size:clamp(18px,1.7vw,23px);line-height:1.2}
.story-cover-prefix{display:block;font:600 13px/1.3 var(--body);color:#6b7b6b;margin-bottom:4px}
.story-library .story-open-icon{margin-top:8px;font-size:20px;gap:9px}
.story-library .story-open-icon span{font-size:30px}
@media(min-width:761px) and (max-width:1100px){.story-library .story-cover-art{width:95px;flex-basis:95px}.story-library .story-cover{gap:10px;padding-right:10px}.story-library .story-cover-title{font-size:18px}}
@media(max-width:560px){.story-library{margin-top:24px}.story-library h2{font-size:21px;padding:10px 14px;margin-bottom:12px}.story-library .story-shelf{grid-template-columns:1fr;gap:12px}.story-library .story-cover-art{width:106px;flex-basis:106px;height:94px}.story-library .story-cover-title{font-size:21px}.story-library .story-cover{padding:8px 12px 8px 8px;gap:14px}.story-library .story-open-icon{margin-top:6px}.story-library .story-cover-art .story-glup{width:90px}.story-cover-prefix{font-size:12px}}
@media(min-width:761px){body[data-screen=grades] main{padding-top:50px}}