/* A layered, seekable storybook stage: scenery, action, actors, captions. */
.tale-films{width:100%;display:grid;gap:16px}.tale-split{grid-template-columns:1fr 1fr}.tale-stage{position:relative;isolation:isolate;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:28px;border:2px solid #e1bb7580;box-shadow:0 20px 55px #060d2b77,inset 0 0 55px #121832;background:#162a43;--tale-time:0s;--tale-duration:9s}.tale-stage .tale-set{position:absolute;inset:0;overflow:hidden}.tale-school{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(.9);transform:scale(1.08)}.tale-night{position:absolute;inset:0;background:linear-gradient(#111a4666,transparent 35%,#153b4499 73%,#111a46)}.tale-moon{position:absolute;width:10%;aspect-ratio:1;border-radius:50%;background:#fff0bd;left:77%;top:14%;box-shadow:0 0 40px #ffe6afaa,0 0 90px #ffe6af44}.tale-scene-heading{position:absolute;inset:15px 20px auto;text-align:left;display:flex;flex-direction:column;gap:3px;text-shadow:0 2px 8px #000}.tale-scene-heading span{color:#ffe1a2;letter-spacing:.15em;font-size:11px;font-weight:800}.tale-scene-heading b{font-size:clamp(17px,2.2vw,28px);color:#fff6de}.tale-subtitles{position:absolute;inset:auto 0 0;padding:16px 22px 12px;background:linear-gradient(transparent,#0b142dee 25%);min-height:20%;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;color:#fff8e8;font-size:clamp(17px,2vw,25px);line-height:1.35;text-align:center;text-wrap:balance}.tale-beats{display:flex;gap:7px;justify-content:center}.tale-beats i{height:4px;width:30px;background:#ffffff33;border-radius:5px}.tale-beats i.active{background:#ffd990;box-shadow:0 0 10px #ffdf92}.tale-river{position:absolute;left:-5%;right:-5%;top:62%;height:18%;transform:rotate(-4deg);background:linear-gradient(#416e9a,#243d77);border-block:5px solid #6fbbcb66;box-shadow:0 5px 0 #112c3f}.tale-river i{position:absolute;width:22%;height:4px;border-radius:50%;background:#d5efff44;left:20%;top:20%;animation:tale-water 5s ease-in-out infinite alternate}.tale-river i:nth-child(2){left:65%;top:50%;animation-delay:-2s}.tale-river i:nth-child(3){left:40%;top:75%;animation-delay:-4s}.tale-creation{position:absolute;width:38%;left:33%;bottom:20%;filter:drop-shadow(0 0 12px #ffe59888);transform-origin:center bottom;z-index:3;animation:tale-build var(--tale-duration) linear both paused;animation-delay:var(--tale-time)}.tale-creation svg,.tale-built svg{display:block;width:100%;height:100%}.creation-kite{width:23%;left:56%;bottom:32%;height:48%;animation-name:tale-fly}.creation-tower{width:23%;left:54%;height:53%}.creation-mooncakes,.creation-drums,.creation-garden{left:43%;width:28%;height:40%;bottom:21%}.tale-traveller{position:absolute;bottom:24%;left:9%;width:20%;z-index:5;filter:drop-shadow(0 10px 4px #09172777);animation:tale-travel var(--tale-duration) linear both paused;animation-delay:var(--tale-time)}.tale-traveller svg{width:100%;height:auto;display:block}.tale-traveller .rabbit-eyes{animation:none}.tale-bounce{animation:tale-hop 1s ease-in-out infinite paused;animation-delay:var(--tale-time)}.hero-two{left:0%;width:16%;bottom:23%;opacity:.95}.tale-traveller .rabbit-ears{transform-origin:60px 70px}.tale-stage[data-beat="0"] .tale-traveller .rabbit-ears{transform:rotate(-9deg)}.tale-stage[data-beat="1"] .tale-traveller{filter:drop-shadow(0 0 16px #ffe9a877)}.tale-stage[data-beat="2"] .tale-traveller .rabbit-ears{transform:rotate(8deg)}.route-stars .tale-traveller{animation-name:tale-star-travel}.choice-bridge .tale-traveller{animation-name:tale-travel}.tale-spirit{position:absolute;left:72%;top:24%;width:17%;z-index:4;filter:drop-shadow(0 0 20px #c5b8ff66);opacity:0;animation:tale-friend var(--tale-duration) linear both paused;animation-delay:var(--tale-time)}.tale-spirit svg{width:100%}.tale-last-spark{position:absolute;left:37%;top:53%;font-size:clamp(30px,5vw,70px);color:#ffe9a1;text-shadow:0 0 30px #ffba53;opacity:0}.tale-magic{position:absolute;inset:15% 15% 26%;z-index:4;pointer-events:none;animation:tale-magic var(--tale-duration) linear both paused;animation-delay:var(--tale-time)}.tale-magic i{position:absolute;left:calc(var(--i)*8%);top:calc(20% + mod(var(--i),3)*15%);color:#ffe99c;font-size:25px;text-shadow:0 0 20px #ffc968;transform:rotate(calc(var(--i)*23deg))}.tale-mist{position:absolute;inset:30% -30% 18%;background:radial-gradient(ellipse,#c8d8f1cc,transparent 68%);filter:blur(10px);z-index:3;opacity:0;pointer-events:none}.mist-front{top:49%;left:-10%;right:-50%;background:radial-gradient(ellipse,#e0dff2cc,transparent 70%);z-index:6}.choice-kite .tale-mist,.choice-tower .tale-mist{animation:tale-clear var(--tale-duration) linear both paused;animation-delay:var(--tale-time)}.choice-tower .tale-mist{animation-name:tale-reveal-path}.tale-beam{position:absolute;width:50%;height:48%;left:59%;top:17%;background:linear-gradient(90deg,#fff0bba8,transparent);clip-path:polygon(0 42%,100% 0,100% 100%,0 56%);opacity:0;z-index:4;animation:tale-beam var(--tale-duration) linear both paused;animation-delay:var(--tale-time)}.tale-stage:not(.choice-tower):not(.has-tower) .tale-beam{display:none}.tale-existing{position:absolute;inset:0;z-index:2}.tale-built{position:absolute;width:25%;left:22%;bottom:23%;opacity:.9}.built-kite{width:13%;left:68%;top:12%;bottom:auto}.built-tower{width:13%;left:80%;bottom:28%}.built-mooncakes,.built-drums,.built-garden{width:19%;left:45%;bottom:24%}.tale-parade{position:absolute;left:15%;right:15%;bottom:25%;z-index:6;display:none;justify-content:center;gap:10px}.tale-parade>div{width:18%;animation:tale-hop 1s ease-in-out infinite paused;animation-delay:calc(var(--tale-time) - var(--i)*.15s)}.choice-drums[data-beat="2"] .tale-parade,.tale-finale[data-beat="2"] .tale-parade{display:flex}.tale-sky-lights{position:absolute;inset:0;pointer-events:none}.tale-sky-lights i{position:absolute;left:calc(7% + var(--i)*12%);top:calc(14% + var(--i)*2%);font-style:normal;font-size:clamp(18px,3vw,35px);filter:drop-shadow(0 0 12px #ffc876aa)}.tale-action .tale-sky-lights{opacity:.3}.tale-action[data-beat="2"] .tale-sky-lights{opacity:1}.tale-vote .tale-traveller{animation:none;left:20%}.tale-vote .hero-two{left:5%}.tale-vote .tale-bounce{animation:none}.tale-vote .tale-spirit,.tale-vote .tale-beam,.tale-vote .tale-magic{display:none}.tale-vote .tale-school{filter:brightness(.45)}.tale-vote .tale-mist{opacity:.6}.tale-vote .tale-subtitles{font-size:clamp(16px,1.8vw,22px)}
/* Opening: home -> scattering -> rescue -> invitation. */
.tale-intro{aspect-ratio:16/9}.tale-intro .tale-river,.tale-intro .tale-parade,.tale-intro .tale-beam{display:none}.tale-intro .tale-school{animation:tale-darken 24s linear both paused;animation-delay:var(--tale-time)}.tale-intro .tale-traveller{animation-name:tale-rescue;bottom:22%}.tale-intro .tale-spirit{animation:tale-scatter 24s linear both paused;animation-delay:var(--tale-time)}.tale-intro .tale-sky-lights{animation:tale-lights-out 24s linear both paused;animation-delay:var(--tale-time)}.tale-intro .tale-last-spark{animation:tale-spark 24s linear both paused;animation-delay:var(--tale-time)}.tale-intro[data-beat="3"] .tale-spirit{display:none}.tale-finale .tale-river{opacity:.3}.tale-finale .tale-school{filter:brightness(.85)}.tale-finale .tale-spirit{opacity:1}.tale-finale .tale-magic{display:none}.tale-finale .tale-traveller{animation-name:tale-home}.tale-finale.route-stars .tale-traveller{animation-name:tale-star-travel}.tale-finale .tale-sky-lights{opacity:.9}.tale-journal{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:20px 0}.tale-journal section{padding:18px;border:1px solid #e9c78555;border-radius:22px;background:#192b43}.tale-journal h3{font-size:17px;color:#ffe4a3}.tale-journal ol{list-style:none;padding:0}.tale-journal li{display:flex;align-items:center;gap:12px;margin:15px 0}.tale-journal li svg{width:55px;flex-shrink:0}.tale-journal p{font-size:14px;color:#c9dce4;margin:4px 0}.tale-landmarks{position:absolute;inset:0;pointer-events:none;z-index:3}.tale-territory{position:absolute;inset:30% 51% 18% 3%;display:flex;align-items:flex-end;gap:2%}.territory-1{inset:30% 3% 18% 51%}.territory-all{inset:30% 15% 18%}.tale-landmark{width:32%;filter:drop-shadow(0 4px 6px #0d172a66)}.tale-landmark svg{display:block;width:100%;max-height:150px}.landmark-kite{align-self:flex-start}.tale-page .story-options{margin:12px 0}.tale-page .story-options button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:85px}.tale-page .story-options svg{width:60px;height:65px}.tale-page .story-chapter{padding:16px}.tale-page .story-chapter>h1{margin:4px;font-size:clamp(24px,3vw,38px)}.tale-page .story-workspace{display:block}.tale-page .story-chapter>.eyebrow{margin:6px}.tale-page .rabbit-timer{max-height:55px}.tale-page .rabbit-guide{display:none}.tale-page .story-result{padding:8px;margin:0;background:none;box-shadow:none}.tale-page .story-result h2{font-size:20px;margin:5px}.tale-page .crew-story-results{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tale-page .crew-story{padding:8px;display:block}.tale-page .crew-story h3{font-size:17px;margin:0}.tale-page .crew-story p{font-size:14px;margin:3px}.tale-page .teacher-private{margin-top:20px}.tale-page .tale-opening-wrap{max-width:1200px;margin:auto}.tale-page .tale-finale-wrap{max-width:1200px;margin:auto}.tale-page .tale-finale-wrap>h1{text-align:center;color:#ffe4ab}.tale-page .story-status{font-size:15px;text-align:center;margin:8px}.tale-page .tale-vote{aspect-ratio:21/8}.tale-page .tale-vote .tale-traveller{width:12%;bottom:25%}.tale-page .tale-vote .hero-two{left:6%}
@keyframes tale-water{to{transform:translateX(45%) scaleX(.7);opacity:.4}}
@keyframes tale-build{0%,25%{opacity:0;transform:translateY(35px) scale(.2)}45%{opacity:1;transform:translateY(-5px) scale(1.08)}55%,100%{opacity:1;transform:none}}
@keyframes tale-fly{0%,25%{opacity:0;transform:translate(-130%,100%) rotate(-25deg)}50%{opacity:1;transform:translate(0,10%) rotate(10deg)}75%,100%{opacity:1;transform:translate(0,-5%) rotate(-10deg)}}
@keyframes tale-travel{0%{transform:translateX(0)}25%,55%{transform:translateX(90%)}100%{transform:translateX(270%)}}
@keyframes tale-star-travel{0%{transform:translate(0,0)}25%,55%{transform:translate(90%,0)}68%{transform:translate(140%,-55%)}76%{transform:translate(170%,-15%)}88%{transform:translate(215%,-70%)}100%{transform:translate(265%,0)}}
@keyframes tale-hop{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes tale-clear{0%,35%{opacity:1;transform:translateX(0)}80%,100%{opacity:0;transform:translateX(65%)}}
@keyframes tale-reveal-path{0%,35%{opacity:1}70%,100%{opacity:.12}}
@keyframes tale-beam{0%,40%{opacity:0;transform:scaleX(.1)}65%,100%{opacity:.85;transform:scaleX(1)}}
@keyframes tale-magic{0%,22%{opacity:0;transform:translate(-20%,40%) scale(.4)}40%{opacity:1;transform:scale(1)}70%,100%{opacity:0;transform:translate(20%,-20%) scale(1.2)}}
@keyframes tale-friend{0%,60%{opacity:0;transform:translateY(-35px)}80%,100%{opacity:1;transform:none}}
@keyframes tale-darken{0%,19%{filter:brightness(1)}34%,100%{filter:brightness(.35)}}
@keyframes tale-lights-out{0%,20%{opacity:1;transform:none}40%,100%{opacity:0;transform:translateY(-60%) rotate(15deg)}}
@keyframes tale-scatter{0%,18%{opacity:0;transform:translate(120%,-50%) rotate(20deg)}25%{opacity:1;transform:translate(20%,0)}40%{opacity:1;transform:translate(-250%,10%) rotate(-20deg)}60%,100%{opacity:0;transform:translate(-500%,-60%)}}
@keyframes tale-rescue{0%,40%{transform:translate(-120%,0)}60%,100%{transform:translate(125%,0)}}
@keyframes tale-spark{0%,42%{opacity:0;transform:translateY(-150px)}50%,70%{opacity:1;transform:none}100%{opacity:1;transform:scale(.6) translateY(20px)}}
@keyframes tale-home{from{transform:translate(-40%,0)}to{transform:translate(220%,0)}}
@media(max-width:700px){.tale-split{grid-template-columns:1fr}.tale-split .tale-stage{aspect-ratio:16/8}.tale-stage{border-radius:18px;aspect-ratio:4/3}.tale-intro{aspect-ratio:4/5}.tale-subtitles{padding:14px 12px 9px;font-size:17px}.tale-scene-heading{inset:12px 12px auto}.tale-page .tale-vote{aspect-ratio:16/10}.tale-page .tale-vote .tale-traveller{width:20%}.tale-page .story-options button{font-size:16px;min-height:75px;padding:10px}.tale-page .story-options svg{width:40px;height:45px}.tale-page .story-options{gap:8px}.tale-page .story-chapter{padding:10px}.tale-page .story-result h2{font-size:17px}.tale-journal{grid-template-columns:1fr}.tale-page .crew-story-results{grid-template-columns:1fr}.tale-landmark svg{max-height:90px}}
@media(prefers-reduced-motion:reduce){.tale-stage *{animation:none!important;transition:none!important}.tale-creation,.tale-spirit,.tale-last-spark{opacity:1}.tale-stage .tale-traveller{left:20%;transform:none}.tale-stage .hero-two{left:3%}.tale-stage[data-beat="2"] .tale-traveller{left:65%}.tale-stage[data-beat="2"] .hero-two{left:45%}.tale-intro[data-beat="0"] .tale-school{filter:brightness(1)}.tale-intro:not([data-beat="0"]) .tale-school{filter:brightness(.35)}.tale-stage[data-beat="0"] .tale-creation{opacity:0}.tale-stage[data-beat="2"] .tale-mist{opacity:0}}
.mission-paused .tale-stage *{animation-play-state:paused!important}
.tale-finale .tale-school{filter:brightness(var(--tale-light,.6))}.tale-finale .tale-sky-lights{opacity:var(--tale-light,.6)}
.tale-moon{display:none}.tale-garden .tale-river{background:none;border:0;box-shadow:none;transform:none;top:59%;height:10%}.tale-garden .tale-school{filter:brightness(.9) saturate(.95)}.tale-garden .tale-night{background:linear-gradient(#131b3933,transparent 30%,#101b3622 74%,#111a46)}.tale-sky-lights i{width:4.5%;max-width:45px}.tale-sky-lights svg{width:100%;height:auto}.tale-stage .tale-set{animation:tale-camera var(--tale-duration) linear both paused;animation-delay:var(--tale-time);transform-origin:50% 65%}@keyframes tale-camera{from{transform:scale(1)}to{transform:scale(1.045)}}
.tale-set{pointer-events:none}.tale-page .story-options{position:relative;z-index:2;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.tale-page .story-options button{min-width:0;flex-direction:row}.tale-page .story-options button>span{font-size:inherit;min-width:0;overflow-wrap:anywhere}.tale-page .story-options svg{flex-shrink:0}.tale-page .story-paused-label{padding:10px;border-radius:12px;background:#ffe5ab;color:#283347;text-align:center;font-weight:700}
@media(max-width:600px){.tale-action,.tale-finale{aspect-ratio:4/5}.tale-action .tale-traveller,.tale-finale .tale-traveller{width:24%}.tale-action .hero-two,.tale-finale .hero-two{width:20%}.tale-action .tale-subtitles,.tale-finale .tale-subtitles{min-height:24%;font-size:19px}.tale-action .tale-scene-heading b,.tale-finale .tale-scene-heading b{font-size:19px}}
.rabbit-surprise{display:none}.tale-action[data-beat="0"] .rabbit-surprise,.tale-intro[data-beat="1"] .rabbit-surprise{display:block}.tale-action[data-beat="0"] .rabbit-smile,.tale-intro[data-beat="1"] .rabbit-smile{display:none}.tale-action[data-beat="1"] .rabbit-arm-right{transform-origin:83px 116px;transform:rotate(-55deg)}.tale-action[data-beat="2"] .rabbit-arm-left,.tale-finale[data-beat="2"] .rabbit-arm-left{transform-origin:37px 116px;transform:rotate(65deg)}.tale-action[data-beat="2"] .rabbit-arm-right,.tale-finale[data-beat="2"] .rabbit-arm-right{transform-origin:83px 116px;transform:rotate(-65deg)}