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

    
    body {
        margin: 0;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin-block-end: 0;
    }

    
    ul[role="list"],
    ol[role="list"] {
        list-style: none;
    }

    
    body {
        min-height: 100vh;
        min-height: 100dvh;
        line-height: 1.5;
    }

    
    h1,
    h2,
    h3,
    h4,
    button,
    input,
    label {
        line-height: 1.1;
    }

    
    h1,
    h2,
    h3,
    h4 {
        text-wrap: balance;
    }

    
    img,
    picture {
        max-width: 100%;
        display: block;
    }

    
    input,
    button,
    textarea,
    select {
        font-family: inherit;
        font-size: inherit;
    }

    
    textarea:not([rows]) {
        min-height: 10em;
    }

    
    :target {
        scroll-margin-block: 5ex;
    }

    a {
        color: var(--accent);
        text-decoration-thickness: 0.05em;
        transition: text-decoration-thickness ease-in-out 100ms;
    }
    
    a:hover {
        text-decoration-thickness: 0.2em;
    }
}