:root {
  --triad-neck-gold: #d4b878;
  --triad-neck-gold-bright: #f1d995;
  --triad-neck-copper: #9f7437;
  --triad-neck-panel: #0b0d0c;
  --triad-neck-panel-raised: #111412;
  --triad-neck-line: rgba(212, 184, 120, .34);
  --triad-neck-blue: #75a9bf;
  --triad-neck-red: #c87568;
  --triad-neck-green: #86aa72;
}

.theory-lesson-page { overflow-x: clip; }

/* The shared lesson stylesheet leaves a full closing section gutter here.
   This page finishes with its navigation, so keep the footer directly below it. */
.theory-lesson-page .lesson-content-wrap > .lesson-section--final {
  padding-bottom: 0 !important;
}

.theory-lesson-page .lesson-content-wrap > .lesson-section--final .theory-foundations-actions {
  margin-bottom: 0;
}

/* Keep prose at a readable measure, but remove the inherited narrow content
   grid for the diagrams and chart groups used throughout this lesson. */
.theory-lesson-page .lesson-content-wrap {
  --section-pad-x: clamp(1rem, 2.8vw, 3rem);
}

.theory-lesson-page .lesson-content-wrap .lesson-section,
.theory-lesson-page .lesson-content-wrap .lesson-section + .lesson-section {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: clamp(1rem, 2.8vw, 3rem) !important;
  padding-left: clamp(1rem, 2.8vw, 3rem) !important;
}

.theory-lesson-page .lesson-content-wrap .lesson-section > :is(
  .triad-formula-grid,
  .comparison-grid,
  .triad-chart-grid,
  .practice-grid,
  .tab-block,
  .fretboard-map,
  .inversion-strip
) {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Keep the longer opening explanation broken into clearly separated paragraphs. */
#triad-foundations > p + p {
  margin-top: clamp(1.25rem, 2.2vw, 1.75rem);
}

.theory-lesson-page #three-string-sets > ul {
  width: min(800px, 100%);
  max-width: 800px;
  margin: .55rem auto 1rem;
  padding-left: 1.4rem;
  list-style-position: outside;
  text-align: left;
}

.theory-lesson-page #three-string-sets > ul li {
  text-align: left;
}

.theory-lesson-page #three-string-sets > .string-set-example-intro {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.inversion-explanation {
  width: min(1120px, 100%);
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
}

.inversion-explanation__intro {
  max-width: 850px;
}

.inversion-explanation__intro p {
  margin: 0;
}

.inversion-explanation__intro p + p {
  margin-top: .9rem;
}

.theory-lesson-page .inversion-explanation__intro ul {
  width: auto;
  max-width: none;
  margin: .55rem 0 1rem;
  padding-left: 1.4rem;
  list-style-position: outside;
  text-align: left;
}

.theory-lesson-page .inversion-explanation__intro li {
  margin: .18rem 0;
  text-align: left;
}

.inversion-explanation__positions {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 4vw, 3rem);
  gap: 0;
}

.inversion-explanation__positions section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  min-width: 0;
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  border-top: 1px solid var(--triad-neck-line);
}

.inversion-explanation__positions section:last-child {
  border-bottom: 1px solid var(--triad-neck-line);
}

.inversion-explanation__positions .triad-chart {
  width: min(340px, 100%);
  margin: 0 auto;
  padding-bottom: 0;
}

.theory-lesson-page .inversion-explanation__positions h3 {
  width: auto;
  margin: 0 0 .9rem;
  text-align: left;
}

.inversion-explanation__positions p {
  margin: .38rem 0;
}

.theory-lesson-page .inversion-explanation__formula {
  margin: .15rem 0 .65rem;
  color: var(--triad-neck-gold-bright);
  font-size: clamp(1.08rem, 1.8vw, 1.3rem);
  letter-spacing: .025em;
}

.theory-lesson-page .inversion-explanation__closing {
  max-width: 900px;
  margin: clamp(1.8rem, 3vw, 2.5rem) 0 0;
}

