body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;min-height:100vh;text-align:center}.App-header{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 10px #0000001a;color:#fff;padding:2rem}.App-header h1{font-size:2.5rem;font-weight:700;margin:0 0 .5rem;text-shadow:0 2px 4px #0000004d}.App-header p{font-size:1.1rem;font-weight:300;margin:0;opacity:.9}.App-main{margin:0 auto;max-width:800px;min-height:calc(100vh - 200px);padding:2rem 1rem}.loading-container{align-items:center;display:flex;justify-content:center;min-height:60vh}.loading-content{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001a;max-width:400px;padding:2rem;text-align:center;width:100%}.loading-content h2{color:#333;font-size:1.5rem;font-weight:600;margin:0 0 1.5rem}.progress-bar{background-color:#e0e0e0;border-radius:4px;height:8px;margin:1rem 0;overflow:hidden;width:100%}.progress-fill{background:linear-gradient(90deg,#667eea,#764ba2);border-radius:4px;height:100%;transition:width .3s ease}.loading-content p{color:#666;font-size:.9rem;margin:1rem 0 0}@media (max-width:600px){.App-header{padding:1.5rem 1rem}.App-header h1{font-size:2rem}.App-main{padding:1rem}.loading-content{margin:1rem;padding:1.5rem}}.note-display{border-radius:10px;margin:1rem 0;padding:2rem;text-align:center;transition:all .3s ease}.note-display.inactive{background-color:#f5f5f5;color:#666}.note-display.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 15px #667eea4d;color:#fff}.note-display.waiting{background:linear-gradient(135deg,#6c757d,#495057)!important;box-shadow:0 4px 15px #6c757d4d!important}.target-note h2{font-size:1.2rem;font-weight:300;margin:0 0 1rem}.note-name{align-items:center;display:flex;font-family:Courier New,monospace;font-size:6rem;justify-content:center;min-height:7rem;text-shadow:0 2px 4px #0000004d}.note-hint{font-size:.9rem;font-style:italic;font-weight:300;margin-top:.5rem;opacity:.8}.note-display.flash-green{animation:flashGreen .5s ease-out;background:linear-gradient(135deg,#28a745,#20c997)!important;box-shadow:0 4px 20px #28a74599!important}.note-display.flash-red{animation:flashRed .5s ease-out;background:linear-gradient(135deg,#dc3545,#c82333)!important;box-shadow:0 4px 20px #dc354599!important}@keyframes flashGreen{0%{box-shadow:0 4px 15px #667eea4d;transform:scale(1)}50%{box-shadow:0 4px 25px #28a745cc;transform:scale(1.05)}to{box-shadow:0 4px 20px #28a74599;transform:scale(1)}}@keyframes flashRed{0%{box-shadow:0 4px 15px #667eea4d;transform:scale(1)}50%{box-shadow:0 4px 25px #dc3545cc;transform:scale(1.02)}to{box-shadow:0 4px 20px #dc354599;transform:scale(1)}}@media (max-width:768px){.note-name{font-size:4.5rem;min-height:5.5rem}}@media (max-width:480px){.note-name{font-size:3.5rem;min-height:4.5rem}.target-note h2{font-size:1rem}.note-display{padding:1.5rem}}.triad-display{align-items:center;border-radius:12px;display:flex;flex-direction:column;justify-content:center;margin:2rem 0;min-height:300px;padding:2rem;text-align:center;transition:all .3s ease}.triad-display.inactive{background-color:#f5f5f5;border:2px dashed #ccc;color:#666}.triad-display.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 8px 32px #667eea4d;color:#fff}.triad-display.waiting{background:linear-gradient(135deg,#bbb,#999)}.triad-display.flash-green{background:linear-gradient(135deg,#4caf50,#45a049);transform:scale(1.02)}.triad-display.flash-red{background:linear-gradient(135deg,#f44336,#d32f2f);transform:scale(1.02)}.triad-info h2{font-size:1.5rem;font-weight:300;margin:0 0 1rem}.triad-name{font-size:3rem;font-weight:700;margin-bottom:2rem;text-shadow:2px 2px 4px #0000004d}.triad-notes{gap:2rem;margin-bottom:1.5rem}.note-circle,.triad-notes{align-items:center;display:flex;justify-content:center}.note-circle{border:3px solid #0000;border-radius:50%;flex-direction:column;height:120px;position:relative;transition:all .3s ease;width:120px}.note-circle.completed{background:#4caf50e6;border-color:#4caf50;box-shadow:0 4px 20px #4caf5066}.note-circle.current{animation:pulse 2s infinite;background:#ffc107e6;border-color:#ffc107;box-shadow:0 4px 20px #ffc10766}.note-circle.upcoming{background:#fff3;border-color:#ffffff4d}.note-label{font-size:.8rem;font-weight:600;letter-spacing:1px;margin-bottom:.25rem;text-transform:uppercase}.note-name{font-size:1.5rem;font-weight:700}.current-instruction{font-size:1.1rem;font-style:italic;font-weight:500;opacity:.9}@media (max-width:768px){.triad-display{margin:1rem 0;min-height:250px;padding:1.5rem}.triad-name{font-size:2.5rem;margin-bottom:1.5rem}.triad-notes{flex-wrap:wrap;gap:1rem}.note-circle{height:90px;width:90px}.note-name{font-size:1.2rem}}@media (max-width:480px){.triad-name{font-size:2rem}.note-circle{height:70px;width:70px}.note-name{font-size:1rem}.note-label{font-size:.7rem}}.audio-level-meter{background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;margin:1rem 0;padding:1rem}.audio-level-meter.inactive{opacity:.6}.meter-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.75rem}.meter-title{color:#495057;font-size:.9rem;font-weight:600}.level-percentage{color:#007bff;font-family:Courier New,monospace;font-size:.9rem;font-weight:700}.level-bars{align-items:flex-end;display:flex;gap:2px;height:24px;margin-bottom:.75rem}.level-bar{border-radius:2px 2px 0 0;flex:1 1;height:100%;min-height:4px;transition:background-color .1s ease}.level-info{text-align:center}.level-text{color:#495057;display:block;font-size:.9rem;font-weight:600;margin-bottom:.25rem}.level-advice{color:#6c757d;display:block;font-size:.8rem;font-style:italic}.sensitivity-control{align-items:center;background-color:#fff;border:1px solid #ced4da;border-radius:4px;display:flex;gap:.5rem;margin-bottom:.75rem;padding:.5rem}.sensitivity-control label{color:#495057;font-size:.9rem;font-weight:500;white-space:nowrap}.sensitivity-slider{appearance:none;background:#dee2e6;border-radius:2px;flex:1 1;height:4px;outline:none}.sensitivity-slider::-webkit-slider-thumb{appearance:none;background:#007bff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px #0003;cursor:pointer;height:16px;width:16px}.sensitivity-slider::-moz-range-thumb{background:#007bff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px #0003;cursor:pointer;height:16px;width:16px}.sensitivity-value{color:#007bff;font-family:Courier New,monospace;font-size:.9rem;font-weight:700;min-width:35px;text-align:center}@media (max-width:600px){.audio-level-meter{margin:.75rem 0;padding:.75rem}.level-bars,.meter-header{margin-bottom:.5rem}.level-bars{height:20px}.level-percentage,.level-text,.meter-title{font-size:.8rem}.level-advice{font-size:.75rem}}.audio-manager{margin:1rem 0;text-align:center}.audio-status{background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:1rem}.permission-request{color:#dc3545;font-weight:500;text-align:center}.permission-request p{margin:.5rem 0}.permission-help{color:#6c757d!important;font-size:.9rem;font-weight:400!important}.audio-info{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between}.detection-info{align-items:flex-end;display:flex;flex-direction:column;font-size:.9rem;gap:.25rem}.listening-indicator{font-size:.9rem}.listening-active{animation:pulse 1.5s infinite;color:#28a745}.listening-inactive{color:#6c757d}.detected-note{color:#495057;font-size:.9rem}.detected-note strong{color:#007bff;font-family:Courier New,monospace}.frequency-display{align-items:center;display:flex;gap:.5rem}.freq-label{color:#6c757d;font-size:.8rem}.freq-value{color:#007bff;font-family:Courier New,monospace;font-weight:700}.no-note-detected{align-items:flex-end;display:flex;flex-direction:column}.no-note-reason{color:#6c757d;font-size:.8rem;font-style:italic}.debug-info{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;color:#6c757d;font-family:Courier New,monospace;margin-top:.5rem;padding:.5rem;text-align:center}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.usage-tips{background-color:#e3f2fd;border-left:4px solid #2196f3;border-radius:6px;margin-top:1rem;padding:1rem;text-align:left}.usage-tips h4{color:#1976d2;font-size:.9rem;margin:0 0 .5rem}.usage-tips ul{color:#424242;font-size:.85rem;margin:0;padding-left:1.2rem}.usage-tips li{margin-bottom:.25rem}@media (max-width:600px){.audio-info{flex-direction:column;gap:.5rem}.usage-tips{margin-top:.75rem;padding:.75rem}.usage-tips ul{padding-left:1rem}}.kpi-display{background-color:#f8f9fa;border:2px solid #e9ecef;border-radius:10px;display:flex;gap:1rem;justify-content:space-around;margin:1rem 0;padding:1rem}.kpi-item{flex:1 1;text-align:center}.kpi-label{color:#6c757d;font-size:.8rem;font-weight:500;letter-spacing:.5px;margin-bottom:.25rem;text-transform:uppercase}.kpi-value{color:#495057;font-family:Courier New,monospace;font-size:1.5rem;font-weight:700}.kpi-item:first-child .kpi-value{color:#007bff}.kpi-item:nth-child(2) .kpi-value{color:#28a745}.kpi-item:last-child .kpi-value{color:#6c757d}@media (max-width:600px){.kpi-display{flex-direction:column;gap:.75rem}.kpi-item{padding:.5rem}.kpi-value{font-size:1.25rem}}.game-controls{margin:1rem 0;text-align:center}.mode-buttons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.control-button{border:none;border-radius:25px;cursor:pointer;font-size:1rem;font-weight:600;min-width:120px;padding:12px 24px;transition:all .3s ease}.start-button{background:linear-gradient(45deg,#4caf50,#45a049);box-shadow:0 2px 10px #4caf504d;color:#fff}.start-button:hover{box-shadow:0 4px 15px #4caf5066;transform:translateY(-2px)}.stop-button{background:linear-gradient(45deg,#f44336,#d32f2f);box-shadow:0 2px 10px #f443364d;color:#fff}.stop-button:hover{box-shadow:0 4px 15px #f4433666;transform:translateY(-2px)}.control-button:active{transform:translateY(0)}
/*# sourceMappingURL=main.94bcdafe.css.map*/