:root{--sky:#8ecae6;--sky-deep:#4fa3c7;--leaf:#5bb87a;--leaf-deep:#3d9a5f;--sun:#f5c842;--coral:#ff8a65;--ink:#243b32;--ink-soft:#4a6b5c;--paper:#eef7f1;--paper-line:#3d9a5f14;--white:#fff;--shadow:0 12px 32px #243b321f;--radius:24px;--font-display:"Baloo 2", system-ui, sans-serif;--font-body:"Nunito", system-ui, sans-serif}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100vh;font-family:var(--font-body);color:var(--ink);background-color:#0000;background-image:radial-gradient(80% 50% at 10% -10%,#f5c84247,#0000),radial-gradient(60% 40% at 90% 0,#8ecae659,#0000),linear-gradient(#e8f6ee 0%,#f3faf6 40%,#eaf4fb 100%);background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;margin:0}body:before{content:"";pointer-events:none;z-index:0;background-image:linear-gradient(var(--paper-line) 1px, transparent 1px), linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);opacity:.7;background-size:28px 28px;position:fixed;inset:0}#root{z-index:1;min-height:100vh;position:relative}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}img{max-width:100%}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:.01em;margin:0;font-weight:700}p{margin:0}.app-shell{flex-direction:column;min-height:100vh;display:flex}.topnav{z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#eef7f1d1;border-bottom:2px solid #5bb87a26;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1.25rem;display:flex;position:sticky;top:0}.brand-lockup{align-items:center;gap:.65rem;display:flex}.brand-mark{background:linear-gradient(145deg, var(--leaf), var(--leaf-deep));border-radius:14px;place-items:center;width:42px;height:42px;font-size:1.35rem;animation:3s ease-in-out infinite bob;display:grid;box-shadow:0 6px 16px #3d9a5f59}.brand-text{flex-direction:column;line-height:1.1;display:flex}.brand-text strong{font-family:var(--font-display);color:var(--leaf-deep);font-size:1.25rem}.brand-text span{color:var(--ink-soft);font-size:.72rem;font-weight:700}.nav-links{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.35rem;display:flex}.nav-links a{color:var(--ink-soft);border-radius:999px;padding:.45rem .85rem;font-size:.9rem;font-weight:700;transition:background .2s,color .2s,transform .2s}.nav-links a:hover,.nav-links a.active{background:var(--white);color:var(--leaf-deep);transform:translateY(-1px);box-shadow:0 4px 12px #243b3214}.star-pill{color:#9a6b00;background:linear-gradient(135deg,#fff6d6,#ffe8a3);border-radius:999px;align-items:center;gap:.35rem;padding:.4rem .75rem;font-size:.9rem;font-weight:800;display:inline-flex}.page{flex:1;width:min(1100px,100% - 2rem);margin:0 auto;padding:1.5rem 0 3.5rem}.hero{background:linear-gradient(#0000 35%,#243b328c 100%),linear-gradient(135deg,#7ec8a3 0%,#5bb87a 35%,#4fa3c7 100%);border-radius:0 0 40px 40px;align-items:end;min-height:min(92vh,780px);margin:-.5rem -1rem 2rem;padding:2rem 1.5rem 3rem;display:grid;position:relative;overflow:hidden}.hero-sky{pointer-events:none;position:absolute;inset:0;overflow:hidden}.cloud{filter:blur(.5px);background:#ffffff8c;border-radius:999px;animation:22s linear infinite drift;position:absolute}.cloud:before,.cloud:after{content:"";background:inherit;border-radius:50%;position:absolute}.cloud-1{width:120px;height:40px;top:12%;left:-10%}.cloud-1:before{width:50px;height:50px;top:-28px;left:18px}.cloud-1:after{width:70px;height:70px;top:-40px;left:48px}.cloud-2{width:160px;height:48px;animation-duration:28s;animation-delay:-8s;top:22%;left:40%}.cloud-2:before{width:60px;height:60px;top:-32px;left:24px}.cloud-2:after{width:80px;height:80px;top:-44px;left:60px}.cloud-3{width:100px;height:36px;animation-duration:18s;animation-delay:-4s;top:8%;left:auto;right:-5%}.cloud-3:before{width:44px;height:44px;top:-24px;left:14px}.cloud-3:after{width:58px;height:58px;top:-32px;left:40px}.sun-orb{background:radial-gradient(circle at 35% 35%, #ffe9a0, var(--sun) 55%, #e8a820);border-radius:50%;width:88px;height:88px;animation:4s ease-in-out infinite pulse-soft;position:absolute;top:8%;right:12%;box-shadow:0 0 0 12px #f5c84240,0 0 40px #f5c84273}.hero-hill{opacity:.9;background:linear-gradient(#6bc98a,#3d9a5f);border-radius:50% 50% 0 0/100% 100% 0 0;height:38%;position:absolute;bottom:-20px;left:-5%;right:-5%}.hero-tree{filter:drop-shadow(0 8px 12px #00000026);font-size:4rem;animation:5s ease-in-out infinite sway;position:absolute;bottom:18%}.hero-tree.t1{animation-delay:0s;left:8%}.hero-tree.t2{font-size:3.2rem;animation-delay:1.2s;right:14%}.hero-tree.t3{font-size:2.4rem;animation-delay:.6s;bottom:14%;left:28%}.hero-content{z-index:2;max-width:560px;color:var(--white);position:relative}.hero-brand{font-family:var(--font-display);text-shadow:0 4px 20px #0003;margin-bottom:.75rem;font-size:clamp(2.8rem,8vw,4.2rem);line-height:.95;animation:.8s ease-out both rise-in}.hero-brand em{opacity:.92;letter-spacing:.06em;margin-top:.2rem;font-size:.42em;font-style:normal;display:block}.hero-tagline{margin-bottom:.5rem;font-size:clamp(1.05rem,2.5vw,1.25rem);font-weight:700;animation:.8s ease-out .12s both rise-in}.hero-sub{opacity:.92;max-width:36ch;margin-bottom:1.5rem;font-size:.98rem;line-height:1.5;animation:.8s ease-out .22s both rise-in}.cta-row{flex-wrap:wrap;gap:.75rem;animation:.8s ease-out .32s both rise-in;display:flex}.btn{border-radius:999px;justify-content:center;align-items:center;gap:.4rem;padding:.85rem 1.4rem;font-size:1rem;font-weight:800;transition:transform .2s,box-shadow .2s;display:inline-flex}.btn:hover{transform:translateY(-2px)scale(1.02)}.btn:active{transform:scale(.98)}.btn-primary{background:var(--sun);color:#5c4200;box-shadow:0 8px 24px #f5c84273}.btn-ghost{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff38;border:2px solid #ffffff73}.btn-solid{background:var(--leaf);color:#fff;box-shadow:0 8px 20px #5bb87a59}.btn-outline{background:var(--white);color:var(--leaf-deep);border:2px solid #5bb87a59}.section-title{color:var(--ink);margin-bottom:.35rem;font-size:clamp(1.6rem,3vw,2rem)}.section-sub{color:var(--ink-soft);margin-bottom:1.25rem;font-weight:600}.path-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;display:grid}.stage-tile{border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow);border:3px solid #0000;border-left-width:8px;flex-direction:column;gap:.5rem;padding:1.15rem 1.2rem 1.25rem;transition:transform .25s,box-shadow .25s;display:flex;position:relative;overflow:hidden}.stage-tile:hover{transform:translateY(-4px);box-shadow:0 16px 36px #243b3224}.stage-tile .order{font-family:var(--font-display);opacity:.55;font-size:.85rem;font-weight:800}.stage-tile .icon{font-size:2rem;line-height:1}.stage-tile h3{font-size:1.25rem}.stage-tile .meta{flex-wrap:wrap;gap:.4rem;font-size:.8rem;font-weight:700;display:flex}.chip{background:var(--paper);color:var(--ink-soft);border-radius:999px;padding:.2rem .55rem;display:inline-flex}.stage-tile p{color:var(--ink-soft);font-size:.88rem;line-height:1.4}.progress-bar{background:#243b3214;border-radius:999px;height:8px;margin-top:.35rem;overflow:hidden}.progress-bar>span{border-radius:inherit;background:linear-gradient(90deg, var(--leaf), var(--sun));height:100%;transition:width .4s;display:block}.tip-banner{border-radius:var(--radius);color:var(--ink-soft);background:linear-gradient(135deg,#8ecae659,#5bb87a33);border:2px dashed #4fa3c773;margin-top:1.75rem;padding:1rem 1.25rem;font-weight:700;line-height:1.45}.series-row{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.85rem;margin-top:1rem;display:grid}.series-item{background:#ffffffbf;border:2px solid #3d9a5f1f;border-radius:18px;padding:1rem}.series-item .stars{color:#d4a017;letter-spacing:1px;font-size:.85rem}.back-link{color:var(--leaf-deep);align-items:center;gap:.35rem;margin-bottom:1rem;font-weight:800;display:inline-flex}.stage-header{background:var(--white);box-shadow:var(--shadow);border-top:6px solid;border-radius:28px;gap:1rem;margin-bottom:1.5rem;padding:1.5rem;display:grid}.stage-header h1{font-size:clamp(1.8rem,4vw,2.4rem)}.lesson-list{gap:.85rem;display:grid}.lesson-card{background:var(--white);border:2px solid #0000;border-radius:20px;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:1rem 1.15rem;transition:transform .2s;display:grid;box-shadow:0 8px 24px #243b3214}.lesson-card:hover{border-color:#5bb87a59;transform:translate(4px)}.lesson-card.done{background:linear-gradient(90deg,#f0faf3,#fff)}.lesson-emoji{background:var(--paper);border-radius:18px;place-items:center;width:56px;height:56px;font-size:1.75rem;display:grid}.lesson-card h3{font-size:1.15rem}.lesson-card .desc{color:var(--ink-soft);margin-top:.2rem;font-size:.85rem}.lesson-card .tags{flex-wrap:wrap;gap:.35rem;margin-top:.4rem;display:flex}.done-badge{color:var(--leaf-deep);background:#d8f3e2;border-radius:999px;padding:.25rem .55rem;font-size:.75rem;font-weight:800}.lesson-layout{gap:1.25rem;display:grid}@media (width>=860px){.lesson-layout{grid-template-columns:1.2fr .8fr;align-items:start}}.scene-panel{background:var(--white);box-shadow:var(--shadow);border-radius:28px;flex-direction:column;min-height:360px;padding:1.5rem;display:flex}.scene-stage{background:radial-gradient(circle at 30% 20%,#f5c84240,#0000 50%),linear-gradient(160deg,#dff5e8,#d6eef8);border-radius:22px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1rem;padding:1.5rem;display:flex;position:relative;overflow:hidden}.scene-emoji{filter:drop-shadow(0 10px 16px #0000001f);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:clamp(5rem,15vw,7rem);line-height:1;transition:transform .2s;animation:.45s cubic-bezier(.34,1.56,.64,1) pop-in}.scene-emoji:hover{transform:scale(1.08)rotate(-3deg)}.scene-word{font-family:var(--font-display);color:var(--ink);font-size:clamp(2rem,5vw,2.8rem)}.scene-meaning{color:var(--ink-soft);font-size:1.05rem;font-weight:700}.scene-sentence{color:var(--leaf-deep);background:#ffffffbf;border-radius:999px;margin-top:.25rem;padding:.65rem 1rem;font-weight:800}.vocab-rail{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1rem;display:flex}.vocab-chip{background:var(--paper);border:2px solid #0000;border-radius:16px;padding:.55rem .85rem;font-weight:800;transition:all .2s}.vocab-chip.active{border-color:var(--leaf);background:#fff;transform:scale(1.05);box-shadow:0 4px 14px #5bb87a40}.side-panel{flex-direction:column;gap:1rem;display:flex}.action-card{background:var(--white);box-shadow:var(--shadow);border-radius:22px;padding:1.15rem}.action-card h3{margin-bottom:.75rem;font-size:1.15rem}.speak-btn{background:linear-gradient(135deg, var(--sky), var(--sky-deep));color:#fff;border-radius:18px;width:100%;margin-bottom:.65rem;padding:1rem;font-size:1.05rem;font-weight:800;box-shadow:0 8px 20px #4fa3c759}.repeat-hint{color:var(--ink-soft);text-align:center;font-size:.85rem;font-weight:600}.letter-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.65rem;display:grid}.letter-tile{aspect-ratio:1;background:var(--white);font-family:var(--font-display);border:3px solid #0000;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:.15rem;font-size:1.8rem;font-weight:800;transition:transform .2s,border-color .2s;display:flex;box-shadow:0 6px 16px #243b3214}.letter-tile:hover,.letter-tile.active{border-color:var(--coral);transform:scale(1.06)}.letter-tile small{font-family:var(--font-body);color:var(--ink-soft);font-size:.7rem}.quiz-shell{max-width:640px;margin:0 auto}.quiz-progress{gap:.4rem;margin-bottom:1.25rem;display:flex}.quiz-progress span{background:#243b321a;border-radius:999px;flex:1;height:10px}.quiz-progress span.on{background:linear-gradient(90deg, var(--leaf), var(--sun))}.quiz-card{background:var(--white);box-shadow:var(--shadow);text-align:center;border-radius:28px;padding:1.75rem 1.5rem}.quiz-card h2{margin-bottom:.35rem;font-size:1.5rem}.quiz-card .prompt-en{color:var(--ink-soft);margin-bottom:1rem;font-weight:700}.quiz-emoji{margin:.5rem 0 1rem;font-size:3.5rem}.listen-again{color:var(--sky-deep);background:#e8f4fb;border-radius:999px;margin:0 auto 1.25rem;padding:.75rem 1.25rem;font-weight:800}.options-grid{gap:.75rem;display:grid}.option-btn{background:var(--paper);border:3px solid #0000;border-radius:18px;justify-content:center;align-items:center;gap:.5rem;padding:1rem 1.15rem;font-size:1.1rem;font-weight:800;transition:all .2s;display:flex}.option-btn:hover:not(:disabled){border-color:var(--sky);background:#fff;transform:scale(1.02)}.option-btn.correct{border-color:var(--leaf);background:#d8f3e2}.option-btn.wrong{border-color:var(--coral);background:#ffe0d6;animation:.4s shake}.quiz-result{text-align:center;background:var(--white);box-shadow:var(--shadow);border-radius:28px;padding:2rem 1.5rem}.quiz-result .big{margin-bottom:.5rem;font-size:4rem;animation:.5s cubic-bezier(.34,1.56,.64,1) pop-in}.map-path{padding:1rem 0 2rem;position:relative}.map-step{grid-template-columns:72px 1fr;gap:1rem;margin-bottom:1.25rem;display:grid;position:relative}.map-step:before{content:"";background:repeating-linear-gradient(#3d9a5f59 0 8px,#0000 8px 14px);width:4px;position:absolute;top:72px;bottom:-1.25rem;left:35px}.map-step:last-child:before{display:none}.map-sign{color:#fff;width:72px;height:72px;font-size:1.8rem;font-family:var(--font-display);z-index:1;border-radius:20px;place-items:center;font-weight:800;display:grid;position:relative;box-shadow:0 8px 18px #0000001f}.map-body{background:var(--white);box-shadow:var(--shadow);border-left:6px solid;border-radius:22px;padding:1.1rem 1.2rem}.map-body h3{font-size:1.3rem}.map-shows{flex-wrap:wrap;gap:.45rem;margin-top:.75rem;display:flex}.show-pill{background:var(--paper);color:var(--ink-soft);border-radius:999px;padding:.35rem .7rem;font-size:.8rem;font-weight:700}.footer-note{text-align:center;color:var(--ink-soft);padding:2rem 1rem;font-size:.85rem;font-weight:600}@keyframes drift{0%{transform:translate(0)}to{transform:translate(110vw)}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes sway{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes pulse-soft{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes rise-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes pop-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@media (width<=640px){.nav-links a span.hide-sm{display:none}.hero{border-radius:0 0 28px 28px;min-height:78vh;margin-left:-1rem;margin-right:-1rem}.lesson-card{grid-template-columns:auto 1fr}.lesson-card .go{grid-column:1/-1}}