/*  Manifest CSS
/*  By Andrew Matlock under MIT license
/*  https://manifestx.dev
/*  Modify referenced variables in manifest.theme.css
*/

/* Manifest Reset - browser style normalizer */

@layer base, components, utilities;

@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;

        /* Device safe-area insets (0 unless viewport-fit=cover on a notched screen) */
        --safe-top: env(safe-area-inset-top, 0px);
        --safe-right: env(safe-area-inset-right, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
        --safe-left: env(safe-area-inset-left, 0px)
    }

    :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) {
        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], .disabled) {
        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, color-mix(in oklch, oklch(20.5% 0 0) 12%, transparent));
        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: color-mix(in oklab, currentcolor 50%, transparent)
    }

    /* Animates `scale`, not `transform`: a transform animation with fill `both`
       keeps its final value and would override any transform an author sets on
       a popover of their own. */
    @keyframes mnfst-popover-in {
        from {
            scale: .9;
        }

        to {
            scale: 1;
        }
    }

    :where([popover]):not(.unstyle):popover-open {
        display: flex;
        animation: mnfst-popover-in .15s ease-in both;
    }

    :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
    }

    /* @ 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
        }
    }

    /* View transition styles */
    ::view-transition-group(*) {
        animation-duration: var(--view-transition-duration, 200ms);
        animation-timing-function: var(--view-transition-easing, cubic-bezier(0.4, 0, 0.2, 1))
    }

    /* Skip view transition for live/non-rasterizable content */
    iframe,
    video,
    canvas,
    [data-no-view-transition] {
        view-transition-name: none
    }
}

/* Cross-document view transitions opt-in */
@view-transition {
    navigation: auto
}

/* Unlayered on purpose: a closed popover must beat layer-based layout classes. */
[popover]:not(.unstyle):not(:popover-open) {
    display: none;
}

/* Manifest Accordions */

@layer base, components, utilities;

@layer components {


    :where(details):not(.unstyle) {
        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)
        }

        &>:last-child {
            margin-bottom: calc(var(--spacing, 0.25rem) * 8)
        }

        /* Content */
        :where(summary) {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-field-padding, 0.625rem) 0;
            font-weight: bold;
            color: var(--color-content-stark, oklch(43.9% 0 0));
            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(97% 0 0)) 40%, var(--color-content-stark, oklch(43.9% 0 0)))
            }

            &:active {
                color: color-mix(in oklch, var(--color-surface-1, oklch(97% 0 0)) 50%, var(--color-content-stark, oklch(43.9% 0 0)))
            }

            /* Add custom icon */
            &:before {
                content: "";
                order: 1;
                width: 1rem;
                height: 1rem;
                background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 50%, var(--color-field-inverse, oklch(43.9% 0 0)));
                mask-image: var(--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"));
                mask-repeat: no-repeat;
                mask-size: 100% 100%;
                transform: rotate(0);
                transition: 0.25s transform ease
            }
        }
    }

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

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

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

/* Manifest Avatars */

@layer base, components, utilities;

@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(43.9% 0 0));
        /* surface-3, not field-surface: an avatar is content, not a control.
           Themes are free to make fields translucent, and a see-through avatar
           bleeds the one stacked behind it. Same value in both modes today. */
        background-color: var(--color-surface-3, oklch(87% 0 0));
        background-clip: content-box;
        background-size: cover;
        background-position: center;
        border-radius: 50%;

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

        /* 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-surface-3, oklch(87% 0 0));
            border: 1px solid var(--color-page, oklch(98.5% 0 0));
            border-radius: 50%
        }
    }

    /* Button & label versions */
    :where(button.avatar, [role=button].avatar, label.avatar):not(.unstyle) {
        padding: 0;
        background-blend-mode: normal;

        &:hover {
            /* Steps off the avatar's own surface, not a field token — darkens in
               light mode, lightens in dark, and never goes translucent. */
            background-color: color-mix(in oklch, var(--color-surface-3, oklch(87% 0 0)) 88%, var(--color-content-stark, oklch(20.5% 0 0)));
            background-blend-mode: multiply;

            & img {
                filter: brightness(0.9)
            }
        }

        & span {
            padding: 0
        }
    }

    /* Sizes */
    :where(.avatar.sm) {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.75rem
    }

    :where(.avatar.lg) {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem
    }

    /* 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: color-mix(in oklch, var(--color-surface-3, oklch(87% 0 0)) 88%, var(--color-content-stark, oklch(20.5% 0 0)));
            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(98.5% 0 0))
        }
    }
}

/* Manifest Buttons */

@layer base, components, utilities;

@layer components {

    :where(button:not(.link), [role=button], [type=button], [type=reset], [type=submit], select):not(code, .unstyle) {
        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(43.9% 0 0));
        background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        border-radius: var(--radius, 0.5rem);
        outline-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
        cursor: pointer;
        transition: var(--transition, all .05s ease-in-out);
        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, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
        }

        &:active {
            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
        }

        &:focus-visible {
            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
        }
    }

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

        &::picker-icon {
            content: "";
            width: 1rem;
            height: 1rem;
            background-color: currentColor;
            mask-repeat: no-repeat;
            mask-size: 100% 100%;
            mask-image: var(--icon-chevron-down, 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='m6 9 6 6 6-6'/%3E%3C/svg%3E"))
        }
    }

    /* Without base-select the reset's `appearance: button` leaves the select
       natively rendered, and WebKit then ignores the author's border-radius and
       imposes its own — so selects stop matching every other field. `appearance:
       none` hands styling back; it also drops the native arrow, and ::picker-icon
       only paints under base-select, so redraw the chevron as a background. It
       can't be masked to currentColor there (an SVG loaded as an image can't see
       it), hence the baked mid-grey, legible on the field surface in both modes. */
    @supports not (appearance: base-select) {
        :where(select):not(.unstyle) {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23808080' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right var(--spacing-field-padding, 0.625rem) center;
            background-size: 1rem;
            padding-inline-end: calc(var(--spacing-field-padding, 0.625rem) * 2 + 1rem)
        }
    }
}

/* Manifest Charts */

@layer base, components, utilities;

:root {
    /* Chart guidance */
    --color-chart-grid: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
    --color-chart-label: var(--color-content-subtle, oklch(55.6% 0 0));

    /* Heatmap ramp — single-hue sequential scale derived from --color-chart-1,
       spanning a pale tint to a deep, saturated shade so values stay legible
       even when the brand color itself is light. */
    --color-chart-heat-low: oklch(from var(--color-chart-1) 0.95 calc(c * 0.3) h);
    --color-chart-heat-high: oklch(from var(--color-chart-1) 0.55 calc(c * 1.15) h);

    /* Chart data segments */
    --color-chart-1: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
    --color-chart-2: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
    --color-chart-3: var(--color-yellow-600, oklch(68.1% 0.162 75.834));
    --color-chart-4: var(--color-amber-400, oklch(82.8% 0.189 84.429));
    --color-chart-5: var(--color-amber-500, oklch(76.9% 0.188 70.08));
    --color-chart-6: var(--color-amber-600, oklch(66.6% 0.179 58.318));
    --color-chart-7: var(--color-orange-400, oklch(75% 0.183 55.934));
    --color-chart-8: var(--color-orange-500, oklch(70.5% 0.213 47.604));
    --color-chart-9: var(--color-orange-600, oklch(64.6% 0.222 41.116));
}

@layer utilities {

    :where([x-chart], .chart):not(.unstyle) {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        width: 100%;
        position: relative;

        & svg {
            display: block;
            width: 100%;
            overflow: visible
        }

        /* Grid lines */
        & svg line {
            stroke: var(--color-chart-grid);
            stroke-width: 1;
            shape-rendering: crispEdges
        }

        /* Axis labels */
        & svg text {
            fill: var(--color-chart-label);
            font-size: 0.6875rem;
            font-family: inherit
        }

        /* Line series */
        & path.line {
            stroke: var(--color-chart-color, var(--color-chart-1));
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        /* Area series */
        & path.area {
            fill: var(--color-chart-color, var(--color-chart-1));
            opacity: 0.15
        }

        /* Points */
        & circle {
            fill: var(--color-chart-color, var(--color-chart-1));
            stroke: var(--color-page, oklch(98.5% 0 0));
            stroke-width: 1.5;
            transition: r var(--transition-duration, .1s) ease;

            &:not(.map-point):hover {
                r: 5
            }
        }

        & circle.scatter {
            opacity: 0.85
        }

        /* Bars */
        & rect {
            fill: var(--color-chart-color, var(--color-chart-1));
            transition: opacity var(--transition-duration, .1s) ease;

            &:hover {
                opacity: 0.82
            }
        }

        /* Candlesticks — wick <line> + body <rect> in a positive/negative <g> */
        & g.positive,
        & g.negative {
            & line {
                stroke: var(--color-chart-candle);
                stroke-width: 1.5
            }

            & rect {
                fill: var(--color-chart-candle)
            }
        }

        & g.positive {
            --color-chart-candle: var(--color-positive-content, oklch(60% 0.13 150))
        }

        & g.negative {
            --color-chart-candle: var(--color-negative-content, oklch(60% 0.18 25))
        }

        /* Pie / donut slices */
        & path.slice {
            fill: var(--color-chart-color, var(--color-chart-1));
            stroke: var(--color-page, oklch(98.5% 0 0));
            stroke-width: 2;
            transition: opacity var(--transition-duration, .1s) ease;

            &:hover {
                opacity: 0.85
            }
        }

        /* Gauge — track band + value arc */
        & path.gauge-track {
            fill: var(--color-chart-color, var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)))
        }

        & path.gauge-value {
            fill: var(--color-chart-color, var(--color-chart-1))
        }

        /* Gauge centered readout */
        & text.gauge-label {
            fill: var(--color-content-stark, oklch(20.5% 0 0));
            font-size: 1.75rem;
            font-weight: 700;
            pointer-events: none
        }

        /* Timeline / Gantt */
        & rect.gantt-segment {
            fill: var(--color-chart-color, var(--color-chart-1));
            transition: opacity var(--transition-duration, .1s) ease;

            &:hover {
                opacity: 0.82
            }
        }

        & rect.gantt-point {
            fill: var(--color-chart-color, var(--color-content-stark, oklch(20.5% 0 0)))
        }

        & text.gantt-track {
            fill: var(--color-chart-label);
            font-size: 0.75rem
        }

        /* Reference marker */
        & line.gantt-marker {
            stroke: var(--color-chart-color, var(--color-content-subtle, oklch(55.6% 0 0)));
            stroke-width: 1.5;
            stroke-dasharray: 3 3
        }

        & text.gantt-marker-label {
            fill: var(--color-chart-color, var(--color-content-subtle, oklch(55.6% 0 0)));
            font-size: 0.625rem
        }

        /* Value labels drawn on/above segments */
        & text.value {
            fill: var(--color-content-stark, oklch(20.5% 0 0));
            font-size: 0.6875rem;
            font-weight: 600;
            pointer-events: none;

            /* On a filled segment (bar/slice center) — read against the fill */
            &.inverse {
                fill: var(--color-content-stark, oklch(20.5% 0 0));
                paint-order: stroke;
                stroke: color-mix(in oklch, var(--color-page, oklch(98.5% 0 0)) 75%, transparent);
                stroke-width: 1.5px
            }
        }

        /* World map city / point markers */
        & circle.map-point {
            fill: var(--color-chart-color, var(--color-accent-content, oklch(20.5% 0 0)));
            stroke: var(--color-page, oklch(98.5% 0 0));
            stroke-width: 1;
            fill-opacity: 0.82;
            transition: opacity var(--transition-duration, .1s) ease;

            &:hover {
                opacity: 0.82
            }
        }

        /* World map regions */
        & path.map-region {
            fill: var(--color-chart-color, var(--color-surface-2, color-mix(in oklch, oklch(20.5% 0 0) 8%, transparent)));
            stroke: var(--color-page, oklch(98.5% 0 0));
            stroke-width: 0.4;
            transition: opacity var(--transition-duration, .1s) ease;

            &:hover {
                opacity: 0.82
            }
        }

        /* Heatmap cell */
        & rect.heat-cell {
            fill: color-mix(in oklch, var(--color-chart-heat-high, var(--color-chart-1)) var(--heat, 0%), var(--color-chart-heat-low, var(--color-surface-2)));
            transition: opacity var(--transition-duration, .1s) ease;

            &:hover {
                opacity: 0.82
            }
        }

        /* Legend */
        & footer {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            justify-content: center;
            gap: 0.875rem;
            margin-top: 0.5rem;
            font-size: 0.75rem;
            color: var(--color-content-neutral, oklch(43.9% 0 0));

            &>span {
                display: inline-flex;
                align-items: center;
                gap: 0.375rem
            }

            & i {
                width: 0.625rem;
                height: 0.625rem;
                border-radius: 2px;
                background: var(--color-chart-color, var(--color-chart-1))
            }
        }

        /* Heatmap gradient legend */
        & footer.heat-legend {
            flex-wrap: nowrap;
            gap: 0.5rem;

            & i {
                flex: 1;
                height: 0.5rem;
                border-radius: 1rem;
                background: linear-gradient(to right, var(--color-chart-heat-low, var(--color-surface-2)), var(--color-chart-heat-high, var(--color-chart-1)))
            }
        }

        /* Cursor-following tooltip */
        & .tooltip {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 50;
            transform: translate(-50%, calc(-100% - 0.625rem));
            font-size: 0.75rem;
            line-height: 1.3;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity .1s ease;

            &.active {
                opacity: 1
            }
        }

        /* Empty / error state */
        &>small,
        label {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 6rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--color-content-subtle, oklch(55.6% 0 0))
        }
    }
}

/* Manifest Chat */

@layer base, components, utilities;

