/*  Indux CSS
/*  By Andrew Matlock under MIT license
/*  https://github.com/andrewmatlock/Indux
*/

/* Theme */

:root,
::selection {

    /* Default palette */
    --color-50: oklch(0.985 0 0);
    --color-100: oklch(0.967 0.001 286.375);
    --color-200: oklch(0.92 0.004 286.32);
    --color-300: oklch(0.871 0.006 286.286);
    --color-400: oklch(0.705 0.015 286.067);
    --color-500: oklch(0.552 0.016 285.938);
    --color-600: oklch(0.442 0.017 285.786);
    --color-700: oklch(0.37 0.013 285.805);
    --color-800: oklch(0.274 0.006 286.033);
    --color-900: oklch(0.21 0.006 285.885);
    --color-950: oklch(0.141 0.005 285.823);

    /* Light theme */
    --color-page: var(--color-50);
    --color-surface-1: var(--color-100);
    --color-surface-2: var(--color-200);
    --color-surface-3: var(--color-300);
    --color-content-stark: var(--color-900);
    --color-content-neutral: var(--color-600);
    --color-content-subtle: var(--color-500);
    --color-field-surface: var(--color-300);
    --color-field-surface-hover: var(--color-400);
    --color-field-inverse: var(--color-content-stark);
    --color-popover-surface: var(--color-page);
    --color-line: color-mix(in oklch, var(--color-content-stark) 11%, transparent);
    --color-brand-surface: #f6c07b;
    --color-brand-surface-hover: #f19b46;
    --color-brand-inverse: #763518;
    --color-brand-content: #de6618;
    --color-accent-surface: #ffccd3;
    --color-accent-surface-hover: #ffa1ad;
    --color-accent-inverse: #a50036;
    --color-accent-content: #ff637e;
    --color-positive-surface: #16a34a;
    --color-positive-surface-hover: #166534;
    --color-positive-inverse: white;
    --color-positive-content: var(--color-positive-surface);
    --color-negative-surface: #ef4444;
    --color-negative-surface-hover: #dc2626;
    --color-negative-inverse: white;
    --color-negative-content: var(--color-negative-surface);

    /* Sizes */
    --radius: 0.5rem;
    --spacing: 0.25rem;
    --spacing-field-padding: calc(var(--spacing) * 2.5);
    --spacing-field-height: calc(var(--spacing) * 9);
    --spacing-popover-offset: calc(var(--spacing) * 2);

    /* Effects */
    --transition: all .05s ease-in-out;

    /* Fonts */
    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

/* Dark theme overrides */
.dark {
    --color-page: var(--color-950);
    --color-surface-1: var(--color-900);
    --color-surface-2: var(--color-800);
    --color-surface-3: var(--color-700);
    --color-field-surface: var(--color-700);
    --color-field-surface-hover: var(--color-600);
    --color-popover-surface: var(--color-700);
    --color-content-stark: var(--color-50);
    --color-content-neutral: var(--color-400);
    --color-content-subtle: var(--color-500);
    --color-brand-content: #f6c07b;
    --color-accent-content: #ffa1ad;
}

@layer base {

    /* Default font and colors */
    :where(html),
    :host {
        line-height: 1.5;
        font-family: var(--font-sans);
        color: var(--color-content-stark, inherit);
        background-color: var(--color-page, inherit)
    }

    /* Text selection */
    ::selection {
        background-color: color-mix(in oklch, var(--color-surface-1) 92%, var(--color-content-stark))
    }

    /* Focus state */
    :where(:focus-visible),
    :where(label:has(input, button, [role="button"], [type="button"], select, textarea):focus-within) {
        outline: none;
        box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark) 35%, transparent);
    }
}

/* Browser reset / normalizer */

@layer base {

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 0 solid
    }

    :where(:root) {
        -webkit-tap-highlight-color: transparent;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
        text-rendering: optimizeLegibility;
        overflow-wrap: break-word;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4
    }

    :where(html),
    :host {
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
        line-height: 1.5;
        tab-size: 4;
        font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        font-feature-settings: normal;
        font-variation-settings: normal;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none
        }

        &:has(dialog:popover-open) {
            overflow: hidden
        }
    }

    :where(body) {
        max-width: 100vw;
        min-height: 100vh;
        margin: 0;
        line-height: inherit
    }

    :where(a) {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit;
    }

    :where(abbr[title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    :where([aria-controls]) {
        cursor: pointer
    }

    :where([aria-hidden=false][hidden]) {
        display: initial
    }

    :where([aria-hidden=false][hidden]:not(:focus)) {
        clip: rect(0, 0, 0, 0);
        position: absolute
    }

    :where(audio:not([controls])) {
        display: none;
        height: 0
    }

    :where(b, strong) {
        font-weight: bolder
    }

    :where(button, input, optgroup, select, textarea) {
        margin: 0;
        padding: 0;
        font-family: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        font-size: 100%;
        font-weight: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        color: inherit
    }

    :where(button, select) {
        text-transform: none
    }

    :where(button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button) {
        -webkit-appearance: button;
        appearance: button;
        background-color: transparent;
        background-image: none
    }

    :where(::-webkit-file-upload-button) {
        -webkit-appearance: button;
        font: inherit
    }

    :where(::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
        height: auto
    }

    :where(::-webkit-search-decoration) {
        -webkit-appearance: none
    }

    :where(button, [role="button"]) {
        cursor: pointer
    }

    :where(code, samp, pre) {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 1em;
        font-feature-settings: normal;
        font-variation-settings: normal;
    }

    :where([dir=rtl]) {
        direction: rtl
    }

    :where([disabled], :disabled, [aria-disabled=true]) {
        opacity: .5;
        cursor: default;
        pointer-events: none
    }

    :where(figcaption) {
        font-size: 75%
    }

    :where(figure) {
        display: block;
        padding: 0
    }

    :where(::file-selector-button) {
        margin-inline-end: 4px
    }

    :where(h1, h2, h3, h4, h5, h6) {
        font-size: inherit;
        font-weight: inherit
    }

    :where(hr) {
        height: 1px;
        color: inherit;
        background-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
        border: 0 none
    }

    :where(img, svg, video, canvas, audio, iframe, embed, object) {
        display: block
    }

    :where(img, video) {
        max-width: 100%;
        height: auto
    }

    :where(::-webkit-autofill, :-webkit-autofill:focus) {
        transition: background-color 0s 600000s, color 0s 600000s
    }

    :where(::-webkit-date-and-time-value) {
        min-height: 1lh;
        text-align: inherit
    }

    :where(::-webkit-datetime-edit) {
        display: inline-flex
    }

    :where(::-webkit-datetime-edit-fields-wrapper) {
        padding: 0
    }

    :where(::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field) {
        padding-block: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    :where(small) {
        font-size: 80%
    }

    :where(span) {
        color: inherit
    }

    :where(sub, sup) {
        font-size: 50%;
        line-height: 0;
        position: relative;
        vertical-align: baseline
    }

    :where(sub) {
        bottom: -0.25em
    }

    :where(sup) {
        top: -0.5em
    }

    :where(svg):not([fill]) {
        fill: currentColor
    }

    :where(svg):not(:root) {
        overflow: hidden
    }

    :where(table) {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    :where(::placeholder) {
        opacity: 1;
        color: #9ca3af
    }

    @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
        :where(::placeholder) {
            color: color-mix(in oklab, currentcolor 50%, transparent)
        }
    }

    /* Base popover styles */
    :where([popover]) {
        display: none;
        transition: opacity .15s ease-in, scale .15s ease-in, display .15s ease-in;
        transition-behavior: allow-discrete;

        &:popover-open {
            display: flex
        }

        /* Opening state */
        @starting-style {
            scale: .9;
            opacity: 0;
        }

        /* Closing state */
        &:not(:popover-open) {
            display: none !important;
            scale: 1;
            opacity: 0;
            transition-duration: .15s;
            transition-timing-function: ease-out
        }
    }

    :where(progress) {
        vertical-align: baseline
    }

    :where([type='search']) {
        -webkit-appearance: textfield;
        appearance: textfield;
        outline-offset: -2px
    }

    :where(summary) {
        display: list-item
    }

    :where(textarea) {
        resize: vertical
    }

    [hidden],
    [un-cloak],
    [v-cloak],
    [x-cloak] {
        display: none !important
    }

    /* @ rule - font smoothing for iOS and Mac */
    @media (-webkit-min-device-pixel-ratio: 2) {
        :where(html) {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }
    }

    /* @ rule - reduced motion */
    @media (prefers-reduced-motion:reduce) {

        :not([aria-busy=true]),
        :not([aria-busy=true])::after,
        :not([aria-busy=true])::before {
            background-attachment: initial !important;
            animation-duration: 1ms !important;
            animation-delay: -1ms !important;
            animation-iteration-count: 1 !important;
            scroll-behavior: auto !important;
            transition-delay: 0s !important;
            transition-duration: 0s !important
        }
    }

    /* @ rule - reverse animation direction for rtl mode */
    @media (prefers-reduced-motion:no-preference) {
        [dir=rtl] progress:indeterminate {
            animation-direction: reverse
        }
    }
}

/* Accordions */

:root {
    --icon-accordion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E")
}

@layer components {


    :where(details):not(.unset) {
        width: 100%;
        transition: var(--transition, all .05s ease-in-out);

        /* Rotate icon */
        &[open]>summary:before {
            transform: rotate(90deg)
        }

        /* Content spacing */
        & [open] summary {
            margin-bottom: calc(var(--spacing, 0.25rem) * 4)
        }

        &> :not(summary) {
            padding: var(--spacing-field-padding, 0.625rem) 0
        }

        /* Content */
        :where(summary) {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            color: var(--color-content-stark, oklch(16.6% 0.026 267));
            user-select: none;
            cursor: pointer;
            transition: var(--transition, all .05s ease-in-out);

            /* Hide default caret */
            &::marker,
            &::-webkit-details-marker {
                display: none;
                content: ""
            }

            &:hover {
                color: color-mix(in oklch, var(--color-surface-1, oklch(98.17% 0.0005 95.87)) 40%, var(--color-content-stark, oklch(16.6% 0.026 267)))
            }

            &:active {
                color: color-mix(in oklch, var(--color-surface-1, oklch(98.17% 0.0005 95.87)) 50%, var(--color-content-stark, oklch(16.6% 0.026 267)))
            }

            /* Add custom icon */
            &:before {
                content: "";
                order: 1;
                width: 1rem;
                height: 1rem;
                background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 50%, var(--color-field-inverse, oklch(16.6% 0.026 267)));
                -webkit-mask-image: var(--icon-accordion);
                mask-image: var(--icon-accordion);
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                -webkit-mask-size: 100% 100%;
                mask-size: 100% 100%;
                transform: rotate(0);
                transition: 0.25s transform ease
            }
        }
    }

    /* RTL support */
    [dir="rtl"] :where(details):not(.unset) {

        & summary::before {
            transform: rotate(180deg)
        }

        &[open]>summary::before {
            transform: rotate(90deg)
        }
    }
}

/* Avatars */

@layer utilities {

    :where(.avatar) {
        position: relative;
        display: flex;
        flex-flow: row wrap;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        width: var(--spacing-field-height, 2.25rem);
        height: var(--spacing-field-height, 2.25rem);
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        background-clip: content-box;
        background-size: cover;
        background-position: center;
        border-radius: var(--radius, 0.5rem);

        /* Icon */
        &[x-icon] {
            color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27))
        }

        /* Profile pic */
        :where(img) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            border-radius: inherit;
            transition: var(--transition, all .05s ease-in-out)
        }

        /* Status indictor */
        :where(figure) {
            position: absolute;
            bottom: -3px;
            right: -3px;
            width: 9px;
            height: 9px;
            z-index: 1;
            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
            border: 1px solid var(--color-page, oklch(100% 0 0));
            border-radius: 50%
        }
    }

    /* Button version */
    :where(button.avatar) {
        padding: 0;
        background-blend-mode: normal;

        &:hover {
            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
            background-blend-mode: multiply;

            & img {
                filter: brightness(0.9)
            }
        }
    }

    /* Wide version */
    :where(.avatar-wide) {
        display: flex;
        flex-flow: row;
        justify-content: start;
        align-items: center;
        gap: 1.5ch;
        width: 100%;
        max-width: 100%;
        overflow: hidden;

        & span {
            max-width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden
        }
    }

    /* Wide button version */
    :where(button.avatar-wide) {
        height: fit-content;
        padding: var(--spacing, 0.25rem);
        padding-inline-end: 1.5ch;

        &:hover .avatar {
            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
            transition: var(--transition, all .05s ease-in-out)
        }
    }

    /* Group wrapper */
    :where([role=group]:has(.avatar, button.avatar)) {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        :where(.avatar) {
            margin-inline-end: calc(var(--spacing-field-height, 2.25rem) * -0.3);
            box-shadow: 0 0 0 3px var(--color-page, oklch(100% 0 0))
        }
    }
}

