@layer properties {
    @supports (((-webkit-hyphens: none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        *,:before,:after,::backdrop {
            --tw-blur:initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-animation-delay: 0s;
            --tw-animation-direction: normal;
            --tw-animation-duration: initial;
            --tw-animation-fill-mode: none;
            --tw-animation-iteration-count: 1;
            --tw-enter-blur: 0;
            --tw-enter-opacity: 1;
            --tw-enter-rotate: 0;
            --tw-enter-scale: 1;
            --tw-enter-translate-x: 0;
            --tw-enter-translate-y: 0;
            --tw-exit-blur: 0;
            --tw-exit-opacity: 1;
            --tw-exit-rotate: 0;
            --tw-exit-scale: 1;
            --tw-exit-translate-x: 0;
            --tw-exit-translate-y: 0;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-font-weight: initial;
            --tw-content: "";
            --tw-duration: initial;
            --tw-leading: initial;
            --tw-border-style: solid;
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-ease: initial;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
            --tw-ordinal: initial;
            --tw-slashed-zero: initial;
            --tw-numeric-figure: initial;
            --tw-numeric-spacing: initial;
            --tw-numeric-fraction: initial;
            --tw-outline-style: solid;
            --tw-border-spacing-x: 0;
            --tw-border-spacing-y: 0;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-gradient-position: initial;
            --tw-gradient-from: #0000;
            --tw-gradient-via: #0000;
            --tw-gradient-to: #0000;
            --tw-gradient-stops: initial;
            --tw-gradient-via-stops: initial;
            --tw-gradient-from-position: 0%;
            --tw-gradient-via-position: 50%;
            --tw-gradient-to-position: 100%;
            --tw-space-y-reverse: 0;
            --tw-tracking: initial;
            --tw-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial;
            --tw-space-x-reverse: 0
        }
    }
}

@layer theme {
    :root,:host {
        --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-black: #000;
        --color-white: #fff;
        --spacing: .25rem;
        --container-xs: 20rem;
        --container-sm: 24rem;
        --container-md: 28rem;
        --container-lg: 32rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1 / .75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25 / .875);
        --text-base: 1rem;
        --text-base--line-height: calc(1.5 / 1);
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75 / 1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75 / 1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2 / 1.5);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: calc(2.25 / 1.875);
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5 / 2.25);
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --tracking-tight: -.025em;
        --leading-relaxed: 1.625;
        --radius-xl: calc(var(--radius) * 1.5);
        --radius-2xl: calc(var(--radius) * 2);
        --radius-3xl: calc(var(--radius) * 3);
        --ease-out: cubic-bezier(0, 0, .2, 1);
        --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
        --blur-md: 12px;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
        --shadow-overlay: var(--overlay-shadow);
        --border-width-field: var(--field-border-width,var(--border-width));
        --ease-smooth: ease;
        --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
        --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
        --ease-out-fluid: cubic-bezier(.32, .72, 0, 1);
        --ease-linear: linear
    }

    @layer theme {
        @layer base {
            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --lightningcss-light: initial;
                --lightningcss-dark: ;
                color-scheme: light;
                --white: #fff;
                --black: #000;
                --snow: #fcfcfc;
                --eclipse: #18181b;
                --spacing: .25rem;
                --border-width: 1px;
                --field-border-width: 0px;
                --disabled-opacity: .5;
                --ring-offset-width: 2px;
                --cursor-interactive: pointer;
                --cursor-disabled: not-allowed;
                --radius: .5rem;
                --field-radius: calc(var(--radius) * 1.5);
                --background: #f5f5f5;
                --foreground: var(--eclipse);
                --surface: var(--white);
                --surface-foreground: var(--foreground);
                --surface-secondary: #efeff0;
                --surface-secondary-foreground: var(--foreground);
                --surface-tertiary: #eaeaeb;
                --surface-tertiary-foreground: var(--foreground);
                --overlay: var(--white);
                --overlay-foreground: var(--foreground);
                --muted: #71717a;
                --scrollbar: var(--scrollbar-thumb);
                --scrollbar-thumb: var(--foreground)
            }

            @supports (color: lab(0% 0 0)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --white:lab(100% 0 0);
                    --black: lab(0% 0 0);
                    --snow: lab(98.9676% -.0000596046 0);
                    --eclipse: lab(8.34178% .607349 -2.12998);
                    --background: lab(96.5432% -.0000596046 0);
                    --surface-secondary: lab(94.4672% .129193 -.473201);
                    --surface-tertiary: lab(92.7156% .129253 -.473201);
                    --muted: lab(47.8737% 1.41454 -4.98645)
                }
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --scrollbar-thumb:color-mix(in oklch, var(--foreground) 15%, transparent)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --scrollbar-track: transparent;
                --scrollbar-gutter: auto;
                --scrollbar-width: thin;
                --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
                --default: #ebebec;
                --default-foreground: var(--eclipse);
                --accent: #0485f7;
                --accent-foreground: var(--snow);
                --field-background: var(--white);
                --field-foreground: #18181b;
                --field-placeholder: var(--muted);
                --field-border: transparent;
                --success: #17c964;
                --success-foreground: var(--eclipse);
                --warning: #f5a524;
                --warning-foreground: var(--eclipse);
                --danger: #ff383c;
                --danger-foreground: var(--snow);
                --segment: var(--white);
                --segment-foreground: var(--eclipse);
                --border: #dedee0;
                --separator: #e4e4e7;
                --focus: var(--accent);
                --link: var(--foreground);
                --backdrop: #00000080;
                --surface-hover: var(--surface)
            }

            @supports (color: lab(0% 0 0)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --default:lab(93.0314% .0993311 -.364041);
                    --accent: lab(54.5335% 3.31545 -66.5298);
                    --field-foreground: lab(8.34178% .607349 -2.12998);
                    --success: lab(71.4376% -59.4106 38.0321);
                    --warning: lab(74.4448% 23.7172 71.6451);
                    --danger: lab(57.4234% 73.5589 48.0136);
                    --border: lab(88.3653% .399321 -1.45448);
                    --separator: lab(90.6853% .399202 -1.45452)
                }
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --surface-hover:color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --background-secondary: var(--background)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --background-secondary:color-mix(in oklab, var(--background) 96%, var(--foreground) 4%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --background-tertiary: var(--background)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --background-tertiary:color-mix(in oklab, var(--background) 92%, var(--foreground) 8%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --background-inverse: var(--foreground);
                --default-hover: var(--default)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --default-hover:color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --accent-hover: var(--accent)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --accent-hover:color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --success-hover: var(--success)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --success-hover:color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --warning-hover: var(--warning)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --warning-hover:color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --danger-hover: var(--danger)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --danger-hover:color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --field-hover: var(--field-background,var(--default))
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --field-hover:color-mix(in oklab, var(--field-background,var(--default)) 90%, var(--field-foreground,var(--foreground)) 2%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --field-focus: var(--field-background,var(--default));
                --field-border-hover: var(--field-border,var(--border))
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --field-border-hover:color-mix(in oklab, var(--field-border,var(--border)) 88%, var(--field-foreground,var(--foreground)) 10%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --field-border-focus: var(--field-border,var(--border))
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --field-border-focus:color-mix(in oklab, var(--field-border,var(--border)) 74%, var(--field-foreground,var(--foreground)) 22%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --default-soft: var(--default)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --default-soft:color-mix(in oklab, var(--default) 50%, transparent)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --default-soft-foreground: var(--default-foreground);
                --default-soft-hover: var(--default)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --default-soft-hover:color-mix(in oklab, var(--default) 60%, transparent)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --accent-soft: var(--accent)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --accent-soft:color-mix(in oklab, var(--accent) 15%, transparent)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --accent-soft-foreground: var(--accent)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --accent-soft-foreground:color-mix(in oklab, var(--accent) 70%, var(--foreground) 30%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --accent-soft-hover: var(--accent)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --accent-soft-hover:color-mix(in oklab, var(--accent) 20%, transparent)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --danger-soft: var(--danger)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --danger-soft:color-mix(in oklab, var(--danger) 15%, transparent)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --danger-soft-foreground: var(--danger)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --danger-soft-foreground:color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --danger-soft-hover: var(--danger)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --danger-soft-hover:color-mix(in oklab, var(--danger) 20%, transparent)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --warning-soft: var(--warning)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --warning-soft:color-mix(in oklab, var(--warning) 15%, transparent)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --warning-soft-foreground: var(--warning)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --warning-soft-foreground:color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --warning-soft-hover: var(--warning)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --warning-soft-hover:color-mix(in oklab, var(--warning) 20%, transparent)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --success-soft: var(--success)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --success-soft:color-mix(in oklab, var(--success) 15%, transparent)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --success-soft-foreground: var(--success)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --success-soft-foreground:color-mix(in oklab, var(--success) 80%, var(--foreground) 60%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --success-soft-hover: var(--success)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --success-soft-hover:color-mix(in oklab, var(--success) 20%, transparent)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --separator-secondary: var(--surface)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --separator-secondary:color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --separator-tertiary: var(--surface)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --separator-tertiary:color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --border-secondary: var(--surface)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --border-secondary:color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --border-tertiary: var(--surface)
            }

            @supports (color: color-mix(in lab, red, red)) {
                :root,.light,.default,[data-theme=light],[data-theme=default] {
                    --border-tertiary:color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%)
                }
            }

            :root,.light,.default,[data-theme=light],[data-theme=default] {
                --surface-shadow: 0 2px 4px 0 #0000000a, 0 1px 2px 0 #0000000f, 0 0 1px 0 #0000000f;
                --overlay-shadow: 0 2px 8px 0 #0000000f, 0 -6px 12px 0 #00000008, 0 14px 28px 0 #00000014;
                --field-shadow: 0 2px 4px 0 #0000000a, 0 1px 2px 0 #0000000f, 0 0 1px 0 #0000000f;
                --skeleton-animation: shimmer;
                --tooltip-delay: 1.5s;
                --tooltip-close-delay: .5s
            }

            .dark,[data-theme=dark] {
                --lightningcss-light: ;
                --lightningcss-dark: initial;
                color-scheme: dark;
                --background: #060607;
                --foreground: var(--snow);
                --surface: #18181b;
                --surface-foreground: var(--foreground);
                --surface-secondary: #232325;
                --surface-tertiary: #262728;
                --overlay: #18181b;
                --overlay-foreground: var(--foreground);
                --muted: #9f9fa9;
                --scrollbar: var(--scrollbar-thumb);
                --scrollbar-thumb: var(--foreground)
            }

            @supports (color: lab(0% 0 0)) {
                .dark,[data-theme=dark] {
                    --background:lab(1.54547% .178337 -.64671);
                    --surface: lab(8.34178% .607349 -2.12998);
                    --surface-secondary: lab(13.7794% .374198 -1.34113);
                    --surface-tertiary: lab(15.5629% -.29102 -.845826);
                    --overlay: lab(8.34178% .607349 -2.12998);
                    --muted: lab(65.6464% 1.53494 -5.42429)
                }
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --scrollbar-thumb:color-mix(in oklch, var(--foreground) 15%, transparent)
                }
            }

            .dark,[data-theme=dark] {
                --scrollbar-track: transparent;
                --scrollbar-gutter: auto;
                --scrollbar-width: thin;
                --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
                --default: #27272a;
                --default-foreground: var(--snow);
                --field-background: #18181b;
                --field-foreground: var(--foreground);
                --warning: #f7b750;
                --warning-foreground: var(--eclipse);
                --danger: #db3b3e;
                --danger-foreground: var(--snow);
                --segment: #46464c;
                --segment-foreground: var(--foreground);
                --border: #28282c;
                --separator: #212124;
                --focus: var(--accent);
                --link: var(--foreground);
                --backdrop: #0009;
                --surface-shadow: 0 0 0 0 transparent inset;
                --overlay-shadow: 0 0 1px 0 #ffffff4d inset;
                --field-shadow: 0 0 0 0 transparent inset;
                --surface-hover: var(--surface)
            }

            @supports (color: lab(0% 0 0)) {
                .dark,[data-theme=dark] {
                    --default:lab(15.7305% .613749 -2.16959);
                    --field-background: lab(8.34178% .607349 -2.12998);
                    --warning: lab(79.1095% 16.747 59.9157);
                    --danger: lab(50.9109% 62.2712 37.59);
                    --segment: lab(29.8929% 1.02499 -3.61326);
                    --border: lab(16.4266% .613079 -2.16998);
                    --separator: lab(12.9463% .616685 -2.16783)
                }
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --surface-hover:color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%)
                }
            }

            .dark,[data-theme=dark] {
                --background-secondary: var(--background)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --background-secondary:color-mix(in oklab, var(--background) 96%, var(--foreground) 4%)
                }
            }

            .dark,[data-theme=dark] {
                --background-tertiary: var(--background)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --background-tertiary:color-mix(in oklab, var(--background) 92%, var(--foreground) 8%)
                }
            }

            .dark,[data-theme=dark] {
                --background-inverse: var(--foreground);
                --default-hover: var(--default)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --default-hover:color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%)
                }
            }

            .dark,[data-theme=dark] {
                --accent-hover: var(--accent)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --accent-hover:color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%)
                }
            }

            .dark,[data-theme=dark] {
                --success-hover: var(--success)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --success-hover:color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%)
                }
            }

            .dark,[data-theme=dark] {
                --warning-hover: var(--warning)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --warning-hover:color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%)
                }
            }

            .dark,[data-theme=dark] {
                --danger-hover: var(--danger)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --danger-hover:color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%)
                }
            }

            .dark,[data-theme=dark] {
                --field-hover: var(--field-background,var(--default))
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --field-hover:color-mix(in oklab, var(--field-background,var(--default)) 90%, var(--field-foreground,var(--foreground)) 2%)
                }
            }

            .dark,[data-theme=dark] {
                --field-focus: var(--field-background,var(--default));
                --field-border-hover: var(--field-border,var(--border))
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --field-border-hover:color-mix(in oklab, var(--field-border,var(--border)) 88%, var(--field-foreground,var(--foreground)) 10%)
                }
            }

            .dark,[data-theme=dark] {
                --field-border-focus: var(--field-border,var(--border))
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --field-border-focus:color-mix(in oklab, var(--field-border,var(--border)) 74%, var(--field-foreground,var(--foreground)) 22%)
                }
            }

            .dark,[data-theme=dark] {
                --default-soft: var(--default)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --default-soft:color-mix(in oklab, var(--default) 50%, transparent)
                }
            }

            .dark,[data-theme=dark] {
                --default-soft-foreground: var(--default-foreground);
                --default-soft-hover: var(--default)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --default-soft-hover:color-mix(in oklab, var(--default) 60%, transparent)
                }
            }

            .dark,[data-theme=dark] {
                --accent-soft: var(--accent)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --accent-soft:color-mix(in oklab, var(--accent) 12%, transparent)
                }
            }

            .dark,[data-theme=dark] {
                --accent-soft-foreground: var(--accent)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --accent-soft-foreground:color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%)
                }
            }

            .dark,[data-theme=dark] {
                --accent-soft-hover: var(--accent)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --accent-soft-hover:color-mix(in oklab, var(--accent) 16%, transparent)
                }
            }

            .dark,[data-theme=dark] {
                --danger-soft: var(--danger)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --danger-soft:color-mix(in oklab, var(--danger) 15%, transparent)
                }
            }

            .dark,[data-theme=dark] {
                --danger-soft-foreground: var(--danger)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --danger-soft-foreground:color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%)
                }
            }

            .dark,[data-theme=dark] {
                --danger-soft-hover: var(--danger)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --danger-soft-hover:color-mix(in oklab, var(--danger) 20%, transparent)
                }
            }

            .dark,[data-theme=dark] {
                --warning-soft: var(--warning)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --warning-soft:color-mix(in oklab, var(--warning) 12%, transparent)
                }
            }

            .dark,[data-theme=dark] {
                --warning-soft-foreground: var(--warning)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --warning-soft-foreground:color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%)
                }
            }

            .dark,[data-theme=dark] {
                --warning-soft-hover: var(--warning)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --warning-soft-hover:color-mix(in oklab, var(--warning) 16%, transparent)
                }
            }

            .dark,[data-theme=dark] {
                --success-soft: var(--success)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --success-soft:color-mix(in oklab, var(--success) 12%, transparent)
                }
            }

            .dark,[data-theme=dark] {
                --success-soft-foreground: var(--success)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --success-soft-foreground:color-mix(in oklab, var(--success) 80%, var(--foreground) 30%)
                }
            }

            .dark,[data-theme=dark] {
                --success-soft-hover: var(--success)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --success-soft-hover:color-mix(in oklab, var(--success) 16%, transparent)
                }
            }

            .dark,[data-theme=dark] {
                --separator-secondary: var(--surface)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --separator-secondary:color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%)
                }
            }

            .dark,[data-theme=dark] {
                --separator-tertiary: var(--surface)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --separator-tertiary:color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%)
                }
            }

            .dark,[data-theme=dark] {
                --border-secondary: var(--surface)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --border-secondary:color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%)
                }
            }

            .dark,[data-theme=dark] {
                --border-tertiary: var(--surface)
            }

            @supports (color: color-mix(in lab, red, red)) {
                .dark,[data-theme=dark] {
                    --border-tertiary:color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%)
                }
            }

            [data-vibrant-palette=true]: not(.dark):not([data-theme=dark]) {
                --accent-soft-foreground:var(--accent)
            }

            @supports (color: color-mix(in lab, red, red)) {
                [data-vibrant-palette=true]:not(.dark):not([data-theme=dark]) {
                    --accent-soft-foreground:color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%)
                }
            }

            [data-vibrant-palette=true]: not(.dark):not([data-theme=dark]) {
                --danger-soft-foreground:var(--danger)
            }

            @supports (color: color-mix(in lab, red, red)) {
                [data-vibrant-palette=true]:not(.dark):not([data-theme=dark]) {
                    --danger-soft-foreground:color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%)
                }
            }

            [data-vibrant-palette=true]: not(.dark):not([data-theme=dark]) {
                --warning-soft-foreground:var(--warning)
            }

            @supports (color: color-mix(in lab, red, red)) {
                [data-vibrant-palette=true]:not(.dark):not([data-theme=dark]) {
                    --warning-soft-foreground:color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%)
                }
            }

            [data-vibrant-palette=true]: not(.dark):not([data-theme=dark]) {
                --success-soft-foreground:var(--success)
            }

            @supports (color: color-mix(in lab, red, red)) {
                [data-vibrant-palette=true]:not(.dark):not([data-theme=dark]) {
                    --success-soft-foreground:color-mix(in oklab, var(--success) 92%, var(--foreground) 8%)
                }
            }

            [data-vibrant-palette=true].dark,[data-vibrant-palette=true][data-theme=dark] {
                --accent-soft-foreground: var(--accent)
            }

            @supports (color: color-mix(in lab, red, red)) {
                [data-vibrant-palette=true].dark,[data-vibrant-palette=true][data-theme=dark] {
                    --accent-soft-foreground:color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%)
                }
            }

            [data-vibrant-palette=true].dark,[data-vibrant-palette=true][data-theme=dark] {
                --danger-soft-foreground: var(--danger)
            }

            @supports (color: color-mix(in lab, red, red)) {
                [data-vibrant-palette=true].dark,[data-vibrant-palette=true][data-theme=dark] {
                    --danger-soft-foreground:color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%)
                }
            }

            [data-vibrant-palette=true].dark,[data-vibrant-palette=true][data-theme=dark] {
                --warning-soft-foreground: var(--warning)
            }

            @supports (color: color-mix(in lab, red, red)) {
                [data-vibrant-palette=true].dark,[data-vibrant-palette=true][data-theme=dark] {
                    --warning-soft-foreground:color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%)
                }
            }

            [data-vibrant-palette=true].dark,[data-vibrant-palette=true][data-theme=dark] {
                --success-soft-foreground: var(--success)
            }

            @supports (color: color-mix(in lab, red, red)) {
                [data-vibrant-palette=true].dark,[data-vibrant-palette=true][data-theme=dark] {
                    --success-soft-foreground:color-mix(in oklab, var(--success) 92%, var(--foreground) 8%)
                }
            }
        }
    }

    @layer components;}