@layer utilities {

    :where(.chat-wrapper) {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow: hidden;

        /* Chat log scroll container */
        :where([role="log"]) {
            display: flex;
            flex-direction: column-reverse;
            flex: 1;
            font-size: 0.875rem;
            overflow-y: auto;

            /* Message column */
            > :where(div) {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                gap: 2rem;
                min-height: 100%;
                width: calc(var(--spacing-content-width, 74rem) - 4rem);
                max-width: 100%;
                margin-inline-start: auto;
                margin-inline-end: auto;
                padding-inline-start: 1rem;
                padding-inline-end: 1rem;
                padding-block-end: 3rem
            }

            /* Messages */
            :where(div div) {

                /* Markdown spacing */
                :where(p) {
                    margin-block: 0.5rem
                }

                :where(p:first-child) {
                    margin-block-start: 0
                }

                :where(p:last-child) {
                    margin-block-end: 0
                }
            }

            /* Own messages */
            :where(.own) {
                width: 95%;
                max-width: calc(var(--spacing-content-width, 74rem) - 10rem);
                margin-inline-start: auto;
                padding-block: 0.5rem;
                padding-inline: 0.75rem;
                background: color-mix(in oklch, var(--color-surface-2) 50%, transparent);
                border-radius: var(--radius)
            }

            /* Attachments */
            :where(img, video) {
                display: block;
                max-width: 20rem;
                max-height: 15rem;
                margin-block: 0.5rem;
                border-radius: var(--radius)
            }

            :where(audio) {
                display: block;
                width: 18rem;
                max-width: 100%;
                margin-block: 0.5rem
            }

            :where(a[download]) {
                display: inline-flex;
                align-items: center;
                gap: 0.4rem;
                margin-block: 0.5rem;
                padding-block: 0.35rem;
                padding-inline: 0.6rem;
                background: var(--color-surface-2);
                border-radius: var(--radius)
            }
        }

        /* Chat input */
        :where(form:not(.unstyle)) {
            display: flex;
            flex-flow: row wrap;
            align-items: end;
            gap: 0;
            width: var(--spacing-content-width, 74rem);
            max-width: 100%;
            margin-inline-start: auto;
            margin-inline-end: auto;

            :where(textarea, .textarea):not(.unstyle) {
                flex: 1;
                width: auto;
                min-height: var(--spacing-field-height, 2.5rem);
                field-sizing: content;
                resize: none
            }
        }

        /* Pending attachments */
        :where(output:not(.unstyle)) {
            display: flex;
            flex-flow: row wrap;
            gap: 0.325rem;
            width: 100%;
            max-width: 100%;
            height: fit-content;
            padding: calc(var(--spacing) * 2);

            > :where(:not(template)) {
                position: relative;
                flex: 0 0 auto
            }

            /* Images */
            :where(img) {
                display: block;
                width: var(--spacing-field-height, 2.5rem);
                height: var(--spacing-field-height, 2.5rem);
                object-fit: cover;
                border-radius: calc(var(--radius, 0.5rem) * 0.75)
            }

            /* File chips */
            > :where(:not(template))> :where(span) {
                display: flex;
                align-items: center;
                gap: 0.3rem;
                height: fit-content;
                padding-inline: 0.5rem;
                font-size: 0.75rem;
                white-space: nowrap;
                background: var(--color-line);
                border-radius: calc(var(--radius, 0.5rem) * 0.75)
            }
        }
    }
}

/* Manifest Checkboxes */

@layer base, components, utilities;

@layer components {

    /* Deliberately unflattened: manifest.input.css supplies the field chrome via
       a lower-specificity rule that sorts later, so this must outrank it. */
    input[type=checkbox]:not([role=switch], .unstyle) {
        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, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent));
                border-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
            }

            &:active {
                background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent));
                border-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
            }
        }

        /* Icon */
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60%;
            height: 60%;
            background-color: var(--color-field-inverse, oklch(43.9% 0 0));
            mask-image: var(--icon-check, 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"));
            mask-repeat: no-repeat;
            mask-size: 100% 100%;
            transform-origin: center;
            transition: var(--transition, all .05s ease-in-out);

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

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

/* Manifest Color Picker */

@layer base, components, utilities;



:root {
    --color-picker-swatch: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
    --icon-color-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-paint-roller-icon lucide-paint-roller'%3E%3Crect width='16' height='6' x='2' y='2' rx='2'/%3E%3Cpath d='M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect width='4' height='6' x='8' y='16' rx='1'/%3E%3C/svg%3E");
    --icon-color-gradient: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-blend-icon lucide-blend'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Ccircle cx='15' cy='15' r='7'/%3E%3C/svg%3E");
    --icon-color-library: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-swatch-book-icon lucide-swatch-book'%3E%3Cpath d='M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M 7 17h.01'/%3E%3Cpath d='m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8'/%3E%3C/svg%3E");
    --icon-color-grab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-pipette-icon lucide-pipette'%3E%3Cpath d='m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12'/%3E%3Cpath d='m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z'/%3E%3Cpath d='m2 22 .414-.414'/%3E%3C/svg%3E");
    --icon-alpha-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23808080' opacity='0.15'/%3E%3Crect width='1' height='1' x='1' y='1' fill='%23808080' opacity='0.15'/%3E%3C/svg%3E");
}

@layer components {

    :where(input[type="color"]) {
        appearance: none;
        -webkit-appearance: none;

        &::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        &::-webkit-color-swatch {
            border: 0 none
        }

        &::-moz-color-swatch {
            border: 0 none
        }
    }
}

@layer utilities {

    /* Swatch trigger button */
    :where([x-colorpicker\.swatch], input[type="color"]):not(.unstyle) {
        position: relative;
        width: var(--spacing-field-height, 2.25rem);
        min-width: var(--spacing-field-height, 2.25rem);
        max-width: var(--spacing-field-height, 2.25rem);
        height: var(--spacing-field-height, 2.25rem);
        padding: 0;
        background: var(--color-picker-swatch, #000000);
        border-width: 1px;
        border-style: solid;
        border-color: oklch(from var(--color-picker-swatch, #000000) calc(l + (0.5 - l) * 0.35) c calc(h + 0));
        border-radius: var(--radius, 0.5rem);
        cursor: pointer;
        overflow: hidden;
        transition: var(--transition, all .05s ease-in-out);

        &:hover,
        &:active,
        &:focus,
        &:focus-visible {
            border-color: oklch(from var(--color-picker-swatch, #000000) calc(l + (0.5 - l) * 0.35) c calc(h + 0) / 0.5)
        }

        /* Alpha pattern background */
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-image: var(--icon-alpha-pattern);
            background-size: 50%;
            background-position: top left
        }
    }

    /* Color picker menu interface */
    :where([x-colorpicker]):not(.unstyle) {
        min-width: 18rem;
        max-width: 18rem;
        max-height: 30rem;
        height: fit-content;
        overflow: hidden;

        /* Tabs wrapper */
        & :where(.tabs-wrapper) {
            display: flex;
            width: 100%;
            padding: 2px;
            border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));

            /* Distribute button widths equally */
            & button {
                flex: 1;
                justify-content: center
            }
        }

        /* Solid options */
        & [x-colorpicker\.solid] {

            /* Canvas wrapper */
            & :where(.canvas-wrapper) {
                position: relative;
                width: 100%;
                padding: 2px;
                aspect-ratio: 1;
                overflow: hidden;
                cursor: crosshair;
                touch-action: none
            }

            /* Canvas (SV plane) */
            & canvas {
                display: block;
                width: 100%;
                height: 100%
            }

            /* Canvas reticle indicator */
            & :where(.color-reticle) {
                position: absolute;
                width: 0.75rem;
                height: 0.75rem;
                z-index: 1;
                border: 2px solid #ffffff;
                border-radius: 50%;
                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
                transform: translate(-50%, -50%);
                pointer-events: none
            }

            & :where(.solid-options-inputs) {
                display: flex;
                flex-direction: column;
                gap: 0.75rem;
                padding: 0.75rem;

                & div:has(button[x-colorpicker\.set-color-space], input[x-colorpicker\.set-color-value], input[x-colorpicker\.set-alpha-value]) {
                    display: flex;
                    width: 100%
                }
            }

            /* Shared range styles */
            & input[x-colorpicker\.set-hue],
            & input[x-colorpicker\.set-alpha] {
                width: 100%;
                height: 0.75rem;
                padding: 0;
                border-radius: 1rem;
                appearance: none;
                -webkit-appearance: none;
                cursor: pointer;
                outline: none;
                border: none;
                background: transparent;

                /* Webkit thumb */
                &::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    width: 1rem;
                    height: 1rem;
                    border-radius: 50%;
                    background: #ffffff;
                    border: 2px solid #ffffff;
                    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
                    cursor: grab;

                    &:active {
                        cursor: grabbing
                    }
                }

                /* Firefox thumb */
                &::-moz-range-thumb {
                    width: 1rem;
                    height: 1rem;
                    border-radius: 50%;
                    background: #ffffff;
                    border: 2px solid #ffffff;
                    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
                    cursor: grab;

                    &:active {
                        cursor: grabbing
                    }
                }

                /* Webkit track */
                &::-webkit-slider-runnable-track {
                    height: 0.75rem;
                    border-radius: 1rem
                }

                /* Firefox track */
                &::-moz-range-track {
                    height: 0.75rem;
                    border-radius: 1rem
                }
            }

            /* Hue range */
            & input[x-colorpicker\.set-hue] {
                &::-webkit-slider-runnable-track {
                    background: linear-gradient(to right,
                            hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
                            hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
                            hsl(360 100% 50%))
                }

                &::-moz-range-track {
                    background: linear-gradient(to right,
                            hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
                            hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
                            hsl(360 100% 50%))
                }
            }

            /* Alpha range */
            & input[x-colorpicker\.set-alpha] {
                --color-picker-alpha: rgb(0, 0, 0);
                position: relative;

                &::-webkit-slider-runnable-track {
                    background:
                        linear-gradient(to right, transparent, var(--color-picker-alpha)),
                        var(--icon-alpha-pattern) 0 0 / 0.5rem 0.5rem
                }

                &::-moz-range-track {
                    background:
                        linear-gradient(to right, transparent, var(--color-picker-alpha)),
                        var(--icon-alpha-pattern) 0 0 / 0.5rem 0.5rem
                }
            }

            /* Color space button */
            & button[x-colorpicker\.set-color-space] {
                justify-content: center;
                width: 7ch;
                padding-inline-start: 0;
                padding-inline-end: 0
            }

            /* Color value input */
            & input[x-colorpicker\.set-color-value] {
                flex: 1;
                padding-inline-end: 0
            }

            /* Alpha value input */
            & input[x-colorpicker\.set-alpha-value] {
                width: fit-content;
                padding-inline-start: 0;
                text-align: end
            }
        }

        /* Gradients */
        & [x-colorpicker\.gradient] {

            /* Gradient layers */
            & :where(.layer-options-wrapper) {
                border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));

                /* Layer options inputs */
                & :where(.layer-options-inputs) {
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;
                    padding: 0.5rem;

                    /* Gradient options drodown button */
                    & button {
                        width: auto;
                        justify-content: center
                    }

                    /* Gradient angle input wrapper */
                    & :where(.layer-angle-wrapper) {
                        position: relative;

                        /* Gradient angle input */
                        & input[x-colorpicker\.set-angle] {
                            width: 5.5ch;
                            cursor: ew-resize;
                            padding-inline-start: 0;
                            padding-inline-end: 0.75rem;
                            text-align: end;

                            &:focus {
                                cursor: text
                            }
                        }

                        /* Degree symbol */
                        & span {
                            position: absolute;
                            top: 0;
                            right: 0.25rem;
                            color: var(--color-content-neutral, oklch(43.9% 0 0))
                        }
                    }

                    /* Gradient stop bar */
                    & [x-colorpicker\.layer-stops-bar] {
                        position: relative;
                        width: 100%;
                        height: 0.75rem;
                        margin-inline-start: 1rem;
                        margin-inline-end: 0.5rem;
                        border-radius: 1rem;
                        cursor: pointer;
                        background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));

                        /* Stop handle */
                        & :where(.stop-handle) {
                            position: absolute;
                            top: 50%;
                            width: 1rem;
                            height: 1rem;
                            border-radius: 50%;
                            border: 2px solid #ffffff;
                            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
                            transform: translate(-50%, -50%);
                            cursor: grab;
                            z-index: 1;
                            touch-action: none;

                            &:hover {
                                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 5px rgba(0, 0, 0, 0.25)
                            }

                            &:active {
                                cursor: grabbing
                            }

                            &.active {
                                box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), 0 1px 5px rgba(0, 0, 0, 1)
                            }

                        }
                    }
                }

                /* Per-stop solid panel */
                & [x-colorpicker\.solid] {
                    padding: 0;

                    & :where(.canvas-wrapper) {
                        width: calc(100% - 2rem);
                        margin: auto;
                        padding: 0 0 2px 0
                    }

                    & :where(.solid-options-inputs) {
                        padding-left: 1rem;
                        padding-right: 1rem
                    }
                }
            }

            /* Gradient value wrapper */
            & :where(.gradient-value-wrapper) {
                padding: 0.5rem;

                /* Gradient value input */
                & [x-colorpicker\.set-gradient-value] {
                    resize: none;
                    field-sizing: content
                }
            }
        }

        /* Hide gradient angle input when the gradient type doesn't use it (holds space via visibility) */
        & [data-gradient-type="radial"] .layer-angle-wrapper {
            visibility: hidden
        }

        /* Library */
        & [x-colorpicker\.library] {
            max-height: 30rem;
            overflow-y: auto;

            /* Library wrapper */
            & :where(.library-wrapper) {
                display: flex;
                flex-flow: column;
                gap: 1rem;
                width: 100%;
                padding: 1rem 1rem 4rem 1rem;

                /* Group wrapper */
                & :where(.library-group) {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    padding-bottom: 1rem;
                    gap: 0.5rem;

                    /* Only apply border to all except last library-group */
                    &:not(:last-child) {
                        border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
                    }

                    /* Palette wrapper */
                    & :where(.library-palette) {
                        display: grid;
                        grid-template-columns: repeat(11, 1fr);
                        gap: 1px;

                        /* Swatch buttons */
                        & button[x-colorpicker\.apply-color] {
                            min-width: 0;
                            width: 100%;
                            max-width: 1.375rem;
                            min-height: 0;
                            height: auto;
                            max-height: 1.375rem;
                            aspect-ratio: 1/1;
                            border-radius: calc(var(--radius, 0.5rem) / 2);
                            border: 1px solid rgba(255, 255, 255, 0.15);

                            &:hover {
                                border: 1px solid rgba(255, 255, 255, 0.35)
                            }

                            &.active {
                                border: 1px solid rgba(255, 255, 255, 1);
                                box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 1px rgba(0, 0, 0, 1), inset 0 0 0 4px rgba(0, 0, 0, 0.25)
                            }
                        }
                    }
                }
            }
        }
    }

    /* Colorpicker inside dropdown menu */
    :where(menu[popover][x-colorpicker]:not(.unstyle)) {
        padding: 0;

        & .tabs-wrapper button {
            border: 1px solid var(--color-popover-surface, oklch(98.5% 0 0))
        }
    }

    /* Library wrapper inside dropdown menu */
    :where(menu[popover]:not(.unstyle) [x-colorpicker\.library], .dropdown-menu:not(.unstyle) [x-colorpicker\.library]) {
        /* max-height: initial !important;
        overflow: visible !important; */

        & :where(.library-wrapper) {
            padding: 0.5rem 0.5rem 4rem 0.5rem !important;

        }

        & :where(small) {
            padding-inline-start: 0
        }
    }

    /* Colorpicker button icons */
    :where(.color-icon-solid, .color-icon-gradient, .color-icon-library, .color-icon-grab, .gradient-layer-icon-linear, .gradient-layer-icon-radial, .gradient-layer-icon-conic) {
        height: calc(var(--spacing-field-height, 2.25rem) / 2);
        max-height: 1rem;
        aspect-ratio: 1/1;
        background-color: currentColor
    }

    /* Colorpicker dialog */
    :where(dialog[x-colorpicker]) {
        border-radius: calc(var(--radius, 0.5rem))
    }

    :where(.color-icon-solid) {
        mask-image: var(--icon-color-solid)
    }

    :where(.color-icon-gradient) {
        mask-image: var(--icon-color-gradient)
    }

    :where(.color-icon-library) {
        mask-image: var(--icon-color-library)
    }

    :where(.color-icon-grab) {
        mask-image: var(--icon-color-grab)
    }

    .gradient-layer-icon-linear {
        background: linear-gradient(to right, var(--color-content-neutral, oklch(43.9% 0 0)), color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 0%, transparent 100%));
        border-radius: 50%
    }

    .gradient-layer-icon-radial {
        background: radial-gradient(var(--color-content-neutral, oklch(43.9% 0 0)), color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 0%, transparent 100%));
        border-radius: 50%
    }

    .gradient-layer-icon-conic {
        background: conic-gradient(var(--color-content-neutral, oklch(43.9% 0 0)), color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 0%, transparent 100%));
        border-radius: 50%
    }
}