/* Buttons */

@layer components {

    :where(button:not(.link), [role=button], [type=button], [type=reset], [type=submit], select) {
        display: inline-flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
        gap: 0.375rem;
        width: fit-content;
        min-width: var(--spacing-field-height, 2.25rem);
        max-width: 100%;
        height: var(--spacing-field-height, 2.25rem);
        margin: 0;
        padding: 0 var(--spacing-field-padding, 0.625rem);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        border-radius: var(--radius, 0.5rem);
        outline-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
        cursor: pointer;
        transition: var(--transition, all .05s ease-in-out);
        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button;

        & span,
        & [x-icon] {
            color: inherit
        }

        & span {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        /* Remove padding around a solo icon */
        &:has(>svg:only-child) {
            padding: 0;
            font-size: 1rem
        }

        /* Center icons */
        & svg {
            margin-left: auto;
            margin-right: auto
        }

        &:hover {
            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
        }

        &:active {
            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
        }

        &:focus-visible {
            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
        }
    }

    /* Selects */
    :where(select) {
        appearance: base-select;

        &::picker-icon {
            content: "⌄";
            height: calc(var(--spacing-field-height, 2.25rem) * 0.5);
            transform: scaleY(0.7);
            font-size: 20px;
            line-height: 0.4
        }
    }
}

/* Checkboxes */

:root {
    --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E")
}

@layer components {

    input[type=checkbox]:not([role=switch]) {
        position: relative;
        min-width: calc(var(--spacing-field-height, 2.25rem) * 0.6);
        max-width: calc(var(--spacing-field-height, 2.25rem) * 0.6);
        width: calc(var(--spacing-field-height, 2.25rem) * 0.6);
        height: calc(var(--spacing-field-height, 2.25rem) * 0.6);
        padding: 0;
        border-radius: 0.4rem;
        cursor: pointer;

        /* Checked */
        &:checked {

            &:hover {
                background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
                border-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
            }

            &:active {
                background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
                border-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
            }
        }

        /* Icon */
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60%;
            height: 60%;
            background-color: var(--color-field-inverse, oklch(16.6% 0.026 267));
            -webkit-mask-image: var(--icon-checkbox);
            mask-image: var(--icon-checkbox);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
            transform-origin: center;
            transition: var(--transition, all .05s ease-in-out);

            /* Icon unchecked */
            opacity: 0;
            -webkit-transform: translateX(-50%) translateY(-50%) scale(0);
            transform: translateX(-50%) translateY(-50%) scale(0)
        }

        /* Icon checked */
        &:checked::after {
            opacity: 1;
            -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
            transform: translateX(-50%) translateY(-50%) scale(1)
        }
    }
}

/* Code blocks */

@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Lexend+Exa&display=swap');

:root {

    /* Copy code button icons */
    --icon-copy-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E");
    --icon-copied-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");

    /* Syntax highlight colors */
    --color-code-keyword: #b8860b;
    --color-code-string: #8b4513;
    --color-code-comment: #808080;
    --color-code-function: #cd853f;
    --color-code-number: #a0522d;
    --color-code-operator: #2f4f4f;
    --color-code-class-name: #daa520;
    --color-code-tag: #4682b4;
    --color-code-attr-name: #ff8c00;
    --color-code-attr-value: #8b4513;
    --color-code-property: #a0522d;
    --color-code-selector: #4682b4;
    --color-code-punctuation: #2f4f4f;
    --color-code-builtin: #b8860b;
    --color-code-constant: #a0522d;
    --color-code-boolean: #a0522d;
    --color-code-regex: #8b4513;
    --color-code-symbol: #daa520;
    --color-code-entity: #daa520;
    --color-code-url: #a0522d;
    --color-code-atrule: #b8860b;
    --color-code-rule: #4682b4;
    --color-code-doctype: #808080;
    --color-code-cdata: #808080;
    --color-code-prolog: #808080;
    --color-code-namespace: #808080;
    --color-code-important: #b8860b;
    --color-code-inserted: #228b22;
    --color-code-deleted: #dc143c;
    --color-code-char: #8b4513;
}

