main > details.mixer-control,
.lesson-player > details.mixer-control {
  display: block;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  background: var(--surface);
}
.lesson-player > details.mixer-control { order: 0; min-width: 0; margin: 0; padding: 12px; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.lesson-player > .trainer-transport { margin-bottom: 0; }
.mixer-control #mixer-label { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: .88rem; font-weight: 750; letter-spacing: 0; text-transform: none; }
.mixer-control__icon { flex: 0 0 22px; width: 22px; height: 22px; color: var(--accent); }
.mixer-control > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 4px; }
.mixer-control > summary { min-height: 24px; list-style: none; cursor: pointer; }
.mixer-control > summary::-webkit-details-marker { display: none; }
.mixer-control > summary::after { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform .18s; }
.mixer-control > summary span:first-child { margin-right: auto; }
.mixer-control[open] > summary { margin-bottom: 12px; }
.mixer-control[open] > summary::after { transform: rotate(225deg); }
.mixer-control:not([open]) > :not(summary) { display: none; }
.mixer-control[open] > summary { margin-bottom: 6px; }
.mixer-control .practice-mixer { gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.mixer-control .mixer-channel { grid-template-columns: 20px minmax(0, 1fr) 48px 32px; gap: 0 8px; padding: 6px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.mixer-control .mixer-channel:first-child { border-top: 0; }
.mixer-control .mixer-channel__header,
.mixer-control .mixer-channel__fader { display: contents; }
.mixer-control .mixer-channel__number { grid-area: 1 / 1; width: 20px; height: 20px; border-radius: 6px; font-size: .65rem; }
.mixer-control .mixer-channel__header strong { grid-area: 1 / 2; font-size: .76rem; }
.mixer-control .mixer-channel__mute { grid-area: 1 / 4; width: 32px; height: 32px; min-height: 32px; border-radius: 7px; }
.mixer-control .mixer-channel__fader output { grid-area: 1 / 3; color: var(--text); font-size: .68rem; }
.mixer-control .mixer-channel__fader input { grid-area: 2 / 1 / 3 / -1; height: 20px; }
.mixer-control .mixer-channel.is-muted { opacity: 1; }
.mixer-control .mixer-channel.is-muted strong { color: var(--muted); }
.mixer-control .mixer-channel.is-muted .mixer-channel__fader input { opacity: .6; }
.mixer-control :is(.drum-pattern-control, .accompaniment-chord-control, .accompaniment-sound-control, .bass-sound-control) { gap: 8px; margin: 2px 0 0; font-size: .68rem; }
.mixer-control :is(.drum-pattern-control, .accompaniment-chord-control, .accompaniment-sound-control, .bass-sound-control) select { width: min(156px, 62%); min-height: 28px; height: 28px; padding: 0 26px 0 8px; border-radius: 6px; font-size: .72rem; }
.trainer-settings { margin: 16px 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-medium); background: var(--surface-strong); }
.trainer-settings__title { flex-basis: 100%; margin: 0 0 12px; color: var(--text); font-size: .9rem; font-weight: 650; }
.toolbar.trainer-settings { margin-top: 0; gap: 16px; }
.toolbar.trainer-settings > .trainer-settings__title { margin-bottom: 0; }
.box-playback { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: 18px 0 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-medium); background: var(--surface); }
.box-playback .practice__header { display: block; }
.box-playback h2 { font-size: .9rem; }
.box-playback .practice-controls { margin-left: 0; }
.trainer-settings .rhythm-trainer__transport { margin-top: 16px; }
.trainer-settings .slap-trainer__controls { align-items: end; }
.slap-tempo-control .field__label { display: block; margin-bottom: 7px; }
.slap-tempo-control .tempo-stepper { display: inline-flex; align-items: center; height: 44px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.slap-tempo-control .tempo-stepper__value { gap: 4px; }
.slap-tempo-control .tempo-stepper__value input { width: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.trainer-transport .lesson-player__action-row { display: flex; align-items: end; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin: 0; }
.lesson-player:not(.lesson-player--builder) .trainer-transport { --lesson-control-size: 36px; --lesson-control-icon-size: 16px; }
.trainer-transport .lesson-player__action-row > div { grid-template-rows: 14px 44px; gap: 6px; }
.trainer-transport .lesson-player__control-label { min-height: 14px; font-size: .65rem; line-height: 1.3; }
.trainer-transport .lesson-player__mode-switch { height: 44px; }
.trainer-transport .lesson-player__count-in-toggle, .trainer-transport .lesson-player__transport-button { width: 44px; height: 44px; min-height: 44px; }
.trainer-transport .lesson-player__tempo-control { margin: 0; transform: none; align-self: auto; }
.trainer-transport .lesson-player__stepper { display: grid; grid-template-columns: 36px 54px 36px; height: 44px; }
.trainer-transport .lesson-player__stepper button { width: 36px; height: 44px; }
.trainer-transport .lesson-player__stepper output { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 54px; font-size: .85rem; }
.trainer-transport .lesson-player__stepper output::after { content: "BPM"; color: var(--muted); font-size: .6rem; font-weight: 500; }
.lesson-player__tempo-input { width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: .78rem; text-align: center; appearance: textfield; }
.lesson-player__tempo-input::-webkit-inner-spin-button, .lesson-player__tempo-input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.lesson-player__tempo-input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.trainer-transport .lesson-player__play-row { padding: 0; border: 0; }
.trainer-settings .rhythm-trainer__play, .trainer-settings .slap-trainer__play, .trainer-transport .lesson-player__play-row .lesson-player__play-button { width: 100%; height: 44px; min-height: 44px; margin: 16px 0 0; border: 1px solid var(--accent); border-radius: 10px; font: inherit; font-weight: 600; }
.lesson-player--builder > .trainer-transport { display: none; }
@media (max-width: 600px) {
  .trainer-settings { padding: 12px; }
  .mixer-control > summary span:last-child { font-size: .62rem; }
}

.box-context { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 0 2px; }
.box-context #bass-description { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.box-context .legend { gap: 6px 12px; padding: 0; font-size: .76rem; line-height: 1.5; }
.box-context .legend__dot { width: 8px; height: 8px; margin-right: 6px; }
.box-context + .box-playback { margin-top: 10px; }
@media print {
  .box-context { margin: 0 0 2mm; padding: 0; }
  .box-context #bass-description { display: none; }
  .box-context .legend { font-size: 9pt; }
}