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

:host,
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-feature-settings: normal;
    font-variation-settings: normal;
    tab-size: 4;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
}

body {
    line-height: inherit;
    margin: 0;
    min-height: 100vh !important;
}

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

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

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

b,
strong {
    font-weight: bolder
}

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

small {
    font-size: 80%
}

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

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

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

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

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

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

progress {
    vertical-align: baseline
}

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

[type=search] {
    appearance: textfield;
    outline-offset: -2px
}

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

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

summary {
    display: list-item
}

blockquote,
dd,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0
}

fieldset,
legend,
menu,
ol,
ul {
    padding: 0
}

menu,
ol,
ul {
    list-style: none;
    margin: 0
}

textarea {
    resize: vertical
}

input::placeholder,
textarea::placeholder {
    color: #9ca3af;
    opacity: 1
}

:is([role=button], button):where(:not(:disabled)) {
    cursor: pointer
}

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

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

:where(dialog, [popover]) {
    background-color: transparent;
    border-width: 0;
    color: inherit;
    display: block;
    height: auto;
    inset: 0;
    margin: 0;
    max-height: 100%;
    max-width: 100%;
    overflow: unset;
    padding: 0;
    position: fixed;
    width: auto
}

:where(dialog, [popover])::backdrop {
    opacity: 0
}

:where([data-ui-floating]) {
    display: block;
    height: fit-content;
    left: var(--ui-floating-left);
    max-height: var(--ui-floating-available-height, none);
    max-width: var(--ui-floating-available-width, 100svw);
    overscroll-behavior: contain;
    position: absolute;
    top: var(--ui-floating-top);
    transform-origin: var(--ui-floating-transform-origin);
    translate: 0 0 0;
    width: fit-content;
    z-index: var(--ui-top-layer-z-index, 999);
    --ui-floating-left: unset;
    --ui-floating-top: unset;
    --ui-floating-width: unset;
    --ui-floating-height: unset;
    --ui-floating-available-width: unset;
    --ui-floating-available-height: unset;
    --ui-floating-arrow-left: unset;
    --ui-floating-arrow-top: unset;
    --ui-floating-arrow-width: unset;
    --ui-floating-arrow-height: unset;
    --ui-floating-transform-origin: unset
}

:where([data-ui-floating]):after {
    aspect-ratio: 1;
    background-color: inherit;
    content: "";
    left: 0;
    mask-image: linear-gradient(var(--arrow-angle), transparent 50%, #000 50%);
    position: absolute;
    rotate: 45deg;
    top: 0;
    translate: var(--ui-floating-arrow-left) var(--ui-floating-arrow-top)
}

:where([data-ui-floating]):where([data-ui-current-placement^=start]) {
    --arrow-angle: 45deg
}

:where([data-ui-floating]):where([data-ui-current-placement^=end]) {
    --arrow-angle: -135deg
}

:where([data-ui-floating]):where([data-ui-current-placement^=bottom]) {
    --arrow-angle: -45deg
}

:where([data-ui-floating]):where([data-ui-current-placement^=top]) {
    --arrow-angle: 135deg
}

:where([data-ui-floating]).ui-active::backdrop {
    opacity: 1
}

@supports (animation-composition:add) {
    :where([data-ui-floating]) {
        left: 0;
        top: 0;
        translate: var(--ui-floating-left) var(--ui-floating-top) 0
    }
}

:where([data-ui-floating][data-ui-current-placement=dialog]) {
    margin: auto;
    max-width: fit-content;
    position: fixed
}

:where([data-ui-floating][data-ui-current-placement=dialog]):after {
    display: none
}

:where(:root) {
    --rtl: 0;
    --gradient-angle-to-start: -90deg;
    --gradient-angle-to-end: 90deg
}

:where([dir=rtl]) {
    --rtl: 1;
    --gradient-angle-to-start: 90deg;
    --gradient-angle-to-end: -90deg
}

:where([dir]:not([dir=rtl])) {
    --rtl: 0;
    --gradient-angle-to-start: -90deg;
    --gradient-angle-to-end: 90deg
}

.ui-prevent-scroll :where(body) {
    overflow: hidden;
    padding-right: var(--ui-root-scrollbar-width, auto)
}

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

::backdrop,
:where(:root) {
    --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
    --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
    --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
    --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
    --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
    --ease-in-1: cubic-bezier(0.3, 0, 1, 1);
    --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
    --ease-in-3: cubic-bezier(0.66, 0, 1, 1);
    --ease-in-4: cubic-bezier(0.83, 0, 1, 1);
    --ease-in-5: cubic-bezier(1, 0, 1, 1);
    --ease-out-1: cubic-bezier(0, 0, 0.8, 1);
    --ease-out-2: cubic-bezier(0, 0, 0.6, 1);
    --ease-out-3: cubic-bezier(0, 0, 0.4, 1);
    --ease-out-4: cubic-bezier(0, 0, 0.2, 1);
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
    --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
    --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
    --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
    --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
    --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1)
}

::backdrop,
:where(:root) {
    --gray-hue: 267;
    --gray-darkest-oklch: 0.16 0.005 var(--gray-hue);
    --gray-darkest: oklch(var(--gray-darkest-oklch))
}

:where(:root:not([data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=gray]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=dark], [data-ui-mode=dark] *), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]) :is([data-ui-palette=""], [data-ui-palette~=gray])) {
    --gray-a1-light: oklch(0.16 0.04 var(--gray-hue)/0.03);
    --gray-a2-light: oklch(0.16 0.04 var(--gray-hue)/0.06);
    --gray-a3-light: oklch(0.16 0.04 var(--gray-hue)/0.09);
    --gray-a4-light: oklch(0.16 0.04 var(--gray-hue)/0.11);
    --gray-a5-light: oklch(0.16 0.04 var(--gray-hue)/0.14);
    --gray-a6-light: oklch(0.16 0.04 var(--gray-hue)/0.21);
    --gray-a7-light: oklch(0.16 0.04 var(--gray-hue)/0.29);
    --gray-a8-light: oklch(0.16 0.04 var(--gray-hue)/0.4);
    --gray-a9-light: oklch(0.16 0.04 var(--gray-hue)/0.7);
    --gray-a10-light: oklch(0.16 0.04 var(--gray-hue)/0.74);
    --gray-a11-light: oklch(0.16 0.04 var(--gray-hue)/0.65);
    --gray-a12-light: oklch(0.16 0.016 var(--gray-hue)/0.9);
    --gray-0-light: oklch(1 0 var(--gray-hue));
    --gray-1-light: oklch(0.97 0.001 var(--gray-hue));
    --gray-2-light: oklch(0.955 0.002 var(--gray-hue));
    --gray-3-light: oklch(0.93 0.003 var(--gray-hue));
    --gray-4-light: oklch(0.91 0.003 var(--gray-hue));
    --gray-5-light: oklch(0.89 0.004 var(--gray-hue));
    --gray-6-light: oklch(0.84 0.007 var(--gray-hue));
    --gray-7-light: oklch(0.78 0.008 var(--gray-hue));
    --gray-8-light: oklch(0.7 0.01 var(--gray-hue));
    --gray-9-light: oklch(0.45 0.02 var(--gray-hue));
    --gray-10-light: oklch(0.415 0.022 var(--gray-hue));
    --gray-11-light: oklch(0.49 0.02 var(--gray-hue));
    --gray-12-light: oklch(0.27 0.013 var(--gray-hue))
}

:where(:root:not([data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=gray]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=dark], [data-ui-mode=dark] *), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]) :is([data-ui-palette=""], [data-ui-palette~=gray])),
:where(:root:not([data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=gray]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=dark], [data-ui-mode=dark] *), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]) :is([data-ui-palette=""], [data-ui-palette~=gray])) ::backdrop,
:where(:root:not([data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=gray]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=dark], [data-ui-mode=dark] *), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]) :is([data-ui-palette=""], [data-ui-palette~=gray]))::backdrop {
    --gray-0: var(--gray-0-light);
    --gray-1: var(--gray-1-light);
    --gray-2: var(--gray-2-light);
    --gray-3: var(--gray-3-light);
    --gray-4: var(--gray-4-light);
    --gray-5: var(--gray-5-light);
    --gray-6: var(--gray-6-light);
    --gray-7: var(--gray-7-light);
    --gray-8: var(--gray-8-light);
    --gray-9: var(--gray-9-light);
    --gray-10: var(--gray-10-light);
    --gray-11: var(--gray-11-light);
    --gray-12: var(--gray-12-light);
    --gray-a1: var(--gray-a1-light);
    --gray-a2: var(--gray-a2-light);
    --gray-a3: var(--gray-a3-light);
    --gray-a4: var(--gray-a4-light);
    --gray-a5: var(--gray-a5-light);
    --gray-a6: var(--gray-a6-light);
    --gray-a7: var(--gray-a7-light);
    --gray-a8: var(--gray-a8-light);
    --gray-a9: var(--gray-a9-light);
    --gray-a10: var(--gray-a10-light);
    --gray-a11: var(--gray-a11-light);
    --gray-a12: var(--gray-a12-light)
}

:where(:root[data-ui-mode=dark], :root[data-ui-mode=dark] :is([data-ui-palette=""], [data-ui-palette~=gray]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=light], [data-ui-mode=light] *), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=gray])) {
    --gray-a1-dark: oklch(0.98 0.084 var(--gray-hue)/0.04);
    --gray-a2-dark: oklch(0.98 0.072 var(--gray-hue)/0.06);
    --gray-a3-dark: oklch(0.98 0.06 var(--gray-hue)/0.1);
    --gray-a4-dark: oklch(0.98 0.06 var(--gray-hue)/0.13);
    --gray-a5-dark: oklch(0.98 0.06 var(--gray-hue)/0.16);
    --gray-a6-dark: oklch(0.98 0.056 var(--gray-hue)/0.2);
    --gray-a7-dark: oklch(0.98 0.052 var(--gray-hue)/0.26);
    --gray-a8-dark: oklch(0.98 0.048 var(--gray-hue)/0.32);
    --gray-a9-dark: oklch(0.98 0.04 var(--gray-hue)/0.38);
    --gray-a10-dark: oklch(0.98 0.04 var(--gray-hue)/0.42);
    --gray-a11-dark: oklch(0.98 0.02 var(--gray-hue)/0.65);
    --gray-a12-dark: oklch(0.98 0.004 var(--gray-hue)/0.98);
    --gray-0-dark: oklch(0.17 0.001 var(--gray-hue));
    --gray-1-dark: oklch(0.21 0.006 var(--gray-hue));
    --gray-2-dark: oklch(0.23 0.01 var(--gray-hue));
    --gray-3-dark: oklch(0.27 0.012 var(--gray-hue));
    --gray-4-dark: oklch(0.3 0.013 var(--gray-hue));
    --gray-5-dark: oklch(0.33 0.013 var(--gray-hue));
    --gray-6-dark: oklch(0.36 0.016 var(--gray-hue));
    --gray-7-dark: oklch(0.41 0.019 var(--gray-hue));
    --gray-8-dark: oklch(0.46 0.02 var(--gray-hue));
    --gray-9-dark: oklch(0.51 0.02 var(--gray-hue));
    --gray-10-dark: oklch(0.55 0.02 var(--gray-hue));
    --gray-11-dark: oklch(0.73 0.016 var(--gray-hue));
    --gray-12-dark: oklch(0.96 0.004 var(--gray-hue))
}

:where(:root[data-ui-mode=dark], :root[data-ui-mode=dark] :is([data-ui-palette=""], [data-ui-palette~=gray]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=light], [data-ui-mode=light] *), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=gray])),
:where(:root[data-ui-mode=dark], :root[data-ui-mode=dark] :is([data-ui-palette=""], [data-ui-palette~=gray]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=light], [data-ui-mode=light] *), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=gray])) ::backdrop,
:where(:root[data-ui-mode=dark], :root[data-ui-mode=dark] :is([data-ui-palette=""], [data-ui-palette~=gray]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=light], [data-ui-mode=light] *), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=gray]))::backdrop {
    --gray-a1: var(--gray-a1-dark);
    --gray-a2: var(--gray-a2-dark);
    --gray-a3: var(--gray-a3-dark);
    --gray-a4: var(--gray-a4-dark);
    --gray-a5: var(--gray-a5-dark);
    --gray-a6: var(--gray-a6-dark);
    --gray-a7: var(--gray-a7-dark);
    --gray-a8: var(--gray-a8-dark);
    --gray-a9: var(--gray-a9-dark);
    --gray-a10: var(--gray-a10-dark);
    --gray-a11: var(--gray-a11-dark);
    --gray-a12: var(--gray-a12-dark);
    --gray-0: var(--gray-0-dark);
    --gray-1: var(--gray-1-dark);
    --gray-2: var(--gray-2-dark);
    --gray-3: var(--gray-3-dark);
    --gray-4: var(--gray-4-dark);
    --gray-5: var(--gray-5-dark);
    --gray-6: var(--gray-6-dark);
    --gray-7: var(--gray-7-dark);
    --gray-8: var(--gray-8-dark);
    --gray-9: var(--gray-9-dark);
    --gray-10: var(--gray-10-dark);
    --gray-11: var(--gray-11-dark);
    --gray-12: var(--gray-12-dark)
}

:where(:root) {
    --accent-hue: 267
}

:where(:root:not([data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=accent]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=dark], [data-ui-mode=dark] *), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]) :is([data-ui-palette=""], [data-ui-palette~=accent])) {
    --accent-1: oklch(0.9742 0.012 var(--accent-hue));
    --accent-2: oklch(0.9612 0.021 var(--accent-hue));
    --accent-3: oklch(0.9377 0.034 var(--accent-hue));
    --accent-4: oklch(0.9063 0.054 var(--accent-hue));
    --accent-5: oklch(0.8764 0.071 var(--accent-hue));
    --accent-6: oklch(0.835 0.095 var(--accent-hue));
    --accent-7: oklch(0.7862 0.126 var(--accent-hue));
    --accent-8: oklch(0.7367 0.155 var(--accent-hue));
    --accent-9: oklch(0.541 0.198 var(--accent-hue));
    --accent-10: oklch(0.5102 0.189 var(--accent-hue));
    --accent-11: oklch(0.4811 0.152 var(--accent-hue));
    --accent-12: oklch(0.3712 0.099 var(--accent-hue));
    --accent-a1: oklch(0.65 0.22 var(--accent-hue)/0.06);
    --accent-a2: oklch(0.65 0.22 var(--accent-hue)/0.1);
    --accent-a3: oklch(0.65 0.22 var(--accent-hue)/0.16);
    --accent-a4: oklch(0.65 0.22 var(--accent-hue)/0.24);
    --accent-a5: oklch(0.65 0.22 var(--accent-hue)/0.32);
    --accent-a6: oklch(0.65 0.22 var(--accent-hue)/0.42);
    --accent-a7: oklch(0.65 0.22 var(--accent-hue)/0.56);
    --accent-a8: oklch(0.65 0.22 var(--accent-hue)/0.7);
    --accent-a9: oklch(0.54 0.2 var(--accent-hue));
    --accent-a10: oklch(0.51 0.19 var(--accent-hue));
    --accent-a11: oklch(0.4 0.18 var(--accent-hue)/0.86);
    --accent-a12: oklch(0.3 0.11 var(--accent-hue)/0.9)
}

