@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@500;600;700;800&display=swap";:root,:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--page-bg:#f2f8f7;--surface:#fff;--white:#fff;--surface-glass:#ffffffc7;--surface-glass-soft:#ffffffa6;--surface-soft:#f7fbfa;--surface-muted:#edf5f4;--surface-hover:#eff8f7;--surface-panel:#dfecea;--surface-icon:#e2f4f2;--surface-icon-soft:#e8f5f4;--surface-close:#eaf2f1;--text-strong:#203b39;--text:#385451;--text-secondary:#607a77;--text-muted:#829b98;--text-faint:#9aadaa;--brand:#28a99e;--brand-soft:#3dbdb2;--brand-dark:#1d7f77;--focus:#ffb703;--coral:#ff725e;--coral-dark:#dd5848;--green:#7bc950;--cyan:#28b8d5;--pink:#d65db1;--success:#4fc27b;--success-strong:#326346;--success-text:#467057;--success-bg:#ecf9f1;--success-bg-soft:#edfbf2;--danger:#a84c49;--danger-strong:#913d3a;--danger-border:#f0d6d5;--danger-bg:#fff5f4;--danger-bg-hover:#ffebe9;--warning-text:#8a4c30;--warning-strong:#a85a37;--warning-bg:#fff2df;--warning-fill:#ff9b55;--border:#dce9e7;--border-soft:#e4efed;--border-dashed:#cfdfdc;--notebook-line:#dfebe9;--notebook-margin:#ffd9d2;--switch-off:#cbd9d7;--overlay:#14312f7a;--overlay-soft:#183b3861;--page-background:radial-gradient(circle at 10% 8%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 22%), radial-gradient(circle at 90% 18%, #ffb7031f, transparent 20%), var(--page-bg);--playground-background:radial-gradient(circle at 12% 18%, #ffb70329, transparent 24%), radial-gradient(circle at 88% 78%, #28b8d526, transparent 25%), var(--surface);--preschool-background:radial-gradient(circle at 15% 20%, #ffb70333, transparent 28%), radial-gradient(circle at 88% 76%, #28b8d52e, transparent 30%), radial-gradient(circle at 55% 50%, #d65db112, transparent 35%), var(--surface);--scene-space-background:radial-gradient(circle at 12% 18%, #fffffff2 0 1px, transparent 2px), radial-gradient(circle at 28% 72%, #7adcffe6 0 2px, transparent 3px), radial-gradient(circle at 48% 24%, #ffdc7de6 0 1px, transparent 2px), radial-gradient(circle at 69% 64%, #ffffffd9 0 1px, transparent 2px), radial-gradient(circle at 86% 20%, #cdabffe6 0 2px, transparent 3px), linear-gradient(145deg, #07152f, #172655 56%, #331b58);--scene-space-text:#f4f7ff;--scene-space-border:#394f7d;--scene-ocean-background:radial-gradient(circle at 15% 22%, #ffffff61 0 5px, transparent 6px), radial-gradient(circle at 76% 30%, #ffffff42 0 9px, transparent 10px), radial-gradient(circle at 88% 72%, #fff3 0 14px, transparent 15px), linear-gradient(180deg, #bcecf2, #5cc8d8 56%, #2189aa);--scene-ocean-text:#123d53;--scene-ocean-border:#79d4de;--scene-forest-background:radial-gradient(circle at 18% 25%, #fff4b173, transparent 22%), radial-gradient(circle at 82% 70%, #15664438, transparent 28%), linear-gradient(155deg, #dff2c2, #8fd08c 58%, #3f8f67);--scene-forest-text:#1f4a32;--scene-forest-border:#9ed39c;--shadow-soft:0 10px 35px #203b390f;--shadow-card:0 24px 70px #203b391f;--shadow-panel:0 30px 90px #14312f40;--shadow-control:0 8px 25px #203b3926;--shadow-letter:#203b391a;--letter-coral:#ff725e;--letter-yellow:#ffb703;--letter-green:#7bc950;--letter-cyan:#28b8d5;--letter-purple:#8b6fdc;--letter-pink:#d65db1}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--page-bg:#0f1718;--surface:#172526;--white:#fff;--surface-glass:#172526e6;--surface-glass-soft:#172526cc;--surface-soft:#1b2c2d;--surface-muted:#203334;--surface-hover:#253b3c;--surface-panel:#1c2d2e;--surface-icon:#203c3a;--surface-icon-soft:#1d3433;--surface-close:#243536;--text-strong:#f0faf9;--text:#d3e5e3;--text-secondary:#abc2bf;--text-muted:#839c99;--text-faint:#6f8784;--brand:#28a99e;--brand-soft:#49c4b9;--brand-dark:#1d7f77;--focus:#ffc342;--coral:#ff8272;--coral-dark:#d95d50;--green:#8ed35f;--cyan:#45c7df;--pink:#e171bf;--success:#5bd58b;--success-strong:#8ce5ad;--success-text:#a2e8bb;--success-bg:#203a2c;--success-bg-soft:#21382b;--danger:#ff9993;--danger-strong:#ffb0ab;--danger-border:#673d43;--danger-bg:#3b272d;--danger-bg-hover:#4a2d34;--warning-text:#f2b184;--warning-strong:#ffc098;--warning-bg:#3c3024;--warning-fill:#ffab68;--border:#304948;--border-soft:#293f3f;--border-dashed:#3d5a58;--notebook-line:#2d4444;--notebook-margin:#754d55;--switch-off:#405654;--overlay:#050d0ebd;--overlay-soft:#050d0ea3;--page-background:radial-gradient(circle at 10% 8%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 24%), radial-gradient(circle at 90% 18%, #ffb70314, transparent 22%), var(--page-bg);--playground-background:radial-gradient(circle at 12% 18%, #ffb70314, transparent 25%), radial-gradient(circle at 88% 78%, #28b8d517, transparent 26%), var(--surface);--preschool-background:radial-gradient(circle at 15% 20%, #ffb7031a, transparent 29%), radial-gradient(circle at 88% 76%, #28b8d51a, transparent 31%), radial-gradient(circle at 55% 50%, #d65db114, transparent 36%), var(--surface);--scene-space-background:radial-gradient(circle at 12% 18%, #ffffffe6 0 1px, transparent 2px), radial-gradient(circle at 28% 72%, #5fcdffcc 0 2px, transparent 3px), radial-gradient(circle at 48% 24%, #ffd264d1 0 1px, transparent 2px), radial-gradient(circle at 69% 64%, #fffc 0 1px, transparent 2px), radial-gradient(circle at 86% 20%, #bc91ffd1 0 2px, transparent 3px), linear-gradient(145deg, #030a1c, #101d44 56%, #25133f);--scene-space-text:#f4f7ff;--scene-space-border:#31436c;--scene-ocean-background:radial-gradient(circle at 15% 22%, #fff3 0 5px, transparent 6px), radial-gradient(circle at 76% 30%, #ffffff24 0 9px, transparent 10px), radial-gradient(circle at 88% 72%, #ffffff1a 0 14px, transparent 15px), linear-gradient(180deg, #163d54, #17647b 56%, #0c3d55);--scene-ocean-text:#e8fbff;--scene-ocean-border:#287b8d;--scene-forest-background:radial-gradient(circle at 18% 25%, #e4e1862e, transparent 22%), radial-gradient(circle at 82% 70%, #082b1c59, transparent 28%), linear-gradient(155deg, #203c2b, #285f42 58%, #163e31);--scene-forest-text:#ecfae7;--scene-forest-border:#3d7456;--shadow-soft:0 10px 35px #0000002e;--shadow-card:0 24px 70px #00000052;--shadow-panel:0 30px 90px #00000085;--shadow-control:0 8px 25px #00000047;--shadow-letter:#00000038;--letter-coral:#ff8272;--letter-yellow:#ffc342;--letter-green:#8ed35f;--letter-cyan:#45c7df;--letter-purple:#a39dff;--letter-pink:#e171bf}:root{color:var(--text);background:var(--page-bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Nunito,system-ui,sans-serif}*{box-sizing:border-box}html{min-width:320px;min-height:100%}body{background:var(--page-background);min-width:320px;min-height:100vh;margin:0;transition:color .2s,background .2s}button,a{-webkit-tap-highlight-color:transparent}::selection{color:var(--surface);background:var(--brand)}.app-shell{width:min(1180px,100% - 32px);margin:0 auto;padding:18px 0 32px}.topbar{border:1px solid color-mix(in srgb, var(--text-strong) 8%, transparent);background:var(--surface-glass);min-height:72px;box-shadow:0 10px 40px color-mix(in srgb, var(--text-strong) 8%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:22px;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 20px;display:grid}.brand{width:fit-content;color:var(--text-strong);align-items:center;gap:11px;font:800 24px/1 "Baloo 2",sans-serif;text-decoration:none;display:inline-flex}.brand-mark{place-items:center;width:42px;height:42px;display:grid}.brand-mark img{object-fit:contain;width:44px;height:44px}.status-pill{color:var(--success-strong);background:var(--success-bg-soft);border-radius:99px;align-items:center;gap:9px;padding:9px 15px;font-size:13px;font-weight:800;display:flex}.status-dot{background:var(--success);width:9px;height:9px;box-shadow:0 0 0 4px color-mix(in srgb, var(--success) 15%, transparent);border-radius:50%}.header-actions{justify-content:flex-end;gap:9px;display:flex}button{font:inherit}.icon-button,.fullscreen-button,.clear-button,.grownups-note button{cursor:pointer;border:0;transition:transform .16s,box-shadow .16s,opacity .16s}.icon-button:hover,.fullscreen-button:hover,.clear-button:hover:not(:disabled),.grownups-note button:hover{transform:translateY(-2px)}.icon-button:focus-visible,.fullscreen-button:focus-visible,.clear-button:focus-visible,.grownups-note button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.icon-button{width:42px;height:42px;color:var(--brand);background:var(--surface-icon-soft);border-radius:13px;font-size:21px;font-weight:800}.fullscreen-button{color:var(--white);background:var(--brand);box-shadow:0 5px 0 var(--brand-dark);border-radius:13px;align-items:center;gap:7px;padding:0 17px;font-weight:800;display:flex}.hero-copy{text-align:center;padding:48px 20px 30px}.eyebrow{color:var(--brand);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:8px;font-size:13px;font-weight:800;display:inline-flex}.eyebrow span{color:var(--focus);font-size:18px}.hero-copy h1{color:var(--text-strong);letter-spacing:-2px;margin:9px 0 5px;font:800 clamp(42px,6vw,68px)/1.05 "Baloo 2",sans-serif}.hero-copy p{max-width:610px;color:var(--text-secondary);margin:0 auto;font-size:17px;font-weight:700}.mode-picker{border:1px solid var(--border);background:var(--surface-glass-soft);max-width:760px;box-shadow:0 10px 35px color-mix(in srgb, var(--text-strong) 6%, transparent);border-radius:22px;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 auto 22px;padding:7px;display:grid}.mode-option{min-width:0;color:var(--text-secondary);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:16px;align-items:center;gap:10px;padding:10px 12px;transition:color .16s,background .16s,transform .16s,box-shadow .16s;display:flex}.mode-option:hover{color:var(--text);background:var(--surface-hover)}.mode-option.active{color:var(--text);background:var(--surface);box-shadow:0 5px 18px color-mix(in srgb, var(--text-strong) 12%, transparent)}.mode-option:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.mode-icon{width:40px;height:40px;color:var(--brand-soft);background:var(--surface-icon);border-radius:13px;flex:none;place-items:center;font:800 15px/1 "Baloo 2",sans-serif;display:grid}.mode-option.active .mode-icon{color:var(--white);background:var(--brand)}.mode-option strong,.mode-option small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.mode-option strong{font:800 14px/1.2 Nunito,sans-serif}.mode-option small{color:var(--text-muted);margin-top:2px;font-size:11px;font-weight:700}.playground{border:2px solid var(--border);background:var(--playground-background);min-height:440px;box-shadow:0 24px 70px color-mix(in srgb, var(--text-strong) 12%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--text-strong) 5%, transparent);border-radius:40px;flex-direction:column;justify-content:center;align-items:center;padding:42px 9%;display:flex;position:relative;overflow:hidden}.playground:focus{outline:none}.playground-preschool{background:var(--preschool-background);min-height:520px;padding-bottom:78px}.playground-writer{background:var(--surface);justify-content:flex-start;padding-top:35px}.key-display{z-index:2;min-height:112px;color:var(--text);paint-order:stroke fill;-webkit-text-stroke:3px color-mix(in srgb, var(--surface) 88%, transparent);text-shadow:0 8px 0 var(--surface-muted);place-items:center;font:800 clamp(58px,10vw,105px)/1 "Baloo 2",sans-serif;display:grid;position:relative}.typed-paper{z-index:2;border:2px dashed var(--border-dashed);width:100%;min-height:88px;max-height:145px;color:var(--text);background:var(--surface-soft);white-space:pre-wrap;overflow-wrap:anywhere;text-align:center;border-radius:20px;margin:23px 0 20px;padding:20px 24px;font:700 26px/1.45 Nunito,sans-serif;position:relative;overflow:auto}.playground-words .key-display{min-height:clamp(150px,24vh,240px);font-size:150px}.playground-words .key-display-label{font-size:60px}.playground-words .typed-paper{overscroll-behavior:contain;scrollbar-gutter:stable;justify-content:center;align-items:flex-start;min-height:170px;max-height:260px;margin:16px 0 24px;padding:28px 32px;font-size:clamp(72px,7vw,96px);line-height:1.15;display:flex}.playground-words .typed-content{white-space:pre-wrap;overflow-wrap:anywhere;text-align:center;min-width:0;max-width:100%;margin-block:auto;display:block}.playground-words .typed-paper .cursor{vertical-align:0;height:68px}.placeholder{color:var(--text-faint);font-weight:600}.cursor{vertical-align:-4px;background:var(--brand);border-radius:2px;width:3px;height:28px;margin-left:4px;animation:.8s step-end infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}.clear-button{z-index:2;color:var(--text-secondary);background:var(--surface-muted);border-radius:14px;padding:11px 17px;font-size:13px;font-weight:800;position:relative}.clear-button:disabled{opacity:.42;cursor:default}.decoration{z-index:0;color:var(--focus);opacity:.8;font-size:30px;position:absolute}.decoration-one{top:54px;left:8%;transform:rotate(-12deg)}.decoration-two{color:var(--coral);font-size:18px;top:84px;right:10%}.decoration-three{color:var(--green);font-size:36px;bottom:47px;left:7%}.playground.scene-space{color:var(--scene-space-text);background:var(--scene-space-background);border-color:var(--scene-space-border)}.playground.scene-ocean{color:var(--scene-ocean-text);background:var(--scene-ocean-background);border-color:var(--scene-ocean-border)}.playground.scene-forest{color:var(--scene-forest-text);background:var(--scene-forest-background);border-color:var(--scene-forest-border)}.scene-space .preschool-prompt,.scene-space .preschool-prompt strong,.scene-space .key-display{color:var(--scene-space-text)}.scene-ocean .preschool-prompt,.scene-ocean .preschool-prompt strong,.scene-ocean .key-display{color:var(--scene-ocean-text)}.scene-forest .preschool-prompt,.scene-forest .preschool-prompt strong,.scene-forest .key-display{color:var(--scene-forest-text)}.scene-space .key-display,.scene-ocean .key-display,.scene-forest .key-display{text-shadow:0 8px 0 color-mix(in srgb, currentColor 18%, transparent)}.scene-space .decoration,.scene-ocean .decoration,.scene-forest .decoration{color:currentColor;opacity:.75;filter:drop-shadow(0 5px 6px color-mix(in srgb, currentColor 20%, transparent))}.scene-space .decoration-one,.scene-ocean .decoration-one,.scene-forest .decoration-one{font-size:46px}.scene-space .decoration-two,.scene-ocean .decoration-two,.scene-forest .decoration-two{font-size:28px}.scene-space .decoration-three,.scene-ocean .decoration-three,.scene-forest .decoration-three{font-size:42px}.scene-pattern{z-index:0;color:var(--brand);pointer-events:none;position:absolute;inset:0;overflow:hidden}.scene-pattern span{opacity:.24;filter:drop-shadow(0 5px 8px color-mix(in srgb, currentColor 18%, transparent));font-size:clamp(20px,3vw,38px);animation:5.5s ease-in-out infinite alternate scene-drift;display:block;position:absolute}.scene-space .scene-pattern,.scene-ocean .scene-pattern,.scene-forest .scene-pattern{color:currentColor}.scene-space .scene-pattern span,.scene-ocean .scene-pattern span,.scene-forest .scene-pattern span{opacity:.38}.scene-pattern span:first-child{top:7%;left:17%;rotate:-12deg}.scene-pattern span:nth-child(2){animation-delay:-.8s;top:12%;left:44%;rotate:8deg}.scene-pattern span:nth-child(3){animation-delay:-2.1s;top:8%;right:16%;rotate:16deg}.scene-pattern span:nth-child(4){animation-delay:-1.4s;top:35%;left:5%;rotate:-8deg}.scene-pattern span:nth-child(5){animation-delay:-3s;top:31%;right:7%;rotate:12deg}.scene-pattern span:nth-child(6){animation-delay:-.4s;top:54%;left:21%;rotate:7deg}.scene-pattern span:nth-child(7){animation-delay:-2.5s;top:51%;right:23%;rotate:-14deg}.scene-pattern span:nth-child(8){animation-delay:-1.8s;bottom:12%;left:8%;rotate:10deg}.scene-pattern span:nth-child(9){animation-delay:-3.4s;bottom:8%;left:38%;rotate:-6deg}.scene-pattern span:nth-child(10){animation-delay:-.9s;bottom:14%;right:34%;rotate:13deg}.scene-pattern span:nth-child(11){animation-delay:-2.8s;bottom:7%;right:9%;rotate:-10deg}.scene-pattern span:nth-child(12){animation-delay:-1.1s;top:67%;right:5%;rotate:5deg}@keyframes scene-drift{0%{translate:0 -3px}to{translate:0 7px}}.letter-pop{z-index:1;paint-order:stroke fill;-webkit-text-stroke:2px color-mix(in srgb, var(--surface) 88%, transparent);text-shadow:0 6px 12px var(--shadow-letter);transform:rotate(var(--tilt));pointer-events:none;font:800 44px/1 "Baloo 2",sans-serif;animation:1.1s ease-out forwards float-up;position:absolute;bottom:15%}@keyframes float-up{0%{opacity:0;translate:0 20px;scale:.5}18%{opacity:1;scale:1.08}to{opacity:0;translate:0 -260px;scale:.8}}.playground-preschool .letter-pop{z-index:2;paint-order:stroke fill;-webkit-text-stroke:3px color-mix(in srgb, var(--surface) 88%, transparent);text-shadow:0 8px 0 var(--shadow-letter), 0 12px 22px var(--shadow-letter);line-height:.75;animation:.5s cubic-bezier(.2,1.5,.5,1) both letter-arrive,3.5s ease-in-out .5s infinite letter-wiggle;bottom:auto}@keyframes letter-arrive{0%{opacity:0;rotate:-25deg;scale:.2}to{opacity:1;scale:1;rotate:var(--tilt)}}@keyframes letter-wiggle{0%,to{translate:0;rotate:var(--tilt)}50%{translate:0 -8px;rotate:calc(var(--tilt) + 5deg)}}.preschool-prompt{z-index:2;color:var(--text-secondary);text-align:center;justify-items:center;display:grid;position:relative}.preschool-prompt>span{width:105px;height:105px;color:var(--white);background:var(--coral);box-shadow:0 10px 0 var(--coral-dark);border-radius:32px 32px 32px 10px;place-items:center;margin-bottom:18px;font:800 74px/1 "Baloo 2",sans-serif;display:grid;transform:rotate(-5deg)}.preschool-prompt strong{color:var(--text-strong);font:800 27px/1.2 "Baloo 2",sans-serif}.preschool-prompt small{margin-top:5px;font-size:13px;font-weight:700}.playground-preschool .clear-button{position:absolute;bottom:24px}.writer-paper{z-index:2;border:1px solid var(--border-soft);width:100%;min-height:315px;max-height:390px;color:var(--text);background:linear-gradient(90deg, transparent 44px, var(--notebook-margin) 44px 46px, transparent 46px), repeating-linear-gradient(var(--surface) 0 42px, var(--notebook-line) 43px 44px);white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;box-shadow:0 8px 30px color-mix(in srgb, var(--text-strong) 6%, transparent);background-position:0 0,0 10px;background-attachment:scroll,local;border-radius:20px;padding:15px 26px 19px 66px;font:700 25px/44px Nunito,sans-serif;position:relative;overflow:auto}.writer-paper .cursor{vertical-align:-3px;height:27px}.playground-writer .clear-button{margin-top:20px}.blocked-toast{z-index:5;min-width:340px;color:var(--warning-text);background:var(--warning-bg);box-shadow:0 8px 24px color-mix(in srgb, var(--warning-text) 12%, transparent);border-radius:99px;grid-template-columns:auto auto 90px auto;align-items:center;gap:9px;padding:10px 14px;font-size:13px;font-weight:800;animation:.18s ease-out toast-in;display:grid;position:absolute;top:24px;left:50%;translate:-50%}.hold-track{background:color-mix(in srgb, var(--warning-text) 14%, transparent);border-radius:99px;height:7px;overflow:hidden}.hold-track span{border-radius:inherit;background:var(--warning-fill);height:100%;transition:width 40ms linear;display:block}.blocked-toast strong{min-width:20px;color:var(--warning-strong)}.released-toast{z-index:6;color:var(--success-strong);background:var(--success-bg);box-shadow:0 8px 24px color-mix(in srgb, var(--success-strong) 12%, transparent);border-radius:99px;padding:10px 17px;font-size:13px;font-weight:800;animation:.18s ease-out toast-in;position:absolute;top:24px;left:50%;translate:-50%}@keyframes toast-in{0%{opacity:0;translate:-50% -8px}}.key-hold-indicator,.key-released-indicator{z-index:20;width:42px;height:42px;box-shadow:0 5px 18px color-mix(in srgb, var(--text-strong) 16%, transparent);pointer-events:none;border-radius:50%;place-items:center;padding:4px;display:grid;position:absolute;bottom:20px;left:20px}.key-hold-indicator{--key-progress:0deg;color:var(--text-secondary);background:conic-gradient(var(--brand) var(--key-progress), color-mix(in srgb, var(--brand) 12%, transparent) 0)}.key-hold-indicator:before,.key-released-indicator:before{content:"";background:color-mix(in srgb, var(--surface) 96%, transparent);border-radius:50%;position:absolute;inset:4px}.key-hold-indicator span,.key-released-indicator span{z-index:1;max-width:30px;color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;font-size:8px;font-weight:900;position:relative;overflow:hidden}.key-released-indicator{color:var(--success);background:var(--success);animation:1.8s both indicator-done}.key-released-indicator span{color:var(--success-strong);font-size:17px}@keyframes indicator-done{0%{opacity:0;scale:.6}12%,78%{opacity:1;scale:1}to{opacity:0;scale:.85}}.grownups-note{border:1px solid var(--border);max-width:820px;min-height:72px;color:var(--text-secondary);background:var(--surface-glass-soft);border-radius:20px;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;margin:22px auto 0;padding:12px 15px;display:grid}.shield{width:42px;height:42px;color:var(--white);background:var(--success);border-radius:15px 15px 15px 6px;place-items:center;font-weight:900;display:grid}.grownups-note strong{color:var(--text);font-size:14px;display:block}.grownups-note p{margin:2px 0 0;font-size:12px;font-weight:600}.grownups-note button{color:var(--brand-dark);background:var(--surface-icon);border-radius:12px;padding:10px 14px;font-size:12px;font-weight:800}.fullscreen-help{z-index:100;background:var(--overlay-soft);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);place-items:center;padding:20px;display:grid;position:fixed;inset:0}.fullscreen-help-card{border:2px solid var(--white);width:min(520px,100%);color:var(--text);background:var(--surface);box-shadow:0 25px 80px color-mix(in srgb, var(--text-strong) 25%, transparent);border-radius:25px;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:24px;display:grid;position:relative}.keyboard-key{width:72px;height:60px;color:var(--white);background:var(--brand);box-shadow:0 6px 0 var(--brand-dark);border-radius:15px;place-items:center;font:800 23px/1 "Baloo 2",sans-serif;display:grid}.fullscreen-help-card strong{color:var(--text-strong);font:800 23px/1.15 "Baloo 2",sans-serif;display:block}.fullscreen-help-card p{color:var(--text-secondary);margin:5px 0 0;font-size:13px;font-weight:700}.fullscreen-help-card>button{width:32px;height:32px;color:var(--text-secondary);background:var(--surface-close);cursor:pointer;border:0;border-radius:50%;align-self:start;font-size:20px}@media (width<=760px){.app-shell{width:min(100% - 18px,1180px);padding-top:9px}.topbar{border-radius:17px;grid-template-columns:1fr auto;padding:0 13px}.status-pill{display:none}.fullscreen-button{justify-content:center;width:42px;padding:0;font-size:0}.fullscreen-button span{font-size:20px}.hero-copy{padding:36px 15px 22px}.hero-copy h1{letter-spacing:-1px}.mode-picker{border-radius:18px;grid-template-columns:1fr;margin-bottom:14px}.mode-option{padding:8px 10px}.mode-option strong,.mode-option small{white-space:normal;display:inline}.mode-option small:before{content:" · "}.playground{border-radius:28px;min-height:390px;padding:35px 18px}.playground-preschool{min-height:470px}.writer-paper{min-height:300px;padding-left:48px;font-size:21px}.writer-paper:before{left:32px}.typed-paper{font-size:21px}.blocked-toast{border-radius:18px;grid-template-columns:auto 1fr auto;min-width:min(330px,100% - 28px)}.hold-track{grid-column:2/4;width:100%}.grownups-note{grid-template-columns:auto 1fr}.grownups-note button{grid-column:1/-1}.fullscreen-help-card{grid-template-columns:auto 1fr;padding:20px}.fullscreen-help-card>button{position:absolute;top:10px;right:10px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}body{overflow:hidden}.app-shell{width:100vw;height:100vh;margin:0;padding:12px}.topbar,.hero-copy,.mode-picker,.grownups-note{display:none}.playground{border-radius:32px;width:100%;height:calc(100vh - 24px);min-height:0}.playground-preschool{min-height:0}.quick-controls{z-index:50;gap:8px;display:flex;position:fixed;top:24px;left:24px}.quick-control{border:1px solid var(--border);width:48px;height:48px;color:var(--text-muted);background:color-mix(in srgb, var(--surface) 92%, transparent);box-shadow:var(--shadow-control);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;place-items:center;transition:color .16s,background .16s,border-color .16s,transform .16s;display:grid}.quick-control:hover{color:var(--text);background:var(--surface);transform:translateY(-2px)}.quick-control.active{color:var(--brand);border-color:color-mix(in srgb, var(--brand) 30%, var(--border));background:color-mix(in srgb, var(--brand) 12%, var(--surface))}.quick-control:focus-visible{outline:4px solid var(--focus);outline-offset:3px}.quick-control span{font:800 15px/1 "Baloo 2",sans-serif}.fullscreen-control span{font-size:21px}.sound-control{position:relative}.sound-icon{fill:currentColor;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:23px;height:23px}.sound-icon path:not(:first-child){fill:none}.sound-control.muted:after{content:"";background:var(--danger);pointer-events:none;border-radius:99px;width:29px;height:3px;position:absolute;rotate:-45deg}.settings-trigger{--hold:0deg;z-index:50;width:52px;height:52px;color:var(--text-secondary);background:conic-gradient(var(--brand) var(--hold), color-mix(in srgb, var(--surface) 80%, transparent) 0);box-shadow:0 8px 25px color-mix(in srgb, var(--text-strong) 15%, transparent);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;border:0;border-radius:18px;place-items:center;padding:4px;display:grid;position:fixed;top:24px;right:24px}.settings-trigger:before{content:"";background:color-mix(in srgb, var(--surface) 94%, transparent);border-radius:14px;position:absolute;inset:4px}.settings-trigger>span{z-index:1;font-size:23px;line-height:1;transition:rotate .18s;position:relative}.settings-trigger:hover>span{rotate:25deg}.settings-trigger small{z-index:2;border:2px solid var(--white);width:21px;height:21px;color:var(--white);background:var(--brand);border-radius:50%;place-items:center;font-size:10px;font-weight:900;display:grid;position:absolute;bottom:-5px;right:-4px}.settings-trigger:focus-visible{outline:4px solid var(--focus);outline-offset:3px}.settings-backdrop{z-index:90;background:var(--overlay);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);place-items:center;padding:24px;display:grid;position:fixed;inset:0;overflow:auto}.settings-panel{border:2px solid color-mix(in srgb, var(--surface) 90%, transparent);width:min(960px,100%);max-height:calc(100vh - 48px);color:var(--text);background:var(--surface-panel);box-shadow:0 30px 90px color-mix(in srgb, var(--text-strong) 30%, transparent);border-radius:30px;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;padding:28px;display:grid;overflow:auto}.settings-heading{grid-column:1/-1;justify-content:space-between;align-items:flex-start;margin-bottom:3px;display:flex}.settings-heading span{color:var(--text-muted);letter-spacing:.09em;text-transform:uppercase;font-size:11px;font-weight:900}.settings-heading h2{color:var(--text-strong);margin:2px 0 0;font:800 34px/1 "Baloo 2",sans-serif}.settings-heading button{width:40px;height:40px;color:var(--text-secondary);background:var(--surface-close);cursor:pointer;border:0;border-radius:13px;font-size:25px}.settings-section{margin-top:22px}.settings-section h3{color:var(--text);margin:0 0 10px;font-size:13px;font-weight:900}.settings-mode-grid{grid-template-columns:repeat(3,1fr);gap:9px;display:grid}.settings-mode-grid .mode-option{background:var(--surface);min-height:76px;box-shadow:inset 0 0 0 1px var(--border-soft)}.settings-mode-grid .mode-option.active{box-shadow:inset 0 0 0 2px var(--brand), 0 7px 20px color-mix(in srgb, var(--text-strong) 10%, transparent)}.practice-scope-setting{border:1px solid var(--border-soft);color:var(--text-secondary);background:var(--surface);border-radius:15px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;margin-top:9px;padding:7px 8px 7px 12px;display:grid}.practice-scope-setting>strong{white-space:nowrap;font-size:12px}.practice-scope-options{background:var(--surface-muted);border-radius:11px;grid-template-columns:1fr 1.35fr;gap:3px;padding:3px;display:grid}.practice-scope-options button{min-width:0;color:var(--text-muted);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:8px;padding:7px 8px;font-size:11px;font-weight:900;transition:color .16s,background .16s,box-shadow .16s}.practice-scope-options button.active{color:var(--white);background:var(--brand);box-shadow:0 3px 8px color-mix(in srgb, var(--brand) 25%, transparent)}.practice-scope-options button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.scene-picker{grid-template-columns:repeat(4,1fr);gap:9px;display:grid}.settings-panel>.settings-section:not(.settings-controls) .scene-picker{grid-template-columns:repeat(2,1fr)}.scene-option{min-width:0;min-height:72px;color:var(--text);background:var(--playground-background);cursor:pointer;box-shadow:inset 0 0 0 1px var(--border-soft);border:2px solid #0000;border-radius:16px;place-content:center;justify-items:center;gap:3px;padding:8px;transition:border-color .16s,transform .16s,box-shadow .16s;display:grid}.scene-option:hover{transform:translateY(-2px)}.scene-option.active{border-color:var(--brand);box-shadow:0 6px 18px color-mix(in srgb, var(--brand) 18%, transparent)}.scene-option:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.scene-option span{font-size:25px;line-height:1}.scene-option strong{font-size:11px;font-weight:900}.scene-preview-space{color:var(--scene-space-text);background:var(--scene-space-background)}.scene-preview-ocean{color:var(--scene-ocean-text);background:var(--scene-ocean-background)}.scene-preview-forest{color:var(--scene-forest-text);background:var(--scene-forest-background)}.settings-controls{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:10px;display:grid}.settings-controls>button,.audio-setting{border:1px solid var(--border);color:var(--text-secondary);background:var(--surface);text-align:left;border-radius:18px;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:15px;display:grid}.settings-controls>button{cursor:pointer}.settings-controls>.fullscreen-setting{grid-column:1/-1}.settings-controls>button>span:first-child,.audio-mode-button>span:first-child,.audio-mode-label>span:first-child{width:40px;height:40px;color:var(--brand);background:var(--surface-icon);border-radius:13px;place-items:center;font-size:20px;font-weight:900;display:grid}.audio-setting{grid-template-columns:1fr auto}.audio-mode-button,.audio-mode-label{min-width:0;color:inherit;text-align:left;background:0 0;border:0;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:0;display:grid}.audio-mode-button{cursor:pointer}.settings-controls>button>.letters-setting{letter-spacing:-1px;font:800 13px/1 "Baloo 2",sans-serif}.settings-controls strong,.settings-controls small{display:block}.settings-controls strong{color:var(--text-strong);font-size:14px}.settings-controls small{color:var(--text-muted);margin-top:2px;font-size:11px;font-weight:700}.settings-controls b{color:var(--text-faint);font-size:26px}.switch{background:var(--switch-off);border:0;border-radius:99px;width:38px;height:23px;padding:0;position:relative}button.switch{cursor:pointer}button.switch:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.switch:after{content:"";background:var(--white);width:17px;height:17px;box-shadow:0 2px 4px color-mix(in srgb, var(--text-strong) 18%, transparent);border-radius:50%;transition:translate .16s;position:absolute;top:3px;left:3px}.switch.on{background:var(--brand)}.switch.on:after{translate:15px}.settings-security{color:var(--success-text);background:var(--success-bg);border-radius:16px;grid-column:1/-1;align-items:center;gap:11px;margin-top:20px;padding:13px 15px;display:flex}.settings-security>span{width:28px;height:28px;color:var(--white);background:var(--success);border-radius:10px;flex:none;place-items:center;font-weight:900;display:grid}.settings-security p{margin:0;font-size:12px;font-weight:650}.settings-security strong{color:var(--success-strong);display:block}.close-app-button{border:1px solid var(--danger-border);width:100%;color:var(--danger);background:var(--danger-bg);cursor:pointer;border-radius:15px;grid-column:1/-1;justify-content:center;align-items:center;gap:8px;margin-top:14px;padding:12px 16px;font-size:13px;font-weight:900;display:flex}.close-app-button:hover{color:var(--danger-strong);background:var(--danger-bg-hover)}.close-app-button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.close-app-button span{font-size:19px;line-height:1}.close-app-help{color:var(--warning-text);text-align:center;grid-column:1/-1;margin:10px 0 0;font-size:12px;font-weight:700}.start-playing-button{width:100%;color:var(--white);background:var(--brand);box-shadow:0 6px 0 var(--brand-dark);cursor:pointer;border:0;border-radius:16px;grid-column:1/-1;justify-content:center;align-items:center;gap:10px;margin-top:16px;padding:15px 20px;font-size:16px;font-weight:900;transition:translate .16s,box-shadow .16s;display:flex}.start-playing-button:hover{box-shadow:0 8px 0 var(--brand-dark);translate:0 -2px}.start-playing-button:active{box-shadow:0 2px 0 var(--brand-dark);translate:0 4px}.start-playing-button:focus-visible{outline:4px solid var(--focus);outline-offset:3px}.start-playing-button span{font-size:22px;line-height:1}@media (width<=680px){.app-shell{width:100vw;height:100vh;padding:6px}.playground{border-radius:24px;height:calc(100vh - 12px);padding-inline:16px}.settings-trigger{width:48px;height:48px;top:16px;right:16px}.quick-controls{gap:6px;top:16px;left:16px}.quick-control{border-radius:14px;width:44px;height:44px}.settings-backdrop{align-items:end;padding:0}.settings-panel{border-radius:28px 28px 0 0;max-height:92vh;padding:22px 16px;display:block}.settings-mode-grid{grid-template-columns:1fr}.settings-mode-grid .mode-option{min-height:60px}.scene-picker{grid-template-columns:1fr 1fr}.settings-controls{grid-template-columns:1fr}}@media (height<=800px) and (width>=681px){.settings-backdrop{padding:12px}.settings-panel{border-radius:24px;column-gap:14px;max-height:calc(100vh - 24px);padding:18px 22px}.settings-heading h2{font-size:28px}.settings-heading button{width:34px;height:34px}.settings-section{margin-top:10px}.settings-section h3{margin-bottom:7px}.settings-mode-grid,.scene-picker,.settings-controls{gap:7px}.settings-mode-grid .mode-option{min-height:58px;padding-block:8px}.scene-option{min-height:55px;padding:6px}.scene-option span{font-size:21px}.settings-controls>button,.audio-setting{border-radius:15px;gap:9px;padding:8px 11px}.settings-controls>button>span:first-child,.audio-mode-button>span:first-child,.audio-mode-label>span:first-child{border-radius:11px;width:34px;height:34px;font-size:17px}.settings-security{margin-top:10px;padding:8px 12px}.settings-security>span{width:24px;height:24px}.start-playing-button,.close-app-button{margin-top:10px;padding-block:11px}}.settings-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.practice-fireworks{z-index:4;border-radius:inherit;pointer-events:none;position:absolute;inset:0;overflow:hidden}.firework-burst{width:1px;height:1px;scale:var(--burst-scale,1);position:absolute}.firework-burst:before{content:"";background:var(--letter-yellow);clip-path:polygon(50% 0,59% 36%,85% 15%,64% 41%,100% 50%,64% 59%,85% 85%,59% 64%,50% 100%,41% 64%,15% 85%,36% 59%,0 50%,36% 41%,15% 15%,41% 36%);width:42px;height:42px;filter:drop-shadow(0 0 12px var(--white)) drop-shadow(0 0 22px var(--letter-yellow));opacity:0;animation:firework-core .42s ease-out var(--burst-delay) both;position:absolute;translate:-50% -50%}.firework-burst i{--angle:0deg;--distance:150px;--particle-color:var(--letter-coral);background:linear-gradient(to bottom, transparent, var(--particle-color) 24%, var(--white) 52%, var(--particle-color) 76%, transparent);width:8px;height:34px;filter:drop-shadow(0 0 7px var(--particle-color)) drop-shadow(0 0 12px var(--particle-color));transform-origin:4px 17px;opacity:0;animation:firework-ray .95s cubic-bezier(.1,.62,.2,1) var(--burst-delay) both;border-radius:99px;display:block;position:absolute;top:-17px;left:-4px}.firework-burst i:nth-child(4n){border:2px solid var(--white);background:var(--particle-color);width:12px;height:12px;box-shadow:0 0 12px var(--particle-color);border-radius:50%;top:-6px;left:-6px}@keyframes firework-ray{0%{opacity:0;transform:rotate(var(--angle)) translateY(-8px) scaleY(.25)}10%,66%{opacity:1}to{opacity:0;transform:rotate(var(--angle)) translateY(var(--distance)) scaleY(.65)}}@keyframes firework-core{0%{opacity:0;rotate:0deg;scale:.15}30%{opacity:1;scale:1}to{opacity:0;rotate:28deg;scale:1.8}}.practice-game{z-index:3;text-align:center;width:100%;min-height:420px;color:inherit;flex:1;grid-template-rows:auto auto auto 92px auto;align-content:center;justify-items:center;gap:14px;display:grid;position:relative}.practice-game h2,.practice-game p{paint-order:stroke fill;-webkit-text-stroke:1.5px color-mix(in srgb, var(--surface) 82%, transparent);text-shadow:0 5px 14px color-mix(in srgb, var(--text-strong) 22%, transparent)}.practice-game h2{margin:0;font:800 clamp(24px,4vw,42px)/1.2 "Baloo 2",sans-serif;translate:0 -28px}.practice-game p{margin:0;font:800 clamp(17px,2.5vw,24px)/1.3 Nunito,sans-serif;translate:0 130px}.practice-score{border:1px solid color-mix(in srgb, currentColor 22%, transparent);color:inherit;background:color-mix(in srgb, var(--surface) 72%, transparent);box-shadow:0 8px 20px color-mix(in srgb, var(--text-strong) 12%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:99px;padding:12px 27px;font-size:17px;font-weight:900;translate:0 -42px}.practice-listen{color:#fff;background:var(--brand);min-width:230px;box-shadow:0 8px 0 var(--brand-dark);cursor:pointer;border:0;border-radius:22px;justify-content:center;align-items:center;gap:12px;padding:16px 24px;font:900 19px/1 Nunito,sans-serif;display:inline-flex;translate:0 -24px}.practice-listen:before{content:"♫";font:800 32px/1 "Baloo 2",sans-serif}.practice-listen:active{box-shadow:0 4px 0 var(--brand-dark);translate:0 -20px}.practice-listen:focus-visible{outline:4px solid var(--focus);outline-offset:6px}.practice-answer-slot{place-items:center;height:92px;display:grid}.practice-answer{border:4px solid color-mix(in srgb, var(--letter-green) 45%, var(--surface));min-width:180px;color:var(--letter-green);background:color-mix(in srgb, var(--surface) 92%, transparent);box-shadow:0 14px 32px var(--shadow-letter);border-radius:34px;place-items:center;padding:5px 28px;animation:.35s cubic-bezier(.2,1.5,.5,1) both practice-answer-in;display:grid;translate:0 25px}.practice-answer strong{paint-order:stroke fill;-webkit-text-stroke:5px color-mix(in srgb, var(--surface) 88%, transparent);font:800 clamp(125px,14vw,170px)/.9 "Baloo 2",sans-serif}@keyframes practice-answer-in{0%{opacity:0;scale:.45}to{opacity:1;scale:1}}@media (width<=480px){.settings-mode-grid .mode-option{padding:8px}.settings-mode-grid .mode-option strong{white-space:normal}.practice-scope-setting{grid-template-columns:1fr}}@media (width<=600px){.practice-game{gap:11px;min-height:400px}.practice-score{padding:10px 23px;translate:0 -30px}.practice-game h2{translate:0 -18px}.practice-listen{min-width:210px;padding:14px 20px;translate:0 -16px}.practice-listen:active{translate:0 -12px}.practice-answer{min-width:150px;padding-inline:22px}.practice-answer strong{font-size:clamp(110px,28vw,140px)}.practice-game p{translate:0 108px}}