.triads-toolbar { grid-template-columns: repeat(3, minmax(130px, 1fr)) minmax(150px, 1fr); }
.triads-tuning { color: var(--mbp-text); font-weight: 650; padding-bottom: .3rem; }
.triads-tuning span { color: var(--mbp-text-muted); font-size: .78rem; font-weight: 400; }
.triads-lesson { padding: 1.25rem; color: var(--mbp-text); }
.triads-rainbow-lesson { border-left: 3px solid var(--mbp-accent); padding-left: 1rem; margin: 1rem 0; }
.triads-rainbow-lesson p { margin-bottom: .6rem; }
.triads-rainbow-lesson summary { cursor: pointer; padding-bottom: .6rem; font-weight: 650; }
.triads-lesson h3 { font-size: 1.3rem; margin: 0 0 .4rem; }
.triads-transport { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 1rem 0; }
.triads-transport label { display: flex; align-items: center; gap: .5rem; margin: 0; }
.triads-transport .form-select { width: auto; min-height: 44px; background-color: var(--mbp-surface-raised); color: var(--mbp-text); border-color: var(--mbp-border-strong); }
.triads-transport input[type=number] { width: 5rem; background: var(--mbp-surface-raised); color: var(--mbp-text); border-color: var(--mbp-border-strong); }
.triads-exercise-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.triads-exercise-bar { min-width: 0; padding: .9rem .65rem; border-top: 3px solid var(--mbp-brand); background: var(--mbp-surface-raised); }
.triads-exercise-bar:nth-child(2n) { border-color: var(--mbp-accent); }
.triads-exercise-bar h4 { font-size: 1.35rem; margin-bottom: .6rem; }
.triads-tab-grid { display: grid; grid-template-columns: 1.2rem repeat(8, minmax(0, 1fr)); font-family: ui-monospace, monospace; text-align: center; align-items: center; gap: .3rem 0; }
.triads-tab-cell { border-bottom: 1px solid var(--mbp-border-strong); }
.triads-tab-cell.is-note { font-weight: 750; color: var(--mbp-brand); }
.triads-tab-cell.is-chord-tone, .triads-tone-key .is-chord-tone { text-decoration: underline; text-underline-offset: 3px; }
.triads-tab-cell.is-passing-tone, .triads-tone-key .is-passing-tone { color: var(--mbp-text); text-decoration: underline dotted; text-underline-offset: 3px; }
.triads-beat { font-size: .75rem; padding: .3rem 0; color: var(--mbp-text-muted); border-radius: .25rem; }
.triads-beat.is-playing { background: var(--mbp-brand); color: var(--mbp-on-brand, #fff); }
.triads-exercise-bar p { margin: .8rem 0 0; }
.triads-voicings { border-top: 1px solid var(--mbp-border); padding-top: 1rem; }
.triads-voicings summary { cursor: pointer; font-weight: 650; padding-bottom: 1rem; }
.triads-exercise-positions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.triads-exercise-position h4 { font-size: 1rem; margin-bottom: .35rem; }
.triads-exercise-position svg { width: 100%; max-width: 200px; height: 185px; display: block; margin: auto; }
.triads-exercise-position { text-align: center; }
.triads-lesson-notes { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--mbp-border); max-width: 75ch; }
.triads-resources { border-top: 1px solid var(--mbp-border); padding-top: 1.25rem; margin-top: 1.25rem; }
.triads-resource-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: 1rem 0; }
.triads-resource-list article { border-left: 3px solid var(--mbp-accent); padding-left: 1rem; }
.triads-resource-list h4 { font-size: 1rem; margin: .3rem 0; }
.triads-resource-list p { font-size: .9rem; margin-bottom: 0; color: var(--mbp-text-muted); }
@media (max-width: 767px) { .triads-resource-list { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .triads-exercise-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .triads-lesson { padding: .85rem; } .triads-exercise-tabs { grid-template-columns: 1fr; gap: .75rem; } .triads-exercise-positions { grid-template-columns: repeat(2, minmax(0, 1fr)); } #triadsExercises .triads-practice-heading > div { width: 100%; } .triads-exercise-position svg { height: 160px; } }
.triads-build { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.5rem; align-items: center; padding: 1.1rem 1.25rem; }
.triads-build h2 { font-size: 1.3rem; margin: 0 0 .4rem; color: var(--mbp-text); }
.triads-build p { margin: 0; color: var(--mbp-text-muted); font-size: .85rem; }
.triads-tones { display: grid; grid-template-columns: repeat(3, 1fr); }
.triads-tone { display: flex; flex-direction: column; border-left: 3px solid var(--mbp-brand); padding-left: .8rem; gap: .15rem; }
.triads-tone-1 { border-color: var(--mbp-accent); }
.triads-tone-2 { border-color: var(--mbp-text-muted); }
.triads-tone strong { font-size: 1.65rem; color: var(--mbp-text); }
.triads-tone span { font-size: .78rem; color: var(--mbp-text-muted); }
.triads-section { margin-top: 1.5rem; }
.triads-section-heading { margin-bottom: 1rem; }
.triads-section h2 { font-size: 1.25rem; color: var(--mbp-text); margin-bottom: .35rem; }
.triads-section-heading p, .triads-caption { color: var(--mbp-text-muted); font-size: .85rem; margin-bottom: .5rem; }
.triads-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.triads-card { padding: 1rem; background: var(--mbp-surface); border: 1px solid var(--mbp-border); border-radius: var(--mbp-radius-lg); min-width: 0; }
.triads-inversion { color: var(--mbp-brand); font-size: .9rem; margin: 0 0 .75rem; }
.triads-chord-name { color: var(--mbp-text); font-size: 1.6rem; margin: 0; }
.triads-bass { margin: .15rem 0 0; color: var(--mbp-text-muted); font-size: .85rem; }
.triads-position svg { display: block; width: 100%; max-width: 250px; height: 225px; margin: 0 auto; }
.triads-wire { stroke: var(--mbp-border-strong); stroke-width: 1.5; }
.triads-nut { stroke: var(--mbp-text); stroke-width: 4; }
.triads-svg-label { fill: var(--mbp-text-muted); font: 12px system-ui, sans-serif; }
.triads-dot { fill: var(--mbp-surface); stroke: var(--mbp-brand); stroke-width: 2; }
.triads-degree-1 { stroke: var(--mbp-accent); }
.triads-degree-2 { stroke: var(--mbp-text-muted); }
.triads-dot-label { fill: var(--mbp-text); font: 11px system-ui, sans-serif; font-weight: 750; }
.triads-tab { text-align: center; color: var(--mbp-text); font: 600 clamp(.7rem, 1.1vw, .95rem) ui-monospace, monospace; white-space: nowrap; }
.triads-order { margin: .5rem 0; text-align: center; font-size: .8rem; color: var(--mbp-text-muted); }
.triads-position-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .6rem 0; }
.triads-counter { font-size: .8rem; color: var(--mbp-text-muted); }
.triads-audio-actions { display: flex; gap: .5rem; }
.triads-audio-actions button { flex: 1; }
.triadas-page .btn { min-height: 44px; white-space: normal; }
.triadas-page .btn-outline-secondary { color: var(--mbp-text); border-color: var(--mbp-border-strong); background: var(--mbp-surface); }
.triadas-page .btn-outline-secondary:hover { background: var(--mbp-accent-soft); }
.triadas-page .btn:focus-visible, .triadas-page select:focus-visible { outline: 3px solid var(--mbp-accent); outline-offset: 3px; }
.triads-caption { margin-top: .75rem; line-height: 1.6; }
.triads-section.cq-library { padding: 1.25rem; }
.triads-table { color: var(--mbp-text); margin: 0; }
.triads-table th, .triads-table td { vertical-align: middle; padding: .75rem; border-color: var(--mbp-border); background: transparent; color: var(--mbp-text); }
.triads-seventh-note { color: var(--mbp-brand); border-bottom: 2px solid var(--mbp-accent); }
.triads-study { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; border-top: 1px solid var(--mbp-border); padding-top: 1.25rem; }
.triads-study ol { padding-left: 1.25rem; color: var(--mbp-text-muted); font-size: .9rem; line-height: 1.7; }
.triads-related { display: flex; flex-direction: column; gap: .75rem; }
#triadsAudioStatus { color: var(--mbp-danger); }
.triads-chord-trigger { min-height: 44px; font-weight: 650; }
#triadsChordModal .modal-content { background: var(--mbp-surface); color: var(--mbp-text); border-color: var(--mbp-border); }
#triadsChordModal .form-select { background-color: var(--mbp-surface-raised); color: var(--mbp-text); border-color: var(--mbp-border-strong); }
#triadsChordModal .modal-header, #triadsChordModal .modal-footer { border-color: var(--mbp-border); }
.triads-full-chord, #triadsChordTriad { text-align: center; }
.triads-full-chord svg { max-width: 100%; height: 210px; margin: .5rem auto; }
.triads-full-chord svg > text:first-of-type { fill: var(--mbp-text); }
.triads-full-chord svg > text[fill="#718096"] { fill: var(--mbp-text-muted); }
#triadsChordTriad svg { max-width: 100%; height: 140px; }
.triads-modes { display: flex; gap: .5rem; margin-bottom: 1rem; }
.triadas-page .triads-modes [aria-pressed="true"] { background: var(--mbp-text); color: var(--mbp-surface); border-color: var(--mbp-text); }
.triads-practice-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--mbp-border); }
.triads-practice-heading h2 { color: var(--mbp-text); font-size: 1.25rem; margin: 0 0 .4rem; }
.triads-practice-heading p { color: var(--mbp-text-muted); margin: 0; font-size: .85rem; }
.triads-practice-layout { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr); gap: 2rem; padding: 1.25rem; }
.triads-question { text-align: center; }
.triads-question .triads-position svg { height: 274px; }
.triads-answer-fields { display: grid; gap: 1rem; }
.triads-practice-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.triads-correction:not(:empty) { border-left: 3px solid var(--mbp-accent); padding: .75rem 1rem; margin-top: 1.25rem; }
.triads-correction.is-correct { border-color: var(--mbp-success); }
.triads-correction p { margin: .4rem 0; }
.triads-correction ul { padding-left: 1.25rem; margin-bottom: .5rem; }
.triads-solution { font-size: 1.15rem; font-weight: 650; }
.triadas-page .triads-practice-heading .form-select, .triadas-page .triads-answer-fields .form-select { background-color: var(--mbp-surface-raised); color: var(--mbp-text); border-color: var(--mbp-border-strong); min-height: 44px; }
@media (max-width: 767px) { .triads-practice-layout { grid-template-columns: 1fr; gap: 1rem; } .triads-question .triads-position svg { height: 225px; } .triads-practice-heading { padding: 1rem; } .triads-practice-heading h2 { font-size: 1.1rem; } }
@media (max-width: 1100px) { .triads-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .triads-tuning { grid-column: 1 / -1; } .triads-build { grid-template-columns: 1fr; gap: 1rem; } }
@media (max-width: 767px) { .triads-toolbar { grid-template-columns: 1fr 1fr; padding: .85rem; } .triads-tuning { grid-column: auto; font-size: .85rem; align-self: center; } .triads-build { padding: .85rem; } .triads-cards, .triads-study { grid-template-columns: 1fr; } .triads-tones { gap: .5rem; } .triads-tone { padding-left: .5rem; } .triads-position svg { height: 242px; } .triads-tab { font-size: .95rem; } .triads-table { min-width: 540px; } }