:root{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color:#304258;background:#e9f6ff;--blue:#428be4;--ink:#304258}*{box-sizing:border-box}body{margin:0;min-width:310px}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #286fbb;outline-offset:2px}.hidden{display:none!important}.topbar{position:sticky;top:0;z-index:8;background:#ffffffef;backdrop-filter:blur(12px);padding:12px max(16px,calc((100vw - 1080px)/2));display:flex;justify-content:space-between;align-items:center;box-shadow:0 3px 14px #7cacc42b}.brand{border:0;background:none;display:flex;align-items:center;gap:9px;text-align:left;color:#2873b7;padding:0}.brand-icon{font-size:34px}.brand strong{font-size:19px;display:block}.brand small{display:block;font-size:11px;color:#6d8c9e}.top-actions{display:flex;align-items:center;gap:7px}.pocket{background:#fff4ce;border:2px solid #ffe29a;padding:8px 11px;border-radius:25px;font-weight:800}.round{border:0;border-radius:50%;background:#eaf4ff;width:41px;height:41px;font-size:20px}main{max-width:1080px;margin:0 auto;padding:18px 14px 110px;min-height:calc(100vh - 90px)}.hero{background:linear-gradient(135deg,#b9e8ff,#d5f9ef 62%,#fff1c5);border:3px solid #fff;border-radius:26px;padding:23px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 8px 20px #94bfd14a}.hero h1{margin:0 0 8px;font-size:clamp(23px,4vw,34px);color:#226ba1}.hero p{margin:0;color:#52768a}.hero .mascot{font-size:68px;filter:drop-shadow(0 7px 1px #c4dcae)}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.chip{background:#ffffffba;padding:7px 11px;border-radius:30px;font-weight:700;font-size:12px}.section{margin:23px 0 12px;display:flex;justify-content:space-between;align-items:center;gap:12px}.section h2{margin:0;font-size:20px;color:#266b9a}.section p{margin:5px 0 0;color:#688397;font-size:13px}.selector{border:2px solid #b5ddf7;border-radius:13px;background:white;padding:10px;font-weight:750;color:#376e9d}.islands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.island,.tile{border:none;border-radius:20px;text-align:left;padding:16px;background:var(--tile,#fff);min-height:137px;box-shadow:0 6px 0 #5582a024,0 9px 18px #7fb6d020;transition:transform .12s}.island:active,.tile:active{transform:translateY(3px)}.island .emoji{display:block;font-size:42px;line-height:1.3}.island strong{display:block;font-size:16px;margin:4px 0}.island small,.tile small{color:#687988;display:block;font-size:12px}.track{height:8px;border-radius:99px;background:#ffffffaa;overflow:hidden;margin-top:11px}.track>i{display:block;height:100%;background:#40b783;border-radius:99px}.features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.feature{border:none;text-align:left;border-radius:19px;padding:17px;min-height:107px;background:#fee5f2}.feature:last-child{background:#e1e1ff}.feature b{display:block;margin:4px 0}.feature span{font-size:30px}.card{background:white;border-radius:21px;padding:18px;margin-top:12px;box-shadow:0 7px 20px #93bfd127}.course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tile{background:white;min-height:160px}.tile .emoji{font-size:35px;display:block}.tile strong{display:block;font-size:15px;margin:6px 0}.tile .lessoncount{font-size:12px;color:#287aaf;font-weight:800}.tag{display:inline-block;background:#e9f4ff;border-radius:20px;padding:5px 9px;font-size:12px;color:#427c9d;font-weight:750}.primary,.secondary{border:0;background:#4b92f2;color:white;padding:13px 18px;border-radius:14px;font-weight:800}.secondary{background:#e3f0fd;color:#286899}.primary:disabled{opacity:.5}.back{border:0;background:white;border-radius:15px;padding:9px 12px;margin-bottom:13px;color:#3378af;font-weight:750}.lessonrow{width:100%;display:flex;gap:13px;align-items:center;border:2px solid #e7f2fb;background:white;border-radius:18px;margin:11px 0;padding:13px;text-align:left;color:inherit}.lessonrow .emoji{font-size:37px}.lessonrow .info{flex:1}.lessonrow strong{display:block}.lessonrow small{color:#728b9b}.lessonrow .right{font-size:22px;color:#35a884}.scene{text-align:center;min-height:110px;display:grid;place-items:center;font-size:clamp(34px,7vw,60px);border-radius:19px;background:linear-gradient(135deg,#effbff,#fff5e2);margin:15px 0;padding:12px;word-break:break-word}.question{font-size:20px;font-weight:850;text-align:center;line-height:1.5}.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:17px 0}.choice{border:3px solid #d8eafc;background:white;border-radius:18px;padding:17px 8px;min-height:76px;font-size:16px;font-weight:750;color:#305472}.choice.correct{background:#d7f9df;border-color:#45bc7a}.choice.wrong{background:#ffe7e7;border-color:#ef7979}.status{padding:13px;border-radius:15px;background:#edf8ff;color:#336f95;min-height:48px;text-align:center;font-weight:700}.bar{height:11px;background:#e0eff8;border-radius:30px;overflow:hidden;margin:11px 0}.bar i{display:block;height:100%;background:#40bf91}.nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:9;background:white;box-shadow:0 -3px 20px #5e93b42b;padding:8px max(8px,calc((100vw - 1000px)/2)) max(8px,env(safe-area-inset-bottom))}.nav button{flex:1;border:0;background:transparent;color:#738ea0;font-weight:750;font-size:11px;padding:5px 2px}.nav button span{display:block;font-size:23px}.nav button.active{color:#2e85c8;background:#ecf7ff;border-radius:14px}.overlay{position:fixed;inset:0;z-index:20;background:#19354c94;display:grid;place-items:center;padding:18px}.dialog{width:min(100%,500px);max-height:85vh;overflow:auto;background:#fff;border-radius:23px;padding:27px 19px 18px;position:relative}.dismiss{position:absolute;right:13px;top:10px;border:0;background:#edf3fa;border-radius:50%;width:34px;height:34px}.dialog h2{margin:6px 0 15px;color:#2d78ae}.dialog label{display:block;font-weight:750;margin:14px 0 5px}.dialog input,.dialog select,.dialog textarea{width:100%;border:2px solid #dae8f1;padding:10px;border-radius:10px;background:white;color:#334}.dialog textarea{min-height:160px}.dialog .primary,.dialog .secondary{margin:6px 5px 0 0}.muted{color:#6d8696;font-size:13px;line-height:1.6}.toast{position:fixed;z-index:40;bottom:83px;left:50%;transform:translateX(-50%);background:#284b65;color:white;padding:10px 17px;border-radius:30px;max-width:90vw;opacity:0;pointer-events:none}.toast.show{opacity:1}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{text-align:center;background:#eff8ff;border-radius:13px;padding:12px 4px}.stat b{display:block;font-size:24px;color:#347fae}.stat small{font-size:10px;color:#607a8f}.note{color:#7791a1;font-size:12px;line-height:1.6}.age-label{font-weight:800;color:#3a7aaa}.empty{padding:24px;background:#fff;border-radius:16px;text-align:center;color:#789}.prompt-goals{background:#e8f6ff;padding:12px;border-radius:15px;font-size:13px;margin:12px 0}.adminhint{font-size:12px;color:#64839b}@media(min-width:670px){.islands{grid-template-columns:repeat(4,1fr)}.course-grid{grid-template-columns:repeat(3,1fr)}.hero .mascot{font-size:96px}.island{min-height:157px}.nav{max-width:650px;left:50%;transform:translateX(-50%);border-radius:22px 22px 0 0}}@media(max-width:355px){.brand strong{font-size:15px}.brand-icon{font-size:24px}.round{width:35px;height:35px}.pocket{padding:7px}.island{padding:11px}.choice{font-size:14px}}

/* Release 2.0 accessibility and audio UI */
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #2d78d4;outline-offset:3px}
.toggle-line{display:flex!important;align-items:center;gap:10px;margin:14px 0}.toggle-line input{width:20px;height:20px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* v4 educational mini games */
.gamegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.gamegrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.gamecolumn{display:grid;gap:12px}.match-card,.memory-card{border:2px solid #d4e6ff;border-radius:17px;background:#fff;padding:18px 10px;min-height:78px;font:inherit;font-weight:700;color:#32527e;cursor:pointer;touch-action:manipulation;box-shadow:0 5px 12px #4779a71a}.match-card .emoji{font-size:2.1rem;display:block}.match-card.picked,.memory-card.picked{background:#e2f0ff;border-color:#5c9fe7}.match-card.solved,.memory-card.solved{background:#dbf7e5;border-color:#65c995;opacity:.85}.memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.memory-card{font-size:2rem;padding:12px 4px;min-height:85px}.drop-target{padding:24px 12px;background:#e9f8f1;border:3px dashed #77caa5;text-align:center;border-radius:18px;min-height:110px;margin:16px 0;cursor:pointer}.trace-word{text-align:center;letter-spacing:10px;font-size:3rem;font-weight:900;color:#a2bad7}#traceCanvas{display:block;width:100%;height:270px;touch-action:none;background:repeating-linear-gradient(#fff 0px,#fff 43px,#e0eaf5 44px,#fff 45px);border:2px solid #d5e4f5;border-radius:15px;margin:14px 0}.sync-panel{margin-top:18px}.sync-panel .secondary{margin:4px;padding:10px}.sync-panel .status{overflow-wrap:anywhere;font-size:.8rem}@media(max-width:390px){.memory-card{min-height:65px;font-size:1.5rem}.match-card{padding:12px 6px}}