.dark {
    --color-code-keyword: #f4a460;
    --color-code-string: #deb887;
    --color-code-comment: #8b8b8b;
    --color-code-function: #daa520;
    --color-code-number: #d2b48c;
    --color-code-operator: #f5deb3;
    --color-code-class-name: #cd853f;
    --color-code-tag: #87ceeb;
    --color-code-attr-name: #ffd700;
    --color-code-attr-value: #deb887;
    --color-code-property: #d2b48c;
    --color-code-selector: #87ceeb;
    --color-code-punctuation: #f5deb3;
    --color-code-builtin: #f4a460;
    --color-code-constant: #d2b48c;
    --color-code-boolean: #d2b48c;
    --color-code-regex: #deb887;
    --color-code-symbol: #cd853f;
    --color-code-entity: #cd853f;
    --color-code-url: #d2b48c;
    --color-code-atrule: #f4a460;
    --color-code-rule: #98fb98;
    --color-code-doctype: #8b8b8b;
    --color-code-cdata: #8b8b8b;
    --color-code-prolog: #8b8b8b;
    --color-code-namespace: #8b8b8b;
    --color-code-important: #f4a460;
    --color-code-inserted: #98fb98;
    --color-code-deleted: #f08080;
    --color-code-char: #deb887;
}

/* Code syntax styles for highlight.js */
@layer utilities {

    /* Additional highlight.js specific classes */
    .hljs-comment {
        color: var(--color-code-comment) !important
    }

    .hljs-keyword {
        color: var(--color-code-keyword) !important
    }

    .hljs-string {
        color: var(--color-code-string) !important
    }

    .hljs-number {
        color: var(--color-code-number) !important
    }

    .hljs-literal {
        color: var(--color-code-constant) !important
    }

    .hljs-type {
        color: var(--color-code-class-name) !important
    }

    .hljs-variable {
        color: var(--color-code-property) !important
    }

    .hljs-variable.language_ {
        color: var(--color-code-keyword) !important
    }

    .hljs-variable.constant_ {
        color: var(--color-code-constant) !important
    }

    .hljs-title {
        color: var(--color-code-function) !important
    }

    .hljs-title.class_.inherited__ {
        color: var(--color-code-class-name) !important
    }

    .hljs-title.function_.invoke__ {
        color: var(--color-code-function) !important
    }

    .hljs-params {
        color: var(--color-code-property) !important
    }

    .hljs-doctag {
        color: var(--color-code-keyword) !important;
        font-weight: 600 !important
    }

    .hljs-meta {
        color: var(--color-code-comment) !important
    }

    .hljs-meta.prompt_ {
        color: var(--color-code-keyword) !important
    }

    .hljs-meta.keyword_ {
        color: var(--color-code-keyword) !important
    }

    .hljs-meta.string_ {
        color: var(--color-code-string) !important
    }

    .hljs-section {
        color: var(--color-code-keyword) !important;
        font-weight: 600 !important
    }

    .hljs-name {
        color: var(--color-code-tag) !important
    }

    .hljs-attribute {
        color: var(--color-code-attr-name) !important
    }

    .hljs-bullet {
        color: var(--color-code-punctuation) !important
    }

    .hljs-code {
        color: var(--color-code-property) !important
    }

    .hljs-formula {
        color: var(--color-code-number) !important
    }

    .hljs-quote {
        color: var(--color-code-string) !important
    }

    .hljs-selector-id {
        color: var(--color-code-selector) !important
    }

    .hljs-selector-class {
        color: var(--color-code-selector) !important
    }

    .hljs-selector-attr {
        color: var(--color-code-selector) !important
    }

    .hljs-selector-pseudo {
        color: var(--color-code-selector) !important
    }

    .hljs-template-tag {
        color: var(--color-code-tag) !important
    }

    .hljs-template-variable {
        color: var(--color-code-property) !important
    }

    .hljs-subst {
        color: var(--color-code-string) !important
    }
}

@layer components {

    :where(pre) {
        display: flex;
        flex: 1;
        -ms-overflow-style: scrollbar;
        overflow-x: auto;
        width: auto;
        padding: calc(var(--spacing, 0.25rem) * 4);
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.8125rem;
        line-height: 1.5;
        text-indent: 0;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
        background-color: var(--color-page, oklch(100% 0 0));
        border: 1px solid var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        border-radius: 1rem;
        tab-size: 4;
        white-space: pre;
        white-space-collapse: preserve
    }

    :where(pre code) {
        display: block;
        width: 100%;
        padding: 0;
        font-size: inherit;
        font-family: inherit;
        font-weight: inherit;
        line-height: inherit;
        color: inherit;
        background-color: transparent;

        & span {
            vertical-align: initial
        }
    }

    /* Code block(s) wrapper */
    :where(x-code-group, x-code, [x-code]) {
        position: relative;
        display: flex;
        flex-flow: row wrap;
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.8125rem;
        line-height: 1.5;
        background: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 45%, transparent);
        border: 1px solid var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        border-radius: 1rem;
        overflow: hidden;

        &:has(> header) {
            padding: 0.125rem
        }

        /* Title bar */
        &>header {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing, 0.25rem) * 2);
            width: 100%;
            padding: 0.5rem 1rem;
            font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27));
            border-bottom: none;
            border-radius: 0.8125rem 0.8125rem 0 0;

            /* Tab titles */
            & button[role="tab"] {
                height: fit-content;
                padding: var(--spacing, 0.25rem) calc(var(--spacing, 0.25rem) * 2);
                border-radius: var(--radius, 0.5rem);
                background: transparent;
                color: inherit;
                font-family: inherit;
                font-size: inherit;
                cursor: pointer;
                transition: var(--transition, all .05s ease-in-out);

                &:hover {
                    color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
                    background-color: var(--color-surface-3, oklch(91.79% 0.0029 264.26))
                }

                /* Selected tab */
                &.selected {
                    position: relative;
                    color: var(--color-brand-content, #de6618);
                    background: transparent;

                    &:hover {
                        background-color: var(--color-surface-3, oklch(91.79% 0.0029 264.26))
                    }

                    /* Selected tab underline */
                    &::after {
                        content: '';
                        position: absolute;
                        bottom: -0.5rem;
                        left: 50%;
                        transform: translateX(-50%);
                        width: calc(100% - var(--spacing, 0.25rem) * 4);
                        height: 2px;
                        background: color-mix(in oklch, var(--color-brand-content, #de6618) 50%, transparent);
                        border-radius: 0.5rem
                    }
                }
            }
        }

        /* Line numbers */
        & .lines {
            display: flex;
            flex-direction: column;
            width: fit-content;
            min-width: 2.5rem;
            padding: calc(var(--spacing, 0.25rem) * 4) 0.5rem calc(var(--spacing, 0.25rem) * 4) 0.5rem;
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
            text-align: right;
            color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27));
            background: var(--color-page, oklch(100% 0 0));
            pointer-events: none;
            user-select: none;
        }

        &:has(> header) .lines {
            border-start-start-radius: 0.875rem;
            border-end-start-radius: 0.875rem
        }

        & pre {
            margin-top: 0;
            border: 0 none
        }

        &:has(> header) pre {
            border-radius: 0.875rem
        }

        &[numbers] pre {
            border-start-start-radius: 0;
            border-end-start-radius: 0
        }

        /* Copy button */
        & .copy {
            position: absolute;
            top: 0.3rem;
            right: 0.5rem;
            width: 1.75rem;
            min-width: 0;
            height: 1.75rem;
            padding: 0;

            &::after {
                content: '';
                display: block;
                width: 0.8125rem;
                height: 0.8125rem;
                background-color: var(--color-field-inverse, oklch(16.6% 0.026 267));
                mask-image: var(--icon-copy-code);
                mask-size: 1rem;
                mask-size: contain;
                mask-repeat: no-repeat;
            }

            &.copied::after {
                mask-image: var(--icon-copied-code);
            }

            &.copied {
                --color-field-surface: var(--color-positive-surface);
                --color-field-surface-hover: var(--color-positive-surface-hover);
                --color-field-inverse: var(--color-positive-inverse);
            }
        }

        :where(x-code) {
            width: 100%;
            margin-top: 0;
            border: 0 none;
            overflow: visible;

            & .copy {
                top: -2.25rem
            }
        }
    }

    /* RTL support */
    [dir="rtl"] :where(x-code-group, x-code, [x-code]) .copy {
        right: auto;
        left: 0.5rem
    }
}

/* Frames to visualize code examples */
@layer utilities {

    .prose aside.frame {
        display: flex;
        gap: calc(var(--spacing, 0.25rem) * 4);
        background: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 35%, transparent);
        border: 1px solid var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        border-radius: calc(var(--radius, 0.5rem) * 2)
    }

    /* Followed directly by code block */
    .prose aside.frame:has(+ x-code-group, + x-code) {
        border-bottom: 0 none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0
    }

    .prose aside.frame+x-code-group,
    .prose aside.frame+x-code {
        margin-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0
    }

    .prose aside.frame+x-code pre {
        border-top-left-radius: 0;
        border-top-right-radius: 0
    }
}

