:root{--green:#11a98e;--ink:#193e62;--muted:#64838e;--paper:#fffdf7;--line:#dceced;--orange:#ffdf63}body{font-family:ui-rounded,'Trebuchet MS',Arial,sans-serif;color:var(--ink);background:#fffdf7;padding-bottom:90px}button{font-weight:700}header{height:94px;background:#e0f7fc;max-width:none;padding-left:max(26px,calc((100vw - 1076px)/2));padding-right:max(26px,calc((100vw - 1076px)/2));position:relative;z-index:1}.brand{letter-spacing:-1px;font-size:25px;color:#139d9c}.brand small{color:#5a92a5;font-size:10px;letter-spacing:1.8px}.logo{width:43px;height:43px;background:linear-gradient(145deg,#37c5ba,#079c99);box-shadow:0 4px 0 #168d9620}.logo .ico{width:27px;height:27px}.avatar{display:none}header nav{gap:12px}header nav button{display:flex;align-items:center;gap:8px;background:#ffffffba!important;color:#207487!important;border:2px solid #fff;padding:12px 18px}header nav #nav-learn{display:none}.ico{width:22px;height:22px;display:inline-block;vertical-align:middle;flex-shrink:0}.eyebrow{color:#298a9c;font-size:11px;letter-spacing:1.5px;display:inline-flex;align-items:center;gap:9px}.eyebrow .ico{width:22px;height:22px}main{margin:0 auto 40px;padding-top:0}.kids-hero{margin:0 -24px;padding:48px 45px 65px;background:#d9f6fa url('hero-kids.webp') center center/cover no-repeat;grid-template-columns:1fr 1fr;min-height:370px;border-radius:0 0 32px 32px;overflow:hidden}.kids-hero h1{font-size:38px;line-height:1.25;letter-spacing:-1px;font-weight:900;margin-top:24px}.kids-hero p{font-size:17px;line-height:1.7;color:#426681;margin-top:12px}.hero-chip{background:#ffe478;color:#8a5a14;border:4px solid #fff9d6;border-radius:24px;padding:13px 20px;box-shadow:0 4px 0 #eac65a50;display:flex;gap:9px;align-items:center;margin-top:22px}.hero-chip .ico{fill:#ffc942;stroke:#e2a62e}.continue-card{background:linear-gradient(135deg,#18b6a3,#0ea98c 70%,#2abfa0);border:2px solid #6bd5bd;border-radius:30px;padding:27px 29px;margin:-20px 0 26px;position:relative;box-shadow:0 14px 30px #1b9a8520;color:white}.continue-card h2{font-size:26px;color:white;font-weight:900}.chip-light{background:#ffffff25;border:1px solid #ffffff50;border-radius:20px;padding:7px 12px;font-size:11px}.resume-inner{width:100%;background:linear-gradient(135deg,#fff,#f1fffa);display:flex;align-items:center;text-align:left;gap:20px;padding:23px;border-radius:24px;color:var(--ink);margin:24px 0 18px;box-shadow:0 4px 0 #057f7b10}.resume-inner>div{flex:1}.resume-inner h3{font-size:21px;margin:0 0 7px}.resume-inner p{margin:0;font-size:14px;color:#45948e;font-weight:500}.book-bubble{width:56px;height:62px;color:#1f93c5;display:grid;place-items:center;background:linear-gradient(150deg,#d9f8ff,#9edcea);border-radius:15px;box-shadow:0 4px 0 #2c9eb92a}.book-bubble .ico{width:35px;height:35px;stroke-width:1.8}.progress{height:10px;background:#d9eeee;margin:15px 0 0}.progress div{background:#1cb5a3}.progress-ring{--pct:0%;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#18b4a1 var(--pct),#dbeff0 0);padding:8px}.progress-ring b{width:100%;height:100%;background:#f7fffd;border-radius:50%;display:grid;place-items:center;font-size:17px}.primary{background:var(--green);border-radius:20px;padding:17px 25px;display:inline-flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 4px 0 #07978225}.primary.sunny{width:100%;background:linear-gradient(#ffe97a,#ffda4c);border:2px solid #fff09c;color:#1b5d71;font-size:19px;box-shadow:0 5px 0 #caac4b45}.primary.sunny .ico,.primary.blue .ico{fill:currentColor;stroke-width:1.6}.daily-panel{padding:25px 29px;border:1px solid #d4e9ed;border-radius:28px;background:linear-gradient(140deg,#fff,#effbf9);box-shadow:0 8px 22px #2b808609;margin:0 0 25px}.daily-panel h2{font-size:22px;line-height:1.4}.daily-panel p{font-size:14px;margin:10px 0 20px}.daily-panel .section-head{margin-bottom:13px}.mint-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#e1f6fa;color:#178fa0}.primary.blue{background:#168ed7;color:white;border-radius:26px;width:100%;box-shadow:0 5px 0 #1283c41a}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:25px 0}.quick{border:2px solid white;border-radius:27px;padding:24px 12px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--ink);box-shadow:0 7px 20px #598d8e0b}.quick b{font-size:16px}.quick small{font-size:12px;color:#388c9a}.quick-blue{background:linear-gradient(140deg,#edfbff,#ddf5fc)}.quick-green{background:linear-gradient(140deg,#eafff5,#d4f5e9)}.quick-peach{background:linear-gradient(140deg,#fff2e9,#ffe0d4)}.toy-icon{height:64px;width:64px;display:grid;place-items:center;border-radius:19px}.toy-icon .ico{width:44px;height:44px;stroke-width:2.2;filter:drop-shadow(0 4px 0 #156a881a)}.quick-blue .toy-icon{color:#138fce;background:#d8f2fc}.quick-green .toy-icon{color:#19ae96;background:#cef4e6}.quick-peach .toy-icon{color:#d99524;background:#ffe6ad}.inspire-banner{position:relative;overflow:hidden;border-radius:28px;background:#dff7fa url('hero-kids.webp') center 60%/cover no-repeat;min-height:180px;padding:30px 34px;margin:26px 0 35px}.inspire-banner p{margin:0;font-size:21px;color:#2f6178;position:relative;line-height:1.6}.inspire-banner strong{font-size:17px}.section-head h2{font-weight:900}.text-link{background:none;padding:0;color:#248f91;display:flex;align-items:center;gap:4px;font-size:13px}.text-link .ico{width:18px}.lessons{gap:18px}.lesson{border-radius:25px;border:1px solid #deeaeb;background:linear-gradient(145deg,#fff,#f1fcf7);box-shadow:0 6px 18px #245f7d05;padding:22px}.lesson:nth-child(3n+2){background:linear-gradient(145deg,#fff,#f0faff)}.lesson:nth-child(3n){background:linear-gradient(145deg,#fff,#fff8eb)}.lesson.done{border-color:#52c9af;background:#e3fff2}.lesson h3{font-size:17px;color:#214c6b}.lesson .arabic{color:#1aa48d}.lesson .ico{width:16px;height:16px}.lesson-top{color:#6b9caa;font-weight:700}.lesson-foot{align-items:center}.note{border:1px dashed #b9dfe1;background:#f3fcf9;border-radius:23px;color:#36727b}.note>.ico{width:30px;height:30px}.bottom-nav{position:fixed;z-index:4;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,1124px);padding:12px 20px max(12px,env(safe-area-inset-bottom));border:1px solid #edf0ee;border-bottom:0;border-radius:30px 30px 0 0;background:#ffffffed;backdrop-filter:blur(15px);display:flex;justify-content:space-around;box-shadow:0 -6px 28px #204a6508}.bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;color:#7895a6;font-size:11px;padding:0 12px}.bottom-nav button>span{width:53px;height:36px;border-radius:14px;display:grid;place-items:center}.bottom-nav .ico{width:26px;height:26px;stroke-width:1.9}.bottom-nav button.active{color:#0fa4b3}.bottom-nav button.active>span{background:#e5f8fa}.back{display:flex;gap:8px;align-items:center;padding:24px 0 16px}.back-arrow{transform:rotate(180deg)}.tabs{gap:10px}.tabs button{display:flex;align-items:center;gap:9px;border-radius:18px;background:#e6f7f4;color:#398e90}.tabs button.active{background:#17aa98}.tabs .ico{width:18px;height:18px}.workspace{border-radius:28px;border-color:#dbeaec;box-shadow:0 9px 25px #297d8306}.workspace .big-letter{color:#159e91}.soft{border-radius:16px;background:#f3fbfa;border-color:#dcebea;color:#377a83}.page-title{font-size:36px;margin:30px 0 12px;letter-spacing:-1px}.panel{border-radius:26px;border-color:#dbeaec;background:linear-gradient(135deg,#fff,#f5fcfa)}.panel h3{color:#245976}.panel .primary{padding:12px 20px;border-radius:13px}.achievement-hero{margin:22px 0;background:linear-gradient(130deg,#e0f9ef,#e8f7ff);border:2px solid white;border-radius:28px;text-align:center;padding:32px}.award-big{display:grid;place-items:center;margin:0 auto 24px;width:92px;height:92px;border-radius:28px;background:linear-gradient(#ffed9a,#ffe077);color:#d29425;box-shadow:0 5px 0 #e0b45933}.award-big .ico{width:62px;height:62px}.award-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}.award-card{text-align:center;padding:25px 13px;border-radius:24px;border:1px solid #dfecef;background:#f5f8fa;color:#7c9baa}.award-card>.ico{width:45px;height:45px}.award-card h3{font-size:16px;margin:17px 0 6px}.award-card p{font-size:12px}.award-card span{font-size:11px}.award-card.earned{background:#fff5cf;border-color:#f6d76c;color:#b18126}footer{padding-bottom:30px}.parent-grid{padding-top:12px}#app:has(.parent-grid),#app:has(.page-title){padding-top:25px}.record-row button{background:#dff6f0;color:#248e88}h1,h2,h3{font-weight:900}.toast{bottom:110px;background:#194d65}.feedback{color:#109787}.read-grid button,.option{border-color:#d8ece9;background:#f2fcf7;color:#159a8d;border-radius:19px}.modal{background:#fffdf8;border-radius:28px}.achievement-hero .progress{max-width:450px;margin:24px auto 0}
@media(min-width:800px){.kids-hero{min-height:400px}.continue-card,.daily-panel{max-width:100%}.quick-grid{margin:30px 0}.inspire-banner{background-position:center 60%;min-height:230px}.kids-hero h1{font-size:43px}.continue-card .resume-inner{margin-top:19px}.bottom-nav{max-width:680px}.lessons-heading{margin-top:20px}}
@media(max-width:700px){header{height:86px;padding:0 23px}.brand{font-size:23px}.brand small{font-size:8px;letter-spacing:1.1px}.logo{width:34px;height:36px;border-radius:11px}.logo .ico{width:23px;height:23px}header nav button{font-size:11px;padding:10px 12px;gap:5px}header nav .ico{width:19px;height:19px}main{padding:0 16px}.kids-hero{margin:0 -16px;padding:34px 25px 52px;min-height:340px;grid-template-columns:1.2fr 1fr;background-position:58% center;border-radius:0 0 20px 20px}.kids-hero h1{font-size:27px;line-height:1.32;margin-top:12px}.kids-hero .eyebrow{font-size:8px;letter-spacing:1px}.kids-hero p{font-size:14px;line-height:1.7;max-width:210px}.hero-chip{font-size:12px;gap:6px;padding:10px 14px;max-width:180px;border-width:3px;margin-top:20px}.hero-chip .ico{width:18px;height:18px}.mascot-space{height:auto}.continue-card{margin-top:-17px;padding:21px 17px;border-radius:27px;margin-bottom:23px}.continue-card h2{font-size:23px}.resume-inner{padding:17px 12px;gap:11px;border-radius:22px;margin:20px 0 15px}.resume-inner h3{font-size:16px;line-height:1.45}.resume-inner p{font-size:11px}.book-bubble{width:40px;height:47px;border-radius:11px}.book-bubble .ico{width:28px;height:28px}.progress-ring{width:54px;height:54px;padding:6px}.progress-ring b{font-size:13px}.primary.sunny{font-size:16px;padding:17px 12px}.daily-panel{padding:22px 18px;border-radius:26px}.daily-panel h2{font-size:19px}.daily-panel p{font-size:12px;line-height:1.65}.daily-panel .eyebrow{font-size:10px;letter-spacing:1px}.daily-panel .primary{font-size:13px;padding:15px 12px}.quick-grid{gap:10px;margin:22px 0}.quick{padding:21px 6px;border-radius:23px;gap:10px}.quick b{font-size:13px}.quick small{font-size:10px}.toy-icon{width:50px;height:51px;border-radius:15px}.toy-icon .ico{width:35px;height:35px}.inspire-banner{min-height:164px;padding:25px 21px;background-position:59% center;border-radius:24px}.inspire-banner p{font-size:16px;max-width:55%;line-height:1.6}.inspire-banner strong{font-size:13px}.lessons-heading h2{font-size:21px}.lessons-heading p{font-size:10px}.text-link{font-size:11px;white-space:nowrap}.lessons{gap:11px}.lesson{padding:17px 14px;border-radius:23px}.lesson h3{font-size:14px;line-height:1.5}.lesson p{font-size:10px}.lesson-foot{font-size:9px}.lesson-top{font-size:10px}.bottom-nav{padding-top:10px;border-radius:25px 25px 0 0}.bottom-nav button{font-size:10px;padding:0 8px}.bottom-nav .ico{width:25px;height:25px}.tabs{gap:7px;display:grid;grid-template-columns:1fr 1fr}.tabs button{font-size:12px;padding:13px 10px;justify-content:center}.tabs .ico{width:17px;height:17px}.workspace{padding:23px 13px}.workspace .controls{gap:9px}.workspace .primary{font-size:13px;padding:14px 17px}.workspace .caption{font-size:11px}.page-title{font-size:30px}.award-grid{grid-template-columns:repeat(2,1fr);gap:12px}.award-card h3{font-size:14px}.achievement-hero{padding:25px 18px}.achievement-hero h2{font-size:22px}.achievement-hero p{font-size:13px}.back{font-size:13px}.section-head .badge{white-space:nowrap}#app:has(.parent-grid) h1{font-size:29px!important;line-height:1.25}.note p{font-size:11px}.note b{font-size:12px}}
@media(max-width:365px){.brand{font-size:20px}header{padding:0 17px}.kids-hero h1{font-size:25px}.kids-hero p{font-size:13px}.resume-inner h3{font-size:14px}.progress-ring{width:45px;height:45px}.book-bubble{width:34px}.quick b{font-size:11px}.quick small{font-size:9px}}

/* Play and reward garden */
.play-panel,.star-garden{background:linear-gradient(140deg,#fff7cf,#edfff8);border:1px solid #e5ebd8;border-radius:28px;padding:28px;margin:28px 0}.game-links{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}.game-links button{display:flex;align-items:center;gap:8px;min-height:56px}.star-garden>div{font-size:36px;line-height:1.6}.match-board{display:grid;grid-template-columns:1fr 1fr;gap:35px;max-width:420px;margin:22px auto;direction:ltr}.match-board>div{display:grid;gap:12px}.match-letter{position:relative;min-height:86px;border:3px solid #d1eeec;border-radius:22px;background:#f1fcff;color:#153c5b;font:54px 'Traditional Arabic',serif}.match-letter.picked{border-color:#eab834;background:#fff5bc}.match-letter.matched{background:#c4f3df;border-color:#52ba95;opacity:.8}.match-letter small{position:absolute;right:8px;top:4px;font:18px Arial}.flower-options{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:350px;margin:25px auto}.flower-letter{background:#ffe593;border:7px solid #fff0b7;border-radius:38%;color:#163e58;min-height:114px;font:57px 'Traditional Arabic',serif;box-shadow:0 7px 0 #b5e4d7;transition:transform .2s}.flower-letter:nth-child(2n){background:#fbd9e5;border-color:#ffeaf1}.flower-letter.bloomed{background:#baf0cd;border-color:#75d8a5;transform:scale(1.08);opacity:1}.flower-letter.try-again{opacity:.4}.game-result{font-size:55px;margin:25px 0}.reward-burst{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}.reward-burst span{position:absolute;left:var(--x);bottom:12%;font-size:32px;animation:reward-rise 1.3s var(--delay) both ease-out}@keyframes reward-rise{0%{opacity:0;transform:translateY(20px) scale(.4) rotate(-20deg)}25%{opacity:1}100%{opacity:0;transform:translateY(-65vh) scale(1.2) rotate(70deg)}}@media(max-width:700px){.play-panel,.star-garden{padding:22px}.game-links{display:grid}.match-board{gap:22px}.tabs{gap:8px}.tabs button{flex:1 1 40%}}@media(prefers-reduced-motion:reduce){.reward-burst span{animation:none;bottom:40%;opacity:1}.flower-letter{transition:none}}