:where(:root[data-ui-mode=dark], :root[data-ui-mode=dark] :is([data-ui-palette=""], [data-ui-palette~=accent]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=light], [data-ui-mode=light] *), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=accent])) {
    --accent-1: oklch(0.225 0.033 var(--accent-hue));
    --accent-2: oklch(0.254 0.051 var(--accent-hue));
    --accent-3: oklch(0.293 0.071 var(--accent-hue));
    --accent-4: oklch(0.325 0.085 var(--accent-hue));
    --accent-5: oklch(0.353 0.099 var(--accent-hue));
    --accent-6: oklch(0.403 0.119 var(--accent-hue));
    --accent-7: oklch(0.454 0.138 var(--accent-hue));
    --accent-8: oklch(0.495 0.16 var(--accent-hue));
    --accent-9: oklch(0.562 0.201 var(--accent-hue));
    --accent-10: oklch(0.604 0.192 var(--accent-hue));
    --accent-11: oklch(0.81 0.106 var(--accent-hue));
    --accent-12: oklch(0.922 0.043 var(--accent-hue));
    --accent-a1: oklch(0.65 0.22 var(--accent-hue)/0.1);
    --accent-a2: oklch(0.65 0.22 var(--accent-hue)/0.16);
    --accent-a3: oklch(0.65 0.22 var(--accent-hue)/0.24);
    --accent-a4: oklch(0.65 0.22 var(--accent-hue)/0.3);
    --accent-a5: oklch(0.65 0.22 var(--accent-hue)/0.36);
    --accent-a6: oklch(0.65 0.22 var(--accent-hue)/0.46);
    --accent-a7: oklch(0.65 0.22 var(--accent-hue)/0.56);
    --accent-a8: oklch(0.65 0.22 var(--accent-hue)/0.66);
    --accent-a9: oklch(0.6 0.22 var(--accent-hue)/0.9);
    --accent-a10: oklch(0.65 0.21 var(--accent-hue)/0.9);
    --accent-a11: oklch(0.9 0.12 var(--accent-hue)/0.86);
    --accent-a12: oklch(0.94 0.05 var(--accent-hue)/0.98)
}

:where(:root) {
    --info-hue: 250
}

:where(:root:not([data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=info]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=dark], [data-ui-mode=dark] *), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]) :is([data-ui-palette=""], [data-ui-palette~=info])) {
    --info-1: oklch(0.9742 0.012 var(--info-hue));
    --info-2: oklch(0.9612 0.021 var(--info-hue));
    --info-3: oklch(0.9377 0.034 var(--info-hue));
    --info-4: oklch(0.9063 0.054 var(--info-hue));
    --info-5: oklch(0.8764 0.071 var(--info-hue));
    --info-6: oklch(0.835 0.095 var(--info-hue));
    --info-7: oklch(0.7862 0.126 var(--info-hue));
    --info-8: oklch(0.7367 0.155 var(--info-hue));
    --info-9: oklch(0.541 0.198 var(--info-hue));
    --info-10: oklch(0.5102 0.189 var(--info-hue));
    --info-11: oklch(0.4811 0.152 var(--info-hue));
    --info-12: oklch(0.3712 0.099 var(--info-hue));
    --info-a1: oklch(0.65 0.22 var(--info-hue)/0.06);
    --info-a2: oklch(0.65 0.22 var(--info-hue)/0.1);
    --info-a3: oklch(0.65 0.22 var(--info-hue)/0.16);
    --info-a4: oklch(0.65 0.22 var(--info-hue)/0.24);
    --info-a5: oklch(0.65 0.22 var(--info-hue)/0.32);
    --info-a6: oklch(0.65 0.22 var(--info-hue)/0.42);
    --info-a7: oklch(0.65 0.22 var(--info-hue)/0.56);
    --info-a8: oklch(0.65 0.22 var(--info-hue)/0.7);
    --info-a9: oklch(0.54 0.2 var(--info-hue));
    --info-a10: oklch(0.51 0.19 var(--info-hue));
    --info-a11: oklch(0.4 0.18 var(--info-hue)/0.86);
    --info-a12: oklch(0.3 0.11 var(--info-hue)/0.9)
}

:where(:root[data-ui-mode=dark], :root[data-ui-mode=dark] :is([data-ui-palette=""], [data-ui-palette~=info]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=light], [data-ui-mode=light] *), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=info])) {
    --info-1: oklch(0.225 0.033 var(--info-hue));
    --info-2: oklch(0.255 0.051 var(--info-hue));
    --info-3: oklch(0.293 0.071 var(--info-hue));
    --info-4: oklch(0.325 0.085 var(--info-hue));
    --info-5: oklch(0.354 0.099 var(--info-hue));
    --info-6: oklch(0.404 0.119 var(--info-hue));
    --info-7: oklch(0.454 0.138 var(--info-hue));
    --info-8: oklch(0.495 0.16 var(--info-hue));
    --info-9: oklch(0.562 0.201 var(--info-hue));
    --info-10: oklch(0.604 0.192 var(--info-hue));
    --info-11: oklch(0.811 0.106 var(--info-hue));
    --info-12: oklch(0.922 0.043 var(--info-hue));
    --info-a1: oklch(0.65 0.22 var(--info-hue)/0.1);
    --info-a2: oklch(0.65 0.22 var(--info-hue)/0.16);
    --info-a3: oklch(0.65 0.22 var(--info-hue)/0.24);
    --info-a4: oklch(0.65 0.22 var(--info-hue)/0.3);
    --info-a5: oklch(0.65 0.22 var(--info-hue)/0.36);
    --info-a6: oklch(0.65 0.22 var(--info-hue)/0.46);
    --info-a7: oklch(0.65 0.22 var(--info-hue)/0.56);
    --info-a8: oklch(0.65 0.22 var(--info-hue)/0.66);
    --info-a9: oklch(0.6 0.22 var(--info-hue)/0.9);
    --info-a10: oklch(0.65 0.21 var(--info-hue)/0.9);
    --info-a11: oklch(0.9 0.12 var(--info-hue)/0.86);
    --info-a12: oklch(0.94 0.05 var(--info-hue)/0.98)
}

:where(:root) {
    --success-hue: 160
}

:where(:root:not([data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=success]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=dark], [data-ui-mode=dark] *), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]) :is([data-ui-palette=""], [data-ui-palette~=success])) {
    --success-1: oklch(0.9742 0.012 var(--success-hue));
    --success-2: oklch(0.9612 0.021 var(--success-hue));
    --success-3: oklch(0.9377 0.034 var(--success-hue));
    --success-4: oklch(0.9063 0.054 var(--success-hue));
    --success-5: oklch(0.8764 0.071 var(--success-hue));
    --success-6: oklch(0.835 0.095 var(--success-hue));
    --success-7: oklch(0.7862 0.126 var(--success-hue));
    --success-8: oklch(0.7367 0.155 var(--success-hue));
    --success-9: oklch(0.541 0.198 var(--success-hue));
    --success-10: oklch(0.5102 0.189 var(--success-hue));
    --success-11: oklch(0.4811 0.152 var(--success-hue));
    --success-12: oklch(0.3712 0.099 var(--success-hue));
    --success-a1: oklch(0.65 0.22 var(--success-hue)/0.06);
    --success-a2: oklch(0.65 0.22 var(--success-hue)/0.1);
    --success-a3: oklch(0.65 0.22 var(--success-hue)/0.16);
    --success-a4: oklch(0.65 0.22 var(--success-hue)/0.24);
    --success-a5: oklch(0.65 0.22 var(--success-hue)/0.32);
    --success-a6: oklch(0.65 0.22 var(--success-hue)/0.42);
    --success-a7: oklch(0.65 0.22 var(--success-hue)/0.56);
    --success-a8: oklch(0.65 0.22 var(--success-hue)/0.7);
    --success-a9: oklch(0.54 0.2 var(--success-hue));
    --success-a10: oklch(0.51 0.19 var(--success-hue));
    --success-a11: oklch(0.4 0.18 var(--success-hue)/0.86);
    --success-a12: oklch(0.3 0.11 var(--success-hue)/0.9)
}

:where(:root[data-ui-mode=dark], :root[data-ui-mode=dark] :is([data-ui-palette=""], [data-ui-palette~=success]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=light], [data-ui-mode=light] *), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=success])) {
    --success-1: oklch(0.225 0.033 var(--success-hue));
    --success-2: oklch(0.255 0.051 var(--success-hue));
    --success-3: oklch(0.293 0.071 var(--success-hue));
    --success-4: oklch(0.325 0.085 var(--success-hue));
    --success-5: oklch(0.354 0.099 var(--success-hue));
    --success-6: oklch(0.404 0.119 var(--success-hue));
    --success-7: oklch(0.454 0.138 var(--success-hue));
    --success-8: oklch(0.495 0.16 var(--success-hue));
    --success-9: oklch(0.562 0.201 var(--success-hue));
    --success-10: oklch(0.604 0.192 var(--success-hue));
    --success-11: oklch(0.811 0.106 var(--success-hue));
    --success-12: oklch(0.923 0.043 var(--success-hue));
    --success-a1: oklch(0.65 0.22 var(--success-hue)/0.1);
    --success-a2: oklch(0.65 0.22 var(--success-hue)/0.16);
    --success-a3: oklch(0.65 0.22 var(--success-hue)/0.24);
    --success-a4: oklch(0.65 0.22 var(--success-hue)/0.3);
    --success-a5: oklch(0.65 0.22 var(--success-hue)/0.36);
    --success-a6: oklch(0.65 0.22 var(--success-hue)/0.46);
    --success-a7: oklch(0.65 0.22 var(--success-hue)/0.56);
    --success-a8: oklch(0.65 0.22 var(--success-hue)/0.66);
    --success-a9: oklch(0.6 0.22 var(--success-hue)/0.9);
    --success-a10: oklch(0.65 0.21 var(--success-hue)/0.9);
    --success-a11: oklch(0.9 0.12 var(--success-hue)/0.86);
    --success-a12: oklch(0.94 0.05 var(--success-hue)/0.98)
}

:where(:root) {
    --danger-hue: 20
}

:where(:root:not([data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=danger]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=dark], [data-ui-mode=dark] *), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]) :is([data-ui-palette=""], [data-ui-palette~=danger])) {
    --danger-1: oklch(0.97 0.01 var(--danger-hue));
    --danger-2: oklch(0.96 0.02 var(--danger-hue));
    --danger-3: oklch(0.94 0.03 var(--danger-hue));
    --danger-4: oklch(0.91 0.04 var(--danger-hue));
    --danger-5: oklch(0.88 0.06 var(--danger-hue));
    --danger-6: oklch(0.85 0.08 var(--danger-hue));
    --danger-7: oklch(0.81 0.1 var(--danger-hue));
    --danger-8: oklch(0.78 0.12 var(--danger-hue));
    --danger-9: oklch(0.54 0.19 var(--danger-hue));
    --danger-10: oklch(0.5 0.18 var(--danger-hue));
    --danger-11: oklch(0.49 0.15 var(--danger-hue));
    --danger-12: oklch(0.37 0.1 var(--danger-hue));
    --danger-a1: oklch(0.65 0.2 var(--danger-hue)/0.06);
    --danger-a2: oklch(0.65 0.2 var(--danger-hue)/0.1);
    --danger-a3: oklch(0.65 0.2 var(--danger-hue)/0.16);
    --danger-a4: oklch(0.65 0.2 var(--danger-hue)/0.24);
    --danger-a5: oklch(0.65 0.2 var(--danger-hue)/0.32);
    --danger-a6: oklch(0.65 0.2 var(--danger-hue)/0.4);
    --danger-a7: oklch(0.65 0.2 var(--danger-hue)/0.5);
    --danger-a8: oklch(0.65 0.2 var(--danger-hue)/0.6);
    --danger-a9: oklch(0.5 0.2 var(--danger-hue)/0.9);
    --danger-a10: oklch(0.46 0.19 var(--danger-hue)/0.9);
    --danger-a11: oklch(0.42 0.17 var(--danger-hue)/0.86);
    --danger-a12: oklch(0.3 0.11 var(--danger-hue)/0.9)
}

:where(:root[data-ui-mode=dark], :root[data-ui-mode=dark] :is([data-ui-palette=""], [data-ui-palette~=danger]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=light], [data-ui-mode=light] *), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=danger])) {
    --danger-a1: oklch(0.65 0.2 var(--danger-hue)/0.1);
    --danger-a2: oklch(0.65 0.2 var(--danger-hue)/0.14);
    --danger-a3: oklch(0.65 0.2 var(--danger-hue)/0.22);
    --danger-a4: oklch(0.65 0.2 var(--danger-hue)/0.28);
    --danger-a5: oklch(0.65 0.2 var(--danger-hue)/0.34);
    --danger-a6: oklch(0.65 0.2 var(--danger-hue)/0.44);
    --danger-a7: oklch(0.65 0.2 var(--danger-hue)/0.54);
    --danger-a8: oklch(0.65 0.2 var(--danger-hue)/0.64);
    --danger-a9: oklch(0.6 0.2 var(--danger-hue)/0.9);
    --danger-a10: oklch(0.65 0.2 var(--danger-hue)/0.9);
    --danger-a11: oklch(0.9 0.12 var(--danger-hue)/0.86);
    --danger-a12: oklch(0.94 0.05 var(--danger-hue)/0.98);
    --danger-1: oklch(0.22 0.03 var(--danger-hue));
    --danger-2: oklch(0.24 0.04 var(--danger-hue));
    --danger-3: oklch(0.29 0.06 var(--danger-hue));
    --danger-4: oklch(0.31 0.07 var(--danger-hue));
    --danger-5: oklch(0.35 0.08 var(--danger-hue));
    --danger-6: oklch(0.39 0.1 var(--danger-hue));
    --danger-7: oklch(0.44 0.12 var(--danger-hue));
    --danger-8: oklch(0.49 0.14 var(--danger-hue));
    --danger-9: oklch(0.56 0.18 var(--danger-hue));
    --danger-10: oklch(0.61 0.18 var(--danger-hue));
    --danger-11: oklch(0.81 0.11 var(--danger-hue));
    --danger-12: oklch(0.92 0.044 var(--danger-hue))
}

:where(:root) {
    --warning-hue: 70
}

:where(:root:not([data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=warning]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=dark], [data-ui-mode=dark] *), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]), [data-ui-mode=dark] :is([data-ui-mode=reverse], [data-ui-mode=light]) :is([data-ui-palette=""], [data-ui-palette~=warning])) {
    --warning-1: oklch(0.9783 0.012 var(--warning-hue));
    --warning-2: oklch(0.9624 0.021 var(--warning-hue));
    --warning-3: oklch(0.9426 0.034 var(--warning-hue));
    --warning-4: oklch(0.9119 0.049 var(--warning-hue));
    --warning-5: oklch(0.8814 0.067 var(--warning-hue));
    --warning-6: oklch(0.8526 0.083 var(--warning-hue));
    --warning-7: oklch(0.8204 0.104 var(--warning-hue));
    --warning-8: oklch(0.783 0.124 var(--warning-hue));
    --warning-9: oklch(0.8464 0.179 var(--warning-hue));
    --warning-10: oklch(0.8168 0.18 var(--warning-hue));
    --warning-11: oklch(0.53 0.2 var(--warning-hue));
    --warning-12: oklch(0.38 0.14 var(--warning-hue));
    --warning-a1: oklch(0.65 0.2 var(--warning-hue)/0.06);
    --warning-a2: oklch(0.65 0.2 var(--warning-hue)/0.1);
    --warning-a3: oklch(0.65 0.2 var(--warning-hue)/0.16);
    --warning-a4: oklch(0.65 0.2 var(--warning-hue)/0.24);
    --warning-a5: oklch(0.65 0.2 var(--warning-hue)/0.32);
    --warning-a6: oklch(0.65 0.2 var(--warning-hue)/0.4);
    --warning-a7: oklch(0.65 0.2 var(--warning-hue)/0.5);
    --warning-a8: oklch(0.65 0.2 var(--warning-hue)/0.6);
    --warning-a9: oklch(0.85 0.2 var(--warning-hue)/0.9);
    --warning-a10: oklch(0.8 0.19 var(--warning-hue)/0.9);
    --warning-a11: oklch(0.49 0.23 var(--warning-hue)/0.86);
    --warning-a12: oklch(0.34 0.154 var(--warning-hue)/0.9)
}

