.bass-app h1 { font-size: 34px; }
.bass-app h2 { font-size: 22px; }
.bass-lesson { border: 1px solid #888; background: #d6d6d6; padding: 14px; }
.bass-lesson { margin-top: 20px; }
.bass-progressions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.bass-progressions .controls { align-content: start; }
.bass-progressions h2 { flex-basis: 100%; margin: 0; }
.bass-progressions label { min-width: 0; max-width: 100%; }
.bass-progressions select { max-width: 100%; }
#harmony-source { font-weight: bold; }
.bass-lesson h2 { margin: 0 0 8px; }
.bass-app .controls label { min-width: 0; max-width: 100%; }
.bass-app .controls select { max-width: 100%; }
#lesson { width: 300px; }
#tempo { width: 85px; }
.bass-app .controls .bass-exercise-position { flex: 1 1 100%; width: 100%; }
#exercise-position { width: 100%; margin-inline: 0; }
.bass-app .note-marker.playing.harmonized-tone { background: var(--harmony-gradient, var(--harmony-color)); color: var(--harmony-text-color); border-color: #123d60; }
#custom-keys { display: flex; gap: 14px; flex-wrap: wrap; }
#custom-keys label { display: flex; flex-direction: row; align-items: center; }
.bass-now { min-height: 30px; font-size: 20px; font-weight: bold; }
.bass-instrument-row { display: flex; align-items: center; gap: 12px; }
.bass-circle-column { flex: 0 0 clamp(90px, 18vw, 210px); min-width: 0; }
.bass-circle-chord { margin: 0 0 8px; min-height: 2.4em; text-align: center; font-size: 18px; font-weight: bold; overflow-wrap: anywhere; }
.bass-key-circle { margin: 0; width: 100%; }
.bass-key-circle svg { display: block; width: 100%; height: auto; font-family: inherit; }
.bass-key-circle path { fill: #fff; stroke: #222; stroke-width: 1.2px; }
.bass-key-circle path.in-route { fill: #777; }
.bass-key-circle path.current { fill: #171717; }
.bass-key-circle text { text-anchor: middle; dominant-baseline: central; fill: #171717; font-weight: bold; pointer-events: none; }
.bass-key-circle text.in-route, .bass-key-circle text.current { fill: white; }
.bass-key-circle .hub { fill: white; stroke: #222; }
.bass-instrument-stage { flex: 1 1 auto; min-width: 0; }
.bass-scroll { overflow-x: auto; border: 1px solid #888; background: #eee; }
.bass-app .guitar-grid { --board-height: 210px; }
.bass-app .note-marker { pointer-events: none; }
.bass-app .fret-number.current-fret { color: #145783; text-decoration: underline; }
#neck-position { width: 150px; }
#bass-piano { min-width: 850px; --whites: 26; height: 190px; }
#bass-piano .current { background: #236ca5; color: #fff; }
#bass-piano .piano-key.harmonized-tone {
  background: var(--harmony-gradient, var(--harmony-color));
  color: var(--harmony-text-color);
}
#bass-piano .piano-key.current { box-shadow: inset 0 0 0 3px #236ca5; }
#bass-piano .piano-key.harmonized-tone .piano-label { color: var(--harmony-text-color); }
#bass-piano .piano-key.current .piano-label { background: #236ca5; color: #fff; }
#bass-piano .piano-label { font-size: 10px; bottom: 12px; }
.bass-chords { display: flex; flex-wrap: wrap; gap: 8px; }
.bass-chords div { background: #eee; padding: 7px 12px; border: 1px solid #777; }
.bass-chords .current { outline: 2px solid #236ca5; outline-offset: 1px; }
#notes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bass-note-bar { border: 1px solid #aaa; padding: 8px; margin: 8px 0; }
.bass-app details { margin-top: 20px; }
.bass-instrument-row:not(.piano-layout) { --bass-board-height: 210px; align-items: flex-start; }
.bass-instrument-row:not(.piano-layout) .bass-circle-column {
  position: relative; flex: 0 0 var(--bass-board-height); width: var(--bass-board-height); padding-top: 23px;
}
.bass-instrument-row:not(.piano-layout) .bass-circle-chord {
  position: absolute; bottom: calc(100% - 17px); width: 100%; margin: 0;
}
.bass-instrument-row:not(.piano-layout) .guitar-grid { --board-height: var(--bass-board-height); }
@media (max-width: 640px) {
  .bass-app .guitar-grid {
    --board-height: 150px;
    --marker: clamp(7px, calc((100vw - 160px) / var(--visible-frets, 12) * .85), 30px);
  }
  .bass-app .guitar-grid .note-marker { font-size: clamp(5px, calc((100vw - 160px) / var(--visible-frets, 12) * .4), 11px); }
  .bass-app .fret-number { font-size: clamp(6px, calc((100vw - 160px) / var(--visible-frets, 12) * .48), 11px); }
  .bass-circle-chord { font-size: 12px; }
  .bass-instrument-row { gap: 6px; }
  .bass-instrument-row:not(.piano-layout) { --bass-board-height: 150px; flex-direction: column; align-items: stretch; }
  .bass-instrument-row:not(.piano-layout) .bass-circle-column { flex-basis: auto; align-self: center; padding-top: 0; }
  .bass-instrument-row:not(.piano-layout) .bass-circle-chord { position: static; margin-bottom: 8px; }
}
@media (max-width: 600px) {
  .bass-app .controls { padding: 10px; gap: 12px; }
  .bass-app .controls label:not(.check) { flex: 1 1 100%; }
  .bass-app h1 { font-size: 28px; }
}