:root{--ink:#2b2118;--ink-soft:#2b211847;--panel:#ffffffe6;--focus:#1d4ed8;--font-story:ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif}*,:before,:after{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{background:var(--book-bg,#fff);color:var(--ink);font-family:var(--font-story);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;position:fixed;inset:0}button{font:inherit;color:inherit}:focus-visible{outline:4px solid var(--focus);outline-offset:4px}.fatal-error{background:var(--panel);border-radius:16px;margin:16px;padding:24px;font-size:22px}.viewport{touch-action:none;background:var(--book-bg);position:fixed;inset:0;overflow:hidden}.stage{transform-origin:0 0;position:absolute;top:0;left:0;overflow:visible}.page{opacity:0;transition:opacity .4s;position:absolute;inset:0}.page.is-active{opacity:1}.page.is-leaving{opacity:1;pointer-events:none}.page__scene,.page__scene>svg{width:100%;height:100%;display:block;position:absolute;inset:0}.page__scene>svg{overflow:visible}.caption-bar{left:50%;bottom:calc(max(12px, env(safe-area-inset-bottom)) + 30px);width:min(calc(1240px * var(--ui-scale,.64)), calc(100vw - 48px));pointer-events:none;display:grid;position:absolute;transform:translate(-50%)}.caption{padding:calc(26px * var(--ui-scale,.64)) calc(48px * var(--ui-scale,.64));border-radius:calc(36px * var(--ui-scale,.64));background:var(--panel);font-size:max(22px, calc(52px * var(--ui-scale,.64)));text-align:center;opacity:0;grid-area:1/1;align-self:end;margin:0;font-weight:600;line-height:1.3;transition:opacity .4s;box-shadow:0 6px 24px #0000002e}.caption.is-active{opacity:1;pointer-events:auto}.nav-button{background:var(--book-theme);cursor:pointer;border:none;border-radius:50%;place-items:center;width:88px;height:88px;padding:0;transition:transform .12s;display:grid;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 6px #0000002e}.nav-button[hidden]{display:none}.nav-button:active{transform:translateY(-50%)scale(.9)}.nav-button svg{fill:none;width:48px;height:48px;stroke:var(--ink);stroke-width:6px;stroke-linecap:round;stroke-linejoin:round}.nav-button--previous{left:max(16px, env(safe-area-inset-left))}.nav-button--next{right:max(16px, env(safe-area-inset-right))}.viewport.is-waiting .nav-button,.viewport.is-waiting .page-dots,.viewport.is-waiting .sound-controls{visibility:hidden}.sound-controls{top:max(14px, env(safe-area-inset-top));right:max(16px, env(safe-area-inset-right));gap:12px;display:flex;position:absolute}.sound-button{cursor:pointer;background:#ffffffeb;border:none;border-radius:50%;place-items:center;width:64px;height:64px;padding:0;transition:transform .12s,background-color .15s;display:grid;box-shadow:0 4px #0000002e}.sound-button:active{transform:scale(.9)}.sound-button svg{width:36px;height:36px;fill:var(--ink);stroke:var(--ink);stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round}.sound-button .lines{stroke:#fff}.sound-button.is-off{background:#fff9}.sound-button.is-off svg{opacity:.55}.sound-button .slash{stroke:#e5484d;stroke-width:5px}.caption .word{border-radius:.2em;transition:background-color .12s,color .12s}.caption .word.is-current{background:var(--book-theme);box-shadow:0 0 0 .08em var(--book-theme)}.caption .word.is-spoken{color:#6b5a4a}.caption{cursor:pointer}.page-dots{left:50%;bottom:max(8px, env(safe-area-inset-bottom));pointer-events:none;background:#1e142359;border-radius:999px;gap:10px;padding:6px 12px;display:flex;position:absolute;transform:translate(-50%)}.page-dots span{background:#ffffff80;border-radius:50%;width:10px;height:10px;transition:background-color .2s,transform .2s}.page-dots span.is-current{background:#fff;transform:scale(1.3)}.start-screen{text-align:center;background:#ffffff8c;background:color-mix(in srgb, var(--book-bg) 70%, transparent);flex-direction:column;justify-content:center;align-items:center;gap:40px;padding:16px;transition:opacity .4s;display:flex;position:fixed;inset:0}.start-screen.is-hidden{opacity:0;pointer-events:none}.start-screen__title{text-shadow:0 2px #fffc;max-width:900px;margin:0;font-size:clamp(36px,6vw,76px);line-height:1.15}.start-screen__button{background:var(--book-theme);cursor:pointer;border:none;border-radius:999px;min-height:96px;padding:0 64px;font-size:clamp(28px,4vw,44px);font-weight:700;transition:transform .12s;box-shadow:0 8px #0000002e}.start-screen__button:active{transform:translateY(4px)}.rotate-prompt{z-index:10;text-align:center;background:var(--book-bg);flex-direction:column;justify-content:center;align-items:center;gap:24px;padding:16px;display:none;position:fixed;inset:0}@media (orientation:portrait){.rotate-prompt{display:flex}}.rotate-prompt__icon{width:160px;height:160px;overflow:visible}.rotate-prompt__tablet{fill:var(--book-theme);stroke:var(--ink);stroke-width:5px;transform-origin:60px 56px;animation:2.4s ease-in-out infinite rotate-hint}.rotate-prompt__arrow{fill:none;stroke:var(--ink);stroke-width:5px;stroke-linecap:round;stroke-linejoin:round}.rotate-prompt__text{max-width:520px;margin:0;font-size:clamp(26px,5vw,40px);font-weight:700;line-height:1.25}@keyframes rotate-hint{0%,25%{transform:rotate(0)}55%,to{transform:rotate(-90deg)}}@media (prefers-reduced-motion:reduce){.rotate-prompt__tablet{animation:none;transform:rotate(-90deg)}.page,.caption,.start-screen{transition-duration:.2s}.nav-button,.start-screen__button,.page-dots span{transition:none}}.amb{animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:var(--anim-delay,0s);transform-box:fill-box;transform-origin:50%}.amb-drift{animation-name:amb-drift;animation-duration:var(--anim-duration,14s)}.amb-bob{animation-name:amb-bob;animation-duration:var(--anim-duration,1.6s)}.amb-float{animation-name:amb-float;animation-duration:var(--anim-duration,4s)}.amb-sway{animation-name:amb-sway;animation-duration:var(--anim-duration,3s);transform-origin:50% 100%}.amb-twinkle{animation-name:amb-twinkle;animation-duration:var(--anim-duration,1.2s)}.amb-pulse{animation-name:amb-pulse;animation-duration:var(--anim-duration,1.4s)}.amb-ripple{animation-name:amb-ripple;animation-duration:var(--anim-duration,2s)}.amb-glow{animation-name:amb-glow;animation-duration:var(--anim-duration,1.6s)}.amb-breathe{animation-name:amb-breathe;animation-duration:var(--anim-duration,2.2s);transform-origin:50% 100%}.amb-wave{animation-name:amb-wave;animation-duration:var(--anim-duration,1.6s);transform-origin:50% 100%}.amb-flap-left{animation-name:amb-flap-left;animation-duration:var(--anim-duration,.35s);transform-origin:100% 60%}.amb-flap-right{animation-name:amb-flap-right;animation-duration:var(--anim-duration,.35s);transform-origin:0 60%}.amb-skip{animation-name:amb-skip;animation-duration:var(--anim-duration,.7s);transform-origin:50% 100%;animation-timing-function:cubic-bezier(.3,0,.5,1)}.amb-jiggle{animation-name:amb-jiggle;animation-duration:var(--anim-duration,.6s)}.amb-blink{animation-name:amb-blink;animation-duration:var(--anim-duration,4s);animation-timing-function:linear;animation-direction:normal}.amb-spin{animation-name:amb-spin;animation-duration:var(--anim-duration,10s);animation-timing-function:linear;animation-direction:normal}@keyframes amb-drift{0%{transform:translate(-90px)}to{transform:translate(110px)}}@keyframes amb-bob{0%{transform:translateY(0)}to{transform:translateY(-28px)}}@keyframes amb-float{0%{transform:translate(-10px)rotate(-3deg)}to{transform:translate(24px,-44px)rotate(3deg)}}@keyframes amb-sway{0%{transform:rotate(-6deg)}to{transform:rotate(6deg)}}@keyframes amb-twinkle{0%{opacity:1;transform:scale(1)}to{opacity:.25;transform:scale(.75)}}@keyframes amb-pulse{0%{transform:scale(1)}to{transform:scale(1.16)}}@keyframes amb-ripple{0%{opacity:.95;transform:scaleX(1)}to{opacity:.25;transform:scaleX(1.45)}}@keyframes amb-glow{0%{opacity:.45;transform:scale(.96)}to{opacity:1;transform:scale(1.06)}}@keyframes amb-breathe{0%{transform:scale(1)}to{transform:scale(.97,1.05)}}@keyframes amb-wave{0%{transform:rotate(-9deg)}to{transform:rotate(9deg)}}@keyframes amb-flap-left{0%{transform:rotate(0)}to{transform:rotate(-28deg)}}@keyframes amb-flap-right{0%{transform:rotate(0)}to{transform:rotate(28deg)}}@keyframes amb-skip{0%{transform:translateY(0)scale(1.06,.94)}to{transform:translateY(-34px)scale(.96,1.04)}}@keyframes amb-jiggle{0%{transform:rotate(-7deg)}to{transform:rotate(7deg)}}@keyframes amb-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes amb-blink{0%,90%,to{transform:scaleY(1)}94%{transform:scaleY(.1)}}.hotspot{cursor:pointer}.hit-area{fill:none;pointer-events:all}.decor,.fx-layer{pointer-events:none}.fx-shape{stroke:#3d29408c;stroke-width:2.5px;stroke-linejoin:round}.fx-bubble-dot{fill:#ffffff59;stroke-width:4px}.fx-speech rect,.fx-speech path{fill:#fff;stroke:var(--ink);stroke-width:6px;stroke-linejoin:round}.fx-speech text{fill:var(--ink);font-family:var(--font-story);font-size:46px;font-weight:700}.tap-ripple{z-index:5;pointer-events:none;border:5px solid #ffffffe6;border-radius:50%;width:72px;height:72px;margin:-36px 0 0 -36px;animation:.45s ease-out forwards tap-ripple;position:fixed;box-shadow:0 0 0 2px #2b211826}@keyframes tap-ripple{0%{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.2)}}@media (prefers-reduced-motion:reduce){.amb{animation:none!important}.tap-ripple{animation-name:tap-fade;animation-duration:.3s}@keyframes tap-fade{0%{opacity:1}to{opacity:0}}}.pwa-pill{z-index:5;top:max(14px, env(safe-area-inset-top));left:max(16px, env(safe-area-inset-left));background:var(--panel);pointer-events:none;border-radius:999px;max-width:min(520px,100vw - 280px);padding:10px 18px;font-size:18px;font-weight:600;line-height:1.3;position:fixed;box-shadow:0 4px #0000001f}.pwa-pill[hidden]{display:none}.pwa-pill--progress{background:linear-gradient(to right, color-mix(in srgb, var(--book-theme) 70%, white) var(--progress,0%), transparent var(--progress,0%)), var(--panel)}.pwa-pill--ready:before{content:"✓ "}.pwa-pill--update{pointer-events:auto;align-items:center;gap:14px;padding:8px 8px 8px 18px;display:flex}.pwa-pill__button{background:var(--book-theme);cursor:pointer;border:none;border-radius:999px;min-width:64px;min-height:64px;padding:0 24px;font-weight:700}.pwa-install{flex-direction:column;align-items:center;gap:16px;display:flex}.pwa-install:empty{display:none}.pwa-install__button{border:3px solid var(--ink);background:var(--panel);cursor:pointer;border-radius:999px;min-height:64px;padding:0 32px;font-size:22px;font-weight:700}.pwa-ios-hint{background:var(--panel);border-radius:20px;align-items:center;gap:8px;max-width:560px;padding:8px 8px 8px 20px;display:flex;box-shadow:0 4px #0000001f}.pwa-ios-hint__text{text-align:left;margin:0;font-size:19px;line-height:1.35}.pwa-share-icon{vertical-align:-5px;width:24px;height:24px;stroke:var(--focus);stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;margin:0 4px}.pwa-ios-hint__close{cursor:pointer;background:0 0;border:none;border-radius:50%;flex:none;width:64px;height:64px;font-size:34px;line-height:1}