:where(:root[data-ui-mode=dark], :root[data-ui-mode=dark] :is([data-ui-palette=""], [data-ui-palette~=warning]):not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=light], [data-ui-mode=light] *), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]) :is([data-ui-palette=""], [data-ui-palette~=warning])) {
    --warning-1: oklch(0.2273 0.027 var(--warning-hue));
    --warning-2: oklch(0.2557 0.041 var(--warning-hue));
    --warning-3: oklch(0.2989 0.059 var(--warning-hue));
    --warning-4: oklch(0.3287 0.07 var(--warning-hue));
    --warning-5: oklch(0.3579 0.081 var(--warning-hue));
    --warning-6: oklch(0.4053 0.095 var(--warning-hue));
    --warning-7: oklch(0.4546 0.111 var(--warning-hue));
    --warning-8: oklch(0.5013 0.125 var(--warning-hue));
    --warning-9: oklch(0.8315 0.172 var(--warning-hue));
    --warning-10: oklch(0.8641 0.154 var(--warning-hue));
    --warning-11: oklch(0.81 0.114 var(--warning-hue));
    --warning-12: oklch(0.946 0.049 var(--warning-hue));
    --warning-a1: oklch(0.65 0.19 var(--warning-hue)/0.1);
    --warning-a2: oklch(0.65 0.19 var(--warning-hue)/0.16);
    --warning-a3: oklch(0.65 0.19 var(--warning-hue)/0.24);
    --warning-a4: oklch(0.65 0.19 var(--warning-hue)/0.3);
    --warning-a5: oklch(0.65 0.19 var(--warning-hue)/0.36);
    --warning-a6: oklch(0.65 0.19 var(--warning-hue)/0.46);
    --warning-a7: oklch(0.65 0.19 var(--warning-hue)/0.56);
    --warning-a8: oklch(0.65 0.19 var(--warning-hue)/0.66);
    --warning-a9: oklch(0.9 0.19 var(--warning-hue)/0.9);
    --warning-a10: oklch(0.95 0.18 var(--warning-hue)/0.9);
    --warning-a11: oklch(0.9 0.13 var(--warning-hue)/0.86);
    --warning-a12: oklch(0.96 0.05 var(--warning-hue)/0.98)
}

::backdrop,
:where(:root) {
    --animation-blink: blink 1s var(--ease-out-3, ease-out) infinite
}

@supports not (((height:1lh) and (animation-timeline:none)) or ((height:1lh) and (margin-trim:none))) {
    * {
        --blink-size: unset
    }
}

@property --blink-size {
    syntax: "<number>";
    inherits: false;
    initial-value: 0
}

@keyframes blink {

    0%,
    to {
        opacity: 1
    }

    50% {
        opacity: var(--blink-size, .25)
    }
}

::backdrop,
:where(:root) {
    --animation-collapse-in: collapse-in var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-collapse-out: collapse-out var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-collapse-width-in: collapse-width-in var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-collapse-width-out: collapse-width-out var(--duration-3, 200) var(--ease-3, ease-out)
}

@supports not (((height:1lh) and (animation-timeline:none)) or ((height:1lh) and (margin-trim:none))) {
    * {
        --collapse-size: unset;
        --collapse-width-size: unset
    }
}

/* @property --collapse-size {
    syntax: "<length-percentage>";
    inherits: false
} */

/* @property --collapse-width-size {
    syntax: "<length-percentage>";
    inherits: false
} */

@keyframes collapse-in {
    0% {
        height: var(--collapse-size, 0);
        overflow: hidden
    }

    to {
        height: var(--ui-transition-height);
        overflow: hidden
    }
}

@keyframes collapse-out {
    0% {
        height: var(--ui-transition-height);
        overflow: hidden
    }

    to {
        height: var(--collapse-size, 0);
        overflow: hidden
    }
}

@keyframes collapse-width-in {
    0% {
        overflow: hidden;
        width: var(--collapse-width-size, 0)
    }

    to {
        overflow: hidden;
        width: var(--ui-transition-width)
    }
}

@keyframes collapse-width-out {
    0% {
        overflow: hidden;
        width: var(--ui-transition-width)
    }

    to {
        overflow: hidden;
        width: var(--collapse-width-size, 0)
    }
}

::backdrop,
:where(:root) {
    --animation-fade-in: fade-in var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-fade-out: fade-out var(--duration-3, 200) var(--ease-3, ease-out)
}

@supports not (((height:1lh) and (animation-timeline:none)) or ((height:1lh) and (margin-trim:none))) {
    * {
        --fade-size: unset
    }
}

@property --fade-size {
    syntax: "<number>";
    inherits: false;
    initial-value: 0
}

@keyframes fade-in {
    0% {
        opacity: var(--fade-size, 0)
    }
}

@keyframes fade-out {
    to {
        opacity: var(--fade-size, 0)
    }
}

::backdrop,
:where(:root) {
    --animation-ping: ping 5s var(--ease-out-3, ease-out) infinite
}

@supports not (((height:1lh) and (animation-timeline:none)) or ((height:1lh) and (margin-trim:none))) {
    * {
        --ping-size: unset
    }
}

/* @property --ping-size {
    syntax: "<number> || <percentage>";
    inherits: false;
    initial-value: 0
} */

@keyframes ping {

    90%,
    to {
        opacity: 0;
        scale: var(--ping-size, 2)
    }
}

::backdrop,
:where(:root) {
    --animation-pulse: pulse 2s var(--ease-out-3, ease-out) infinite
}

@supports not (((height:1lh) and (animation-timeline:none)) or ((height:1lh) and (margin-trim:none))) {
    * {
        --pulse-size: unset
    }
}

/* @property --pulse-size {
    syntax: "<number> || <percentage>";
    inherits: false;
    initial-value: 0
} */

@keyframes pulse {
    50% {
        scale: var(--pulse-size, .9)
    }
}

::backdrop,
:where(:root) {
    --animation-scale-out-up: scale-out-up var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-scale-out-down: scale-out-down var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-scale-in-up: scale-in-up var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-scale-in-down: scale-in-down var(--duration-3, 200) var(--ease-3, ease-out)
}

@supports not (((height:1lh) and (animation-timeline:none)) or ((height:1lh) and (margin-trim:none))) {
    * {
        --scale-size: unset;
        --scale-in-size: unset;
        --scale-out-size: unset
    }
}
/* 
@property --scale-size {
    syntax: "<number> || <percentage>";
    inherits: false
}

@property --scale-in-size {
    syntax: "<number> || <percentage>";
    inherits: false
}

@property --scale-out-size {
    syntax: "<number> || <percentage>";
    inherits: false
} */

@keyframes scale-in-up {
    0% {
        animation-composition: add;
        scale: var(--scale-in-size, var(--scale-size, .95))
    }
}

@keyframes scale-in-down {
    0% {
        animation-composition: add;
        scale: var(--scale-in-size, var(--scale-size, 1.05))
    }
}

@keyframes scale-out-up {
    to {
        animation-composition: add;
        scale: var(--scale-out-size, var(--scale-size, 1.05))
    }
}

@keyframes scale-out-down {
    to {
        animation-composition: add;
        scale: var(--scale-out-size, var(--scale-size, .95))
    }
}

::backdrop,
:where(:root) {
    --animation-shake-x: shake-x 0.5s var(--ease-out-5, ease-out);
    --animation-shake-y: shake-y 0.5s var(--ease-out-5, ease-out)
}

@supports not (((height:1lh) and (animation-timeline:none)) or ((height:1lh) and (margin-trim:none))) {
    * {
        --shake-x-size: unset;
        --shake-y-size: unset
    }
}

/* @property --shake-x-size {
    syntax: "<length> || <percentage>";
    inherits: false;
    initial-value: 0
} */

@keyframes shake-x {

    0%,
    to {
        translate: 0
    }

    20%,
    60% {
        translate: calc(var(--shake-x-size, 2.5%)*-1)
    }

    40%,
    80% {
        translate: var(--shake-x-size, 2.5%)
    }
}

/* @property --shake-y-size {
    syntax: "<length> || <percentage>";
    inherits: false;
    initial-value: 0
} */

@keyframes shake-y {

    0%,
    to {
        translate: 0 0
    }

    20%,
    60% {
        translate: 0 calc(var(--shake-y-size, 2.5%)*-1)
    }

    40%,
    80% {
        translate: 0 var(--shake-y-size, 2.5%)
    }
}

::backdrop,
:where(:root) {
    --animation-slide-out-up: slide-out-up var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-slide-out-down: slide-out-down var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-slide-in-up: slide-in-up var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-slide-in-down: slide-in-down var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-slide-out-right: slide-out-right var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-slide-out-end: slide-out-end var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-slide-out-left: slide-out-left var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-slide-out-start: slide-out-start var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-slide-in-right: slide-in-right var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-slide-in-end: slide-in-end var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-slide-in-left: slide-in-left var(--duration-3, 200) var(--ease-3, ease-out);
    --animation-slide-in-start: slide-in-start var(--duration-3, 200) var(--ease-3, ease-out)
}

@supports not (((height:1lh) and (animation-timeline:none)) or ((height:1lh) and (margin-trim:none))) {
    * {
        --slide-size: unset;
        --slide-in-size: unset;
        --slide-out-size: unset
    }
}

/* @property --slide-in-size {
    syntax: "<number> || <percentage>";
    inherits: false
}

@property --slide-size {
    syntax: "<number> || <percentage>";
    inherits: false
}

@property --slide-out-size {
    syntax: "<number> || <percentage>";
    inherits: false
} */

@keyframes slide-in-up {
    0% {
        animation-composition: add;
        translate: 0 var(--slide-in-size, var(--slide-size, 100%))
    }
}

@keyframes slide-in-down {
    0% {
        animation-composition: add;
        translate: 0 calc(var(--slide-in-size, var(--slide-size, 100%))*-1)
    }
}

@keyframes slide-in-right {
    0% {
        animation-composition: add;
        translate: calc(var(--slide-in-size, var(--slide-size, 100%))*-1)
    }
}

@keyframes slide-in-end {
    0% {
        animation-composition: add;
        translate: calc(var(--slide-in-size, var(--slide-size, 100%))*-1 + var(--slide-in-size, var(--slide-size, 100%))*2*var(--rtl, 0))
    }
}

@keyframes slide-in-left {
    0% {
        animation-composition: add;
        translate: var(--slide-in-size, var(--slide-size, 100%))
    }
}

@keyframes slide-in-start {
    0% {
        animation-composition: add;
        translate: calc(var(--slide-in-size, var(--slide-size, 100%)) - var(--slide-in-size, var(--slide-size, 100%))*2*var(--rtl, 0))
    }
}

@keyframes slide-out-up {
    to {
        animation-composition: add;
        translate: 0 calc(var(--slide-out-size, var(--slide-size, 100%))*-1)
    }
}

@keyframes slide-out-down {
    to {
        animation-composition: add;
        translate: 0 var(--slide-out-size, var(--slide-size, 100%))
    }
}

@keyframes slide-out-right {
    to {
        animation-composition: add;
        translate: var(--slide-out-size, var(--slide-size, 100%))
    }
}

@keyframes slide-out-end {
    to {
        animation-composition: add;
        translate: calc(var(--slide-out-size, var(--slide-size, 100%)) - var(--slide-out-size, var(--slide-size, 100%))*2*var(--rtl, 0))
    }
}

@keyframes slide-out-left {
    to {
        animation-composition: add;
        translate: calc(var(--slide-out-size, var(--slide-size, 100%))*-1)
    }
}

@keyframes slide-out-start {
    to {
        animation-composition: add;
        translate: calc(var(--slide-out-size, var(--slide-size, 100%))*-1 + var(--slide-out-size, var(--slide-size, 100%))*2*var(--rtl, 0))
    }
}

::backdrop,
:where(:root) {
    --animation-spin: spin 2s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

::backdrop,
:where(:root) {
    --animation-spring: spring var(--duration-3, 200) var(--ease-3, ease-out)
}

@supports not (((height:1lh) and (animation-timeline:none)) or ((height:1lh) and (margin-trim:none))) {
    * {
        --spring-size: unset
    }
}

/* @property --spring-size {
    syntax: "<number> || <percentage>";
    inherits: false;
    initial-value: 0
} */

@keyframes spring {

    0%,
    to {
        scale: 1
    }

    50% {
        scale: var(--spring-size, 1.02)
    }
}

.fade-enter-active {
    animation: var(--animation-fade-in)
}

.fade-leave-active {
    animation: var(--animation-fade-out)
}

.scale-down-fade-enter-active {
    animation: var(--animation-scale-in-down), var(--animation-fade-in)
}

.scale-down-fade-leave-active {
    animation: var(--animation-scale-out-down), var(--animation-fade-out)
}

.scale-down-up-fade-enter-active {
    animation: var(--animation-scale-in-down), var(--animation-fade-in)
}

.scale-down-up-fade-leave-active {
    animation: var(--animation-scale-out-up), var(--animation-fade-out)
}

.scale-up-fade-enter-active {
    animation: var(--animation-scale-in-up), var(--animation-fade-in)
}

.scale-up-fade-leave-active {
    animation: var(--animation-scale-out-up), var(--animation-fade-out)
}

.scale-up-down-fade-enter-active {
    animation: var(--animation-scale-in-up), var(--animation-fade-in)
}

.scale-up-down-fade-leave-active {
    animation: var(--animation-scale-out-down), var(--animation-fade-out)
}

.slide-down-fade-enter-active {
    animation: var(--animation-slide-in-down), var(--animation-fade-in)
}

.slide-down-fade-leave-active {
    animation: var(--animation-slide-out-down), var(--animation-fade-out)
}

.slide-down-up-fade-enter-active {
    animation: var(--animation-slide-in-down), var(--animation-fade-in)
}

.slide-down-up-fade-leave-active {
    animation: var(--animation-slide-out-up), var(--animation-fade-out)
}

.slide-up-down-fade-enter-active {
    animation: var(--animation-slide-in-up), var(--animation-fade-in)
}

.slide-up-down-fade-leave-active {
    animation: var(--animation-slide-out-down), var(--animation-fade-out)
}

.slide-up-fade-enter-active {
    animation: var(--animation-slide-in-up), var(--animation-fade-in)
}

.slide-up-fade-leave-active {
    animation: var(--animation-slide-out-up), var(--animation-fade-out)
}

.collapse-enter-active {
    animation: var(--animation-collapse-in)
}

.collapse-leave-active {
    animation: var(--animation-collapse-out)
}

.collapse-fade-enter-active {
    animation: var(--animation-collapse-in), var(--animation-fade-in)
}

.collapse-fade-leave-active {
    animation: var(--animation-collapse-out), var(--animation-fade-out)
}

::backdrop,
:where(:root) {
    --ui-space: oklch;
    --text-xxs: 0.75rem;
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-xxl: 1.25rem;
    --duration-1: 75ms;
    --duration-2: 125ms;
    --duration-3: 200ms;
    --duration-4: 300ms;
    --duration-5: 500ms;
    --transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, outline-color, opacity, box-shadow, transform, translate, scale, skew, filter, backdrop-filter;
    --ui-size-xxs: 1.5rem;
    --ui-size-xs: 1.75rem;
    --ui-size-sm: 2rem;
    --ui-size-md: 2.5rem;
    --ui-size-lg: 3rem;
    --ui-size-xl: 3.5rem;
    --ui-top-layer-z-index: 999;
    --ui-boundary-offset-top: 1rem;
    --ui-boundary-offset-end: 1rem;
    --ui-boundary-offset-bottom: 1rem;
    --ui-boundary-offset-start: 1rem
}

:where(:root, [data-ui-mode], [data-ui-palette]) {
    --ui-accent-color: var(--accent-9);
    --ui-main-bg: var(--gray-0);
    --ui-color: var(--gray-12);
    --ui-border-style: solid;
    --ui-border-width: 1px;
    --ui-border-color: var(--gray-4);
    --ui-panel-bg: var(--gray-0);
    --ui-panel-color: var(--gray-12);
    --ui-panel-border-width: 1px;
    --ui-panel-border-style: none;
    --ui-panel-border-color: var(--gray-a4);
    --ui-panel-outline: 2px solid var(--gray-3);
    --ui-panel-outline-offset: 2px;
    --ui-control-bg: var(--gray-0);
    --ui-control-color: var(--gray-12);
    --ui-control-border-style: solid;
    --ui-control-border-width: 1px;
    --ui-control-border-color: var(--gray-6);
    --ui-control-border-color-hover: var(--gray-7);
    --ui-control-border-color-focus: var(--accent-8);
    --ui-control-border-radius: var(--radius);
    --ui-control-outline-width: 2px;
    --ui-control-outline-style: solid;
    --ui-control-outline-offset: -2px;
    --ui-control-outline-color: var(--accent-8);
    --shadow-xs: 0 1px 0.125rem 0 oklch(var(--gray-darkest-oklch)/0.05);
    --shadow-sm: 0 1px 0.1875rem 0 oklch(var(--gray-darkest-oklch)/0.1), 0 1px 0.125rem -1px oklch(var(--gray-darkest-oklch)/0.1);
    --shadow: 0 0.25rem 0.375rem -1px oklch(var(--gray-darkest-oklch)/0.1), 0 0.125rem 0.25rem -0.125rem oklch(var(--gray-darkest-oklch)/0.1);
    --shadow-lg: 0 0.625rem 1rem -0.1875rem oklch(var(--gray-darkest-oklch)/0.1), 0 0.25rem 0.375rem -0.25rem oklch(var(--gray-darkest-oklch)/0.1);
    --shadow-xl: 0 1.25rem 1.5rem -0.375rem oklch(var(--gray-darkest-oklch)/0.1), 0 0.5rem 0.625rem -0.375rem oklch(var(--gray-darkest-oklch)/0.1);
    --shadow-2xl: 0 1.5rem 3.125rem -0.75rem oklch(var(--gray-darkest-oklch)/0.25)
}

:where(:root, [data-ui-mode], [data-ui-palette]),
:where(:root, [data-ui-mode], [data-ui-palette]) ::backdrop,
:where(:root, [data-ui-mode], [data-ui-palette])::backdrop {
    --ui-backdrop-bg: oklch(var(--gray-darkest-oklch)/0.6);
    --ui-backdrop-light-bg: oklch(var(--gray-darkest-oklch)/0.15)
}

:where(:root[data-ui-mode=dark], :root[data-ui-mode=dark] [data-ui-palette]:not([data-ui-mode=reverse], [data-ui-mode=reverse] *, [data-ui-mode=light], [data-ui-mode=light] *), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]), :root:not([data-ui-mode=dark]) :is([data-ui-mode=reverse], [data-ui-mode=dark]) [data-ui-palette]) {
    --ui-panel-bg: var(--gray-1);
    --ui-panel-border-style: solid
}

