:root{color:#373347;font-synthesis:none;-webkit-font-smoothing:antialiased;--purple:#68519b;--purple-dark:#514078;--muted:#706a78;background:#faf7f2;font-family:ui-rounded,SF Pro Rounded,Arial Rounded MT Bold,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button,h1{-webkit-user-select:none;user-select:none}button:focus-visible{outline-offset:5px;outline:3px solid #514078}h1:focus{outline:none}button svg{flex-shrink:0;width:24px;height:24px}button:active:not([aria-disabled]){transform:translateY(2px)}.app-shell{min-height:100svh;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));flex-direction:column;display:flex}.app-header{justify-content:space-between;gap:12px;width:100%;max-width:1100px;min-height:52px;margin:0 auto}.app-header,.brand{align-items:center;display:flex}.brand{letter-spacing:-.4px;gap:10px;font-size:16px;font-weight:750}.brand-flower{color:var(--purple);font-size:36px;line-height:1}.home-button,.round-button{color:var(--purple-dark);background:#fffdf9;border:1.5px solid #ded7e3;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;display:inline-flex}.learning-area{flex:1;justify-content:center;padding:44px 0}.learning-area,.screen{flex-direction:column;align-items:center;display:flex}.screen{text-align:center;width:100%;max-width:580px}.eyebrow{color:var(--muted);letter-spacing:2.2px;margin:0 0 18px;font-size:11px;font-weight:750}h1{letter-spacing:-1.6px;margin:0;font-size:calc(clamp(34px,6vw,44px));font-weight:800;line-height:1.18}.complete-screen h1,.welcome-screen h1{letter-spacing:-2px;font-size:calc(clamp(48px,8vw,68px));line-height:1.1}h1 span{color:var(--purple)}.introduction{color:var(--muted);max-width:320px;margin:18px 0 0;font-size:16px;line-height:1.6}.name-letters{grid-template-columns:repeat(6,1fr);gap:9px;width:100%;max-width:500px;margin:44px 0;display:grid}.name-tile{aspect-ratio:.87;border:1px solid #4632500f;border-radius:18px;justify-content:center;align-items:center;font-family:Arial,sans-serif;font-size:calc(clamp(28px,6vw,42px));font-weight:700;display:flex}.name-tile--0,.name-tile--4{color:#69518d;background:#e6dcf3}.name-tile--1,.name-tile--5{color:#8c5334;background:#f7dfce}.name-tile--2{color:#526648;background:#e0e9db}.name-tile--3{color:#7d662c;background:#f5eac6}.primary-button{background:var(--purple);color:#fff;border:0;border-radius:20px;justify-content:center;align-items:center;gap:14px;width:100%;max-width:340px;min-height:64px;padding:18px 24px;font-size:18px;font-weight:750;display:inline-flex;box-shadow:0 4px #514078}.welcome-play{max-width:290px}.quiet-note{color:var(--muted);margin:24px 0 0;font-size:13px;line-height:1.6}.app-footer{color:var(--muted);justify-content:center;align-items:center;gap:8px;min-height:28px;font-size:12px;display:flex}.app-footer span{color:#8c7aa1;font-size:20px}.exploration{width:100%;max-width:280px;margin:28px 0 8px}.letter-card{color:#59417f;background:#fffdfb;border:2px solid #ded5ea;border-bottom-width:5px;border-radius:24px;justify-content:center;align-items:center;width:100%;min-height:156px;padding:20px 4px;font-family:Arial,sans-serif;font-size:calc(clamp(54px,12vw,76px));font-weight:700;line-height:1.3;display:flex;position:relative}.letter-card--large{background:#ebe3f4;border-color:#ded1ed;min-height:260px;padding:14px 20px 36px;font-size:144px}.letter-card__sound{justify-content:center;display:flex;position:absolute;bottom:15px;left:0;right:0}.letter-card__sound svg{width:24px;height:24px}.letter-card--correct{color:#405b37;background:#e7efdf;border-color:#66865d}.letter-card__check{color:#fff;background:#405b37;border-radius:50%;justify-content:center;align-items:center;width:25px;height:25px;display:flex;position:absolute;bottom:8px;right:8px}.letter-card__check svg{width:17px;height:17px}.letter-card[aria-disabled]{cursor:default}.exploration-nav{justify-content:space-between;gap:12px;margin-top:18px}.exploration-nav,.letter-dots{align-items:center;display:flex}.letter-dots{gap:9px}.letter-dots span{background:#d9d1df;border-radius:50%;width:7px;height:7px}.letter-dots span.active{background:var(--purple);width:11px;height:11px}.audio-button{color:var(--purple-dark);background:0 0;border:1.5px solid #ded7e3;border-radius:30px;justify-content:center;align-items:center;gap:10px;min-height:48px;padding:12px 18px;font-size:14px;font-weight:650;display:inline-flex}.explore-screen>.audio-button{margin:12px 0 24px}.recognition-screen h1{max-width:400px;font-size:calc(clamp(30px,5vw,40px));line-height:1.4}.target-letter{font-family:Arial,sans-serif;display:inline-block}.recognition-screen>.audio-button{margin-top:22px}.answer-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:460px;margin:42px 0 20px;display:grid}.feedback-area{align-items:flex-start;width:100%;min-height:78px}.feedback,.feedback-area{justify-content:center;display:flex}.feedback{color:var(--muted);align-items:center;gap:9px;margin:8px 0;font-size:15px;line-height:1.6}.feedback--correct{color:#405b37;font-size:20px;font-weight:750}.feedback svg{width:25px;height:25px}.recognition-screen{min-height:460px}.next-action{width:100%;min-height:68px}.celebration-flower{color:#daceed;place-items:center;width:124px;height:124px;margin-bottom:24px;display:grid;position:relative}.celebration-flower>span{font-size:150px;line-height:1;position:absolute;top:-16px}.celebration-flower>svg{width:44px;height:44px;color:var(--purple-dark);z-index:1}.complete-screen .audio-button{margin:24px 0 28px}.text-button{min-height:48px;color:var(--purple-dark);text-underline-offset:5px;background:0 0;border:0;margin-top:18px;padding:12px;font-size:14px;text-decoration:underline}.audio-notice{text-align:center;color:var(--muted);max-width:340px;margin:24px 0 0;font-size:14px;line-height:1.6}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=380px){.app-shell{padding-left:16px;padding-right:16px}.brand{font-size:14px}.name-letters{gap:6px}.name-tile{border-radius:12px}.answer-choices{gap:8px}.letter-card{border-radius:20px;min-height:138px}.letter-card--large{min-height:230px}.primary-button{font-size:16px}}@media (height<=740px){.learning-area{padding:24px 0}.exploration{max-width:240px;margin-top:18px}.letter-card--large{min-height:210px;font-size:120px}.name-letters{margin:30px 0}}@media (prefers-reduced-motion:reduce){button:active:not([aria-disabled]){transform:none}}