@layer base {
    html {
        font-kerning: normal;
        font-variant-ligatures: common-ligatures contextual;
        font-variant-numeric: proportional-nums lining-nums;
        font-optical-sizing: auto;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        text-rendering: optimizeLegibility;
        scrollbar-gutter: stable both-edges;
        text-wrap: pretty;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        margin: 0;
        font-family: var(--font-serif);
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
        letter-spacing: var(--letter-spacing-body);
        color: var(--color-text);
        background: var(--color-bg);
    }

    .container {
        margin-inline: auto;
        padding-inline: var(--spacer-horizontal);
        inline-size: min(100%, var(--website-width-max));
    }

    :where(h1, h2, h3, h4, h5, h6) {
        font-family: var(--font-serif);
        margin: 0 0 var(--spacer-vertical);
    }

    h1 {
        font-weight: 700;
        font-size: var(--font-size-h1);
        line-height: var(--line-height-h1);
        letter-spacing: var(--letter-spacing-h1);
    }

    h2 {
        font-size: var(--font-size-h2);
        line-height: var(--line-height-h2);
        letter-spacing: var(--letter-spacing-h2);
    }

    h3 {
        font-size: var(--font-size-h3);
        line-height: var(--line-height-h3);
        letter-spacing: var(--letter-spacing-h3);
    }

    h4 {
        font-size: var(--font-size-h4);
        line-height: var(--line-height-h4);
        letter-spacing: var(--letter-spacing-h4);
    }

    h5 {
        font-size: var(--font-size-h5);
        line-height: var(--line-height-h5);
        letter-spacing: var(--letter-spacing-h5);
    }

    h6 {
        font-size: var(--font-size-h6);
        line-height: var(--line-height-h6);
        letter-spacing: var(--letter-spacing-h6);
    }

    :where(p, .prose p) {
        margin: 0 0 var(--spacer-vertical);
        text-align: start;
        overflow-wrap: break-word;
        word-break: normal;
        text-wrap: pretty;
        hyphens: auto;
        word-spacing: normal;
        hanging-punctuation: first last;
    }

    :where(small, figcaption, .caption, .footnote) {
        font-family: var(--font-sans);
        font-size: var(--font-size-caption);
        line-height: var(--line-height-caption);
        letter-spacing: var(--letter-spacing-caption);
        color: var(--color-text-muted);
    }

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

    :where(img, svg, video) {
        vertical-align: middle;
    }

    abbr[title] {
        text-decoration: underline dotted;
        text-underline-offset: .1em;
        cursor: help;
    }

    mark {
        background: var(--color-highlight);
        color: inherit;
    }

    tbody tr:nth-child(even) {
        background: color-mix(in srgb, var(--color-surface) 92%, var(--brand-100) 8%);
    }

    figcaption {
        margin-block-start: var(--spacer-inter-item);
        text-align: center;
    }

    sup,
    sub {
        font-size: var(--font-size-supsub);
        line-height: var(--line-height-supsub);
        letter-spacing: var(--letter-spacing-supsub);
        position: static;
    }

    sup {
        vertical-align: var(--vertical-align-sup);
    }

    sub {
        vertical-align: var(--vertical-align-sub);
    }

    a {
        color: var(--color-link);
        text-decoration: none;
        text-decoration-thickness: .045em;
        text-underline-offset: .14em;
        transition: color .16s ease,
            text-decoration-color .16s ease;
    }

    a:is(:hover, :focus-visible) {
        color: var(--color-link-hover);
        text-decoration: underline;
    }

    a:visited {
        color: var(--color-link-visited);
    }

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

    :where(button, input, select, label) {
        font-family: var(--font-sans);
        font-size: var(--font-size-ui);
        line-height: var(--line-height-ui);
        letter-spacing: var(--letter-spacing-ui);
    }

    ul,
    ol {
        margin: 0 0 var(--spacer-vertical) var(--spacer-horizontal);
    }

    dt {
        font-weight: 700;
    }

    dd {
        margin-block-end: var(--spacer-inter-item);
        margin-inline-start: var(--spacer-horizontal);
    }

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

    pre {
        margin: 0 0 var(--spacer-vertical);
        padding: var(--spacer-inter-item);
        background: var(--grey-200);
        border: 1px solid var(--grey-300);
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin: 0 0 var(--spacer-vertical);
    }

    table,
    th,
    td {
        font-variant-numeric: tabular-nums lining-nums;
    }

    th,
    td {
        padding: calc(var(--spacer-inter-item) * 1.25) var(--spacer-inter-item);
        text-align: left;
        vertical-align: top;
    }

    thead th {
        border-bottom: 2px solid var(--color-border);
    }

    tbody tr+tr {
        border-top: 1px solid var(--color-border);
    }

    caption {
        caption-side: bottom;
        font-size: var(--font-size-caption);
        line-height: var(--line-height-caption);
        color: var(--color-text-muted);
        padding-top: var(--spacer-inter-item);
    }

    hr {
        border: 0;
        border-top: 1px solid var(--color-border);
        margin: var(--spacer-vertical) 0;
    }

    blockquote {
        margin: 0 0 var(--spacer-vertical);
        padding-inline: var(--spacer-horizontal);
        border-inline-start: 3px solid var(--brand-300);
        color: var(--color-text-muted);
    }

    .card,
    .callout {
        border-radius: var(--corner-radius-small);
        padding: var(--spacer-vertical) var(--spacer-horizontal);
    }

    .card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
    }

    .callout {
        background: var(--color-surface-tint);
        border: 1px solid var(--brand-300);
    }

    .button--primary {
        display: inline-block;
        min-inline-size: 44px;
        min-block-size: 36px;
        padding: calc(var(--spacer-inter-item) * 1.25) var(--spacer-horizontal);
        background: var(--color-accent);
        color: var(--on-accent);
        border: 1px solid var(--brand-800);
        border-radius: var(--corner-radius-small);
        text-decoration: none;
    }

    .button--primary:hover {
        background: color-mix(in srgb, var(--color-accent) 88%, black 12%);
    }

    /* ::selection {
        background: var(--color-highlight-blue);
        color: var(--on-surface);
    } */
    @media (prefers-contrast: more) {
        :is(a, button, input, select, textarea):focus-visible {
            outline-width: 3px;
        }
    }

    @supports not selector(:focus-visible) {
        :is(a, button, input, select, textarea):focus {
            outline: 2px solid var(--color-focus);
            outline-offset: 2px;
        }
    }

    @supports not (width: min(100% - 16px, var(--website-width-max))) {
        .container {
            max-inline-size: var(--website-width-max);
            margin-inline: auto;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: .01ms !important;
            transition-duration: .01ms !important;
        }
    }
}