@media (max-width: 700px) {
  .inversion-explanation__positions section {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .inversion-explanation__positions .triad-chart {
    width: min(300px, 100%);
    margin: 0;
  }
}

.triad-formula-grid,
.comparison-grid,
.triad-chart-grid,
.practice-grid {
  display: grid;
  width: 100%;
  max-width: none;
  margin: clamp(1.8rem, 4vw, 3rem) auto;
  gap: 1rem;
}

.triad-formula-grid,
.comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.triad-chart-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.practice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.formula-card,
.comparison-card,
.triad-chart-card,
.string-set-card,
.recognition-card {
  min-width: 0;
  border: 1px solid var(--triad-neck-line);
  background: #0b0d0c;
  box-shadow: 0 20px 42px rgba(0, 0, 0, .3);
}

.formula-card,
.comparison-card,
.string-set-card,
.recognition-card { padding: clamp(1.2rem, 3vw, 2rem); }

.formula-card h3,
.comparison-card h3,
.triad-chart-card h3,
.string-set-card h3,
.recognition-card h3,
.lesson-section .visual-heading {
  width: 100%;
  margin: 0 0 1rem;
  color: var(--triad-neck-gold-bright);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.2;
  text-align: center !important;
}

.formula-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--triad-neck-line);
  background: var(--triad-neck-line);
  gap: 1px;
}

.formula-stack span {
  display: grid;
  min-height: 105px;
  place-content: center;
  gap: .35rem;
  padding: .8rem .4rem;
  color: #fff;
  background: #0a0c0b;
  text-align: center;
}