/* Manifest Combobox */

@layer base, components, utilities;

@layer components {

    /* Wrapper */
    :where(.combobox):not(.unstyle) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing, 0.25rem);
        width: 100%;
        max-width: 100%;
        min-height: var(--spacing-field-height, 2.25rem);
        padding: calc(var(--spacing, 0.25rem) * 1.25) var(--spacing-field-padding, 0.625rem);
        color: var(--color-field-inverse, oklch(43.9% 0 0));
        background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
        border-radius: var(--radius, 0.5rem);
        transition: var(--transition);
        cursor: text;

        &:hover:has(> :where(input:not([type=hidden]), textarea, button):not([hidden])) {
            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
        }

        &:not(:has(> :where(input:not([type=hidden]), textarea, button):not([hidden]))) {
            cursor: default
        }

        &:focus-within {
            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
            box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark, oklch(43.9% 0 0)) 30%, transparent)
        }

        &:has(.combobox-chip) {
            padding-inline: calc(var(--spacing, 0.25rem) * 1.25)
        }

        /* Plugin-set from render(), so it tracks any editor type — including a
           <button> editor, which the old :has(> input:disabled) rule missed. */
        &[data-disabled] {
            opacity: .5;
            pointer-events: none;
            cursor: default;

            /* The × stays (layout), inert — the field is already dimmed as a whole,
               so don't let the global :disabled dimming stack on top of it. */
            .combobox-chip>button:disabled {
                opacity: 1;
                cursor: default
            }
        }

        /* Inner typing surface */
        &> :where(input:not([type=hidden]), textarea):not(.unstyle) {
            flex: 1 1 7rem;
            min-width: 0;
            width: auto;
            height: auto;
            margin: 0;
            padding: 0;
            color: inherit;
            background: transparent;
            field-sizing: content;

            &:hover,
            &:focus-visible {
                background: transparent;
                box-shadow: none
            }
        }

        &>textarea {
            resize: none
        }
    }

    /* Chips */
    :where(.combobox-chip):not(.unstyle) {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        gap: var(--spacing, 0.25rem);
        max-width: 100%;
        height: calc(var(--spacing-field-height, 2.25rem) - var(--spacing, 0.25rem) * 2.5);
        margin: 0;
        padding: 0;
        padding-inline-start: calc(var(--spacing, 0.25rem) * 2);
        font-size: 0.875rem;
        line-height: normal;
        /* Optional per-field/global override: set --combobox-chip-surface / -content */
        color: var(--combobox-chip-content, var(--color-content-stark, oklch(43.9% 0 0)));
        background-color: var(--combobox-chip-surface, var(--color-popover-surface, oklch(100% 0 0)));
        border: 0;
        border-radius: calc(var(--radius, 0.5rem) * 0.7);
        overflow: hidden;
        user-select: none;

        /* Label */
        &>span {
            min-width: 0;
            margin: 0;
            padding: 0;
            border: 0;
            font: inherit;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        /* Remove button */
        &>button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            flex: none;
            width: auto !important;
            min-width: 0;
            max-width: none;
            height: 100%;
            min-height: 0;
            aspect-ratio: 1 / 1;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            font-size: 1em;
            line-height: 1;
            color: var(--combobox-chip-content, var(--color-content-neutral, oklch(43.9% 0 0)));
            background: transparent;
            box-shadow: none;
            cursor: pointer;

            &:hover {
                color: var(--combobox-chip-content, var(--color-content-stark, oklch(43.9% 0 0)));
                background: color-mix(in oklch, var(--combobox-chip-content, var(--color-content-stark, oklch(43.9% 0 0))) 12%, transparent)
            }
        }

        /* Non-removable */
        &[data-locked] {
            padding-inline-end: calc(var(--spacing, 0.25rem) * 2);
            cursor: default
        }

        /* Failed validation */
        &[aria-invalid="true"] {
            color: var(--color-negative-inverse, oklch(44.4% 0.177 26.899));
            background-color: var(--color-negative-surface, oklch(80.8% 0.114 19.571))
        }
    }

    /* Button trigger */
    :where(.combobox)>button:not(.unstyle) {
        flex: 1 1 auto;
        align-self: stretch;
        min-width: 7rem;
        justify-content: flex-start;
        gap: var(--spacing, 0.25rem);
        height: auto;
        min-height: calc(var(--spacing-field-height, 2.25rem) - var(--spacing, 0.25rem) * 2.5);
        padding: 0;
        color: inherit;
        background: transparent;
        cursor: pointer;

        &:hover {
            background: transparent
        }

        /* Caret */
        &::after {
            content: '';
            flex: none;
            width: 1em;
            height: 1em;
            margin-inline-start: auto;
            background-color: var(--color-content-subtle, oklch(55.6% 0 0));
            mask: var(--icon-chevron-down, 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='m6 9 6 6 6-6'/%3E%3C/svg%3E")) center / contain no-repeat
        }
    }

    /* Chip-less */
    :where(.combobox):has(> :where(input:not([type=hidden]), textarea, button):not(.unstyle)):not(:has(.combobox-chip)) {
        padding: 0;

        &> :where(input:not([type=hidden]), textarea, button):not(.unstyle) {
            align-self: stretch;
            min-height: var(--spacing-field-height, 2.25rem);
            padding: calc(var(--spacing, 0.25rem) * 1.25) var(--spacing-field-padding, 0.625rem)
        }
    }

    /* Listbox */
    :where(menu[role=listbox]):not(.unstyle) {

        /* Active descendant */
        &[data-kbd] [role=option][aria-current="true"] {
            color: var(--color-field-inverse, oklch(43.9% 0 0));
            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
        }

        /* Filtered out */
        & [role=option][hidden] {
            display: none
        }

        /* Selected (multiple) */
        & [role=option][aria-selected="true"] {
            font-weight: 600
        }

        /* "Add …" create row */
        & .combobox-create {
            color: var(--color-content-neutral, oklch(43.9% 0 0))
        }

        /* Empty state */
        & .combobox-empty {
            padding: 0.5rem;
            color: var(--color-content-subtle, oklch(55.6% 0 0));
            cursor: default;

            &:hover {
                background: transparent
            }
        }
    }

    /* Screen-reader-only live region */
    :where(.combobox)> :where([role=status]) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0
    }
}

/* Manifest Date Picker */

@layer base, components, utilities;



@layer utilities {

    /* Picker container only (not trigger input/button) */
    :where([x-date]:not(input, button, select), .date-picker):not(.unstyle) {
        width: fit-content;
        min-width: 17rem;
        background: var(--color-popover-surface, oklch(98.5% 0 0));
        color: var(--color-content-stark, oklch(20.5% 0 0));
        border: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
        border-radius: var(--radius, 0.5rem);

        /* Shell */
        &>[role=group] {
            display: flex;
            flex-direction: column;
            width: 100%;
            padding: 0.5rem;
        }

        /* Header */
        & header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.25rem;
            width: 100%;

            & button {
                width: var(--spacing-field-height, 2.25rem);
                min-width: var(--spacing-field-height, 2.25rem);
                height: var(--spacing-field-height, 2.25rem);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                background: transparent;
                border: none;
                border-radius: var(--radius, 0.5rem);
                color: var(--color-content-neutral, oklch(43.9% 0 0));
                cursor: pointer;
                transition: var(--transition, all .05s ease-in-out);

                &:hover {
                    background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
                    color: var(--color-content-stark, oklch(20.5% 0 0))
                }
            }

            /* Heading (between nav arrows) — clickable view jump */
            & button:nth-child(2) {
                flex: 1;
                width: auto;
                padding: 0 0.5rem;
                text-align: center;
                font-weight: 600;
                color: inherit
            }

            /* Previous / next chevrons — baked-in masks, no icons plugin */
            & button:first-child::before,
            & button:last-child::before {
                content: "";
                width: 1rem;
                height: 1rem;
                background-color: currentColor;
                mask-repeat: no-repeat;
                mask-size: 100% 100%
            }

            & button:first-child::before {
                mask-image: var(--icon-previous, 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='m15 18-6-6 6-6'/%3E%3C/svg%3E"))
            }

            & button:last-child::before {
                mask-image: var(--icon-next, 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='m9 18 6-6-6-6'/%3E%3C/svg%3E"))
            }
        }

        /* Months row — one <section> per visible month, side by side */
        & div:has(> section) {
            display: flex;
            flex-flow: row nowrap;
            gap: 1rem
        }

        & section {
            flex: 1;
            min-width: 14rem;

            /* Month label (multi-month) */
            &>small {
                display: block;
                padding: 0.25rem 0;
                text-align: center;
                font-size: 0.8125rem;
                font-weight: 600;
                color: var(--color-content-neutral, oklch(43.9% 0 0))
            }
        }

        /* Day grid */
        & [role=grid] {
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
            gap: 0;
            padding: 0.5rem 0;

            /* Day names */
            & abbr {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 1.75rem;
                font-size: 0.75rem;
                font-weight: 500;
                text-decoration: none;
                color: var(--color-content-subtle, oklch(55.6% 0 0))
            }

            /* Day buttons */
            & button {
                display: flex;
                align-items: center;
                justify-content: center;
                aspect-ratio: 1 / 1;
                padding: 0;
                font-size: 0.875rem;
                background: transparent;
                color: var(--color-content-stark, oklch(20.5% 0 0));
                border: 1px solid transparent;
                border-radius: var(--radius, 0.5rem);
                cursor: pointer;
                transition: var(--transition, all .05s ease-in-out);

                &:hover:not(:disabled):not([aria-selected=true]) {
                    background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
                }

                &:focus-visible {
                    outline: 2px solid var(--color-brand-content, oklch(60% 0.13 80));
                    outline-offset: -2px
                }

                /* Other-month days */
                &.outside {
                    color: var(--color-content-subtle, oklch(55.6% 0 0));
                    opacity: 0.55
                }

                /* Today marker */
                &[aria-current=date]:not([aria-selected=true]) {
                    border-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 18%, transparent));
                    font-weight: 600
                }

                /* Selected day (also range endpoints) */
                &[aria-selected=true] {
                    background: var(--color-brand-surface, var(--color-accent-surface, oklch(20.5% 0 0)));
                    color: var(--color-brand-inverse, var(--color-accent-inverse, oklch(98.5% 0 0)));
                    font-weight: 600
                }

                /* Days between range endpoints */
                &.in-range {
                    background: color-mix(in oklch, var(--color-brand-surface, var(--color-accent-surface, oklch(20.5% 0 0))) 30%, transparent);
                    border-radius: 0
                }

                /* Square inner edges so endpoints connect to the band */
                &.range-start:not(.range-end) {
                    border-start-end-radius: 0;
                    border-end-end-radius: 0
                }

                &.range-end:not(.range-start) {
                    border-start-start-radius: 0;
                    border-end-start-radius: 0
                }

                &:disabled {
                    color: var(--color-content-subtle, oklch(55.6% 0 0));
                    opacity: 0.35;
                    cursor: not-allowed;
                    text-decoration: line-through
                }
            }
        }

        /* Month / year jump grid */
        & [role=listbox] {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.25rem;
            width: 100%;
            padding: 0.25rem 0;

            & button {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 2.75rem;
                width: 100%;
                padding: 0;
                font-size: 0.875rem;
                background: transparent;
                color: var(--color-content-stark, oklch(20.5% 0 0));
                border: 1px solid transparent;
                border-radius: var(--radius, 0.5rem);
                cursor: pointer;
                transition: var(--transition, all .05s ease-in-out);

                &:hover:not(:disabled) {
                    background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
                }

                &[aria-current=true] {
                    border-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 18%, transparent));
                    font-weight: 600
                }

                &[aria-selected=true] {
                    background: var(--color-brand-surface, var(--color-accent-surface, oklch(20.5% 0 0)));
                    color: var(--color-brand-inverse, var(--color-accent-inverse, oklch(98.5% 0 0)));
                    font-weight: 600
                }

                &.outside {
                    color: var(--color-content-subtle, oklch(55.6% 0 0));
                    opacity: 0.55
                }

                &:disabled {
                    opacity: 0.35;
                    cursor: not-allowed
                }
            }
        }

        /* Time-of-day row */
        & fieldset {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            gap: 0.5rem;
            width: 100%;
            min-width: 0;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            padding-inline-start: 0.5rem;
            border: none;
            border-top: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));

            /* "Time" label */
            &>label {
                flex: none;
                width: auto;
                min-height: 0;
                padding: 0;
                font-size: 0.75rem;
                color: var(--color-content-subtle, oklch(55.6% 0 0));
                cursor: pointer;

                &:hover {
                    color: var(--color-content-stark, oklch(20.5% 0 0));
                    background: transparent
                }
            }

            /* Segment group */
            &>[role=group] {
                display: flex;
                align-items: center;
                justify-content: end;
                height: var(--spacing-field-height, 2.25rem);
                /* Override the shared menu-group centering (dropdown.css sets
                   margin auto) so the time controls sit flush with the row end. */
                margin: 0;
                min-width: 0;
                padding-inline-start: 0.5rem;
                background: transparent;
                border: none;
                border-radius: var(--radius, 0.5rem);
                cursor: text;
                transition: var(--transition, all .05s ease-in-out);

                /* Hour / minute segments */
                & input {
                    box-sizing: content-box;
                    width: 2ch;
                    min-width: 0;
                    margin: 0;
                    padding: 0 0.25rem;
                    font-family: inherit;
                    font-size: 0.875rem;
                    line-height: 1.5rem;
                    font-variant-numeric: tabular-nums;
                    text-align: center;
                    background: transparent;
                    color: var(--color-content-stark, oklch(20.5% 0 0));
                    border: none;
                    border-radius: calc(var(--radius, 0.5rem) / 2);
                    outline: none;
                    appearance: none;

                    &:hover,
                    &:focus {
                        background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
                    }
                }

                /* Separator */
                &>span {
                    line-height: 1.5rem;
                    color: var(--color-content-subtle, oklch(55.6% 0 0))
                }

                /* AM/PM toggle */
                &>button {
                    width: auto;
                    min-width: 0;
                    height: 1.5rem;
                    padding: 0 0.375rem;
                    font-family: inherit;
                    font-size: 0.875rem;
                    line-height: 1.5rem;
                    background: transparent;
                    color: var(--color-content-stark, oklch(20.5% 0 0));
                    border: none;
                    border-radius: calc(var(--radius, 0.5rem) / 2);
                    cursor: pointer;
                    transition: var(--transition, all .05s ease-in-out);

                    &:hover {
                        background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
                    }
                }

                /* Chevron that invokes the columns popover — same glyph as
                   select buttons (see buttons.css ::picker-icon) */
                &>button[popovertarget] {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 1.5rem;
                    padding: 0;
                    color: var(--color-content-subtle, oklch(55.6% 0 0));

                    &:hover {
                        color: var(--color-content-stark, oklch(20.5% 0 0))
                    }

                    &::before {
                        content: "";
                        width: 1rem;
                        height: 1rem;
                        background-color: currentColor;
                        mask-repeat: no-repeat;
                        mask-size: 100% 100%;
                        mask-image: var(--icon-chevron-down, 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='m6 9 6 6 6-6'/%3E%3C/svg%3E"))
                    }
                }
            }
        }

        /* Standalone time picker — columns inline in the calendar */
        & div.time-options {
            display: flex;
            justify-content: center;
            width: 100%;
            max-height: 14rem;
        }

        /* Footer */
        & footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.25rem;
            width: 100%;
            contain: inline-size;
            padding: 0.5rem 0;
            border-top: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));

            /* Today | Clear buttons */
            &>button {
                width: fit-content;
                background: transparent;
                color: var(--color-content-neutral, oklch(43.9% 0 0));

                &:hover {
                    background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
                    color: var(--color-content-stark, oklch(20.5% 0 0))
                }
            }

            /* Preset chips */
            &>div {
                flex: 1;
                min-width: 0;
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: safe center;
                gap: 0.25rem;
                overflow-x: auto;
                scrollbar-width: none;

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

                & button {
                    flex: 0 0 auto;
                    height: auto;
                    min-height: 0;
                    padding: 0.25rem 0.625rem;
                    font-size: 0.75rem;
                    white-space: nowrap;
                    background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
                    color: var(--color-content-stark, oklch(20.5% 0 0));
                    border: none;
                    border-radius: calc(var(--radius, 0.5rem) * 2);
                    cursor: pointer;
                    transition: var(--transition, all .05s ease-in-out);

                    &:hover {
                        background: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 16%, transparent))
                    }
                }
            }
        }
    }

    /* Time dropdown */
    :where(menu.time-options):not(.unstyle) {
        position-area: end center;
        position-try-fallbacks: flip-block;
        width: max-content;
        min-width: 0;
        margin: 0;
        padding: 0.25rem;
        list-style: none;
    }

    /* Time columns — hours / minutes / (AM-PM + actions) */
    .time-options {
        flex-flow: row nowrap;
        gap: 0.25rem;

        /* Column */
        &>div {
            flex: 1;
            min-width: 2.75rem;
            max-height: 13rem;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 1px;
            scrollbar-width: thin;
        }

        /* Option */
        & button {
            flex: none;
            width: auto;
            min-width: 0;
            height: auto;
            min-height: 0;
            padding: 0.25rem 0.5rem;
            font-size: 0.8125rem;
            font-variant-numeric: tabular-nums;
            text-align: center;
            justify-content: center;
            background: transparent;
            color: var(--color-content-stark, oklch(20.5% 0 0));
            border: none;
            border-radius: calc(var(--radius, 0.5rem) / 2);
            cursor: pointer;
            transition: var(--transition, all .05s ease-in-out);

            &:hover {
                background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
            }

            &[aria-selected=true] {
                background: var(--color-brand-surface, var(--color-accent-surface, oklch(20.5% 0 0)));
                color: var(--color-brand-inverse, var(--color-accent-inverse, oklch(98.5% 0 0)));
                font-weight: 600
            }
        }

        /* Now / Clear actions */
        & button:not([value]) {
            font-size: 0.75rem;
            font-variant-numeric: normal;
            color: var(--color-content-subtle, oklch(55.6% 0 0));

            &:hover {
                color: var(--color-content-stark, oklch(20.5% 0 0))
            }
        }

        /* First action in a column drops to the bottom */
        & button[value]+button:not([value]),
        & button:not([value]):first-child {
            margin-top: auto
        }
    }

    /* Popover menu presentation */
    :where(menu[popover][x-date], menu[popover].date-picker):not(.unstyle) {
        margin: 0;
        padding: 0;
        list-style: none
    }

    /* RTL support */
    [dir=rtl] :where([x-date], .date-picker):not(.unstyle) header {

        & button:first-child::before,
        & button:last-child::before {
            transform: scaleX(-1)
        }
    }
}

