.app{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}.container{background:#fff;border-radius:20px;padding:25px;max-width:600px;width:100%;box-shadow:0 20px 60px #0000004d;text-align:center;max-height:95vh;overflow-y:auto}.title{font-size:2.2rem;color:#667eea;margin-bottom:5px;font-weight:700}.subtitle{font-size:1rem;color:#666;margin-bottom:15px}.name-input-section{padding:30px;text-align:center}.name-input-section h2{font-size:1.8rem;color:#667eea;margin-bottom:15px}.name-input-section p{font-size:1.1rem;color:#666;margin-bottom:25px}.name-input{width:100%;max-width:300px;padding:15px;font-size:1.1rem;border:2px solid #ddd;border-radius:10px;margin-bottom:20px;text-align:center}.name-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.start-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:15px 40px;font-size:1.1rem;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 15px #667eea4d;font-weight:700}.start-button:hover{transform:translateY(-2px);box-shadow:0 7px 20px #667eea66}.user-info{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f8f9fa;border-radius:10px;margin-bottom:15px;font-size:.9rem}.user-info strong{color:#667eea}.results-link{color:#667eea;text-decoration:none;font-weight:700;padding:8px 15px;border-radius:20px;background:#fff;transition:all .3s ease;border:2px solid #667eea}.results-link:hover{background:#667eea;color:#fff;transform:translateY(-2px)}.progress-indicator{background:#e3f2fd;border:2px solid #2196f3;border-radius:10px;padding:8px 15px;margin-bottom:15px;font-size:.9rem;color:#1976d2}.loading{font-size:1.2rem;color:#667eea;padding:20px}.error-message{background:#ffebee;border:2px solid #f44336;border-radius:10px;padding:20px;margin-bottom:20px;color:#c62828}.error-message p{margin-bottom:15px;font-size:1.1rem}.retry-button{background:#f44336;color:#fff;border:none;padding:10px 20px;font-size:1rem;border-radius:25px;cursor:pointer;transition:all .3s ease}.retry-button:hover{background:#d32f2f;transform:translateY(-2px)}.completion-message{padding:40px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:15px;color:#fff;margin-bottom:20px}.completion-message h2{font-size:2rem;margin-bottom:15px;color:#fff}.completion-message p{font-size:1.2rem;margin-bottom:25px;color:#ffffffe6}.reset-button{background:#fff;color:#667eea;border:none;padding:15px 30px;font-size:1.1rem;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 15px #0003;font-weight:700}.reset-button:hover{transform:translateY(-2px);box-shadow:0 7px 20px #0000004d}.word-section{margin-bottom:20px}.speaker-animation{margin-bottom:10px;display:flex;justify-content:center;transition:transform .3s ease}.speaker-animation.speaking{animation:bounce .6s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.speaker-face{width:80px;height:80px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;position:relative;display:flex;justify-content:center;align-items:center;box-shadow:0 10px 30px #667eea4d}.eye{width:10px;height:10px;background:#fff;border-radius:50%;position:absolute;top:25px;animation:blink 3s infinite}.left-eye{left:25px}.right-eye{right:25px}@keyframes blink{0%,90%,to{height:12px}95%{height:2px}}.mouth{width:30px;height:15px;border:2px solid white;border-top:none;border-radius:0 0 30px 30px;position:absolute;bottom:20px;transition:all .3s ease}.mouth.open{height:20px;border-radius:0 0 35px 35px;animation:speak .3s ease-in-out infinite}@keyframes speak{0%,to{width:40px}50%{width:50px}}.word-display{margin-top:10px}.word-label{font-size:.95rem;color:#666;margin-bottom:10px}.button-row{display:flex;gap:15px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:15px}.play-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 25px;font-size:1rem;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 15px #667eea4d;flex:1;min-width:150px}.play-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 20px #667eea66}.play-button:disabled{opacity:.6;cursor:not-allowed}.spelling-section{margin-bottom:20px}.spelling-instruction{font-size:.85rem;color:#666;margin-bottom:10px;padding:8px;background:#f8f9fa;border-radius:8px;border-left:3px solid #667eea}.listen-button{background:#28a745;color:#fff;border:none;padding:12px 25px;font-size:1rem;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 15px #28a7454d;flex:1;min-width:150px}.listen-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 20px #28a74566}.listen-button:disabled{opacity:.6;cursor:not-allowed}.listen-button.listening{background:#dc3545;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 5px 15px #dc35454d}50%{box-shadow:0 5px 25px #dc354599}}.result{margin-top:15px;padding:15px;border-radius:15px;display:flex;align-items:center;gap:15px;animation:slideIn .5s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.result.correct{background:#d4edda;border:2px solid #28a745}.result.incorrect{background:#f8d7da;border:2px solid #dc3545}.result-icon{font-size:2rem}.result-text{flex:1;text-align:left}.result-status{font-size:1.1rem;font-weight:700;margin-bottom:5px}.result.correct .result-status{color:#28a745}.result.incorrect .result-status{color:#dc3545}.correct-spelling{font-size:1.1rem;margin-bottom:5px;color:#333}.user-spelling{font-size:1rem;color:#666}.result-message{font-size:1rem;margin-bottom:8px;font-style:italic;color:#666}.result.incorrect .result-message{color:#dc3545}.next-button{background:#667eea;color:#fff;border:none;padding:12px 30px;font-size:1rem;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 15px #667eea4d;margin-top:10px}.next-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 20px #667eea66}.next-button:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 600px){.container{padding:30px 20px}.title{font-size:2rem}.speaker-face{width:100px;height:100px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:center}#root{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center}