:where(:root) {
    accent-color: var(--ui-accent-color);
    background-color: var(--ui-main-bg);
    color: var(--gray-12)
}

::selection {
    background: var(--accent-a4)
}

.ui-icon {
    aspect-ratio: 1;
    background-color: currentColor;
    display: block;
    flex-shrink: 0;
    height: fit-content;
    mask-image: var(--ui-icon);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: var(--ui-icon-size, 1.5rem)
}

:root {
    --ui-icon-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='m6 11.26 4.5 4.44L18 8.3'/%3E%3C/svg%3E")
}

.ui-icon--check {
    --ui-icon: var(--ui-icon-check)
}

:root {
    --ui-icon-check-circle: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18'/%3E%3Cpath d='m8 11.5 3 3 5-5'/%3E%3C/svg%3E")
}

.ui-icon--check-circle {
    --ui-icon: var(--ui-icon-check-circle)
}

:root {
    --ui-icon-cross: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='m7.012 7.089 9.9 9.9M7.012 16.911l9.9-9.9'/%3E%3C/svg%3E")
}

.ui-icon--cross {
    --ui-icon: var(--ui-icon-cross)
}

:root {
    --ui-icon-info-circle: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z'/%3E%3Ccircle cx='12' cy='7.6' r='1' fill='currentColor' stroke='none'/%3E%3Cpath d='M12.05 10.95v6M10.05 10.929h1.958M10.05 16.969h3.9'/%3E%3C/svg%3E")
}

.ui-icon--info-circle {
    --ui-icon: var(--ui-icon-info-circle)
}

:root {
    --ui-icon-not-allowed: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM17.929 18.986l-11.5-13.5'/%3E%3C/svg%3E")
}

.ui-icon--not-allowed {
    --ui-icon: var(--ui-icon-not-allowed)
}

:root {
    --ui-icon-question-circle: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18'/%3E%3Cellipse cx='11.82' cy='16.198' fill='currentColor' rx='.85' ry='.841'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M11.926 13.221c-.01-1.074.668-1.554 1.245-1.972.444-.322 1.064-.776 1.11-1.797 0-.438-.076-.746-.29-1.15-.107-.175-.376-.505-.641-.672-.493-.377-1.279-.555-2.069-.386-1.395.298-1.748 1.336-1.748 1.918'/%3E%3C/svg%3E")
}

.ui-icon--question-circle {
    --ui-icon: var(--ui-icon-question-circle)
}

:root {
    --ui-icon-chevron-down: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='m12 14.829 5.657-5.657M12 14.829 6.343 9.172'/%3E%3C/svg%3E")
}

.ui-icon--chevron-down {
    --ui-icon: var(--ui-icon-chevron-down)
}

:root {
    --ui-icon-warning: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M11.977 9.34v5.289'/%3E%3Ccircle cx='11.977' cy='16.857' r='.761' fill='currentColor'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M11.613 4.365 3.046 19.298a.33.33 0 0 0 .017.362.4.4 0 0 0 .155.13.5.5 0 0 0 .208.05h17.148a.5.5 0 0 0 .208-.05.4.4 0 0 0 .155-.13.332.332 0 0 0 .016-.362L12.372 4.365a.4.4 0 0 0-.156-.15.47.47 0 0 0-.447 0 .4.4 0 0 0-.156.15'/%3E%3C/svg%3E")
}

.ui-icon--warning {
    --ui-icon: var(--ui-icon-warning)
}

.ui-form-control {
    --ui-form-control-bg: var(--ui-control-bg);
    --ui-form-control-color: var(--ui-control-color);
    --ui-form-control-border-style: var(--ui-control-border-style);
    --ui-form-control-border-width: var(--ui-control-border-width);
    --ui-form-control-border-color: var(--ui-control-border-color);
    --ui-form-control-border-color-hover: var(--ui-control-border-color-hover);
    --ui-form-control-border-color-focus: var(--ui-control-border-color-focus);
    --ui-form-control-outline-style: var(--ui-control-outline-style);
    --ui-form-control-outline-width: var(--ui-control-outline-width);
    --ui-form-control-outline-color: var(--ui-control-outline-color);
    --ui-form-control-outline-offset: var(--ui-control-outline-offset);
    --ui-form-control-border-radius: var(--ui-control-border-radius);
    --ui-form-control-padding-y: 0.5rem;
    --ui-form-control-padding-x: 0.75rem;
    --ui-form-control-height: var(--ui-size-md);
    --ui-form-control-select-arrow-color: var(--gray-11);
    --ui-form-control-select-arrow-size: 0.3125rem;
    --ui-form-control-select-arrow-offset: 1rem;
    --ui-form-control-font-size: 0.875rem;
    --ui-form-control-placeholder-color: var(--gray-11)
}

.ui-form-control::-webkit-inner-spin-button,
.ui-form-control::-webkit-outer-spin-button {
    appearance: none;
    margin: 0
}

.ui-form-control:where([type=number]) {
    appearance: textfield
}

.ui-form-control-label {
    display: block;
    font-size: var(--text-sm);
    margin-bottom: .5em
}

.ui-form-control {
    background: var(--ui-form-control-bg);
    border-color: var(--ui-form-control-border-color);
    border-radius: var(--ui-form-control-border-radius);
    border-width: var(--ui-form-control-border-width);
    color: var(--ui-form-control-color);
    font-size: var(--ui-form-control-font-size);
    height: var(--ui-form-control-height);
    outline: var(--ui-form-control-outline-width) var(--ui-form-control-outline-style) transparent;
    outline-offset: var(--ui-form-control-outline-offset);
    padding-left: var(--ui-form-control-padding-x);
    padding-right: var(--ui-form-control-padding-x);
    transition-duration: var(--duration-1);
    transition-property: var(--transition-property);
    transition-timing-function: var(--ease-3);
    width: 100%
}

.ui-form-control:focus {
    outline-color: var(--ui-form-control-outline-color)
}

.ui-form-control:where([type=color]) {
    overflow: hidden;
    padding: 0
}

.ui-form-control::-webkit-color-swatch-wrapper {
    padding: 0
}

.ui-form-control::-webkit-color-swatch {
    border-width: 0
}

.ui-form-control:where(textarea) {
    height: auto;
    min-height: var(--ui-form-control-height);
    padding-bottom: var(--ui-form-control-padding-y);
    padding-top: var(--ui-form-control-padding-y)
}

.ui-form-control:where(select) {
    appearance: none
}

.ui-form-control-wrapper {
    align-items: center;
    display: flex;
    position: relative
}

.ui-form-control-wrapper:where(:has(select)):after {
    aspect-ratio: 1;
    background-color: currentColor;
    content: "";
    display: block;
    inset-inline-end: .5rem;
    mask-image: var(--ui-icon-chevron-down);
    mask-size: contain;
    pointer-events: none;
    position: absolute;
    width: 1.375rem
}

.ui-form-control::placeholder {
    color: var(--ui-form-control-placeholder-color)
}

.ui-form-control:hover {
    border-color: var(--ui-form-control-border-color-hover)
}

.ui-form-control:focus {
    border-color: var(--ui-form-control-border-color-focus)
}

.ui-form-control--sm {
    --ui-form-control-height: var(--ui-size-sm);
    --ui-form-control-padding-x: 0.625rem;
    --ui-form-control-border-radius: var(--radius-sm)
}

.ui-form-control--lg {
    --ui-form-control-height: var(--ui-size-lg);
    --ui-form-control-padding-x: 1.125rem;
    --ui-form-control-font-size: 1rem
}

.ui-btn {
    align-items: center;
    background: var(--ui-btn-bg);
    border: var(--ui-btn-border-width, 1px) var(--ui-btn-border-style, solid) var(--ui-btn-border-color, transparent);
    border-radius: var(--ui-btn-radius);
    color: var(--ui-btn-color);
    display: inline-flex;
    flex-shrink: 0;
    font-weight: var(--ui-btn-font-weight, 500);
    gap: var(--ui-btn-gap, .375em);
    height: var(--ui-btn-size);
    justify-content: center;
    min-width: var(--ui-btn-size);
    outline: var(--ui-btn-outline-width, 2px) solid transparent;
    outline-offset: var(--ui-btn-outline-offset, 2px);
    padding-left: var(--ui-btn-padding);
    padding-right: var(--ui-btn-padding);
    transition-duration: var(--duration-1);
    transition-property: var(--transition-property);
    transition-timing-function: var(--ease-3);
    user-select: none;
    white-space: nowrap
}

.ui-btn:hover {
    background-color: var(--ui-btn-bg-hover);
    border-color: var(--ui-btn-border-color-hover, var(--ui-btn-border-color, transparent));
    color: var(--ui-btn-color-hover, var(--ui-btn-color))
}

.ui-btn:focus-visible {
    outline-color: var(--ui-btn-outline-color, var(--ui-btn-bg))
}

.ui-btn--outline,
.ui-btn--surface {
    border-width: 1px
}

.ui-btn--xs {
    --ui-btn-size: var(--ui-size-xs);
    --ui-btn-padding: 0.5rem;
    --ui-btn-radius: var(--radius-xs);
    font-size: var(--text-xs)
}

.ui-btn--sm {
    --ui-btn-size: var(--ui-size-sm);
    --ui-btn-padding: 0.625rem;
    --ui-btn-radius: var(--radius-sm)
}

.ui-btn--md,
.ui-btn--sm {
    font-size: var(--text-sm)
}

.ui-btn--md {
    --ui-btn-size: var(--ui-size-md);
    --ui-btn-padding: 0.75rem;
    --ui-btn-radius: var(--radius-sm)
}

.ui-btn--lg {
    --ui-btn-size: var(--ui-size-lg);
    --ui-btn-padding: 1.125rem;
    --ui-btn-radius: var(--radius)
}

.ui-btn--lg,
.ui-btn--xl {
    font-size: var(--text-md)
}

.ui-btn--xl {
    --ui-btn-size: var(--ui-size-xl);
    --ui-btn-padding: 1.625rem;
    --ui-btn-radius: var(--radius)
}

.ui-btn :where(.ui-icon) {
    margin: 0 -.125em;
    width: 1.25rem
}

.ui-btn--icon {
    padding: 0
}

.ui-btn--icon :where(.ui-icon) {
    margin: 0;
    width: 80%
}

.ui-btn-close {
    align-items: center;
    aspect-ratio: 1;
    border-radius: var(--ui-btn-close-radius, var(--radius-xs));
    display: inline-flex;
    justify-content: center;
    outline: var(--ui-btn-close-outline-width, 2px) solid transparent;
    outline-offset: var(--ui-btn-close-outline-offset, 2px);
    transition-duration: var(--duration-1);
    transition-property: var(--transition-property);
    transition-timing-function: var(--ease-3);
    width: var(--ui-btn-close-size, var(--ui-size-xs))
}

.ui-btn-close:where(:not(:hover, :focus-visible)) {
    opacity: .75
}

.ui-btn-close:where(:not(.ui-btn-close--no-bg)):hover {
    background: var(--ui-btn-close-hover-bg, color-mix(in var(--ui-space), var(--ui-btn-close-color, currentColor) 8%, transparent))
}

.ui-btn-close:focus-visible {
    outline-color: var(--ui-btn-close-outline-color, color-mix(in var(--ui-space), var(--ui-btn-close-outline-color, var(--ui-btn-close-color, currentColor)) 25%, transparent))
}

.ui-btn-close:before {
    aspect-ratio: 1;
    background-color: currentColor;
    content: "";
    display: block;
    mask: var(--ui-icon-cross) no-repeat center /contain;
    transition: inherit;
    width: var(--ui-btn-close-icon-size, 1.5rem)
}

.ui-btn--danger {
    --ui-btn-bg: var(--danger-9);
    --ui-btn-bg-hover: var(--danger-10);
    --ui-btn-outline-color: var(--danger-a9);
    --ui-btn-color: #fff
}

.ui-btn--danger:where(.ui-btn--outline, .ui-btn--surface, .ui-btn--soft, .ui-btn--ghost, .ui-btn--link) {
    --ui-btn-color: var(--danger-a11);
    --ui-btn-outline-color: var(--danger-a6)
}

.ui-btn--danger:where(.ui-btn--outline, .ui-btn--surface) {
    --ui-btn-border-color: var(--danger-a5)
}

.ui-btn--danger:where(.ui-btn--outline, .ui-btn--ghost) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: var(--danger-a1)
}

.ui-btn--danger:where(.ui-btn--link) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: transparent;
    --ui-btn-color-hover: var(--danger-a12)
}

.ui-btn--danger:where(.ui-btn--soft) {
    --ui-btn-bg: var(--danger-a3);
    --ui-btn-bg-hover: var(--danger-a4)
}

.ui-btn--danger:where(.ui-btn--surface) {
    --ui-btn-bg: var(--danger-a1);
    --ui-btn-bg-hover: var(--danger-a2)
}

.ui-btn--info {
    --ui-btn-bg: var(--info-9);
    --ui-btn-bg-hover: var(--info-10);
    --ui-btn-outline-color: var(--info-a9);
    --ui-btn-color: #fff
}

.ui-btn--info:where(.ui-btn--outline, .ui-btn--surface, .ui-btn--soft, .ui-btn--ghost, .ui-btn--link) {
    --ui-btn-color: var(--info-a11);
    --ui-btn-outline-color: var(--info-a6)
}

.ui-btn--info:where(.ui-btn--outline, .ui-btn--surface) {
    --ui-btn-border-color: var(--info-a5)
}

.ui-btn--info:where(.ui-btn--outline, .ui-btn--ghost) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: var(--info-a1)
}