/* Manifest Dialogs */

@layer base, components, utilities;





@layer components {

    :where(dialog[popover], .dialog):not(.unstyle) {
        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(43.9% 0 0));
        background-color: var(--color-popover-surface, oklch(98.5% 0 0));
        border: 0 none;
        border-radius: calc(var(--radius, 0.5rem) * 2);
        box-shadow: var(--shadow-lg, 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 dialog 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
        }
    }

    /* Utility class additions */
    :where(.dialog) {
        inset: 0;
        z-index: 10;
        height: fit-content
    }

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

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

        /* Hide dropdowns outside of any dialog. A generated popover (a datepicker
           calendar, a colorpicker panel) is appended to <body>, so DOM position alone
           can't tell page chrome from a menu the dialog itself opened —
           data-popover-nested marks the latter, which CSS has no way to work out. */
        & menu[popover]:not(dialog *):not([data-popover-nested]) {
            opacity: 0;
            scale: .9;
            pointer-events: none;
            transition: opacity .15s ease-out, scale .15s ease-out;

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

    /* When multiple dialogs are open, hide dropdowns in all but closest dialog */
    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;
            }
        }
    }
}

/* Manifest Dividers */

@layer base, components, utilities;

@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(43.9% 0 0));

        /* Lines before and after content */
        &:before,
        &:after {
            content: "";
            display: inline-flex;
            flex: 1;
            width: auto;
            height: 1px;
            background-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
        }

        /* 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
        }
    }
}

/* Manifest Dock */

@layer base, components, utilities;

@layer components {

    /* Fixed bottom navigation bar. Best practice: <nav dock aria-label="Primary">.
       Physics (fixed + safe-area + item layout) baked in; skin is themeable via
       the --dock-* variables. Edge-to-edge by default; set --dock-inset (+ radius)
       to float it. */
    :where([dock]) {
        position: fixed;
        z-index: 40;
        inset-inline: var(--dock-inset, 0px);
        bottom: var(--dock-inset, 0px);
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        gap: var(--dock-gap, 0px);
        /* Clear the home indicator in both modes: total bottom clearance == --safe-bottom */
        padding-bottom: max(calc(var(--safe-bottom, 0px) - var(--dock-inset, 0px)), 0px);
        background: var(--dock-surface, var(--color-surface-1, oklch(96.7% 0 0)));
        border-top: var(--dock-border-top, 1px solid var(--color-line, color-mix(in oklch, currentColor 11%, transparent)));
        border-radius: var(--dock-radius, 0px);
        box-shadow: var(--dock-shadow, none)
    }

    /* Dock items */
    :where([dock] > a, [dock] > button) {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        min-height: 3.25rem;
        padding: 0.375rem 0.25rem;
        background: transparent;
        color: var(--color-content-subtle, oklch(55.6% 0 0));
        font-size: 0.6875rem;
        line-height: 1.1;
        text-decoration: none
    }

    /* Dock icons */
    :where([dock] :is([x-icon], svg, img)) {
        width: 1.375rem;
        height: 1.375rem;
        font-size: 1.375rem
    }

    /* Active item — a hook, not a look (bind :aria-current="$route === '/x' ? 'page' : null') */
    :where([dock] > a[aria-current="page"], [dock] > button[aria-current="page"], [dock] > .selected) {
        color: var(--color-content-stark, oklch(14.5% 0 0))
    }
}

/* Manifest Dropdowns */

@layer base, components, utilities;





@layer components {

    :where(menu[popover], .dropdown-menu):where(:not(.unstyle)) {
        position-try-fallbacks: flip-inline, flip-block;
        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(98.5% 0 0));
        border: 0 none;
        border-radius: var(--radius, 0.5rem);
        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;
        overflow-x: hidden;

        /* Options (labels only when flat items — field wrappers keep form layout) */
        & :where(li, a, button, [role=button], label:not(:has(input:not([type=checkbox], [type=radio], [type=hidden]), select, textarea, .combobox, .label, label))):not(.unstyle) {
            display: inline-flex;
            justify-content: start;
            align-items: center;
            width: 100%;
            max-width: 100%;
            min-height: var(--spacing-field-height, 2.25rem);
            padding-inline-start: 0.5rem;
            padding-inline-end: 0.5rem;
            font-weight: normal;
            color: var(--color-content-stark, oklch(43.9% 0 0));
            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;
            transition: none;

            &:hover {
                color: var(--color-field-inverse, oklch(43.9% 0 0));
                text-decoration: inherit;
                background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
            }

            &:active {
                color: var(--color-field-inverse, oklch(43.9% 0 0));
                background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
            }

            & 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(43.9% 0 0))
        }

        /* 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, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
        }

        /* Labels (not inner field-surface wrappers) */
        & label:not(.unstyle):not(:has(> input[type=search], > input[type=file], > button[command="--copy"])) {
            padding-inline-start: 0.5rem;
            padding-inline-end: 0.5rem;
            cursor: default;

            &:hover,
            &:active {
                background-color: transparent
            }

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

        /* Inputs and textareas placed as direct items */
        &>:where(input, textarea),
        & :where(li)>:where(input, textarea) {
            flex-shrink: 0;

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

        /* Groups and tablists */
        & :where([role=group], [role=tablist]) {
            min-width: calc(100% - var(--spacing-field-padding));
            margin-left: auto;
            margin-right: auto;

            & :where(a, button, [role=button]) {
                justify-content: center
            }
        }

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

    /* Dark theme */
    :where(.dark menu[popover]) :where(li, a, button, label:not(:has(input:not([type=checkbox], [type=radio], [type=hidden]), select, textarea, .combobox, .label, label))):hover {
        background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
    }

    /* Nested menu alignment (not combobox listboxes, which anchor to their field) */
    :where(menu menu:not([role=listbox])):where(:not(.unstyle)) {
        position-area: span-end end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Center alignment (dropdown-only; tooltips have no .center) */
    :where(menu.center) {
        position-area: center
    }
}

/* Directional alignment lives in styles/snippets/manifest.alignment.css */

@layer utilities {

    /* Touchscreen version — outranks the shared alignment table on specificity */
    @media (pointer: coarse) {
        menu[popover]:not(.unstyle) {
            position: fixed;
            position-area: none;
            top: auto;
            left: 1rem;
            bottom: 1rem;
            width: calc(100% - 2rem);
            margin: 0;

            /* Leading icons */
            & :where(li, a, button, label) [x-icon]:first-child:not(:only-child) {
                margin-inline-end: 0.8125rem
            }
        }
    }
}

/* Manifest Edit */

@layer base, components, utilities;

/* Self-contained: every rule the plugin needs lives here, so this stylesheet works
   on its own. Authors override without specificity battles — rules are :where()
   wrapped and keyed off data-edit-* attributes, including the injected affordances
   (handles, overlay, live region, toolbar, menu). No class names to collide with. */

@layer utilities {

    /* ---- Editable area (armed) ----
       Chrome is opt-in. Most uses of this plugin are a resize handle or a sortable
       list, which should look like themselves; only .authoring gets the outline and
       the region label. */
    :where([data-edit-armed]) {
        position: relative;
    }

    /* Quiet until touched. A page covered in dashed boxes reads as a diagram of
       itself; the affordance only has to be there when you go looking for it. */
    :where([data-edit-armed][data-edit-authoring]) {
        outline: 1px dashed transparent;
        outline-offset: 6px;
        border-radius: var(--radius);
        transition: outline-color 0.12s ease;
    }

    :where([data-edit-armed][data-edit-authoring]):hover,
    :where([data-edit-armed][data-edit-authoring]):focus-within {
        outline-color: var(--color-line);
    }

    :where([data-edit-armed][data-edit-authoring])::before {
        content: attr(data-edit-label);
        position: absolute;
        inset-block-start: -1.5rem;
        inset-inline-start: 0;
        font-size: 0.7rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-content-subtle);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.12s ease;
    }

    :where([data-edit-armed][data-edit-authoring]):hover::before,
    :where([data-edit-armed][data-edit-authoring]):focus-within::before {
        opacity: 1;
    }

    /* ---- Reorder (pointer + keyboard; touch-action:none lets touch-drag beat scroll) ---- */
    :where([data-edit-sortable]) {
        cursor: grab;
        touch-action: none;
        transition: opacity 0.12s ease, outline-color 0.12s ease;
    }

    :where([data-edit-sortable]):hover,
    :where([data-edit-sortable]):focus-within {
        outline: 1px solid var(--edit-accent, var(--color-brand-content));
        outline-offset: 3px;
    }

    :where([data-edit-sortable], [data-edit-movable]):focus-visible {
        outline: 2px solid var(--edit-accent, var(--color-brand-content));
        outline-offset: 3px;
    }

    /* Lifted out of the flow and following the pointer. */
    :where([data-edit-sortable][data-edit-dragging]) {
        z-index: 1000;
        cursor: grabbing;
        box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
    }

    /* The stand-in holding the slot the drop would land in — a translucent copy of
       the element by default, because the clearest preview of where it lands is the
       thing itself. Restyle it freely: hide its contents for an empty outlined slot,
       give it a background, animate it. */
    :where([data-edit-ghost]) {
        opacity: var(--edit-ghost-opacity, 0.4);
        pointer-events: none;
    }

    /* Nothing else should react while a drag is in progress */
    :where([data-edit-dragging-in]) {
        cursor: grabbing;
        user-select: none;

        & :where([data-edit-sortable]:not([data-edit-dragging])) {
            cursor: grabbing;
        }
    }

    :where([data-edit-grabbed]) {
        outline: 2px dashed var(--edit-accent, var(--color-brand-content));
        outline-offset: 3px;
    }

    /* ---- Move (positioned children) ---- */
    :where([data-edit-movable]) {
        cursor: move;
        touch-action: none;
    }

    :where([data-edit-movable]):hover {
        outline: 1px solid var(--edit-accent, var(--color-brand-content));
        outline-offset: 2px;
    }

    /* ---- Inline text ---- */
    :where([data-edit-armed]) [contenteditable="true"] {
        outline: 1px solid transparent;
        outline-offset: 2px;
        border-radius: 3px;
        transition: outline-color 0.12s ease;
    }

    :where([data-edit-armed]) [contenteditable="true"]:hover {
        outline-color: color-mix(in oklch, var(--edit-accent, var(--color-brand-content)) 45%, transparent);
    }

    :where([data-edit-armed]) [contenteditable="true"]:focus {
        outline: 2px solid var(--edit-accent, var(--color-brand-content));
    }

    /* ---- Size handles ----
       Injected as siblings of the element's own markup, so its native :hover and
       :focus still fire and its body stays interactive. */
    :where([data-edit-sizable]) {
        position: relative;
    }

    /* Handles reveal on approach rather than sitting on the element permanently */
    :where([data-edit-sizable]) :where([data-edit-handle])::before {
        opacity: 0;
        transition: opacity 0.12s ease, background-color 0.15s ease;
    }

    :where([data-edit-sizable]):hover :where([data-edit-handle])::before,
    :where([data-edit-sizable]):focus-within :where([data-edit-handle])::before {
        opacity: 1;
    }

    :where([data-edit-handle]) {
        position: absolute;
        z-index: 100;
        background: transparent;
        --h: var(--edit-size-handle, 1rem);

        /* Hairline, revealed on hover */
        &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1px;
            height: 1px;
            background: transparent;
            transition: background-color 0.15s ease;
            pointer-events: none;
        }

        &:hover::before,
        &:active::before {
            background-color: var(--edit-accent, var(--color-brand-content));
        }
    }

    :where([data-edit-handle]):focus-visible {
        outline: 2px solid var(--edit-accent, var(--color-brand-content));
    }

    /* Edges span their axis; corners are square. A corner value contains a hyphen. */
    :where([data-edit-handle="top"], [data-edit-handle="bottom"]) {
        left: 0;
        width: 100%;
        height: var(--h);
        cursor: ns-resize;

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

    :where([data-edit-handle="left"], [data-edit-handle="right"], [data-edit-handle="start"], [data-edit-handle="end"]) {
        top: 0;
        width: var(--h);
        height: 100%;
        cursor: ew-resize;

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

    :where([data-edit-handle*="-"]) {
        width: var(--h);
        height: var(--h);
    }

    /* Inset — each handle straddles its edge; a corner matches one rule per axis.
       inset-inline-* carries the logical start/end values, so they flip for RTL. */
    :where([data-edit-handle^="top"]) {
        top: calc(var(--h) * -0.5);
    }

    :where([data-edit-handle^="bottom"]) {
        bottom: calc(var(--h) * -0.5);
    }

    :where([data-edit-handle$="left"]) {
        left: calc(var(--h) * -0.5);
    }

    :where([data-edit-handle$="right"]) {
        right: calc(var(--h) * -0.5);
    }

    :where([data-edit-handle$="start"]) {
        inset-inline-start: calc(var(--h) * -0.5);
    }

    :where([data-edit-handle$="end"]) {
        inset-inline-end: calc(var(--h) * -0.5);
    }

    /* Corner cursors; the logical pair flips with direction. */
    :where([data-edit-handle="top-left"], [data-edit-handle="bottom-right"], [data-edit-handle="top-start"], [data-edit-handle="bottom-end"]) {
        cursor: nwse-resize;
    }

    :where([data-edit-handle="top-right"], [data-edit-handle="bottom-left"], [data-edit-handle="top-end"], [data-edit-handle="bottom-start"]) {
        cursor: nesw-resize;
    }

    [dir=rtl] :where([data-edit-handle="top-start"], [data-edit-handle="bottom-end"]) {
        cursor: nesw-resize;
    }

    [dir=rtl] :where([data-edit-handle="top-end"], [data-edit-handle="bottom-start"]) {
        cursor: nwse-resize;
    }

    /* Collapsed past --edit-size-collapse-* — authors restyle freely */
    :where([data-edit-collapsed]) {
        opacity: 0.45;
    }

    /* Full-viewport capture layer during a size or move drag */
    :where([data-edit-overlay]) {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: transparent;
    }

    /* Screen-reader announcements (keyboard grab / move / drop) */
    :where([data-edit-live]) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    @media (prefers-reduced-motion: reduce) {

        :where([data-edit-armed]) > [draggable="true"],
        :where([data-edit-handle])::before {
            transition: none;
        }
    }
}

/* ---- Authoring chrome (toolbar + class/scope menu) ---- */
@layer components {

    /* Presence is script's business — it knows which route is on screen. Whether it
       is seen is not, so the toolbar is styled and revealed here. */
    :where([data-edit-toolbar]) {
        display: none;
        position: fixed;
        inset-block-end: 1rem;
        inset-inline-end: 1rem;
        z-index: 9999;
        gap: 0.5rem;
        align-items: center;

        & button[disabled] {
            opacity: 0.35;
            pointer-events: none;
        }
    }

    :root[data-edit-active] :where([data-edit-toolbar]) {
        display: flex;
    }

    /* A popover: the top layer sits above every stacking context, so no handle,
       overlay or z-index anywhere on the page can paint over it. */
    :where([data-edit-menu]) {
        position: fixed;
        margin: 0;
        width: 16rem;
        padding: 0.6rem;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        background: var(--color-surface-1);
        border: 1px solid var(--color-line);
        border-radius: var(--radius);
        box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);

        & input {
            width: 100%;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.75rem;
        }

        & small {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-content-subtle);
        }
    }
}

