/* A self-contained sound bench: orange controls, labeled signal colors. */
#musicWorkbench {
  min-width: 0;
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--panel);
  overflow: hidden;
}
#musicWorkbench [hidden] { display: none !important; }
#musicWorkbench button, #musicWorkbench input, #musicWorkbench select { min-height: 44px; }
#musicWorkbench input:not([type=range]), #musicWorkbench select { font-size: 16px; }
#musicWorkbench button { touch-action: manipulation; }
#musicWorkbench input[type=range] { display: block; min-width: 0; margin: 0; }
.music-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 24px 20px; border-bottom: 1px solid var(--line); }
.music-heading > div { min-width: 0; }
.music-heading .eyebrow { margin-bottom: 8px; }
.music-heading h2 { font: 600 clamp(24px, 2.6vw, 35px)/1.15 var(--display); letter-spacing: -.04em; }
.music-heading p:not(.eyebrow) { max-width: 760px; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.music-badge { flex: none; border: 1px solid color-mix(in srgb, var(--app-accent) 40%, var(--line)); color: var(--accent-text); background: color-mix(in srgb, var(--app-accent) 6%, var(--panel)); border-radius: 30px; padding: 9px 13px; font: 9px/1.5 var(--mono); letter-spacing: .04em; }
.music-small { color: var(--muted); font-size: 11px; line-height: 1.7; }
.music-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.music-presets button { min-width: 0; padding: 13px 14px; text-align: left; background: var(--bg); }
.music-presets button > span { display: block; color: var(--accent-text); font: 9px var(--mono); letter-spacing: .04em; margin-bottom: 6px; }
.music-presets button > strong { display: block; font-size: 14px; line-height: 1.35; }
.music-presets button > small { display: block; font-size: 11px; font-weight: 400; line-height: 1.55; color: var(--muted); margin-top: 5px; }
.music-presets button[aria-pressed=true] { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 10%, var(--bg)); }
.music-lab-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 220px; grid-template-areas: 'voiceA plot voiceB'; align-items: start; }
.music-lab-layout > *, .music-voice, .music-plot-stack, .music-field, .music-reference, .music-harmonic { min-width: 0; }
.music-voice { padding: 20px 16px; }
.music-voice-a { grid-area: voiceA; border-right: 1px solid var(--line); }
.music-voice-b { grid-area: voiceB; border-left: 1px solid var(--line); }
.music-voice-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.music-voice-heading h3, .music-voice-heading h2 { margin: 0; font: 600 18px/1.3 var(--font); letter-spacing: -.025em; }
.music-voice-heading .eyebrow { margin-bottom: 4px; font-size: 8px; color: var(--muted); }
.music-voice-heading > span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); flex: none; font: 17px var(--mono); }
.music-voice-a .music-voice-heading > span { color: var(--wave-a); }
.music-voice-b .music-voice-heading > span { color: var(--wave-b); }
.music-field { margin-top: 15px; }
.music-field > label, .music-field > span { display: block; margin-bottom: 6px; color: var(--fg); font-size: 12px; }
.music-field .unit-input { width: 100%; }
.music-field .unit-input input { padding-left: 10px; font-family: var(--mono); }
.music-field small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.music-note-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: end; margin-top: 14px; }
.music-note-picker label { min-width: 0; grid-column: 1 / -1; color: var(--fg); font-size: 12px; }
.music-note-picker button { padding-inline: 10px; font-size: 11px; white-space: nowrap; }
.music-level { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; column-gap: 8px; margin-top: 18px; }
.music-level label { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; color: var(--fg); font-size: 12px; }
.music-level input { flex: 1 0 100%; }
.music-level .parameter-bounds { width: 100%; margin-top: -1px; }
.music-voice > .music-small { margin-top: 15px; font-size: 10px; }
.music-note-readout { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.7; color: var(--muted); overflow-wrap: anywhere; }
.music-note-readout strong { color: var(--fg); font-weight: 600; }
.music-plot-stack { grid-area: plot; padding-top: 18px; }
.music-plot-stack > h3, .music-plot-stack > h2 { padding-inline: 18px; font: 600 16px/1.3 var(--font); }
.music-plot-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 0 18px; }
.music-plot-heading > div { min-width: 0; }
.music-plot-heading h3 { font: 600 16px/1.35 var(--font); letter-spacing: -.02em; }
.music-plot-heading .eyebrow { font-size: 8px; margin-bottom: 7px; }
.music-plot-heading > span { color: var(--accent-text); font: 11px/1.5 var(--mono); }
.music-plot-stack > .music-small { padding: 0 18px 14px; font-size: 10px; }
.music-wave-wrap { min-width: 0; height: 280px; background: var(--panel); }
.music-wave-wrap canvas, .music-spectrum-wrap canvas { display: block; width: 100%; height: 100%; }
.music-plot-caption { padding: 8px 18px 12px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.music-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 0 18px 8px; font-size: 11px; color: var(--muted); }
.music-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.music-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--app-accent); }
.music-legend .a, .music-legend .voice-a { background: var(--wave-a); }
.music-legend .b, .music-legend .voice-b { background: var(--wave-b); }
.music-plot-heading .music-legend { padding: 0; font-size: 10px; gap: 10px; }
.music-quick-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 12px 18px; border-top: 1px solid var(--line); }
.music-quick-actions button { min-width: 0; font-size: 11px; padding-inline: 11px; }
.music-reference { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; }
.music-reference label { width: 100%; color: var(--muted); font-size: 11px; }
.music-reference input { max-width: none; }
.music-reference .unit-input { display: flex; width: 100%; margin-top: 7px; }
.music-reference .field-error { font-size: 10px; }
.music-reference small { flex-basis: 100%; color: var(--muted); font-size: 10px; line-height: 1.6; }
.music-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 45%, var(--panel)); }
.music-metrics > div { min-width: 0; padding: 18px 20px; border-right: 1px solid var(--line); }
.music-metrics > div:last-child { border-right: 0; }
.music-metrics span, .music-metrics small, .music-metrics dt { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; }
.music-metrics strong, .music-metrics output, .music-metrics dd { display: block; margin: 5px 0; font: 20px/1.5 var(--mono); color: var(--accent-text); overflow-wrap: anywhere; white-space: normal; }
.music-envelope { padding-top: 20px; border-bottom: 1px solid var(--line); }
.music-envelope-wrap { height: 160px; min-width: 0; }
.music-envelope-wrap canvas { display: block; width: 100%; height: 100%; }
.music-designer { padding: 24px; border-bottom: 1px solid var(--line); }
.music-designer > h3, .music-designer > h2 { font: 600 22px/1.3 var(--font); letter-spacing: -.025em; }
.music-designer > p { max-width: 850px; color: var(--muted); font-size: 12px; line-height: 1.7; margin: 8px 0 14px; }
.music-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.music-section-heading > div:first-child { flex: 1 1 340px; min-width: 0; }
.music-section-heading .eyebrow { margin-bottom: 7px; }
.music-section-heading h3 { font: 600 22px/1.3 var(--font); letter-spacing: -.025em; }
.music-section-heading p:not(.eyebrow) { max-width: 650px; margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.music-timbres { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.music-timbres button { font-size: 12px; padding-inline: 14px; }
.music-harmonics { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.music-harmonic { padding: 12px 10px 5px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.music-harmonic > label { color: var(--fg); font-size: 11px; font-weight: 600; }
.music-harmonic h3 { font: 600 12px var(--font); }
.music-harmonic output { display: block; font-size: 13px; margin-top: 7px; }
.music-harmonic > small { display: block; color: var(--muted); font: 9px/1.5 var(--mono); margin-top: 4px; }
.music-harmonic > span { display: block; color: var(--muted); font: 9px/1.6 var(--mono); padding-bottom: 7px; overflow-wrap: anywhere; }
.music-spectrum-wrap { height: 190px; margin: 14px -10px 0; min-width: 0; }
.music-partials { margin-top: 10px; border-top: 1px solid var(--line); }
.music-partials summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 12px; padding: 10px 0; color: var(--fg); }
.music-partials summary:before { content: '+'; font: 18px var(--mono); color: var(--accent-text); margin-right: 10px; }
.music-partials[open] summary:before { content: '−'; }
.music-table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: var(--line) transparent; }
.music-table-scroll:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 3px; }
.music-partials table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.music-partials th, .music-partials td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.music-partials th { color: var(--muted); font-weight: 400; }
.music-partials td { font-family: var(--mono); }
.music-partials caption { text-align: left; color: var(--muted); padding: 8px 0; font-size: 11px; }
.music-export-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.music-export-row > span { flex: 1 1 280px; }
.music-export-row button { flex: 0 1 auto; font-size: 12px; border-color: color-mix(in srgb, var(--app-accent) 60%, var(--line)); }
.music-learning { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 24px; background: color-mix(in srgb, var(--app-accent) 4%, var(--panel)); }
.music-learning > div { min-width: 0; }
.music-learning h3, .music-learning h2 { font: 600 20px/1.35 var(--font); letter-spacing: -.025em; }
.music-learning p:not(.eyebrow):not(.music-feedback) { color: var(--muted); font-size: 13px; line-height: 1.7; max-width: 850px; margin: 8px 0 14px; }
.music-learning .button-row, .music-learning .music-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.music-learning button { font-size: 12px; }
.music-feedback { margin-top: 14px; min-height: 24px; color: var(--accent-text); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.music-model-note { padding: 14px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.7; }

@media (max-width: 1100px) {
  .music-lab-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'plot plot' 'voiceA voiceB'; }
  .music-voice { border-top: 1px solid var(--line); padding: 18px 20px; }
  .music-voice-a { border-right: 1px solid var(--line); }
  .music-voice-b { border-left: 0; }
  .music-plot-stack { padding-top: 20px; }
  .music-wave-wrap { height: 300px; }
  .music-harmonics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .music-harmonic { padding: 12px 14px 5px; }
  .music-metrics > div { padding: 16px; }
  .music-metrics strong, .music-metrics output, .music-metrics dd { font-size: 18px; }
}
@media (max-width: 760px) {
  .music-heading { flex-wrap: wrap; gap: 16px; }
  .music-heading, .music-designer, .music-learning { padding: 20px 16px; }
  .music-heading h2 { font-size: 28px; }
  .music-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 16px; gap: 8px; }
  .music-presets button { padding: 11px; }
  .music-presets button > strong { font-size: 13px; }
  .music-presets button > small { font-size: 10px; }
  .music-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .music-metrics > div:nth-child(2) { border-right: 0; }
  .music-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .music-wave-wrap { height: 260px; }
  .music-spectrum-wrap { height: 180px; margin-inline: -6px; }
  .music-learning { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .music-model-note { padding-inline: 16px; }
}
@media (max-width: 640px) {
  .music-lab-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'plot' 'voiceA' 'voiceB'; }
  .music-voice { padding: 16px; border-inline: 0; }
  .music-voice-heading { margin-bottom: 12px; }
  .music-voice .music-field { margin-top: 12px; }
  .music-note-readout { margin-top: 12px; padding-top: 10px; }
  .music-plot-stack { padding-top: 16px; }
  .music-plot-stack > h3, .music-plot-stack > h2, .music-legend, .music-plot-caption, .music-quick-actions, .music-reference { padding-inline: 14px; }
  .music-quick-actions { gap: 6px; }
  .music-quick-actions button { font-size: 11px; padding-inline: 10px; }
  .music-reference input { max-width: none; }
  .music-reference .unit-input { width: 100%; }
  .music-plot-heading { padding-inline: 14px; }
  .music-harmonics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .music-partials th, .music-partials td { padding-inline: 5px; font-size: 10px; }
}
@media (max-width: 420px) {
  .music-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 12px; }
  .music-presets button:last-child { grid-column: 1 / -1; }
  .music-heading, .music-designer, .music-learning { padding-inline: 14px; }
  .music-heading h2 { font-size: 25px; }
  .music-wave-wrap { height: 240px; }
  .music-metrics > div { padding: 13px; }
  .music-metrics strong, .music-metrics output, .music-metrics dd { font-size: 16px; }
  .music-timbres { gap: 6px; }
  .music-timbres button { font-size: 11px; padding-inline: 10px; }
}
@media (max-height: 520px) and (max-width: 1100px) {
  .music-wave-wrap { height: 220px; }
  .music-spectrum-wrap { height: 160px; }
}

