.app-shell{width:100%;min-height:100vh}.hero{position:relative;min-height:100vh;overflow:hidden;display:grid;place-items:end start;padding:clamp(1.5rem,4vw,3.5rem);color:var(--ink)}.hero-photo{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;animation:sky-drift 14s ease-in-out infinite alternate}.hero-veil{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#cfe9f826,#fff3 35%,#ffffffe0 68%,#fff)}.hero-content{position:relative;z-index:1;max-width:34rem;animation:rise-in .9s cubic-bezier(.22,1,.36,1) .15s both}.brand{margin:0 0 .35rem;font-family:var(--font-display);font-size:clamp(2.6rem,8vw,4.4rem);font-weight:700;line-height:.95;letter-spacing:-.03em;color:#1a3a52}.hero-title{margin:0 0 .85rem;font-family:var(--font-display);font-size:clamp(1.55rem,4.5vw,2.15rem);font-weight:600;color:#2a6f9c}.hero-lead{margin:0 0 1.5rem;max-width:28rem;font-size:1.05rem;line-height:1.65;color:#3d6480}.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}.page{width:min(960px,calc(100% - 2rem));margin:0 auto;padding:4.75rem 0 4rem;animation:page-fade .45s ease both}.page.narrow{width:min(640px,calc(100% - 2rem))}.page-header h1{margin:.35rem 0 .5rem;font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.4rem);line-height:1.15;color:var(--ink)}.page-header p{margin:0;color:var(--muted);line-height:1.6}.eyebrow{margin:0;font-size:.85rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.soft-en{display:block;margin-top:.2rem;font-size:.55em;font-weight:500;color:var(--muted)}.link-btn{border:0;padding:0;margin-bottom:1rem;background:transparent;color:var(--leaf);font:inherit;font-weight:700;cursor:pointer}.link-btn:hover{color:var(--ink)}.back-nav{position:fixed;top:0;left:50%;z-index:50;display:flex;align-items:center;width:min(960px,calc(100% - 2rem));margin:0;padding:max(.55rem,env(safe-area-inset-top,0px)) .75rem .55rem;min-height:3.25rem;border:0;border-radius:0 0 .95rem .95rem;background:#f7fbfef5;box-shadow:0 8px 20px #1a3a5214;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--leaf);font:inherit;font-size:1.08rem;font-weight:800;line-height:1.2;letter-spacing:.01em;text-align:left;cursor:pointer;transform:translate(-50%);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.page.narrow .back-nav{width:min(640px,calc(100% - 2rem))}.back-nav:hover,.back-nav:focus-visible{color:var(--ink);outline:none}.back-nav:active{filter:brightness(.97)}.back-nav:before{content:"←";display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.55rem;height:2.55rem;margin-right:.5rem;border-radius:999px;background:#6bb3dc47;color:var(--leaf);font-size:1.2rem;font-weight:800}.btn{border:0;border-radius:.85rem;padding:.85rem 1.25rem;font:inherit;font-weight:700;cursor:pointer;transition:transform .18s ease,background-color .18s ease,color .18s ease}.btn:hover:not(:disabled){transform:translateY(-2px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--leaf);color:#f7fbfe}.btn-primary:hover:not(:disabled){background:#2a6f9c}.btn-secondary{background:#1a3a521a;color:var(--ink)}.btn-quiet{background:#ffffffb3;color:var(--ink);border:1px solid rgba(26,58,82,.15)}.unit-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1rem}.unit-card{width:100%;display:grid;gap:0;text-align:left;border:1px solid rgba(26,58,82,.1);border-radius:1.15rem;padding:0;overflow:hidden;background:#fff;border-left:5px solid var(--unit-accent, var(--leaf));cursor:pointer;font:inherit;color:inherit;transition:transform .18s ease,background-color .18s ease}.unit-card:hover{transform:translateY(-3px)}.unit-cover{width:100%;aspect-ratio:16 / 9;object-fit:cover;background:#eaf5fc}.unit-body{display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:center;padding:.95rem 1.1rem 1.1rem}.unit-hero-cover{width:100%;margin:1rem 0 .35rem;border-radius:1.1rem;aspect-ratio:16 / 9;object-fit:cover;border:1px solid rgba(26,58,82,.08)}.unit-index{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--unit-accent, var(--leaf))}.unit-copy{display:grid;gap:.2rem}.unit-title{display:flex;flex-wrap:wrap;gap:.45rem;align-items:baseline;font-weight:800;font-size:1.1rem}.unit-title-zh{font-weight:600;color:var(--muted);font-size:.95rem}.unit-blurb{color:var(--muted);font-size:.95rem}.unit-go{font-weight:700;color:var(--leaf)}.lesson-grid{display:grid;gap:2rem;margin-top:2.25rem}@media (min-width: 860px){.lesson-grid{grid-template-columns:1.15fr .85fr;align-items:start}}.content-block h2{margin:0 0 1rem;font-family:var(--font-display);font-size:1.35rem}.word-list,.pattern-list,.choice-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}.word-item,.pattern-item{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.95rem 0;border-bottom:1px solid rgba(26,58,82,.12)}.word-en,.pattern-en{margin:0;font-size:1.2rem;font-weight:800;color:var(--ink)}.word-zh,.pattern-zh{margin:.15rem 0 0;color:var(--muted)}.word-tip{margin:.35rem 0 0;font-size:.9rem;color:#5a7a90}.pattern-item{display:block}.pattern-item.has-media{display:grid;grid-template-columns:5.5rem 1fr;gap:.85rem;align-items:center}.pattern-image{width:5.5rem;height:4.1rem;object-fit:cover;border-radius:.7rem;border:1px solid rgba(26,58,82,.08)}.quiz-prompt-image{width:100%;max-height:180px;object-fit:cover;border-radius:1rem;margin:.75rem 0 1rem;border:1px solid rgba(26,58,82,.08)}.choice-btn.has-pic{display:grid;grid-template-columns:3.4rem 1fr;gap:.75rem;align-items:center}.choice-btn.has-pic img{width:3.4rem;height:2.55rem;object-fit:cover;border-radius:.55rem}.example-chip{margin-top:.65rem;border:0;border-radius:.7rem;padding:.55rem .8rem;background:#3b8fc41f;color:var(--ink);font:inherit;font-size:.95rem;text-align:left;cursor:pointer}.example-chip:hover{background:#3b8fc433}.flashcard{position:relative;width:100%;min-height:280px;margin-top:1.5rem;border:0;border-radius:1.4rem;padding:0;background:transparent;perspective:1000px;cursor:pointer}.flashcard.has-image{min-height:min(58vw,360px)}.flash-image{width:100%;height:100%;object-fit:cover;border-radius:1.4rem}.flash-overlay{position:absolute;left:0;right:0;bottom:0;display:grid;gap:.15rem;padding:.85rem 1rem 1rem;background:linear-gradient(180deg,transparent,rgba(26,58,82,.72));color:#fff;border-radius:0 0 1.4rem 1.4rem}.flash-overlay .flash-main,.flash-overlay .flash-hint{color:#fff}.letter-gallery{margin-top:2rem}.letter-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.letter-tile{width:100%;border:1px solid rgba(26,58,82,.1);border-radius:1rem;padding:0;overflow:hidden;background:#fff;cursor:pointer;text-align:left;font:inherit;transition:transform .18s ease}.letter-tile:hover{transform:translateY(-3px)}.letter-tile img{width:100%;aspect-ratio:4 / 3;object-fit:cover}.letter-tile-label{display:block;padding:.55rem .7rem .7rem;font-weight:800;color:var(--ink)}.word-copy{display:flex;gap:.85rem;align-items:center;min-width:0}.word-thumb{width:4.5rem;height:3.4rem;object-fit:cover;border-radius:.65rem;flex-shrink:0;border:1px solid rgba(26,58,82,.08)}.flashcard-face{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;gap:.55rem;padding:1.5rem;border-radius:1.4rem;background:#ffffffeb;border:1px solid rgba(26,58,82,.12);backface-visibility:hidden;transition:transform .45s ease;overflow:hidden}.flashcard.has-image .flashcard-front{padding:0;place-content:stretch}.flashcard-front{transform:rotateY(0)}.flashcard-back{transform:rotateY(180deg);background:linear-gradient(160deg,#e8f4fb,#f5fbff)}.flashcard.is-flipped .flashcard-front{transform:rotateY(180deg)}.flashcard.is-flipped .flashcard-back{transform:rotateY(360deg)}.flash-label{font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--leaf)}.flash-main{font-family:var(--font-display);font-size:clamp(2rem,7vw,3rem);font-weight:700;color:var(--ink)}.flash-hint{color:var(--muted);font-size:.95rem}.flash-toolbar{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}.done-banner{margin-top:1.5rem;padding:1.1rem 1.2rem;border-radius:1rem;background:#3b8fc41f}.done-banner p{margin:0 0 .85rem;font-weight:700}.quiz-panel,.score-panel{margin-top:1.5rem;padding:1.35rem;border-radius:1.25rem;background:#ffffffbf;border:1px solid rgba(26,58,82,.1)}.quiz-prompt-zh{margin:0;color:var(--muted)}.quiz-prompt{margin:.45rem 0 1.2rem;font-family:var(--font-display);font-size:clamp(1.4rem,4vw,1.9rem);font-weight:700}.choice-btn{width:100%;text-align:left;border:1px solid rgba(26,58,82,.14);border-radius:.9rem;padding:.95rem 1rem;background:#fff;color:var(--ink);font:inherit;font-weight:700;cursor:pointer;transition:transform .15s ease,background-color .15s ease,border-color .15s ease}.choice-btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--leaf)}.choice-btn.is-correct{background:#dff0fa;border-color:var(--leaf)}.choice-btn.is-wrong{background:#fde8e4;border-color:#c45c3a}.feedback{margin-top:1rem;display:grid;gap:.85rem}.feedback p{margin:0;font-weight:700}.feedback.ok p{color:#2a6f9c}.feedback.nope p{color:#a14a32}.score-number{margin:0 0 .5rem;font-family:var(--font-display);font-size:4rem;line-height:1;font-weight:700;color:var(--leaf)}.score-number span{font-size:.45em;color:var(--muted)}.score-note{margin:0 0 1.2rem;color:var(--muted);line-height:1.6}.star-row{display:flex;align-items:center;gap:.35rem;margin:.85rem 0 0}.star-row.compact{margin:.55rem 0 0}.star-caption{margin-left:.35rem;font-size:.9rem;color:var(--muted);font-weight:600}.star{width:1.05rem;height:1.05rem;display:inline-block;background:#1a3a5226;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.star.is-on{background:#4aa3d8;animation:star-pop .45s cubic-bezier(.22,1,.36,1) both}.listen-big{position:relative;width:100%;margin:1rem 0 1.2rem;border:0;border-radius:1.1rem;padding:1.35rem 1rem;background:linear-gradient(160deg,#3b8fc4,#6eb4de);color:#f7fbfe;font:inherit;font-size:1.15rem;font-weight:800;cursor:pointer;overflow:hidden;transition:transform .18s ease}.listen-big:hover{transform:translateY(-2px)}.listen-wave{position:absolute;inset:50% auto auto 1.1rem;width:1.4rem;height:1.4rem;margin-top:-.7rem;border-radius:50%;border:2px solid rgba(244,255,248,.75);animation:pulse-ring 1.6s ease-out infinite}.quiz-panel.is-burst,.listen-panel.is-burst{animation:panel-burst .55s ease}@keyframes rise-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes page-fade{0%{opacity:0}to{opacity:1}}@keyframes hills-rise{0%{transform:translateY(40px);opacity:.4}to{transform:translateY(0);opacity:1}}@keyframes leaf-float{0%,to{transform:translateY(0) rotate(var(--leaf-rot, -20deg))}50%{transform:translateY(-12px) rotate(calc(var(--leaf-rot, -20deg) + 8deg))}}@keyframes sky-drift{0%{filter:saturate(1)}to{filter:saturate(1.08) brightness(1.03)}}@keyframes star-pop{0%{transform:scale(.6);opacity:.4}to{transform:scale(1);opacity:1}}@keyframes pulse-ring{0%{transform:scale(.7);opacity:.9}to{transform:scale(1.8);opacity:0}}@keyframes panel-burst{0%{box-shadow:inset 0 0 #3b8fc400}40%{box-shadow:inset 0 0 0 4px #3b8fc447}to{box-shadow:inset 0 0 #3b8fc400}}.character-grid{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1rem}.character-enter{animation:char-rise .85s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i, 0) * .12s)}.character-card{width:100%;display:grid;gap:.55rem;padding:.85rem;border:1px solid rgba(26,58,82,.12);border-radius:1.1rem;background:#ffffffeb;text-align:center;cursor:pointer;font:inherit;color:inherit;transition:transform .18s ease,box-shadow .18s ease;perspective:900px}.character-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 14px 28px #1a3a5224}.character-card:active{transform:scale(.97)}.character-avatar-wrap{display:block;transform-origin:center bottom;animation:avatar-bob 1.35s ease-in-out infinite;animation-delay:calc(var(--i, 0) * .12s);will-change:transform}.character-avatar-clip{display:block;border-radius:.9rem;overflow:hidden;background:#eaf5fc}.character-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#eaf5fc}.character-name{font-weight:800;font-size:1.05rem;line-height:1.2}.character-blurb{color:var(--muted);font-size:.9rem}.player-bar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin:1.25rem 0 .25rem;padding:.85rem 1rem;border-radius:1rem;background:#ffffffd9;border:1px solid rgba(26,58,82,.1)}.player-bar-enter{animation:soft-rise .7s ease both}.player-chip,.reward-chip{display:inline-flex;align-items:center;gap:.65rem;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;padding:.2rem;text-align:left}.player-avatar{width:3rem;height:3rem;border-radius:999px;object-fit:cover;background:#d9eef8;animation:avatar-bob 1.5s ease-in-out infinite}.player-avatar.placeholder{display:grid;place-items:center;font-weight:800;color:var(--leaf)}.player-sub{display:block;font-size:.82rem;color:var(--muted)}.player-rewards{display:flex;flex-wrap:wrap;gap:.5rem}.reward-chip{padding:.45rem .75rem;border-radius:999px;background:#6bb3dc29;color:var(--leaf-deep);font-weight:700;font-size:.92rem}.reward-icon{display:inline-block;animation:flower-bounce 1.2s ease-in-out infinite}.reward-wiggle{animation:chip-wiggle 2.2s ease-in-out infinite}.reward-wiggle.delay{animation-delay:.35s}.btn-pulse{animation:cta-pulse 1.4s ease-in-out infinite;transition:background-color .18s ease,color .18s ease;will-change:transform,box-shadow}.flower-earned-tag{margin-left:.35rem;color:#e091b0;font-size:1rem}.flower-summary,.sticker-toolbar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin:1.25rem 0;padding:1rem 1.1rem;border-radius:1.1rem;background:#ffffffe6;border:1px solid rgba(26,58,82,.1)}.flower-big{font-size:2.8rem;color:#e091b0;line-height:1}.flower-sway{display:inline-block;animation:flower-sway 2.4s ease-in-out infinite}.flower-enter{animation:soft-rise .45s ease both;animation-delay:calc(var(--i, 0) * 40ms)}.flower-bounce{display:inline-block;animation:flower-bounce 1.8s ease-in-out infinite}.flower-count{margin:0;font-weight:800;font-size:1.15rem}.flower-hint,.sticker-tip{margin:.25rem 0 .75rem;color:var(--muted)}.flower-album{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}.flower-slot{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;padding:.75rem .9rem;border-radius:.9rem;background:#ffffffbf;border:1px solid rgba(26,58,82,.08);opacity:.72}.flower-slot.is-earned{opacity:1;background:#fff0f6f2;border-color:#e091b059}.flower-icon{font-size:1.4rem;color:#e091b0}.flower-label{font-weight:700}.flower-status{font-size:.85rem;color:var(--muted)}.reward-banner{margin:.75rem 0;padding:.7rem .9rem;border-radius:.85rem;background:#e091b02e;color:#8a3d5c;font-weight:700}.pop-in{animation:pop-in .5s cubic-bezier(.22,1,.36,1) both}.score-enter{animation:soft-rise .45s ease both}.score-panel.has-celebration{position:relative}.celebration-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:grid;place-items:center;padding:1.5rem;background:#1a3a528c;animation:overlay-fade .35s ease both;pointer-events:none}.celebration-card{position:relative;width:min(340px,92vw);padding:1.4rem 1.1rem 1.2rem;border-radius:1.35rem;text-align:center;background:linear-gradient(180deg,#fff7fb,#eaf5fc);border:2px solid rgba(224,145,176,.55);box-shadow:0 18px 40px #1a3a5240;animation:pop-in .55s cubic-bezier(.22,1,.36,1) both;overflow:hidden}.celebration-burst{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.celebration-spark{position:absolute;left:50%;top:48%;color:#e091b0;font-size:1.7rem;opacity:0;animation:spark-fly 1.5s ease-out both;animation-delay:calc(var(--i, 0) * 40ms);--angle: calc(var(--i, 0) * 22.5deg)}.celebration-sticker .celebration-spark{color:#3b8fc4}.celebration-emoji{position:relative;margin:0;font-size:3.4rem;line-height:1;animation:flower-bounce .9s ease both}.celebration-title{position:relative;margin:.45rem 0 .2rem;font-weight:800;font-size:1.45rem;color:var(--ink)}.celebration-sub{position:relative;margin:0;color:var(--muted);font-size:1.02rem}.sticker-grid{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.85rem}.sticker-enter{animation:soft-rise .4s ease both;animation-delay:calc(var(--i, 0) * 28ms)}.sticker-card{width:100%;display:grid;gap:.4rem;padding:.55rem;border:1px solid rgba(26,58,82,.1);border-radius:.95rem;background:#fff;cursor:pointer;font:inherit;color:inherit;transition:transform .18s ease,box-shadow .18s ease;perspective:900px}.sticker-card:hover{transform:translateY(-2px)}.sticker-card.is-locked .sticker-silhouette{animation:silhouette-pulse 1.4s ease-in-out infinite}.sticker-card.is-revealing{animation:sticker-reveal 1.05s cubic-bezier(.22,1,.36,1) both;z-index:2}.sticker-frame{display:grid;place-items:center;aspect-ratio:1;border-radius:.75rem;overflow:hidden;background:#eef6fb}.sticker-frame img{width:100%;height:100%;object-fit:cover}.sticker-card.is-locked .sticker-frame{background:linear-gradient(160deg,#d7e3ec,#c5d4e0)}.sticker-silhouette{font-size:2.4rem;opacity:.55;filter:grayscale(1)}.sticker-caption{font-size:.82rem;font-weight:700;text-align:center;color:var(--muted)}.sticker-card.is-unlocked .sticker-caption{color:var(--ink)}.sticker-preview{margin:.5rem 0 1rem;padding:.85rem;border-radius:1rem;background:#fffffff2;border:1px solid rgba(26,58,82,.1);text-align:center}.sticker-preview.is-revealing img{animation:sticker-flip-in .85s cubic-bezier(.22,1,.36,1) both}.sticker-preview img{width:min(220px,70%);margin:0 auto .65rem;border-radius:1rem}@keyframes char-rise{0%{opacity:0;transform:translateY(36px) scale(.82)}70%{opacity:1;transform:translateY(-8px) scale(1.04)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes soft-rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes avatar-bob{0%,to{transform:translateY(0) rotate(-3deg) scale(1)}50%{transform:translateY(-18px) rotate(3deg) scale(1.04)}}@keyframes flower-sway{0%,to{transform:rotate(-14deg) scale(1)}50%{transform:rotate(14deg) scale(1.14)}}@keyframes flower-bounce{0%,to{transform:translateY(0) scale(1)}40%{transform:translateY(-10px) scale(1.22)}70%{transform:translateY(0) scale(.96)}}@keyframes chip-wiggle{0%,to{transform:translateY(0)}30%{transform:translateY(-4px) rotate(-2deg)}60%{transform:translateY(-2px) rotate(2deg)}}@keyframes cta-pulse{0%,to{transform:scale(1);box-shadow:0 0 #3b8fc473}50%{transform:scale(1.05);box-shadow:0 0 0 12px #3b8fc400}}@keyframes overlay-fade{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:scale(.7)}65%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes spark-fly{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(0) scale(.4)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-130px) scale(1.45)}}@keyframes silhouette-pulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}@keyframes sticker-reveal{0%{transform:scale(.75) rotate(-8deg);filter:brightness(.25) saturate(0)}45%{transform:scale(1.18) rotate(4deg);filter:brightness(1.15) saturate(1.2)}to{transform:scale(1) rotate(0);filter:brightness(1) saturate(1)}}@keyframes sticker-flip-in{0%{opacity:.15;transform:scale(.6) rotate(-12deg);filter:brightness(.15)}to{opacity:1;transform:scale(1) rotate(0);filter:brightness(1)}}@media (prefers-reduced-motion: reduce){.character-avatar-wrap,.flower-sway,.flower-bounce,.player-avatar,.reward-icon,.reward-wiggle,.btn-pulse,.sticker-card.is-locked .sticker-silhouette{animation-duration:2.8s!important}}.story-stage{position:relative;min-height:100vh;padding:1rem 1rem 1.75rem;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:.85rem;color:var(--ink);background:radial-gradient(circle at 12% 10%,rgba(186,224,245,.65),transparent 28%),radial-gradient(circle at 88% 8%,rgba(255,224,234,.5),transparent 26%),linear-gradient(180deg,#e7f5fc,#f7fbfe 55%,#fff)}.story-stage:not(.mood-home){background:radial-gradient(circle at 14% 12%,color-mix(in srgb,var(--story-accent, #7ec8e8) 38%,white),transparent 30%),radial-gradient(circle at 86% 8%,rgba(255,214,170,.35),transparent 28%),linear-gradient(180deg,#e8f6fc,#fff8ef 52%,#fff)}.story-stage.mood-toys,.story-stage.mood-ball,.story-stage.mood-sun,.story-stage.mood-cake,.story-stage.mood-one,.story-stage.mood-three,.story-stage.mood-five,.story-stage.mood-ten{background:radial-gradient(circle at 18% 12%,rgba(255,214,170,.55),transparent 30%),radial-gradient(circle at 84% 10%,rgba(186,236,210,.45),transparent 28%),linear-gradient(180deg,#eaf7ff,#fff8ef 55%,#fff)}.story-stage.mood-draw,.story-stage.mood-red,.story-stage.mood-yellow,.story-stage.mood-pink,.story-stage.mood-mix,.story-stage.mood-mom,.story-stage.mood-happy,.story-stage.mood-friends,.story-stage.mood-cake{background:radial-gradient(circle at 16% 12%,rgba(255,190,210,.45),transparent 28%),radial-gradient(circle at 82% 10%,rgba(190,210,255,.5),transparent 30%),linear-gradient(180deg,#eaf0ff,#fff2f7 55%,#fff)}.story-stage.mood-blue,.story-stage.mood-green,.story-stage.mood-water,.story-stage.mood-rain,.story-stage.mood-night,.story-stage.mood-tired,.story-stage.mood-sad,.story-stage.mood-scared{background:radial-gradient(circle at 14% 12%,rgba(126,200,232,.5),transparent 30%),radial-gradient(circle at 86% 8%,rgba(186,224,245,.45),transparent 28%),linear-gradient(180deg,#e0f2fb,#f4f9fd 55%,#fff)}.story-unit-list{margin-top:.35rem}.story-top{display:grid;gap:.55rem}.story-meta h1{margin:0;font-family:var(--font-display);font-size:clamp(1.7rem,5vw,2.3rem);line-height:1.15}.story-meta p{margin:.2rem 0 0;color:var(--muted)}.story-frame{position:relative;width:min(920px,100%);margin:0 auto;border-radius:1.4rem;overflow:hidden;background:#d9eef8;box-shadow:0 18px 40px #1a3a5229;aspect-ratio:16 / 10;max-height:min(58vh,520px)}.story-scene{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}.story-scene.peter-active{transform:translate(2.2%) scale(1.03);transform-origin:28% 55%}.story-scene.pixie-active{transform:translate(-2.2%) scale(1.03);transform-origin:72% 55%}.story-scene-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:0;transition:opacity .7s ease}.story-scene-img.is-shown{opacity:1}.story-action-glow{position:absolute;bottom:18%;width:28%;height:42%;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .55s ease}.peter-glow{left:10%;background:radial-gradient(circle,rgba(59,143,196,.22),transparent 72%)}.pixie-glow{right:8%;background:radial-gradient(circle,rgba(224,145,176,.24),transparent 72%)}.story-stage.speaker-peter .peter-glow,.story-stage.speaker-pixie .pixie-glow{opacity:1}.story-talk-badge{position:absolute;top:11%;width:1.15rem;height:1.15rem;border-radius:50% 50% 50% .12rem;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;box-shadow:0 4px 10px #1a3a5224}.peter-badge{left:22%;background:#3b8fc4}.pixie-badge{right:18%;background:#e091b0}.story-stage.speaker-peter .peter-badge,.story-stage.speaker-pixie .pixie-badge{opacity:1;transform:translateY(0);animation:story-badge-float 2.4s ease-in-out infinite}.story-memory{position:absolute;top:8%;right:4%;width:min(42%,280px);border-radius:1rem;overflow:hidden;border:3px solid #fff;box-shadow:0 14px 28px #1a3a5238;background:#fff;z-index:2;animation:story-memory-bounce .7s cubic-bezier(.22,1.45,.36,1) both}.story-memory img{width:100%;aspect-ratio:16 / 10;object-fit:cover;display:block}.story-memory-label{margin:0;padding:.35rem .55rem;font-size:.78rem;font-weight:800;letter-spacing:.03em;color:#fff;background:linear-gradient(90deg,#3b8fc4,#6bcb77)}.story-memory.memory-draw .story-memory-label{background:linear-gradient(90deg,#e091b0,#c77dff)}.story-caption{position:absolute;left:3%;right:3%;bottom:3%;z-index:3;min-height:5.8rem;padding:.85rem 1rem .95rem;border-radius:1.05rem;background:#fffffff0;border:2px solid rgba(59,143,196,.25);box-shadow:0 10px 24px #1a3a5224;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:story-caption-in .45s ease both}.story-caption.speaker-pixie{border-color:#e091b073}.story-who{margin:0 0 .25rem;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--leaf-deep)}.story-caption.speaker-pixie .story-who{color:#8a3d5c}.story-en{margin:0;min-height:2.2rem;font-family:var(--font-display);font-size:clamp(1.1rem,3.2vw,1.55rem);line-height:1.35;font-weight:700}.story-zh{margin:.35rem 0 0;color:var(--muted);opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}.story-zh.is-shown{opacity:1;transform:translateY(0)}.story-caret{display:inline-block;margin-left:1px;color:var(--leaf);animation:story-blink .9s step-end infinite}.story-caret.is-hidden{opacity:0;animation:none}.story-controls{width:min(920px,100%);margin:0 auto;display:grid;gap:.55rem}.story-progress{height:.45rem;border-radius:999px;background:#1a3a521a;overflow:hidden}.story-progress-bar{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--story-accent, var(--leaf)),#7ec8e8);transition:width .25s ease}.story-hint{margin:0;color:var(--muted);font-size:.88rem}.story-scene.cartoon-hop.peter-active{animation:story-hop-peter .55s cubic-bezier(.22,1.4,.36,1) both}.story-scene.cartoon-hop.pixie-active{animation:story-hop-pixie .55s cubic-bezier(.22,1.4,.36,1) both}.story-doodles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1}.story-doodle,.doodle{position:absolute;width:.7rem;height:.7rem;border-radius:50%;opacity:.75;animation:story-doodle-float 2.8s ease-in-out infinite}.doodle.d1{top:16%;left:12%;background:#ffd93d}.doodle.d2{top:22%;right:14%;background:#ff6b9d;animation-delay:.4s;border-radius:.15rem;transform:rotate(18deg)}.doodle.d3{bottom:34%;left:46%;background:#6bcb77;animation-delay:.8s;width:.55rem;height:.55rem}.story-stage.mood-toys .doodle.d1{background:#ffb347}.story-stage.mood-draw .doodle.d2{background:#c77dff}.story-memory{animation:story-memory-bounce .7s cubic-bezier(.22,1.45,.36,1) both}.story-vocab-prompt{display:grid;gap:.75rem;justify-items:center;margin:1rem 0 1.25rem}.story-vocab-prompt img{width:min(260px,80%);aspect-ratio:1;object-fit:cover;border-radius:1.2rem;border:3px solid rgba(255,255,255,.95);box-shadow:0 12px 28px #1a3a5224}.story-vocab-card{margin-bottom:.5rem}@keyframes story-hop-peter{0%{transform:translate(0) scale(1)}55%{transform:translate(2.4%) scale(1.05) translateY(-1.2%)}to{transform:translate(2.2%) scale(1.03)}}@keyframes story-hop-pixie{0%{transform:translate(0) scale(1)}55%{transform:translate(-2.4%) scale(1.05) translateY(-1.2%)}to{transform:translate(-2.2%) scale(1.03)}}@keyframes story-doodle-float{0%,to{transform:translateY(0) rotate(0);opacity:.55}50%{transform:translateY(-10px) rotate(12deg);opacity:1}}@keyframes story-memory-bounce{0%{opacity:0;transform:translate(24px) scale(.82)}70%{opacity:1;transform:translate(-4px) scale(1.04)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes story-badge-float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes story-memory-in{0%{opacity:0;transform:translate(18px)}to{opacity:1;transform:translate(0)}}@keyframes story-caption-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes story-blink{0%,to{opacity:1}50%{opacity:0}}@media (max-width: 640px){.hero{place-items:end stretch}.word-item{flex-direction:column;align-items:flex-start}.unit-body{grid-template-columns:auto 1fr}.unit-go{display:none}.player-bar{align-items:flex-start}.story-frame{aspect-ratio:4 / 5;max-height:min(62vh,560px)}.story-memory{top:6%;right:3%;width:min(58%,210px)}.story-caption{min-height:6.4rem;padding:.75rem .85rem}.story-en{font-size:1.08rem}}:root{--font-display: "Fraunces", "Palatino Linotype", Palatino, serif;--font-body: "Nunito", "Segoe UI", sans-serif;--ink: #1a3a52;--muted: #5a7a90;--leaf: #3b8fc4;--leaf-deep: #2a6f9c;--sun: #7ec8e8;--snow: #ffffff;--page-bg: radial-gradient(circle at 14% 12%, rgba(186, 224, 245, .7), transparent 30%), radial-gradient(circle at 86% 8%, rgba(214, 236, 250, .8), transparent 28%), linear-gradient(180deg, #eaf5fc 0%, #f7fbfe 45%, #ffffff 100%);font-family:var(--font-body);line-height:1.5;font-weight:500;color:var(--ink);background:var(--page-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;min-width:320px}button,input,textarea{font:inherit}img{max-width:100%;display:block}