.song-section-content > .song-section-panel[hidden] { display: none !important; }

.used-chords-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) 22.5rem;
  gap: .9rem;
  align-items: start;
}
.used-chords-layout > .card { min-width: 0; margin: 0; }
.interactive-fretboard-card {
  width: 100%;
  box-sizing: border-box;
  justify-self: end;
  overflow: hidden;
  padding: .85rem;
  border-color: var(--deep-indigo-frame-soft, rgba(134,103,255,.52));
  background:
    radial-gradient(circle at 14% 0, rgba(116,81,255,.24), transparent 16rem),
    linear-gradient(145deg, rgba(25,19,77,.94), rgba(7,9,38,.97));
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 16px 36px rgba(3,1,28,.34), 0 0 26px rgba(96,55,223,.18);
}
.interactive-fretboard-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: .8rem;
  margin-bottom: .85rem;
}
.interactive-fretboard-heading .eyebrow { color: #ffbf45; font-size: .63rem; }
.interactive-fretboard-heading h2 { margin: .12rem 0 0; color: #fff; font-family: Georgia, serif; font-size: 1.18rem; }
.interactive-fretboard-heading small { max-width: 8rem; color: rgba(231,225,255,.62); font-size: .66rem; text-align: right; }
.interactive-fretboard-scroll { overflow-x: auto; padding: .18rem; scrollbar-color: rgba(142,108,255,.7) transparent; }
.interactive-fretboard-grid {
  display: grid;
  grid-template-columns: 2.75rem repeat(6, minmax(2.7rem, 1fr));
  min-width: 18.95rem;
  overflow: hidden;
  border: 1px solid rgba(177,153,255,.46);
  border-radius: 14px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 6px),
    linear-gradient(112deg, rgba(38,28,92,.98), rgba(15,18,63,.98) 55%, rgba(28,20,78,.98));
  box-shadow: inset 0 1px rgba(255,255,255,.13), inset 0 -12px 28px rgba(1,2,24,.3);
}
.fretboard-grid-corner,
.fretboard-string-heading,
.fretboard-row-label {
  display: flex;
  min-height: 2.55rem;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(180,160,255,.18);
  border-bottom: 2px solid rgba(239,232,255,.44);
  background: rgba(10,10,47,.72);
  color: rgba(239,234,255,.72);
  font-size: .6rem;
  font-weight: 750;
  text-align: center;
}
.fretboard-string-heading { flex-direction: column; gap: .02rem; }
.fretboard-string-heading strong { color: #fff; font-size: .88rem; line-height: 1; }
.fretboard-string-heading small { color: rgba(216,207,255,.55); font-size: .53rem; }
.fretboard-row-label {
  min-height: 3.75rem;
  padding: .2rem;
  border-bottom: 1px solid rgba(217,208,255,.2);
  color: rgba(229,223,255,.68);
  line-height: 1.05;
}
.fretboard-note-button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 3.75rem;
  place-items: center;
  padding: .25rem;
  border: 0;
  border-right: 1px solid rgba(204,193,255,.15);
  border-bottom: 1px solid rgba(226,220,255,.27);
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  isolation: isolate;
}
.fretboard-note-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 50%;
  width: 1.6px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(91,73,37,.75), #fff2b8 42%, rgba(144,108,47,.85));
  box-shadow: 0 0 4px rgba(255,224,142,.34);
}
.fretboard-note-button:hover,
.fretboard-note-button:focus-visible { z-index: 2; background: rgba(117,83,255,.13); outline: none; }
.fretboard-note-marker {
  display: inline-flex;
  width: 2.42rem;
  height: 2.42rem;
  align-items: baseline;
  justify-content: center;
  border: 1px solid hsla(var(--note-hue),100%,88%,.86);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,.65), transparent 35%),
    linear-gradient(145deg, hsl(var(--note-hue),92%,63%), hsl(var(--note-hue),82%,42%));
  color: #08071b;
  box-shadow: inset 0 -4px 8px rgba(10,4,35,.22), 0 3px 7px rgba(2,1,24,.42), 0 0 9px hsla(var(--note-hue),100%,60%,.26);
  font-size: .91rem;
  font-weight: 900;
  line-height: 2.3rem;
  text-shadow: 0 1px rgba(255,255,255,.25);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.fretboard-note-marker small { margin-left: .04rem; font-size: .53rem; font-weight: 800; opacity: .7; }
.fretboard-note-button:hover .fretboard-note-marker,
.fretboard-note-button:focus-visible .fretboard-note-marker,
.fretboard-note-button.is-active .fretboard-note-marker {
  transform: translateY(-1px) scale(1.08);
  box-shadow: inset 0 -4px 8px rgba(10,4,35,.18), 0 0 0 2px rgba(255,255,255,.8), 0 0 18px hsla(var(--note-hue),100%,64%,.75);
}
.interactive-fretboard-footer { display: grid; gap: .16rem; margin-top: .7rem; }
.interactive-fretboard-footer output { color: #fff; font-size: .72rem; font-weight: 750; }
.interactive-fretboard-footer small { color: rgba(218,211,255,.56); font-size: .62rem; text-align: left; }

@media (max-width: 800px) {
  .used-chords-layout { grid-template-columns: 1fr; }
  .interactive-fretboard-card { order: -1; }
}
@media (max-width: 560px) {
  .used-chords-layout { width: calc(100vw - 3.6rem); max-width: 100%; gap: .65rem; }
  .interactive-fretboard-card { width: 100%; max-width: 100%; box-sizing: border-box; padding: .65rem; }
  .interactive-fretboard-heading { align-items: start; }
  .interactive-fretboard-heading h2 { font-size: 1.03rem; }
  .interactive-fretboard-heading small { max-width: 8rem; font-size: .61rem; }
  .interactive-fretboard-grid { grid-template-columns: 2.65rem repeat(6, minmax(2.55rem,1fr)); min-width: 18rem; }
  .fretboard-grid-corner,
  .fretboard-string-heading { min-height: 2.3rem; }
  .fretboard-row-label,
  .fretboard-note-button { min-height: 3.25rem; }
  .fretboard-row-label { font-size: .54rem; }
  .fretboard-note-marker { width: 2.08rem; height: 2.08rem; font-size: .78rem; line-height: 2rem; }
  .fretboard-note-marker small { font-size: .45rem; }
  .interactive-fretboard-footer { flex-direction: column; gap: .2rem; }
  .interactive-fretboard-footer small { text-align: left; }
}