/* Keep the keys, waveform and pitch spectrum together as one instrument. */
.music-is-piano .music-lab-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: 'plot spectrum'; border-bottom: 1px solid var(--line); }
.music-piano-spectrum { grid-area: spectrum; min-width: 0; padding-top: 20px; border-left: 1px solid var(--line); }
.music-piano-spectrum-wrap { height: 220px; }
.music-piano-spectrum-wrap canvas { display: block; width: 100%; height: 100%; }
.music-piano-spectrum .music-timbres { padding: 12px 20px 20px; }
.music-piano-spectrum .music-plot-heading > span { color: var(--accent-text); font: 13px var(--mono); }
.music-is-piano .music-wave-wrap { height: 220px; }
.music-piano-window { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; padding: 10px 20px 20px; }
.music-piano-window label { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.music-piano-window select { width: auto; }
.music-piano-window > span { color: var(--accent-text); font: 11px/1.6 var(--mono); }
.music-piano-window input[type=range] { width: 85px; }
.music-piano-window output { min-width: 32px; color: var(--muted); font: 10px var(--mono); }
.music-is-piano .music-heading { display: none; }
.music-is-piano .music-partials :is(th,td):nth-child(3) { display: none; }
.music-is-piano .music-metrics { grid-template-columns: minmax(0, 1fr); }
.music-is-piano .music-reference { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; border: 0; padding: 14px 24px; }
.music-is-piano .music-reference label { display: flex; align-items: center; gap: 14px; }
.music-is-piano .music-reference .unit-input { width: 130px; margin: 0; }
.music-is-piano .music-reference small { max-width: 420px; }
@media (min-width: 1180px) {
  #musicWorkbench.music-is-piano { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .music-is-piano > * { grid-column: 1 / -1; }
  .music-is-piano > #musicPiano { grid-column: 1; grid-row: 1; border-right: 1px solid var(--line); }
  .music-is-piano > #musicRecorder { grid-column: 2; grid-row: 1; }
  .music-is-piano .piano-dashboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .music-is-piano .piano-octave { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
  .music-is-piano .piano-octave select { flex: 1; width: auto; margin-top: 0; }
}
@media (max-width: 700px) {
  .music-is-piano .music-lab-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'plot' 'spectrum'; }
  .music-piano-spectrum { border-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
  .music-is-piano .music-wave-wrap { height: 190px; }
  .music-piano-spectrum-wrap { height: 180px; }
  .music-piano-spectrum .music-timbres { padding-inline: 14px; }
  .music-piano-window { padding-inline: 14px; }
  .music-is-piano .music-reference { padding: 14px; }
}