/* Chord charts — for a selected chord, its twelve movable shapes as a grid of
   chord boxes. Two kinds, chosen by the Triads/Sevenths radio pair:

     .triads    three-note triads. Columns are the four adjacent-string sets
                low to high, rows are root position / 1st / 2nd inversion.
     .sevenths  four-note drop-2 sevenths. Only three four-adjacent-string sets
                exist, so it is 3 columns; rows are which chord tone is in the
                bass. NOT inversion numbers — dropping a voice out of close root
                position gives a voicing with the fifth in the bass, so
                numbering these in derivation order would mislabel all four.

   Both kinds share EVERYTHING below `.shape`: the dots, the degree markers, the
   open-string rings, the nut, and all 11 position-marker window rules. That last
   one is not a coincidence to rely on blindly — drop-2 shapes happen to occupy
   the same 11 fret windows as the triads, and tools/gen-sevenths.js asserts it.
   If that assertion ever fires, the window rules no longer cover every box.

   One grid per (pitch class x quality) in both cases, because dots carry degrees
   rather than note names — so 36 + 48 grids cover all 336 (key x chord x voicing)
   selections and no enharmonic spelling data is needed anywhere.

   PROVENANCE: the 36 .chart.triads blocks in index.html and this file's triad
   reveal rules and position-marker rules come from tools/gen-triads.js; the 48
   .chart.sevenths blocks and the seventh reveal rules from
   tools/gen-sevenths.js. Edit the generators, not the output. Specs:
   docs/superpowers/specs/2026-07-26-triad-diagrams-design.md and
   docs/superpowers/specs/2026-07-27-seventh-chords-design.md */

.chart {
  /* Six strings, so which strings a shape uses is visible from where its dots
     sit — that is what replaced the per-row string-set labels. */
  --strings: 6;
  --box-w: 7.5rem;
  /* Row must exceed --dot, or vertically adjacent dots merge. --col-w must too:
     a triad always occupies three adjacent strings. */
  --fret-h: 1.15rem;
  --dot: 1.02rem;
  --wire: 2px;
  --col-w: calc(var(--box-w) / var(--strings));
  /* Position markers, matching the neck's inlays. Drawn as background layers, so
     they sit behind the note dots the way the neck's .inlay elements sit behind
     its .note markers. */
  --inlay-d: 0.5rem;
  --inlay-dot: radial-gradient(circle closest-side, var(--inlay-color) 98%, transparent 100%);

  /* Reveal rules at the foot of this file own `display`. */
  display: none;
  grid-template-columns: repeat(var(--cols), var(--box-w));
  grid-template-rows: repeat(var(--rows), auto);
  /* Column flow is what transposes the grid without touching the markup. Both
     generators emit their blocks grouped by string set (set-ead inv-0/1/2, then
     set-adg, …; set-eadg bass-r/3/5/7, then set-adgb, …), so filling
     column-by-column puts each set in its own column and each inversion or bass
     tone on its own row. Row flow would instead put one set's inversions across
     the first row. */
  grid-auto-flow: column;
  /* Row gap must clear an open ring sitting above the next box down, so it
     cannot go below --dot plus the ring's 0.3rem offset. */
  row-gap: 1.6rem;
  /* Half the leftover width, spread over the gaps. There are --cols - 1 gaps, so
     dividing by 2 * (--cols - 1) rather than --cols - 1 is what halves the
     spacing: `space-between` used to hand every gap (100% - boxes) / 3, which
     reached ~12rem and read as four unrelated diagrams. The percentage resolves
     against this element's content box, so the gap stays proportional at every
     viewport width instead of being pinned to one.

     The denominator was the literal 6 while only the 4-column triad grid existed;
     2 * (4 - 1) reproduces it exactly, and the 3-column seventh grid gets 4.

     The 1.6rem floor is load-bearing and easy to lose: `space-between` used to
     get it for free, because `gap` is a minimum that alignment adds space on top
     of. A bare calc has no floor, so it thins to 0 on a narrow viewport — and at
     0 the boxes' fret wires run together into one wide box, while each `.fret`
     label, which sits 0.4rem to the right of its box, lands on top of the next
     column. */
  column-gap: max(1.6rem, calc((100% - var(--cols) * var(--box-w)) / (2 * (var(--cols) - 1))));
  /* The other half of the leftover becomes equal outer space, centring the grid
     under the neck. `safe` falls back to start-alignment once the boxes overflow,
     without which the centred overflow would sit off the left edge of the scroll
     container and be unreachable. */
  justify-content: safe center;
  /* The grid sits BELOW the neck, so its margin leads rather than trails: that
     is what keeps the neck's position independent of any selection. */
  margin: 1.6rem 0 0;
  /* The left gutter does two jobs at once, and --neck-inset satisfies both.

     It aligns this element's content box with the board's left edge, and centring
     happens inside the content box — so matching the board's inset, with no
     padding on the right where the neck has none, centres the boxes under the
     BOARD rather than under the content column. Centring on the content column
     instead leaves visibly more slack right of the board than left. The key
     picker and chord strip offset by the same token, so all three line up.

     It also happens to reserve room for the inversion row labels, which need
     about 3.7rem — comfortably inside --neck-inset's 4.2rem.

     The last column's fret number sits 0.4rem past its box, into the centring
     slack; it only reaches the padding edge once the grid overflows, and then it
     is still reachable by scrolling. Top gutter clears an open ring above the
     first row. Six-string boxes are wide, so let the grid scroll rather than clip
     on a narrow viewport — the same escape .board-scroll uses. */
  padding: 1.5rem 0 0 var(--neck-inset);
  overflow-x: auto;
}

/* The only difference between the two chart kinds. Six strings hold four
   adjacent-string sets but only three four-string sets, so a seventh grid trades
   a column for a row: 4x3 becomes 3x4, and the box count stays 12. */
.triads {
  --cols: 4;
  --rows: 3;
}

.sevenths {
  --cols: 3;
  --rows: 4;
}

/* A box is the fretted window only: five fret rows, six string columns.
   Open-string dots are positioned above it, so the background can cover the
   fretted area exactly without needing a nested element. */
.shape {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--strings), 1fr);
  grid-template-rows: repeat(5, var(--fret-h));
  width: var(--box-w);
  background-color: var(--board-bg);
  /* Five fixed layers, topmost first: string lines down each column's center,
     three position-marker slots, then fret wires on each row's bottom edge.
     The two line gradients use the same technique .board does.

     The order is what puts markers under the strings and over the wires, which
     is how the neck stacks them — its .inlay divs precede its .string divs.
     Keeping the stack fixed at three marker slots means the per-window rules at
     the foot of this file set `background-position` and nothing else; windows
     with fewer than three markers park the spare slots off-box, where
     `no-repeat` leaves them invisible. */
  background-image:
    linear-gradient(to right,
      transparent calc(50% - 0.5px), var(--string-color) calc(50% - 0.5px),
      var(--string-color) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    var(--inlay-dot),
    var(--inlay-dot),
    var(--inlay-dot),
    linear-gradient(to bottom, transparent calc(var(--fret-h) - 1px), var(--fret-color) calc(var(--fret-h) - 1px));
  background-size:
    var(--col-w) 100%,
    var(--inlay-d) var(--inlay-d),
    var(--inlay-d) var(--inlay-d),
    var(--inlay-d) var(--inlay-d),
    100% var(--fret-h);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, repeat;
  border-top: var(--wire) solid var(--fret-color);
}

