:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink-soft:#4f6f72;--cream:#fff9e9;--paper-strong:#fffdf4;--sun:#f5c35d;--coral:#e97d6f;--rose:#d85d82;--purple:#6e629e;--purple-dark:#4e467d;--blue:#4e87ac;--focus:#2c3d91;--danger:#9b3e43;--shadow-soft:0 8px 22px #314b442b;--shadow-button:0 6px 0 #414e532e;--radius-small:16px;--radius-medium:26px;--radius-large:38px;--utility-height:72px;--sky:#ddf4ff;--sky-deep:#b9e4fb;--leaf:#4ea36b;--leaf-dark:#35774c;--ink:#24404f;--ink-strong:#12242e;--paper:#fffaf0;--firefly:#ffd66b;--firefly-soft:#ffd66b8c;--r-card:28px;--r-pill:999px;--tap-min:56px;--tap-nav:88px;--tap-utility:48px;--audio-offset:0s;--font-story-system:"Segoe UI", system-ui, sans-serif;--font-story:Andika, var(--font-story-system);--font-ui:"Arial Rounded MT Bold", "Trebuchet MS", ui-rounded, system-ui, sans-serif;--story-size-min:28px;--story-size-max:40px;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}:root[lang=lv-LV],:root[lang=ru-RU],:root[lang=fr-FR]{--font-story:var(--font-story-system)}@font-face{font-family:Andika;src:url(/stories/read-along/fonts/andika-latin-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+??,U+2018-201A,U+201C-201E,U+2026}@font-face{font-family:Andika;src:url(/stories/read-along/fonts/andika-latin-700.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+??,U+2018-201A,U+201C-201E,U+2026}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--sky);color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;touch-action:manipulation;overscroll-behavior:none;overflow-x:hidden}#root{flex-direction:column;min-height:100%;display:flex}button{font:inherit;color:inherit;margin:0}img{max-width:100%;height:auto;display:block}:focus-visible{outline:3px solid var(--leaf);outline-offset:2px;border-radius:6px}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}:root[data-reduced-motion] *,:root[data-reduced-motion] :before,:root[data-reduced-motion] :after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.screen{padding:calc(var(--safe-top) + 12px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px);flex-direction:column;flex:1;gap:12px;display:flex}.screen-centred{text-align:center;justify-content:center;align-items:center;gap:24px}.screen h1{font-family:var(--font-ui);color:var(--ink-strong);margin:0;font-size:clamp(28px,7vw,44px);line-height:1.15}.screen p.lede{max-width:34ch;color:var(--ink);margin:0;font-size:18px}.leaf-button{background:var(--leaf);min-width:96px;min-height:96px;color:var(--paper-strong);font-family:var(--font-ui);box-shadow:var(--shadow-button);cursor:pointer;border:none;border-radius:60% 60% 60% 8px;padding:18px 30px;font-size:24px;transition:transform .16s,background-color .16s}.leaf-button:hover{background:var(--leaf-dark)}.leaf-button:active{background:var(--leaf-dark);transform:translateY(3px);box-shadow:0 3px #414e532e}.leaf-button.secondary{background:var(--paper-strong);color:var(--ink-strong);border:3px solid var(--leaf)}.pill-button{min-height:var(--tap-min);border:3px solid var(--leaf);border-radius:var(--r-pill);background:var(--paper-strong);color:var(--ink-strong);font-family:var(--font-ui);cursor:pointer;padding:12px 22px;font-size:18px}.utility-bar{width:100%;min-height:var(--tap-utility);justify-content:space-between;align-items:center;display:flex}.utility-bar-single{justify-content:flex-start;width:100%}.utility-actions{align-items:center;gap:10px;display:flex}.language-selector{min-height:var(--tap-utility);border-radius:var(--r-pill);color:var(--ink-strong);background:#ffffffd1;border:2px solid #24404f26;align-items:center;gap:7px;padding:5px 10px;display:inline-flex}.language-selector select{min-height:var(--tap-utility);max-width:10rem;color:inherit;font:inherit;background:0 0;border:0;font-weight:700}.utility-button{width:var(--tap-utility);height:var(--tap-utility);border-radius:var(--r-pill);color:var(--ink);opacity:.6;cursor:pointer;background:#ffffff80;border:none;place-items:center;text-decoration:none;transition:opacity .16s;display:grid}.utility-button:hover,.utility-button:focus-visible,.utility-button[data-holding=true]{opacity:1}.utility-button.primary-home{width:64px;height:64px;color:var(--leaf-dark);opacity:1;background:#ffffffe6;border:2px solid #20304017;border-radius:22px;transition:transform .15s,box-shadow .15s;box-shadow:0 5px #2030401c}.utility-button.primary-home:hover{transform:translateY(-2px);box-shadow:0 7px #2030401c}.utility-button.primary-home:active{transform:translateY(3px);box-shadow:0 2px #2030401c}@media (width<=720px){.utility-button.primary-home{border-radius:19px;width:56px;height:56px}}.hold-exit{position:relative}.hold-exit svg{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;transform:rotate(-90deg)}.hold-exit .ring-track{fill:none;stroke:#24404f2e;stroke-width:3px}.hold-exit .ring-fill{fill:none;stroke:var(--leaf);stroke-width:3px;stroke-linecap:round;transition:stroke-dashoffset .12s linear}.hold-exit[data-holding=true] .ring-fill{transition:stroke-dashoffset 1.5s linear}.hold-hint{white-space:nowrap;background:var(--ink-strong);color:var(--paper-strong);border-radius:var(--r-pill);pointer-events:none;padding:4px 10px;font-size:13px;position:absolute;top:calc(100% + 6px);left:0}.page-screen{flex:1;grid-template:"bar""art"1fr"text""foot"/1fr;gap:clamp(10px,2.4vh,20px);min-height:0;display:grid}.page-screen>.utility-bar{grid-area:bar}.illustration-slot{grid-area:art;justify-content:center;align-items:center;min-height:0;display:flex}.side-slot{display:contents}.reading-slot{grid-area:text;justify-content:center;display:flex}.foot-slot{grid-area:foot}.illustration{aspect-ratio:4/3;border-radius:var(--r-card);background:var(--sky-deep);width:min(100%,560px);box-shadow:var(--shadow-soft);animation:.24s ease-out illustration-in;position:relative;overflow:hidden}@keyframes illustration-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.illustration img{object-fit:cover;width:100%;height:100%}.illustration[data-turn=next]{animation:.26s ease-out turn-from-right}.illustration[data-turn=back]{animation:.26s ease-out turn-from-left}@keyframes turn-from-right{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes turn-from-left{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}.hotspot-layer{position:absolute;inset:0}.hotspot{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;padding:0;position:absolute}.hotspot:focus-visible{outline:3px solid var(--leaf);outline-offset:2px}.hotspot[data-shape=circle]{border-radius:50%}.hotspot-flash{border-radius:inherit;pointer-events:none;position:absolute;inset:0}.hotspot[data-animating=wiggle] .hotspot-flash{animation:.42s ease-in-out hs-wiggle}.hotspot[data-animating=hop] .hotspot-flash{animation:.42s ease-out hs-hop}.hotspot[data-animating=spin] .hotspot-flash{animation:.52s ease-in-out hs-spin}.hotspot[data-animating=pulse] .hotspot-flash{animation:.42s ease-out hs-pulse}.hotspot[data-animating=sway] .hotspot-flash{animation:.52s ease-in-out hs-sway}@keyframes hs-wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}@keyframes hs-hop{0%,to{transform:translateY(0)}40%{transform:translateY(-12%)}}@keyframes hs-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes hs-pulse{0%,to{transform:scale(1)}45%{transform:scale(1.08)}}@keyframes hs-sway{0%,to{transform:translate(0)rotate(0)}30%{transform:translate(-4%)rotate(-3deg)}70%{transform:translate(4%)rotate(3deg)}}.line-panel{background:var(--paper);border-radius:var(--r-card);width:min(100%,640px);box-shadow:var(--shadow-soft);padding:clamp(14px,3vw,24px) clamp(12px,4vw,28px)}.line{font-family:var(--font-story);font-size:clamp(var(--story-size-min), 7.2vw, var(--story-size-max));letter-spacing:.02em;color:var(--ink);text-align:center;-webkit-hyphens:none;hyphens:none;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.15em .5em;margin:0;line-height:1.5;display:flex;position:relative}.firefly{z-index:0;border-radius:var(--r-pill);background:radial-gradient(ellipse at center, var(--firefly) 0%, var(--firefly-soft) 55%, #ffd66b00 100%);pointer-events:none;opacity:0;transition:opacity .2s;position:absolute;top:0;left:0}.firefly[data-state=travelling],.firefly[data-state=resting]{opacity:1}.firefly[data-state=travelling]{animation:3s ease-in-out infinite firefly-breathe}@keyframes firefly-breathe{0%,to{filter:brightness()}50%{filter:brightness(1.02)}}@media (prefers-reduced-motion:reduce){.firefly{animation:none!important}}.word{z-index:1;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;padding:0;transition:color .16s;position:relative}.word:before{content:"";min-width:var(--tap-min);min-height:var(--tap-min);width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.word.word-active{color:var(--ink-strong);font-weight:700}.word[data-bounce=true]{animation:.2s ease-out word-bounce}@keyframes word-bounce{0%,to{transform:scale(1)}45%{transform:scale(1.12)}}.word-emphasis{font-size:1.12em}.punctuation{z-index:1;margin-left:-.5em}.page-pips{justify-content:center;gap:8px;padding:4px 0;display:flex}.pip{background:var(--sky-deep);border-radius:50%;width:10px;height:10px}.pip[data-seen=true]{background:var(--leaf)}.page-nav{justify-content:center;align-items:center;gap:clamp(12px,4vw,28px);padding-bottom:8px;display:flex}.nav-button{width:var(--tap-nav);height:var(--tap-nav);background:var(--leaf);color:var(--paper-strong);box-shadow:var(--shadow-button);cursor:pointer;border:none;border-radius:50%;place-items:center;display:grid}.nav-button.is-finish{width:auto;min-width:140px;font-family:var(--font-ui);border-radius:60% 60% 60% 8px;padding:0 26px;font-size:22px}.nav-button.secondary,.nav-button.replay{background:var(--paper-strong);color:var(--leaf-dark);border:3px solid var(--leaf);box-shadow:var(--shadow-soft)}.nav-button[data-pulse=true]{animation:.6s ease-out nav-pulse}@keyframes nav-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.nav-spacer{width:var(--tap-nav)}.story-grid{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:18px;width:100%;max-width:900px;margin:0 auto;display:grid}.locale-pending{border-radius:var(--r-card);background:var(--paper-strong);width:min(100%,680px);box-shadow:var(--shadow-soft);text-align:center;margin:24px auto;padding:24px}.locale-pending h2,.locale-pending p{margin:0}.locale-pending p{margin-top:10px;line-height:1.5}@media (width<=560px){.utility-bar{gap:8px}.utility-actions{min-width:0;margin-left:auto}.language-selector{min-width:0;padding-inline:7px}.language-selector select{max-width:6.4rem}}@media (width<=380px){.language-selector>span[aria-hidden=true]{display:none}.language-selector select{max-width:5.5rem}}@media (width<=340px){.utility-bar{flex-wrap:wrap}.utility-actions{justify-content:flex-end;width:100%}}.story-card{border-radius:var(--r-card);background:var(--paper-strong);min-width:0;box-shadow:var(--shadow-soft);cursor:pointer;text-align:left;border:none;flex-direction:column;gap:10px;padding:12px;display:flex}.story-card img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-medium);background:var(--sky-deep);width:100%}.story-card h2{font-family:var(--font-ui);color:var(--ink-strong);margin:0;font-size:22px}.mode-chip{border-radius:var(--r-pill);background:var(--sky-deep);color:var(--ink-strong);align-self:flex-start;padding:5px 14px;font-size:14px}.cover-art{aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-card);width:min(100%,520px);box-shadow:var(--shadow-soft);background:var(--sky-deep)}.cover-actions{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.leaf-spinner{background:var(--leaf);border-radius:60% 60% 60% 8px;width:44px;height:44px;animation:1s ease-in-out infinite leaf-spin}@keyframes leaf-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (orientation:landscape) and (width>=820px){.page-screen{grid-template:"bar bar""art side"minmax(0,1fr)/minmax(0,1.05fr) minmax(0,1fr);align-items:center;column-gap:clamp(20px,3vw,44px)}.side-slot{flex-direction:column;grid-area:side;justify-content:center;align-items:center;gap:clamp(14px,3vh,28px);height:100%;min-height:0;display:flex}.reading-slot,.foot-slot{grid-area:auto;width:100%}.illustration{width:min(100%,88vh)}.line-panel{width:100%}.line{font-size:clamp(var(--story-size-min), 3.8vw, 36px)}.page-nav{padding-bottom:0}}