.chord-player{display:flex;flex-direction:column;align-items:center;padding:1.5rem;background-color:#00000008;border-radius:8px}.play-button{font-size:1.2rem;padding:.75rem 1.5rem;background-color:var(--primary);transition:all .3s ease;min-width:160px}.play-button.playing{background-color:var(--secondary);animation:pulse 1.5s infinite}.instruction{margin-top:1rem;font-size:.9rem;color:var(--text);opacity:.8;text-align:center}.instrument-note{display:block;margin-top:.25rem;font-style:italic;font-size:.8rem;color:var(--primary);font-weight:500}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.answer-options{width:100%}.answer-options h3{margin-bottom:1rem;font-size:1.1rem;color:var(--text);text-align:center}.options-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem}.option-button{padding:1rem;font-size:1.1rem;background-color:#fff;border:2px solid var(--primary);color:var(--text);transition:all .2s ease}.option-button:hover:not(:disabled){background-color:var(--primary);color:#fff;transform:translateY(-2px)}.option-button.selected{background-color:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.feedback{width:100%;border-radius:8px;padding:2rem;text-align:center;animation:fadeIn .3s ease}.feedback.correct{background-color:#2ecc711a;border:2px solid var(--success)}.feedback.incorrect{background-color:#e74c3c1a;border:2px solid var(--error)}.feedback-title{font-size:1.5rem;margin-bottom:1rem;color:var(--text)}.feedback.correct .feedback-title{color:var(--success)}.feedback.incorrect .feedback-title{color:var(--error)}.feedback-message{margin-bottom:2rem;font-size:1.1rem}.next-button{background-color:var(--primary);padding:.75rem 1.5rem;font-size:1.1rem;transition:all .3s ease}.next-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.instrument-toggle{display:flex;flex-direction:column;margin:.5rem 1rem;padding:1rem;border-radius:8px;background-color:#f5f5f5;box-shadow:0 2px 4px #0000001a}.instrument-toggle h3{margin-top:0;margin-bottom:.75rem;font-size:1.1rem;color:#333;text-align:center}.toggle-options{display:flex;gap:1rem;justify-content:center;margin-bottom:1rem}.instrument-button{display:flex;flex-direction:column;align-items:center;padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;transition:all .3s ease;background-color:#fff;border:2px solid #ddd}.instrument-button:hover{background-color:#f0f8ff;border-color:#a0d0ff}.instrument-button.selected{background-color:#4a90e2;color:#fff;border-color:#2a70c2;transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.instrument-toggle input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.instrument-icon{font-size:2rem;margin-bottom:.5rem}.toggle-label{font-weight:500}.volume-control{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:.5rem}.volume-slider{-webkit-appearance:none;width:150px;height:6px;border-radius:3px;background:#d3d3d3;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#4a90e2;cursor:pointer;transition:background .2s}.volume-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#4a90e2;cursor:pointer;transition:background .2s}.volume-slider::-webkit-slider-thumb:hover,.volume-slider::-moz-range-thumb:hover{background:#3a80d2}.volume-value{min-width:45px;font-weight:500}.practice-view{display:flex;flex-direction:column;align-items:center;max-width:600px;margin:0 auto;background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:2rem}.practice-view h2{margin-bottom:1.5rem;color:var(--text);text-align:center}.settings-section{background-color:#f9f9f9;border-radius:8px;padding:1rem;margin-bottom:1.5rem;border:1px solid #eaeaea;width:100%}.chord-section{margin-bottom:2rem;width:100%}.answer-section{width:100%}.header{background-color:var(--text);color:#fff;padding:1rem 0;box-shadow:0 2px 4px #0000001a}.header-content{display:flex;justify-content:space-between;align-items:center}.header h1{margin:0;font-size:1.5rem}.score-display{background-color:var(--primary);padding:.5rem 1rem;border-radius:4px;display:flex;gap:.5rem;font-weight:700}.score-value{color:var(--accent)}.app{display:flex;flex-direction:column;min-height:100vh}main{flex:1;padding:2rem 0}.footer{text-align:center;padding:1rem;background-color:var(--text);color:#fff;font-size:.875rem}.instrument-controls{display:flex;justify-content:center;background-color:#f8f8f8;padding:10px 0;margin-bottom:20px;border-bottom:1px solid #eaeaea}.instrument-controls h3{margin:0 10px 0 0}:root{--primary: #3498db;--secondary: #e74c3c;--accent: #f1c40f;--background: #ecf0f1;--text: #2c3e50;--success: #2ecc71;--error: #e74c3c}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Roboto,sans-serif;background-color:var(--background);color:var(--text);line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:1rem}button{cursor:pointer;padding:.5rem 1rem;border:none;border-radius:4px;background-color:var(--primary);color:#fff;font-weight:700;transition:background-color .2s}button:hover{background-color:color-mix(in srgb,var(--primary) 80%,black)}button:disabled{opacity:.5;cursor:not-allowed}