/* Dividers */

@layer utilities {

    :where(.divider) {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 1px;
        margin: var(--spacing-field-padding, 0.625rem) 0;
        white-space: nowrap;
        font-size: 0.875rem;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));

        /* Lines before and after content */
        &:before,
        &:after {
            content: "";
            display: inline-flex;
            flex: 1;
            width: auto;
            height: 1px;
            background-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15))
        }

        /* Space between lines and content */
        &:not(:empty) {
            gap: var(--spacing-field-padding, 0.625rem)
        }
    }

    /* Start modifier */
    :where(.divider.start) {
        justify-content: flex-start;

        &:before {
            display: none
        }
    }

    /* End modifier */
    :where(.divider.end) {
        justify-content: flex-end;

        &:after {
            display: none
        }
    }

    /* Vertical modifier */
    .divider.vertical {
        align-self: stretch;
        flex-flow: column nowrap;
        width: fit-content;
        min-width: 1px;
        height: auto;
        min-height: 100%;
        margin: 0 var(--spacing-field-padding, 0.625rem);

        &:before,
        &:after {
            content: "";
            width: 1px;
            height: auto;
            min-height: 1px;
        }

        /* Icon */
        & [x-icon] {
            flex-shrink: 0;
            min-height: 0.875rem;
            font-size: 0.875rem
        }
    }
}

/* Dropdowns */

