@layer components {
    .prose {
        /* The prose palette is the system palette: an app can still
           override one of these on .prose. */
        --prose-body: oklch(from var(--label) l c h / 82%);
        --prose-headings: var(--label);
        --prose-lead: var(--secondary-label);
        --prose-link: var(--tint);
        --prose-link-hover: var(--tint-hover);
        --prose-link-underline: oklch(from var(--tint) l c h / 40%);
        --prose-code: var(--prose-body);
        --prose-pre-bg: var(--quaternary-system-fill);
        --prose-hr: var(--separator);
        --prose-quote: var(--secondary-label);
        --prose-border: var(--separator);
        --prose-muted: var(--secondary-label);
        --prose-alert-note: var(--system-blue);
        --prose-alert-tip: var(--system-green);
        --prose-alert-important: var(--system-purple);
        --prose-alert-warning: var(--system-orange);
        --prose-alert-caution: var(--system-red);

        color: var(--prose-body);
        font-size: var(--font-size-body);
        line-height: 1.6;
    }

    .prose
        > :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6, hgroup) {
        max-inline-size: 75ch;
    }

    .prose
        > :where(p, ul, ol, pre, table, blockquote, figure):not(
            :where(:first-child)
        ) {
        margin-top: 1rem;
    }

    .prose > :where(p, ul, ol, pre, table, blockquote, figure) {
        margin-bottom: 1rem;
    }

    .prose :where(:first-child) {
        margin-top: 0;
    }

    .prose :where(:last-child) {
        margin-bottom: 0;
    }

    .prose hgroup {
        margin-bottom: 2rem;
    }

    .prose hgroup p {
        margin-bottom: 0.25rem;
    }

    .prose h1 {
        color: var(--prose-headings);
        font-weight: 700;
        font-size: var(--font-size-title);
        line-height: 1.2;
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .prose h2 {
        color: var(--prose-headings);
        font-weight: 700;
        font-size: var(--font-size-title2);
        line-height: 1.25;
        margin-top: 2.5rem;
        margin-bottom: 0.75rem;
    }

    .prose h3 {
        color: var(--prose-headings);
        font-weight: 600;
        font-size: var(--font-size-title3);
        line-height: 1.3;
        margin-top: 2rem;
        margin-bottom: 0.5rem;
    }

    .prose h4 {
        color: var(--prose-headings);
        font-weight: 600;
        font-size: var(--font-size-headline);
        line-height: 1.4;
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .prose h5 {
        color: var(--prose-headings);
        font-weight: 600;
        font-size: var(--font-size-headline);
        line-height: 1.4;
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .prose h6 {
        color: var(--prose-headings);
        font-weight: 600;
        font-size: var(--font-size-headline);
        line-height: 1.4;
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .prose p {
        color: var(--prose-body);
        line-height: 1.6;
    }

    .prose a {
        color: var(--prose-link);
        text-decoration: underline;
        text-decoration-color: var(--prose-link-underline);
        text-underline-offset: 0.1875rem;
        text-decoration-thickness: 0.0625rem;

        @media (hover: hover) {
            &:hover {
                color: var(--prose-link-hover);
                text-decoration-color: currentcolor;
            }
        }

        &:focus {
            color: var(--prose-link-hover);
            text-decoration-color: currentcolor;
        }

        &:active {
            color: var(--prose-link-hover);
            text-decoration-color: currentcolor;
        }
    }

    .prose a :is(strong, b, code:not(pre > code)) {
        color: inherit;
    }

    .prose strong,
    .prose b {
        color: var(--prose-headings);
        font-weight: 600;
    }

    .prose em {
        font-style: italic;
    }

    .prose img,
    .prose video,
    .prose picture,
    .prose canvas,
    .prose svg {
        display: block;
        max-width: 100%;
        height: auto;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .prose img {
        margin-inline: auto;
        max-height: 32rem;
    }

    .prose figure {
        margin: 2rem 0;
    }

    .prose figcaption {
        color: var(--prose-muted);
        font-size: 0.875rem;
        line-height: 1.6;
        margin-top: 0.75rem;
        text-align: center;
    }

    .prose hr {
        height: 0;
        border: 0;
        border-top: 1px solid var(--prose-hr);
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .prose ul {
        list-style: disc;
        padding-left: 2rem;
    }

    .prose ol {
        list-style: decimal;
        padding-left: 2rem;
    }

    .prose li {
        line-height: 1.6;
        margin-block-end: 0.25rem;
    }

    .prose ul > li::marker,
    .prose ol > li::marker {
        color: var(--prose-muted);
    }

    .prose li > ul,
    .prose li > ol {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .prose .prose__alert {
        --alert-color: var(--prose-alert-note);
        margin-block: 1.5rem;
        padding: 0.75rem 1rem;
        border-inline-start: 0.25rem solid var(--alert-color);
        border-radius: 0.5rem;
        background-color: oklch(from var(--alert-color) l c h / 10%);

        & > .prose__alert-title {
            margin-block: 0 0.25rem;
            color: var(--alert-color);
            font-weight: 600;
        }

        & > :last-child {
            margin-block-end: 0;
        }

        &.prose__alert--tip {
            --alert-color: var(--prose-alert-tip);
        }

        &.prose__alert--important {
            --alert-color: var(--prose-alert-important);
        }

        &.prose__alert--warning {
            --alert-color: var(--prose-alert-warning);
        }

        &.prose__alert--caution {
            --alert-color: var(--prose-alert-caution);
        }
    }

    .prose blockquote {
        color: var(--prose-quote);
        border-inline-start: 0.25rem solid var(--prose-border);
        padding-inline-start: 1rem;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .prose code:not(pre > code) {
        color: var(--prose-code);
        font-family:
            ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
            "Liberation Mono", monospace;
        font-size: 0.875em;
        background-color: var(--prose-pre-bg);
        padding-inline: 0.25rem;
        padding-block: 0.0625rem;
        border-radius: 0.25rem;
    }

    .prose pre {
        background-color: var(--prose-pre-bg);
        border-radius: 0.75rem;
        padding: 1rem;
        overflow: auto;
        font-size: 0.875rem;
        line-height: 1.6;
        overscroll-behavior: contain;
    }

    .prose pre code {
        background: transparent;
        padding: 0;
        border-radius: 0;
        color: inherit;
        font: inherit;
    }

    .prose dl {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.5rem 1rem;
    }

    .prose dt {
        font-weight: 600;
        color: var(--prose-headings);
    }

    .prose dd {
        margin: 0;
        color: var(--prose-body);
    }

    /* Tables */
    .prose table {
        width: 100%;
        table-layout: auto;
        text-align: left;
        border-collapse: collapse;
    }

    .prose thead th {
        color: var(--prose-headings);
        vertical-align: bottom;
        font-weight: 600;
        border-bottom: 1px solid var(--prose-border);
        padding: 0.75rem 0.75rem;
    }

    .prose tbody td {
        vertical-align: top;
        border-bottom: 1px solid var(--prose-border);
        padding: 0.75rem 0.75rem;
    }

    /* Small text */
    .prose small {
        font-size: 0.875rem;
        color: var(--prose-muted);
    }

    /* KBD and mark */
    .prose kbd {
        font-family:
            ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
            "Liberation Mono", monospace;
        font-size: 0.875rem;
        background-color: var(--prose-pre-bg);
        border-radius: 0.375rem;
        padding: 0.125rem 0.375rem;
        border: 1px solid var(--prose-border);
    }

    .prose mark {
        background-color: var(--tint-fill);
        color: var(--prose-headings);
        padding: 0.0625rem 0.125rem;
        border-radius: 0.125rem;
    }

    /* Sup/Sub */
    .prose sup,
    .prose sub {
        font-size: 0.75rem;
        line-height: 0;
        position: relative;
    }

    .prose sup {
        top: -0.5rem;
    }

    .prose sub {
        bottom: -0.25rem;
    }
}