.learn-intro{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:32px 0 24px}.learn-intro h1{font-size:clamp(30px,4vw,44px)}.learn-intro p{font-size:17px;color:var(--muted)}.learn-stamp{display:grid;place-items:center;flex:none;width:100px;height:100px;border-radius:26px;background:#fce5a9;color:#7b552b;font-family:Fredoka,sans-serif;font-size:42px;line-height:.9;transform:rotate(7deg);border:3px solid white;box-shadow:0 4px 16px #6e56251a}.learn-stamp span{font-size:22px;letter-spacing:4px}
.learn-controls{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}.learn-switch{display:flex;gap:5px;background:#eee6f5;padding:5px;border-radius:16px}.learn-switch button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:12px;background:transparent;padding:9px 16px;font-size:14px;font-weight:850;color:#69557b}.learn-switch button[aria-pressed=true]{background:#7950aa;color:white;box-shadow:0 3px 6px #54377422}.learn-switch b{font-family:Fredoka,sans-serif;font-size:20px;letter-spacing:1px}.learn-modes{background:#edf1e2}.learn-modes button[aria-pressed=true]{background:#467766}
.learn-characters{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:7px;margin-bottom:22px}.learn-characters button{position:relative;min-width:0;min-height:45px;background:white;border:2px solid #e6deed;border-radius:12px;font-family:Fredoka,sans-serif;font-size:23px;font-weight:550;color:#6a5088}.learn-characters button:hover{background:#f5edf9}.learn-characters button[aria-pressed=true]{background:#f4e8ff;border-color:#8058ac;box-shadow:0 0 0 2px #fff}.learn-earned{position:absolute;right:2px;top:0;font-size:12px;color:#b77918}.learn-characters[data-kind=numbers]{grid-template-columns:repeat(10,minmax(0,1fr))}
.learn-room{display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:24px;align-items:center}.learn-workspace{min-width:0}.learn-board{position:relative;aspect-ratio:4/3;isolation:isolate;filter:drop-shadow(0 10px 12px #4f3b2515)}.learn-board-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}.learn-writing-area{position:absolute;inset:6% 5% 10%;border-radius:5px;overflow:hidden}.learn-writing-area svg{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}.learn-guide-line{stroke:#d9efde;stroke-width:1.5;opacity:.22;stroke-dasharray:8 8}.learn-outline{fill:none;stroke:#edf6df;stroke-width:24;stroke-linecap:round;stroke-linejoin:round;opacity:.22}.learn-outline.current{opacity:.38}.learn-outline.finished{opacity:1;stroke:#ffe18b}.learn-copy-model{opacity:.85;stroke-width:18}.learn-stroke-ink{fill:none;stroke-width:17;stroke-linecap:round;stroke-linejoin:round;opacity:.93}.learn-start-dot{fill:#ffe18b;stroke:#315a49;stroke-width:4}.learn-start-label{fill:#264939;font-family:Nunito,sans-serif;font-size:20px;font-weight:950;text-anchor:middle;dominant-baseline:central}.learn-arrow{fill:#fff3b1}.learn-copy-label{fill:#eef8df;font-family:Nunito,sans-serif;font-weight:850;font-size:23px;text-anchor:middle}.learn-demo-dot{fill:#fff5ad;stroke:white;stroke-width:4}#learn-demo-dot{fill:#fff5ad;stroke:white;stroke-width:4;pointer-events:none}
.learn-board-actions{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}.learn-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:8px 12px;background:#fff;border:1px solid #e6daca;border-radius:12px;font-size:13px;font-weight:850;color:#6d536e}.learn-action:disabled{opacity:.45;cursor:default}.learn-action[aria-pressed=true]{background:#fff1bd;border-color:#d8b75a}.learn-chalks{display:flex;gap:3px;margin-left:auto;background:#ede2d2;padding:4px;border-radius:14px}.learn-chalks button{display:grid;place-items:center;width:40px;height:40px;background:transparent;border:2px solid transparent;border-radius:10px}.learn-chalks button[aria-pressed=true]{border-color:#765397;background:#fff}.learn-chalks span{display:block;width:14px;height:27px;border-radius:4px;background:#fff8d7;transform:rotate(18deg);box-shadow:inset -4px 0 #0000000a,1px 2px 2px #725f3e30}.chalk-1 span{background:#ffe18b}.chalk-2 span{background:#ffc1da}.chalk-3 span{background:#aee7ff}
.learn-buddies{text-align:center}.learn-bubble{position:relative;background:white;border:2px solid #e8dcf1;border-radius:22px;padding:17px 14px;min-height:120px;box-shadow:0 5px 15px #7e5b9120}.learn-bubble:after{content:'';position:absolute;bottom:-11px;left:45%;width:18px;height:18px;background:white;border-right:2px solid #e8dcf1;border-bottom:2px solid #e8dcf1;transform:rotate(45deg)}.learn-bubble .eyebrow{font-size:10px;letter-spacing:.9px}.learn-bubble p{font-family:Fredoka,sans-serif;font-size:20px;line-height:1.35;color:#694691;margin-top:7px}.learn-mascots{position:relative;height:200px;margin:10px 0 2px}.learn-mascots img{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block}.learn-lesson{font-size:13px;font-weight:850;color:#5e6d5c}.learn-progress{height:10px;border-radius:8px;background:#e1e6d9;overflow:hidden;margin:10px 0 9px}.learn-progress>span{display:block;height:100%;width:0;background:#79ac88;border-radius:8px;transition:width .15s}.learn-lesson>span:last-child{font-size:11px;color:#82718b}.learn-buddies>.button{margin-top:15px;width:100%;padding:10px 15px;min-height:48px}.learn-instruction{text-align:center;color:#6b665d;font-size:14px;margin:20px auto;max-width:740px}.learn-parent-note{max-width:900px;margin:35px auto 0;border-top:1px solid #e8dfee;padding-top:17px;color:var(--muted);font-size:14px}.learn-parent-note summary{font-weight:850;color:#73558f;cursor:pointer;min-height:44px}.learn-parent-note p{line-height:1.7}
@keyframes learn-glow{50%{stroke-width:7;stroke:#fff6b8}}@keyframes learn-cheer{50%{transform:translateY(-6px) rotate(-2deg)}}
@media(prefers-reduced-motion:no-preference){.learn-start-dot{animation:learn-glow 1.7s ease-in-out infinite}.learn-mascots.is-cheering{animation:learn-cheer .6s ease-in-out 2}}
@media(max-width:1000px){.learn-room{grid-template-columns:minmax(0,1fr) 180px;gap:14px}.learn-bubble{padding:12px;min-height:100px}.learn-bubble p{font-size:17px}.learn-mascots{height:160px}.learn-action{padding:8px;font-size:12px}.learn-chalks{margin:0}.learn-board-actions{gap:6px}.learn-characters{gap:5px}}
@media(max-width:700px){.learn-intro{padding:24px 0 20px;gap:12px}.learn-intro h1{font-size:29px}.learn-intro p{font-size:14px}.learn-stamp{width:68px;height:74px;border-radius:20px;font-size:31px}.learn-stamp span{font-size:15px;letter-spacing:2px}.learn-controls{gap:10px}.learn-switch{flex:1}.learn-switch button{flex:1;padding:8px 10px;font-size:12px;white-space:nowrap}.learn-modes{flex-basis:100%}.learn-characters{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-bottom:14px}.learn-characters button{font-size:22px;min-height:44px;border-radius:10px}.learn-characters[data-kind=numbers]{grid-template-columns:repeat(5,minmax(0,1fr))}.learn-room{display:flex;flex-direction:column;gap:12px}.learn-workspace{width:100%}.learn-board{aspect-ratio:1.05}.learn-board-actions{justify-content:center;gap:5px}.learn-action{padding:8px 10px;font-size:12px;flex:1}.learn-action .icon{width:20px;height:20px}.learn-chalks{flex:none;margin:2px auto 0}.learn-buddies{width:100%;display:grid;grid-template-columns:90px 1fr;gap:8px 12px;align-items:center}.learn-mascots{grid-column:1;grid-row:1/3;height:114px;margin:0}.learn-bubble{grid-column:2;grid-row:1;min-height:0;padding:10px 12px;text-align:left;border-radius:16px}.learn-bubble:after{display:none}.learn-bubble .eyebrow{display:none}.learn-bubble p{font-size:17px;margin:0}.learn-lesson{grid-column:2;grid-row:2;text-align:left;font-size:12px}.learn-progress{margin:5px 0}.learn-buddies>.button{grid-column:1/-1;grid-row:3;margin:0}.learn-instruction{font-size:12px;margin:16px auto}.learn-parent-note{margin-top:25px;font-size:13px}}
@media(max-width:360px){.learn-stamp{display:none}.learn-characters{grid-template-columns:repeat(6,minmax(0,1fr))}.learn-action{font-size:11px;padding:8px 6px}.learn-buddies{grid-template-columns:80px 1fr}}

/* Keep one whole writing surface within reach, including short laptop screens. */
.learn-room{scroll-margin-top:18px}.learn-board{width:min(100%,calc(68dvh * 4 / 3));margin:0 auto}.learn-mascots{overflow:hidden}.learn-mascots img{position:absolute;left:-20%;width:140%;max-width:none;height:100%}
.learn-lesson>span{display:block}
@media(max-width:700px){.learn-board{width:min(100%,calc(52dvh * 1.05))}.learn-buddies{grid-template-columns:120px 1fr}.learn-mascots{height:130px}}
@media(max-width:360px){.learn-buddies{grid-template-columns:105px 1fr}}

/* Stroke numbers are quiet stationary hints, never a moving target. */
#learn-start{pointer-events:none;opacity:.75}#learn-surface.is-drawing #learn-start{opacity:.25}.learn-start-dot{animation:none!important}.learn-start-label{font-size:16px}

/* Pick the pink sponge up from the shelf and carry it to the chalk. */
.learn-outline.finished{opacity:.38}.learn-sponge{position:absolute;left:6%;bottom:5%;width:13%;min-width:64px;height:8%;min-height:44px;background:transparent;border:2px solid transparent;border-radius:12px;touch-action:none;cursor:grab}.learn-sponge>span{position:absolute;right:-9px;bottom:-8px;white-space:nowrap;background:#fff0ce;color:#76491e;padding:3px 8px;border:1px solid #d29450;border-radius:10px;font-size:10px;font-weight:850}.learn-sponge:hover{border-color:#fff0ce}.learn-sponge[aria-pressed=true]{border-color:#f2dbff;box-shadow:0 0 0 2px #8255ae}.learn-sponge[aria-pressed=true]>span{background:#f1e0ff;color:#62428d;border-color:#8255ae}
.learn-sponge-cursor{position:fixed;left:0;top:0;width:68px;height:46px;z-index:70;pointer-events:none;transform:translate(-50%,-50%) rotate(-9deg);filter:drop-shadow(2px 5px 3px #172c3266)}.learn-sponge-cursor svg{display:block;width:100%;height:100%}#learn-surface[data-tool=sponge],body.learn-erasing,body.learn-erasing *{cursor:none!important}.learn-sponge.is-lifted{border-style:dashed}.learn-sponge.is-lifted>span{opacity:.55}
/* Light follows the child's own strokes, so the letter itself shines. */
#learn-celebration{pointer-events:none}.learn-aura,.learn-halo{fill:none;stroke-linecap:round;stroke-linejoin:round}.learn-aura{stroke:#ffd870;stroke-width:57;filter:blur(9px);opacity:.65}.learn-halo{stroke:#fff1b8;stroke-width:30;filter:blur(3px);opacity:.9}.is-celebrating #learn-ink{filter:drop-shadow(0 0 4px #fff8de) drop-shadow(0 0 12px #ffde70)}
@keyframes learn-radiance{0%{opacity:0}20%{opacity:1}45%{opacity:.65}65%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:no-preference){.is-celebrating #learn-celebration{animation:learn-radiance 2.6s ease-in-out both}.is-celebrating #learn-ink{animation:learn-radiance-core 2.6s ease-in-out both}}
@keyframes learn-radiance-core{0%,100%{filter:none}25%,65%{filter:drop-shadow(0 0 5px #fff8de) drop-shadow(0 0 16px #ffde70)}}