@layer components {

    :where(menu[popover]) {
        position-try-fallbacks: flip-inline, flip-block, flip-start;
        position-area: end span-end;
        inset: auto;
        flex-flow: column nowrap;
        gap: 0;
        width: fit-content;
        min-width: 160px;
        height: fit-content;
        max-height: 90vh;
        margin: var(--spacing-popover-offset, 0.5rem) 0;
        padding: 0.25rem;
        z-index: 50;
        list-style: none;
        background: var(--color-popover-surface, oklch(100% 0 0));
        border: 0 none;
        border-radius: 8px;
        box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
        transform-origin: top center;

        /* Options */
        & :where(li, a, button, label) {
            display: inline-flex;
            justify-content: start;
            align-items: center;
            width: 100%;
            max-width: 100%;
            min-height: 2rem;
            padding-inline-start: 0.5rem;
            padding-inline-end: 0.5rem;
            font-weight: normal;
            color: var(--color-content-stark, oklch(16.6% 0.026 267));
            text-align: start;
            text-decoration: none;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            background-color: transparent;
            border-radius: 6px;
            cursor: pointer;
            user-select: none;

            &:hover {
                color: var(--color-field-inverse, oklch(16.6% 0.026 267));
                text-decoration: inherit;
                background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
            }

            &:active {
                color: var(--color-field-inverse, oklch(16.6% 0.026 267));
                background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
            }

            & span,
            & [x-icon] {
                color: inherit
            }

            /* Leading icons */
            & [x-icon]:first-child:not(:only-child) {
                margin-inline-end: 0.375rem
            }
        }

        /* Titles */
        & small {
            padding: 0.25rem 0.5rem;
            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
        }

        /* Horizontal rules (offset to ignore menu padding) */
        & hr {
            flex-shrink: 0;
            width: calc(100% + 0.25rem * 2);
            margin-inline-start: calc(0.25rem * -1);
            margin-top: 0.25rem;
            margin-bottom: 0.25rem;
            background-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
        }

        /* Labels */
        & label {
            padding-inline-start: 0.5rem;
            padding-inline-end: 0.5rem;
            cursor: default;

            &:hover {
                background-color: transparent
            }

            &:has(input[role="switch"]) {
                justify-content: space-between
            }
        }

        /* Inputs and textareas */
        & :where(input, textarea) {
            flex-shrink: 0;

            &:not(:first-child) {
                margin-top: var(--spacing, 0.25rem)
            }
        }

        /* Spans */
        & span {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap
        }
    }

    /* Dark theme */
    :where(.dark menu[popover]) :where(li, a, button, label):hover {
        background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
    }

    /* Nested menu alignment */
    :where(menu menu) {
        position-area: span-end end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Center alignment */
    :where(menu.center) {
        position-area: center;
    }

    /* Top alignment */
    :where(menu.top) {
        position-area: top;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom alignment */
    :where(menu.bottom) {
        position-area: bottom;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Start alignment */
    :where(menu.start) {
        position-area: center start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* End alignment */
    :where(menu.end) {
        position-area: center end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Top start alignment */
    :where(menu.top-start) {
        position-area: start span-end;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Top end alignment */
    :where(menu.top-end) {
        position-area: start span-start;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom start alignment */
    :where(menu.bottom-start) {
        position-area: end span-end;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom end alignment */
    :where(menu.bottom-end) {
        position-area: end span-start;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Start top alignment */
    :where(menu.start-top) {
        position-area: span-end start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Start bottom alignment */
    :where(menu.start-bottom) {
        position-area: span-start start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }


    /* End top alignment */
    :where(menu.end-top) {
        position-area: span-end end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* End bottom alignment */
    :where(menu.end-bottom) {
        position-area: span-start end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Top start corner alignment */
    :where(menu.top-start-corner, menu.start-top-corner) {
        position-area: start start;
        margin: var(--spacing-popover-offset, 0.5rem)
    }

    /* Top end corner alignment */
    :where(menu.top-end-corner, menu.end-top-corner) {
        position-area: start end;
        margin: var(--spacing-popover-offset, 0.5rem)
    }

    /* Bottom start corner alignment */
    :where(menu.bottom-start-corner, menu.start-bottom-corner) {
        position-area: end start;
        margin: var(--spacing-popover-offset, 0.5rem)
    }

    /* Bottom end corner alignment */
    :where(menu.bottom-end-corner, menu.end-bottom-corner) {
        position-area: end end;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
}

/* Forms */

@layer components {

    :where(form) {
        display: flex;
        flex-direction: column;
        gap: 1.5ch;
        width: 100%;
    }

    /* Form element wrapper */
    :where(fieldset) {
        display: flex;
        flex-direction: column;
        gap: 1.5ch;
        width: 100%;
        padding: 1.5ch;
    }

    :where(fieldset:has(legend)) {
        border-radius: var(--radius, 0.5rem);
        border-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
        border-style: solid;
        border-width: 1px;

        & :where(legend) {
            padding: 0 1.5ch;
            font-size: 0.875rem;
            color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27));
        }
    }

    /* Label wrapper */
    :where(label:has(input:not([role=button], [type=checkbox], [type=radio], [type=file]), textarea)) {
        display: flex;
        flex-direction: column;
        gap: 0.2ch;
        width: 100%;
        text-indent: 1ch;

        & :where(*) {
            text-indent: 0
        }
    }

    /* Label wrapper for radios and checkboxes */
    :where(label:has([type=radio], [type=checkbox])) {
        display: flex;
        flex-flow: row;
        align-items: center;
        gap: 1ch;
        outline: 0 none;
        cursor: pointer;

        &:focus-within {
            box-shadow: 0 0 0 0
        }
    }

    /* Group wrapper */
    :where([role=group]:has(button, input, select)) {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 0;
        width: fit-content;
        max-width: 100%;

        &>* {
            flex-shrink: 0;

            &:focus {
                z-index: 1
            }
        }

        &>*:first-child {
            border-start-end-radius: 0;
            border-end-end-radius: 0
        }

        &>*:not(:first-child):not(:last-child) {
            border-radius: 0
        }

        &>*:last-child {
            border-start-start-radius: 0;
            border-end-start-radius: 0
        }

        &.even>* {
            flex-shrink: initial;
            width: 100%
        }
    }
}

/* Inputs */

:root {
    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath d='m229.66 218.34l-50.07-50.06a88.11 88.11 0 1 0-11.31 11.31l50.06 50.07a8 8 0 0 0 11.32-11.32M40 112a72 72 0 1 1 72 72a72.08 72.08 0 0 1-72-72'/%3E%3C/svg%3E")
}

@layer components {

    :where(input, textarea, label:has(input:not([role=button], [type=checkbox], [type=radio], [type=file]))) {
        width: 100%;
        max-width: 100%;
        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        border-radius: var(--radius, 0.5rem);
        transition: var(--transition, all .05s ease-in-out);
        cursor: text;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        &:hover {
            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
        }

        &:active {
            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
        }

        &:focus-visible {
            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
        }

        &::placeholder {
            color: color-mix(in oklch, var(--color-field-inverse, oklch(16.6% 0.026 267)) 65%, transparent)
        }

        &::selection {
            background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 80%, var(--color-field-inverse, oklch(16.6% 0.026 267)))
        }

        &[type="file"] {
            display: none
        }
    }

    /* Input-specific styles */
    :where(input) {
        height: var(--spacing-field-height, 2.25rem);
        padding-left: var(--spacing-field-padding, 0.625rem);
        padding-right: var(--spacing-field-padding, 0.625rem)
    }

    /* Label wrapper for search input */
    :where(label:has(input[type="search"])) {
        display: flex;
        flex-flow: row;
        justify-content: start;
        align-items: center;
        padding-inline-start: 0;

        /* Search icon */
        & [x-icon] {
            display: flex;
            justify-content: center;
            align-items: center;
            width: var(--spacing-field-height, 2.25rem);
            height: 100%;
            margin-inline-end: 0;
            color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27))
        }

        /* Input element overrides */
        & :where(input) {
            padding-inline-start: 0;
            padding-inline-end: 0;
            background: transparent;

            &:hover,
            &:focus-visible {
                background: transparent
            }

            &:focus-visible {
                box-shadow: 0 0 0 0 transparent
            }
        }

        /* Spacing for trailing siblings */
        &:has(input + *) {
            padding-inline-end: 0.375rem;
        }
    }

    /* Hide search input cancel button */
    :where(input[type="search"])::-webkit-search-cancel-button {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    /* Textarea-specific styles */
    :where(textarea) {
        display: block;
        height: auto;
        padding: var(--spacing-field-padding, 0.625rem) calc(var(--spacing-field-padding, 0.625rem) * 1.3)
    }
}

/* Modals */

@layer components {

    :where(dialog[popover]) {
        position: fixed;
        left: 0;
        right: 0;
        width: 500px;
        flex-direction: column;
        max-width: 100%;
        min-height: 200px;
        max-height: 90vh;
        margin: auto;
        color: var(--color-content-stark, oklch(16.6% 0.026 267));
        background-color: var(--color-popover-surface, oklch(100% 0 0));
        border: 0 none;
        border-radius: calc(var(--radius, 0.5rem) * 2);
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

        &::backdrop {
            background-color: rgba(0, 0, 0, 0.2);
        }

        /* Set layout for common children */
        & :where(header, main, footer) {
            padding: calc(var(--spacing, 0.25rem) * 4);
        }

        /* Push header content apart */
        & :where(header) {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: calc(var(--spacing, 0.25rem) * 4)
        }

        /* Push footer to bottom */
        & :where(main) {
            flex-grow: 1
        }

        /* Push footer content to end */
        & :where(footer) {
            display: flex;
            justify-content: end;
            align-items: center;
            gap: calc(var(--spacing, 0.25rem) * 2);
            margin-top: auto
        }

        /* Turn modal into alert prompt on mobile */
        @media screen and (max-width: 768px) {
            width: calc(100vw - calc(var(--spacing, 0.25rem) * 4) - calc(var(--spacing, 0.25rem) * 4)) !important;
            max-height: calc(100vh - calc(var(--spacing, 0.25rem) * 4) - calc(var(--spacing, 0.25rem) * 4)) !important;
            margin: auto !important
        }
    }

    /* Dark mode override */
    .dark :where(dialog)::backdrop {
        background-color: rgba(0, 0, 0, 0.35)
    }

    /* Hide dropdowns when modals are open */
    html:has(dialog:popover-open) {

        /* Hide dropdowns outside of any modal */
        & menu[popover]:not(dialog *) {
            opacity: 0;
            scale: .9;
            pointer-events: none;
            transition: opacity .15s ease-out, scale .15s ease-out;

            &:popover-open {
                display: flex !important;
            }
        }
    }

    /* When multiple modals are open, hide dropdowns in all but closest modal */
    html:has(dialog:popover-open ~ dialog:popover-open) {
        & dialog:popover-open:not(:last-of-type) menu[popover] {
            opacity: 0;
            scale: .9;
            pointer-events: none;
            transition: opacity .15s ease-out, scale .15s ease-out;

            &:popover-open {
                display: flex !important;
            }
        }
    }
}

/* Radios */

@layer components {

    input[type=radio] {
        position: relative;
        min-width: calc(var(--spacing-field-height, 2.25rem) * 0.625);
        width: calc(var(--spacing-field-height, 2.25rem) * 0.625);
        height: calc(var(--spacing-field-height, 2.25rem) * 0.625);
        padding: 5px;
        border-radius: 50%;
        cursor: pointer;

        /* Notch */
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60%;
            height: 60%;
            background-color: var(--color-field-inverse, oklch(16.6% 0.026 267));
            border-radius: 50%;
            transform-origin: center;
            transition: var(--transition, all .05s ease-in-out);

            /* Notch unchecked */
            opacity: 0;
            -webkit-transform: translateX(-50%) translateY(-50%) scale(0);
            transform: translateX(-50%) translateY(-50%) scale(0)
        }

        /* Notch checked */
        &:checked::after {
            opacity: 1;
            -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
            transform: translateX(-50%) translateY(-50%) scale(1)
        }
    }
}

/* Resize Handles */

:root {
    --spacing-resize-handle: 1rem;
}

@layer utilities {

    :where([x-resize]) {
        position: relative;

        /* Resize handle area */
        .resize-handle {
            position: absolute;
            display: block;
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            z-index: 100;
            background: transparent;
            border: none;
            outline: none;

            /* Visible handle */
            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 0.1875rem;
                height: 0.1875rem;
                background: transparent;
                border-radius: var(--radius, 0.5rem);
                transition: background-color 0.2s ease;
                pointer-events: none
            }

            &:hover::before,
            &:active::before {
                background-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
            }
        }

        /* Edge handles */
        .resize-handle-top,
        .resize-handle-bottom {
            width: 100%;
            left: 0;
            cursor: ns-resize;

            &::before {
                width: 100%;
            }
        }

        .resize-handle-left,
        .resize-handle-right,
        .resize-handle-start,
        .resize-handle-end {
            height: 100%;
            top: 0;
            cursor: ew-resize;

            &::before {
                height: 100%;
            }
        }

        .resize-handle-top {
            top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        }

        .resize-handle-bottom {
            top: auto;
            bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        }

        .resize-handle-left,
        .resize-handle-start {
            left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        }

        .resize-handle-right,
        .resize-handle-end {
            right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        }

        /* Corner handles */
        .resize-handle-top-left {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: nw-resize;
        }

        .resize-handle-top-right {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: ne-resize;
        }

        .resize-handle-bottom-left {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: sw-resize;
        }

        .resize-handle-bottom-right {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: se-resize;
        }

        /* Logical direction handles */
        .resize-handle-top-start {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: nw-resize;
        }

        .resize-handle-top-end {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: ne-resize;
        }

        .resize-handle-bottom-start {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: sw-resize;
        }

        .resize-handle-bottom-end {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: se-resize;
        }

        /* Screen overlay to get mouse coordinates */
        .resize-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            display: none;
            background: transparent
        }

        /* Resize states */
        .resizable-closing {
            opacity: 0.5;
            transition: opacity 0.2s ease
        }

        .resizable-closed {
            display: none !important
        }

        /* Focus states for accessibility */
        .resize-handle:focus {
            outline: 2px solid rgba(59, 130, 246, 0.5);
            outline-offset: 2px
        }

        /* High contrast mode support */
        @media (prefers-contrast: high) {
            :where(.resize-handle:hover .resize-handle-inner) {
                background: rgba(0, 0, 0, 0.3)
            }

            :where(.resize-handle:active .resize-handle-inner) {
                background: rgba(0, 0, 0, 0.5)
            }
        }

        /* Reduced motion support */
        @media (prefers-reduced-motion: reduce) {

            :where(.resize-handle-inner,
                .resizable-closing,
                .resize-handle) {
                transition: none
            }
        }
    }

    /* RTL overrides - more specific than :where([x-resize]) */
    [dir="rtl"] :where([x-resize]) .resize-handle-start {
        left: auto;
        right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
    }

    [dir="rtl"] :where([x-resize]) .resize-handle-end {
        right: auto;
        left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
    }

    [dir="rtl"] :where([x-resize]) .resize-handle-top-start {
        left: auto;
        right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        cursor: ne-resize;
    }

    [dir="rtl"] :where([x-resize]) .resize-handle-top-end {
        right: auto;
        left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        cursor: nw-resize;
    }

    [dir="rtl"] :where([x-resize]) .resize-handle-bottom-start {
        left: auto;
        right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        cursor: se-resize;
    }

    [dir="rtl"] :where([x-resize]) .resize-handle-bottom-end {
        right: auto;
        left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        cursor: sw-resize;
    }
}

/* Sidebars */

@layer components {

    :where(aside[popover]) {
        inset-inline-start: auto;
        inset-inline-end: 0;
        width: fit-content;
        min-width: 20vw;
        max-width: 80vw;
        max-width: 100%;
        height: 100%;
        overflow-y: auto;
        z-index: 200;
        background-color: var(--color-popover-surface, oklch(100% 0 0));
        transition: opacity .15s ease-in, transform .15s ease-in, display .15s ease-in;
        transition-behavior: allow-discrete;

        /* Opening state - slide in from inline-end */
        @starting-style {
            transform: translateX(100%);
            opacity: 1;
            scale: 1;
        }

        /* Closing state - slide out to inline-end */
        &:not(:popover-open) {
            transform: translateX(100%);
            opacity: 1;
            scale: 1;
        }

        /* RTL overrides - slide in from left in RTL context */
        [dir="rtl"] & {
            @starting-style {
                transform: translateX(-100%);
            }

            &:not(:popover-open) {
                transform: translateX(-100%);
            }
        }

        /* Modifier class to originate sidebar from inline-start (left in LTR, right in RTL) */
        &.start {
            inset-inline-start: 0;
            inset-inline-end: auto;

            @starting-style {
                transform: translateX(-100%);
            }

            &:not(:popover-open) {
                transform: translateX(-100%);
            }

            /* RTL overrides */
            [dir="rtl"] & {
                @starting-style {
                    transform: translateX(100%);
                }

                &:not(:popover-open) {
                    transform: translateX(100%);
                }
            }
        }
    }

    /* Dark mode override */
    .dark :where(aside[popover]) {
        background-color: var(--color-surface-1, oklch(98.17% 0.0005 95.87))
    }
}

/* Carousels */

@layer components {

    [x-carousel] {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;

        /* Slides container */
        .carousel-slides {
            display: flex;
            transition: transform 300ms ease-in-out;
            width: 100%;
            aspect-ratio: 16 / 9
        }

        /* Previous & next buttons */
        & button[\@click="prev()"],
        & button[\@click="next()"] {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: oklch(100% 0 0 / 0.15);

            &:hover {
                background-color: oklch(100% 0 0 / 0.3)
            }
        }

        & button[\@click="prev()"] {
            left: calc(var(--spacing) * 4)
        }

        & button[\@click="next()"] {
            left: auto;
            right: calc(var(--spacing) * 4)
        }

        /* Dots container */
        .carousel-dots {
            position: absolute;
            bottom: calc(var(--spacing) * 4);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: calc(var(--spacing) * 2);
            max-width: 100%;
            padding: 0 calc(var(--spacing) * 4);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;

            &::-webkit-scrollbar {
                display: none
            }

            /* Dot button */
            & span {
                flex-shrink: 0;
                width: 0.625rem;
                height: 0.625rem;
                border-radius: 50%;
                background-color: oklch(100% 0 0 / 0.15);
                cursor: pointer;
                transition: background-color 300ms ease-in-out;

                &:hover {
                    background-color: oklch(100% 0 0 / 0.3)
                }

                &.active {
                    background-color: white
                }
            }
        }
    }
}

/* Switches */

@layer components {

    :where(input[role=switch]) {
        position: relative;
        min-width: calc(var(--spacing-field-height, 2.25rem) * 0.65 * 2);
        width: calc(var(--spacing-field-height, 2.25rem) * 0.65 * 2);
        height: calc(var(--spacing-field-height, 2.25rem) * 0.65);
        padding: 0;
        box-sizing: content-box;
        border-radius: calc(var(--spacing-field-height, 2.25rem) * 0.65);
        cursor: pointer;

        /* Marker */
        &::before {
            content: "";
            position: absolute;
            top: 0.125rem;
            left: 0.125rem;
            width: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
            height: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
            border-radius: 50%;
            background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 60%, var(--color-field-inverse, oklch(16.6% 0.026 267)));
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
            transition: var(--transition, all .05s ease-in-out)
        }

        /* Checked */
        &:checked {
            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));

            /* Marker */
            &::before {
                left: calc(100% - (var(--spacing-field-height, 2.25rem) * 0.65) + 0.125rem);
                background-color: var(--color-field-inverse, oklch(16.6% 0.026 267))
            }

            &:hover {
                background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
            }
        }
    }
}

/* Tables */

@layer components {

    :where(table, .grid-table) {
        table-layout: auto;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border-spacing: 0;
        border-radius: var(--radius, 0.5rem);

        /* Grid utility classes */
        :where(.grid-header, .grid-row, .grid-footer) {
            display: contents
        }

        /* Header row */
        :where(thead, .grid-header > *) {
            background-color: var(--color-surface-1, oklch(98.17% 0.0005 95.87));
            border-bottom: 1px solid var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15))
        }

        /* Header cell */
        :where(th, .grid-header > *) {
            font-weight: bold
        }

        /* Row */
        :where(tr, .grid-row > *) {
            border-bottom: 1px solid var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15))
        }

        /* Cell */
        :where(td, th, .grid-header > *, .grid-row > *, .grid-footer > *) {
            padding: calc(var(--spacing, 0.25rem) * 2.5) calc(var(--spacing, 0.25rem) * 4);
            font-size: 0.875rem;
            text-align: left;
            text-align: start;
            overflow: hidden;

            /* Make elements within cell inline */
            &>*:not(template) {
                display: inline-flex;
                vertical-align: middle;

                /* Add space between them */
                &:not(:last-child) {
                    margin-right: 4px
                }
            }
        }

        /* Footer row */
        :where(:not(:has(tfoot)) tbody tr:last-child, tfoot tr:last-child, .grid-footer > *) {
            border-bottom: 0
        }

        /* Striped utility class */
        &.striped {
            :where(tr:nth-child(even), .grid-row:nth-child(even)) {
                background-color: var(--color-surface-1, oklch(98.17% 0.0005 95.87))
            }

            :where(tr:nth-child(odd), .grid-row:nth-child(odd)) {
                background-color: transparent
            }

            :where(tr, .grid-row) {
                border-bottom: 0 none
            }
        }
    }
}

