/* Shared type rhythm; layouts expand with the available workspace. */
body{font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}h1,h2,h3{line-height:1.15;text-wrap:balance}p{line-height:1.65}button{line-height:1.3}input,select,textarea{font-size:16px}body[data-view=parent],body[data-view=login],body[data-view=profiles],body[data-view=roadmap]{font-family:Manrope,Nunito,sans-serif}.eyebrow{letter-spacing:1.3px}.landing-copy h1{font-weight:900;letter-spacing:-.04em}.landing-copy p{max-width:36em}.reading-panel,.tutor-english{line-height:1.7}.shell{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}.film-link{display:grid;grid-template-columns:40px 1fr;gap:2px 12px;text-align:left;background:transparent;padding:18px 0;font-weight:850}.film-link>span{grid-row:1/3;align-self:center;display:grid;place-items:center;background:#e1eee6;width:40px;height:40px;border-radius:50%;color:#3e7163}.film-link small{font-size:13px;color:var(--muted);font-weight:600}.film-view{max-width:1120px;margin:auto}.film-counter{font-weight:800;color:#526e65}.film-stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:2/1;min-height:380px;background:linear-gradient(#d8eff6,#e9f4e4);border-radius:32px;margin:24px 0}.film-sun{position:absolute;width:80px;height:80px;border-radius:50%;background:#f7da83;top:9%;right:10%;box-shadow:0 0 0 16px #f7da8325}.film-cloud{position:absolute;top:18%;left:10%;width:110px;height:24px;background:#ffffffa8;border-radius:100%;animation:cloud-drift 16s ease-in-out infinite alternate}.film-hill{position:absolute;bottom:-36%;left:-15%;width:135%;height:80%;border-radius:50%;background:#b3d7ad;transform:rotate(-4deg)}.film-tree{position:absolute;right:6%;bottom:16%;font-size:clamp(80px,13vw,160px)}.film-actor{position:absolute;left:15%;bottom:6%;width:30%;max-width:275px;z-index:2}.film-actor .animal{width:100%;height:auto}.film-caption{position:absolute;left:5%;top:7%;max-width:65%;z-index:3;padding:18px 24px;background:#ffffffee;border-radius:22px;box-shadow:0 8px 26px #3d665511}.film-caption strong{font-size:clamp(24px,3vw,36px);font-weight:900}.film-caption p{margin:6px 0 0;font-size:16px;max-width:38em}.film-ball{position:absolute;left:56%;bottom:12%;width:75px;height:75px;z-index:2}.film-stage.frame-1 .film-ball{animation:ball-roll 4s ease-in-out both}.film-stage.frame-0 .film-actor{animation:buddy-enter 1.2s ease-out both}.film-stage.frame-2 .film-ball{display:none}.film-choices{position:absolute;bottom:9%;right:10%;display:flex;gap:14px;z-index:4}.film-choices button{width:82px;height:90px;background:#ffffffd9;border:3px solid white;border-radius:22px;display:grid;place-items:center;box-shadow:0 6px 0 #78976b33}.film-choices button:hover{border-color:#7866b5}.film-choices .ball{width:54px;height:54px}.film-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.film-controls button{min-height:48px}.film-sparkles{position:absolute;left:23%;bottom:54%;font-size:35px;color:#ae8633;animation:celebrate 1s ease-out 3}.frame-3 .film-actor{animation:happy-hop .7s ease-in-out 3}.scene .animal-eyes,.film-actor .animal-eyes{transform-box:fill-box;transform-origin:center;animation:blink 6s infinite}.scene .animal-tail,.film-actor .animal-tail{transform-box:fill-box;transform-origin:90% 70%;animation:tail-wag 1.2s ease-in-out infinite alternate}.film-stage.paused *{animation-play-state:paused}.film-stage.frame-3 *{animation-play-state:running}
@keyframes blink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.08)}}@keyframes tail-wag{to{transform:rotate(12deg)}}@keyframes cloud-drift{to{transform:translateX(70px)}}@keyframes ball-roll{from{transform:translateX(-100px) rotate(-160deg)}to{transform:translateX(75px) rotate(160deg)}}@keyframes buddy-enter{from{transform:translateX(-100px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes happy-hop{50%{transform:translateY(-18px) rotate(-3deg)}}
@media(min-width:1100px){.shell{max-width:1440px;padding-left:56px;padding-right:56px}.landing-hero{gap:64px;min-height:560px;align-items:center}.landing-scene{min-height:470px}.game{max-width:1120px;display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);gap:24px}.game-prompt{grid-column:1;grid-row:1;flex-direction:column;text-align:center;align-self:center}.game-prompt .animal{width:170px;height:180px}.reading-panel{grid-column:1;grid-row:2;margin:0}.playfield{grid-column:2;grid-row:1/span 2;display:grid;align-content:center;min-height:390px}.game .feedback{grid-column:1/-1;position:static}.game-header{max-width:1120px}.film-view h1{font-size:40px}.hero{min-height:420px}}
@media(min-width:601px) and (max-width:1099px){.shell{padding-left:32px;padding-right:32px}.landing-hero{gap:30px}.film-stage{min-height:420px}.film-caption{max-width:75%}.film-actor{left:8%;width:34%}.film-choices{right:6%}}
@media(max-width:600px){.shell{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.landing-copy h1{font-size:clamp(34px,9vw,48px);line-height:1.1}.film-stage{aspect-ratio:auto;min-height:440px;border-radius:24px;margin:18px 0}.film-caption{left:5%;right:5%;max-width:none;padding:16px;top:5%}.film-caption p{font-size:15px}.film-sun{top:37%;width:50px;height:50px}.film-tree{bottom:24%;right:3%;font-size:90px}.film-actor{left:0;bottom:10%;width:58%}.film-ball{left:65%;bottom:14%;width:55px;height:55px}.film-choices{right:5%;left:5%;bottom:4%;justify-content:center;gap:12px}.film-choices button{width:72px;height:72px}.frame-2 .film-actor{bottom:22%;width:46%}.film-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.film-controls .primary{grid-column:1/-1}.film-controls .audio{padding:10px}.film-counter{font-size:13px}.film-view .section-head{align-items:flex-start;gap:12px;flex-wrap:wrap}.film-view h1{font-size:28px;margin:10px 0}.film-sparkles{left:16%;bottom:48%}}
@media(max-height:500px) and (min-width:601px){header{padding:10px 0}.game-prompt{min-height:85px}.game-prompt .animal{width:70px;height:80px}.playfield{min-height:180px}.game .feedback{position:static}.film-stage{min-height:320px}}
.reduced .film-stage *,.reduced .animal-eyes,.reduced .animal-tail{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:600px){.film-stage.frame-1 .film-ball{animation-name:ball-roll-small}}@keyframes ball-roll-small{from{transform:translateX(-60px) rotate(-120deg)}to{transform:translateX(12px) rotate(100deg)}}
.install-dialog{border:1px solid var(--line);border-radius:28px;background:var(--cream);color:var(--ink);padding:28px;max-width:520px;width:calc(100% - 32px);max-height:85dvh;overflow:auto;box-shadow:0 24px 100px #25304744}.install-dialog::backdrop{background:#25304788;backdrop-filter:blur(4px)}.install-dialog h2{font-size:27px}.install-dialog details{margin-top:20px}.install-dialog summary{cursor:pointer;font-weight:800;min-height:44px}.install-close{float:right}.install-dialog img{border-radius:18px}.install-dialog [hidden]{display:none}#offline-banner{padding:12px 20px;text-align:center;background:#fff0cb;color:#493b20;font-size:14px}footer{flex-wrap:wrap;gap:14px}