.ui-btn--info:where(.ui-btn--link) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: transparent;
    --ui-btn-color-hover: var(--info-a12)
}

.ui-btn--info:where(.ui-btn--soft) {
    --ui-btn-bg: var(--info-a3);
    --ui-btn-bg-hover: var(--info-a4)
}

.ui-btn--info:where(.ui-btn--surface) {
    --ui-btn-bg: var(--info-a1);
    --ui-btn-bg-hover: var(--info-a2)
}

.ui-btn--primary {
    --ui-btn-bg: var(--accent-9);
    --ui-btn-bg-hover: var(--accent-10);
    --ui-btn-outline-color: var(--accent-a9);
    --ui-btn-color: #fff
}

.ui-btn--primary:where(.ui-btn--outline, .ui-btn--surface, .ui-btn--soft, .ui-btn--ghost, .ui-btn--link) {
    --ui-btn-color: var(--accent-a11);
    --ui-btn-outline-color: var(--accent-a6)
}

.ui-btn--primary:where(.ui-btn--outline, .ui-btn--surface) {
    --ui-btn-border-color: var(--accent-a5)
}

.ui-btn--primary:where(.ui-btn--outline, .ui-btn--ghost) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: var(--accent-a1)
}

.ui-btn--primary:where(.ui-btn--link) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: transparent;
    --ui-btn-color-hover: var(--accent-a12)
}

.ui-btn--primary:where(.ui-btn--soft) {
    --ui-btn-bg: var(--accent-a3);
    --ui-btn-bg-hover: var(--accent-a4)
}

.ui-btn--primary:where(.ui-btn--surface) {
    --ui-btn-bg: var(--accent-a1);
    --ui-btn-bg-hover: var(--accent-a2)
}

.ui-btn--reverse {
    --ui-btn-bg: var(--gray-12);
    --ui-btn-bg-hover: color-mix(in var(--ui-space), var(--gray-11), var(--gray-12));
    --ui-btn-color: var(--gray-0);
    --ui-btn-outline-color: var(--gray-a12)
}

.ui-btn--reverse:where(.ui-btn--outline, .ui-btn--surface, .ui-btn--soft, .ui-btn--ghost, .ui-btn--link) {
    --ui-btn-color: var(--gray-a12);
    --ui-btn-outline-color: var(--gray-a6)
}

.ui-btn--reverse:where(.ui-btn--outline, .ui-btn--surface) {
    --ui-btn-border-color: var(--gray-a5)
}

.ui-btn--reverse:where(.ui-btn--outline, .ui-btn--ghost) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: var(--gray-a1)
}

.ui-btn--reverse:where(.ui-btn--link) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: transparent;
    --ui-btn-color-hover: var(--gray-a11)
}

.ui-btn--reverse:where(.ui-btn--soft) {
    --ui-btn-bg: var(--gray-a3);
    --ui-btn-bg-hover: var(--gray-a4)
}

.ui-btn--reverse:where(.ui-btn--surface) {
    --ui-btn-bg: var(--gray-a1);
    --ui-btn-bg-hover: var(--gray-a2)
}

.ui-btn--secondary {
    --ui-btn-bg: var(--gray-9);
    --ui-btn-bg-hover: var(--gray-10);
    --ui-btn-color: #fff;
    --ui-btn-outline-color: var(--gray-a9)
}

.ui-btn--secondary:where(.ui-btn--outline, .ui-btn--surface, .ui-btn--soft, .ui-btn--ghost, .ui-btn--link) {
    --ui-btn-color: var(--gray-a11);
    --ui-btn-outline-color: var(--gray-a6)
}

.ui-btn--secondary:where(.ui-btn--outline, .ui-btn--surface) {
    --ui-btn-border-color: var(--gray-a5)
}

.ui-btn--secondary:where(.ui-btn--outline, .ui-btn--ghost) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: var(--gray-a1)
}

.ui-btn--secondary:where(.ui-btn--link) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: transparent;
    --ui-btn-color-hover: var(--gray-a12)
}

.ui-btn--secondary:where(.ui-btn--soft) {
    --ui-btn-bg: var(--gray-a3);
    --ui-btn-bg-hover: var(--gray-a4)
}

.ui-btn--secondary:where(.ui-btn--surface) {
    --ui-btn-bg: var(--gray-a1);
    --ui-btn-bg-hover: var(--gray-a2)
}

.ui-btn--success {
    --ui-btn-bg: var(--success-9);
    --ui-btn-bg-hover: var(--success-10);
    --ui-btn-color: #fff;
    --ui-btn-outline-color: var(--success-a9)
}

.ui-btn--success:where(.ui-btn--outline, .ui-btn--surface, .ui-btn--soft, .ui-btn--ghost, .ui-btn--link) {
    --ui-btn-color: var(--success-a11);
    --ui-btn-outline-color: var(--success-a6)
}

.ui-btn--success:where(.ui-btn--outline, .ui-btn--surface) {
    --ui-btn-border-color: var(--success-a5)
}

.ui-btn--success:where(.ui-btn--outline, .ui-btn--ghost) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: var(--success-a1)
}

.ui-btn--success:where(.ui-btn--link) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: transparent;
    --ui-btn-color-hover: var(--success-a12)
}

.ui-btn--success:where(.ui-btn--soft) {
    --ui-btn-bg: var(--success-a3);
    --ui-btn-bg-hover: var(--success-a4)
}

.ui-btn--success:where(.ui-btn--surface) {
    --ui-btn-bg: var(--success-a1);
    --ui-btn-bg-hover: var(--success-a2)
}

.ui-btn--warning {
    --ui-btn-bg: var(--warning-9);
    --ui-btn-bg-hover: var(--warning-10);
    --ui-btn-color: #000;
    --ui-btn-outline-color: var(--warning-a9)
}

.ui-btn--warning:where(.ui-btn--outline, .ui-btn--surface, .ui-btn--soft, .ui-btn--ghost, .ui-btn--link) {
    --ui-btn-color: var(--warning-a11);
    --ui-btn-outline-color: var(--warning-a6)
}

.ui-btn--warning:where(.ui-btn--outline, .ui-btn--surface) {
    --ui-btn-border-color: var(--warning-a5)
}

.ui-btn--warning:where(.ui-btn--outline, .ui-btn--ghost) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: var(--warning-a1)
}

.ui-btn--warning:where(.ui-btn--link) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: transparent;
    --ui-btn-color-hover: var(--warning-a12)
}

.ui-btn--warning:where(.ui-btn--soft) {
    --ui-btn-bg: var(--warning-a3);
    --ui-btn-bg-hover: var(--warning-a4)
}

.ui-btn--warning:where(.ui-btn--surface) {
    --ui-btn-bg: var(--warning-a1);
    --ui-btn-bg-hover: var(--warning-a2)
}

.ui-btn--white {
    --ui-btn-bg: var(--gray-12-dark);
    --ui-btn-bg-hover: color-mix(in var(--ui-space), var(--gray-a11-dark), var(--gray-12-dark));
    --ui-btn-color: var(--gray-0-dark);
    --ui-btn-outline-color: var(--gray-a12-dark)
}

.ui-btn--white:where(.ui-btn--outline, .ui-btn--surface, .ui-btn--soft, .ui-btn--ghost, .ui-btn--link) {
    --ui-btn-color: var(--gray-a12-dark);
    --ui-btn-outline-color: var(--gray-a6-dark)
}

.ui-btn--white:where(.ui-btn--outline, .ui-btn--surface) {
    --ui-btn-border-color: var(--gray-a5-dark)
}

.ui-btn--white:where(.ui-btn--outline, .ui-btn--ghost) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: var(--gray-a1-dark)
}

.ui-btn--white:where(.ui-btn--link) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: transparent;
    --ui-btn-color-hover: var(--gray-a11-dark)
}

.ui-btn--white:where(.ui-btn--soft) {
    --ui-btn-bg: var(--gray-a3-dark);
    --ui-btn-bg-hover: var(--gray-a4-dark)
}

.ui-btn--white:where(.ui-btn--surface) {
    --ui-btn-bg: var(--gray-a1-dark);
    --ui-btn-bg-hover: var(--gray-a2-dark)
}

.ui-btn--black {
    --ui-btn-bg: var(--gray-a12-light);
    --ui-btn-bg-hover: color-mix(in var(--ui-space), var(--gray-a11-light), var(--gray-a12-light));
    --ui-btn-outline-color: var(--gray-a12-light);
    --ui-btn-color: #fff
}

.ui-btn--black:where(.ui-btn--outline, .ui-btn--surface, .ui-btn--soft, .ui-btn--ghost, .ui-btn--link) {
    --ui-btn-color: var(--gray-a12-light);
    --ui-btn-outline-color: var(--gray-a6-light)
}

.ui-btn--black:where(.ui-btn--outline, .ui-btn--surface) {
    --ui-btn-border-color: var(--gray-a5-light)
}

.ui-btn--black:where(.ui-btn--link) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: transparent;
    --ui-btn-color-hover: var(--gray-a11-light)
}

.ui-btn--black:where(.ui-btn--outline, .ui-btn--ghost) {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: var(--gray-a1-light)
}

.ui-btn--black:where(.ui-btn--soft) {
    --ui-btn-bg: var(--gray-a3-light);
    --ui-btn-bg-hover: var(--gray-a4-light)
}

.ui-btn--black:where(.ui-btn--surface) {
    --ui-btn-bg: var(--gray-a1-light);
    --ui-btn-bg-hover: var(--gray-a2-light)
}

.ui-dialog {
    --ui-dialog-color: var(--ui-panel-color);
    --ui-dialog-bg: var(--ui-panel-bg);
    --ui-dialog-border-style: var(--ui-panel-border-style);
    --ui-dialog-border-width: var(--ui-panel-border-width);
    --ui-dialog-border-color: var(--ui-panel-border-color);
    --ui-dialog-outline: var(--ui-panel-outline);
    --ui-dialog-outline-offset: var(--ui-panel-outline-offset);
    --ui-dialog-shadow: var(--shadow-lg);
    --ui-dialog-padding-x: 1.75rem;
    --ui-dialog-padding-y: 1.5rem;
    --ui-dialog-size: fit-content;
    --ui-dialog-size-xs: 16rem;
    --ui-dialog-size-sm: 20rem;
    --ui-dialog-size-md: 28rem;
    --ui-dialog-size-lg: 36rem;
    --ui-dialog-border-radius: var(--radius-lg);
    --ui-dialog-boundary-offset-top: var(--ui-boundary-offset-top);
    --ui-dialog-boundary-offset-end: var(--ui-boundary-offset-end);
    --ui-dialog-boundary-offset-bottom: var(--ui-boundary-offset-bottom);
    --ui-dialog-boundary-offset-start: var(--ui-boundary-offset-start);
    --ui-dialog-title-font-size: var(--text-md);
    --ui-dialog-title-font-weight: 600;
    --ui-dialog-title-margin-bottom: 0.5rem;
    --ui-dialog-description-font-size: var(--text-sm);
    --ui-dialog-btns-margin-top: 1rem;
    --ui-dialog-btns-gap: 0.5rem;
    --ui-dialog-header-gap: 0.75rem;
    --ui-dialog-header-padding-bottom: 0.5rem;
    --ui-dialog-footer-padding-top: 1rem;
    --ui-dialog-close-offset-top: 0.75rem;
    --ui-dialog-close-offset-end: 0.75rem;
    --ui-dialog-slide-size: 2rem;
    --ui-dialog-drawer-slide-size: 50%
}

.ui-dialog-backdrop,
.ui-dialog-root::backdrop,
.ui-dialog::backdrop {
    background: var(--ui-backdrop-bg);
    opacity: 0;
    transition: opacity var(--duration-3) var(--ease-3), visibility var(--duration-3) var(--ease-3)
}

.ui-dialog,
.ui-dialog-root {
    display: block;
    inset: 0;
    outline: none;
    position: fixed;
    z-index: var(--ui-top-layer-z-index)
}

.ui-dialog-root--absolute,
:where(.ui-dialog-root) .ui-dialog {
    position: absolute
}

.ui-dialog-root {
    overflow: hidden
}

.ui-dialog-root:where(:not(.ui-modal)) {
    pointer-events: none
}

:where(.ui-dialog-root.ui-modal>.ui-dialog-backdrop:not([inert])),
:where(.ui-dialog-root>:not(.ui-dialog-backdrop)) {
    pointer-events: auto
}

.ui-dialog {
    --ui-dialog-animation-enter: var(--animation-scale-in-up), var(--animation-fade-in);
    --ui-dialog-animation-leave: var(--animation-scale-out-down), var(--animation-fade-out);
    --slide-size: var(--ui-dialog-slide-size);
    background-color: var(--ui-dialog-bg);
    border-color: var(--ui-dialog-border-color);
    border-radius: var(--ui-dialog-border-radius);
    border-style: var(--ui-dialog-border-style);
    border-width: var(--ui-dialog-border-width);
    box-shadow: var(--ui-dialog-shadow);
    color: var(--ui-dialog-color);
    display: block;
    height: fit-content;
    inset: var(--ui-dialog-boundary-offset-top) var(--ui-dialog-boundary-offset-end) var(--ui-dialog-boundary-offset-bottom) var(--ui-dialog-boundary-offset-start);
    margin: auto;
    max-height: calc(100% - var(--ui-dialog-boundary-offset-top) - var(--ui-dialog-boundary-offset-bottom));
    max-width: calc(100% - var(--ui-dialog-boundary-offset-start) - var(--ui-dialog-boundary-offset-end));
    overflow-y: auto;
    padding: var(--ui-dialog-padding-y) var(--ui-dialog-padding-x);
    transform-origin: var(--ui-dialog-origin-x, center) var(--ui-dialog-origin-y, center);
    width: var(--ui-dialog-size)
}

.ui-dialog-root:focus-visible :where(.ui-dialog),
.ui-dialog:focus-visible {
    outline: var(--ui-dialog-outline);
    outline-offset: var(--ui-dialog-outline-offset)
}

.ui-dialog--no-backdrop,
.ui-dialog:where(:not(.ui-dialog-root)>:not(.ui-modal), .ui-dialog-root:not(.ui-modal)>*) {
    border-style: solid
}

.ui-dialog--no-backdrop::backdrop,
.ui-dialog:where(:not(.ui-dialog-root)>:not(.ui-modal), .ui-dialog-root:not(.ui-modal)>*)::backdrop {
    display: none
}

:is(.ui-dialog-root, .ui-has-backdrop)::backdrop {
    display: none
}

.ui-dialog-backdrop {
    inset: 0;
    position: fixed;
    visibility: hidden;
    z-index: calc(var(--ui-top-layer-z-index) - 1)
}

:where(.ui-dialog-root) .ui-dialog-backdrop {
    position: absolute;
    z-index: -1
}

.ui-dialog-backdrop.ui-active,
:where(.ui-dialog).ui-active::backdrop {
    opacity: 1;
    visibility: visible
}

.ui-dialog-title {
    font-size: var(--ui-dialog-title-font-size);
    font-weight: var(--ui-dialog-title-font-weight);
    margin-bottom: var(--ui-dialog-title-margin-bottom)
}

.ui-dialog-description {
    font-size: var(--ui-dialog-description-font-size)
}

.ui-dialog-btns {
    gap: var(--ui-dialog-btns-gap);
    justify-content: flex-end;
    margin-top: var(--ui-dialog-btns-margin-top)
}

.ui-dialog-btns,
.ui-dialog-header {
    align-items: center;
    display: flex
}

.ui-dialog-header {
    gap: var(--ui-dialog-header-gap);
    padding: var(--ui-dialog-padding-y) var(--ui-dialog-padding-x) var(--ui-dialog-header-padding-bottom)
}

.ui-dialog-footer {
    padding: var(--ui-dialog-footer-padding-top) var(--ui-dialog-padding-x) var(--ui-dialog-padding-y)
}

.ui-dialog-footer :where(.ui-dialog-btns) {
    margin-top: 0
}

