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

    html {
        min-width: 20rem;
        background: var(--casey-bg);
        color: var(--casey-text);
        font-family: var(--casey-font-sans);
        font-size: 100%;
        text-size-adjust: 100%;
    }

    body {
        min-height: 100vh;
        margin: 0;
        overflow-x: clip;
        background: var(--casey-bg);
        color: var(--casey-text);
        font-family: inherit;
        font-size: var(--casey-font-body);
        font-weight: var(--casey-font-weight-body);
        line-height: var(--casey-line-body);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--casey-text);
        font-family: inherit;
        font-weight: var(--casey-font-weight-heading);
        text-wrap: balance;
    }

    h1 {
        font-size: var(--casey-font-title);
        font-weight: var(--casey-font-weight-title);
        line-height: var(--casey-line-title);
    }

    h2,
    h3 {
        font-size: var(--casey-font-heading);
        line-height: var(--casey-line-heading);
    }

    p {
        text-wrap: pretty;
    }

    a:any-link {
        color: var(--casey-link-color, var(--casey-blue));
        font-weight: var(--casey-font-weight-link);
        text-decoration: none;
    }

    a:any-link:hover,
    a:any-link:focus-visible,
    a:any-link:active {
        color: var(--casey-link-color, var(--casey-blue));
        text-decoration: none;
    }

    code,
    pre,
    samp,
    kbd {
        font-family: var(--casey-font-mono);
        font-size: var(--casey-font-code);
        line-height: var(--casey-line-code);
    }

    pre {
        max-width: 100%;
        overflow: auto;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
    }

    button,
    [href],
    input,
    select,
    textarea,
    [tabindex]:not([tabindex="-1"]) {
        scroll-margin: var(--casey-space-6);
    }

    :where(button, [href], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
        outline: var(--casey-focus-ring-width) solid var(--casey-focus);
        outline-offset: var(--casey-focus-ring-offset);
        box-shadow: none;
    }

    :where(button, input, select, textarea):disabled,
    [aria-disabled="true"] {
        cursor: not-allowed;
        opacity: 0.58;
    }

    ::selection {
        background: var(--casey-selected-bg);
        color: var(--casey-text);
    }

    .casey-substantial-text {
        width: min(100%, var(--casey-message-width));
        font-size: var(--casey-font-substantial);
        font-weight: 400;
        line-height: var(--casey-line-substantial);
    }

    .casey-substantial-text p {
        margin-block: 0 var(--casey-space-3);
    }

    .casey-meta {
        color: var(--casey-text-secondary);
        font-size: var(--casey-font-meta);
        font-weight: var(--casey-font-weight-meta);
        line-height: var(--casey-line-meta);
    }

    .casey-visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}