/* Toasts */

:root {
    --icon-toast-dismiss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E")
}

@layer utilities {

    :where(.toast-container) {
        position: fixed;
        bottom: 3vw;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: calc(var(--spacing, 0.25rem) * 2);
        z-index: 100;
    }

    :where(.toast) {
        display: flex;
        max-width: 90vw;
        background-color: var(--color-popover-surface, oklch(100% 0 0));
        border: 1px solid var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
        border-radius: calc(var(--radius, 0.5rem) * 2);
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        overflow: hidden;
        opacity: 0;
        transform: translateY(1rem);
        transition:
            opacity 0.2s ease-out,
            transform 0.2s ease-out,
            height 0.2s ease-out,
            margin 0.2s ease-out,
            padding 0.2s ease-out;

        /* Content */
        :where(.toast-content) {
            display: flex;
            align-items: center;
            padding: 0.375rem 0.75rem;
            color: inherit;

            :where([x-icon]:first-child) {
                margin-right: 1ch
            }
        }

        /* Dismiss button */
        :where(.toast-dismiss-button) {
            position: relative;
            border-inline-start: 1px solid color-mix(in oklch, var(--color-content-stark, oklch(16.6% 0.026 267)) 20%, transparent);
            border-radius: 0;

            /* Icon */
            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 50%;
                height: 50%;
                background-color: var(--color-field-inverse, oklch(16.6% 0.026 267));
                -webkit-mask-image: var(--icon-toast-dismiss);
                mask-image: var(--icon-toast-dismiss);
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                -webkit-mask-size: 100% 100%;
                mask-size: 100% 100%;
                transform-origin: center;
                -webkit-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%)
            }
        }
    }

    /* Brand, accent, positive, negative utility class overrides (see Utilities) */
    :where(.toast.brand, .toast.accent, .toast.positive, .toast.negative) {
        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));

        :where(.toast-dismiss-button) {
            border-inline-start: 1px solid color-mix(in oklch, var(--color-field-inverse, oklch(16.6% 0.026 267)) 20%, transparent);
        }
    }

    /* Entry animation */
    :where(.toast-entry) {
        opacity: 1;
        transform: translateY(0);
    }

    /* Exit animation */
    :where(.toast-exit) {
        opacity: 0;
        transform: translateY(1rem)
    }
}

/* Tooltips */
:root {
    --tooltip-hover-delay: 500ms;
}