.ui-dialog:where(:has(>:is(.ui-dialog-body, .ui-dialog-header, .ui-dialog-footer), >.ui-dialog-safe-area>:is(.ui-dialog-body, .ui-dialog-header, .ui-dialog-footer))) {
    display: flex;
    flex-direction: column;
    padding: 0
}

.ui-dialog-body {
    flex-grow: 1;
    overflow: auto;
    padding: var(--ui-dialog-padding-y) var(--ui-dialog-padding-x);
    position: relative
}

.ui-dialog-body:where(.ui-dialog-header~*) {
    padding-top: 0
}

.ui-dialog-body:where(:has(~.ui-dialog-footer)) {
    padding-bottom: 0
}

.ui-dialog-safe-area {
    display: contents
}

.ui-dialog-close {
    inset-inline-end: var(--ui-dialog-close-offset-end);
    position: absolute;
    top: var(--ui-dialog-close-offset-top)
}

:where(.ui-dialog-header) .ui-dialog-title {
    margin-bottom: 0
}

:where(.ui-dialog-header) .ui-dialog-btns {
    margin-left: auto
}

:where(.ui-dialog-header) .ui-dialog-close:where(:last-child) {
    inset: auto;
    margin-inline-end: calc(var(--ui-btn-icon-size) - var(--ui-btn-size));
    margin-inline-start: auto;
    position: relative
}

:where(.ui-dialog-header) .ui-dialog-close:where(:first-child) {
    inset: auto;
    margin-inline-start: calc(var(--ui-btn-icon-size) - var(--ui-btn-size));
    position: relative
}

.ui-dialog-autohide-progress {
    background-color: var(--ui-dialog-border-color);
    flex-shrink: 0;
    height: .125rem;
    position: absolute
}

.ui-dialog-autohide-progress:before {
    background-color: red;
    content: "";
    display: block;
    height: 100%;
    width: calc(100%*var(--ui-autohide-progress))
}

:is(.ui-dialog--start, .ui-dialog--top-start, .ui-dialog--bottom-start) {
    inset-inline-end: auto;
    margin-inline-end: var(--ui-dialog-boundary-offset-end);
    --ui-dialog-origin-x: calc(100%*var(--rtl, 0))
}

:is(.ui-dialog--start, .ui-dialog--top-start, .ui-dialog--bottom-start):where(.ui-dialog--no-boundary-offset) {
    border-end-start-radius: 0;
    border-inline-start-width: 0;
    border-start-start-radius: 0;
    inset-inline-start: 0;
    margin-inline-end: 0
}

:is(.ui-dialog--end, .ui-dialog--top-end, .ui-dialog--bottom-end) {
    inset-inline-start: auto;
    margin-inline-start: var(--ui-dialog-boundary-offset-start);
    --ui-dialog-origin-x: calc(100% - 100%*var(--rtl, 0))
}

:is(.ui-dialog--end, .ui-dialog--top-end, .ui-dialog--bottom-end):where(.ui-dialog--no-boundary-offset) {
    border-end-end-radius: 0;
    border-inline-end-width: 0;
    border-start-end-radius: 0;
    inset-inline-end: 0;
    margin-inline-start: 0
}

:is(.ui-dialog--top, .ui-dialog--top-start, .ui-dialog--top-end) {
    bottom: auto;
    margin-bottom: var(--ui-dialog-boundary-offset-bottom);
    --ui-dialog-origin-y: top
}

:is(.ui-dialog--top, .ui-dialog--top-start, .ui-dialog--top-end):where(.ui-dialog--no-boundary-offset) {
    border-start-end-radius: 0;
    border-start-start-radius: 0;
    border-top-width: 0;
    margin-bottom: 0;
    top: 0
}

:is(.ui-dialog--bottom, .ui-dialog--bottom-start, .ui-dialog--bottom-end) {
    margin-top: var(--ui-dialog-boundary-offset-top);
    top: auto;
    --ui-dialog-origin-y: bottom
}

:is(.ui-dialog--bottom, .ui-dialog--bottom-start, .ui-dialog--bottom-end):where(.ui-dialog--no-boundary-offset) {
    border-bottom-width: 0;
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    bottom: 0;
    margin-top: 0
}

.ui-dialog--drawer {
    border-radius: 0;
    --slide-size: var(--ui-dialog-drawer-slide-size)
}

.ui-dialog--drawer:where(.ui-dialog--start, .ui-dialog--end) {
    height: 100%;
    max-height: none;
    width: var(--ui-dialog-size)
}

.ui-dialog--drawer:where(.ui-dialog--top, .ui-dialog--bottom) {
    height: var(--ui-dialog-size);
    max-width: none;
    width: 100%
}

.ui-dialog--drawer:where(.ui-dialog--start) {
    border-block-width: 0;
    border-inline-width: 0 var(--ui-dialog-border-width);
    inset: 0;
    inset-inline-end: auto;
    margin-bottom: 0;
    margin-top: 0;
    max-height: none;
    --ui-dialog-animation-enter: var(--animation-slide-in-end), var(--animation-fade-in);
    --ui-dialog-animation-leave: var(--animation-slide-out-start), var(--animation-fade-out)
}

.ui-dialog--drawer:where(.ui-dialog--end) {
    border-block-width: 0;
    border-inline-width: var(--ui-dialog-border-width) 0;
    inset: 0;
    inset-inline-start: auto;
    margin-bottom: 0;
    margin-top: 0;
    max-height: none;
    --ui-dialog-animation-enter: var(--animation-slide-in-start), var(--animation-fade-in);
    --ui-dialog-animation-leave: var(--animation-slide-out-end), var(--animation-fade-out)
}

.ui-dialog--drawer:where(.ui-dialog--top) {
    border-width: 0 0 var(--ui-dialog-border-width);
    inset: 0;
    bottom: auto;
    margin-bottom: var(--ui-dialog-boundary-offset-top);
    margin-inline-end: 0;
    margin-inline-start: 0;
    --ui-dialog-animation-enter: var(--animation-slide-in-down), var(--animation-fade-in);
    --ui-dialog-animation-leave: var(--animation-slide-out-up), var(--animation-fade-out)
}

.ui-dialog--drawer:where(.ui-dialog--bottom) {
    border-width: var(--ui-dialog-border-width) 0 0;
    inset: 0;
    margin-top: var(--ui-dialog-boundary-offset-top);
    margin-inline-end: 0;
    margin-inline-start: 0;
    top: auto;
    --ui-dialog-animation-enter: var(--animation-slide-in-up), var(--animation-fade-in);
    --ui-dialog-animation-leave: var(--animation-slide-out-down), var(--animation-fade-out)
}

.ui-dialog--xs {
    --ui-dialog-size: var(--ui-dialog-size-xs)
}

.ui-dialog--sm {
    --ui-dialog-size: var(--ui-dialog-size-sm)
}

.ui-dialog--md {
    --ui-dialog-size: var(--ui-dialog-size-md)
}

.ui-dialog--lg {
    --ui-dialog-size: var(--ui-dialog-size-lg)
}

.ui-prevent-scroll :where(.ui-dialog-init:not(.ui-prevents-scroll)>.ui-dialog, .ui-dialog-init:not(.ui-prevents-scroll).ui-dialog):where(.ui-root-relative:not(.ui-dialog--drawer, .ui-dialog--no-boundary-offset)) {
    right: calc(var(--ui-root-scrollbar-width) + var(--ui-dialog-boundary-offset-end, 0))
}

.ui-dialog--fullscreen {
    border-radius: 0;
    border-width: 0;
    height: auto;
    inset: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    width: auto
}

.ui-dialog--fullscreen::backdrop {
    display: none
}

.ui-dialog--full-width {
    width: 100%
}

.ui-dialog--full-height {
    height: 100%
}

@media (prefers-reduced-motion:no-preference) {
    .ui-dialog.ui-dismiss-prevented {
        animation: var(--animation-spring)
    }

    .ui-dialog--animate-prevent-hide.ui-hide-prevented {
        animation: var(--animation-shake-x)
    }

    .ui-dialog:where(.ui-enter-active) {
        animation: var(--ui-dialog-animation-enter)
    }

    .ui-dialog:where(.ui-leave-active) {
        animation: var(--ui-dialog-animation-leave)
    }
}

.ui-popover {
    --ui-popover-color: var(--ui-panel-color);
    --ui-popover-bg: var(--ui-panel-bg);
    --ui-popover-border-style: var(--ui-panel-border-style);
    --ui-popover-border-width: var(--ui-panel-border-width);
    --ui-popover-border-color: var(--ui-panel-border-color);
    --ui-popover-outline: var(--ui-panel-outline);
    --ui-popover-outline-offset: var(--ui-panel-outline-offset);
    --ui-popover-shadow: var(--shadow-lg);
    --ui-popover-padding-x: 1.5rem;
    --ui-popover-padding-y: 1.25rem;
    --ui-popover-size: max-content;
    --ui-popover-size-sm: 20rem;
    --ui-popover-size-md: 25rem;
    --ui-popover-size-lg: 30rem;
    --ui-popover-border-radius: var(--radius);
    --ui-popover-boundary-offset-top: var(--ui-boundary-offset-top);
    --ui-popover-boundary-offset-end: var(--ui-boundary-offset-end);
    --ui-popover-boundary-offset-bottom: var(--ui-boundary-offset-bottom);
    --ui-popover-boundary-offset-start: var(--ui-boundary-offset-start);
    --ui-popover-flip: 1;
    --ui-popover-sticky: 1;
    --ui-popover-shrink: 1;
    --ui-popover-offset: 0.75rem;
    --ui-popover-arrow-width: 0.75rem;
    --ui-popover-arrow-height: 0.75rem;
    --ui-popover-title-font-size: var(--text-md);
    --ui-popover-title-font-weight: 600;
    --ui-popover-title-margin-bottom: 0.25rem;
    --ui-popover-description-font-size: var(--text-sm);
    --ui-popover-btns-margin-top: 1rem;
    --ui-popover-btns-gap: 0.5rem;
    --ui-popover-header-gap: 0.75rem;
    --ui-popover-header-padding-bottom: 0.25rem;
    --ui-popover-footer-padding-top: 1rem;
    --ui-popover-close-offset-top: 0.75rem;
    --ui-popover-close-offset-end: 0.75rem;
    --ui-popover-slide-size: 2rem;
    --ui-popover-drawer-slide-size: 50%;
    --ui-popover-transition-duration: var(--duration-2)
}

.ui-popover::backdrop {
    --ui-popover-backdrop-bg: var(--ui-backdrop-bg);
    --ui-popover-backdrop-light-bg: var(--ui-backdrop-light-bg);
    --ui-popover-backdrop-transition: opacity var(--duration-2) var(--ease-3)
}

.ui-popover {
    --ui-popover-boundary-offset: var(--ui-popover-boundary-offset-top) var(--ui-popover-boundary-offset-end) var(--ui-popover-boundary-offset-bottom) var(--ui-popover-boundary-offset-start);
    background-color: var(--ui-popover-bg);
    border-color: var(--ui-popover-border-color);
    border-radius: var(--radius);
    border-style: var(--ui-popover-border-style);
    border-width: var(--ui-popover-border-width);
    box-shadow: var(--ui-popover-shadow);
    color: var(--ui-popover-color);
    max-width: var(--ui-floating-available-width, calc(100svw - var(--ui-popover-boundary-offset-start) - var(--ui-popover-boundary-offset-end)));
    padding: var(--ui-popover-padding-y) var(--ui-popover-padding-x);
    width: var(--ui-popover-size)
}

.ui-popover:focus-visible {
    outline: var(--ui-popover-outline);
    outline-offset: var(--ui-popover-outline-offset)
}

.ui-popover:where(:not(.ui-modal))::backdrop {
    background: var(--ui-popover-backdrop-light-bg)
}

.ui-popover:where(.ui-popover--no-backdrop)::backdrop {
    display: none
}

.ui-popover:where(:has(>.ui-popover-body)) {
    display: flex;
    flex-direction: column;
    padding: 0
}

.ui-popover:after {
    border: var(--ui-popover-border-width) var(--ui-popover-border-style) var(--ui-popover-border-color);
    height: var(--ui-popover-arrow-height);
    width: var(--ui-popover-arrow-width)
}

.ui-popover-header {
    align-items: center;
    display: flex;
    gap: var(--ui-popover-header-gap);
    padding: var(--ui-popover-padding-y) var(--ui-popover-padding-x) var(--ui-popover-header-padding-bottom)
}

.ui-popover-body {
    flex-grow: 1;
    overflow: auto;
    padding: var(--ui-popover-padding-y) var(--ui-popover-padding-x);
    position: relative
}

.ui-popover-body:where(.ui-popover-header~*) {
    padding-top: 0
}

.ui-popover-body:where(:has(~.ui-popover-footer)) {
    padding-bottom: 0
}

.ui-popover-close {
    inset-inline-end: var(--ui-popover-close-offset-end);
    position: absolute;
    top: var(--ui-popover-close-offset-top)
}

.ui-popover-title {
    font-size: var(--ui-popover-title-font-size);
    font-weight: var(--ui-popover-title-font-weight);
    margin-bottom: var(--ui-popover-title-margin-bottom)
}

.ui-popover-description {
    font-size: var(--ui-popover-description-font-size)
}

.ui-popover-btns {
    align-items: center;
    display: flex;
    gap: var(--ui-popover-btns-gap);
    justify-content: flex-end;
    margin-top: var(--ui-popover-btns-margin-top)
}

.ui-popover-footer {
    padding: var(--ui-popover-footer-padding-top) var(--ui-popover-padding-x) var(--ui-popover-padding-y)
}

.ui-popover-footer :where(.ui-popover-btns) {
    margin-top: 0
}

:where(.ui-popover-header) .ui-popover-title {
    margin-bottom: 0
}

:where(.ui-popover-header) .ui-popover-close:where(:last-child) {
    inset: auto;
    margin-inline-start: auto;
    position: relative
}

:where(.ui-popover-header) .ui-popover-close:where(:first-child) {
    inset: auto;
    position: relative
}

.ui-popover:where([data-ui-current-placement=dialog]) {
    inset: var(--ui-popover-boundary-offset-top) var(--ui-popover-boundary-offset-end) var(--ui-popover-boundary-offset-bottom) var(--ui-popover-boundary-offset-start);
    max-height: calc(100% - var(--ui-popover-boundary-offset-top) - var(--ui-popover-boundary-offset-bottom))
}

.ui-popover::backdrop {
    background-color: var(--ui-popover-backdrop-light-bg)
}

.ui-popover.ui-modal::backdrop {
    background-color: var(--ui-popover-backdrop-bg)
}

.ui-popover:where(.ui-light-dismiss-prevent, .ui-back-dismiss-prevent) {
    animation: backdropPreventHide var(--duration-3) var(--ease-3);
    animation-direction: alternate
}

@media (prefers-reduced-motion:no-preference) {
    .ui-popover::backdrop {
        transition: var(--ui-popover-backdrop-transition)
    }

    .ui-popover.ui-enter-active {
        animation: var(--animation-fade-in), var(--animation-scale-in-up);
        animation-duration: var(--ui-popover-transition-duration)
    }

    .ui-popover.ui-leave-active {
        animation: var(--animation-fade-out), var(--animation-scale-out-down);
        animation-duration: var(--ui-popover-transition-duration)
    }
}

.ui-popover--sm {
    --ui-popover-size: var(--ui-popover-size-sm)
}

.ui-popover--md {
    --ui-popover-size: var(--ui-popover-size-md)
}

.ui-popover--lg {
    --ui-popover-size: var(--ui-popover-size-lg)
}

