@layer reset {
    [hidden] {
        display: none !important;
    }

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

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

    h1, h2, h3, h4, h5, h6 {
        font-weight: 600;
    }

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

    strong, b {
        font-weight: 600;
    }

    img {
        display: block;
        max-width: 100%;
        height: auto;
    }

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

@layer base {
    body {
        margin: 0;
        background: var(--color-page);
        color: var(--color-ink);
        font-family: var(--font-sans);
        font-size: 17px;
        line-height: 1.6;
    }

    address {
        font-style: normal;
    }

    a {
        color: inherit;
    }

    a:hover {
        color: var(--hover);
    }

    main:focus {
        outline: none;
    }

    a:focus-visible,
    button:focus-visible,
    summary:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 2px;
    }

    .dark {
        --fg-muted: var(--color-muted-on-dark);
        --fg-accent: var(--color-aqua);
        --link: var(--color-aqua);
        --link-hover: var(--color-aqua);
        --hover: var(--color-aqua);
        --focus: var(--color-aqua);
        --line: var(--color-slate);
        background-color: var(--color-ink);
        color: var(--color-white);
    }

    .skip-link {
        position: absolute;
        top: 12px;
        left: -9999px;
        z-index: 10;
        padding: 10px 16px;
        border-radius: var(--radius-control);
        background: var(--color-ink);
        color: var(--color-white);
    }

    .skip-link:focus {
        left: 16px;
    }

    .skip-link:hover {
        color: var(--color-white);
    }

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