/* Manifest Forms */

@layer base, components, utilities;

@layer components {

    /* Group & tab bar wrappers */
    :where([role=group]:has(button, [role=button], input, select, textarea, [onclick], [popovertarget], [x-dropdown], [\@click], [\@click\.stop], [\@click\.prevent], [x-on\:click], [x-on\:click\.stop], [x-on\:click\.prevent]),
        [role=tablist]:not(:has(>:not(button, a, [role=button], [role=tab], template)))):not(.unstyle) {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 0;
        width: fit-content;
        max-width: 100%;

        &>*:focus {
            z-index: 1
        }

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

        & input,
        & .combobox {
            width: fit-content
        }

        /* Own rule: a selector list is not forgiving, so a browser that can't
           parse the :has() would drop the two plain selectors above with it. */
        & :where(label, .label):has(input:not([type=checkbox], [type=radio]), select, textarea) {
            width: fit-content
        }

        /* Groups connect interactive elements */
        &:where([role=group]) {

            &>:where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]) {

                /* First participant — only when something follows it. A lone
                   participant matched this AND the last rule, squaring all four
                   corners of what is really just a single field. */
                &:not(:where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]) ~ &):has(~ :where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"])) {
                    border-start-end-radius: 0;
                    border-end-end-radius: 0
                }

                /* Middle participants */
                &:where(:where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]) ~ &):has(~ :where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"])) {
                    border-radius: 0
                }

                /* Last participant — only when something precedes it */
                &:where(:where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]) ~ &):not(:has(~ :where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]))) {
                    border-start-start-radius: 0;
                    border-end-start-radius: 0
                }
            }
        }

        /* Tab bar track */
        &[role=tablist] {
            position: relative;
            isolation: isolate;
            gap: calc(var(--spacing, 0.25rem) * 0.5);
            height: var(--spacing-field-height, calc(var(--spacing) * 9));
            padding: calc(var(--spacing, 0.25rem) / 2);
            background-color: color-mix(in oklch, var(--color-field-surface, oklch(20.5% 0 0)) 50%, transparent);
            border-radius: var(--radius, 0.5rem);
            anchor-scope: --selected-tab;

            /* Concentric corners */
            &>* {
                flex-grow: 1;
                justify-content: center;
                width: fit-content;
                min-height: 0;
                height: 100%;
                color: var(--color-content-neutral, oklch(43.9% 0 0));
                background-color: transparent;
                border-radius: max(calc(var(--radius, 0.5rem) - var(--spacing, 0.25rem) / 2), 0px);

                &:hover:not(.selected, [aria-selected=true], [aria-current]) {
                    color: var(--color-field-inverse, oklch(20.5% 0 0));
                    background-color: color-mix(in oklch, var(--color-field-surface-hover, oklch(70.8% 0 0)) 40%, transparent)
                }
            }

            /* Selected tab */
            &>:is(.selected, [aria-selected=true], [aria-current]) {
                color: var(--color-field-inverse, oklch(20.5% 0 0));
                background-color: var(--color-field-surface, oklch(87% 0 0));
                box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1))
            }

            /* Background slider for selected tab) */
            @supports (anchor-scope: --tab) {

                &>:is(.selected, [aria-selected=true], [aria-current]) {
                    /* --co-anchor lets inline anchor-name writers (e.g. tooltips) compose with the slider anchor */
                    anchor-name: --selected-tab;
                    --co-anchor: --selected-tab;
                    background-color: transparent;
                    box-shadow: none
                }

                &:has(>:is(.selected, [aria-selected=true], [aria-current]))::before {
                    content: "";
                    position: absolute;
                    z-index: -1;
                    position-anchor: --selected-tab;
                    top: anchor(top);
                    left: anchor(left);
                    width: anchor-size(width);
                    height: anchor-size(height);
                    background-color: var(--color-page, oklch(98.5% 0 0));
                    border-radius: max(calc(var(--radius, 0.5rem) - var(--spacing, 0.25rem) / 2), 0px);
                    box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));
                    transition: var(--tab-slide-transition, all 0.15s ease-in-out)
                }

                .dark &:has(>:is(.selected, [aria-selected=true], [aria-current]))::before {
                    background-color: var(--color-field-surface, oklch(87% 0 0))
                }

                /* Track the tab rigidly during continuous reflow (drag-to-resize, window resize) */
                :where(.resizable-dragging) &,
                :where(.window-resizing) & {
                    --tab-slide-transition: none
                }
            }
        }
    }

    :where(form):not(.unstyle) {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing, 0.25rem) * 4);
        width: 100%
    }

    /* Fieldset wrapper for checkboxes and radios */
    :where(fieldset):not(.unstyle) {
        display: flex;
        flex-direction: column;
        gap: 0.375ch calc(var(--spacing, 0.25rem) * 2);
        width: 100%;

        &:has([type=radio], [type=checkbox]) {
            gap: calc(var(--spacing, 0.25rem) * 2)
        }
    }

    :where(fieldset:has(legend)):not(.unstyle) {
        padding: 1ch 1.5ch 1.5ch 1.5ch;
        border-radius: var(--radius, 0.5rem);
        border-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
        border-style: solid;
        border-width: 1px;

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

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

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

    /* Label wrapper */
    :where(label:not(:has(.label)), .label):has(button, [role=button], [type=button], [type=submit], select, input:not([role=button], [type=checkbox], [type=radio], [type=file], [type=search]), textarea):not(:has(data)):not(:has(> button[command="--copy"])):not(.unstyle) {
        display: flex;
        flex-direction: column;
        gap: 0.2ch;
        width: 100%;
        text-indent: calc(var(--radius, 0.5rem) / 2);
        cursor: pointer;

        /* Prevent text indentation of bare label text nodes from being inherited */
        :where(*) {
            text-indent: 0
        }

        /* Indent label text in spans (direct child only — never reach into a nested field's content, e.g. combobox chips) */
        &>:where(span:first-of-type) {
            padding-inline-start: calc(var(--radius, 0.5rem) / 2)
        }

        &>:where(label, button, [role=button], [type=button], [type=submit], select, input:not([role=button], [type=checkbox], [type=radio], [type=file], [type=search]), textarea, .combobox, [role=group], [role=tablist]) {
            width: 100%;
            max-width: 100%
        }

        /* Group inputs flex to fill the label width */
        &>:where([role=group]) :where(input) {
            flex: 1;
            min-width: 0
        }

        /* Space out stacked labels for search and file inputs */
        :has([type=search], [type=file]) :where([type=search], [type=file]) {
            margin-top: 0.2ch
        }
    }

    /* Inline label wrapper */
    :where(label, .label):has(data):not(.unstyle) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        width: 100%;

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

        /* Size buttons, inputs, and field wrappers */
        &>:where(label, .label, button, input:not([type=checkbox], [type=radio]), select, textarea, [role=group], [role=tablist], .combobox) {
            width: calc(var(--spacing-field-height, 2.25rem) * 8);
            max-width: 50%;
        }

        /* Group inputs flex to fit the sized group */
        &>:where([role=group]) :where(input) {
            flex: 1;
            min-width: 0
        }

        /* Focus state for nested field wrappers (search, file, copy) */
        & :where(label, .label):focus-within {
            box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark, oklch(43.9% 0 0)) 35%, transparent)
        }

        /* Align textarea label to top */
        &:has(textarea) {
            align-items: start;

            :where(data) {
                padding-top: calc(var(--spacing, 0.25rem))
            }
        }
    }

    /* Remove button (anchored to parent element) */
    :where(:has(> button[name=remove])):not(.unstyle) {
        position: relative;

        /* Button */
        > :where(button[name=remove]:not(.unstyle)) {
            position: absolute;
            inset-block-start: calc(var(--spacing-field-height, 2.5rem) / 2 * -0.5);
            inset-inline-end: calc(var(--spacing-field-height, 2.5rem) / 2 * -0.5);
            z-index: 1;
            min-width: 0;
            width: calc(var(--spacing-field-height, 2.5rem) / 2);
            height: calc(var(--spacing-field-height, 2.5rem) / 2);
            padding: 0;
            border-radius: var(--spacing-field-height, 2.5rem);
            box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
            opacity: 0;
            transition: var(--transition);

            /* Icon */
            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 50%;
                height: 50%;
                background-color: var(--color-field-inverse, oklch(43.9% 0 0));
                mask-image: var(--icon-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"));
                mask-repeat: no-repeat;
                mask-size: 100% 100%;
                transform-origin: center;
                transform: translateX(-50%) translateY(-50%)
            }
        }

        /* Reveal on parent hover/focus */
        &:is(:hover, :focus-within)> :where(button[name=remove]:not(.unstyle)) {
            opacity: 1
        }
    }

    /* Label wrappers for search and file inputs using .label utility */
    label:has(.label):not(.unstyle) {
        justify-content: space-between;
        background-color: transparent;
        cursor: default;

        /* Stack label text above the .label field when not inlined via <data> */
        &:not(:has(data)) {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 0.2ch;
            width: 100%;
            text-indent: calc(var(--radius, 0.5rem) / 2);

            & .label {
                text-indent: 0
            }
        }

        :where([type=search]) {
            width: 100%;
            max-width: 100%
        }
    }
}

/* Manifest Inputs */

@layer base, components, utilities;

:root {

    /* Copy button icons */
    --icon-field-copy: 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-field-copied: 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%3Cpath d='m12 15 2 2 4-4'/%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")
}

