:root{--ink:#24364b;--muted:#6d7a88;--paper:#fff8ed;--blue:#7ecaf3;--yellow:#ffdc65;--green:#78d0a0;--peach:#ffb18e;--lav:#b8a7ef;--coral:#ff8585;--shadow:0 14px 34px rgba(48,55,84,.12)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;max-width:100%;overflow-x:hidden;background:var(--paper);font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,sans-serif;color:var(--ink);touch-action:pan-y}button{font:inherit;cursor:pointer}#app{min-height:100dvh}
.shell{min-height:100dvh;padding:calc(16px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.top{max-width:1040px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{display:flex;align-items:center;gap:11px}.logo{width:50px;height:50px;border-radius:16px;background:linear-gradient(135deg,var(--yellow),var(--peach));display:grid;place-items:center;font-weight:1000}.brand strong{display:block}.brand small{display:block;color:var(--muted)}
.parent{border:0;background:#fff;border-radius:999px;padding:10px 14px;font-weight:900;box-shadow:0 8px 20px #3f496315}
.hero{max-width:1040px;margin:18px auto 20px;padding:26px;border-radius:28px;background:linear-gradient(135deg,#fff,#fff7d7 52%,#eaf8f0);box-shadow:var(--shadow)}.eyebrow{font-size:11px;letter-spacing:1.6px;font-weight:1000;color:#4e9c79}.hero h1{font-size:clamp(36px,7vw,62px);line-height:.96;letter-spacing:-2px;margin:10px 0}.hero p{max-width:620px;color:var(--muted);line-height:1.5}.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.badge{padding:8px 11px;border-radius:999px;background:#fff;font-size:12px;font-weight:900}
.head{max-width:1040px;margin:0 auto 11px;display:flex;align-items:end;justify-content:space-between}.head h2{margin:3px 0 0}.progress{font-size:12px;color:var(--muted);font-weight:900}
.grid{max-width:1040px;margin:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px}.letter{min-height:102px;border:0;border-radius:20px;box-shadow:0 8px 22px #3c466214;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);position:relative}.letter b{font-size:40px;line-height:1}.letter small{margin-top:7px;font-weight:900;color:var(--muted)}.letter:nth-child(6n+1){background:#eef8ff}.letter:nth-child(6n+2){background:#fff8d9}.letter:nth-child(6n+3){background:#edf9f2}.letter:nth-child(6n+4){background:#fff0e9}.letter:nth-child(6n+5){background:#f4efff}.letter:nth-child(6n){background:#fff0f0}.letter.locked{opacity:.42;border:1px dashed #d8cdbf;box-shadow:none}.letter.locked:after{content:"soon";position:absolute;bottom:6px;font-size:9px;letter-spacing:1px;text-transform:uppercase}.done{position:absolute;right:8px;top:8px;width:23px;height:23px;border-radius:50%;background:#dff5e8;color:#34805a;display:grid;place-items:center;font-size:12px}
.footer{text-align:center;color:#8b8177;font-size:12px;margin:25px auto 0}
.lesson{min-height:100dvh;padding:calc(13px + env(safe-area-inset-top)) max(13px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(13px,env(safe-area-inset-left));background:linear-gradient(#fffaf1,#f8fdf9)}.lesson-top{max-width:860px;margin:0 auto 12px;display:flex;justify-content:space-between;align-items:center}.circle{width:45px;height:45px;border:0;border-radius:50%;background:#fff;box-shadow:0 7px 18px #3d476017;font-size:20px}.lesson-title{text-align:center}.lesson-title small{display:block;color:var(--muted)}
.card{max-width:860px;margin:auto;background:#fff;border-radius:27px;box-shadow:var(--shadow);overflow:hidden}.card-head{text-align:center;padding:18px 18px 10px}.big-letter{font-size:72px;font-weight:1000;line-height:.9}.card-head h1{margin:8px 0 0}
.scene{height:min(50vh,410px);min-height:300px;position:relative;overflow:hidden;border-block:1px solid #f0e5d9;background:linear-gradient(#c6ecff 0 56%,#f3e7ce 56%)}.scene-tag{position:absolute;top:13px;left:14px;background:#ffffffdd;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:1000;z-index:10}.star{position:absolute;right:18px;top:14px;font-size:30px;animation:pop .8s ease-in-out infinite alternate}@keyframes pop{to{transform:scale(1.15) rotate(8deg)}}
.person{position:absolute;bottom:31%;width:92px;height:148px}.face{position:absolute;left:23px;top:0;width:48px;height:48px;border-radius:50%;background:#efbd96}.body{position:absolute;left:10px;top:43px;width:74px;height:88px;border-radius:30px 30px 12px 12px}.kid{left:45%;transform:translateX(-50%)}.kid .body{background:var(--blue)}.mom{left:12%}.mom .body{background:var(--lav)}.dad{right:12%}.dad .body{background:var(--green)}.table{position:absolute;left:10%;right:10%;bottom:14%;height:23%;background:#c88954;border-radius:22px 22px 8px 8px;box-shadow:0 9px 0 #9c6842}.apple{position:absolute;left:48%;bottom:27%;width:48px;height:44px;border-radius:50%;background:#ef5252;z-index:6;animation:eat 4s ease-in-out infinite}.apple:before{content:"";position:absolute;width:8px;height:16px;left:23px;top:-8px;background:#68513c}@keyframes eat{45%,65%{transform:translateY(-90px)}}
.bath{background:linear-gradient(#dff5ff 0 65%,#e8e8ee 65%)}.mirror{position:absolute;left:50%;top:11%;transform:translateX(-50%);width:165px;height:125px;border:10px solid white;border-radius:25px;background:#d9eef8}.sink{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);width:225px;height:78px;border-radius:12px 12px 48px 48px;background:#fff}.brushkid{position:absolute;left:50%;bottom:25%;transform:translateX(-50%);width:130px;height:180px}.brushkid .face{left:39px;width:54px;height:54px}.brushkid .body{left:18px;top:51px;width:96px;height:103px;background:var(--peach)}.brush{position:absolute;left:54%;bottom:47%;width:66px;height:8px;border-radius:6px;background:#7d8ff2;animation:brush .8s ease-in-out infinite alternate;z-index:8}@keyframes brush{to{transform:translateX(14px) rotate(8deg)}}
.clean{background:linear-gradient(#ddf7ee 0 66%,#ece5d9 66%)}.csink{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);width:270px;height:88px;border-radius:16px 16px 55px 55px;background:#fff}.tap{position:absolute;left:50%;bottom:42%;width:18px;height:88px;border-radius:9px;background:#a3b7bf}.tap:after{content:"";position:absolute;width:68px;height:18px;border-radius:9px;background:#a3b7bf}.water{position:absolute;left:calc(50% + 53px);bottom:29%;width:7px;height:65px;border-radius:6px;background:#72c9f8}.hands{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);width:160px;height:70px}.hand{position:absolute;width:94px;height:35px;border-radius:22px;background:#efb68d;animation:rub .7s ease-in-out infinite alternate}.hand:last-child{right:0;top:25px;animation-direction:alternate-reverse}@keyframes rub{to{transform:translateX(16px)}}
.copy{text-align:center;padding:16px 18px 8px}.copy strong{font-size:20px}.copy p{color:var(--muted);line-height:1.45;max-width:620px;margin:7px auto 0}.actions{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:9px;padding:13px 18px 22px}.actions button{border:0;border-radius:16px;padding:14px 10px;font-weight:1000}.next{background:#50b783;color:white}.replay{background:#edf6ff;color:#2f6e99}.home{background:#fff1d3;color:#86671f}
.gate,.parent-panel{max-width:650px;margin:70px auto;background:#fff;border-radius:27px;padding:26px;box-shadow:var(--shadow);text-align:center}.gate button,.parent-panel button{border:0;border-radius:16px;padding:14px 18px;font-weight:1000}.hold{background:var(--ink);color:#fff}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.stat{padding:15px;border-radius:17px;background:#f8f4ee}.stat b{display:block;font-size:27px}
#toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 14px;border-radius:999px;font-size:12px;font-weight:900;display:none;z-index:99}
@media(max-width:760px){.grid{grid-template-columns:repeat(4,1fr)}.stats{grid-template-columns:1fr}.hero{padding:22px}.scene{min-height:325px}}
@media(max-width:430px){.grid{grid-template-columns:repeat(3,1fr)}.letter{min-height:90px}.actions{grid-template-columns:1fr 1fr}.next{grid-column:1/-1;grid-row:1}.brand small{display:none}.mom{left:5%}.dad{right:5%}}

/* Full A-Z animated learning world */
.letter{transition:transform .16s ease,box-shadow .16s ease}
.letter:active{transform:scale(.96)}
.letter:nth-child(6n+1){background:#eef8ff}.letter:nth-child(6n+2){background:#fff8d9}.letter:nth-child(6n+3){background:#edf9f2}.letter:nth-child(6n+4){background:#fff0e9}.letter:nth-child(6n+5){background:#f4efff}.letter:nth-child(6n){background:#fff0f0}
.card-head p{margin:6px 0 0;color:var(--muted);font-size:13px;font-weight:800}
.scene{background:linear-gradient(#cbeeff 0 62%,#f2e7cf 62%)}
.scene-sky,.scene-floor{position:absolute;inset:0;pointer-events:none}
.scene-floor{top:62%;background:linear-gradient(#f4e6ca,#ead8b8)}
.scene-dining .scene-floor,.scene-kitchen .scene-floor{background:linear-gradient(#f1dcc0,#e6cda8)}
.scene-bathroom .scene-sky,.scene-sink .scene-sky{background:#e2f5ff}
.scene-bedroom .scene-sky{background:#f6eefd}
.scene-classroom .scene-sky{background:#fff6d8}
.scene-playroom .scene-sky{background:#eef7ff}
.scene-playground .scene-sky,.scene-park .scene-sky{background:linear-gradient(#c9efff 0 65%,#dff1c7 65%)}
.scene-door .scene-sky,.scene-home .scene-sky{background:#fff0e7}
.prop{position:absolute;left:50%;top:20%;transform:translateX(-50%);font-size:76px;z-index:4;filter:drop-shadow(0 10px 12px #52607924);animation:propFloat 2.1s ease-in-out infinite alternate}
@keyframes propFloat{to{transform:translate(-50%,-10px) rotate(3deg)}}
.kid-figure{position:absolute;bottom:17%;width:92px;height:155px;z-index:6;animation:kidBounce 1.8s ease-in-out infinite alternate}
@keyframes kidBounce{to{transform:translateY(-6px)}}
.kid-figure.left{left:20%}.kid-figure.right{right:20%}.kid-figure.center{left:50%;transform:translateX(-50%)}.kid-figure.center-left{left:35%}.kid-figure.center-right{right:35%}.kid-figure.far-left{left:7%}.kid-figure.far-right{right:7%}
.kid-figure .face{position:absolute;left:21px;top:9px;width:50px;height:50px;border-radius:50%;background:#efb88e;border:2px solid #df9d73}
.kid-figure .hair{position:absolute;left:17px;top:1px;width:58px;height:30px;border-radius:50% 50% 35% 35%;background:#4a352e;z-index:3}
.kid-figure.ayra .hair{height:47px;border-radius:50% 50% 48% 48%}
.kid-figure.mom .hair{height:54px;background:#5c4037}.kid-figure.dad .hair{height:25px}
.kid-figure .eye{position:absolute;top:19px;width:5px;height:7px;border-radius:50%;background:#263843}.kid-figure .e1{left:13px}.kid-figure .e2{right:13px}
.kid-figure .smile{position:absolute;left:17px;top:31px;width:16px;height:8px;border-bottom:2px solid #aa654f;border-radius:0 0 15px 15px}
.kid-figure .shirt{position:absolute;left:13px;top:55px;width:66px;height:70px;border-radius:24px 24px 16px 16px;background:#74c6ef}
.kid-figure.ayra .shirt{background:#ff9aa2}.kid-figure.mom .shirt{background:#b6a2f0}.kid-figure.dad .shirt{background:#7fd0a1}
.kid-figure .arm{position:absolute;top:66px;width:14px;height:55px;border-radius:10px;background:#efb88e;transform-origin:top center}
.kid-figure .a1{left:5px;transform:rotate(18deg);animation:wave 1.4s ease-in-out infinite alternate}.kid-figure .a2{right:5px;transform:rotate(-16deg)}
@keyframes wave{to{transform:rotate(-18deg) translateY(-2px)}}
.kid-figure .leg{position:absolute;top:118px;width:17px;height:39px;border-radius:9px;background:#4c6280}.kid-figure .l1{left:25px}.kid-figure .l2{right:25px}
.action-caption{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);max-width:84%;background:#ffffffeb;border-radius:999px;padding:8px 13px;font-size:12px;font-weight:900;text-align:center;z-index:15;box-shadow:0 6px 18px #47516a15}
.spark{position:absolute;z-index:12;animation:sparkle 1.1s ease-in-out infinite alternate}.s1{left:17%;top:18%}.s2{right:17%;top:28%;animation-delay:.4s}
@keyframes sparkle{to{transform:scale(1.35) rotate(12deg);opacity:.55}}
.scene-dining:after{content:"";position:absolute;left:8%;right:8%;bottom:10%;height:48px;background:#c88954;border-radius:24px 24px 8px 8px;box-shadow:0 8px 0 #9d6841;z-index:2}
.scene-classroom:after{content:"ABC";position:absolute;left:50%;top:8%;transform:translateX(-50%);width:190px;height:68px;border-radius:10px;background:#365d4a;color:#fffbe8;display:grid;place-items:center;font-size:30px;font-weight:1000;letter-spacing:8px}
.scene-bedroom:after{content:"☁️  ⭐";position:absolute;right:8%;top:12%;font-size:34px}
.scene-playground:after{content:"🛝";position:absolute;right:8%;bottom:22%;font-size:78px}
.scene-park:after{content:"🌳";position:absolute;right:5%;bottom:20%;font-size:88px}
.scene-bathroom:after,.scene-sink:after{content:"🚰";position:absolute;right:10%;bottom:22%;font-size:72px}
.scene-kitchen:after{content:"🥣";position:absolute;right:10%;bottom:20%;font-size:68px}
.scene-door:after{content:"🚪";position:absolute;right:7%;bottom:16%;font-size:98px}
.scene-playroom:after{content:"🧸  🧱";position:absolute;right:7%;bottom:16%;font-size:52px}
.mute-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0;padding:14px 16px;background:#f8f4ee;border-radius:16px;font-weight:900}
.mute-toggle,.reset{border:0;border-radius:14px;padding:10px 14px;font-weight:900}.mute-toggle{background:#eaf6ff;color:#2e709d}.reset{background:#fff0ef;color:#a44c49}
@media(max-width:760px){
  .prop{font-size:64px;top:21%}
  .kid-figure.left{left:12%}.kid-figure.right{right:12%}.kid-figure.center-left{left:27%}.kid-figure.center-right{right:27%}
  .kid-figure.far-left{left:2%}.kid-figure.far-right{right:2%}
}
@media(max-width:430px){
  .scene{min-height:340px}
  .prop{font-size:58px;top:18%}
  .kid-figure{transform:scale(.86);transform-origin:bottom center}
  .kid-figure.center{left:48%}
  .kid-figure.center-left{left:22%}.kid-figure.center-right{right:22%}
  .kid-figure.far-left{left:-4%}.kid-figure.far-right{right:-4%}
  .action-caption{font-size:11px;bottom:3%}
}

/* Story-clip polish */
.lesson-progress{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:flex;gap:6px;z-index:30}
.lesson-progress i{width:24px;height:5px;border-radius:99px;background:#ffffff8f;box-shadow:0 1px 5px #2b3e5220;transition:.25s}
.lesson-progress i.active{background:#fff;transform:scaleX(1.08)}
.scene[data-stage="1"] .prop,.scene[data-stage="1"] .mini-table,.scene[data-stage="1"] .tooth-action,.scene[data-stage="1"] .wash-action,.scene[data-stage="1"] .dress-action,.scene[data-stage="1"] .polite-bubble,.scene[data-stage="1"] .family-heart,.scene[data-stage="1"] .hello-bubble,.scene[data-stage="1"] .help-box,.scene[data-stage="1"] .quiet-bubble,.scene[data-stage="1"] .play-ball,.scene[data-stage="1"] .pet-action,.scene[data-stage="1"] .listen-action,.scene[data-stage="1"] .meal-action,.scene[data-stage="1"] .napkin-action,.scene[data-stage="1"] .basket-action,.scene[data-stage="1"] .respect-action,.scene[data-stage="1"] .share-action,.scene[data-stage="1"] .bin-action,.scene[data-stage="1"] .food-action,.scene[data-stage="1"] .wait-action,.scene[data-stage="1"] .music-action,.scene[data-stage="1"] .yawn-action,.scene[data-stage="1"] .sleep-action{transform:translate(-50%,-9px) scale(1.08)}
.scene[data-stage="2"] .action-caption{transform:translateX(-50%) scale(1.04);background:#fff}
.scene[data-stage="3"] .spark{animation-duration:.45s}
.scene[data-stage="3"] .kid-figure{animation-duration:.7s}

.scene>div:not(.scene-sky):not(.scene-floor):not(.kid-figure):not(.lesson-progress):not(.action-caption){
  transition:transform .35s ease,opacity .35s ease
}
.mini-table,.tooth-action,.wash-action,.dress-action,.polite-bubble,.family-heart,.hello-bubble,.help-box,.quiet-bubble,.play-ball,.pet-action,.listen-action,.meal-action,.napkin-action,.basket-action,.respect-action,.share-action,.bin-action,.food-action,.wait-action,.music-action,.yawn-action,.sleep-action{
  position:absolute;left:50%;top:25%;transform:translateX(-50%);z-index:5;filter:drop-shadow(0 10px 12px #52607920)
}
.mini-table{top:29%;display:flex;gap:16px;background:#fff7e3;border:5px solid #c98b56;border-radius:20px;padding:12px 22px;font-size:30px;animation:tableNod 2s ease-in-out infinite alternate}
@keyframes tableNod{to{transform:translate(-50%,-4px)}}
.tooth-action{font-size:72px;animation:brushMove .7s ease-in-out infinite alternate}.tooth-action .foam{display:block;font-size:18px;color:#fff;text-shadow:0 0 1px #7db8d2}
@keyframes brushMove{to{transform:translate(-44%,-6px) rotate(8deg)}}
.wash-action{font-size:52px;display:flex;align-items:center;gap:12px}.water-stream{display:inline-block;width:8px;height:76px;border-radius:9px;background:#71c9f7;animation:flow .9s ease-in-out infinite alternate}@keyframes flow{to{transform:scaleY(.78);opacity:.62}}
.dress-action{font-size:68px;animation:dressPop 1.3s ease-in-out infinite alternate}.dress-action span{font-size:42px}@keyframes dressPop{to{transform:translate(-50%,-8px) rotate(-4deg)}}
.polite-bubble,.hello-bubble,.quiet-bubble{top:22%;background:#fff;border:3px solid #e8edf2;border-radius:22px;padding:13px 18px;font-size:22px;font-weight:1000;animation:bubbleFloat 1.5s ease-in-out infinite alternate}
.polite-bubble:after,.hello-bubble:after,.quiet-bubble:after{content:"";position:absolute;left:22px;bottom:-11px;border:11px solid transparent;border-top-color:#fff}
@keyframes bubbleFloat{to{transform:translate(-50%,-7px)}}
.family-heart{font-size:88px;color:#ff7d83;animation:heartBeat .75s ease-in-out infinite alternate}@keyframes heartBeat{to{transform:translateX(-50%) scale(1.14)}}
.help-box{font-size:80px;animation:lift 1.1s ease-in-out infinite alternate}@keyframes lift{to{transform:translate(-50%,-18px)}}
.play-ball{font-size:70px;animation:ball 1.15s ease-in-out infinite alternate}@keyframes ball{to{transform:translate(85px,-20px) rotate(80deg)}}
.pet-action{font-size:66px}.pet-action span{color:#ff7f89;display:inline-block;animation:heartBeat2 .8s ease-in-out infinite alternate}@keyframes heartBeat2{to{transform:scale(1.25)}}
.listen-action{font-size:70px}.listen-action span{font-size:38px;display:inline-block;animation:note 1s ease-in-out infinite alternate}@keyframes note{to{transform:translateY(-18px) rotate(8deg)}}
.meal-action,.napkin-action,.respect-action,.food-action,.yawn-action{font-size:74px;animation:softFloat 1.5s ease-in-out infinite alternate}@keyframes softFloat{to{transform:translate(-50%,-8px)}}
.basket-action,.share-action,.bin-action{font-size:44px;background:#ffffffd6;border-radius:20px;padding:12px 16px;font-weight:1000;animation:slideAct 1.1s ease-in-out infinite alternate}@keyframes slideAct{to{transform:translate(-45%,-4px)}}
.wait-action{font-size:28px;font-weight:1000;background:#fff;border-radius:18px;padding:10px 16px;letter-spacing:4px;animation:waitPulse 1.6s ease-in-out infinite alternate}@keyframes waitPulse{to{opacity:.58}}
.music-action{font-size:50px;animation:musicDance .8s ease-in-out infinite alternate}@keyframes musicDance{to{transform:translate(-50%,-12px) rotate(5deg)}}
.yawn-action span{display:inline-block;animation:coverMouth 1.2s ease-in-out infinite alternate}@keyframes coverMouth{to{transform:translate(-18px,-14px)}}
.sleep-action{font-size:42px;background:#ffffffbf;border-radius:24px;padding:11px 16px;animation:sleepFloat 2.2s ease-in-out infinite alternate}@keyframes sleepFloat{to{transform:translate(-50%,-12px);opacity:.76}}

.scene-E .kid-figure.left .a1,.scene-P .kid-figure.center .a1,.scene-T .kid-figure.left .a1{animation:politeHand .8s ease-in-out infinite alternate}
@keyframes politeHand{to{transform:rotate(-42deg) translateY(-8px)}}
.scene-G .kid-figure .a1{animation:greetWave .45s ease-in-out infinite alternate}
@keyframes greetWave{to{transform:rotate(-70deg) translateY(-10px)}}
.scene-H .kid-figure.left .a2,.scene-S .kid-figure.left .a2,.scene-X .kid-figure.left .a2{animation:reachRight .9s ease-in-out infinite alternate}
@keyframes reachRight{to{transform:rotate(-70deg) translate(8px,-6px)}}
.scene-J .kid-figure.left{animation:stepRight 1.2s ease-in-out infinite alternate}.scene-J .kid-figure.right{animation:stepLeft 1.2s ease-in-out infinite alternate}
@keyframes stepRight{to{transform:translateX(12px)}}@keyframes stepLeft{to{transform:translateX(-12px)}}
.scene-O .kid-figure .a1,.scene-U .kid-figure .a1{animation:tidyArm .8s ease-in-out infinite alternate}@keyframes tidyArm{to{transform:rotate(-58deg) translateY(-10px)}}
.scene-Y .kid-figure .a1{animation:yawnHand .9s ease-in-out infinite alternate}@keyframes yawnHand{to{transform:rotate(-90deg) translate(-6px,-16px)}}
.scene-Z .kid-figure{animation:sleepBob 2.4s ease-in-out infinite alternate}@keyframes sleepBob{to{transform:translateY(4px) rotate(1deg)}}

.scene-tag{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.action-caption{font-size:13px;line-height:1.25;transition:.28s transform,.28s background}
.copy strong{display:inline-block;max-width:700px;font-size:22px}
.copy p{font-size:14px}
.replay{position:relative;overflow:hidden}.replay:active:after{content:"";position:absolute;inset:0;background:#cfeaff;animation:tapFlash .3s ease-out}@keyframes tapFlash{from{opacity:.9}to{opacity:0}}
@media(max-width:430px){
  .mini-table,.tooth-action,.wash-action,.dress-action,.polite-bubble,.family-heart,.hello-bubble,.help-box,.quiet-bubble,.play-ball,.pet-action,.listen-action,.meal-action,.napkin-action,.basket-action,.respect-action,.share-action,.bin-action,.food-action,.wait-action,.music-action,.yawn-action,.sleep-action{top:23%}
  .polite-bubble,.hello-bubble,.quiet-bubble{font-size:18px;padding:10px 14px}
  .action-caption{max-width:90%;font-size:11px}
  .copy strong{font-size:19px}
}

/* Named Pockett ABC family */
.character-name{
  position:absolute;
  left:50%;
  top:-24px;
  transform:translateX(-50%);
  background:#ffffffde;
  color:#425262;
  border:1px solid #e7edf0;
  border-radius:999px;
  padding:3px 7px;
  font-size:9px;
  font-weight:1000;
  white-space:nowrap;
  z-index:20;
  box-shadow:0 4px 10px #4b556318;
}
.kid-figure.aarib .shirt{background:#72c4ef}
.kid-figure.ayra .shirt{background:#ff9aa8}
.kid-figure.almeer .shirt{background:#ffd36d}
.kid-figure.almeer .hair{height:27px;background:#3e312d}
.kid-figure.mom .shirt{background:#b5a2ef}
.kid-figure.dad .shirt{background:#7fd0a1}
.kid-figure.family-mom{left:2%}
.kid-figure.family-ayra{left:21%}
.kid-figure.family-aarib{left:41%}
.kid-figure.family-almeer{right:21%}
.kid-figure.family-dad{right:2%}
@media(max-width:760px){
  .kid-figure.family-mom{left:-2%}
  .kid-figure.family-ayra{left:17%}
  .kid-figure.family-aarib{left:39%}
  .kid-figure.family-almeer{right:17%}
  .kid-figure.family-dad{right:-2%}
  .kid-figure.family-mom,.kid-figure.family-dad{transform:scale(.88);transform-origin:bottom center}
}
@media(max-width:430px){
  .kid-figure.family-mom{left:-8%}
  .kid-figure.family-ayra{left:11%}
  .kid-figure.family-aarib{left:36%}
  .kid-figure.family-almeer{right:11%}
  .kid-figure.family-dad{right:-8%}
  .kid-figure.family-mom,.kid-figure.family-dad{transform:scale(.73);transform-origin:bottom center}
  .kid-figure.family-ayra,.kid-figure.family-aarib,.kid-figure.family-almeer{transform:scale(.78);transform-origin:bottom center}
  .character-name{font-size:8px;top:-20px;padding:2px 5px}
}

/* Native-mobile polish */
.kid-figure.center{left:50%;translate:-50% 0;transform:none}
button:focus-visible{outline:4px solid #2f7fb4;outline-offset:3px}
.letter:focus-visible{transform:translateY(-2px)}
.build-version{display:inline-block;margin:4px 0 12px;padding:5px 9px;border-radius:999px;background:#f2f5f7;color:#687786;font-size:11px;font-weight:900}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
@media(max-width:430px){
  .lesson-top{position:sticky;top:0;z-index:40;padding:5px 0;background:linear-gradient(#fffaf1f5,#fffaf1d9 72%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .actions button{min-height:48px}
  .parent,.circle{min-width:45px;min-height:45px}
}

/* Video-first lessons retain the animated scene until playback starts. */
[hidden]{display:none!important}
.lesson-media{position:relative;background:#eef7ff}
.lesson-video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#18252f}
.media-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:35;border:0;border-radius:18px;padding:16px 24px;background:#fff;color:#2f6e99;font-weight:900;box-shadow:var(--shadow);min-height:48px}

/* Story library and family practice experience */
:root{--paper:#f8f7f2;--ink:#233f3d;--muted:#637772;--shadow:0 12px 36px #264e4210}
button:focus-visible,a:focus-visible{outline:3px solid #176b60;outline-offset:4px}
.welcome{max-width:1040px;margin:30px auto;display:grid;grid-template-columns:1fr 1fr;border-radius:30px;overflow:hidden;background:#e9efe5;min-height:300px}
.welcome-copy{padding:36px}.welcome h1{font-size:clamp(38px,5vw,60px);line-height:1.04;letter-spacing:-2px;margin:15px 0}.welcome p{line-height:1.6;color:#526a61}.welcome small{display:block;margin-top:12px;color:#526a61}
.start-learning{background:#244f43;color:white;border:0;border-radius:15px;padding:16px 22px;font-weight:800;min-height:52px}.start-learning span{margin-left:24px}
.welcome-picture{position:relative;min-height:250px}.welcome-picture img{width:100%;height:100%;object-fit:cover}.welcome-picture span{position:absolute;bottom:20px;left:20px;border-radius:30px;background:#fffdf4ef;padding:10px 16px;font-size:13px;font-weight:700}
.learning-summary{max-width:1040px;margin:0 auto 28px;display:flex;align-items:center;gap:20px;background:white;padding:18px 22px;border-radius:18px;font-size:14px}.learning-summary strong{margin-left:auto;white-space:nowrap}.learning-summary progress{width:160px;height:10px;accent-color:#38785e}
.head{margin-bottom:18px}.head h2{font-size:25px}.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.letter{padding:0;overflow:hidden;background:white!important;align-items:stretch;border-radius:20px;box-shadow:0 5px 20px #264e4210;text-align:left}.letter img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.letter-info{display:flex;align-items:center;gap:13px;padding:14px}.letter b{font-size:29px;color:#285746}.letter small{margin:0;color:#334b44;font-size:13px}.done{background:#275f49;color:white}.footer{line-height:1.9;color:#637772}
.card-head{display:grid;grid-template-columns:auto 1fr;text-align:left;column-gap:16px;align-items:center;padding:22px}.big-letter{grid-row:span 2;font-size:48px;background:#edf3e7;border-radius:16px;padding:12px;color:#315d49}.card-head h1{font-size:22px;margin:0}.card-head p{margin:0}.copy{padding:24px 20px 10px}.practice{margin:16px 20px;background:#f1f5e9;border-radius:18px;padding:20px;text-align:center}.practice span{font-size:11px;letter-spacing:2px;color:#456b42;font-weight:800}.practice h2{font-size:22px;margin:10px}.practice button{border:0;border-radius:14px;background:#315f49;color:white;padding:14px 24px;min-height:48px;font-weight:800}.practice button:disabled{background:#e2ecd9;color:#315f49}.next{background:#315f49}.parent{min-height:48px}.hold{touch-action:none;user-select:none}
@media(max-width:700px){.welcome{grid-template-columns:1fr;margin:22px auto}.welcome-copy{padding:25px}.welcome-picture{height:170px;min-height:0}.welcome h1{font-size:42px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.learning-summary{flex-wrap:wrap;gap:10px;padding:16px}.learning-summary progress{width:100%}.head h2{font-size:21px}.letter-info{padding:12px;gap:10px}.card-head h1{font-size:19px}.card-head{padding:16px}.brand small{display:block;font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.welcome-picture img{object-position:center 35%}