@layer components {
    .prose {
        --prose-body: light-dark(oklch(24% 0% 0deg), oklch(92% 0% 0deg));
        --prose-headings: light-dark(oklch(10% 0% 0deg), oklch(98% 0% 0deg));
        --prose-lead: light-dark(oklch(32% 0% 0deg), oklch(86% 0% 0deg));
        --prose-link: oklch(60% 50% var(--hue));
        --prose-link-hover: oklch(70% 50% var(--hue));
        --prose-code: light-dark(oklch(20% 0% 0deg), oklch(90% 0% 0deg));
        --prose-pre-bg: light-dark(oklch(95% 0% 0deg), oklch(25% 0% 0deg));
        --prose-hr: light-dark(
            oklch(90% 0% 0deg / 50%),
            oklch(50% 0% 0deg / 50%)
        );
        --prose-quote: light-dark(oklch(20% 0% 0deg), oklch(80% 0% 0deg));
        --prose-border: light-dark(oklch(85% 0% 0deg), oklch(35% 0% 0deg));
        --prose-muted: light-dark(oklch(40% 0% 0deg), oklch(75% 0% 0deg));

        color: var(--prose-body);
        line-height: 1.75;
    }

    .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: 2.25rem;
        line-height: 1.2;
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .prose h2 {
        color: var(--prose-headings);
        font-weight: 700;
        font-size: 1.875rem;
        line-height: 1.3;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .prose h3 {
        color: var(--prose-headings);
        font-weight: 600;
        font-size: 1.5rem;
        line-height: 1.4;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }

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

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

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

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

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

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

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

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

    .prose a code {
        color: inherit;
    }

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

    .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.5;
        margin-block-end: 0.125rem;
    }

    .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 blockquote {
        color: var(--prose-quote);
        font-style: italic;
        font-size: 1.25rem;
        font-weight: 500;
        border-inline-start: 0.25rem solid oklch(50% 50% var(--hue));
        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;
        background-color: var(--prose-pre-bg);
        padding-inline: 0.375rem;
        padding-block: 0.125rem;
        border-radius: 0.375rem;
    }

    .prose pre {
        background-color: var(--prose-pre-bg);
        border-radius: 0.75rem;
        padding: 1rem;
        overflow: auto;
        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);
        font-weight: 600;
        border-bottom: 1px solid var(--prose-border);
        padding: 0.75rem 0.75rem;
    }

    .prose tbody td {
        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: oklch(90% 0.1 var(--hue));
        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;
    }

    /* Debug helper */
    .prose.debug * {
        outline: 1px solid var(--prose-pre-bg);
    }
}