@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        min-height: 100svh;
        line-height: var(--line-height-normal);
        -webkit-font-smoothing: antialiased;
    }

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

    :is(input, button, textarea, select) {
        font: inherit;
        color: inherit;
        letter-spacing: inherit;
    }

    button {
        background: none;
        border: none;
        cursor: pointer;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    :is(ul, ol) {
        list-style: none;
        padding: 0;
    }

    :focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }
}