/* w-1 means the window starts at fret 1, so its top boundary IS the nut.
   Darken it and thicken it inward with a shadow rather than a wider border, so
   these boxes stay exactly as tall as the rest and rows line up across the grid. */
.shape.w-1 {
  border-top-color: var(--nut-color);
  box-shadow: inset 0 var(--wire) 0 var(--nut-color);
}

.dot {
  grid-column: var(--s);
  grid-row: var(--f);
  place-self: center;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background-color: var(--note-bg);
  color: var(--note-fg);
  font-size: 0.5rem;
  line-height: 1;
}

.dot.deg-r {
  background-color: var(--root-bg);
  color: var(--root-fg);
}

/* Same vocabulary the neck uses. The first five cover every triad; sevenths add
   the last two, and only a major seventh takes the unflattened `7`. */
.dot.deg-r::after  { content: "R"; }
.dot.deg-3::after  { content: "3"; }
.dot.deg-b3::after { content: "b3"; }
.dot.deg-5::after  { content: "5"; }
.dot.deg-b5::after { content: "b5"; }
.dot.deg-7::after  { content: "7"; }
.dot.deg-b7::after { content: "b7"; }

/* Open string: a hollow ring above the nut. An absolutely positioned grid item
   resolves its offsets against its grid area, so `left: 50%` centers it on the
   right string — but only if BOTH lines of the axis are definite. A one-value
   `grid-column: <n>` leaves the end line `auto`, and for an abspos grid child
   `auto` is NOT "span 1": it resolves to the grid container's padding edge
   (CSS Grid 9.2). The area then ran from the string's column to the box's right
   edge, so `left: 50%` centered each ring in that shrinking remainder — rings
   landed at (--s / 2 + 2.5) columns instead of (--s - 0.5), which put adjacent
   ones half a column apart and overlapping, and only string 1 (--s: 6) right.
   So spell out both end lines. Row 1 is pinned for the same reason `--f: 0`
   is not used: `grid-row: 0` is invalid and silently becomes `auto`, leaving
   the containing block dependent on a parse failure. */
.dot.open {
  position: absolute;
  grid-column: var(--s) / span 1;
  grid-row: 1 / 2;
  bottom: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%);
  background-color: transparent;
  color: var(--note-bg);
  border: 1.5px solid var(--note-bg);
}

.dot.open.deg-r {
  color: var(--root-bg);
  border-color: var(--root-bg);
}

/* Start fret, right of the box, sitting in the column gap. */
.fret {
  position: absolute;
  left: calc(100% + 0.4rem);
  top: 0;
  font-size: 0.65rem;
  color: var(--label-color);
}

/* Row labels are identical across all 36 grids, so they live here rather than in
   generated elements. There are no column headers: with all six strings drawn, a
   shape's string set is visible from where its dots sit, whereas its inversion
   is not — so the axis that gets labelled is the one carrying the invisible
   distinction.

   `.set-ead` is the leftmost COLUMN once the grid flows by column, so
   `.set-ead.inv-N` picks out exactly the first box of row N. The selectors are
   unchanged from when this was a 4x3 grid and they addressed the top row's three
   columns; only the positioning below flipped. The generated aria-label still
   names the strings for assistive tech.

   `.set-eadg` does the same job for the seventh charts. It is a distinct class
   token, so `.set-ead` does not match it. Its labels are short on purpose: they
   sit in the --neck-inset gutter, which leaves about 3.6rem after the 0.6rem
   offset. `bass R` needs ~2.1rem, where `7th in bass` would need ~3.9rem and
   spill past the board's left edge. */
