:root{font-family:Comic Sans MS,Chalkboard SE,Comic Neue,cursive,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Comic Sans MS,Chalkboard SE,Comic Neue,cursive,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,#f093fb,#f5576c);padding:20px;box-shadow:0 4px 6px #0000001a;text-align:center}.app-header h1{color:#fff;font-size:2.5rem;margin-bottom:15px;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.child-banner{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:10px;padding:10px 20px;background:#fff3;border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.child-banner span{color:#fff;font-size:1.3rem;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.app-nav{display:flex;justify-content:center;gap:15px}.nav-btn{padding:12px 24px;font-size:1.1rem;border:none;border-radius:25px;background:#fff;color:#f5576c;cursor:pointer;font-weight:700;transition:all .3s ease;box-shadow:0 2px 4px #0000001a}.nav-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0003}.nav-btn.active{background:#f5576c;color:#fff}.app-main{flex:1;padding:30px;max-width:1200px;margin:0 auto;width:100%}.child-management{background:#fffffff2;padding:30px;border-radius:20px;box-shadow:0 8px 16px #0000001a}.child-management h2{color:#667eea;font-size:2rem;margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.create-child-form{display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap}.list-management h2,.word-editor h2{color:#fff;font-size:2rem;margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.training-mode h2{color:#667eea;font-size:2rem;margin-bottom:20px;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.create-list-form,.add-word-form{display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap}.list-input,.word-input{flex:1;min-width:200px;padding:15px;font-size:1.1rem;border:3px solid #f5576c;border-radius:15px;outline:none;font-family:inherit}.list-input:focus,.word-input:focus{border-color:#667eea;box-shadow:0 0 10px #667eea4d}.lists-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.list-item{background:#fff;padding:20px;border-radius:20px;box-shadow:0 4px 6px #0000001a;transition:transform .3s ease}.list-item:hover{transform:translateY(-5px);box-shadow:0 6px 12px #00000026}.list-info{cursor:pointer;margin-bottom:15px}.list-info h3{color:#667eea;font-size:1.5rem;margin-bottom:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.list-stars{font-size:1.2rem;color:gold;text-shadow:1px 1px 2px rgba(0,0,0,.2);animation:stars-shine 2s ease-in-out infinite}@keyframes stars-shine{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.list-actions,.edit-form{display:flex;gap:10px;flex-wrap:wrap}.empty-message{text-align:center;color:#fff;font-size:1.2rem;padding:40px;background:#fff3;border-radius:15px}.word-editor{background:#fffffff2;padding:30px;border-radius:20px;box-shadow:0 8px 16px #0000001a}.words-container h3{color:#667eea;font-size:1.5rem;margin-bottom:20px}.words-list{display:flex;flex-direction:column;gap:15px}.word-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#f8f9fa;border-radius:15px;border-left:5px solid #667eea}.word-text{font-size:1.3rem;color:#333;font-weight:700}.training-mode{background:#fffffff2;padding:30px;border-radius:20px;box-shadow:0 8px 16px #0000001a;text-align:center;color:#333}.score-display{display:flex;justify-content:center;gap:30px;margin-bottom:30px;flex-wrap:wrap}.score-item{padding:20px 30px;border-radius:20px;font-size:1.3rem;font-weight:700;box-shadow:0 4px 6px #0000001a;animation:score-bounce .5s ease}@keyframes score-bounce{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.score-good{background:linear-gradient(135deg,#84fab0,#8fd3f4);color:#2d5016}.score-label{display:block;margin-bottom:5px;font-size:1rem}.score-value{font-size:2.5rem;transition:transform .3s ease}.score-item.score-animate .score-value{animation:score-increment .6s cubic-bezier(.68,-.55,.265,1.55)}@keyframes score-increment{0%{transform:scale(1) rotate(0)}25%{transform:scale(1.4) rotate(-10deg)}50%{transform:scale(1.3) rotate(10deg)}75%{transform:scale(1.2) rotate(-5deg)}to{transform:scale(1) rotate(0)}}.score-item.score-animate{animation:score-bounce-item .6s ease}@keyframes score-bounce-item{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.training-content{display:flex;flex-direction:column;gap:25px;align-items:center}.word-section,.input-section{width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center;gap:15px}.btn{padding:15px 30px;font-size:1.2rem;border:none;border-radius:20px;cursor:pointer;font-weight:700;transition:all .3s ease;font-family:inherit;box-shadow:0 4px 6px #0000001a}.btn:hover{transform:translateY(-3px);box-shadow:0 6px 12px #0003}.btn:active{transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-secondary{background:#6c757d;color:#fff}.btn-danger{background:linear-gradient(135deg,#fa709a,#fee140);color:#fff}.btn-back{background:#6c757d;color:#fff;margin-bottom:20px}.btn-small{padding:8px 16px;font-size:.9rem}.btn-large{padding:20px 40px;font-size:1.5rem;min-width:250px}.btn-listen{background:linear-gradient(135deg,#84fab0,#8fd3f4);color:#2d5016}.btn-speak{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;position:relative}.btn-speak:disabled{opacity:.7;cursor:not-allowed}.btn-speak.listening{animation:pulse 1.5s ease-in-out infinite}.btn-validate{background:linear-gradient(135deg,#84fab0,#8fd3f4);color:#2d5016;margin-top:15px;font-weight:700}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.btn-next{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;margin-top:20px}.btn-next:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-next:disabled:hover{transform:none;box-shadow:0 4px 6px #0000001a}.transcription-display,.spelling-display{width:100%;margin-top:20px;min-height:80px}.spelling-display h3,.letters-grid-section h3{color:#667eea;font-size:1.5rem;margin-bottom:15px;font-weight:700}.help-text{font-size:.95rem;color:#666;margin-bottom:10px;font-style:italic;text-align:center}.help-text strong{color:#667eea;font-weight:700}.selected-letters{min-height:60px;padding:15px;background:#ffffff80;border-radius:15px;margin-bottom:15px;overflow-x:auto}.empty-selection{color:#999;font-size:1.1rem;font-style:italic}.selected-letters-grid{display:flex;flex-wrap:nowrap;gap:5px;justify-content:flex-start;align-items:center;overflow-x:auto;padding:10px 0;width:100%}.selected-letter{display:inline-flex;align-items:center;justify-content:center;min-width:40px;width:40px;height:40px;font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:8px;box-shadow:0 2px 4px #0003;text-shadow:1px 1px 2px rgba(0,0,0,.3);animation:letter-appear .3s ease;position:relative;flex-shrink:0}.letter-space{display:inline-flex;align-items:center;justify-content:center;min-width:20px;width:20px;height:40px;margin:0 2px;background:#667eea33;border-radius:4px;position:relative;flex-shrink:0}.letter-space:after{content:"␣";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:1rem;color:#667eea99;font-weight:700}.letters-grid-section{width:100%;margin-top:30px}.letters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:15px;padding:20px;background:#ffffff4d;border-radius:15px;max-width:100%}.letter-button{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;font-size:3rem;font-weight:700;border:4px solid #667eea;border-radius:15px;background:linear-gradient(135deg,#84fab0,#8fd3f4);color:#2d5016;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 8px #00000026;text-shadow:1px 1px 2px rgba(255,255,255,.5);font-family:inherit;position:relative}.letter-button:hover:not(:disabled){transform:translateY(-5px) scale(1.05);box-shadow:0 6px 12px #00000040;border-color:#764ba2;background:linear-gradient(135deg,#8fd3f4,#84fab0)}.letter-button:active:not(:disabled){transform:translateY(-2px) scale(1.02)}.letter-button-space{background:linear-gradient(135deg,gold,orange);color:#8b4513;border-color:#ff8c00;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.letter-button-space .space-symbol{font-size:2.5rem;line-height:1}.letter-button-space .space-text{font-size:.7rem;font-weight:700;line-height:1}.letter-button-space:hover:not(:disabled){background:linear-gradient(135deg,orange,gold);border-color:#ff8c00}.btn-remove{background:linear-gradient(135deg,#fa709a,#fee140);color:#8b0000;font-weight:700}.btn-medium{padding:12px 24px;font-size:1.1rem}.btn-reset{background:linear-gradient(135deg,#fa709a,#fee140);color:#8b0000;font-weight:700}.action-buttons{display:flex;gap:15px;margin-top:20px;flex-wrap:wrap;justify-content:center}.word-progress{margin-bottom:20px}.progress-label{font-size:1.1rem;color:#667eea;margin-bottom:10px;font-weight:700}.word-letters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}.letter-box{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;font-size:1.8rem;font-weight:700;border:3px solid #ccc;border-radius:10px;background:#f8f9fa;color:#999;transition:all .3s ease}.letter-box.empty{border-color:#ccc;background:#f8f9fa;color:#999}.letter-box.spelled{border-color:#84fab0;background:#f0fdf4;color:#2d5016;animation:letter-appear .5s ease}@keyframes letter-appear{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.letter-box.current{animation:pulse 1.5s ease-in-out infinite;border-color:#ff9800;box-shadow:0 0 10px #ff980080}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.spelling-progress{text-align:center;margin-bottom:20px}.progress-info{margin-top:10px;font-size:1.1rem;color:#666;font-weight:700}.progress-info{margin-top:15px;font-size:1.1rem;color:#667eea;font-weight:700}@keyframes pulse-border{0%,to{border-width:3px}50%{border-width:5px}}.current-letter-text{margin-top:15px;padding:15px;background:#fff5f5;border-radius:15px;font-size:1.3rem;color:#f5576c;border-left:5px solid #f5576c}.spelled-word{margin-top:15px;padding:15px;background:#f0fdf4;border-radius:15px;font-size:1.3rem;border-left:5px solid #84fab0}.first-letter-prompt{margin-bottom:25px;text-align:center}.prompt-text{font-size:1.2rem;color:#667eea;margin-bottom:15px;font-weight:700}.letter-display{display:flex;justify-content:center;align-items:center;margin:20px 0}.captured-letter{display:inline-flex;align-items:center;justify-content:center;width:100px;height:100px;font-size:4rem;font-weight:700;border:5px solid #84fab0;border-radius:20px;background:linear-gradient(135deg,#84fab0,#8fd3f4);color:#2d5016;animation:letter-appear .5s ease}.empty-letter{display:inline-flex;align-items:center;justify-content:center;width:100px;height:100px;font-size:4rem;font-weight:700;border:5px solid #ccc;border-radius:20px;background:#f8f9fa;color:#999}.letter-actions{display:flex;gap:15px;justify-content:center;margin-top:20px;flex-wrap:wrap}.listening-indicator{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;color:#f5576c;font-size:1.1rem;font-weight:700}.pulse-dot{color:#f5576c;font-size:1.5rem;animation:pulse-dot 1s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.transcribed-text{margin-top:15px;padding:20px;background:#f8f9fa;border-radius:15px;font-size:1.3rem;color:#333;border-left:5px solid #667eea;min-height:60px;display:flex;flex-direction:column;gap:8px}.transcribed-text.live{border-left-color:#f5576c;background:linear-gradient(135deg,#fff5f5,#f8f9fa);animation:typing .3s ease}.transcribed-text.final{border-left-color:#667eea}@keyframes typing{0%{opacity:.5}to{opacity:1}}.transcription-label{font-size:.9rem;color:#666;font-weight:400}.transcription-content{font-size:1.5rem;font-weight:700;color:#333;letter-spacing:2px;word-spacing:4px}.feedback{padding:25px;border-radius:20px;font-size:1.5rem;font-weight:700;margin:20px 0;animation:slideIn .5s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.feedback.correct{background:linear-gradient(135deg,#84fab0,#8fd3f4);color:#2d5016}.feedback.incorrect{background:linear-gradient(135deg,#fa709a,#fee140);color:#8b0000}.feedback-icon{font-size:2.5rem;display:block;margin-bottom:10px}.feedback-message{display:block;margin-bottom:10px}.correct-answer{font-size:1.1rem;margin-top:10px;font-weight:400}.bravo-animation{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000;background:#0000004d;animation:bravo-fade-in .3s ease}@keyframes bravo-fade-in{0%{opacity:0}to{opacity:1}}.bravo-content{display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,gold,#ff6b6b,#4ecdc4);padding:40px 60px;border-radius:30px;box-shadow:0 10px 40px #0000004d;animation:bravo-pop .5s cubic-bezier(.68,-.55,.265,1.55)}@keyframes bravo-pop{0%{transform:scale(0) rotate(-180deg);opacity:0}50%{transform:scale(1.2) rotate(10deg)}to{transform:scale(1) rotate(0);opacity:1}}.bravo-emoji{font-size:4rem;animation:bravo-emoji-bounce .6s ease infinite;display:inline-block}.bravo-emoji:nth-child(1){animation-delay:0s}.bravo-emoji:nth-child(3){animation-delay:.2s}@keyframes bravo-emoji-bounce{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-20px) rotate(-10deg)}75%{transform:translateY(-20px) rotate(10deg)}}.bravo-text{font-size:4rem;font-weight:700;color:#fff;text-shadow:3px 3px 6px rgba(0,0,0,.3);animation:bravo-text-pulse .5s ease infinite;letter-spacing:5px}@keyframes bravo-text-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.session-complete{text-align:center;padding:40px 20px}.session-message{font-size:1.5rem;color:#667eea;margin-bottom:30px;font-weight:700}.final-score{display:flex;flex-direction:column;align-items:center;gap:15px;margin:30px 0;padding:30px;background:linear-gradient(135deg,#84fab0,#8fd3f4);border-radius:20px;box-shadow:0 4px 6px #0000001a}.final-score-label{font-size:1.3rem;color:#2d5016;font-weight:700}.final-score-value{font-size:3rem;color:#2d5016;font-weight:700;animation:score-increment .6s ease}.stars-display{display:flex;flex-direction:column;align-items:center;gap:15px;margin:30px 0;padding:30px;background:linear-gradient(135deg,gold,orange);border-radius:20px;box-shadow:0 4px 6px #0000001a}.stars-label{font-size:1.3rem;color:#8b4513;font-weight:700}.stars-value{font-size:3rem;color:#8b4513;font-weight:700;animation:stars-pop .8s cubic-bezier(.68,-.55,.265,1.55);text-shadow:2px 2px 4px rgba(0,0,0,.2)}@keyframes stars-pop{0%{transform:scale(0) rotate(-180deg);opacity:0}50%{transform:scale(1.3) rotate(10deg)}to{transform:scale(1) rotate(0);opacity:1}}.lists-selection{display:flex;flex-direction:column;gap:15px;max-width:400px;margin:20px auto}@media(max-width:768px){.app-header h1{font-size:1.8rem}.app-main{padding:15px}.lists-container{grid-template-columns:1fr}.score-display{flex-direction:column;gap:15px}.btn-large{font-size:1.2rem;padding:15px 30px}}