@import"https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap";:root{font-family:"Baloo 2",ui-rounded,sans-serif;color:#3b2d5c;background:#fff6e0;font-synthesis:none;--purple:#7b4dff;--pink:#ff5fa2;--yellow:#ffd23f;--blue:#3fb8ff;--green:#3ccf7a;--orange:#ff8a3d}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 10%,#ffe7f1 0 120px,transparent 121px),radial-gradient(circle at 92% 20%,#dff4ff 0 160px,transparent 161px),radial-gradient(circle at 85% 95%,#e3ffe9 0 140px,transparent 141px),#fff6e0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}button:focus-visible,a:focus-visible{outline:4px solid var(--purple);outline-offset:4px}button:active{transform:translateY(4px) scale(.97)}.header{max-width:1100px;margin:auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--purple);font-size:30px;font-weight:800;letter-spacing:-.5px}.brand>span:last-child{color:var(--pink)}.brand-icon{display:grid;place-items:center;background:var(--yellow);color:#3b2d5c;width:48px;height:48px;border-radius:16px;font-size:30px;box-shadow:0 5px #e0a800;transform:rotate(-6deg);position:relative}.brand-icon span{position:absolute;font-size:16px;right:-6px;top:-10px;color:var(--pink)}.parent-button{border:0;background:#fff;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;color:#8a7fa3;box-shadow:0 3px #eadfc5}.parent-button span{margin-left:6px}main{max-width:1060px;margin:auto;padding:4px 20px 30px}.intro{text-align:center;margin-bottom:18px}.mascot{display:inline-block;font-size:64px;line-height:1;animation:bob 2.4s ease-in-out infinite;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}.eyebrow{display:none}h1,h2,h3{margin:0}h1{font-size:46px;font-weight:800;color:var(--purple);line-height:1.1;margin-top:4px}.intro p{font-size:20px;color:#7a6c96;margin:4px 0 0;font-weight:600}.activity{background:#fff;border-radius:36px;box-shadow:0 10px #f0d9a8,0 20px 40px #c9934022;overflow:hidden;border:4px solid #fff}.activity-top{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:linear-gradient(90deg,var(--purple),var(--pink));color:#fff;font-size:16px;font-weight:700;letter-spacing:.5px}.activity-top>span:first-child{display:flex;align-items:center;gap:8px}.green-dot{width:12px;height:12px;background:var(--yellow);border-radius:50%;box-shadow:0 0 0 3px #fff6}.lesson{display:grid;grid-template-columns:38% 62%;padding:28px}.letter-side{container-type:inline-size;text-align:center;padding-right:24px}.letter-wrap{position:relative;width:fit-content;max-width:100%;margin:auto;--pad:min(24px,5cqi);padding:8px var(--pad) 4px;background:#f3edff;border-radius:32px}.letters{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:baseline;column-gap:14px;font-size:min(150px,42cqi);font-weight:800;line-height:1.1;color:var(--purple)}#upper{grid-area:1/1;text-shadow:0 6px 0 #d8c8ff}.lower{grid-area:1/2;color:var(--pink);text-shadow:0 6px 0 #ffd0e4}.baseline{grid-area:1/1/2/-1;align-self:baseline;height:0;border-top:3px dashed #d8c8ff;margin:0 calc(-1*var(--pad))}.case-label{grid-row:2;justify-self:center;width:0;display:flex;justify-content:center;white-space:nowrap;font-size:13px;font-weight:700;line-height:1;color:#a597c4;margin:4px 0 8px}.spark{position:absolute;color:var(--yellow);font-size:34px;animation:twinkle 1.8s ease-in-out infinite}.spark-one{left:-10px;top:-6px}.spark-two{right:-10px;bottom:30px;animation-delay:.9s}.sound-button{background:var(--blue);color:#fff;border:0;border-radius:999px;font-size:22px;font-weight:800;padding:14px 28px;margin-top:22px;box-shadow:0 6px #1f8fd1}.sound-button:active{box-shadow:0 2px #1f8fd1}.sound-button>span{margin-right:8px}.sound-hint{font-size:15px;color:#8a7fa3;margin:10px 0 0;font-weight:600}.sound-hint:empty{display:none}.question-side{padding:4px 0 0 24px;text-align:center}.step-label{display:none}.question-side h2{font-size:38px;font-weight:800;color:#3b2d5c}.question-side>p{font-size:18px;color:#8a7fa3;margin:2px 0 0;font-weight:600}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}.choice{position:relative;background:#fff3c4;border:0;border-radius:28px;min-height:160px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px #f0cf5a}.choice:nth-child(2){background:#d9f2ff;box-shadow:0 8px #8fd2f7}.choice:nth-child(3){background:#ffe0ee;box-shadow:0 8px #f7a8ca}.choice:active{box-shadow:0 3px #0002}.picture{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:88px;line-height:1}.choice-check{display:none;position:absolute;top:-10px;right:-10px;border-radius:50%;background:var(--green);color:#fff;width:42px;height:42px;font-size:24px;line-height:42px;font-weight:800;box-shadow:0 4px #24a159}.choice.correct{background:#d8ffe6;box-shadow:0 8px 0 var(--green);animation:pop .5s}.choice.correct .choice-check{display:block}.choice:disabled{cursor:default}.choice:disabled:not(.correct){opacity:.45}.choice.try-again:not(.correct){animation:wiggle .4s;opacity:.5}#feedback{font-size:20px;color:#8a7fa3;margin-top:22px;min-height:36px;font-weight:700;line-height:1.3}#feedback.success{color:#1f9d55;font-size:24px}#feedback.retry{color:var(--orange)}.activity-bottom{padding:14px 24px;display:flex;justify-content:space-between;align-items:center;background:#fffaf0}.progress{font-size:20px;font-weight:800;color:#e0a800}.next-button{border:0;background:var(--green);color:#fff;font-size:20px;font-weight:800;padding:10px 24px;border-radius:999px;box-shadow:0 5px #24a159}.next-button span{margin-left:8px}.letter-picker{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-top:34px}.letter-picker h2{font-size:26px;font-weight:800;color:var(--purple)}.letter-picker p{font-size:16px;color:#8a7fa3;margin:0;font-weight:600}.letter-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:820px}.letter-button{position:relative;background:#fff;border:0;border-radius:18px;min-width:56px;height:56px;color:var(--purple);font-size:24px;font-weight:800;box-shadow:0 5px #eadfc5}.letter-button:nth-child(4n+2){color:var(--pink)}.letter-button:nth-child(4n+3){color:var(--blue)}.letter-button:nth-child(4n+4){color:var(--orange)}.letter-button span{font-size:17px;margin-left:2px}.letter-button.active{background:var(--yellow);color:#3b2d5c;box-shadow:0 5px #e0a800}.letter-button i{position:absolute;right:-6px;top:-8px;font-size:18px;font-style:normal;color:var(--yellow);text-shadow:0 1px 0 #c98f00}.footer-note{text-align:center;color:#a597c4;font-size:15px;margin-top:34px;font-weight:600}.footer-note span{color:var(--pink);margin-right:6px}.burst{position:fixed;pointer-events:none;font-size:30px;z-index:10;animation:burst 1s ease-out forwards}dialog{border:0;border-radius:28px;padding:30px;max-width:480px;color:#3b2d5c;background:#fff;line-height:1.5;font-family:system-ui,sans-serif}dialog .eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:2px;color:var(--pink)}dialog::backdrop{background:#3b2d5c88;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}dialog h2{font-size:28px;font-family:"Baloo 2",sans-serif}dialog h3{font-size:18px;margin-top:16px;font-family:"Baloo 2",sans-serif}dialog p{font-size:14px;color:#5e547a}dialog a{color:var(--purple)}dialog .close{float:right;border:0;background:transparent;font-size:30px;color:#888}.reset-button{background:var(--green);border:0;padding:12px 22px;border-radius:999px;color:#fff;font-weight:700;box-shadow:0 4px #24a159}@keyframes bob{50%{transform:translateY(-8px) rotate(4deg)}}@keyframes twinkle{50%{transform:scale(1.4) rotate(20deg);opacity:.6}}@keyframes pop{40%{transform:scale(1.12)}}@keyframes wiggle{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}@keyframes burst{to{transform:translate(var(--x),var(--y)) rotate(360deg) scale(.4);opacity:0}}@media(max-width:850px){.lesson{padding:22px;grid-template-columns:36% 64%}.letter-side{padding-right:14px}.question-side{padding-left:14px}.question-side h2{font-size:32px}.picture{font-size:68px}.choice{min-height:136px}.sound-button{font-size:18px;padding:12px 20px}}@media(max-width:580px){.header{padding:12px 16px}.brand{font-size:24px}.brand-icon{width:40px;height:40px;font-size:24px}.parent-button{font-size:12px;padding:6px 12px}main{padding:0 12px 24px}.mascot{font-size:48px}h1{font-size:34px}.intro p{font-size:17px}.activity{border-radius:28px}.activity-top{font-size:14px;padding:10px 18px}.lesson{display:block;padding:18px 14px}.letter-side{padding:0 0 8px}.letters{font-size:min(120px,40cqi)}.question-side{padding:16px 0 0}.question-side h2{font-size:30px}.question-side>p{font-size:16px}.choices{gap:10px}.choice{min-height:116px;border-radius:22px}.picture{font-size:60px}#feedback{font-size:18px}#feedback.success{font-size:20px}.activity-bottom{padding:12px 16px}.progress{font-size:17px}.next-button{font-size:17px;padding:9px 16px}.letter-buttons{gap:8px}.letter-button{min-width:48px;height:50px;font-size:21px}.letter-button span{font-size:15px}.footer-note{font-size:13px}dialog{max-width:calc(100% - 24px);padding:22px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}