.bs-fretboard-trainer {
  box-sizing: border-box; width: min(100%, 1200px); max-width: 100%; min-width: 0; padding: clamp(22px, 5vw, 42px);
  border: 1px solid rgba(180,153,91,.32); border-radius: 24px;
  background: radial-gradient(circle at top right, rgba(150,122,61,.15), transparent 38%), #111;
  box-shadow: var(--shadow, 0 28px 70px rgba(0,0,0,.28)); color: var(--text,#f4f4f4); font-family: Inter,sans-serif;
  container-type: inline-size; container-name: fretboard-trainer;
}
.bs-fretboard-trainer *, .bs-fretboard-trainer *::before, .bs-fretboard-trainer *::after { box-sizing: border-box; }
.bs-fretboard-trainer__intro { color: var(--text-light,#b8b8b8); line-height: 1.65; }
.bs-fretboard-trainer__fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.bs-fretboard-trainer__fieldset legend, .bs-fretboard-trainer__note-select > span { margin-bottom: 12px; color: #d2b36a; font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.bs-fretboard-trainer__mode, .bs-fretboard-trainer__filters, .bs-fretboard-trainer__study-settings, .bs-fretboard-trainer__test-settings, .bs-fretboard-trainer__phrase-settings { margin-top: 24px; }
.bs-fretboard-trainer__instrument { margin-top: 22px; }
.bs-fretboard-trainer__filters { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(220px,1fr); gap: 24px; padding-top: 24px; border-top: 1px solid var(--border,rgba(255,255,255,.08)); }
.bs-fretboard-trainer__choices { display: flex; flex-wrap: wrap; gap: 9px; }
.bs-fretboard-trainer__choices label { position: relative; cursor: pointer; }
.bs-fretboard-trainer__choices input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bs-fretboard-trainer__choices span { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 14px; border: 1px solid rgba(185,155,86,.4); border-radius: 10px; background: rgba(185,155,86,.09); color: #eee; font-size: .88rem; font-weight: 600; }
.bs-fretboard-trainer__choices input:checked + span { border-color: #d2b36a; background: rgba(185,155,86,.28); color: #fff; }
.bs-fretboard-trainer__choices input:focus-visible + span, .bs-fretboard-trainer button:focus-visible, .bs-fretboard-trainer select:focus-visible, .bs-fretboard-trainer__viewport:focus-visible { outline: 2px solid #d2b36a; outline-offset: 3px; }
.bs-fretboard-trainer__note-select { display: grid; min-width: 0; max-width: 360px; }
.bs-fretboard-trainer select { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 46px; padding: 0 12px; border: 1px solid rgba(185,155,86,.35); border-radius: 10px; background: #1b1a17; color: white; font: inherit; text-overflow: ellipsis; }
.bs-fretboard-trainer__exercise { margin-top: 28px; padding: clamp(16px,3vw,26px); border: 1px solid rgba(185,155,86,.25); border-radius: 18px; background: rgba(255,255,255,.035); }
.bs-fretboard-trainer__question { color: white; font-size: 1.08rem; font-weight: 600; line-height: 1.5; }
.bs-fretboard-trainer__details, .bs-fretboard-trainer__result { min-height: 1.45em; margin-top: 9px; color: #d8d2c8; font-size: .9rem; line-height: 1.5; }
.bs-fretboard-trainer__audio-status { min-height: 1.35em; margin-top: 7px; color: #d2b36a; font-size: .82rem; }
.bs-fretboard-trainer__result { color: white; font-weight: 600; }
.bs-fretboard-trainer__result[data-outcome="correct"] { color: #b6ddb7; }
.bs-fretboard-trainer__result[data-outcome="incorrect"] { color: #f0b9a9; }
.bs-fretboard-trainer__answers { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin-top: 18px; }
.bs-fretboard-trainer button { min-height: 42px; padding: 8px 13px; border: 1px solid rgba(185,155,86,.5); border-radius: 10px; background: rgba(185,155,86,.15); color: white; font: 600 .88rem Inter,sans-serif; cursor: pointer; touch-action: manipulation; }
.bs-fretboard-trainer button:hover { border-color: #d2b36a; background: rgba(185,155,86,.26); }
.bs-fretboard-trainer__answers button { width: 100%; }
.bs-fretboard-trainer__viewport { width: 100%; max-width: 100%; overflow-x: auto; margin-top: 18px; padding: 10px; border: 1px solid rgba(185,155,86,.2); border-radius: 14px; background: #171612; overscroll-behavior-inline: contain; scrollbar-color: #8c7a4f #24221d; }
.bs-fretboard-trainer .bs-guitar-fretboard { display: block; width: 100%; min-width: 850px; height: auto; }
.bs-fretboard-trainer__viewport .bs-guitar-fretboard__note--root .bs-guitar-fretboard__note-circle { fill: var(--accent,#8c7a4f); stroke: #ead69f; stroke-width: 2.5; }
.bs-fretboard-trainer__viewport .bs-guitar-fretboard__note:not(.bs-guitar-fretboard__note--root) .bs-guitar-fretboard__note-circle { fill: #4f4b43; stroke: #827d72; }
.bs-fretboard-trainer__viewport .bs-guitar-fretboard__note--answered-correct .bs-guitar-fretboard__note-circle { fill: #427447; stroke: #b6ddb7; stroke-width: 3; }
.bs-fretboard-trainer__viewport .bs-guitar-fretboard__note--answered-incorrect .bs-guitar-fretboard__note-circle { fill: #884737; stroke: #f0b9a9; stroke-width: 3; }
.bs-fretboard-trainer__viewport .bs-guitar-fretboard__note--selected .bs-guitar-fretboard__note-circle { fill: #d2b36a; stroke: #fff2c6; stroke-width: 3; }
.bs-fretboard-trainer__viewport[data-fret-range="0-24"] .bs-guitar-fretboard { min-width: 1600px; }
.bs-fretboard-trainer__viewport[data-instrument="keyboard"] { padding: 16px; }
.bs-piano-keyboard { position: relative; display: flex; width: max(100%, 1040px); height: 220px; }
.bs-fretboard-trainer .bs-piano-key { position: absolute; top: 0; border-radius: 0 0 7px 7px; padding: 0; touch-action: manipulation; }
.bs-fretboard-trainer .bs-piano-key--white { z-index: 1; display: flex; width: calc(100% / var(--white-key-count)); height: 100%; border: 1px solid #7d7b75; border-top: 0; border-radius: 0 0 6px 6px; background: linear-gradient(90deg,#fff 0%,#f5f3ee 82%,#d8d6d0 100%); color: #272522; align-items: end; justify-content: center; padding: 0 1px 9px; font-size: .68rem; }
.bs-fretboard-trainer .bs-piano-key--black { z-index: 2; width: calc(100% / var(--white-key-count) * .62); height: 62%; transform: translateX(-50%); border: 1px solid #050505; background: linear-gradient(90deg,#151515,#353535 55%,#080808); box-shadow: 0 5px 7px rgba(0,0,0,.6); color: #fff; }
.bs-fretboard-trainer .bs-piano-key--target { box-shadow: inset 0 -6px 0 #8c7a4f; }
.bs-fretboard-trainer .bs-piano-key--selected { background: linear-gradient(90deg,#dfc77e,#c1a456 82%,#987e39); border-color: #fff0bb; }
.bs-fretboard-trainer .bs-piano-key--black.bs-piano-key--selected { background: linear-gradient(90deg,#735e26,#a3873a 55%,#4e3e17); }
.bs-fretboard-trainer .bs-piano-key:focus-visible { z-index: 3; outline: 3px solid #d2b36a; outline-offset: 2px; }
.bs-fretboard-trainer__answers button[aria-pressed="true"] { border-color: #d2b36a; background: rgba(185,155,86,.36); }
.bs-fretboard-trainer__controls { display: flex; justify-content: flex-end; margin-top: 12px; }
.bs-fretboard-trainer__session { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.bs-fretboard-trainer__session > div { display: flex; flex-wrap: wrap; gap: 10px 22px; color: #d8d2c8; font-size: .86rem; }
.bs-fretboard-trainer__session strong { color: white; }
.bs-fretboard-trainer__blues { width: 100%; max-width: 100%; min-width: 0; margin-top: 24px; padding: clamp(16px,3vw,24px); border: 1px solid rgba(185,155,86,.28); border-radius: 16px; background: rgba(185,155,86,.055); }
.bs-fretboard-trainer__blues-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; align-items: start; }
.bs-fretboard-trainer__blues-grid > *, .bs-fretboard-trainer__blues-row > * { min-width: 0; max-width: 100%; }
.bs-fretboard-trainer__blues-grid .bs-fretboard-trainer__note-select { width: 100%; min-width: 0; max-width: none; gap: 8px; }
.bs-fretboard-trainer__blues-grid .bs-fretboard-trainer__note-select > span { display: block; margin-bottom: 0; }
.bs-fretboard-trainer__blues-grid select, .bs-fretboard-trainer__blues-grid input { width: 100%; max-width: 100%; min-width: 0; }
.bs-fretboard-trainer__blues-static { display: flex; min-height: 46px; align-items: center; padding: 0 12px; border: 1px solid rgba(185,155,86,.35); border-radius: 10px; background: #1b1a17; color: white; }
.bs-fretboard-trainer__blues-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; margin-top: 16px; align-items: start; }
.bs-fretboard-trainer__blues-row .bs-fretboard-trainer__note-select { width: 100%; max-width: none; gap: 8px; }
.bs-fretboard-trainer__blues-row .bs-fretboard-trainer__note-select > span { display: block; margin-bottom: 0; }
.bs-fretboard-trainer__bpm input { display: block; width: 100%; max-width: 100%; min-width: 0; margin: 11px 0 8px; accent-color: #d2b36a; }
.bs-fretboard-trainer__blues-context { margin: 16px 0 10px; color: #d8d2c8; font-size: .9rem; line-height: 1.5; }
.bs-fretboard-trainer__blues-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 14px; }
.bs-fretboard-trainer__blues-actions button:disabled { opacity: .48; cursor: not-allowed; }
.bs-fretboard-trainer__blues-status { max-width: 100%; min-height: 1.35em; margin: 10px 0 0; color: #d2b36a; font-size: .82rem; overflow-wrap: anywhere; }
.bs-fretboard-trainer__viewport .bs-guitar-fretboard__note--playing .bs-guitar-fretboard__note-circle { fill: #e4c46f; stroke: #fff2c6; stroke-width: 4; filter: drop-shadow(0 0 7px rgba(228,196,111,.9)); }
.bs-fretboard-trainer__viewport .bs-guitar-fretboard__note--root .bs-guitar-fretboard__note-circle { fill: #6d6041; stroke: #d2b36a; stroke-width: 2.5; }
.bs-fretboard-trainer [hidden] { display: none !important; }
@container fretboard-trainer (max-width: 840px) { .bs-fretboard-trainer__blues-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@container fretboard-trainer (max-width: 640px) { .bs-fretboard-trainer__filters, .bs-fretboard-trainer__blues-row { grid-template-columns: minmax(0,1fr); } }
@container fretboard-trainer (max-width: 480px) { .bs-fretboard-trainer__blues-grid { grid-template-columns: minmax(0,1fr); } .bs-fretboard-trainer__answers { grid-template-columns: repeat(3,minmax(0,1fr)); } }