.rainbow-box {
    width: 100%;
    height: 30px;
    border-radius: 5px;
    margin-block-start: var(--space-s);
    background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}

.typographic-scale {
    margin-block-start: var(--space-s);
    border: .25px solid var(--color-bq);
    padding: var(--space-xs);
}

.note-1-5.perfect-fifth
.note-1-5.minor-third {
    font-size: 1em
}

.note-2-5.perfect-fifth {
    font-size: calc(1em * 1.5);
}

.note-3-5.perfect-fifth {
    font-size: calc(1em * 1.5 * 1.5);
}

.note-4-5.perfect-fifth {
    font-size: calc(1em * 1.5 * 1.5 * 1.5);
}

.note-5-5.perfect-fifth {
    font-size: calc(1em * 1.5 * 1.5 * 1.5 * 1.5);
}

.note-2-5.minor-third {
    font-size: calc(1em * 1.25);
}

.note-3-5.minor-third {
    font-size: calc(1em * 1.25 * 1.25);
}

.note-4-5.minor-third {
    font-size: calc(1em * 1.25 * 1.25 * 1.25);
}

.note-5-5.minor-third {
    font-size: calc(1em * 1.25 * 1.25 * 1.25 * 1.25);
}

p + math {
    margin-block-start: var(--space-s);
}

picture:has(img[src$=".svg"]) {
    background-color: white;
}

.typographic-scale math {
    color: var(--color-bq);
    font-style: italic;
    font-size: var(--step--2);
}

.typographic-scale span {
    display: inline-block;
    margin-inline-end: var(--space-3xs);
}