svg.chord-diag text {
  text-anchor: middle;
  font-size: 0.5rem;
  stroke-width: 0;
}
svg.chord-diag .fret {
  stroke-width: 0.7;
  stroke: var(--gray);
}
svg.chord-diag .fret rect {
  fill: var(--gray);
}
svg.chord-diag .fret .basefret {
  font-size: 0.8rem;
  fill: var(--gray);
}
svg.chord-diag .barre {
  fill: var(--accent);
}
svg.chord-diag .barre .capo {
  fill: var(--gray);
  fill-opacity: 0.3;
}
svg.chord-diag .barre text {
  fill: var(--text-inverted);
  font-weight: 500;
}
svg.chord-diag .dot {
  fill: var(--accent);
  stroke-width: 1;
  stroke: transparent;
}
svg.chord-diag .dot text {
  fill: var(--text-inverted);
  font-weight: 500;
}
svg.chord-diag .dot.open circle,
svg.chord-diag .dot.muted line {
  fill: transparent;
  stroke: var(--accent);
}