.triad-reference-diagram {
  display: grid;
  place-items: center;
  min-height: 255px;
  background: linear-gradient(180deg, #08121a, #07100e);
  border-color: #244438;
}
.triad-reference-diagram .ht-reference-triad {
  display: block;
  width: min(100%, 220px);
  height: 270px;
  color: #d9e8e2;
}
.ht-ref-string { stroke: #8ca19b; stroke-width: 2; }
.ht-ref-fret { stroke: #52665f; stroke-width: 1.4; }
.ht-ref-fret.ht-ref-nut { stroke: #d8e7e2; stroke-width: 4; }
.ht-ref-muted { fill: #83938e; font-size: 21px; font-weight: 900; text-anchor: middle; }
.ht-ref-position { fill: #92a69f; font-size: 13px; font-weight: 900; text-anchor: end; }
.ht-ref-dot { fill: #08110e; stroke: #55f3ab; stroke-width: 2; }
.ht-ref-dot.ht-ref-root { fill: #55f3ab; stroke: #d7ffeb; stroke-width: 2.4; }
.ht-ref-label { fill: #eafff4; font-size: 8px; font-weight: 950; text-anchor: middle; dominant-baseline: central; }
.ht-ref-label.ht-ref-root-label { fill: #06100c; }
.triad-reference-card > small { min-height: 1.2em; }