.shape.set-ead::after,
.shape.set-eadg::after {
  position: absolute;
  right: calc(100% + 0.6rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: var(--label-color);
  white-space: nowrap;
}

.shape.set-ead.inv-0::after { content: "root pos."; }
.shape.set-ead.inv-1::after { content: "1st inv."; }
.shape.set-ead.inv-2::after { content: "2nd inv."; }

/* Bass tone, not inversion number: a drop-2 shape is not a close-position
   inversion, so "1st inv." here would name the wrong thing. */
.shape.set-eadg.bass-r::after { content: "bass R"; }
.shape.set-eadg.bass-3::after { content: "bass 3"; }
.shape.set-eadg.bass-5::after { content: "bass 5"; }
.shape.set-eadg.bass-7::after { content: "bass 7"; }

/* ---------- Position markers: 11 rules, one per window start.
   Generated by tools/gen-triads.js. Marker placement depends only on where the
   window starts, so 11 rules cover all 432 boxes. Each sets background-position
   against the fixed five-layer stack declared on .shape above.

   Both axes read "cell multiple minus half the dot": --col-w steps across the
   strings, --fret-h steps down the frets. Every x is a whole number of --col-w,
   which is a boundary between two columns — markers sit in the gaps between
   strings, never under one, as they do on a real neck. A half-integer would be a
   column's center, i.e. a string. Do not reach for percentages here. A
   percentage in background-position aligns that percentage point of the *image*
   with the same point of the positioning area, so it resolves to
   (box - dot) * pct rather than box * pct — it self-centers, and subtracting
   half the dot on top of it shifts the marker left by --inlay-d / 2. */

/* window 1: frets 1-5 — markers at 3, 5 */
.shape.w-1 {
  background-position:
    0 0,
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(2.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(4.5 * var(--fret-h) - var(--inlay-d) / 2),
    -99px -99px,
    0 0;
}
/* window 2: frets 2-6 — markers at 3, 5 */
.shape.w-2 {
  background-position:
    0 0,
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(1.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(3.5 * var(--fret-h) - var(--inlay-d) / 2),
    -99px -99px,
    0 0;
}
/* window 3: frets 3-7 — markers at 3, 5, 7 */
.shape.w-3 {
  background-position:
    0 0,
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(0.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(2.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(4.5 * var(--fret-h) - var(--inlay-d) / 2),
    0 0;
}
/* window 4: frets 4-8 — markers at 5, 7 */
.shape.w-4 {
  background-position:
    0 0,
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(1.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(3.5 * var(--fret-h) - var(--inlay-d) / 2),
    -99px -99px,
    0 0;
}
/* window 5: frets 5-9 — markers at 5, 7, 9 */
.shape.w-5 {
  background-position:
    0 0,
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(0.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(2.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(4.5 * var(--fret-h) - var(--inlay-d) / 2),
    0 0;
}
/* window 6: frets 6-10 — markers at 7, 9 */
.shape.w-6 {
  background-position:
    0 0,
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(1.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(3.5 * var(--fret-h) - var(--inlay-d) / 2),
    -99px -99px,
    0 0;
}
/* window 7: frets 7-11 — markers at 7, 9 */
.shape.w-7 {
  background-position:
    0 0,
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(0.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(2.5 * var(--fret-h) - var(--inlay-d) / 2),
    -99px -99px,
    0 0;
}
/* window 8: frets 8-12 — markers at 9, 12 */
.shape.w-8 {
  background-position:
    0 0,
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(1.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(2 * var(--col-w) - var(--inlay-d) / 2) calc(4.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(4 * var(--col-w) - var(--inlay-d) / 2) calc(4.5 * var(--fret-h) - var(--inlay-d) / 2),
    0 0;
}
/* window 9: frets 9-13 — markers at 9, 12 */
.shape.w-9 {
  background-position:
    0 0,
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(0.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(2 * var(--col-w) - var(--inlay-d) / 2) calc(3.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(4 * var(--col-w) - var(--inlay-d) / 2) calc(3.5 * var(--fret-h) - var(--inlay-d) / 2),
    0 0;
}
/* window 10: frets 10-14 — markers at 12 */
.shape.w-10 {
  background-position:
    0 0,
    calc(2 * var(--col-w) - var(--inlay-d) / 2) calc(2.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(4 * var(--col-w) - var(--inlay-d) / 2) calc(2.5 * var(--fret-h) - var(--inlay-d) / 2),
    -99px -99px,
    0 0;
}
/* window 11: frets 11-15 — markers at 12, 15 */
.shape.w-11 {
  background-position:
    0 0,
    calc(2 * var(--col-w) - var(--inlay-d) / 2) calc(1.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(4 * var(--col-w) - var(--inlay-d) / 2) calc(1.5 * var(--fret-h) - var(--inlay-d) / 2),
    calc(3 * var(--col-w) - var(--inlay-d) / 2) calc(4.5 * var(--fret-h) - var(--inlay-d) / 2),
    0 0;
}

/* ---------- Reveal rules: 36 triad grids and 48 seventh grids, 336
   (voicing x key x chord) selectors. Triad rules generated by
   tools/gen-triads.js, seventh rules by tools/gen-sevenths.js.

   Every selector is scoped to a voicing AND a key AND a chord. The key-and-chord
   part is what makes a stale selection in a hidden strip inert; the voicing part
   is a genuine partition on radio mutual exclusion, so neither chart kind
   negates the other and neither depends on cascade order. No rule references any
   -all id: checking "All" hides the grid by matching nothing. */

main:has(#voicing-triads:checked):has(#key-c-major:checked):has(#chord-c-major-1:checked) #triads-c-maj,
main:has(#voicing-triads:checked):has(#key-f-major:checked):has(#chord-f-major-5:checked) #triads-c-maj,
main:has(#voicing-triads:checked):has(#key-g-major:checked):has(#chord-g-major-4:checked) #triads-c-maj,
main:has(#voicing-triads:checked):has(#key-d-minor:checked):has(#chord-d-minor-7:checked) #triads-c-maj,
main:has(#voicing-triads:checked):has(#key-e-minor:checked):has(#chord-e-minor-6:checked) #triads-c-maj,
main:has(#voicing-triads:checked):has(#key-a-minor:checked):has(#chord-a-minor-3:checked) #triads-c-maj {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-db-major:checked):has(#chord-db-major-1:checked) #triads-cs-maj,
main:has(#voicing-triads:checked):has(#key-fs-major:checked):has(#chord-fs-major-5:checked) #triads-cs-maj,
main:has(#voicing-triads:checked):has(#key-ab-major:checked):has(#chord-ab-major-4:checked) #triads-cs-maj,
main:has(#voicing-triads:checked):has(#key-ds-minor:checked):has(#chord-ds-minor-7:checked) #triads-cs-maj,
main:has(#voicing-triads:checked):has(#key-f-minor:checked):has(#chord-f-minor-6:checked) #triads-cs-maj,
main:has(#voicing-triads:checked):has(#key-bb-minor:checked):has(#chord-bb-minor-3:checked) #triads-cs-maj {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-d-major:checked):has(#chord-d-major-1:checked) #triads-d-maj,
main:has(#voicing-triads:checked):has(#key-g-major:checked):has(#chord-g-major-5:checked) #triads-d-maj,
main:has(#voicing-triads:checked):has(#key-a-major:checked):has(#chord-a-major-4:checked) #triads-d-maj,
main:has(#voicing-triads:checked):has(#key-e-minor:checked):has(#chord-e-minor-7:checked) #triads-d-maj,
main:has(#voicing-triads:checked):has(#key-fs-minor:checked):has(#chord-fs-minor-6:checked) #triads-d-maj,
main:has(#voicing-triads:checked):has(#key-b-minor:checked):has(#chord-b-minor-3:checked) #triads-d-maj {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-eb-major:checked):has(#chord-eb-major-1:checked) #triads-ds-maj,
main:has(#voicing-triads:checked):has(#key-ab-major:checked):has(#chord-ab-major-5:checked) #triads-ds-maj,
main:has(#voicing-triads:checked):has(#key-bb-major:checked):has(#chord-bb-major-4:checked) #triads-ds-maj,
main:has(#voicing-triads:checked):has(#key-c-minor:checked):has(#chord-c-minor-3:checked) #triads-ds-maj,
main:has(#voicing-triads:checked):has(#key-f-minor:checked):has(#chord-f-minor-7:checked) #triads-ds-maj,
main:has(#voicing-triads:checked):has(#key-g-minor:checked):has(#chord-g-minor-6:checked) #triads-ds-maj {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-e-major:checked):has(#chord-e-major-1:checked) #triads-e-maj,
main:has(#voicing-triads:checked):has(#key-a-major:checked):has(#chord-a-major-5:checked) #triads-e-maj,
main:has(#voicing-triads:checked):has(#key-b-major:checked):has(#chord-b-major-4:checked) #triads-e-maj,
main:has(#voicing-triads:checked):has(#key-cs-minor:checked):has(#chord-cs-minor-3:checked) #triads-e-maj,
main:has(#voicing-triads:checked):has(#key-fs-minor:checked):has(#chord-fs-minor-7:checked) #triads-e-maj,
main:has(#voicing-triads:checked):has(#key-gs-minor:checked):has(#chord-gs-minor-6:checked) #triads-e-maj {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-c-major:checked):has(#chord-c-major-4:checked) #triads-f-maj,
main:has(#voicing-triads:checked):has(#key-f-major:checked):has(#chord-f-major-1:checked) #triads-f-maj,
main:has(#voicing-triads:checked):has(#key-bb-major:checked):has(#chord-bb-major-5:checked) #triads-f-maj,
main:has(#voicing-triads:checked):has(#key-d-minor:checked):has(#chord-d-minor-3:checked) #triads-f-maj,
main:has(#voicing-triads:checked):has(#key-g-minor:checked):has(#chord-g-minor-7:checked) #triads-f-maj,
main:has(#voicing-triads:checked):has(#key-a-minor:checked):has(#chord-a-minor-6:checked) #triads-f-maj {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-db-major:checked):has(#chord-db-major-4:checked) #triads-fs-maj,
main:has(#voicing-triads:checked):has(#key-fs-major:checked):has(#chord-fs-major-1:checked) #triads-fs-maj,
main:has(#voicing-triads:checked):has(#key-b-major:checked):has(#chord-b-major-5:checked) #triads-fs-maj,
main:has(#voicing-triads:checked):has(#key-ds-minor:checked):has(#chord-ds-minor-3:checked) #triads-fs-maj,
main:has(#voicing-triads:checked):has(#key-gs-minor:checked):has(#chord-gs-minor-7:checked) #triads-fs-maj,
main:has(#voicing-triads:checked):has(#key-bb-minor:checked):has(#chord-bb-minor-6:checked) #triads-fs-maj {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-c-major:checked):has(#chord-c-major-5:checked) #triads-g-maj,
main:has(#voicing-triads:checked):has(#key-d-major:checked):has(#chord-d-major-4:checked) #triads-g-maj,
main:has(#voicing-triads:checked):has(#key-g-major:checked):has(#chord-g-major-1:checked) #triads-g-maj,
main:has(#voicing-triads:checked):has(#key-e-minor:checked):has(#chord-e-minor-3:checked) #triads-g-maj,
main:has(#voicing-triads:checked):has(#key-a-minor:checked):has(#chord-a-minor-7:checked) #triads-g-maj,
main:has(#voicing-triads:checked):has(#key-b-minor:checked):has(#chord-b-minor-6:checked) #triads-g-maj {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-db-major:checked):has(#chord-db-major-5:checked) #triads-gs-maj,
main:has(#voicing-triads:checked):has(#key-eb-major:checked):has(#chord-eb-major-4:checked) #triads-gs-maj,
main:has(#voicing-triads:checked):has(#key-ab-major:checked):has(#chord-ab-major-1:checked) #triads-gs-maj,
main:has(#voicing-triads:checked):has(#key-c-minor:checked):has(#chord-c-minor-6:checked) #triads-gs-maj,
main:has(#voicing-triads:checked):has(#key-f-minor:checked):has(#chord-f-minor-3:checked) #triads-gs-maj,
main:has(#voicing-triads:checked):has(#key-bb-minor:checked):has(#chord-bb-minor-7:checked) #triads-gs-maj {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-d-major:checked):has(#chord-d-major-5:checked) #triads-a-maj,
main:has(#voicing-triads:checked):has(#key-e-major:checked):has(#chord-e-major-4:checked) #triads-a-maj,
main:has(#voicing-triads:checked):has(#key-a-major:checked):has(#chord-a-major-1:checked) #triads-a-maj,
main:has(#voicing-triads:checked):has(#key-cs-minor:checked):has(#chord-cs-minor-6:checked) #triads-a-maj,
main:has(#voicing-triads:checked):has(#key-fs-minor:checked):has(#chord-fs-minor-3:checked) #triads-a-maj,
main:has(#voicing-triads:checked):has(#key-b-minor:checked):has(#chord-b-minor-7:checked) #triads-a-maj {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-eb-major:checked):has(#chord-eb-major-5:checked) #triads-as-maj,
main:has(#voicing-triads:checked):has(#key-f-major:checked):has(#chord-f-major-4:checked) #triads-as-maj,
main:has(#voicing-triads:checked):has(#key-bb-major:checked):has(#chord-bb-major-1:checked) #triads-as-maj,
main:has(#voicing-triads:checked):has(#key-c-minor:checked):has(#chord-c-minor-7:checked) #triads-as-maj,
main:has(#voicing-triads:checked):has(#key-d-minor:checked):has(#chord-d-minor-6:checked) #triads-as-maj,
main:has(#voicing-triads:checked):has(#key-g-minor:checked):has(#chord-g-minor-3:checked) #triads-as-maj {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-e-major:checked):has(#chord-e-major-5:checked) #triads-b-maj,
main:has(#voicing-triads:checked):has(#key-fs-major:checked):has(#chord-fs-major-4:checked) #triads-b-maj,
main:has(#voicing-triads:checked):has(#key-b-major:checked):has(#chord-b-major-1:checked) #triads-b-maj,
main:has(#voicing-triads:checked):has(#key-cs-minor:checked):has(#chord-cs-minor-7:checked) #triads-b-maj,
main:has(#voicing-triads:checked):has(#key-ds-minor:checked):has(#chord-ds-minor-6:checked) #triads-b-maj,
main:has(#voicing-triads:checked):has(#key-gs-minor:checked):has(#chord-gs-minor-3:checked) #triads-b-maj {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-eb-major:checked):has(#chord-eb-major-6:checked) #triads-c-min,
main:has(#voicing-triads:checked):has(#key-ab-major:checked):has(#chord-ab-major-3:checked) #triads-c-min,
main:has(#voicing-triads:checked):has(#key-bb-major:checked):has(#chord-bb-major-2:checked) #triads-c-min,
main:has(#voicing-triads:checked):has(#key-c-minor:checked):has(#chord-c-minor-1:checked) #triads-c-min,
main:has(#voicing-triads:checked):has(#key-f-minor:checked):has(#chord-f-minor-5:checked) #triads-c-min,
main:has(#voicing-triads:checked):has(#key-g-minor:checked):has(#chord-g-minor-4:checked) #triads-c-min {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-e-major:checked):has(#chord-e-major-6:checked) #triads-cs-min,
main:has(#voicing-triads:checked):has(#key-a-major:checked):has(#chord-a-major-3:checked) #triads-cs-min,
main:has(#voicing-triads:checked):has(#key-b-major:checked):has(#chord-b-major-2:checked) #triads-cs-min,
main:has(#voicing-triads:checked):has(#key-cs-minor:checked):has(#chord-cs-minor-1:checked) #triads-cs-min,
main:has(#voicing-triads:checked):has(#key-fs-minor:checked):has(#chord-fs-minor-5:checked) #triads-cs-min,
main:has(#voicing-triads:checked):has(#key-gs-minor:checked):has(#chord-gs-minor-4:checked) #triads-cs-min {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-c-major:checked):has(#chord-c-major-2:checked) #triads-d-min,
main:has(#voicing-triads:checked):has(#key-f-major:checked):has(#chord-f-major-6:checked) #triads-d-min,
main:has(#voicing-triads:checked):has(#key-bb-major:checked):has(#chord-bb-major-3:checked) #triads-d-min,
main:has(#voicing-triads:checked):has(#key-d-minor:checked):has(#chord-d-minor-1:checked) #triads-d-min,
main:has(#voicing-triads:checked):has(#key-g-minor:checked):has(#chord-g-minor-5:checked) #triads-d-min,
main:has(#voicing-triads:checked):has(#key-a-minor:checked):has(#chord-a-minor-4:checked) #triads-d-min {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-db-major:checked):has(#chord-db-major-2:checked) #triads-ds-min,
main:has(#voicing-triads:checked):has(#key-fs-major:checked):has(#chord-fs-major-6:checked) #triads-ds-min,
main:has(#voicing-triads:checked):has(#key-b-major:checked):has(#chord-b-major-3:checked) #triads-ds-min,
main:has(#voicing-triads:checked):has(#key-ds-minor:checked):has(#chord-ds-minor-1:checked) #triads-ds-min,
main:has(#voicing-triads:checked):has(#key-gs-minor:checked):has(#chord-gs-minor-5:checked) #triads-ds-min,
main:has(#voicing-triads:checked):has(#key-bb-minor:checked):has(#chord-bb-minor-4:checked) #triads-ds-min {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-c-major:checked):has(#chord-c-major-3:checked) #triads-e-min,
main:has(#voicing-triads:checked):has(#key-d-major:checked):has(#chord-d-major-2:checked) #triads-e-min,
main:has(#voicing-triads:checked):has(#key-g-major:checked):has(#chord-g-major-6:checked) #triads-e-min,
main:has(#voicing-triads:checked):has(#key-e-minor:checked):has(#chord-e-minor-1:checked) #triads-e-min,
main:has(#voicing-triads:checked):has(#key-a-minor:checked):has(#chord-a-minor-5:checked) #triads-e-min,
main:has(#voicing-triads:checked):has(#key-b-minor:checked):has(#chord-b-minor-4:checked) #triads-e-min {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-db-major:checked):has(#chord-db-major-3:checked) #triads-f-min,
main:has(#voicing-triads:checked):has(#key-eb-major:checked):has(#chord-eb-major-2:checked) #triads-f-min,
main:has(#voicing-triads:checked):has(#key-ab-major:checked):has(#chord-ab-major-6:checked) #triads-f-min,
main:has(#voicing-triads:checked):has(#key-c-minor:checked):has(#chord-c-minor-4:checked) #triads-f-min,
main:has(#voicing-triads:checked):has(#key-f-minor:checked):has(#chord-f-minor-1:checked) #triads-f-min,
main:has(#voicing-triads:checked):has(#key-bb-minor:checked):has(#chord-bb-minor-5:checked) #triads-f-min {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-d-major:checked):has(#chord-d-major-3:checked) #triads-fs-min,
main:has(#voicing-triads:checked):has(#key-e-major:checked):has(#chord-e-major-2:checked) #triads-fs-min,
main:has(#voicing-triads:checked):has(#key-a-major:checked):has(#chord-a-major-6:checked) #triads-fs-min,
main:has(#voicing-triads:checked):has(#key-cs-minor:checked):has(#chord-cs-minor-4:checked) #triads-fs-min,
main:has(#voicing-triads:checked):has(#key-fs-minor:checked):has(#chord-fs-minor-1:checked) #triads-fs-min,
main:has(#voicing-triads:checked):has(#key-b-minor:checked):has(#chord-b-minor-5:checked) #triads-fs-min {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-eb-major:checked):has(#chord-eb-major-3:checked) #triads-g-min,
main:has(#voicing-triads:checked):has(#key-f-major:checked):has(#chord-f-major-2:checked) #triads-g-min,
main:has(#voicing-triads:checked):has(#key-bb-major:checked):has(#chord-bb-major-6:checked) #triads-g-min,
main:has(#voicing-triads:checked):has(#key-c-minor:checked):has(#chord-c-minor-5:checked) #triads-g-min,
main:has(#voicing-triads:checked):has(#key-d-minor:checked):has(#chord-d-minor-4:checked) #triads-g-min,
main:has(#voicing-triads:checked):has(#key-g-minor:checked):has(#chord-g-minor-1:checked) #triads-g-min {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-e-major:checked):has(#chord-e-major-3:checked) #triads-gs-min,
main:has(#voicing-triads:checked):has(#key-fs-major:checked):has(#chord-fs-major-2:checked) #triads-gs-min,
main:has(#voicing-triads:checked):has(#key-b-major:checked):has(#chord-b-major-6:checked) #triads-gs-min,
main:has(#voicing-triads:checked):has(#key-cs-minor:checked):has(#chord-cs-minor-5:checked) #triads-gs-min,
main:has(#voicing-triads:checked):has(#key-ds-minor:checked):has(#chord-ds-minor-4:checked) #triads-gs-min,
main:has(#voicing-triads:checked):has(#key-gs-minor:checked):has(#chord-gs-minor-1:checked) #triads-gs-min {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-c-major:checked):has(#chord-c-major-6:checked) #triads-a-min,
main:has(#voicing-triads:checked):has(#key-f-major:checked):has(#chord-f-major-3:checked) #triads-a-min,
main:has(#voicing-triads:checked):has(#key-g-major:checked):has(#chord-g-major-2:checked) #triads-a-min,
main:has(#voicing-triads:checked):has(#key-d-minor:checked):has(#chord-d-minor-5:checked) #triads-a-min,
main:has(#voicing-triads:checked):has(#key-e-minor:checked):has(#chord-e-minor-4:checked) #triads-a-min,
main:has(#voicing-triads:checked):has(#key-a-minor:checked):has(#chord-a-minor-1:checked) #triads-a-min {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-db-major:checked):has(#chord-db-major-6:checked) #triads-as-min,
main:has(#voicing-triads:checked):has(#key-fs-major:checked):has(#chord-fs-major-3:checked) #triads-as-min,
main:has(#voicing-triads:checked):has(#key-ab-major:checked):has(#chord-ab-major-2:checked) #triads-as-min,
main:has(#voicing-triads:checked):has(#key-ds-minor:checked):has(#chord-ds-minor-5:checked) #triads-as-min,
main:has(#voicing-triads:checked):has(#key-f-minor:checked):has(#chord-f-minor-4:checked) #triads-as-min,
main:has(#voicing-triads:checked):has(#key-bb-minor:checked):has(#chord-bb-minor-1:checked) #triads-as-min {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-d-major:checked):has(#chord-d-major-6:checked) #triads-b-min,
main:has(#voicing-triads:checked):has(#key-g-major:checked):has(#chord-g-major-3:checked) #triads-b-min,
main:has(#voicing-triads:checked):has(#key-a-major:checked):has(#chord-a-major-2:checked) #triads-b-min,
main:has(#voicing-triads:checked):has(#key-e-minor:checked):has(#chord-e-minor-5:checked) #triads-b-min,
main:has(#voicing-triads:checked):has(#key-fs-minor:checked):has(#chord-fs-minor-4:checked) #triads-b-min,
main:has(#voicing-triads:checked):has(#key-b-minor:checked):has(#chord-b-minor-1:checked) #triads-b-min {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-db-major:checked):has(#chord-db-major-7:checked) #triads-c-dim,
main:has(#voicing-triads:checked):has(#key-bb-minor:checked):has(#chord-bb-minor-2:checked) #triads-c-dim {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-d-major:checked):has(#chord-d-major-7:checked) #triads-cs-dim,
main:has(#voicing-triads:checked):has(#key-b-minor:checked):has(#chord-b-minor-2:checked) #triads-cs-dim {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-eb-major:checked):has(#chord-eb-major-7:checked) #triads-d-dim,
main:has(#voicing-triads:checked):has(#key-c-minor:checked):has(#chord-c-minor-2:checked) #triads-d-dim {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-e-major:checked):has(#chord-e-major-7:checked) #triads-ds-dim,
main:has(#voicing-triads:checked):has(#key-cs-minor:checked):has(#chord-cs-minor-2:checked) #triads-ds-dim {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-f-major:checked):has(#chord-f-major-7:checked) #triads-e-dim,
main:has(#voicing-triads:checked):has(#key-d-minor:checked):has(#chord-d-minor-2:checked) #triads-e-dim {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-fs-major:checked):has(#chord-fs-major-7:checked) #triads-f-dim,
main:has(#voicing-triads:checked):has(#key-ds-minor:checked):has(#chord-ds-minor-2:checked) #triads-f-dim {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-g-major:checked):has(#chord-g-major-7:checked) #triads-fs-dim,
main:has(#voicing-triads:checked):has(#key-e-minor:checked):has(#chord-e-minor-2:checked) #triads-fs-dim {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-ab-major:checked):has(#chord-ab-major-7:checked) #triads-g-dim,
main:has(#voicing-triads:checked):has(#key-f-minor:checked):has(#chord-f-minor-2:checked) #triads-g-dim {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-a-major:checked):has(#chord-a-major-7:checked) #triads-gs-dim,
main:has(#voicing-triads:checked):has(#key-fs-minor:checked):has(#chord-fs-minor-2:checked) #triads-gs-dim {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-bb-major:checked):has(#chord-bb-major-7:checked) #triads-a-dim,
main:has(#voicing-triads:checked):has(#key-g-minor:checked):has(#chord-g-minor-2:checked) #triads-a-dim {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-b-major:checked):has(#chord-b-major-7:checked) #triads-as-dim,
main:has(#voicing-triads:checked):has(#key-gs-minor:checked):has(#chord-gs-minor-2:checked) #triads-as-dim {
  display: grid;
}
main:has(#voicing-triads:checked):has(#key-c-major:checked):has(#chord-c-major-7:checked) #triads-b-dim,
main:has(#voicing-triads:checked):has(#key-a-minor:checked):has(#chord-a-minor-2:checked) #triads-b-dim {
  display: grid;
}

main:has(#voicing-7th:checked):has(#key-c-major:checked):has(#chord-c-major-1:checked) #sevenths-c-maj7,
main:has(#voicing-7th:checked):has(#key-a-minor:checked):has(#chord-a-minor-3:checked) #sevenths-c-maj7,
main:has(#voicing-7th:checked):has(#key-g-major:checked):has(#chord-g-major-4:checked) #sevenths-c-maj7,
main:has(#voicing-7th:checked):has(#key-e-minor:checked):has(#chord-e-minor-6:checked) #sevenths-c-maj7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-db-major:checked):has(#chord-db-major-1:checked) #sevenths-cs-maj7,
main:has(#voicing-7th:checked):has(#key-bb-minor:checked):has(#chord-bb-minor-3:checked) #sevenths-cs-maj7,
main:has(#voicing-7th:checked):has(#key-ab-major:checked):has(#chord-ab-major-4:checked) #sevenths-cs-maj7,
main:has(#voicing-7th:checked):has(#key-f-minor:checked):has(#chord-f-minor-6:checked) #sevenths-cs-maj7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-d-major:checked):has(#chord-d-major-1:checked) #sevenths-d-maj7,
main:has(#voicing-7th:checked):has(#key-b-minor:checked):has(#chord-b-minor-3:checked) #sevenths-d-maj7,
main:has(#voicing-7th:checked):has(#key-a-major:checked):has(#chord-a-major-4:checked) #sevenths-d-maj7,
main:has(#voicing-7th:checked):has(#key-fs-minor:checked):has(#chord-fs-minor-6:checked) #sevenths-d-maj7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-eb-major:checked):has(#chord-eb-major-1:checked) #sevenths-ds-maj7,
main:has(#voicing-7th:checked):has(#key-c-minor:checked):has(#chord-c-minor-3:checked) #sevenths-ds-maj7,
main:has(#voicing-7th:checked):has(#key-bb-major:checked):has(#chord-bb-major-4:checked) #sevenths-ds-maj7,
main:has(#voicing-7th:checked):has(#key-g-minor:checked):has(#chord-g-minor-6:checked) #sevenths-ds-maj7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-e-major:checked):has(#chord-e-major-1:checked) #sevenths-e-maj7,
main:has(#voicing-7th:checked):has(#key-cs-minor:checked):has(#chord-cs-minor-3:checked) #sevenths-e-maj7,
main:has(#voicing-7th:checked):has(#key-b-major:checked):has(#chord-b-major-4:checked) #sevenths-e-maj7,
main:has(#voicing-7th:checked):has(#key-gs-minor:checked):has(#chord-gs-minor-6:checked) #sevenths-e-maj7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-c-major:checked):has(#chord-c-major-4:checked) #sevenths-f-maj7,
main:has(#voicing-7th:checked):has(#key-a-minor:checked):has(#chord-a-minor-6:checked) #sevenths-f-maj7,
main:has(#voicing-7th:checked):has(#key-f-major:checked):has(#chord-f-major-1:checked) #sevenths-f-maj7,
main:has(#voicing-7th:checked):has(#key-d-minor:checked):has(#chord-d-minor-3:checked) #sevenths-f-maj7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-fs-major:checked):has(#chord-fs-major-1:checked) #sevenths-fs-maj7,
main:has(#voicing-7th:checked):has(#key-ds-minor:checked):has(#chord-ds-minor-3:checked) #sevenths-fs-maj7,
main:has(#voicing-7th:checked):has(#key-db-major:checked):has(#chord-db-major-4:checked) #sevenths-fs-maj7,
main:has(#voicing-7th:checked):has(#key-bb-minor:checked):has(#chord-bb-minor-6:checked) #sevenths-fs-maj7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-g-major:checked):has(#chord-g-major-1:checked) #sevenths-g-maj7,
main:has(#voicing-7th:checked):has(#key-e-minor:checked):has(#chord-e-minor-3:checked) #sevenths-g-maj7,
main:has(#voicing-7th:checked):has(#key-d-major:checked):has(#chord-d-major-4:checked) #sevenths-g-maj7,
main:has(#voicing-7th:checked):has(#key-b-minor:checked):has(#chord-b-minor-6:checked) #sevenths-g-maj7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-ab-major:checked):has(#chord-ab-major-1:checked) #sevenths-gs-maj7,
main:has(#voicing-7th:checked):has(#key-f-minor:checked):has(#chord-f-minor-3:checked) #sevenths-gs-maj7,
main:has(#voicing-7th:checked):has(#key-eb-major:checked):has(#chord-eb-major-4:checked) #sevenths-gs-maj7,
main:has(#voicing-7th:checked):has(#key-c-minor:checked):has(#chord-c-minor-6:checked) #sevenths-gs-maj7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-a-major:checked):has(#chord-a-major-1:checked) #sevenths-a-maj7,
main:has(#voicing-7th:checked):has(#key-fs-minor:checked):has(#chord-fs-minor-3:checked) #sevenths-a-maj7,
main:has(#voicing-7th:checked):has(#key-e-major:checked):has(#chord-e-major-4:checked) #sevenths-a-maj7,
main:has(#voicing-7th:checked):has(#key-cs-minor:checked):has(#chord-cs-minor-6:checked) #sevenths-a-maj7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-bb-major:checked):has(#chord-bb-major-1:checked) #sevenths-as-maj7,
main:has(#voicing-7th:checked):has(#key-g-minor:checked):has(#chord-g-minor-3:checked) #sevenths-as-maj7,
main:has(#voicing-7th:checked):has(#key-f-major:checked):has(#chord-f-major-4:checked) #sevenths-as-maj7,
main:has(#voicing-7th:checked):has(#key-d-minor:checked):has(#chord-d-minor-6:checked) #sevenths-as-maj7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-b-major:checked):has(#chord-b-major-1:checked) #sevenths-b-maj7,
main:has(#voicing-7th:checked):has(#key-gs-minor:checked):has(#chord-gs-minor-3:checked) #sevenths-b-maj7,
main:has(#voicing-7th:checked):has(#key-fs-major:checked):has(#chord-fs-major-4:checked) #sevenths-b-maj7,
main:has(#voicing-7th:checked):has(#key-ds-minor:checked):has(#chord-ds-minor-6:checked) #sevenths-b-maj7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-ab-major:checked):has(#chord-ab-major-3:checked) #sevenths-c-min7,
main:has(#voicing-7th:checked):has(#key-f-minor:checked):has(#chord-f-minor-5:checked) #sevenths-c-min7,
main:has(#voicing-7th:checked):has(#key-eb-major:checked):has(#chord-eb-major-6:checked) #sevenths-c-min7,
main:has(#voicing-7th:checked):has(#key-c-minor:checked):has(#chord-c-minor-1:checked) #sevenths-c-min7,
main:has(#voicing-7th:checked):has(#key-bb-major:checked):has(#chord-bb-major-2:checked) #sevenths-c-min7,
main:has(#voicing-7th:checked):has(#key-g-minor:checked):has(#chord-g-minor-4:checked) #sevenths-c-min7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-a-major:checked):has(#chord-a-major-3:checked) #sevenths-cs-min7,
main:has(#voicing-7th:checked):has(#key-fs-minor:checked):has(#chord-fs-minor-5:checked) #sevenths-cs-min7,
main:has(#voicing-7th:checked):has(#key-e-major:checked):has(#chord-e-major-6:checked) #sevenths-cs-min7,
main:has(#voicing-7th:checked):has(#key-cs-minor:checked):has(#chord-cs-minor-1:checked) #sevenths-cs-min7,
main:has(#voicing-7th:checked):has(#key-b-major:checked):has(#chord-b-major-2:checked) #sevenths-cs-min7,
main:has(#voicing-7th:checked):has(#key-gs-minor:checked):has(#chord-gs-minor-4:checked) #sevenths-cs-min7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-c-major:checked):has(#chord-c-major-2:checked) #sevenths-d-min7,
main:has(#voicing-7th:checked):has(#key-a-minor:checked):has(#chord-a-minor-4:checked) #sevenths-d-min7,
main:has(#voicing-7th:checked):has(#key-bb-major:checked):has(#chord-bb-major-3:checked) #sevenths-d-min7,
main:has(#voicing-7th:checked):has(#key-g-minor:checked):has(#chord-g-minor-5:checked) #sevenths-d-min7,
main:has(#voicing-7th:checked):has(#key-f-major:checked):has(#chord-f-major-6:checked) #sevenths-d-min7,
main:has(#voicing-7th:checked):has(#key-d-minor:checked):has(#chord-d-minor-1:checked) #sevenths-d-min7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-b-major:checked):has(#chord-b-major-3:checked) #sevenths-ds-min7,
main:has(#voicing-7th:checked):has(#key-gs-minor:checked):has(#chord-gs-minor-5:checked) #sevenths-ds-min7,
main:has(#voicing-7th:checked):has(#key-fs-major:checked):has(#chord-fs-major-6:checked) #sevenths-ds-min7,
main:has(#voicing-7th:checked):has(#key-ds-minor:checked):has(#chord-ds-minor-1:checked) #sevenths-ds-min7,
main:has(#voicing-7th:checked):has(#key-db-major:checked):has(#chord-db-major-2:checked) #sevenths-ds-min7,
main:has(#voicing-7th:checked):has(#key-bb-minor:checked):has(#chord-bb-minor-4:checked) #sevenths-ds-min7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-c-major:checked):has(#chord-c-major-3:checked) #sevenths-e-min7,
main:has(#voicing-7th:checked):has(#key-a-minor:checked):has(#chord-a-minor-5:checked) #sevenths-e-min7,
main:has(#voicing-7th:checked):has(#key-g-major:checked):has(#chord-g-major-6:checked) #sevenths-e-min7,
main:has(#voicing-7th:checked):has(#key-e-minor:checked):has(#chord-e-minor-1:checked) #sevenths-e-min7,
main:has(#voicing-7th:checked):has(#key-d-major:checked):has(#chord-d-major-2:checked) #sevenths-e-min7,
main:has(#voicing-7th:checked):has(#key-b-minor:checked):has(#chord-b-minor-4:checked) #sevenths-e-min7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-db-major:checked):has(#chord-db-major-3:checked) #sevenths-f-min7,
main:has(#voicing-7th:checked):has(#key-bb-minor:checked):has(#chord-bb-minor-5:checked) #sevenths-f-min7,
main:has(#voicing-7th:checked):has(#key-ab-major:checked):has(#chord-ab-major-6:checked) #sevenths-f-min7,
main:has(#voicing-7th:checked):has(#key-f-minor:checked):has(#chord-f-minor-1:checked) #sevenths-f-min7,
main:has(#voicing-7th:checked):has(#key-eb-major:checked):has(#chord-eb-major-2:checked) #sevenths-f-min7,
main:has(#voicing-7th:checked):has(#key-c-minor:checked):has(#chord-c-minor-4:checked) #sevenths-f-min7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-d-major:checked):has(#chord-d-major-3:checked) #sevenths-fs-min7,
main:has(#voicing-7th:checked):has(#key-b-minor:checked):has(#chord-b-minor-5:checked) #sevenths-fs-min7,
main:has(#voicing-7th:checked):has(#key-a-major:checked):has(#chord-a-major-6:checked) #sevenths-fs-min7,
main:has(#voicing-7th:checked):has(#key-fs-minor:checked):has(#chord-fs-minor-1:checked) #sevenths-fs-min7,
main:has(#voicing-7th:checked):has(#key-e-major:checked):has(#chord-e-major-2:checked) #sevenths-fs-min7,
main:has(#voicing-7th:checked):has(#key-cs-minor:checked):has(#chord-cs-minor-4:checked) #sevenths-fs-min7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-eb-major:checked):has(#chord-eb-major-3:checked) #sevenths-g-min7,
main:has(#voicing-7th:checked):has(#key-c-minor:checked):has(#chord-c-minor-5:checked) #sevenths-g-min7,
main:has(#voicing-7th:checked):has(#key-bb-major:checked):has(#chord-bb-major-6:checked) #sevenths-g-min7,
main:has(#voicing-7th:checked):has(#key-g-minor:checked):has(#chord-g-minor-1:checked) #sevenths-g-min7,
main:has(#voicing-7th:checked):has(#key-f-major:checked):has(#chord-f-major-2:checked) #sevenths-g-min7,
main:has(#voicing-7th:checked):has(#key-d-minor:checked):has(#chord-d-minor-4:checked) #sevenths-g-min7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-e-major:checked):has(#chord-e-major-3:checked) #sevenths-gs-min7,
main:has(#voicing-7th:checked):has(#key-cs-minor:checked):has(#chord-cs-minor-5:checked) #sevenths-gs-min7,
main:has(#voicing-7th:checked):has(#key-b-major:checked):has(#chord-b-major-6:checked) #sevenths-gs-min7,
main:has(#voicing-7th:checked):has(#key-gs-minor:checked):has(#chord-gs-minor-1:checked) #sevenths-gs-min7,
main:has(#voicing-7th:checked):has(#key-fs-major:checked):has(#chord-fs-major-2:checked) #sevenths-gs-min7,
main:has(#voicing-7th:checked):has(#key-ds-minor:checked):has(#chord-ds-minor-4:checked) #sevenths-gs-min7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-c-major:checked):has(#chord-c-major-6:checked) #sevenths-a-min7,
main:has(#voicing-7th:checked):has(#key-a-minor:checked):has(#chord-a-minor-1:checked) #sevenths-a-min7,
main:has(#voicing-7th:checked):has(#key-g-major:checked):has(#chord-g-major-2:checked) #sevenths-a-min7,
main:has(#voicing-7th:checked):has(#key-e-minor:checked):has(#chord-e-minor-4:checked) #sevenths-a-min7,
main:has(#voicing-7th:checked):has(#key-f-major:checked):has(#chord-f-major-3:checked) #sevenths-a-min7,
main:has(#voicing-7th:checked):has(#key-d-minor:checked):has(#chord-d-minor-5:checked) #sevenths-a-min7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-fs-major:checked):has(#chord-fs-major-3:checked) #sevenths-as-min7,
main:has(#voicing-7th:checked):has(#key-ds-minor:checked):has(#chord-ds-minor-5:checked) #sevenths-as-min7,
main:has(#voicing-7th:checked):has(#key-db-major:checked):has(#chord-db-major-6:checked) #sevenths-as-min7,
main:has(#voicing-7th:checked):has(#key-bb-minor:checked):has(#chord-bb-minor-1:checked) #sevenths-as-min7,
main:has(#voicing-7th:checked):has(#key-ab-major:checked):has(#chord-ab-major-2:checked) #sevenths-as-min7,
main:has(#voicing-7th:checked):has(#key-f-minor:checked):has(#chord-f-minor-4:checked) #sevenths-as-min7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-g-major:checked):has(#chord-g-major-3:checked) #sevenths-b-min7,
main:has(#voicing-7th:checked):has(#key-e-minor:checked):has(#chord-e-minor-5:checked) #sevenths-b-min7,
main:has(#voicing-7th:checked):has(#key-d-major:checked):has(#chord-d-major-6:checked) #sevenths-b-min7,
main:has(#voicing-7th:checked):has(#key-b-minor:checked):has(#chord-b-minor-1:checked) #sevenths-b-min7,
main:has(#voicing-7th:checked):has(#key-a-major:checked):has(#chord-a-major-2:checked) #sevenths-b-min7,
main:has(#voicing-7th:checked):has(#key-fs-minor:checked):has(#chord-fs-minor-4:checked) #sevenths-b-min7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-f-major:checked):has(#chord-f-major-5:checked) #sevenths-c-dom7,
main:has(#voicing-7th:checked):has(#key-d-minor:checked):has(#chord-d-minor-7:checked) #sevenths-c-dom7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-fs-major:checked):has(#chord-fs-major-5:checked) #sevenths-cs-dom7,
main:has(#voicing-7th:checked):has(#key-ds-minor:checked):has(#chord-ds-minor-7:checked) #sevenths-cs-dom7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-g-major:checked):has(#chord-g-major-5:checked) #sevenths-d-dom7,
main:has(#voicing-7th:checked):has(#key-e-minor:checked):has(#chord-e-minor-7:checked) #sevenths-d-dom7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-ab-major:checked):has(#chord-ab-major-5:checked) #sevenths-ds-dom7,
main:has(#voicing-7th:checked):has(#key-f-minor:checked):has(#chord-f-minor-7:checked) #sevenths-ds-dom7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-a-major:checked):has(#chord-a-major-5:checked) #sevenths-e-dom7,
main:has(#voicing-7th:checked):has(#key-fs-minor:checked):has(#chord-fs-minor-7:checked) #sevenths-e-dom7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-bb-major:checked):has(#chord-bb-major-5:checked) #sevenths-f-dom7,
main:has(#voicing-7th:checked):has(#key-g-minor:checked):has(#chord-g-minor-7:checked) #sevenths-f-dom7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-b-major:checked):has(#chord-b-major-5:checked) #sevenths-fs-dom7,
main:has(#voicing-7th:checked):has(#key-gs-minor:checked):has(#chord-gs-minor-7:checked) #sevenths-fs-dom7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-c-major:checked):has(#chord-c-major-5:checked) #sevenths-g-dom7,
main:has(#voicing-7th:checked):has(#key-a-minor:checked):has(#chord-a-minor-7:checked) #sevenths-g-dom7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-db-major:checked):has(#chord-db-major-5:checked) #sevenths-gs-dom7,
main:has(#voicing-7th:checked):has(#key-bb-minor:checked):has(#chord-bb-minor-7:checked) #sevenths-gs-dom7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-d-major:checked):has(#chord-d-major-5:checked) #sevenths-a-dom7,
main:has(#voicing-7th:checked):has(#key-b-minor:checked):has(#chord-b-minor-7:checked) #sevenths-a-dom7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-eb-major:checked):has(#chord-eb-major-5:checked) #sevenths-as-dom7,
main:has(#voicing-7th:checked):has(#key-c-minor:checked):has(#chord-c-minor-7:checked) #sevenths-as-dom7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-e-major:checked):has(#chord-e-major-5:checked) #sevenths-b-dom7,
main:has(#voicing-7th:checked):has(#key-cs-minor:checked):has(#chord-cs-minor-7:checked) #sevenths-b-dom7 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-db-major:checked):has(#chord-db-major-7:checked) #sevenths-c-m7b5,
main:has(#voicing-7th:checked):has(#key-bb-minor:checked):has(#chord-bb-minor-2:checked) #sevenths-c-m7b5 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-d-major:checked):has(#chord-d-major-7:checked) #sevenths-cs-m7b5,
main:has(#voicing-7th:checked):has(#key-b-minor:checked):has(#chord-b-minor-2:checked) #sevenths-cs-m7b5 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-eb-major:checked):has(#chord-eb-major-7:checked) #sevenths-d-m7b5,
main:has(#voicing-7th:checked):has(#key-c-minor:checked):has(#chord-c-minor-2:checked) #sevenths-d-m7b5 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-e-major:checked):has(#chord-e-major-7:checked) #sevenths-ds-m7b5,
main:has(#voicing-7th:checked):has(#key-cs-minor:checked):has(#chord-cs-minor-2:checked) #sevenths-ds-m7b5 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-f-major:checked):has(#chord-f-major-7:checked) #sevenths-e-m7b5,
main:has(#voicing-7th:checked):has(#key-d-minor:checked):has(#chord-d-minor-2:checked) #sevenths-e-m7b5 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-fs-major:checked):has(#chord-fs-major-7:checked) #sevenths-f-m7b5,
main:has(#voicing-7th:checked):has(#key-ds-minor:checked):has(#chord-ds-minor-2:checked) #sevenths-f-m7b5 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-g-major:checked):has(#chord-g-major-7:checked) #sevenths-fs-m7b5,
main:has(#voicing-7th:checked):has(#key-e-minor:checked):has(#chord-e-minor-2:checked) #sevenths-fs-m7b5 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-ab-major:checked):has(#chord-ab-major-7:checked) #sevenths-g-m7b5,
main:has(#voicing-7th:checked):has(#key-f-minor:checked):has(#chord-f-minor-2:checked) #sevenths-g-m7b5 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-a-major:checked):has(#chord-a-major-7:checked) #sevenths-gs-m7b5,
main:has(#voicing-7th:checked):has(#key-fs-minor:checked):has(#chord-fs-minor-2:checked) #sevenths-gs-m7b5 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-bb-major:checked):has(#chord-bb-major-7:checked) #sevenths-a-m7b5,
main:has(#voicing-7th:checked):has(#key-g-minor:checked):has(#chord-g-minor-2:checked) #sevenths-a-m7b5 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-b-major:checked):has(#chord-b-major-7:checked) #sevenths-as-m7b5,
main:has(#voicing-7th:checked):has(#key-gs-minor:checked):has(#chord-gs-minor-2:checked) #sevenths-as-m7b5 {
  display: grid;
}
main:has(#voicing-7th:checked):has(#key-c-major:checked):has(#chord-c-major-7:checked) #sevenths-b-m7b5,
main:has(#voicing-7th:checked):has(#key-a-minor:checked):has(#chord-a-minor-2:checked) #sevenths-b-m7b5 {
  display: grid;
}