@layer root {
    body:has(ruby-switch[value=none]) rt {
        display: none;
    }

    /* When the ruby switch is set to "hidden", hide the ruby base and only show the <rt>. */
    body:has(ruby-switch[value=hidden]) ruby > span {
        display: none;
    }

    body:has(ruby-switch[value=hidden]) rt {
        color: inherit;
        display: inline;
        font-size: inherit;
        white-space: inherit;
    }

    body:has(ruby-switch[value=hidden]) :is(h1, h2, h3, h4, h5, h6) rt {
        font-family: var(--font-family-heading);
        font-weight: bold;
    }

    rt { transition: color 0.3s; }
    ruby:hover rt { transition: color 0.3s; }
}