.formula-stack b { color: var(--triad-neck-gold-bright); font-size: clamp(1.45rem, 4vw, 2.35rem); }
.formula-stack small { color: #b8bbb7; font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; }
.formula-card--minor .formula-stack span:nth-child(2) { background: rgba(159, 66, 54, .24); }
.formula-change { margin: 1rem 0 0 !important; color: #cfd1cd !important; font-size: .9rem !important; text-align: center !important; }
.formula-change strong { color: #efaa9d; }

.full-vs-triad {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: min(950px, 100%);
  margin: 2rem auto;
  align-items: stretch;
  gap: 1rem;
}

.full-vs-triad__panel {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--triad-neck-line);
  background: var(--triad-neck-panel);
}

.full-vs-triad__panel h3 { margin: 0 0 1rem; color: var(--triad-neck-gold-bright); text-align: center; }
.full-vs-triad__notes { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.full-vs-triad__notes span { display: grid; min-width: 48px; height: 48px; place-items: center; border: 1px solid var(--triad-neck-line); border-radius: 50%; color: #171109; background: var(--triad-neck-gold); font-weight: 800; }
.full-vs-triad__panel p { margin: 1rem auto 0; font-size: .9rem; text-align: center; }
.full-vs-triad__divider { align-self: center; color: #80704c; font-size: 1.8rem; }

.string-set-overview {
  display: grid;
  width: min(920px, 100%);
  margin: 2rem auto;
  gap: 1px;
  padding: 1px;
  background: var(--triad-neck-line);
}

.string-set-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: start;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: #090b0a;
}

.string-set-row strong { color: var(--triad-neck-gold-bright); }
.string-set-row > strong { padding-top: .35rem; }
.string-lines { display: grid; gap: 4px; }
.string-lines span {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: .65rem;
  min-height: 22px;
  color: #777d78;
  font-size: .68rem;
  font-style: normal;
  letter-spacing: .06em;
}
.string-lines span::after { content: ""; display: block; height: 2px; background: #555b57; }
.string-lines span.is-active { color: var(--triad-neck-gold-bright); font-weight: 800; }
.string-lines span.is-active::after { height: 4px; background: var(--triad-neck-gold); box-shadow: 0 0 10px rgba(212, 184, 120, .35); }

.triad-chart-card { overflow: hidden; }
.triad-chart-card > header { padding: 1.1rem 1rem 0; text-align: center; }
.triad-chart-card > header h3 { margin-bottom: .35rem; }
.triad-chart-card > header p { margin: 0 auto; color: #bfc2be; font-size: .86rem; text-align: center; }
.triad-chart-card > header .triad-chart-card__position {
  width: min(360px, calc(100% - 2rem));
  margin-top: .75rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(212,184,120,.6);
  color: #d8bd7c;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.chord-reduction-comparison {
  width: min(1100px, 100%) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  align-items: stretch;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--triad-neck-line);
  border-bottom: 1px solid var(--triad-neck-line);
  gap: 0;
}
.chord-reduction-comparison .chord-reduction-comparison__item {
  display: flex;
  flex-direction: column;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.chord-reduction-comparison .chord-reduction-comparison__item + .chord-reduction-comparison__item {
  border-left: 1px solid rgba(212, 184, 120, .24);
}
.chord-reduction-comparison .triad-chart-card > header {
  width: min(440px, 100%);
  margin: 0 auto;
  padding: 0;
  text-align: left;
}
.chord-reduction-comparison .triad-chart-card > header h3 {
  margin-bottom: .55rem;
  text-align: left !important;
}
.chord-reduction-comparison .triad-chart-card > header .triad-chart-card__position {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  color: #aaaDA8;
  text-align: left;
}
.chord-reduction-comparison .triad-chart {
  width: min(380px, 100%);
  margin: auto auto 0;
  padding-bottom: 0;
}
.chord-reduction-comparison .triad-chart__fingering {
  margin-top: -.55rem !important;
  gap: .12rem;
}
.chord-reduction-comparison .triad-chart__fingering span {
  margin-right: .5rem;
}
.chord-reduction-comparison .triad-chart__fingering b {
  min-width: 18px;
  height: auto;
  border: 0;
  color: #d8dad6;
  background: transparent;
}

.string-set-shape-grid {
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  border-top: 1px solid var(--triad-neck-line);
  border-bottom: 1px solid var(--triad-neck-line);
  gap: 0;
}

.string-set-shape-grid .string-set-shape-grid__item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.string-set-shape-grid .string-set-shape-grid__item + .string-set-shape-grid__item {
  border-left: 1px solid rgba(212, 184, 120, .24);
}

.string-set-shape-grid .triad-chart-card > header {
  width: min(260px, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: 0;
  text-align: left;
}

.string-set-shape-grid .triad-chart-card > header h3,
.string-set-shape-grid .triad-chart-card > header p {
  text-align: left !important;
}

.string-set-shape-grid .triad-chart-card > header h3 {
  margin-bottom: .45rem;
}

.string-set-shape-grid .triad-chart {
  margin-top: auto;
  padding-bottom: 0;
}
.triad-chart__matrix {
  width: min(430px, 100%);
  margin: -.35rem auto 0;
  border-top: 1px solid rgba(212,184,120,.24);
  border-left: 1px solid rgba(212,184,120,.24);
}
.triad-chart__matrix-row {
  display: grid;
  grid-template-columns: minmax(62px, 1.35fr) repeat(6, minmax(28px, 1fr));
}
.triad-chart__matrix-row > * {
  display: grid;
  min-height: 30px;
  place-items: center;
  border-right: 1px solid rgba(212,184,120,.24);
  border-bottom: 1px solid rgba(212,184,120,.24);
}
.triad-chart__matrix-row strong {
  justify-content: start;
  padding-left: .55rem;
  color: #969994;
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.triad-chart__matrix-row span {
  color: #eee6d4;
  font-size: .75rem;
  font-weight: 800;
}
.triad-chart__matrix-row:last-child span { color: var(--triad-neck-gold-bright); }
.chord-tone-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
  margin: 1rem auto;
}
.chord-tone-strip span {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  color: #111;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(0,0,0,.3);
}
.chord-tone-strip span small {
  position: absolute;
  right: -3px;
  bottom: -5px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  color: #111;
  background: #f2ead7;
  font-size: .58rem;
}
.chord-tone-strip .is-root { background: #e0aa3e; }
.chord-tone-strip .is-third { background: #4bc187; }
.chord-tone-strip .is-fifth { background: #4fcfe0; }
.chord-tone-strip .is-repeat::after {
  content: "repeat";
  position: absolute;
  top: -14px;
  color: #c9cbc7;
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.triad-chart { padding: .5rem .7rem 1rem; }
.triad-chart svg { display: block; width: min(300px, 100%); height: auto; margin: auto; overflow: visible; }
.chord-chart__fret { stroke: #806d49; stroke-width: 1.5; }
.chord-chart__nut { stroke: #e0cb98; stroke-width: 8; }
.chord-chart__string { stroke: #d0d1cd; stroke-width: 1.6; }
.chord-chart__dot { fill: var(--triad-neck-gold); stroke: #f7e4b6; stroke-width: 1.5; }
.chord-chart__dot--root { fill: #e0aa3e; }
.chord-chart__dot--third { fill: #4bc187; }
.chord-chart__dot--fifth { fill: #4fcfe0; }
.chord-chart__open { fill: none; stroke: var(--triad-neck-gold-bright); stroke-width: 2.5; }
.chord-chart__function,
.chord-chart__open-function { fill: #171109; font: 800 14px system-ui, sans-serif; text-anchor: middle; }
.chord-chart__open-function { fill: var(--triad-neck-gold-bright); font-size: 9px; }
.chord-chart__marker { fill: #aaa; font: 400 24px system-ui, sans-serif; text-anchor: middle; }
.chord-chart__base-label { fill: #9da09c; font: 600 10px system-ui, sans-serif; text-transform: uppercase; }
.chord-chart__note { fill: #f0d897; font: 700 12px system-ui, sans-serif; text-anchor: middle; }
.chord-chart__string-label { fill: #8e918d; font: 600 10px system-ui, sans-serif; text-anchor: middle; }
.chord-chart__repeat-label { fill: #a6aaa5; font: 700 7px system-ui, sans-serif; letter-spacing: .06em; text-anchor: middle; text-transform: uppercase; }
.triad-chart__fingering { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: -.2rem auto 0 !important; font-size: .78rem !important; }
.triad-chart__fingering span { margin-right: .35rem; color: #929590; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.triad-chart__fingering b { display: inline-grid; min-width: 23px; height: 23px; place-items: center; border: 1px solid rgba(212, 184, 120, .24); color: #f4d992; background: #080908; }

.tab-block {
  width: 100%;
  max-width: none;
  margin: 1.5rem auto 2rem;
  overflow-x: auto;
  border: 1px solid var(--triad-neck-line);
  background: #070908;
}

.tab-block figcaption { padding: .9rem 1.1rem; border-bottom: 1px solid rgba(212, 184, 120, .24); color: var(--triad-neck-gold-bright); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tab-block pre { min-width: 620px; margin: 0; padding: 1.3rem; color: #e8e7e1; font: 600 clamp(.78rem, 1.7vw, 1rem)/1.55 "Courier New", monospace; }
.tab-block .tab-caption { display: block; padding: 0 1.1rem 1rem; color: #aeb0ac; font-size: .78rem; }

.triad-progression-table-wrap {
  width: min(820px, 100%);
  overflow-x: auto;
  margin: 1.35rem auto;
  border-top: 1px solid rgba(212, 184, 120, .45);
  border-bottom: 1px solid rgba(212, 184, 120, .3);
}

.triad-progression-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  color: #e8e7e1;
  font-size: .95rem;
}

.triad-progression-table th,
.triad-progression-table td {
  padding: .85rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(212, 184, 120, .16);
}

.triad-progression-table th {
  color: var(--triad-neck-gold-bright);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.triad-progression-table caption {
  padding: .55rem .7rem;
  color: var(--triad-neck-gold-bright);
  font-family: "Cal Sans", sans-serif;
  font-size: .95rem;
  font-weight: 700;
  text-align: left;
  caption-side: top;
}

.triad-progression-table tbody tr:last-child td { border-bottom: 0; }
.triad-progression-table td:first-child { color: var(--triad-neck-gold-bright); font-weight: 700; }
.triad-progression-table td:last-child { font-family: "Courier New", monospace; font-weight: 700; }

.tab-chord-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: .4rem;
  align-items: end;
  min-height: 31px;
}

.tab-chord-track { position: relative; height: 28px; }

.tab-chord-label {
  position: absolute;
  bottom: .25rem;
  transform: translateX(-50%);
  color: var(--triad-neck-gold-bright);
  font-family: "Cal Sans", sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Keep the shared tab player visually part of this text-led lesson. */
#using-triads-in-chord-progressions .tab-tool {
  width: min(820px, 100%);
  margin: 1.5rem auto 1.75rem;
}

#using-triads-in-chord-progressions .tab-tool__card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#using-triads-in-chord-progressions .tab-tool__card > h3 {
  margin: 0 0 .7rem;
  color: var(--triad-neck-gold-bright);
  font-family: "Cal Sans", sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  text-align: left;
}

#using-triads-in-chord-progressions .tab-tool__controls {
  margin: 0;
  padding: .65rem 0;
  border-top: 1px solid rgba(212, 184, 120, .45);
  border-bottom: 1px solid rgba(212, 184, 120, .3);
}

#using-triads-in-chord-progressions .tab-tool__transport { margin-left: auto; }

#using-triads-in-chord-progressions .tab-grid { margin-top: .85rem; }

#using-triads-in-chord-progressions .tab-position {
  padding: 0;
  border: 0;
  background: transparent;
}

#using-triads-in-chord-progressions .tab-position__head {
  margin-bottom: .55rem;
}

#using-triads-in-chord-progressions .tab-position__head.is-title-only {
  justify-content: flex-start;
}

#using-triads-in-chord-progressions .tab-position__title {
  color: var(--triad-neck-gold-bright);
  font-size: .8rem;
  letter-spacing: .08em;
}

#using-triads-in-chord-progressions .tab-grid-pass {
  padding: .7rem .85rem;
  border-color: rgba(212, 184, 120, .28);
  background: rgba(8, 9, 11, .55);
}

#using-triads-in-chord-progressions .tab-position__status { display: none; }

/* A compact, text-led closing section rather than oversized full-width copy. */
#using-triads > h2,
#using-triads > h3,
#using-triads > p,
#using-triads > ul,
#using-triads > .theory-foundations-actions {
  width: min(920px, 100%);
  max-width: 920px;
  margin-right: auto;
  margin-left: auto;
}

#using-triads > h2 {
  margin-top: 0;
  margin-bottom: 1.35rem;
  color: #d6a441;
  font-size: clamp(2rem, 3.1vw, 2.75rem);
  line-height: 1.12;
  text-align: left;
}

#using-triads > p {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: clamp(1rem, 1.25vw, 1.13rem);
  line-height: 1.65;
  text-align: left;
}

#using-triads > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
  margin-top: .4rem;
  margin-bottom: 1.35rem;
  padding: 0;
  list-style: none;
}

#using-triads > ul li {
  margin: 0;
  padding: .85rem 0;
  border-top: 1px solid rgba(214, 164, 65, .28);
  font-size: clamp(.96rem, 1.15vw, 1.06rem);
  line-height: 1.5;
  text-align: left;
}

#using-triads > ul strong { color: #edc66f; }

#using-triads > h3 {
  margin-top: 2.1rem;
  margin-bottom: .85rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(214, 164, 65, .45);
  color: #edc66f;
  font-family: "Cal Sans", sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  text-align: left;
}

#using-triads > .theory-foundations-actions { margin-top: 2rem; }

@media (max-width: 620px) {
  #using-triads-in-chord-progressions .tab-tool__controls { gap: .5rem; }
  #using-triads-in-chord-progressions .tab-tool__transport { width: 100%; margin-left: 0; }
  #using-triads > ul { grid-template-columns: 1fr; }
}

.fretboard-map {
  width: 100%;
  max-width: none;
  margin: 2rem auto;
  overflow-x: auto;
  border: 1px solid rgba(212, 184, 120, .28);
  background: #09090b;
}

.fretboard-map svg { display: block; min-width: 760px; width: 100%; height: auto; }
.fretboard-map__wood { stroke: #322719; stroke-width: 1.5; }
.fretboard-map__wood-sheen { fill: rgba(255,255,255,.035); }
.fretboard-map__inlay { fill: #776e62; stroke: #b9afa0; stroke-width: 1.2; opacity: .82; }
.fretboard-map__string { stroke: #d4d0c8; stroke-linecap: round; }
.fretboard-map__string--inactive { opacity: .34; }
.fretboard-map__fret { stroke-width: 3; }
.fretboard-map__fret-shadow { stroke: #090502; stroke-width: 6; opacity: .28; }
.fretboard-map__nut { stroke-width: 8; }
.fretboard-map__string-label,
.fretboard-map__fret-label { fill: #9b9b9f; font: 700 12px system-ui, sans-serif; text-anchor: middle; }
.fretboard-map__note circle { stroke: #fff0c5; stroke-width: 1.5; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.fretboard-map__note--1 circle { stroke: #d7f8e8; }
.fretboard-map__note--2 circle { stroke: #d7f9ff; }
.fretboard-map__note--3 circle { stroke: #eee6ff; }
.fretboard-map__function { fill: #0a0a0a; font: 900 11px system-ui, sans-serif; text-anchor: middle; }
.fretboard-map__note-name { fill: #17110a; font: 800 7px system-ui, sans-serif; text-anchor: middle; }
.fretboard-map__legend { display: flex; flex-wrap: wrap; gap: .55rem 1.1rem; padding: .78rem 1rem; border-top: 1px solid rgba(212, 184, 120, .2); }
.fretboard-map__legend-item { display: inline-flex; align-items: center; color: #dedfdc; font-size: .78rem; }
.fretboard-map__legend-item::before { content: ""; width: 11px; height: 11px; margin-right: .45rem; border-radius: 50%; background: var(--triad-neck-gold); }
.fretboard-map__legend-item--1::before { background: #4bc187; }
.fretboard-map__legend-item--2::before { background: #4fcfe0; }
.fretboard-map__legend-item--3::before { background: #a78bdb; }
.fretboard-map__set-summary {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 1rem 1rem;
  color: #9ea19d !important;
  font-size: .72rem !important;
  line-height: 1.55 !important;
}
.fretboard-map__set-summary strong { color: #d9c48f; }
.fretboard-map__voicing {
  opacity: 0;
  transition: opacity .65s ease;
}
.fretboard-map__voicing.is-active { opacity: 1; }
.fretboard-map:not([data-cycle="true"]) .fretboard-map__voicing { opacity: 1; }
.fretboard-map--cycle {
  width: 100% !important;
  max-width: none !important;
  margin: 2.2rem auto 0 !important;
  border: 0;
  background: transparent;
  transform: none;
}
.fretboard-map--cycle svg {
  border: 1px solid rgba(212,184,120,.24);
  background: #09090b;
}
.fretboard-cycle-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  border-right: 1px solid rgba(212,184,120,.24);
  border-bottom: 1px solid rgba(212,184,120,.24);
  border-left: 1px solid rgba(212,184,120,.24);
  background: #09090b;
}
.fretboard-cycle-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem 1rem;
}
.fretboard-cycle-status span {
  color: #8e918d;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.fretboard-cycle-status strong { color: var(--triad-neck-gold-bright); font-size: .88rem; }
.fretboard-cycle-status code {
  padding: .3rem .55rem;
  border: 1px solid rgba(212,184,120,.3);
  color: #eee6d4;
  background: #11120f;
  font-size: .78rem;
}
.fretboard-cycle-steps { display: flex; gap: .4rem; }
.fretboard-cycle-steps button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(212,184,120,.32);
  border-radius: 50%;
  color: #b9bbb7;
  background: #11120f;
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
}
.fretboard-cycle-steps button.is-active {
  color: #171109;
  border-color: #f1d995;
  background: var(--triad-neck-gold);
}
.fretboard-map--cycle .fretboard-map__legend {
  justify-content: center;
  border: 0;
  background: transparent;
}

@media (max-width: 700px) {
  .fretboard-cycle-panel { grid-template-columns: 1fr; }
  .fretboard-cycle-steps { justify-content: center; }
  .fretboard-cycle-status { justify-content: center; text-align: center; }
}

.inversion-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: none;
  margin: 2rem auto;
  border: 1px solid var(--triad-neck-line);
  background: var(--triad-neck-line);
  gap: 1px;
}

.inversion-strip > div { padding: 1.4rem 1rem; background: #090b0a; text-align: center; }
.inversion-strip small { display: block; color: #929590; font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; }
.inversion-strip strong { display: block; margin: .45rem 0; color: var(--triad-neck-gold-bright); font-size: clamp(1.3rem, 3vw, 2rem); }
.inversion-strip span { color: #d9dbd7; }

.major-minor-move { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; }
.major-minor-move__arrow { color: #de927f; font-size: 2rem; text-align: center; }
.changed-third { color: #ffad9e !important; text-shadow: 0 0 15px rgba(200, 117, 104, .3); }
.comparison-grid--major-minor-move {
  grid-template-columns: 1fr;
  width: min(900px, 100%);
}
.comparison-grid--inversions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.major-minor-inversion {
  padding: clamp(1.1rem, 2.5vw, 1.6rem) 0 0;
  border: 0;
  border-top: 1px solid var(--triad-neck-line);
  background: transparent;
  box-shadow: none;
}
.major-minor-inversion h3 {
  margin-bottom: 1rem;
  text-align: left !important;
}
.major-minor-shape-change {
  padding: clamp(1.1rem, 2.5vw, 1.7rem) 0;
  border-top: 1px solid var(--triad-neck-line);
  border-bottom: 1px solid var(--triad-neck-line);
}
.major-minor-shape-change h3 {
  margin: 0 0 1.15rem;
  color: var(--triad-neck-gold-bright);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.2;
  text-align: left;
}
.major-minor-shape-change .formula-stack {
  border-color: rgba(212, 184, 120, .28);
  background: rgba(212, 184, 120, .28);
}
.major-minor-note {
  width: min(760px, 100%);
  margin: .35rem auto 0;
  padding: .15rem 0 .15rem 1rem;
  border-left: 2px solid var(--triad-neck-gold);
  color: #d9dbd7;
  text-align: left;
}
.major-minor-note span {
  display: inline-block;
  margin-left: .35rem;
  color: #ffad9e;
  font-weight: 800;
}
.major-minor-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.major-minor-pair > div { min-width: 0; border: 1px solid rgba(212, 184, 120, .2); background: #080a09; }
.major-minor-pair h4 { margin: .8rem 0 0; color: #ddd; font-size: .82rem; text-align: center; }
.major-minor-pair .triad-chart { padding: 0 .15rem .7rem; }

.recognition-shape {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin: 1rem 0;
}

.recognition-shape b { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid var(--triad-neck-line); border-radius: 50%; color: #f1e4c1; background: #161916; }
.recognition-card details { border-top: 1px solid rgba(212, 184, 120, .25); }
.recognition-card summary { padding: .8rem 0; color: var(--triad-neck-gold-bright); cursor: pointer; }
.recognition-card p { margin: 0 !important; color: #cfd1cd !important; font-size: .88rem !important; }

.lesson-callout {
  width: min(840px, 100%);
  margin: 2rem auto;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--triad-neck-line);
  border-left: 5px solid var(--triad-neck-gold);
  background: rgba(212, 184, 120, .07);
  color: #dedfdc;
}

.lesson-callout strong { color: var(--triad-neck-gold-bright); }
.lesson-section--final { border-color: rgba(212, 184, 120, .5); }

@media (max-width: 950px) {
  .inversion-explanation__positions,
  .triad-chart-grid,
  .practice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .inversion-explanation__positions section:last-child {
    grid-column: 1 / -1;
  }

  .string-set-shape-grid .string-set-shape-grid__item:nth-child(3) {
    border-left: 0;
  }

  .string-set-shape-grid .string-set-shape-grid__item:nth-child(n + 3) {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(212, 184, 120, .24);
  }
}

@media (max-width: 700px) {
  .triad-formula-grid,
  .comparison-grid,
  .triad-chart-grid,
  .practice-grid,
  .full-vs-triad,
  .inversion-explanation__positions,
  .inversion-strip { grid-template-columns: 1fr; }
  .full-vs-triad__divider { transform: rotate(90deg); text-align: center; }
  .string-set-row { grid-template-columns: 1fr; }
  .string-set-row strong { text-align: center; }
  .major-minor-move { grid-template-columns: 1fr; }
  .major-minor-move__arrow { transform: rotate(90deg); }
  .comparison-grid--inversions { grid-template-columns: 1fr; }
  .inversion-explanation__positions section:last-child { grid-column: auto; }
  .chord-reduction-comparison .chord-reduction-comparison__item + .chord-reduction-comparison__item {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(212, 184, 120, .24);
    border-left: 0;
  }
}

@media (max-width: 430px) {
  .major-minor-pair { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .triad-chart-grid,
  .practice-grid { grid-template-columns: 1fr; }

  .string-set-shape-grid .string-set-shape-grid__item + .string-set-shape-grid__item {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(212, 184, 120, .24);
    border-left: 0;
  }
}

/* Keep the footer visualiser on the same continuous lesson backdrop. */
.theory-lesson-page {
  background: #050505 url("../images/backgrounds/blackhex.webp") center top / cover fixed no-repeat;
}

.theory-lesson-page .site-footer {
  margin-top: 0;
  border-top: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.theory-lesson-page .site-footer::before,
.theory-lesson-page .site-footer::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.theory-lesson-page .lesson-content-wrap,
.theory-lesson-page .lesson-content-wrap > .lesson-section:last-child {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.theory-lesson-page .site-footer .audio-visualizer--footer {
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.theory-lesson-page .site-footer .audio-visualizer--footer::before,
.theory-lesson-page .site-footer .audio-visualizer--footer::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* The full string-set examples appear later, after students know the
   inversion cycle. Keep this early step focused on strings 1, 2 and 3. */
#three-string-sets > ul,
#three-string-sets .string-set-example-intro,
#three-string-sets .string-set-shape-grid,
#three-string-sets .visual-heading,
#three-string-sets .fretboard-map {
  display: none;
}

/* Keyboard users can bypass the amplifier navigation and reach the lesson directly. */
.theory-lesson-page .skip-link {
  position: fixed;
  z-index: 10000;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  border: 2px solid #f2cf79;
  background: #080a09;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .16s ease;
}

.theory-lesson-page .skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.theory-lesson-page a:focus-visible,
.theory-lesson-page button:focus-visible,
.theory-lesson-page input:focus-visible,
.theory-lesson-page summary:focus-visible {
  outline: 3px solid #f2cf79;
  outline-offset: 3px;
}

/* Superseded backup content replaced by the revised lesson sequence. */
#other-string-sets,
#voice-leading,
#practising-triads,
#think-in-chord-tones,
#key-point {
  display: none;
}