@font-face{font-family:ReadySprint;src:url('../assets/fonts/ReadySprintClassroom-Regular.woff2') format('woff2');font-display:swap;font-weight:400}@font-face{font-family:ReadySprint;src:url('../assets/fonts/ReadySprintClassroom-Bold.woff2') format('woff2');font-display:swap;font-weight:700}
*{box-sizing:border-box}body{margin:0;background:#f3f9f6;color:#173f38;font:19px/1.35 ReadySprint,Arial,sans-serif}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;min-height:48px;border:2px solid #afc8bf;border-radius:12px;background:#fff;color:#173f38;padding:8px 10px;cursor:pointer}button:disabled{opacity:.55;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible{outline:4px solid #8a4aad;outline-offset:3px}[hidden]{display:none!important}header{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px 12px;background:white;border-bottom:2px solid #c9dfd4}header a,.exit,.guide a{display:flex;align-items:center;justify-content:center;min-height:48px;color:#155b44;font-weight:700}header a{text-decoration:none}main{max-width:660px;margin:auto;padding:12px}.eyebrow{margin:0;color:#795898;font-size:12px;font-weight:700}h1{font-size:30px;line-height:1.15;margin:5px 0}.purpose{margin:5px 0 12px}.scene{scroll-margin-top:8px}.progress{font-size:16px;margin:0}.word{font-size:64px;line-height:1.1;color:#000;text-align:center;margin:4px 0 8px}.audio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.audio button{white-space:normal;font-size:16px;padding:6px;line-height:1.2}.audio-status,.hint,.feedback{font-size:16px;margin:6px 0}.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:10px 0}.crayon{padding:5px 2px;font-size:13px;min-height:64px}.swatch{display:block;width:26px;height:26px;margin:0 auto 3px;border-radius:50%;border:2px solid #425457}.crayon[aria-pressed=true],.mode[aria-pressed=true]{border-color:#8050a1;box-shadow:inset 0 0 0 2px #8050a1;background:#f7eefa}.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}.mode{font-size:17px}.drawing-surface{position:relative;width:100%;aspect-ratio:4/3;background:white;border:2px solid #b9cfcb;border-radius:16px;overflow:hidden}.drawing-surface canvas,.drawing-surface img{position:absolute;inset:0;width:100%;height:100%}.drawing-surface canvas{touch-action:none}.drawing-surface canvas.scroll-mode{touch-action:pan-y pinch-zoom}.drawing-surface img{pointer-events:none;object-fit:contain}.cursor{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border:3px solid #8050a1;border-radius:50%;pointer-events:none;display:none}.drawing-surface:focus-within .cursor{display:block}.cursor.painting{background:#f3c96688}.actions,.navigation{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.primary{background:#177956;border-color:#0e6445;color:#fff;font-weight:700}.guide{margin:16px 0;border:1px solid #bad0c7;border-radius:14px;background:#fff;padding:0 12px}.guide summary{display:flex;align-items:center;min-height:48px;font-weight:700;cursor:pointer}.guide summary::before{content:'▸';margin-right:8px}.guide[open] summary::before{content:'▾'}.guide p{font-size:17px}.exit{margin:16px 0}.gallery{display:grid;gap:10px;margin:14px 0}.gallery button{font-size:30px}.skip{position:absolute;top:-100px;left:12px;z-index:10;background:white;padding:12px}.skip:focus{top:6px}#voice-settings select,#voice-settings button{min-height:48px;max-width:100%}#voice-settings{overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Direct-colour choice: same close-framed approved outlines, no select buttons. */
.choice-instruction{font-size:21px;font-weight:700;line-height:1.35;margin:12px 0}
.picture-choices{display:grid;grid-template-columns:1fr;gap:16px;max-width:480px;margin:12px auto}
.picture-card{min-width:0}
.drawing-surface{height:200px;aspect-ratio:auto;border:3px solid #7fafa0;border-radius:20px;background:#fff}
.drawing-surface canvas,.drawing-surface img{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px)}
.drawing-surface canvas{touch-action:none}
.drawing-surface canvas.scroll-mode{touch-action:pan-y pinch-zoom}
.picture-card .actions{margin:7px 0 0}.picture-card .actions button{font-size:16px;padding:6px}
.choice-feedback{min-height:58px;padding:12px;border:2px solid #d2bc78;border-radius:14px;background:#fff4d8;color:#3c350b;font-size:19px}
.choice-feedback.success{background:#e1f2dc;border-color:#358445;color:#194d2c;font-weight:700;display:flex;gap:12px;align-items:center}
.choice-feedback .star{display:inline-block;font-size:46px;line-height:1.1;filter:drop-shadow(0 0 8px #ffd747);flex:none}
.submit{display:block;width:100%;min-height:62px;font-size:26px;margin:12px 0}
.audio{grid-template-columns:2fr 1fr 1fr}.audio button{min-height:60px}.audio .primary{font-size:18px}
@media(min-width:600px){.picture-choices{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.star{animation:none!important}}

/* Sample-only shell; original drawing card sizes stay unchanged. */
.sample-notice{margin:10px;padding:10px 14px;border:2px solid #9b6600;border-radius:12px;background:#fff4d8;color:#342500;font:15px/1.4 system-ui,sans-serif}.sample-footer{margin:24px 0 12px;padding:18px;border:2px solid #c9dfd4;border-radius:16px;background:#fff;text-align:center}.sample-footer p{margin:8px 0}.subscribe{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:10px 18px;border-radius:13px;background:#177956;color:#fff;font-weight:700;font-size:23px;text-decoration:none}.sample-footer small{display:block;margin-top:8px;font-size:16px}.purpose{max-width:55ch}.audio .primary{font-size:20px}.star{animation:star-glow 1.1s ease-in-out 2}@keyframes star-glow{50%{filter:drop-shadow(0 0 15px #ffd747)}}@media(prefers-reduced-motion:reduce){.star{animation:none!important}}

/* Recognisable white rubber eraser, not an empty colour swatch. */
.eraser-icon{display:inline-block;position:relative;width:34px;height:21px;margin:3px 0 5px;background:#fff;border:2px solid #354b50;border-radius:4px;transform:rotate(-18deg) skewX(-9deg);box-shadow:0 4px 0 #c4cdd0}
.eraser-icon::after{content:"";position:absolute;right:6px;top:0;height:100%;border-left:2px solid #9aa8ad}