.ui-dropdown {
    --ui-dropdown-color: var(--ui-panel-color);
    --ui-dropdown-bg: var(--ui-panel-bg);
    --ui-dropdown-border-style: var(--ui-panel-border-style);
    --ui-dropdown-border-width: var(--ui-panel-border-width);
    --ui-dropdown-border-color: var(--ui-panel-border-color);
    --ui-dropdown-outline: var(--ui-panel-outline);
    --ui-dropdown-outline-offset: var(--ui-panel-outline-offset);
    --ui-dropdown-shadow: var(--shadow-lg);
    --ui-dropdown-border-radius: var(--radius);
    --ui-dropdown-flip: 1;
    --ui-dropdown-sticky: 1;
    --ui-dropdown-shrink: 1;
    --ui-dropdown-offset: 0.75rem;
    --ui-dropdown-arrow-width: 0.75rem;
    --ui-dropdown-arrow-height: 0.75rem;
    --ui-dropdown-boundary-offset-top: var(--ui-boundary-offset-top);
    --ui-dropdown-boundary-offset-end: var(--ui-boundary-offset-end);
    --ui-dropdown-boundary-offset-bottom: var(--ui-boundary-offset-bottom);
    --ui-dropdown-boundary-offset-start: var(--ui-boundary-offset-start);
    --ui-dropdown-padding: 0.325rem;
    --ui-dropdown-transition-duration: var(--duration-2);
    --ui-dropdown-item-padding: 0.25rem 0.75rem;
    --ui-dropdown-item-border-radius: var(--radius-sm);
    --ui-dropdown-item-hover-bg: var(--gray-a2);
    --ui-dropdown-item-outline-color: var(--gray-9)
}

.ui-dropdown::backdrop {
    --ui-dropdown-backdrop-bg: var(--ui-backdrop-bg);
    --ui-dropdown-backdrop-light-bg: var(--ui-backdrop-light-bg);
    --ui-dropdown-backdrop-transition: opacity var(--duration-2) var(--ease-3)
}

.ui-dropdown {
    background-color: var(--ui-dropdown-bg);
    border: var(--ui-dropdown-border-width) var(--ui-dropdown-border-style) var(--ui-dropdown-border-color);
    border-radius: var(--radius);
    box-shadow: var(--ui-dropdown-shadow);
    color: var(--ui-dropdown-color);
    padding: var(--ui-dropdown-padding);
    --ui-dropdown-boundary-offset: var(--ui-dropdown-boundary-offset-top) var(--ui-dropdown-boundary-offset-end) var(--ui-dropdown-boundary-offset-bottom) var(--ui-dropdown-boundary-offset-start);
    max-width: var(--ui-floating-available-width, calc(100svw - var(--ui-dropdown-boundary-offset-start) - var(--ui-dropdown-boundary-offset-end)))
}

.ui-dropdown:after {
    border: var(--ui-dropdown-border-width) var(--ui-dropdown-border-style) var(--ui-dropdown-border-color);
    height: var(--ui-dropdown-arrow-height);
    width: var(--ui-dropdown-arrow-width)
}

.ui-dropdown-item {
    border-radius: var(--ui-dropdown-item-border-radius);
    display: block;
    padding: var(--ui-dropdown-item-padding);
    text-align: left;
    width: 100%
}

.ui-dropdown-item:hover {
    background: var(--ui-dropdown-item-hover-bg)
}

.ui-dropdown-item:focus-visible {
    outline-color: var(--ui-dropdown-item-outline-color);
    outline-style: solid
}

.ui-dropdown:where([data-ui-current-placement=dialog]) {
    inset: var(--ui-dropdown-boundary-offset-top) var(--ui-dropdown-boundary-offset-end) var(--ui-dropdown-boundary-offset-bottom) var(--ui-dropdown-boundary-offset-start);
    max-height: calc(100% - var(--ui-dropdown-boundary-offset-top) - var(--ui-dropdown-boundary-offset-bottom))
}

.ui-dropdown::backdrop {
    background-color: var(--ui-dropdown-backdrop-light-bg)
}

.ui-dropdown[data-dropdown-current-options~=modal]::backdrop {
    background-color: var(--ui-dropdown-backdrop-bg)
}

@media (prefers-reduced-motion:no-preference) {
    .ui-dropdown::backdrop {
        transition: var(--ui-dropdown-backdrop-transition)
    }

    .ui-dropdown:where(.ui-enter-active) {
        animation: var(--animation-fade-in), var(--animation-scale-in-up);
        animation-duration: var(--ui-dropdown-transition-duration)
    }

    .ui-dropdown:where(.ui-leave-active) {
        animation: var(--animation-fade-out), var(--animation-scale-out-down);
        animation-duration: var(--ui-dropdown-transition-duration)
    }
}

.ui-tooltip {
    --ui-tooltip-color: var(--gray-0);
    --ui-tooltip-bg: var(--gray-12);
    --ui-tooltip-border-style: var(--ui-panel-border-style);
    --ui-tooltip-border-width: 0;
    --ui-tooltip-border-color: var(--ui-panel-border-color);
    --ui-tooltip-outline: var(--ui-panel-outline);
    --ui-tooltip-outline-offset: var(--ui-panel-outline-offset);
    --ui-tooltip-font-size: var(--text-xs);
    --ui-tooltip-shadow: var(--shadow);
    --ui-tooltip-padding: 0.25rem 0.5rem;
    --ui-tooltip-border-radius: var(--radius-sm);
    --ui-tooltip-boundary-offset-top: var(--ui-boundary-offset-top);
    --ui-tooltip-boundary-offset-end: var(--ui-boundary-offset-end);
    --ui-tooltip-boundary-offset-bottom: var(--ui-boundary-offset-bottom);
    --ui-tooltip-boundary-offset-start: var(--ui-boundary-offset-start);
    --ui-tooltip-arrow-width: 0.5rem;
    --ui-tooltip-arrow-height: 0.5rem;
    --ui-tooltip-flip: 1;
    --ui-tooltip-sticky: 1;
    --ui-tooltip-placement: top;
    --ui-tooltip-offset: 0.5rem;
    --ui-tooltip-transition-duration: var(--duration-2);
    background-color: var(--ui-tooltip-bg);
    border: var(--ui-tooltip-border-width) var(--ui-tooltip-border-style) var(--ui-tooltip-border-color);
    border-radius: var(--ui-tooltip-border-radius);
    box-shadow: var(--ui-tooltip-shadow);
    color: var(--ui-tooltip-color);
    font-size: var(--ui-tooltip-font-size);
    padding: var(--ui-tooltip-padding);
    --ui-tooltip-boundary-offset: var(--ui-tooltip-boundary-offset-top) var(--ui-tooltip-boundary-offset-end) var(--ui-tooltip-boundary-offset-bottom) var(--ui-tooltip-boundary-offset-start);
    max-width: var(--ui-floating-available-width, calc(100svw - var(--ui-tooltip-boundary-offset-start) - var(--ui-tooltip-boundary-offset-end)))
}

.ui-tooltip:after {
    border: inherit;
    height: var(--ui-tooltip-arrow-height);
    width: var(--ui-tooltip-arrow-width)
}

@media (prefers-reduced-motion:no-preference) {
    .ui-tooltip:where(.ui-enter-active) {
        animation: var(--animation-fade-in), var(--animation-scale-in-up);
        animation-duration: var(--ui-tooltip-transition-duration)
    }

    .ui-tooltip:where(.ui-leave-active) {
        animation: var(--animation-fade-out), var(--animation-scale-out-down);
        animation-duration: var(--ui-tooltip-transition-duration)
    }
}

.ui-toasts {
    --ui-toasts-z-index: var(--ui-top-layer-z-index, 999);
    --ui-toasts-boundary-offset-top: var(--ui-boundary-offset-top, 0);
    --ui-toasts-boundary-offset-end: var(--ui-boundary-offset-end, 0);
    --ui-toasts-boundary-offset-bottom: var(--ui-boundary-offset-bottom, 0);
    --ui-toasts-boundary-offset-start: var(--ui-boundary-offset-start, 0);
    --ui-toasts-gap: 0.375rem
}

.ui-toast {
    --ui-toast-radius: var(--radius);
    --ui-toast-padding: 0.75rem 0.875rem;
    --ui-toast-font-size: var(--text-sm);
    --ui-toast-font-weight: 500;
    --ui-toast-gap: 0.5rem;
    --ui-toast-color: var(--ui-panel-color);
    --ui-toast-bg: var(--ui-panel-bg);
    --ui-toast-border-width: var(--ui-panel-border-width);
    --ui-toast-border-style: solid;
    --ui-toast-border-color: var(--ui-panel-border-color);
    --ui-toast-outline: var(--ui-panel-outline);
    --ui-toast-outline-offset: var(--ui-panel-outline-offset);
    --ui-toast-ui-btn-close-size: 1.25rem;
    --ui-toast-progress-height: 2px;
    --ui-toast-progress-opacity: 0.15;
    --ui-toast-progress-bg: currentColor;
    --ui-toast-icon: var(--ui-icon-check);
    --ui-toast-icon-color: currentColor;
    --ui-toast-backdrop-filter: blur(0.375rem);
    --ui-toast-close-margin: 0 -0.25rem
}

.ui-toasts {
    display: flex;
    flex-direction: column;
    gap: var(--ui-toasts-gap);
    inset: var(--ui-toasts-boundary-offset-top) var(--ui-toasts-boundary-offset-end) var(--ui-toasts-boundary-offset-bottom) var(--ui-toasts-boundary-offset-start);
    pointer-events: none;
    position: fixed;
    z-index: var(--ui-toasts-z-index)
}

.ui-toasts::backdrop {
    display: none
}

.ui-toast {
    align-items: center;
    animation-timing-function: var(--ease-in-out-3);
    backdrop-filter: var(--ui-toast-backdrop-filter);
    background: var(--ui-toast-bg);
    border-color: var(--ui-toast-border-color);
    border-radius: var(--ui-toast-radius);
    border-style: var(--ui-toast-border-style);
    border-width: var(--ui-toast-border-width);
    box-shadow: var(--shadow-lg);
    color: var(--ui-toast-color);
    display: flex;
    flex-shrink: 0;
    font-size: var(--ui-toast-font-size);
    font-weight: var(--ui-toast-font-weight);
    gap: var(--ui-toast-gap);
    justify-content: space-between;
    overflow: hidden;
    padding: var(--ui-toast-padding);
    pointer-events: auto;
    position: relative;
    width: fit-content
}

.ui-toast .ui-btn-close {
    --ui-btn-icon-size: var(--ui-toast-ui-btn-close-size);
    margin: var(--ui-toast-close-margin)
}

.ui-toast-progress {
    bottom: 0;
    height: var(--ui-toast-progress-height);
    left: 0;
    opacity: var(--ui-toast-progress-opacity);
    position: absolute;
    right: 0
}

.ui-toast-progress:before {
    background: var(--ui-toast-progress-bg);
    content: "";
    display: block;
    height: 100%;
    width: calc(100%*var(--ui-autohide-progress))
}

:where(.ui-prevent-scroll) .ui-toasts {
    right: calc(var(--ui-root-scrollbar-width) + var(--ui-toasts-boundary-offset-end, 0))
}

.ui-toast-icon {
    aspect-ratio: 1;
    background-color: var(--ui-toast-icon-color);
    flex-shrink: 0;
    mask-image: var(--ui-toast-icon);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 1.5rem
}

.ui-toast--danger {
    --ui-toast-icon: var(--ui-icon-not-allowed);
    --ui-toast-color: var(--danger-12);
    --ui-toast-bg: var(--danger-3);
    --ui-toast-bg: linear-gradient(var(--gradient-angle-to-end), var(--danger-3), color-mix(in var(--ui-space), var(--danger-3) 50%, oklch(0 0 var(--danger-hue)/0)));
    --ui-toast-border-color: var(--danger-3);
    --ui-toast-border-style: solid
}

.ui-toast--danger ::selection {
    background: var(--danger-a4);
    color: var(--danger-12)
}

.ui-toast--success {
    --ui-toast-icon: var(--ui-icon-check-circle);
    --ui-toast-color: var(--success-12);
    --ui-toast-bg: var(--success-3);
    --ui-toast-bg: linear-gradient(var(--gradient-angle-to-end), var(--success-3), color-mix(in var(--ui-space), var(--success-3) 50%, oklch(0 0 var(--success-hue)/0)));
    --ui-toast-border-color: var(--success-3);
    --ui-toast-border-style: solid
}

.ui-toast--success ::selection {
    background: var(--success-a4);
    color: var(--success-12)
}

.ui-toast--warning {
    --ui-toast-icon: var(--ui-icon-warning);
    --ui-toast-color: var(--warning-12);
    --ui-toast-bg: var(--warning-3);
    --ui-toast-bg: linear-gradient(var(--gradient-angle-to-end), var(--warning-3), color-mix(in var(--ui-space), var(--warning-3) 50%, oklch(0 0 var(--warning-hue)/0)));
    --ui-toast-border-color: var(--warning-3);
    --ui-toast-border-style: solid
}

.ui-toast--warning ::selection {
    background: var(--warning-a4);
    color: var(--warning-12)
}

.ui-toast--info {
    --ui-toast-icon: var(--ui-icon-info-circle);
    --ui-toast-color: var(--info-12);
    --ui-toast-bg: var(--info-3);
    --ui-toast-bg: linear-gradient(var(--gradient-angle-to-end), var(--info-3), color-mix(in var(--ui-space), var(--info-3) 50%, oklch(0 0 var(--info-hue)/0)));
    --ui-toast-border-color: var(--info-3);
    --ui-toast-border-style: solid
}

.ui-toast--info ::selection {
    background: var(--info-a4);
    color: var(--info-12)
}

:is(.ui-toasts--start, .ui-toasts--top-start, .ui-toasts--bottom-start) {
    inset-inline-end: auto
}

:is(.ui-toasts--end, .ui-toasts--top-end, .ui-toasts--bottom-end) {
    align-items: flex-end;
    inset-inline-start: auto
}

:is(.ui-toasts--top, .ui-toasts--bottom) {
    align-items: center
}

:is(.ui-toasts--bottom, .ui-toasts--bottom-start, .ui-toasts--bottom-end) {
    top: auto
}

:is(.ui-toasts--top, .ui-toasts--top-start, .ui-toasts--top-end) {
    bottom: auto
}

:is(.ui-toasts--bottom-end, .ui-toasts--top-end, .ui-toasts--end) :where(.ui-toast) {
    --toast-animation-enter: var(--animation-slide-in-start), var(--animation-fade-in);
    --toast-animation-leave: var(--animation-slide-out-end), var(--animation-fade-out)
}

:is(.ui-toasts--bottom-start, .ui-toasts--top-start, .ui-toasts--start) :where(.ui-toast) {
    --toast-animation-enter: var(--animation-slide-in-end), var(--animation-fade-in);
    --toast-animation-leave: var(--animation-slide-out-start), var(--animation-fade-out)
}

.ui-toasts--bottom :where(.ui-toast) {
    --toast-animation-enter: var(--animation-slide-in-up), var(--animation-fade-in);
    --toast-animation-leave: var(--animation-slide-out-down), var(--animation-fade-out)
}

.ui-toasts--top :where(.ui-toast) {
    --toast-animation-enter: var(--animation-slide-in-down), var(--animation-fade-in);
    --toast-animation-leave: var(--animation-slide-out-up), var(--animation-fade-out)
}

@media (prefers-reduced-motion:no-preference) {
    .ui-toast:where(.ui-enter-active) {
        animation: var(--toast-animation-enter)
    }

    .ui-toast:where(.ui-leave-active) {
        animation: var(--toast-animation-leave)
    }
}

.ui-accordion {
    --ui-accordion-bg: transparent;
    --ui-accordion-gap: 0.375rem;
    --ui-accordion-header-bg: var(--gray-a1);
    --ui-accordion-header-hover-bg: var(--gray-a2);
    --ui-accordion-header-open-color: var(--gray-12);
    --ui-accordion-header-open-bg: var(--gray-a1);
    --ui-accordion-header-open-bg-hover: var(--gray-a2);
    --ui-accordion-header-padding: 0.75rem 0.75rem 0.75rem 1rem;
    --ui-accordion-header-font-size: var(--text-sm);
    --ui-accordion-header-font-weight: 500;
    --ui-accordion-outline: 2px solid var(--gray-11);
    --ui-accordion-outline-offset: -2px;
    --ui-accordion-arrow-size: 1.375rem;
    --ui-accordion-arrow-icon: var(--ui-icon-chevron-down);
    --ui-accordion-body-padding: 1rem;
    --ui-accordion-border-width: 0;
    --ui-accordion-border-style: var(--ui-border-style);
    --ui-accordion-border-color: var(--ui-border-color);
    --ui-accordion-border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: var(--ui-accordion-gap)
}