@layer components {

    :where(input:not([type=range], [type=color]), textarea, .textarea, label:has([type=search], [type=file], > button[command="--copy"]), .label:has([type=search], [type=file], > button[command="--copy"])):not(.unstyle) {
        width: 100%;
        max-width: 100%;
        color: var(--color-field-inverse, oklch(43.9% 0 0));
        background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
        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;
        appearance: none;

        &:hover {
            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
        }

        &:active {
            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
        }

        &:focus-visible {
            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
        }

        &::placeholder {
            color: color-mix(in oklch, var(--color-field-inverse, oklch(43.9% 0 0)) 65%, transparent)
        }

        &::selection {
            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 80%, var(--color-field-inverse, oklch(43.9% 0 0)))
        }

        &[type=file] {
            max-width: 0;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
    }

    /* Input-specific styles */
    :where(input:not([type=range]):not(.unstyle)) {
        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 and file inputs */
    :where(label, .label):has([type=search], [type=file]):not(.unstyle) {
        display: flex;
        flex-flow: row;
        align-items: center;
        padding-inline-start: 0;

        /* 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
        }

        /* No spacing for file input + icon */
        &:has(input[type=file] + [x-icon]) {
            padding-inline-end: 0
        }
    }

    /* Additional styles for label with file input */
    :where(label, .label):has([type=file]):not(.unstyle) {
        justify-content: center;
        gap: var(--spacing, 0.25rem);
        min-height: var(--spacing-field-height, 2.25rem);
        cursor: pointer
    }

    /* Additional styles for label with search input */
    :where(label, .label):has([type=search]):not(.unstyle) {
        justify-content: start;

        /* 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(55.6% 0 0))
        }
    }

    /* Copied confirmation icon (tooltip content) */
    :where(.field-copied-icon) {
        display: inline-block;
        vertical-align: middle;
        width: 1em;
        height: 1em;
        background-color: currentColor;
        mask-image: var(--icon-field-copied);
        mask-size: 1em;
        mask-repeat: no-repeat;
        mask-position: center;

        /* Fill the line box so the mask centers optically */
        @supports (height: 1lh) {
            height: 1lh;
            vertical-align: top
        }
    }

    /* Copy button icon */
    :where(button[command="--copy"]):not(.unstyle) {

        &::after {
            content: '';
            display: block;
            width: 0.8125rem;
            height: 0.8125rem;
            background-color: var(--color-content-neutral, oklch(43.9% 0 0));
            mask-image: var(--icon-field-copy);
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center
        }

        &:hover::after,
        &:active::after,
        &:focus-visible::after {
            background-color: var(--color-field-inverse, oklch(43.9% 0 0))
        }

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

    /* Label wrapper for inputs with a copy button */
    :where(label, .label):has(> button[command="--copy"]):not(.unstyle) {
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: start;
        padding-inline-end: 0.375rem;

        /* Input element overrides */
        & :where(input) {
            background: transparent;

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

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

        /* Copy button, compact and hidden until reveal */
        & :where(button[command="--copy"]) {
            flex-shrink: 0;
            min-width: 0;
            width: calc(var(--spacing-field-height, 2.25rem) - 0.75rem);
            height: calc(var(--spacing-field-height, 2.25rem) - 0.75rem);
            padding: 0;
            background-color: transparent;
            opacity: 0;

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

        /* Reveal on hover, focus, or after copying */
        &:hover :where(button[command="--copy"]),
        &:focus-within :where(button[command="--copy"]),
        & :where(button[command="--copy"].copied) {
            opacity: 1
        }
    }

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

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

/* Manifest Radios */

@layer base, components, utilities;

@layer components {

    /* Deliberately unflattened: manifest.input.css supplies the field chrome via
       a lower-specificity rule that sorts later, so this must outrank it. */
    input[type=radio]:not(.unstyle) {
        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(43.9% 0 0));
            border-radius: 50%;
            transform-origin: center;
            transition: var(--transition, all .05s ease-in-out);

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

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

/* Manifest Range */

@layer base, components, utilities;

@layer components {

    :where(input[type=range]):not(.unstyle) {
        appearance: none;
        background-color: transparent;
        border-radius: var(--radius, 0.5rem);
        cursor: default;

        &::-webkit-slider-runnable-track {
            height: calc(var(--spacing, 0.25rem) * 2);
            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
            border-radius: var(--radius, 0.5rem);
            cursor: pointer;
            transition: var(--transition, all .05s ease-in-out)
        }

        &:hover::-webkit-slider-runnable-track {
            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent));
        }

        &::-webkit-slider-thumb {
            appearance: none;
            position: relative;
            top: 50%;
            width: calc(var(--spacing-field-height, 2.25rem) * 0.5);
            height: calc(var(--spacing-field-height, 2.25rem) * 0.5);
            transform: translateY(-50%);
            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 60%, var(--color-field-inverse, oklch(43.9% 0 0)));
            border-radius: 200px;
            box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
            cursor: pointer;
            transition: var(--transition, all .05s ease-in-out)
        }

        &::-webkit-slider-thumb:hover {
            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 30%, var(--color-field-inverse, oklch(43.9% 0 0)));
        }
    }

    :where(datalist):not(.unstyle) {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        width: 100%;
        max-width: 100%;

        & option {
            width: 2ch;
            text-align: center;
            font-size: 0.875rem;
            color: var(--color-content-neutral, oklch(43.9% 0 0));
        }
    }

    :where(label:has(input[type=range])):not(.unstyle) {
        cursor: default;
    }
}

/* Manifest Resize Handles

   Superseded by x-edit.size (manifest.edit.css) — kept for existing projects.
   Self-contained: handle geometry lives here, not in a shared snippet. */

@layer base, components, utilities;

@layer utilities {

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

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

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

            &:hover::before,
            &:active::before {
                background-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
            }
        }

        /* Handle geometry — edges span their axis, corners stay square */
        .resize-handle-top,
        .resize-handle-bottom {
            left: 0;
            width: 100%;
            height: var(--h);
            cursor: ns-resize;

            &::before {
                width: 100%
            }
        }

        .resize-handle-left,
        .resize-handle-right,
        .resize-handle-start,
        .resize-handle-end {
            top: 0;
            width: var(--h);
            height: 100%;
            cursor: ew-resize;

            &::before {
                height: 100%
            }
        }

        .resize-handle-top {
            top: calc(var(--h) * -0.5)
        }

        .resize-handle-bottom {
            bottom: calc(var(--h) * -0.5)
        }

        .resize-handle-left,
        .resize-handle-top-left,
        .resize-handle-bottom-left {
            left: calc(var(--h) * -0.5)
        }

        .resize-handle-right,
        .resize-handle-top-right,
        .resize-handle-bottom-right {
            right: calc(var(--h) * -0.5)
        }

        /* Logical edges — inset-inline-* auto-flips for RTL */
        .resize-handle-start,
        .resize-handle-top-start,
        .resize-handle-bottom-start {
            inset-inline-start: calc(var(--h) * -0.5)
        }

        .resize-handle-end,
        .resize-handle-top-end,
        .resize-handle-bottom-end {
            inset-inline-end: calc(var(--h) * -0.5)
        }

        .resize-handle-top-left,
        .resize-handle-top-right,
        .resize-handle-top-start,
        .resize-handle-top-end {
            top: calc(var(--h) * -0.5)
        }

        .resize-handle-bottom-left,
        .resize-handle-bottom-right,
        .resize-handle-bottom-start,
        .resize-handle-bottom-end {
            bottom: calc(var(--h) * -0.5)
        }

        /* Corner cursors */
        .resize-handle-top-left,
        .resize-handle-top-start {
            cursor: nw-resize;
        }

        .resize-handle-top-right,
        .resize-handle-top-end {
            cursor: ne-resize;
        }

        .resize-handle-bottom-left,
        .resize-handle-bottom-start {
            cursor: sw-resize;
        }

        .resize-handle-bottom-right,
        .resize-handle-bottom-end {
            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 — framework ring (manifest.theme.css) */
        .resize-handle:focus {
            outline: none;
            box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark) 30%, transparent)
        }

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

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

    /* RTL cursor flips — placement follows the logical insets in the shared geometry */
    [dir=rtl] :where([x-resize]) .resize-handle-top-start {
        cursor: ne-resize;
    }

    [dir=rtl] :where([x-resize]) .resize-handle-top-end {
        cursor: nw-resize;
    }

    [dir=rtl] :where([x-resize]) .resize-handle-bottom-start {
        cursor: se-resize;
    }

    [dir=rtl] :where([x-resize]) .resize-handle-bottom-end {
        cursor: sw-resize;
    }
}

/* Manifest Sidebars */

@layer base, components, utilities;





@layer components {

    :where(nav[popover]) {
        inset-inline-start: auto;
        inset-inline-end: 0;
        width: fit-content;
        min-width: 20vw;
        max-width: 80vw;
        height: 100%;
        overflow-y: auto;
        z-index: 200;
        background-color: var(--color-popover-surface, oklch(98.5% 0 0));
        /* Opt out of the base scale-pop; sidebars slide instead. */
        animation: none;
        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%)
            }
        }
    }

    :where(nav[popover].appear-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(nav[popover]) {
        background-color: var(--color-surface-1, oklch(97% 0 0))
    }
}

/* Manifest Slides */

@layer base, components, utilities;

@layer components {

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

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

        /* Previous & next buttons. Arrow markup is author-written; the
           @click="prev()" selectors are deprecated aliases for the hooks. */
        & :where([data-carousel-prev], [data-carousel-next], 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)
            }
        }

        & :where([data-carousel-prev], button[\@click="prev()"]) {
            left: calc(var(--spacing, 0.25rem) * 4)
        }

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

        /* Dots container (author markup, driven by the plugin's `dots` getter) */
        :where(.carousel-dots) {
            position: absolute;
            bottom: calc(var(--spacing, 0.25rem) * 4);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: calc(var(--spacing, 0.25rem) * 2);
            max-width: 100%;
            padding: 0 calc(var(--spacing, 0.25rem) * 4);
            overflow-x: auto;
            scrollbar-width: none;

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

            /* Dot button */
            & :where(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
                }
            }
        }
    }
}

/* Manifest Switches */

@layer base, components, utilities;

@layer components {

    :where(input[role=switch]):not(.unstyle) {
        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, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 60%, var(--color-field-inverse, oklch(43.9% 0 0)));
            box-shadow: var(--shadow-sm, 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, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));

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

            &:hover {
                background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
            }
        }
    }
}

/* Manifest Tables */

@layer base, components, utilities;

@layer components {

    :where(.grid-table):not(.unstyle) {
        display: grid;
    }

    :where(table, .grid-table):not(.unstyle) {
        table-layout: auto;
        align-items: start;
        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(97% 0 0));
            border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
        }

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

        /* Row */
        :where(tr, .grid-row > *) {
            border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
        }

        /* 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;

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

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

        /* Native cells clip */
        :where(td, th) {
            overflow: hidden
        }

        /* 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(97% 0 0))
            }

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

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

/* Manifest Text Edit */

@layer base, components, utilities;

/* Self-contained. The editable area is a field first — it borrows the tokens inputs
   and textareas use, so it sits in a form without looking bolted on. Controls are
   styled where they are, not by where they sit, because they can be anywhere. */

@layer components {

    :where([data-text-edit]) {
        min-height: var(--text-edit-min-height, 8rem);
        max-height: var(--text-edit-max-height, none);
        overflow-y: auto;
        padding: var(--text-edit-padding, 0.75rem);
        background: var(--text-edit-background, var(--color-surface-1));
        border: 1px solid var(--color-line);
        border-radius: var(--radius);
        outline: none;

        /* Page-level styling — set by .page controls, read back by $text.page.
           Presentation, so it lives here rather than inside the stored markup. */
        font-family: var(--text-edit-font, inherit);
        font-size: var(--text-edit-size, inherit);
        line-height: var(--text-edit-leading, inherit);
        text-align: var(--text-edit-align, start);
        color: var(--text-edit-color, inherit);

        &:focus {
            border-color: var(--color-content-subtle);
        }

        /* Flagged from script: :empty never matches the <br> a contenteditable
           keeps, and the tag holding it is not predictable after a wipe. */
        &[data-text-edit-empty]::before {
            content: attr(placeholder);
            color: var(--color-content-subtle);
            pointer-events: none;
        }
    }

    /* ---- Controls ----
       A control is marked wherever it lives, so a toolbar is optional markup and
       never a requirement. The reset already dims [aria-disabled=true]. */
    :where([data-text-edit-control]) {
        &[data-text-edit-active] {
            background: color-mix(in oklch, var(--color-content-stark) 10%, transparent);
            color: var(--color-content-stark);
        }

        & > svg {
            width: 1rem;
            height: 1rem;
        }
    }

    :where(button[data-text-edit-control]) {
        padding: 0.35rem;
        line-height: 0;
    }

    /* ---- Editable content ----
       The editor authors real block elements, so style them as elements. Deliberately
       lighter than the .prose class, which sets a reading measure this field can't use. */
    :where([data-text-edit]) {

        & > * + * {
            margin-block-start: 0.75em;
        }

        & :where(h1, h2, h3, h4, h5, h6) {
            font-weight: 600;
            line-height: 1.25;
        }

        & h1 { font-size: 1.6em }
        & h2 { font-size: 1.35em }
        & h3 { font-size: 1.15em }

        & :where(ul, ol) {
            padding-inline-start: 1.5em;
        }

        & li {
            list-style: revert;
        }

        & blockquote {
            padding-inline-start: 0.85em;
            border-inline-start: 2px solid var(--color-line);
            color: var(--color-content-neutral);
        }

        & code {
            padding: 0.1em 0.3em;
            border-radius: 4px;
            font-size: 0.9em;
            background: color-mix(in oklch, var(--color-content-stark) 8%, transparent);
        }

        & pre {
            padding: 0.75em;
            border-radius: var(--radius);
            overflow-x: auto;
            background: color-mix(in oklch, var(--color-content-stark) 8%, transparent);

            & code {
                padding: 0;
                background: none;
            }
        }

        & a {
            color: var(--color-brand-content);
            text-decoration: underline;
        }

        & hr {
            margin-block: 1em;
        }

        & img {
            max-width: 100%;
        }

        & table {
            width: 100%;
            table-layout: fixed;

            & :where(td, th) {
                padding: 0.35em 0.5em;
                border: 1px solid var(--color-line);
                vertical-align: top;
            }

            & th {
                font-weight: 600;
                text-align: start;
                background: var(--color-surface-2);
            }
        }

        /* A block selection across cells. The browser can only highlight text, so an
           empty cell shows nothing — this is what makes a spreadsheet-style
           selection visible. */
        & :where(td, th)[data-text-edit-cell] {
            background: color-mix(in oklch, var(--color-brand-content) 18%, transparent);
        }

        /* Borders read as grabbable only when the pointer is on one */
        &[data-text-edit-border="x"] { cursor: col-resize }
        &[data-text-edit-border="y"] { cursor: row-resize }
        &[data-text-edit-resizing] { user-select: none }
        &[data-text-edit-resizing="x"] { cursor: col-resize }
        &[data-text-edit-resizing="y"] { cursor: row-resize }

        /* Task lists — the checkbox replaces the marker */
        & :where(ul[data-checklist]) {
            padding-inline-start: 0.25em;
            list-style: none;

            & li {
                display: flex;
                align-items: baseline;
                gap: 0.5em;
                list-style: none;
            }
        }

        & :where(dt) {
            font-weight: 600;
        }

        & :where(dd) {
            margin-inline-start: 1.5em;
        }

        & :where(kbd) {
            padding: 0.1em 0.35em;
            border: 1px solid var(--color-line);
            border-radius: 4px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.85em;
        }

        & :where(mark) {
            background: color-mix(in oklch, var(--color-brand-content) 25%, transparent);
            color: inherit;
        }

        & :where(small) {
            font-size: 0.8em;
        }

        & :where(figcaption) {
            font-size: 0.8em;
            color: var(--color-content-neutral);
        }

        & :where(abbr, dfn) {
            text-decoration: underline dotted;
        }
    }
}

/* ManifestToasts */

@layer base, components, utilities;

@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;
        /* Never capture clicks over the page — gaps and any stuck exited toast stay click-through */
        pointer-events: none;
    }

    :where(.toast) {
        display: flex;
        /* Live toasts are interactive (dismiss button); the container is not */
        pointer-events: auto;
        max-width: 90vw;
        background-color: var(--color-popover-surface, oklch(98.5% 0 0));
        border: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
        border-radius: calc(var(--radius, 0.5rem) * 2);
        box-shadow: var(--shadow-lg, 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;
            white-space: pre-wrap;

            :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(43.9% 0 0)) 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(43.9% 0 0));
                mask-image: var(--icon-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"));
                mask-repeat: no-repeat;
                mask-size: 100% 100%;
                transform-origin: center;
                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(43.9% 0 0));
        background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));

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

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

    /* Exit animation */
    :where(.toast-exit) {
        opacity: 0;
        transform: translateY(1rem);
        /* An exiting/stuck toast is invisible — it must never sit as a dead zone over the page */
        pointer-events: none
    }
}

/* Manifest Tooltips */

@layer base, components, utilities;



