/* Colorful practice navigation and a focused exercise workspace. */
.wrap{max-width:1260px;padding:22px 18px}.wrap>h1{font-size:clamp(26px,3vw,38px);margin-bottom:5px;color:var(--text-main)}.tagline{font-size:13px;margin-bottom:22px;opacity:.8}
.ear-workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:start;margin-bottom:20px}.ear-sidebar{display:flex;flex-direction:column;gap:12px}.ear-sidebar>h2{font-size:13px;margin:0;color:var(--text-muted);font-weight:700}.ear-sidebar #modebar{display:flex;flex-direction:column;gap:7px;margin:0}.ear-sidebar #modebar button{display:flex;align-items:center;gap:12px;text-align:start;border:1px solid color-mix(in srgb,var(--mode-color) 45%,transparent);border-radius:12px;background:color-mix(in srgb,var(--mode-color) 10%,var(--bg-controls));color:var(--text-main);padding:12px 14px;min-height:54px;font-size:14px;font-weight:600;transition:background .15s,box-shadow .15s}.ear-sidebar #modebar button svg{width:24px;height:24px;fill:none;stroke:var(--mode-color);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}.ear-sidebar #modebar button.on{background:var(--mode-color);border-color:var(--mode-color);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--mode-color) 35%,transparent)}.ear-sidebar #modebar button.on svg{stroke:#fff}.ear-sidebar #modebar button:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--mode-color) 25%,transparent)}
.ear-exercise-card{padding:22px;border-top:4px solid var(--practice-color);border-radius:18px;min-width:0;box-shadow:0 10px 28px #0002;margin:0}.ear-exercise-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.ear-exercise-heading h2{margin:0;border:0;padding:0;font-size:23px;color:var(--text-main)}.ear-mode-navigation{display:flex;gap:6px}.ear-mode-navigation button{padding:6px 9px;border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--text-muted);font-size:11px;cursor:pointer}.ear-mode-navigation button:hover{color:var(--text-main);border-color:var(--practice-color)}.ear-exercise-card #modeHint{font-size:13px;margin-top:8px;padding-bottom:14px;border-bottom:1px solid var(--border);color:var(--text-muted)}.ear-exercise-card .stage{padding:24px 0 14px;min-height:0;gap:14px}.ear-main-actions{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}.ear-main-actions #playBtn{background:var(--practice-color);border-color:var(--practice-color);border-radius:12px;padding:15px 28px;min-width:175px;font-size:18px;box-shadow:0 5px 14px color-mix(in srgb,var(--practice-color) 30%,transparent)}.ear-new-exercise{background:transparent;border:1px solid var(--practice-color);border-radius:10px;color:var(--text-main);padding:12px 16px;font-size:13px;cursor:pointer}.ear-exercise-card .ctlrow{gap:7px;flex-wrap:wrap}.ear-exercise-card .ctlrow .ctlbtn{padding:8px 12px;font-size:12px;border-radius:8px}.ear-exercise-card .options{gap:8px}.ear-exercise-card .options button{border-radius:10px;min-height:43px;padding:10px 14px}.ear-exercise-card .options button:hover{border-color:var(--practice-color)}.ear-exercise-card .notation{padding-top:14px;border-top:1px solid var(--border)}
.ear-sidebar #settingsPanel{margin:6px 0 0;box-shadow:none;border-radius:12px}.ear-sidebar #settingsPanel>h2{font-size:13px;padding:10px 12px}.ear-sidebar #settingsPanel>.body{padding:10px 12px}.ear-sidebar .practice-settings-basic{grid-template-columns:1fr;gap:9px}.ear-sidebar .practice-knob-row{gap:12px;flex-wrap:wrap}.ear-sidebar .practice-knob-row .practice-auto-next{width:100%;margin:0}.ear-sidebar .practice-knob-label{font-size:10px}.ear-sidebar .practice-knob-control{flex:1}.ear-sidebar .practice-settings-advanced>summary{font-size:11px}.ear-sidebar .practice-settings-advanced .row{display:flex;flex-direction:column;align-items:stretch;gap:10px}.ear-sidebar .practice-settings-advanced .field{min-width:0;max-width:100%}.ear-sidebar .practice-settings-advanced select{max-width:100%}.ear-sidebar .practice-settings-advanced .mini{font-size:11px}
@media(max-width:900px){.ear-workspace{grid-template-columns:1fr;gap:12px}.ear-sidebar #modebar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.ear-sidebar #modebar button{flex-direction:column;text-align:center;padding:9px 5px;gap:5px;font-size:12px;min-height:72px}.ear-sidebar #settingsPanel{order:2}.ear-sidebar .practice-settings-basic{grid-template-columns:repeat(3,minmax(0,1fr))}.ear-sidebar .practice-knob-row{grid-column:1/-1}.ear-sidebar .practice-knob-row .practice-auto-next{width:auto;margin-inline-start:auto}.ear-sidebar .practice-knob-control{flex:0 0 auto}.ear-exercise-card{padding:15px}.tagline{line-height:1.6}}
@media(max-width:550px){.wrap{padding:14px 10px}.ear-sidebar .practice-settings-basic{grid-template-columns:1fr}.ear-main-actions #playBtn{min-width:150px;padding:12px 18px}.ear-mode-navigation button{padding:6px 8px}.ear-exercise-card .stage{padding:18px 0 10px}}

.ear-sidebar #modebar button{background:color-mix(in srgb,var(--mode-color) 10%,var(--bg-controls))!important;color:var(--text-main)!important}.ear-sidebar #modebar button.on{background:var(--mode-color)!important;color:#fff!important;border-color:var(--mode-color)!important}.ear-sidebar #modebar button svg{display:block!important;stroke:var(--mode-color)!important}.ear-sidebar #modebar button.on svg{stroke:#fff!important}

/* Essential controls stay beside the exercise; the rest follow the selected mode. */
.ear-quick-settings{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0}
.ear-quick-field{display:flex;flex-direction:column;gap:5px;flex:1 1 115px;min-width:0;font-size:11px;color:var(--text-muted);font-weight:600}
.ear-quick-field select{box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:34px;padding:5px 8px;font-size:12px;color:var(--text-main);background:var(--bg-controls);border:1px solid var(--border);border-radius:7px}
.ear-quick-settings .practice-knob-row{gap:14px;padding:0;border:0;flex-wrap:nowrap;margin-inline-start:auto}
.ear-quick-settings .practice-knob-label{color:var(--text-muted);font-size:10px}
.ear-quick-settings .practice-knob-dial{width:42px;height:42px}
.ear-quick-settings .practice-knob-line{gap:4px}
.ear-quick-settings .practice-knob-line>button:not(.practice-knob-dial){width:22px;height:25px;font-size:16px}
.ear-exercise-card #settingsPanel{padding:0;margin:0 0 12px;border:1px solid var(--border);border-radius:9px;background:transparent;box-shadow:none}
.ear-exercise-card #settingsPanel>h2{font-size:12px;margin:0;padding:9px 12px;cursor:pointer;color:var(--text-muted)}
.ear-exercise-card #settingsPanel>h2:focus-visible{outline:2px solid var(--practice-color);outline-offset:2px}
.ear-exercise-card #settingsPanel>.body{padding:8px 12px 10px}
.ear-extra-settings{display:grid;grid-template-columns:repeat(var(--settings-columns,3),minmax(0,1fr));align-items:start;gap:8px 12px}
.ear-extra-settings>.field{min-width:0;font-size:12px;gap:3px}
.ear-extra-settings select{box-sizing:border-box;width:100%;min-width:0;padding:4px 8px;height:32px;font-size:12px}
.ear-extra-settings .mini{font-size:11px;line-height:1.5}
.ear-extra-settings .practice-auto-next{padding-block-start:21px;margin:0}
.ear-extra-settings .practice-auto-next label{display:flex;align-items:center;gap:6px;min-height:32px;font-size:12px;line-height:1.4;color:var(--text-muted);cursor:pointer}
.ear-extra-settings .practice-auto-next input{margin:0;width:14px;height:14px;flex:none;accent-color:var(--practice-color)}
.ear-setting-toggles{display:flex;align-items:center;flex-wrap:wrap;gap:4px 18px;margin-top:8px}
.ear-setting-toggles>.field{margin:0;gap:4px}
.ear-setting-toggles>.field>span{display:none}
.ear-setting-toggles>.field:has(#dictCount){flex-basis:100%;display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 18px}
.ear-setting-toggles label{display:flex;align-items:center;gap:6px;min-height:28px;font-size:12px;line-height:1.4;color:var(--text-muted);cursor:pointer}
.ear-setting-toggles input[type="checkbox"]{margin:0;width:14px;height:14px;flex:none;accent-color:var(--practice-color)}
.ear-extra-settings [hidden],.ear-setting-toggles[hidden],.ear-setting-toggles [hidden],.ear-quick-settings [hidden],.practice-settings-basic[hidden]{display:none!important}
.ear-midi-settings{border-top:1px solid var(--border);padding-top:7px;margin-top:7px;font-size:12px}
.ear-midi-settings>summary{cursor:pointer;color:var(--text-muted)}
.ear-midi-settings>.field{padding-top:10px}.ear-midi-settings>.field>span:first-child{display:none}
.ear-exercise-card.ear-dictation .notation{border-top:0;padding-top:10px}
.ear-exercise-card.ear-dictation .stage{padding-top:12px}
.ear-exercise-card.ear-dictation .ear-quick-settings{border-top:1px solid var(--border);margin-top:8px}
.ear-score-result-wrap{position:relative}
.ear-success-badge{position:absolute;inset-inline-end:14px;top:38px;z-index:2;display:flex;align-items:center;padding:8px 16px;border-radius:20px;background:#157747;color:#fff;font-size:17px;font-weight:700;box-shadow:0 3px 12px #12633b44;pointer-events:none;animation:ear-success-pop .35s ease-out}
.ear-success-badge[hidden]{display:none!important}
.ear-exercise-card #refBtn[hidden]{display:none!important}
.ear-exercise-card .ctlrow[hidden]{display:none!important}
.ear-exercise-card [data-sounding-midi]{pointer-events:bounding-box;cursor:pointer}
.ear-exercise-card .ear-clicked-note .vf-notehead path{fill:#1678bd!important}
.ear-score-success{box-shadow:inset 0 0 0 3px #22a565;animation:ear-success-glow .7s ease-in-out 3}
@keyframes ear-success-pop{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ear-success-glow{50%{box-shadow:inset 0 0 0 4px #22a565,0 0 18px #22a56555}}
@media(prefers-reduced-motion:reduce){.ear-success-badge,.ear-score-success{animation:none}}
@media(max-width:550px){.ear-quick-settings{gap:10px}.ear-quick-field{flex-basis:calc(50% - 5px)}.ear-quick-settings .practice-knob-row{margin:0;justify-content:flex-start;width:100%}.ear-extra-settings{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ear-exercise-card .stage{padding-top:10px}}