@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root{--ink:#34304a;--muted:#77738c;--purple:#8b7cf6;--pink:#ff8eb4;--mint:#8be0c4;--yellow:#ffdb76;--sky:#8ed5f5;--paper:#fffdf9}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#f6f1ff 0,#fffaf4 52%,#fffdf9 100%);color:var(--ink);font-family:Nunito,"Trebuchet MS",sans-serif;min-height:100vh}
button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:4px solid #4c9fe8;outline-offset:3px}
.topbar{max-width:850px;margin:auto;padding:20px 18px 14px;display:flex;align-items:center;gap:12px}.brand-mark{font-size:2.3rem;background:#fff;border-radius:18px;padding:9px;box-shadow:0 5px 18px #8b7cf620}.eyebrow{font-size:.68rem;letter-spacing:1.5px;font-weight:900;color:#8b7cf6;margin:0 0 3px}.topbar h1{font-size:clamp(1.2rem,4vw,1.65rem);margin:0;font-weight:900;line-height:1.1}.sound-toggle{margin-left:auto;border:0;border-radius:15px;background:white;width:48px;height:48px;font-size:1.35rem;box-shadow:0 5px 18px #6b5a9820}
main{max-width:850px;margin:auto;padding:0 18px 25px}.card{background:#fff;border-radius:25px;box-shadow:0 9px 28px #4d3b7920}.welcome{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;background:linear-gradient(115deg,#dff8ef,#e9e4ff 72%,#ffe7f0);overflow:hidden}.hello{font-size:1.35rem;font-weight:900;margin:0 0 4px}.welcome-copy{margin:0;color:#5d5876;font-weight:700}.mascot{font-size:4.2rem;filter:drop-shadow(0 5px 3px #52416a15);transform:rotate(5deg)}
.progress-strip{display:flex;align-items:center;gap:12px;background:#fff;margin:14px 0 25px;border-radius:20px;padding:12px 15px;box-shadow:0 6px 20px #4d3b7910}.progress-strip>div{display:flex;align-items:center;gap:9px;flex:1}.progress-icon{font-size:1.55rem}.progress-strip strong,.progress-strip small{display:block}.progress-strip strong{font-size:1.1rem;line-height:1.1}.progress-strip small{font-size:.73rem;color:var(--muted);font-weight:700}.reset-button{border:0;background:#f3f0ff;color:#7c70dc;border-radius:12px;width:40px;height:40px;font-size:1.3rem}
.section-title{font-size:1.25rem;margin:0 0 13px;font-weight:900}.section-title span{float:right}.learning-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.learn-card{border:0;text-align:left;min-height:165px;border-radius:23px;padding:17px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 7px 18px #4d3b7910;transition:transform .15s}.learn-card:active,.choice:active,.big-tile:active{transform:scale(.97)}.learn-card.abc{background:#e9e4ff}.learn-card.numbers{background:#fff0c7}.learn-card.animals{background:#dff8ee}.learn-card.colours{background:#ffe2ed}.learn-card.games{background:#dff4ff;grid-column:1/-1;min-height:125px}.tile-emoji{font-size:2.15rem;margin-bottom:7px}.learn-card strong{font-size:1.08rem;font-weight:900}.learn-card small{font-size:.8rem;color:#6c6781;font-weight:700;margin-top:2px}.tile-arrow{font-size:.78rem;font-weight:900;margin-top:auto;padding-top:9px;color:#6e5fd1}.parent-note{display:flex;gap:12px;background:#fff;border:2px dashed #e5defd;border-radius:18px;padding:14px;margin-top:18px;color:#69647c}.parent-note>span{font-size:1.6rem}.parent-note p{margin:0;font-size:.83rem;line-height:1.5}.parent-note strong{color:var(--ink)}
footer{text-align:center;color:#9b96ab;font-size:.76rem;padding:15px 10px 25px}.hidden{display:none!important}.back-button{border:0;background:#fff;padding:10px 15px;border-radius:13px;font-weight:900;color:#7569d5;box-shadow:0 4px 14px #4d3b7910;margin:0 0 17px}.lesson-heading{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:22px;padding:18px 20px;margin-bottom:15px}.lesson-heading h2{margin:0;font-size:1.55rem}.lesson-heading>span{font-size:2.8rem}.lesson-panel{background:#fff;border-radius:24px;padding:18px;box-shadow:0 7px 22px #4d3b7910;margin-bottom:14px}.panel-hint{text-align:center;color:var(--muted);font-weight:800;margin:0 0 14px}.tiles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.big-tile{border:0;border-radius:19px;background:#f2efff;min-height:105px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;color:var(--ink);font-weight:900}.big-tile .big{font-size:2.2rem;line-height:1.2}.big-tile .label{font-size:.78rem}.big-tile:nth-child(3n+2){background:#fff2cc}.big-tile:nth-child(3n){background:#e0f8ef}.big-tile:nth-child(4n){background:#ffe5ee}.feature-card{text-align:center;background:linear-gradient(140deg,#f0ebff,#fff4fa);border-radius:24px;padding:22px 16px;margin-bottom:14px}.feature-card .feature-emoji{font-size:5rem;line-height:1.2}.feature-card .feature-big{font-size:4rem;font-weight:900;color:#7768e8;line-height:1.2}.feature-card h3{font-size:1.35rem;margin:7px 0 2px}.feature-card p{margin:0;color:#6f6a83;font-weight:700}.primary-button{border:0;border-radius:16px;background:#8172ee;color:#fff;font-weight:900;padding:13px 20px;box-shadow:0 5px 0 #6759c9;margin-top:14px;min-height:48px}.secondary-button{border:2px solid #e8e2ff;border-radius:15px;background:#fff;color:#7768d7;font-weight:900;padding:11px 15px;min-height:46px}.button-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.quiz-question{text-align:center;font-size:1.15rem;font-weight:900;margin:5px 0 16px}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.choice{border:0;background:#f1edff;border-radius:19px;min-height:95px;font-size:1.35rem;font-weight:900;color:var(--ink);padding:12px}.choice:nth-child(2){background:#fff0c7}.choice:nth-child(3){background:#dff8ee}.choice:nth-child(4){background:#ffe2ed}.feedback{text-align:center;font-weight:900;min-height:28px;margin:13px 0 0}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);background:#37304f;color:#fff;padding:12px 18px;border-radius:15px;font-weight:900;opacity:0;pointer-events:none;transition:.2s;max-width:90%;text-align:center;z-index:5}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:650px){.learning-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.learn-card.games{grid-column:auto;min-height:165px}.tiles-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.welcome{padding:24px 28px}}
@media(max-width:370px){.topbar{padding-inline:12px}main{padding-inline:12px}.learn-card{padding:13px;min-height:155px}.mascot{font-size:3.3rem}.hello{font-size:1.2rem}.welcome{padding:16px}}