*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);flex-direction:column;align-items:center;min-height:100vh;padding:20px;font-family:Arial,sans-serif;display:flex}h1{text-shadow:0 0 20px #7cb342cc;margin:20px 0;font-size:48px}.subtitle{color:#ddd;margin-bottom:20px;font-size:16px}.container{background:#000000b3;border-radius:30px;width:900px;max-width:95vw;padding:40px;box-shadow:0 20px 60px #00000080}.tabs{border-bottom:2px solid #fff3;flex-wrap:wrap;gap:10px;margin-bottom:30px;display:flex}.tab{color:#aaa;cursor:pointer;background:0 0;border:none;border-bottom:3px solid #0000;padding:15px 30px;font-size:18px;transition:all .3s}.tab.active{color:#fdd835;border-bottom-color:#fdd835}.tab-content{display:none}.tab-content.active{display:block}.calibration-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px;margin:20px 0;display:grid}.phoneme-card{text-align:center;cursor:pointer;background:#ffffff1a;border:3px solid #0000;border-radius:15px;padding:20px;transition:all .3s}.phoneme-card:hover{background:#ffffff26}.phoneme-card.recording{background:#f4433633;border-color:#f44336;animation:1s infinite pulse}.phoneme-card.calibrated{background:#7cb34233;border-color:#7cb342}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}.phoneme-letter{margin-bottom:10px;font-size:48px;font-weight:700}.phoneme-hint{color:#aaa;margin-bottom:5px;font-size:14px}.phoneme-status{margin-top:10px;font-size:12px}.calibration-group-header{color:#fdd835;text-transform:uppercase;letter-spacing:1px;border-bottom:2px solid #fdd8354d;grid-column:1/-1;margin-bottom:5px;padding:15px 0 10px;font-size:16px;font-weight:700}.calibration-group-header:first-child{padding-top:0}.info-box{background:#7cb3421a;border-left:4px solid #7cb342;border-radius:5px;margin:20px 0;padding:15px;font-size:14px;line-height:1.6}.btn{color:#fff;cursor:pointer;background:#7cb342;border:none;border-radius:10px;padding:12px 30px;font-size:16px;transition:all .3s}.btn:hover{background:#689f38}.actions{justify-content:center;gap:10px;margin-top:20px;display:flex}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.fade-in{animation:.5s ease-out fadeIn}.detected-letter{text-align:center;color:#7cb342;text-shadow:0 10px 30px #7cb34280;justify-content:center;align-items:center;min-height:200px;margin:30px 0;font-size:180px;font-weight:700;transition:all .15s;display:flex}.detected-letter.active{color:#fdd835;text-shadow:0 0 50px #fdd835cc;transform:scale(1.1)}.level1-letter{text-align:center;color:#fdd835;text-shadow:0 10px 30px #fdd83580;justify-content:center;align-items:center;min-height:200px;margin:30px 0;font-size:180px;font-weight:700;display:flex}.level1-instruction{text-align:center;color:#ddd;min-height:40px;margin:20px 0;font-size:24px}.stats{justify-content:space-around;margin:20px 0;font-size:14px;display:flex}.stat-item{text-align:center}.stat-value{color:#fdd835;font-size:24px;font-weight:700}.spectrum-canvas{background:#0000004d;border-radius:10px;width:100%;height:120px;margin:20px 0}.confidence-bar{background:#ffffff1a;border-radius:15px;width:100%;height:30px;margin:20px 0;overflow:hidden}.confidence-fill{background:linear-gradient(90deg,#7cb342,#fdd835);width:0%;height:100%;transition:width .1s}.calibration-modal{z-index:10000;background:#000000e6;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.calibration-modal.active{display:flex}.modal-content{background:#1e1e1efa;border:3px solid #7cb342;border-radius:30px;width:90%;max-width:700px;max-height:90vh;padding:40px;position:relative;overflow-y:auto;box-shadow:0 20px 60px #000c}.modal-close{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:50%;width:40px;height:40px;font-size:24px;transition:all .3s;position:absolute;top:20px;right:20px}.modal-close:hover{background:#ff43364d;transform:rotate(90deg)}.modal-instructions{text-align:center;color:#ddd;margin-bottom:20px;font-size:16px}.modal-letter-container{justify-content:center;align-items:center;gap:20px;margin:20px 0;display:flex}.modal-letter{color:#fdd835;cursor:pointer;text-shadow:0 10px 30px #fdd83580;text-align:center;font-size:180px;font-weight:700;transition:all .15s;display:inline-block}.modal-letter:hover{transform:scale(1.1)}.modal-listen-icon{cursor:pointer;opacity:.7;filter:drop-shadow(0 2px 8px #fdd83566);width:60px;height:60px;transition:all .2s}.modal-listen-icon:hover{opacity:1;transform:scale(1.15)}.modal-listen-icon svg{fill:#fdd835;width:100%;height:100%}.modal-captures{justify-content:center;gap:10px;margin-top:30px;display:flex}.modal-capture-box{background:#00000080;border:2px solid #7cb3424d;border-radius:10px;width:100px;height:80px;transition:all .3s;position:relative}.modal-capture-box.ready{border-color:#fdd835;animation:1.5s infinite pulse;box-shadow:0 0 15px #fdd83580}.modal-capture-box.recording{background:#f4433633;border-color:#f44336;animation:.8s infinite pulse}.modal-capture-box.captured{background:#7cb3421a;border-color:#7cb342}.modal-capture-box canvas{width:100%;height:100%}.mic-icon{opacity:0;pointer-events:none;width:40px;height:40px;transition:opacity .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.modal-capture-box.ready .mic-icon{opacity:.7}.mic-icon svg{fill:#fdd835;filter:drop-shadow(0 0 5px #fdd83580);width:100%;height:100%}.click-arrow{animation:2s ease-in-out infinite arrowHover,1.5s ease-in-out infinite arrowPulse;display:none;position:absolute;bottom:90px;left:50px}.click-arrow.active{display:block}.click-arrow svg{filter:drop-shadow(0 2px 10px #7cb342cc);width:50px;height:50px}@keyframes arrowHover{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes arrowPulse{0%,to{opacity:.8}50%{opacity:1}}.modal-status{text-align:center;color:#ddd;margin-top:20px;font-size:18px}.modal-next-button{cursor:pointer;background:#7cb342;border-radius:50%;width:80px;height:80px;margin:30px auto 0;transition:all .3s;animation:1.5s ease-in-out infinite nextButtonPulse;display:none;box-shadow:0 4px 15px #7cb34280}.modal-next-button.active{justify-content:center;align-items:center;display:flex}.modal-next-button:hover{background:#8bc34a;transform:scale(1.1);box-shadow:0 6px 20px #7cb342b3}.modal-next-button svg{fill:#fff;width:40px;height:40px}@keyframes nextButtonPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.tuner-original{max-width:800px;margin:0 auto}#spectrumCanvas{width:100%;height:120px;margin:15px 0;display:block}