@layer utilities {

    /* Shared chrome — anchored x-tooltip popovers AND non-popover tooltips
       (e.g. the charts plugin's cursor-following tip) */
    :where(.tooltip) {
        width: fit-content;
        padding: calc(var(--spacing, 0.25rem) * .5) calc(var(--spacing, 0.25rem) * 2);
        font-size: 0.875rem;
        color: var(--color-page, oklch(98.5% 0 0));
        background-color: var(--color-content-stark, oklch(43.9% 0 0));
        border: 0 none;
        border-radius: var(--radius, 0.5rem);
        box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));

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

        /* Nested text elements */
        &>* {
            color: inherit
        }
    }

    /* Anchored popover positioning + open/close behavior */
    :where(.tooltip[popover]) {
        position: absolute;
        position-try-fallbacks: flip-inline, flip-block, flip-start;
        position-area: bottom;
        inset: auto;
        display: block;
        max-width: 200px;
        margin: var(--spacing-popover-offset, 0.5rem) 0;
        animation: none;
        transition: opacity .15s ease-in, scale .15s ease-in, display .15s ease-in;
        transition-behavior: allow-discrete;

        /* 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
        }

        &:hover {
            transition-delay: var(--tooltip-hover-delay, .5s)
        }
    }

}

/* Directional alignment lives in styles/snippets/manifest.alignment.css */

/* Manifest Typography */

@layer base, components, utilities;

@layer base {

    /* All text elements */
    :where(abbr, address, blockquote, code, del, figcaption, h1, h2, h3, h4, h5, h6, ins, label:not(.avatar, :has([type=file], [type=search])), legend, p, small, cite, q):not(.unstyle),
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    .paragraph,
    .small,
    .caption,
    .label {
        color: var(--color-content-stark, oklch(43.9% 0 0));

        /* Inline links */
        & a:not(.unstyle),
        & .link {
            text-decoration: underline;
            text-underline-offset: 2px
        }

        /* Inline icons */
        & [x-icon] {
            margin-inline-end: 0.25em
        }
    }

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

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

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

    :where(h2):not(.unstyle),
    .h2 {
        font-size: 2.25rem
    }

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

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

    :where(h5):not(.unstyle),
    .h5 {
        font-size: 1rem;
        line-height: 1rem;
        color: var(--color-content-neutral, oklch(43.9% 0 0));

        & a:hover {
            color: var(--color-content-stark, oklch(43.9% 0 0))
        }
    }

    :where(h6):not(.unstyle),
    .h6 {
        font-size: 0.8125rem;
        line-height: 1.4;
        color: var(--color-brand-content, oklch(68.1% 0.162 75.834))
    }

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

    /* Links */
    :where(a:not([role=button])):not(.unstyle),
    .link {
        text-align: unset;
        text-decoration: none;
        color: var(--color-content-stark, oklch(43.9% 0 0));
        cursor: pointer;
        transition: var(--transition, all .05s ease-in-out);

        &:hover {
            color: var(--color-content-neutral, oklch(43.9% 0 0))
        }

        &:where(:has([x-icon])) {
            display: inline-flex;
            align-items: center;
            gap: 0.25em
        }
    }

    /* Asides */
    :where(aside):not(.unstyle) {
        padding: calc(var(--spacing, 0.25rem) * 4);
        border: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
        border-radius: var(--radius, 0.5rem)
    }

    /* Badges. Leading is normal so descenders clear the bottom edge, padding
       comes off --spacing rather than ch (0.65ch crowds the first letter), and
       the radius follows --radius instead of a hard pill. The semantic surface
       stays solid: tinting it and keeping --color-field-inverse drops dark-mode
       contrast to ~1.1, and moving to --color-content-stark only reaches ~3. */
    :where(.badge) {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        width: fit-content;
        height: fit-content;
        padding: calc(var(--spacing, 0.25rem) * 0.5) calc(var(--spacing, 0.25rem) * 2);
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 1.25;
        color: var(--color-field-inverse, oklch(43.9% 0 0));
        background-color: var(--color-field-surface, color-mix(in oklch, oklch(97% 0 0) 10%, transparent));
        border-radius: calc(var(--radius, 0.5rem) * 0.6);

        /* Solo icons square up, as buttons do. (The old :only-child here keyed
           off the badge's siblings, so an icon badge next to anything got word
           padding.) */
        &[x-icon] {
            padding: calc(var(--spacing, 0.25rem) * 0.5);
            aspect-ratio: 1
        }

        /* Same for a badge wrapping a bare <svg>. Its own rule so the plain
           selector above still lands without :has(). */
        &:has(> svg:only-child) {
            padding: calc(var(--spacing, 0.25rem) * 0.5);
            aspect-ratio: 1
        }
    }

    /* Blockquotes */
    :where(blockquote):not(.unstyle) {
        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(43.9% 0 0));
        border-inline-start: 0.25rem solid color-mix(in oklch, var(--color-content-stark, oklch(43.9% 0 0)) 25%, transparent);
        border-inline-end: none;

        & * {
            color: inherit
        }
    }

    /* Code */
    :where(code):not(.unstyle) {
        display: inline-block;
        width: fit-content;
        height: fit-content;
        padding: 0 0.7ch;
        font-size: 82.5%;
        line-height: 1.4;
        word-wrap: break-word;
        color: var(--color-content-neutral, oklch(43.9% 0 0));
        background-color: color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 10%, transparent);
        border: 1px solid color-mix(in oklch, var(--color-content-subtle, oklch(55.6% 0 0)) 10%, transparent);
        border-radius: var(--radius, 0.5rem);

        &[role=button] {
            cursor: pointer
        }
    }

    /* Captions */
    :where(figcaption):not(.unstyle),
    .caption {
        font-size: 0.8125rem;
        color: var(--color-content-neutral, oklch(43.9% 0 0));

        & a:not([role=button]) {
            color: inherit;

            &:hover {
                color: var(--color-content-stark, oklch(98.5% 0 0))
            }
        }
    }

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

    /* Small text */
    :where(small):not(.unstyle),
    .small {
        font-size: 0.875rem;
        color: var(--color-content-neutral, oklch(43.9% 0 0));

        & a:not([role=button]) {
            color: inherit;

            &:hover {
                color: var(--color-content-stark, oklch(98.5% 0 0))
            }
        }
    }

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

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

    /* Keyboard text */
    :where(kbd):not(.unstyle),
    .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(43.9% 0 0));
        background-color: color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 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), .kbd:not(:last-of-type)) {
        margin-inline-start: 1px;
        margin-inline-end: 0
    }

    /* Labels */
    :where(label):not(.unstyle),
    .label {
        width: fit-content;
        user-select: none
    }

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

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

    :where(ul):not(.unstyle) {
        list-style-type: disc;
    }

    :where(ol):not(.unstyle),
    :where(ul):not(.unstyle) {
        padding-inline-start: 1.75ch;

        &:has(input[type=checkbox]) {
            padding-inline-start: 0
        }

        /* 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
            }

            /* Inline links */
            & a:not(.unstyle),
            & .link {
                text-decoration: underline;
                text-underline-offset: 2px
            }

            /* 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
                }
            }
        }
    }

    :where(nav, menu):not(.unstyle) ul,
    :where(nav, menu):not(.unstyle) ol {
        list-style: none;
        padding: 0;

        & li,
        li:not(:last-of-type) {
            margin: 0;
            padding: 0
        }
    }

    /* RTL list overrides */
    [dir=rtl] :where(ol):not(nav ol):not(menu ol):not(.unstyle),
    [dir=rtl] :where(ul):not(nav ul):not(menu ul):not(.unstyle) {
        & 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):not(.unstyle) ul,
    :where(ol, ul):not(nav ul):not(menu ul):not(.unstyle) ol {
        margin-top: 1ch;
        padding-inline-start: 2.75ch;

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

    /* Pre code blocks */
    :where(pre):not(.unstyle) {
        display: flex;
        flex-flow: row wrap;
        font-size: 0.8125rem;
        line-height: 1.7;
        background-color: var(--color-page, oklch(98.5% 0 0));
        border: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
        border-radius: var(--radius, 0.5rem);
        overflow: hidden;
        tab-size: 4;
        white-space: pre;
        white-space-collapse: preserve;

        &>code {
            flex-grow: 1;
            display: inline-block;
            height: auto;
            padding: calc(var(--spacing, 0.25rem) * 4);
            padding-inline-end: calc(var(--spacing, 0.25rem) * 12);
            font-size: inherit;
            line-height: inherit;
            background-color: transparent;
            border: 0 none;
            box-shadow: none;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;

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

        &:not(:has(code)) {
            padding: calc(var(--spacing, 0.25rem) * 4)
        }
    }
}

/* Anchored popover alignment — single source shared by dropdowns and tooltips.
   The build appends this to standalone copies and adds it once to the bundle.
   Zero specificity throughout, so the coarse-pointer sheet and author rules
   still win. Dropdown-only variants (.center) stay in manifest.dropdown.css. */

@layer base, components, utilities;

@layer utilities {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:root,
::selection {

    /* Tailwind */
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-red-950: oklch(25.8% 0.092 26.042);
    --color-orange-50: oklch(98% 0.016 73.684);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-200: oklch(90.1% 0.076 70.697);
    --color-orange-300: oklch(83.7% 0.128 66.29);
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-orange-600: oklch(64.6% 0.222 41.116);
    --color-orange-700: oklch(55.3% 0.195 38.402);
    --color-orange-800: oklch(47% 0.157 37.304);
    --color-orange-900: oklch(40.8% 0.123 38.172);
    --color-orange-950: oklch(26.6% 0.079 36.259);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-amber-950: oklch(27.9% 0.077 45.635);
    --color-yellow-50: oklch(98.7% 0.026 102.212);
    --color-yellow-100: oklch(97.3% 0.071 103.193);
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
    --color-yellow-400: oklch(85.2% 0.199 91.936);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-yellow-600: oklch(68.1% 0.162 75.834);
    --color-yellow-700: oklch(55.4% 0.135 66.442);
    --color-yellow-800: oklch(47.6% 0.114 61.907);
    --color-yellow-900: oklch(42.1% 0.095 57.708);
    --color-yellow-950: oklch(28.6% 0.066 53.813);
    --color-lime-50: oklch(98.6% 0.031 120.757);
    --color-lime-100: oklch(96.7% 0.067 122.328);
    --color-lime-200: oklch(93.8% 0.127 124.321);
    --color-lime-300: oklch(89.7% 0.196 126.665);
    --color-lime-400: oklch(84.1% 0.238 128.85);
    --color-lime-500: oklch(76.8% 0.233 130.85);
    --color-lime-600: oklch(64.8% 0.2 131.684);
    --color-lime-700: oklch(53.2% 0.157 131.589);
    --color-lime-800: oklch(45.3% 0.124 130.933);
    --color-lime-900: oklch(40.5% 0.101 131.063);
    --color-lime-950: oklch(27.4% 0.072 132.109);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-300: oklch(87.1% 0.15 154.449);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-green-900: oklch(39.3% 0.095 152.535);
    --color-green-950: oklch(26.6% 0.065 152.934);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-emerald-800: oklch(43.2% 0.095 166.913);
    --color-emerald-900: oklch(37.8% 0.077 168.94);
    --color-emerald-950: oklch(26.2% 0.051 172.552);
    --color-teal-50: oklch(98.4% 0.014 180.72);
    --color-teal-100: oklch(95.3% 0.051 180.801);
    --color-teal-200: oklch(91% 0.096 180.426);
    --color-teal-300: oklch(85.5% 0.138 181.071);
    --color-teal-400: oklch(77.7% 0.152 181.912);
    --color-teal-500: oklch(70.4% 0.14 182.503);
    --color-teal-600: oklch(60% 0.118 184.704);
    --color-teal-700: oklch(51.1% 0.096 186.391);
    --color-teal-800: oklch(43.7% 0.078 188.216);
    --color-teal-900: oklch(38.6% 0.063 188.416);
    --color-teal-950: oklch(27.7% 0.046 192.524);
    --color-cyan-50: oklch(98.4% 0.019 200.873);
    --color-cyan-100: oklch(95.6% 0.045 203.388);
    --color-cyan-200: oklch(91.7% 0.08 205.041);
    --color-cyan-300: oklch(86.5% 0.127 207.078);
    --color-cyan-400: oklch(78.9% 0.154 211.53);
    --color-cyan-500: oklch(71.5% 0.143 215.221);
    --color-cyan-600: oklch(60.9% 0.126 221.723);
    --color-cyan-700: oklch(52% 0.105 223.128);
    --color-cyan-800: oklch(45% 0.085 224.283);
    --color-cyan-900: oklch(39.8% 0.07 227.392);
    --color-cyan-950: oklch(30.2% 0.056 229.695);
    --color-sky-50: oklch(97.7% 0.013 236.62);
    --color-sky-100: oklch(95.1% 0.026 236.824);
    --color-sky-200: oklch(90.1% 0.058 230.902);
    --color-sky-300: oklch(82.8% 0.111 230.318);
    --color-sky-400: oklch(74.6% 0.16 232.661);
    --color-sky-500: oklch(68.5% 0.169 237.323);
    --color-sky-600: oklch(58.8% 0.158 241.966);
    --color-sky-700: oklch(50% 0.134 242.749);
    --color-sky-800: oklch(44.3% 0.11 240.79);
    --color-sky-900: oklch(39.1% 0.09 240.876);
    --color-sky-950: oklch(29.3% 0.066 243.157);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-blue-950: oklch(28.2% 0.091 267.935);
    --color-indigo-50: oklch(96.2% 0.018 272.314);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-indigo-200: oklch(87% 0.065 274.039);
    --color-indigo-300: oklch(78.5% 0.115 274.713);
    --color-indigo-400: oklch(67.3% 0.182 276.935);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-600: oklch(51.1% 0.262 276.966);
    --color-indigo-700: oklch(45.7% 0.24 277.023);
    --color-indigo-800: oklch(39.8% 0.195 277.366);
    --color-indigo-900: oklch(35.9% 0.144 278.697);
    --color-indigo-950: oklch(25.7% 0.09 281.288);
    --color-violet-50: oklch(96.9% 0.016 293.756);
    --color-violet-100: oklch(94.3% 0.029 294.588);
    --color-violet-200: oklch(89.4% 0.057 293.283);
    --color-violet-300: oklch(81.1% 0.111 293.571);
    --color-violet-400: oklch(70.2% 0.183 293.541);
    --color-violet-500: oklch(60.6% 0.25 292.717);
    --color-violet-600: oklch(54.1% 0.281 293.009);
    --color-violet-700: oklch(49.1% 0.27 292.581);
    --color-violet-800: oklch(43.2% 0.232 292.759);
    --color-violet-900: oklch(38% 0.189 293.745);
    --color-violet-950: oklch(28.3% 0.141 291.089);
    --color-purple-50: oklch(97.7% 0.014 308.299);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-200: oklch(90.2% 0.063 306.703);
    --color-purple-300: oklch(82.7% 0.119 306.383);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-700: oklch(49.6% 0.265 301.924);
    --color-purple-800: oklch(43.8% 0.218 303.724);
    --color-purple-900: oklch(38.1% 0.176 304.987);
    --color-purple-950: oklch(29.1% 0.149 302.717);
    --color-fuchsia-50: oklch(97.7% 0.017 320.058);
    --color-fuchsia-100: oklch(95.2% 0.037 318.852);
    --color-fuchsia-200: oklch(90.3% 0.076 319.62);
    --color-fuchsia-300: oklch(83.3% 0.145 321.434);
    --color-fuchsia-400: oklch(74% 0.238 322.16);
    --color-fuchsia-500: oklch(66.7% 0.295 322.15);
    --color-fuchsia-600: oklch(59.1% 0.293 322.896);
    --color-fuchsia-700: oklch(51.8% 0.253 323.949);
    --color-fuchsia-800: oklch(45.2% 0.211 324.591);
    --color-fuchsia-900: oklch(40.1% 0.17 325.612);
    --color-fuchsia-950: oklch(29.3% 0.136 325.661);
    --color-pink-50: oklch(97.1% 0.014 343.198);
    --color-pink-100: oklch(94.8% 0.028 342.258);
    --color-pink-200: oklch(89.9% 0.061 343.231);
    --color-pink-300: oklch(82.3% 0.12 346.018);
    --color-pink-400: oklch(71.8% 0.202 349.761);
    --color-pink-500: oklch(65.6% 0.241 354.308);
    --color-pink-600: oklch(59.2% 0.249 0.584);
    --color-pink-700: oklch(52.5% 0.223 3.958);
    --color-pink-800: oklch(45.9% 0.187 3.815);
    --color-pink-900: oklch(40.8% 0.153 2.432);
    --color-pink-950: oklch(28.4% 0.109 3.907);
    --color-rose-50: oklch(96.9% 0.015 12.422);
    --color-rose-100: oklch(94.1% 0.03 12.58);
    --color-rose-200: oklch(89.2% 0.058 10.001);
    --color-rose-300: oklch(81% 0.117 11.638);
    --color-rose-400: oklch(71.2% 0.194 13.428);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-rose-600: oklch(58.6% 0.253 17.585);
    --color-rose-700: oklch(51.4% 0.222 16.935);
    --color-rose-800: oklch(45.5% 0.188 13.697);
    --color-rose-900: oklch(41% 0.159 10.272);
    --color-rose-950: oklch(27.1% 0.105 12.094);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-gray-950: oklch(13% 0.028 261.692);
    --color-zinc-50: oklch(98.5% 0 0);
    --color-zinc-100: oklch(96.7% 0.001 286.375);
    --color-zinc-200: oklch(92% 0.004 286.32);
    --color-zinc-300: oklch(87.1% 0.006 286.286);
    --color-zinc-400: oklch(70.5% 0.015 286.067);
    --color-zinc-500: oklch(55.2% 0.016 285.938);
    --color-zinc-600: oklch(44.2% 0.017 285.786);
    --color-zinc-700: oklch(37% 0.013 285.805);
    --color-zinc-800: oklch(27.4% 0.006 286.033);
    --color-zinc-900: oklch(21% 0.006 285.885);
    --color-zinc-950: oklch(14.1% 0.005 285.823);
    --color-neutral-50: oklch(98.5% 0 0);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-neutral-300: oklch(87% 0 0);
    --color-neutral-400: oklch(70.8% 0 0);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-neutral-600: oklch(43.9% 0 0);
    --color-neutral-700: oklch(37.1% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-neutral-950: oklch(14.5% 0 0);
    --color-stone-50: oklch(98.5% 0.001 106.423);
    --color-stone-100: oklch(97% 0.001 106.424);
    --color-stone-200: oklch(92.3% 0.003 48.717);
    --color-stone-300: oklch(86.9% 0.005 56.366);
    --color-stone-400: oklch(70.9% 0.01 56.259);
    --color-stone-500: oklch(55.3% 0.013 58.071);
    --color-stone-600: oklch(44.4% 0.011 73.639);
    --color-stone-700: oklch(37.4% 0.01 67.558);
    --color-stone-800: oklch(26.8% 0.007 34.298);
    --color-stone-900: oklch(21.6% 0.006 56.043);
    --color-stone-950: oklch(14.7% 0.004 49.25);
    --color-mauve-50: oklch(98.5% 0 0);
    --color-mauve-100: oklch(96% 0.003 325.6);
    --color-mauve-200: oklch(92.2% 0.005 325.62);
    --color-mauve-300: oklch(86.5% 0.012 325.68);
    --color-mauve-400: oklch(71.1% 0.019 323.02);
    --color-mauve-500: oklch(54.2% 0.034 322.5);
    --color-mauve-600: oklch(43.5% 0.029 321.78);
    --color-mauve-700: oklch(36.4% 0.029 323.89);
    --color-mauve-800: oklch(26.3% 0.024 320.12);
    --color-mauve-900: oklch(21.2% 0.019 322.12);
    --color-mauve-950: oklch(14.5% 0.008 326);
    --color-olive-50: oklch(98.8% 0.003 106.5);
    --color-olive-100: oklch(96.6% 0.005 106.5);
    --color-olive-200: oklch(93% 0.007 106.5);
    --color-olive-300: oklch(88% 0.011 106.6);
    --color-olive-400: oklch(73.7% 0.021 106.9);
    --color-olive-500: oklch(58% 0.031 107.3);
    --color-olive-600: oklch(46.6% 0.025 107.3);
    --color-olive-700: oklch(39.4% 0.023 107.4);
    --color-olive-800: oklch(28.6% 0.016 107.4);
    --color-olive-900: oklch(22.8% 0.013 107.4);
    --color-olive-950: oklch(15.3% 0.006 107.1);
    --color-mist-50: oklch(98.7% 0.002 197.1);
    --color-mist-100: oklch(96.3% 0.002 197.1);
    --color-mist-200: oklch(92.5% 0.005 214.3);
    --color-mist-300: oklch(87.2% 0.007 219.6);
    --color-mist-400: oklch(72.3% 0.014 214.4);
    --color-mist-500: oklch(56% 0.021 213.5);
    --color-mist-600: oklch(45% 0.017 213.2);
    --color-mist-700: oklch(37.8% 0.015 216);
    --color-mist-800: oklch(27.5% 0.011 216.9);
    --color-mist-900: oklch(21.8% 0.008 223.9);
    --color-mist-950: oklch(14.8% 0.004 228.8);
    --color-taupe-50: oklch(98.6% 0.002 67.8);
    --color-taupe-100: oklch(96% 0.002 17.2);
    --color-taupe-200: oklch(92.2% 0.005 34.3);
    --color-taupe-300: oklch(86.8% 0.007 39.5);
    --color-taupe-400: oklch(71.4% 0.014 41.2);
    --color-taupe-500: oklch(54.7% 0.021 43.1);
    --color-taupe-600: oklch(43.8% 0.017 39.3);
    --color-taupe-700: oklch(36.7% 0.016 35.7);
    --color-taupe-800: oklch(26.8% 0.011 36.5);
    --color-taupe-900: oklch(21.4% 0.009 43.1);
    --color-taupe-950: oklch(14.7% 0.004 49.3);
    --color-black: #000;
    --color-white: #fff;
}

/* Manifest Utilities */

@layer base, components, utilities;

@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, 74rem);
        max-width: 100%;
        margin-inline-start: auto;
        margin-inline-end: auto
    }

    /* Ghost */
    :where(.ghost) {
        color: var(--color-content-neutral, oklch(43.9% 0 0));
        background-color: transparent;

        &:hover {
            background-color: color-mix(in oklch, var(--color-field-surface, oklch(37.1% 0 0)) 50%, transparent)
        }
    }

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

    /* Outlined */
    :where(.outlined) {
        border-width: 1px;
        border-style: solid;
        border-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 90%, var(--color-field-inverse, oklch(43.9% 0 0)))
    }

    /* Dark theme override */
    .dark :where(.outlined) {
        border-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 80%, var(--color-field-inverse, oklch(43.9% 0 0)))
    }

    /* Transparent */
    :where(.transparent) {
        color: var(--color-content-neutral, oklch(43.9% 0 0));
        background-color: transparent !important;

        &:hover {
            color: var(--color-content-stark, oklch(43.9% 0 0))
        }
    }

    /* 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
        }
    }

    /* Disabled */
    :where(.disabled) {
        opacity: .5;
        cursor: default;
        pointer-events: none
    }

    /* 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, 5vw);
            padding-inline-end: var(--spacing-viewport-padding, 5vw);
        }

        /* Width and horizontal centering for content wrappers */
        &>header nav:not([popover]),
        &>footer nav:not([popover]),
        &>main>section:not(.banner, .overlay-dark, .overlay-light) {
            width: var(--spacing-content-width, 74rem);
            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
        }
    }

    /* No spinners */
    .no-spinner {
        appearance: textfield !important;

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
            -webkit-appearance: none;
            appearance: none;
            display: none;
            margin: 0
        }
    }

    /* 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: oklch(14.5% 0 0) !important;

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

    /* Prose styles for long-form content */
    :where(.prose, .prose details) {
        width: 42rem;
        max-width: 100%;

        /* Asides inside a prose element are used as callouts */
        & aside:not([popover]) {
            margin-top: calc(1rem * 1.4);
            padding: calc(var(--spacing, 0.25rem) * 4);
            border-radius: calc(var(--radius, 0.5rem) * 2);
            color: var(--color-content-stark, oklch(43.9% 0 0));
            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 20%, transparent);
            border: 1px solid color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 15%, transparent);

            /* Auto format asides with icons */
            &:has([x-icon]):not([x-code-group] aside, aside.frame) {
                display: flex;
                flex-direction: row;
                gap: 1rem;

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

        & [x-code-group] aside.frame {
            margin-top: 0;
            padding: calc(var(--spacing, 0.25rem) * 4);
            font-family: var(--font-sans);
            font-size: initial;
            background-color: color-mix(in oklch, var(--color-surface-1, oklch(97% 0 0)) 65%, transparent);
            border: 0 none;
            border-radius: 0
        }

        &>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
            }
        }

        &>details,
        &>hr+details {
            margin-top: 0
        }

        &>details:first-child,
        &> :not(details, hr)+details {
            margin-top: calc(3rem)
        }

        &>details:last-child {
            margin-bottom: calc(3rem)
        }

        /* Own rule — :not() is not forgiving either, so an unsupported :has()
           inside it would take :last-child above down with it. */
        &>details:not(:last-child):not(:has(+ details, + hr)) {
            margin-bottom: calc(3rem)
        }

        &>details+ :not(details, hr) {
            margin-top: 0
        }

        &>figcaption {
            margin-top: 1rem
        }

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

            & img {
                margin: 0
            }
        }

        &>h1 {
            font-size: 2.25rem
        }

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

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

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

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

        &>h4+p {
            margin-top: 0.25rem
        }

        &>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);
        }

        &>details+hr:has(+ details) {
            margin-top: 1rem;
            margin-bottom: 1rem
        }

        &>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-subtle, oklch(55.6% 0 0))
    }

    /* Brand colors */
    :where(.brand) {
        --color-field-surface: var(--color-brand-surface, oklch(85.2% 0.199 91.936));
        --color-field-surface-hover: var(--color-brand-surface-hover, oklch(90.5% 0.182 98.111));
        --color-field-inverse: var(--color-brand-inverse, oklch(98.5% 0 0));
        --color-content-stark: var(--color-brand-content, oklch(68.1% 0.162 75.834));
        --color-content-neutral: color-mix(in oklch, var(--color-brand-content, oklch(68.1% 0.162 75.834)) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-brand-content, oklch(68.1% 0.162 75.834)) 70%, transparent)
    }

    /* Accent colors */
    :where(.accent) {
        --color-field-surface: var(--color-accent-surface, oklch(43.9% 0 0));
        --color-field-surface-hover: var(--color-accent-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 90%, oklch(98.5% 0 0)));
        --color-field-inverse: var(--color-accent-inverse, oklch(98.5% 0 0));
        --color-content-stark: var(--color-accent-content, oklch(43.9% 0 0));
        --color-content-neutral: color-mix(in oklch, var(--color-accent-content, oklch(43.9% 0 0)) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-accent-content, oklch(43.9% 0 0)) 70%, transparent)
    }

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

    /* Positive colors */
    :where(.positive) {
        --color-field-surface: var(--color-positive-surface, palegreen);
        --color-field-surface-hover: var(--color-positive-surface-hover, lightgreen);
        --color-field-inverse: var(--color-positive-inverse, darkgreen);
        --color-content-stark: var(--color-positive-content, limegreen);
        --color-content-neutral: color-mix(in oklch, var(--color-positive-content, limegreen) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-positive-content, limegreen) 70%, transparent)
    }

    /* Text colors */
    :where(.stark) {
        color: var(--color-content-stark, oklch(43.9% 0 0))
    }

    :where(.neutral) {
        color: var(--color-content-neutral, oklch(43.9% 0 0))
    }

    :where(.subtle) {
        color: var(--color-content-subtle, oklch(55.6% 0 0))
    }

    /* Visibility — viewport */
    @media (min-width: 640px) {
        .mobile-only { display: none !important }
    }

    @media (max-width: 639.98px) {
        .desktop-only { display: none !important }
    }

    /* Visibility — input device (independent of viewport) */
    @media (pointer: fine) {
        .touch-only { display: none !important }
    }

    @media not all and (pointer: fine) and (hover: hover) {
        .cursor-only { display: none !important }
    }

    @media not all and (any-pointer: fine) {
        .pointer-only { display: none !important }
    }

    /* Visibility — operating system (html[data-os] set by the utilities plugin) */
    html:not([data-os="macos"]) .mac-only { display: none !important }
    html:not([data-os="windows"]) .windows-only { display: none !important }
    html:not([data-os="linux"]) .linux-only { display: none !important }
    html:not([data-os="ios"]) .ios-only { display: none !important }
    html:not([data-os="android"]) .android-only { display: none !important }
    html:not([data-os="macos"]):not([data-os="ios"]) .apple-only { display: none !important }

    /* Visibility — operating system omission */
    html[data-os="macos"] .no-mac { display: none !important }
    html[data-os="windows"] .no-windows { display: none !important }
    html[data-os="linux"] .no-linux { display: none !important }
    html[data-os="ios"] .no-ios { display: none !important }
    html[data-os="android"] .no-android { display: none !important }
    html[data-os="macos"] .no-apple, html[data-os="ios"] .no-apple { display: none !important }

    /* Visibility — connectivity & container (html[data-*] set by the $device signal) */
    html:not([data-online="false"]) .offline-only { display: none !important }
    html[data-online="false"] .online-only { display: none !important }
    html:not([data-standalone]) .standalone-only { display: none !important }
    html:not([data-native]) .native-only { display: none !important }
    html[data-native] .web-only { display: none !important }

    /* Safe-area padding (var --safe-* is 0 unless viewport-fit=cover on a notched screen) */
    :where(.pt-safe) { padding-top: var(--safe-top) }
    :where(.pr-safe) { padding-right: var(--safe-right) }
    :where(.pb-safe) { padding-bottom: var(--safe-bottom) }
    :where(.pl-safe) { padding-left: var(--safe-left) }
    :where(.px-safe) { padding-left: var(--safe-left); padding-right: var(--safe-right) }
    :where(.py-safe) { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom) }
    :where(.p-safe) { padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left) }

    /* Dynamic viewport height (avoids the mobile 100vh browser-chrome jump) */
    :where(.min-h-dvh) { min-height: 100dvh }
    :where(.h-dvh) { height: 100dvh }

    /* Native — suppress web tells (opt-in) */
    :where(.no-callout) { -webkit-touch-callout: none }
    :where(.no-select) { -webkit-user-select: none; user-select: none }
    :where(.no-tap-zoom) { touch-action: manipulation }
    :where(.no-overscroll) { overscroll-behavior: none }
    :where(.no-overscroll-y) { overscroll-behavior-y: none }
}