.interval-0 { background: var(--deg-root); color: var(--on-deg-root); } 
.interval-3, .interval-4 { background: var(--deg-third); color: var(--on-deg-third); } 
.interval-6, .interval-7 { background: var(--deg-fifth); color: var(--on-deg-fifth); border: 1px solid var(--deg-fifth-ring); } 
.interval-10, .interval-11 { background: var(--deg-seventh); color: var(--on-deg-seventh); } 

/* tensions (b9, 9, 11, b13, 13): light outline instead of a solid dot,
   readable without competing with the chord tones */
.interval-1, .interval-2, .interval-5, .interval-8, .interval-9 { 
    background: var(--deg-tension);   /* filled: hides the string that would otherwise cut through the label */
    color: var(--on-deg-tension); 
    border: 1.5px solid var(--deg-tension-ring);
}