@layer base {
    @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color:currentColor
        }

        @supports (color: color-mix(in lab, red, red)) {
            ::placeholder {
                color:color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

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

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,: host {
        -webkit-text-size-adjust:100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings,normal);
        font-variation-settings: var(--default-font-variation-settings,normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

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

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

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b,strong {
        font-weight: bolder
    }

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

    small {
        font-size: 80%
    }

    sub,sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

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

    :-moz-focusring:where(:not(iframe)) {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,ul,menu {
        list-style: none
    }

    img,svg,video,canvas,audio,iframe,embed,object {
        vertical-align: middle;
        display: block
    }

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

    button,input,select,optgroup,textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

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

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

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

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color:currentColor
        }

        @supports (color: color-mix(in lab, red, red)) {
            ::placeholder {
                color:color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

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

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block:0}

    ::-webkit-datetime-edit-year-field {
        padding-block:0}

    ::-webkit-datetime-edit-month-field {
        padding-block:0}

    ::-webkit-datetime-edit-day-field {
        padding-block:0}

    ::-webkit-datetime-edit-hour-field {
        padding-block:0}

    ::-webkit-datetime-edit-minute-field {
        padding-block:0}

    ::-webkit-datetime-edit-second-field {
        padding-block:0}

    ::-webkit-datetime-edit-millisecond-field {
        padding-block:0}

    ::-webkit-datetime-edit-meridiem-field {
        padding-block:0}

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

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

    button,input: where([type=button],[type=reset],[type=submit]) {
        appearance:button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]: where(:not([hidden=until-found])) {
        display:none!important
    }

    *,:after,:before,::backdrop {
        border-color: var(--border,currentColor)
    }

    ::file-selector-button {
        border-color: var(--border,currentColor)
    }

    :root {
        view-transition-name: none
    }

    ::view-transition {
        pointer-events: none
    }

    [data-scrollbar=thin] {
        --scrollbar-width: thin;
        --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
        --scrollbar-gutter: auto
    }

    [data-scrollbar=default] {
        --scrollbar-width: auto;
        --scrollbar-color: auto;
        --scrollbar-gutter: auto
    }

    [data-scrollbar=none] {
        --scrollbar-width: none;
        --scrollbar-color: auto;
        --scrollbar-gutter: auto
    }
}

@layer components {
    .close-button {
        isolation: isolate;
        height: calc(var(--spacing) * 6);
        width: calc(var(--spacing) * 6);
        transform-origin: 50%;
        border-radius: calc(var(--radius) * 1.5);
        padding: var(--spacing);
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        cursor: var(--cursor-interactive);
        transition: transform .25s var(--ease-out-quart), color .15s var(--ease-out), background-color .1s var(--ease-out), box-shadow .15s var(--ease-out);
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        display: inline-flex;
        position: relative
    }

    .close-button:is([data-reduce-motion=true],[data-reduce-motion=true] *),.close-button: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.close-button:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .close-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.close-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.close-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .close-button:focus-visible:not(:focus),.close-button[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .close-button:disabled,.close-button[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .close-button[data-pending=true] {
        pointer-events: none
    }

    .close-button svg {
        pointer-events: none;
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        margin-inline:calc(var(--spacing) * -.5);margin-block: calc(var(--spacing) * .5);
        flex-shrink: 0;
        align-self: center
    }

    .close-button--default {
        background-color: var(--default);
        color: var(--muted)
    }

    @media (hover: hover) {
        .close-button--default:hover,.close-button--default[data-hovered=true] {
            background-color:var(--default-hover)
        }
    }

    .close-button--default:active,.close-button--default[data-pressed=true] {
        transform: scale(.93)
    }

    .description {
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        text-wrap: wrap;
        overflow-wrap: break-word;
        color: var(--muted)
    }

    .error-message {
        height: auto;
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        overflow-wrap: break-word;
        color: var(--danger);
        transition: opacity .15s var(--ease-out), height .35s var(--ease-smooth)
    }

    .error-message:is([data-reduce-motion=true],[data-reduce-motion=true] *),.error-message: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.error-message:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .error-message:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.error-message:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.error-message:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .field-error {
        height: 0;
        padding-inline:var(--spacing);font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        overflow-wrap: break-word;
        color: var(--danger);
        opacity: 0
    }

    .field-error[data-visible] {
        opacity: 1;
        height: auto
    }

    .field-error {
        transition: opacity .15s var(--ease-out), height .35s var(--ease-smooth)
    }

    .field-error:is([data-reduce-motion=true],[data-reduce-motion=true] *),.field-error: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.field-error:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .field-error:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.field-error:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.field-error:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .checkbox>.field-error,.checkbox>[data-slot=field-error],.switch>.field-error,.switch>[data-slot=field-error],.radio>.field-error,.radio>[data-slot=field-error] {
        height: auto;
        min-height: 0;
        color: var(--muted);
        opacity: 1;
        margin: 0;
        padding: 0;
        transition: none
    }

    .label {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--foreground)
    }

    :is(.label--required,[data-required=true]: not([role=group]):not([role=radiogroup]):not([role=checkboxgroup])>.label,[data-required=true]:not([data-slot=radio]):not([data-slot=checkbox])>.label):after {
        color:var(--danger);
        --tw-content: "*";
        content: var(--tw-content);
        margin-inline-start:calc(var(--spacing) * .5)}

    .label--disabled,[data-disabled=true] .label {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .label--invalid,[data-invalid=true] .label,[aria-invalid=true] .label {
        color: var(--danger)
    }

    .accordion {
        contain: layout style;
        width: 100%
    }

    .accordion__body {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height))
    }

    .accordion__body-inner {
        padding-inline:calc(var(--spacing) * 4);padding-top: 0;
        padding-bottom: calc(var(--spacing) * 4);
        color: var(--muted)
    }

    .accordion__indicator {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        color: var(--muted);
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-duration: .25s;
        flex-shrink: 0;
        margin-inline-start:auto;transition-duration: .25s
    }

    .accordion__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *),.accordion__indicator: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.accordion__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .accordion__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.accordion__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.accordion__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .accordion__indicator[data-expanded=true] {
        rotate: -180deg
    }

    .accordion__item {
        --tw-border-style: none;
        border-style: none;
        position: relative
    }

    .accordion__item:after {
        content: "";
        border-radius: calc(var(--radius) * .25);
        background-color: var(--separator);
        inset-inline-start: calc(var(--spacing) * 0);
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: 0
    }

    .accordion__item:last-child:after {
        content: none
    }

    .accordion__item[data-hide-separator=true]: after {
        display:none
    }

    .accordion__trigger {
        cursor: var(--cursor-interactive);
        padding-inline:calc(var(--spacing) * 4);padding-block: calc(var(--spacing) * 4);
        text-align: start;
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        -webkit-tap-highlight-color: transparent;
        transition: opacity .15s var(--ease-out), box-shadow .15s var(--ease-out);
        flex: 1;
        justify-content: space-between;
        align-items: center;
        display: flex
    }

    .accordion__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.accordion__trigger: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.accordion__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .accordion__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.accordion__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.accordion__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    @media (hover: hover) {
        .accordion__trigger:hover:not([aria-expanded=true]),.accordion__trigger[data-hovered=true]:not([aria-expanded=true]) {
            background-color:var(--foreground)
        }

        @supports (color: color-mix(in lab, red, red)) {
            .accordion__trigger:hover:not([aria-expanded=true]),.accordion__trigger[data-hovered=true]:not([aria-expanded=true]) {
                background-color:color-mix(in oklab, var(--foreground) 3%, transparent 90%)
            }
        }
    }

    .accordion__trigger:focus-visible:not(:focus),.accordion__trigger[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

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

    .accordion__panel {
        opacity: 0;
        height: var(--disclosure-panel-height);
        transition: height .2s var(--ease-out-quad), opacity .2s var(--ease-out);
        overflow: clip
    }

    .accordion__panel:is([data-reduce-motion=true],[data-reduce-motion=true] *),.accordion__panel: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.accordion__panel:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .accordion__panel:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.accordion__panel:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.accordion__panel:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .accordion__panel[data-expanded=true] {
        will-change: height, opacity;
        opacity: 1
    }

    .accordion--surface {
        background-color: var(--surface);
        border-radius: min(32px, var(--radius-3xl))
    }

    @media (hover: hover) {
        .accordion--surface .accordion__trigger:hover:not([aria-expanded=true]),.accordion--surface .accordion__trigger[data-hovered=true]:not([aria-expanded=true]) {
            background-color:var(--default)
        }
    }

    .accordion--surface .accordion__item:after {
        background-color: var(--surface-foreground)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .accordion--surface .accordion__item:after {
            background-color:color-mix(in oklab, var(--surface-foreground) 6%, transparent)
        }
    }

    .accordion--surface .accordion__item:after {
        width: 94%;
        inset-inline-start: 3%
    }

    .accordion--surface .accordion__item:first-child [data-slot=accordion-trigger] {
        border-start-start-radius: min(32px, var(--radius-3xl));
        border-start-end-radius: min(32px, var(--radius-3xl))
    }

    .accordion--surface .accordion__item:last-child:not(:has([data-slot=accordion-trigger][aria-expanded=true])) [data-slot=accordion-trigger] {
        border-end-end-radius: min(32px, var(--radius-3xl));
        border-end-start-radius: min(32px, var(--radius-3xl))
    }

    .breadcrumbs {
        align-items: center;
        display: flex
    }

    .breadcrumbs .breadcrumbs__link {
        padding-inline:calc(var(--spacing) * .5);font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-leading: calc(var(--spacing) * 5);
        line-height: calc(var(--spacing) * 5);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--muted);
        opacity: 1;
        text-decoration-line: none;
        position: relative
    }

    .breadcrumbs .breadcrumbs__link:hover,.breadcrumbs .breadcrumbs__link[data-hovered=true] {
        text-decoration-line: underline
    }

    .breadcrumbs .breadcrumbs__link[data-current=true] {
        color: var(--link);
        opacity: 1
    }

    .breadcrumbs .breadcrumbs__item {
        justify-content: center;
        align-items: center;
        gap: calc(var(--spacing) * .5);
        padding-inline:calc(var(--spacing) * .5);flex-shrink: 0;
        display: flex
    }

    .breadcrumbs .breadcrumbs__separator {
        width: calc(var(--spacing) * 3);
        height: calc(var(--spacing) * 3);
        color: var(--muted)
    }

    .breadcrumbs .breadcrumbs__separator:where(:is(:lang(ae),: lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),[dir=rtl],[dir=rtl] *) {
        rotate:180deg
    }

    .disclosure-group {
        contain: layout style;
        width: 100%
    }

    .disclosure {
        position: relative
    }

    .accordion__heading {
        display: flex
    }

    .disclosure__trigger {
        cursor: var(--cursor-interactive);
        -webkit-tap-highlight-color: transparent;
        display: inline-block
    }

    .disclosure__trigger:focus-visible:not(:focus),.disclosure__trigger[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

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

    .disclosure__indicator {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        color: inherit;
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-duration: .25s;
        flex-shrink: 0;
        margin-inline-start:auto;transition-duration: .25s
    }

    .disclosure__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *),.disclosure__indicator: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.disclosure__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .disclosure__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.disclosure__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.disclosure__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .disclosure__indicator[data-expanded=true] {
        rotate: -180deg
    }

    .disclosure__content {
        opacity: 0;
        height: var(--disclosure-panel-height);
        transition: height .2s var(--ease-out-quad), opacity .2s var(--ease-out);
        overflow: clip
    }

    .disclosure__content:is([data-reduce-motion=true],[data-reduce-motion=true] *),.disclosure__content: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.disclosure__content:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .disclosure__content:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.disclosure__content:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.disclosure__content:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .disclosure__content[data-expanded=true] {
        will-change: height, opacity;
        opacity: 1
    }

    .disclosure__body {
        padding: calc(var(--spacing) * 2)
    }

    .link {
        border-radius: calc(var(--radius) * 1.5);
        --tw-font-weight: var(--font-weight-medium);
        width: fit-content;
        height: fit-content;
        font-weight: var(--font-weight-medium);
        color: var(--link);
        text-decoration-line: none;
        -webkit-text-decoration-color: var(--separator-tertiary);
        -webkit-text-decoration-color: var(--separator-tertiary);
        -webkit-text-decoration-color: var(--separator-tertiary);
        text-decoration-color: var(--separator-tertiary);
        text-underline-offset: 4px;
        -webkit-tap-highlight-color: transparent;
        transition: color .1s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out), opacity .1s var(--ease-out);
        align-items: center;
        text-decoration-thickness: 1.5px;
        display: inline-flex;
        position: relative
    }

    .link:is([data-reduce-motion=true],[data-reduce-motion=true] *),.link: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.link:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .link:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.link:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.link:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .link {
        cursor: var(--cursor-interactive)
    }

    @media (hover: hover) {
        .link:hover,.link[data-hovered=true] {
            text-decoration-line:underline;
            -webkit-text-decoration-color: var(--muted);
            -webkit-text-decoration-color: var(--muted);
            -webkit-text-decoration-color: var(--muted);
            text-decoration-color: var(--muted)
        }

        @supports (color: color-mix(in lab, red, red)) {
            .link:hover,.link[data-hovered=true] {
                -webkit-text-decoration-color:color-mix(in oklab, var(--muted) 50%, transparent);
                -webkit-text-decoration-color: color-mix(in oklab, var(--muted) 50%, transparent);
                -webkit-text-decoration-color: color-mix(in oklab, var(--muted) 50%, transparent);
                text-decoration-color: color-mix(in oklab, var(--muted) 50%, transparent)
            }
        }

        :is(.link:hover,.link[data-hovered=true]) .link__icon {
            opacity: 1
        }
    }

    .link:active,.link[data-pressed=true] {
        text-decoration-line: underline;
        -webkit-text-decoration-color: var(--muted);
        -webkit-text-decoration-color: var(--muted);
        -webkit-text-decoration-color: var(--muted);
        text-decoration-color: var(--muted)
    }

    :is(.link:active,.link[data-pressed=true]) .link__icon {
        opacity: 1
    }

    .link:focus-visible:not(:focus),.link[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    :is(.link:focus-visible:not(:focus),.link[data-focus-visible=true]) .link__icon {
        opacity: 1
    }

    .link[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .link .link__icon {
        pointer-events: none;
        color: currentColor;
        opacity: .6;
        width: .75em;
        height: .75em;
        transition: opacity .15s var(--ease-out);
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        display: inline-flex
    }

    .link .link__icon:is([data-reduce-motion=true],[data-reduce-motion=true] *),.link .link__icon: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.link .link__icon:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .link .link__icon:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.link .link__icon:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.link .link__icon:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .link .link__icon svg {
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
    }

    .link .link__icon[data-default-icon=true] {
        padding-bottom: calc(var(--spacing) * 1.5);
        margin-inline-start:var(--spacing)}

    .link.button {
        gap: 0;
        text-decoration-line: none
    }

    .pagination {
        justify-content: space-between;
        align-items: center;
        gap: calc(var(--spacing) * 4);
        flex-direction: column;
        width: 100%;
        display: flex
    }

    @media (min-width: 40rem) {
        .pagination {
            flex-direction:row
        }
    }

    .pagination__summary {
        align-items: center;
        gap: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--muted);
        align-self: flex-start;
        display: flex
    }

    @media (min-width: 40rem) {
        .pagination__summary {
            align-self:center
        }
    }

    .pagination__content {
        align-items: center;
        gap: var(--spacing);
        align-self: flex-start;
        display: flex
    }

    @media (min-width: 40rem) {
        .pagination__content {
            align-self:center
        }
    }

    .pagination__item {
        display: inline-flex
    }

    .pagination__link {
        isolation: isolate;
        width: calc(var(--spacing) * 9);
        height: calc(var(--spacing) * 9);
        transform-origin: 50%;
        border-radius: calc(var(--radius) * 3);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        white-space: nowrap;
        --tw-outline-style: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        outline-style: none;
        justify-content: center;
        align-items: center;
        display: inline-flex;
        position: relative
    }

    @media (min-width: 48rem) {
        .pagination__link {
            width:calc(var(--spacing) * 8);
            height: calc(var(--spacing) * 8)
        }
    }

    .pagination__link {
        cursor: var(--cursor-interactive);
        transition: transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out);
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
    }

    .pagination__link:is([data-reduce-motion=true],[data-reduce-motion=true] *),.pagination__link: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.pagination__link:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .pagination__link:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.pagination__link:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.pagination__link:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .pagination__link {
        --pagination-link-bg: transparent;
        --pagination-link-bg-hover: var(--default-hover);
        --pagination-link-bg-pressed: var(--default-hover);
        --pagination-link-fg: var(--default-foreground);
        background-color: var(--pagination-link-bg);
        color: var(--pagination-link-fg)
    }

    .pagination__link:focus-visible,.pagination__link[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

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

    @media (hover: hover) {
        .pagination__link:hover,.pagination__link[data-hovered=true] {
            background-color:var(--pagination-link-bg-hover)
        }
    }

    .pagination__link:active,.pagination__link[data-pressed=true] {
        background-color: var(--pagination-link-bg-pressed);
        transform: scale(.97)
    }

    .pagination__link[data-active=true] {
        --pagination-link-bg: var(--default);
        --pagination-link-bg-hover: var(--default-hover);
        --pagination-link-bg-pressed: var(--default-hover)
    }

    .pagination__ellipsis {
        width: calc(var(--spacing) * 9);
        height: calc(var(--spacing) * 9);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--muted);
        -webkit-user-select: none;
        user-select: none;
        justify-content: center;
        align-items: center;
        display: inline-flex
    }

    @media (min-width: 48rem) {
        .pagination__ellipsis {
            width:calc(var(--spacing) * 8);
            height: calc(var(--spacing) * 8)
        }
    }

    .pagination__link--nav {
        gap: calc(var(--spacing) * 1.5);
        width: auto;
        padding-inline:calc(var(--spacing) * 2.5)}

    : is(.pagination__link--nav [data-slot=pagination-previous-icon],.pagination__link--nav [data-slot=pagination-next-icon]):where(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),[dir=rtl],[dir=rtl] *) {
        rotate:180deg
    }

    .pagination--sm .pagination__link {
        width: calc(var(--spacing) * 8);
        height: calc(var(--spacing) * 8);
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height))
    }

    @media (min-width: 48rem) {
        .pagination--sm .pagination__link {
            width:calc(var(--spacing) * 7);
            height: calc(var(--spacing) * 7)
        }
    }

    .pagination--sm .pagination__link:active,.pagination--sm .pagination__link[data-pressed=true] {
        transform: scale(.98)
    }

    .pagination--sm .pagination__link--nav {
        width: auto;
        padding-inline:calc(var(--spacing) * 2)}

    .pagination--sm .pagination__ellipsis {
        width: calc(var(--spacing) * 8);
        height: calc(var(--spacing) * 8);
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height))
    }

    @media (min-width: 48rem) {
        .pagination--sm .pagination__ellipsis {
            width:calc(var(--spacing) * 7);
            height: calc(var(--spacing) * 7)
        }
    }

    .pagination--sm .pagination__summary {
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height))
    }

    .pagination--lg .pagination__link {
        width: calc(var(--spacing) * 10);
        height: calc(var(--spacing) * 10);
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height))
    }

    @media (min-width: 48rem) {
        .pagination--lg .pagination__link {
            width:calc(var(--spacing) * 9);
            height: calc(var(--spacing) * 9)
        }
    }

    .pagination--lg .pagination__link:active,.pagination--lg .pagination__link[data-pressed=true] {
        transform: scale(.96)
    }

    .pagination--lg .pagination__link--nav {
        width: auto;
        padding-inline:calc(var(--spacing) * 3)}

    .pagination--lg .pagination__ellipsis {
        width: calc(var(--spacing) * 10);
        height: calc(var(--spacing) * 10);
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height))
    }

    @media (min-width: 48rem) {
        .pagination--lg .pagination__ellipsis {
            width:calc(var(--spacing) * 9);
            height: calc(var(--spacing) * 9)
        }
    }

    .pagination--lg .pagination__summary {
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height))
    }

    .tabs {
        gap: calc(var(--spacing) * 2);
        display: flex
    }

    .tabs[data-orientation=horizontal] {
        flex-direction: column
    }

    .tabs[data-orientation=vertical] {
        flex-direction: row
    }

    .tabs__list-container {
        background-color: var(--default);
        border-radius: calc(var(--radius) * 2.5);
        position: relative
    }

    .tabs__list-container>.tabs__list-container__scroller[data-orientation=vertical] {
        height: 100%
    }

    .tabs__list-container>.tabs__list-container__scroll-prev,.tabs__list-container>.tabs__list-container__scroll-next {
        z-index: 2;
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        cursor: var(--cursor-interactive);
        border-style: var(--tw-border-style);
        color: var(--foreground);
        --tw-outline-style: none;
        transition: opacity .15s var(--ease-smooth);
        background-color: #0000;
        border-width: 0;
        border-radius: 3.40282e38px;
        outline-style: none;
        justify-content: center;
        align-items: center;
        padding: 0;
        display: none;
        position: absolute
    }

    :is(.tabs__list-container>.tabs__list-container__scroll-prev,.tabs__list-container>.tabs__list-container__scroll-next):is([data-reduce-motion=true],[data-reduce-motion=true] *),: is(.tabs__list-container>.tabs__list-container__scroll-prev,.tabs__list-container>.tabs__list-container__scroll-next):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.tabs__list-container>.tabs__list-container__scroll-prev,.tabs__list-container>.tabs__list-container__scroll-next):is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        :is(.tabs__list-container>.tabs__list-container__scroll-prev,.tabs__list-container>.tabs__list-container__scroll-next):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.tabs__list-container>.tabs__list-container__scroll-prev,.tabs__list-container>.tabs__list-container__scroll-next):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.tabs__list-container>.tabs__list-container__scroll-prev,.tabs__list-container>.tabs__list-container__scroll-next):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    @media (hover: hover) {
        :is(.tabs__list-container>.tabs__list-container__scroll-prev,.tabs__list-container>.tabs__list-container__scroll-next):hover {
            opacity:.7
        }
    }

    :is(.tabs__list-container>.tabs__list-container__scroll-prev,.tabs__list-container>.tabs__list-container__scroll-next):focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .tabs__list-container:has([data-orientation=horizontal])>.tabs__list-container__scroll-prev {
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        inset-inline-start: calc(var(--spacing) * 1);
        top: 50%
    }

    .tabs__list-container:has([data-orientation=horizontal])>.tabs__list-container__scroll-next {
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        inset-inline-end: calc(var(--spacing) * 1);
        top: 50%
    }

    :is(.tabs__list-container:has([data-orientation=horizontal])>.tabs__list-container__scroll-prev,.tabs__list-container: has([data-orientation=horizontal])>.tabs__list-container__scroll-next):where(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),[dir=rtl],[dir=rtl] *) {
        rotate:180deg
    }

    .tabs__list-container:has([data-orientation=vertical])>.tabs__list-container__scroll-prev {
        top: var(--spacing);
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        left: 50%
    }

    .tabs__list-container:has([data-orientation=vertical])>.tabs__list-container__scroll-next {
        bottom: var(--spacing);
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        left: 50%
    }

    :is(.tabs__list-container:has(>:is([data-left-scroll=true],[data-left-right-scroll=true],[data-top-scroll=true],[data-top-bottom-scroll=true]))>.tabs__list-container__scroll-prev,.tabs__list-container: has(>:is([data-right-scroll=true],[data-left-right-scroll=true],[data-bottom-scroll=true],[data-top-bottom-scroll=true]))>.tabs__list-container__scroll-next) {
        display:inline-flex
    }

    .tabs__list {
        padding: var(--spacing);
        display: inline-flex
    }

    .tabs__list[data-orientation=horizontal] {
        flex-direction: row;
        width: max-content;
        min-width: 100%
    }

    .tabs__list[data-orientation=vertical] {
        gap: var(--spacing);
        flex-direction: column
    }

    .tabs__list[data-orientation=vertical] .tabs__tab {
        min-width: calc(var(--spacing) * 20)
    }

    .tabs__tab {
        height: calc(var(--spacing) * 8);
        border-radius: calc(var(--radius) * 3);
        width: 100%;
        padding-inline:calc(var(--spacing) * 4);text-align: center;
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--muted);
        --tw-outline-style: none;
        -webkit-tap-highlight-color: transparent;
        z-index: 1;
        cursor: var(--cursor-interactive);
        transition: color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out), opacity .15s var(--ease-smooth);
        outline-style: none;
        justify-content: center;
        align-items: center;
        display: flex;
        position: relative
    }

    .tabs__tab:is([data-reduce-motion=true],[data-reduce-motion=true] *),.tabs__tab: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.tabs__tab:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .tabs__tab:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.tabs__tab:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.tabs__tab:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .tabs__tab[data-selected=true] {
        color: var(--segment-foreground)
    }

    .tabs__tab[data-selected=true] .tabs__separator,.tabs__tab[data-selected=true]+.tabs__tab .tabs__separator {
        opacity: 0
    }

    .tabs__tab:disabled,.tabs__tab[data-disabled=true],.tabs__tab[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    @media (hover: hover) {
        .tabs__tab:not([data-selected=true]):not([data-disabled=true]):hover,.tabs__tab[data-hovered=true]:not([data-selected=true]):not([data-disabled=true]) {
            opacity:.7
        }
    }

    .tabs__tab:focus-visible:not(:focus),.tabs__tab[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .tabs__separator {
        pointer-events: none;
        border-radius: calc(var(--radius) * .5);
        background-color: var(--muted);
        position: absolute
    }

    @supports (color: color-mix(in lab, red, red)) {
        .tabs__separator {
            background-color:color-mix(in oklab, var(--muted) 25%, transparent)
        }
    }

    .tabs__separator {
        transition: opacity .15s var(--ease-smooth)
    }

    .tabs__separator:is([data-reduce-motion=true],[data-reduce-motion=true] *),.tabs__separator: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.tabs__separator:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .tabs__separator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.tabs__separator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.tabs__separator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .tabs__list[data-orientation=horizontal] .tabs__separator {
        inset-inline-start: calc(var(--spacing) * 0);
        width: 1px;
        height: 50%;
        top: 25%
    }

    .tabs__list[data-orientation=vertical] .tabs__separator {
        inset-inline-start: 5%;
        width: 90%;
        height: 1px;
        top: 0
    }

    .tabs__panel {
        width: 100%;
        padding: calc(var(--spacing) * 2);
        --tw-outline-style: none;
        outline-style: none
    }

    .tabs__panel[data-exiting=true] {
        inset-inline-start: calc(var(--spacing) * 0);
        width: 100%;
        position: absolute;
        top: 0
    }

    .tabs__panel[data-orientation=horizontal] {
        margin-top: calc(var(--spacing) * 4)
    }

    .tabs__panel[data-orientation=vertical] {
        margin-inline-start: calc(var(--spacing) * 4)
    }

    .tabs__indicator {
        border-radius: calc(var(--radius) * 3);
        background-color: var(--segment);
        --tw-shadow: var(--surface-shadow);
        width: 100%;
        height: 100%;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        z-index: -1;
        transition-property: translate,width,height;
        transition-duration: .25s;
        transition-timing-function: var(--ease-out-fluid);
        inset-inline-start: calc(var(--spacing) * 0);
        position: absolute;
        top: 0
    }

    .tabs__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *),.tabs__indicator: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.tabs__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .tabs__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.tabs__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.tabs__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .tabs--secondary>.tabs__list-container {
        background-color: #0000;
        border-radius: 0
    }

    .tabs--secondary>.tabs__list-container .tabs__list {
        padding: 0
    }

    .tabs--secondary>.tabs__list-container .tabs__separator {
        display: none
    }

    .tabs--secondary>.tabs__list-container .tabs__tab {
        border-radius: 0
    }

    .tabs--secondary>.tabs__list-container .tabs__tab[data-selected=true] {
        color: var(--foreground)
    }

    .tabs--secondary>.tabs__list-container .tabs__indicator {
        background-color: var(--accent);
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        border-radius: 0
    }

    .tabs--secondary[data-orientation=horizontal]>.tabs__list-container {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
        border-color: var(--border)
    }

    .tabs--secondary[data-orientation=horizontal]>.tabs__list-container .tabs__indicator {
        height: calc(var(--spacing) * .5);
        top: auto;
        bottom: 0
    }

    .tabs--secondary[data-orientation=vertical]>.tabs__list-container {
        border-inline-start-style: var(--tw-border-style);
        border-inline-start-width:1px;border-color: var(--border)
    }

    .tabs--secondary[data-orientation=vertical]>.tabs__list-container .tabs__indicator {
        height: 100%;
        width: calc(var(--spacing) * .5);
        inset-inline-start: calc(var(--spacing) * 0);
        top: 0
    }

    .button {
        isolation: isolate;
        height: calc(var(--spacing) * 10);
        transform-origin: 50%;
        justify-content: center;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        border-radius: calc(var(--radius) * 3);
        width: fit-content;
        padding-inline:calc(var(--spacing) * 4);font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        white-space: nowrap;
        --tw-outline-style: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        outline-style: none;
        display: inline-flex;
        position: relative
    }

    @media (min-width: 48rem) {
        .button {
            height:calc(var(--spacing) * 9)
        }
    }

    .button {
        transition: transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out);
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
        will-change: transform
    }

    .button:is([data-reduce-motion=true],[data-reduce-motion=true] *),.button: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.button:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .button {
        cursor: var(--cursor-interactive);
        --button-bg: transparent;
        --button-bg-hover: var(--button-bg);
        --button-bg-pressed: var(--button-bg-hover);
        --button-fg: currentColor;
        background-color: var(--button-bg);
        color: var(--button-fg)
    }

    .button:focus-visible:not(:focus),.button[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

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

    .button[data-pending=true] {
        pointer-events: none
    }

    .button:active,.button[data-pressed=true] {
        background-color: var(--button-bg-pressed);
        transform: scale(.97)
    }

    @media (hover: hover) {
        .button:hover,.button[data-hovered=true] {
            background-color:var(--button-bg-hover)
        }
    }

    .button svg: not([data-slot=spinner] svg,[data-slot=link-icon] svg) {
        pointer-events:none;
        margin-inline:calc(var(--spacing) * -.5);margin-block: calc(var(--spacing) * .5);
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5);
        flex-shrink: 0;
        align-self: center
    }

    @media (min-width: 40rem) {
        .button svg:not([data-slot=spinner] svg,[data-slot=link-icon] svg) {
            margin-block:var(--spacing);
            width: calc(var(--spacing) * 4);
            height: calc(var(--spacing) * 4)
        }
    }

    .button--sm {
        height: calc(var(--spacing) * 9);
        padding-inline:calc(var(--spacing) * 3)}

    @media (min-width: 48rem) {
        .button--sm {
            height:calc(var(--spacing) * 8)
        }
    }

    .button--sm svg: not([data-slot=spinner] svg,[data-slot=link-icon] svg) {
        width:calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .button--sm:active,.button--sm[data-pressed=true] {
        transform: scale(.98)
    }

    .button--lg {
        height: calc(var(--spacing) * 11);
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height))
    }

    @media (min-width: 48rem) {
        .button--lg {
            height:calc(var(--spacing) * 10)
        }
    }

    .button--lg:active,.button--lg[data-pressed=true] {
        transform: scale(.96)
    }

    .button--primary {
        --button-bg: var(--accent);
        --button-bg-hover: var(--accent-hover);
        --button-bg-pressed: var(--accent-hover);
        --button-fg: var(--accent-foreground)
    }

    .button--secondary {
        --button-bg: var(--default);
        --button-bg-hover: var(--default-hover);
        --button-bg-pressed: var(--default-hover);
        --button-fg: var(--accent-soft-foreground)
    }

    .button--tertiary {
        --button-bg: var(--default);
        --button-bg-hover: var(--default-hover);
        --button-bg-pressed: var(--default-hover)
    }

    .button--ghost,.button--outline {
        --button-bg: transparent;
        --button-bg-hover: var(--default);
        --button-bg-pressed: var(--default);
        --button-fg: var(--default-foreground)
    }

    .button--outline {
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--border);
        --button-bg-hover: var(--default)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .button--outline {
            --button-bg-hover:color-mix(in srgb, var(--default) 60%, transparent)
        }
    }

    .button--danger {
        --button-bg: var(--danger);
        --button-bg-hover: var(--danger-hover);
        --button-bg-pressed: var(--danger-hover);
        --button-fg: var(--danger-foreground)
    }

    .button--danger-soft {
        --button-bg: var(--danger-soft);
        --button-bg-hover: var(--danger-soft-hover);
        --button-bg-pressed: var(--danger-soft-hover);
        --button-fg: var(--danger-soft-foreground)
    }

    .button--icon-only {
        width: calc(var(--spacing) * 10);
        padding: 0
    }

    @media (min-width: 48rem) {
        .button--icon-only {
            width:calc(var(--spacing) * 9)
        }
    }

    .button--icon-only.button--sm {
        width: calc(var(--spacing) * 9)
    }

    @media (min-width: 48rem) {
        .button--icon-only.button--sm {
            width:calc(var(--spacing) * 8)
        }
    }

    .button--icon-only.button--lg {
        width: calc(var(--spacing) * 11)
    }

    @media (min-width: 48rem) {
        .button--icon-only.button--lg {
            width:calc(var(--spacing) * 10)
        }
    }

    .button--full-width {
        width: 100%
    }

    .button-group {
        justify-content: center;
        align-items: center;
        gap: 0;
        height: auto;
        display: inline-flex
    }

    .button-group--horizontal {
        flex-direction: row
    }

    .button-group--vertical {
        flex-direction: column
    }

    .button-group .button {
        border-radius: 0
    }

    .button-group--horizontal .button:first-child {
        border-start-start-radius: calc(var(--radius) * 3);
        border-end-start-radius: calc(var(--radius) * 3)
    }

    .button-group--horizontal .button:last-child {
        border-start-end-radius: calc(var(--radius) * 3);
        border-end-end-radius: calc(var(--radius) * 3)
    }

    .button-group--horizontal .button:first-child:last-child {
        border-radius: calc(var(--radius) * 3)
    }

    .button-group--vertical .button:first-child {
        border-top-left-radius: calc(var(--radius) * 3);
        border-top-right-radius: calc(var(--radius) * 3)
    }

    .button-group--vertical .button:last-child {
        border-bottom-right-radius: calc(var(--radius) * 3);
        border-bottom-left-radius: calc(var(--radius) * 3)
    }

    .button-group--vertical .button:first-child:last-child {
        border-radius: calc(var(--radius) * 3)
    }

    .button-group .button:active,.button-group .button[data-pressed=true] {
        transform: none
    }

    .button-group .button:focus-visible:not(:focus),.button-group .button[data-focus-visible=true] {
        z-index: 10
    }

    .button-group__separator {
        border-radius: calc(var(--radius) * .5);
        opacity: .15;
        pointer-events: none;
        transition: opacity .15s var(--ease-smooth);
        background-color: currentColor;
        position: absolute
    }

    .button-group__separator:is([data-reduce-motion=true],[data-reduce-motion=true] *),.button-group__separator: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.button-group__separator:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .button-group__separator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.button-group__separator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.button-group__separator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .button-group--horizontal .button-group__separator {
        inset-inline-start: -1px;
        width: 1px;
        height: 50%;
        top: 25%
    }

    .button-group--vertical .button-group__separator {
        inset-inline-start: 25%;
        width: 50%;
        height: 1px;
        top: -1px
    }

    .button-group--horizontal .button--outline:first-child {
        border-inline-end-style:var(--tw-border-style);border-inline-end-width: 0
    }

    .button-group--horizontal .button--outline:last-child {
        border-inline-start-style:var(--tw-border-style);border-inline-start-width: 0
    }

    .button-group--horizontal .button--outline:not(:first-child):not(:last-child) {
        border-inline-style:var(--tw-border-style);border-inline-width: 0
    }

    .button-group--vertical .button--outline:first-child {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 0
    }

    .button-group--vertical .button--outline:last-child {
        border-top-style: var(--tw-border-style);
        border-top-width: 0
    }

    .button-group--vertical .button--outline:not(:first-child):not(:last-child) {
        border-block-style:var(--tw-border-style);border-block-width: 0
    }

    .button-group--full-width {
        width: 100%
    }

    .toggle-button {
        isolation: isolate;
        height: calc(var(--spacing) * 10);
        transform-origin: 50%;
        justify-content: center;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        border-radius: calc(var(--radius) * 3);
        width: fit-content;
        padding-inline:calc(var(--spacing) * 4);font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        white-space: nowrap;
        --tw-outline-style: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        outline-style: none;
        display: inline-flex;
        position: relative
    }

    @media (min-width: 48rem) {
        .toggle-button {
            height:calc(var(--spacing) * 9)
        }
    }

    .toggle-button {
        transition: transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out);
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
    }

    .toggle-button:is([data-reduce-motion=true],[data-reduce-motion=true] *),.toggle-button: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.toggle-button:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .toggle-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.toggle-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.toggle-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .toggle-button {
        cursor: var(--cursor-interactive);
        --toggle-button-bg: var(--default);
        --toggle-button-bg-hover: var(--default-hover);
        --toggle-button-bg-pressed: var(--default-hover);
        --toggle-button-fg: currentColor;
        --toggle-button-bg-selected: var(--accent-soft);
        --toggle-button-bg-selected-hover: var(--accent-soft-hover);
        --toggle-button-bg-selected-pressed: var(--accent-soft-hover);
        --toggle-button-fg-selected: var(--accent-soft-foreground);
        background-color: var(--toggle-button-bg);
        color: var(--toggle-button-fg)
    }

    .toggle-button:focus-visible:not(:focus),.toggle-button[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .toggle-button:disabled,.toggle-button[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    @media (hover: hover) {
        .toggle-button:hover,.toggle-button[data-hovered=true] {
            background-color:var(--toggle-button-bg-hover)
        }
    }

    .toggle-button:active,.toggle-button[data-pressed=true] {
        background-color: var(--toggle-button-bg-pressed);
        transform: scale(.97)
    }

    .toggle-button[data-selected=true] {
        background-color: var(--toggle-button-bg-selected);
        color: var(--toggle-button-fg-selected)
    }

    @media (hover: hover) {
        .toggle-button[data-selected=true]:hover,.toggle-button[data-selected=true][data-hovered=true] {
            background-color:var(--toggle-button-bg-selected-hover)
        }
    }

    .toggle-button[data-selected=true]: active,.toggle-button[data-selected=true][data-pressed=true] {
        background-color:var(--toggle-button-bg-selected-pressed)
    }

    .toggle-button svg {
        pointer-events: none;
        margin-inline:calc(var(--spacing) * -.5);margin-block: calc(var(--spacing) * .5);
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5);
        flex-shrink: 0;
        align-self: center
    }

    @media (min-width: 40rem) {
        .toggle-button svg {
            margin-block:var(--spacing);
            width: calc(var(--spacing) * 4);
            height: calc(var(--spacing) * 4)
        }
    }

    .toggle-button--sm {
        height: calc(var(--spacing) * 9);
        padding-inline:calc(var(--spacing) * 3)}

    @media (min-width: 48rem) {
        .toggle-button--sm {
            height:calc(var(--spacing) * 8)
        }
    }

    .toggle-button--sm svg {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .toggle-button--sm:active,.toggle-button--sm[data-pressed=true] {
        transform: scale(.98)
    }

    .toggle-button--lg {
        height: calc(var(--spacing) * 11);
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height))
    }

    @media (min-width: 48rem) {
        .toggle-button--lg {
            height:calc(var(--spacing) * 10)
        }
    }

    .toggle-button--lg:active,.toggle-button--lg[data-pressed=true] {
        transform: scale(.96)
    }

    .toggle-button--default {
        --toggle-button-bg: var(--default);
        --toggle-button-bg-hover: var(--default-hover);
        --toggle-button-bg-pressed: var(--default-hover)
    }

    .toggle-button--ghost {
        --toggle-button-bg: transparent;
        --toggle-button-bg-hover: var(--default);
        --toggle-button-bg-pressed: var(--default);
        --toggle-button-fg: var(--default-foreground)
    }

    .toggle-button--icon-only {
        width: calc(var(--spacing) * 10);
        padding: 0
    }

    @media (min-width: 48rem) {
        .toggle-button--icon-only {
            width:calc(var(--spacing) * 9)
        }
    }

    .toggle-button--icon-only.toggle-button--sm {
        width: calc(var(--spacing) * 9)
    }

    @media (min-width: 48rem) {
        .toggle-button--icon-only.toggle-button--sm {
            width:calc(var(--spacing) * 8)
        }
    }

    .toggle-button--icon-only.toggle-button--lg {
        width: calc(var(--spacing) * 11)
    }

    @media (min-width: 48rem) {
        .toggle-button--icon-only.toggle-button--lg {
            width:calc(var(--spacing) * 10)
        }
    }

    .toggle-button-group {
        justify-content: center;
        align-items: center;
        gap: 0;
        width: fit-content;
        height: auto;
        display: inline-flex
    }

    .toggle-button-group--horizontal {
        flex-direction: row
    }

    .toggle-button-group--vertical {
        flex-direction: column
    }

    .toggle-button-group--full-width {
        width: 100%
    }

    .toggle-button-group .toggle-button {
        border-radius: 0
    }

    .toggle-button-group--horizontal .toggle-button:first-child {
        border-start-start-radius: calc(var(--radius) * 3);
        border-end-start-radius: calc(var(--radius) * 3)
    }

    .toggle-button-group--horizontal .toggle-button:last-child {
        border-start-end-radius: calc(var(--radius) * 3);
        border-end-end-radius: calc(var(--radius) * 3)
    }

    .toggle-button-group--horizontal .toggle-button:first-child:last-child {
        border-radius: calc(var(--radius) * 3)
    }

    .toggle-button-group--vertical .toggle-button:first-child {
        border-top-left-radius: calc(var(--radius) * 3);
        border-top-right-radius: calc(var(--radius) * 3)
    }

    .toggle-button-group--vertical .toggle-button:last-child {
        border-bottom-right-radius: calc(var(--radius) * 3);
        border-bottom-left-radius: calc(var(--radius) * 3)
    }

    .toggle-button-group--vertical .toggle-button:first-child:last-child {
        border-radius: calc(var(--radius) * 3)
    }

    .toggle-button-group .toggle-button:active,.toggle-button-group .toggle-button[data-pressed=true] {
        transform: none
    }

    .toggle-button-group .toggle-button:focus-visible:not(:focus),.toggle-button-group .toggle-button[data-focus-visible=true] {
        --tw-ring-offset-width: 0px;
        --tw-ring-inset: inset
    }

    .toggle-button-group--full-width .toggle-button {
        flex: 1
    }

    .toggle-button-group__separator {
        border-radius: calc(var(--radius) * .5);
        opacity: .15;
        pointer-events: none;
        transition: opacity .15s var(--ease-smooth);
        background-color: currentColor;
        position: absolute
    }

    .toggle-button-group__separator:is([data-reduce-motion=true],[data-reduce-motion=true] *),.toggle-button-group__separator: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.toggle-button-group__separator:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .toggle-button-group__separator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.toggle-button-group__separator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.toggle-button-group__separator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .toggle-button-group--horizontal .toggle-button-group__separator {
        inset-inline-start: -1px;
        width: 1px;
        height: 50%;
        top: 25%
    }

    .toggle-button-group--vertical .toggle-button-group__separator {
        inset-inline-start: 25%;
        width: 50%;
        height: 1px;
        top: -1px
    }

    .toggle-button-group--detached {
        gap: var(--spacing)
    }

    .toggle-button-group--detached .toggle-button {
        border-radius: calc(var(--radius) * 3)
    }

    .toggle-button-group--detached .toggle-button-group__separator {
        display: none
    }

    .toolbar {
        align-items: center;
        gap: calc(var(--spacing) * 2);
        grid-auto-flow: column;
        width: fit-content;
        display: grid
    }

    .toolbar .separator--vertical {
        align-self: center;
        height: 50%
    }

    .toolbar .separator--horizontal {
        justify-content: center;
        justify-self: center;
        width: 50%
    }

    .toolbar--vertical {
        grid-auto-flow: row;
        justify-content: flex-start;
        align-items: flex-start
    }

    .toolbar--vertical .button-group {
        justify-content: flex-start
    }

    .toolbar--attached {
        border-radius: calc(var(--radius) * 3);
        background-color: var(--surface);
        padding: var(--spacing);
        --tw-shadow: var(--overlay-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .dropdown {
        gap: var(--spacing);
        flex-direction: column;
        display: flex
    }

    .dropdown__trigger {
        --tw-outline-style: none;
        transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
        outline-style: none;
        display: inline-block
    }

    .dropdown__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.dropdown__trigger: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.dropdown__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .dropdown__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.dropdown__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.dropdown__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .dropdown__trigger {
        cursor: var(--cursor-interactive)
    }

    .dropdown__trigger:focus-visible:not(:focus),.dropdown__trigger[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

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

    .dropdown__trigger[data-pending=true] {
        pointer-events: none
    }

    .dropdown__trigger:active,.dropdown__trigger[data-pressed=true] {
        transform: scale(.97)
    }

    .dropdown__popover {
        max-width: 48svw;
        transform-origin: var(--trigger-anchor-point);
        scroll-padding-block: var(--spacing);
        scrollbar-width: var(--scrollbar-width);
        scrollbar-color: var(--scrollbar-color);
        scrollbar-gutter: var(--scrollbar-gutter);
        overscroll-behavior: contain;
        background-color: var(--overlay);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        will-change: transform;
        padding: 0;
        overflow-y: auto
    }

    @media (min-width: 48rem) {
        .dropdown__popover {
            min-width:calc(var(--spacing) * 55)
        }
    }

    .dropdown__popover {
        border-radius: min(32px, var(--radius-3xl));
        box-shadow: var(--shadow-overlay)
    }

    .dropdown__popover:focus-visible:not(:focus),.dropdown__popover[data-focus-visible=true] {
        --tw-outline-style: none;
        outline-style: none
    }

    .dropdown__popover[data-entering=true] {
        animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .15s;
        --tw-ease: ease;
        --tw-enter-opacity: 0;
        --tw-enter-scale: .9;
        transition-duration: .15s;
        transition-timing-function: ease
    }

    .dropdown__popover[data-entering=true][data-placement=top] {
        --tw-enter-translate-y: calc(1*var(--spacing))
    }

    .dropdown__popover[data-entering=true][data-placement=bottom] {
        --tw-enter-translate-y: calc(1*var(--spacing)*-1)
    }

    .dropdown__popover[data-entering=true][data-placement=left] {
        --tw-enter-translate-x: calc(1*var(--spacing))
    }

    .dropdown__popover[data-entering=true][data-placement=right] {
        --tw-enter-translate-x: calc(1*var(--spacing)*-1)
    }

    .dropdown__popover[data-exiting=true] {
        animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .1s;
        --tw-ease: ease;
        --tw-exit-scale: .95;
        --tw-exit-opacity: 0;
        transition-duration: .1s;
        transition-timing-function: ease
    }

    .dropdown__popover[data-exiting=true],.dropdown__popover[data-entering=true] {
        transition-property: opacity,transform;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        will-change: opacity,transform
    }

    .dropdown__popover [data-slot=popover-overlay-arrow] {
        fill: var(--overlay)
    }

    .dropdown__popover[data-placement=bottom] [data-slot=popover-overlay-arrow] {
        rotate: 180deg
    }

    .dropdown__popover[data-placement=left] [data-slot=popover-overlay-arrow] {
        rotate: -90deg
    }

    .dropdown__popover[data-placement=right] [data-slot=popover-overlay-arrow] {
        rotate: 90deg
    }

    .dropdown__popover [data-slot=dropdown-menu] {
        padding: calc(var(--spacing) * 1.5);
        --tw-outline-style: none;
        outline-style: none
    }

    .dropdown__popover [data-slot=menu-item] {
        padding-inline: calc(var(--spacing) * 2.5)
    }

    .dropdown__menu {
        gap: calc(var(--spacing) * .5);
        width: 100%;
        padding: var(--spacing);
        flex-direction: column;
        display: flex;
        position: relative;
        overflow: clip
    }

    .dropdown__menu [data-slot=separator] {
        width: 94%;
        margin-inline-start:3%}

    .list-box-item {
        min-height: calc(var(--spacing) * 9);
        justify-content: flex-start;
        align-items: center;
        gap: calc(var(--spacing) * 3);
        border-radius: calc(var(--radius) * 2);
        width: 100%;
        padding-inline:calc(var(--spacing) * 2);padding-block: calc(var(--spacing) * 1.5);
        --tw-outline-style: none;
        -webkit-tap-highlight-color: transparent;
        transition: transform .25s var(--ease-out-quart), box-shadow .15s var(--ease-out);
        outline-style: none;
        display: flex;
        position: relative
    }

    .list-box-item:is([data-reduce-motion=true],[data-reduce-motion=true] *),.list-box-item: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.list-box-item:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .list-box-item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.list-box-item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.list-box-item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .list-box-item {
        cursor: var(--cursor-interactive)
    }

    .list-box-item [data-slot=label] {
        pointer-events: none;
        -webkit-user-select: none;
        user-select: none;
        width: fit-content
    }

    .list-box-item [data-slot=description] {
        pointer-events: none;
        text-wrap: wrap;
        -webkit-user-select: none;
        user-select: none
    }

    .list-box-item:has(.list-box-item__indicator) {
        padding-inline-end:calc(var(--spacing) * 7)}

    .list-box-item: focus-visible:not(:focus),.list-box-item[data-focus-visible=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .list-box-item:active,.list-box-item[data-pressed=true] {
        transform: scale(.98)
    }

    @media (hover: hover) {
        .list-box-item:hover,.list-box-item[data-hovered=true] {
            background-color:var(--default)
        }
    }

    .list-box-item[data-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .list-box-item__indicator {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        color: var(--default-foreground);
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-duration: .25s;
        inset-inline-end: calc(var(--spacing) * 2);
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        transition-duration: .25s;
        display: flex;
        position: absolute;
        top: 50%
    }

    .list-box-item__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *),.list-box-item__indicator: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.list-box-item__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .list-box-item__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.list-box-item__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.list-box-item__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .list-box-item__indicator [data-slot=list-box-item-indicator--checkmark] {
        width: calc(var(--spacing) * 2.5);
        height: calc(var(--spacing) * 2.5);
        transition-property: all;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-duration: .3s;
        transition-duration: .3s
    }

    .list-box-item__indicator [data-slot=list-box-item-indicator--checkmark]: is([data-reduce-motion=true],[data-reduce-motion=true] *),.list-box-item__indicator [data-slot=list-box-item-indicator--checkmark]:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.list-box-item__indicator [data-slot=list-box-item-indicator--checkmark]:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .list-box-item__indicator [data-slot=list-box-item-indicator--checkmark]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.list-box-item__indicator [data-slot=list-box-item-indicator--checkmark]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.list-box-item__indicator [data-slot=list-box-item-indicator--checkmark]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .list-box-item__indicator .list-box-item[aria-selected=true] [data-slot=list-box-item-indicator--checkmark],.list-box-item__indicator .list-box-item[data-selected=true] [data-slot=list-box-item-indicator--checkmark] {
        transition: stroke-dashoffset .25s linear
    }

    :is(.list-box-item__indicator .list-box-item[aria-selected=true] [data-slot=list-box-item-indicator--checkmark],.list-box-item__indicator .list-box-item[data-selected=true] [data-slot=list-box-item-indicator--checkmark]): is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.list-box-item__indicator .list-box-item[aria-selected=true] [data-slot=list-box-item-indicator--checkmark],.list-box-item__indicator .list-box-item[data-selected=true] [data-slot=list-box-item-indicator--checkmark]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.list-box-item__indicator .list-box-item[aria-selected=true] [data-slot=list-box-item-indicator--checkmark],.list-box-item__indicator .list-box-item[data-selected=true] [data-slot=list-box-item-indicator--checkmark]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        :is(.list-box-item__indicator .list-box-item[aria-selected=true] [data-slot=list-box-item-indicator--checkmark],.list-box-item__indicator .list-box-item[data-selected=true] [data-slot=list-box-item-indicator--checkmark]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.list-box-item__indicator .list-box-item[aria-selected=true] [data-slot=list-box-item-indicator--checkmark],.list-box-item__indicator .list-box-item[data-selected=true] [data-slot=list-box-item-indicator--checkmark]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.list-box-item__indicator .list-box-item[aria-selected=true] [data-slot=list-box-item-indicator--checkmark],.list-box-item__indicator .list-box-item[data-selected=true] [data-slot=list-box-item-indicator--checkmark]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .list-box-item--danger .list-box-item__indicator,.list-box-item--danger [data-slot=label] {
        color: var(--danger)
    }

    .list-box-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        display: flex
    }

    .list-box {
        width: 100%;
        padding: var(--spacing);
        position: relative;
        overflow: clip
    }

    .list-box>*+* {
        margin-top: var(--spacing)
    }

    .list-box [data-slot=separator][data-orientation=horizontal] {
        width: 94%;
        margin-inline-start:3%}

    .menu-item {
        min-height: calc(var(--spacing) * 9);
        justify-content: flex-start;
        align-items: center;
        gap: calc(var(--spacing) * 3);
        border-radius: calc(var(--radius) * 2);
        width: 100%;
        padding-inline:calc(var(--spacing) * 2);padding-block: calc(var(--spacing) * 1.5);
        --tw-outline-style: none;
        -webkit-tap-highlight-color: transparent;
        transition: transform .25s var(--ease-out-quart), box-shadow .15s var(--ease-out);
        will-change: transform;
        outline-style: none;
        display: flex;
        position: relative
    }

    .menu-item:is([data-reduce-motion=true],[data-reduce-motion=true] *),.menu-item: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.menu-item:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .menu-item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.menu-item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.menu-item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .menu-item {
        cursor: var(--cursor-interactive)
    }

    .menu-item [data-slot=label] {
        pointer-events: none;
        -webkit-user-select: none;
        user-select: none;
        width: fit-content
    }

    .menu-item [data-slot=description] {
        pointer-events: none;
        text-wrap: wrap;
        -webkit-user-select: none;
        user-select: none
    }

    .menu-item [data-slot=submenu-indicator] svg {
        width: calc(var(--spacing) * 3.5);
        height: calc(var(--spacing) * 3.5)
    }

    .menu-item:has(.menu-item__indicator) {
        padding-inline-start:calc(var(--spacing) * 7)}

    .menu-item[data-has-submenu=true]: has(.menu-item__indicator) {
        padding-inline-start:calc(var(--spacing) * 2);
        padding-inline-end:calc(var(--spacing) * 7)}

    .menu-item: focus-visible:not(:focus),.menu-item[data-focus-visible=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .menu-item:active,.menu-item[data-pressed=true] {
        transform: scale(.98)
    }

    @media (hover: hover) {
        .menu-item:hover,.menu-item[data-hovered=true] {
            background-color:var(--default)
        }
    }

    :is(.menu-item[aria-checked=true],.menu-item[aria-selected=true],.menu-item[data-selected=true]) [data-slot=menu-item-indicator--checkmark] {
        transition: stroke-dashoffset .1s linear
    }

    :is(.menu-item[aria-checked=true],.menu-item[aria-selected=true],.menu-item[data-selected=true]) [data-slot=menu-item-indicator--checkmark]: is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.menu-item[aria-checked=true],.menu-item[aria-selected=true],.menu-item[data-selected=true]) [data-slot=menu-item-indicator--checkmark]:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.menu-item[aria-checked=true],.menu-item[aria-selected=true],.menu-item[data-selected=true]) [data-slot=menu-item-indicator--checkmark]:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        :is(.menu-item[aria-checked=true],.menu-item[aria-selected=true],.menu-item[data-selected=true]) [data-slot=menu-item-indicator--checkmark]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.menu-item[aria-checked=true],.menu-item[aria-selected=true],.menu-item[data-selected=true]) [data-slot=menu-item-indicator--checkmark]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.menu-item[aria-checked=true],.menu-item[aria-selected=true],.menu-item[data-selected=true]) [data-slot=menu-item-indicator--checkmark]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    :is(.menu-item[aria-checked=true],.menu-item[aria-selected=true],.menu-item[data-selected=true]) [data-slot=menu-item-indicator--dot] {
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
        opacity: 1
    }

    .menu-item[data-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .menu-item__indicator {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        color: var(--muted);
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-duration: .25s;
        inset-inline-start: calc(var(--spacing) * 2);
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        transition-duration: .25s;
        display: flex;
        position: absolute;
        top: 50%
    }

    .menu-item__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *),.menu-item__indicator: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.menu-item__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .menu-item__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.menu-item__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.menu-item__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .menu-item[data-has-submenu=true] .menu-item__indicator {
        inset-inline-start: auto;
        inset-inline-end: calc(var(--spacing) * 2)
    }

    .menu-item__indicator [data-slot=menu-item-indicator--checkmark] {
        width: calc(var(--spacing) * 2.5);
        height: calc(var(--spacing) * 2.5)
    }

    .menu-item[data-selection-mode=multiple] : is(.menu-item__indicator [data-slot=menu-item-indicator--checkmark]) {
        transition-property:all;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-duration: .3s;
        transition-duration: .3s
    }

    .menu-item[data-selection-mode=multiple] : is(.menu-item__indicator [data-slot=menu-item-indicator--checkmark]):is([data-reduce-motion=true],[data-reduce-motion=true] *),.menu-item[data-selection-mode=multiple] :is(.menu-item__indicator [data-slot=menu-item-indicator--checkmark]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.menu-item[data-selection-mode=multiple] :is(.menu-item__indicator [data-slot=menu-item-indicator--checkmark]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .menu-item[data-selection-mode=multiple] :is(.menu-item__indicator [data-slot=menu-item-indicator--checkmark]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.menu-item[data-selection-mode=multiple] :is(.menu-item__indicator [data-slot=menu-item-indicator--checkmark]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.menu-item[data-selection-mode=multiple] :is(.menu-item__indicator [data-slot=menu-item-indicator--checkmark]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .menu-item__indicator [data-slot=menu-item-indicator--dot] {
        width: calc(var(--spacing) * 2);
        height: calc(var(--spacing) * 2)
    }

    .menu-item[data-selection-mode=multiple] : is(.menu-item__indicator [data-slot=menu-item-indicator--dot]) {
        transition-property:all;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-duration: .25s;
        transition-duration: .25s
    }

    .menu-item[data-selection-mode=multiple] : is(.menu-item__indicator [data-slot=menu-item-indicator--dot]):is([data-reduce-motion=true],[data-reduce-motion=true] *),.menu-item[data-selection-mode=multiple] :is(.menu-item__indicator [data-slot=menu-item-indicator--dot]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.menu-item[data-selection-mode=multiple] :is(.menu-item__indicator [data-slot=menu-item-indicator--dot]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .menu-item[data-selection-mode=multiple] :is(.menu-item__indicator [data-slot=menu-item-indicator--dot]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.menu-item[data-selection-mode=multiple] :is(.menu-item__indicator [data-slot=menu-item-indicator--dot]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.menu-item[data-selection-mode=multiple] :is(.menu-item__indicator [data-slot=menu-item-indicator--dot]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .menu-item__indicator [data-slot=menu-item-indicator--dot] {
        --tw-scale-x: 70%;
        --tw-scale-y: 70%;
        --tw-scale-z: 70%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
        opacity: 0
    }

    .menu-item__indicator--submenu {
        color: var(--muted)
    }

    .menu-item__indicator--submenu svg {
        width: calc(var(--spacing) * 3);
        height: calc(var(--spacing) * 3)
    }

    .menu-item--danger .menu-item__indicator,.menu-item--danger [data-slot=label] {
        color: var(--danger)
    }

    .menu-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        display: flex
    }

    .menu {
        gap: var(--spacing);
        width: 100%;
        padding: var(--spacing);
        flex-direction: column;
        display: flex;
        position: relative;
        overflow: clip
    }

    .menu [data-slot=separator] {
        width: 94%;
        margin-inline-start:3%}

    .tag-group {
        gap: var(--spacing);
        flex-direction: column;
        display: flex;
        position: relative
    }

    .tag-group__list {
        gap: calc(var(--spacing) * 1.5);
        flex-wrap: wrap;
        display: flex;
        position: relative
    }

    .tag-group [slot=description],.tag-group [data-slot=description],.tag-group [slot=errorMessage],.tag-group [data-slot=error-message] {
        padding: var(--spacing)
    }

    .tag {
        --optical-offset: .031em;
        align-items: center;
        gap: var(--spacing);
        border-radius: calc(var(--radius) * 1.5);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        transition: color .1s var(--ease-smooth), scale .1s var(--ease-smooth), opacity .1s var(--ease-smooth), background-color .1s var(--ease-smooth), box-shadow .1s var(--ease-out);
        transform-origin: 50%;
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
        display: inline-flex;
        position: relative
    }

    .tag:is([data-reduce-motion=true],[data-reduce-motion=true] *),.tag: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.tag:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .tag:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.tag:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.tag:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .tag {
        cursor: var(--cursor-interactive)
    }

    .tag svg {
        pointer-events: none;
        width: calc(var(--spacing) * 3);
        height: calc(var(--spacing) * 3);
        color: currentColor;
        flex-shrink: 0;
        align-self: center
    }

    .tag:is([data-disabled=true],[aria-disabled=true]) {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .tag:is(:focus-visible,[data-focus-visible]) {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .tag:is([data-selected=true],[aria-selected=true]) {
        background-color: var(--accent-soft);
        color: var(--accent-soft-foreground)
    }

    @media (hover: hover) {
        .tag:is([data-selected=true],[aria-selected=true]):is(:hover,[data-hovered=true]) {
            background-color:var(--accent-soft-hover)
        }
    }

    .tag--sm {
        padding-inline:calc(var(--spacing) * 2);padding-block: calc(var(--spacing) * .5);
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height))
    }

    .tag--md {
        padding-inline:calc(var(--spacing) * 2);padding-block: var(--spacing);
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height))
    }

    .tag--lg {
        border-radius: calc(var(--radius) * 2);
        padding-inline:calc(var(--spacing) * 2.5);padding-block: calc(var(--spacing) * 1.5);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height))
    }

    .tag--default {
        background-color: var(--default);
        color: var(--default-foreground)
    }

    @media (hover: hover) {
        .tag--default:is(:hover,[data-hovered=true]):not([data-selected=true]):not([data-disabled=true]) {
            background-color:var(--default-hover)
        }
    }

    .tag--surface {
        background-color: var(--surface);
        color: var(--surface-foreground)
    }

    @media (hover: hover) {
        .tag--surface:is(:hover,[data-hovered=true]):not([data-selected=true]):not([data-disabled=true]) {
            background-color:var(--surface-hover)
        }
    }

    .tag__remove-button {
        width: calc(var(--spacing) * 3);
        height: calc(var(--spacing) * 3);
        color: inherit
    }

    .tag__remove-button svg {
        width: inherit;
        height: inherit;
        color: currentColor;
        flex-shrink: 0;
        align-self: center
    }

    .color-area {
        width: 100%;
        max-width: calc(var(--spacing) * 56);
        border-radius: calc(var(--radius) * 2);
        -webkit-tap-highlight-color: transparent;
        aspect-ratio: 1;
        background: var(--color-area-background);
        flex-shrink: 0;
        position: relative;
        box-shadow: inset 0 0 0 1px #0000001a
    }

    .color-area[data-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .color-area--show-dots:after {
        content: "";
        pointer-events: none;
        border-radius: inherit;
        background-image: radial-gradient(circle,#fff3 1px,#0000 1px);
        background-size: 8px 8px;
        position: absolute;
        inset: 0
    }

    .color-area__thumb {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        border-radius: calc(var(--radius) * 1.5);
        will-change: width,height;
        background-color: var(--color-area-thumb-color);
        transition: width .15s var(--ease-out), height .15s var(--ease-out);
        border: 3px solid #fff;
        box-shadow: 0 0 0 1px #0000001a,inset 0 0 0 1px #0000001a
    }

    .color-area__thumb:is([data-reduce-motion=true],[data-reduce-motion=true] *),.color-area__thumb: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.color-area__thumb:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .color-area__thumb:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.color-area__thumb:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.color-area__thumb:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .color-area__thumb[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .color-area__thumb[data-dragging=true] {
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5)
    }

    .color-area__thumb[data-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .color-picker {
        display: inline-flex
    }

    .color-picker__trigger {
        align-items: center;
        gap: calc(var(--spacing) * 3);
        border-radius: calc(var(--radius) * .5);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        -webkit-tap-highlight-color: transparent;
        cursor: var(--cursor-interactive);
        transition: background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
        display: inline-flex
    }

    .color-picker__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.color-picker__trigger: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.color-picker__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .color-picker__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.color-picker__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.color-picker__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .color-picker__trigger [data-slot=label] {
        cursor: var(--cursor-interactive)
    }

    .color-picker__trigger:focus-visible:not(:focus),.color-picker__trigger[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .color-picker__trigger:disabled,.color-picker__trigger[data-disabled=true],.color-picker__trigger[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .color-picker__popover {
        min-width: calc(var(--spacing) * 62);
        transform-origin: var(--trigger-anchor-point);
        scrollbar-color: auto;
        scrollbar-gutter: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        overscroll-behavior: contain;
        background-color: var(--overlay);
        padding-inline:calc(var(--spacing) * 2);padding-top: calc(var(--spacing) * 2);
        padding-bottom: calc(var(--spacing) * 3);
        box-shadow: var(--shadow-overlay);
        border-radius: min(32px, calc(var(--radius) * 2.5));
        gap: calc(var(--spacing) * 3);
        flex-direction: column;
        display: flex;
        overflow: hidden auto
    }

    .color-picker__popover:focus-visible:not(:focus),.color-picker__popover[data-focus-visible=true] {
        --tw-outline-style: none;
        outline-style: none
    }

    .color-picker__popover[data-entering=true] {
        animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .15s;
        --tw-ease: ease;
        --tw-enter-opacity: 0;
        --tw-enter-scale: .95;
        transition-duration: .15s;
        transition-timing-function: ease
    }

    .color-picker__popover[data-entering=true][data-placement^=top] {
        --tw-enter-translate-y: calc(1*var(--spacing))
    }

    .color-picker__popover[data-entering=true][data-placement^=bottom] {
        --tw-enter-translate-y: calc(1*var(--spacing)*-1)
    }

    .color-picker__popover[data-entering=true][data-placement^=left] {
        --tw-enter-translate-x: calc(1*var(--spacing))
    }

    .color-picker__popover[data-entering=true][data-placement^=right] {
        --tw-enter-translate-x: calc(1*var(--spacing)*-1)
    }

    .color-picker__popover[data-exiting=true] {
        animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .1s;
        --tw-ease: ease;
        --tw-exit-scale: .95;
        --tw-exit-opacity: 0;
        transition-duration: .1s;
        transition-timing-function: ease
    }

    .color-picker__popover[data-exiting=true],.color-picker__popover[data-entering=true] {
        transition-property: opacity,transform;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        will-change: opacity,transform
    }

    .color-slider {
        gap: var(--spacing);
        grid-template: "label output""track track"/1fr auto;
        width: 100%;
        display: grid
    }

    .color-slider:not(:has([data-slot=label])): not(:has(.color-slider__output)) {
        grid-template:"track"/1fr;
        gap: 0
    }

    .color-slider:has([data-slot=label]): not(:has(.color-slider__output)) {
        grid-template-columns:1fr;
        grid-template-areas: "label""track"
    }

    .color-slider:not(:has([data-slot=label])): has(.color-slider__output) {
        grid-template-columns:1fr;
        grid-template-areas: "output""track"
    }

    .color-slider:not(:has([data-slot=label])): has(.color-slider__output) .color-slider__output {
        justify-self:end
    }

    .color-slider [data-slot=label] {
        width: fit-content;
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        grid-area: label
    }

    .color-slider .color-slider__output {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        --tw-numeric-spacing: tabular-nums;
        font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
        grid-area: output
    }

    .color-slider .color-slider__track {
        border-radius: calc(var(--radius) * 2);
        grid-area: track;
        position: relative
    }

    .color-slider .color-slider__track:before,.color-slider .color-slider__track:after {
        content: "";
        z-index: 0;
        pointer-events: none;
        position: absolute
    }

    .color-slider .color-slider__thumb {
        cursor: grab;
        border-radius: calc(var(--radius) * 2);
        -webkit-tap-highlight-color: transparent;
        border-style: var(--tw-border-style);
        border-width: 3px;
        border-color: var(--color-white);
        --tw-shadow: var(--overlay-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        z-index: 1;
        transition: transform .25s var(--ease-out), box-shadow .15s var(--ease-out);
        justify-content: center;
        align-items: center;
        display: flex;
        position: absolute
    }

    .color-slider .color-slider__thumb:is([data-reduce-motion=true],[data-reduce-motion=true] *),.color-slider .color-slider__thumb: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.color-slider .color-slider__thumb:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .color-slider .color-slider__thumb:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.color-slider .color-slider__thumb:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.color-slider .color-slider__thumb:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .color-slider .color-slider__thumb[data-dragging=true] {
        cursor: grabbing
    }

    .color-slider .color-slider__thumb[data-focus-visible=true] {
        z-index: 10;
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .color-slider .color-slider__thumb[data-disabled=true] {
        cursor: default;
        background-color: var(--default)
    }

    .color-slider:disabled,.color-slider[data-disabled=true],.color-slider[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    :is(.color-slider:disabled,.color-slider[data-disabled=true],.color-slider[aria-disabled=true]) [data-slot=label] {
        opacity: 1
    }

    .color-slider[data-orientation=horizontal] {
        flex-direction: column
    }

    .color-slider[data-orientation=horizontal] .color-slider__track {
        height: calc(var(--spacing) * 5);
        border-radius: 0;
        justify-self: center;
        width: calc(100% - 1.25rem);
        box-shadow: inset 0 1px #0000001a,inset 0 -1px #0000001a
    }

    .color-slider[data-orientation=horizontal] .color-slider__track: before,.color-slider[data-orientation=horizontal] .color-slider__track:after {
        width:.625rem;
        height: 100%;
        top: 0
    }

    .color-slider[data-orientation=horizontal] .color-slider__track: before {
        background:linear-gradient(var(--track-start-color,transparent)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
        border-start-start-radius: calc(var(--radius) * 2);
        border-end-start-radius: calc(var(--radius) * 2);
        inset-inline-start: -.625rem;
        box-shadow: inset 1px 0 #0000001a,inset 0 1px #0000001a,inset 0 -1px #0000001a
    }

    .color-slider[data-orientation=horizontal] .color-slider__track: after {
        background-color:var(--track-end-color,transparent);
        border-start-end-radius: calc(var(--radius) * 2);
        border-end-end-radius: calc(var(--radius) * 2);
        inset-inline-end: -.625rem;
        box-shadow: inset -1px 0 #0000001a,inset 0 1px #0000001a,inset 0 -1px #0000001a
    }

    .color-slider[data-orientation=horizontal] .color-slider__thumb {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        top: 50%
    }

    .color-slider[data-orientation=vertical] {
        gap: calc(var(--spacing) * 2);
        flex-direction: row;
        grid-template: "output""track"1fr"label"/1fr;
        place-items: center;
        height: 100%
    }

    .color-slider[data-orientation=vertical]: not(:has([data-slot=label])):not(:has(.color-slider__output)) {
        grid-template-rows:1fr;
        grid-template-areas: "track";
        gap: 0
    }

    .color-slider[data-orientation=vertical]: has([data-slot=label]):not(:has(.color-slider__output)) {
        grid-template-rows:1fr auto;
        grid-template-areas: "track""label"
    }

    .color-slider[data-orientation=vertical]: not(:has([data-slot=label])):has(.color-slider__output) {
        grid-template-rows:auto 1fr;
        grid-template-areas: "output""track"
    }

    .color-slider[data-orientation=vertical] .color-slider__output,.color-slider[data-orientation=vertical] [data-slot=label] {
        text-align: center
    }

    .color-slider[data-orientation=vertical] .color-slider__track {
        width: calc(var(--spacing) * 5);
        border-radius: 0;
        justify-self: center;
        height: calc(100% - 1.25rem);
        box-shadow: inset 1px 0 #0000001a,inset -1px 0 #0000001a
    }

    .color-slider[data-orientation=vertical] .color-slider__track: before,.color-slider[data-orientation=vertical] .color-slider__track:after {
        width:100%;
        height: .625rem;
        inset-inline-start: calc(var(--spacing) * 0)
    }

    .color-slider[data-orientation=vertical] .color-slider__track: before {
        background:linear-gradient(var(--track-start-color,transparent)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
        border-end-end-radius: 999px;
        border-end-start-radius: 999px;
        bottom: -.625rem;
        box-shadow: inset 1px 0 #0000001a,inset -1px 0 #0000001a,inset 0 -1px #0000001a
    }

    .color-slider[data-orientation=vertical] .color-slider__track: after {
        background-color:var(--track-end-color,transparent);
        border-start-start-radius: 999px;
        border-start-end-radius: 999px;
        top: -.625rem;
        box-shadow: inset 1px 0 #0000001a,inset -1px 0 #0000001a,inset 0 1px #0000001a
    }

    .color-slider[data-orientation=vertical] .color-slider__thumb {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        left: 50%
    }

    .color-swatch {
        box-sizing: border-box;
        width: calc(var(--spacing) * 8);
        height: calc(var(--spacing) * 8);
        background: linear-gradient(var(--color-swatch-current), var(--color-swatch-current)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
        flex-shrink: 0;
        position: relative;
        box-shadow: inset 0 0 0 1px #0000001a
    }

    .color-swatch--circle {
        border-radius: calc(var(--radius) * 2)
    }

    .color-swatch--square {
        border-radius: calc(var(--radius) * .75)
    }

    .color-swatch--xs {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .color-swatch--xs.color-swatch--circle {
        border-radius: calc(var(--radius) * 1)
    }

    .color-swatch--sm {
        width: calc(var(--spacing) * 6);
        height: calc(var(--spacing) * 6)
    }

    .color-swatch--sm.color-swatch--circle {
        border-radius: calc(var(--radius) * 1.5)
    }

    .color-swatch--lg {
        width: calc(var(--spacing) * 9);
        height: calc(var(--spacing) * 9)
    }

    .color-swatch--lg.color-swatch--circle {
        border-radius: calc(var(--radius) * 3)
    }

    .color-swatch--xl {
        width: calc(var(--spacing) * 10);
        height: calc(var(--spacing) * 10)
    }

    .color-swatch--xl.color-swatch--circle {
        border-radius: calc(var(--radius) * 3)
    }

    .color-swatch-picker {
        align-items: center;
        gap: calc(var(--spacing) * 2);
        flex-wrap: wrap;
        display: flex
    }

    .color-swatch-picker__item {
        width: calc(var(--spacing) * 8);
        height: calc(var(--spacing) * 8);
        border-radius: calc(var(--radius) * 2);
        border-style: var(--tw-border-style);
        --tw-outline-style: none;
        -webkit-tap-highlight-color: transparent;
        cursor: var(--cursor-interactive);
        transition: border-color .1s var(--ease-out), box-shadow .1s var(--ease-out);
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
        border-width: 2px;
        border-color: #0000;
        outline-style: none;
        justify-content: center;
        align-items: center;
        display: flex;
        position: relative
    }

    .color-swatch-picker__item:is([data-reduce-motion=true],[data-reduce-motion=true] *),.color-swatch-picker__item: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.color-swatch-picker__item:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .color-swatch-picker__item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.color-swatch-picker__item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.color-swatch-picker__item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .color-swatch-picker__item:focus-visible,.color-swatch-picker__item[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .color-swatch-picker__item[data-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .color-swatch-picker__item[data-selected=true] {
        border-color: var(--color-swatch-current);
        box-shadow: var(--field-shadow)
    }

    .color-swatch-picker__item[data-selected=true] .color-swatch-picker__swatch {
        transform: scale(.77)
    }

    .color-swatch-picker__swatch {
        border-radius: inherit;
        width: 100%;
        height: 100%;
        transition: transform .1s var(--ease-out);
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
        display: block
    }

    .color-swatch-picker__swatch:is([data-reduce-motion=true],[data-reduce-motion=true] *),.color-swatch-picker__swatch: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.color-swatch-picker__swatch:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .color-swatch-picker__swatch:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.color-swatch-picker__swatch:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.color-swatch-picker__swatch:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    @media (hover: hover) {
        .color-swatch-picker__swatch:hover {
            transform:scale(1.1)
        }
    }

    .color-swatch-picker__indicator {
        pointer-events: none;
        z-index: 10;
        justify-content: center;
        align-items: center;
        display: flex;
        position: absolute;
        inset: 0
    }

    .color-swatch-picker__indicator>* {
        width: 33.3333%;
        height: 33.3333%;
        color: var(--color-white);
        transition: transform .15s var(--ease-out);
        transform: scale(0)translateZ(0)
    }

    .color-swatch-picker__indicator>:is([data-reduce-motion=true],[data-reduce-motion=true] *),.color-swatch-picker__indicator>: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.color-swatch-picker__indicator>:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .color-swatch-picker__indicator>:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.color-swatch-picker__indicator>:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.color-swatch-picker__indicator>:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .color-swatch-picker__indicator[data-light-color=true] .color-swatch-picker__indicator>* {
        color: var(--color-black)
    }

    .color-swatch-picker__item[data-selected=true] .color-swatch-picker__indicator>* {
        transform: scale(1)translateZ(0)
    }

    .color-swatch-picker--stack {
        flex-direction: column
    }

    .color-swatch-picker--xs .color-swatch-picker__item {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        border-radius: calc(var(--radius) * 1);
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .color-swatch-picker--sm .color-swatch-picker__item {
        width: calc(var(--spacing) * 6);
        height: calc(var(--spacing) * 6);
        border-radius: calc(var(--radius) * 1.5);
        border-style: var(--tw-border-style);
        border-width: 2px
    }

    .color-swatch-picker--lg .color-swatch-picker__item {
        width: calc(var(--spacing) * 9);
        height: calc(var(--spacing) * 9);
        border-radius: calc(var(--radius) * 3);
        border-style: var(--tw-border-style);
        border-width: 3px
    }

    .color-swatch-picker--xl .color-swatch-picker__item {
        width: calc(var(--spacing) * 10);
        height: calc(var(--spacing) * 10);
        border-radius: calc(var(--radius) * 3);
        border-style: var(--tw-border-style);
        border-width: 3px
    }

    .color-swatch-picker--square .color-swatch-picker__item {
        border-radius: calc(var(--radius) * 1.5)
    }

    .color-swatch-picker--square .color-swatch-picker__item .color-swatch-picker__swatch,.color-swatch-picker--square .color-swatch-picker__item[data-selected=true] .color-swatch-picker__swatch {
        border-radius: calc(var(--radius) * 1)
    }

    .color-swatch-picker--square.color-swatch-picker--xs .color-swatch-picker__item,.color-swatch-picker--square.color-swatch-picker--xs .color-swatch-picker__item .color-swatch-picker__swatch,.color-swatch-picker--square.color-swatch-picker--xs .color-swatch-picker__item[data-selected=true] .color-swatch-picker__swatch {
        border-radius: calc(var(--radius) * .75)
    }

    .color-swatch-picker--square.color-swatch-picker--sm .color-swatch-picker__item,.color-swatch-picker--square.color-swatch-picker--sm .color-swatch-picker__item .color-swatch-picker__swatch {
        border-radius: calc(var(--radius) * 1)
    }

    .color-swatch-picker--square.color-swatch-picker--sm .color-swatch-picker__item[data-selected=true] .color-swatch-picker__swatch {
        border-radius: calc(var(--radius) * .75)
    }

    .color-swatch-picker--square.color-swatch-picker--lg .color-swatch-picker__item {
        border-radius: calc(var(--radius) * 1.5)
    }

    .color-swatch-picker--square.color-swatch-picker--lg .color-swatch-picker__item .color-swatch-picker__swatch,.color-swatch-picker--square.color-swatch-picker--lg .color-swatch-picker__item[data-selected=true] .color-swatch-picker__swatch {
        border-radius: calc(var(--radius) * 1)
    }

    .color-swatch-picker--square.color-swatch-picker--xl .color-swatch-picker__item {
        border-radius: calc(var(--radius) * 1.5)
    }

    .color-swatch-picker--square.color-swatch-picker--xl .color-swatch-picker__item .color-swatch-picker__swatch,.color-swatch-picker--square.color-swatch-picker--xl .color-swatch-picker__item[data-selected=true] .color-swatch-picker__swatch {
        border-radius: calc(var(--radius) * 1)
    }

    .color-input-group {
        height: calc(var(--spacing) * 9);
        border-radius: var(--field-radius,calc(var(--radius) * 1.5));
        border-style: var(--tw-border-style);
        background-color: var(--field-background,var(--default));
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--field-foreground,var(--foreground));
        --tw-shadow: var(--field-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        border-width: 1px;
        border-width: var(--border-width-field);
        border-color: var(--field-border);
        transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
        outline-style: none;
        align-items: center;
        display: inline-flex;
        overflow: hidden
    }

    .color-input-group:is([data-reduce-motion=true],[data-reduce-motion=true] *),.color-input-group: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.color-input-group:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .color-input-group:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.color-input-group:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.color-input-group:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    @media (hover: hover) {
        .color-input-group:hover:not(:focus-within),.color-input-group[data-hovered=true]:not([data-focus-within=true]) {
            background-color:var(--field-hover);
            border-color: var(--field-border-hover)
        }
    }

    .color-input-group[data-focus-within=true],.color-input-group: focus-within {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-outline-style: none;
        outline-style: none
    }

    .color-input-group[data-invalid=true] {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .color-input-group[data-invalid=true]: focus,.color-input-group[data-invalid=true]:focus-visible,.color-input-group[data-invalid=true][data-focused=true],.color-input-group[data-invalid=true][data-focus-visible=true],.color-input-group[data-invalid=true]:focus-within,.color-input-group[data-invalid=true][data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .color-input-group[data-invalid=true] {
        background-color: var(--field-focus);
        border-color: var(--color-field-border-invalid)
    }

    .color-input-group[data-disabled=true],.color-input-group[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .color-input-group__input {
        cursor: text;
        border-style: var(--tw-border-style);
        height: 100%;
        padding-inline:calc(var(--spacing) * 3);padding-block: calc(var(--spacing) * 2);
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        background-color: #0000;
        border-width: 0;
        border-radius: 0;
        outline-style: none;
        flex: 1;
        align-items: center;
        display: flex
    }

    @media (min-width: 40rem) {
        .color-input-group__input {
            font-size:var(--text-sm);
            line-height: var(--tw-leading,var(--text-sm--line-height))
        }
    }

    .color-input-group__input::placeholder {
        color: var(--field-placeholder,var(--muted))
    }

    .color-input-group:has([data-slot=color-input-group-prefix]) .color-input-group__input {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
        padding-inline-start:calc(var(--spacing) * 2)}

    .color-input-group: has([data-slot=color-input-group-suffix]) .color-input-group__input {
        border-start-end-radius:0;
        border-end-end-radius: 0;
        padding-inline-end:calc(var(--spacing) * 2)}

    .color-input-group__input: focus,.color-input-group__input:focus-visible {
        --tw-outline-style:none;
        outline-style: none
    }

    .color-input-group__prefix {
        color: var(--field-placeholder,var(--muted));
        flex-shrink: 0;
        align-items: center;
        margin-inline-start:calc(var(--spacing) * 3);margin-inline-end: 0;
        display: flex
    }

    .color-input-group__suffix {
        color: var(--field-placeholder,var(--muted));
        flex-shrink: 0;
        align-items: center;
        margin-inline-end:calc(var(--spacing) * 3);display: flex
    }

    .color-input-group--secondary {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        background-color: var(--color-input-group-bg);
        --color-input-group-bg: var(--default);
        --color-input-group-bg-hover: var(--default-hover);
        --color-input-group-bg-focus: var(--default)
    }

    @media (hover: hover) {
        .color-input-group--secondary:hover:not(:focus-within),.color-input-group--secondary[data-hovered=true]:not([data-focus-within=true]) {
            background-color:var(--color-input-group-bg-hover)
        }
    }

    .color-input-group--secondary:focus-within,.color-input-group--secondary[data-focus-within=true] {
        background-color: var(--color-input-group-bg-focus)
    }

    .color-input-group--secondary[data-invalid=true] {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .color-input-group--secondary[data-invalid=true]: focus,.color-input-group--secondary[data-invalid=true]:focus-visible,.color-input-group--secondary[data-invalid=true][data-focused=true],.color-input-group--secondary[data-invalid=true][data-focus-visible=true],.color-input-group--secondary[data-invalid=true]:focus-within,.color-input-group--secondary[data-invalid=true][data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .color-input-group--secondary[data-invalid=true] {
        border-color: var(--color-field-border-invalid);
        background-color: var(--color-input-group-bg-focus)
    }

    .color-input-group--secondary [data-slot=color-input-group-input] {
        background-color: #0000
    }

    .color-input-group--full-width {
        width: 100%
    }

    .color-field {
        gap: var(--spacing);
        flex-direction: column;
        display: flex
    }

    :is(.color-field[data-invalid=true],.color-field[aria-invalid=true]) [data-slot=description] {
        display: none
    }

    .color-field [data-slot=label] {
        width: fit-content
    }

    .color-field--full-width {
        width: 100%
    }

    .slider {
        gap: var(--spacing);
        grid-template-columns: 1fr auto;
        grid-template-areas: "label output""track track";
        width: 100%;
        display: grid
    }

    .slider [data-slot=label] {
        width: fit-content;
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        grid-area: label
    }

    .slider .slider__output {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        --tw-numeric-spacing: tabular-nums;
        font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
        grid-area: output
    }

    .slider .slider__track {
        border-radius: calc(var(--radius) * 1.5);
        background-color: var(--default);
        grid-area: track;
        position: relative
    }

    .slider .slider__fill {
        pointer-events: none;
        background-color: var(--accent);
        position: absolute
    }

    .slider .slider__thumb {
        cursor: grab;
        border-radius: calc(var(--radius) * 1.5);
        background-color: var(--accent);
        -webkit-tap-highlight-color: transparent;
        transition: background-color .25s var(--ease-smooth), transform .25s var(--ease-out), box-shadow .15s var(--ease-out);
        justify-content: center;
        align-items: center;
        display: flex;
        position: absolute
    }

    .slider .slider__thumb:is([data-reduce-motion=true],[data-reduce-motion=true] *),.slider .slider__thumb: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.slider .slider__thumb:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .slider .slider__thumb:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.slider .slider__thumb:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.slider .slider__thumb:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .slider .slider__thumb:after {
        z-index: 10;
        border-radius: calc(var(--radius) * 1);
        background-color: var(--accent-foreground);
        color: var(--color-black);
        --tw-shadow: var(--field-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        content: "";
        transform-origin: 50%;
        transition-property: all;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        position: relative
    }

    .slider .slider__thumb:after:is() {
        transition-property: none
    }

    @media (prefers-reduced-motion:reduce) {
        .slider .slider__thumb:after:not(:is()) {
            transition-property: none
        }
    }

    .slider .slider__thumb[data-dragging=true] {
        cursor: grabbing
    }

    .slider .slider__thumb[data-dragging=true]: after {
        scale:.9
    }

    .slider .slider__thumb[data-dragging=true]: after:is() {
        --tw-scale-x:100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }

    @media (prefers-reduced-motion:reduce) {
        .slider .slider__thumb[data-dragging=true]:after:not(:is()) {
            --tw-scale-x: 100%;
            --tw-scale-y: 100%;
            --tw-scale-z: 100%;
            scale: var(--tw-scale-x) var(--tw-scale-y)
        }
    }

    .slider .slider__thumb[data-focus-visible=true] {
        z-index: 10;
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .slider .slider__thumb[data-disabled=true] {
        cursor: default
    }

    .slider:disabled,.slider[data-disabled=true],.slider[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    :is(.slider:disabled,.slider[data-disabled=true],.slider[aria-disabled=true]) [data-slot=label] {
        opacity: 1
    }

    .slider[data-orientation=horizontal] {
        flex-direction: column
    }

    .slider[data-orientation=horizontal] .slider__track {
        height: calc(var(--spacing) * 5);
        border-inline-style:var(--tw-border-style);border-inline-width: .75rem;
        border-inline-color:#0000;width: 100%
    }

    .slider[data-orientation=horizontal] .slider__track[data-fill-start=true] {
        border-inline-start-color: var(--accent)
    }

    .slider[data-orientation=horizontal] .slider__track[data-fill-end=true] {
        border-inline-end-color: var(--accent)
    }

    .slider[data-orientation=horizontal] .slider__fill,.slider[data-orientation=horizontal] .slider__thumb {
        height: 100%
    }

    .slider[data-orientation=horizontal] .slider__thumb {
        width: 1.75rem;
        top: 50%
    }

    .slider[data-orientation=horizontal] .slider__thumb: after {
        width:1.5rem;
        height: 1rem
    }

    .slider[data-orientation=vertical] {
        gap: calc(var(--spacing) * 2);
        flex-direction: row;
        grid-template: "output""track"1fr"label"/1fr;
        height: 100%
    }

    .slider[data-orientation=vertical] .slider__output,.slider[data-orientation=vertical] [data-slot=label] {
        text-align: center
    }

    .slider[data-orientation=vertical] .slider__track {
        height: 100%;
        width: calc(var(--spacing) * 5);
        border-block-style:var(--tw-border-style);border-block-width: .75rem;
        border-block-color:#0000;justify-self: center
    }

    .slider[data-orientation=vertical] .slider__track[data-fill-start=true] {
        border-bottom-color: var(--accent)
    }

    .slider[data-orientation=vertical] .slider__track[data-fill-end=true] {
        border-top-color: var(--accent)
    }

    .slider[data-orientation=vertical] .slider__fill,.slider[data-orientation=vertical] .slider__thumb {
        width: 100%
    }

    .slider[data-orientation=vertical] .slider__thumb {
        height: 1.75rem;
        left: 50%
    }

    .slider[data-orientation=vertical] .slider__thumb: after {
        width:1rem;
        height: 1.5rem
    }

    .switch {
        align-items: flex-start;
        gap: var(--spacing);
        -webkit-tap-highlight-color: transparent;
        cursor: var(--cursor-interactive);
        --switch-control-bg: var(--default);
        --switch-control-bg-hover: var(--switch-control-bg);
        flex-direction: column;
        display: flex
    }

    @supports (color: color-mix(in lab, red, red)) {
        .switch {
            --switch-control-bg-hover:color-mix(in oklab, var(--switch-control-bg), transparent 20%)
        }
    }

    .switch {
        --switch-control-bg-pressed: var(--switch-control-bg-hover);
        --switch-control-bg-checked: var(--accent);
        --switch-control-bg-checked-hover: var(--accent-hover)
    }

    .switch[data-disabled=true],.switch[data-disabled=true] [data-slot=description],.switch[data-disabled=true] [data-slot=field-error] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .switch[data-disabled=true] .switch__thumb {
        background-color: var(--default-foreground)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .switch[data-disabled=true] .switch__thumb {
            background-color:color-mix(in oklab, var(--default-foreground) 20%, transparent)
        }
    }

    .switch>[data-slot=description] {
        width: 100%;
        min-width: 0;
        padding-inline-start:3.25rem}

    .switch>[data-slot=field-error] {
        width: 100%;
        min-width: 0;
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        color: var(--muted);
        padding-inline-start:3.25rem}

    .switch.switch--sm>[data-slot=description],.switch.switch--sm>[data-slot=field-error] {
        padding-inline-start: 2.75rem
    }

    .switch.switch--lg>[data-slot=description],.switch.switch--lg>[data-slot=field-error] {
        padding-inline-start: 3.75rem
    }

    :is(.switch:disabled[aria-checked=true],.switch: disabled[data-selected=true],.switch[data-disabled=true][aria-checked=true],.switch[data-disabled=true][data-selected=true],.switch[aria-disabled=true][aria-checked=true],.switch[aria-disabled=true][data-selected=true]) .switch__thumb {
        opacity:.4
    }

    .switch__control {
        border-radius: calc(var(--radius) * 1.5);
        background-color: var(--switch-control-bg);
        width: 2.5rem;
        height: 1.25rem;
        transition: background-color .25s var(--ease-smooth), box-shadow .15s var(--ease-out);
        flex-shrink: 0;
        align-items: center;
        display: flex;
        position: relative;
        overflow: hidden
    }

    .switch__control:is([data-reduce-motion=true],[data-reduce-motion=true] *),.switch__control: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.switch__control:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .switch__control:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.switch__control:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.switch__control:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .switch:focus-visible .switch__control,.switch [data-slot=switch-content][data-focus-visible=true] .switch__control {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .switch:has([data-slot=switch-content][data-focus-visible=true]) .switch__control {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .switch:hover .switch__control,.switch [data-slot=switch-content][data-hovered=true] .switch__control {
        background-color: var(--switch-control-bg-hover)
    }

    .switch:has([data-slot=switch-content][data-hovered=true]) .switch__control {
        background-color: var(--switch-control-bg-hover)
    }

    .switch:active .switch__control,.switch [data-slot=switch-content][data-pressed=true] .switch__control {
        background-color: var(--switch-control-bg-pressed)
    }

    .switch:has([data-slot=switch-content][data-pressed=true]) .switch__control {
        background-color: var(--switch-control-bg-pressed)
    }

    :is(.switch:active .switch__control,.switch:has([data-slot=switch-content][data-pressed=true]) .switch__control,.switch [data-slot=switch-content][data-pressed=true] .switch__control): is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.switch:active .switch__control,.switch:has([data-slot=switch-content][data-pressed=true]) .switch__control,.switch [data-slot=switch-content][data-pressed=true] .switch__control):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.switch:active .switch__control,.switch:has([data-slot=switch-content][data-pressed=true]) .switch__control,.switch [data-slot=switch-content][data-pressed=true] .switch__control):is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transform:none
    }

    @media (prefers-reduced-motion:reduce) {
        :is(.switch:active .switch__control,.switch:has([data-slot=switch-content][data-pressed=true]) .switch__control,.switch [data-slot=switch-content][data-pressed=true] .switch__control):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.switch:active .switch__control,.switch:has([data-slot=switch-content][data-pressed=true]) .switch__control,.switch [data-slot=switch-content][data-pressed=true] .switch__control):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.switch:active .switch__control,.switch:has([data-slot=switch-content][data-pressed=true]) .switch__control,.switch [data-slot=switch-content][data-pressed=true] .switch__control):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transform: none
        }
    }

    .switch[aria-checked=true] .switch__control,.switch[data-selected=true] .switch__control {
        background-color: var(--switch-control-bg-checked)
    }

    .switch[aria-checked=true]: hover .switch__control,.switch[data-selected=true]:hover .switch__control,.switch[aria-checked=true][data-hovered=true] .switch__control,.switch[data-selected=true][data-hovered=true] .switch__control,.switch[aria-checked=true]:active .switch__control,.switch[data-selected=true]:active .switch__control,.switch[aria-checked=true][data-pressed=true] .switch__control,.switch[data-selected=true][data-pressed=true] .switch__control {
        background-color:var(--switch-control-bg-checked-hover)
    }

    .switch:has([data-slot=switch-content][data-hovered=true])[data-selected=true] .switch__control {
        background-color: var(--switch-control-bg-checked-hover)
    }

    .switch:has([data-slot=switch-content][data-pressed=true])[data-selected=true] .switch__control {
        background-color: var(--switch-control-bg-checked-hover)
    }

    .switch__content {
        cursor: inherit;
        align-items: center;
        gap: calc(var(--spacing) * 3);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--foreground);
        --tw-outline-style: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        outline-style: none;
        display: inline-flex;
        position: relative
    }

    .switch--sm .switch__control {
        border-radius: calc(var(--radius) * 1);
        width: 2rem;
        height: 1rem
    }

    .switch--lg .switch__control {
        width: 3rem;
        height: 1.5rem
    }

    .switch__thumb {
        transform-origin: 50%;
        border-radius: calc(var(--radius) * 1);
        background-color: var(--color-white);
        color: var(--color-black);
        --tw-shadow: var(--field-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        width: 1.375rem;
        height: 1rem;
        transition: margin .3s var(--ease-out-fluid), background-color .2s var(--ease-out);
        margin-inline-start:calc(var(--spacing) * .5);display: flex
    }

    .switch__thumb:is([data-reduce-motion=true],[data-reduce-motion=true] *),.switch__thumb: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.switch__thumb:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .switch__thumb:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.switch__thumb:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.switch__thumb:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .switch[aria-checked=true] .switch__thumb,.switch[data-selected=true] .switch__thumb {
        background-color: var(--accent-foreground);
        color: var(--accent);
        margin-inline-start:calc(100% - 1.5rem);box-shadow: 0 0 5px #00000005,0 2px 10px #0000000f,0 0 1px #0000004d
    }

    .switch--sm .switch__thumb {
        border-radius: calc(var(--radius) * .75);
        width: 1.03125rem;
        height: .75rem
    }

    .switch[aria-checked=true] : is(.switch--sm .switch__thumb),.switch[data-selected=true] :is(.switch--sm .switch__thumb) {
        margin-inline-start:calc(100% - 1.15625rem)
    }

    .switch--lg .switch__thumb {
        border-radius: calc(var(--radius) * 1.5);
        width: 1.71875rem;
        height: 1.25rem
    }

    .switch[aria-checked=true] : is(.switch--lg .switch__thumb),.switch[data-selected=true] :is(.switch--lg .switch__thumb) {
        margin-inline-start:calc(100% - 1.84375rem)
    }

    .switch__thumb>* {
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        display: flex
    }

    .switch__label {
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--foreground)
    }

    .switch [data-slot=label] {
        -webkit-user-select: none;
        user-select: none
    }

    .switch__content [data-slot=label] {
        cursor: var(--cursor-interactive)
    }

    .switch [data-slot=description] {
        cursor: default;
        -webkit-user-select: none;
        user-select: none
    }

    .switch-group {
        gap: calc(var(--spacing) * 6);
        flex-direction: column;
        display: flex
    }

    .switch-group__items {
        gap: calc(var(--spacing) * 4);
        display: flex
    }

    .switch-group--horizontal .switch-group__items {
        flex-direction: row
    }

    .switch-group--vertical .switch-group__items {
        flex-direction: column
    }

    .badge {
        justify-content: center;
        align-items: center;
        gap: calc(var(--spacing) * .5);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        min-height: calc(var(--spacing) * 7);
        min-width: calc(var(--spacing) * 7);
        border-radius: calc(var(--radius) * 3);
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        --tw-leading: 1.34;
        --badge-bg: var(--default);
        --badge-fg: var(--default-foreground);
        --badge-border: var(--background);
        background-color: var(--badge-bg);
        color: var(--badge-fg);
        border: 1px solid var(--badge-border);
        background-clip: padding-box;
        flex-shrink: 0;
        line-height: 1.34;
        display: inline-flex
    }

    .badge__label {
        padding-inline:calc(var(--spacing) * .5)}

    .badge-anchor {
        flex-shrink: 0;
        display: inline-flex;
        position: relative
    }

    .badge--lg {
        min-height: calc(var(--spacing) * 8);
        min-width: calc(var(--spacing) * 8);
        border-radius: calc(var(--radius) * 2);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-leading: 1.43;
        line-height: 1.43
    }

    .badge--sm {
        min-height: calc(var(--spacing) * 4);
        min-width: calc(var(--spacing) * 4);
        border-radius: calc(var(--radius) * 1.5);
        --tw-leading: 1.34;
        font-size: 10px;
        line-height: 1.34
    }

    .badge--accent {
        --badge-fg: var(--accent-soft-foreground)
    }

    .badge--default {
        --badge-fg: var(--default-foreground)
    }

    .badge--success {
        --badge-fg: var(--success-soft-foreground)
    }

    .badge--warning {
        --badge-fg: var(--warning-soft-foreground)
    }

    .badge--danger {
        --badge-fg: var(--danger-soft-foreground)
    }

    .badge--top-right {
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(25%,-25%)
    }

    .badge--top-left {
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-25%,-25%)
    }

    .badge--bottom-right {
        position: absolute;
        bottom: 0;
        right: 0;
        transform: translate(25%,25%)
    }

    .badge--bottom-left {
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translate(-25%,25%)
    }

    .badge--primary.badge--accent {
        --badge-bg: var(--accent);
        --badge-fg: var(--accent-foreground)
    }

    .badge--primary.badge--default {
        --badge-bg: var(--default);
        --badge-fg: var(--default-foreground)
    }

    .badge--primary.badge--success {
        --badge-bg: var(--success);
        --badge-fg: var(--success-foreground)
    }

    .badge--primary.badge--warning {
        --badge-bg: var(--warning);
        --badge-fg: var(--warning-foreground)
    }

    .badge--primary.badge--danger {
        --badge-bg: var(--danger);
        --badge-fg: var(--danger-foreground)
    }

    .badge--soft.badge--accent {
        --badge-bg: var(--accent-soft);
        --badge-fg: var(--accent-soft-foreground)
    }

    .badge--soft.badge--default {
        --badge-bg: var(--default-soft);
        --badge-fg: var(--default-soft-foreground)
    }

    .badge--soft.badge--success {
        --badge-bg: var(--success-soft);
        --badge-fg: var(--success-soft-foreground)
    }

    .badge--soft.badge--warning {
        --badge-bg: var(--warning-soft);
        --badge-fg: var(--warning-soft-foreground)
    }

    .badge--soft.badge--danger {
        --badge-bg: var(--danger-soft);
        --badge-fg: var(--danger-soft-foreground)
    }

    .chip {
        align-items: center;
        gap: calc(var(--spacing) * .5);
        border-radius: calc(var(--radius) * 2);
        width: fit-content;
        padding-inline:calc(var(--spacing) * 2);padding-block: calc(var(--spacing) * .5);
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        --tw-leading: calc(var(--spacing) * 5);
        line-height: calc(var(--spacing) * 5);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        --chip-bg: var(--default);
        --chip-fg: currentColor;
        background-color: var(--chip-bg);
        color: var(--chip-fg);
        flex-shrink: 0;
        display: inline-flex
    }

    .chip__label {
        padding-inline:calc(var(--spacing) * .5)}

    .chip--accent {
        --chip-fg: var(--accent-soft-foreground)
    }

    .chip--danger {
        --chip-fg: var(--danger-soft-foreground)
    }

    .chip--default {
        --chip-fg: var(--default-foreground)
    }

    .chip--success {
        --chip-fg: var(--success-soft-foreground)
    }

    .chip--warning {
        --chip-fg: var(--warning-soft-foreground)
    }

    .chip--tertiary {
        --chip-bg: transparent
    }

    .chip--sm {
        padding-inline:var(--spacing);font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        padding-block:0}

    .chip--md {
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height))
    }

    .chip--lg {
        padding-inline:calc(var(--spacing) * 3);padding-block: var(--spacing);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .chip--primary.chip--accent {
        --chip-bg: var(--accent);
        --chip-fg: var(--accent-foreground)
    }

    .chip--primary.chip--success {
        --chip-bg: var(--success);
        --chip-fg: var(--success-foreground)
    }

    .chip--primary.chip--warning {
        --chip-bg: var(--warning);
        --chip-fg: var(--warning-foreground)
    }

    .chip--primary.chip--danger {
        --chip-bg: var(--danger);
        --chip-fg: var(--danger-foreground)
    }

    .chip--accent.chip--soft {
        --chip-bg: var(--accent-soft);
        --chip-fg: var(--accent-soft-foreground)
    }

    .chip--success.chip--soft {
        --chip-bg: var(--success-soft);
        --chip-fg: var(--success-soft-foreground)
    }

    .chip--warning.chip--soft {
        --chip-bg: var(--warning-soft);
        --chip-fg: var(--warning-soft-foreground)
    }

    .chip--danger.chip--soft {
        --chip-bg: var(--danger-soft);
        --chip-fg: var(--danger-soft-foreground)
    }

    .chip--default.chip--soft {
        --chip-bg: var(--default-soft);
        --chip-fg: var(--default-soft-foreground)
    }

    .table-root {
        grid-template-columns: minmax(0,1fr);
        width: 100%;
        display: grid;
        position: relative;
        overflow: clip
    }

    .table__scroll-container {
        scrollbar-width: var(--scrollbar-width);
        scrollbar-color: var(--scrollbar-color);
        scrollbar-gutter: var(--scrollbar-gutter);
        scrollbar-gutter: auto;
        overflow-x: auto
    }

    .table-root--primary {
        background-color: var(--surface-secondary);
        padding-inline:var(--spacing);padding-bottom: var(--spacing);
        border-radius: min(32px, calc(var(--radius) * 2.5))
    }

    .table-root--secondary .table__header {
        border-bottom-style: var(--tw-border-style);
        background-color: #0000;
        border-bottom-width: 0
    }

    .table-root--secondary .table__column {
        background-color: var(--surface-secondary)
    }

    .table-root--secondary :is(th.table__column: first-child,[role=row]>[role=presentation]:first-of-type>.table__column) {
        border-start-start-radius:min(32px, var(--radius-2xl));
        border-end-start-radius: min(32px, var(--radius-2xl))
    }

    .table-root--secondary :is(th.table__column: last-child,[role=row]>[role=presentation]:last-of-type>.table__column) {
        border-start-end-radius:min(32px, var(--radius-2xl));
        border-end-end-radius: min(32px, var(--radius-2xl))
    }

    .table-root--secondary .table__body {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .table-root--secondary .table__body tr: first-child td:first-child,.table-root--secondary .table__body tr:first-child td:last-child,.table-root--secondary .table__body tr:last-child td:first-child,.table-root--secondary .table__body tr:last-child td:last-child {
        border-radius:0
    }

    .table-root--secondary .table__body:not(tbody) {
        border-radius: 0;
        overflow: visible
    }

    .table-root--secondary .table__row .table__cell {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
        border-color: var(--separator-tertiary)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .table-root--secondary .table__row .table__cell {
            border-color:color-mix(in oklab, var(--separator-tertiary) 50%, transparent)
        }
    }

    .table-root--secondary .table__row .table__cell {
        background-color: #0000
    }

    @media (hover: hover) {
        .table-root--secondary .table__row:hover .table__cell,.table-root--secondary .table__row[data-hovered=true] .table__cell {
            background-color:var(--default)
        }

        @supports (color: color-mix(in lab, red, red)) {
            .table-root--secondary .table__row:hover .table__cell,.table-root--secondary .table__row[data-hovered=true] .table__cell {
                background-color:color-mix(in oklab, var(--default) 50%, transparent)
            }
        }
    }

    .table__content {
        border-collapse: separate;
        --tw-border-spacing-x: 0px;
        --tw-border-spacing-y: 0px;
        width: 100%;
        border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height))
    }

    .table-root--primary .table__content {
        overflow: clip
    }

    .table__header {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
        border-color: var(--separator)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .table__header {
            border-color:color-mix(in oklab, var(--separator) 50%, transparent)
        }
    }

    .table__header {
        background-color: var(--surface-secondary)
    }

    .table__column {
        padding-inline:calc(var(--spacing) * 4);padding-block: calc(var(--spacing) * 2.5);
        text-align: start;
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--muted);
        position: relative
    }

    .table__column:after {
        content: "";
        pointer-events: none;
        height: calc(var(--spacing) * 4);
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        width: 1px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        border-radius: calc(var(--radius) * .5);
        background-color: var(--separator);
        inset-inline-end: calc(var(--spacing) * 0);
        position: absolute;
        top: 50%
    }

    .table__column:last-child:not(:only-child):after {
        content: none
    }

    .table__column[data-allows-sorting=true] {
        cursor: var(--cursor-interactive)
    }

    @media (hover: hover) {
        .table__column[data-allows-sorting=true]:hover,.table__column[data-allows-sorting=true][data-hovered=true] {
            color:var(--foreground)
        }
    }

    .table__column:focus-visible,.table__column[data-focus-visible=true] {
        border-radius: calc(var(--radius) * 1);
        --tw-outline-style: none;
        box-shadow: inset 0 0 0 2px var(--focus);
        outline-style: none
    }

    [role=row]>[role=presentation]: last-of-type:not(:only-of-type)>.table__column:after {
        content:none
    }

    .table__sortable-column-header {
        justify-content: space-between;
        align-items: center;
        display: flex
    }

    .table__sortable-column-indicator {
        width: calc(var(--spacing) * 3);
        height: calc(var(--spacing) * 3);
        transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
        transition-property: transform,translate,scale,rotate;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-duration: .1s;
        --tw-ease: var(--ease-out);
        transition-duration: .1s;
        transition-timing-function: var(--ease-out);
        place-content: center;
        display: inline-grid
    }

    .table__sortable-column-indicator[data-direction=descending] {
        rotate: 180deg
    }

    .table__body tr: first-child td:first-child {
        border-start-start-radius:min(32px, var(--radius-2xl))
    }

    .table__body tr: first-child td:last-child {
        border-start-end-radius:min(32px, var(--radius-2xl))
    }

    .table__body tr: last-child td:first-child {
        border-end-start-radius:min(32px, var(--radius-2xl))
    }

    .table__body tr: last-child td:last-child {
        border-end-end-radius:min(32px, var(--radius-2xl))
    }

    .table__body:not(tbody) {
        border-radius: min(32px, var(--radius-2xl));
        height: 100%;
        position: relative;
        overflow: clip
    }

    .table__row {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
        border-color: var(--separator);
        height: 100%;
        position: relative
    }

    @supports (color: color-mix(in lab, red, red)) {
        .table__row {
            border-color:color-mix(in oklab, var(--separator) 50%, transparent)
        }
    }

    .table__row:last-child {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 0
    }

    @media (hover: hover) {
        .table__row:hover .table__cell,.table__row[data-hovered=true] .table__cell {
            background-color:var(--surface)
        }

        @supports (color: color-mix(in lab, red, red)) {
            .table__row:hover .table__cell,.table__row[data-hovered=true] .table__cell {
                background-color:color-mix(in oklab, var(--surface) 40%, transparent)
            }
        }
    }

    .table__row[data-selected=true] .table__cell {
        background-color: var(--surface)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .table__row[data-selected=true] .table__cell {
            background-color:color-mix(in oklab, var(--surface) 10%, transparent)
        }
    }

    .table__row[aria-disabled=true],.table__row[data-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .table__row:focus-visible,.table__row[data-focus-visible=true] {
        --tw-outline-style: none;
        outline-style: none
    }

    .table__row[data-dragging=true] {
        opacity: .5
    }

    .table__row[data-drop-target=true] .table__cell {
        background-color: var(--accent-soft)
    }

    .table__cell {
        background-color: var(--surface);
        height: 100%;
        padding-inline:calc(var(--spacing) * 4);padding-block: calc(var(--spacing) * 3);
        vertical-align: middle;
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--foreground);
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
        border-color: var(--separator-tertiary)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .table__cell {
            border-color:color-mix(in oklab, var(--separator-tertiary) 50%, transparent)
        }
    }

    .table__cell:focus-visible,.table__cell[data-focus-visible=true] {
        border-radius: calc(var(--radius) * 1);
        --tw-outline-style: none;
        box-shadow: inset 0 0 0 2px var(--focus);
        outline-style: none
    }

    .table__row:is(:focus-visible,[data-focus-visible=true]) : is(.table__cell,.table__column) {
        --tw-shadow:0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .table__row:is(:focus-visible,[data-focus-visible=true])>: is(.table__cell,.table__column):only-child,.table__row:is(:focus-visible,[data-focus-visible=true])>:only-child :is(.table__cell,.table__column) {
        border-radius:calc(var(--radius) * 1);
        --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color,var(--focus));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        outline-style: none
    }

    .table__row:is(:focus-visible,[data-focus-visible=true])>: is(.table__cell,.table__column):first-child:not(:only-child),.table__row:is(:focus-visible,[data-focus-visible=true])>:first-child:not(:only-child) :is(.table__cell,.table__column) {
        --tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,var(--focus)), inset 0 2px 0 0 var(--tw-shadow-color,var(--focus)), inset 0 -2px 0 0 var(--tw-shadow-color,var(--focus));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        border-start-start-radius: calc(var(--radius) * 1);
        border-end-start-radius: calc(var(--radius) * 1);
        outline-style: none
    }

    .table__row:is(:focus-visible,[data-focus-visible=true])>: is(.table__cell,.table__column):last-child:not(:only-child),.table__row:is(:focus-visible,[data-focus-visible=true])>:last-child:not(:only-child) :is(.table__cell,.table__column) {
        --tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,var(--focus)), inset 0 2px 0 0 var(--tw-shadow-color,var(--focus)), inset 0 -2px 0 0 var(--tw-shadow-color,var(--focus));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        border-start-end-radius: calc(var(--radius) * 1);
        border-end-end-radius: calc(var(--radius) * 1);
        outline-style: none
    }

    .table__row:is(:focus-visible,[data-focus-visible=true])>: is(.table__cell,.table__column):not(:first-child):not(:last-child):not(:only-child),.table__row:is(:focus-visible,[data-focus-visible=true])>:not(:first-child):not(:last-child):not(:only-child) :is(.table__cell,.table__column) {
        --tw-shadow:inset 0 2px 0 0 var(--tw-shadow-color,var(--focus)), inset 0 -2px 0 0 var(--tw-shadow-color,var(--focus));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        outline-style: none
    }

    .table__cell[data-tree-column] {
        padding-inline-start: calc(1rem * var(--table-row-level,1))
    }

    .table__footer {
        padding-inline:calc(var(--spacing) * 4);padding-block: calc(var(--spacing) * 2.5);
        align-items: center;
        display: flex
    }

    .table__resizable-container {
        scrollbar-width: var(--scrollbar-width);
        scrollbar-color: var(--scrollbar-color);
        scrollbar-gutter: var(--scrollbar-gutter);
        scrollbar-gutter: auto;
        position: relative;
        overflow: auto
    }

    .table__column-resizer {
        height: calc(var(--spacing) * 4);
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        border-radius: calc(var(--radius) * .5);
        background-color: var(--separator);
        box-sizing: content-box;
        --tw-translate-x: calc(1 / 2 * 100%);
        width: 1px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        cursor: col-resize;
        touch-action: none;
        padding-inline:calc(var(--spacing) * 2);--tw-border-style: none;
        --tw-outline-style: none;
        inset-inline-end: calc(var(--spacing) * 0);
        background-clip: content-box;
        border-style: none;
        outline-style: none;
        position: absolute;
        top: 50%
    }

    .table__column-resizer[data-hovered=true],.table__column-resizer: hover,.table__column-resizer[data-resizing=true] {
        height:100%;
        width: calc(var(--spacing) * .5);
        background-color: var(--accent)
    }

    .table__column-resizer[data-focus-visible=true],.table__column-resizer: focus-visible {
        height:100%;
        width: calc(var(--spacing) * .5);
        background-color: var(--focus)
    }

    .table__column:has(.table__column-resizer):after {
        content: none
    }

    .table__load-more td,.table__load-more [role=rowheader] {
        padding-block: calc(var(--spacing) * 3);
        text-align: center
    }

    :is(.table__load-more td,.table__load-more [role=rowheader])>* {
        margin-inline: auto
    }

    .table__load-more-content {
        justify-content: center;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        padding-block:calc(var(--spacing) * 2);display: flex
    }

    .alert {
        justify-content: flex-start;
        align-items: flex-start;
        gap: calc(var(--spacing) * 4);
        background-color: var(--surface);
        width: 100%;
        padding-inline:calc(var(--spacing) * 4);padding-block: calc(var(--spacing) * 3);
        --tw-shadow: var(--surface-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        border-radius: min(32px, var(--radius-3xl));
        flex-direction: row;
        display: flex
    }

    .alert__content {
        flex-direction: column;
        flex-grow: 1;
        align-items: flex-start;
        height: 100%;
        display: flex
    }

    .alert__indicator {
        padding: var(--spacing);
        -webkit-user-select: none;
        user-select: none;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .alert__indicator [data-slot=alert-default-icon] {
        box-sizing: content-box;
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .alert__title {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-leading: calc(var(--spacing) * 6);
        line-height: calc(var(--spacing) * 6);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .alert__description {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--muted)
    }

    .alert--default .alert__indicator,.alert--default .alert__title {
        color: var(--foreground)
    }

    .alert--accent .alert__indicator,.alert--accent .alert__title {
        color: var(--accent-soft-foreground)
    }

    .alert--success .alert__indicator,.alert--success .alert__title {
        color: var(--success-soft-foreground)
    }

    .alert--warning .alert__indicator,.alert--warning .alert__title {
        color: var(--warning-soft-foreground)
    }

    .alert--danger .alert__indicator,.alert--danger .alert__title {
        color: var(--danger-soft-foreground)
    }

    .empty-state {
        padding: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--muted)
    }

    .skeleton {
        pointer-events: none;
        border-radius: calc(var(--radius) * .5);
        background-color: var(--surface-tertiary);
        position: relative;
        overflow: hidden
    }

    @supports (color: color-mix(in lab, red, red)) {
        .skeleton {
            background-color:color-mix(in oklab, var(--surface-tertiary) 70%, transparent)
        }
    }

    .skeleton--shimmer:after {
        --tw-translate-x: -100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        --tw-gradient-position: to right;
        animation: 2s linear infinite skeleton;
        position: absolute;
        inset: 0
    }

    @supports (background-image: linear-gradient(in lab, red, red)) {
        .skeleton--shimmer:after {
            --tw-gradient-position:to right in oklab
        }
    }

    .skeleton--shimmer:after {
        background-image: linear-gradient(var(--tw-gradient-stops));
        --tw-gradient-from: transparent;
        --tw-gradient-via: var(--surface-tertiary);
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
        --tw-gradient-to: transparent;
        --tw-content: "";
        content: var(--tw-content)
    }

    .skeleton--shimmer:has(.skeleton):after {
        content: none
    }

    .skeleton--shimmer:has(.skeleton):before {
        --tw-translate-x: -100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        --tw-content: "";
        content: var(--tw-content);
        z-index: 10;
        pointer-events: none;
        mix-blend-mode: overlay;
        background: linear-gradient(90deg,#0000 0%,#ffffff80 50%,#0000 100%);
        animation: 2s linear infinite skeleton;
        position: absolute;
        inset: 0
    }

    .skeleton--shimmer:has(.skeleton) .skeleton:after {
        content: none
    }

    .skeleton--pulse {
        animation: var(--animate-pulse)
    }

    .meter {
        gap: var(--spacing);
        --meter-fill: var(--accent);
        grid-template-columns: 1fr auto;
        grid-template-areas: "label output""track track";
        width: 100%;
        display: grid
    }

    .meter [data-slot=label] {
        width: fit-content;
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        grid-area: label
    }

    .meter .meter__output {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        --tw-numeric-spacing: tabular-nums;
        font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
        grid-area: output
    }

    .meter .meter__track {
        border-radius: calc(var(--radius) * .5);
        background-color: var(--default);
        height: calc(var(--spacing) * 2);
        grid-area: track;
        position: relative;
        overflow: hidden
    }

    .meter .meter__fill {
        border-radius: calc(var(--radius) * .5);
        background-color: var(--meter-fill);
        height: 100%;
        transition: width .3s var(--ease-out);
        inset-inline-start: calc(var(--spacing) * 0);
        position: absolute;
        top: 0
    }

    .meter .meter__fill:is([data-reduce-motion=true],[data-reduce-motion=true] *),.meter .meter__fill: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.meter .meter__fill:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .meter .meter__fill:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.meter .meter__fill:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.meter .meter__fill:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .meter:disabled,.meter[data-disabled=true],.meter[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    :is(.meter:disabled,.meter[data-disabled=true],.meter[aria-disabled=true]) [data-slot=label] {
        opacity: 1
    }

    .meter--sm .meter__track {
        height: var(--spacing);
        border-radius: calc(var(--radius) * .25)
    }

    .meter--sm .meter__fill {
        border-radius: calc(var(--radius) * .25)
    }

    .meter--lg .meter__track {
        height: calc(var(--spacing) * 3);
        border-radius: calc(var(--radius) * .75)
    }

    .meter--lg .meter__fill {
        border-radius: calc(var(--radius) * .75)
    }

    .meter--default {
        --meter-fill: var(--default-foreground)
    }

    .meter--accent {
        --meter-fill: var(--accent)
    }

    .meter--success {
        --meter-fill: var(--success)
    }

    .meter--warning {
        --meter-fill: var(--warning)
    }

    .meter--danger {
        --meter-fill: var(--danger)
    }

    .progress-bar {
        gap: var(--spacing);
        --progress-bar-fill: var(--accent);
        grid-template-columns: 1fr auto;
        grid-template-areas: "label output""track track";
        width: 100%;
        display: grid
    }

    .progress-bar [data-slot=label] {
        width: fit-content;
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        grid-area: label
    }

    .progress-bar .progress-bar__output {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        --tw-numeric-spacing: tabular-nums;
        font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
        grid-area: output
    }

    .progress-bar .progress-bar__track {
        border-radius: calc(var(--radius) * .5);
        background-color: var(--default);
        height: calc(var(--spacing) * 2);
        grid-area: track;
        position: relative;
        overflow: hidden
    }

    .progress-bar .progress-bar__fill {
        border-radius: calc(var(--radius) * .5);
        background-color: var(--progress-bar-fill);
        height: 100%;
        transition: width .3s var(--ease-out);
        inset-inline-start: calc(var(--spacing) * 0);
        position: absolute;
        top: 0
    }

    .progress-bar .progress-bar__fill:is([data-reduce-motion=true],[data-reduce-motion=true] *),.progress-bar .progress-bar__fill: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.progress-bar .progress-bar__fill:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .progress-bar .progress-bar__fill:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.progress-bar .progress-bar__fill:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.progress-bar .progress-bar__fill:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .progress-bar:not([aria-valuenow]) .progress-bar__fill {
        width: 40%;
        animation: 1.5s cubic-bezier(.65,0,.35,1) infinite progress-bar-indeterminate
    }

    .progress-bar:not([aria-valuenow]) .progress-bar__fill: is([data-reduce-motion=true],[data-reduce-motion=true] *),.progress-bar:not([aria-valuenow]) .progress-bar__fill:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.progress-bar:not([aria-valuenow]) .progress-bar__fill:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        animation:none
    }

    @media (prefers-reduced-motion:reduce) {
        .progress-bar:not([aria-valuenow]) .progress-bar__fill:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.progress-bar:not([aria-valuenow]) .progress-bar__fill:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.progress-bar:not([aria-valuenow]) .progress-bar__fill:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            animation: none
        }
    }

    .progress-bar:disabled,.progress-bar[data-disabled=true],.progress-bar[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    :is(.progress-bar:disabled,.progress-bar[data-disabled=true],.progress-bar[aria-disabled=true]) [data-slot=label] {
        opacity: 1
    }

    @keyframes progress-bar-indeterminate {
        0% {
            transform: translate(-100%)
        }

        to {
            transform: translate(350%)
        }
    }

    .progress-bar--sm .progress-bar__track {
        height: var(--spacing);
        border-radius: calc(var(--radius) * .25)
    }

    .progress-bar--sm .progress-bar__fill {
        border-radius: calc(var(--radius) * .25)
    }

    .progress-bar--lg .progress-bar__track {
        height: calc(var(--spacing) * 3);
        border-radius: calc(var(--radius) * .75)
    }

    .progress-bar--lg .progress-bar__fill {
        border-radius: calc(var(--radius) * .75)
    }

    .progress-bar--default {
        --progress-bar-fill: var(--default-foreground)
    }

    .progress-bar--accent {
        --progress-bar-fill: var(--accent)
    }

    .progress-bar--success {
        --progress-bar-fill: var(--success)
    }

    .progress-bar--warning {
        --progress-bar-fill: var(--warning)
    }

    .progress-bar--danger {
        --progress-bar-fill: var(--danger)
    }

    .progress-circle {
        --progress-circle-stroke: var(--accent);
        --progress-circle-track-stroke: var(--default);
        justify-content: center;
        align-items: center;
        display: inline-flex
    }

    .progress-circle .progress-circle__track {
        width: calc(var(--spacing) * 7);
        height: calc(var(--spacing) * 7)
    }

    .progress-circle .progress-circle__track-circle {
        stroke: var(--progress-circle-track-stroke)
    }

    .progress-circle .progress-circle__fill-circle {
        stroke: var(--progress-circle-stroke);
        transition: stroke-dashoffset .3s var(--ease-out)
    }

    .progress-circle .progress-circle__fill-circle:is([data-reduce-motion=true],[data-reduce-motion=true] *),.progress-circle .progress-circle__fill-circle: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.progress-circle .progress-circle__fill-circle:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .progress-circle .progress-circle__fill-circle:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.progress-circle .progress-circle__fill-circle:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.progress-circle .progress-circle__fill-circle:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .progress-circle:not([aria-valuenow]) .progress-circle__track {
        animation: 1s linear infinite progress-circle-spin
    }

    .progress-circle:not([aria-valuenow]) .progress-circle__track: is([data-reduce-motion=true],[data-reduce-motion=true] *),.progress-circle:not([aria-valuenow]) .progress-circle__track:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.progress-circle:not([aria-valuenow]) .progress-circle__track:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        animation:none
    }

    @media (prefers-reduced-motion:reduce) {
        .progress-circle:not([aria-valuenow]) .progress-circle__track:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.progress-circle:not([aria-valuenow]) .progress-circle__track:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.progress-circle:not([aria-valuenow]) .progress-circle__track:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            animation: none
        }
    }

    .progress-circle:disabled,.progress-circle[data-disabled=true],.progress-circle[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    @keyframes progress-circle-spin {
        0% {
            transform: rotate(0)
        }

        to {
            transform: rotate(360deg)
        }
    }

    .progress-circle--sm .progress-circle__track {
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5)
    }

    .progress-circle--lg .progress-circle__track {
        width: calc(var(--spacing) * 9);
        height: calc(var(--spacing) * 9)
    }

    .progress-circle--default {
        --progress-circle-stroke: var(--default-foreground)
    }

    .progress-circle--accent {
        --progress-circle-stroke: var(--accent)
    }

    .progress-circle--success {
        --progress-circle-stroke: var(--success)
    }

    .progress-circle--warning {
        --progress-circle-stroke: var(--warning)
    }

    .progress-circle--danger {
        --progress-circle-stroke: var(--danger)
    }

    .spinner {
        pointer-events: none;
        width: calc(var(--spacing) * 6);
        height: calc(var(--spacing) * 6);
        flex-shrink: 0;
        animation: .75s linear infinite spin;
        display: inline-flex
    }

    .spinner:is([data-reduce-motion=true],[data-reduce-motion=true] *),.spinner: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.spinner:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        animation:none
    }

    @media (prefers-reduced-motion:reduce) {
        .spinner:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.spinner:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.spinner:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            animation: none
        }
    }

    .spinner--sm {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .spinner--lg {
        width: calc(var(--spacing) * 8);
        height: calc(var(--spacing) * 8)
    }

    .spinner--xl {
        width: calc(var(--spacing) * 10);
        height: calc(var(--spacing) * 10)
    }

    .spinner--current {
        color: inherit
    }

    .spinner--accent {
        color: var(--accent)
    }

    .spinner--danger {
        color: var(--danger)
    }

    .spinner--success {
        color: var(--success)
    }

    .spinner--warning {
        color: var(--warning)
    }

    .toast-region {
        pointer-events: none;
        z-index: 50;
        --tw-outline-style: none;
        outline-style: none;
        width: calc(100vw - 2rem);
        position: fixed
    }

    @media (min-width: 40rem) {
        .toast-region {
            width:auto;
            min-width: var(--toast-width)
        }
    }

    .toast-region {
        display: block
    }

    .toast-region--bottom {
        bottom: calc(var(--spacing) * 4);
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        left: 50%
    }

    .toast-region--bottom-start {
        inset-inline-start: calc(var(--spacing) * 4);
        bottom: calc(var(--spacing) * 4)
    }

    .toast-region--bottom-end {
        inset-inline-end: calc(var(--spacing) * 4);
        bottom: calc(var(--spacing) * 4)
    }

    .toast-region--top {
        top: calc(var(--spacing) * 4);
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        left: 50%
    }

    .toast-region--top-start {
        inset-inline-start: calc(var(--spacing) * 4);
        top: calc(var(--spacing) * 4)
    }

    .toast-region--top-end {
        inset-inline-end: calc(var(--spacing) * 4);
        top: calc(var(--spacing) * 4)
    }

    .toast-region:focus-visible {
        outline-style: var(--tw-outline-style);
        outline-offset: 2px;
        outline-width: 2px;
        outline-color: var(--focus)
    }

    .toast {
        pointer-events: auto;
        justify-content: flex-start;
        align-items: flex-start;
        gap: calc(var(--spacing) * 1.5);
        background-color: var(--surface);
        padding-inline:calc(var(--spacing) * 4);padding-block: calc(var(--spacing) * 3);
        --tw-shadow: var(--overlay-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        border-radius: min(32px, var(--radius-3xl));
        flex-direction: row;
        display: flex;
        position: absolute;
        inset-inline: 0
    }

    .toast--bottom,.toast--bottom-start,.toast--bottom-end {
        bottom: 0
    }

    .toast--top,.toast--top-start,.toast--top-end {
        top: 0
    }

    .toast:not([data-frontmost=true]) {
        pointer-events: none;
        height: var(--front-height);
        overflow: hidden
    }

    .toast:not([data-frontmost=true]) .toast__close-button {
        pointer-events: none;
        opacity: 0;
        outline: none
    }

    .toast[data-hidden=true] {
        pointer-events: none;
        opacity: 0;
        display: flex
    }

    .toast:focus-visible {
        outline-style: var(--tw-outline-style);
        outline-offset: 2px;
        outline-width: 2px;
        outline-color: var(--focus)
    }

    .toast--bottom,.toast--bottom-start,.toast--bottom-end {
        view-transition-class: toast-bottom
    }

    .toast--top,.toast--top-start,.toast--top-end {
        view-transition-class: toast-top
    }

    .toast__content {
        flex-direction: column;
        flex-grow: 1;
        align-self: center;
        align-items: flex-start;
        height: 100%;
        display: flex
    }

    .toast__indicator {
        padding: var(--spacing);
        color: var(--overlay-foreground);
        -webkit-user-select: none;
        user-select: none;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .toast__indicator [data-slot=toast-default-icon] {
        box-sizing: content-box;
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .toast__indicator [data-slot=spinner],.toast__indicator [data-slot=spinner-icon] {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .toast__title {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-leading: calc(var(--spacing) * 5);
        line-height: calc(var(--spacing) * 5);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--overlay-foreground)
    }

    .toast__description {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--muted)
    }

    .toast__close-button {
        pointer-events: none;
        inset-inline-end: calc(var(--spacing) * -1);
        top: calc(var(--spacing) * -1);
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5);
        border-color: var(--border);
        background-color: var(--default);
        opacity: 0;
        position: absolute
    }

    @media (min-width: 40rem) {
        .toast__close-button {
            border-style:var(--tw-border-style);
            background-color: var(--overlay);
            border-width: 1px
        }
    }

    .toast__close-button {
        transition: opacity .15s var(--ease-smooth)
    }

    .toast__close-button:is([data-reduce-motion=true],[data-reduce-motion=true] *),.toast__close-button: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.toast__close-button:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .toast__close-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.toast__close-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.toast__close-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .toast__close-button [data-slot=close-button-icon] {
        width: calc(var(--spacing) * 3.5);
        height: calc(var(--spacing) * 3.5)
    }

    @media (min-width: 40rem) {
        .toast__close-button [data-slot=close-button-icon] {
            width:calc(var(--spacing) * 3);
            height: calc(var(--spacing) * 3)
        }
    }

    @media (hover: hover) {
        .toast__close-button:hover,.toast__close-button[data-hovered=true] {
            background-color:var(--default)
        }
    }

    .toast[data-frontmost=true]: hover .toast__close-button {
        pointer-events:auto;
        opacity: 1
    }

    .toast__action {
        margin-top: calc(var(--spacing) * 2)
    }

    @media (min-width: 40rem) {
        .toast__action {
            margin-top:0
        }
    }

    .toast--accent .toast__title {
        color: var(--accent-soft-foreground)
    }

    .toast--success .toast__title,.toast--success .toast__indicator {
        color: var(--success-soft-foreground)
    }

    .toast--warning .toast__title,.toast--warning .toast__indicator {
        color: var(--warning-soft-foreground)
    }

    .toast--danger .toast__title,.toast--danger .toast__indicator {
        color: var(--danger-soft-foreground)
    }

    ::view-transition-old(*) {
        will-change: translate, opacity
    }

    ::view-transition-new(*) {
        will-change: translate, opacity
    }

    ::view-transition-new(.toast-bottom):only-child {
        animation: .35s toast-slide-bottom-in
    }

    ::view-transition-old(.toast-bottom):only-child {
        animation: .35s forwards toast-slide-bottom-out
    }

    ::view-transition-new(.toast-top):only-child {
        animation: .35s toast-slide-top-in
    }

    ::view-transition-old(.toast-top):only-child {
        animation: .35s forwards toast-slide-top-out
    }

    @keyframes toast-slide-bottom-in {
        0% {
            opacity: 0;
            translate: 0 100%
        }
    }

    @keyframes toast-slide-bottom-out {
        to {
            opacity: 0;
            translate: 0 100%
        }
    }

    @keyframes toast-slide-top-in {
        0% {
            opacity: 0;
            translate: 0 -100%
        }
    }

    @keyframes toast-slide-top-out {
        to {
            opacity: 0;
            translate: 0 -100%
        }
    }

    .checkbox-group {
        flex-direction: column;
        display: flex
    }

    .checkbox-group [data-slot=checkbox] {
        margin-top: calc(var(--spacing) * 4)
    }

    .checkbox {
        align-items: flex-start;
        gap: var(--spacing);
        --tw-outline-style: none;
        -webkit-tap-highlight-color: transparent;
        cursor: var(--cursor-interactive);
        outline-style: none;
        flex-direction: column;
        display: flex
    }

    .checkbox>[data-slot=description],.checkbox>[data-slot=field-error] {
        cursor: default;
        width: 100%;
        min-width: 0;
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        text-wrap: wrap;
        overflow-wrap: break-word;
        color: var(--muted);
        -webkit-user-select: none;
        user-select: none;
        padding-inline-start:calc(var(--spacing) * 7)}

    .checkbox [data-slot=label] {
        -webkit-user-select: none;
        user-select: none
    }

    .checkbox .checkbox__content [data-slot=label] {
        cursor: var(--cursor-interactive)
    }

    .checkbox[data-disabled=true],.checkbox[data-disabled=true] [data-slot=description],.checkbox[data-disabled=true] [data-slot=field-error] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    :is(.checkbox[data-selected=true],.checkbox[data-indeterminate=true]) .checkbox__indicator {
        border-color: var(--accent-foreground)
    }

    .checkbox [data-slot=checkbox-default-indicator--checkmark] {
        width: calc(var(--spacing) * 2.5);
        height: calc(var(--spacing) * 2.5);
        stroke-width: 2.5px;
        color: var(--accent-foreground);
        transition-property: all;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-duration: .2s;
        transition-duration: .2s
    }

    .checkbox [data-slot=checkbox-default-indicator--checkmark]: is([data-reduce-motion=true],[data-reduce-motion=true] *),.checkbox [data-slot=checkbox-default-indicator--checkmark]:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.checkbox [data-slot=checkbox-default-indicator--checkmark]:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .checkbox [data-slot=checkbox-default-indicator--checkmark]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.checkbox [data-slot=checkbox-default-indicator--checkmark]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.checkbox [data-slot=checkbox-default-indicator--checkmark]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .checkbox[data-selected=true] [data-slot=checkbox-default-indicator--checkmark] {
        transition: stroke-dashoffset .15s linear 15ms
    }

    .checkbox[data-invalid=true][data-selected=true] [data-slot=checkbox-default-indicator--checkmark],.checkbox[data-invalid=true][aria-checked=true] [data-slot=checkbox-default-indicator--checkmark],.checkbox[aria-invalid=true][data-selected=true] [data-slot=checkbox-default-indicator--checkmark],.checkbox[aria-invalid=true][aria-checked=true] [data-slot=checkbox-default-indicator--checkmark] {
        color: var(--danger-foreground)
    }

    .checkbox[data-indeterminate=true] [data-slot=checkbox-default-indicator--indeterminate] {
        width: calc(var(--spacing) * 3);
        height: calc(var(--spacing) * 3)
    }

    .checkbox[data-indeterminate=true][data-invalid=true] [data-slot=checkbox-default-indicator--indeterminate],.checkbox[data-indeterminate=true][aria-invalid=true] [data-slot=checkbox-default-indicator--indeterminate] {
        color: var(--danger-foreground)
    }

    .checkbox__control {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        border-radius: calc(var(--radius) * .75);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-width: var(--border-width-field);
        border-color: var(--field-border,var(--border));
        background-color: var(--field-background,var(--default));
        --tw-shadow: var(--field-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .1s var(--ease-out);
        outline-style: none;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        display: inline-flex;
        position: relative;
        overflow: hidden
    }

    .checkbox__control:is([data-reduce-motion=true],[data-reduce-motion=true] *),.checkbox__control: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.checkbox__control:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .checkbox__control:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.checkbox__control:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.checkbox__control:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .checkbox__control {
        cursor: var(--cursor-interactive)
    }

    .checkbox__control:before {
        pointer-events: none;
        z-index: 0;
        transform-origin: 50%;
        --tw-scale-x: 70%;
        --tw-scale-y: 70%;
        --tw-scale-z: 70%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
        border-radius: calc(var(--radius) * .75);
        background-color: var(--accent);
        opacity: 0;
        --tw-content: "";
        content: var(--tw-content);
        transition: scale .1s var(--ease-linear), opacity .2s var(--ease-linear), background-color .2s var(--ease-out);
        position: absolute;
        inset: 0
    }

    .checkbox__control:before:is() {
        transition-property: none
    }

    @media (prefers-reduced-motion:reduce) {
        .checkbox__control:before:not(:is()) {
            transition-property: none
        }
    }

    .checkbox:focus-visible .checkbox__control,.checkbox [data-slot=checkbox-content][data-focus-visible=true] .checkbox__control {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .checkbox:has([data-slot=checkbox-content][data-focus-visible=true]) .checkbox__control {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .checkbox:hover .checkbox__control,.checkbox [data-slot=checkbox-content][data-hovered=true] .checkbox__control {
        border-color: var(--field-border-hover)
    }

    .checkbox:has([data-slot=checkbox-content][data-hovered=true]) .checkbox__control {
        border-color: var(--field-border-hover)
    }

    :is(.checkbox:hover .checkbox__control,.checkbox:has([data-slot=checkbox-content][data-hovered=true]) .checkbox__control,.checkbox [data-slot=checkbox-content][data-hovered=true] .checkbox__control): before {
        background-color:var(--accent-hover)
    }

    .checkbox[aria-checked=true] .checkbox__control,.checkbox[data-selected=true] .checkbox__control {
        color: var(--accent-foreground);
        border-color: #0000
    }

    :is(.checkbox[aria-checked=true] .checkbox__control,.checkbox[data-selected=true] .checkbox__control): before {
        --tw-scale-x:100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
        opacity: 1
    }

    .checkbox[data-indeterminate=true] .checkbox__control {
        background-color: var(--accent);
        color: var(--accent-foreground)
    }

    .checkbox:active[data-indeterminate=true] .checkbox__control,.checkbox[data-pressed=true][data-indeterminate=true] .checkbox__control {
        background-color: var(--accent-hover)
    }

    .checkbox:has([data-slot=checkbox-content][data-pressed=true])[data-indeterminate=true] .checkbox__control {
        background-color: var(--accent-hover)
    }

    .checkbox[data-invalid=true]: not([aria-checked=true]):not([data-selected=true]):not([data-indeterminate=true]) .checkbox__control,.checkbox[aria-invalid=true]:not([aria-checked=true]):not([data-selected=true]):not([data-indeterminate=true]) .checkbox__control {
        outline-style:var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    :is(.checkbox[data-invalid=true]: not([aria-checked=true]):not([data-selected=true]):not([data-indeterminate=true]) .checkbox__control,.checkbox[aria-invalid=true]:not([aria-checked=true]):not([data-selected=true]):not([data-indeterminate=true]) .checkbox__control):focus,:is(.checkbox[data-invalid=true]:not([aria-checked=true]):not([data-selected=true]):not([data-indeterminate=true]) .checkbox__control,.checkbox[aria-invalid=true]:not([aria-checked=true]):not([data-selected=true]):not([data-indeterminate=true]) .checkbox__control):focus-visible,:is(.checkbox[data-invalid=true]:not([aria-checked=true]):not([data-selected=true]):not([data-indeterminate=true]) .checkbox__control,.checkbox[aria-invalid=true]:not([aria-checked=true]):not([data-selected=true]):not([data-indeterminate=true]) .checkbox__control)[data-focused=true],:is(.checkbox[data-invalid=true]:not([aria-checked=true]):not([data-selected=true]):not([data-indeterminate=true]) .checkbox__control,.checkbox[aria-invalid=true]:not([aria-checked=true]):not([data-selected=true]):not([data-indeterminate=true]) .checkbox__control)[data-focus-visible=true],:is(.checkbox[data-invalid=true]:not([aria-checked=true]):not([data-selected=true]):not([data-indeterminate=true]) .checkbox__control,.checkbox[aria-invalid=true]:not([aria-checked=true]):not([data-selected=true]):not([data-indeterminate=true]) .checkbox__control):focus-within,:is(.checkbox[data-invalid=true]:not([aria-checked=true]):not([data-selected=true]):not([data-indeterminate=true]) .checkbox__control,.checkbox[aria-invalid=true]:not([aria-checked=true]):not([data-selected=true]):not([data-indeterminate=true]) .checkbox__control)[data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .checkbox[data-invalid=true][aria-checked=true] .checkbox__control,.checkbox[data-invalid=true][data-selected=true] .checkbox__control,.checkbox[aria-invalid=true][aria-checked=true] .checkbox__control,.checkbox[aria-invalid=true][data-selected=true] .checkbox__control {
        background-color: var(--danger);
        color: var(--danger-foreground);
        border-color: #0000
    }

    :is(.checkbox[data-invalid=true][aria-checked=true] .checkbox__control,.checkbox[data-invalid=true][data-selected=true] .checkbox__control,.checkbox[aria-invalid=true][aria-checked=true] .checkbox__control,.checkbox[aria-invalid=true][data-selected=true] .checkbox__control): before {
        --tw-scale-x:100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
        background-color: var(--danger);
        opacity: 1
    }

    .checkbox[data-indeterminate=true][aria-invalid=true] .checkbox__control,.checkbox[data-indeterminate=true][data-invalid=true] .checkbox__control {
        background-color: var(--danger);
        color: var(--danger-foreground)
    }

    .checkbox__indicator {
        z-index: 10;
        width: calc(var(--spacing) * 3);
        height: calc(var(--spacing) * 3);
        justify-content: center;
        align-items: center;
        display: flex;
        position: relative
    }

    .checkbox__indicator svg {
        width: 100%;
        height: 100%;
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
    }

    .checkbox--disabled {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .checkbox--secondary .checkbox__control {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        background-color: var(--checkbox-control-bg);
        --checkbox-control-bg: var(--default)
    }

    .checkbox:hover :is(.checkbox--secondary .checkbox__control),.checkbox [data-slot=checkbox-content][data-hovered=true] : is(.checkbox--secondary .checkbox__control) {
        border-color:var(--field-border-hover)
    }

    .checkbox:has([data-slot=checkbox-content][data-hovered=true]) : is(.checkbox--secondary .checkbox__control) {
        border-color:var(--field-border-hover)
    }

    .checkbox__content {
        cursor: inherit;
        align-items: center;
        gap: calc(var(--spacing) * 3);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--foreground);
        --tw-outline-style: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        outline-style: none;
        display: inline-flex;
        position: relative
    }

    .checkbox--secondary:not([aria-checked=true]): not([data-selected=true]):not([data-indeterminate=true]) .checkbox__control {
        background-color:var(--checkbox-control-bg)
    }

    :is(.checkbox--secondary[aria-checked=true] .checkbox__control,.checkbox--secondary[data-selected=true] .checkbox__control): before,.checkbox--secondary[data-indeterminate=true] .checkbox__control,.checkbox--secondary[data-indeterminate=true] .checkbox__control:before {
        background-color:var(--accent)
    }

    .fieldset {
        gap: calc(var(--spacing) * 6);
        flex-direction: column;
        flex: 1 1 0;
        display: flex
    }

    .fieldset__legend {
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--foreground)
    }

    .fieldset__field_group {
        width: 100%
    }

    :where(.fieldset__field_group>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))
    }

    .fieldset__actions {
        align-items: center;
        gap: calc(var(--spacing) * 2);
        padding-top: var(--spacing);
        display: flex
    }

    .input-otp {
        align-items: center;
        gap: calc(var(--spacing) * 2);
        width: 100%;
        display: flex;
        position: relative
    }

    .input-otp[data-disabled=true] {
        cursor: not-allowed;
        opacity: .5
    }

    .input-otp__group {
        align-items: center;
        gap: calc(var(--spacing) * 2);
        min-width: 0;
        display: flex
    }

    .input-otp__slot {
        height: calc(var(--spacing) * 10);
        width: calc(var(--spacing) * 9.5);
        border-style: var(--tw-border-style);
        background-color: var(--field-background,var(--default));
        min-width: 0;
        color: var(--field-foreground,var(--foreground));
        --tw-shadow: var(--field-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        border-radius: var(--field-radius,calc(var(--radius) * 1.5));
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        --tw-outline-style: none;
        border-width: 1px;
        border-width: var(--border-width-field);
        border-color: var(--field-border);
        transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
        outline-style: none;
        flex: 1;
        justify-content: center;
        align-items: center;
        display: flex;
        position: relative
    }

    .input-otp__slot:is([data-reduce-motion=true],[data-reduce-motion=true] *),.input-otp__slot: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.input-otp__slot:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .input-otp__slot:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.input-otp__slot:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.input-otp__slot:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    @media (hover: hover) {
        .input-otp__slot:hover,.input-otp__slot[data-hovered=true] {
            background-color:var(--field-hover);
            border-color: var(--field-border-hover)
        }
    }

    .input-otp__slot[data-active=true] {
        z-index: 10;
        background-color: var(--field-focus);
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-outline-style: none;
        outline-style: none
    }

    .input-otp__slot[data-filled=true] {
        background-color: var(--field-focus)
    }

    .input-otp__slot[data-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .input-otp__slot[data-invalid=true] {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .input-otp__slot[data-invalid=true]: focus,.input-otp__slot[data-invalid=true]:focus-visible,.input-otp__slot[data-invalid=true][data-focused=true],.input-otp__slot[data-invalid=true][data-focus-visible=true],.input-otp__slot[data-invalid=true]:focus-within,.input-otp__slot[data-invalid=true][data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .input-otp__slot[data-invalid=true] {
        background-color: var(--field-focus)
    }

    .input-otp__slot-value {
        font-size: var(--text-lg);
        line-height: var(--tw-leading,var(--text-lg--line-height));
        --tw-leading: calc(var(--spacing) * 6);
        line-height: calc(var(--spacing) * 6);
        --tw-tracking: -.27px;
        letter-spacing: -.27px;
        animation: slot-value-in .25s var(--ease-smooth) both;
        transform-origin: bottom
    }

    .input-otp__slot-value:is([data-reduce-motion=true],[data-reduce-motion=true] *),.input-otp__slot-value: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.input-otp__slot-value:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        animation:none
    }

    @media (prefers-reduced-motion:reduce) {
        .input-otp__slot-value:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.input-otp__slot-value:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.input-otp__slot-value:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            animation: none
        }
    }

    .input-otp__caret {
        height: calc(var(--spacing) * 4);
        border-radius: calc(var(--radius) * .5);
        background-color: var(--field-placeholder,var(--muted));
        width: 2px;
        animation: 1.2s ease-out infinite caret-blink;
        position: absolute
    }

    .input-otp__separator {
        border-radius: calc(var(--radius) * .5);
        background-color: var(--separator);
        flex-shrink: 0;
        width: 6px;
        height: 2px
    }

    .input-otp--secondary .input-otp__slot {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        background-color: var(--input-otp-slot-bg);
        --input-otp-slot-bg: var(--default);
        --input-otp-slot-bg-hover: var(--default-hover);
        --input-otp-slot-bg-focus: var(--default)
    }

    @media (hover: hover) {
        .input-otp--secondary .input-otp__slot:hover,.input-otp--secondary .input-otp__slot[data-hovered=true] {
            background-color:var(--input-otp-slot-bg-hover)
        }
    }

    .input-otp--secondary .input-otp__slot[data-active=true],.input-otp--secondary .input-otp__slot[data-filled=true] {
        background-color: var(--input-otp-slot-bg-focus)
    }

    @keyframes slot-value-in {
        0% {
            opacity: 0;
            transform: translateY(8px)scale(.8)
        }

        to {
            opacity: 1;
            transform: translateY(0)scale(1)
        }
    }

    .input {
        border-radius: var(--field-radius,calc(var(--radius) * 1.5));
        border-style: var(--tw-border-style);
        background-color: var(--field-background,var(--default));
        padding-inline:calc(var(--spacing) * 3);padding-block: calc(var(--spacing) * 2);
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        color: var(--field-foreground,var(--foreground));
        --tw-shadow: var(--field-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        border-width: 1px;
        outline-style: none
    }

    .input::placeholder {
        color: var(--field-placeholder,var(--muted))
    }

    @media (min-width: 40rem) {
        .input {
            font-size:var(--text-sm);
            line-height: var(--tw-leading,var(--text-sm--line-height))
        }
    }

    .input {
        border-width: var(--border-width-field);
        border-color: var(--field-border);
        transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out)
    }

    .input:is([data-reduce-motion=true],[data-reduce-motion=true] *),.input: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.input:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .input:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.input:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.input:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    @media (hover: hover) {
        .input:hover:not(:focus):not(:focus-visible),.input[data-hovered=true]:not([data-focused=true]):not([data-focus-visible=true]) {
            background-color:var(--field-hover);
            border-color: var(--field-border-hover)
        }
    }

    .input:focus,.input[data-focused=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-outline-style: none;
        border-color: var(--field-border-focus);
        background-color: var(--field-focus);
        outline-style: none
    }

    .input[data-invalid=true] {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .input[data-invalid=true]: focus,.input[data-invalid=true]:focus-visible,.input[data-invalid=true][data-focused=true],.input[data-invalid=true][data-focus-visible=true],.input[data-invalid=true]:focus-within,.input[data-invalid=true][data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .input[data-invalid=true] {
        background-color: var(--field-focus)
    }

    .input:disabled,.input[data-disabled=true],.input[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .input--secondary {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        background-color: var(--input-bg);
        --input-bg: var(--default);
        --input-bg-hover: var(--default-hover);
        --input-bg-focus: var(--default)
    }

    @media (hover: hover) {
        .input--secondary:hover:not(:focus):not(:focus-visible),.input--secondary[data-hovered=true]:not([data-focus-visible=true]):not([data-focused=true]) {
            background-color:var(--input-bg-hover)
        }
    }

    .input--secondary:focus,.input--secondary[data-focused=true] {
        background-color: var(--input-bg-focus)
    }

    .input--secondary[data-invalid=true] {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .input--secondary[data-invalid=true]: focus,.input--secondary[data-invalid=true]:focus-visible,.input--secondary[data-invalid=true][data-focused=true],.input--secondary[data-invalid=true][data-focus-visible=true],.input--secondary[data-invalid=true]:focus-within,.input--secondary[data-invalid=true][data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .input--secondary[data-invalid=true] {
        background-color: var(--input-bg-focus)
    }

    .input--full-width {
        width: 100%
    }

    .input-group {
        min-height: calc(var(--spacing) * 9);
        border-radius: var(--field-radius,calc(var(--radius) * 1.5));
        border-style: var(--tw-border-style);
        background-color: var(--field-background,var(--default));
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--field-foreground,var(--foreground));
        --tw-shadow: var(--field-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        border-width: 1px;
        border-width: var(--border-width-field);
        border-color: var(--field-border);
        outline-style: none;
        align-items: center;
        display: inline-flex
    }

    .input-group:has([data-slot=input-group-textarea]) {
        align-items: flex-start;
        height: auto
    }

    .input-group {
        transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out)
    }

    .input-group:is([data-reduce-motion=true],[data-reduce-motion=true] *),.input-group: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.input-group:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .input-group:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.input-group:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.input-group:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    @media (hover: hover) {
        .input-group:hover:not(:focus-within),.input-group[data-hovered=true]:not([data-focus-within=true]) {
            background-color:var(--field-hover);
            border-color: var(--field-border-hover)
        }
    }

    :is(.input-group:has([data-slot=input-group-input]: focus),.input-group:has([data-slot=input-group-textarea]:focus)) {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-outline-style: none;
        border-color: var(--field-border-focus);
        background-color: var(--field-focus);
        outline-style: none
    }

    .input-group[data-invalid=true] {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .input-group[data-invalid=true]: focus,.input-group[data-invalid=true]:focus-visible,.input-group[data-invalid=true][data-focused=true],.input-group[data-invalid=true][data-focus-visible=true],.input-group[data-invalid=true]:focus-within,.input-group[data-invalid=true][data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .input-group[data-invalid=true] {
        background-color: var(--field-focus);
        border-color: var(--color-field-border-invalid)
    }

    .input-group[data-disabled=true],.input-group[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    :-webkit-any(.input-group:has([data-slot=input-group-input]: -webkit-autofill),.input-group:has([data-slot=input-group-input]:autofill)) {
        background-color:var(--field-focus);
        border-color: var(--field-border-focus)
    }

    :is(.input-group:has([data-slot=input-group-input]: autofill),.input-group:has([data-slot=input-group-input]:autofill)) {
        background-color:var(--field-focus);
        border-color: var(--field-border-focus)
    }

    .input-group__input {
        border-style: var(--tw-border-style);
        padding-inline:calc(var(--spacing) * 3);padding-block: calc(var(--spacing) * 2);
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        background-color: #0000;
        border-width: 0;
        border-radius: 0;
        outline-style: none;
        flex: 1
    }

    .input-group__input::placeholder {
        color: var(--field-placeholder,var(--muted))
    }

    @media (min-width: 40rem) {
        .input-group__input {
            font-size:var(--text-sm);
            line-height: var(--tw-leading,var(--text-sm--line-height))
        }
    }

    .input-group:has([data-slot=input-group-prefix]) .input-group__input {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
        padding-inline-start:0}

    .input-group:has([data-slot=input-group-suffix]) .input-group__input {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
        padding-inline-end:0}

    .input-group__input:focus,.input-group__input:focus-visible {
        --tw-outline-style: none;
        outline-style: none
    }

    .input-group__input:-webkit-autofill {
        -webkit-text-fill-color: var(--field-foreground);
        caret-color: var(--field-foreground);
        transition: background-color 9999s ease-in-out;
        box-shadow: inset 0 0 0 1000px #0000
    }

    .input-group__input:-webkit-autofill:hover {
        -webkit-text-fill-color: var(--field-foreground);
        caret-color: var(--field-foreground);
        transition: background-color 9999s ease-in-out;
        box-shadow: inset 0 0 0 1000px #0000
    }

    .input-group__input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--field-foreground);
        caret-color: var(--field-foreground);
        transition: background-color 9999s ease-in-out;
        box-shadow: inset 0 0 0 1000px #0000
    }

    .input-group__input:-webkit-autofill:active {
        -webkit-text-fill-color: var(--field-foreground);
        caret-color: var(--field-foreground);
        transition: background-color 9999s ease-in-out;
        box-shadow: inset 0 0 0 1000px #0000
    }

    .input-group__input:autofill {
        -webkit-text-fill-color: var(--field-foreground);
        caret-color: var(--field-foreground);
        transition: background-color 9999s ease-in-out;
        box-shadow: inset 0 0 0 1000px #0000
    }

    .input-group__input[data-slot=input-group-textarea] {
        resize: vertical;
        min-height: 38px
    }

    .input-group__prefix {
        height: 100%;
        padding-inline:calc(var(--spacing) * 3);color: var(--field-placeholder,var(--muted));
        border-width: var(--border-width-field);
        border-color: var(--field-border);
        border-style: solid;
        border-inline-end-color:var(--field-border);border-inline-start: none;
        background-color: #0000;
        border-top: none;
        border-bottom: none;
        border-start-start-radius: var(--field-radius,calc(var(--radius) * 1.5));
        border-start-end-radius: 0;
        border-end-end-radius: 0;
        border-end-start-radius: var(--field-radius,calc(var(--radius) * 1.5));
        justify-content: center;
        align-items: center;
        display: flex
    }

    .input-group:has([data-slot=input-group-textarea]) .input-group__prefix {
        align-items: flex-start;
        padding-top: .5rem
    }

    .input-group__prefix {
        transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth)
    }

    .input-group__prefix:is([data-reduce-motion=true],[data-reduce-motion=true] *),.input-group__prefix: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.input-group__prefix:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .input-group__prefix:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.input-group__prefix:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.input-group__prefix:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .input-group__suffix {
        height: 100%;
        padding-inline:calc(var(--spacing) * 3);color: var(--field-placeholder,var(--muted));
        border-width: var(--border-width-field);
        border-color: var(--field-border);
        border-style: solid;
        border-inline-start-color:var(--field-border);border-inline-end: none;
        background-color: #0000;
        border-top: none;
        border-bottom: none;
        border-start-start-radius: 0;
        border-start-end-radius: var(--field-radius,calc(var(--radius) * 1.5));
        border-end-end-radius: var(--field-radius,calc(var(--radius) * 1.5));
        border-end-start-radius: 0;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .input-group:has([data-slot=input-group-textarea]) .input-group__suffix {
        align-items: flex-start;
        padding-top: .5rem
    }

    .input-group__suffix {
        transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth)
    }

    .input-group__suffix:is([data-reduce-motion=true],[data-reduce-motion=true] *),.input-group__suffix: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.input-group__suffix:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .input-group__suffix:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.input-group__suffix:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.input-group__suffix:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .input-group--secondary {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        background-color: var(--input-group-bg);
        --input-group-bg: var(--default);
        --input-group-bg-hover: var(--default-hover);
        --input-group-bg-focus: var(--default)
    }

    @media (hover: hover) {
        .input-group--secondary:hover:not(:focus-within),.input-group--secondary[data-hovered=true]:not([data-focus-within=true]) {
            background-color:var(--input-group-bg-hover)
        }
    }

    :is(.input-group--secondary:has([data-slot=input-group-input]: focus),.input-group--secondary:has([data-slot=input-group-textarea]:focus)) {
        background-color:var(--input-group-bg-focus)
    }

    .input-group--secondary[data-invalid=true] {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .input-group--secondary[data-invalid=true]: focus,.input-group--secondary[data-invalid=true]:focus-visible,.input-group--secondary[data-invalid=true][data-focused=true],.input-group--secondary[data-invalid=true][data-focus-visible=true],.input-group--secondary[data-invalid=true]:focus-within,.input-group--secondary[data-invalid=true][data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .input-group--secondary[data-invalid=true] {
        border-color: var(--color-field-border-invalid);
        background-color: var(--input-group-bg-focus)
    }

    .input-group--secondary [data-slot=input-group-input],.input-group--secondary [data-slot=input-group-textarea] {
        background-color: #0000
    }

    .input-group--full-width {
        width: 100%
    }

    .number-field {
        gap: var(--spacing);
        flex-direction: column;
        display: flex
    }

    :is(.number-field[data-invalid=true],.number-field[aria-invalid=true]) [data-slot=description] {
        display: none
    }

    .number-field [data-slot=label] {
        width: fit-content
    }

    .number-field__group {
        height: calc(var(--spacing) * 9);
        border-radius: var(--field-radius,calc(var(--radius) * 1.5));
        border-style: var(--tw-border-style);
        background-color: var(--field-background,var(--default));
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--field-foreground,var(--foreground));
        --tw-shadow: var(--field-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        border-width: 1px;
        border-width: var(--border-width-field);
        border-color: var(--field-border);
        transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
        outline-style: none;
        grid-template-columns: 40px 1fr 40px;
        align-items: center;
        display: grid;
        overflow: hidden
    }

    .number-field__group:is([data-reduce-motion=true],[data-reduce-motion=true] *),.number-field__group: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.number-field__group:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .number-field__group:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.number-field__group:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.number-field__group:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    @media (hover: hover) {
        .number-field__group:hover:not(:focus-within),.number-field__group[data-hovered=true]:not([data-focus-within=true]) {
            background-color:var(--field-hover);
            border-color: var(--field-border-hover)
        }
    }

    .number-field__group[data-focus-within=true],.number-field__group: focus-within {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-outline-style: none;
        border-color: var(--field-border-focus);
        background-color: var(--field-focus);
        outline-style: none
    }

    .number-field__group[data-invalid=true] {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .number-field__group[data-invalid=true]: focus,.number-field__group[data-invalid=true]:focus-visible,.number-field__group[data-invalid=true][data-focused=true],.number-field__group[data-invalid=true][data-focus-visible=true],.number-field__group[data-invalid=true]:focus-within,.number-field__group[data-invalid=true][data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .number-field__group[data-invalid=true] {
        background-color: var(--field-focus);
        border-color: var(--color-field-border-invalid)
    }

    .number-field__group[data-disabled=true],.number-field__group[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    :-webkit-any(.number-field__group:has([data-slot=number-field-input]: -webkit-autofill),.number-field__group:has([data-slot=number-field-input]:autofill)) {
        background-color:var(--field-focus);
        border-color: var(--field-border-focus)
    }

    :is(.number-field__group:has([data-slot=number-field-input]: autofill),.number-field__group:has([data-slot=number-field-input]:autofill)) {
        background-color:var(--field-focus);
        border-color: var(--field-border-focus)
    }

    .number-field__input {
        border-style: var(--tw-border-style);
        min-width: 0;
        padding-inline:calc(var(--spacing) * 3);padding-block: calc(var(--spacing) * 2);
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-numeric-spacing: tabular-nums;
        font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        background-color: #0000;
        border-width: 0;
        border-radius: 0;
        outline-style: none
    }

    @media (min-width: 40rem) {
        .number-field__input {
            font-size:var(--text-sm);
            line-height: var(--tw-leading,var(--text-sm--line-height))
        }
    }

    .number-field__group:has([slot=decrement]) .number-field__input {
        border-start-start-radius: 0;
        border-end-start-radius: 0
    }

    .number-field__group:has([slot=increment]) .number-field__input {
        border-start-end-radius: 0;
        border-end-end-radius: 0
    }

    .number-field__input:focus,.number-field__input:focus-visible {
        --tw-outline-style: none;
        outline-style: none
    }

    .number-field__input:-webkit-autofill {
        -webkit-text-fill-color: var(--field-foreground);
        caret-color: var(--field-foreground);
        transition: background-color 9999s ease-in-out;
        box-shadow: inset 0 0 0 1000px #0000
    }

    .number-field__input:-webkit-autofill:hover {
        -webkit-text-fill-color: var(--field-foreground);
        caret-color: var(--field-foreground);
        transition: background-color 9999s ease-in-out;
        box-shadow: inset 0 0 0 1000px #0000
    }

    .number-field__input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--field-foreground);
        caret-color: var(--field-foreground);
        transition: background-color 9999s ease-in-out;
        box-shadow: inset 0 0 0 1000px #0000
    }

    .number-field__input:-webkit-autofill:active {
        -webkit-text-fill-color: var(--field-foreground);
        caret-color: var(--field-foreground);
        transition: background-color 9999s ease-in-out;
        box-shadow: inset 0 0 0 1000px #0000
    }

    .number-field__input:autofill {
        -webkit-text-fill-color: var(--field-foreground);
        caret-color: var(--field-foreground);
        transition: background-color 9999s ease-in-out;
        box-shadow: inset 0 0 0 1000px #0000
    }

    .number-field__increment-button,.number-field__decrement-button {
        height: 100%;
        width: calc(var(--spacing) * 10);
        color: var(--field-foreground,var(--foreground));
        --tw-outline-style: none;
        border-width: var(--border-width-field);
        border-color: var(--field-border);
        transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth);
        background-color: #0000;
        border-style: solid;
        border-radius: 0;
        outline-style: none;
        justify-content: center;
        align-items: center;
        display: flex
    }

    :is(.number-field__increment-button,.number-field__decrement-button):is([data-reduce-motion=true],[data-reduce-motion=true] *),: is(.number-field__increment-button,.number-field__decrement-button):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.number-field__increment-button,.number-field__decrement-button):is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        :is(.number-field__increment-button,.number-field__decrement-button):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.number-field__increment-button,.number-field__decrement-button):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.number-field__increment-button,.number-field__decrement-button):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .number-field__increment-button,.number-field__decrement-button {
        cursor: var(--cursor-interactive)
    }

    :is(.number-field__increment-button,.number-field__decrement-button):active,:is(.number-field__increment-button,.number-field__decrement-button)[data-pressed=true] {
        background-color: var(--field-foreground,var(--foreground))
    }

    @supports (color: color-mix(in lab, red, red)) {
        :is(.number-field__increment-button,.number-field__decrement-button):active,:is(.number-field__increment-button,.number-field__decrement-button)[data-pressed=true] {
            background-color:color-mix(in oklab, var(--field-foreground,var(--foreground)) 10%, transparent)
        }
    }

    :is(.number-field__increment-button,.number-field__decrement-button):active,:is(.number-field__increment-button,.number-field__decrement-button)[data-pressed=true] {
        transform: scale(.97)
    }

    :is(.number-field__increment-button,.number-field__decrement-button):disabled,:is(.number-field__increment-button,.number-field__decrement-button)[data-disabled=true],: is(.number-field__increment-button,.number-field__decrement-button)[aria-disabled=true] {
        opacity:var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    :is(.number-field__increment-button,.number-field__decrement-button) [data-slot=number-field-increment-button-icon],: is(.number-field__increment-button,.number-field__decrement-button) [data-slot=number-field-decrement-button-icon] {
        width:calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .number-field__increment-button {
        border-inline-start-style:var(--tw-border-style);border-inline-start-width: 1px;
        border-color: var(--field-placeholder,var(--muted));
        border-start-start-radius: 0;
        border-start-end-radius: var(--field-radius,calc(var(--radius) * 1.5));
        border-end-end-radius: var(--field-radius,calc(var(--radius) * 1.5));
        border-end-start-radius: 0
    }

    @supports (color: color-mix(in lab, red, red)) {
        .number-field__increment-button {
            border-color:color-mix(in oklab, var(--field-placeholder,var(--muted)) 15%, transparent)
        }
    }

    .number-field__decrement-button {
        border-inline-end-style:var(--tw-border-style);border-inline-end-width: 1px;
        border-color: var(--field-placeholder,var(--muted));
        border-start-start-radius: var(--field-radius,calc(var(--radius) * 1.5));
        border-start-end-radius: 0;
        border-end-end-radius: 0;
        border-end-start-radius: var(--field-radius,calc(var(--radius) * 1.5))
    }

    @supports (color: color-mix(in lab, red, red)) {
        .number-field__decrement-button {
            border-color:color-mix(in oklab, var(--field-placeholder,var(--muted)) 15%, transparent)
        }
    }

    .number-field--secondary .number-field__group {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        background-color: var(--number-field-group-bg);
        --number-field-group-bg: var(--default);
        --number-field-group-bg-hover: var(--default-hover);
        --number-field-group-bg-focus: var(--default)
    }

    @media (hover: hover) {
        .number-field--secondary .number-field__group:hover:not(:focus-within),.number-field--secondary .number-field__group[data-hovered=true]:not([data-focus-within=true]) {
            background-color:var(--number-field-group-bg-hover)
        }
    }

    .number-field--secondary .number-field__group:focus-within,.number-field--secondary .number-field__group[data-focus-within=true] {
        background-color: var(--number-field-group-bg-focus)
    }

    .number-field--secondary .number-field__group[data-invalid=true] {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .number-field--secondary .number-field__group[data-invalid=true]: focus,.number-field--secondary .number-field__group[data-invalid=true]:focus-visible,.number-field--secondary .number-field__group[data-invalid=true][data-focused=true],.number-field--secondary .number-field__group[data-invalid=true][data-focus-visible=true],.number-field--secondary .number-field__group[data-invalid=true]:focus-within,.number-field--secondary .number-field__group[data-invalid=true][data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .number-field--secondary .number-field__group[data-invalid=true] {
        border-color: var(--color-field-border-invalid);
        background-color: var(--number-field-group-bg-focus)
    }

    .number-field--secondary .number-field__group [data-slot=number-field-input] {
        background-color: #0000
    }

    .number-field--full-width,.number-field__group--full-width {
        width: 100%
    }

    .radio-group {
        flex-direction: column;
        display: flex
    }

    .radio-group[data-orientation=vertical] [data-slot=radio] {
        margin-top: calc(var(--spacing) * 4)
    }

    .radio-group[data-orientation=horizontal] {
        gap: calc(var(--spacing) * 4);
        flex-flow: wrap
    }

    .radio-group--secondary .radio__control {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        background-color: var(--radio-control-bg);
        --radio-control-bg: var(--default);
        --radio-control-bg-hover: var(--default-hover)
    }

    .radio [data-slot=radio-content][data-hovered=true] : is(.radio-group--secondary .radio__control) {
        border-color:var(--field-border-hover)
    }

    .radio:has([data-slot=radio-content][data-hovered=true]) : is(.radio-group--secondary .radio__control) {
        border-color:var(--field-border-hover)
    }

    .radio:not([data-selected]): not(:has(input:checked)) :is(.radio-group--secondary .radio__control) .radio__indicator:empty:before {
        background-color:var(--radio-control-bg)
    }

    .radio:has([data-slot=radio-content][data-hovered=true]): not([data-selected]):not(:has(input:checked)) :is(.radio-group--secondary .radio__control) .radio__indicator:empty:before {
        background-color:var(--radio-control-bg-hover)
    }

    .radio {
        align-items: flex-start;
        gap: var(--spacing);
        --tw-outline-style: none;
        -webkit-tap-highlight-color: transparent;
        cursor: var(--cursor-interactive);
        outline-style: none;
        flex-direction: column;
        display: flex
    }

    .radio [data-slot=label] {
        -webkit-user-select: none;
        user-select: none
    }

    .radio .radio__content [data-slot=label] {
        cursor: var(--cursor-interactive)
    }

    .radio>[data-slot=description],.radio>[data-slot=field-error] {
        cursor: default;
        width: 100%;
        min-width: 0;
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        text-wrap: wrap;
        overflow-wrap: break-word;
        color: var(--muted);
        -webkit-user-select: none;
        user-select: none;
        padding-inline-start:calc(var(--spacing) * 7)}

    .radio: disabled,.radio[data-disabled=true],.radio[aria-disabled=true],:is(.radio:disabled,.radio[data-disabled=true],.radio[aria-disabled=true]) [data-slot=description],:is(.radio:disabled,.radio[data-disabled=true],.radio[aria-disabled=true]) [data-slot=field-error] {
        opacity:var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .radio__content {
        cursor: inherit;
        align-items: center;
        gap: calc(var(--spacing) * 3);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--foreground);
        --tw-outline-style: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        outline-style: none;
        display: inline-flex;
        position: relative
    }

    .radio__control {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        border-radius: calc(var(--radius) * 1);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-width: var(--border-width-field);
        border-color: var(--field-border,var(--border));
        background-color: var(--field-background,var(--default));
        --tw-shadow: var(--field-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .1s var(--ease-out);
        outline-style: none;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        display: inline-flex;
        position: relative
    }

    .radio__control:is([data-reduce-motion=true],[data-reduce-motion=true] *),.radio__control: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.radio__control:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .radio__control:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.radio__control:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.radio__control:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .radio__control {
        cursor: var(--cursor-interactive)
    }

    .radio [data-slot=radio-content][data-focus-visible=true] .radio__control {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .radio:has([data-slot=radio-content][data-focus-visible=true]) .radio__control {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .radio [data-slot=radio-content][data-hovered=true] .radio__control {
        border-color: var(--field-border-hover)
    }

    .radio:has([data-slot=radio-content][data-hovered=true]) .radio__control {
        border-color: var(--field-border-hover)
    }

    .radio:has([data-slot=radio-content][data-hovered=true]): not([data-selected]):not(:has(input:checked)) .radio__control .radio__indicator:empty:before {
        background-color:var(--field-hover)
    }

    .radio [data-slot=radio-content][data-pressed=true] .radio__control {
        --tw-scale-x: 95%;
        --tw-scale-y: 95%;
        --tw-scale-z: 95%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }

    .radio:has([data-slot=radio-content][data-pressed=true]) .radio__control {
        --tw-scale-x: 95%;
        --tw-scale-y: 95%;
        --tw-scale-z: 95%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }

    .radio[data-selected] .radio__control {
        background-color: var(--accent);
        border-color: #0000
    }

    .radio:has([data-slot=radio-content][aria-checked=true]) .radio__control {
        background-color: var(--accent);
        border-color: #0000
    }

    .radio:has(input: checked) .radio__control {
        background-color:var(--accent);
        border-color: #0000
    }

    .radio[data-selected]: has([data-slot=radio-content][data-pressed=true]) .radio__control {
        background-color:var(--accent-hover)
    }

    .radio:has([data-slot=radio-content][data-pressed=true][aria-checked=true]) .radio__control {
        background-color: var(--accent-hover)
    }

    .radio:has(input: checked):has([data-slot=radio-content][data-pressed=true]) .radio__control {
        background-color:var(--accent-hover)
    }

    .radio[data-invalid=true] .radio__control,.radio[aria-invalid=true] .radio__control {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    :is(.radio[data-invalid=true] .radio__control,.radio[aria-invalid=true] .radio__control): focus,:is(.radio[data-invalid=true] .radio__control,.radio[aria-invalid=true] .radio__control):focus-visible,:is(.radio[data-invalid=true] .radio__control,.radio[aria-invalid=true] .radio__control)[data-focused=true],:is(.radio[data-invalid=true] .radio__control,.radio[aria-invalid=true] .radio__control)[data-focus-visible=true],:is(.radio[data-invalid=true] .radio__control,.radio[aria-invalid=true] .radio__control):focus-within,:is(.radio[data-invalid=true] .radio__control,.radio[aria-invalid=true] .radio__control)[data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .radio[data-invalid=true][data-selected] .radio__control,.radio[aria-invalid=true][data-selected] .radio__control {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .radio[data-invalid=true]: has(input:checked) .radio__control {
        outline-style:var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .radio[aria-invalid=true]: has(input:checked) .radio__control {
        outline-style:var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    :is(.radio[data-invalid=true][data-selected] .radio__control,.radio[aria-invalid=true][data-selected] .radio__control,.radio[data-invalid=true]: has(input:checked) .radio__control,.radio[aria-invalid=true]:has(input:checked) .radio__control):focus,:is(.radio[data-invalid=true][data-selected] .radio__control,.radio[aria-invalid=true][data-selected] .radio__control,.radio[data-invalid=true]:has(input:checked) .radio__control,.radio[aria-invalid=true]:has(input:checked) .radio__control):focus-visible,:is(.radio[data-invalid=true][data-selected] .radio__control,.radio[aria-invalid=true][data-selected] .radio__control,.radio[data-invalid=true]:has(input:checked) .radio__control,.radio[aria-invalid=true]:has(input:checked) .radio__control)[data-focused=true],:is(.radio[data-invalid=true][data-selected] .radio__control,.radio[aria-invalid=true][data-selected] .radio__control,.radio[data-invalid=true]:has(input:checked) .radio__control,.radio[aria-invalid=true]:has(input:checked) .radio__control)[data-focus-visible=true],:is(.radio[data-invalid=true][data-selected] .radio__control,.radio[aria-invalid=true][data-selected] .radio__control,.radio[data-invalid=true]:has(input:checked) .radio__control,.radio[aria-invalid=true]:has(input:checked) .radio__control):focus-within,:is(.radio[data-invalid=true][data-selected] .radio__control,.radio[aria-invalid=true][data-selected] .radio__control,.radio[data-invalid=true]:has(input:checked) .radio__control,.radio[aria-invalid=true]:has(input:checked) .radio__control)[data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .radio__indicator {
        pointer-events: none;
        justify-content: center;
        align-items: center;
        display: flex;
        position: absolute;
        inset: 0
    }

    .radio__indicator:empty:before {
        content: "";
        border-radius: calc(var(--radius) * 1);
        background-color: var(--field-background,var(--default));
        width: 100%;
        height: 100%;
        transition: scale .2s var(--ease-out), background-color .2s var(--ease-out);
        scale: 1
    }

    .radio__indicator:empty:before:is() {
        transition-property: none
    }

    @media (prefers-reduced-motion:reduce) {
        .radio__indicator:empty:before:not(:is()) {
            transition-property: none
        }
    }

    .radio[data-selected] .radio__indicator: empty:before {
        background-color:var(--accent-foreground);
        scale: .4286
    }

    .radio:has([data-slot=radio-content][aria-checked=true]) .radio__indicator: empty:before {
        background-color:var(--accent-foreground);
        scale: .4286
    }

    .radio:has(input: checked) .radio__indicator:empty:before {
        background-color:var(--accent-foreground);
        scale: .4286
    }

    .radio[data-selected]: has([data-slot=radio-content][data-pressed=true]) .radio__indicator:empty:before {
        scale:.5714
    }

    .radio:has([data-slot=radio-content][data-pressed=true][aria-checked=true]) .radio__indicator: empty:before {
        scale:.5714
    }

    .radio:has(input: checked):has([data-slot=radio-content][data-pressed=true]) .radio__indicator:empty:before {
        scale:.5714
    }

    .radio--disabled {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .textfield {
        gap: var(--spacing);
        flex-direction: column;
        display: flex
    }

    :is(.textfield[data-invalid=true],.textfield[aria-invalid=true]) [data-slot=description] {
        display: none
    }

    .textfield--full-width,.textfield--full-width [data-slot=input],.textfield--full-width [data-slot=textarea] {
        width: 100%
    }

    .search-field {
        gap: var(--spacing);
        flex-direction: column;
        display: flex
    }

    :is(.search-field[data-invalid=true],.search-field[aria-invalid=true]) [data-slot=description] {
        display: none
    }

    .search-field [data-slot=label] {
        width: fit-content
    }

    .search-field[data-empty=true] [data-slot=search-field-clear-button] {
        pointer-events: none;
        opacity: 0
    }

    .search-field__group {
        height: calc(var(--spacing) * 9);
        border-radius: var(--field-radius,calc(var(--radius) * 1.5));
        border-style: var(--tw-border-style);
        background-color: var(--field-background,var(--default));
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--field-foreground,var(--foreground));
        --tw-shadow: var(--field-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        border-width: 1px;
        border-width: var(--border-width-field);
        border-color: var(--field-border);
        transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
        outline-style: none;
        align-items: center;
        display: inline-flex;
        position: relative;
        overflow: hidden
    }

    .search-field__group:is([data-reduce-motion=true],[data-reduce-motion=true] *),.search-field__group: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.search-field__group:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .search-field__group:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.search-field__group:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.search-field__group:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    @media (hover: hover) {
        .search-field__group:hover:not(:focus-within),.search-field__group[data-hovered=true]:not([data-focus-within=true]) {
            background-color:var(--field-hover);
            border-color: var(--field-border-hover)
        }
    }

    .search-field__group[data-focus-within=true],.search-field__group: focus-within {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-outline-style: none;
        outline-style: none
    }

    .search-field__group[data-invalid=true] {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .search-field__group[data-invalid=true]: focus,.search-field__group[data-invalid=true]:focus-visible,.search-field__group[data-invalid=true][data-focused=true],.search-field__group[data-invalid=true][data-focus-visible=true],.search-field__group[data-invalid=true]:focus-within,.search-field__group[data-invalid=true][data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .search-field__group[data-invalid=true] {
        background-color: var(--field-focus);
        border-color: var(--color-field-border-invalid)
    }

    .search-field__group[data-disabled=true],.search-field__group[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    :-webkit-any(.search-field__group:has([data-slot=search-field-input]: -webkit-autofill),.search-field__group:has([data-slot=search-field-input]:autofill)) {
        background-color:var(--field-focus);
        border-color: var(--field-border-focus)
    }

    :is(.search-field__group:has([data-slot=search-field-input]: autofill),.search-field__group:has([data-slot=search-field-input]:autofill)) {
        background-color:var(--field-focus);
        border-color: var(--field-border-focus)
    }

    .search-field__input {
        border-style: var(--tw-border-style);
        padding-inline:calc(var(--spacing) * 3);padding-block: calc(var(--spacing) * 2);
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        background-color: #0000;
        border-width: 0;
        border-radius: 0;
        outline-style: none;
        flex: 1
    }

    @media (min-width: 40rem) {
        .search-field__input {
            font-size:var(--text-sm);
            line-height: var(--tw-leading,var(--text-sm--line-height))
        }
    }

    .search-field__input::-webkit-search-cancel-button {
        appearance: none
    }

    .search-field__input::-webkit-search-decoration {
        appearance: none
    }

    .search-field__group:has([data-slot=search-field-search-icon]) .search-field__input {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
        padding-inline-start:calc(var(--spacing) * 2)}

    .search-field__group: has([slot=clear]) .search-field__input {
        border-start-end-radius:0;
        border-end-end-radius: 0;
        padding-inline-end:calc(var(--spacing) * 2)}

    .search-field__input: focus,.search-field__input:focus-visible {
        --tw-outline-style:none;
        outline-style: none
    }

    .search-field__input:-webkit-autofill {
        -webkit-text-fill-color: var(--field-foreground);
        caret-color: var(--field-foreground);
        transition: background-color 9999s ease-in-out;
        box-shadow: inset 0 0 0 1000px #0000
    }

    .search-field__input:-webkit-autofill:hover {
        -webkit-text-fill-color: var(--field-foreground);
        caret-color: var(--field-foreground);
        transition: background-color 9999s ease-in-out;
        box-shadow: inset 0 0 0 1000px #0000
    }

    .search-field__input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--field-foreground);
        caret-color: var(--field-foreground);
        transition: background-color 9999s ease-in-out;
        box-shadow: inset 0 0 0 1000px #0000
    }

    .search-field__input:-webkit-autofill:active {
        -webkit-text-fill-color: var(--field-foreground);
        caret-color: var(--field-foreground);
        transition: background-color 9999s ease-in-out;
        box-shadow: inset 0 0 0 1000px #0000
    }

    .search-field__input:autofill {
        -webkit-text-fill-color: var(--field-foreground);
        caret-color: var(--field-foreground);
        transition: background-color 9999s ease-in-out;
        box-shadow: inset 0 0 0 1000px #0000
    }

    .search-field__search-icon {
        pointer-events: none;
        color: var(--field-placeholder,var(--muted));
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        flex-shrink: 0;
        margin-inline-start:calc(var(--spacing) * 3);margin-inline-end: 0
    }

    .search-field__clear-button {
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5);
        flex-shrink: 0;
        margin-inline-end:calc(var(--spacing) * 2)}

    .search-field__clear-button [data-slot=close-button-icon] {
        width: calc(var(--spacing) * 3);
        height: calc(var(--spacing) * 3)
    }

    .search-field--secondary .search-field__group {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        background-color: var(--search-field-group-bg);
        --search-field-group-bg: var(--default);
        --search-field-group-bg-hover: var(--default-hover);
        --search-field-group-bg-focus: var(--default)
    }

    @media (hover: hover) {
        .search-field--secondary .search-field__group:hover:not(:focus-within),.search-field--secondary .search-field__group[data-hovered=true]:not([data-focus-within=true]) {
            background-color:var(--search-field-group-bg-hover)
        }
    }

    .search-field--secondary .search-field__group:focus-within,.search-field--secondary .search-field__group[data-focus-within=true] {
        background-color: var(--search-field-group-bg-focus)
    }

    .search-field--secondary .search-field__group[data-invalid=true] {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .search-field--secondary .search-field__group[data-invalid=true]: focus,.search-field--secondary .search-field__group[data-invalid=true]:focus-visible,.search-field--secondary .search-field__group[data-invalid=true][data-focused=true],.search-field--secondary .search-field__group[data-invalid=true][data-focus-visible=true],.search-field--secondary .search-field__group[data-invalid=true]:focus-within,.search-field--secondary .search-field__group[data-invalid=true][data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .search-field--secondary .search-field__group[data-invalid=true] {
        border-color: var(--color-field-border-invalid);
        background-color: var(--search-field-group-bg-focus)
    }

    .search-field--secondary .search-field__group [data-slot=search-field-input] {
        background-color: #0000
    }

    .search-field--full-width,.search-field__group--full-width {
        width: 100%
    }

    .textarea {
        border-radius: var(--field-radius,calc(var(--radius) * 1.5));
        border-style: var(--tw-border-style);
        background-color: var(--field-background,var(--default));
        padding-inline:calc(var(--spacing) * 3);padding-block: calc(var(--spacing) * 2);
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        color: var(--field-foreground,var(--foreground));
        --tw-shadow: var(--field-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        border-width: 1px;
        outline-style: none
    }

    .textarea::placeholder {
        color: var(--field-placeholder,var(--muted))
    }

    @media (min-width: 40rem) {
        .textarea {
            font-size:var(--text-sm);
            line-height: var(--tw-leading,var(--text-sm--line-height))
        }
    }

    .textarea {
        border-width: var(--border-width-field);
        border-color: var(--field-border);
        min-height: 38px;
        transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out)
    }

    .textarea:is([data-reduce-motion=true],[data-reduce-motion=true] *),.textarea: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.textarea:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .textarea:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.textarea:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.textarea:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    @media (hover: hover) {
        .textarea:hover:not(:focus):not(:focus-visible),.textarea[data-hovered=true]:not([data-focused=true]):not([data-focus-visible=true]) {
            background-color:var(--field-hover);
            border-color: var(--field-border-hover)
        }
    }

    .textarea:focus,.textarea[data-focused=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-outline-style: none;
        border-color: var(--field-border-focus);
        background-color: var(--field-focus);
        outline-style: none
    }

    .textarea[data-invalid=true] {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .textarea[data-invalid=true]: focus,.textarea[data-invalid=true]:focus-visible,.textarea[data-invalid=true][data-focused=true],.textarea[data-invalid=true][data-focus-visible=true],.textarea[data-invalid=true]:focus-within,.textarea[data-invalid=true][data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .textarea[data-invalid=true] {
        background-color: var(--field-focus)
    }

    .textarea:disabled,.textarea[data-disabled=true],.textarea[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .textarea--secondary {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        background-color: var(--textarea-bg);
        --textarea-bg: var(--default);
        --textarea-bg-hover: var(--default-hover);
        --textarea-bg-focus: var(--default)
    }

    @media (hover: hover) {
        .textarea--secondary:hover:not(:focus):not(:focus-visible),.textarea--secondary[data-hovered=true]:not([data-focused=true]):not([data-focus-visible=true]) {
            background-color:var(--textarea-bg-hover)
        }
    }

    .textarea--secondary:focus,.textarea--secondary[data-focused=true] {
        background-color: var(--textarea-bg-focus)
    }

    .textarea--secondary[data-invalid=true] {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .textarea--secondary[data-invalid=true]: focus,.textarea--secondary[data-invalid=true]:focus-visible,.textarea--secondary[data-invalid=true][data-focused=true],.textarea--secondary[data-invalid=true][data-focus-visible=true],.textarea--secondary[data-invalid=true]:focus-within,.textarea--secondary[data-invalid=true][data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .textarea--secondary[data-invalid=true] {
        background-color: var(--textarea-bg-focus)
    }

    .textarea--full-width {
        width: 100%
    }

    .calendar {
        width: calc(var(--spacing) * 63);
        max-width: calc(var(--spacing) * 63);
        container-type: inline-size
    }

    .calendar--week-view .calendar__cell,.calendar--day-view .calendar__cell {
        aspect-ratio: 1;
        place-self: center;
        width: 100%;
        height: auto
    }

    .calendar--day-view .calendar__grid {
        flex-direction: column;
        display: flex
    }

    .calendar--day-view .calendar__grid-header {
        grid-template-columns: repeat(7,1fr);
        width: 100%;
        display: grid
    }

    .calendar--day-view .calendar__grid-header>tr {
        display: contents
    }

    .calendar--day-view .calendar__grid-body {
        margin-top: var(--spacing);
        grid-template-columns: repeat(7,1fr);
        width: 100%;
        display: grid
    }

    .calendar--day-view .calendar__grid-body>tr {
        display: contents
    }

    .calendar--day-view .calendar__grid-body>tr: first-child>td {
        margin-top:0
    }

    .calendar__header {
        padding-inline:calc(var(--spacing) * .5);padding-bottom: calc(var(--spacing) * 4);
        justify-content: space-between;
        align-items: center;
        display: flex
    }

    .calendar__header:has(.calendar-year-picker__trigger[data-open=true]) .calendar__nav-button {
        pointer-events: none;
        opacity: 0
    }

    .calendar__heading {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        flex: 1
    }

    .calendar__nav-button {
        width: calc(var(--spacing) * 6);
        height: calc(var(--spacing) * 6);
        border-radius: calc(var(--radius) * 2);
        color: var(--accent-soft-foreground);
        will-change: scale;
        transition: transform .25s var(--ease-out), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out), opacity .15s var(--ease-out);
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
        justify-content: center;
        align-items: center;
        display: flex
    }

    .calendar__nav-button:is([data-reduce-motion=true],[data-reduce-motion=true] *),.calendar__nav-button: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.calendar__nav-button:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .calendar__nav-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.calendar__nav-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.calendar__nav-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .calendar__nav-button {
        cursor: var(--cursor-interactive)
    }

    @media (hover: hover) {
        .calendar__nav-button:hover,.calendar__nav-button[data-hovered=true] {
            background-color:var(--default);
            color: var(--accent-soft-foreground)
        }
    }

    .calendar__nav-button:active,.calendar__nav-button[data-pressed=true] {
        transform: scale(.95)
    }

    .calendar__nav-button:focus-visible,.calendar__nav-button[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .calendar__nav-button:disabled,.calendar__nav-button[data-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .calendar__nav-button-icon {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .calendar__nav-button-icon:where(:is(:lang(ae),: lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),[dir=rtl],[dir=rtl] *) {
        rotate:180deg
    }

    .calendar__grid {
        grid-template-columns: repeat(7,1fr);
        width: 100%;
        display: grid
    }

    .calendar__grid[aria-readonly=true] .calendar__cell {
        pointer-events: none
    }

    .calendar__grid-header,.calendar__grid-header>tr,.calendar__grid-body,.calendar__grid-body>tr {
        display: contents
    }

    .calendar__grid-body>tr: first-child>td {
        margin-top:var(--spacing)
    }

    .calendar__grid-row {
        display: contents
    }

    .calendar__header-cell {
        padding-bottom: calc(var(--spacing) * 2);
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--muted);
        justify-content: center;
        align-items: center;
        display: flex
    }

    .calendar__cell {
        aspect-ratio: 1;
        border-radius: calc(var(--radius) * 3);
        text-align: center;
        width: 100%;
        height: 100%;
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        --tw-outline-style: none;
        -webkit-tap-highlight-color: transparent;
        will-change: scale;
        transition: transform .25s var(--ease-out), box-shadow .1s var(--ease-out);
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
        outline-style: none;
        justify-content: center;
        align-items: center;
        display: flex;
        position: relative
    }

    .calendar__cell:is([data-reduce-motion=true],[data-reduce-motion=true] *),.calendar__cell: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.calendar__cell:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .calendar__cell:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.calendar__cell:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.calendar__cell:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .calendar__cell {
        cursor: var(--cursor-interactive)
    }

    .calendar__cell:focus-visible:not(:focus),.calendar__cell[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .calendar__cell[data-today=true] {
        background-color: var(--accent-soft);
        color: var(--accent-soft-foreground)
    }

    @media (hover: hover) {
        .calendar__cell[data-today=true]:hover:not([data-selected=true]),.calendar__cell[data-today=true][data-hovered=true]:not([data-selected=true]) {
            background-color:var(--accent-soft-hover)
        }
    }

    .calendar__cell[data-selected=true] {
        background-color: var(--accent);
        color: var(--accent-foreground)
    }

    .calendar__cell:active,.calendar__cell[data-pressed=true] {
        background-color: var(--default);
        transform: scale(.95)
    }

    :is(.calendar__cell:active,.calendar__cell[data-pressed=true])[data-selected=true] {
        background-color: var(--accent-hover)
    }

    @media (hover: hover) {
        .calendar__cell:hover:not([data-selected=true]),.calendar__cell[data-hovered=true]:not([data-selected=true]) {
            background-color:var(--default)
        }
    }

    .calendar__cell[data-outside-month=true] {
        color: var(--muted);
        opacity: .5
    }

    .calendar__cell[data-selected=true][data-outside-month=true] {
        background-color: var(--default)
    }

    .calendar__cell[data-unavailable=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .calendar__cell:disabled:not([data-outside-month=true]),.calendar__cell[data-disabled=true]: not([data-outside-month=true]) {
        opacity:var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none;
        text-decoration: line-through
    }

    .calendar__cell-indicator {
        bottom: var(--spacing);
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        width: 3px;
        height: 3px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        border-radius: calc(var(--radius) * .25);
        background-color: var(--muted);
        position: absolute;
        left: 50%
    }

    [data-selected=true]>.calendar__cell-indicator {
        background-color: var(--accent-foreground)
    }

    .range-calendar {
        width: calc(var(--spacing) * 63);
        max-width: calc(var(--spacing) * 63);
        container-type: inline-size
    }

    .range-calendar--week-view .range-calendar__cell,.range-calendar--day-view .range-calendar__cell {
        aspect-ratio: 1;
        place-self: center;
        width: 100%;
        height: auto
    }

    .range-calendar--day-view .range-calendar__grid {
        flex-direction: column;
        display: flex
    }

    .range-calendar--day-view .range-calendar__grid-header {
        grid-template-columns: repeat(7,1fr);
        width: 100%;
        display: grid
    }

    .range-calendar--day-view .range-calendar__grid-header>tr {
        display: contents
    }

    .range-calendar--day-view .range-calendar__grid-body {
        margin-top: var(--spacing);
        grid-template-columns: repeat(7,1fr);
        width: 100%;
        display: grid
    }

    .range-calendar--day-view .range-calendar__grid-body>tr {
        display: contents
    }

    .range-calendar--day-view .range-calendar__grid-body>tr: first-child>td {
        margin-top:0
    }

    .range-calendar__header {
        padding-inline:calc(var(--spacing) * .5);padding-bottom: calc(var(--spacing) * 4);
        justify-content: space-between;
        align-items: center;
        display: flex
    }

    .range-calendar__header:has(.calendar-year-picker__trigger[data-open=true]) .range-calendar__nav-button {
        pointer-events: none;
        opacity: 0
    }

    .range-calendar__heading {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        flex: 1
    }

    .range-calendar__nav-button {
        width: calc(var(--spacing) * 6);
        height: calc(var(--spacing) * 6);
        border-radius: calc(var(--radius) * 1.5);
        color: var(--accent-soft-foreground);
        will-change: scale;
        transition: transform .25s var(--ease-out), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out), opacity .15s var(--ease-out);
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
        justify-content: center;
        align-items: center;
        display: flex
    }

    .range-calendar__nav-button:is([data-reduce-motion=true],[data-reduce-motion=true] *),.range-calendar__nav-button: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.range-calendar__nav-button:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .range-calendar__nav-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.range-calendar__nav-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.range-calendar__nav-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .range-calendar__nav-button {
        cursor: var(--cursor-interactive)
    }

    @media (hover: hover) {
        .range-calendar__nav-button:hover,.range-calendar__nav-button[data-hovered=true] {
            background-color:var(--default);
            color: var(--accent-soft-foreground)
        }
    }

    .range-calendar__nav-button:active,.range-calendar__nav-button[data-pressed=true] {
        transform: scale(.95)
    }

    .range-calendar__nav-button:focus-visible,.range-calendar__nav-button[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .range-calendar__nav-button:disabled,.range-calendar__nav-button[data-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .range-calendar__nav-button-icon {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .range-calendar__nav-button-icon:where(:is(:lang(ae),: lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),[dir=rtl],[dir=rtl] *) {
        rotate:180deg
    }

    .range-calendar__grid {
        grid-template-columns: repeat(7,1fr);
        width: 100%;
        display: grid
    }

    .range-calendar__grid[aria-readonly=true] .range-calendar__cell {
        pointer-events: none
    }

    .range-calendar__grid-header,.range-calendar__grid-header>tr,.range-calendar__grid-body,.range-calendar__grid-body>tr {
        display: contents
    }

    .range-calendar__grid-body>tr: first-child>td {
        margin-top:var(--spacing)
    }

    .range-calendar__grid-row {
        display: contents
    }

    .range-calendar__header-cell {
        padding-bottom: calc(var(--spacing) * 2);
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--muted);
        justify-content: center;
        align-items: center;
        display: flex
    }

    .range-calendar__cell {
        z-index: 1;
        border-radius: calc(var(--radius) * 3);
        --tw-outline-style: none;
        cursor: var(--cursor-interactive);
        will-change: background-color, border-color;
        transition: box-shadow .1s var(--ease-out), border-color .1s var(--ease-out);
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
        outline-style: none;
        margin-block:2px;margin-inline:0;padding: 0;
        position: relative
    }

    .range-calendar__cell:is([data-reduce-motion=true],[data-reduce-motion=true] *),.range-calendar__cell: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.range-calendar__cell:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .range-calendar__cell:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.range-calendar__cell:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.range-calendar__cell:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .range-calendar__cell .range-calendar__cell-button {
        aspect-ratio: 1;
        border-radius: calc(var(--radius) * 3);
        width: 100%;
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--foreground);
        -webkit-tap-highlight-color: transparent;
        will-change: scale;
        transition: scale .2s var(--ease-out);
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
        justify-content: center;
        align-items: center;
        display: flex
    }

    .range-calendar__cell .range-calendar__cell-button:is([data-reduce-motion=true],[data-reduce-motion=true] *),.range-calendar__cell .range-calendar__cell-button: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.range-calendar__cell .range-calendar__cell-button:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .range-calendar__cell .range-calendar__cell-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.range-calendar__cell .range-calendar__cell-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.range-calendar__cell .range-calendar__cell-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .range-calendar__cell:focus-visible:not(:focus),.range-calendar__cell[data-focus-visible=true] {
        z-index: 2
    }

    :is(.range-calendar__cell:focus-visible:not(:focus),.range-calendar__cell[data-focus-visible=true]) .range-calendar__cell-button {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .range-calendar__cell[data-today=true] .range-calendar__cell-button {
        background-color: var(--accent-soft);
        color: var(--accent-soft-foreground)
    }

    @media (hover: hover) {
        :is(.range-calendar__cell[data-today=true]:hover:not([data-selected=true]),.range-calendar__cell[data-today=true][data-hovered=true]:not([data-selected=true])) .range-calendar__cell-button {
            background-color:var(--accent-soft-hover)
        }
    }

    .range-calendar__cell[data-selected=true]: not([data-outside-month=true]) {
        background-color:var(--accent-soft);
        border-radius: 0
    }

    .range-calendar__cell[data-selected=true]: is(td:first-child>*,[aria-disabled]+td>*) {
        border-start-start-radius:calc(var(--radius) * 1);
        border-end-start-radius: calc(var(--radius) * 1)
    }

    .range-calendar__cell[data-selected=true]: is(td:first-child>*,[aria-disabled]+td>*)[data-selection-start=true] {
        border-start-start-radius:calc(var(--radius) * 3);
        border-end-start-radius: calc(var(--radius) * 3)
    }

    .range-calendar__cell[data-selected=true]: is(td:last-child>*,td:has(+[aria-disabled])>*) {
        border-start-end-radius:calc(var(--radius) * 1);
        border-end-end-radius: calc(var(--radius) * 1)
    }

    .range-calendar__cell[data-selected=true]: is(td:last-child>*,td:has(+[aria-disabled])>*)[data-selection-end=true] {
        border-start-end-radius:calc(var(--radius) * 3);
        border-end-end-radius: calc(var(--radius) * 3)
    }

    .range-calendar__cell[data-selection-start=true]: not([data-outside-month=true]),.range-calendar__cell[data-selection-end=true]:not([data-outside-month=true]) {
        z-index:2
    }

    :is(.range-calendar__cell[data-selection-start=true]: not([data-outside-month=true]),.range-calendar__cell[data-selection-end=true]:not([data-outside-month=true])) .range-calendar__cell-button {
        background-color:var(--accent);
        color: var(--accent-foreground)
    }

    .range-calendar__cell[data-selection-start=true]: not([data-outside-month=true]) {
        border-start-start-radius:calc(var(--radius) * 3);
        border-end-start-radius: calc(var(--radius) * 3)
    }

    .range-calendar__cell[data-selection-end=true]: not([data-outside-month=true]) {
        border-start-end-radius:calc(var(--radius) * 3);
        border-end-end-radius: calc(var(--radius) * 3)
    }

    :is(.range-calendar__cell:active,.range-calendar__cell[data-pressed=true]) .range-calendar__cell-button {
        scale: .9
    }

    :is(:is(.range-calendar__cell:active,.range-calendar__cell[data-pressed=true])[data-selection-start=true],: is(.range-calendar__cell:active,.range-calendar__cell[data-pressed=true])[data-selection-end=true]) .range-calendar__cell-button {
        background-color:var(--accent-hover)
    }

    @media (hover: hover) {
        :is(.range-calendar__cell:hover:not([data-selected=true]),.range-calendar__cell[data-hovered=true]:not([data-selected=true])) .range-calendar__cell-button {
            background-color:var(--default)
        }
    }

    .range-calendar__cell[data-outside-month=true] {
        color: var(--muted);
        opacity: .5
    }

    .range-calendar__cell[data-selected=true][data-outside-month=true]: not([data-selection-start=true],[data-selection-end=true]) {
        background-color:var(--default)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .range-calendar__cell[data-selected=true][data-outside-month=true]:not([data-selection-start=true],[data-selection-end=true]) {
            background-color:color-mix(in oklab, var(--default) 20%, transparent)
        }
    }

    .range-calendar__cell[data-unavailable=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .range-calendar__cell:disabled:not([data-outside-month=true]),.range-calendar__cell[data-disabled=true]: not([data-outside-month=true]) {
        opacity:var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none;
        text-decoration: line-through
    }

    .range-calendar__grid-body td: has(>.range-calendar__cell[data-outside-month=true])+td>.range-calendar__cell[data-selected=true] {
        border-start-start-radius:calc(var(--radius) * 1);
        border-end-start-radius: calc(var(--radius) * 1)
    }

    :is(.range-calendar__grid-body td: has(>.range-calendar__cell[data-outside-month=true])+td>.range-calendar__cell[data-selected=true][data-outside-month=true],.range-calendar__grid-body td:has(>.range-calendar__cell[data-outside-month=true])+td>.range-calendar__cell[data-selected=true][data-selection-start=true]) {
        border-start-start-radius:calc(var(--radius) * 3);
        border-end-start-radius: calc(var(--radius) * 3)
    }

    .range-calendar__grid-body td: has(>.range-calendar__cell[data-selected=true]):has(+td>.range-calendar__cell[data-outside-month=true])>.range-calendar__cell[data-selected=true] {
        border-start-end-radius:calc(var(--radius) * 1);
        border-end-end-radius: calc(var(--radius) * 1)
    }

    :is(.range-calendar__grid-body td: has(>.range-calendar__cell[data-selected=true]):has(+td>.range-calendar__cell[data-outside-month=true])>.range-calendar__cell[data-selected=true][data-outside-month=true],.range-calendar__grid-body td:has(>.range-calendar__cell[data-selected=true]):has(+td>.range-calendar__cell[data-outside-month=true])>.range-calendar__cell[data-selected=true][data-selection-end=true]) {
        border-start-end-radius:calc(var(--radius) * 3);
        border-end-end-radius: calc(var(--radius) * 3)
    }

    .range-calendar__cell-indicator {
        bottom: var(--spacing);
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        width: 3px;
        height: 3px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        border-radius: calc(var(--radius) * .25);
        background-color: var(--muted);
        position: absolute;
        left: 50%
    }

    [data-selected=true]>.range-calendar__cell-indicator {
        background-color: var(--accent-foreground)
    }

    :is(.calendar:has(.calendar-year-picker__year-grid),.range-calendar:has(.calendar-year-picker__year-grid)) {
        position: relative
    }

    :is(.calendar:has(.calendar-year-picker__year-grid)>[data-slot=calendar-grid],.range-calendar: has(.calendar-year-picker__year-grid)>[data-slot=range-calendar-grid]) {
        will-change:opacity;
        transition: opacity .15s var(--ease-out), visibility 0s linear
    }

    :is(.calendar:has(.calendar-year-picker__year-grid)>[data-slot=calendar-grid],.range-calendar: has(.calendar-year-picker__year-grid)>[data-slot=range-calendar-grid]):is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.calendar:has(.calendar-year-picker__year-grid)>[data-slot=calendar-grid],.range-calendar:has(.calendar-year-picker__year-grid)>[data-slot=range-calendar-grid]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.calendar:has(.calendar-year-picker__year-grid)>[data-slot=calendar-grid],.range-calendar:has(.calendar-year-picker__year-grid)>[data-slot=range-calendar-grid]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        :is(.calendar:has(.calendar-year-picker__year-grid)>[data-slot=calendar-grid],.range-calendar:has(.calendar-year-picker__year-grid)>[data-slot=range-calendar-grid]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.calendar:has(.calendar-year-picker__year-grid)>[data-slot=calendar-grid],.range-calendar:has(.calendar-year-picker__year-grid)>[data-slot=range-calendar-grid]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.calendar:has(.calendar-year-picker__year-grid)>[data-slot=calendar-grid],.range-calendar:has(.calendar-year-picker__year-grid)>[data-slot=range-calendar-grid]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    :is(.calendar:has(.calendar-year-picker__year-grid[data-open=true])>[data-slot=calendar-grid],.range-calendar: has(.calendar-year-picker__year-grid[data-open=true])>[data-slot=range-calendar-grid]) {
        pointer-events:none;
        opacity: 0;
        visibility: hidden;
        transition: opacity .15s var(--ease-out), visibility 0s linear .15s
    }

    :is(.calendar:has(.calendar-year-picker__year-grid[data-open=true])>[data-slot=calendar-grid],.range-calendar: has(.calendar-year-picker__year-grid[data-open=true])>[data-slot=range-calendar-grid]):is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.calendar:has(.calendar-year-picker__year-grid[data-open=true])>[data-slot=calendar-grid],.range-calendar:has(.calendar-year-picker__year-grid[data-open=true])>[data-slot=range-calendar-grid]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.calendar:has(.calendar-year-picker__year-grid[data-open=true])>[data-slot=calendar-grid],.range-calendar:has(.calendar-year-picker__year-grid[data-open=true])>[data-slot=range-calendar-grid]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        :is(.calendar:has(.calendar-year-picker__year-grid[data-open=true])>[data-slot=calendar-grid],.range-calendar:has(.calendar-year-picker__year-grid[data-open=true])>[data-slot=range-calendar-grid]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.calendar:has(.calendar-year-picker__year-grid[data-open=true])>[data-slot=calendar-grid],.range-calendar:has(.calendar-year-picker__year-grid[data-open=true])>[data-slot=range-calendar-grid]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.calendar:has(.calendar-year-picker__year-grid[data-open=true])>[data-slot=calendar-grid],.range-calendar:has(.calendar-year-picker__year-grid[data-open=true])>[data-slot=range-calendar-grid]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .calendar-year-picker__trigger {
        justify-content: flex-start;
        align-items: center;
        gap: var(--spacing);
        border-radius: calc(var(--radius) * 1);
        --tw-outline-style: none;
        cursor: var(--cursor-interactive);
        touch-action: manipulation;
        outline-style: none;
        flex: 1;
        display: flex
    }

    .calendar-year-picker__trigger:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .calendar-year-picker__trigger-heading {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        transition: color .15s var(--ease-out)
    }

    .calendar-year-picker__trigger-heading:is([data-reduce-motion=true],[data-reduce-motion=true] *),.calendar-year-picker__trigger-heading: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.calendar-year-picker__trigger-heading:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .calendar-year-picker__trigger-heading:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.calendar-year-picker__trigger-heading:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.calendar-year-picker__trigger-heading:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .calendar-year-picker__trigger-indicator {
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        color: var(--accent-soft-foreground)
    }

    .calendar-year-picker__trigger-indicator:where(:is(:lang(ae),: lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),[dir=rtl],[dir=rtl] *) {
        transform:rotate(180deg)
    }

    .calendar-year-picker__trigger-indicator {
        transition: transform .15s var(--ease-out)
    }

    .calendar-year-picker__trigger-indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *),.calendar-year-picker__trigger-indicator: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.calendar-year-picker__trigger-indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .calendar-year-picker__trigger-indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.calendar-year-picker__trigger-indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.calendar-year-picker__trigger-indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .calendar-year-picker__trigger[data-open=true] .calendar-year-picker__trigger-indicator {
        transform: rotate(90deg)
    }

    .calendar-year-picker__trigger[data-open=true] .calendar-year-picker__trigger-heading {
        color: var(--accent-soft-foreground)
    }

    .calendar-year-picker__year-grid {
        pointer-events: none;
        scrollbar-width: var(--scrollbar-width);
        scrollbar-color: var(--scrollbar-color);
        scrollbar-gutter: var(--scrollbar-gutter);
        align-content: flex-start;
        gap: var(--spacing);
        padding: var(--spacing);
        opacity: 0;
        will-change: opacity;
        grid-template-columns: repeat(3,1fr);
        display: grid;
        position: absolute;
        inset-inline-start: calc(var(--spacing) * 0);
        inset-inline-end: calc(var(--spacing) * 0);
        overflow-y: auto
    }

    .calendar-year-picker__year-grid[data-open=true] {
        pointer-events: auto;
        opacity: 1;
        transition: opacity .2s var(--ease-out) 50ms
    }

    .calendar-year-picker__year-grid[data-open=true]: is([data-reduce-motion=true],[data-reduce-motion=true] *),.calendar-year-picker__year-grid[data-open=true]:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.calendar-year-picker__year-grid[data-open=true]:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .calendar-year-picker__year-grid[data-open=true]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.calendar-year-picker__year-grid[data-open=true]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.calendar-year-picker__year-grid[data-open=true]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .calendar-year-picker__year-cell {
        height: calc(var(--spacing) * 8);
        border-radius: calc(var(--radius) * 3);
        padding-inline:calc(var(--spacing) * 2.5);font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        --tw-outline-style: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: color .1s var(--ease-smooth), scale .1s var(--ease-smooth), opacity .1s var(--ease-smooth), background-color .1s var(--ease-smooth), box-shadow .1s var(--ease-out);
        transform-origin: 50%;
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
        outline-style: none;
        justify-content: center;
        align-items: center;
        display: inline-flex;
        position: relative
    }

    .calendar-year-picker__year-cell:is([data-reduce-motion=true],[data-reduce-motion=true] *),.calendar-year-picker__year-cell: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.calendar-year-picker__year-cell:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .calendar-year-picker__year-cell:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.calendar-year-picker__year-cell:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.calendar-year-picker__year-cell:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .calendar-year-picker__year-cell {
        cursor: var(--cursor-interactive)
    }

    @media (hover: hover) and (pointer:fine) {
        .calendar-year-picker__year-cell:is(:hover,[data-hovered=true]):not([data-selected=true]) {
            background-color:var(--default);
            color: var(--default-foreground)
        }
    }

    .calendar-year-picker__year-cell[data-selected=true],.calendar-year-picker__year-cell[aria-selected=true] {
        background-color: var(--accent);
        color: var(--accent-foreground)
    }

    @media (hover: hover) and (pointer:fine) {
        :is(.calendar-year-picker__year-cell[data-selected=true],.calendar-year-picker__year-cell[aria-selected=true]):is(:hover,[data-hovered=true]) {
            background-color:var(--accent-hover)
        }
    }

    .calendar-year-picker__year-cell:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .date-field {
        gap: var(--spacing);
        flex-direction: column;
        display: flex
    }

    :is(.date-field[data-invalid=true],.date-field[aria-invalid=true]) [data-slot=description] {
        display: none
    }

    .date-field [data-slot=label] {
        width: fit-content
    }

    .date-field--full-width {
        width: 100%
    }

    .time-field {
        gap: var(--spacing);
        flex-direction: column;
        display: flex
    }

    :is(.time-field[data-invalid=true],.time-field[aria-invalid=true]) [data-slot=description] {
        display: none
    }

    .time-field [data-slot=label] {
        width: fit-content
    }

    .time-field--full-width {
        width: 100%
    }

    .date-input-group {
        height: calc(var(--spacing) * 9);
        border-radius: var(--field-radius,calc(var(--radius) * 1.5));
        border-style: var(--tw-border-style);
        background-color: var(--field-background,var(--default));
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--field-foreground,var(--foreground));
        --tw-shadow: var(--field-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        border-width: 1px;
        border-width: var(--border-width-field);
        border-color: var(--field-border);
        transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
        outline-style: none;
        align-items: center;
        display: inline-flex;
        overflow: hidden
    }

    .date-input-group:is([data-reduce-motion=true],[data-reduce-motion=true] *),.date-input-group: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.date-input-group:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .date-input-group:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.date-input-group:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.date-input-group:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    @media (hover: hover) {
        .date-input-group:hover:not(:focus-within),.date-input-group[data-hovered=true]:not([data-focus-within=true]) {
            background-color:var(--field-hover);
            border-color: var(--field-border-hover)
        }
    }

    :is(.date-input-group[data-focus-within=true]: not(:has([data-slot=date-picker-trigger]:focus,[data-slot=date-picker-trigger][data-focused=true],[data-slot=date-range-picker-trigger]:focus,[data-slot=date-range-picker-trigger][data-focused=true])),.date-input-group:focus-within:not(:has([data-slot=date-picker-trigger]:focus,[data-slot=date-picker-trigger][data-focused=true],[data-slot=date-range-picker-trigger]:focus,[data-slot=date-range-picker-trigger][data-focused=true]))) {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-outline-style: none;
        outline-style: none
    }

    .date-input-group[data-invalid=true] {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .date-input-group[data-invalid=true]: focus,.date-input-group[data-invalid=true]:focus-visible,.date-input-group[data-invalid=true][data-focused=true],.date-input-group[data-invalid=true][data-focus-visible=true],.date-input-group[data-invalid=true]:focus-within,.date-input-group[data-invalid=true][data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .date-input-group[data-invalid=true] {
        background-color: var(--field-focus);
        border-color: var(--color-field-border-invalid)
    }

    .date-input-group[data-disabled=true],.date-input-group[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .date-input-group__input {
        cursor: text;
        border-style: var(--tw-border-style);
        padding-inline:calc(var(--spacing) * 3);padding-block: calc(var(--spacing) * 2);
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        background-color: #0000;
        border-width: 0;
        border-radius: 0;
        outline-style: none;
        flex: 1;
        align-items: center;
        gap: 1px;
        display: flex
    }

    @media (min-width: 40rem) {
        .date-input-group__input {
            font-size:var(--text-sm);
            line-height: var(--tw-leading,var(--text-sm--line-height))
        }
    }

    .date-input-group:has([data-slot=date-input-group-prefix]) .date-input-group__input {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
        padding-inline-start:calc(var(--spacing) * 2)}

    .date-input-group: has([data-slot=date-input-group-suffix]) .date-input-group__input {
        border-start-end-radius:0;
        border-end-end-radius: 0;
        padding-inline-end:calc(var(--spacing) * 2)}

    .date-input-group: has(.date-range-picker__range-separator) .date-input-group__input[slot=start] {
        flex:none;
        padding-inline-end:0}

    .date-input-group:has(.date-range-picker__range-separator) .date-input-group__input[slot=end] {
        padding-inline-start: 0
    }

    .date-input-group__input:focus,.date-input-group__input:focus-visible {
        --tw-outline-style: none;
        outline-style: none
    }

    .date-input-group__input-container {
        scrollbar-color: auto;
        scrollbar-gutter: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        flex: 1;
        align-items: center;
        width: fit-content;
        display: flex;
        overflow: auto clip
    }

    .date-input-group__segment {
        border-radius: calc(var(--radius) * .75);
        padding-inline:calc(var(--spacing) * .5);text-align: end;
        text-wrap: nowrap;
        --tw-outline-style: none;
        outline-style: none;
        display: inline-block
    }

    .date-input-group__segment[data-type=literal] {
        color: var(--muted);
        padding: 0
    }

    .date-input-group__segment[data-placeholder=true] {
        color: var(--field-placeholder,var(--muted))
    }

    .date-input-group__segment:focus,.date-input-group__segment[data-focused=true] {
        background-color: var(--accent-soft);
        color: var(--accent-soft-foreground)
    }

    .date-input-group__segment[data-disabled=true] {
        opacity: .5
    }

    .date-input-group__segment[data-invalid=true] {
        color: var(--danger)
    }

    .date-input-group__segment[data-invalid=true]: focus,.date-input-group__segment[data-invalid=true][data-focused=true] {
        background-color:var(--danger-soft);
        color: var(--danger-soft-foreground)
    }

    .date-input-group__prefix {
        pointer-events: none;
        color: var(--field-placeholder,var(--muted));
        flex-shrink: 0;
        align-items: center;
        margin-inline-start:calc(var(--spacing) * 3);margin-inline-end: 0;
        display: flex
    }

    .date-input-group__suffix {
        pointer-events: none;
        color: var(--field-placeholder,var(--muted));
        flex-shrink: 0;
        align-items: center;
        margin-inline-end:calc(var(--spacing) * 3);display: flex
    }

    .date-input-group--secondary {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        background-color: var(--date-input-group-bg);
        --date-input-group-bg: var(--default);
        --date-input-group-bg-hover: var(--default-hover);
        --date-input-group-bg-focus: var(--default)
    }

    @media (hover: hover) {
        .date-input-group--secondary:hover:not(:focus-within),.date-input-group--secondary[data-hovered=true]:not([data-focus-within=true]) {
            background-color:var(--date-input-group-bg-hover)
        }
    }

    .date-input-group--secondary:focus-within,.date-input-group--secondary[data-focus-within=true] {
        background-color: var(--date-input-group-bg-focus)
    }

    .date-input-group--secondary[data-invalid=true] {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    .date-input-group--secondary[data-invalid=true]: focus,.date-input-group--secondary[data-invalid=true]:focus-visible,.date-input-group--secondary[data-invalid=true][data-focused=true],.date-input-group--secondary[data-invalid=true][data-focus-visible=true],.date-input-group--secondary[data-invalid=true]:focus-within,.date-input-group--secondary[data-invalid=true][data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .date-input-group--secondary[data-invalid=true] {
        border-color: var(--color-field-border-invalid);
        background-color: var(--date-input-group-bg-focus)
    }

    .date-input-group--secondary [data-slot=date-input-group-input] {
        background-color: #0000
    }

    .date-input-group--full-width {
        width: 100%
    }

    .date-picker {
        gap: var(--spacing);
        flex-direction: column;
        display: inline-flex
    }

    .date-picker .date-input-group__suffix,.date-picker .date-input-group__prefix {
        pointer-events: auto
    }

    .date-picker__trigger {
        border-radius: var(--field-radius,calc(var(--radius) * 1.5));
        width: 100%;
        padding: var(--spacing);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        -webkit-tap-highlight-color: transparent;
        cursor: var(--cursor-interactive);
        transition: box-shadow .15s var(--ease-out);
        align-items: center;
        display: inline-flex
    }

    .date-picker__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.date-picker__trigger: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.date-picker__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .date-picker__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.date-picker__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.date-picker__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .date-picker__trigger:focus-visible:not(:focus),.date-picker__trigger[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .date-picker__trigger:disabled,.date-picker__trigger[data-disabled=true],.date-picker__trigger[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .date-picker__trigger-indicator {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        color: var(--field-placeholder,var(--muted));
        justify-content: center;
        align-items: center;
        display: inline-flex
    }

    .date-picker__popover {
        width: fit-content;
        transform-origin: var(--trigger-anchor-point);
        scrollbar-color: auto;
        scrollbar-gutter: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        overscroll-behavior: contain;
        background-color: var(--overlay);
        padding: calc(var(--spacing) * 3);
        overflow-y: auto
    }

    .date-picker__popover:is([data-reduce-motion=true],[data-reduce-motion=true] *),.date-picker__popover: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.date-picker__popover:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .date-picker__popover:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.date-picker__popover:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.date-picker__popover:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .date-picker__popover {
        box-shadow: var(--shadow-overlay);
        border-radius: min(32px, calc(var(--radius) * 2.5))
    }

    .date-picker__popover:focus-visible:not(:focus),.date-picker__popover[data-focus-visible=true] {
        --tw-outline-style: none;
        outline-style: none
    }

    .date-picker__popover[data-entering=true] {
        animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .15s;
        --tw-ease: ease;
        --tw-enter-opacity: 0;
        --tw-enter-scale: .95;
        transition-duration: .15s;
        transition-timing-function: ease
    }

    .date-picker__popover[data-entering=true][data-placement^=top] {
        --tw-enter-translate-y: calc(1*var(--spacing))
    }

    .date-picker__popover[data-entering=true][data-placement^=bottom] {
        --tw-enter-translate-y: calc(1*var(--spacing)*-1)
    }

    .date-picker__popover[data-entering=true][data-placement^=left] {
        --tw-enter-translate-x: calc(1*var(--spacing))
    }

    .date-picker__popover[data-entering=true][data-placement^=right] {
        --tw-enter-translate-x: calc(1*var(--spacing)*-1)
    }

    .date-picker__popover[data-exiting=true] {
        animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .1s;
        --tw-ease: ease;
        --tw-exit-scale: .95;
        --tw-exit-opacity: 0;
        transition-duration: .1s;
        transition-timing-function: ease
    }

    .date-picker__popover[data-exiting=true],.date-picker__popover[data-entering=true] {
        transition-property: opacity,transform;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        will-change: opacity,transform
    }

    .date-picker__popover .calendar__nav-button-icon,.date-picker__popover .range-calendar__nav-button-icon {
        rotate: none
    }

    .date-range-picker {
        gap: var(--spacing);
        flex-direction: column;
        display: inline-flex
    }

    .date-range-picker .date-input-group__suffix,.date-range-picker .date-input-group__prefix {
        pointer-events: auto
    }

    .date-range-picker__trigger {
        border-radius: var(--field-radius,calc(var(--radius) * 1.5));
        width: 100%;
        padding: var(--spacing);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        -webkit-tap-highlight-color: transparent;
        cursor: var(--cursor-interactive);
        transition: box-shadow .15s var(--ease-out);
        align-items: center;
        display: inline-flex
    }

    .date-range-picker__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.date-range-picker__trigger: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.date-range-picker__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .date-range-picker__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.date-range-picker__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.date-range-picker__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .date-range-picker__trigger:focus-visible:not(:focus),.date-range-picker__trigger[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .date-range-picker__trigger:disabled,.date-range-picker__trigger[data-disabled=true],.date-range-picker__trigger[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .date-range-picker__trigger-indicator {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        color: var(--field-placeholder,var(--muted));
        justify-content: center;
        align-items: center;
        display: inline-flex
    }

    .date-range-picker__range-separator {
        padding-inline:var(--spacing);color: var(--field-placeholder,var(--muted));
        -webkit-user-select: none;
        user-select: none
    }

    .date-range-picker__popover {
        width: fit-content;
        transform-origin: var(--trigger-anchor-point);
        scrollbar-color: auto;
        scrollbar-gutter: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        overscroll-behavior: contain;
        background-color: var(--overlay);
        padding: calc(var(--spacing) * 3);
        overflow-y: auto
    }

    .date-range-picker__popover:is([data-reduce-motion=true],[data-reduce-motion=true] *),.date-range-picker__popover: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.date-range-picker__popover:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .date-range-picker__popover:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.date-range-picker__popover:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.date-range-picker__popover:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .date-range-picker__popover {
        box-shadow: var(--shadow-overlay);
        border-radius: min(32px, calc(var(--radius) * 2.5))
    }

    .date-range-picker__popover:focus-visible:not(:focus),.date-range-picker__popover[data-focus-visible=true] {
        --tw-outline-style: none;
        outline-style: none
    }

    .date-range-picker__popover[data-entering=true] {
        animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .15s;
        --tw-ease: ease;
        --tw-enter-opacity: 0;
        --tw-enter-scale: .95;
        transition-duration: .15s;
        transition-timing-function: ease
    }

    .date-range-picker__popover[data-entering=true][data-placement^=top] {
        --tw-enter-translate-y: calc(1*var(--spacing))
    }

    .date-range-picker__popover[data-entering=true][data-placement^=bottom] {
        --tw-enter-translate-y: calc(1*var(--spacing)*-1)
    }

    .date-range-picker__popover[data-entering=true][data-placement^=left] {
        --tw-enter-translate-x: calc(1*var(--spacing))
    }

    .date-range-picker__popover[data-entering=true][data-placement^=right] {
        --tw-enter-translate-x: calc(1*var(--spacing)*-1)
    }

    .date-range-picker__popover[data-exiting=true] {
        animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .1s;
        --tw-ease: ease;
        --tw-exit-scale: .95;
        --tw-exit-opacity: 0;
        transition-duration: .1s;
        transition-timing-function: ease
    }

    .date-range-picker__popover[data-exiting=true],.date-range-picker__popover[data-entering=true] {
        transition-property: opacity,transform;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        will-change: opacity,transform
    }

    .date-range-picker__popover .range-calendar__nav-button-icon,.date-range-picker__popover .calendar__nav-button-icon {
        rotate: none
    }

    .card {
        gap: calc(var(--spacing) * 3);
        padding: calc(var(--spacing) * 4);
        --tw-shadow: var(--surface-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        border-radius: min(32px, var(--radius-3xl));
        flex-direction: column;
        display: flex;
        position: relative;
        overflow: visible
    }

    .card__header {
        flex-direction: column;
        display: flex
    }

    .card__title {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-leading: calc(var(--spacing) * 6);
        line-height: calc(var(--spacing) * 6);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--foreground)
    }

    .card__description {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-leading: calc(var(--spacing) * 5);
        line-height: calc(var(--spacing) * 5);
        color: var(--muted)
    }

    .card__content {
        gap: var(--spacing);
        flex-direction: column;
        flex: 1;
        display: flex
    }

    .card__footer {
        flex-direction: row;
        align-items: center;
        display: flex
    }

    .card--transparent {
        --tw-border-style: none;
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        background-color: #0000;
        border-style: none
    }

    .card--default {
        background-color: var(--surface)
    }

    .card--secondary {
        background-color: var(--surface-secondary)
    }

    .card--tertiary {
        background-color: var(--surface-tertiary)
    }

    .header {
        width: 100%;
        padding-inline:calc(var(--spacing) * 2);padding-top: calc(var(--spacing) * 1.5);
        padding-bottom: var(--spacing);
        text-align: start;
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--muted)
    }

    .separator {
        border-radius: calc(var(--radius) * .5);
        border-top-style: var(--tw-border-style);
        border-top-width: 0;
        border-bottom-style: var(--tw-border-style);
        background-color: var(--separator);
        border-bottom-width: 0;
        flex-shrink: 0;
        width: 100%;
        height: 1px
    }

    .separator--horizontal {
        width: 100%;
        height: 1px
    }

    .separator--vertical {
        height: auto;
        min-height: calc(var(--spacing) * 2);
        align-self: stretch;
        width: 1px
    }

    .separator--default {
        background-color: var(--separator)
    }

    .separator--secondary {
        background-color: var(--separator-secondary)
    }

    .separator--tertiary {
        background-color: var(--separator-tertiary)
    }

    .separator__container {
        align-items: center;
        gap: calc(var(--spacing) * 3);
        display: flex
    }

    .separator__container--horizontal {
        flex-direction: row;
        width: 100%
    }

    .separator__container--vertical {
        flex-direction: column;
        justify-content: center;
        height: 100%
    }

    .separator__line {
        flex-grow: 1;
        flex-shrink: 0
    }

    .separator__content {
        text-align: center;
        white-space: nowrap;
        color: var(--muted);
        justify-content: center;
        align-items: center;
        display: inline-flex
    }

    .separator__content--horizontal,.separator__content--vertical {
        text-align: center
    }

    .surface {
        color: var(--foreground);
        position: relative
    }

    .surface--transparent {
        background-color: #0000
    }

    .surface--default {
        background-color: var(--surface);
        color: var(--surface-foreground)
    }

    .surface--secondary {
        background-color: var(--surface-secondary);
        color: var(--surface-secondary-foreground)
    }

    .surface--tertiary {
        background-color: var(--surface-tertiary);
        color: var(--surface-tertiary-foreground)
    }

    .avatar {
        width: calc(var(--spacing) * 10);
        height: calc(var(--spacing) * 10);
        border-radius: calc(var(--radius) * 3);
        background-color: var(--default);
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        display: flex;
        position: relative;
        overflow: hidden
    }

    .avatar__fallback {
        background-color: var(--default);
        width: 100%;
        height: 100%;
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        justify-content: center;
        align-items: center;
        display: flex
    }

    .avatar__image {
        aspect-ratio: 1;
        width: 100%;
        height: 100%;
        transition-property: opacity;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-duration: .25s;
        transition-duration: .25s;
        position: absolute;
        inset: 0
    }

    .avatar__image:is([data-reduce-motion=true],[data-reduce-motion=true] *),.avatar__image: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.avatar__image:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .avatar__image:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.avatar__image:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.avatar__image:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .avatar--sm {
        width: calc(var(--spacing) * 8);
        height: calc(var(--spacing) * 8);
        border-radius: calc(var(--radius) * 2)
    }

    .avatar--lg {
        width: calc(var(--spacing) * 12);
        height: calc(var(--spacing) * 12);
        border-radius: calc(var(--radius) * 3)
    }

    .avatar--lg .avatar__fallback {
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height))
    }

    .avatar__fallback--accent {
        color: var(--accent-soft-foreground)
    }

    .avatar__fallback--default {
        color: var(--default-soft-foreground)
    }

    .avatar__fallback--success {
        color: var(--success-soft-foreground)
    }

    .avatar__fallback--warning {
        color: var(--warning-soft-foreground)
    }

    .avatar__fallback--danger {
        color: var(--danger-soft-foreground)
    }

    .avatar--soft {
        background-color: #0000
    }

    .avatar--soft .avatar__fallback--accent {
        background-color: var(--accent-soft);
        color: var(--accent-soft-foreground)
    }

    .avatar--soft .avatar__fallback--success {
        background-color: var(--success-soft);
        color: var(--success-soft-foreground)
    }

    .avatar--soft .avatar__fallback--warning {
        background-color: var(--warning-soft);
        color: var(--warning-soft-foreground)
    }

    .avatar--soft .avatar__fallback--default {
        background-color: var(--default-soft);
        color: var(--default-soft-foreground)
    }

    .avatar--soft .avatar__fallback--danger {
        background-color: var(--danger-soft);
        color: var(--danger-soft-foreground)
    }

    .alert-dialog__trigger {
        cursor: var(--cursor-interactive);
        transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
        display: inline-block
    }

    .alert-dialog__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.alert-dialog__trigger: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.alert-dialog__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .alert-dialog__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.alert-dialog__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.alert-dialog__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .alert-dialog__trigger:focus-visible:not(:focus),.alert-dialog__trigger[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .alert-dialog__trigger:disabled,.alert-dialog__trigger[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .alert-dialog__trigger:active,.alert-dialog__trigger[data-pressed=true] {
        transform: scale(.97)
    }

    .alert-dialog__backdrop {
        z-index: 50;
        height: var(--visual-viewport-height);
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        display: flex;
        position: fixed;
        inset: 0
    }

    .alert-dialog__backdrop[data-entering=true] {
        animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .15s;
        --tw-ease: var(--ease-out);
        transition-duration: .15s;
        transition-timing-function: var(--ease-out);
        --tw-enter-opacity: 0
    }

    .alert-dialog__backdrop[data-exiting=true] {
        animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .1s;
        --tw-ease: var(--ease-out);
        transition-duration: .1s;
        transition-timing-function: var(--ease-out);
        --tw-exit-opacity: 0
    }

    .alert-dialog__backdrop[data-exiting=true],.alert-dialog__backdrop[data-entering=true] {
        will-change: opacity
    }

    :is(.alert-dialog__backdrop[data-exiting=true],.alert-dialog__backdrop[data-entering=true]): is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.alert-dialog__backdrop[data-exiting=true],.alert-dialog__backdrop[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.alert-dialog__backdrop[data-exiting=true],.alert-dialog__backdrop[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        animation:none
    }

    @media (prefers-reduced-motion:reduce) {
        :is(.alert-dialog__backdrop[data-exiting=true],.alert-dialog__backdrop[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.alert-dialog__backdrop[data-exiting=true],.alert-dialog__backdrop[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.alert-dialog__backdrop[data-exiting=true],.alert-dialog__backdrop[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            animation: none
        }
    }

    .alert-dialog__backdrop--transparent {
        background-color: #0000
    }

    .alert-dialog__backdrop--opaque {
        background-color: var(--backdrop)
    }

    .alert-dialog__backdrop--blur {
        background-color: var(--backdrop);
        --tw-backdrop-blur: blur(var(--blur-md));
        -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
        backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)
    }

    .alert-dialog__container {
        height: var(--visual-viewport-height);
        width: 100%;
        min-width: 0;
        padding: calc(var(--spacing) * 4);
        flex-direction: column;
        flex: 1;
        align-items: center;
        display: flex
    }

    @media (min-width: 40rem) {
        .alert-dialog__container {
            width:fit-content;
            padding: calc(var(--spacing) * 10)
        }
    }

    .alert-dialog__container {
        pointer-events: none
    }

    .alert-dialog__container[data-entering=true] {
        animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .25s;
        --tw-ease: cubic-bezier(.25, .46, .45, .94);
        --tw-enter-opacity: 0;
        --tw-enter-scale: calc(105*1%);
        transition-duration: .25s;
        transition-timing-function: cubic-bezier(.25,.46,.45,.94)
    }

    .alert-dialog__container[data-entering=true][data-placement=auto] {
        --tw-enter-translate-y: calc(1*var(--spacing))
    }

    @media (min-width: 40rem) {
        .alert-dialog__container[data-entering=true][data-placement=auto] {
            --tw-enter-translate-y:calc(0*100%)
        }
    }

    .alert-dialog__container[data-entering=true][data-placement=top] {
        --tw-enter-translate-y: calc(1*var(--spacing)*-1)
    }

    .alert-dialog__container[data-entering=true][data-placement=center] {
        --tw-enter-translate-y: calc(0*-100%)
    }

    .alert-dialog__container[data-entering=true][data-placement=bottom] {
        --tw-enter-translate-y: calc(1*var(--spacing))
    }

    .alert-dialog__container[data-exiting=true] {
        animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .1s;
        --tw-ease: cubic-bezier(.25, .46, .45, .94);
        --tw-exit-opacity: 0;
        --tw-exit-scale: .95;
        transition-duration: .1s;
        transition-timing-function: cubic-bezier(.25,.46,.45,.94)
    }

    .alert-dialog__container[data-exiting=true],.alert-dialog__container[data-entering=true] {
        will-change: opacity,transform
    }

    :is(.alert-dialog__container[data-exiting=true],.alert-dialog__container[data-entering=true]): is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.alert-dialog__container[data-exiting=true],.alert-dialog__container[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.alert-dialog__container[data-exiting=true],.alert-dialog__container[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        animation:none
    }

    @media (prefers-reduced-motion:reduce) {
        :is(.alert-dialog__container[data-exiting=true],.alert-dialog__container[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.alert-dialog__container[data-exiting=true],.alert-dialog__container[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.alert-dialog__container[data-exiting=true],.alert-dialog__container[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            animation: none
        }
    }

    .alert-dialog__dialog {
        background-color: var(--overlay);
        --tw-shadow: var(--overlay-shadow);
        width: 100%;
        min-height: 0;
        max-height: 100%;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        border-radius: min(32px, var(--radius-3xl));
        padding: calc(var(--spacing) * 6);
        pointer-events: auto;
        outline-style: none;
        flex-direction: column;
        display: flex;
        position: relative;
        overflow: clip
    }

    .alert-dialog__dialog[data-placement=auto] {
        margin-top: auto
    }

    @media (min-width: 40rem) {
        .alert-dialog__dialog[data-placement=auto] {
            margin-block:auto
        }
    }

    .alert-dialog__dialog[data-placement=center] {
        margin-block: auto
    }

    .alert-dialog__dialog[data-placement=bottom] {
        margin-top: auto
    }

    .alert-dialog__dialog[data-placement=top] {
        margin-top: 0
    }

    .alert-dialog__dialog--xs {
        max-width: var(--container-xs)
    }

    .alert-dialog__dialog--sm {
        max-width: var(--container-sm)
    }

    .alert-dialog__dialog--md {
        max-width: var(--container-md)
    }

    .alert-dialog__dialog--lg {
        max-width: var(--container-lg)
    }

    .alert-dialog__dialog--cover {
        width: 100%;
        height: 100%;
        min-height: 100%
    }

    .alert-dialog__header {
        gap: calc(var(--spacing) * 3);
        flex-direction: column;
        margin-bottom: 0;
        display: flex
    }

    .alert-dialog__header>.modal__icon {
        margin-bottom: 0
    }

    .alert-dialog__heading {
        vertical-align: middle;
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--foreground)
    }

    .alert-dialog__icon {
        width: calc(var(--spacing) * 10);
        height: calc(var(--spacing) * 10);
        border-radius: calc(var(--radius) * 3);
        -webkit-user-select: none;
        user-select: none;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .alert-dialog__icon [data-slot=alert-dialog-default-icon] {
        box-sizing: content-box;
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5)
    }

    .alert-dialog__icon--default {
        background-color: var(--default);
        color: var(--foreground)
    }

    .alert-dialog__icon--accent {
        background-color: var(--accent-soft);
        color: var(--accent-soft-foreground)
    }

    .alert-dialog__icon--success {
        background-color: var(--success-soft);
        color: var(--success-soft-foreground)
    }

    .alert-dialog__icon--warning {
        background-color: var(--warning-soft);
        color: var(--warning-soft-foreground)
    }

    .alert-dialog__icon--danger {
        background-color: var(--danger-soft);
        color: var(--danger-soft-foreground)
    }

    .alert-dialog__body {
        scrollbar-width: var(--scrollbar-width);
        scrollbar-color: var(--scrollbar-color);
        scrollbar-gutter: var(--scrollbar-gutter);
        min-height: 0;
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-leading: 1.43;
        color: var(--muted);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        margin: -3px;
        flex: 1;
        margin-block:0;padding: 3px;
        line-height: 1.43;
        overflow-y: auto
    }

    .alert-dialog__footer {
        justify-content: flex-end;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        flex-direction: row;
        margin-top: 0;
        display: flex
    }

    .alert-dialog__close-trigger {
        inset-inline-end: calc(var(--spacing) * 4);
        top: calc(var(--spacing) * 4);
        position: absolute
    }

    .alert-dialog__header+.alert-dialog__body {
        margin-top: calc(var(--spacing) * 2)
    }

    .alert-dialog__header+.alert-dialog__footer,.alert-dialog__body+.alert-dialog__footer {
        margin-top: calc(var(--spacing) * 5)
    }

    .drawer__trigger {
        cursor: var(--cursor-interactive);
        transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
        display: inline-block
    }

    .drawer__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.drawer__trigger: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.drawer__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .drawer__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.drawer__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.drawer__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .drawer__trigger:focus-visible:not(:focus),.drawer__trigger[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

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

    .drawer__trigger:active,.drawer__trigger[data-pressed=true] {
        transform: scale(.97)
    }

    .drawer__backdrop {
        z-index: 50;
        height: var(--visual-viewport-height);
        opacity: 1;
        width: 100%;
        transition: opacity .25s cubic-bezier(.32,.72,0,1);
        position: fixed;
        inset: 0
    }

    .drawer__backdrop[data-entering=true] {
        opacity: 0
    }

    .drawer__backdrop[data-exiting=true] {
        opacity: 0;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(.32,.72,0,1)
    }

    .drawer__backdrop[data-exiting=true],.drawer__backdrop[data-entering=true] {
        will-change: opacity
    }

    @media (prefers-reduced-motion:reduce) {
        .drawer__backdrop {
            transition: none
        }
    }

    .drawer__backdrop--transparent {
        background-color: #0000
    }

    .drawer__backdrop--opaque {
        background-color: var(--backdrop)
    }

    .drawer__backdrop--blur {
        background-color: var(--backdrop);
        --tw-backdrop-blur: blur(var(--blur-md));
        -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
        backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)
    }

    .drawer__content {
        pointer-events: none;
        z-index: 50;
        height: var(--visual-viewport-height);
        width: 100%;
        min-width: 0;
        display: flex;
        position: fixed;
        inset: 0
    }

    .drawer__content--bottom {
        align-items: flex-end
    }

    .drawer__content--top {
        align-items: flex-start
    }

    .drawer__content--left {
        justify-content: flex-start
    }

    .drawer__content--right {
        justify-content: flex-end
    }

    .drawer__dialog {
        background-color: var(--overlay);
        --tw-shadow: var(--overlay-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        padding: calc(var(--spacing) * 6);
        pointer-events: auto;
        --drawer-enter-duration: .25s;
        --drawer-exit-duration: .2s;
        --drawer-enter-ease: cubic-bezier(.32, .72, 0, 1);
        --drawer-exit-ease: cubic-bezier(.32, .72, 0, 1);
        will-change: translate;
        transition: translate var(--drawer-enter-duration) var(--drawer-enter-ease);
        outline-style: none;
        flex-direction: column;
        display: flex;
        position: relative
    }

    @media (prefers-reduced-motion:reduce) {
        .drawer__dialog {
            transition: none
        }
    }

    .drawer__dialog[data-placement=bottom] {
        border-start-start-radius: min(32px, var(--radius-2xl));
        border-start-end-radius: min(32px, var(--radius-2xl));
        width: 100%;
        max-height: 85vh
    }

    .drawer__dialog[data-placement=top] {
        border-end-end-radius: min(32px, var(--radius-2xl));
        border-end-start-radius: min(32px, var(--radius-2xl));
        width: 100%;
        max-height: 85vh
    }

    .drawer__dialog[data-placement=left] {
        height: 100%;
        width: calc(var(--spacing) * 80);
        border-radius: 0;
        max-width: 85vw
    }

    @media (min-width: 40rem) {
        .drawer__dialog[data-placement=left] {
            width:calc(var(--spacing) * 96)
        }
    }

    .drawer__dialog[data-placement=right] {
        height: 100%;
        width: calc(var(--spacing) * 80);
        border-radius: 0;
        max-width: 85vw
    }

    @media (min-width: 40rem) {
        .drawer__dialog[data-placement=right] {
            width:calc(var(--spacing) * 96)
        }
    }

    [data-exiting=true] .drawer__dialog {
        transition-duration: var(--drawer-exit-duration);
        transition-timing-function: var(--drawer-exit-ease)
    }

    .drawer__content--left .drawer__dialog,.drawer__content--right .drawer__dialog,.drawer__content--top .drawer__dialog,.drawer__content--bottom .drawer__dialog {
        translate: 0
    }

    .drawer__content--left[data-entering=true] .drawer__dialog,.drawer__content--left[data-exiting=true] .drawer__dialog {
        translate: -100%
    }

    .drawer__content--right[data-entering=true] .drawer__dialog,.drawer__content--right[data-exiting=true] .drawer__dialog {
        translate: 100%
    }

    .drawer__content--top[data-entering=true] .drawer__dialog,.drawer__content--top[data-exiting=true] .drawer__dialog {
        translate: 0 -100%
    }

    .drawer__content--bottom[data-entering=true] .drawer__dialog,.drawer__content--bottom[data-exiting=true] .drawer__dialog {
        translate: 0 100%
    }

    .drawer__dialog--top {
        padding-bottom: calc(var(--spacing) * 2)
    }

    .drawer__dialog--top .drawer__handle {
        padding-bottom: 0
    }

    .drawer__header {
        gap: calc(var(--spacing) * 3);
        flex-direction: column;
        margin-bottom: 0;
        display: flex
    }

    .drawer__heading {
        vertical-align: middle;
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--foreground)
    }

    .drawer__body {
        scrollbar-width: var(--scrollbar-width);
        scrollbar-color: var(--scrollbar-color);
        scrollbar-gutter: var(--scrollbar-gutter);
        min-height: 0;
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-leading: 1.43;
        color: var(--muted);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        margin: -3px;
        flex: 1;
        margin-block:0;padding: 3px;
        line-height: 1.43;
        overflow-y: auto
    }

    .drawer__footer {
        justify-content: flex-end;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        flex-direction: row;
        margin-top: 0;
        display: flex
    }

    .drawer__handle {
        padding-bottom: calc(var(--spacing) * 2);
        justify-content: center;
        align-items: center;
        display: flex
    }

    .drawer__handle>[data-slot=drawer-handle-bar] {
        height: var(--spacing);
        width: calc(var(--spacing) * 9);
        border-radius: calc(var(--radius) * .25);
        background-color: var(--separator)
    }

    .drawer__close-trigger {
        inset-inline-end: calc(var(--spacing) * 4);
        top: calc(var(--spacing) * 4);
        position: absolute
    }

    .drawer__header+.drawer__body {
        margin-top: calc(var(--spacing) * 2)
    }

    .drawer__header+.drawer__footer,.drawer__body+.drawer__footer {
        margin-top: calc(var(--spacing) * 5)
    }

    .drawer__handle+.drawer__header,.drawer__handle+.drawer__body {
        margin-top: 0
    }

    .modal__trigger {
        cursor: var(--cursor-interactive);
        transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
        display: inline-block
    }

    .modal__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.modal__trigger: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.modal__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .modal__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.modal__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.modal__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .modal__trigger:focus-visible:not(:focus),.modal__trigger[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

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

    .modal__trigger:active,.modal__trigger[data-pressed=true] {
        transform: scale(.97)
    }

    .modal__backdrop {
        z-index: 50;
        height: var(--visual-viewport-height);
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        display: flex;
        position: fixed;
        inset: 0
    }

    .modal__backdrop[data-entering=true] {
        animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .15s;
        --tw-ease: var(--ease-out);
        transition-duration: .15s;
        transition-timing-function: var(--ease-out);
        --tw-enter-opacity: 0
    }

    .modal__backdrop[data-exiting=true] {
        animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .1s;
        --tw-ease: var(--ease-out);
        transition-duration: .1s;
        transition-timing-function: var(--ease-out);
        --tw-exit-opacity: 0
    }

    .modal__backdrop[data-exiting=true],.modal__backdrop[data-entering=true] {
        will-change: opacity
    }

    :is(.modal__backdrop[data-exiting=true],.modal__backdrop[data-entering=true]): is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.modal__backdrop[data-exiting=true],.modal__backdrop[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.modal__backdrop[data-exiting=true],.modal__backdrop[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        animation:none
    }

    @media (prefers-reduced-motion:reduce) {
        :is(.modal__backdrop[data-exiting=true],.modal__backdrop[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.modal__backdrop[data-exiting=true],.modal__backdrop[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.modal__backdrop[data-exiting=true],.modal__backdrop[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            animation: none
        }
    }

    .modal__backdrop--transparent {
        background-color: #0000
    }

    .modal__backdrop--opaque {
        background-color: var(--backdrop)
    }

    .modal__backdrop--blur {
        background-color: var(--backdrop);
        --tw-backdrop-blur: blur(var(--blur-md));
        -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
        backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)
    }

    .modal__container {
        height: var(--visual-viewport-height);
        width: 100%;
        min-width: 0;
        padding: calc(var(--spacing) * 4);
        flex-direction: column;
        flex: 1;
        align-items: center;
        display: flex
    }

    @media (min-width: 40rem) {
        .modal__container {
            width:fit-content;
            padding: calc(var(--spacing) * 10)
        }
    }

    .modal__container {
        pointer-events: none
    }

    .modal__container[data-entering=true] {
        animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .25s;
        --tw-ease: cubic-bezier(.25, .46, .45, .94);
        --tw-enter-opacity: 0;
        --tw-enter-scale: calc(105*1%);
        transition-duration: .25s;
        transition-timing-function: cubic-bezier(.25,.46,.45,.94)
    }

    .modal__container[data-entering=true][data-placement=auto] {
        --tw-enter-translate-y: calc(1*var(--spacing))
    }

    @media (min-width: 40rem) {
        .modal__container[data-entering=true][data-placement=auto] {
            --tw-enter-translate-y:calc(0*100%)
        }
    }

    .modal__container[data-entering=true][data-placement=top] {
        --tw-enter-translate-y: calc(1*var(--spacing)*-1)
    }

    .modal__container[data-entering=true][data-placement=center] {
        --tw-enter-translate-y: calc(0*-100%)
    }

    .modal__container[data-entering=true][data-placement=bottom] {
        --tw-enter-translate-y: calc(1*var(--spacing))
    }

    .modal__container[data-exiting=true] {
        animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .1s;
        --tw-ease: cubic-bezier(.25, .46, .45, .94);
        --tw-exit-opacity: 0;
        --tw-exit-scale: .95;
        transition-duration: .1s;
        transition-timing-function: cubic-bezier(.25,.46,.45,.94)
    }

    .modal__container[data-exiting=true],.modal__container[data-entering=true] {
        will-change: opacity,transform
    }

    :is(.modal__container[data-exiting=true],.modal__container[data-entering=true]): is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.modal__container[data-exiting=true],.modal__container[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.modal__container[data-exiting=true],.modal__container[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        animation:none
    }

    @media (prefers-reduced-motion:reduce) {
        :is(.modal__container[data-exiting=true],.modal__container[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.modal__container[data-exiting=true],.modal__container[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.modal__container[data-exiting=true],.modal__container[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            animation: none
        }
    }

    .modal__container--scroll-outside {
        height: auto;
        min-height: var(--visual-viewport-height);
        overflow-y: visible
    }

    .modal__backdrop:has(.modal__container--scroll-outside) {
        scrollbar-width: var(--scrollbar-width);
        scrollbar-color: var(--scrollbar-color);
        scrollbar-gutter: var(--scrollbar-gutter);
        -webkit-overflow-scrolling: touch;
        align-items: flex-start;
        overflow-y: auto
    }

    .modal__container--full {
        padding: 0
    }

    @media (min-width: 40rem) {
        .modal__container--full {
            padding:0
        }
    }

    .modal__container--full[data-entering=true] {
        --tw-enter-translate-y: calc(0*100%);
        --tw-enter-scale: 1
    }

    @media (min-width: 40rem) {
        .modal__container--full[data-entering=true] {
            --tw-enter-translate-y:calc(0*100%)
        }
    }

    .modal__container--full[data-exiting=true] {
        --tw-exit-scale: 1
    }

    .modal__dialog {
        background-color: var(--overlay);
        --tw-shadow: var(--overlay-shadow);
        width: 100%;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        border-radius: min(32px, var(--radius-3xl));
        padding: calc(var(--spacing) * 6);
        pointer-events: auto;
        outline-style: none;
        flex-direction: column;
        display: flex;
        position: relative
    }

    .modal__dialog[data-placement=auto] {
        margin-top: auto
    }

    @media (min-width: 40rem) {
        .modal__dialog[data-placement=auto] {
            margin-block:auto
        }
    }

    .modal__dialog[data-placement=center] {
        margin-block: auto
    }

    .modal__dialog[data-placement=bottom] {
        margin-top: auto
    }

    .modal__dialog[data-placement=top] {
        margin-top: 0
    }

    .modal__dialog--scroll-inside {
        min-height: 0;
        max-height: 100%;
        overflow: clip
    }

    .modal__dialog--scroll-outside {
        flex-shrink: 0;
        height: auto;
        min-height: 0
    }

    .modal__dialog--xs {
        max-width: var(--container-xs)
    }

    .modal__dialog--sm {
        max-width: var(--container-sm)
    }

    .modal__dialog--md {
        max-width: var(--container-md)
    }

    .modal__dialog--lg {
        max-width: var(--container-lg)
    }

    .modal__dialog--cover {
        width: 100%;
        height: 100%;
        min-height: 100%
    }

    .modal__dialog--full {
        --tw-shadow: 0 0 #0000;
        width: 100%;
        height: 100%;
        min-height: 100%;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        border-radius: 0
    }

    .modal__header {
        gap: calc(var(--spacing) * 3);
        flex-direction: column;
        margin-bottom: 0;
        display: flex
    }

    .modal__header>.modal__icon {
        margin-bottom: 0
    }

    .modal__heading {
        vertical-align: middle;
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--foreground)
    }

    .modal__icon {
        width: calc(var(--spacing) * 10);
        height: calc(var(--spacing) * 10);
        border-radius: calc(var(--radius) * 3);
        -webkit-user-select: none;
        user-select: none;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .modal__body {
        min-height: 0;
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-leading: 1.43;
        color: var(--muted);
        margin: -3px;
        flex: 1;
        margin-block:0;padding: 3px;
        line-height: 1.43;
        overflow: visible
    }

    .modal__body--scroll-inside {
        scrollbar-width: var(--scrollbar-width);
        scrollbar-color: var(--scrollbar-color);
        scrollbar-gutter: var(--scrollbar-gutter);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        overflow-y: auto
    }

    .modal__body--scroll-outside {
        overflow-y: visible
    }

    .modal__footer {
        justify-content: flex-end;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        flex-direction: row;
        margin-top: 0;
        display: flex
    }

    .modal__close-trigger {
        inset-inline-end: calc(var(--spacing) * 4);
        top: calc(var(--spacing) * 4);
        position: absolute
    }

    .modal__header+.modal__body {
        margin-top: calc(var(--spacing) * 2)
    }

    .modal__header+.modal__footer,.modal__body+.modal__footer {
        margin-top: calc(var(--spacing) * 5)
    }

    .popover {
        transform-origin: var(--trigger-anchor-point);
        background-color: var(--overlay);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        border-radius: min(32px, var(--radius-3xl));
        box-shadow: var(--shadow-overlay);
        padding: 0
    }

    .popover[data-entering=true] {
        animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .15s;
        --tw-ease: ease;
        --tw-enter-opacity: 0;
        --tw-enter-scale: .9;
        transition-duration: .15s;
        transition-timing-function: ease
    }

    .popover[data-entering=true][data-placement=top] {
        --tw-enter-translate-y: calc(1*var(--spacing))
    }

    .popover[data-entering=true][data-placement=bottom] {
        --tw-enter-translate-y: calc(1*var(--spacing)*-1)
    }

    .popover[data-entering=true][data-placement=left] {
        --tw-enter-translate-x: calc(1*var(--spacing))
    }

    .popover[data-entering=true][data-placement=right] {
        --tw-enter-translate-x: calc(1*var(--spacing)*-1)
    }

    .popover[data-exiting=true] {
        animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .1s;
        --tw-ease: ease;
        --tw-exit-scale: .95;
        --tw-exit-opacity: 0;
        transition-duration: .1s;
        transition-timing-function: ease
    }

    .popover[data-exiting=true],.popover[data-entering=true] {
        transition-property: opacity,transform;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        will-change: opacity,transform
    }

    .popover [data-slot=popover-overlay-arrow] {
        fill: var(--overlay)
    }

    .popover[data-placement=bottom] [data-slot=popover-overlay-arrow] {
        rotate: 180deg
    }

    .popover[data-placement=left] [data-slot=popover-overlay-arrow] {
        rotate: -90deg
    }

    .popover[data-placement=right] [data-slot=popover-overlay-arrow] {
        rotate: 90deg
    }

    .popover__dialog {
        padding: calc(var(--spacing) * 4);
        --tw-outline-style: none;
        outline-style: none
    }

    .popover__heading {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .popover__trigger {
        transition: color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
        display: inline-block
    }

    .popover__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.popover__trigger: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.popover__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .popover__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.popover__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.popover__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .popover__trigger {
        cursor: var(--cursor-interactive)
    }

    .popover__trigger:focus-visible:not(:focus),.popover__trigger[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

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

    .tooltip {
        max-width: var(--container-xs);
        transform-origin: var(--trigger-anchor-point);
        background-color: var(--overlay);
        padding: calc(var(--spacing) * 2);
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        word-break: break-all;
        border-radius: min(32px, var(--radius-xl));
        box-shadow: var(--shadow-overlay)
    }

    .tooltip[data-entering=true] {
        animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .15s;
        --tw-ease: ease;
        --tw-enter-opacity: 0;
        --tw-enter-scale: .9;
        transition-duration: .15s;
        transition-timing-function: ease
    }

    .tooltip[data-entering=true][data-placement=top] {
        --tw-enter-translate-y: calc(1*var(--spacing))
    }

    .tooltip[data-entering=true][data-placement=bottom] {
        --tw-enter-translate-y: calc(1*var(--spacing)*-1)
    }

    .tooltip[data-entering=true][data-placement=left] {
        --tw-enter-translate-x: calc(1*var(--spacing))
    }

    .tooltip[data-entering=true][data-placement=right] {
        --tw-enter-translate-x: calc(1*var(--spacing)*-1)
    }

    .tooltip[data-exiting=true] {
        animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .1s;
        --tw-ease: ease;
        --tw-exit-scale: .95;
        --tw-exit-opacity: 0;
        transition-duration: .1s;
        transition-timing-function: ease
    }

    .tooltip[data-exiting=true],.tooltip[data-entering=true] {
        transition-property: opacity,transform;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        will-change: opacity,transform
    }

    .tooltip [data-slot=overlay-arrow] {
        stroke: var(--border)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .tooltip [data-slot=overlay-arrow] {
            stroke:color-mix(in oklab, var(--border) 40%, transparent)
        }
    }

    .tooltip [data-slot=overlay-arrow] {
        fill: var(--overlay)
    }

    .tooltip[data-placement=bottom] [data-slot=overlay-arrow] {
        rotate: 180deg
    }

    .tooltip[data-placement=left] [data-slot=overlay-arrow] {
        rotate: -90deg
    }

    .tooltip[data-placement=right] [data-slot=overlay-arrow] {
        rotate: 90deg
    }

    .tooltip__trigger {
        transition: color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
        display: inline-block
    }

    .tooltip__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.tooltip__trigger: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.tooltip__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .tooltip__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.tooltip__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.tooltip__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .tooltip__trigger:focus-visible:not(:focus),.tooltip__trigger[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none
    }

    .combo-box {
        gap: var(--spacing);
        flex-direction: column;
        display: flex
    }

    :is(.combo-box[data-invalid=true],.combo-box[aria-invalid=true]) [data-slot=description] {
        display: none
    }

    .combo-box [data-slot=label] {
        width: fit-content
    }

    .combo-box [data-slot=input] {
        flex: 1;
        min-width: 0
    }

    .combo-box [data-slot=input]: has(+.combo-box__trigger) {
        padding-inline-end:calc(var(--spacing) * 7)
    }

    .combo-box [data-slot=input]: focus,.combo-box [data-slot=input][data-focus] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-outline-style: none;
        border-color: var(--field-border-focus);
        background-color: var(--field-focus);
        outline-style: none
    }

    .combo-box [data-slot=input]: disabled,.combo-box [data-slot=input][data-disabled],.combo-box [data-slot=input][aria-disabled=true] {
        opacity:var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .combo-box__input-group {
        isolation: isolate;
        align-items: center;
        display: inline-flex;
        position: relative
    }

    .combo-box__value {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        overflow-wrap: break-word;
        color: var(--field-foreground,var(--foreground))
    }

    .combo-box__value:empty {
        display: none
    }

    .combo-box__value[data-placeholder=true] {
        color: var(--field-placeholder,var(--muted))
    }

    .combo-box__value [data-slot=list-box-item-indicator] {
        display: none
    }

    .combo-box__trigger {
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        height: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        cursor: pointer;
        color: var(--field-placeholder,var(--muted));
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-duration: .15s;
        -webkit-tap-highlight-color: transparent;
        --tw-border-style: none;
        --tw-outline-style: none;
        inset-inline-end: calc(var(--spacing) * 0);
        background-color: #0000;
        border-style: none;
        outline-style: none;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        padding-inline-end:calc(var(--spacing) * 2);transition-duration: .15s;
        display: flex;
        position: absolute;
        top: 50%
    }

    @media (hover: hover) {
        .combo-box__trigger:hover,.combo-box__trigger[data-hovered=true] {
            color:var(--field-foreground,var(--foreground))
        }
    }

    .combo-box__trigger:focus-visible:not(:focus),.combo-box__trigger[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        border-radius: .25rem;
        outline-style: none
    }

    .combo-box__trigger[data-pressed=true] {
        opacity: .7
    }

    .combo-box__trigger:disabled,.combo-box__trigger[data-disabled],.combo-box__trigger[aria-disabled=true] {
        cursor: not-allowed;
        opacity: .5
    }

    .combo-box__trigger [data-slot=combo-box-trigger-default-icon] {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
        transition-property: transform,translate,scale,rotate;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-duration: .15s;
        transition-duration: .15s
    }

    .combo-box__trigger [data-slot=combo-box-trigger-default-icon]: is([data-reduce-motion=true],[data-reduce-motion=true] *),.combo-box__trigger [data-slot=combo-box-trigger-default-icon]:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.combo-box__trigger [data-slot=combo-box-trigger-default-icon]:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .combo-box__trigger [data-slot=combo-box-trigger-default-icon]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.combo-box__trigger [data-slot=combo-box-trigger-default-icon]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.combo-box__trigger [data-slot=combo-box-trigger-default-icon]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .combo-box__trigger[data-open=true] [data-slot=combo-box-trigger-default-icon] {
        rotate: 180deg
    }

    .combo-box__popover {
        min-width: var(--trigger-width);
        transform-origin: var(--trigger-anchor-point);
        scroll-padding-block: var(--spacing);
        scrollbar-width: var(--scrollbar-width);
        scrollbar-color: var(--scrollbar-color);
        scrollbar-gutter: var(--scrollbar-gutter);
        overscroll-behavior: contain;
        background-color: var(--overlay);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        border-radius: min(32px, var(--radius-3xl));
        box-shadow: var(--shadow-overlay);
        padding: 0;
        overflow-y: auto
    }

    .combo-box__popover:focus-visible:not(:focus),.combo-box__popover[data-focus-visible=true] {
        --tw-outline-style: none;
        outline-style: none
    }

    .combo-box__popover[data-entering=true] {
        animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .15s;
        --tw-ease: ease;
        --tw-enter-opacity: 0;
        --tw-enter-scale: .95;
        transition-duration: .15s;
        transition-timing-function: ease
    }

    .combo-box__popover[data-entering=true][data-placement=top] {
        --tw-enter-translate-y: calc(1*var(--spacing))
    }

    .combo-box__popover[data-entering=true][data-placement=bottom] {
        --tw-enter-translate-y: calc(1*var(--spacing)*-1)
    }

    .combo-box__popover[data-entering=true][data-placement=left] {
        --tw-enter-translate-x: calc(1*var(--spacing))
    }

    .combo-box__popover[data-entering=true][data-placement=right] {
        --tw-enter-translate-x: calc(1*var(--spacing)*-1)
    }

    .combo-box__popover[data-exiting=true] {
        animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .1s;
        --tw-ease: ease;
        --tw-exit-scale: .95;
        --tw-exit-opacity: 0;
        transition-duration: .1s;
        transition-timing-function: ease
    }

    .combo-box__popover[data-exiting=true],.combo-box__popover[data-entering=true] {
        transition-property: opacity,transform;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        will-change: opacity,transform
    }

    .combo-box__popover [data-slot=popover-overlay-arrow] {
        fill: var(--overlay)
    }

    .combo-box__popover[data-placement=bottom] [data-slot=popover-overlay-arrow] {
        rotate: 180deg
    }

    .combo-box__popover[data-placement=left] [data-slot=popover-overlay-arrow] {
        rotate: -90deg
    }

    .combo-box__popover[data-placement=right] [data-slot=popover-overlay-arrow] {
        rotate: 90deg
    }

    .combo-box__popover [data-slot=list-box] {
        padding: calc(var(--spacing) * 1.5);
        --tw-outline-style: none;
        outline-style: none
    }

    .combo-box__popover [data-slot=list-box-item] {
        padding-inline: calc(var(--spacing) * 2.5)
    }

    .combo-box__popover [data-slot=list-box-item] [data-slot=list-box-item-indicator--checkmark] {
        transition-property: none
    }

    .combo-box--full-width,.combo-box__input-group--full-width {
        width: 100%
    }

    .select {
        gap: var(--spacing);
        flex-direction: column;
        display: flex
    }

    :is(.select[data-invalid=true],.select[aria-invalid=true]) [data-slot=description] {
        display: none
    }

    .select [data-slot=label] {
        width: fit-content
    }

    .select__trigger {
        isolation: isolate;
        min-height: calc(var(--spacing) * 9);
        border-radius: var(--field-radius,calc(var(--radius) * 1.5));
        border-style: var(--tw-border-style);
        background-color: var(--field-background,var(--default));
        padding-inline:calc(var(--spacing) * 3);padding-block: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--field-foreground,var(--foreground));
        --tw-shadow: var(--field-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
        border-width: 1px;
        outline-style: none;
        display: inline-flex;
        position: relative
    }

    .select__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.select__trigger: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.select__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .select__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.select__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.select__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .select__trigger {
        cursor: var(--cursor-interactive);
        border-width: var(--border-width-field);
        border-color: var(--field-border)
    }

    .select__trigger:has(.select__indicator) {
        padding-inline-end:calc(var(--spacing) * 7)}

    @media (hover: hover) {
        .select__trigger:hover,.select__trigger[data-hovered=true] {
            background-color:var(--field-hover);
            border-color: var(--field-border-hover)
        }
    }

    .select__trigger:focus-visible:not(:focus),.select__trigger[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        border-color: var(--field-border-focus);
        background-color: var(--field-focus);
        outline-style: none
    }

    .select[data-invalid=true] .select__trigger,.select[aria-invalid=true] .select__trigger {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    :is(.select[data-invalid=true] .select__trigger,.select[aria-invalid=true] .select__trigger): focus,:is(.select[data-invalid=true] .select__trigger,.select[aria-invalid=true] .select__trigger):focus-visible,:is(.select[data-invalid=true] .select__trigger,.select[aria-invalid=true] .select__trigger)[data-focused=true],:is(.select[data-invalid=true] .select__trigger,.select[aria-invalid=true] .select__trigger)[data-focus-visible=true],:is(.select[data-invalid=true] .select__trigger,.select[aria-invalid=true] .select__trigger):focus-within,:is(.select[data-invalid=true] .select__trigger,.select[aria-invalid=true] .select__trigger)[data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .select[data-invalid=true] .select__trigger,.select[aria-invalid=true] .select__trigger {
        background-color: var(--field-focus)
    }

    .select__trigger:disabled,.select__trigger[data-disabled=true],.select__trigger[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .select--secondary .select__trigger {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        background-color: var(--select-trigger-bg);
        --select-trigger-bg: var(--default);
        --select-trigger-bg-hover: var(--default-hover);
        --select-trigger-bg-focus: var(--default)
    }

    @media (hover: hover) {
        .select--secondary .select__trigger:hover,.select--secondary .select__trigger[data-hovered=true] {
            background-color:var(--select-trigger-bg-hover)
        }
    }

    .select--secondary .select__trigger:focus-visible:not(:focus),.select--secondary .select__trigger[data-focus-visible=true],.select[data-invalid=true] : is(.select--secondary .select__trigger),.select[aria-invalid=true] :is(.select--secondary .select__trigger) {
        background-color:var(--select-trigger-bg-focus)
    }

    .select__value {
        text-align: start;
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        overflow-wrap: break-word;
        color: currentColor;
        flex: 1
    }

    @media (min-width: 40rem) {
        .select__value {
            font-size:var(--text-sm);
            line-height: var(--tw-leading,var(--text-sm--line-height))
        }
    }

    .select__value[data-placeholder=true] {
        color: var(--field-placeholder,var(--muted))
    }

    .select__value [data-slot=list-box-item-indicator] {
        display: none
    }

    .select__indicator {
        color: var(--field-placeholder,var(--muted));
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-duration: .15s;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        margin-block:auto;transition-duration: .15s;
        display: flex;
        position: absolute;
        inset-block: 0;
        inset-inline-end: calc(var(--spacing) * 2)
    }

    .select__indicator[data-open=true] {
        rotate: 180deg
    }

    .select__indicator[data-slot=select-default-indicator] {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .select__popover {
        min-width: var(--trigger-width);
        transform-origin: var(--trigger-anchor-point);
        scroll-padding-block: var(--spacing);
        scrollbar-width: var(--scrollbar-width);
        scrollbar-color: var(--scrollbar-color);
        scrollbar-gutter: var(--scrollbar-gutter);
        overscroll-behavior: contain;
        background-color: var(--overlay);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        border-radius: min(32px, var(--radius-3xl));
        box-shadow: var(--shadow-overlay);
        padding: 0;
        overflow-y: auto
    }

    .select__popover:focus-visible:not(:focus),.select__popover[data-focus-visible=true] {
        --tw-outline-style: none;
        outline-style: none
    }

    .select__popover[data-entering=true] {
        animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .15s;
        --tw-ease: ease;
        --tw-enter-opacity: 0;
        --tw-enter-scale: .95;
        transition-duration: .15s;
        transition-timing-function: ease
    }

    .select__popover[data-entering=true][data-placement=top] {
        --tw-enter-translate-y: calc(1*var(--spacing))
    }

    .select__popover[data-entering=true][data-placement=bottom] {
        --tw-enter-translate-y: calc(1*var(--spacing)*-1)
    }

    .select__popover[data-entering=true][data-placement=left] {
        --tw-enter-translate-x: calc(1*var(--spacing))
    }

    .select__popover[data-entering=true][data-placement=right] {
        --tw-enter-translate-x: calc(1*var(--spacing)*-1)
    }

    .select__popover[data-exiting=true] {
        animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .1s;
        --tw-ease: ease;
        --tw-exit-scale: .95;
        --tw-exit-opacity: 0;
        transition-duration: .1s;
        transition-timing-function: ease
    }

    .select__popover[data-exiting=true],.select__popover[data-entering=true] {
        transition-property: opacity,transform;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        will-change: opacity,transform
    }

    .select__popover [data-slot=popover-overlay-arrow] {
        fill: var(--overlay)
    }

    .select__popover[data-placement=bottom] [data-slot=popover-overlay-arrow] {
        rotate: 180deg
    }

    .select__popover[data-placement=left] [data-slot=popover-overlay-arrow] {
        rotate: -90deg
    }

    .select__popover[data-placement=right] [data-slot=popover-overlay-arrow] {
        rotate: 90deg
    }

    .select__popover [data-slot=list-box] {
        padding: calc(var(--spacing) * 1.5);
        --tw-outline-style: none;
        outline-style: none
    }

    .select__popover [data-slot=list-box-item] {
        padding-inline: calc(var(--spacing) * 2.5)
    }

    .select__popover [data-slot=list-box]: not([aria-multiselectable=true]) [data-slot=list-box-item-indicator],.select__popover [data-slot=list-box]:not([aria-multiselectable=true]) [data-slot=list-box-item-indicator] [data-slot=list-box-item-indicator--checkmark] {
        transition-property:none
    }

    .select--full-width,.select__trigger--full-width {
        width: 100%
    }

    .autocomplete {
        gap: var(--spacing);
        flex-direction: column;
        display: flex
    }

    .autocomplete__trigger {
        isolation: isolate;
        min-height: calc(var(--spacing) * 9);
        border-radius: var(--field-radius,calc(var(--radius) * 1.5));
        border-style: var(--tw-border-style);
        background-color: var(--field-background,var(--default));
        padding-inline:calc(var(--spacing) * 3);padding-block: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--field-foreground,var(--foreground));
        --tw-shadow: var(--field-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
        border-width: 1px;
        outline-style: none;
        display: inline-flex;
        position: relative
    }

    .autocomplete__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.autocomplete__trigger: is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.autocomplete__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .autocomplete__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.autocomplete__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.autocomplete__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .autocomplete__trigger {
        cursor: var(--cursor-interactive);
        border-width: var(--border-width-field);
        border-color: var(--field-border)
    }

    .autocomplete__trigger:has(.autocomplete__indicator) {
        padding-inline-end:calc(var(--spacing) * 7)}

    @media (hover: hover) {
        :is(.autocomplete__trigger:hover:not(:has(.autocomplete__clear-button:hover)),.autocomplete__trigger[data-hovered=true]:not(:has(.autocomplete__clear-button:hover))) {
            background-color:var(--field-hover);
            border-color: var(--field-border-hover)
        }
    }

    .autocomplete__trigger:focus-visible:not(:focus),.autocomplete__trigger[data-focus-visible=true] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        border-color: var(--field-border-focus);
        background-color: var(--field-focus);
        outline-style: none
    }

    .autocomplete[data-invalid=true] .autocomplete__trigger,.autocomplete[aria-invalid=true] .autocomplete__trigger {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
        outline-color: var(--danger);
        --tw-outline-style: solid;
        --tw-ring-offset-width: 3px;
        outline-style: solid
    }

    :is(.autocomplete[data-invalid=true] .autocomplete__trigger,.autocomplete[aria-invalid=true] .autocomplete__trigger): focus,:is(.autocomplete[data-invalid=true] .autocomplete__trigger,.autocomplete[aria-invalid=true] .autocomplete__trigger):focus-visible,:is(.autocomplete[data-invalid=true] .autocomplete__trigger,.autocomplete[aria-invalid=true] .autocomplete__trigger)[data-focused=true],:is(.autocomplete[data-invalid=true] .autocomplete__trigger,.autocomplete[aria-invalid=true] .autocomplete__trigger)[data-focus-visible=true],:is(.autocomplete[data-invalid=true] .autocomplete__trigger,.autocomplete[aria-invalid=true] .autocomplete__trigger):focus-within,:is(.autocomplete[data-invalid=true] .autocomplete__trigger,.autocomplete[aria-invalid=true] .autocomplete__trigger)[data-focus-within=true] {
        --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--danger);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .autocomplete[data-invalid=true] .autocomplete__trigger,.autocomplete[aria-invalid=true] .autocomplete__trigger {
        background-color: var(--field-focus)
    }

    .autocomplete__trigger:disabled,.autocomplete__trigger[data-disabled=true],.autocomplete__trigger[aria-disabled=true] {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none
    }

    .autocomplete--secondary .autocomplete__trigger {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        background-color: var(--autocomplete-trigger-bg);
        --autocomplete-trigger-bg: var(--default);
        --autocomplete-trigger-bg-hover: var(--default-hover);
        --autocomplete-trigger-bg-focus: var(--default)
    }

    @media (hover: hover) {
        :is(.autocomplete--secondary .autocomplete__trigger:hover:not(:has(.autocomplete__clear-button:hover)),.autocomplete--secondary .autocomplete__trigger[data-hovered=true]:not(:has(.autocomplete__clear-button:hover))) {
            background-color:var(--autocomplete-trigger-bg-hover)
        }
    }

    .autocomplete--secondary .autocomplete__trigger:focus-visible:not(:focus),.autocomplete--secondary .autocomplete__trigger[data-focus-visible=true],.autocomplete[data-invalid=true] : is(.autocomplete--secondary .autocomplete__trigger),.autocomplete[aria-invalid=true] :is(.autocomplete--secondary .autocomplete__trigger) {
        background-color:var(--autocomplete-trigger-bg-focus)
    }

    .autocomplete__value {
        text-align: start;
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        overflow-wrap: break-word;
        color: currentColor;
        flex: 1
    }

    @media (min-width: 40rem) {
        .autocomplete__value {
            font-size:var(--text-sm);
            line-height: var(--tw-leading,var(--text-sm--line-height))
        }
    }

    .autocomplete__value[data-placeholder=true] {
        color: var(--field-placeholder,var(--muted))
    }

    .autocomplete__value [data-slot=list-box-item-indicator] {
        display: none
    }

    .autocomplete__indicator {
        color: var(--field-placeholder,var(--muted));
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-duration: .15s;
        cursor: var(--cursor-interactive);
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        margin-block:auto;transition-duration: .15s;
        display: flex;
        position: absolute;
        inset-block: 0;
        inset-inline-end: calc(var(--spacing) * 2)
    }

    .autocomplete__indicator[data-open=true] {
        rotate: 180deg
    }

    .autocomplete__indicator[data-slot=autocomplete-default-indicator] {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .autocomplete__popover {
        width: var(--trigger-width);
        max-width: var(--trigger-width);
        transform-origin: var(--trigger-anchor-point);
        scroll-padding-block: var(--spacing);
        overscroll-behavior: contain;
        background-color: var(--overlay);
        padding: 0;
        padding-top: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-outline-style: none;
        border-radius: min(32px, var(--radius-3xl));
        box-shadow: var(--shadow-overlay);
        outline-style: none;
        flex-direction: column;
        display: flex;
        overflow: hidden
    }

    .autocomplete__popover:focus,.autocomplete__popover:focus-visible,.autocomplete__popover:focus-visible:not(:focus),.autocomplete__popover[data-focus-visible=true] {
        --tw-outline-style: none;
        outline-style: none
    }

    .autocomplete__popover[data-entering=true] {
        animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .25s;
        --tw-ease: cubic-bezier(.32, .72, 0, 1);
        --tw-enter-opacity: 0;
        --tw-enter-scale: .95;
        transition-duration: .25s;
        transition-timing-function: cubic-bezier(.32,.72,0,1)
    }

    .autocomplete__popover[data-entering=true][data-placement=top] {
        --tw-enter-translate-y: calc(1*var(--spacing))
    }

    .autocomplete__popover[data-entering=true][data-placement=bottom] {
        --tw-enter-translate-y: calc(1*var(--spacing)*-1)
    }

    .autocomplete__popover[data-entering=true][data-placement=left] {
        --tw-enter-translate-x: calc(1*var(--spacing))
    }

    .autocomplete__popover[data-entering=true][data-placement=right] {
        --tw-enter-translate-x: calc(1*var(--spacing)*-1)
    }

    .autocomplete__popover[data-exiting=true] {
        animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
        --tw-duration: .1s;
        --tw-ease: cubic-bezier(.25, .46, .45, .94);
        --tw-exit-scale: .95;
        --tw-exit-opacity: 0;
        transition-duration: .1s;
        transition-timing-function: cubic-bezier(.25,.46,.45,.94)
    }

    .autocomplete__popover[data-exiting=true],.autocomplete__popover[data-entering=true] {
        transition-property: opacity,transform;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        will-change: opacity,transform
    }

    .autocomplete__popover [data-slot=popover-overlay-arrow] {
        fill: var(--overlay)
    }

    .autocomplete__popover[data-placement=bottom] [data-slot=popover-overlay-arrow] {
        rotate: 180deg
    }

    .autocomplete__popover[data-placement=left] [data-slot=popover-overlay-arrow] {
        rotate: -90deg
    }

    .autocomplete__popover[data-placement=right] [data-slot=popover-overlay-arrow] {
        rotate: 90deg
    }

    .autocomplete__popover [data-slot=list-box] {
        scrollbar-width: var(--scrollbar-width);
        scrollbar-color: var(--scrollbar-color);
        scrollbar-gutter: var(--scrollbar-gutter);
        min-height: 0;
        max-height: 320px;
        padding: calc(var(--spacing) * 1.5);
        --tw-outline-style: none;
        outline-style: none;
        overflow-y: auto
    }

    .autocomplete__popover [data-slot=list-box-item] {
        padding-inline: calc(var(--spacing) * 2.5)
    }

    .autocomplete__popover [role=presentation]>[data-slot=list-box-item] {
        width: calc(100% - var(--spacing) * 3)
    }

    .autocomplete__popover [data-slot=list-box]: not([aria-multiselectable=true]) [data-slot=list-box-item-indicator],.autocomplete__popover [data-slot=list-box]:not([aria-multiselectable=true]) [data-slot=list-box-item-indicator] [data-slot=list-box-item-indicator--checkmark] {
        transition-property:none
    }

    .autocomplete__popover [data-slot=search-field] {
        padding-inline: calc(var(--spacing) * 3);
        padding-block:var(--spacing);--tw-outline-style: none;
        outline-style: none;
        flex-shrink: 0
    }

    .autocomplete__popover [data-slot=empty-state] {
        text-align: center;
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--overlay-foreground)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .autocomplete__popover [data-slot=empty-state] {
            color:color-mix(in oklab, var(--overlay-foreground) 60%, transparent)
        }
    }

    .autocomplete--full-width,.autocomplete__trigger--full-width {
        width: 100%
    }

    .autocomplete__clear-button {
        isolation: isolate;
        height: calc(var(--spacing) * 6);
        width: calc(var(--spacing) * 6);
        transform-origin: 50%;
        border-radius: calc(var(--radius) * 1.5);
        padding: var(--spacing);
        color: var(--muted);
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5);
        cursor: var(--cursor-interactive);
        transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
        background-color: #0000;
        flex-shrink: 0;
        justify-content: center;
        align-self: center;
        align-items: center;
        margin-inline-end:0;display: inline-flex;
        position: relative
    }

    .autocomplete__clear-button:not([data-empty=true]) {
        transition: opacity .15s var(--ease-smooth)
    }

    .autocomplete__clear-button:not([data-empty=true]): is([data-reduce-motion=true],[data-reduce-motion=true] *),.autocomplete__clear-button:not([data-empty=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.autocomplete__clear-button:not([data-empty=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after {
        transition-property:none
    }

    @media (prefers-reduced-motion:reduce) {
        .autocomplete__clear-button:not([data-empty=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.autocomplete__clear-button:not([data-empty=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.autocomplete__clear-button:not([data-empty=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after {
            transition-property: none
        }
    }

    .autocomplete__clear-button[data-empty=true] {
        pointer-events: none;
        opacity: 0
    }

    .autocomplete__clear-button [data-slot=autocomplete-clear-button-icon] {
        width: calc(var(--spacing) * 3.5);
        height: calc(var(--spacing) * 3.5)
    }

    @media (hover: hover) {
        .autocomplete__clear-button:hover,.autocomplete__clear-button[data-hovered=true] {
            background-color:var(--default-hover)
        }
    }

    .autocomplete__clear-button:active,.autocomplete__clear-button[data-pressed=true] {
        transform: scale(.93)
    }

    .kbd {
        height: calc(var(--spacing) * 6);
        align-items: center;
        display: inline-flex
    }

    :where(.kbd>:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start:calc(calc(var(--spacing) * .5) * var(--tw-space-x-reverse));margin-inline-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-x-reverse)))
    }

    .kbd {
        border-radius: calc(var(--radius) * 1);
        background-color: var(--default);
        padding-inline:calc(var(--spacing) * 2);text-align: center;
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        white-space: nowrap;
        color: var(--muted)
    }

    :where(.kbd:where(:is(:lang(ae),: lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),[dir=rtl],[dir=rtl] *)>:not(:last-child)) {
        --tw-space-x-reverse:1
    }

    .kbd {
        word-spacing: -.25rem
    }

    .kbd__abbr {
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
        display: flex
    }

    .kbd__content {
        justify-content: center;
        align-items: center;
        display: flex
    }

    .kbd--light {
        background-color: #0000
    }

    .typography,.typography-prose {
        color: var(--foreground)
    }

    .typography-prose h1 {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading,var(--text-4xl--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .typography-prose h2 {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading,var(--text-3xl--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .typography-prose h3 {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading,var(--text-2xl--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .typography-prose h4 {
        font-size: var(--text-xl);
        line-height: var(--tw-leading,var(--text-xl--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .typography-prose h5 {
        font-size: var(--text-lg);
        line-height: var(--tw-leading,var(--text-lg--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .typography-prose h6 {
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .typography-prose p {
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-leading: calc(var(--spacing) * 7);
        line-height: calc(var(--spacing) * 7)
    }

    .typography-prose code {
        border-radius: calc(var(--radius) * .75);
        background-color: var(--default);
        padding-inline:calc(var(--spacing) * 1.5);padding-block: calc(var(--spacing) * .5);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--foreground)
    }

    .typography-prose a {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--link);
        text-underline-offset: 4px;
        text-decoration-line: underline
    }

    .typography-prose blockquote {
        margin-top: calc(var(--spacing) * 4);
        border-inline-start-style:var(--tw-border-style);border-inline-start-width: 4px;
        border-color: var(--border);
        color: var(--muted);
        padding-inline-start:calc(var(--spacing) * 4);font-style: italic
    }

    .typography-prose ul {
        margin-block: calc(var(--spacing) * 4);
        list-style-type: disc
    }

    :where(.typography-prose ul>: not(:last-child)) {
        --tw-space-y-reverse:0;
        margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))
    }

    .typography-prose ul {
        padding-inline-start: calc(var(--spacing) * 6)
    }

    .typography-prose ol {
        margin-block: calc(var(--spacing) * 4);
        list-style-type: decimal
    }

    :where(.typography-prose ol>: not(:last-child)) {
        --tw-space-y-reverse:0;
        margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))
    }

    .typography-prose ol {
        padding-inline-start: calc(var(--spacing) * 6)
    }

    .typography-prose li {
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-leading: calc(var(--spacing) * 7);
        line-height: calc(var(--spacing) * 7)
    }

    .typography-prose hr {
        margin-block: calc(var(--spacing) * 8);
        border-color: var(--separator)
    }

    .typography-prose pre {
        margin-block: calc(var(--spacing) * 4);
        border-radius: calc(var(--radius) * 1.5);
        background-color: var(--default);
        padding: calc(var(--spacing) * 4);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-leading: var(--leading-relaxed);
        line-height: var(--leading-relaxed);
        overflow-x: auto
    }

    .typography-prose strong {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        color: var(--foreground)
    }

    .typography-prose em {
        font-style: italic
    }

    .typography-prose img {
        margin-block: calc(var(--spacing) * 4);
        border-radius: calc(var(--radius) * 1.5)
    }

    .typography--h1 {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading,var(--text-4xl--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .typography--h2 {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading,var(--text-3xl--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .typography--h3 {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading,var(--text-2xl--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .typography--h4 {
        font-size: var(--text-xl);
        line-height: var(--tw-leading,var(--text-xl--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .typography--h5 {
        font-size: var(--text-lg);
        line-height: var(--tw-leading,var(--text-lg--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .typography--h6 {
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .typography--body {
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-leading: calc(var(--spacing) * 7);
        line-height: calc(var(--spacing) * 7)
    }

    .typography--body-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-leading: calc(var(--spacing) * 6);
        line-height: calc(var(--spacing) * 6)
    }

    .typography--body-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height));
        --tw-leading: calc(var(--spacing) * 5);
        line-height: calc(var(--spacing) * 5)
    }

    .typography--code {
        border-radius: calc(var(--radius) * .75);
        background-color: var(--default);
        padding-inline:calc(var(--spacing) * 1.5);padding-block: calc(var(--spacing) * .5);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        color: var(--foreground)
    }

    .typography--align-start {
        text-align: start
    }

    .typography--align-center {
        text-align: center
    }

    .typography--align-end {
        text-align: end
    }

    .typography--align-justify {
        text-align: justify
    }

    .typography--color-default {
        color: var(--foreground)
    }

    .typography--color-muted {
        color: var(--muted)
    }

    .typography--truncate {
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        overflow: hidden
    }

    .typography--weight-normal {
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal)
    }

    .typography--weight-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .typography--weight-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .typography--weight-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold)
    }

    .scroll-shadow {
        --scroll-shadow-size: 40px;
        --scroll-shadow-scrollbar-size: 10px;
        position: relative
    }

    .scroll-shadow--vertical {
        scrollbar-width: var(--scrollbar-width);
        scrollbar-color: var(--scrollbar-color);
        scrollbar-gutter: var(--scrollbar-gutter);
        overflow-y: auto
    }

    .scroll-shadow--horizontal {
        scrollbar-width: var(--scrollbar-width);
        scrollbar-color: var(--scrollbar-color);
        scrollbar-gutter: var(--scrollbar-gutter);
        overflow-x: auto
    }

    .scroll-shadow--fade.scroll-shadow--vertical:where([data-top-scroll=true],[data-bottom-scroll=true],[data-top-bottom-scroll=true]) {
        -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
        -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
        -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
        mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
        -webkit-mask-position: 0 0,100% 0;
        mask-position: 0 0,100% 0;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%;
        -webkit-mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%;
        -webkit-mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%;
        mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%;
        -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
        -webkit-mask-position: 0 0,100% 0;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%
    }

    .scroll-shadow--fade.scroll-shadow--vertical[data-top-scroll=true] {
        --scroll-linear-gradient: 0deg, #000 calc(100% - var(--scroll-shadow-size)), transparent
    }

    .scroll-shadow--fade.scroll-shadow--vertical[data-bottom-scroll=true] {
        --scroll-linear-gradient: 180deg, #000 calc(100% - var(--scroll-shadow-size)), transparent
    }

    .scroll-shadow--fade.scroll-shadow--vertical[data-top-bottom-scroll=true] {
        --scroll-linear-gradient: #000, #000, transparent 0, #000 var(--scroll-shadow-size), #000 calc(100% - var(--scroll-shadow-size)), transparent
    }

    .scroll-shadow--fade.scroll-shadow--horizontal:where([data-left-scroll=true],[data-right-scroll=true],[data-left-right-scroll=true]) {
        -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
        -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
        -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
        mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
        -webkit-mask-position: 0 0,0 100%;
        mask-position: 0 0,0 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size);
        -webkit-mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size);
        -webkit-mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size);
        mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size);
        -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
        -webkit-mask-position: 0 0,0 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size)
    }

    .scroll-shadow--fade.scroll-shadow--horizontal[data-left-scroll=true] {
        --scroll-linear-gradient: 270deg, #000 calc(100% - var(--scroll-shadow-size)), transparent
    }

    .scroll-shadow--fade.scroll-shadow--horizontal[data-left-scroll=true]: is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),.scroll-shadow--fade.scroll-shadow--horizontal[data-right-scroll=true] {
        --scroll-linear-gradient:90deg, #000 calc(100% - var(--scroll-shadow-size)), transparent
    }

    .scroll-shadow--fade.scroll-shadow--horizontal[data-right-scroll=true]: is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) {
        --scroll-linear-gradient:270deg, #000 calc(100% - var(--scroll-shadow-size)), transparent
    }

    .scroll-shadow--fade.scroll-shadow--horizontal[data-left-right-scroll=true] {
        --scroll-linear-gradient: to right, #000, #000, transparent 0, #000 var(--scroll-shadow-size), #000 calc(100% - var(--scroll-shadow-size)), transparent
    }

    .scroll-shadow--hide-scrollbar {
        scrollbar-color: auto;
        scrollbar-gutter: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        --scroll-shadow-scrollbar-size: 0px
    }
}

@layer utilities {
    .visible {
        visibility: visible
    }

    .relative {
        position: relative
    }

    .block {
        display: block
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .aspect-\[5\/3\] {
        aspect-ratio: 5/3
    }

    .h-\[28px\] {
        height: 28px
    }

    .h-\[70px\] {
        height: 70px
    }

    .w-\[28px\] {
        width: 28px
    }

    .w-full {
        width: 100%
    }

    .grid-cols-1 {
        grid-template-columns: repeat(1,minmax(0,1fr))
    }

    .items-center {
        align-items: center
    }

    .justify-center {
        justify-content: center
    }

    .gap-2 {
        gap: calc(var(--spacing) * 2)
    }

    .gap-3 {
        gap: calc(var(--spacing) * 3)
    }

    .overflow-hidden {
        overflow: hidden
    }

    .rounded-xl {
        border-radius: calc(var(--radius) * 1.5)
    }

    .bg-\[\#333\] {
        background-color: #333
    }

    .object-cover {
        object-fit: cover
    }

    .px-0 {
        padding-inline:0}

    .py-2 {
        padding-block:calc(var(--spacing) * 2)}

    .pb-0 {
        padding-bottom: 0
    }

    .text-center {
        text-align: center
    }

    .blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
    }

    @media (min-width: 48rem) {
        .md\:grid-cols-2 {
            grid-template-columns:repeat(2,minmax(0,1fr))
        }
    }

    @media (min-width: 64rem) {
        .lg\:grid-cols-3 {
            grid-template-columns:repeat(3,minmax(0,1fr))
        }
    }

    @media (min-width: 96rem) {
        .\32 xl\:grid-cols-4 {
            grid-template-columns:repeat(4,minmax(0,1fr))
        }
    }
}

@property --tw-animation-delay {
    syntax: "*";
    inherits: false;
    initial-value: 0s
}

@property --tw-animation-direction {
    syntax: "*";
    inherits: false;
    initial-value: normal
}

@property --tw-animation-duration {
    syntax: "*";
    inherits: false
}

@property --tw-animation-fill-mode {
    syntax: "*";
    inherits: false;
    initial-value: none
}

@property --tw-animation-iteration-count {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-blur {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-opacity {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-rotate {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-scale {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-blur {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-opacity {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-exit-rotate {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-scale {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-exit-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

:root {
    --v8-bg-c1: #09090b;
    --v8-tx1: #f2f0ea
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-content {
    syntax: "*";
    inherits: false;
    initial-value: ""
}

@property --tw-duration {
    syntax: "*";
    inherits: false
}

@property --tw-leading {
    syntax: "*";
    inherits: false
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}

@property --tw-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-ordinal {
    syntax: "*";
    inherits: false
}

@property --tw-slashed-zero {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-figure {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-spacing {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-fraction {
    syntax: "*";
    inherits: false
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-border-spacing-x {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-border-spacing-y {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-position {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-via {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-to {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-via-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0%
}

@property --tw-gradient-via-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 50%
}

@property --tw-gradient-to-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-tracking {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-blur {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-invert {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-space-x-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

@keyframes enter {
    0% {
        opacity: var(--tw-enter-opacity,1);
        transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));
        filter: blur(var(--tw-enter-blur,0))
    }
}

@keyframes exit {
    to {
        opacity: var(--tw-exit-opacity,1);
        transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));
        filter: blur(var(--tw-exit-blur,0))
    }
}

@keyframes caret-blink {
    0%,70%,to {
        opacity: 1
    }

    20%,50% {
        opacity: 0
    }
}

@keyframes skeleton {
    to {
        transform: translate(200%)
    }
}