:root{--story-ink:#202846;--story-muted:#5b677e;--story-purple:#6d4ce7;--story-pink:#dc3f83;--story-line:#e4e8f7}
.story-page{background:radial-gradient(900px 500px at 0 0,#ede9fe 0,transparent 62%),radial-gradient(900px 500px at 100% 5%,#dbeafe 0,transparent 60%),#f8faff!important}
.story-app{width:min(calc(100% - 24px),1120px);margin:1rem auto 3rem}
.story-hero,.story-reader,.story-quiz{border:1px solid var(--story-line);border-radius:25px;background:rgba(255,255,255,.97);box-shadow:0 14px 38px rgba(41,50,98,.11)}
.story-hero{padding:clamp(1rem,4vw,2rem);text-align:center}.story-kicker{margin:0 0 .3rem;color:var(--story-purple);font-size:.83rem;font-weight:950;text-transform:uppercase;letter-spacing:.07em}.story-hero h1{margin:.15rem 0 .45rem;color:var(--story-ink);font-size:clamp(2rem,7vw,3.35rem);line-height:1.05}.story-hero p:not(.story-kicker){max-width:720px;margin:.3rem auto;color:var(--story-muted)}
.story-method{display:flex;justify-content:center;gap:.45rem;flex-wrap:wrap;margin-top:.8rem}.story-method span{border:1px solid #dee4f7;border-radius:999px;background:#f6f8ff;color:#455271;padding:.35rem .68rem;font-size:.84rem;font-weight:850}.story-method span:first-child{background:#ede9fe;color:#5422a8}
.story-reader{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:1rem;margin-top:1rem;padding:clamp(.75rem,2vw,1rem)}
.story-stage-wrap{min-width:0}.story-stage{position:relative;min-height:clamp(310px,52vw,540px);overflow:hidden;border:3px solid #fff;border-radius:21px;background:linear-gradient(#9ed8ff 0 67%,#7ac66a 67%);box-shadow:inset 0 0 0 1px rgba(31,42,68,.1);isolation:isolate}
.story-stage:before{content:"";position:absolute;left:-10%;right:-10%;bottom:-8%;height:30%;border-radius:50% 50% 0 0;background:var(--story-ground,#7ac66a);z-index:-1}.story-stage.theme-space{background:radial-gradient(circle at 75% 18%,#fff 0 2px,transparent 3px),radial-gradient(circle at 25% 25%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 52% 12%,#fff 0 2px,transparent 3px),linear-gradient(#111b4f,#342062 70%,#49336e)}.story-stage.theme-space:before{background:#a8a6b1}.story-stage.theme-ocean{background:linear-gradient(#8fd6ff 0 55%,#2b9dcc 55% 72%,#08779d 72%)}.story-stage.theme-ocean:before{background:#efd177}.story-stage.theme-night{background:radial-gradient(circle at 78% 18%,#fff3ac 0 38px,transparent 40px),linear-gradient(#17234f 0 64%,#39496b 64%)}.story-stage.theme-night:before{background:#39496b}.story-stage.theme-jungle{background:linear-gradient(#a6e1ff 0 56%,#5bbf65 56%)}.story-stage.theme-jungle:before{background:#318c4e}.story-stage.theme-library{background:linear-gradient(#f9dfaf 0 58%,#c78856 58%)}.story-stage.theme-library:before{background:#a9663d}
.story-object{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);font-size:var(--size,4rem);line-height:1;filter:drop-shadow(0 8px 8px rgba(25,34,70,.18));transition:opacity .25s,transform .4s;will-change:transform,opacity}.story-object.reveal{opacity:0;transform:translate(-50%,-50%) scale(.4)}.story-stage.is-activated .story-object.reveal{opacity:1;transform:translate(-50%,-50%) scale(1)}
.story-stage.is-activated .motion-fly{animation:story-fly 1.8s ease-in-out both}.story-stage.is-activated .motion-sail{animation:story-sail 2.4s ease-in-out both}.story-stage.is-activated .motion-walk{animation:story-walk 1.8s ease-in-out both}.story-stage.is-activated .motion-bounce{animation:story-bounce .85s ease-in-out 2}.story-stage.is-activated .motion-shine{animation:story-shine 1s ease-in-out 2}.story-stage.is-activated .motion-shake{animation:story-shake .45s ease-in-out 3}.story-stage.is-activated .motion-rise{animation:story-rise 1.6s ease-out both}
@keyframes story-fly{0%{transform:translate(-50%,35%) rotate(-8deg) scale(.85)}100%{transform:translate(45%,-115%) rotate(6deg) scale(1.05)}}@keyframes story-sail{0%{transform:translate(-95%,-50%) rotate(-3deg)}100%{transform:translate(20%,-55%) rotate(2deg)}}@keyframes story-walk{0%{transform:translate(-90%,-50%)}50%{transform:translate(-20%,-60%) rotate(-4deg)}100%{transform:translate(30%,-50%)}}@keyframes story-bounce{50%{transform:translate(-50%,-75%) scale(1.06)}}@keyframes story-shine{50%{filter:drop-shadow(0 0 24px #fff7a1);transform:translate(-50%,-50%) scale(1.16)}}@keyframes story-shake{25%{transform:translate(-56%,-50%) rotate(-4deg)}75%{transform:translate(-44%,-50%) rotate(4deg)}}@keyframes story-rise{0%{transform:translate(-50%,70%) scale(.7);opacity:.1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.story-scene-caption{display:flex;align-items:center;gap:.5rem;margin:.55rem .3rem 0;color:#526078;font-size:.9rem}.story-scene-caption:before{content:"👀"}
.story-panel{display:flex;min-width:0;flex-direction:column;border-radius:20px;background:#f8faff;padding:clamp(.85rem,2.5vw,1.25rem)}.story-progress-row{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.story-progress{flex:1;height:10px;border-radius:999px;background:#e4e8f7;overflow:hidden}.story-progress span{display:block;height:100%;background:linear-gradient(90deg,#6d4ce7,#ec4899);transition:width .25s}.story-step-count{color:#536078;font-size:.82rem;font-weight:900;white-space:nowrap}
.story-chapter{margin:1rem 0 .25rem;color:var(--story-purple);font-size:.82rem;font-weight:950;text-transform:uppercase;letter-spacing:.05em}.story-sentence{margin:.25rem 0;color:var(--story-ink);font-size:clamp(1.15rem,2.6vw,1.5rem);font-weight:700;line-height:1.65}.story-word-action{display:inline-flex;min-height:44px;align-items:center;border:0;border-radius:10px;background:#fff0a8;color:#512184;padding:.14rem .3rem;box-shadow:inset 0 -3px 0 #f0c84b;font:inherit;font-weight:950;cursor:pointer;text-decoration:none;vertical-align:middle}.story-word-action:hover,.story-word-action:focus-visible{background:#ffe379}.story-word-action.is-used{background:#dcfce7;color:#075f46;box-shadow:inset 0 -3px 0 #62c899}.story-instruction{margin:.7rem 0;border-left:4px solid #8b5cf6;border-radius:0 12px 12px 0;background:#f0edff;color:#514873;padding:.6rem .7rem;font-size:.9rem}.story-instruction strong{color:#452196}
.story-controls{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:auto;padding-top:1rem}.story-button{min-height:46px;border:1px solid #d9dff2;border-radius:13px;background:#fff;color:#3b4966;padding:.58rem .78rem;font-weight:900;cursor:pointer}.story-button:hover{background:#eef2ff}.story-button--primary{border-color:transparent;background:linear-gradient(135deg,#6d4ce7,#d9468b);color:#fff;box-shadow:0 7px 17px rgba(109,76,231,.25)}.story-button[hidden]{display:none}.story-button:disabled{cursor:not-allowed;opacity:.48}
.story-choices{display:grid;gap:.55rem;margin-top:.8rem}.story-choice{min-height:52px;border:2px solid #dcdff7;border-radius:14px;background:#fff;color:#394562;padding:.65rem;text-align:left;font-weight:900;cursor:pointer}.story-choice:hover{border-color:#8b70e9;background:#f4f1ff}
.story-celebration{margin-top:.8rem;border-radius:16px;background:#ecfdf5;color:#096348;padding:.8rem;font-weight:850}.story-quiz{margin-top:1rem;padding:clamp(1rem,3vw,1.5rem)}.story-quiz h2{margin:.1rem 0;color:#26345a}.story-quiz>p{color:var(--story-muted)}.story-quiz-question{border-radius:18px;background:#f8faff;padding:1rem}.story-quiz-question h3{margin:.1rem 0 .7rem;color:#2b385c}.story-quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.story-quiz-option{min-height:52px;border:2px solid #dce2f5;border-radius:13px;background:#fff;color:#3d4964;padding:.6rem;text-align:left;font-weight:850;cursor:pointer}.story-quiz-option.is-correct{border-color:#15956b;background:#e9fbf4;color:#075f46}.story-quiz-option.is-wrong{border-color:#d84e65;background:#fff0f2;color:#a61d34}.story-quiz-feedback{min-height:2rem;margin:.65rem 0;color:#46536b;font-weight:750}.story-quiz-result{text-align:center;border-radius:18px;background:linear-gradient(145deg,#f0edff,#fff0f7);padding:1.1rem}.story-quiz-result h3{margin:.2rem;color:#492692}
@media(max-width:850px){.story-reader{grid-template-columns:1fr}.story-stage{min-height:min(62vw,460px)}.story-panel{min-height:330px}}@media(max-width:520px){.story-app{width:min(calc(100% - 14px),1120px)}.story-reader{padding:.55rem}.story-stage{min-height:270px}.story-panel{padding:.75rem}.story-quiz-options{grid-template-columns:1fr}.story-controls .story-button{flex:1 1 42%}.story-sentence{font-size:1.08rem}.story-method span{font-size:.78rem}}
@media(prefers-reduced-motion:reduce){.story-object,.story-progress span{transition:none!important}.story-stage.is-activated .story-object{animation:none!important}.story-stage.is-activated .story-object.reveal{opacity:1;transform:translate(-50%,-50%)}}