:root{--ink:#254e48;--paper:#f8f2e5;--gold:#bb8946;--ease-out:cubic-bezier(.23,1,.32,1)}
[hidden]{display:none!important}body{height:100dvh;overflow:hidden;background:#eee9dc;color:var(--ink);background-image:radial-gradient(ellipse at 50% 30%,#fffbef,transparent 75%)}
header{height:76px;width:100%;max-width:none;padding:0 5%;position:relative;display:flex;flex-wrap:nowrap}.brand{margin:0;width:auto;color:var(--ink)}.brand-sub{color:#626a55}.library-back{display:flex;align-items:center;gap:8px;margin-left:auto;border:0;background:transparent;color:var(--ink);padding:12px;font-size:14px}.library-back svg{width:18px}header .sound{position:static;width:42px;height:42px}footer{position:absolute;bottom:0;left:0;width:100%;max-width:none;height:40px;margin:0;padding:0 5%;color:#6e6654;font-size:11px}footer .footer-star,footer>span:last-child{display:none}.notes-button{font-size:11px}
#library{height:calc(100dvh - 116px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 5% 25px}.library-intro{text-align:center;margin-bottom:32px}.library-intro h1{font:clamp(28px,3.2vw,46px)/1.5 Story,serif;margin:0 0 8px;color:var(--ink)}.library-intro p{font-size:15px;margin:0;color:#62634f}.bookshelf{width:min(960px,100%);position:relative}.shelf-books{display:flex;justify-content:center;align-items:flex-end;gap:58px;padding:0 50px 0;position:relative;z-index:1}.shelf-book{position:relative;display:block;border:0;padding:0;background:none;color:var(--ink);text-align:left;perspective:1000px}.cover{position:relative;width:260px;aspect-ratio: .69;background:#244b46;border-radius:5px 14px 14px 5px;padding:16px 15px 16px 22px;box-shadow:inset 7px 0 10px #092c3280,inset 10px 0 0 #63807850,10px 13px 22px #37311c35;color:#f3e4b9;transform-origin:50% 50%;isolation:isolate}.cover:before{content:'';position:absolute;inset:4px -7px 4px auto;width:8px;background:#e6d7b7;border-radius:0 8px 8px 0;box-shadow:inset -3px 0 0 #bba586;z-index:-1}.cover-border{height:100%;border:1px solid #c4a36780;border-radius:1px 8px 8px 1px;text-align:center;padding:17px 12px 11px;display:flex;flex-direction:column;align-items:center}.cover-series{font:11px Friendly,sans-serif;color:#e7d6b1}.cover h2{font:35px/1.35 Story,serif;margin:10px 0 13px;font-weight:400}.cover-picture{width:100%;flex:1;min-height:0;position:relative;overflow:hidden;border-radius:50% 50% 3px 3px;background:#d8c298}.cover-landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cover-well{position:absolute;width:80%;height:120%;object-fit:contain;left:10%;top:-8%}.cover p{font-size:10px;margin:14px 0 7px;color:#f0ddb6}.cover-mark{display:block;height:18px}.cover-mark svg{width:18px;height:18px}.shelf-book .cover{transform:rotate(-5deg);transition:transform 250ms var(--ease-out)}.book-caption{display:flex;align-items:center;justify-content:space-between;position:absolute;top:calc(100% + 32px);left:-5px;width:110%;font-size:15px}.book-caption>span{display:grid;place-items:center;background:#dce4d6;border-radius:50%;width:30px;height:30px}.book-caption svg{width:16px;height:16px}.shelf-plank{height:22px;position:relative;background:#b08755;border-radius:4px;box-shadow:0 20px 24px -12px #6e543e60,inset 0 5px 0 #d7b481,inset 0 -3px 0 #846140}.shelf-plank:before{content:'';position:absolute;left:0;right:0;top:-10px;height:11px;background:#dcc398;clip-path:polygon(2% 0,98% 0,100% 100%,0 100%)}.future-books{display:flex;align-items:flex-end;gap:7px;opacity:.55;padding-left:10px}.spine{height:240px;width:38px;border-radius:5px 7px 0 0;background:#ad684f;box-shadow:inset 4px 0 7px #593a3433;position:relative}.spine:before,.spine:after{content:'';position:absolute;height:2px;left:6px;right:6px;background:#f3e3b780}.spine:before{top:20px}.spine:after{bottom:20px}.spine-two{height:275px;background:#b29d61;width:44px}.spine-three{height:225px;background:#648380;transform:rotate(9deg);transform-origin:bottom left}.shelf-promise{align-self:center;color:#766c51;text-align:center;font-size:13px;line-height:1.8}.shelf-promise>span>svg{height:65px;width:50px;color:#a67d40}.library-footnote{margin:92px 0 0;color:#6c6a56;font-size:12px}
#cover-view{height:calc(100dvh - 116px);display:flex;align-items:center;justify-content:center;gap:85px;padding:20px 5% 40px;perspective:1800px}.selected-cover{width:min(360px,calc((100dvh - 180px)*.69));flex-shrink:0}.selected-cover h2{font-size:clamp(32px,4vw,48px)}.selected-cover .cover-series{font-size:13px}.selected-cover p{font-size:12px}.cover-action{text-align:center;width:290px}.begin-story,.retry-load{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:32px;padding:17px 28px;background:var(--ink);color:#fff4da;font-size:18px;box-shadow:0 7px 16px #244b4620;transition:transform 160ms var(--ease-out),background 160ms}.begin-story svg{width:22px}.cover-hint{font-size:13px;color:#716750;margin-top:20px}.asset-loader p{font-size:15px;line-height:1.8}.loading-book{position:relative;width:60px;height:55px;margin:0 auto 12px;display:grid;place-items:center}.loading-book svg{width:44px;height:44px}.loading-book span{position:absolute;top:9px;left:50%;width:18px;height:31px;background:#c49851;transform-origin:left;animation:loading-leaf 1.2s ease-in-out infinite;border-radius:0 3px 3px 0}.load-track{height:4px;background:#d7d7c4;width:180px;margin:20px auto;border-radius:3px;overflow:hidden}.load-track span{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 200ms linear}@keyframes loading-leaf{0%{transform:perspective(180px) rotateY(0deg);opacity:.2}50%{opacity:1}100%{transform:perspective(180px) rotateY(-180deg);opacity:.2}}
/* Reader occupies the space between the header and its persistent controls. */
#reader{height:calc(100dvh - 116px);display:grid;grid-template-rows:minmax(0,1fr) auto 4px auto;gap:8px;padding:4px 20px 8px;position:relative}.intro{display:none}.reading-room{height:100%;width:min(100%,calc((100dvh - 214px)*1.34));padding:0;margin:auto;min-height:0}.book{height:100%;width:100%;aspect-ratio:auto;transform:none}.ribbon{bottom:-15px;height:55px}.reader-bar{margin:4px 0 0;gap:24px;min-height:50px;flex-wrap:wrap}.controls{gap:15px}.reader-options{gap:14px}.progress-track{margin:0 auto;width:min(220px,60%);height:3px}.status{margin:0;min-height:0;font-size:11px;line-height:1.6}.text-page{padding:9% 9% 6% 10%}.story-copy{font-size:clamp(15px,2.4dvh,23px);line-height:1.95}.story-copy p{margin-bottom:16px}.art-page{padding:12px 9px 0 5px}.illustration-caption{min-height:27px;padding:5px 12px 8px}.flip-stage .text-page{padding:9% 9% 6% 10%}.flip-stage .art-page{padding:12px 9px 0 5px}.scene-replay{min-height:40px;min-width:40px;justify-content:center}.chapter-dot{width:8px;height:8px}.chapter-dots{gap:10px}.page-count{white-space:nowrap}.round-button{width:44px;height:44px}.auto-label{font-size:11px}.play-button{height:46px}.brand:focus-visible{outline-offset:6px}
@media(hover:hover) and (pointer:fine){.shelf-book:hover .cover{transform:translateY(-9px) rotate(-2deg)}.begin-story:hover{background:#35665d;transform:translateY(-2px)}}button:active{transform:translateY(1px)}
@media(max-height:760px) and (min-width:701px){header{height:60px}#library,#cover-view{height:calc(100dvh - 100px)}.library-intro{margin-bottom:18px}.library-intro h1{font-size:32px}.shelf-book .cover{width:200px}.future-books{transform:scale(.8);transform-origin:bottom}.library-footnote{margin-top:70px}.selected-cover{width:calc((100dvh - 160px)*.69)}#reader{height:calc(100dvh - 100px)}.reading-room{width:min(100%,calc((100dvh - 198px)*1.34))}.story-copy{font-size:clamp(13px,2.5dvh,19px)}}
@media(max-width:700px){header{height:66px;padding:0 20px}.brand{font-size:21px}.brand>svg{width:28px;height:36px}.brand-sub{font-size:8px}.library-back{font-size:12px;padding:10px 0;margin-left:auto;gap:4px}.library-back svg{width:16px}header .sound{width:36px;height:36px}.library-intro{margin-bottom:26px}.library-intro h1{font-size:28px}.library-intro p{font-size:13px}#library{height:calc(100dvh - 100px);padding:10px 20px 30px}.shelf-books{padding:0 22px;gap:30px}.shelf-book .cover{width:min(220px,49vw)}.cover h2{font-size:29px}.cover-border{padding:12px 8px 8px}.cover-series{font-size:9px}.cover p{font-size:9px}.future-books{display:none}.shelf-promise{font-size:11px}.shelf-promise>span>svg{height:45px;width:35px}.book-caption{font-size:13px}.library-footnote{font-size:10px;margin-top:84px}.cover{padding:12px 12px 12px 18px}.selected-cover{width:min(270px,calc((100dvh - 275px)*.69))}#cover-view{height:calc(100dvh - 100px);flex-direction:column;gap:26px;padding:10px 20px 20px}.selected-cover h2{font-size:32px}.selected-cover .cover-series{font-size:10px}.selected-cover p{font-size:10px}.cover-action{width:100%}.cover-hint{margin:10px 0 0;font-size:11px}.begin-story{padding:13px 26px;font-size:16px}.loading-book{display:none}.asset-loader p{margin:0;font-size:13px}.load-track{margin:12px auto}.retry-load{font-size:14px;padding:10px 20px}footer{height:34px;padding:0 20px}#reader{height:calc(100dvh - 100px);padding:0 12px 4px;gap:5px;grid-template-rows:minmax(0,1fr) auto 3px auto}.reading-room{width:min(100%,calc((100dvh - 206px)*1.34));height:100%;padding:0}.reader-bar{gap:3px;flex-direction:column;margin:3px 0 0}.reader-options{gap:13px;min-height:30px}.auto-label{display:none}.controls{gap:18px}.play-button{height:42px;min-width:158px}.round-button{width:40px;height:40px}.scene-replay{min-height:28px;min-width:28px;padding:2px}.status{font-size:10px}.story-copy{font-size:15px;line-height:1.85}.book{padding:4px 5px 8px}.text-page{padding:8%}.art-page{padding:8px 5px 0 3px}}
@media(max-width:540px){.reading-room{width:100%;max-width:430px}.spread,.spread.reversed{display:flex;flex-direction:column}.spread .art-page,.spread.reversed .art-page{order:0;flex:1;min-height:0;padding:8px 10px 0;border-radius:12px 12px 0 0;box-shadow:none}.spread .text-page,.spread.reversed .text-page{order:1;flex:0 0 auto;padding:12px 20px 10px;border-radius:0 0 12px 12px;box-shadow:none;max-height:46%;overflow:auto}.scene-wrap{border-radius:42% 42% 3px 3px;width:100%;height:100%}#story-scene{object-fit:contain}.illustration-caption{display:none}.story-copy{font-size:15px;line-height:1.8}.story-copy p{margin:0 0 9px}.story-copy p:last-child{margin:0}.page-bottom{display:none}.spread:after{display:none}.ribbon{display:none}.selected-cover .cover-mark{display:none}.book:after{display:none}.brand-sub{display:none}}
@media(prefers-reduced-motion:reduce){.loading-book span{animation:none;opacity:.5}.shelf-book .cover{transform:none}}
/* A single face-out book in an illustrated wooden reading nook. */
body[data-view="library"]{background:#203831 url('./assets/library-room-unhung.webp') center/100% 100% no-repeat}
body[data-view="library"] header .brand,body[data-view="library"] footer{color:#f4e2b8}body[data-view="library"] .brand-sub{color:#d8c8a5}
#library{position:absolute;inset:76px 0 40px;height:auto;display:block;padding:0}.library-intro{position:absolute;top:2%;left:20px;right:20px;margin:0}.library-intro h1{color:#f7e8c4;font-size:clamp(25px,3vw,40px);text-shadow:0 2px 6px #091b18}.library-intro p{color:#e2d6b8;font-size:14px}.bookshelf{position:absolute;bottom:calc(30dvh - 40px);left:0;width:100%;height:auto}.shelf-books{padding:0;gap:0;justify-content:center}.shelf-book .cover{width:min(290px,calc((100dvh - 245px)*.69));transform:perspective(1200px) rotateY(-7deg) rotateZ(-2deg)}.shelf-plank{display:none}.cover{padding:0;border-radius:3px 9px 9px 3px;aspect-ratio:2/3;background:#164343;box-shadow:inset 7px 0 6px #10282280,10px 15px 22px #06131066}.cover-art{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.cover:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,#04191b80,transparent 5%,#ffffff16 6%,transparent 8%);box-shadow:inset 0 0 0 1px #c5ad7680}.cover-lettering{position:absolute;top:7%;left:8%;right:8%;text-align:center;color:#fff0bc;text-shadow:0 2px 3px #153a39}.cover-lettering h2{font:clamp(26px,3.6dvh,44px)/1.3 Story,serif;margin:0 0 9px;color:inherit}.cover-lettering p{font-size:10px;margin:0;color:#fff0bc}.book-caption{top:calc(100% + 25px);width:100%;left:0;color:#fff0cc;text-shadow:0 2px 3px #382318;font-size:15px;justify-content:center;gap:13px}.book-caption>span{background:#f2d29d;color:#3e493b;text-shadow:none}.library-footnote{position:absolute;left:20px;right:20px;bottom:12%;text-align:center;margin:0;color:#eee2c6}.selected-cover .cover-lettering h2{font-size:clamp(28px,4.5dvh,50px)}.selected-cover .cover-lettering p{font-size:12px}
@media(hover:hover) and (pointer:fine){.shelf-book:hover .cover{transform:perspective(1200px) translateY(-8px) rotateY(0deg) rotateZ(0deg)}}
@media(max-width:700px){#library{inset:66px 0 34px}.library-intro{top:4%}.library-intro h1{font-size:29px}.library-intro p{font-size:12px}.bookshelf{bottom:calc(30dvh - 34px)}.shelf-book .cover{width:min(260px,calc((100dvh - 275px)*.69),62vw)}.library-footnote{bottom:10%;font-size:10px}.selected-cover .cover-lettering h2{font-size:30px}.selected-cover .cover-lettering p{font-size:9px}.book-caption{font-size:14px}body[data-view="library"]{background-size:auto 100%;background-position:50% 50%}}
@media(max-height:600px){.library-intro{top:0}.library-intro h1{font-size:24px}.library-intro p{font-size:11px}.library-footnote{bottom:4%}.shelf-book .cover{width:calc((100dvh - 220px)*.69)}.cover-lettering h2{font-size:21px}.cover-lettering p{font-size:8px}}
header .brand{margin:0}.shelf-loading{position:absolute;bottom:3%;left:15px;right:15px;text-align:center;color:#fff0cc;font-size:13px;line-height:1.8}.selected-cover{transform-origin:center}
@media(max-width:540px){header{gap:10px}.brand{font-size:19px}.library-back{font-size:11px}.library-back span{white-space:nowrap}}
/* Slow, continuous ambient light gives the reading nook a little wonder. */
.shelf-atmosphere{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}.library-intro,.bookshelf,.library-footnote,.shelf-loading{z-index:1}header{z-index:3}.story-light{position:absolute;width:var(--size);height:var(--size);border-radius:50%;background:#ffedac;box-shadow:0 0 8px 2px #f6c86b55;opacity:0;animation:firefly-drift var(--duration) ease-in-out var(--delay) infinite;will-change:transform,opacity}.lantern-aura{position:absolute;left:77%;top:39%;width:28%;height:40%;background:radial-gradient(ellipse,#ffd17138,transparent 68%);mix-blend-mode:screen;animation:lamplight 6s ease-in-out infinite;transform-origin:50% 60%}.cover-sheen{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}.cover-sheen:after{content:'';position:absolute;inset:-20% -100%;background:linear-gradient(110deg,transparent 40%,#ffedbd00 44%,#ffedbd38 49%,#ffedbd00 54%,transparent 60%);transform:translateX(-45%);opacity:0;transition:transform 650ms var(--ease-out),opacity 250ms}.shelf-book:focus-visible .cover-sheen:after{transform:translateX(45%);opacity:1}.light-toggle{position:absolute;right:4%;bottom:0;z-index:2;background:#193a32b3;border:1px solid #cbbb884a;border-radius:20px;color:#e8dcba;font-size:11px;padding:8px 14px;min-height:36px}.lights-paused .story-light,.lights-paused .lantern-aura,.tab-away .story-light,.tab-away .lantern-aura{animation-play-state:paused}
@keyframes firefly-drift{0%{transform:translate(0,12px);opacity:0}20%{opacity:.65}50%{transform:translate(var(--drift),calc(var(--rise)*-.5));opacity:.25}75%{opacity:.75}100%{transform:translate(0,calc(var(--rise)*-1));opacity:0}}
@keyframes lamplight{0%,100%{opacity:.45;transform:scale(.96)}40%{opacity:.8;transform:scale(1.04)}70%{opacity:.58;transform:scale(1)}}
@media(hover:hover) and (pointer:fine){.shelf-book:hover .cover-sheen:after{transform:translateX(45%);opacity:1}}
@media(max-width:700px){.lantern-aura{display:none}.story-light:nth-child(2n){display:none}.light-toggle{font-size:10px;bottom:0;right:20px}}
@media(prefers-reduced-motion:reduce){.story-light{animation:none;opacity:.3}.story-light:nth-child(3n){opacity:0}.lantern-aura{animation:none;opacity:.5}.cover-sheen{display:none}.light-toggle{display:none}}
/* Opening sequence: lantern first, then the surrounding room. */
.hanging-moon{position:absolute;left:3%;top:0;height:29dvh;max-height:290px;min-height:170px;width:auto;transform-origin:50% 0;animation:moon-swing 5.8s ease-in-out infinite;filter:drop-shadow(4px 8px 7px #09161066)}
.room-opening{position:fixed;inset:0;z-index:2;pointer-events:none}.opening-night,.opening-lamplight{position:absolute;inset:0}.opening-night{background:#030b09;opacity:.98;z-index:1}.opening-lamplight{background:radial-gradient(ellipse 18% 31% at 90.5% 59%,transparent 5%,#030b0990 55%,#030b09ed 100%);opacity:1}.room-ready .opening-night{animation:light-the-wick 1100ms ease-out forwards}.room-ready .opening-lamplight{animation:reveal-reading-room 2400ms 450ms ease-in-out forwards}.room-ready .bookshelf{animation:book-emerges 1300ms 850ms ease-out both}.room-ready .library-intro{animation:welcome-emerges 1200ms 650ms ease-out both}.room-opening~.cursor-magic{z-index:4}.cursor-magic{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}.tab-away .hanging-moon{animation-play-state:paused}
@keyframes light-the-wick{from{opacity:.98}to{opacity:0}}@keyframes reveal-reading-room{0%{opacity:1}40%{opacity:.82}100%{opacity:0}}@keyframes book-emerges{from{opacity:.15;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes welcome-emerges{from{opacity:0}to{opacity:1}}@keyframes moon-swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@media(max-width:700px){.hanging-moon{left:-16px;top:20px;height:23dvh;min-height:145px;max-height:210px}.opening-lamplight{background:radial-gradient(ellipse 45% 36% at 100% 63%,transparent,#030b09e8)}.cursor-magic{display:none}}
@media(prefers-reduced-motion:reduce){.room-opening{display:none}.hanging-moon{animation:none;transform:none}.room-ready .bookshelf,.room-ready .library-intro{animation:none}.cursor-magic{display:none}}
/* Keep the same room around the shelf, selected cover, and reading pages. */
body[data-view]{background:#203831 url('./assets/library-room-unhung.webp') center/100% 100% no-repeat}
body:before{content:'';position:fixed;inset:0;background:#071b17;opacity:0;pointer-events:none;z-index:0;transition:opacity 500ms var(--ease-out)}
body[data-view="cover"]:before{opacity:.25}body[data-view="reader"]:before{opacity:.38}
#library,#cover-view,#reader{z-index:1}#cover-view{position:relative}footer{z-index:3}
body[data-view] header .brand,body[data-view] footer,body[data-view] .library-back,body[data-view] .sound{color:#f4e2b8}body[data-view] .brand-sub{color:#d8c8a5}
body[data-view] .sound{border-color:#dbc89970;background:#173b32b3}
.cover-hint,.asset-loader{color:#f3e3be}.load-track{background:#d7d7c440}.load-track span{background:#e8bd76}.begin-story,.retry-load{background:#f0d39e;color:#25483f;box-shadow:0 6px 18px #051b1850}
.reader-bar{width:max-content;max-width:100%;justify-self:center;padding:5px 18px;border-radius:32px;background:#fbf0dceF;box-shadow:0 6px 18px #06171350}
#reader .status{color:#f3e3be}#reader .progress-track{background:#e0c79555}#reader .progress-fill{background:#efc885}
@media(hover:hover) and (pointer:fine){.begin-story:hover{background:#ffe5b7}}
@media(max-width:700px){body[data-view]{background-size:auto 100%;background-position:50% 50%}.reader-bar{padding:5px 14px;border-radius:24px}.cover-hint{color:#f3e3be}}
.opening-sound-enable{position:fixed;right:5%;top:20px;z-index:5;border:1px solid #e8ce9270;border-radius:24px;background:#173b32;color:#fff0c9;padding:10px 17px;font:13px Friendly,sans-serif;min-height:42px}.opening-sound-enable:hover{background:#285548}@media(max-width:700px){.opening-sound-enable{top:auto;bottom:20px;right:20px;font-size:12px}}
/* The turning copy keeps the live page's measured padding and gutter shading. */
.leaf-face:after{animation-name:smooth-leaf-light;animation-timing-function:cubic-bezier(.45,0,.25,1)}
@keyframes smooth-leaf-light{0%,100%{opacity:0}50%{opacity:.8}}
/* A real asset-count progress card; no artificial loading delay. */
.asset-loader{position:relative;padding:26px 24px 22px;border:1px solid #dec28b55;border-radius:24px;background:linear-gradient(145deg,#193e35ed,#102e28f2);box-shadow:0 18px 40px #03160e50,inset 0 1px #ffebbc15;min-width:260px}.loader-stars{color:#e7bc70;letter-spacing:16px;padding-left:16px;font-size:16px;margin-bottom:10px}.loader-stars span{display:inline-block;animation:loader-glimmer 2.6s ease-in-out infinite}.asset-loader .loading-book{display:grid;color:#f0d39e;margin:0 auto 12px}.asset-loader .loading-book span{background:#f0d39e}.asset-loader .load-message{font-size:17px;line-height:1.7;margin:0 0 18px}.asset-loader .load-track{width:100%;height:6px;margin:0;border-radius:12px;background:#ecdbad22}.asset-loader .load-track span{border-radius:12px;background:linear-gradient(90deg,#b38a49,#ffe4a8);transition:transform 280ms ease-out}.load-details{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:#f2d8a4;font-size:12px}.asset-loader .load-help{font-size:12px;line-height:1.8;color:#d0d5c1;margin:16px 0 0}.asset-loader[data-state="error"] *{animation-play-state:paused}.asset-loader[data-state="error"]{border-color:#e4be7990}.retry-load{margin-top:16px}@keyframes loader-glimmer{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
@media(max-width:700px){.cover-action{max-width:330px}.asset-loader{padding:16px 20px;min-width:0}.asset-loader .loading-book{height:36px;margin-bottom:5px}.asset-loader .loading-book svg{height:34px}.asset-loader .loading-book span{height:24px;top:5px}.loader-stars{margin:0 0 4px}.asset-loader .load-message{font-size:15px;margin-bottom:12px}.asset-loader .load-help{margin-top:10px}.asset-loader .load-track{margin:0}#cover-view:has(.asset-loader:not([hidden])){gap:14px}}
@media(max-height:650px) and (orientation:portrait){#cover-view:has(.asset-loader:not([hidden])) .selected-cover{width:130px}.asset-loader .loading-book,.loader-stars{display:none}.asset-loader .load-help{font-size:11px}.asset-loader{padding:14px 18px}.selected-cover .cover-lettering h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.loader-stars span,.asset-loader .loading-book span{animation:none}.asset-loader .load-track span{transition:none}}
/* Two books share the shelf; covers stay large enough to choose on phones. */
.shelf-books{gap:64px}.shelf-book .cover{width:min(260px,calc((100dvh - 285px)*.66))}.shelf-book[data-book="ants"] .cover-lettering h2{font-size:clamp(24px,3.3dvh,39px)}
@media(max-width:700px){.shelf-books{gap:24px;padding:0 20px}.shelf-book .cover{width:min(38vw,220px,calc((100dvh - 280px)*.64))}.book-caption{font-size:12px;gap:6px}.book-caption>span{width:25px;height:25px}.cover-lettering h2,.shelf-book[data-book="ants"] .cover-lettering h2{font-size:clamp(18px,4.8vw,28px)}.cover-lettering p{font-size:8px}.library-intro{top:7%}}

/* First paint stays legible while the illustrated room downloads. */
.welcome-loader{position:fixed;inset:0;z-index:20;display:grid;place-items:center;overflow:auto;padding:40px 24px;background:#141e35;color:#624a2d;isolation:isolate}
.welcome-loader:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 12% 22%,#eee0b8 0 1px,transparent 2px),radial-gradient(circle at 28% 12%,#beac80 0 1px,transparent 2px),radial-gradient(circle at 8% 76%,#eee0b8 0 1px,transparent 2px),radial-gradient(circle at 83% 37%,#eee0b8 0 1px,transparent 2px),radial-gradient(circle at 90% 79%,#eee0b8 0 1px,transparent 2px),radial-gradient(circle at 67% 92%,#beac80 0 1px,transparent 2px),radial-gradient(circle at 48% 8%,#eee0b8 0 1px,transparent 2px)}
.welcome-moon{position:absolute;z-index:-1;top:5%;right:10%;width:clamp(110px,14vw,180px);aspect-ratio:1;transform:rotate(-18deg);filter:drop-shadow(0 0 12px #f8dc9550) drop-shadow(0 0 42px #eac67724);pointer-events:none}
.welcome-moon:before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 24% 63%,#c8a25e38 0 5%,transparent 6%),radial-gradient(ellipse at 37% 83%,#b9905130 0 4%,transparent 5%),radial-gradient(ellipse at 13% 43%,#fff9dc80 0 3%,transparent 4%),radial-gradient(circle at 30% 30%,#fff9df 0%,#f6e6b5 46%,#dfbb75 85%,#bc9250 100%);box-shadow:inset 3px -4px 8px #a67d3940,inset 2px 2px 5px #fffbe9;mask-image:radial-gradient(circle at 69% 32%,transparent 0 46%,#000 46.6%);-webkit-mask-image:radial-gradient(circle at 69% 32%,transparent 0 46%,#000 46.6%)}
.welcome-card{position:relative;width:min(100%,650px);margin:55px 0 0;padding:36px 55px 30px;text-align:center;border:5px solid #29344b;border-radius:12px;background:#fff1cd url('./assets/paper.webp') center/cover;box-shadow:0 28px 65px #03091970}
.welcome-card:before{content:'';position:absolute;inset:15px;border:1px solid #b18a4559;border-radius:3px;pointer-events:none}
.welcome-emblem{width:52px;height:52px;color:#9d6d28;margin-bottom:10px}
.welcome-card h1{font:clamp(34px,5vw,52px)/1.5 Story,serif;color:#775024;margin:0 0 18px;text-wrap:balance}
.welcome-description{font:17px/1.9 Friendly,sans-serif;margin:0 0 25px;color:#685438}
.welcome-progress{width:min(100%,300px);height:8px;margin:0 auto;background:#daccaa;border-radius:8px;overflow:hidden}
.welcome-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:#a47b36;border-radius:inherit;transition:transform 250ms ease-out}
.welcome-status{font:14px/1.8 Friendly,sans-serif;margin:14px 0 0;min-height:26px;color:#76562f}
.welcome-note{font:12px/1.8 Friendly,sans-serif;margin:26px 0 0;color:#82663d}
.welcome-retry{min-height:44px;padding:10px 22px;margin:14px 0 0;border:0;border-radius:24px;background:#25483f;color:#fff3d5;font:14px Friendly,sans-serif;cursor:pointer}
.welcome-retry:hover{background:#346052}.welcome-retry:focus-visible{outline:3px solid #a47b36;outline-offset:4px}
body:has(.welcome-loader:not([hidden])) .opening-sound-enable{visibility:hidden}
@media(max-width:700px){.welcome-loader{padding:24px 18px}.welcome-card{padding:30px 24px 26px;margin-top:35px}.welcome-moon{top:7%;right:8%;width:130px}.welcome-description{font-size:15px}.welcome-note{font-size:11px}.welcome-status{font-size:13px}.welcome-card h1{margin-bottom:14px}.welcome-emblem{width:44px;height:44px}}
@media(max-height:560px){.welcome-loader{padding:18px}.welcome-card{margin:0;padding:20px 30px}.welcome-emblem{display:none}.welcome-description{margin-bottom:14px}.welcome-note{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.welcome-progress span{transition:none}}