.ui-chord {
  --ui-chord-1: light-dark(#2a78d6, #3987e5); --ui-chord-2: light-dark(#eb6834, #d95926);
  --ui-chord-3: light-dark(#1baf7a, #199e70); --ui-chord-4: light-dark(#eda100, #c98500);
  --ui-chord-5: light-dark(#e87ba4, #d55181); --ui-chord-6: light-dark(#008300, #008300);
  --ui-chord-7: light-dark(#6250d6, #9085e9); --ui-chord-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-chord-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-chord-s1 { --c: var(--ui-chord-1); } .ui-chord-s2 { --c: var(--ui-chord-2); } .ui-chord-s3 { --c: var(--ui-chord-3); }
.ui-chord-s4 { --c: var(--ui-chord-4); } .ui-chord-s5 { --c: var(--ui-chord-5); } .ui-chord-s6 { --c: var(--ui-chord-6); }
.ui-chord-s7 { --c: var(--ui-chord-7); } .ui-chord-s8 { --c: var(--ui-chord-8); }
.ui-chord-box { max-width: 100%; aspect-ratio: 1; margin: 0 auto; }
.ui-chord-box svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ui-chord-arc { fill: var(--c); stroke: var(--ui-bg); stroke-width: .5; }
.ui-chord-rib { fill: var(--c); fill-opacity: .6; stroke: var(--ui-bg); stroke-width: .4; transition: opacity .15s ease; }
.ui-chord-name { fill: var(--ui-fg); font: 500 11px var(--ui-font); dominant-baseline: central; }
.ui-chord-box svg:has(.ui-chord-rib:hover) .ui-chord-rib:not(:hover) { opacity: .12; }
.ui-chord-box svg:has(.ui-chord-g1:hover) .ui-chord-rib:not(.ui-chord-t1),
.ui-chord-box svg:has(.ui-chord-g2:hover) .ui-chord-rib:not(.ui-chord-t2),
.ui-chord-box svg:has(.ui-chord-g3:hover) .ui-chord-rib:not(.ui-chord-t3),
.ui-chord-box svg:has(.ui-chord-g4:hover) .ui-chord-rib:not(.ui-chord-t4),
.ui-chord-box svg:has(.ui-chord-g5:hover) .ui-chord-rib:not(.ui-chord-t5),
.ui-chord-box svg:has(.ui-chord-g6:hover) .ui-chord-rib:not(.ui-chord-t6),
.ui-chord-box svg:has(.ui-chord-g7:hover) .ui-chord-rib:not(.ui-chord-t7),
.ui-chord-box svg:has(.ui-chord-g8:hover) .ui-chord-rib:not(.ui-chord-t8) { opacity: .08; }
@media (prefers-reduced-motion: reduce) { .ui-chord-rib { transition: none; } }