@font-face{font-family:Jua;src:url(assets/fonts/Jua-Regular.ttf) format('truetype');font-display:swap}
:root{--ink:#263c36;--green:#42765b;--cream:#fff9ec;--line:#e5e8dc}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:15px 'Noto Sans KR',sans-serif}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #42765b;outline-offset:4px}header{height:92px;display:flex;align-items:center;justify-content:space-between;max-width:1160px;margin:auto;padding:0 32px}.brand{font:26px Jua,sans-serif;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:10px}.brand-icon{background:#efb955;border-radius:13px;color:white;width:38px;height:38px;display:grid;place-items:center}.beta{font:11px 'Noto Sans KR',sans-serif;background:#efe9d9;border-radius:20px;padding:5px 9px;margin-left:6px}.quiet{background:transparent;font-size:13px;padding:14px}main{max-width:1096px;margin:24px auto 120px;padding:0 24px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;color:#6a806c}.welcome{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}h1{font:38px/1.4 Jua,sans-serif;margin:8px 0}h2{font:25px Jua,sans-serif}h3{font:21px Jua,sans-serif;margin:0 0 8px}p{line-height:1.8;color:#6e7d72}.streak{background:#fff;border:1px solid var(--line);border-radius:20px;padding:13px 20px;font-size:13px}.streak strong{color:#ac7c25}.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:285px;background:#e2edda;border-radius:30px;padding:38px 40px}.hero h2{font-size:34px;line-height:1.4;margin:14px 0 8px}.pill{display:inline-block;font-size:11px;background:#ffffff9c;border-radius:20px;padding:6px 12px}.primary{background:var(--green);color:#fff;border-radius:14px;padding:14px 24px;font-weight:700;min-height:48px}.primary:hover{background:#315e46}.hero .primary{margin-top:12px}.scene{position:relative;display:flex;align-items:center;justify-content:center;gap:22px}.sun{position:absolute;right:7%;top:0;font-size:50px;color:#e7b556}.hill{position:absolute;bottom:-80px;left:0;width:110%;height:170px;border-radius:50%;background:#c6dab7}.creature{z-index:1;position:relative;width:130px;height:150px;border-radius:50% 50% 42% 42%;background:#f6cd68;box-shadow:inset -8px -8px #dfb75455;transform:rotate(-7deg);display:flex;justify-content:center;align-items:center;gap:28px}.creature:before,.creature:after{content:'';width:9px;height:12px;background:#33493c;border-radius:50%;margin-top:-5px}.creature .smile{position:absolute;top:83px;left:59px;width:20px;height:12px;border-bottom:3px solid #33493c;border-radius:50%}.creature.pink{width:112px;height:120px;background:#eab5a3;transform:rotate(10deg);margin-top:50px}.creature.pink .smile{left:48px;top:70px}.bubble{position:absolute;top:18px;left:20px;background:#fffdf4;padding:12px 17px;border-radius:16px;font:26px Jua}.bubble.en{left:auto;right:0;top:90px;font-size:22px}.section-title{display:flex;justify-content:space-between;align-items:center;margin:30px 0 16px}.section-title h2{margin:0}.muted{font-size:12px;color:#7a867b}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fffdf7;border:1px solid var(--line);border-radius:22px;padding:23px;text-align:left;position:relative;min-height:180px}.card:hover{border-color:#99b39a;transform:translateY(-2px)}.icon{font:33px Jua;background:#f7e8bc;width:60px;height:60px;display:grid;place-items:center;border-radius:18px;margin-bottom:18px}.blue{background:#e3edf1}.rose{background:#f7e3dc}.card p{font-size:12px;margin:0}.arrow{position:absolute;right:22px;bottom:23px}.bottom-panel{margin-top:24px;padding:22px 26px;background:#f0eddf;border-radius:20px;display:flex;justify-content:space-between;align-items:center}.bottom-panel p{margin:4px 0 0;font-size:13px}nav{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;padding:8px;background:#fffdf6f5;box-shadow:0 8px 40px #314a3620;border:1px solid var(--line);border-radius:24px;gap:8px;z-index:5;backdrop-filter:blur(15px)}nav button{background:transparent;min-width:130px;border-radius:17px;padding:13px;font-size:22px;display:flex;align-items:center;justify-content:center;gap:9px}nav span{font-size:13px}nav button.active{background:#e5eddf;color:#3b694f}.tabs{display:flex;gap:10px;margin:22px 0}.tabs button{padding:12px 24px;border-radius:30px;background:#eeeadd}.tabs .selected{background:var(--green);color:white}.levels{display:grid;gap:14px}.level{padding:22px;border:1px solid var(--line);background:#fffdf7;border-radius:20px;display:flex;gap:22px;align-items:center}.number{font:26px Jua;width:54px;height:54px;border-radius:50%;background:#e6eddb;display:grid;place-items:center;flex-shrink:0}.level p{margin:4px 0;font-size:13px}.level button{margin-left:auto;flex-shrink:0}.planned{font-size:12px;color:#8a8e80;margin-left:auto;white-space:nowrap}dialog{border:0;border-radius:28px;background:#fffdf6;color:var(--ink);width:min(640px,94vw);padding:30px;max-height:90dvh;overflow:auto}dialog::backdrop{background:#23382c80;backdrop-filter:blur(6px)}.close{float:right;width:42px;height:42px;border-radius:50%;background:#edeedf;font-size:24px}.lesson-top{font-size:12px;letter-spacing:1px;color:#74816e}.progress{height:7px;border-radius:10px;background:#ecebdc;margin:20px 0}.progress div{height:100%;background:#e9b74e;border-radius:10px}.lesson-center{text-align:center}.lesson-center h2{margin:20px 0 8px}.big-letter{font:100px Jua;margin:20px auto 10px}.listen{background:#eee7ce;border-radius:30px;padding:12px 24px;min-height:48px}.options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}.option{font:40px Jua;padding:20px 10px;border-radius:16px;background:#eff1e5;border:2px solid transparent}.option.correct{border-color:#478760;background:#e3f1dc}.feedback{min-height:30px;font-size:14px;margin:12px 0}canvas{display:block;width:100%;height:240px;background:#f5f0e1;border:2px dashed #d2d7c3;border-radius:20px;touch-action:none;margin:18px 0}.tools{display:flex;justify-content:center;gap:10px;margin:15px 0}.tools button{padding:12px 18px;border-radius:14px;background:#eeeadd}.star-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.star-item{padding:28px 12px;background:#fffdf7;border:1px solid var(--line);border-radius:20px;text-align:center;font-size:45px}.star-item span{display:block;font-size:13px;margin-top:12px}.unearned{filter:grayscale(1);opacity:.45}#toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);background:#304b3d;color:white;padding:12px 22px;border-radius:15px;display:none;z-index:20}input,select{border:1px solid #ccd4c4;border-radius:10px;padding:10px;max-width:100%}.parent-row{display:flex;justify-content:space-between;gap:16px;margin:20px 0;align-items:center}.small-note{font-size:12px;line-height:1.8}.badge{font-size:70px;margin:20px}audio{max-width:100%;margin:16px 0}button.danger{background:#f4e1db;padding:12px;border-radius:10px}@media(max-width:700px){header{height:76px;padding:0 20px}.brand{font-size:23px}.beta{display:none}main{margin-top:18px;padding:0 20px}.welcome{align-items:flex-start;gap:10px}h1{font-size:28px}.streak{padding:12px;font-size:11px;white-space:nowrap}.hero{grid-template-columns:1fr;padding:28px;min-height:410px}.hero h2{font-size:30px}.scene{height:160px;margin-top:20px}.creature{height:125px;width:108px}.creature .smile{left:48px;top:72px}.creature.pink{height:100px;width:90px;margin-top:20px}.creature.pink .smile{left:38px;top:60px}.sun{top:-8px;font-size:40px}.bubble{top:0;left:0}.bubble.en{right:0;top:55px}.cards{grid-template-columns:1fr;gap:12px}.card{min-height:110px;padding:20px 20px 20px 97px}.icon{position:absolute;left:20px;top:24px;width:56px;height:56px}.card h3{margin-top:5px}.section-title{gap:8px}.section-title h2{font-size:22px}.bottom-panel{padding:20px;gap:15px}.bottom-panel h3{font-size:19px}nav{bottom:12px;gap:0;width:calc(100% - 40px);justify-content:space-around}nav button{min-width:0;flex:1;padding:12px 8px;font-size:20px;gap:6px}nav span{font-size:11px}.level{gap:12px;padding:18px}.level h3{font-size:19px}.level .primary{padding:12px}.number{width:40px;height:40px;font-size:20px}.star-grid{grid-template-columns:repeat(2,1fr)}dialog{padding:22px}.parent-row{flex-wrap:wrap}}
/* The supplied character artwork establishes the visual world. */
:root{--green:#478e65;--cream:#fffaf0;--ink:#304837}.intro{margin:3px 0 0}.world{background:#e6f3d8;grid-template-columns:1fr 1.3fr;min-height:380px;padding:0;box-shadow:0 12px 40px #6e92571c}.hero-copy{padding:38px;z-index:1;align-self:center}.hero-copy p{color:#59734e}.hero-character{width:100%;height:100%;min-height:380px;object-fit:cover;object-position:50% 50%;mask-image:linear-gradient(to right,transparent,#000 18%)}.hero h2{color:#345b35}.primary{box-shadow:0 4px 0 #2e633f}.friends{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.friend{padding:0;overflow:hidden;border-radius:22px;background:#fff;border:3px solid transparent;box-shadow:0 5px 16px #63794f12}.friend img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:center}.friend span{display:block;padding:12px;font:18px Jua,sans-serif}.friend.chosen{border-color:#6da35a}.friend:hover{transform:translateY(-3px)}.completion-friend{width:100%;max-height:190px;object-fit:cover;object-position:center 35%;border-radius:20px}.icon{box-shadow:inset 0 -4px #d8b76526}.card{box-shadow:0 4px 0 #e4e9d680}body{background:radial-gradient(ellipse at 90% 0,#eaf4dd 0,transparent 40%),#fffaf0}@media(max-width:700px){.world{grid-template-columns:1fr;min-height:0}.hero-copy{padding:28px 28px 12px}.hero-character{height:245px;min-height:0;object-position:center 45%;mask-image:linear-gradient(to bottom,transparent,#000 17%)}.friends{grid-template-columns:repeat(3,1fr);gap:10px}.friend span{font-size:15px;padding:10px 3px}.hero-copy h2{font-size:30px}}
.header-actions{display:flex;align-items:center;gap:4px}.audio-controls{max-width:1048px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:0 24px;font-size:12px;color:#64775e}.audio-controls input{padding:0;width:90px;accent-color:#4c8b60}.audio-controls .quiet{padding:8px;font-size:12px}#audio-status{margin-left:auto;font-size:11px}.hero-friends{position:relative;min-height:380px;overflow:hidden;background:linear-gradient(150deg,#cbe6d3,#eaf3ce)}.hero-random{width:100%;height:100%;object-fit:cover;display:block;mask-image:linear-gradient(to right,transparent,#000 15%)}.animal-sprite{display:inline-block;background-image:url('assets/animal-friends.png');background-size:300% 300%;background-position:var(--x) var(--y);background-repeat:no-repeat;aspect-ratio:1}.hero-random.animal-sprite{width:78%;height:auto;position:absolute;left:4%;bottom:10px;mask-image:none}.hero-animal{position:absolute;right:0;bottom:0;width:36%;filter:drop-shadow(0 8px 8px #47694322)}.lesson-companion{display:flex;align-items:center;gap:18px;margin-bottom:16px;padding:10px 16px;background:#edf3df;border-radius:20px;text-align:left}.lesson-companion .helper{width:100px;height:100px;flex-shrink:0;object-fit:cover;border-radius:16px}.lesson-companion span:not(.animal-sprite){font:19px Jua,sans-serif}.question-replay{font-size:14px;background:#e0ebd5;margin:0 0 5px}#record{background:#f5d9cd;color:#873d2d}#record:disabled{opacity:.5}@media(max-width:700px){header{padding:0 16px}.header-actions .quiet{padding:10px 6px;font-size:11px}.audio-controls{flex-wrap:wrap;padding:0 20px;gap:7px}#audio-status{width:100%;margin-left:0}.hero-friends{min-height:260px;height:260px}.hero-random{mask-image:linear-gradient(to bottom,transparent,#000 15%)}.hero-random.animal-sprite{height:250px;width:250px;left:calc(50% - 125px)}.hero-animal{width:32%}.lesson-companion .helper{width:80px;height:80px}.lesson-companion span:not(.animal-sprite){font-size:17px}}
.hero-random.animal-sprite{width:60%;max-width:340px;left:12%;bottom:12px}@media(max-width:700px){.hero-random.animal-sprite{width:240px;height:240px;left:calc(50% - 120px);bottom:6px}}
/* Rounded activity catalogue and generous, separate character stages. */
:root{--cream:#faf3dc;--ink:#292e28;--green:#3d8864}body{background:#faf3dc}header{max-width:1280px;height:78px;border-bottom:2px solid #e5dfc9}.brand{font-size:29px}.brand-icon{background:#f3c955;color:#31372c;border:2px solid #31372c}main{max-width:1230px;margin:22px auto 125px}h1,h2,h3,.primary,.tabs button,.activity-meta,.stage-count,.classroom-stars{font-family:Jua,'Noto Sans KR',sans-serif}.audio-controls{max-width:1230px;margin-top:14px}.classroom-heading{display:flex;align-items:center;gap:20px}.classroom-heading h1{font-size:34px;margin:4px 0}.classroom-heading .eyebrow{font-size:12px;letter-spacing:1px;color:#687561}.stage-count{border:2px solid #d1cbb5;border-radius:24px;background:#fffcf0;padding:8px 15px;font-size:16px}.stage-count b{color:#df7765}.classroom-stars{margin-left:auto;display:flex;align-items:center;gap:10px;background:#fffcf0;border:2px solid #e4dcc2;padding:12px 18px;border-radius:25px;color:#9b7522;font-size:22px}.classroom-stars span{color:#59634e;font-size:14px}.classroom-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.classroom-toolbar .tabs{margin:14px 0 0}.tabs button{border:2px solid #343b30;font-size:18px;box-shadow:0 3px #343b30;padding:10px 25px;background:#fffcf0}.tabs .selected{background:#f4d168;color:#30352c}.forest-scene{background-image:url('assets/forest-worlds.png');background-size:200% 200%;background-position:var(--forest-x) var(--forest-y);background-repeat:no-repeat}.forest-welcome{display:grid;grid-template-columns:minmax(0,1fr) 1.3fr minmax(0,1fr);align-items:center;gap:20px;border:3px solid #343b30;border-radius:24px;overflow:hidden;padding:20px 24px;min-height:300px}.welcome-friend{display:flex;align-items:flex-end;justify-content:center;min-width:0;height:260px}.character-sprite{display:inline-block;background-repeat:no-repeat;aspect-ratio:var(--character-ratio,1);flex-shrink:0;max-width:100%}.welcome-character{height:250px;max-width:100%;width:auto;filter:drop-shadow(0 8px 5px #203c2422)}.welcome-copy{text-align:center;background:#fff9e8f2;border:2px solid #e1d7b7;border-radius:22px;padding:22px 18px;z-index:0}.welcome-copy h2{font-size:28px;line-height:1.3;margin:12px 0}.welcome-copy p{font-size:14px;margin:8px 0 16px;color:#546049}.welcome-label{font:13px Jua;background:#ffdc70;padding:6px 12px;border-radius:10px}.primary{font-size:18px;border:2px solid #2c503b;border-radius:24px;box-shadow:0 4px #2c503b}.section-title h2{font-size:27px}.activity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 22px}.activity-card{display:block;background:transparent;text-align:center;padding:0;min-width:0}.activity-card:disabled{opacity:1}.activity-thumb{height:220px;border:3px solid #30372e;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;padding:10px 12px;position:relative;box-shadow:0 4px #d8d2be}.thumb-caption{font:17px Jua;align-self:flex-start;background:#fff7dded;padding:4px 10px;border:1px solid #5c654e;border-radius:10px}.thumb-main{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:8px;flex:1;min-height:0}.learning-symbol{display:grid;place-items:center;font:65px/1 Jua;background:#fff9e8ef;border:3px solid #535e41;border-radius:18px;min-height:100px;color:#315c42;text-shadow:0 2px #ffffff}.thumb-character{height:150px;width:auto;max-width:100%;justify-self:center;filter:drop-shadow(0 5px 3px #273d2120)}.activity-badge{position:absolute;top:9px;right:9px;font:12px Jua;background:#d4f38b;border:2px solid #476034;border-radius:15px;padding:5px 9px}.upcoming .activity-badge{background:#ffedb4;border-color:#907a49;color:#69552b}.activity-meta{display:flex;gap:4px;justify-content:center;margin:12px 0 7px}.activity-meta span{background:#e58273;color:white;padding:4px 7px;border-radius:4px;font-size:12px}.activity-meta span+span{background:#40aa92}.activity-card h3{font-size:22px;line-height:1.35;margin:0;color:#333a2e}.activity-card:not(:disabled):hover .activity-thumb{transform:translateY(-3px);box-shadow:0 7px #c9c4ae}.classroom-note{font-size:13px;text-align:center;margin-top:25px;color:#6c755e}nav{border:2px solid #d5d0bb;box-shadow:0 7px 25px #35442c20}nav button{font-family:Jua;font-size:24px}nav span{font-size:15px}nav button.active{background:#f6d577;color:#30392b}
#lesson{width:min(1040px,96vw);padding:25px;max-height:94dvh;border:3px solid #424e36;background:#fff9e8}#lesson-content{position:relative}#exit-lesson{float:none;position:absolute;right:0;top:0;z-index:2;background:#f3d885;border:2px solid #6a654b}.lesson-top{padding-right:55px;min-height:42px;display:flex;align-items:center;font:18px Jua}.progress{margin:8px 0 20px;background:#e7dfc5;height:10px}.progress div{background:#e8b747}.lesson-center{display:grid;grid-template-columns:minmax(220px,.85fr) minmax(0,1.6fr);column-gap:26px;align-content:start}.lesson-center>*{grid-column:2}.lesson-companion{grid-column:1;grid-row:1/span 20;display:flex;flex-direction:column;align-self:start;gap:0;padding:0;background:#e9f0d9;border:2px solid #566749;border-radius:20px;overflow:hidden;position:sticky;top:0;margin:0}.companion-forest{width:100%;height:350px;display:flex;align-items:flex-end;justify-content:center;padding:16px 8px}.lesson-companion .helper{height:300px;width:auto;max-width:100%;border-radius:0;object-fit:contain}.lesson-companion>span{display:block;text-align:center;padding:17px 12px;font:22px/1.4 Jua;width:100%}.lesson-center h2{font-size:29px;line-height:1.4;margin:18px 0 5px}.lesson-center p{margin:8px 0;font-size:14px}.question-replay{justify-self:center;font:17px Jua;border:2px solid #6b8255;padding:11px 22px;box-shadow:0 3px #bdcda9}.lesson-center #lesson-sound{font-size:12px;justify-self:center;padding:10px}.options{gap:15px;margin:20px 0}.option{font-size:53px;padding:22px 8px;min-height:105px;border:3px solid #6c765f;background:#fffdf5;border-radius:17px;box-shadow:0 4px #d6d2bc}.option.correct{background:#ffe387;border-color:#ec9b43;box-shadow:0 4px #d9a64a}.listen:not(.question-replay){font:18px Jua;border:2px solid #b5a878;background:#ffe6a3;justify-self:center}.lesson-center .primary{justify-self:center;margin:12px 0;min-width:200px}.big-letter{font-size:110px;margin:12px auto}.lesson-center canvas{height:260px;margin:18px 0}.feedback{font:18px Jua;line-height:1.5}.lesson-center .small-note{font-size:11px;line-height:1.6}.badge{font-size:75px;margin:14px}.lesson-center audio{width:100%}.level{border:2px solid #c9c5ac;background:#fffcf0}.level .number{border:2px solid #a7b38c;background:#ecf3da}.level h3{font-size:24px}.planned{background:#eee7cd;padding:6px 10px;border-radius:10px}
@media(min-width:1300px){.activity-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.activity-thumb{height:205px}.thumb-character{height:140px}.learning-symbol{font-size:52px}}
@media(max-width:760px){header{height:70px}.brand{font-size:23px}.header-actions .quiet{font-size:10px}.classroom-heading{gap:10px;flex-wrap:wrap}.classroom-heading h1{font-size:29px}.stage-count{font-size:13px;padding:6px 10px}.classroom-stars{font-size:18px;padding:9px 12px}.classroom-stars span{display:none}.classroom-toolbar .quiet{font-size:11px;padding:8px}.tabs button{font-size:16px;padding:9px 18px}.forest-welcome{grid-template-columns:1fr 1fr;gap:12px;padding:16px;min-height:0}.welcome-copy{grid-column:1/span 2;grid-row:1;padding:18px 10px}.welcome-copy h2{font-size:25px}.welcome-friend{height:205px}.welcome-character{height:190px}.activity-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.activity-thumb{height:190px;padding:8px}.thumb-caption{font-size:12px;padding:4px 6px}.activity-badge{font-size:9px;padding:4px 6px;top:8px;right:6px}.thumb-main{grid-template-columns:.75fr 1fr;gap:4px}.learning-symbol{font-size:37px;min-height:72px;border-width:2px;border-radius:12px}.thumb-character{height:120px}.activity-card h3{font-size:18px}.activity-meta span{font-size:10px}.section-title{align-items:flex-start;flex-wrap:wrap;margin-top:25px}.section-title h2{font-size:24px}.section-title .muted{font-size:10px}#lesson{padding:18px;width:96vw}.lesson-center{grid-template-columns:1fr;gap:0}.lesson-center>*{grid-column:1}.lesson-companion{grid-column:1;grid-row:auto;position:static;margin:0 0 18px}.companion-forest{height:255px;padding:8px}.lesson-companion .helper{height:235px;width:auto}.lesson-companion>span{font-size:20px;padding:10px}.lesson-center h2{font-size:26px}.option{font-size:46px;padding:18px 6px;min-height:90px}.lesson-center canvas{height:240px}.lesson-center p{font-size:13px}.lesson-center .small-note{font-size:11px}.level h3{font-size:20px}.level p{font-size:12px}.level .primary{font-size:14px;min-width:0;padding:10px}.audio-controls{margin-top:10px}.classroom-note{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Every child-facing screen fits the viewport. More activities use pages. */
html,body{height:100%;overflow:hidden}body{height:100dvh;display:grid;grid-template-rows:68px 38px minmax(0,1fr) 68px}header{height:68px;width:100%;padding:0 24px}.audio-controls{height:38px;width:100%;margin:0 auto;flex-wrap:nowrap}.audio-controls #audio-status{width:auto}main{width:100%;height:100%;min-height:0;margin:0 auto;padding:10px 24px;overflow:hidden}main.is-classroom{display:flex;flex-direction:column;gap:8px}nav{position:static;transform:none;justify-self:center;align-self:center;height:56px;width:min(520px,calc(100% - 32px));padding:5px;border-radius:20px}nav button{padding:8px 12px}.classroom-heading{flex:0 0 46px}.classroom-heading h1{font-size:28px;margin:0}.classroom-heading .eyebrow{display:none}.classroom-stars{padding:7px 14px;font-size:19px}.stage-count{padding:6px 12px}.classroom-toolbar{flex:0 0 42px;margin:0}.classroom-toolbar .tabs{margin:0}.tabs button{font-size:16px;padding:7px 22px}.forest-welcome{flex:0 0 145px;min-height:0;grid-template-columns:1fr 1.7fr 1fr;padding:8px 15px;gap:14px;border-radius:20px}.welcome-friend{height:125px}.welcome-character{height:120px}.welcome-copy{grid-column:auto;grid-row:auto;padding:10px 14px;border-radius:15px}.welcome-copy h2{font-size:23px;margin:6px 0}.welcome-copy p{font-size:12px;margin:5px 0 8px}.welcome-label{font-size:10px;padding:3px 8px}.welcome-copy .primary{font-size:15px;padding:7px 15px;min-height:36px}.section-title{flex:0 0 30px;margin:0;align-items:center;flex-wrap:nowrap}.section-title h2{font-size:23px}.section-title .muted{font-size:10px}.activity-grid{flex:1;min-height:0;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:18px}.activity-card{min-height:0;display:flex;flex-direction:column}.activity-thumb{flex:1;min-height:0;height:auto;padding:8px}.thumb-main{overflow:hidden}.thumb-character{height:min(150px,18dvh);max-height:100%}.learning-symbol{font-size:clamp(35px,4vw,60px);min-height:70px}.thumb-caption{font-size:13px}.activity-card h3{font-size:19px;line-height:1.25}.activity-meta{margin:7px 0 5px}.activity-meta span{font-size:10px;padding:3px 5px}.activity-badge{font-size:10px;padding:4px 6px}.catalogue-pager{flex:0 0 30px;display:flex;align-items:center;justify-content:center;gap:18px;font:15px Jua}.catalogue-pager button{background:#ffe39a;border:2px solid #998957;border-radius:12px;padding:4px 15px;font:14px Jua}.catalogue-pager button:disabled{opacity:.35}
#lesson{height:calc(100dvh - 20px);max-height:none;overflow:hidden;padding:20px;width:min(1040px,calc(100vw - 20px));margin:auto}#lesson-content{height:100%;display:flex;flex-direction:column;min-height:0}.lesson-top{min-height:38px;flex:0 0 38px}.progress{flex:0 0 8px;margin:7px 0 16px}.lesson-center{flex:1;min-height:0;grid-template-columns:minmax(160px,.8fr) minmax(0,1.4fr);gap:22px}.lesson-center>*{grid-column:auto}.lesson-companion{grid-column:1;grid-row:auto;position:static;height:100%;min-height:0;margin:0;display:flex;flex-direction:column}.companion-forest{flex:1;height:auto;min-height:0;padding:12px 8px;align-items:center}.lesson-companion .helper{height:auto;max-height:100%;width:94%;max-width:100%;aspect-ratio:var(--character-ratio);border-radius:0}.lesson-companion>span{flex:0 0 auto;font-size:21px;padding:12px 6px}.question-panel{grid-column:2;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:8px;overflow:hidden}.question-panel .question-replay{align-self:center;margin:0;padding:8px 18px;font-size:16px;min-height:40px}.question-panel #lesson-sound{align-self:center;font-size:11px;padding:3px;min-height:24px}.question-panel h2{font-size:27px;line-height:1.25;margin:5px 0}.question-panel p{font-size:13px;line-height:1.5;margin:4px 0}.question-panel .listen:not(.question-replay){align-self:center;padding:8px 20px;min-height:40px;font-size:17px}.question-panel .options{margin:10px 0;gap:12px}.question-panel .option{font-size:50px;min-height:90px;padding:16px 6px}.question-panel .feedback{margin:4px 0;min-height:24px;font-size:17px}.question-panel .primary{align-self:center;margin:8px 0;padding:9px 20px;min-height:42px;font-size:17px}.question-panel canvas{height:clamp(90px,25dvh,240px);min-height:80px;margin:8px 0;flex-shrink:1}.question-panel .tools{margin:5px 0}.question-panel .tools button{padding:8px 16px;min-height:38px}.question-panel .small-note{font-size:10px;line-height:1.4;margin:2px 0}.question-panel .big-letter{font-size:clamp(55px,12dvh,105px);line-height:1.15;margin:3px auto}.question-panel .badge{font-size:65px;margin:8px}.question-panel .quiet{padding:6px;font-size:12px}.question-panel audio{height:36px;margin:3px 0}.question-panel #playback:empty{display:none}.levels{gap:8px}.level{padding:12px 16px}.level h3{font-size:21px}.level p{font-size:11px;line-height:1.4}.level .number{height:38px;width:38px;font-size:20px}main:not(.is-classroom) h1{font-size:30px;margin:4px 0}main:not(.is-classroom)>p{font-size:12px;margin:5px 0;line-height:1.5}main:not(.is-classroom) .tabs{margin:10px 0}.level .primary{font-size:14px;padding:8px 13px;min-height:36px}
@media(max-width:760px){body{grid-template-rows:58px 32px minmax(0,1fr) 60px}header{height:58px;padding:0 14px}.brand{font-size:23px}.audio-controls{height:32px;padding:0 15px;font-size:10px;gap:6px}.audio-controls .quiet{font-size:10px;padding:3px}.audio-controls input{width:62px}.audio-controls #audio-status{display:none}main{padding:7px 14px}.classroom-heading{flex-basis:39px;flex-wrap:nowrap;gap:8px}.classroom-heading h1{font-size:24px}.stage-count{font-size:11px;padding:5px 8px}.classroom-stars{padding:6px 10px;font-size:16px}.classroom-toolbar{flex-basis:36px}.tabs button{font-size:14px;padding:6px 15px}.forest-welcome{flex-basis:120px;padding:6px;gap:6px;grid-template-columns:.8fr 1.7fr .8fr}.welcome-friend{height:105px}.welcome-character{height:100px}.welcome-copy{padding:9px 5px}.welcome-copy h2{font-size:17px;line-height:1.2;margin:4px 0}.welcome-label{display:none}.welcome-copy p{font-size:10px;margin:5px 0}.welcome-copy .primary{font-size:12px;padding:7px;min-height:32px}.section-title{flex-basis:27px}.section-title h2{font-size:21px}.section-title .muted{display:none}.activity-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}.activity-thumb{padding:6px;border-width:2px;border-radius:12px}.thumb-caption{font-size:10px;padding:3px 5px}.thumb-main{grid-template-columns:.7fr 1fr}.learning-symbol{font-size:34px;min-height:56px}.thumb-character{height:min(120px,13dvh)}.activity-badge{font-size:8px;padding:3px 5px;top:6px;right:5px}.activity-meta{margin:5px 0 3px}.activity-meta span{font-size:9px;padding:2px 4px}.activity-card h3{font-size:16px}.catalogue-pager{flex-basis:26px;font-size:13px}.catalogue-pager button{font-size:12px;padding:3px 12px}nav{height:50px}nav button{padding:7px}nav span{font-size:13px}#lesson{padding:12px;height:calc(100dvh - 12px);width:calc(100vw - 12px);border-radius:20px}.lesson-top{font-size:15px;flex-basis:34px;min-height:34px}.progress{margin:5px 0 10px;flex-basis:6px}.lesson-center{display:flex;flex-direction:column;gap:10px}.lesson-companion{flex:0 0 145px;height:145px;display:grid;grid-template-columns:1.25fr 1fr;border-radius:14px}.companion-forest{height:100%;padding:5px}.lesson-companion .helper{height:132px;width:auto;max-width:100%;aspect-ratio:var(--character-ratio)}.lesson-companion>span{font-size:19px;padding:10px;align-self:center}.question-panel{flex:1;gap:5px;justify-content:center}.question-panel .question-replay{min-height:34px;font-size:14px;padding:6px 15px}.question-panel #lesson-sound{min-height:19px;font-size:10px;padding:1px}.question-panel h2{font-size:24px;margin:4px 0}.question-panel p{font-size:12px;line-height:1.4;margin:2px 0}.question-panel .options{gap:10px;margin:7px 0}.question-panel .option{font-size:44px;min-height:78px;padding:12px 5px}.question-panel .listen:not(.question-replay){font-size:15px;min-height:34px;padding:6px 18px}.question-panel .primary{font-size:15px;min-height:38px;margin:5px 0;padding:8px 17px}.question-panel .feedback{font-size:15px;min-height:20px;margin:2px 0}.question-panel canvas{height:clamp(85px,20dvh,180px);margin:5px 0}.question-panel .small-note{font-size:9px}.question-panel .big-letter{font-size:65px}.question-panel .badge{font-size:55px;margin:5px}.question-panel .tools{margin:3px 0}.question-panel .tools button{padding:6px 12px;min-height:32px;font-size:13px}.question-panel .quiet{padding:4px;font-size:11px}.level{gap:9px;padding:9px}.level h3{font-size:18px}.level p{font-size:10px}.level .number{width:32px;height:32px;font-size:18px}main:not(.is-classroom) h1{font-size:26px}.levels{gap:6px}.level .primary{font-size:12px;padding:7px 9px;min-height:32px}.level .planned{font-size:10px;padding:5px 7px}}
@media(max-height:620px) and (min-width:761px){body{grid-template-rows:54px 30px minmax(0,1fr) 55px}header{height:54px}.audio-controls{height:30px}.forest-welcome{flex-basis:90px}.welcome-friend{height:76px}.welcome-character{height:74px}.welcome-copy{padding:5px}.welcome-copy h2{font-size:18px;margin:2px 0}.welcome-label,.welcome-copy p{display:none}.welcome-copy .primary{font-size:13px;margin-top:5px}.classroom-heading{flex-basis:32px}.classroom-toolbar{flex-basis:32px}.section-title{flex-basis:23px}.classroom-heading h1{font-size:24px}.thumb-character{height:95px}.activity-card h3{font-size:16px}.activity-meta{margin:4px 0}.lesson-top{min-height:28px;flex-basis:28px;font-size:15px}.progress{margin:3px 0 8px;flex-basis:6px}.question-panel{gap:3px}.question-panel h2{font-size:23px}.question-panel p{font-size:12px}.question-panel .option{min-height:65px;padding:9px;font-size:40px}.question-panel .options{margin:5px 0}.question-panel canvas{height:110px}.question-panel .small-note{font-size:9px}.question-panel .big-letter{font-size:58px}.question-panel .question-replay{font-size:13px;min-height:30px;padding:5px 12px}.question-panel .listen:not(.question-replay){font-size:14px;min-height:30px;padding:5px 14px}.question-panel .primary{font-size:14px;padding:6px 15px;min-height:32px}.lesson-companion>span{font-size:18px}.question-panel .tools{margin:2px}.question-panel .feedback{font-size:14px;min-height:20px}}
.welcome-copy p{display:none}.welcome-copy h2{font-size:22px;margin:5px 0 8px}.welcome-copy{padding:8px 12px}.welcome-copy .primary{margin:0}.welcome-label{display:inline-block;font-size:10px;line-height:1.2;padding:3px 8px}.forest-welcome{align-items:center}.question-panel{height:100%}@media(max-width:760px){.welcome-copy h2{font-size:16px;line-height:1.25;margin:4px 0 8px}.welcome-copy{padding:7px 4px}.welcome-label{display:none}}
/* User-provided opening artwork and visible name meaning. */
body{background-image:linear-gradient(#faf3dcd9,#faf3dcd4),url('assets/mallang-school-start-with-children.png');background-size:cover;background-position:center;background-repeat:no-repeat}header{background:#faf3dceb}.audio-controls{background:#faf3dcd9;border-radius:0 0 12px 12px}.classroom-heading{flex-basis:91px;gap:24px}.classroom-heading h1{font-size:54px;line-height:1.1;letter-spacing:1px}.course-subtitle{font:14px Jua;color:#536145;display:block;margin-top:7px}.school-meaning{background:#fff9e9e8;border:1px solid #d6cfb4;border-radius:15px;padding:8px 15px;font-size:12px;line-height:1.4;text-align:left;max-width:430px}.school-meaning p{font-size:12px;color:#444e3b;margin:2px 0;line-height:1.4}.school-meaning>span{font-size:10px;color:#72795f}.school-meaning b{font-family:Jua;color:#4d7450}.classroom-heading .classroom-stars{margin-left:auto;flex-shrink:0}.classroom-toolbar{background:#faf3dce6;border-radius:14px;padding:3px 8px}.section-title h2{background:#faf3dce8;border-radius:12px;padding:3px 10px}.activity-card{background:#fff9e9ec;border-radius:16px;padding:6px;border:1px solid #e2d8bc}.activity-card h3{padding:0 2px 4px}.catalogue-pager{background:#faf3dce6;border-radius:15px;align-self:center;padding:0 15px}.forest-welcome{flex-basis:132px}.welcome-friend{height:114px}.welcome-character{height:110px}#splash-start{position:fixed;inset:0;width:100vw;height:100dvh;border:0;padding:0;z-index:100;background:#a6cf9b url('assets/mallang-school-start-with-children.png') center/cover no-repeat;display:grid;place-items:center;overflow:hidden;cursor:pointer}#splash-start:before{content:'';position:absolute;inset:-25px;background:inherit;filter:blur(18px);opacity:.8}.splash-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}.splash-prompt{position:relative;z-index:2;font:clamp(24px,3.4vw,44px)/1.3 Jua,sans-serif;color:#fff;background:#315b41df;border:3px solid #fff9e9;border-radius:25px;padding:17px 32px;box-shadow:0 6px 0 #1d3e30a8,0 7px 30px #142c3370;animation:intro-pulse 2s ease-in-out infinite;text-shadow:0 2px #1b3d2b}@keyframes intro-pulse{50%{transform:scale(1.035);background:#426d4ee8}}@media(max-width:760px){.classroom-heading{flex-basis:93px;gap:12px}.classroom-heading h1{font-size:35px;white-space:nowrap}.course-subtitle{font-size:10px;max-width:150px;margin-top:5px}.school-meaning{padding:6px 8px;flex:1;max-width:none;min-width:0;line-height:1.3;border-radius:11px}.school-meaning p{font-size:9px;line-height:1.35;margin:2px 0}.school-meaning>span{font-size:8px}.classroom-heading .classroom-stars{display:none}.forest-welcome{flex-basis:110px}.welcome-friend{height:94px}.welcome-character{height:92px}.activity-card{padding:4px;border-radius:13px}.splash-prompt{font-size:24px;padding:14px 20px;white-space:nowrap;border-radius:20px}}
@media(max-height:740px) and (max-width:760px){main.is-classroom{gap:6px}.classroom-heading{flex-basis:82px}.classroom-heading h1{font-size:33px}.forest-welcome{flex-basis:74px;padding:4px}.welcome-friend{height:60px}.welcome-character{height:58px}.welcome-copy{padding:5px}.welcome-copy h2{font-size:13px;margin:2px 0 5px}.welcome-copy .primary{font-size:10px;min-height:27px;padding:5px}.activity-meta{margin:3px 0}.activity-card h3{font-size:13px;line-height:1.2}.thumb-caption{display:none}.activity-badge{font-size:7px;padding:2px 4px}.learning-symbol{font-size:27px;min-height:42px}.thumb-character{height:85px}.activity-thumb{padding:4px}.question-panel{gap:3px}.lesson-companion{flex-basis:112px;height:112px}.lesson-companion .helper{height:103px}.lesson-companion>span{font-size:17px}.question-panel h2{font-size:21px}.question-panel .option{min-height:64px;font-size:39px;padding:9px}.question-panel .question-replay{min-height:30px;font-size:13px}.question-panel canvas{height:clamp(70px,17dvh,120px)}.question-panel .small-note{font-size:8px}.question-panel .primary{min-height:34px;font-size:14px}.question-panel .big-letter{font-size:53px}.question-panel p{font-size:11px}}
.main-school-logo{display:block;width:340px;height:90px;object-fit:contain;mix-blend-mode:multiply}.classroom-heading{flex-basis:117px}.classroom-heading h1{margin:0;line-height:1}.course-subtitle{margin-top:2px;text-align:center}.school-meaning{max-width:440px}.welcome-copy{align-self:center}.welcome-copy h2{line-height:1.15}.welcome-copy .primary{min-height:32px;padding:6px 12px}.welcome-label{display:none}@media(max-width:760px){.main-school-logo{width:165px;height:60px}.classroom-heading{flex-basis:96px;gap:8px}.course-subtitle{font-size:9px;max-width:165px}.school-meaning{max-width:none}.school-meaning p{font-size:9px}.welcome-copy .primary{min-height:28px;font-size:11px}}@media(max-height:740px) and (max-width:760px){.classroom-heading{flex-basis:87px}.main-school-logo{width:150px;height:52px}}@media(max-height:620px) and (min-width:761px){.classroom-heading{flex-basis:76px}.main-school-logo{width:230px;height:60px}.school-meaning{font-size:10px;padding:4px 10px}.school-meaning p{font-size:10px}.school-meaning>span{font-size:8px}}
/* Mallang School identity: toy-like pink, sunshine yellow, leaf green and sky blue. */
:root{--ink:#5b3b2b;--green:#f1709a;--cream:#fff7dd;--line:#ead9b3}body{color:var(--ink);background-image:linear-gradient(#fff6dcba,#fff6dcd0),url('assets/mallang-school-start-with-children.png')}header{background:#fff9e9f0;border-bottom:2px solid #f5d98a}.brand{color:#735039}.brand-icon{background:linear-gradient(#ffe38e,#ffc74a);border-color:#b98535;box-shadow:inset 0 3px #fff6c5,0 3px #d69c3b;color:#825a30}.brand .beta{background:#ffe8ae;color:#866036}.quiet{color:#795c46}.audio-controls{background:#fff9e9db;color:#8a6a50}.audio-controls input{accent-color:#f381a3}.school-meaning{background:linear-gradient(#fffdf5ed,#fff4daed);border:2px solid #eed2a0;box-shadow:inset 0 2px #fff,0 3px #dcbf8428;color:#815c40}.school-meaning p{color:#79553d}.school-meaning b{color:#d87091}.course-subtitle{color:#8b6747}.classroom-stars{background:linear-gradient(#fff7bf,#ffdf78);border-color:#e0b756;color:#a97925}.classroom-toolbar{background:#fff9e9e6;border:1px solid #eed9b2}.tabs button{background:linear-gradient(#fffdf7,#fff0d0);border-color:#d6b47a;color:#8a6547;box-shadow:inset 0 2px white,0 3px #bf995a}.tabs button.selected{background:linear-gradient(#ffdea0,#ffc75f);border-color:#d7a144;color:#7d532c;box-shadow:inset 0 2px #fff1c3,0 3px #c08c35}.primary{background:linear-gradient(#ff9cb8,#f2749d);border-color:#c96385;color:white;box-shadow:inset 0 2px #ffc6d8,0 4px #bb5478;text-shadow:0 1px #bd5677}.primary:hover{background:linear-gradient(#ffaac3,#f889ac)}.forest-welcome{border-color:#eed397;box-shadow:inset 0 0 0 2px #fff5d0,0 4px #d4b47b44;border-radius:24px}.welcome-copy{background:#fff9e9ed;border:2px solid #f6d597;box-shadow:inset 0 2px white;border-radius:20px}.welcome-copy h2{color:#a36b42}.section-title h2{color:#8b5d39;background:#fff9e9ed;text-shadow:0 1px white}.activity-card{background:#fffaf0f0;border:2px solid #ecd5ad;box-shadow:0 3px #c9a7743b}.activity-thumb{border:3px solid #e6b95b;box-shadow:inset 0 2px #fff3c1,0 3px #b8965650;border-radius:15px}.activity-thumb.sky{border-color:#77b9e9}.activity-thumb.leaf,.activity-thumb.mint{border-color:#8bc779}.activity-thumb.peach{border-color:#eda18b}.activity-thumb.lilac{border-color:#b8a0df}.thumb-caption{border:1px solid #e1b978;background:#fff9e6ef;color:#987043}.learning-symbol{background:linear-gradient(#fffef4ed,#fff1c7ed);border:2px solid #d9b978;color:#bf7a46;box-shadow:inset 0 3px white,0 3px #b69a6244;text-shadow:0 2px #fff4d1}.activity-badge{background:linear-gradient(#cbedaa,#9dd471);border-color:#73a64e;color:#466d2c;box-shadow:inset 0 1px #e4f9c9}.upcoming .activity-badge{background:linear-gradient(#fff3c9,#ffe1a2);border-color:#d6b46d;color:#947447}.activity-meta span{background:#f28fa7;color:#fff}.activity-meta span+span{background:#65baa4}.activity-card h3{color:#7c543b;text-shadow:0 1px #fff}.activity-card:not(:disabled):hover .activity-thumb{box-shadow:0 5px #e7bd6a80}.catalogue-pager{background:#fff8e5ee}.catalogue-pager button{background:linear-gradient(#fff4c6,#ffdf88);border-color:#dab467;color:#96703c;box-shadow:inset 0 2px #fff9df}.classroom-note,.muted{color:#9a7c5b}nav{background:linear-gradient(#fffdf5f5,#fff3d9f5);border:2px solid #e9d3a7;box-shadow:0 4px #c2a57744,0 5px 20px #b0874e20}nav button{color:#9b7854}nav button.active{background:linear-gradient(#ffedac,#ffd66f);color:#886033;box-shadow:inset 0 2px #fff5cc;border:1px solid #edc66c}#lesson{background:linear-gradient(#fffdf2,#fff4db);border-color:#a4cee9;box-shadow:0 0 0 3px #fff7d5,0 12px 50px #4b5f3c44}#exit-lesson{background:linear-gradient(#fff0ac,#ffcf74);border-color:#d6aa55;color:#9c783d;box-shadow:inset 0 2px #fff8db}.lesson-top{color:#96704b}.progress{background:#ecdfbd;box-shadow:inset 0 1px #d2bd8d}.progress div{background:linear-gradient(#ffe284,#f9bd4a)}.lesson-companion{background:linear-gradient(#fff8e7,#ffedc7);border:2px solid #e5c48c;box-shadow:0 3px #d3b58333}.lesson-companion>span{color:#a1744a;text-shadow:0 1px #fff9ed}.question-panel h2{color:#9b6643;text-shadow:0 1px white}.question-panel p{color:#997852}.question-panel .question-replay{background:linear-gradient(#d6f4c8,#b9e2a5);border-color:#95bd7d;color:#5e884c;box-shadow:inset 0 2px #f0ffe7,0 3px #89b071}.question-panel .listen:not(.question-replay){background:linear-gradient(#fff0b4,#ffdc82);border-color:#e2bc68;color:#a67b39;box-shadow:inset 0 2px #fff7d9,0 3px #c6a252}.question-panel .option{background:linear-gradient(#fffef8,#fff1d3);border:3px solid #d6c3a0;color:#845936;box-shadow:inset 0 3px white,0 4px #bda67f}.question-panel .option.correct{background:linear-gradient(#ffefac,#ffd36b);border-color:#efad56;color:#a7752e;box-shadow:inset 0 3px #fff7ce,0 4px #d79b43}.question-panel .feedback{color:#bd7a63}.question-panel canvas{background:#fff9eb;border-color:#ddcba5}.tools button{background:linear-gradient(#f8f0de,#eadbc0);color:#a08359;box-shadow:inset 0 1px white}.question-panel .big-letter{color:#e781a0;text-shadow:0 3px #ffd6e4}.question-panel .badge{color:#f1b836;text-shadow:0 3px #ffe7a0}#record{background:linear-gradient(#ffbaac,#f68d87);color:#a84d44;box-shadow:inset 0 2px #ffe0d7}.level{background:#fffaf0e8;border-color:#e5d0aa;box-shadow:0 3px #cbb17e20}.level .number{background:linear-gradient(#d8f0bd,#b8dc93);border-color:#a8c17c;color:#668443}.level h3{color:#926a45}.planned{background:#f6e6bd;color:#a08049}.star-item{background:linear-gradient(#fff9e9e8,#ffedbce8);border:2px solid #e4c789;color:#e8b234;box-shadow:0 4px #cfad692f}.star-item span{color:#947245}#parents{background:linear-gradient(#fffdf2,#fff0d1);border:3px solid #eed08c;color:#926a47}#parents h2,#parents h3{color:#a8794b}#parents input,#parents select{background:#fffdf5;border:2px solid #e6c994;color:#94744f;border-radius:13px}#parents .close{background:#ffe29b;color:#a58143}button.danger{background:#ffd9cc;color:#af725b;border:1px solid #ebbaa6}.splash-prompt{background:linear-gradient(#ff9ebbeF,#ee769deF);border-color:#fff6db;color:white;box-shadow:inset 0 3px #ffd0df,0 5px #bd587ad9,0 8px 25px #6d3d4d50;text-shadow:0 2px #c56284;animation:splash-glow 2s ease-in-out infinite}@keyframes splash-glow{50%{transform:scale(1.025);box-shadow:inset 0 3px #ffd0df,0 5px #bd587ad9,0 0 28px #fff4bfaa}}
@media(prefers-reduced-motion:reduce){.splash-prompt{animation:none}}
main.is-classroom{gap:5px}.forest-welcome{flex-basis:110px}.welcome-friend{height:92px}.welcome-character{height:90px}.welcome-copy{padding:6px 12px}.welcome-copy h2{font-size:20px;margin:3px 0 7px}.thumb-main{grid-template-rows:minmax(0,1fr);min-height:0}.thumb-character{height:100%;max-height:100%;width:auto;max-width:100%;align-self:center;min-height:0}.learning-symbol{min-height:0;height:80%;max-height:100%;align-self:center;font-size:clamp(28px,4vw,48px)}@media(max-width:760px){.forest-welcome{flex-basis:105px}.welcome-friend{height:88px}.welcome-character{height:86px}.welcome-copy{padding:5px}.welcome-copy h2{font-size:15px}.learning-symbol{font-size:32px}.activity-thumb{padding:5px}.thumb-main{min-height:0}.thumb-character{height:100%}}@media(max-height:740px) and (max-width:760px){.forest-welcome{flex-basis:74px}.welcome-friend{height:60px}.welcome-character{height:58px}.welcome-copy h2{font-size:12px}.learning-symbol{font-size:26px}.thumb-character{height:100%}}
#app:focus{outline:none}#parents{max-height:calc(100dvh - 20px);overflow:hidden;padding:22px}#parents p{font-size:12px;line-height:1.5;margin:7px 0}#parents h2{font-size:27px;margin:12px 0}#parents h3{font-size:22px;margin:10px 0}#parents .parent-row{margin:12px 0}#parents .small-note{font-size:10px;line-height:1.5}@media(max-width:760px){#parents{padding:16px}#parents p{font-size:11px}#parents .small-note{font-size:9px}}

/* Supplied rainbow M app identity */
.brand .brand-icon{display:block;width:40px;height:40px;object-fit:contain;flex-shrink:0;border:0;border-radius:10px;background:none;box-shadow:none}@media(max-width:760px){.brand .brand-icon{width:34px;height:34px;border-radius:8px}}
.stage-selection{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;flex:1;min-height:0}.stage-tile{background:#fff9e9ed;border:2px solid #e6c484;border-radius:22px;padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0}.stage-tile:disabled{opacity:.65}.stage-tile h2{font-size:22px}.stage-tile p{font-size:12px}.stage-number{background:#ffdc83;border-radius:16px;padding:6px 12px}.stage-friend{height:120px;width:auto}.letter-library{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}.letter-tile{background:linear-gradient(#fffefa,#ffeab7);border:2px solid #e5c27a;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:7px}.letter-tile strong{font:clamp(30px,5vh,60px) Jua}.letter-tile span{font:20px Jua}.letter-tile small{color:#ab8251}.korean-play-tabs{display:flex;align-items:center;gap:10px;margin:8px 0}.korean-play-tabs button{padding:7px 16px;background:#fff3cf;border-radius:14px}.korean-play-tabs .selected{background:#ffcf75}.extra-games{display:flex;gap:12px;flex:0 0 85px;margin:10px 0}.extra-games button{flex:1;background:linear-gradient(#dff4d2,#c0e5ab);border:2px solid #9bc582;border-radius:18px;display:flex;flex-direction:column;justify-content:center;gap:5px}.extra-games strong{font:23px Jua}.extra-games span{font:18px Jua}.gap-word{display:flex;justify-content:center;align-items:center;gap:20px;background:#fff0ce;border-radius:18px;padding:15px;font:50px Jua}.syllable-gap{display:inline-flex;flex-direction:column;vertical-align:middle;font-size:30px;line-height:1}.syllable-gap b{color:#e68c71;font-size:28px}.classroom-toolbar h2{margin:0;font-size:24px}.classroom-toolbar>span{font-size:12px}@media(max-width:760px){.stage-selection{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:7px}.stage-tile{padding:6px;position:relative}.stage-tile h2{font-size:17px;margin:6px 0}.stage-tile p{font-size:10px;margin:2px}.stage-friend{height:45px}.stage-number{font-size:12px;padding:3px 8px}.stage-tile>span:last-child{font-size:11px}.letter-library{gap:6px}.letter-tile{flex-direction:column;gap:2px;border-radius:12px}.letter-tile strong{font-size:34px}.letter-tile span{font-size:14px}.letter-tile small{font-size:9px}.korean-play-tabs{gap:5px;flex-wrap:wrap;margin:5px 0}.korean-play-tabs span{font-size:10px}.korean-play-tabs button{font-size:12px;padding:6px 10px}.classroom-toolbar h2{font-size:17px}.classroom-toolbar>span{display:none}.extra-games{flex-basis:72px;gap:6px;margin:7px 0}.extra-games strong{font-size:17px}.extra-games span{font-size:12px}.gap-word{font-size:40px;padding:12px}}
.syllable-gap.beside{flex-direction:row;align-items:center;gap:3px}.gap-word{gap:5px;font-size:clamp(28px,5vw,50px)}.gap-word .syllable-gap{flex-shrink:0}.question-panel .gap-word{max-width:100%;flex-wrap:nowrap}
/* Picture activity tiles, with distinct space for characters and captions. */
.adventure-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;padding:12px 0}.adventure-card{display:flex;flex-direction:column;min-height:0;padding:0;background:transparent;text-align:center}.adventure-art{position:relative;flex:1;min-height:0;width:100%;border:3px solid #674c36;border-radius:13px;box-shadow:0 4px #d5b983;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:10px 12px 30px;overflow:hidden}.adventure-symbol{font:clamp(24px,3vw,43px)/1.4 Jua;background:#fff9e6eb;border-radius:15px;padding:9px;z-index:1}.adventure-friend{height:100%;max-height:165px;max-width:100%;width:auto;justify-self:center}.adventure-label{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);background:#fff4d5f2;padding:4px 10px;border-radius:8px;font-size:12px;white-space:nowrap}.adventure-card h3{margin:10px 0 0;font-size:21px;color:#68452f}.adventure-card:hover .adventure-art{border-color:#efaf43;box-shadow:0 4px #dda74e}.adventure-card:nth-child(2) .adventure-art{border-color:#d389a4}.adventure-card:nth-child(3) .adventure-art{border-color:#6a9ec2}.adventure-card:nth-child(4) .adventure-art{border-color:#8fac5a}.adventure-card:nth-child(5) .adventure-art{border-color:#a68ac5}@media(max-width:760px){.adventure-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;padding:7px 0}.adventure-art{padding:5px 5px 23px;border-width:2px}.adventure-symbol{font-size:21px;padding:5px;border-radius:9px}.adventure-label{font-size:9px;padding:3px 6px;bottom:3px}.adventure-card h3{font-size:14px;margin:6px 0 0}.adventure-friend{max-height:110px}}
/* Larger main logo while retaining room for its meaning. */
.classroom-heading>.school-meaning{min-width:0}.classroom-heading>div:first-child{flex:0 0 auto}.main-school-logo{width:420px;height:125px}.classroom-heading{flex-basis:140px}@media(max-width:760px){.main-school-logo{width:220px;height:95px}.classroom-heading{flex-basis:112px;gap:10px}}@media(max-width:420px){.main-school-logo{width:185px;height:85px}.classroom-heading{flex-basis:108px;gap:6px}}@media(max-height:620px) and (min-width:761px){.main-school-logo{width:290px;height:85px}.classroom-heading{flex-basis:96px}}
.phonics-picture{font-size:clamp(40px,8vh,75px);line-height:1.1}.question-panel [data-phonics-answer]{font-size:clamp(24px,4vw,42px)}

.stage3-options .option{min-width:0;font-size:clamp(24px,5vw,54px);padding:12px 6px;white-space:nowrap}#play-recording{margin:8px auto;display:block}#recorded-voice{max-width:100%;height:36px}

/* Language gate: a soft, toy-like pair of large vertical buttons. */
body.choosing-subject{grid-template-rows:minmax(0,1fr)}body.choosing-subject>header,body.choosing-subject>.audio-controls,body.choosing-subject>nav{display:none}body.choosing-subject #app{height:100dvh;max-width:none;width:100%;margin:0;padding:clamp(12px,3vh,28px);background:linear-gradient(0deg,#fff2cc92,#edfaffb0),url('assets/mallang-school-start-with-children.png') center/cover}
.subject-selector{width:min(800px,100%);height:100%;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3vh,28px)}.subject-welcome{text-align:center;flex:0 1 auto;min-height:0}.subject-welcome>img{width:min(390px,70vw);height:clamp(70px,17vh,150px);object-fit:contain;filter:drop-shadow(0 5px 0 #ffffffa0)}.subject-welcome h1{font:clamp(21px,3.6vh,35px)/1.35 Jua;color:#8b5a46;margin:4px 0}.subject-welcome p{font:clamp(13px,2vh,18px) Jua;color:#8b7957;margin:7px 0}.subject-buttons{display:flex;flex-direction:column;gap:clamp(16px,3.8vh,30px);width:min(680px,100%)}.subject-button{isolation:isolate;width:100%;min-height:110px;height:clamp(120px,21vh,170px);border-radius:35px;border:5px solid #fff8e6;box-shadow:inset 0 7px #ffffff85,0 7px #c69571,0 13px 24px #8e775440;display:flex;align-items:center;gap:20px;padding:18px 25px;position:relative;overflow:hidden;text-align:left;transition:transform .16s,box-shadow .16s}.subject-button::after{content:'';position:absolute;left:7%;right:7%;top:9%;height:32%;border-radius:100%;background:linear-gradient(#ffffff70,#ffffff00);z-index:-1}.subject-korean{background:linear-gradient(130deg,#ffdebc,#ffb9cf 70%,#f39bb8);color:#994960}.subject-english{background:linear-gradient(130deg,#ddf5ff,#a5dceb 70%,#91bfe7);color:#416b9c}.subject-button:hover{transform:translateY(-3px)}.subject-button:active{transform:translateY(4px);box-shadow:inset 0 4px #ffffff70,0 3px #c69571}.subject-icon{display:flex;align-items:center;flex-shrink:0;position:relative;width:110px;height:90px}.subject-icon span{width:65px;height:65px;display:grid;place-items:center;background:linear-gradient(#fff9de,#ffdf8a);border:3px solid #fff8ee;border-radius:19px;box-shadow:0 4px #daaf6e;font:47px Jua;color:#c27743;transform:rotate(-10deg)}.subject-icon span+span{position:absolute;left:45px;top:24px;background:linear-gradient(#edffe5,#addc8d);color:#6b9850;transform:rotate(12deg)}.subject-english .subject-icon span{background:linear-gradient(#f2e8ff,#cab1e8);color:#8e69b4}.subject-english .subject-icon span+span{background:linear-gradient(#fff4ae,#ffd269);color:#c78c3c}.subject-copy{display:flex;flex-direction:column;gap:8px;z-index:1;white-space:nowrap}.subject-copy strong{font:clamp(28px,4.7vw,44px)/1.15 Jua;text-shadow:0 2px #fff5e9}.subject-copy small{font:clamp(12px,1.8vw,17px) Jua;opacity:.8}.subject-friend{height:110%;width:auto;max-width:26%;margin-left:auto;align-self:flex-end;object-fit:contain;filter:drop-shadow(0 5px 3px #98695730)}.subject-arrow{position:absolute;right:15px;top:13px;color:white;font-size:21px}.subject-sparkles{font:22px Jua;letter-spacing:14px;color:#d8a24f;text-shadow:0 2px white}
.two-feature-games{grid-template-rows:minmax(0,1fr);grid-template-columns:repeat(2,minmax(0,1fr));max-height:370px}.alphabet-picture-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:8px;padding:5px 0}.alphabet-picture-tile{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2px;background:linear-gradient(#fffdf3,#ffefc9);border:2px solid #e7ca92;border-radius:18px;box-shadow:0 3px #c5a56c;min-width:0;min-height:0;padding:7px}.alphabet-picture-tile:nth-child(3n+2){background:linear-gradient(#f5ffef,#d9edca);border-color:#bad39b}.alphabet-picture-tile:nth-child(3n){background:linear-gradient(#f5faff,#ddecfa);border-color:#aecbdf}.alphabet-picture-tile strong{font:clamp(24px,3.8vh,40px)/1 Jua;color:#a37951}.alphabet-picture-tile small{font-size:.55em}.alphabet-picture-tile span{grid-column:1/-1;font:10px Jua;color:#987655}.word-picture{display:block;width:clamp(65px,12vh,116px);height:clamp(65px,12vh,116px);object-fit:contain;flex-shrink:0;margin:0 auto;filter:drop-shadow(0 5px 2px #94774e14)}.alphabet-picture-tile .word-picture{width:100%;height:min(7vh,68px);min-height:0}.ko-question-picture{height:clamp(65px,14vh,125px);width:clamp(65px,14vh,125px);margin:3px auto 7px}.picture-answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}.picture-answer{min-width:0;padding:14px 9px 10px;border:3px solid #e0c395;border-radius:22px;background:linear-gradient(#fffef7,#fff0d0);box-shadow:inset 0 3px white,0 4px #c5a87b;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;transition:transform .15s}.picture-answer span{font:clamp(17px,2.5vw,26px) Jua;color:#8b633e;line-height:1.15;overflow-wrap:anywhere}.picture-answer.correct{background:linear-gradient(#eaffdf,#c2e89b);border-color:#92ba65;transform:translateY(-3px)}.picture-answer:hover{border-color:#edae55}.number-spelling{font:clamp(30px,6vh,55px) Jua;color:#ce87a4;margin:10px}.number-face{font:clamp(34px,7vh,70px) Jua;color:#bd8b4d;line-height:1.1}.number-dots{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;min-height:25px;max-width:100%;justify-items:center}.number-dots i{width:10px;height:10px;background:#eab27c;box-shadow:inset 0 2px #ffddb0;border-radius:50%}.puzzle-stage{display:flex;align-items:center;gap:14px;margin:12px 0}.puzzle-word-picture{width:clamp(80px,15vh,140px);height:clamp(80px,15vh,140px)}.puzzle-workspace{flex:1;min-width:0;display:flex;align-items:center;gap:22px}.puzzle-board{display:flex;align-items:center;justify-content:center;flex:1;gap:3px;background:#fff0cc;padding:20px 10px;border:2px dashed #e0bd79;border-radius:23px}.puzzle-piece{font:clamp(27px,4.4vw,52px)/1 Jua;width:clamp(54px,7vw,88px);height:clamp(60px,8vw,94px);border-radius:13px;background:linear-gradient(#fff1ae,#ffda7c);color:#9a7137;border:3px solid #e6bd6c;box-shadow:inset 0 3px #fff9d5,0 4px #c9a05d;display:grid;place-items:center;position:relative;flex-shrink:0;touch-action:none;user-select:none}.puzzle-fixed::after,.puzzle-choice::after{content:'';width:17px;height:17px;border-radius:50%;background:#ffdf8c;position:absolute;right:-10px;top:calc(50% - 9px);border-right:3px solid #e6bd6c;z-index:1}.puzzle-slot{background:#fffaf0;box-shadow:inset 0 2px 6px #c4a16c30;color:#b6a07b;border-style:dashed}.puzzle-tray{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:4px 6px}.puzzle-choice{background:linear-gradient(#e9f8ff,#b4daec);color:#658da9;border-color:#9cbdd6;box-shadow:inset 0 3px #fff,0 4px #83a5c3;cursor:grab;z-index:2}.puzzle-choice::after{background:#c5e3f0;border-color:#9cbdd6}.puzzle-choice.piece-selected{outline:4px solid #f2bd59;outline-offset:3px}.piece-dragging{z-index:20;cursor:grabbing;filter:drop-shadow(0 9px 5px #705b4933)}.puzzle-complete{background:linear-gradient(#def5c6,#b5dc8f);border:3px solid #8db65f;box-shadow:inset 0 2px white,0 4px #87ab5d;color:#668b3c}.puzzle-board.solved{border-color:#96c575;background:#eff9df;animation:word-pop .35s ease-out}.puzzle-instruction{font-size:13px!important}.puzzle-wiggle{animation:word-wiggle .3s}@keyframes word-pop{50%{transform:scale(1.035)}}@keyframes word-wiggle{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:760px){.subject-button{padding:14px;gap:10px;border-radius:29px}.subject-icon{width:82px;height:77px}.subject-icon span{width:50px;height:55px;font-size:38px;border-radius:14px}.subject-icon span+span{left:32px;top:18px}.subject-copy strong{font-size:31px}.subject-copy small{font-size:11px}.subject-friend{max-width:24%;height:90%}.subject-sparkles{font-size:17px}.alphabet-picture-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:6px}.alphabet-picture-tile{padding:4px;border-radius:11px}.alphabet-picture-tile strong{font-size:22px}.alphabet-picture-tile .word-picture{height:35px}.alphabet-picture-tile span{font-size:8px}.two-feature-games{grid-template-rows:minmax(0,1fr);max-height:300px}.picture-answers{gap:7px;margin:9px 0}.picture-answer{padding:10px 4px 8px;border-radius:16px;gap:7px;border-width:2px}.picture-answer .word-picture{width:clamp(50px,17vw,95px);height:clamp(50px,17vw,95px)}.picture-answer span{font-size:17px}.number-dots{gap:3px}.number-dots i{width:8px;height:8px}.puzzle-stage{flex-direction:column;gap:7px;margin:7px 0}.puzzle-word-picture{height:65px;width:80px}.puzzle-workspace{width:100%;gap:12px}.puzzle-board{padding:19px 5px;gap:3px}.puzzle-piece{width:46px;height:58px;font-size:32px;border-width:2px;border-radius:10px}.puzzle-tray{gap:12px 9px;padding:4px}.puzzle-fixed::after,.puzzle-choice::after{width:13px;height:13px;right:-8px;top:calc(50% - 7px);border-right-width:2px}.puzzle-instruction{font-size:11px!important}.explore-panel>h2{font-size:21px}.explore-panel .feedback{min-height:24px;font-size:12px}}
@media(max-height:650px){.subject-welcome>img{height:70px}.subject-welcome p,.subject-sparkles{display:none}.subject-button{height:125px;min-height:105px}.subject-selector{gap:14px}.subject-buttons{gap:18px}.subject-friend{height:90%}.ko-question-picture{height:65px;width:65px}.picture-answer .word-picture{height:65px;width:65px}.puzzle-word-picture{height:50px}.puzzle-piece{height:48px;font-size:29px}.puzzle-board{padding:12px 4px}}
@media(prefers-reduced-motion:reduce){.puzzle-board.solved,.puzzle-wiggle{animation:none}}
@media(min-width:761px){.puzzle-piece{width:clamp(48px,5.5vw,72px);height:clamp(58px,6.5vw,82px)}.puzzle-workspace{gap:14px}.puzzle-word-picture{width:90px;height:90px}}@media(min-width:761px) and (max-width:1100px){.puzzle-stage{flex-direction:column}.puzzle-word-picture{height:65px;width:65px}.puzzle-workspace{width:100%;justify-content:center}.puzzle-board{flex:0 1 auto}.puzzle-tray{flex:0 0 auto}}
.subject-welcome>img{mix-blend-mode:multiply}
.word-match-panel h2{font-size:clamp(18px,2.5vw,28px)}.word-match-stage{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0}.word-match-board{min-width:0;flex:1;border:3px solid #e7d6ad;border-radius:25px;background:linear-gradient(#fffefa,#fff7df);padding:22px 16px;box-shadow:inset 0 4px white,0 6px #cdbb9655}.word-match-title{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;margin:2px 0 25px}.word-match-title strong{font:clamp(31px,4.4vw,62px) Jua;background:#f1eddd;border-radius:15px;padding:17px 22px;color:#604e3d;line-height:1.1;word-break:keep-all}.word-match-speaker{background:#f8ad69;border:3px solid #ffe6b5;border-radius:50%;width:44px;height:44px;flex-shrink:0;font-size:22px;box-shadow:0 3px #cc8d4b}.word-match-answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.word-match-card{padding:14px 7px;border:3px solid #b9c6cb;border-radius:17px;background:linear-gradient(#f9feff,#e7f0f3);box-shadow:inset 0 3px white,0 3px #9eafb9;transition:transform .15s}.word-match-card .word-picture{width:100%;height:clamp(64px,12vh,116px);filter:drop-shadow(0 4px 2px #4b596528)}.word-match-card.picture-selected{background:linear-gradient(#ffedbe,#f8d48b);border-color:#eda74d;box-shadow:inset 0 3px #fff6dc,0 3px #c6954b;transform:translateY(-3px)}.word-match-card.picture-correct{background:linear-gradient(#eaffd1,#bce496);border-color:#8eb75f;box-shadow:inset 0 3px #f8ffe9,0 3px #82a752}.word-match-confirm{font:50px/1 Jua;background:linear-gradient(#b9ec64,#70ce31);color:white;width:62px;height:88px;flex-shrink:0;border:3px solid #d9f8a8;border-radius:19px;box-shadow:inset 0 4px #d2f79c,0 5px #60a532;text-shadow:0 3px #73ab3c}.word-match-confirm:disabled{opacity:.42}.word-match-confirm:not(:disabled):hover{filter:brightness(1.06)}@media(max-width:760px){.word-match-stage{gap:7px;margin:9px 0}.word-match-board{padding:15px 8px;border-radius:19px;border-width:2px}.word-match-title{gap:7px;margin-bottom:19px}.word-match-title strong{font-size:clamp(25px,8vw,42px);padding:14px 12px}.word-match-speaker{width:34px;height:34px;border-width:2px;font-size:16px}.word-match-answers{gap:6px}.word-match-card{padding:10px 3px;border-width:2px;border-radius:12px}.word-match-card .word-picture{height:clamp(48px,13vw,82px)}.word-match-confirm{width:43px;height:70px;border-width:2px;border-radius:14px;font-size:37px}.word-match-panel .feedback{font-size:12px;min-height:34px}.word-match-panel h2{font-size:20px}}@media(max-height:650px){.word-match-board{padding-top:12px;padding-bottom:12px}.word-match-title{margin-bottom:12px}.word-match-title strong{padding-top:10px;padding-bottom:10px}.word-match-card .word-picture{height:65px}}
/* Dedicated Korean writing courses: a central, very large tracing board. */
.large-writing-stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}.writing-title{display:flex;justify-content:center;align-items:center;gap:25px;width:100%;flex:0 0 auto}.writing-title>div{display:flex;align-items:center;gap:20px}.writing-title strong{font:clamp(46px,9vh,80px)/1 Jua;color:#a47446;text-shadow:0 3px #fff6d5}.writing-title span{font:clamp(23px,4vh,34px) Jua;color:#c28a55}.writing-title .listen{padding:10px 16px;border:2px solid #dcc091;border-radius:17px;background:linear-gradient(#fff4bd,#ffe092);font-size:15px;color:#9f783e}.writing-instruction{margin:0;flex:0 0 auto;font:clamp(14px,2.5vh,19px) Jua;color:#a3824b}.large-writing-board{position:relative;flex:1;min-height:160px;width:min(860px,100%);background:radial-gradient(circle at 45% 40%,#fff2a6,#f3e474 75%);border:5px solid #fff7c9;border-radius:28px;box-shadow:inset 0 0 0 2px #dcc86c,0 5px #c6b56e3d;overflow:hidden;isolation:isolate}.large-writing-board::before{content:'✦';position:absolute;left:20px;top:15px;font-size:26px;color:#e0ca72}.large-writing-board::after{content:'✦';position:absolute;right:20px;bottom:20px;font-size:30px;color:#e2cb72;z-index:-1}#writing-guide{position:absolute;inset:0;pointer-events:none}.stroke-guide-svg{display:block;width:100%;height:100%;overflow:visible}#guided-writing{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}.writing-step{position:absolute;left:14px;bottom:10px;background:#fffbe6dc;border:1px solid #ead59c;color:#a5803e;border-radius:20px;padding:6px 11px;font:14px Jua;pointer-events:none}.writing-controls{display:flex;justify-content:center;gap:12px;align-items:center;flex:0 0 auto;flex-wrap:nowrap;width:100%}.writing-controls .quiet{background:linear-gradient(#fffaf0,#f6e5c0);border:2px solid #e6c994;border-radius:15px;padding:10px 16px;font:16px Jua;color:#a67b44}.writing-controls .primary{font:18px Jua;min-width:180px}.large-writing-stage .feedback{min-height:25px;font:16px Jua;margin:0;color:#b07f55}.large-writing-lesson #lesson-content{gap:8px}.large-writing-lesson .progress{flex:0 0 7px}.large-writing-lesson .badge{font-size:90px;color:#e6b535}.large-writing-stage>h2{margin-top:auto}.large-writing-stage>#writing-finish{margin-bottom:auto}@media(max-width:760px){.large-writing-stage{gap:7px}.writing-title{gap:16px}.writing-title>div{gap:12px}.writing-title strong{font-size:61px}.writing-title span{font-size:27px}.writing-title .listen{font-size:12px;padding:10px}.writing-instruction{font-size:15px}.large-writing-board{min-height:220px;border-width:4px;border-radius:23px}.writing-step{font-size:12px;bottom:9px;left:9px;padding:5px 8px}.writing-controls{gap:5px}.writing-controls .quiet{padding:9px 6px;font-size:12px;min-height:45px}.writing-controls .primary{min-width:0;font-size:14px;padding:11px 12px}.large-writing-stage .feedback{font-size:12px;min-height:30px}.large-writing-lesson #lesson-content{gap:7px}}@media(max-height:600px){.writing-title strong{font-size:42px}.writing-title span{font-size:23px}.large-writing-board{min-height:120px}.large-writing-stage{gap:4px}.writing-controls .primary{min-height:40px}.writing-controls .quiet{padding-top:8px;padding-bottom:8px}.writing-instruction{font-size:13px}}
/* Large interlocking pieces with the same contour in the answer and its hole. */
.jigsaw-lesson .lesson-center{grid-template-columns:140px minmax(0,1fr);gap:18px}.jigsaw-lesson .lesson-companion{max-height:235px;align-self:center}.jigsaw-lesson .question-panel{overflow:visible}.jigsaw-layout{display:flex;align-items:center;justify-content:center;gap:18px;max-width:100%;margin:4px auto;width:100%}.jigsaw-scene{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0;gap:2px}.jigsaw-word-picture{height:clamp(65px,12vh,100px);width:clamp(65px,12vh,100px)}.jigsaw-board{width:100%;padding:10px 2px;border-radius:28px;background:radial-gradient(#fff8e6,#f6e9c9);box-shadow:inset 0 0 0 2px #ead7b0;transition:transform .25s}.jigsaw-board-svg{display:block;width:100%;max-height:280px;overflow:visible}.jigsaw-choice-tray{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;flex:0 0 clamp(240px,27vw,320px);padding:8px;border-radius:25px;background:#e6eef0b0;border:2px solid #d1dee0;box-shadow:inset 0 3px #ffffffa0}.jigsaw-choice{touch-action:none;user-select:none;background:none;padding:0;border:0;border-radius:18px;position:relative;cursor:grab;transition:filter .18s;min-width:0;width:100%;aspect-ratio:1}.jigsaw-choice .jigsaw-piece-svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 5px 3px #6c84942e)}.jigsaw-choice:hover .jigsaw-piece-svg{filter:drop-shadow(0 4px 5px #ecbb6955)}.jigsaw-selected{outline:3px solid #e9bc66;outline-offset:-8px;background:#fff5d550}.jigsaw-dragging{z-index:30;cursor:grabbing;transition:none}.jigsaw-dragging .jigsaw-piece-svg{filter:drop-shadow(0 12px 7px #78674755)}.jigsaw-used{opacity:.18;pointer-events:none}.jigsaw-solved{animation:jigsaw-fit .4s ease-out;box-shadow:inset 0 0 0 3px #afd080}.jigsaw-filled{filter:drop-shadow(0 0 3px #b1db83)}.jigsaw-wiggle{animation:jigsaw-miss .35s}.jigsaw-hole{cursor:pointer}@keyframes jigsaw-fit{40%{transform:scale(1.04)}}@keyframes jigsaw-miss{25%{opacity:.45}75%{opacity:1}}@media(max-width:1000px) and (min-width:761px){.jigsaw-lesson .lesson-center{grid-template-columns:110px minmax(0,1fr);gap:12px}.jigsaw-choice-tray{flex-basis:220px}.jigsaw-layout{gap:8px}.jigsaw-lesson .question-panel h2{font-size:23px}}@media(max-width:760px){.jigsaw-lesson .lesson-center{display:flex;gap:5px}.jigsaw-lesson .lesson-companion{height:76px;max-height:76px;flex:0 0 76px;align-self:stretch;width:100%;margin:0}.jigsaw-lesson .lesson-companion .helper{height:70px;width:80px}.jigsaw-lesson .lesson-companion span{font-size:13px}.jigsaw-lesson .question-panel{gap:3px;overflow:visible}.jigsaw-lesson .question-panel h2{font-size:21px;margin:6px 0}.jigsaw-layout{flex-direction:column;gap:1px;margin:0}.jigsaw-scene{width:100%;gap:0}.jigsaw-word-picture{height:55px;width:70px}.jigsaw-board{padding:0 9px;border-radius:22px}.jigsaw-board-svg{height:150px;max-height:19vh}.jigsaw-choice-tray{width:100%;flex:0 0 auto;grid-template-columns:repeat(4,minmax(0,1fr));padding:1px;gap:0;border-radius:18px}.jigsaw-choice{min-height:83px;aspect-ratio:1}.jigsaw-selected{outline-width:2px;outline-offset:-3px}.jigsaw-lesson .puzzle-instruction{font-size:11px!important;margin:3px 0}.jigsaw-lesson .feedback{font-size:12px;min-height:29px}.jigsaw-lesson #explore-next{min-height:43px;padding:10px 18px}.jigsaw-lesson .question-replay{padding:8px 15px}}
@media(max-height:650px){.jigsaw-word-picture{height:45px}.jigsaw-board-svg{max-height:25vh}.jigsaw-choice-tray{max-width:300px}.jigsaw-lesson .question-panel h2{font-size:18px}.jigsaw-lesson .lesson-companion{height:56px;max-height:56px;flex-basis:56px}.jigsaw-lesson .lesson-companion .helper{height:48px}}
@media(prefers-reduced-motion:reduce){.jigsaw-solved,.jigsaw-wiggle{animation:none}}

#guided-writing{background:transparent;border:0;border-radius:0;margin:0;min-height:0;box-shadow:none}

@media(max-width:760px){.jigsaw-lesson .lesson-companion{display:none}.jigsaw-choice-tray{grid-template-columns:repeat(2,minmax(0,1fr));max-width:280px;padding:0 4px}.jigsaw-choice{height:132px;min-height:0;aspect-ratio:auto}.jigsaw-layout{gap:3px}.jigsaw-board-svg{max-height:18vh}.jigsaw-word-picture{height:48px}}@media(max-width:760px) and (max-height:720px){.jigsaw-choice{height:106px}.jigsaw-choice-tray{max-width:240px}.jigsaw-board-svg{max-height:16vh}.jigsaw-word-picture{height:42px}.jigsaw-lesson .question-panel{gap:2px}.jigsaw-lesson .question-panel h2{margin:3px 0}.jigsaw-lesson .feedback{min-height:23px}}