@import"https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Comic+Neue:wght@400;700&family=Fredoka:wght@400;600&family=Peralta&display=swap";:root{--sky-blue: #87CEEB;--grass-green: #7EC850;--sunshine-yellow: #FFD700;--cloud-white: #FFFFFF;--rainbow-red: #FF6B6B;--rainbow-orange: #FFA500;--rainbow-yellow: #FFD93D;--rainbow-green: #6BCB77;--rainbow-blue: #4D96FF;--rainbow-purple: #A77BCA;--primary: #FF6B9D;--success: #6BCB77;--warning: #FFD93D;--error: #FF6B6B;--text-dark: #2C3E50;--text-light: #FFFFFF;--card-green: #8B9D83;--card-blue: #7B8A9D;--card-rose: #C4A7A7;--card-purple: #9D7B9D;--border-radius: 20px;--spacing: 1rem;--font-display: "Peralta", cursive;--font-body: "Peralta", cursive;--font-heading: "Peralta", cursive}*{margin:0;padding:0;box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}body{font-family:var(--font-body);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;background-image:url(/assets/background_2-BmZvuol4.png);background-repeat:no-repeat;background-position:center;background-attachment:fixed;background-size:cover}#root{min-height:100vh;position:relative}.app-container{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem}.btn{font-family:var(--font-heading);font-size:1.5rem;font-weight:600;padding:1rem 2.5rem;border:4px solid white;border-radius:var(--border-radius);cursor:pointer;transition:all .3s ease;box-shadow:0 8px 20px #00000040;text-transform:capitalize}.btn:hover{transform:translateY(-3px);box-shadow:0 12px 25px #0000004d}.btn:active{transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,var(--primary),#FF8FAB);color:var(--text-light)}.btn-success{background:linear-gradient(135deg,var(--success),#8FD896);color:var(--text-light)}.btn-warning{background:linear-gradient(135deg,var(--warning),#FFE066);color:var(--text-dark)}.card{background:#fff;border-radius:var(--border-radius);padding:2rem;box-shadow:0 5px 20px #00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.question-box{background:linear-gradient(135deg,#e0f7fa,#b2ebf2);border:3px solid white;border-radius:var(--border-radius);padding:1.5rem 2rem;margin-bottom:2rem;box-shadow:0 3px 10px #0000001a}.question-text{font-family:var(--font-display);font-size:2rem;color:var(--text-dark);text-align:center;font-weight:700}.drawing-container{display:flex;gap:1rem;justify-content:center;margin:2rem 0;flex-wrap:wrap}.drawing-box{width:18vw;height:25vw;min-width:150px;min-height:200px;max-width:300px;max-height:400px;border-radius:15px;box-shadow:0 3px 10px #0003;overflow:hidden;position:relative}.clear-btn{position:absolute;bottom:5px;right:5px;background:#fffc;border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;z-index:10;transition:background .2s}.clear-btn:hover{background:#fff}.drawing-box-1{background:var(--card-green)}.drawing-box-2{background:var(--card-blue)}.drawing-box-3{background:var(--card-rose)}.drawing-box-4{background:var(--card-purple)}.answer-box{background:#fff;border:2px solid var(--text-dark);border-radius:var(--border-radius);padding:1rem 2rem;min-height:60px;font-family:var(--font-heading);font-size:1.3rem;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a}.mic-button{width:200px;height:200px;border-radius:50%;background:linear-gradient(135deg,#e8a5a5,#d48989);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:5rem;color:#fff;box-shadow:0 10px 30px #0000004d;transition:all .3s ease;margin:2rem auto}.mic-button:hover{transform:scale(1.05);box-shadow:0 12px 35px #0006}.mic-button.recording{animation:pulse 1.5s ease-in-out infinite;background:linear-gradient(135deg,#ff6b6b,#ff8e8e)}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.hint-button{position:fixed;bottom:2rem;right:2rem;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#ffd93d,#ffc107);border:3px solid white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#fff;box-shadow:0 4px 15px #00000040;transition:all .3s ease;z-index:100}.hint-button:hover:not(:disabled){box-shadow:0 6px 20px #00000059}.hint-button:active:not(:disabled){transform:scale(.95)}.hint-button:disabled{opacity:.5;cursor:not-allowed;background:linear-gradient(135deg,#ccc,#999)}.hint-modal-backdrop{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.hint-modal-content{background:#fff;border-radius:var(--border-radius);max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0000004d;display:flex;flex-direction:column}.hint-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:2px solid #f0f0f0}.hint-modal-title{font-family:var(--font-heading);font-size:1.8rem;color:var(--text-dark);margin:0}.hint-modal-close{background:none;border:none;font-size:2rem;cursor:pointer;color:var(--text-dark);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.hint-modal-close:hover{background:#0000001a}.hint-modal-close:focus{outline:2px solid var(--primary);outline-offset:2px}.hint-modal-body{padding:2rem;flex:1}.hint-gif-container{text-align:center}.hint-gif{max-width:100%;height:auto;border-radius:10px;box-shadow:0 4px 15px #0000001a}.gif-hint-player{position:relative;width:100%;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}.gif-hint-image{max-width:100%;max-height:70vh;height:auto;width:auto;border-radius:12px;box-shadow:0 4px 20px #00000026;object-fit:contain;transition:opacity .3s ease,transform .3s ease}.gif-hint-image:focus{outline:3px solid var(--primary);outline-offset:4px}.gif-hint-image.hidden{display:none}.gif-hint-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:3rem}.loading-spinner{font-size:3rem;display:inline-block}.gif-hint-loading p{font-family:var(--font-body);font-size:1.2rem;color:var(--text-dark)}.gif-hint-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;text-align:center;background:#fff3cd;border:2px solid #ffc107;border-radius:12px}.error-icon{font-size:3rem;margin:0}.error-message{font-family:var(--font-body);font-size:1.2rem;color:#856404;font-weight:600;margin:0}.error-fallback{font-family:var(--font-body);font-size:1rem;color:var(--text-dark);margin:.5rem 0 0;padding:1rem;background:#fff;border-radius:8px}.gif-hint-description{margin-top:1.5rem;width:100%;text-align:center}.hint-alt-text{margin-top:1rem;font-family:var(--font-body);font-size:1.1rem;color:var(--text-dark);padding:1rem;background:#f8f9fa;border-radius:10px}.hint-audio-container{display:flex;flex-direction:column;align-items:center;gap:1rem}.hint-audio{width:100%;max-width:400px;border-radius:10px}.hint-transcript{width:100%;padding:1rem;background:#f8f9fa;border-radius:10px;font-family:var(--font-body);font-size:1rem;color:var(--text-dark)}.hint-transcript strong{display:block;margin-bottom:.5rem;color:var(--primary)}.hint-replay-btn{font-family:var(--font-heading);font-size:1.2rem;padding:.8rem 1.5rem;background:linear-gradient(135deg,var(--rainbow-blue),#6BA5FF);color:#fff;border:2px solid white;border-radius:var(--border-radius);cursor:pointer;transition:all .3s ease;box-shadow:0 4px 10px #0003}.hint-replay-btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px #00000040}.hint-modal-footer{padding:1.5rem;border-top:2px solid #f0f0f0;display:flex;justify-content:center}.hint-close-btn{min-width:150px}@media(max-width:768px){.hint-modal-content{max-width:95%}.hint-modal-title{font-size:1.5rem}.hint-modal-body{padding:1.5rem}.gif-hint-player{min-height:200px}.gif-hint-image{max-height:50vh;border-radius:8px}.gif-hint-loading{padding:2rem}.loading-spinner{font-size:2.5rem}.gif-hint-loading p{font-size:1rem}.hint-alt-text{font-size:1rem;padding:.8rem}}@media(max-width:480px){.gif-hint-player{min-height:150px}.gif-hint-image{max-height:40vh;border-radius:6px}.loading-spinner{font-size:2rem}.gif-hint-loading p{font-size:.9rem}.error-icon{font-size:2rem}.error-message{font-size:1rem}.error-fallback{font-size:.9rem;padding:.8rem}.hint-alt-text{font-size:.9rem;padding:.6rem}}.audio-hint-player{position:relative;width:100%;max-width:400px;margin:0 auto;padding:2rem;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:20px;box-shadow:0 4px 15px #0000001a;text-align:center}.audio-hint-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1rem}.audio-hint-loading p{font-family:var(--font-body);font-size:1.1rem;color:var(--text-dark);margin:0}.audio-hint-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1rem;background:#fff3cd;border:2px solid #ffc107;border-radius:15px}.audio-hint-error .error-icon{font-size:3rem;margin:0}.audio-hint-error .error-message{font-family:var(--font-body);font-size:1rem;color:#856404;text-align:center;margin:0}.audio-hint-error .error-transcript{margin-top:1rem;padding:1rem;background:#fffc;border-radius:10px;font-family:var(--font-body);font-size:.95rem;color:#856404}.audio-hint-error .error-transcript strong{display:block;margin-bottom:.5rem}.audio-hint-controls{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.audio-play-btn{font-size:4rem;width:120px;height:120px;border:none;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--rainbow-blue));color:#fff;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 20px #0003;display:flex;align-items:center;justify-content:center}.audio-play-btn:hover:not(:disabled){box-shadow:0 8px 25px #0000004d;transform:translateY(-3px)}.audio-play-btn:active:not(:disabled){transform:translateY(-1px)}.audio-play-btn:disabled{cursor:default;opacity:.9}.audio-play-btn:focus{outline:4px solid var(--primary);outline-offset:6px}.audio-hint-instruction{font-family:var(--font-heading);font-size:1.2rem;color:var(--text-dark);margin:0;font-weight:500}.audio-transcript{font-family:var(--font-body);font-size:1.1rem;color:var(--text-dark);margin:0;padding:1rem;background:#ffffffb3;border-radius:10px;font-style:italic}.audio-transcript small{font-size:1rem}@media(max-width:768px){.audio-hint-player{padding:1rem}.audio-control-btn{width:60px;height:60px;font-size:2rem}.audio-play-pause{width:70px;height:70px;font-size:2.5rem}.audio-replay{width:50px;height:50px;font-size:1.8rem}.audio-status-indicator{font-size:1rem}.audio-volume-container{padding:.6rem}.audio-shortcuts-hint small{font-size:.75rem}}@media(max-width:480px){.audio-hint-player{padding:.8rem}.audio-control-btn{width:50px;height:50px;font-size:1.8rem}.audio-play-pause{width:60px;height:60px;font-size:2.2rem}.audio-replay{width:45px;height:45px;font-size:1.5rem}.audio-status-indicator{font-size:.9rem}.audio-time{font-size:.8rem;min-width:40px}.audio-volume-label{font-size:.9rem}.audio-volume-value{font-size:.8rem;min-width:40px}.audio-transcript-content{font-size:.9rem}}.feedback-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:3rem;color:var(--text-light);text-shadow:2px 2px 4px rgba(0,0,0,.5);z-index:9999;pointer-events:none}.feedback-correct{animation:bounce .6s ease}.feedback-incorrect{animation:shake .5s ease}@keyframes bounce{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}@keyframes shake{0%,to{transform:translate(-50%,-50%)}25%{transform:translate(-48%,-50%)}75%{transform:translate(-52%,-50%)}}.confetti{position:fixed;width:10px;height:10px;background:var(--rainbow-yellow);position:absolute;animation:confetti-fall 3s linear}@keyframes confetti-fall{to{transform:translateY(100vh) rotate(360deg);opacity:0}}.spinner{border:4px solid rgba(255,255,255,.3);border-top:4px solid var(--primary);border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@media(max-width:768px){.question-text{font-size:1.5rem}.drawing-box{width:120px;height:160px}.btn{font-size:1.2rem;padding:.8rem 2rem}.mic-button{width:150px;height:150px;font-size:4rem}}.home-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:3rem}.user-header{position:fixed;top:2rem;left:2rem;right:8rem;display:flex;justify-content:space-between;align-items:center;z-index:100}.user-greeting{background:#ffffffe6;padding:.8rem 1.5rem;border-radius:25px;font-family:var(--font-heading);font-size:1.2rem;font-weight:600;color:var(--text-dark);box-shadow:0 4px 15px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.logout-btn{background:linear-gradient(135deg,#ff6b6b,#ee5a52);color:#fff;border:4px solid white;padding:.8rem 1.5rem;border-radius:25px;font-family:var(--font-heading);font-size:1rem;font-weight:600;cursor:pointer;box-shadow:0 8px 20px #ee5a5240;transition:all .3s ease}.logout-btn:hover{transform:translateY(-3px);box-shadow:0 12px 25px #ee5a5266}.home-title{font-family:var(--font-display);font-size:4rem;margin-bottom:3rem;text-shadow:3px 3px 6px rgba(0,0,0,.3);letter-spacing:2px}.scene{position:relative;width:100%;height:150px;margin-bottom:2rem}.house{position:absolute;left:10%;bottom:10px;width:60px;height:50px;background:#d4a574;border-radius:3px}.house:before{content:"";position:absolute;top:-30px;left:-10px;width:0;height:0;border-left:40px solid transparent;border-right:40px solid transparent;border-bottom:30px solid #A0522D}.house:after{content:"";position:absolute;bottom:0;left:20px;width:20px;height:30px;background:#8b4513}.tree{position:absolute;left:18%;bottom:10px;width:15px;height:40px;background:#8b4513;border-radius:3px}.tree:before{content:"";position:absolute;top:-30px;left:-20px;width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:35px solid var(--grass-green);border-radius:30%}.flowers{position:absolute;right:15%;bottom:10px;display:flex;gap:5px}.flowers:before,.flowers:after{content:"🌻";font-size:2rem}.rainbow{position:absolute;top:0;left:50%;transform:translate(-50%);width:200px;height:100px;border-radius:200px 200px 0 0;background:linear-gradient(to right,var(--rainbow-red),var(--rainbow-orange),var(--rainbow-yellow),var(--rainbow-green),var(--rainbow-blue),var(--rainbow-purple));opacity:.6}.menu-buttons{display:flex;gap:3rem;margin-top:2rem;flex-wrap:wrap;justify-content:center}.menu-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 3rem;border:4px solid white;border-radius:25px;font-family:var(--font-heading);font-size:1.8rem;font-weight:700;cursor:pointer;box-shadow:0 8px 20px #00000040;transition:all .3s ease;min-width:250px}.write-btn{background:linear-gradient(135deg,#e8d5f7,#d4b5e8);color:var(--text-dark)}.say-btn{background:linear-gradient(135deg,#b2ebf2,#80deea);color:var(--text-dark)}.btn-icon{font-size:3rem}.btn-text{text-align:center}.profile-icon-btn{position:fixed;top:2rem;right:2rem;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#FF8FAB);border:3px solid white;font-size:2rem;cursor:pointer;box-shadow:0 4px 15px #0003;display:flex;align-items:center;justify-content:center;z-index:100}@media(max-width:768px){.home-title{font-size:2.5rem}.user-header{right:6rem}.menu-buttons{gap:1.5rem}.menu-btn{min-width:200px;padding:1.5rem 2rem;font-size:1.4rem}.btn-icon{font-size:2.5rem}}.login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:2rem;min-height:100vh}.login-title{font-family:var(--font-display);font-size:4rem;margin-bottom:1rem;text-shadow:3px 3px 6px rgba(0,0,0,.3);letter-spacing:2px;text-align:center}.login-welcome{margin-bottom:2rem;text-align:center}.login-welcome p{font-family:var(--font-heading);font-size:1.3rem;color:var(--text-dark);font-weight:600;text-shadow:1px 1px 3px rgba(255,255,255,.8)}.login-card{max-width:400px;width:100%;margin:0 1rem;border:4px solid white}.login-form,.form-group{margin-bottom:1.5rem}.form-group input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 6px 16px #ff6b9d4d;transform:translateY(-2px)}.login-button{width:100%;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;min-height:60px;border:4px solid white;box-shadow:0 8px 20px #00000040}.login-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 25px #0000004d}.signup-link{display:inline-block;color:var(--primary);font-family:var(--font-heading);font-weight:600;font-size:1.1rem;text-decoration:none;padding:.8rem 1.5rem;border-radius:25px;background:linear-gradient(135deg,#ff6b9d26,#ff8fab26);border:4px solid rgba(255,107,157,.4);transition:all .3s ease;box-shadow:0 4px 12px #ff6b9d33}.signup-link:hover{background:linear-gradient(135deg,#ff6b9d40,#ff8fab40);border-color:var(--primary);transform:translateY(-2px);box-shadow:0 6px 16px #ff6b9d66}@media(max-width:768px){.login-title{font-size:2.5rem}.login-welcome p{font-size:1.1rem}.login-card{margin:0 1rem}.form-group input{padding:.8rem 1rem;font-size:1rem}}@media(max-width:480px){.login-title{font-size:2rem}.login-container{padding:1rem}}.signup-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:2rem;min-height:100vh}.signup-title{font-family:var(--font-display);font-size:4rem;margin-bottom:1rem;text-shadow:3px 3px 6px rgba(0,0,0,.3);letter-spacing:2px;text-align:center}.title-number{color:var(--text-dark)}.title-mb{color:var(--text-dark);text-transform:uppercase}.title-e{color:var(--text-dark)}.title-r{color:var(--text-dark);text-transform:uppercase}.title-tutor{color:var(--text-dark);font-family:var(--font-heading)}.signup-welcome{margin-bottom:2rem;text-align:center}.signup-welcome p{font-family:var(--font-heading);font-size:1.3rem;color:var(--text-dark);font-weight:600;text-shadow:1px 1px 3px rgba(255,255,255,.8)}.signup-card{max-width:400px;width:100%;margin:0 1rem;border:4px solid white}.signup-form,.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--text-dark);font-family:var(--font-heading);font-weight:600;font-size:1.1rem}.form-group input{width:100%;padding:1rem 1.2rem;border:4px solid white;border-radius:var(--border-radius);font-family:var(--font-body);font-size:1.1rem;background:#fffffff2;transition:all .3s ease;box-sizing:border-box;box-shadow:0 4px 12px #00000026}.form-group input:focus{outline:none;border-color:var(--success);background:#fff;box-shadow:0 6px 16px #6bcb774d;transform:translateY(-2px)}.form-group input:disabled{background-color:#f7fafccc;cursor:not-allowed;opacity:.7}.error-message{background:linear-gradient(135deg,#ffe5e5,#ffd1d1);color:var(--error);padding:1rem;border-radius:var(--border-radius);border:4px solid rgba(255,107,107,.5);margin-bottom:1.5rem;font-family:var(--font-body);font-weight:600;text-align:center;box-shadow:0 4px 12px #ff6b6b33}.success-message{background:linear-gradient(135deg,#e5f7e5,#d1f7d1);color:var(--success);padding:1rem;border-radius:var(--border-radius);border:4px solid rgba(107,203,119,.5);margin-bottom:1.5rem;font-family:var(--font-body);font-weight:600;text-align:center;box-shadow:0 4px 12px #6bcb7733}.signup-button{width:100%;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;min-height:60px;border:4px solid white;box-shadow:0 8px 20px #00000040}.signup-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 25px #0000004d}.auth-links{text-align:center;padding-top:1rem;border-top:4px solid rgba(255,255,255,.5)}.auth-links p{color:var(--text-dark);font-family:var(--font-body);font-weight:600;margin-bottom:.8rem;font-size:1rem}.login-link{display:inline-block;color:var(--success);font-family:var(--font-heading);font-weight:600;font-size:1.1rem;text-decoration:none;padding:.8rem 1.5rem;border-radius:25px;background:linear-gradient(135deg,#6bcb7726,#8fd89626);border:4px solid rgba(107,203,119,.4);transition:all .3s ease;box-shadow:0 4px 12px #6bcb7733}.login-link:hover{background:linear-gradient(135deg,#6bcb7740,#8fd89640);border-color:var(--success);transform:translateY(-2px);box-shadow:0 6px 16px #6bcb7766}.spinner{width:24px;height:24px;border:3px solid rgba(255,255,255,.3);border-top:3px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:768px){.signup-title{font-size:2.5rem}.signup-welcome p{font-size:1.1rem}.signup-card{margin:0 1rem}.form-group input{padding:.8rem 1rem;font-size:1rem}}@media(max-width:480px){.signup-title{font-size:2rem}.signup-container{padding:1rem}}