.chord-card {
  border: 1px solid #d8d8d8;
  border-radius: var(--radius, 12px);
  padding: 1rem;
  background: #fff;
  width: max-content;
}

.chord-card h2 {
  margin-top: 0;
  font-size: 1.2rem;
  font-weight: 500;
  color: #1a1a1a;
}

.fretboard {
  border: 1px solid #0001;
  background: #c53737d1;
}

.fretboard .fret {
  background: #fff !important;
}

.fret {
  border: .5px solid #0002;
  border-left: 2px solid #fff;
  border-right: 2px solid #0001;
  background: #fff;
  color: #fff;
}

.fret[data-dot]::after {
  background: #8ab4f8;
  border: 1px solid #4a7bd4;
}

.fret:empty {
  background: #fff;
}

.alternatives h3 {
  color: #666;
}

.fret.barre::after {
  background: transparent;
  border: 1px solid #4a7bd4;
  z-index: 1;
}

.barre-line {
  background: #1a1a1a;
  color: white;
}

.fret[muted] {
  color: #1a1a1a;
}