*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f5f4ef;--surface: #ffffff;--border: #d8d4c8;--accent: #5a7a5a;--accent-lt: #8aad8a;--danger: #c0392b;--success: #27ae60;--text: #2c2c2c;--muted: #777;--radius: 8px}body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}#app{max-width:680px;margin:0 auto;padding:16px}header{margin-bottom:16px}.header-brand{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--accent)}header h1{font-size:1.5rem;font-weight:700;color:var(--accent)}#config{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin-bottom:12px}.config-row{display:flex;flex-wrap:wrap;gap:12px}.config-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.config-label{font-size:.85rem;font-weight:600;color:var(--muted);white-space:nowrap}.toggle-group{display:flex;gap:4px}.toggle{padding:4px 10px;border:1.5px solid var(--border);border-radius:20px;background:transparent;font-size:.82rem;cursor:pointer;color:var(--muted);transition:all .15s}.toggle.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}#tabs{display:flex;gap:0;margin-bottom:16px;border-bottom:2px solid var(--border)}.tab{padding:8px 20px;border:none;background:transparent;font-size:.95rem;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}.panel{display:none}.panel.active{display:block}.quiz-type-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}select{padding:6px 10px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:.9rem;background:var(--surface);cursor:pointer}.quiz-question-area{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px}.question-text{font-size:1.4rem;font-weight:700;color:var(--text);text-align:center;min-height:2rem}canvas{border-radius:6px;display:block}.play-btn{padding:6px 18px;border:1.5px solid var(--accent);border-radius:20px;background:transparent;color:var(--accent);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .15s}.play-btn:hover{background:var(--accent);color:#fff}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.option-btn{padding:12px 10px;border:2px solid var(--border);border-radius:var(--radius);background:var(--surface);font-size:.9rem;cursor:pointer;text-align:left;transition:all .15s;display:flex;align-items:center;gap:8px}.option-btn:hover:not(:disabled){border-color:var(--accent-lt);background:#f0f5f0}.option-btn .label{font-weight:700;color:var(--accent);min-width:20px}.option-btn.correct{border-color:var(--success);background:#eafaf1}.option-btn.wrong{border-color:var(--danger);background:#fdecea}.option-btn:disabled{cursor:default}.feedback{text-align:center;font-size:1rem;font-weight:600;min-height:1.5rem;margin-bottom:10px}.feedback.correct{color:var(--success)}.feedback.wrong{color:var(--danger)}.quiz-footer{display:flex;align-items:center;justify-content:space-between}.score{font-size:1rem;font-weight:700;color:var(--muted)}.btn-primary{padding:8px 22px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:.95rem;font-weight:600;cursor:pointer;transition:background .15s}.btn-primary:hover{background:#4a6a4a}.note-palette{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.palette-position{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}.palette-pos-label{font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:8px}.palette-grid{display:grid;gap:4px;align-items:center}.palette-grid-str{text-align:center;font-size:.75rem;font-weight:700;color:var(--muted);padding-bottom:2px}.palette-grid-finger{font-size:.72rem;color:var(--muted);text-align:center;line-height:1}.palette-grid-empty{height:30px}.palette-grid .note-btn{padding:4px 2px;font-size:.78rem;text-align:center;width:100%}.note-btn{padding:6px 12px;border:1.5px solid var(--border);border-radius:6px;background:var(--surface);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s;color:var(--text)}.note-btn:hover{border-color:var(--accent-lt);background:#f0f5f0}.note-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.practice-display{display:flex;gap:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;align-items:center;flex-wrap:wrap}.practice-info{flex:1;min-width:140px}.big-note{font-size:2.8rem;font-weight:800;color:var(--accent);margin-bottom:10px}.fingering-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.fingering-tag{display:inline-block;padding:4px 10px;background:#f0f5f0;border:1px solid var(--accent-lt);border-radius:16px;font-size:.82rem;font-weight:600;color:var(--accent)}.audio-help{font-size:.82rem;color:var(--muted)}.audio-help summary{cursor:pointer;color:var(--accent);-webkit-user-select:none;user-select:none}.audio-help ul{margin-top:6px;padding-left:16px;line-height:1.8}.audio-help code{background:#eee;padding:1px 4px;border-radius:3px;font-size:.8rem}