@layer reset {
    /* Not wrapped in :where(): * is already zero-specificity, and :where() cannot hold pseudo-elements. */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    :where(html) {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-behavior: smooth;
    }

    :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) {
        margin: 0;
    }

    :where(ul, ol) {
        padding: 0;
    }

    :where(ul[role='list'], ol[role='list']) {
        list-style: none;
    }

    :where(h1, h2, h3, h4, h5, h6) {
        font-size: inherit;
        font-weight: inherit;
        text-wrap: balance;
    }

    :where(p, li, figcaption) {
        text-wrap: pretty;
    }

    :where(img, picture, svg, video, canvas) {
        display: block;
        max-width: 100%;
    }

    :where(img, picture, svg, video) {
        height: auto;
    }

    /* Keeps the <picture> wrapper out of the box tree, so rules written against the <img> as a direct
       flex or grid child still match it. */
    :where(picture) {
        display: contents;
    }

    :where(input, button, textarea, select) {
        font: inherit;
        color: inherit;
        background: none;
        border: 0;
    }

    :where(button) {
        cursor: pointer;
    }

    :where(a) {
        color: inherit;
    }

    :where(table) {
        border-collapse: collapse;
    }

    :where(dialog) {
        max-width: 100%;
        border: 0;
        padding: 0;
    }

    :where(:focus-visible) {
        outline: var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset);
    }

    @media (prefers-reduced-motion: reduce) {
        :where(html) {
            scroll-behavior: auto;
        }
    }
}