.melody-stage{background:#ffffff05;border:1px solid #ffffff14;border-radius:8px;justify-content:center;align-items:center;min-height:340px;padding:28px;transition:box-shadow .2s,border-color .2s;display:flex}@media (max-width:768px){.melody-stage{min-height:0}}.melody-stage--correct{border-color:#22c55e66;box-shadow:0 0 0 2px #22c55e26}.melody-stage--wrong{border-color:#ef444466;box-shadow:0 0 0 2px #ef444426}.melody-progress{flex-direction:column;align-items:center;gap:14px;display:flex}.melody-empty{color:#ffffff8c;text-align:center;margin:0;font-style:italic}.melody-progress__caption{color:#ffffff80;font-variant-numeric:tabular-nums;margin:0;font-size:.85rem}.melody-progress__dots{align-items:flex-end;gap:14px;display:flex}.melody-dot-wrap{flex-direction:column;align-items:center;gap:4px;display:flex}.melody-dot-label{color:#22c55ed9;font-variant-numeric:tabular-nums;opacity:0;min-height:1em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;font-weight:600;line-height:1;transition:opacity .25s}.melody-dot-label.is-visible{opacity:1}.melody-dot{cursor:pointer;background:#ffffff1a;border:1px solid #ffffff2e;border-radius:50%;width:22px;height:22px;padding:0;transition:all .18s}.melody-dot:hover{background:#fff3;border-color:#fff6;transform:scale(1.1)}.melody-dot:focus-visible{outline-offset:2px;outline:2px solid #e4b97d}.melody-dot.is-done{background:#22c55e66;border-color:#22c55e99}.melody-dot.is-done:hover{background:#22c55e8c}.melody-dot.is-current{background:#e4b97d4d;border-color:#e4b97d;box-shadow:0 0 8px #e4b97d80}.melody-dot.is-playing{background:#e4b97d;border-color:#e4b97d;transform:scale(1.3)}.melody-progress__hint{color:#ffffffa6;text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:4px 0 0;font-size:.9rem;display:inline-flex}.scale-helpers{background:#ffffff05;border:1px solid #ffffff0f;border-radius:8px;flex-direction:column;align-items:center;gap:12px;margin-top:14px;padding:16px 18px;display:flex}.scale-helpers__hint{color:#ffffff8c;text-align:center;max-width:540px;margin:0;font-size:.82rem;line-height:1.45}.scale-helpers__title{text-transform:uppercase;letter-spacing:.08em;color:#ffffff73;align-self:flex-start;margin:0;font-size:.72rem;font-weight:600}.scale-helpers__play{color:#e4b97d;cursor:pointer;background:#e4b97d24;border:1px solid #e4b97d80;border-radius:5px;align-items:center;gap:6px;padding:6px 12px;font-size:.82rem;font-weight:500;transition:background .15s,border-color .15s;display:inline-flex}.scale-helpers__play:hover{background:#e4b97d40;border-color:#e4b97d}.scale-helpers__label{color:#ffffff80;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem}.scale-helpers__row{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}@media (max-width:600px){.scale-helpers{gap:10px;padding:12px}.scale-helpers__hint{font-size:.78rem}.scale-helpers__chip--stacked{min-width:38px;padding:4px 6px}.scale-helpers__chip-top{font-size:.72rem}.scale-helpers__chip-bot{font-size:.65rem}}.scale-helpers__chip{color:#ffffffbf;cursor:pointer;background:0 0;border:1px solid #ffffff1f;border-radius:4px;min-width:34px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;font-weight:500;transition:all .12s}.scale-helpers__chip:hover{color:#e4b97d;background:#e4b97d1f;border-color:#e4b97d80}.scale-helpers__chip--stacked{flex-direction:column;align-items:center;gap:1px;min-width:42px;padding:5px 8px;line-height:1.1;display:inline-flex}.scale-helpers__chip-top{color:#ffffffd9;font-size:.78rem;font-weight:600}.scale-helpers__chip-bot{color:#ffffff73;font-size:.7rem;font-weight:500}.scale-helpers__chip--stacked:hover .scale-helpers__chip-top{color:#e4b97d}.scale-helpers__chip--stacked:hover .scale-helpers__chip-bot{color:#e4b97db3}.melody-reveal{flex-direction:column;align-items:center;gap:10px;display:flex}.melody-staff{background:#fff;border-radius:6px;max-width:100%;padding:6px 8px;line-height:0;overflow-x:auto}.chord-reveal__sequence{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.chord-reveal__step{flex-direction:column;align-items:center;gap:4px;display:flex}.chord-reveal__degree{color:#e4b97d;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;font-weight:600}.melody-reveal-caption{color:#e4b97d;background:#e4b97d1a;border:1px solid #e4b97d66;border-radius:6px;align-items:center;gap:10px;margin:0;padding:6px 14px;font-size:.95rem;display:inline-flex}.melody-reveal-replay{color:#e4b97d;cursor:pointer;background:#e4b97d2e;border:1px solid #e4b97d80;border-radius:3px;justify-content:center;align-items:center;width:22px;height:22px;padding:0;transition:background .15s;display:inline-flex}.melody-reveal-replay:hover{background:#e4b97d52}.melody-reveal-hint{color:#ffffff73;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:6px 0 0;font-size:.82rem;display:inline-flex}.melody-select{color:#ffffffd9;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff26;border-radius:4px;min-width:180px;padding:5px 10px;font-size:.85rem}.melody-select:focus{border-color:#e4b97d80;outline:none}.melody-select option{color:#fff;background:#0a0a0a}.melody-tempo-value{color:#e4b97d;font-variant-numeric:tabular-nums;margin-left:6px;font-weight:500}@media (max-width:768px){.melody-staff{width:100%}}