.ui-accordion-header {
    align-items: center;
    background-color: var(--ui-accordion-header-bg);
    border-radius: var(--ui-accordion-border-radius);
    display: flex;
    font-size: var(--ui-accordion-header-font-size);
    font-weight: var(--ui-accordion-header-font-weight);
    justify-content: space-between;
    outline: none;
    padding: var(--ui-accordion-header-padding);
    text-align: left;
    transition-duration: var(--duration-1);
    transition-property: var(--transition-property);
    transition-timing-function: var(--ease-3);
    width: 100%
}

.ui-accordion-header:after {
    aspect-ratio: 1;
    background-color: currentColor;
    content: "";
    display: block;
    mask-image: var(--ui-accordion-arrow-icon);
    mask-size: contain;
    width: var(--ui-accordion-arrow-size)
}

@media (prefers-reduced-motion:no-preference) {
    .ui-accordion-header:after {
        transition-duration: var(--duration-3);
        transition-property: var(--transition-property);
        transition-timing-function: var(--ease-3)
    }
}

.ui-accordion-header:hover {
    background-color: var(--ui-accordion-header-hover-bg)
}

.ui-accordion-header:where(.ui-active) {
    background-color: var(--ui-accordion-header-open-bg);
    color: var(--ui-accordion-header-open-color)
}

.ui-accordion-header:where(.ui-active):hover {
    background-color: var(--ui-accordion-header-open-bg-hover)
}

.ui-accordion-header:where(.ui-active):after {
    scale: 1 -1
}

.ui-accordion-item {
    background: var(--ui-accordion-bg);
    border-color: var(--ui-accordion-border-color);
    border-radius: var(--ui-accordion-border-radius);
    border-style: var(--ui-accordion-border-style);
    border-width: var(--ui-accordion-border-width);
    outline-color: transparent
}

.ui-accordion-item:where(:has(.ui-accordion-header:focus-visible)) {
    outline: var(--ui-accordion-outline);
    outline-offset: var(--ui-accordion-outline-offset)
}

.ui-accordion-body {
    border-top: var(--ui-accordion-border-width) var(--ui-accordion-border-style) var(--ui-accordion-border-color);
    padding: var(--ui-accordion-body-padding)
}

.ui-accordion--outlined {
    --ui-accordion-border-width: var(--ui-border-width)
}

.ui-accordion--outlined :where(.ui-accordion-item) {
    border-radius: var(--ui-accordion-border-radius);
    overflow: hidden
}

.ui-accordion--outlined :where(.ui-accordion-header) {
    border-radius: 0
}

.ui-accordion--no-radius {
    --ui-accordion-border-radius: 0
}

.ui-tabs {
    --ui-tabs-bg: transparent;
    --ui-tabs-height: var(--ui-size-lg);
    --ui-tabs-border-width: 0;
    --ui-tabs-border-style: var(--ui-border-style);
    --ui-tabs-border-color: var(--ui-border-color);
    --ui-tabs-border-radius: var(--radius);
    --ui-tabs-padding: 0.25rem;
    --ui-tab-font-size: var(--text-sm);
    --ui-tab-font-weight: 500;
    --ui-tab-color: var(--gray-11);
    --ui-tab-hover-color: var(--gray-12);
    --ui-tab-current-color: var(--gray-12);
    --ui-tab-current-bg: var(--gray-a2);
    --ui-tab-padding: 0 1rem;
    --ui-tab-border-radius: calc(var(--radius) - 0.25rem);
    background-color: var(--ui-tabs-bg);
    border: var(--ui-tabs-border-width) var(--ui-tabs-border-style) var(--ui-tabs-border-color);
    border-radius: var(--ui-tabs-border-radius);
    display: flex;
    height: var(--ui-tabs-height);
    justify-content: center;
    padding: var(--ui-tabs-padding)
}

.ui-tabs-tab {
    border-radius: var(--ui-tab-border-radius);
    color: var(--ui-tab-color);
    flex-grow: 1;
    font-size: var(--ui-tab-font-size);
    font-weight: var(--ui-tab-font-weight);
    padding: var(--ui-tab-padding);
    position: relative;
    transition-duration: var(--duration-1);
    transition-property: var(--transition-property);
    transition-timing-function: var(--ease-3)
}

.ui-tabs-tab:hover {
    color: var(--ui-tab-hover-color)
}

.ui-tabs-tab.ui-active {
    background-color: var(--ui-tab-current-bg);
    color: var(--ui-tab-current-color);
    pointer-events: none
}

.ui-tabs--sm {
    --ui-tabs-height: var(--ui-size-md);
    --ui-tab-font-size: var(--text-xs);
    --ui-tab-padding: 0 0.75rem
}

.ui-tabs--outlined {
    --ui-tabs-bg: var(--ui-main-bg);
    --ui-tabs-border-width: var(--ui-border-width)
}

.ui-tabs--no-radius {
    --ui-tabs-padding: 0;
    --ui-tabs-border-radius: 0;
    --ui-tab-border-radius: 0
}

.ui-checkbox {
    --ui-checkbox-bg: var(--ui-control-bg);
    --ui-checkbox-color: #fff;
    --ui-checkbox-border-style: var(--ui-control-border-style);
    --ui-checkbox-border-width: var(--ui-control-border-width);
    --ui-checkbox-border-color: var(--ui-control-border-color);
    --ui-checkbox-border-color-hover: var(--ui-control-border-color-hover);
    --ui-checkbox-border-color-focus: var(--ui-control-border-color-focus);
    --ui-checkbox-border-radius: var(--radius-xs);
    --ui-checkbox-outline-width: 0.25rem;
    --ui-checkbox-outline-color: var(--accent-a6);
    --ui-checkbox-outline-offset: -1px;
    --ui-checkbox-checked-bg: var(--accent-9);
    --ui-checkbox-checked-bg-hover: var(--accent-10);
    --ui-checkbox-checked-border-color: var(--accent-9);
    --ui-checkbox-checked-border-color-hover: var(--accent-10);
    --ui-checkbox-icon: var(--ui-icon-check);
    --ui-checkbox-size: 1rem;
    appearance: none;
    aspect-ratio: 1;
    background: var(--ui-checkbox-bg);
    background-size: contain;
    border-color: var(--ui-checkbox-border-color);
    border-radius: var(--ui-checkbox-border-radius);
    border-width: var(--ui-checkbox-border-width);
    color: var(--ui-checkbox-color);
    flex-shrink: 0;
    height: fit-content;
    outline: var(--ui-checkbox-outline-width) transparent solid;
    position: relative;
    transition-duration: var(--duration-1);
    transition-property: var(--transition-property);
    transition-timing-function: var(--ease-3);
    width: var(--ui-checkbox-size)
}

.ui-checkbox:hover {
    border-color: var(--ui-checkbox-border-color-hover);
    cursor: pointer
}

.ui-checkbox:focus-visible {
    border-color: var(--ui-checkbox-border-color-focus);
    outline-color: var(--ui-checkbox-outline-color);
    outline-offset: var(--ui-checkbox-outline-offset)
}

.ui-checkbox:is(:checked, [aria-checked=true]) {
    background-color: var(--ui-checkbox-checked-bg);
    border-color: var(--ui-checkbox-checked-bg)
}

.ui-checkbox:is(:checked, [aria-checked=true]):hover {
    background-color: var(--ui-checkbox-checked-bg-hover);
    border-color: var(--ui-checkbox-checked-bg-hover)
}

.ui-checkbox:is(:checked, [aria-checked=true]):before {
    background-color: currentColor;
    content: "";
    display: block;
    inset: 0;
    mask-image: var(--ui-checkbox-icon);
    mask-position: center;
    mask-size: contain;
    position: absolute
}

.ui-radio {
    --ui-radio-bg: var(--ui-control-bg);
    --ui-radio-color: #fff;
    --ui-radio-border-style: var(--ui-control-border-style);
    --ui-radio-border-width: var(--ui-control-border-width);
    --ui-radio-border-color: var(--ui-control-border-color);
    --ui-radio-border-color-hover: var(--ui-control-border-color-hover);
    --ui-radio-border-color-focus: var(--ui-control-border-color-focus);
    --ui-radio-border-radius: 50%;
    --ui-radio-outline-width: 0.25rem;
    --ui-radio-outline-color: var(--accent-a6);
    --ui-radio-outline-offset: -1px;
    --ui-radio-checked-bg: var(--accent-9);
    --ui-radio-checked-bg-hover: var(--accent-10);
    --ui-radio-checked-border-color: var(--accent-9);
    --ui-radio-checked-border-color-hover: var(--accent-10);
    --ui-radio-icon: var(--ui-icon-check);
    --ui-radio-size: 1rem;
    align-items: center;
    appearance: none;
    aspect-ratio: 1;
    background: var(--ui-radio-bg);
    background-size: contain;
    border-color: var(--ui-radio-border-color);
    border-radius: var(--ui-radio-border-radius);
    border-width: var(--ui-radio-border-width);
    color: var(--ui-radio-color);
    display: flex;
    flex-shrink: 0;
    height: fit-content;
    justify-content: center;
    outline: var(--ui-radio-outline-width) transparent solid;
    position: relative;
    transition-duration: var(--duration-1);
    transition-property: var(--transition-property);
    transition-timing-function: var(--ease-3);
    width: var(--ui-radio-size)
}

.ui-radio:hover {
    border-color: var(--ui-radio-border-color-hover);
    cursor: pointer
}

.ui-radio:focus-visible {
    border-color: var(--ui-radio-border-color-focus);
    outline-color: var(--ui-radio-outline-color);
    outline-offset: var(--ui-radio-outline-offset)
}

.ui-radio:is(:checked, [aria-checked=true]) {
    background-color: var(--ui-radio-checked-bg);
    border-color: var(--ui-radio-checked-bg)
}

.ui-radio:is(:checked, [aria-checked=true]):hover {
    background-color: var(--ui-radio-checked-bg-hover);
    border-color: var(--ui-radio-checked-bg-hover)
}

.ui-radio:is(:checked, [aria-checked=true]):before {
    aspect-ratio: 1;
    background-color: currentColor;
    border-radius: 50%;
    content: "";
    display: block;
    position: absolute;
    width: calc(var(--ui-radio-size) - .5rem)
}

.ui-alert {
    --ui-alert-gap: 0.75rem;
    --ui-alert-padding-y: 1rem;
    --ui-alert-padding-x: 1rem;
    --ui-alert-font-size: var(--text-sm);
    --ui-alert-border-radius: var(--radius);
    --ui-alert-bg: transparent;
    --ui-alert-color: inherit;
    --ui-alert-border-width: 1px;
    --ui-alert-border-style: solid;
    --ui-alert-border-color: transparent;
    --ui-alert-ui-btn-close-margin: 0 -0.25rem;
    align-items: center;
    background: var(--ui-alert-bg);
    border: var(--ui-alert-border-width) var(--ui-alert-border-style) var(--ui-alert-border-color);
    border-radius: var(--ui-alert-border-radius);
    color: var(--ui-alert-color);
    display: flex;
    font-size: var(--ui-alert-font-size);
    gap: var(--ui-alert-gap);
    padding: var(--ui-alert-padding-y) var(--ui-alert-padding-x);
    position: relative;
    width: fit-content
}

.ui-alert :where(.ui-btn-close) {
    margin: var(--ui-alert-ui-btn-close-margin)
}

.ui-alert-inner:where(:first-child) {
    padding-left: calc(var(--ui-alert-gap)/2)
}

.ui-alert-inner:where(:last-child) {
    padding-right: calc(var(--ui-alert-gap)/2)
}

.ui-alert--primary {
    --ui-alert-bg: var(--accent-a2);
    --ui-alert-color: var(--accent-a11)
}

.ui-alert--primary ::selection {
    background: var(--accent-a4);
    color: var(--accent-a12)
}

.ui-alert--primary:where(.ui-alert--surface) {
    --ui-alert-bg: var(--accent-a1);
    --ui-alert-border-color: var(--accent-a6)
}

.ui-alert--primary:where(.ui-alert--outline) {
    --ui-alert-bg: transparent;
    --ui-alert-border-color: var(--accent-a6)
}

.ui-alert--primary:where(.ui-alert--high-contrast) {
    --ui-alert-color: var(--accent-a12)
}

.ui-alert--danger {
    --ui-alert-bg: var(--danger-a2);
    --ui-alert-color: var(--danger-a11)
}

.ui-alert--danger ::selection {
    background: var(--danger-a4);
    color: var(--danger-a12)
}

.ui-alert--danger:where(.ui-alert--surface) {
    --ui-alert-bg: var(--danger-a1);
    --ui-alert-border-color: var(--danger-a6)
}

.ui-alert--danger:where(.ui-alert--outline) {
    --ui-alert-bg: transparent;
    --ui-alert-border-color: var(--danger-a6)
}

.ui-alert--danger:where(.ui-alert--high-contrast) {
    --ui-alert-color: var(--danger-a12)
}

.ui-alert--info {
    --ui-alert-bg: var(--info-a2);
    --ui-alert-color: var(--info-a11)
}

.ui-alert--info ::selection {
    background: var(--info-a4);
    color: var(--info-a12)
}

.ui-alert--info:where(.ui-alert--surface) {
    --ui-alert-bg: var(--info-a1);
    --ui-alert-border-color: var(--info-a6)
}

.ui-alert--info:where(.ui-alert--outline) {
    --ui-alert-bg: transparent;
    --ui-alert-border-color: var(--info-a6)
}

.ui-alert--info:where(.ui-alert--high-contrast) {
    --ui-alert-color: var(--info-a12)
}

.ui-alert--secondary {
    --ui-alert-bg: var(--gray-a2);
    --ui-alert-color: var(--gray-a11)
}

.ui-alert--secondary ::selection {
    background: var(--gray-a4);
    color: var(--gray-a12)
}

.ui-alert--secondary:where(.ui-alert--surface) {
    --ui-alert-bg: var(--gray-a1);
    --ui-alert-border-color: var(--gray-a6)
}

.ui-alert--secondary:where(.ui-alert--outline) {
    --ui-alert-bg: transparent;
    --ui-alert-border-color: var(--gray-a6)
}

.ui-alert--secondary:where(.ui-alert--high-contrast) {
    --ui-alert-color: var(--gray-a12)
}

.ui-alert--success {
    --ui-alert-bg: var(--success-a2);
    --ui-alert-color: var(--success-a11)
}

.ui-alert--success ::selection {
    background: var(--success-a4);
    color: var(--success-a12)
}

.ui-alert--success:where(.ui-alert--surface) {
    --ui-alert-bg: var(--success-a1);
    --ui-alert-border-color: var(--success-a6)
}

.ui-alert--success:where(.ui-alert--outline) {
    --ui-alert-bg: transparent;
    --ui-alert-border-color: var(--success-a6)
}

.ui-alert--success:where(.ui-alert--high-contrast) {
    --ui-alert-color: var(--success-a12)
}

.ui-alert--warning {
    --ui-alert-bg: var(--warning-a2);
    --ui-alert-color: var(--warning-a11)
}

.ui-alert--warning ::selection {
    background: var(--warning-a4);
    color: var(--warning-a12)
}

.ui-alert--warning:where(.ui-alert--surface) {
    --ui-alert-bg: var(--warning-a1);
    --ui-alert-border-color: var(--warning-a6)
}

.ui-alert--warning:where(.ui-alert--outline) {
    --ui-alert-bg: transparent;
    --ui-alert-border-color: var(--warning-a6)
}

.ui-alert--warning:where(.ui-alert--high-contrast) {
    --ui-alert-color: var(--warning-a12)
}

/*# sourceMappingURL=jolty-ui.min.css.map */