:root{--bg:#eaf1ff;--bg2:#f4f8ff;--paper:#fff;--ink:#22305e;--ink-soft:#69739c;--brand:#6c53f5;--sun:#ffc63c;--mint:#22c2a4;--coral:#ff8a5b;--rose:#ff6f7d;--good:#22c2a4;--shadow:0 14px 30px -14px #22305e73;--radius:26px;--tap:64px}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--ink);background:radial-gradient(1200px 700px at 15% -10%, #fff 0%, transparent 55%), radial-gradient(900px 600px at 100% 0%, #dfeaff 0%, transparent 60%), linear-gradient(180deg,var(--bg2),var(--bg));-webkit-tap-highlight-color:transparent;min-height:100%;font-family:Nunito,system-ui,Segoe UI,Roboto,sans-serif}.app{max-width:920px;margin:0 auto;padding:22px 18px 60px}button{font-family:inherit}:focus-visible{outline:4px solid var(--brand);outline-offset:3px;border-radius:16px}.top{margin:6px 2px 22px}.brandmark{object-fit:contain;box-sizing:border-box;background:var(--paper);width:52px;height:52px;box-shadow:var(--shadow);border-radius:50%;flex:none;padding:2.6px}.top{grid-template-columns:52px 1fr 52px;align-items:center;gap:10px;display:grid}.top .brandmark{justify-self:start}.top .topright{justify-self:end;margin:0}.pill.gear{border-radius:50%;place-items:center;width:52px;min-width:52px;height:52px;min-height:52px;padding:0;font-size:2.3rem;line-height:1;display:grid}.page{flex-direction:column;min-height:calc(100dvh - 82px);display:flex}.pagebody{flex:1}.footer{text-align:center;color:var(--ink-soft);margin-top:30px;padding-top:12px;font-size:.85rem;font-weight:700}.footer a{color:var(--brand);text-decoration:none}.footer a:hover{text-decoration:underline}.brandtext{text-align:center;min-width:0}.brandtext h1{letter-spacing:.3px;margin:0;font-family:Fredoka;font-size:1.15rem;font-weight:700}.brandtext p{color:var(--ink-soft);margin:2px 0 0;font-size:.74rem;font-weight:700}.lead{margin:8px 2px 4px;font-family:Fredoka;font-size:1.65rem;font-weight:600;line-height:1.15}.lead b{color:var(--brand)}.sub{color:var(--ink-soft);margin:0 2px 22px;font-weight:700}.grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;display:grid}.island{--c:var(--brand);text-align:left;cursor:pointer;background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);border:none;flex-direction:column;gap:2px;min-height:168px;padding:20px 18px 18px;transition:transform .12s,box-shadow .12s;display:flex;position:relative;overflow:hidden}.island:after{content:"";background:var(--c);opacity:.14;border-radius:50%;width:130px;height:130px;position:absolute;top:-40px;right:-40px}.island:hover{transform:translateY(-4px)}.island:active{transform:translateY(0)scale(.99)}.island .emoji{font-size:2.6rem;line-height:1}.island h3{margin:12px 0 0;font-family:Fredoka;font-size:1.18rem;font-weight:600}.island .desc{color:var(--ink-soft);margin-top:2px;font-size:.88rem;font-weight:700}.island .go{color:var(--c);background:color-mix(in srgb,var(--c) 14%,white);border-radius:999px;align-self:flex-start;margin-top:auto;padding:7px 16px;font-family:Fredoka;font-size:.95rem;font-weight:600}.island.soon{opacity:.62;cursor:default}.island.soon .go{color:var(--ink-soft);background:#eef1f8}.play{--c:var(--brand)}.playbar{align-items:center;gap:12px;margin:2px 2px 18px;display:flex}.back{background:var(--paper);box-shadow:var(--shadow);color:var(--ink);cursor:pointer;border:none;border-radius:16px;padding:12px 16px;font-family:Fredoka;font-size:1rem;font-weight:600}.back:active{transform:scale(.97)}.playtitle{font-family:Fredoka;font-size:1.15rem;font-weight:600}.stars{filter:grayscale();opacity:.35;gap:5px;margin-left:auto;font-size:1.35rem;display:flex}.stars .on{filter:none;opacity:1}.card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;padding:26px 22px;position:relative;overflow:hidden}.instruction{margin:0 0 6px;font-family:Fredoka;font-size:1.5rem;font-weight:600}.hint{color:var(--ink-soft);margin:0 0 16px;font-weight:700}.objects{flex-wrap:wrap;justify-content:center;gap:10px;max-width:520px;margin:6px auto 22px;display:flex}.obj{font-size:2.5rem;line-height:1;animation:.35s backwards pop}@keyframes pop{0%{opacity:0;transform:scale(0)rotate(-15deg)}to{transform:scale(1)}}.equation{letter-spacing:2px;margin:8px 0 26px;font-family:Fredoka;font-size:3.2rem;font-weight:700}.equation .q{color:var(--c)}.choices{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:14px;max-width:520px;margin:0 auto;display:grid}.choice{min-height:var(--tap);background:var(--paper);color:var(--ink);cursor:pointer;border:3px solid #eef1f8;border-radius:20px;padding:14px 10px;font-family:Fredoka;font-size:1.9rem;font-weight:600;transition:transform 80ms,box-shadow 80ms;box-shadow:0 6px #e6eaf5}.choice:hover{border-color:var(--c)}.choice:active{transform:translateY(4px);box-shadow:0 2px #e6eaf5}.choice.wrong{border-color:var(--rose);color:var(--rose);box-shadow:none;opacity:.7;background:#fff2f3;animation:.4s shake}.choice.right{border-color:var(--good);color:var(--good);box-shadow:none;background:#e9fbf6}.choice.big{flex-direction:column;min-height:120px;padding:16px;font-size:1.15rem}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-9px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(4px)}}.panelobjs{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px;font-size:1.7rem;display:flex}.bond{flex-direction:column;align-items:center;margin:2px auto 16px;display:flex}.bond-top{background:color-mix(in srgb,var(--c) 16%,white);border:3px solid var(--c);width:66px;height:66px;color:var(--ink);border-radius:50%;place-items:center;font-family:Fredoka;font-size:1.9rem;font-weight:700;display:grid}.bond-legs{width:200px;height:46px;display:block}.bond-legs line{stroke:var(--c);stroke-width:4px;stroke-linecap:round}.bond-parts{gap:74px;display:flex}.bond-box{width:60px;height:60px;color:var(--ink-soft);border:3px dashed #cfd6ea;border-radius:16px;place-items:center;font-family:Fredoka;font-size:1.7rem;font-weight:700;transition:all .2s;display:grid}.bond-box.filled{border-style:solid;border-color:var(--good);color:var(--good);background:#e9fbf6;animation:.3s pop}.numline{flex-wrap:wrap;justify-content:center;gap:6px;max-width:560px;margin:34px auto 8px;display:flex;position:relative}.tick{width:46px;height:56px;color:var(--ink);cursor:pointer;background:#fff;border:3px solid #eef1f8;border-radius:14px;font-family:Fredoka;font-size:1.1rem;font-weight:600;box-shadow:0 5px #e6eaf5}.tick:active{transform:translateY(3px);box-shadow:0 2px #e6eaf5}.tick.right{border-color:var(--good);background:#e9fbf6}.tick.wrong{border-color:var(--rose);background:#fff2f3;animation:.4s shake}.frog{font-size:2rem;transition:transform .35s cubic-bezier(.5,1.6,.5,1)}.fox{font-size:2.2rem;transition:transform .2s;position:absolute;bottom:14px;left:18px}.fox.cheer{animation:.5s bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-14px)scale(1.15)}}.done{text-align:center;padding:20px 10px}.done .big{margin:0;font-size:4rem}.done h2{margin:8px 0 2px;font-family:Fredoka;font-size:1.7rem;font-weight:700}.done p{color:var(--ink-soft);margin:0 0 20px;font-weight:700}.donebtns{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.btn{cursor:pointer;box-shadow:var(--shadow);border:none;border-radius:18px;padding:15px 22px;font-family:Fredoka;font-size:1.05rem;font-weight:600}.btn.primary{background:var(--brand);color:#fff}.btn.ghost{background:var(--paper);color:var(--ink)}#confetti{pointer-events:none;z-index:50;position:fixed;inset:0}.confetti-bit{will-change:transform,opacity;border-radius:3px;width:11px;height:11px;position:absolute}@media (width<=480px){.equation{font-size:2.5rem}.instruction{font-size:1.25rem}.grid{grid-template-columns:1fr 1fr}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.app{position:relative}.topright{align-items:center;gap:8px;margin-left:auto;display:flex}.pill{background:var(--paper);box-shadow:var(--shadow);color:var(--ink);cursor:pointer;border:none;border-radius:999px;align-items:center;gap:6px;padding:10px 14px;font-family:Fredoka;font-size:1rem;font-weight:600;display:flex}.pill:active{transform:scale(.97)}.profiles{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;max-width:640px;margin:10px auto 0;display:grid}.profile{--c:var(--brand);background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);cursor:pointer;border:4px solid #0000;flex-direction:column;align-items:center;gap:10px;padding:26px 18px;transition:transform .12s;display:flex}.profile:hover{border-color:var(--c);transform:translateY(-4px)}.profile .faces{letter-spacing:6px;font-size:2.6rem}.profile h3{color:var(--c);margin:0;font-family:Fredoka;font-size:1.6rem;font-weight:700}.tray{background:#f4f6fc;border-radius:22px;flex-wrap:wrap;justify-content:center;gap:10px;max-width:660px;margin:14px auto 0;padding:12px;display:flex}.tile{min-width:58px;height:58px;color:var(--ink);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:#fff;border:3px solid #e2e7f3;border-radius:16px;place-items:center;padding:0 10px;font-family:Fredoka;font-size:1.7rem;font-weight:700;display:grid;box-shadow:0 5px #e2e7f3}.tile:active{cursor:grabbing}.tile.selected{border-color:var(--c);box-shadow:0 5px 0 color-mix(in srgb,var(--c) 45%,white)}.tile.lifted{opacity:.25}.tile.shake{border-color:var(--rose);animation:.4s shake}.tile.obj{border-radius:50%;min-width:54px;height:54px;font-size:2rem}.slot{transition:transform .15s,border-color .15s,background .15s}.slot.active{animation:1.2s ease-in-out infinite glow;border-color:var(--c)!important;border-style:solid!important}.slot.over{transform:scale(1.12);background:color-mix(in srgb,var(--c) 14%,white)!important}@keyframes glow{0%,to{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 45%,transparent)}50%{box-shadow:0 0 0 9px #0000}}.dnd-ghost{z-index:60;pointer-events:none;transform-origin:50%;filter:drop-shadow(0 10px 14px #22305e4d);position:fixed;top:0;left:0}.dnd-ghost .tile{cursor:grabbing;transform:scale(1.12)}.hand{z-index:61;pointer-events:none;font-size:2.4rem;transition:opacity .2s;position:fixed}.resbox{min-width:1.4em;height:1.25em;color:var(--c);vertical-align:middle;border:4px dashed #cfd6ea;border-radius:18px;place-items:center;padding:0 .12em;line-height:1;display:inline-grid}.resbox.filled{border-style:solid;border-color:var(--good);color:var(--good);background:#e9fbf6}.twenty{background:#f4f6fc;border-radius:22px;flex-direction:column;gap:8px;margin:4px auto 6px;padding:12px;display:inline-flex}.trow{gap:4px;display:flex}.tgap{width:12px}.tcell{background:#fff;border:2px solid #e2e7f3;border-radius:12px;place-items:center;width:44px;height:44px;font-size:1.65rem;line-height:1;display:grid}.tcell .o{animation:.3s backwards pop}.tcell .o.gone{opacity:.18;filter:grayscale();transition:opacity .4s}.trow.full{outline:3px solid var(--good);outline-offset:3px;border-radius:12px}.tcell.next{border-color:var(--c);border-style:dashed}@media (width<=560px){.tcell{border-radius:8px;width:26px;height:26px;font-size:1rem}.tgap{width:6px}}.bubble{border:3px solid var(--c);text-align:left;max-width:calc(100% - 90px);box-shadow:var(--shadow);background:#fff;border-radius:18px 18px 18px 4px;padding:8px 14px;font-family:Fredoka;font-size:1.05rem;font-weight:600;animation:.25s pop;position:absolute;bottom:18px;left:64px}.caption{background:color-mix(in srgb,var(--c) 10%,white);border-radius:18px;max-width:560px;min-height:3.2em;margin:4px auto 12px;padding:10px 16px;font-family:Fredoka;font-size:1.3rem;font-weight:600}.demobar{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px;display:flex}.demotag{background:var(--c);color:#fff;border-radius:999px;margin-bottom:8px;padding:4px 14px;font-family:Fredoka;font-weight:600;display:inline-block}.hl{animation:.6s bounce}.instruction b{color:var(--c)}.voicepick{color:var(--ink-soft);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:22px;font-weight:700;display:flex}.voicepick select{font:inherit;color:var(--ink);background:var(--paper);border:2px solid #e2e7f3;border-radius:12px;max-width:280px;padding:8px 10px}.section+.section{margin-top:30px}.section-title{color:var(--ink);margin:0 2px 12px;font-family:Fredoka;font-size:1.3rem;font-weight:600}.poem{--poem-size:1.35rem}.poem-title{color:var(--ink);margin:4px 0 0;font-family:Fredoka;font-size:2rem;font-weight:700}.poem-author{color:var(--ink-soft);margin:4px 0 22px;font-weight:700}.playbtn{cursor:pointer;background:var(--c);color:#fff;width:116px;height:116px;box-shadow:0 10px 0 color-mix(in srgb,var(--c) 70%,black), var(--shadow);border:none;border-radius:50%;place-items:center;margin:0 auto;transition:transform 80ms,box-shadow 80ms;display:grid}.playbtn svg{width:56px;height:56px}.playbtn:active{box-shadow:0 4px 0 color-mix(in srgb,var(--c) 70%,black), var(--shadow);transform:translateY(6px)}.playbtn.on{animation:2.4s ease-in-out infinite breathe}.playbtn:disabled{opacity:.4;cursor:default;animation:none}@keyframes breathe{0%,to{outline:0 solid #0000}50%{outline:10px solid color-mix(in srgb,var(--c) 22%,transparent)}}.readers{flex-wrap:wrap;justify-content:center;gap:12px;margin:26px 0 4px;display:flex}.reader{min-height:var(--tap);background:var(--paper);min-width:150px;color:var(--ink);cursor:pointer;border:3px solid #eef1f8;border-radius:20px;justify-content:center;align-items:center;gap:10px;padding:8px 18px;font-family:Fredoka;font-size:1.1rem;font-weight:600;display:flex;box-shadow:0 6px #e6eaf5}.reader span{font-size:1.7rem;line-height:1}.reader[aria-pressed=true]{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,white);box-shadow:0 6px 0 color-mix(in srgb,var(--c) 40%,white)}.reader:disabled{opacity:.4;cursor:default}.note{color:var(--ink-soft);margin:10px 0 0;font-size:.92rem;font-weight:700}.verses{text-align:left;font-size:var(--poem-size);max-width:100%;margin:28px auto 4px;font-weight:700;line-height:1.75;display:inline-block}.stanza{margin:0 0 1.1em}.stanza:last-child{margin-bottom:0}.verse{border-radius:10px;margin:0 -.4em;padding:0 .4em;transition:background .3s;display:block}.verse.now{background:color-mix(in srgb,var(--c) 20%,white)}@media (width<=480px){.poem{--poem-size:1.1rem}.playbtn{width:96px;height:96px}}.progress{color:var(--ink-soft);margin:0 0 8px;font-weight:700}.grainimg{object-fit:contain;border-radius:16px;max-width:100%;max-height:44vh;margin:6px auto 14px;display:block}.grainimg.small{max-height:16vh}.choices.column{grid-template-columns:1fr;max-width:340px}.choices.column .choice{min-height:64px;font-size:1.5rem}.foodtile{min-height:var(--tap);background:var(--paper);cursor:pointer;border:3px solid #eef1f8;border-radius:16px;padding:6px;box-shadow:0 4px #e6eaf5}.foodtile.picked{border-color:var(--good);background:#e9fbf6}.foodtile.wrong{border-color:var(--rose);animation:.4s shake}@media (prefers-reduced-motion:reduce){.foodtile.wrong{animation:none}}.foodtile:disabled{cursor:default}.foodtile .foodpic{max-width:100%;margin:0 auto}.grainimg.choiceimg{width:100%;max-height:140px;margin:0}.grainword{overflow-wrap:anywhere;margin:6px 0 18px;font-family:Fredoka;font-size:2.4rem;font-weight:700}.grainbtn{min-height:var(--tap);min-width:var(--tap)}.grainrow{flex-wrap:wrap;justify-content:center;gap:12px;margin:12px 0;display:flex}.strokecanvas{border:3px dashed var(--c);touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair;background:#fffdf4;border-radius:20px;width:100%;height:clamp(200px,34vh,320px);display:block}.grainfeedback{min-height:1.6em;margin:8px 0;font-weight:700}.grainfeedback.ok{color:var(--good)}.grainfeedback.wrong{color:var(--rose)}.typeform{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.typeinput{min-height:var(--tap);border:3px solid var(--c);border-radius:16px;width:260px;max-width:100%;padding:8px 16px;font:600 1.5rem Fredoka}.grainlearn section{margin-bottom:26px}.graingrid{text-align:left;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;display:grid}.graincard{background:#f7f9ff;border-radius:18px;margin:0;padding:10px}.graincard img{object-fit:contain;border-radius:12px;width:100%;max-height:200px}.graincard p{color:var(--ink-soft);margin:6px 0 0;font-size:.9rem;font-weight:600}.choice.right:after{content:" ✓"}.choice.wrong:after{content:" ✗"}.revealcard{text-align:center;background:#f7f9ff;border-radius:18px;padding:10px}.revealcard summary{cursor:pointer;min-height:var(--tap);-webkit-tap-highlight-color:transparent;list-style:none}.revealcard summary::-webkit-details-marker{display:none}.revealcard summary:focus-visible{outline:3px solid var(--c);border-radius:12px}.revealcard img{object-fit:contain;border-radius:12px;width:100%;max-height:200px;display:block}.revealtext{text-align:left;margin:8px 0 0;font-weight:600}.revealtext b{font-family:Fredoka;font-size:1.2rem}.revealtext p{color:var(--ink-soft);margin:4px 0 0}.revealcard[open]{box-shadow:0 0 0 3px var(--c)}.foodpic{background-repeat:no-repeat;border-radius:12px;width:100%;max-width:200px;margin:0 auto}.visual .foodpic,.card>.foodpic{max-width:280px;margin:6px auto 16px}.graingrid.foods{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.breadsteps{gap:14px;max-width:420px;margin:0 auto;padding:0;list-style:none;display:grid}.breadsteps li{position:relative}.stepno{z-index:1;background:var(--c);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font:700 1.1rem Fredoka;display:flex;position:absolute;top:-6px;left:-6px}.plantwrap{border-radius:12px;width:min(100%,340px);margin:6px auto 12px;position:relative;overflow:hidden}.plantimg{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.plantarrows{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.plantline{stroke:var(--rose);stroke-width:14px;stroke-linecap:round}.plantlabel{border:3px solid var(--rose);color:var(--ink);white-space:nowrap;box-shadow:var(--shadow);z-index:1;background:#fff;border-radius:14px;padding:4px 10px;font:700 .95rem Fredoka;position:absolute;transform:translate(-50%,-50%)}.plantchoices{max-width:340px}.plantchoice{min-height:var(--tap);padding:10px 8px;font-size:1.1rem}.plantline.blink{animation:1s ease-in-out infinite fadeline}@keyframes fadeline{0%,to{opacity:.35}50%{opacity:1}}@media (prefers-reduced-motion:reduce){.plantline.blink{animation:none}}.plantcard{padding-bottom:62vh}.plantpanel{z-index:20;background:var(--paper);border-radius:var(--radius) var(--radius) 0 0;max-width:520px;max-height:55vh;box-shadow:var(--shadow);margin:0 auto;padding:12px 16px 16px;position:fixed;bottom:0;left:0;right:0;overflow-y:auto}.sectiongrid{grid-template-columns:1fr;gap:12px;margin-top:4px;display:grid}.sectioncard{text-align:left;cursor:pointer;background:var(--paper);box-shadow:var(--shadow);color:var(--ink);border:none;border-radius:20px;align-items:center;gap:14px;padding:10px 14px 10px 10px;font-family:inherit;transition:transform .15s;display:flex;position:relative;overflow:hidden}.sectioncard:after{content:"";background:var(--c);opacity:.12;border-radius:50%;width:90px;height:90px;position:absolute;top:-30px;right:-30px}.sectioncard:hover{transform:translateY(-4px)}.sectioncard:active{transform:translateY(0)scale(.99)}.sectionart{aspect-ratio:5/4;object-fit:cover;border-radius:14px;flex:none;width:104px;display:block}.sectiontext{flex-direction:column;min-width:0;display:flex}.sectioncard h3{margin:0;font-family:Fredoka;font-size:1.1rem;font-weight:600;line-height:1.2}.sectioncard .desc{color:var(--ink-soft);margin-top:2px;font-size:.8rem;font-weight:700}.sectioncard .go{color:var(--c);align-self:flex-start;margin-top:6px;font-family:Fredoka;font-size:.9rem;font-weight:600}@media (width>=700px){.sectiongrid{grid-template-columns:repeat(3,1fr)}.sectioncard{flex-direction:column;align-items:stretch;gap:2px;padding:10px 10px 14px}.sectionart{width:100%;margin-bottom:8px}.sectioncard h3{margin:0 4px}.sectioncard .desc,.sectioncard .go{margin-left:4px}}.settings{padding:10px 22px}.setting{border-bottom:2px solid #eef1f8;flex-direction:column;align-items:center;gap:12px;padding:18px 0;display:flex}.setting:last-child{border-bottom:none}.setlabel{font-family:Fredoka;font-size:1.15rem;font-weight:600}
