@layer base {
    body,
    html {
        background-color: var(--color-background);
        overflow-x: hidden;
    }

    p {
        font-size: var(--font-size-base);
        color: var(--color-prose);
    }

    @view-transition {
        navigation: auto;
    }

    @media (prefers-color-scheme: dark) {
        html:not([data-theme]) .theme-img-dark {
            display: block;
        }
        html:not([data-theme]) .theme-img-light {
            display: none;
        }
    }

    /* explicit override wins regardless of OS */
    html[data-theme="light"] .theme-img-dark {
        display: none;
    }
    html[data-theme="light"] .theme-img-light {
        display: block;
    }
    html[data-theme="dark"] .theme-img-dark {
        display: block;
    }
    html[data-theme="dark"] .theme-img-light {
        display: none;
    }

    .theme-img-dark {
        display: none;
    }
}