@layer utilities {

    :where(.tooltip[popover]) {
        position: absolute;
        position-try-fallbacks: flip-inline, flip-block, flip-start;
        position-area: bottom;
        inset: auto;
        display: block;
        width: fit-content;
        max-width: 200px;
        margin: var(--spacing-popover-offset, 0.5rem) 0;
        padding: calc(var(--spacing, 0.25rem) * .5) calc(var(--spacing, 0.25rem) * 2);
        font-size: 0.875rem;
        color: var(--color-page, oklch(100% 0 0));
        background-color: var(--color-content-stark, oklch(16.6% 0.026 267));
        border: 0 none;
        border-radius: var(--radius, 0.5rem);
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

        &:hover {
            transition-delay: 1s
        }

        /* Leading icon */
        & [x-icon]:first-child {
            margin-inline-end: 0.25rem
        }
    }

    /* Top alignment */
    :where(.tooltip.top) {
        position-area: top;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom alignment */
    :where(.tooltip.bottom) {
        position-area: bottom;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Start alignment */
    :where(.tooltip.start) {
        position-area: center start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* End alignment */
    :where(.tooltip.end) {
        position-area: center end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Top start alignment */
    :where(.tooltip.top-start) {
        position-area: start span-end;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Top end alignment */
    :where(.tooltip.top-end) {
        position-area: start span-start;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom start alignment */
    :where(.tooltip.bottom-start) {
        position-area: end span-end;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom end alignment */
    :where(.tooltip.bottom-end) {
        position-area: end span-start;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Start top alignment */
    :where(.tooltip.start-top) {
        position-area: span-end start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Start bottom alignment */
    :where(.tooltip.start-bottom) {
        position-area: span-start start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* End top alignment */
    :where(.tooltip.end-top) {
        position-area: span-end end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* End bottom alignment */
    :where(.tooltip.end-bottom) {
        position-area: span-start end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Top start corner alignment */
    :where(.tooltip.top-start-corner, .tooltip.start-top-corner) {
        position-area: start start;
        margin: var(--spacing-popover-offset, 0.5rem)
    }

    /* Top end corner alignment */
    :where(.tooltip.top-end-corner, .tooltip.end-top-corner) {
        position-area: start end;
        margin: var(--spacing-popover-offset, 0.5rem)
    }

    /* Bottom start corner alignment */
    :where(.tooltip.bottom-start-corner, .tooltip.start-bottom-corner) {
        position-area: end start;
        margin: var(--spacing-popover-offset, 0.5rem)
    }

    /* Bottom end corner alignment */
    :where(.tooltip.bottom-end-corner, .tooltip.end-bottom-corner) {
        position-area: end end;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
}

/* Typography */

@layer base {

    /* All text elements */
    :where(a, abbr, address, blockquote, code, del, figcaption, h1, h2, h3, h4, h5, h6, ins, label, legend, p, small, cite, q),
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    .paragraph,
    .small,
    .caption {
        color: var(--color-content-stark, oklch(16.6% 0.026 267));

        /* Support inline icons */
        &:where(:has([x-icon])) {
            display: inline-flex;
            align-items: center;

            /* Inline icon spacing */
            & [x-icon] {
                margin-inline-end: 0.5ch;
            }
        }

        /* Inline span alignment */
        & span {
            vertical-align: inherit
        }
    }

    /* Headings */
    :where(h1, h2, h3, h4, h5, h6),
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
        font-weight: bolder;
        word-wrap: break-word
    }

    :where(h1, h2, h3, h4),
    .h1,
    .h2,
    .h3,
    .h4 {
        font-weight: 700;
    }

    :where(h1, h2, h3),
    .h1,
    .h2,
    .h3 {
        letter-spacing: -0.025em
    }

    :where(h1),
    .h1 {
        font-size: 2.25rem;
        line-height: 1.25
    }

    :where(h2),
    .h2 {
        font-size: 1.5rem
    }

    :where(h3),
    .h3 {
        font-size: 1.25rem;
        line-height: 1.4
    }

    :where(h4),
    .h4 {
        font-size: 1rem
    }

    :where(h5),
    .h5 {
        font-weight: 600;
        font-size: .875rem;
        line-height: 1rem;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
    }

    :where(h6),
    .h6 {
        font-weight: 600;
        font-size: 0.8125rem;
        line-height: 1.4;
        text-transform: uppercase;
    }

    /* Paragraphs */
    :where(p),
    .paragraph {
        line-height: 1.6;
    }

    /* Links */
    :where(a:not([role=button]), button.link) {
        text-decoration: underline;
        text-underline-offset: 2px;
        cursor: pointer;
        transition: var(--transition, all .05s ease-in-out);

        &:hover {
            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
        }

        &:active {
            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
        }
    }

    /* Blockquotes */
    :where(blockquote) {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: calc(var(--spacing, 0.25rem) * 4) 0;
        padding: 0 calc(var(--spacing, 0.25rem) * 4);
        color: var(--color-content-stark, oklch(16.6% 0.026 267));
        border-inline-start: 0.25rem solid color-mix(in oklch, var(--color-content-stark, oklch(16.6% 0.026 267)) 25%, transparent);
        border-inline-end: none;

        & * {
            color: inherit
        }
    }

    /* Inline code */
    :where(code) {
        display: inline-block;
        width: fit-content;
        height: fit-content;
        padding: 0.1ch 0.5ch;
        font-size: 75%;
        font-weight: 600;
        word-wrap: break-word;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
        background-color: color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 10%, transparent);
        border-radius: calc(var(--radius, 0.5rem) / 1.5)
    }

    /* Captions */
    :where(figcaption),
    .caption {
        font-size: 0.8125rem;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));

        & a {
            font-weight: inherit;
            color: inherit
        }
    }

    :where(figure figcaption) {
        margin: calc(var(--spacing, 0.25rem) * 2) auto;
        text-align: center
    }

    /* Small text */
    :where(small),
    .small {
        font-size: 0.875rem;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
    }

    /* Icons */
    :where([x-icon]) {
        display: inline-flex
    }

    /* Inserted text */
    :where(ins) {
        text-decoration: none
    }

    /* Keyboard text */
    :where(kbd) {
        display: inline-block;
        vertical-align: baseline;
        width: fit-content;
        min-width: 1.4rem;
        padding: 0.3rem;
        font-family: inherit;
        font-size: 75%;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
        background-color: color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 10%, transparent);
        border-radius: calc(var(--radius, 0.5rem) / 1.5);

        &:not(:last-of-type) {
            margin-inline-end: 1px
        }
    }

    /* RTL keyboard overrides */
    [dir="rtl"] :where(kbd:not(:last-of-type)) {
        margin-inline-start: 1px;
        margin-inline-end: 0
    }

    /* Labels */
    :where(label) {
        width: -moz-fit-content;
        width: fit-content;
        user-select: none
    }

    /* Legends */
    :where(legend) {
        display: block;
        max-width: 100%;
        white-space: normal
    }

    /* Badges */
    :where(mark) {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        width: fit-content;
        height: fit-content;
        padding: var(--spacing, 0.25rem) calc(var(--spacing, 0.25rem) * 1.5);
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 1;
        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        border-radius: 100px;

        /* Solo icons */
        &:has(svg:only-child) {
            padding: var(--spacing, 0.25rem) calc(var(--spacing, 0.25rem) * 1);
        }
    }

    /* Lists */
    :where(ol):not(nav ol):not(menu ol) {
        list-style-type: decimal;
    }

    :where(ul):not(nav ul):not(menu ul) {
        list-style-type: disc;
    }

    :where(ol):not(nav ol):not(menu ol),
    :where(ul):not(nav ul):not(menu ul) {

        &:not(:has(input[type="checkbox"])) {
            padding-inline-start: 1.75ch;
        }

        /* Offset items so markers align inside the element frame  */
        & li {
            padding-inline-start: 1ch;

            /* Space out items */
            &:not(:last-of-type) {
                margin-bottom: 1.25ch
            }

            /* Allow icons to replace markers */
            &:has([x-icon]) {
                position: relative;
                display: inherit;
                list-style: none;

                & [x-icon] {
                    position: absolute;
                    top: 0.45ch;
                    left: -1.75ch
                }
            }

            /* Checklist items */
            &:has(input[type="checkbox"]) {
                position: relative;
                display: inherit;
                list-style: none;

                & input[type="checkbox"] {
                    position: absolute;
                    top: 0.45ch;
                    left: -1ch
                }
            }
        }
    }

    /* RTL list overrides */
    [dir="rtl"] :where(ol):not(nav ol):not(menu ol),
    [dir="rtl"] :where(ul):not(nav ul):not(menu ul) {
        & li:has([x-icon]) {
            & [x-icon] {
                left: auto;
                right: -1.75ch
            }
        }

        & li:has(input[type="checkbox"]) {
            & input[type="checkbox"] {
                left: auto;
                right: -1.25ch
            }
        }
    }

    /* Nested list spacing */
    :where(ol, ul):not(nav ol):not(menu ol) ul,
    :where(ol, ul):not(nav ul):not(menu ul) ol {
        margin-top: 1ch;
        padding-inline-start: 2.75ch;

        &+li {
            margin-top: 1.5ch
        }
    }

    /* Spans */
    :where(span) {
        vertical-align: middle
    }
}

/* Utilities */

:root {
    --spacing-content-width: 68.75rem;
    --spacing-viewport-padding: 5vw
}

@layer utilities {

    /* Center in flex parent */
    :where(.center) {
        justify-content: center;
        align-items: center
    }

    /* Flex utilities */
    :where(.row, .row-wrap, .col, .col-wrap) {
        display: flex
    }

    /* Flex column */
    :where(.col) {
        flex-flow: column nowrap
    }

    /* Wrapping flex column */
    :where(.col-wrap) {
        flex-flow: column wrap
    }

    /* Flex row */
    :where(.row) {
        flex-flow: row nowrap
    }

    /* Wrapping flex row */
    :where(.row-wrap) {
        flex-flow: row wrap
    }

    /* Content width & horizontal centering */
    :where(.content) {
        width: var(--spacing-content-width, 68.75rem);
        max-width: 100%;
        margin-inline-start: auto;
        margin-inline-end: auto
    }

    /* Ghost */
    :where(.ghost) {
        color: var(--color-content-stark, oklch(16.6% 0.026 267));
        background-color: transparent;

        &:hover {
            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
        }

        &.brand:hover {
            color: var(--color-brand-inverse, #763518)
        }

        &.accent:hover {
            color: var(--color-accent-inverse, oklch(100% 0 0))
        }

        &.negative:hover {
            color: var(--color-negative-inverse, white)
        }
    }

    /* Hug */
    :where(.hug) {
        min-width: 0;
        width: fit-content;
        height: fit-content;
        padding: 0
    }

    /* Outlined */
    :where(.outlined) {
        border-width: 1.5px;
        border-style: solid;
        border-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 90%, var(--color-field-inverse, oklch(16.6% 0.026 267)))
    }

    /* Dark theme override */
    .dark :where(.outlined) {
        border-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 80%, var(--color-field-inverse, oklch(16.6% 0.026 267)))
    }

    /* Selected */
    :where(.selected) {
        background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 25%, transparent);
    }

    /* Transparent */
    :where(.transparent) {
        background-color: transparent !important
    }

    /* Large */
    :where(.lg) {
        --spacing-field-height: 2.5rem;
        --spacing-field-padding: 0.78rem;
        font-size: 125%
    }

    /* Small */
    :where(.sm) {
        --spacing-field-height: 1.5rem;
        --spacing-field-padding: 0.49rem;
        font-size: 75%;

        /* Reposition select picker icon */
        &::picker-icon {
            line-height: 0.2
        }
    }

    /* Page content layout */
    :where(body.page) {
        display: flex;
        flex-direction: column;
        min-height: 100vh
    }

    .page {

        /* Overlay header & footer if fixed */
        &>header,
        &>footer {
            z-index: 30
        }

        /* Page margins */
        &>header,
        &>footer,
        &>main {
            padding-inline-start: var(--spacing-viewport-padding);
            padding-inline-end: var(--spacing-viewport-padding)
        }

        /* Width and horizontal centering for content wrappers */
        &>header nav,
        &>footer nav,
        &>main>section:not(.banner, .overlay-dark, .overlay-light) {
            width: var(--spacing-content-width);
            max-width: 100%;
            margin-inline-start: auto;
            margin-inline-end: auto
        }

        /* Push footer down */
        &>footer {
            margin-top: auto
        }
    }

    /* No focus */
    .no-focus:focus,
    .no-focus:focus-visible,
    .no-focus:focus-within {
        box-shadow: 0 0 0 0 transparent
    }

    /* No scrollbar */
    :where(.no-scrollbar) {
        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none
        }
    }

    /* Banner overlays */
    :where(.overlay-dark, .overlay-light) {
        position: relative;

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;
            height: 100%
        }

        >* {
            position: relative;
            z-index: 1
        }
    }

    /* Dark overlay */
    :where(.overlay-dark) {
        color: white !important;

        &::after {
            background: oklch(0% 0 0 / 50%)
        }
    }

    /* Light overlay */
    :where(.overlay-light) {
        color: black !important;

        &::after {
            background: oklch(100% 0 0 / 75%)
        }
    }

    /* Prose styles for long-form content */
    :where(.prose) {
        width: 65ch;
        max-width: 100%;

        /* Asides inside a prose element are used as callouts */
        & aside:not([popover]) {
            margin-top: calc(1rem * 1.4);
            padding: 1rem;
            border-radius: calc(var(--radius, 0.5rem) * 2);
            color: var(--color-content-stark, oklch(16.6% 0.026 267));
            background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 20%, transparent);
            border: 1px solid color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 30%, transparent);

            &:not(.frame) * {
                color: inherit
            }

            &:has([x-icon]):not(.frame) {
                display: flex;
                flex-direction: row;
                gap: 1rem;

                & [x-icon] {
                    padding-top: 0.25rem;
                    font-size: 1.25rem
                }
            }
        }

        &>a:not(:where(h1, h2, h3, h4, h5, h6, p, small, figcaption, label, li, blockquote, pre code, code, kbd, span, mark, [role=button]) a) {
            margin-top: calc(1rem * 1.4);
        }

        &>blockquote {
            margin-top: calc(1rem * 2);

            & * {
                margin: 0
            }
        }

        &>figcaption {
            margin-top: 1rem
        }

        &>figure {
            margin-top: calc(1rem * 1.4);

            & img {
                margin: 0
            }
        }

        &>h1+p {
            margin-top: 0.625rem;
            font-size: 1.125rem;
            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
        }

        &>h2 {
            margin-top: 1rem;
            margin-bottom: calc(1rem * 0.6667)
        }

        &>h3 {
            margin-top: calc(1rem * 2.4)
        }

        &>h4 {
            margin-top: calc(1rem * 3)
        }

        &>h5 {
            margin-top: 1rem;
            margin-bottom: 1rem
        }

        &>h6 {
            margin-top: calc(1rem * 2);
            margin-bottom: 1rem
        }

        &>hr {
            margin-top: calc(1rem * 3);
            margin-bottom: calc(1rem * 3)
        }

        &>img,
        &>p {
            margin-top: calc(1rem * 1.4)
        }

        &>ol,
        &>ul,
        &>small {
            margin-top: 1rem
        }

        &>table {
            margin-top: calc(1rem * 2);
            margin-bottom: calc(1rem * 2)
        }

        &>x-code-group,
        &>x-code,
        &>pre {
            margin-top: 2rem;
            margin-bottom: 2rem
        }

        &>x-code-group x-code {
            margin-top: 0;
            margin-bottom: 0
        }

        &>x-code pre {
            margin-top: 0;
            margin-bottom: 0
        }
    }

    /* Inline trailing content */
    :where(.trailing) {
        display: inline-block;
        margin-inline-start: auto;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
    }

    /* Brand colors */
    :where(.brand) {
        --color-field-surface: var(--color-brand-surface, #f6c07b);
        --color-field-surface-hover: var(--color-brand-surface-hover, #f19b46);
        --color-field-inverse: var(--color-brand-inverse, #763518);
        --color-content-stark: var(--color-brand-content, #de6618);
        --color-content-neutral: color-mix(in oklch, var(--color-brand-content, #de6618) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-brand-content, #de6618) 70%, transparent);
    }

    /* Accent colors */
    :where(.accent) {
        --color-field-surface: var(--color-accent-surface, oklch(16.6% 0.026 267));
        --color-field-surface-hover: var(--color-accent-surface-hover, oklch(28.7% 0.030787 270.1));
        --color-field-inverse: var(--color-accent-inverse, oklch(100% 0 0));
        --color-content-stark: var(--color-accent-content, oklch(16.6% 0.026 267));
        --color-content-neutral: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 70%, transparent);
    }

    /* Negative colors */
    :where(.negative) {
        --color-field-surface: var(--color-negative-surface, #ef4444);
        --color-field-surface-hover: var(--color-negative-surface-hover, #dc2626);
        --color-field-inverse: var(--color-negative-inverse, white);
        --color-content-stark: var(--color-negative-content, #ef4444);
        --color-content-neutral: color-mix(in oklch, var(--color-negative-content, #ef4444) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-negative-content, #ef4444) 70%, transparent);
    }

    /* Positive colors */
    :where(.positive) {
        --color-field-surface: var(--color-positive-surface, #16a34a);
        --color-field-surface-hover: var(--color-positive-surface-hover, #166534);
        --color-field-inverse: var(--color-positive-inverse, white);
        --color-content-stark: var(--color-positive-content, #16a34a);
        --color-content-neutral: color-mix(in oklch, var(--color-positive-content, #16a34a) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-positive-content, #16a34a) 70%, transparent);
    }
}