@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Fredoka:wght@500;600;700&display=swap');
:root{--ink:#254938;--green:#3a9b68;--leaf:#dff2ce;--yellow:#ffcf55;--pink:#ffb3bc;--sky:#d9f2ff;--cream:#fffdf4;--line:#e5ebd9;--shadow:0 8px 22px #355d3912;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:#f6faec}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 12% 5%,#e5f5d7 0,transparent 32%),radial-gradient(ellipse at 98% 25%,#fff0d2 0,transparent 25%),#f6faec}.topbar{height:72px;padding:0 clamp(16px,5vw,70px);display:flex;align-items:center;justify-content:space-between;background:#ffffffd9;border-bottom:1px solid #e9efdf;position:sticky;top:0;z-index:3;backdrop-filter:blur(12px)}.brand{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:9px;font:700 26px Fredoka,sans-serif;letter-spacing:-.6px}.brand-mark{font-size:28px}.brand-soft{color:var(--green)}.top-actions{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:900}.age-pill,.stars,.progress-pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px}.stars{background:#fff4ca;border-color:#f7e5a4}main{max-width:1200px;margin:auto;padding:30px clamp(16px,4vw,48px) 44px}.screen{animation:appear .35s ease}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}[hidden]{display:none!important}.welcome{min-height:320px;border-radius:30px;background:linear-gradient(115deg,#ddf2cf,#eef9de 58%,#fff4ce);display:flex;align-items:center;justify-content:space-between;padding:clamp(26px,5vw,58px);position:relative;overflow:hidden}.welcome:after{content:"";position:absolute;right:-60px;bottom:-145px;width:440px;height:270px;border-radius:50%;background:#acd68e66}.welcome-copy{position:relative;z-index:1}.eyebrow{font-size:11px;font-weight:900;letter-spacing:1.6px;color:#6a9b66;margin:0 0 8px}.welcome h1,.page-head h1{font:600 clamp(34px,5vw,58px)/1.05 Fredoka,sans-serif;letter-spacing:-1.6px;margin:0;color:#254938}.welcome h1 em{font-style:normal;color:#e59749}.welcome-copy>p:not(.eyebrow){font-size:17px;color:#587363;margin:14px 0 20px}.garden-tags{display:flex;gap:8px;flex-wrap:wrap}.garden-tags span{background:#ffffffc9;border:1px solid #d8e9c9;border-radius:99px;padding:8px 12px;font-size:13px;font-weight:900}.welcome-art{position:relative;z-index:1;width:270px;height:220px;flex:none}.sun{position:absolute;right:38px;top:0;font-size:56px}.big-plant{position:absolute;right:85px;bottom:0;font-size:114px;filter:drop-shadow(0 7px 5px #42652b18)}.little-buddy{position:absolute;right:0;bottom:2px;font-size:75px;transform:rotate(-8deg)}.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}.module-card{border:0;text-align:left;color:var(--ink);display:flex;align-items:center;gap:18px;padding:22px 24px;min-height:132px;border-radius:24px;box-shadow:var(--shadow);cursor:pointer;transition:transform .2s,box-shadow .2s}.module-card:hover,.learn-tile:hover,.object-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px #355d3920}.learn-card{background:#fff}.color-card{background:#fff1e1}.module-icon{width:72px;height:72px;border-radius:22px;background:#edf8e7;display:grid;place-items:center;font-size:37px;flex:none}.color-card .module-icon{background:#ffe0db}.module-text{display:flex;flex-direction:column;gap:3px}.module-text small{font-size:10px;letter-spacing:1.4px;color:#75a477;font-weight:900}.module-text strong{font:600 24px Fredoka,sans-serif}.module-text>span{font-size:13px;color:#6c8070}.arrow{margin-left:auto;font-size:25px;color:#82ad79}.home-footer{display:flex;justify-content:space-between;gap:12px;color:#779079;font-size:13px;padding:24px 4px 0;font-weight:800}.adult-note{font-weight:700}.page-head{display:flex;align-items:center;gap:20px;margin:8px 0 28px}.page-head>div{flex:1}.page-head h1{font-size:clamp(27px,4vw,42px);letter-spacing:-.8px}.page-head h1 span{font-size:.75em}.back{border:1px solid #e1ead7;border-radius:99px;background:#fff;color:#456650;padding:10px 15px;font:900 13px Nunito;cursor:pointer}.progress-pill{font-size:12px;font-weight:900;color:#638262;white-space:nowrap}.learn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.learn-tile{border:1px solid #e7eddf;background:#fff;border-radius:23px;min-height:205px;padding:20px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;color:var(--ink);box-shadow:var(--shadow);cursor:pointer;transition:.2s}.learn-tile>span{font-size:38px;margin-bottom:8px}.learn-tile strong{font:600 23px Fredoka,sans-serif}.learn-tile small{color:#758779;font-weight:800;margin-top:3px}.learn-tile i{font-style:normal;color:var(--green);font-size:13px;font-weight:900;margin-top:auto;padding-top:15px}.letters-tile{background:#f4f9ff}.numbers-tile{background:#fff8e4}.trace-tile{background:#fff0ef}.learning-panel{margin-top:20px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);min-height:230px}.panel-top{display:flex;align-items:center;gap:12px}.panel-top h2{font:600 24px Fredoka;margin:0;flex:1}.small-btn{border:1px solid var(--line);background:#f8fbf2;border-radius:99px;padding:8px 12px;font:900 12px Nunito;color:var(--ink);cursor:pointer}.alphabet-grid{display:grid;grid-template-columns:repeat(13,1fr);gap:7px;margin-top:18px}.letter-btn{border:0;border-radius:12px;aspect-ratio:1;background:#f2f8e9;color:#3e6847;font:600 20px Fredoka;cursor:pointer}.letter-btn:hover,.letter-btn.done{background:#cdebb3}.letter-prompt{text-align:center;margin-top:16px;color:#5f7863;font-size:13px;font-weight:800}.number-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:18px}.number-btn{border:0;border-radius:9px;aspect-ratio:1;background:#fff4d2;color:#635326;font:900 14px Nunito;cursor:pointer}.number-btn.done{background:#d5edc5;color:#366545}.trace-box{display:flex;gap:18px;align-items:center;margin-top:18px}.trace-canvas{touch-action:none;width:min(100%,600px);height:230px;border-radius:18px;background:#f3f9e9;border:2px dashed #c6dfb2}.trace-side{min-width:150px}.trace-letter{font:600 86px Fredoka;color:#deedcf;line-height:1;text-align:center}.trace-side p{font-size:13px;color:#66806d;font-weight:800;text-align:center}.trace-actions{display:flex;gap:8px;justify-content:center;margin-top:10px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.filter{border:1px solid #e3ebd8;border-radius:99px;padding:9px 14px;background:#fff;color:#5b735f;font:900 13px Nunito;cursor:pointer}.filter.active{background:#dff0d2;border-color:#d2e8c3;color:#315f3e}.filter b{background:#ffffffa8;border-radius:99px;padding:1px 6px;margin-left:3px}.activity-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(330px,.9fr);gap:18px;align-items:start}.object-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;max-height:calc(100vh - 250px);overflow:auto;padding:2px 5px 8px 2px}.object-card{border:1px solid #e6eddf;background:#fff;border-radius:16px;min-height:98px;padding:9px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink);cursor:pointer;transition:.18s;box-shadow:0 3px 10px #355d3909}.object-card.selected{outline:3px solid #9bd38a;background:#f2faeb}.object-card .obj-icon{font-size:32px;line-height:1}.object-card .obj-name{font-size:11px;font-weight:900;text-align:center}.object-card .obj-cat{font-size:9px;color:#91a28f;text-transform:capitalize}.coloring-studio{border:1px solid #e4ebdc;border-radius:24px;background:#fff;padding:16px;box-shadow:var(--shadow);position:sticky;top:88px}.studio-heading{display:flex;align-items:center;gap:10px}.studio-heading>div{flex:1}.studio-heading h2{font:600 21px Fredoka;margin:0}.icon-button{border:1px solid var(--line);background:#f7faf2;border-radius:12px;width:36px;height:36px;font-size:20px;cursor:pointer;color:#527458}.art-stage{height:255px;background:#fffdf5;border:1px dashed #e6e2c9;border-radius:18px;margin:12px 0;padding:6px;display:grid;place-items:center;overflow:hidden;position:relative;touch-action:none}.empty-art{text-align:center;color:#8da18c;font-size:13px;font-weight:800}.empty-art span{font-size:54px}.coloring-svg{height:100%;width:100%;min-height:0;min-width:0;max-width:100%;max-height:100%;display:block;overflow:visible}.coloring-svg .paintable{fill:#fffefa;stroke:#425e4c;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;cursor:pointer;transition:fill .16s}.coloring-svg .detail{fill:none;stroke:#425e4c;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.coloring-svg .fill-detail{fill:#fffefa;stroke:#425e4c;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;cursor:pointer}.coloring-svg .paintable:hover,.coloring-svg .fill-detail:hover{fill:#f6efc9}.palette-wrap{display:flex;align-items:center;gap:10px}.palette-label{font-size:11px;font-weight:900;color:#6b806b;white-space:nowrap}.palette{display:flex;gap:6px;flex:1;justify-content:space-between}.swatch{width:25px;height:25px;border-radius:50%;border:2px solid #ffffff;box-shadow:0 0 0 1px #dfe6d9;cursor:pointer;padding:0}.swatch.active{box-shadow:0 0 0 2px #3d7350;transform:scale(1.1)}.studio-tip{color:#819081;font-size:11px;font-weight:800;margin:10px 0}.studio-actions{display:flex;gap:8px}.brush-toggle,.save-art{border:0;border-radius:12px;padding:10px 12px;font:900 12px Nunito;cursor:pointer}.brush-toggle{background:#eff5e8;color:#527258}.brush-toggle.active{background:#d8eec9}.save-art{background:#4b9d66;color:#fff;flex:1}.save-art:disabled{opacity:.5;cursor:default}.brush-canvas{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);touch-action:none}.toast{position:fixed;z-index:9;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;background:#254938;color:#fff;padding:11px 18px;border-radius:99px;font-weight:900;font-size:13px;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:850px){.activity-layout{grid-template-columns:1fr}.coloring-studio{position:static}.object-grid{max-height:290px;grid-template-columns:repeat(6,minmax(0,1fr))}.activity-layout .coloring-studio{grid-row:1}.page-head{flex-wrap:wrap}.page-head .progress-pill{margin-left:auto}.welcome-art{transform:scale(.8);transform-origin:right center;margin-left:-40px}}@media(max-width:600px){.topbar{height:60px}.age-pill{display:none}main{padding-top:16px}.welcome{min-height:275px;padding:24px;border-radius:23px}.welcome h1{font-size:39px}.welcome-copy>p:not(.eyebrow){font-size:14px;max-width:240px}.welcome-art{position:absolute;right:-20px;bottom:-35px;opacity:.55;transform:scale(.75)}.garden-tags{max-width:210px}.module-grid{grid-template-columns:1fr;gap:10px;margin-top:12px}.module-card{min-height:100px;padding:16px;border-radius:19px}.module-icon{width:58px;height:58px;font-size:30px}.module-text strong{font-size:21px}.home-footer{flex-direction:column;padding-top:16px}.page-head{gap:10px;margin-bottom:17px}.page-head h1{font-size:28px}.progress-pill{padding:7px 10px;font-size:10px}.learn-grid{grid-template-columns:1fr;gap:9px}.learn-tile{min-height:135px;padding:16px}.learn-tile>span{font-size:29px}.learn-tile strong{font-size:20px}.learn-tile i{padding-top:7px}.alphabet-grid{grid-template-columns:repeat(7,1fr)}.number-grid{grid-template-columns:repeat(8,1fr)}.number-btn{font-size:12px}.trace-box{flex-direction:column}.trace-canvas{height:200px}.trace-side{width:100%}.object-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:260px}.coloring-studio{padding:12px}.art-stage{height:235px}.page-head>div{min-width:180px}}