.alphabet-train-story{--sky-top:#87CEEB;--sky-bottom:#E0F4FF;--sun-color:#FFD93D;--cloud-color:#FFFFFF;--hill-back:#90EE90;--hill-front:#7CCD7C;--grass-color:#4CAF50;--train-red:#E74C3C;--train-red-dark:#C0392B;--wheel-dark:#2C3E50;--wheel-light:#7F8C8D;--track-brown:#8B4513;--track-metal:#4A4A4A;--font-display:"Fredoka","Comic Sans MS","Chalkboard",sans-serif;--font-body:"Nunito","Comic Sans MS",system-ui,sans-serif;--text-letter-hero:clamp(8rem,25vw,14rem);--text-title:clamp(2rem,6vw,4rem);--text-subtitle:clamp(1.5rem,4vw,2.5rem);--text-body:clamp(1.25rem,3vw,1.75rem);--text-phonics:clamp(1.5rem,4vw,2.25rem);--section-padding:clamp(2rem,5vw,4rem);--content-max-width:800px;--ease-bounce:cubic-bezier(0.34,1.56,0.64,1);--ease-smooth:cubic-bezier(0.4,0,0.2,1);--touch-min:56px;position:relative;width:100%;min-height:100vh;overflow-x:hidden;font-family:var(--font-body);color:#2C3E50;background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-bottom) 100%)}.progress-indicator{position:fixed;top:0;left:0;right:0;z-index:100;padding:.75rem 1rem;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.9));box-shadow:0 2px 10px rgba(0,0,0,.1);backdrop-filter:blur(10px)}.progress-label{display:flex;align-items:center;justify-content:center;gap:.75rem;max-width:400px;margin:0 auto}.progress-letter{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--train-red)}.progress-bar-container{flex:1;position:relative;height:16px}.progress-bar-bg{position:absolute;inset:0;background:#E8E8E8;border-radius:8px}.progress-bar-fill{position:absolute;top:0;left:0;bottom:0;background:linear-gradient(90deg,#FF6B6B,#4ECDC4,#FFE66D,#95E1D3,#DDA0DD);background-size:200% 100%;border-radius:8px;transition:width .5s var(--ease-smooth);animation:rainbow-shift 3s linear infinite}@keyframes rainbow-shift{0%{background-position:0 50%}to{background-position:200% 50%}}.progress-train-icon{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:1.5rem;transition:left .5s var(--ease-smooth);filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.story-background{position:fixed;inset:0;pointer-events:none;z-index:0}.sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-bottom) 70%,#E8F5E9 100%)}.background-sun{position:absolute;top:10%;right:10%;width:clamp(80px,15vw,150px);height:auto;animation:sun-pulse 4s ease-in-out infinite}@keyframes sun-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.95}}.sun-ray{transform-origin:50px 50px;animation:ray-rotate 20s linear infinite}@keyframes ray-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.cloud{position:absolute;width:clamp(100px,20vw,200px);height:auto;opacity:.9}.cloud-1{top:8%;left:5%;animation:cloud-drift 30s linear infinite}.cloud-2{top:15%;left:40%;animation:cloud-drift 35s linear infinite;animation-delay:-10s}.cloud-3{top:5%;left:70%;animation:cloud-drift 40s linear infinite;animation-delay:-20s}@keyframes cloud-drift{0%{transform:translateX(-20vw)}to{transform:translateX(120vw)}}.hills-container{right:0;height:30vh;min-height:150px;overflow:hidden}.hills,.hills-container{position:absolute;bottom:0;left:0}.hills{width:200%;height:100%}.hills-back{animation:hill-scroll 60s linear infinite;opacity:.7}.hills-front{animation:hill-scroll 40s linear infinite}@keyframes hill-scroll{0%{transform:translateX(0)}to{transform:translateX(-50%)}}.train-track{position:absolute;bottom:15%;left:-10%;right:-10%;height:30px;z-index:1}.track-rail{position:absolute;left:0;right:0;height:6px;background:var(--track-metal);border-radius:3px}.track-rail-top{top:0}.track-rail-bottom{bottom:0}.track-ties{display:flex;justify-content:space-between;position:absolute;top:-2px;left:0;right:0;bottom:-2px}.track-tie{width:12px;background:var(--track-brown);border-radius:2px}.train-section{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--section-padding);padding-top:calc(var(--section-padding) + 60px);z-index:10}.train-section.visible .completion-content,.train-section.visible .credits-content,.train-section.visible .hero-content,.train-section.visible .letter-content,.train-section.visible .parent-content{opacity:1;transform:translateY(0)}.opening-scene{min-height:100dvh;background:transparent}.hero-content{text-align:center;opacity:0;transform:translateY(30px);transition:all .8s var(--ease-smooth)}.story-title{margin-bottom:2rem}.title-the{font-size:clamp(1.5rem,4vw,2.5rem);color:#2C3E50;margin-bottom:.5rem}.title-main,.title-the{display:block;font-family:var(--font-display)}.title-main{font-size:var(--text-title);font-weight:700;background:linear-gradient(135deg,var(--train-red),#F39C12,#2ECC71,#3498DB,#9B59B6);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:rainbow-text 5s ease infinite;line-height:1.2}@keyframes rainbow-text{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.title-choo{display:block;font-size:clamp(1.25rem,3vw,2rem);margin-top:.5rem;animation:choo-bounce 1s var(--ease-bounce) infinite}@keyframes choo-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.opening-train{margin:2rem auto;max-width:300px;animation:train-arrive 1.5s var(--ease-smooth) forwards;animation-delay:.5s;opacity:0;transform:translateX(-100px)}@keyframes train-arrive{to{opacity:1;transform:translateX(0)}}.hero-engine{width:100%;height:auto}.smoke{animation:smoke-rise 2s ease-out infinite}.smoke-1{animation-delay:0s}.smoke-2{animation-delay:.3s}.smoke-3{animation-delay:.6s}@keyframes smoke-rise{0%{opacity:.8;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-30px) scale(1.5)}}.train-light{animation:light-glow 1s ease-in-out infinite}@keyframes light-glow{0%,to{opacity:1}50%{opacity:.6}}.opening-text{font-family:var(--font-display);font-size:var(--text-subtitle);color:var(--train-red);margin-bottom:2rem}.scroll-hint{display:flex;flex-direction:column;align-items:center;gap:.5rem;animation:hint-bounce 2s ease-in-out infinite}.scroll-arrow{font-size:2rem;color:var(--train-red)}.scroll-text{font-size:1rem;color:#666}@keyframes hint-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(10px)}}.letter-section{background:transparent}.letter-content{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:var(--content-max-width);width:100%;opacity:0;transform:translateY(40px);transition:all .6s var(--ease-smooth)}.letter-hero{margin-bottom:1rem}.letter-big{font-family:var(--font-display);font-size:var(--text-letter-hero);font-weight:700;line-height:1}.letter-big,.train-section.animated .letter-big{animation:letter-pop .5s var(--ease-bounce)}@keyframes letter-pop{0%{transform:scale(0)}70%{transform:scale(1.1)}to{transform:scale(1)}}.cart-scene{position:relative;width:100%;max-width:300px;margin:1rem auto}.train-cart-container{position:relative;cursor:pointer;transform:translateX(100px);opacity:0;transition:all .6s var(--ease-bounce)}.train-section.animated .train-cart-container{animation:cart-slide-in .8s var(--ease-bounce) forwards;animation-delay:.2s}@keyframes cart-slide-in{to{transform:translateX(0);opacity:1}}.train-cart-container:focus,.train-cart-container:hover{transform:scale(1.05) translateX(0)}.train-cart-container:active{transform:scale(.98) translateX(0)}.train-cart-svg{width:100%;height:auto}.cart-letter{top:22%;font-family:var(--font-display);font-size:2.5rem;font-weight:700}.cart-emoji,.cart-letter{position:absolute;left:50%;transform:translateX(-50%)}.cart-emoji{top:45%;font-size:2rem}.tap-indicator{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.25rem;opacity:.8;animation:tap-pulse 2s ease-in-out infinite}.tap-hand{font-size:1.5rem}.tap-text{font-size:.75rem;color:#666;white-space:nowrap}@keyframes tap-pulse{0%,to{opacity:.8;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.1)}}.sparkles-container{position:absolute;inset:0;pointer-events:none;overflow:visible}.sparkle{position:absolute;font-size:1.5rem;animation:sparkle-burst .8s var(--ease-bounce) forwards}@keyframes sparkle-burst{0%{transform:scale(0) rotate(0deg);opacity:1}to{transform:scale(1.5) rotate(180deg);opacity:0}}.phonics-display{margin:1.5rem 0}.phonics-sentence{font-family:var(--font-display);font-size:var(--text-phonics);margin-bottom:.5rem}.word-sentence{font-family:var(--font-body);font-size:var(--text-body)}.letter-highlight{font-weight:700}.sound-highlight{font-style:italic;color:var(--train-red)}.word-highlight{font-weight:700}.object-display{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:1rem 0;padding:1rem 2rem;background:rgba(255,255,255,.9);border-radius:20px;box-shadow:0 4px 20px rgba(0,0,0,.1)}.object-emoji{font-size:4rem}.object-label{font-size:1.5rem;font-weight:600}.object-label,.sound-button{font-family:var(--font-display)}.sound-button{display:flex;align-items:center;justify-content:center;gap:.75rem;min-width:var(--touch-min);min-height:var(--touch-min);padding:1rem 2rem;border:none;border-radius:30px;font-size:1.25rem;color:white;cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,.2);transition:all .2s var(--ease-smooth)}.sound-button:focus,.sound-button:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(0,0,0,.25)}.sound-button:active{transform:scale(.98)}.button-icon{font-size:1.5rem}.button-text{white-space:nowrap}.letter-counter{margin-top:1.5rem;padding:.5rem 1rem;background:rgba(255,255,255,.8);border-radius:20px;font-size:.875rem;color:#666}.completion-section{background:linear-gradient(180deg,transparent,rgba(255,215,0,.1) 50%,rgba(255,215,0,.2));min-height:100dvh}.completion-content{text-align:center;max-width:var(--content-max-width);opacity:0;transform:translateY(30px);transition:all .8s var(--ease-smooth)}.completion-title{font-family:var(--font-display);font-size:clamp(2.5rem,8vw,5rem);font-weight:700;color:var(--train-red);margin-bottom:1rem;animation:celebration-bounce .5s var(--ease-bounce)}@keyframes celebration-bounce{0%{transform:scale(0)}60%{transform:scale(1.2)}to{transform:scale(1)}}.completion-subtitle{font-family:var(--font-display);font-size:var(--text-subtitle);color:#2C3E50;margin-bottom:2rem}.full-train-display{width:100%;overflow-x:auto;padding:2rem 0;margin:2rem 0;-webkit-overflow-scrolling:touch}.full-train-scroll{display:flex;align-items:center;gap:.5rem;padding:1rem;min-width:max-content}.mini-engine{width:80px;height:auto;flex-shrink:0}.mini-cart{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.15);animation:cart-pop .3s var(--ease-bounce)}.mini-cart:first-child{animation-delay:0s}.mini-cart:nth-child(2){animation-delay:.05s}.mini-cart:nth-child(3){animation-delay:.1s}.mini-cart:nth-child(4){animation-delay:.15s}.mini-cart:nth-child(5){animation-delay:.2s}@keyframes cart-pop{0%{transform:scale(0)}to{transform:scale(1)}}.mini-letter{font-family:var(--font-display);font-size:1rem;font-weight:700;color:white;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.celebration-message{margin:2rem 0}.great-job{font-family:var(--font-display);font-size:var(--text-subtitle);color:#F39C12;margin-bottom:.5rem}.now-you-know{font-size:var(--text-body);color:#2C3E50}.alphabet-song{background:rgba(255,255,255,.9);border-radius:20px;padding:2rem;margin:2rem auto;max-width:500px;box-shadow:0 4px 20px rgba(0,0,0,.1)}.song-intro{font-size:1.25rem;color:var(--train-red);margin-bottom:1rem}.song-intro,.song-letters{font-family:var(--font-display)}.song-letters{font-size:var(--text-body);line-height:2;color:#2C3E50}.song-outro{font-family:var(--font-body);font-size:1rem;color:#666;margin-top:1rem;font-style:italic}.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}.confetti-piece{position:absolute;top:-20px;width:12px;height:12px;border-radius:2px;animation:confetti-fall 3s linear forwards}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0deg);opacity:1}to{transform:translateY(100vh) rotate(2turn);opacity:0}}.parent-section{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.95));min-height:auto;padding:4rem var(--section-padding)}.parent-content{max-width:800px;margin:0 auto;opacity:0;transform:translateY(30px);transition:all .6s var(--ease-smooth)}.parent-title{font-family:var(--font-display);font-size:var(--text-subtitle);text-align:center;color:#2C3E50;margin-bottom:2rem}.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:2rem}.tip-card{background:white;border-radius:16px;padding:1.5rem;text-align:center;box-shadow:0 4px 15px rgba(0,0,0,.08);transition:transform .2s var(--ease-smooth)}.tip-card:hover{transform:translateY(-4px)}.tip-icon{display:block;font-size:2.5rem;margin-bottom:.75rem}.tip-card h4{font-family:var(--font-display);font-size:1.1rem;color:var(--train-red);margin-bottom:.5rem}.tip-card p{font-size:.9rem;color:#666;line-height:1.5}.parent-note{background:linear-gradient(135deg,#FFE66D20,#4ECDC420);border-radius:12px;padding:1.5rem;text-align:center}.parent-note p{font-size:1rem;color:#2C3E50;line-height:1.6}.credits-section{background:linear-gradient(180deg,rgba(255,255,255,.95) 0,var(--sky-bottom) 100%);min-height:auto;padding:4rem var(--section-padding) 6rem}.credits-content{text-align:center;max-width:500px;margin:0 auto;opacity:0;transform:translateY(20px);transition:all .6s var(--ease-smooth)}.credits-made{font-size:1rem;color:#666}.credits-esy{font-family:var(--font-display);font-size:1.5rem;color:var(--train-red);margin:.5rem 0}.credits-for{font-size:1rem;color:#888;font-style:italic}.credits-divider{font-size:2rem;margin:2rem 0}.credits-more{font-size:.9rem;color:#666}.credits-link{color:var(--train-red);text-decoration:none;font-weight:600}.credits-link:hover{text-decoration:underline}.alphabet-train-loading{min-height:100dvh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-bottom) 100%)}.alphabet-train-loading:after{content:"🚂";font-size:4rem;animation:loading-chug 1s ease-in-out infinite}@keyframes loading-chug{0%,to{transform:translateX(-10px)}50%{transform:translateX(10px)}}@media (max-width:768px){.train-section{padding:calc(1.5rem + 60px) 1.5rem 1.5rem}.object-emoji{font-size:3rem}.tips-grid{grid-template-columns:repeat(2,1fr)}.full-train-display{margin:1rem -1.5rem;padding:1rem}}@media (max-width:480px){.progress-indicator{padding:.5rem .75rem}.progress-letter{font-size:1.25rem}.train-section{padding:calc(1rem + 50px) 1rem 1rem}.letter-big{font-size:clamp(6rem,40vw,10rem)}.cart-scene{max-width:250px}.tips-grid{grid-template-columns:1fr}.sound-button{width:100%;max-width:300px}.alphabet-song{padding:1.5rem;margin:1rem}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.cloud-1,.cloud-2,.cloud-3,.hills-back,.hills-front{animation:none!important}}@supports (padding-top:env(safe-area-inset-top)){.progress-indicator{padding-top:calc(.75rem + env(safe-area-inset-top))}.train-section:first-of-type{padding-top:calc(var(--section-padding) + 60px + env(safe-area-inset-top))}.credits-section{padding-bottom:calc(6rem + env(safe-area-inset-bottom))}}