@layer reset, base, tokens, recipes, utilities;

body::-webkit-scrollbar {
    background-color: #fff;
    width: 16px
}

body::-webkit-scrollbar-track {
    background-color: #fff
}

body::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 16px;
    border: 4px solid #fff
}

body::-webkit-scrollbar-button {
    display: none
}

@layer reset {
    * {
        margin: 0;
        padding: 0;
        font: inherit
    }

    *,
    :after,
    :before {
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        border-color: var(--global-color-border, currentColor)
    }

    html {
        line-height: 1.5;
        --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -moz-tab-size: 4;
        tab-size: 4;
        font-family: var(--global-font-body, var(--font-fallback))
    }

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

    body {
        height: 100%;
        line-height: inherit
    }

    img {
        border-style: none
    }

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

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

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        overflow-wrap: break-word
    }

    ol,
    ul {
        list-style: none
    }

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

    button,
    input,
    optgroup,
    select,
    textarea {
        color: inherit
    }

    button,
    select {
        text-transform: none
    }

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

    input::placeholder,
    textarea::placeholder {
        opacity: 1;
        color: var(--global-color-placeholder, #9ca3af)
    }

    textarea {
        resize: vertical
    }

    summary {
        display: list-item
    }

    small {
        font-size: 80%
    }

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

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    dialog {
        padding: 0
    }

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

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

    b,
    strong {
        font-weight: bolder
    }

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

    input[type=email],
    input[type=password],
    input[type=search],
    input[type=text] {
        -webkit-appearance: none;
        -moz-appearance: none
    }

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

    ::-webkit-search-cancel-button,
    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

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

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        height: auto
    }

    input[type=number] {
        -moz-appearance: textfield
    }

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

    :-moz-focusring {
        outline: auto
    }

    [hidden] {
        display: none !important
    }
}

@layer base {
    :root {
        --made-with-panda: "🐼"
    }

    *,
    ::backdrop,
    :after,
    :before {
        --blur: ;
        --brightness: ;
        --contrast: ;
        --grayscale: ;
        --hue-rotate: ;
        --invert: ;
        --saturate: ;
        --sepia: ;
        --drop-shadow: ;
        --backdrop-blur: ;
        --backdrop-brightness: ;
        --backdrop-contrast: ;
        --backdrop-grayscale: ;
        --backdrop-hue-rotate: ;
        --backdrop-invert: ;
        --backdrop-opacity: ;
        --backdrop-saturate: ;
        --backdrop-sepia: ;
        --scroll-snap-strictness: proximity;
        --border-spacing-x: 0;
        --border-spacing-y: 0;
        --translate-x: 0;
        --translate-y: 0;
        --rotate: 0;
        --skew-x: 0;
        --skew-y: 0;
        --scale-x: 1;
        --scale-y: 1
    }

    em {
        font-style: italic
    }

    h1 {
        font-size: 1.5em
    }

    h1,
    h2 {
        margin-bottom: .5em !important;
        margin-top: .5em !important;
        font-weight: var(--font-weights-bold)
    }

    h2 {
        font-size: 1.2em
    }

    h3 {
        font-size: 1.1em
    }

    h3,
    h4 {
        margin-bottom: .5em;
        margin-top: .5em !important;
        font-weight: var(--font-weights-bold)
    }

    h4 {
        font-size: 1em
    }

    h5 {
        font-size: .83em
    }

    h5,
    h6 {
        margin-bottom: .5em;
        margin-top: .5em !important;
        font-weight: var(--font-weights-bold)
    }

    h6 {
        font-size: .67em
    }

    p {
        margin-bottom: 1em
    }

    strong {
        font-weight: var(--font-weights-bold)
    }

    blockquote {
        font-style: italic;
        border-left: 4px solid #ccc;
        padding-left: 16px;
        margin: 1em 0
    }

    ol {
        list-style-type: auto
    }

    ol,
    ul {
        padding-left: 2em;
        margin-bottom: 1em
    }

    ul {
        list-style-type: disc
    }

    ol ul,
    ul ul {
        list-style-type: circle
    }

    ol ul ul,
    ul ul ul {
        list-style-type: square
    }

    ol ul ul ul,
    ul ul ul ul {
        list-style-type: disc
    }

    code {
        background: #ededffbd !important
    }

    pre {
        background: #f4f4f4;
        padding: 10px;
        overflow-x: auto;
        margin-bottom: 1em
    }

    a {
        color: #007ee5;
        text-decoration: none
    }

    a:hover {
        text-decoration: underline
    }

    hr {
        border: 0;
        border-bottom: 1px solid #ccc;
        margin: 20px 0
    }

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

    .rpv-core__textbox {
        font-size: 1em;
        text-align: center;
        height: 100% !important;
        width: 90% !important
    }

    mjx-container[jax=SVG][display=true] {
        margin: .5rem 0 !important
    }

    mark {
        background-color: #007ee5 !important
    }

    html {
        line-height: 1.5;
        text-rendering: optimizeLegibility
    }

    html MozOsxFontSmoothing {
        line-height: grayscale
    }

    html WebkitFontSmoothing {
        text-rendering: antialiased
    }

    html WebkitTextSizeAdjust {
        text-rendering: 100%
    }

    body {
        background: var(--colors-bg-canvas);
        color: var(--colors-fg-default)
    }

    .dark body,
    body.dark {
        color-scheme: dark
    }

    *,
    :after,
    :before {
        border-color: var(--colors-border-subtle);
        border-style: solid;
        box-sizing: border-box
    }

    ::placeholder {
        opacity: 1;
        color: var(--colors-fg-subtle)
    }

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

@layer tokens {
    :where(:root, :host) {
        --animations-backdrop-in: fade-in 250ms var(--easings-emphasized-in);
        --animations-backdrop-out: fade-out 200ms var(--easings-emphasized-out);
        --animations-dialog-in: slide-in 400ms var(--easings-emphasized-in);
        --animations-dialog-out: slide-out 200ms var(--easings-emphasized-out);
        --animations-drawer-in-left: slide-in-left 400ms var(--easings-emphasized-in);
        --animations-drawer-out-left: slide-out-left 200ms var(--easings-emphasized-out);
        --animations-drawer-in-right: slide-in-right 400ms var(--easings-emphasized-in);
        --animations-drawer-out-right: slide-out-right 200ms var(--easings-emphasized-out);
        --animations-skeleton-pulse: skeleton-pulse 2s var(--easings-pulse) infinite;
        --animations-fade-in: fade-in 400ms var(--easings-emphasized-in);
        --animations-collapse-in: collapse-in 250ms var(--easings-emphasized-in);
        --animations-collapse-out: collapse-out 200ms var(--easings-emphasized-out);
        --blurs-sm: 4px;
        --blurs-base: 8px;
        --blurs-md: 12px;
        --blurs-lg: 16px;
        --blurs-xl: 24px;
        --blurs-2xl: 40px;
        --blurs-3xl: 64px;
        --borders-none: none;
        --durations-fastest: 50ms;
        --durations-faster: 100ms;
        --durations-fast: 150ms;
        --durations-normal: 200ms;
        --durations-slow: 300ms;
        --durations-slower: 400ms;
        --durations-slowest: 500ms;
        --easings-pulse: cubic-bezier(0.4, 0.0, 0.6, 1.0);
        --easings-default: cubic-bezier(0.2, 0.0, 0, 1.0);
        --easings-emphasized-in: cubic-bezier(0.05, 0.7, 0.1, 1.0);
        --easings-emphasized-out: cubic-bezier(0.3, 0.0, 0.8, 0.15);
        --fonts-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --fonts-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
        --fonts-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --font-sizes-2xs: 0.5rem;
        --font-sizes-xs: 0.75rem;
        --font-sizes-sm: 0.875rem;
        --font-sizes-md: 1rem;
        --font-sizes-lg: 1.125rem;
        --font-sizes-xl: 1.25rem;
        --font-sizes-2xl: 1.5rem;
        --font-sizes-3xl: 1.875rem;
        --font-sizes-4xl: 2.25rem;
        --font-sizes-5xl: 3rem;
        --font-sizes-6xl: 3.75rem;
        --font-sizes-7xl: 4.5rem;
        --font-sizes-8xl: 6rem;
        --font-sizes-9xl: 8rem;
        --font-weights-thin: 100;
        --font-weights-extralight: 200;
        --font-weights-light: 300;
        --font-weights-normal: 400;
        --font-weights-medium: 500;
        --font-weights-semibold: 600;
        --font-weights-bold: 700;
        --font-weights-extrabold: 800;
        --font-weights-black: 900;
        --letter-spacings-tighter: -0.05em;
        --letter-spacings-tight: -0.025em;
        --letter-spacings-normal: 0em;
        --letter-spacings-wide: 0.025em;
        --letter-spacings-wider: 0.05em;
        --letter-spacings-widest: 0.1em;
        --line-heights-none: 1;
        --line-heights-tight: 1.25;
        --line-heights-normal: 1.5;
        --line-heights-relaxed: 1.75;
        --line-heights-loose: 2;
        --radii-none: 0;
        --radii-2xs: 0.0625rem;
        --radii-xs: 0.125rem;
        --radii-sm: 0.25rem;
        --radii-md: 0.375rem;
        --radii-lg: 0.5rem;
        --radii-xl: 0.75rem;
        --radii-2xl: 1rem;
        --radii-3xl: 1.5rem;
        --radii-full: 9999px;
        --sizes-0: 0rem;
        --sizes-1: 0.25rem;
        --sizes-2: 0.5rem;
        --sizes-3: 0.75rem;
        --sizes-4: 1rem;
        --sizes-5: 1.25rem;
        --sizes-6: 1.5rem;
        --sizes-7: 1.75rem;
        --sizes-8: 2rem;
        --sizes-9: 2.25rem;
        --sizes-10: 2.5rem;
        --sizes-11: 2.75rem;
        --sizes-12: 3rem;
        --sizes-14: 3.5rem;
        --sizes-16: 4rem;
        --sizes-20: 5rem;
        --sizes-24: 6rem;
        --sizes-28: 7rem;
        --sizes-32: 8rem;
        --sizes-36: 9rem;
        --sizes-40: 10rem;
        --sizes-44: 11rem;
        --sizes-48: 12rem;
        --sizes-52: 13rem;
        --sizes-56: 14rem;
        --sizes-60: 15rem;
        --sizes-64: 16rem;
        --sizes-72: 18rem;
        --sizes-80: 20rem;
        --sizes-96: 24rem;
        --sizes-0\.5: 0.125rem;
        --sizes-1\.5: 0.375rem;
        --sizes-2\.5: 0.625rem;
        --sizes-3\.5: 0.875rem;
        --sizes-4\.5: 1.125rem;
        --sizes-2xs: 16rem;
        --sizes-xs: 20rem;
        --sizes-sm: 24rem;
        --sizes-md: 28rem;
        --sizes-lg: 32rem;
        --sizes-xl: 36rem;
        --sizes-2xl: 42rem;
        --sizes-3xl: 48rem;
        --sizes-4xl: 56rem;
        --sizes-5xl: 64rem;
        --sizes-6xl: 72rem;
        --sizes-7xl: 80rem;
        --sizes-8xl: 90rem;
        --sizes-full: 100%;
        --sizes-min: min-content;
        --sizes-max: max-content;
        --sizes-fit: fit-content;
        --sizes-breakpoint-sm: 640px;
        --sizes-breakpoint-md: 768px;
        --sizes-breakpoint-lg: 1024px;
        --sizes-breakpoint-xl: 1280px;
        --sizes-breakpoint-2xl: 1536px;
        --spacing-0: 0rem;
        --spacing-1: 0.25rem;
        --spacing-2: 0.5rem;
        --spacing-3: 0.75rem;
        --spacing-4: 1rem;
        --spacing-5: 1.25rem;
        --spacing-6: 1.5rem;
        --spacing-7: 1.75rem;
        --spacing-8: 2rem;
        --spacing-9: 2.25rem;
        --spacing-10: 2.5rem;
        --spacing-11: 2.75rem;
        --spacing-12: 3rem;
        --spacing-14: 3.5rem;
        --spacing-16: 4rem;
        --spacing-20: 5rem;
        --spacing-24: 6rem;
        --spacing-28: 7rem;
        --spacing-32: 8rem;
        --spacing-36: 9rem;
        --spacing-40: 10rem;
        --spacing-44: 11rem;
        --spacing-48: 12rem;
        --spacing-52: 13rem;
        --spacing-56: 14rem;
        --spacing-60: 15rem;
        --spacing-64: 16rem;
        --spacing-72: 18rem;
        --spacing-80: 20rem;
        --spacing-96: 24rem;
        --spacing-0\.5: 0.125rem;
        --spacing-1\.5: 0.375rem;
        --spacing-2\.5: 0.625rem;
        --spacing-3\.5: 0.875rem;
        --spacing-4\.5: 1.125rem;
        --z-index-hide: -1;
        --z-index-base: 0;
        --z-index-docked: 10;
        --z-index-dropdown: 1000;
        --z-index-sticky: 1100;
        --z-index-banner: 1200;
        --z-index-overlay: 1300;
        --z-index-modal: 1400;
        --z-index-popover: 1500;
        --z-index-skip-link: 1600;
        --z-index-toast: 1700;
        --z-index-tooltip: 1800;
        --colors-current: currentColor;
        --colors-black: #000;
        --colors-black-a1: rgba(0, 0, 0, .05);
        --colors-black-a2: rgba(0, 0, 0, .1);
        --colors-black-a3: rgba(0, 0, 0, .15);
        --colors-black-a4: rgba(0, 0, 0, .2);
        --colors-black-a5: rgba(0, 0, 0, .3);
        --colors-black-a6: rgba(0, 0, 0, .4);
        --colors-black-a7: rgba(0, 0, 0, .5);
        --colors-black-a8: rgba(0, 0, 0, .6);
        --colors-black-a9: rgba(0, 0, 0, .7);
        --colors-black-a10: rgba(0, 0, 0, .8);
        --colors-black-a11: rgba(0, 0, 0, .9);
        --colors-black-a12: rgba(0, 0, 0, .95);
        --colors-white: #fff;
        --colors-white-a1: hsla(0, 0%, 100%, .05);
        --colors-white-a2: hsla(0, 0%, 100%, .1);
        --colors-white-a3: hsla(0, 0%, 100%, .15);
        --colors-white-a4: hsla(0, 0%, 100%, .2);
        --colors-white-a5: hsla(0, 0%, 100%, .3);
        --colors-white-a6: hsla(0, 0%, 100%, .4);
        --colors-white-a7: hsla(0, 0%, 100%, .5);
        --colors-white-a8: hsla(0, 0%, 100%, .6);
        --colors-white-a9: hsla(0, 0%, 100%, .7);
        --colors-white-a10: hsla(0, 0%, 100%, .8);
        --colors-white-a11: hsla(0, 0%, 100%, .9);
        --colors-white-a12: hsla(0, 0%, 100%, .95);
        --colors-transparent: transparent;
        --colors-gray-light-1: #fcfcfc;
        --colors-gray-light-2: #f9f9f9;
        --colors-gray-light-3: #f0f0f0;
        --colors-gray-light-4: #e8e8e8;
        --colors-gray-light-5: #e0e0e0;
        --colors-gray-light-6: #d9d9d9;
        --colors-gray-light-7: #cecece;
        --colors-gray-light-8: #bbb;
        --colors-gray-light-9: #8d8d8d;
        --colors-gray-light-10: #838383;
        --colors-gray-light-11: #646464;
        --colors-gray-light-12: #202020;
        --colors-gray-light-a1: #00000000;
        --colors-gray-light-a2: #00000006;
        --colors-gray-light-a3: #0000000f;
        --colors-gray-light-a4: #00000017;
        --colors-gray-light-a5: #0000001f;
        --colors-gray-light-a6: #00000026;
        --colors-gray-light-a7: #00000031;
        --colors-gray-light-a8: #00000044;
        --colors-gray-light-a9: #00000072;
        --colors-gray-light-a10: #0000007c;
        --colors-gray-light-a11: #0000009b;
        --colors-gray-light-a12: #000000df;
        --colors-gray-dark-1: #111;
        --colors-gray-dark-2: #191919;
        --colors-gray-dark-3: #222;
        --colors-gray-dark-4: #2a2a2a;
        --colors-gray-dark-5: #313131;
        --colors-gray-dark-6: #3a3a3a;
        --colors-gray-dark-7: #484848;
        --colors-gray-dark-8: #606060;
        --colors-gray-dark-9: #6e6e6e;
        --colors-gray-dark-10: #7b7b7b;
        --colors-gray-dark-11: #b4b4b4;
        --colors-gray-dark-12: #eee;
        --colors-gray-dark-a1: #00000000;
        --colors-gray-dark-a2: #ffffff09;
        --colors-gray-dark-a3: #ffffff12;
        --colors-gray-dark-a4: #ffffff1b;
        --colors-gray-dark-a5: #ffffff22;
        --colors-gray-dark-a6: #ffffff2c;
        --colors-gray-dark-a7: #ffffff3b;
        --colors-gray-dark-a8: #ffffff55;
        --colors-gray-dark-a9: #ffffff64;
        --colors-gray-dark-a10: #ffffff72;
        --colors-gray-dark-a11: #ffffffaf;
        --colors-gray-dark-a12: #ffffffed;
        --colors-red-light-1: #fffcfc;
        --colors-red-light-2: #fff7f7;
        --colors-red-light-3: #feebec;
        --colors-red-light-4: #ffdbdc;
        --colors-red-light-5: #ffcdce;
        --colors-red-light-6: #fdbdbe;
        --colors-red-light-7: #f4a9aa;
        --colors-red-light-8: #eb8e90;
        --colors-red-light-9: #e5484d;
        --colors-red-light-10: #dc3e42;
        --colors-red-light-11: #ce2c31;
        --colors-red-light-12: #641723;
        --colors-red-light-a1: #ff000003;
        --colors-red-light-a2: #ff000008;
        --colors-red-light-a3: #f3000d14;
        --colors-red-light-a4: #ff000824;
        --colors-red-light-a5: #ff000632;
        --colors-red-light-a6: #f8000442;
        --colors-red-light-a7: #df000356;
        --colors-red-light-a8: #d2000571;
        --colors-red-light-a9: #db0007b7;
        --colors-red-light-a10: #d10005c1;
        --colors-red-light-a11: #c40006d3;
        --colors-red-light-a12: #55000de8;
        --colors-red-dark-1: #191111;
        --colors-red-dark-2: #201314;
        --colors-red-dark-3: #3b1219;
        --colors-red-dark-4: #500f1c;
        --colors-red-dark-5: #611623;
        --colors-red-dark-6: #72232d;
        --colors-red-dark-7: #8c333a;
        --colors-red-dark-8: #b54548;
        --colors-red-dark-9: #e5484d;
        --colors-red-dark-10: #ec5d5e;
        --colors-red-dark-11: #ff9592;
        --colors-red-dark-12: #ffd1d9;
        --colors-red-dark-a1: #f4121209;
        --colors-red-dark-a2: #f22f3e11;
        --colors-red-dark-a3: #ff173f2d;
        --colors-red-dark-a4: #fe0a3b44;
        --colors-red-dark-a5: #ff204756;
        --colors-red-dark-a6: #ff3e5668;
        --colors-red-dark-a7: #ff536184;
        --colors-red-dark-a8: #ff5d61b0;
        --colors-red-dark-a9: #fe4e54e4;
        --colors-red-dark-a10: #ff6465eb;
        --colors-red-dark-a11: #ff9592;
        --colors-red-dark-a12: #ffd1d9;
        --colors-violet-light-1: #fefefe;
        --colors-violet-light-2: #fbfbfe;
        --colors-violet-light-3: #f0f4ff;
        --colors-violet-light-4: #e6eeff;
        --colors-violet-light-5: #dce8ff;
        --colors-violet-light-6: #cddfff;
        --colors-violet-light-7: #b1ccff;
        --colors-violet-light-8: #94b6f8;
        --colors-violet-light-9: #6493ee;
        --colors-violet-light-10: #487ad8;
        --colors-violet-light-11: #375fa7;
        --colors-violet-light-12: #2c4772;
        --colors-violet-light-a1: #fefefe03;
        --colors-violet-light-a2: #fbfbfe07;
        --colors-violet-light-a3: #f0f4ff0f;
        --colors-violet-light-a4: #e6eeff1b;
        --colors-violet-light-a5: #dce8ff26;
        --colors-violet-light-a6: #cddfff35;
        --colors-violet-light-a7: #b1ccff4a;
        --colors-violet-light-a8: #94b6f866;
        --colors-violet-light-a9: #6493eea9;
        --colors-violet-light-a10: #487ad8b2;
        --colors-violet-light-a11: #375fa7af;
        --colors-violet-light-a12: #2c4772d9;
        --colors-violet-dark-1: #14121f;
        --colors-violet-dark-2: #1b1525;
        --colors-violet-dark-3: #291f43;
        --colors-violet-dark-4: #33255b;
        --colors-violet-dark-5: #3c2e69;
        --colors-violet-dark-6: #473876;
        --colors-violet-dark-7: #56468b;
        --colors-violet-dark-8: #6958ad;
        --colors-violet-dark-9: #6e56cf;
        --colors-violet-dark-10: #7d66d9;
        --colors-violet-dark-11: #baa7ff;
        --colors-violet-dark-12: #e2ddfe;
        --colors-violet-dark-a1: #4422ff0f;
        --colors-violet-dark-a2: #853ff916;
        --colors-violet-dark-a3: #8354fe36;
        --colors-violet-dark-a4: #7d51fd50;
        --colors-violet-dark-a5: #845ffd5f;
        --colors-violet-dark-a6: #8f6cfd6d;
        --colors-violet-dark-a7: #9879ff83;
        --colors-violet-dark-a8: #977dfea8;
        --colors-violet-dark-a9: #8668ffcc;
        --colors-violet-dark-a10: #9176fed7;
        --colors-violet-dark-a11: #baa7ff;
        --colors-violet-dark-a12: #e3deff;
        --colors-neutral-light-1: #fcfcfc;
        --colors-neutral-light-2: #f9f9f9;
        --colors-neutral-light-3: #f0f0f0;
        --colors-neutral-light-4: #e8e8e8;
        --colors-neutral-light-5: #e0e0e0;
        --colors-neutral-light-6: #d9d9d9;
        --colors-neutral-light-7: #cecece;
        --colors-neutral-light-8: #bbb;
        --colors-neutral-light-9: #8d8d8d;
        --colors-neutral-light-10: #838383;
        --colors-neutral-light-11: #646464;
        --colors-neutral-light-12: #202020;
        --colors-neutral-light-a1: #00000003;
        --colors-neutral-light-a2: #00000006;
        --colors-neutral-light-a3: #0000000f;
        --colors-neutral-light-a4: #00000017;
        --colors-neutral-light-a5: #0000001f;
        --colors-neutral-light-a6: #00000026;
        --colors-neutral-light-a7: #00000031;
        --colors-neutral-light-a8: #00000044;
        --colors-neutral-light-a9: #00000072;
        --colors-neutral-light-a10: #0000007c;
        --colors-neutral-light-a11: #0000009b;
        --colors-neutral-light-a12: #000000df;
        --colors-neutral-dark-1: #111;
        --colors-neutral-dark-2: #191919;
        --colors-neutral-dark-3: #222;
        --colors-neutral-dark-4: #2a2a2a;
        --colors-neutral-dark-5: #313131;
        --colors-neutral-dark-6: #3a3a3a;
        --colors-neutral-dark-7: #484848;
        --colors-neutral-dark-8: #606060;
        --colors-neutral-dark-9: #6e6e6e;
        --colors-neutral-dark-10: #7b7b7b;
        --colors-neutral-dark-11: #b4b4b4;
        --colors-neutral-dark-12: #eee;
        --colors-neutral-dark-a1: #00000000;
        --colors-neutral-dark-a2: #ffffff09;
        --colors-neutral-dark-a3: #ffffff12;
        --colors-neutral-dark-a4: #ffffff1b;
        --colors-neutral-dark-a5: #ffffff22;
        --colors-neutral-dark-a6: #ffffff2c;
        --colors-neutral-dark-a7: #ffffff3b;
        --colors-neutral-dark-a8: #ffffff55;
        --colors-neutral-dark-a9: #ffffff64;
        --colors-neutral-dark-a10: #ffffff72;
        --colors-neutral-dark-a11: #ffffffaf;
        --colors-neutral-dark-a12: #ffffffed;
        --colors-quizard-black: #15112b;
        --breakpoints-sm: 640px;
        --breakpoints-md: 768px;
        --breakpoints-lg: 1024px;
        --breakpoints-xl: 1280px;
        --breakpoints-2xl: 1536px;
        --colors-neutral-1: var(--colors-neutral-light-1);
        --colors-neutral-2: var(--colors-neutral-light-2);
        --colors-neutral-3: var(--colors-neutral-light-3);
        --colors-neutral-4: var(--colors-neutral-light-4);
        --colors-neutral-5: var(--colors-neutral-light-5);
        --colors-neutral-6: var(--colors-neutral-light-6);
        --colors-neutral-7: var(--colors-neutral-light-7);
        --colors-neutral-8: var(--colors-neutral-light-8);
        --colors-neutral-9: var(--colors-neutral-light-9);
        --colors-neutral-10: var(--colors-neutral-light-10);
        --colors-neutral-11: var(--colors-neutral-light-11);
        --colors-neutral-12: var(--colors-neutral-light-12);
        --colors-neutral-a1: var(--colors-neutral-light-a1);
        --colors-neutral-a2: var(--colors-neutral-light-a2);
        --colors-neutral-a3: var(--colors-neutral-light-a3);
        --colors-neutral-a4: var(--colors-neutral-light-a4);
        --colors-neutral-a5: var(--colors-neutral-light-a5);
        --colors-neutral-a6: var(--colors-neutral-light-a6);
        --colors-neutral-a7: var(--colors-neutral-light-a7);
        --colors-neutral-a8: var(--colors-neutral-light-a8);
        --colors-neutral-a9: var(--colors-neutral-light-a9);
        --colors-neutral-a10: var(--colors-neutral-light-a10);
        --colors-neutral-a11: var(--colors-neutral-light-a11);
        --colors-neutral-a12: var(--colors-neutral-light-a12);
        --colors-neutral-default: #000;
        --colors-neutral-emphasized: var(--colors-gray-12);
        --colors-neutral-fg: #fff;
        --colors-neutral-text: #000;
        --colors-red-1: var(--colors-red-light-1);
        --colors-red-2: var(--colors-red-light-2);
        --colors-red-3: var(--colors-red-light-3);
        --colors-red-4: var(--colors-red-light-4);
        --colors-red-5: var(--colors-red-light-5);
        --colors-red-6: var(--colors-red-light-6);
        --colors-red-7: var(--colors-red-light-7);
        --colors-red-8: var(--colors-red-light-8);
        --colors-red-9: var(--colors-red-light-9);
        --colors-red-10: var(--colors-red-light-10);
        --colors-red-11: var(--colors-red-light-11);
        --colors-red-12: var(--colors-red-light-12);
        --colors-red-a1: var(--colors-red-light-a1);
        --colors-red-a2: var(--colors-red-light-a2);
        --colors-red-a3: var(--colors-red-light-a3);
        --colors-red-a4: var(--colors-red-light-a4);
        --colors-red-a5: var(--colors-red-light-a5);
        --colors-red-a6: var(--colors-red-light-a6);
        --colors-red-a7: var(--colors-red-light-a7);
        --colors-red-a8: var(--colors-red-light-a8);
        --colors-red-a9: var(--colors-red-light-a9);
        --colors-red-a10: var(--colors-red-light-a10);
        --colors-red-a11: var(--colors-red-light-a11);
        --colors-red-a12: var(--colors-red-light-a12);
        --colors-red-default: var(--colors-red-9);
        --colors-red-emphasized: var(--colors-red-10);
        --colors-red-fg: #fff;
        --colors-red-text: var(--colors-red-a11);
        --colors-violet-1: var(--colors-violet-light-1);
        --colors-violet-2: var(--colors-violet-light-2);
        --colors-violet-3: var(--colors-violet-light-3);
        --colors-violet-4: var(--colors-violet-light-4);
        --colors-violet-5: var(--colors-violet-light-5);
        --colors-violet-6: var(--colors-violet-light-6);
        --colors-violet-7: var(--colors-violet-light-7);
        --colors-violet-8: var(--colors-violet-light-8);
        --colors-violet-9: var(--colors-violet-light-9);
        --colors-violet-10: var(--colors-violet-light-10);
        --colors-violet-11: var(--colors-violet-light-11);
        --colors-violet-12: var(--colors-violet-light-12);
        --colors-violet-a1: var(--colors-violet-light-a1);
        --colors-violet-a2: var(--colors-violet-light-a2);
        --colors-violet-a3: var(--colors-violet-light-a3);
        --colors-violet-a4: var(--colors-violet-light-a4);
        --colors-violet-a5: var(--colors-violet-light-a5);
        --colors-violet-a6: var(--colors-violet-light-a6);
        --colors-violet-a7: var(--colors-violet-light-a7);
        --colors-violet-a8: var(--colors-violet-light-a8);
        --colors-violet-a9: var(--colors-violet-light-a9);
        --colors-violet-a10: var(--colors-violet-light-a10);
        --colors-violet-a11: var(--colors-violet-light-a11);
        --colors-violet-a12: var(--colors-violet-light-a12);
        --colors-violet-default: var(--colors-violet-9);
        --colors-violet-emphasized: var(--colors-violet-10);
        --colors-violet-fg: #fff;
        --colors-violet-text: var(--colors-violet-a11);
        --colors-gray-1: var(--colors-neutral-light-1);
        --colors-gray-2: var(--colors-neutral-light-2);
        --colors-gray-3: var(--colors-neutral-light-3);
        --colors-gray-4: var(--colors-neutral-light-4);
        --colors-gray-5: var(--colors-neutral-light-5);
        --colors-gray-6: var(--colors-neutral-light-6);
        --colors-gray-7: var(--colors-neutral-light-7);
        --colors-gray-8: var(--colors-neutral-light-8);
        --colors-gray-9: var(--colors-neutral-light-9);
        --colors-gray-10: var(--colors-neutral-light-10);
        --colors-gray-11: var(--colors-neutral-light-11);
        --colors-gray-12: var(--colors-neutral-light-12);
        --colors-gray-a1: var(--colors-neutral-light-a1);
        --colors-gray-a2: var(--colors-neutral-light-a2);
        --colors-gray-a3: var(--colors-neutral-light-a3);
        --colors-gray-a4: var(--colors-neutral-light-a4);
        --colors-gray-a5: var(--colors-neutral-light-a5);
        --colors-gray-a6: var(--colors-neutral-light-a6);
        --colors-gray-a7: var(--colors-neutral-light-a7);
        --colors-gray-a8: var(--colors-neutral-light-a8);
        --colors-gray-a9: var(--colors-neutral-light-a9);
        --colors-gray-a10: var(--colors-neutral-light-a10);
        --colors-gray-a11: var(--colors-neutral-light-a11);
        --colors-gray-a12: var(--colors-neutral-light-a12);
        --colors-gray-default: #000;
        --colors-gray-emphasized: var(--colors-gray-12);
        --colors-gray-fg: #fff;
        --colors-gray-text: #000;
        --colors-accent-1: var(--colors-violet-light-1);
        --colors-accent-2: var(--colors-violet-light-2);
        --colors-accent-3: var(--colors-violet-light-3);
        --colors-accent-4: var(--colors-violet-light-4);
        --colors-accent-5: var(--colors-violet-light-5);
        --colors-accent-6: var(--colors-violet-light-6);
        --colors-accent-7: var(--colors-violet-light-7);
        --colors-accent-8: var(--colors-violet-light-8);
        --colors-accent-9: var(--colors-violet-light-9);
        --colors-accent-10: var(--colors-violet-light-10);
        --colors-accent-11: var(--colors-violet-light-11);
        --colors-accent-12: var(--colors-violet-light-12);
        --colors-accent-a1: var(--colors-violet-light-a1);
        --colors-accent-a2: var(--colors-violet-light-a2);
        --colors-accent-a3: var(--colors-violet-light-a3);
        --colors-accent-a4: var(--colors-violet-light-a4);
        --colors-accent-a5: var(--colors-violet-light-a5);
        --colors-accent-a6: var(--colors-violet-light-a6);
        --colors-accent-a7: var(--colors-violet-light-a7);
        --colors-accent-a8: var(--colors-violet-light-a8);
        --colors-accent-a9: var(--colors-violet-light-a9);
        --colors-accent-a10: var(--colors-violet-light-a10);
        --colors-accent-a11: var(--colors-violet-light-a11);
        --colors-accent-a12: var(--colors-violet-light-a12);
        --colors-accent-default: var(--colors-violet-9);
        --colors-accent-emphasized: var(--colors-violet-10);
        --colors-accent-fg: #fff;
        --colors-accent-text: var(--colors-violet-a11);
        --colors-bg-canvas: var(--colors-gray-1);
        --colors-bg-default: #fff;
        --colors-bg-subtle: var(--colors-gray-2);
        --colors-bg-muted: var(--colors-gray-3);
        --colors-bg-emphasized: var(--colors-gray-4);
        --colors-bg-disabled: var(--colors-gray-3);
        --colors-fg-default: var(--colors-gray-12);
        --colors-fg-muted: var(--colors-gray-11);
        --colors-fg-subtle: var(--colors-gray-10);
        --colors-fg-disabled: var(--colors-gray-7);
        --colors-border-default: var(--colors-gray-7);
        --colors-border-muted: var(--colors-gray-6);
        --colors-border-subtle: var(--colors-gray-4);
        --colors-border-disabled: var(--colors-gray-5);
        --colors-border-outline: var(--colors-gray-a9);
        --shadows-xs: 0px 1px 2px var(--colors-gray-a5), 0px 0px 1px var(--colors-gray-a7);
        --shadows-sm: 0px 2px 4px var(--colors-gray-a3), 0px 0px 1px var(--colors-gray-a7);
        --shadows-md: 0px 4px 8px var(--colors-gray-a3), 0px 0px 1px var(--colors-gray-a7);
        --shadows-lg: 0px 8px 16px var(--colors-gray-a3), 0px 0px 1px var(--colors-gray-a7);
        --shadows-xl: 0px 16px 24px var(--colors-gray-a3), 0px 0px 1px var(--colors-gray-a7);
        --shadows-2xl: 0px 24px 40px var(--colors-gray-a3), 0px 0px 1px var(--colors-gray-a7);
        --radii-l1: var(--radii-sm);
        --radii-l2: var(--radii-md);
        --radii-l3: var(--radii-lg)
    }

    .dark {
        --colors-neutral-1: var(--colors-neutral-dark-1);
        --colors-neutral-2: var(--colors-neutral-dark-2);
        --colors-neutral-3: var(--colors-neutral-dark-3);
        --colors-neutral-4: var(--colors-neutral-dark-4);
        --colors-neutral-5: var(--colors-neutral-dark-5);
        --colors-neutral-6: var(--colors-neutral-dark-6);
        --colors-neutral-7: var(--colors-neutral-dark-7);
        --colors-neutral-8: var(--colors-neutral-dark-8);
        --colors-neutral-9: var(--colors-neutral-dark-9);
        --colors-neutral-10: var(--colors-neutral-dark-10);
        --colors-neutral-11: var(--colors-neutral-dark-11);
        --colors-neutral-12: var(--colors-neutral-dark-12);
        --colors-neutral-a1: var(--colors-neutral-dark-a1);
        --colors-neutral-a2: var(--colors-neutral-dark-a2);
        --colors-neutral-a3: var(--colors-neutral-dark-a3);
        --colors-neutral-a4: var(--colors-neutral-dark-a4);
        --colors-neutral-a5: var(--colors-neutral-dark-a5);
        --colors-neutral-a6: var(--colors-neutral-dark-a6);
        --colors-neutral-a7: var(--colors-neutral-dark-a7);
        --colors-neutral-a8: var(--colors-neutral-dark-a8);
        --colors-neutral-a9: var(--colors-neutral-dark-a9);
        --colors-neutral-a10: var(--colors-neutral-dark-a10);
        --colors-neutral-a11: var(--colors-neutral-dark-a11);
        --colors-neutral-a12: var(--colors-neutral-dark-a12);
        --colors-neutral-default: #fff;
        --colors-neutral-fg: #000;
        --colors-neutral-text: #fff;
        --colors-red-1: var(--colors-red-dark-1);
        --colors-red-2: var(--colors-red-dark-2);
        --colors-red-3: var(--colors-red-dark-3);
        --colors-red-4: var(--colors-red-dark-4);
        --colors-red-5: var(--colors-red-dark-5);
        --colors-red-6: var(--colors-red-dark-6);
        --colors-red-7: var(--colors-red-dark-7);
        --colors-red-8: var(--colors-red-dark-8);
        --colors-red-9: var(--colors-red-dark-9);
        --colors-red-10: var(--colors-red-dark-10);
        --colors-red-11: var(--colors-red-dark-11);
        --colors-red-12: var(--colors-red-dark-12);
        --colors-red-a1: var(--colors-red-dark-a1);
        --colors-red-a2: var(--colors-red-dark-a2);
        --colors-red-a3: var(--colors-red-dark-a3);
        --colors-red-a4: var(--colors-red-dark-a4);
        --colors-red-a5: var(--colors-red-dark-a5);
        --colors-red-a6: var(--colors-red-dark-a6);
        --colors-red-a7: var(--colors-red-dark-a7);
        --colors-red-a8: var(--colors-red-dark-a8);
        --colors-red-a9: var(--colors-red-dark-a9);
        --colors-red-a10: var(--colors-red-dark-a10);
        --colors-red-a11: var(--colors-red-dark-a11);
        --colors-red-a12: var(--colors-red-dark-a12);
        --colors-violet-1: var(--colors-violet-dark-1);
        --colors-violet-2: var(--colors-violet-dark-2);
        --colors-violet-3: var(--colors-violet-dark-3);
        --colors-violet-4: var(--colors-violet-dark-4);
        --colors-violet-5: var(--colors-violet-dark-5);
        --colors-violet-6: var(--colors-violet-dark-6);
        --colors-violet-7: var(--colors-violet-dark-7);
        --colors-violet-8: var(--colors-violet-dark-8);
        --colors-violet-9: var(--colors-violet-dark-9);
        --colors-violet-10: var(--colors-violet-dark-10);
        --colors-violet-11: var(--colors-violet-dark-11);
        --colors-violet-12: var(--colors-violet-dark-12);
        --colors-violet-a1: var(--colors-violet-dark-a1);
        --colors-violet-a2: var(--colors-violet-dark-a2);
        --colors-violet-a3: var(--colors-violet-dark-a3);
        --colors-violet-a4: var(--colors-violet-dark-a4);
        --colors-violet-a5: var(--colors-violet-dark-a5);
        --colors-violet-a6: var(--colors-violet-dark-a6);
        --colors-violet-a7: var(--colors-violet-dark-a7);
        --colors-violet-a8: var(--colors-violet-dark-a8);
        --colors-violet-a9: var(--colors-violet-dark-a9);
        --colors-violet-a10: var(--colors-violet-dark-a10);
        --colors-violet-a11: var(--colors-violet-dark-a11);
        --colors-violet-a12: var(--colors-violet-dark-a12);
        --colors-gray-1: var(--colors-neutral-dark-1);
        --colors-gray-2: var(--colors-neutral-dark-2);
        --colors-gray-3: var(--colors-neutral-dark-3);
        --colors-gray-4: var(--colors-neutral-dark-4);
        --colors-gray-5: var(--colors-neutral-dark-5);
        --colors-gray-6: var(--colors-neutral-dark-6);
        --colors-gray-7: var(--colors-neutral-dark-7);
        --colors-gray-8: var(--colors-neutral-dark-8);
        --colors-gray-9: var(--colors-neutral-dark-9);
        --colors-gray-10: var(--colors-neutral-dark-10);
        --colors-gray-11: var(--colors-neutral-dark-11);
        --colors-gray-12: var(--colors-neutral-dark-12);
        --colors-gray-a1: var(--colors-neutral-dark-a1);
        --colors-gray-a2: var(--colors-neutral-dark-a2);
        --colors-gray-a3: var(--colors-neutral-dark-a3);
        --colors-gray-a4: var(--colors-neutral-dark-a4);
        --colors-gray-a5: var(--colors-neutral-dark-a5);
        --colors-gray-a6: var(--colors-neutral-dark-a6);
        --colors-gray-a7: var(--colors-neutral-dark-a7);
        --colors-gray-a8: var(--colors-neutral-dark-a8);
        --colors-gray-a9: var(--colors-neutral-dark-a9);
        --colors-gray-a10: var(--colors-neutral-dark-a10);
        --colors-gray-a11: var(--colors-neutral-dark-a11);
        --colors-gray-a12: var(--colors-neutral-dark-a12);
        --colors-gray-default: #fff;
        --colors-gray-fg: #000;
        --colors-gray-text: #fff;
        --colors-accent-1: var(--colors-violet-dark-1);
        --colors-accent-2: var(--colors-violet-dark-2);
        --colors-accent-3: var(--colors-violet-dark-3);
        --colors-accent-4: var(--colors-violet-dark-4);
        --colors-accent-5: var(--colors-violet-dark-5);
        --colors-accent-6: var(--colors-violet-dark-6);
        --colors-accent-7: var(--colors-violet-dark-7);
        --colors-accent-8: var(--colors-violet-dark-8);
        --colors-accent-9: var(--colors-violet-dark-9);
        --colors-accent-10: var(--colors-violet-dark-10);
        --colors-accent-11: var(--colors-violet-dark-11);
        --colors-accent-12: var(--colors-violet-dark-12);
        --colors-accent-a1: var(--colors-violet-dark-a1);
        --colors-accent-a2: var(--colors-violet-dark-a2);
        --colors-accent-a3: var(--colors-violet-dark-a3);
        --colors-accent-a4: var(--colors-violet-dark-a4);
        --colors-accent-a5: var(--colors-violet-dark-a5);
        --colors-accent-a6: var(--colors-violet-dark-a6);
        --colors-accent-a7: var(--colors-violet-dark-a7);
        --colors-accent-a8: var(--colors-violet-dark-a8);
        --colors-accent-a9: var(--colors-violet-dark-a9);
        --colors-accent-a10: var(--colors-violet-dark-a10);
        --colors-accent-a11: var(--colors-violet-dark-a11);
        --colors-accent-a12: var(--colors-violet-dark-a12);
        --colors-bg-default: var(--colors-gray-2);
        --colors-bg-subtle: var(--colors-gray-3);
        --colors-bg-muted: var(--colors-gray-4);
        --colors-bg-emphasized: var(--colors-gray-5);
        --colors-bg-disabled: var(--colors-gray-4);
        --shadows-xs: 0px 1px 1px var(--colors-black-a12), 0px 0px 1px inset var(--colors-gray-a7);
        --shadows-sm: 0px 2px 4px var(--colors-black-a10), 0px 0px 1px inset var(--colors-gray-a7);
        --shadows-md: 0px 4px 8px var(--colors-black-a10), 0px 0px 1px inset var(--colors-gray-a7);
        --shadows-lg: 0px 8px 16px var(--colors-black-a10), 0px 0px 1px inset var(--colors-gray-a7);
        --shadows-xl: 0px 16px 24px var(--colors-black-a10), 0px 0px 1px inset var(--colors-gray-a7);
        --shadows-2xl: 0px 24px 40px var(--colors-black-a10), 0px 0px 1px inset var(--colors-gray-a7)
    }

    @keyframes fade-in {
        0% {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    @keyframes fade-out {
        0% {
            opacity: 1
        }

        to {
            opacity: 0
        }
    }

    @keyframes slide-in {
        0% {
            opacity: 0;
            transform: translateY(64px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    @keyframes slide-out {
        0% {
            opacity: 1;
            transform: translateY(0)
        }

        to {
            opacity: 0;
            transform: translateY(64px)
        }
    }

    @keyframes slide-in-left {
        0% {
            transform: translateX(-100%)
        }

        to {
            transform: translateX(0)
        }
    }

    @keyframes slide-out-left {
        0% {
            transform: translateX(0)
        }

        to {
            transform: translateX(-100%)
        }
    }

    @keyframes slide-in-right {
        0% {
            transform: translateX(100%)
        }

        to {
            transform: translateX(0)
        }
    }

    @keyframes slide-out-right {
        0% {
            transform: translateX(0)
        }

        to {
            transform: translateX(100%)
        }
    }

    @keyframes collapse-in {
        0% {
            height: var(--sizes-0)
        }

        to {
            height: var(--height)
        }
    }

    @keyframes collapse-out {
        0% {
            height: var(--height)
        }

        to {
            height: var(--sizes-0)
        }
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
            transform: translateY(-4px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    @keyframes fadeOut {
        0% {
            opacity: 1;
            transform: translateY(0)
        }

        to {
            opacity: 0;
            transform: translateY(-4px)
        }
    }

    @keyframes skeleton-pulse {
        50% {
            opacity: .5
        }
    }

    @keyframes fadeInOut {

        0%,
        to {
            background-color: var(--colors-black)
        }

        50% {
            background-color: var(--colors-transparent)
        }
    }
}

@layer recipes {
    @layer _base {
        .button {
            align-items: center;
            appearance: none;
            -webkit-appearance: none;
            border-radius: var(--radii-l2);
            cursor: pointer;
            display: inline-flex;
            font-weight: var(--font-weights-semibold);
            min-width: var(--sizes-0);
            justify-content: center;
            outline: var(--borders-none);
            --transition-duration: var(--durations-normal);
            transition-duration: var(--durations-normal);
            --transition-prop: background, border-color, color, box-shadow;
            transition-property: background, border-color, color, box-shadow;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default);
            -webkit-user-select: none;
            user-select: none;
            vertical-align: middle;
            white-space: nowrap
        }

        .button:is([hidden]) {
            display: none
        }

        .input {
            appearance: none;
            -webkit-appearance: none;
            background: none;
            border-color: var(--colors-border-default);
            border-radius: var(--radii-l2);
            border-width: 1px;
            --colors-color-palette-1: var(--colors-accent-1);
            --colors-color-palette-2: var(--colors-accent-2);
            --colors-color-palette-3: var(--colors-accent-3);
            --colors-color-palette-4: var(--colors-accent-4);
            --colors-color-palette-5: var(--colors-accent-5);
            --colors-color-palette-6: var(--colors-accent-6);
            --colors-color-palette-7: var(--colors-accent-7);
            --colors-color-palette-8: var(--colors-accent-8);
            --colors-color-palette-9: var(--colors-accent-9);
            --colors-color-palette-10: var(--colors-accent-10);
            --colors-color-palette-11: var(--colors-accent-11);
            --colors-color-palette-12: var(--colors-accent-12);
            --colors-color-palette-a1: var(--colors-accent-a1);
            --colors-color-palette-a2: var(--colors-accent-a2);
            --colors-color-palette-a3: var(--colors-accent-a3);
            --colors-color-palette-a4: var(--colors-accent-a4);
            --colors-color-palette-a5: var(--colors-accent-a5);
            --colors-color-palette-a6: var(--colors-accent-a6);
            --colors-color-palette-a7: var(--colors-accent-a7);
            --colors-color-palette-a8: var(--colors-accent-a8);
            --colors-color-palette-a9: var(--colors-accent-a9);
            --colors-color-palette-a10: var(--colors-accent-a10);
            --colors-color-palette-a11: var(--colors-accent-a11);
            --colors-color-palette-a12: var(--colors-accent-a12);
            --colors-color-palette-default: var(--colors-accent-default);
            --colors-color-palette-emphasized: var(--colors-accent-emphasized);
            --colors-color-palette-fg: var(--colors-accent-fg);
            --colors-color-palette-text: var(--colors-accent-text);
            color: var(--colors-fg-default);
            outline: 0;
            position: relative;
            --transition-duration: var(--durations-normal);
            transition-duration: var(--durations-normal);
            --transition-prop: box-shadow, border-color;
            transition-property: box-shadow, border-color;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default);
            width: var(--sizes-full)
        }

        .input:is(:disabled, [disabled], [data-disabled]) {
            opacity: .4;
            cursor: not-allowed
        }

        .input:is(:focus, [data-focus]) {
            border-color: var(--colors-color-palette-default);
            box-shadow: 0 0 0 1px var(--colors-color-palette-default)
        }

        .icon {
            color: currentcolor;
            display: inline-block;
            flex-shrink: 0;
            vertical-align: middle;
            line-height: 1em
        }

        .skeleton {
            animation: var(--animations-skeleton-pulse);
            background-clip: padding-box;
            -webkit-background-clip: padding-box;
            background-color: var(--colors-gray-a4);
            border-radius: var(--radii-l3);
            color: var(--colors-transparent);
            cursor: default;
            pointer-events: none;
            -webkit-user-select: none;
            user-select: none
        }

        .skeleton *,
        .skeleton:after,
        .skeleton:before {
            visibility: hidden
        }

        .iconButton {
            align-items: center;
            appearance: none;
            -webkit-appearance: none;
            border-radius: var(--radii-l2);
            cursor: pointer;
            display: inline-flex;
            font-weight: var(--font-weights-semibold);
            min-width: var(--sizes-0);
            justify-content: center;
            outline: var(--borders-none);
            --transition-duration: var(--durations-normal);
            transition-duration: var(--durations-normal);
            --transition-prop: background, border-color, color, box-shadow;
            transition-property: background, border-color, color, box-shadow;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default);
            -webkit-user-select: none;
            user-select: none;
            vertical-align: middle;
            white-space: nowrap
        }

        .iconButton:is([hidden]) {
            display: none
        }

        .link {
            align-items: center;
            color: var(--colors-fg-default);
            --colors-color-palette-1: var(--colors-accent-1);
            --colors-color-palette-2: var(--colors-accent-2);
            --colors-color-palette-3: var(--colors-accent-3);
            --colors-color-palette-4: var(--colors-accent-4);
            --colors-color-palette-5: var(--colors-accent-5);
            --colors-color-palette-6: var(--colors-accent-6);
            --colors-color-palette-7: var(--colors-accent-7);
            --colors-color-palette-8: var(--colors-accent-8);
            --colors-color-palette-9: var(--colors-accent-9);
            --colors-color-palette-10: var(--colors-accent-10);
            --colors-color-palette-11: var(--colors-accent-11);
            --colors-color-palette-12: var(--colors-accent-12);
            --colors-color-palette-a1: var(--colors-accent-a1);
            --colors-color-palette-a2: var(--colors-accent-a2);
            --colors-color-palette-a3: var(--colors-accent-a3);
            --colors-color-palette-a4: var(--colors-accent-a4);
            --colors-color-palette-a5: var(--colors-accent-a5);
            --colors-color-palette-a6: var(--colors-accent-a6);
            --colors-color-palette-a7: var(--colors-accent-a7);
            --colors-color-palette-a8: var(--colors-accent-a8);
            --colors-color-palette-a9: var(--colors-accent-a9);
            --colors-color-palette-a10: var(--colors-accent-a10);
            --colors-color-palette-a11: var(--colors-accent-a11);
            --colors-color-palette-a12: var(--colors-accent-a12);
            --colors-color-palette-default: var(--colors-accent-default);
            --colors-color-palette-emphasized: var(--colors-accent-emphasized);
            --colors-color-palette-fg: var(--colors-accent-fg);
            --colors-color-palette-text: var(--colors-accent-text);
            cursor: pointer;
            display: inline-flex;
            font-weight: var(--font-weights-medium);
            gap: var(--spacing-2);
            text-decoration: underline .1em transparent;
            text-underline-offset: .125em;
            --transition-duration: var(--durations-normal);
            transition-duration: var(--durations-normal);
            --transition-prop: text-decoration-color;
            transition-property: text-decoration-color;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default)
        }

        .link svg {
            width: 1em;
            height: 1em
        }

        .link:is(:hover, [data-hover]) {
            text-decoration-color: var(--colors-color-palette-default)
        }
    }

    .button--variant_solid {
        background: #0d6efd;
        color: #ffffff;

    }

    .button--variant_solid:is(:disabled, [disabled], [data-disabled]) {
        color: var(--colors-fg-disabled);
        background: var(--colors-bg-disabled);
        cursor: not-allowed
    }

    .button--variant_solid:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
        color: var(--colors-fg-disabled);
        background: var(--colors-bg-disabled)
    }

    .button--variant_solid:is(:focus-visible, [data-focus-visible]) {
        outline: 2px solid;
        outline-color: var(--colors-color-palette-default);
        outline-offset: 2px
    }

    .button--variant_solid:is(:hover, [data-hover]) {
        background: var(--colors-color-palette-emphasized)
    }

    .button--size_md {
        height: var(--sizes-10);
        min-width: var(--sizes-10);
        font-size: var(--font-sizes-sm);
        line-height: 1.25rem;
        padding-inline: var(--spacing-4);
        gap: var(--spacing-2)
    }

    .button--size_md svg {
        width: var(--sizes-5);
        height: var(--sizes-5)
    }

    .button--size_xs {
        height: var(--sizes-8);
        min-width: var(--sizes-8);
        font-size: var(--font-sizes-xs);
        line-height: 1.125rem;
        padding-inline: var(--spacing-3);
        gap: var(--spacing-2)
    }

    .button--size_xs svg {
        font-size: var(--font-sizes-md);
        width: var(--sizes-4);
        height: var(--sizes-4)
    }

    .button--variant_outline {
        border-width: 1px;
        border-color: var(--colors-color-palette-a8);
        color: var(--colors-color-palette-text);
        --colors-color-palette-light-1: var(--colors-gray-light-1);
        --colors-color-palette-light-2: var(--colors-gray-light-2);
        --colors-color-palette-light-3: var(--colors-gray-light-3);
        --colors-color-palette-light-4: var(--colors-gray-light-4);
        --colors-color-palette-light-5: var(--colors-gray-light-5);
        --colors-color-palette-light-6: var(--colors-gray-light-6);
        --colors-color-palette-light-7: var(--colors-gray-light-7);
        --colors-color-palette-light-8: var(--colors-gray-light-8);
        --colors-color-palette-light-9: var(--colors-gray-light-9);
        --colors-color-palette-light-10: var(--colors-gray-light-10);
        --colors-color-palette-light-11: var(--colors-gray-light-11);
        --colors-color-palette-light-12: var(--colors-gray-light-12);
        --colors-color-palette-light-a1: var(--colors-gray-light-a1);
        --colors-color-palette-light-a2: var(--colors-gray-light-a2);
        --colors-color-palette-light-a3: var(--colors-gray-light-a3);
        --colors-color-palette-light-a4: var(--colors-gray-light-a4);
        --colors-color-palette-light-a5: var(--colors-gray-light-a5);
        --colors-color-palette-light-a6: var(--colors-gray-light-a6);
        --colors-color-palette-light-a7: var(--colors-gray-light-a7);
        --colors-color-palette-light-a8: var(--colors-gray-light-a8);
        --colors-color-palette-light-a9: var(--colors-gray-light-a9);
        --colors-color-palette-light-a10: var(--colors-gray-light-a10);
        --colors-color-palette-light-a11: var(--colors-gray-light-a11);
        --colors-color-palette-light-a12: var(--colors-gray-light-a12);
        --colors-color-palette-dark-1: var(--colors-gray-dark-1);
        --colors-color-palette-dark-2: var(--colors-gray-dark-2);
        --colors-color-palette-dark-3: var(--colors-gray-dark-3);
        --colors-color-palette-dark-4: var(--colors-gray-dark-4);
        --colors-color-palette-dark-5: var(--colors-gray-dark-5);
        --colors-color-palette-dark-6: var(--colors-gray-dark-6);
        --colors-color-palette-dark-7: var(--colors-gray-dark-7);
        --colors-color-palette-dark-8: var(--colors-gray-dark-8);
        --colors-color-palette-dark-9: var(--colors-gray-dark-9);
        --colors-color-palette-dark-10: var(--colors-gray-dark-10);
        --colors-color-palette-dark-11: var(--colors-gray-dark-11);
        --colors-color-palette-dark-12: var(--colors-gray-dark-12);
        --colors-color-palette-dark-a1: var(--colors-gray-dark-a1);
        --colors-color-palette-dark-a2: var(--colors-gray-dark-a2);
        --colors-color-palette-dark-a3: var(--colors-gray-dark-a3);
        --colors-color-palette-dark-a4: var(--colors-gray-dark-a4);
        --colors-color-palette-dark-a5: var(--colors-gray-dark-a5);
        --colors-color-palette-dark-a6: var(--colors-gray-dark-a6);
        --colors-color-palette-dark-a7: var(--colors-gray-dark-a7);
        --colors-color-palette-dark-a8: var(--colors-gray-dark-a8);
        --colors-color-palette-dark-a9: var(--colors-gray-dark-a9);
        --colors-color-palette-dark-a10: var(--colors-gray-dark-a10);
        --colors-color-palette-dark-a11: var(--colors-gray-dark-a11);
        --colors-color-palette-dark-a12: var(--colors-gray-dark-a12);
        --colors-color-palette-1: var(--colors-gray-1);
        --colors-color-palette-2: var(--colors-gray-2);
        --colors-color-palette-3: var(--colors-gray-3);
        --colors-color-palette-4: var(--colors-gray-4);
        --colors-color-palette-5: var(--colors-gray-5);
        --colors-color-palette-6: var(--colors-gray-6);
        --colors-color-palette-7: var(--colors-gray-7);
        --colors-color-palette-8: var(--colors-gray-8);
        --colors-color-palette-9: var(--colors-gray-9);
        --colors-color-palette-10: var(--colors-gray-10);
        --colors-color-palette-11: var(--colors-gray-11);
        --colors-color-palette-12: var(--colors-gray-12);
        --colors-color-palette-a1: var(--colors-gray-a1);
        --colors-color-palette-a2: var(--colors-gray-a2);
        --colors-color-palette-a3: var(--colors-gray-a3);
        --colors-color-palette-a4: var(--colors-gray-a4);
        --colors-color-palette-a5: var(--colors-gray-a5);
        --colors-color-palette-a6: var(--colors-gray-a6);
        --colors-color-palette-a7: var(--colors-gray-a7);
        --colors-color-palette-a8: var(--colors-gray-a8);
        --colors-color-palette-a9: var(--colors-gray-a9);
        --colors-color-palette-a10: var(--colors-gray-a10);
        --colors-color-palette-a11: var(--colors-gray-a11);
        --colors-color-palette-a12: var(--colors-gray-a12);
        --colors-color-palette-default: var(--colors-gray-default);
        --colors-color-palette-emphasized: var(--colors-gray-emphasized);
        --colors-color-palette-fg: var(--colors-gray-fg);
        --colors-color-palette-text: var(--colors-gray-text)
    }

    .button--variant_outline:is(:disabled, [disabled], [data-disabled]) {
        border-color: var(--colors-border-disabled);
        color: var(--colors-fg-disabled);
        cursor: not-allowed
    }

    .button--variant_outline:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
        background: var(--colors-transparent);
        border-color: var(--colors-border-disabled);
        color: var(--colors-fg-disabled)
    }

    .button--variant_outline:is([aria-selected=true], [data-selected]) {
        background: var(--colors-accent-default);
        border-color: var(--colors-accent-default);
        color: var(--colors-accent-fg)
    }

    .button--variant_outline:is([aria-selected=true], [data-selected]):is(:hover, [data-hover]) {
        background: var(--colors-accent-emphasized);
        border-color: var(--colors-accent-emphasized)
    }

    .button--variant_outline:is(:focus-visible, [data-focus-visible]) {
        outline: 2px solid;
        outline-color: var(--colors-color-palette-default);
        outline-offset: 2px
    }

    .button--variant_outline:is(:hover, [data-hover]) {
        background: var(--colors-color-palette-a2)
    }

    .button--variant_ghost {
        color: var(--colors-color-palette-text);
        --colors-color-palette-light-1: var(--colors-gray-light-1);
        --colors-color-palette-light-2: var(--colors-gray-light-2);
        --colors-color-palette-light-3: var(--colors-gray-light-3);
        --colors-color-palette-light-4: var(--colors-gray-light-4);
        --colors-color-palette-light-5: var(--colors-gray-light-5);
        --colors-color-palette-light-6: var(--colors-gray-light-6);
        --colors-color-palette-light-7: var(--colors-gray-light-7);
        --colors-color-palette-light-8: var(--colors-gray-light-8);
        --colors-color-palette-light-9: var(--colors-gray-light-9);
        --colors-color-palette-light-10: var(--colors-gray-light-10);
        --colors-color-palette-light-11: var(--colors-gray-light-11);
        --colors-color-palette-light-12: var(--colors-gray-light-12);
        --colors-color-palette-light-a1: var(--colors-gray-light-a1);
        --colors-color-palette-light-a2: var(--colors-gray-light-a2);
        --colors-color-palette-light-a3: var(--colors-gray-light-a3);
        --colors-color-palette-light-a4: var(--colors-gray-light-a4);
        --colors-color-palette-light-a5: var(--colors-gray-light-a5);
        --colors-color-palette-light-a6: var(--colors-gray-light-a6);
        --colors-color-palette-light-a7: var(--colors-gray-light-a7);
        --colors-color-palette-light-a8: var(--colors-gray-light-a8);
        --colors-color-palette-light-a9: var(--colors-gray-light-a9);
        --colors-color-palette-light-a10: var(--colors-gray-light-a10);
        --colors-color-palette-light-a11: var(--colors-gray-light-a11);
        --colors-color-palette-light-a12: var(--colors-gray-light-a12);
        --colors-color-palette-dark-1: var(--colors-gray-dark-1);
        --colors-color-palette-dark-2: var(--colors-gray-dark-2);
        --colors-color-palette-dark-3: var(--colors-gray-dark-3);
        --colors-color-palette-dark-4: var(--colors-gray-dark-4);
        --colors-color-palette-dark-5: var(--colors-gray-dark-5);
        --colors-color-palette-dark-6: var(--colors-gray-dark-6);
        --colors-color-palette-dark-7: var(--colors-gray-dark-7);
        --colors-color-palette-dark-8: var(--colors-gray-dark-8);
        --colors-color-palette-dark-9: var(--colors-gray-dark-9);
        --colors-color-palette-dark-10: var(--colors-gray-dark-10);
        --colors-color-palette-dark-11: var(--colors-gray-dark-11);
        --colors-color-palette-dark-12: var(--colors-gray-dark-12);
        --colors-color-palette-dark-a1: var(--colors-gray-dark-a1);
        --colors-color-palette-dark-a2: var(--colors-gray-dark-a2);
        --colors-color-palette-dark-a3: var(--colors-gray-dark-a3);
        --colors-color-palette-dark-a4: var(--colors-gray-dark-a4);
        --colors-color-palette-dark-a5: var(--colors-gray-dark-a5);
        --colors-color-palette-dark-a6: var(--colors-gray-dark-a6);
        --colors-color-palette-dark-a7: var(--colors-gray-dark-a7);
        --colors-color-palette-dark-a8: var(--colors-gray-dark-a8);
        --colors-color-palette-dark-a9: var(--colors-gray-dark-a9);
        --colors-color-palette-dark-a10: var(--colors-gray-dark-a10);
        --colors-color-palette-dark-a11: var(--colors-gray-dark-a11);
        --colors-color-palette-dark-a12: var(--colors-gray-dark-a12);
        --colors-color-palette-1: var(--colors-gray-1);
        --colors-color-palette-2: var(--colors-gray-2);
        --colors-color-palette-3: var(--colors-gray-3);
        --colors-color-palette-4: var(--colors-gray-4);
        --colors-color-palette-5: var(--colors-gray-5);
        --colors-color-palette-6: var(--colors-gray-6);
        --colors-color-palette-7: var(--colors-gray-7);
        --colors-color-palette-8: var(--colors-gray-8);
        --colors-color-palette-9: var(--colors-gray-9);
        --colors-color-palette-10: var(--colors-gray-10);
        --colors-color-palette-11: var(--colors-gray-11);
        --colors-color-palette-12: var(--colors-gray-12);
        --colors-color-palette-a1: var(--colors-gray-a1);
        --colors-color-palette-a2: var(--colors-gray-a2);
        --colors-color-palette-a3: var(--colors-gray-a3);
        --colors-color-palette-a4: var(--colors-gray-a4);
        --colors-color-palette-a5: var(--colors-gray-a5);
        --colors-color-palette-a6: var(--colors-gray-a6);
        --colors-color-palette-a7: var(--colors-gray-a7);
        --colors-color-palette-a8: var(--colors-gray-a8);
        --colors-color-palette-a9: var(--colors-gray-a9);
        --colors-color-palette-a10: var(--colors-gray-a10);
        --colors-color-palette-a11: var(--colors-gray-a11);
        --colors-color-palette-a12: var(--colors-gray-a12);
        --colors-color-palette-default: var(--colors-gray-default);
        --colors-color-palette-emphasized: var(--colors-gray-emphasized);
        --colors-color-palette-fg: var(--colors-gray-fg);
        --colors-color-palette-text: var(--colors-gray-text)
    }

    .button--variant_ghost:is([aria-selected=true], [data-selected]) {
        background: var(--colors-color-palette-a3)
    }

    .button--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
        color: var(--colors-fg-disabled);
        cursor: not-allowed
    }

    .button--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
        background: var(--colors-transparent);
        color: var(--colors-fg-disabled)
    }

    .button--variant_ghost:is(:focus-visible, [data-focus-visible]) {
        outline: 2px solid;
        outline-color: var(--colors-color-palette-default);
        outline-offset: 2px
    }

    .button--variant_ghost:is(:hover, [data-hover]) {
        background: var(--colors-color-palette-a3)
    }

    .button--variant_subtle {
        background: var(--colors-color-palette-a3);
        color: var(--colors-color-palette-text);
        --colors-color-palette-light-1: var(--colors-gray-light-1);
        --colors-color-palette-light-2: var(--colors-gray-light-2);
        --colors-color-palette-light-3: var(--colors-gray-light-3);
        --colors-color-palette-light-4: var(--colors-gray-light-4);
        --colors-color-palette-light-5: var(--colors-gray-light-5);
        --colors-color-palette-light-6: var(--colors-gray-light-6);
        --colors-color-palette-light-7: var(--colors-gray-light-7);
        --colors-color-palette-light-8: var(--colors-gray-light-8);
        --colors-color-palette-light-9: var(--colors-gray-light-9);
        --colors-color-palette-light-10: var(--colors-gray-light-10);
        --colors-color-palette-light-11: var(--colors-gray-light-11);
        --colors-color-palette-light-12: var(--colors-gray-light-12);
        --colors-color-palette-light-a1: var(--colors-gray-light-a1);
        --colors-color-palette-light-a2: var(--colors-gray-light-a2);
        --colors-color-palette-light-a3: var(--colors-gray-light-a3);
        --colors-color-palette-light-a4: var(--colors-gray-light-a4);
        --colors-color-palette-light-a5: var(--colors-gray-light-a5);
        --colors-color-palette-light-a6: var(--colors-gray-light-a6);
        --colors-color-palette-light-a7: var(--colors-gray-light-a7);
        --colors-color-palette-light-a8: var(--colors-gray-light-a8);
        --colors-color-palette-light-a9: var(--colors-gray-light-a9);
        --colors-color-palette-light-a10: var(--colors-gray-light-a10);
        --colors-color-palette-light-a11: var(--colors-gray-light-a11);
        --colors-color-palette-light-a12: var(--colors-gray-light-a12);
        --colors-color-palette-dark-1: var(--colors-gray-dark-1);
        --colors-color-palette-dark-2: var(--colors-gray-dark-2);
        --colors-color-palette-dark-3: var(--colors-gray-dark-3);
        --colors-color-palette-dark-4: var(--colors-gray-dark-4);
        --colors-color-palette-dark-5: var(--colors-gray-dark-5);
        --colors-color-palette-dark-6: var(--colors-gray-dark-6);
        --colors-color-palette-dark-7: var(--colors-gray-dark-7);
        --colors-color-palette-dark-8: var(--colors-gray-dark-8);
        --colors-color-palette-dark-9: var(--colors-gray-dark-9);
        --colors-color-palette-dark-10: var(--colors-gray-dark-10);
        --colors-color-palette-dark-11: var(--colors-gray-dark-11);
        --colors-color-palette-dark-12: var(--colors-gray-dark-12);
        --colors-color-palette-dark-a1: var(--colors-gray-dark-a1);
        --colors-color-palette-dark-a2: var(--colors-gray-dark-a2);
        --colors-color-palette-dark-a3: var(--colors-gray-dark-a3);
        --colors-color-palette-dark-a4: var(--colors-gray-dark-a4);
        --colors-color-palette-dark-a5: var(--colors-gray-dark-a5);
        --colors-color-palette-dark-a6: var(--colors-gray-dark-a6);
        --colors-color-palette-dark-a7: var(--colors-gray-dark-a7);
        --colors-color-palette-dark-a8: var(--colors-gray-dark-a8);
        --colors-color-palette-dark-a9: var(--colors-gray-dark-a9);
        --colors-color-palette-dark-a10: var(--colors-gray-dark-a10);
        --colors-color-palette-dark-a11: var(--colors-gray-dark-a11);
        --colors-color-palette-dark-a12: var(--colors-gray-dark-a12);
        --colors-color-palette-1: var(--colors-gray-1);
        --colors-color-palette-2: var(--colors-gray-2);
        --colors-color-palette-3: var(--colors-gray-3);
        --colors-color-palette-4: var(--colors-gray-4);
        --colors-color-palette-5: var(--colors-gray-5);
        --colors-color-palette-6: var(--colors-gray-6);
        --colors-color-palette-7: var(--colors-gray-7);
        --colors-color-palette-8: var(--colors-gray-8);
        --colors-color-palette-9: var(--colors-gray-9);
        --colors-color-palette-10: var(--colors-gray-10);
        --colors-color-palette-11: var(--colors-gray-11);
        --colors-color-palette-12: var(--colors-gray-12);
        --colors-color-palette-a1: var(--colors-gray-a1);
        --colors-color-palette-a2: var(--colors-gray-a2);
        --colors-color-palette-a3: var(--colors-gray-a3);
        --colors-color-palette-a4: var(--colors-gray-a4);
        --colors-color-palette-a5: var(--colors-gray-a5);
        --colors-color-palette-a6: var(--colors-gray-a6);
        --colors-color-palette-a7: var(--colors-gray-a7);
        --colors-color-palette-a8: var(--colors-gray-a8);
        --colors-color-palette-a9: var(--colors-gray-a9);
        --colors-color-palette-a10: var(--colors-gray-a10);
        --colors-color-palette-a11: var(--colors-gray-a11);
        --colors-color-palette-a12: var(--colors-gray-a12);
        --colors-color-palette-default: var(--colors-gray-default);
        --colors-color-palette-emphasized: var(--colors-gray-emphasized);
        --colors-color-palette-fg: var(--colors-gray-fg);
        --colors-color-palette-text: var(--colors-gray-text)
    }

    .button--variant_subtle:is(:disabled, [disabled], [data-disabled]) {
        background: var(--colors-bg-disabled);
        color: var(--colors-fg-disabled);
        cursor: not-allowed
    }

    .button--variant_subtle:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
        background: var(--colors-bg-disabled);
        color: var(--colors-fg-disabled)
    }

    .button--variant_subtle:is(:focus-visible, [data-focus-visible]) {
        outline: 2px solid;
        outline-color: var(--colors-color-palette-default);
        outline-offset: 2px
    }

    .button--variant_subtle:is(:hover, [data-hover]) {
        background: var(--colors-color-palette-a4)
    }

    .button--size_lg {
        height: var(--sizes-11);
        min-width: var(--sizes-11);
        font-size: var(--font-sizes-md);
        line-height: 1.5rem;
        padding-inline: var(--spacing-4\.5);
        gap: var(--spacing-2)
    }

    .button--size_lg svg {
        width: var(--sizes-5);
        height: var(--sizes-5)
    }

    .button--size_sm {
        height: var(--sizes-9);
        min-width: var(--sizes-9);
        font-size: var(--font-sizes-sm);
        line-height: 1.25rem;
        padding-inline: var(--spacing-3\.5);
        gap: var(--spacing-2)
    }

    .button--size_sm svg {
        width: var(--sizes-4);
        height: var(--sizes-4)
    }

    .input--size_md {
        padding-inline: var(--spacing-3);
        height: var(--sizes-10);
        min-width: var(--sizes-10);
        font-size: var(--font-sizes-md)
    }

    .input--size_sm {
        padding-inline: var(--spacing-2\.5);
        height: var(--sizes-9);
        min-width: var(--sizes-9);
        font-size: var(--font-sizes-sm)
    }

    .iconButton--variant_ghost {
        color: var(--colors-color-palette-text);
        --colors-color-palette-light-1: var(--colors-gray-light-1);
        --colors-color-palette-light-2: var(--colors-gray-light-2);
        --colors-color-palette-light-3: var(--colors-gray-light-3);
        --colors-color-palette-light-4: var(--colors-gray-light-4);
        --colors-color-palette-light-5: var(--colors-gray-light-5);
        --colors-color-palette-light-6: var(--colors-gray-light-6);
        --colors-color-palette-light-7: var(--colors-gray-light-7);
        --colors-color-palette-light-8: var(--colors-gray-light-8);
        --colors-color-palette-light-9: var(--colors-gray-light-9);
        --colors-color-palette-light-10: var(--colors-gray-light-10);
        --colors-color-palette-light-11: var(--colors-gray-light-11);
        --colors-color-palette-light-12: var(--colors-gray-light-12);
        --colors-color-palette-light-a1: var(--colors-gray-light-a1);
        --colors-color-palette-light-a2: var(--colors-gray-light-a2);
        --colors-color-palette-light-a3: var(--colors-gray-light-a3);
        --colors-color-palette-light-a4: var(--colors-gray-light-a4);
        --colors-color-palette-light-a5: var(--colors-gray-light-a5);
        --colors-color-palette-light-a6: var(--colors-gray-light-a6);
        --colors-color-palette-light-a7: var(--colors-gray-light-a7);
        --colors-color-palette-light-a8: var(--colors-gray-light-a8);
        --colors-color-palette-light-a9: var(--colors-gray-light-a9);
        --colors-color-palette-light-a10: var(--colors-gray-light-a10);
        --colors-color-palette-light-a11: var(--colors-gray-light-a11);
        --colors-color-palette-light-a12: var(--colors-gray-light-a12);
        --colors-color-palette-dark-1: var(--colors-gray-dark-1);
        --colors-color-palette-dark-2: var(--colors-gray-dark-2);
        --colors-color-palette-dark-3: var(--colors-gray-dark-3);
        --colors-color-palette-dark-4: var(--colors-gray-dark-4);
        --colors-color-palette-dark-5: var(--colors-gray-dark-5);
        --colors-color-palette-dark-6: var(--colors-gray-dark-6);
        --colors-color-palette-dark-7: var(--colors-gray-dark-7);
        --colors-color-palette-dark-8: var(--colors-gray-dark-8);
        --colors-color-palette-dark-9: var(--colors-gray-dark-9);
        --colors-color-palette-dark-10: var(--colors-gray-dark-10);
        --colors-color-palette-dark-11: var(--colors-gray-dark-11);
        --colors-color-palette-dark-12: var(--colors-gray-dark-12);
        --colors-color-palette-dark-a1: var(--colors-gray-dark-a1);
        --colors-color-palette-dark-a2: var(--colors-gray-dark-a2);
        --colors-color-palette-dark-a3: var(--colors-gray-dark-a3);
        --colors-color-palette-dark-a4: var(--colors-gray-dark-a4);
        --colors-color-palette-dark-a5: var(--colors-gray-dark-a5);
        --colors-color-palette-dark-a6: var(--colors-gray-dark-a6);
        --colors-color-palette-dark-a7: var(--colors-gray-dark-a7);
        --colors-color-palette-dark-a8: var(--colors-gray-dark-a8);
        --colors-color-palette-dark-a9: var(--colors-gray-dark-a9);
        --colors-color-palette-dark-a10: var(--colors-gray-dark-a10);
        --colors-color-palette-dark-a11: var(--colors-gray-dark-a11);
        --colors-color-palette-dark-a12: var(--colors-gray-dark-a12);
        --colors-color-palette-1: var(--colors-gray-1);
        --colors-color-palette-2: var(--colors-gray-2);
        --colors-color-palette-3: var(--colors-gray-3);
        --colors-color-palette-4: var(--colors-gray-4);
        --colors-color-palette-5: var(--colors-gray-5);
        --colors-color-palette-6: var(--colors-gray-6);
        --colors-color-palette-7: var(--colors-gray-7);
        --colors-color-palette-8: var(--colors-gray-8);
        --colors-color-palette-9: var(--colors-gray-9);
        --colors-color-palette-10: var(--colors-gray-10);
        --colors-color-palette-11: var(--colors-gray-11);
        --colors-color-palette-12: var(--colors-gray-12);
        --colors-color-palette-a1: var(--colors-gray-a1);
        --colors-color-palette-a2: var(--colors-gray-a2);
        --colors-color-palette-a3: var(--colors-gray-a3);
        --colors-color-palette-a4: var(--colors-gray-a4);
        --colors-color-palette-a5: var(--colors-gray-a5);
        --colors-color-palette-a6: var(--colors-gray-a6);
        --colors-color-palette-a7: var(--colors-gray-a7);
        --colors-color-palette-a8: var(--colors-gray-a8);
        --colors-color-palette-a9: var(--colors-gray-a9);
        --colors-color-palette-a10: var(--colors-gray-a10);
        --colors-color-palette-a11: var(--colors-gray-a11);
        --colors-color-palette-a12: var(--colors-gray-a12);
        --colors-color-palette-default: var(--colors-gray-default);
        --colors-color-palette-emphasized: var(--colors-gray-emphasized);
        --colors-color-palette-fg: var(--colors-gray-fg);
        --colors-color-palette-text: var(--colors-gray-text)
    }

    .iconButton--variant_ghost:is([aria-selected=true], [data-selected]) {
        background: var(--colors-color-palette-a3)
    }

    .iconButton--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
        color: var(--colors-fg-disabled);
        cursor: not-allowed
    }

    .iconButton--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
        background: var(--colors-transparent);
        color: var(--colors-fg-disabled)
    }

    .iconButton--variant_ghost:is(:focus-visible, [data-focus-visible]) {
        outline: 2px solid;
        outline-color: var(--colors-color-palette-default);
        outline-offset: 2px
    }

    .iconButton--variant_ghost:is(:hover, [data-hover]) {
        background: var(--colors-color-palette-a3)
    }

    .iconButton--size_md {
        height: var(--sizes-10);
        min-width: var(--sizes-10);
        font-size: var(--font-sizes-sm);
        line-height: 1.25rem;
        padding-inline: var(--spacing-0);
        gap: var(--spacing-2)
    }

    .iconButton--size_md svg {
        width: var(--sizes-5);
        height: var(--sizes-5)
    }

    .iconButton--size_sm {
        height: var(--sizes-9);
        min-width: var(--sizes-9);
        font-size: var(--font-sizes-sm);
        line-height: 1.25rem;
        padding-inline: var(--spacing-0);
        gap: var(--spacing-2)
    }

    .iconButton--size_sm svg {
        width: var(--sizes-4);
        height: var(--sizes-4)
    }

    .iconButton--variant_link {
        vertical-align: baseline;
        height: auto !important;
        padding-inline: var(--spacing-0) !important;
        min-width: var(--sizes-0) !important
    }

    .iconButton--variant_link:is(:disabled, [disabled], [data-disabled]) {
        color: var(--colors-border-disabled);
        cursor: not-allowed
    }

    .iconButton--variant_link:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
        color: var(--colors-border-disabled)
    }

    .iconButton--variant_outline {
        border-width: 1px;
        border-color: var(--colors-color-palette-a8);
        color: var(--colors-color-palette-text);
        --colors-color-palette-light-1: var(--colors-gray-light-1);
        --colors-color-palette-light-2: var(--colors-gray-light-2);
        --colors-color-palette-light-3: var(--colors-gray-light-3);
        --colors-color-palette-light-4: var(--colors-gray-light-4);
        --colors-color-palette-light-5: var(--colors-gray-light-5);
        --colors-color-palette-light-6: var(--colors-gray-light-6);
        --colors-color-palette-light-7: var(--colors-gray-light-7);
        --colors-color-palette-light-8: var(--colors-gray-light-8);
        --colors-color-palette-light-9: var(--colors-gray-light-9);
        --colors-color-palette-light-10: var(--colors-gray-light-10);
        --colors-color-palette-light-11: var(--colors-gray-light-11);
        --colors-color-palette-light-12: var(--colors-gray-light-12);
        --colors-color-palette-light-a1: var(--colors-gray-light-a1);
        --colors-color-palette-light-a2: var(--colors-gray-light-a2);
        --colors-color-palette-light-a3: var(--colors-gray-light-a3);
        --colors-color-palette-light-a4: var(--colors-gray-light-a4);
        --colors-color-palette-light-a5: var(--colors-gray-light-a5);
        --colors-color-palette-light-a6: var(--colors-gray-light-a6);
        --colors-color-palette-light-a7: var(--colors-gray-light-a7);
        --colors-color-palette-light-a8: var(--colors-gray-light-a8);
        --colors-color-palette-light-a9: var(--colors-gray-light-a9);
        --colors-color-palette-light-a10: var(--colors-gray-light-a10);
        --colors-color-palette-light-a11: var(--colors-gray-light-a11);
        --colors-color-palette-light-a12: var(--colors-gray-light-a12);
        --colors-color-palette-dark-1: var(--colors-gray-dark-1);
        --colors-color-palette-dark-2: var(--colors-gray-dark-2);
        --colors-color-palette-dark-3: var(--colors-gray-dark-3);
        --colors-color-palette-dark-4: var(--colors-gray-dark-4);
        --colors-color-palette-dark-5: var(--colors-gray-dark-5);
        --colors-color-palette-dark-6: var(--colors-gray-dark-6);
        --colors-color-palette-dark-7: var(--colors-gray-dark-7);
        --colors-color-palette-dark-8: var(--colors-gray-dark-8);
        --colors-color-palette-dark-9: var(--colors-gray-dark-9);
        --colors-color-palette-dark-10: var(--colors-gray-dark-10);
        --colors-color-palette-dark-11: var(--colors-gray-dark-11);
        --colors-color-palette-dark-12: var(--colors-gray-dark-12);
        --colors-color-palette-dark-a1: var(--colors-gray-dark-a1);
        --colors-color-palette-dark-a2: var(--colors-gray-dark-a2);
        --colors-color-palette-dark-a3: var(--colors-gray-dark-a3);
        --colors-color-palette-dark-a4: var(--colors-gray-dark-a4);
        --colors-color-palette-dark-a5: var(--colors-gray-dark-a5);
        --colors-color-palette-dark-a6: var(--colors-gray-dark-a6);
        --colors-color-palette-dark-a7: var(--colors-gray-dark-a7);
        --colors-color-palette-dark-a8: var(--colors-gray-dark-a8);
        --colors-color-palette-dark-a9: var(--colors-gray-dark-a9);
        --colors-color-palette-dark-a10: var(--colors-gray-dark-a10);
        --colors-color-palette-dark-a11: var(--colors-gray-dark-a11);
        --colors-color-palette-dark-a12: var(--colors-gray-dark-a12);
        --colors-color-palette-1: var(--colors-gray-1);
        --colors-color-palette-2: var(--colors-gray-2);
        --colors-color-palette-3: var(--colors-gray-3);
        --colors-color-palette-4: var(--colors-gray-4);
        --colors-color-palette-5: var(--colors-gray-5);
        --colors-color-palette-6: var(--colors-gray-6);
        --colors-color-palette-7: var(--colors-gray-7);
        --colors-color-palette-8: var(--colors-gray-8);
        --colors-color-palette-9: var(--colors-gray-9);
        --colors-color-palette-10: var(--colors-gray-10);
        --colors-color-palette-11: var(--colors-gray-11);
        --colors-color-palette-12: var(--colors-gray-12);
        --colors-color-palette-a1: var(--colors-gray-a1);
        --colors-color-palette-a2: var(--colors-gray-a2);
        --colors-color-palette-a3: var(--colors-gray-a3);
        --colors-color-palette-a4: var(--colors-gray-a4);
        --colors-color-palette-a5: var(--colors-gray-a5);
        --colors-color-palette-a6: var(--colors-gray-a6);
        --colors-color-palette-a7: var(--colors-gray-a7);
        --colors-color-palette-a8: var(--colors-gray-a8);
        --colors-color-palette-a9: var(--colors-gray-a9);
        --colors-color-palette-a10: var(--colors-gray-a10);
        --colors-color-palette-a11: var(--colors-gray-a11);
        --colors-color-palette-a12: var(--colors-gray-a12);
        --colors-color-palette-default: var(--colors-gray-default);
        --colors-color-palette-emphasized: var(--colors-gray-emphasized);
        --colors-color-palette-fg: var(--colors-gray-fg);
        --colors-color-palette-text: var(--colors-gray-text)
    }

    .iconButton--variant_outline:is(:disabled, [disabled], [data-disabled]) {
        border-color: var(--colors-border-disabled);
        color: var(--colors-fg-disabled);
        cursor: not-allowed
    }

    .iconButton--variant_outline:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
        background: var(--colors-transparent);
        border-color: var(--colors-border-disabled);
        color: var(--colors-fg-disabled)
    }

    .iconButton--variant_outline:is([aria-selected=true], [data-selected]) {
        background: var(--colors-accent-default);
        border-color: var(--colors-accent-default);
        color: var(--colors-accent-fg)
    }

    .iconButton--variant_outline:is([aria-selected=true], [data-selected]):is(:hover, [data-hover]) {
        background: var(--colors-accent-emphasized);
        border-color: var(--colors-accent-emphasized)
    }

    .iconButton--variant_outline:is(:focus-visible, [data-focus-visible]) {
        outline: 2px solid;
        outline-color: var(--colors-color-palette-default);
        outline-offset: 2px
    }

    .iconButton--variant_outline:is(:hover, [data-hover]) {
        background: var(--colors-color-palette-a2)
    }

    .iconButton--size_xs {
        height: var(--sizes-8);
        min-width: var(--sizes-8);
        font-size: var(--font-sizes-xs);
        line-height: 1.125rem;
        padding-inline: var(--spacing-0);
        gap: var(--spacing-2)
    }

    .iconButton--size_xs svg {
        font-size: var(--font-sizes-md);
        width: var(--sizes-4);
        height: var(--sizes-4)
    }

    .iconButton--size_lg {
        height: var(--sizes-11);
        min-width: var(--sizes-11);
        font-size: var(--font-sizes-md);
        line-height: 1.5rem;
        padding-inline: var(--spacing-0);
        gap: var(--spacing-2)
    }

    .iconButton--size_lg svg {
        width: var(--sizes-5);
        height: var(--sizes-5)
    }

    .iconButton--variant_solid {
        background: var(--colors-color-palette-default);
        color: var(--colors-color-palette-fg);
        --colors-color-palette-1: var(--colors-accent-1);
        --colors-color-palette-2: var(--colors-accent-2);
        --colors-color-palette-3: var(--colors-accent-3);
        --colors-color-palette-4: var(--colors-accent-4);
        --colors-color-palette-5: var(--colors-accent-5);
        --colors-color-palette-6: var(--colors-accent-6);
        --colors-color-palette-7: var(--colors-accent-7);
        --colors-color-palette-8: var(--colors-accent-8);
        --colors-color-palette-9: var(--colors-accent-9);
        --colors-color-palette-10: var(--colors-accent-10);
        --colors-color-palette-11: var(--colors-accent-11);
        --colors-color-palette-12: var(--colors-accent-12);
        --colors-color-palette-a1: var(--colors-accent-a1);
        --colors-color-palette-a2: var(--colors-accent-a2);
        --colors-color-palette-a3: var(--colors-accent-a3);
        --colors-color-palette-a4: var(--colors-accent-a4);
        --colors-color-palette-a5: var(--colors-accent-a5);
        --colors-color-palette-a6: var(--colors-accent-a6);
        --colors-color-palette-a7: var(--colors-accent-a7);
        --colors-color-palette-a8: var(--colors-accent-a8);
        --colors-color-palette-a9: var(--colors-accent-a9);
        --colors-color-palette-a10: var(--colors-accent-a10);
        --colors-color-palette-a11: var(--colors-accent-a11);
        --colors-color-palette-a12: var(--colors-accent-a12);
        --colors-color-palette-default: var(--colors-accent-default);
        --colors-color-palette-emphasized: var(--colors-accent-emphasized);
        --colors-color-palette-fg: var(--colors-accent-fg);
        --colors-color-palette-text: var(--colors-accent-text)
    }

    .iconButton--variant_solid:is(:disabled, [disabled], [data-disabled]) {
        color: var(--colors-fg-disabled);
        background: var(--colors-bg-disabled);
        cursor: not-allowed
    }

    .iconButton--variant_solid:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
        color: var(--colors-fg-disabled);
        background: var(--colors-bg-disabled)
    }

    .iconButton--variant_solid:is(:focus-visible, [data-focus-visible]) {
        outline: 2px solid;
        outline-color: var(--colors-color-palette-default);
        outline-offset: 2px
    }

    .iconButton--variant_solid:is(:hover, [data-hover]) {
        background: var(--colors-color-palette-emphasized)
    }
}

@layer recipes.slots {
    @layer _base {
        .drawer__backdrop {
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            background: var(--colors-white-a10);
            height: 100vh;
            left: var(--spacing-0);
            position: fixed;
            top: var(--spacing-0);
            width: 100vw;
            z-index: var(--z-index-overlay)
        }

        .dark .drawer__backdrop,
        .drawer__backdrop.dark {
            background: var(--colors-black-a10)
        }

        .drawer__backdrop:is([open], [data-state=open]) {
            animation: var(--animations-backdrop-in)
        }

        .drawer__backdrop:is([data-state=closed]) {
            animation: var(--animations-backdrop-out)
        }

        .drawer__positioner {
            align-items: center;
            display: flex;
            height: 100dvh;
            justify-content: center;
            position: fixed;
            top: var(--spacing-0);
            width: 100vw;
            z-index: var(--z-index-modal)
        }

        .drawer__content {
            background: var(--colors-bg-default);
            box-shadow: var(--shadows-lg);
            display: grid
        }

        .drawer__content>:not([hidden])~:not([hidden]) {
            border-top-width: 1px;
            border-bottom-width: 0
        }

        .drawer__content {
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr auto;
            grid-template-areas: "header" "body" "footer";
            height: var(--sizes-full);
            width: var(--sizes-full)
        }

        .drawer__content:is([hidden]) {
            display: none
        }

        .drawer__title {
            color: var(--colors-fg-default);
            font-weight: var(--font-weights-semibold);
            font-size: var(--font-sizes-xl);
            line-height: 1.875rem
        }

        .drawer__description {
            color: var(--colors-fg-muted);
            font-size: var(--font-sizes-sm);
            line-height: 1.25rem
        }

        .drawer__header {
            gap: var(--spacing-1);
            grid-area: header;
            padding-top: var(--spacing-4);
            padding-bottom: var(--spacing-4);
            padding-inline: var(--spacing-4)
        }

        .drawer__body,
        .drawer__header {
            display: flex;
            flex-direction: column
        }

        .drawer__body {
            grid-area: body;
            overflow: auto;
            padding: var(--spacing-4)
        }

        .drawer__footer {
            display: flex;
            grid-area: footer;
            justify-content: flex-end;
            padding-block: var(--spacing-4);
            padding-inline: var(--spacing-4)
        }

        .table__root {
            caption-side: bottom;
            width: var(--sizes-full)
        }

        .table__body tr:last-child {
            border-bottom-width: 0
        }

        .table__cell {
            vertical-align: middle
        }

        .table__footer {
            font-weight: var(--font-weights-medium);
            border-top-width: 1px
        }

        .table__footer tr:last-child {
            border-bottom-width: 0
        }

        .table__header {
            color: var(--colors-fg-muted);
            font-weight: var(--font-weights-medium);
            text-align: left;
            vertical-align: middle
        }

        .table__row {
            border-bottom-width: 1px;
            --transition-duration: var(--durations-normal);
            transition-duration: var(--durations-normal);
            --transition-prop: background, color;
            transition-property: background, color;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default)
        }

        .table__caption {
            color: var(--colors-fg-subtle)
        }

        .dialog__backdrop {
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            background: var(--colors-white-a10);
            height: 100vh;
            left: var(--spacing-0);
            position: fixed;
            top: var(--spacing-0);
            width: 100vw;
            z-index: var(--z-index-overlay)
        }

        .dark .dialog__backdrop,
        .dialog__backdrop.dark {
            background: var(--colors-black-a10)
        }

        .dialog__backdrop:is([open], [data-state=open]) {
            animation: var(--animations-backdrop-in)
        }

        .dialog__backdrop:is([data-state=closed]) {
            animation: var(--animations-backdrop-out)
        }

        .dialog__positioner {
            align-items: center;
            display: flex;
            justify-content: center;
            left: var(--spacing-0);
            overflow: auto;
            position: fixed;
            top: var(--spacing-0);
            width: 100vw;
            height: 100dvh;
            z-index: var(--z-index-modal)
        }

        .dialog__content {
            background: var(--colors-bg-default);
            border-radius: var(--radii-l3);
            box-shadow: var(--shadows-lg);
            min-width: var(--sizes-sm);
            position: relative
        }

        .dialog__content:is([open], [data-state=open]) {
            animation: var(--animations-dialog-in)
        }

        .dialog__content:is([data-state=closed]) {
            animation: var(--animations-dialog-out)
        }

        .dialog__title {
            font-weight: var(--font-weights-semibold);
            font-size: var(--font-sizes-lg);
            line-height: 1.75rem
        }

        .dialog__description {
            color: var(--colors-fg-muted);
            font-size: var(--font-sizes-sm);
            line-height: 1.25rem
        }

        .tabs__root {
            --colors-color-palette-1: var(--colors-accent-1);
            --colors-color-palette-2: var(--colors-accent-2);
            --colors-color-palette-3: var(--colors-accent-3);
            --colors-color-palette-4: var(--colors-accent-4);
            --colors-color-palette-5: var(--colors-accent-5);
            --colors-color-palette-6: var(--colors-accent-6);
            --colors-color-palette-7: var(--colors-accent-7);
            --colors-color-palette-8: var(--colors-accent-8);
            --colors-color-palette-9: var(--colors-accent-9);
            --colors-color-palette-10: var(--colors-accent-10);
            --colors-color-palette-11: var(--colors-accent-11);
            --colors-color-palette-12: var(--colors-accent-12);
            --colors-color-palette-a1: var(--colors-accent-a1);
            --colors-color-palette-a2: var(--colors-accent-a2);
            --colors-color-palette-a3: var(--colors-accent-a3);
            --colors-color-palette-a4: var(--colors-accent-a4);
            --colors-color-palette-a5: var(--colors-accent-a5);
            --colors-color-palette-a6: var(--colors-accent-a6);
            --colors-color-palette-a7: var(--colors-accent-a7);
            --colors-color-palette-a8: var(--colors-accent-a8);
            --colors-color-palette-a9: var(--colors-accent-a9);
            --colors-color-palette-a10: var(--colors-accent-a10);
            --colors-color-palette-a11: var(--colors-accent-a11);
            --colors-color-palette-a12: var(--colors-accent-a12);
            --colors-color-palette-default: var(--colors-accent-default);
            --colors-color-palette-emphasized: var(--colors-accent-emphasized);
            --colors-color-palette-fg: var(--colors-accent-fg);
            --colors-color-palette-text: var(--colors-accent-text);
            display: flex;
            width: var(--sizes-full)
        }

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

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

        .tabs__list {
            display: flex;
            flex-shrink: 0;
            overflow: auto;
            position: relative;
            scrollbar-width: none
        }

        .tabs__list[data-orientation=horizontal] {
            flex-direction: row
        }

        .tabs__list[data-orientation=vertical] {
            flex-direction: column
        }

        .tabs__list::-webkit-scrollbar {
            display: none
        }

        .tabs__trigger {
            align-items: center;
            color: var(--colors-fg-muted);
            cursor: pointer;
            display: inline-flex;
            flex-shrink: 0;
            font-weight: var(--font-weights-semibold);
            gap: var(--spacing-2);
            justify-content: center;
            --transition-duration: var(--durations-normal);
            transition-duration: var(--durations-normal);
            --transition-prop: color, background, border-color;
            transition-property: color, background, border-color;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default);
            white-space: nowrap;
            z-index: 1
        }

        .tabs__trigger:is(:disabled, [disabled], [data-disabled]) {
            color: var(--colors-fg-disabled);
            cursor: not-allowed
        }

        .tabs__trigger:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
            color: var(--colors-fg-disabled)
        }

        .tabs__trigger:is([aria-selected=true], [data-selected]) {
            color: var(--colors-fg-default)
        }

        .tabs__trigger:is([aria-selected=true], [data-selected]):is(:hover, [data-hover]) {
            color: var(--colors-fg-default)
        }

        .tabs__trigger[data-orientation=vertical] {
            justify-content: flex-start
        }

        .tabs__trigger:is(:hover, [data-hover]) {
            color: var(--colors-fg-muted)
        }

        .avatar__root {
            border-radius: var(--radii-full);
            flex-shrink: 0
        }

        .avatar__image {
            object-fit: cover
        }

        .avatar__fallback {
            align-items: center;
            background: var(--colors-bg-subtle);
            border-radius: var(--radii-full);
            border-width: 1px;
            color: var(--colors-fg-default);
            display: flex;
            font-weight: var(--font-weights-semibold);
            height: inherit;
            justify-content: center
        }

        .avatar__fallback:is([hidden]) {
            display: none
        }

        .checkbox__root {
            align-items: center;
            --colors-color-palette-1: var(--colors-accent-1);
            --colors-color-palette-2: var(--colors-accent-2);
            --colors-color-palette-3: var(--colors-accent-3);
            --colors-color-palette-4: var(--colors-accent-4);
            --colors-color-palette-5: var(--colors-accent-5);
            --colors-color-palette-6: var(--colors-accent-6);
            --colors-color-palette-7: var(--colors-accent-7);
            --colors-color-palette-8: var(--colors-accent-8);
            --colors-color-palette-9: var(--colors-accent-9);
            --colors-color-palette-10: var(--colors-accent-10);
            --colors-color-palette-11: var(--colors-accent-11);
            --colors-color-palette-12: var(--colors-accent-12);
            --colors-color-palette-a1: var(--colors-accent-a1);
            --colors-color-palette-a2: var(--colors-accent-a2);
            --colors-color-palette-a3: var(--colors-accent-a3);
            --colors-color-palette-a4: var(--colors-accent-a4);
            --colors-color-palette-a5: var(--colors-accent-a5);
            --colors-color-palette-a6: var(--colors-accent-a6);
            --colors-color-palette-a7: var(--colors-accent-a7);
            --colors-color-palette-a8: var(--colors-accent-a8);
            --colors-color-palette-a9: var(--colors-accent-a9);
            --colors-color-palette-a10: var(--colors-accent-a10);
            --colors-color-palette-a11: var(--colors-accent-a11);
            --colors-color-palette-a12: var(--colors-accent-a12);
            --colors-color-palette-default: var(--colors-accent-default);
            --colors-color-palette-emphasized: var(--colors-accent-emphasized);
            --colors-color-palette-fg: var(--colors-accent-fg);
            --colors-color-palette-text: var(--colors-accent-text);
            display: flex
        }

        .checkbox__label {
            color: var(--colors-fg-default);
            font-weight: var(--font-weights-medium)
        }

        .checkbox__control {
            align-items: center;
            border-color: var(--colors-border-default);
            border-width: 1px;
            color: var(--colors-color-palette-fg);
            cursor: pointer;
            display: flex;
            justify-content: center;
            --transition-duration: var(--durations-normal);
            transition-duration: var(--durations-normal);
            --transition-prop: border-color, background;
            transition-property: border-color, background;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default)
        }

        .checkbox__control:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) {
            background: var(--colors-color-palette-default);
            border-color: var(--colors-color-palette-default)
        }

        .checkbox__control:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]):is(:hover, [data-hover]) {
            background: var(--colors-color-palette-default)
        }

        .checkbox__control:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate]) {
            background: var(--colors-color-palette-default);
            border-color: var(--colors-color-palette-default)
        }

        .checkbox__control:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate]):is(:hover, [data-hover]) {
            background: var(--colors-color-palette-default)
        }

        .checkbox__control:has(+:focus-visible) {
            outline-offset: 2px;
            outline: 2px solid;
            outline-color: var(--colors-border-outline)
        }

        .checkbox__control:has(+:focus-visible):is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) {
            outline-color: var(--colors-color-palette-default)
        }

        .checkbox__control:is(:hover, [data-hover]) {
            background: var(--colors-bg-subtle)
        }

        .switchRecipe__root {
            align-items: center;
            --colors-color-palette-1: var(--colors-accent-1);
            --colors-color-palette-2: var(--colors-accent-2);
            --colors-color-palette-3: var(--colors-accent-3);
            --colors-color-palette-4: var(--colors-accent-4);
            --colors-color-palette-5: var(--colors-accent-5);
            --colors-color-palette-6: var(--colors-accent-6);
            --colors-color-palette-7: var(--colors-accent-7);
            --colors-color-palette-8: var(--colors-accent-8);
            --colors-color-palette-9: var(--colors-accent-9);
            --colors-color-palette-10: var(--colors-accent-10);
            --colors-color-palette-11: var(--colors-accent-11);
            --colors-color-palette-12: var(--colors-accent-12);
            --colors-color-palette-a1: var(--colors-accent-a1);
            --colors-color-palette-a2: var(--colors-accent-a2);
            --colors-color-palette-a3: var(--colors-accent-a3);
            --colors-color-palette-a4: var(--colors-accent-a4);
            --colors-color-palette-a5: var(--colors-accent-a5);
            --colors-color-palette-a6: var(--colors-accent-a6);
            --colors-color-palette-a7: var(--colors-accent-a7);
            --colors-color-palette-a8: var(--colors-accent-a8);
            --colors-color-palette-a9: var(--colors-accent-a9);
            --colors-color-palette-a10: var(--colors-accent-a10);
            --colors-color-palette-a11: var(--colors-accent-a11);
            --colors-color-palette-a12: var(--colors-accent-a12);
            --colors-color-palette-default: var(--colors-accent-default);
            --colors-color-palette-emphasized: var(--colors-accent-emphasized);
            --colors-color-palette-fg: var(--colors-accent-fg);
            --colors-color-palette-text: var(--colors-accent-text);
            display: flex;
            position: relative
        }

        .switchRecipe__label {
            color: var(--colors-fg-default);
            font-weight: var(--font-weights-medium)
        }

        .switchRecipe__control {
            align-items: center;
            background: var(--colors-bg-emphasized);
            border-radius: var(--radii-full);
            cursor: pointer;
            display: inline-flex;
            flex-shrink: 0;
            --transition-duration: var(--durations-normal);
            transition-duration: var(--durations-normal);
            --transition-prop: background;
            transition-property: background;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default)
        }

        .switchRecipe__control:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) {
            background: var(--colors-color-palette-default)
        }

        .switchRecipe__thumb {
            background: var(--colors-bg-default);
            border-radius: var(--radii-full);
            box-shadow: var(--shadows-xs);
            --transition-duration: var(--durations-normal);
            transition-duration: var(--durations-normal);
            --transition-prop: transform, background;
            transition-property: transform, background;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default)
        }

        .switchRecipe__thumb:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) {
            transform: translateX(100%);
            background: var(--colors-bg-default)
        }

        .dark .switchRecipe__thumb:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]),
        .switchRecipe__thumb:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]).dark {
            background: var(--colors-color-palette-fg)
        }

        .card__root {
            background: var(--colors-bg-default);
            border-radius: var(--radii-l3);
            box-shadow: var(--shadows-lg);
            overflow: hidden;
            position: relative
        }

        .card__header,
        .card__root {
            display: flex;
            flex-direction: column
        }

        .card__header {
            gap: var(--spacing-1);
            padding: var(--spacing-6)
        }

        .card__body {
            flex: 1 1 0%;
            flex-direction: column
        }

        .card__body,
        .card__footer {
            display: flex;
            padding-bottom: var(--spacing-6);
            padding-inline: var(--spacing-6)
        }

        .card__footer {
            justify-content: flex-end;
            padding-top: var(--spacing-2)
        }

        .card__title {
            color: var(--colors-fg-default);
            font-size: var(--font-sizes-lg);
            line-height: 1.75rem;
            font-weight: var(--font-weights-semibold)
        }

        .card__description {
            color: var(--colors-fg-muted);
            font-size: var(--font-sizes-sm);
            line-height: 1.25rem
        }

        .radioGroup__root {
            --colors-color-palette-1: var(--colors-accent-1);
            --colors-color-palette-2: var(--colors-accent-2);
            --colors-color-palette-3: var(--colors-accent-3);
            --colors-color-palette-4: var(--colors-accent-4);
            --colors-color-palette-5: var(--colors-accent-5);
            --colors-color-palette-6: var(--colors-accent-6);
            --colors-color-palette-7: var(--colors-accent-7);
            --colors-color-palette-8: var(--colors-accent-8);
            --colors-color-palette-9: var(--colors-accent-9);
            --colors-color-palette-10: var(--colors-accent-10);
            --colors-color-palette-11: var(--colors-accent-11);
            --colors-color-palette-12: var(--colors-accent-12);
            --colors-color-palette-a1: var(--colors-accent-a1);
            --colors-color-palette-a2: var(--colors-accent-a2);
            --colors-color-palette-a3: var(--colors-accent-a3);
            --colors-color-palette-a4: var(--colors-accent-a4);
            --colors-color-palette-a5: var(--colors-accent-a5);
            --colors-color-palette-a6: var(--colors-accent-a6);
            --colors-color-palette-a7: var(--colors-accent-a7);
            --colors-color-palette-a8: var(--colors-accent-a8);
            --colors-color-palette-a9: var(--colors-accent-a9);
            --colors-color-palette-a10: var(--colors-accent-a10);
            --colors-color-palette-a11: var(--colors-accent-a11);
            --colors-color-palette-a12: var(--colors-accent-a12);
            --colors-color-palette-default: var(--colors-accent-default);
            --colors-color-palette-emphasized: var(--colors-accent-emphasized);
            --colors-color-palette-fg: var(--colors-accent-fg);
            --colors-color-palette-text: var(--colors-accent-text);
            display: flex
        }

        .radioGroup__root[data-orientation=vertical] {
            flex-direction: column
        }

        .radioGroup__root[data-orientation=horizontal] {
            flex-direction: row
        }

        .radioGroup__item {
            align-items: center;
            cursor: pointer;
            display: flex
        }

        .radioGroup__item:is(:disabled, [disabled], [data-disabled]) {
            cursor: not-allowed
        }

        .radioGroup__itemText {
            color: var(--colors-fg-default);
            font-weight: var(--font-weights-medium)
        }

        .radioGroup__itemText:is(:disabled, [disabled], [data-disabled]) {
            color: var(--colors-fg-disabled)
        }

        .radioGroup__itemControl {
            background: var(--colors-transparent);
            border-color: var(--colors-border-default);
            border-radius: var(--radii-full);
            border-width: 1px;
            --transition-duration: var(--durations-normal);
            transition-duration: var(--durations-normal);
            --transition-prop: background;
            transition-property: background;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default)
        }

        .radioGroup__itemControl:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) {
            background: var(--colors-color-palette-default);
            border-color: var(--colors-color-palette-default);
            outline-color: var(--colors-bg-default);
            outline-style: solid
        }

        .radioGroup__itemControl:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]):is(:hover, [data-hover]) {
            background: var(--colors-color-palette-default)
        }

        .radioGroup__itemControl:is(:disabled, [disabled], [data-disabled]) {
            border-color: var(--colors-border-disabled);
            color: var(--colors-fg-disabled)
        }

        .radioGroup__itemControl:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
            background: initial;
            color: var(--colors-fg-disabled)
        }

        .radioGroup__itemControl:is(:hover, [data-hover]) {
            background: var(--colors-bg-subtle)
        }

        .select__label {
            font-weight: var(--font-weights-medium)
        }

        .select__label,
        .select__trigger {
            color: var(--colors-fg-default)
        }

        .select__trigger {
            appearance: none;
            -webkit-appearance: none;
            align-items: center;
            border-color: var(--colors-border-default);
            border-radius: var(--radii-l2);
            cursor: pointer;
            display: inline-flex;
            justify-content: space-between;
            outline: 0;
            position: relative;
            --transition-duration: var(--durations-normal);
            transition-duration: var(--durations-normal);
            --transition-prop: background, box-shadow, border-color;
            transition-property: background, box-shadow, border-color;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default);
            width: var(--sizes-full)
        }

        .select__trigger:is(:placeholder-shown, [data-placeholder-shown]) {
            color: var(--colors-fg-subtle)
        }

        .select__trigger:is(:disabled, [disabled], [data-disabled]) {
            color: var(--colors-fg-disabled);
            cursor: not-allowed
        }

        .select__trigger:is(:disabled, [disabled], [data-disabled]) :where(svg) {
            color: var(--colors-fg-disabled)
        }

        .select__trigger :where(svg) {
            color: var(--colors-fg-subtle)
        }

        .select__item {
            align-items: center;
            border-radius: var(--radii-l1);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            --transition-duration: var(--durations-fast);
            transition-duration: var(--durations-fast);
            --transition-prop: background, color;
            transition-property: background, color;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default)
        }

        .select__item[data-highlighted] {
            background: var(--colors-gray-a3);
            color: var(--colors-fg-default)
        }

        .select__item:is([aria-selected=true], [data-selected]) {
            color: var(--colors-fg-default)
        }

        .select__item:is(:disabled, [disabled], [data-disabled]) {
            color: var(--colors-fg-disabled);
            cursor: not-allowed
        }

        .select__item:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
            background: var(--colors-transparent);
            color: var(--colors-fg-disabled)
        }

        .select__item:is(:hover, [data-hover]) {
            background: var(--colors-gray-a3);
            color: var(--colors-fg-default)
        }

        .select__itemIndicator {
            color: var(--colors-color-palette-default)
        }

        .select__itemGroupLabel {
            font-weight: var(--font-weights-semibold);
            font-size: var(--font-sizes-sm);
            line-height: 1.25rem
        }

        .select__content {
            background: var(--colors-bg-default);
            border-radius: var(--radii-l2);
            box-shadow: var(--shadows-lg);
            display: flex;
            flex-direction: column;
            z-index: var(--z-index-dropdown)
        }

        .select__content:is([hidden]) {
            display: none
        }

        .select__content:is([open], [data-state=open]) {
            animation: fadeIn .25s ease-out
        }

        .select__content:is([data-state=closed]) {
            animation: fadeOut .2s ease-out
        }

        .select__content:is(:focus-visible, [data-focus-visible]) {
            outline-offset: 2px;
            outline: 2px solid;
            outline-color: var(--colors-border-outline)
        }

        .select__root {
            --colors-color-palette-1: var(--colors-accent-1);
            --colors-color-palette-2: var(--colors-accent-2);
            --colors-color-palette-3: var(--colors-accent-3);
            --colors-color-palette-4: var(--colors-accent-4);
            --colors-color-palette-5: var(--colors-accent-5);
            --colors-color-palette-6: var(--colors-accent-6);
            --colors-color-palette-7: var(--colors-accent-7);
            --colors-color-palette-8: var(--colors-accent-8);
            --colors-color-palette-9: var(--colors-accent-9);
            --colors-color-palette-10: var(--colors-accent-10);
            --colors-color-palette-11: var(--colors-accent-11);
            --colors-color-palette-12: var(--colors-accent-12);
            --colors-color-palette-a1: var(--colors-accent-a1);
            --colors-color-palette-a2: var(--colors-accent-a2);
            --colors-color-palette-a3: var(--colors-accent-a3);
            --colors-color-palette-a4: var(--colors-accent-a4);
            --colors-color-palette-a5: var(--colors-accent-a5);
            --colors-color-palette-a6: var(--colors-accent-a6);
            --colors-color-palette-a7: var(--colors-accent-a7);
            --colors-color-palette-a8: var(--colors-accent-a8);
            --colors-color-palette-a9: var(--colors-accent-a9);
            --colors-color-palette-a10: var(--colors-accent-a10);
            --colors-color-palette-a11: var(--colors-accent-a11);
            --colors-color-palette-a12: var(--colors-accent-a12);
            --colors-color-palette-default: var(--colors-accent-default);
            --colors-color-palette-emphasized: var(--colors-accent-emphasized);
            --colors-color-palette-fg: var(--colors-accent-fg);
            --colors-color-palette-text: var(--colors-accent-text);
            display: flex;
            flex-direction: column;
            gap: var(--spacing-1\.5);
            width: var(--sizes-full)
        }

        .menu__triggerItem {
            align-items: center;
            border-radius: var(--radii-l1);
            cursor: pointer;
            display: flex;
            font-weight: var(--font-weights-medium);
            font-size: var(--font-sizes-sm);
            line-height: 1.25rem;
            --transition-duration: var(--durations-fast);
            transition-duration: var(--durations-fast);
            --transition-prop: background, color;
            transition-property: background, color;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default)
        }

        .menu__triggerItem[data-highlighted] {
            background: var(--colors-bg-muted)
        }

        .menu__triggerItem :where(svg) {
            color: var(--colors-fg-muted)
        }

        .menu__triggerItem:is(:hover, [data-hover]) {
            background: var(--colors-bg-muted)
        }

        .menu__triggerItem:is(:hover, [data-hover]) :where(svg) {
            color: var(--colors-fg-default)
        }

        .menu__content,
        .menu__positioner {
            z-index: var(--z-index-dropdown)
        }

        .menu__content {
            background: var(--colors-bg-default);
            border-radius: var(--radii-l2);
            box-shadow: var(--shadows-lg);
            display: flex;
            flex-direction: column;
            outline: var(--borders-none);
            width: calc(100% + 2rem)
        }

        .menu__content:is([hidden]) {
            display: none
        }

        .menu__content:is([open], [data-state=open]) {
            animation: fadeIn .25s ease-out
        }

        .menu__content:is([data-state=closed]) {
            animation: fadeOut .2s ease-out
        }

        .menu__item {
            align-items: center;
            border-radius: var(--radii-l1);
            cursor: pointer;
            display: flex;
            font-weight: var(--font-weights-medium);
            font-size: var(--font-sizes-sm);
            line-height: 1.25rem;
            --transition-duration: var(--durations-fast);
            transition-duration: var(--durations-fast);
            --transition-prop: background, color;
            transition-property: background, color;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default)
        }

        .menu__item[data-highlighted] {
            background: var(--colors-bg-muted)
        }

        .menu__item :where(svg) {
            color: var(--colors-fg-muted)
        }

        .menu__item:is(:hover, [data-hover]) {
            background: var(--colors-bg-muted)
        }

        .menu__item:is(:hover, [data-hover]) :where(svg) {
            color: var(--colors-fg-default)
        }

        .menu__optionItem {
            align-items: center;
            border-radius: var(--radii-l1);
            cursor: pointer;
            display: flex;
            font-weight: var(--font-weights-medium);
            font-size: var(--font-sizes-sm);
            line-height: 1.25rem;
            --transition-duration: var(--durations-fast);
            transition-duration: var(--durations-fast);
            --transition-prop: background, color;
            transition-property: background, color;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default)
        }

        .menu__optionItem[data-highlighted] {
            background: var(--colors-bg-muted)
        }

        .menu__optionItem :where(svg) {
            color: var(--colors-fg-muted)
        }

        .menu__optionItem:is(:hover, [data-hover]) {
            background: var(--colors-bg-muted)
        }

        .menu__optionItem:is(:hover, [data-hover]) :where(svg) {
            color: var(--colors-fg-default)
        }

        .menu__itemGroupLabel {
            font-weight: var(--font-weights-semibold);
            font-size: var(--font-sizes-sm);
            line-height: 1.25rem
        }

        .menu__itemGroup {
            display: flex;
            flex-direction: column
        }

        .tooltip__content {
            background: var(--colors-gray-a12);
            border-radius: var(--radii-l2);
            box-shadow: var(--shadows-sm);
            color: var(--colors-bg-default);
            font-weight: var(--font-weights-semibold);
            padding-inline: var(--spacing-3);
            padding-block: var(--spacing-2);
            font-size: var(--font-sizes-xs);
            line-height: 1.125rem;
            max-width: var(--sizes-2xs)
        }

        .tooltip__content:is([open], [data-state=open]) {
            animation: fadeIn .25s ease-out
        }

        .tooltip__content:is([data-state=closed]) {
            animation: fadeOut .2s ease-out
        }

        .accordion__root>:not([hidden])~:not([hidden]) {
            border-top-width: 1px;
            border-bottom-width: 0
        }

        .accordion__root {
            width: var(--sizes-full);
            border-top-width: 1px;
            border-bottom-width: 1px
        }

        .accordion__itemTrigger {
            align-items: center;
            color: var(--colors-fg-default);
            cursor: pointer;
            display: flex;
            font-weight: var(--font-weights-semibold);
            gap: var(--spacing-3);
            justify-content: space-between;
            font-size: var(--font-sizes-lg);
            line-height: 1.75rem;
            text-align: left;
            width: var(--sizes-full)
        }

        .accordion__itemTrigger:is(:disabled, [disabled], [data-disabled]) {
            color: var(--colors-fg-disabled);
            cursor: not-allowed
        }

        .accordion__itemContent {
            color: var(--colors-fg-muted);
            overflow: hidden;
            --transition-prop: padding-bottom;
            transition-property: padding-bottom;
            --transition-duration: var(--durations-normal);
            transition-duration: var(--durations-normal);
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default)
        }

        .accordion__itemContent:is([open], [data-state=open]) {
            animation: var(--animations-collapse-in)
        }

        .accordion__itemContent:is([data-state=closed]) {
            animation: var(--animations-collapse-out)
        }

        .accordion__itemIndicator {
            color: var(--colors-fg-muted);
            transform-origin: center;
            --transition-duration: var(--durations-normal);
            transition-duration: var(--durations-normal);
            --transition-prop: transform;
            transition-property: transform;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default)
        }

        .accordion__itemIndicator:is([open], [data-state=open]) {
            transform: rotate(-180deg)
        }

        .combobox__root {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-1\.5);
            width: var(--sizes-full)
        }

        .combobox__label {
            color: var(--colors-fg-default);
            font-weight: var(--font-weights-medium)
        }

        .combobox__control {
            position: relative
        }

        .combobox__trigger {
            bottom: var(--spacing-0);
            color: var(--colors-fg-muted);
            position: absolute;
            right: var(--spacing-0);
            top: var(--spacing-0)
        }

        .combobox__content {
            background: var(--colors-bg-default);
            border-radius: var(--radii-l2);
            box-shadow: var(--shadows-lg);
            display: flex;
            flex-direction: column;
            z-index: var(--z-index-dropdown)
        }

        .combobox__content:is([hidden]) {
            display: none
        }

        .combobox__content:is([open], [data-state=open]) {
            animation: fadeIn .25s ease-out
        }

        .combobox__content:is([data-state=closed]) {
            animation: fadeOut .2s ease-out
        }

        .combobox__content:is(:focus-visible, [data-focus-visible]) {
            outline-offset: 2px;
            outline: 2px solid;
            outline-color: var(--colors-border-outline)
        }

        .combobox__item {
            align-items: center;
            border-radius: var(--radii-l1);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            --transition-duration: var(--durations-fast);
            transition-duration: var(--durations-fast);
            --transition-prop: background, color;
            transition-property: background, color;
            --transition-easing: var(--easings-default);
            transition-timing-function: var(--easings-default)
        }

        .combobox__item[data-highlighted] {
            background: var(--colors-bg-muted)
        }

        .combobox__item:is(:disabled, [disabled], [data-disabled]) {
            color: var(--colors-fg-disabled);
            cursor: not-allowed
        }

        .combobox__item:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
            background: var(--colors-transparent)
        }

        .combobox__item:is(:hover, [data-hover]) {
            background: var(--colors-bg-muted)
        }

        .combobox__itemIndicator {
            color: var(--colors-color-palette-default)
        }

        .combobox__itemGroupLabel {
            font-weight: var(--font-weights-semibold);
            font-size: var(--font-sizes-sm);
            line-height: 1.25rem
        }

        .fileUpload__root {
            gap: var(--spacing-4);
            width: 100%
        }

        .fileUpload__dropzone,
        .fileUpload__root {
            display: flex;
            flex-direction: column
        }

        .fileUpload__dropzone {
            align-items: center;
            gap: var(--spacing-3);
            justify-content: center;
            min-height: var(--sizes-xs);
            padding-inline: var(--spacing-6);
            padding-block: var(--spacing-4)
        }

        .fileUpload__dropzone,
        .fileUpload__item {
            background: var(--colors-bg-default);
            border-radius: var(--radii-l3);
            border-width: 1px
        }

        .fileUpload__item {
            animation: fadeIn .25s ease-out;
            column-gap: var(--spacing-3);
            display: grid;
            grid-template-columns: auto 1fr auto;
            grid-template-areas: "preview name delete" "preview size delete";
            padding: var(--spacing-4)
        }

        .fileUpload__itemDeleteTrigger {
            align-self: flex-start;
            grid-area: delete
        }

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

        .fileUpload__itemName {
            color: var(--colors-fg-default);
            font-weight: var(--font-weights-medium);
            grid-area: name;
            font-size: var(--font-sizes-sm);
            line-height: 1.25rem
        }

        .fileUpload__itemPreview {
            grid-area: preview
        }

        .fileUpload__itemPreviewImage {
            aspect-ratio: 1;
            height: var(--sizes-10);
            object-fit: scale-down;
            width: var(--sizes-10)
        }

        .fileUpload__itemSizeText {
            color: var(--colors-fg-muted);
            grid-area: size
        }

        .fileUpload__itemSizeText,
        .fileUpload__label {
            font-size: var(--font-sizes-sm);
            line-height: 1.25rem
        }

        .fileUpload__label {
            font-weight: var(--font-weights-medium)
        }

        .popover__arrow {
            --arrow-size: var(--sizes-3);
            --arrow-background: var(--colors-bg-default)
        }

        .popover__arrowTip {
            border-top-width: 1px;
            border-left-width: 1px
        }

        .popover__positioner {
            position: relative
        }

        .popover__content {
            background: var(--colors-bg-default);
            border-radius: var(--radii-l3);
            box-shadow: var(--shadows-lg);
            display: flex;
            flex-direction: column;
            max-width: var(--sizes-sm);
            z-index: var(--z-index-popover);
            padding: var(--spacing-4)
        }

        .popover__content:is([open], [data-state=open]) {
            animation: fadeIn .25s ease-out
        }

        .popover__content:is([data-state=closed]) {
            animation: fadeOut .2s ease-out
        }

        .popover__content:is([hidden]) {
            display: none
        }

        .popover__title {
            font-weight: var(--font-weights-medium)
        }

        .popover__description,
        .popover__title {
            font-size: var(--font-sizes-sm);
            line-height: 1.25rem
        }

        .popover__closeTrigger,
        .popover__description {
            color: var(--colors-fg-muted)
        }

        .clipboard__root {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-1\.5)
        }

        .clipboard__control {
            display: flex;
            gap: var(--spacing-3)
        }

        @media screen and (min-width:40em) {
            .drawer__positioner {
                width: var(--sizes-sm)
            }
        }

        @media screen and (min-width:48em) {
            .drawer__header {
                padding-top: var(--spacing-6);
                padding-inline: var(--spacing-6)
            }

            .drawer__body {
                padding: var(--spacing-6)
            }

            .drawer__footer {
                padding-inline: var(--spacing-6)
            }
        }
    }

    .drawer__positioner--variant_right {
        right: var(--spacing-0)
    }

    .drawer__content--variant_right:is([open], [data-state=open]) {
        animation: var(--animations-drawer-in-right)
    }

    .drawer__content--variant_right:is([data-state=closed]) {
        animation: var(--animations-drawer-out-right)
    }

    .table__root--size_md {
        font-size: var(--font-sizes-sm);
        line-height: 1.25rem
    }

    .table__cell--size_md {
        height: var(--sizes-14);
        padding-inline: var(--spacing-4)
    }

    .table__header--size_md {
        height: var(--sizes-11);
        padding-inline: var(--spacing-4)
    }

    .table__caption--size_md {
        margin-top: var(--spacing-4)
    }

    .table__row--variant_plain:is([aria-selected=true], [data-selected]) {
        background: var(--colors-bg-muted)
    }

    .table__row--variant_plain:is(:hover, [data-hover]) {
        background: var(--colors-bg-subtle)
    }

    .tabs__trigger--size_md svg {
        width: var(--sizes-5);
        height: var(--sizes-5)
    }

    .tabs__list--variant_line[data-orientation=horizontal] {
        box-shadow: 0 -1px 0 0 inset var(--colors-border-default);
        gap: var(--spacing-4)
    }

    .tabs__list--variant_line[data-orientation=vertical] {
        box-shadow: 1px 0 0 0 inset var(--colors-border-default);
        gap: var(--spacing-1)
    }

    .tabs__trigger--variant_line[data-orientation=horizontal] {
        padding-bottom: var(--spacing-2\.5)
    }

    .tabs__content--variant_line {
        padding-top: var(--spacing-4)
    }

    .tabs__indicator--variant_line {
        background: var(--colors-color-palette-default)
    }

    .tabs__indicator--variant_line[data-orientation=horizontal] {
        bottom: var(--spacing-0);
        height: 2px;
        width: var(--width)
    }

    .tabs__indicator--variant_line[data-orientation=vertical] {
        height: var(--height);
        left: var(--spacing-0);
        width: 2px
    }

    .tabs__list--variant_enclosed {
        border-radius: var(--radii-l3);
        border-width: 1px;
        padding-inline: var(--spacing-1);
        background-color: var(--colors-gray-a2)
    }

    .dark .tabs__list--variant_enclosed,
    .tabs__list--variant_enclosed.dark {
        background-color: var(--colors-bg-canvas)
    }

    .tabs__list--variant_enclosed[data-orientation=horizontal] {
        align-items: center
    }

    .tabs__list--variant_enclosed[data-orientation=vertical] {
        height: fit-content !important;
        padding-block: var(--spacing-1)
    }

    .tabs__indicator--variant_enclosed {
        background-color: var(--colors-bg-default);
        box-shadow: var(--shadows-xs);
        border-radius: var(--radii-l2);
        --transition-duration: 200ms !important;
        height: var(--height);
        width: var(--width)
    }

    .dark .tabs__indicator--variant_enclosed,
    .tabs__indicator--variant_enclosed.dark {
        background-color: var(--colors-bg-subtle)
    }

    .avatar__image--size_md,
    .avatar__root--size_md {
        height: var(--sizes-10);
        width: var(--sizes-10)
    }

    .avatar__fallback--size_md {
        font-size: var(--font-sizes-md);
        line-height: 1.5rem
    }

    .avatar__fallback--size_md svg {
        width: var(--sizes-5);
        height: var(--sizes-5)
    }

    .avatar__image--size_lg,
    .avatar__root--size_lg {
        height: var(--sizes-11);
        width: var(--sizes-11)
    }

    .avatar__fallback--size_lg {
        font-size: var(--font-sizes-lg);
        line-height: 1.75rem
    }

    .avatar__fallback--size_lg svg {
        width: var(--sizes-6);
        height: var(--sizes-6)
    }

    .avatar__image--size_xs,
    .avatar__root--size_xs {
        height: var(--sizes-8);
        width: var(--sizes-8)
    }

    .avatar__fallback--size_xs {
        font-size: var(--font-sizes-xs);
        line-height: 1.125rem
    }

    .avatar__fallback--size_xs svg {
        width: var(--sizes-4);
        height: var(--sizes-4)
    }

    .checkbox__root--size_md {
        gap: var(--spacing-3)
    }

    .checkbox__label--size_md {
        font-size: var(--font-sizes-md);
        line-height: 1.5rem
    }

    .checkbox__control--size_md {
        width: var(--sizes-5);
        height: var(--sizes-5);
        border-radius: var(--radii-l1)
    }

    .checkbox__control--size_md svg {
        width: var(--sizes-3\.5);
        height: var(--sizes-3\.5)
    }

    .switchRecipe__root--size_md {
        gap: var(--spacing-3)
    }

    .switchRecipe__label--size_md {
        font-size: var(--font-sizes-md);
        line-height: 1.5rem
    }

    .switchRecipe__control--size_md {
        width: var(--sizes-9);
        padding: var(--spacing-0\.5)
    }

    .switchRecipe__thumb--size_md {
        width: var(--sizes-4);
        height: var(--sizes-4)
    }

    .radioGroup__root--size_sm[data-orientation=vertical] {
        gap: var(--spacing-3)
    }

    .radioGroup__root--size_sm[data-orientation=horizontal] {
        gap: var(--spacing-4)
    }

    .radioGroup__item--size_sm {
        gap: var(--spacing-2)
    }

    .radioGroup__itemText--size_sm {
        font-size: var(--font-sizes-sm);
        line-height: 1.25rem
    }

    .radioGroup__itemControl--size_sm {
        width: var(--sizes-4);
        height: var(--sizes-4)
    }

    .radioGroup__itemControl--size_sm:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) {
        outline-width: 3px;
        outline-offset: -4px
    }

    .radioGroup__root--size_md[data-orientation=vertical] {
        gap: var(--spacing-4)
    }

    .radioGroup__root--size_md[data-orientation=horizontal] {
        gap: var(--spacing-6)
    }

    .radioGroup__item--size_md {
        gap: var(--spacing-3)
    }

    .radioGroup__itemText--size_md {
        font-size: var(--font-sizes-md);
        line-height: 1.5rem
    }

    .radioGroup__itemControl--size_md {
        width: var(--sizes-5);
        height: var(--sizes-5)
    }

    .radioGroup__itemControl--size_md:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) {
        outline-width: 4px;
        outline-offset: -5px
    }

    .select__label--size_md {
        font-size: var(--font-sizes-sm);
        line-height: 1.25rem
    }

    .select__trigger--size_md {
        padding-inline: var(--spacing-3);
        height: var(--sizes-10);
        min-width: var(--sizes-10);
        font-size: var(--font-sizes-md);
        gap: var(--spacing-2)
    }

    .select__trigger--size_md :where(svg) {
        width: var(--sizes-4);
        height: var(--sizes-4)
    }

    .select__item--size_md {
        font-size: var(--font-sizes-md);
        line-height: 1.5rem;
        padding-inline: var(--spacing-2);
        height: var(--sizes-10)
    }

    .select__itemIndicator--size_md :where(svg) {
        width: var(--sizes-4);
        height: var(--sizes-4)
    }

    .select__itemGroupLabel--size_md {
        padding-inline: var(--spacing-2);
        padding-block: var(--spacing-1\.5)
    }

    .select__content--size_md {
        padding: var(--spacing-1);
        gap: var(--spacing-1)
    }

    .select__trigger--variant_outline {
        border-width: 1px
    }

    .select__trigger--variant_outline:is(:focus, [data-focus]) {
        border-color: var(--colors-color-palette-default);
        box-shadow: 0 0 0 1px var(--colors-color-palette-default)
    }

    .menu__triggerItem--size_md {
        height: var(--sizes-10);
        padding-inline: var(--spacing-2\.5);
        margin-inline: var(--spacing-1\.5)
    }

    .menu__triggerItem--size_md :where(svg) {
        width: var(--sizes-4);
        height: var(--sizes-4)
    }

    .menu__content--size_md {
        padding-block: var(--spacing-1);
        gap: var(--spacing-1)
    }

    .menu__item--size_md {
        height: var(--sizes-10);
        padding-inline: var(--spacing-2\.5);
        margin-inline: var(--spacing-1)
    }

    .menu__item--size_md :where(svg) {
        width: var(--sizes-4);
        height: var(--sizes-4)
    }

    .menu__optionItem--size_md {
        height: var(--sizes-10);
        padding-inline: var(--spacing-2\.5);
        margin-inline: var(--spacing-1)
    }

    .menu__optionItem--size_md :where(svg) {
        width: var(--sizes-4);
        height: var(--sizes-4)
    }

    .menu__itemGroupLabel--size_md {
        padding-block: var(--spacing-2\.5);
        padding-inline: var(--spacing-2\.5);
        margin-inline: var(--spacing-1)
    }

    .menu__itemGroup--size_md {
        gap: var(--spacing-1)
    }

    .accordion__itemTrigger--size_md {
        padding-block: var(--spacing-4)
    }

    .accordion__itemContent--size_md {
        padding-bottom: var(--spacing-6);
        padding-right: var(--spacing-8)
    }

    .accordion__itemContent--size_md:is([data-state=closed]) {
        padding-bottom: var(--spacing-0)
    }

    .combobox__label--size_md {
        font-size: var(--font-sizes-sm);
        line-height: 1.25rem
    }

    .combobox__trigger--size_md {
        right: var(--spacing-3)
    }

    .combobox__content--size_md {
        padding: var(--spacing-1);
        gap: var(--spacing-1)
    }

    .combobox__item--size_md {
        font-size: var(--font-sizes-md);
        line-height: 1.5rem;
        padding-inline: var(--spacing-2);
        height: var(--sizes-10)
    }

    .combobox__itemIndicator--size_md :where(svg) {
        width: var(--sizes-4);
        height: var(--sizes-4)
    }

    .combobox__itemGroupLabel--size_md {
        padding-inline: var(--spacing-2);
        padding-block: var(--spacing-1\.5)
    }
}

@layer utilities {
    @layer compositions {
        .textStyle_2xl {
            font-size: var(--font-sizes-2xl);
            line-height: 2rem
        }

        .textStyle_lg {
            font-size: var(--font-sizes-lg);
            line-height: 1.75rem
        }

        .textStyle_sm {
            font-size: var(--font-sizes-sm);
            line-height: 1.25rem
        }

        .textStyle_xs {
            font-size: var(--font-sizes-xs);
            line-height: 1.125rem
        }

        .textStyle_md {
            font-size: var(--font-sizes-md);
            line-height: 1.5rem
        }

        .textStyle_xl {
            font-size: var(--font-sizes-xl);
            line-height: 1.875rem
        }

        .textStyle_6xl {
            font-size: var(--font-sizes-6xl);
            line-height: 4.5rem;
            letter-spacing: -.02em
        }

        @media screen and (min-width:40em) {
            .sm\:textStyle_5xl {
                font-size: var(--font-sizes-5xl);
                line-height: 3.75rem;
                letter-spacing: -.02em
            }

            .sm\:textStyle_md {
                font-size: var(--font-sizes-md);
                line-height: 1.5rem
            }
        }

        @media screen and (min-width:48em) {
            .md\:textStyle_6xl {
                font-size: var(--font-sizes-6xl);
                line-height: 4.5rem;
                letter-spacing: -.02em
            }
        }
    }

    .h_100svh {
        height: 100svh
    }

    .d_flex {
        display: flex
    }

    .flex_column {
        flex-direction: column
    }

    .justify_center {
        justify-content: center
    }

    .items_center {
        align-items: center
    }

    .px_8 {
        padding-inline: var(--spacing-8)
    }

    .gap_10px {
        gap: 10px
    }

    .max-w_4xl {
        max-width: var(--sizes-4xl)
    }

    .text_center {
        text-align: center
    }

    .mx_auto {
        margin-inline: auto
    }

    .p_8 {
        padding: var(--spacing-8)
    }

    .border_2px_dashed_\#A294FA {
        border: 2px dashed #a294fa
    }

    .fs_64px {
        font-size: 64px
    }

    .text_\#6D56FA {
        color: #6d56fa
    }

    .font_normal {
        font-weight: var(--font-weights-normal)
    }

    .font_medium {
        font-weight: var(--font-weights-medium)
    }

    .text_\#4F4F4F {
        color: #4f4f4f
    }

    .\--thickness_1px {
        --thickness: 1px
    }

    .w_100\% {
        width: 100%
    }

    .border-block-end-width_var\(--thickness\) {
        border-block-end-width: var(--thickness)
    }

    .d_none {
        display: none
    }

    .d_inline {
        display: inline
    }

    .fs_sm {
        font-size: var(--font-sizes-sm)
    }

    .bg_\#6D56FA1A {
        background-color: #6d56fa1a
    }

    .w_26px {
        width: 26px
    }

    .min-w_26px {
        min-width: 26px
    }

    .min-h_26px {
        min-height: 26px
    }

    .h_26px {
        height: 26px
    }

    .rounded_50\% {
        border-radius: 50%
    }

    .cursor_pointer {
        cursor: pointer
    }

    .flex_1 {
        flex: 1 1 0%
    }

    .py_4 {
        padding-block: var(--spacing-4)
    }

    .px_2 {
        padding-inline: var(--spacing-2)
    }

    .bg_\#FFFFFF {
        background-color: #fff
    }

    .border_1px_solid_\#15112B1A {
        border: 1px solid #15112b1a
    }

    .rounded_md {
        border-radius: var(--radii-md)
    }

    .h_56px {
        height: 56px
    }

    .fs_lg {
        font-size: var(--font-sizes-lg)
    }

    .leading_sm {
        line-height: sm
    }

    .white-space_nowrap {
        white-space: nowrap
    }

    .text_\#15112b {
        color: #15112b
    }

    .overflow_hidden {
        overflow: hidden
    }

    .text_ellipsis {
        text-overflow: ellipsis
    }

    .justify_flex-start {
        justify-content: flex-start
    }

    .gap_3 {
        gap: var(--spacing-3)
    }

    .bg_\#15112B0D {
        background: #15112b0d
    }

    .px_9px {
        padding-inline: 9px
    }

    .py_5px {
        padding-block: 5px
    }

    .h_100\% {
        height: 100%
    }

    .pos_relative {
        position: relative
    }

    .overflow-x_clip {
        overflow-x: clip
    }

    .right_-500px {
        right: -500px
    }

    .right_initial {
        right: auto
    }

    .opacity_0\% {
        opacity: 0
    }

    .opacity_100\% {
        opacity: 100%
    }

    .cursor_ew-resize {
        cursor: ew-resize
    }

    .w_6px {
        width: 6px
    }

    .border-r_2px_solid_\#E5E5E5 {
        border-right: 2px solid #e5e5e5
    }

    .overflow-y_auto {
        overflow-y: auto
    }

    .pos_absolute {
        position: absolute
    }

    .bottom_20px {
        bottom: 20px
    }

    .border-t_0 {
        border-top: 0
    }

    .bg_\#15112B {
        background: #15112b
    }

    .pr_80px {
        padding-right: 80px
    }

    .right_4px {
        right: 4px
    }

    .top_50\% {
        top: 50%
    }

    .transform_translateY\(-50\%\) {
        transform: translateY(-50%)
    }

    .w_600px {
        width: 600px
    }

    .fs_md {
        font-size: var(--font-sizes-md)
    }

    .px_4 {
        padding-inline: var(--spacing-4)
    }

    .bg_\#15112B0D {
        background-color: #15112b0d
    }

    .text_\#15112B {
        color: #15112b
    }

    .border_1px_dashed_\#15112B1A {
        border: 1px dashed #15112b1a
    }

    .gap_5 {
        gap: var(--spacing-5)
    }

    .justify_space-between {
        justify-content: space-between
    }

    .mt_5 {
        margin-top: var(--spacing-5)
    }

    .items_flex-start {
        align-items: flex-start
    }

    .flex_row {
        flex-direction: row
    }

    .text_rgba\(109\,_86\,_250\,_1\) {
        color: #6d56fa
    }

    .fs_2xl {
        font-size: var(--font-sizes-2xl)
    }

    .leading_3xl {
        line-height: 3xl
    }

    .font_500 {
        font-weight: 500
    }

    .text_rgba\(21\,_17\,_43\,_1\) {
        color: #15112b
    }

    .d_block {
        display: block
    }

    .text_rgba\(21\,_17\,_43\,_0\.7\) {
        color: rgba(21, 17, 43, .7)
    }

    .fs_16 {
        font-size: 16px
    }

    .left_8px {
        left: 8px
    }

    .text_quizard\.black {
        color: var(--colors-quizard-black)
    }

    .pointer-events_none {
        pointer-events: none
    }

    .pl_32px {
        padding-left: 32px
    }

    .font_var\(--font-gt-walsheim\) {
        font-family: var(--font-gt-walsheim)
    }

    .border_\#e7e8ea {
        border-color: #e7e8ea
    }

    .h_4px {
        height: 4px
    }

    .text_black {
        color: var(--colors-black)
    }

    .h_100vh {
        height: 100vh
    }

    .bg_\#F8F8F8 {
        background-color: #f8f8f8
    }

    .px_7\% {
        padding-inline: 7%
    }

    .py_5 {
        padding-block: var(--spacing-5)
    }

    .overflow_auto {
        overflow: auto
    }

    .bg_\#15112b {
        background-color: #15112b
    }

    .w_65\% {
        width: 65%
    }

    .py_10 {
        padding-block: var(--spacing-10)
    }

    .min-w_500px {
        min-width: 500px
    }

    .h_calc\(100\%_-_60px_-_40px\) {
        height: calc(100% - 60px - 40px)
    }

    .gap_4 {
        gap: var(--spacing-4)
    }

    .gap_8 {
        gap: var(--spacing-8)
    }

    .p_6 {
        padding: var(--spacing-6)
    }

    .gap_1 {
        gap: var(--spacing-1)
    }

    .text_rgb\(140\,140\,140\,0\.8\) {
        color: hsla(0, 0%, 55%, .8)
    }

    .opacity_50\% {
        opacity: 50%
    }

    .resize_none {
        resize: none
    }

    .h_24px {
        height: 24px
    }

    .mt_7px {
        margin-top: 7px
    }

    .bg_inherit {
        background: inherit
    }

    .w_27\.5px {
        width: 27.5px
    }

    .h_27\.5px {
        height: 27.5px
    }

    .shadow_0px_1\.58px_0px_0px_\#E2E2E2 {
        box-shadow: 0 1.58px 0 0 #e2e2e2
    }

    .border_0\.39px_solid_\#E2E2E2 {
        border: .39px solid #e2e2e2
    }

    .rounded_4\.73px {
        border-radius: 4.73px
    }

    .shrink_0 {
        flex-shrink: 0
    }

    .fs_10px {
        font-size: 10px
    }

    .bg_white {
        background-color: var(--colors-white)
    }

    .bg_\#ffffff {
        background-color: #fff
    }

    .h_50vh {
        height: 50vh
    }

    .border_1\.5px_solid_rgba\(21\,_17\,_43\,_0\.1\) {
        border: 1.5px solid rgba(21, 17, 43, .1)
    }

    .w_80\% {
        width: 80%
    }

    .m_auto {
        margin: auto
    }

    .p_20px {
        padding: 20px
    }

    .rounded_20px {
        border-radius: 20px
    }

    .mb_0 {
        margin-bottom: var(--spacing-0)
    }

    .text_rgba\(13\,_13\,_18\,_1\) {
        color: #0d0d12
    }

    .text_rgba\(13\,_13\,_18\,_0\.6\) {
        color: rgba(13, 13, 18, .6)
    }

    .fs_14 {
        font-size: 14px
    }

    .mb_19 {
        margin-bottom: 19px
    }

    .p_5 {
        padding: var(--spacing-5)
    }

    .bg_rgba\(248\,_248\,_249\,_1\) {
        background-color: #f8f8f9
    }

    .p_4 {
        padding: var(--spacing-4)
    }

    .px_5\% {
        padding-inline: 5%
    }

    .scrollbar-color_rgba\(0\,_0\,_0\,_0\.2\)_transparent {
        scrollbar-color: rgba(0, 0, 0, .2) transparent
    }

    .pb_20px {
        padding-bottom: 20px
    }

    .w_30\% {
        width: 30%
    }

    .h_32px {
        height: 32px
    }

    .h_200px {
        height: 200px
    }

    .gap_6 {
        gap: var(--spacing-6)
    }

    .top_4 {
        top: var(--spacing-4)
    }

    .right_4 {
        right: var(--spacing-4)
    }

    .z_1 {
        z-index: 1
    }

    .h_10 {
        height: var(--sizes-10)
    }

    .h_8 {
        height: var(--sizes-8)
    }

    .min-w_8 {
        min-width: var(--sizes-8)
    }

    .px_3 {
        padding-inline: var(--spacing-3)
    }

    .p_3\.5 {
        padding: var(--spacing-3\.5)
    }

    .h_11 {
        height: var(--sizes-11)
    }

    .h_9 {
        height: var(--sizes-9)
    }

    .min-w_9 {
        min-width: var(--sizes-9)
    }

    .px_3\.5 {
        padding-inline: var(--spacing-3\.5)
    }

    .h_12 {
        height: var(--sizes-12)
    }

    .min-w_10 {
        min-width: var(--sizes-10)
    }

    .p_4\.5 {
        padding: var(--spacing-4\.5)
    }

    .min-w_11 {
        min-width: var(--sizes-11)
    }

    .px_4\.5 {
        padding-inline: var(--spacing-4\.5)
    }

    .px_2\.5 {
        padding-inline: var(--spacing-2\.5)
    }

    .pt_3 {
        padding-top: var(--spacing-3)
    }

    .pt_4 {
        padding-top: var(--spacing-4)
    }

    .pt_5 {
        padding-top: var(--spacing-5)
    }

    .text_\#15112B80 {
        color: #15112b80
    }

    .overflow-y_clip {
        overflow-y: clip
    }

    .font_semibold {
        font-weight: var(--font-weights-semibold)
    }

    .text_\#292829 {
        color: #292829
    }

    .bg_rgba\(21\,_17\,_43\,_0\.05\) {
        background: rgba(21, 17, 43, .05)
    }

    .overflow_clip {
        overflow: clip
    }

    .w_19px {
        width: 19px
    }

    .h_19px {
        height: 19px
    }

    .fill_none {
        fill: none
    }

    .w_300px {
        width: 300px
    }

    .w_200px {
        width: 200px
    }

    .gap_0 {
        gap: var(--spacing-0)
    }

    .bg_\#FCFCFC {
        background: #fcfcfc
    }

    .border-r_1px_solid_token\(colors\.gray\.4\) {
        border-right: 1px solid var(--colors-gray-4)
    }

    .overflow-y_hidden {
        overflow-y: hidden
    }

    .overflow-x_hidden {
        overflow-x: hidden
    }

    .scrollbar-color_rgba\(0\,_0\,_0\,_0\.1\)_transparent {
        scrollbar-color: rgba(0, 0, 0, .1) transparent
    }

    .min-h_0 {
        min-height: var(--sizes-0)
    }

    .flex-wrap_wrap {
        flex-wrap: wrap
    }

    .gap_2 {
        gap: var(--spacing-2)
    }

    .text_rgb\(21\,_17\,_43\,0\.5\) {
        color: rgba(21, 17, 43, .5)
    }

    .w_26 {
        width: 26px
    }

    .h_19 {
        height: 19px
    }

    .gap_10 {
        gap: var(--spacing-10)
    }

    .bg_\#FBFBFA {
        background: #fbfbfa
    }

    .min-h_100vh {
        min-height: 100vh
    }

    .p_10 {
        padding: var(--spacing-10)
    }

    .h_80\% {
        height: 80%
    }

    .text_red\.dark\.10 {
        color: var(--colors-red-dark-10)
    }

    .font_bold {
        font-weight: var(--font-weights-bold)
    }

    .pb_5 {
        padding-bottom: var(--spacing-5)
    }

    .color-scheme_revert {
        color-scheme: revert
    }

    .bg_red\.dark\.9 {
        background: var(--colors-red-dark-9)
    }

    .bg_\#F8F8F9 {
        background: #f8f8f9
    }

    .animation_fade-in {
        animation: var(--animations-fade-in)
    }

    .text_red\.5 {
        color: var(--colors-red-5)
    }

    .shadow_0px_1px_3px_rgba\(13\,_13\,_18\,_0\.05\)\,_0px_1px_2px_rgba\(13\,_13\,_18\,_0\.04\) {
        box-shadow: 0 1px 3px rgba(13, 13, 18, .05), 0 1px 2px rgba(13, 13, 18, .04)
    }

    .border_0 {
        border: 0
    }

    .p_2 {
        padding: var(--spacing-2)
    }

    .text_\#6E6B7B {
        color: #6e6b7b
    }

    .max-w_300px {
        max-width: 300px
    }

    .text_\#6E6B7B80 {
        color: #6e6b7b80
    }

    .vis_hidden {
        visibility: hidden
    }

    .vis_visible {
        visibility: visible
    }

    .text_fg\.muted {
        color: var(--colors-fg-muted)
    }

    .h_full {
        height: var(--sizes-full)
    }

    .text_white {
        color: var(--colors-white)
    }

    .fs_5xl {
        font-size: var(--font-sizes-5xl)
    }

    .leading_2xl {
        line-height: 2xl
    }

    .mt_4 {
        margin-top: var(--spacing-4)
    }

    .border-w_1px {
        border-width: 1px
    }

    .border-style_solid {
        border-style: solid
    }

    .border_\#faebcc {
        border-color: #faebcc
    }

    .text_\#8a6d3b {
        color: #8a6d3b
    }

    .bg_\#fcf8e3 {
        background-color: #fcf8e3
    }

    .max-w_600px {
        max-width: 600px
    }

    .text_gray\.500 {
        color: gray.500
    }

    .fs_base {
        font-size: base
    }

    .leading_base {
        line-height: base
    }

    .mt_2 {
        margin-top: var(--spacing-2)
    }

    .w_90\% {
        width: 90%
    }

    .top_2 {
        top: var(--spacing-2)
    }

    .right_2 {
        right: var(--spacing-2)
    }

    .mb_2 {
        margin-bottom: var(--spacing-2)
    }

    .mt_3 {
        margin-top: var(--spacing-3)
    }

    .py_2 {
        padding-block: var(--spacing-2)
    }

    .border_1px_solid_rgb\(239\,_68\,_68\) {
        border: 1px solid #ef4444
    }

    .bg_rgba\(239\,_68\,_68\,_0\.1\) {
        background: rgba(239, 68, 68, .1)
    }

    .animation_fadeInOut_800ms_infinite {
        animation: fadeInOut .8s infinite
    }

    .d_inline-block {
        display: inline-block
    }

    .w_10px {
        width: 10px
    }

    .h_10px {
        height: 10px
    }

    .ml_4px {
        margin-left: 4px
    }

    .pt_6 {
        padding-top: var(--spacing-6)
    }

    .px_6 {
        padding-inline: var(--spacing-6)
    }

    .pb_6 {
        padding-bottom: var(--spacing-6)
    }

    .h_40px {
        height: 40px
    }

    .text_red {
        color: red
    }

    .w_80px {
        width: 80px
    }

    .bottom_100\% {
        bottom: 100%
    }

    .top_auto {
        top: auto
    }

    .max-h_300px {
        max-height: 300px
    }

    .pr_2 {
        padding-right: var(--spacing-2)
    }

    .pl_6 {
        padding-left: var(--spacing-6)
    }

    .rounded_2xl {
        border-radius: var(--radii-2xl)
    }

    .border_2px_solid_rgba\(224\,_226\,_229\,_0\.5\) {
        border: 2px solid hsla(216, 9%, 89%, .5)
    }

    .flex_auto {
        flex: 1 1 auto
    }

    .py_3 {
        padding-block: var(--spacing-3)
    }

    .text_rgba\(72\,_72\,_70\,_0\.2\) {
        color: rgba(72, 72, 70, .2)
    }

    .mt_3\.5 {
        margin-top: var(--spacing-3\.5)
    }

    .leading_xs {
        line-height: xs
    }

    .font_400 {
        font-weight: 400
    }

    .gap_1\.5 {
        gap: var(--spacing-1\.5)
    }

    .text_rgba\(163\,_163\,_162\,_1\) {
        color: #a3a3a2
    }

    .mt_12 {
        margin-top: var(--spacing-12)
    }

    .w_calc\(50\%_-_10px\) {
        width: calc(50% - 10px)
    }

    .h_100px {
        height: 100px
    }

    .rounded_12px {
        border-radius: 12px
    }

    .basis_calc\(50\%_-_10px\) {
        flex-basis: calc(50% - 10px)
    }

    .max-w_calc\(50\%_-_10px\) {
        max-width: calc(50% - 10px)
    }

    .justify_start {
        justify-content: start
    }

    .pt_7 {
        padding-top: var(--spacing-7)
    }

    .pb_7 {
        padding-bottom: var(--spacing-7)
    }

    .pr_10 {
        padding-right: var(--spacing-10)
    }

    .pl_10 {
        padding-left: var(--spacing-10)
    }

    .bg_rgba\(26\,_12\,_108\,_0\.06\) {
        background-color: rgba(26, 12, 108, .06)
    }

    .min-h_117px {
        min-height: 117px
    }

    .border_2px_solid_\#F8F8F8 {
        border: 2px solid #f8f8f8
    }

    .bg-img_url\(\"data\:image\/svg\+xml\,\%3csvg_width\=\'100\%25\'_height\=\'100\%25\'_xmlns\=\'http\:\/\/www\.w3\.org\/2000\/svg\'\%3e\%3crect_width\=\'100\%25\'_height\=\'100\%25\'_fill\=\'none\'_rx\=\'12\'_ry\=\'12\'_stroke\=\'rgba\(109\,_86\,_250\,_0\.3\)\'_stroke-width\=\'4\'_stroke-dasharray\=\'10\%2c14\'_stroke-dashoffset\=\'37\'_stroke-linecap\=\'square\'\/\%3e\%3c\/svg\%3e\"\) {
        background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='rgba(109, 86, 250, 0.3)' stroke-width='4' stroke-dasharray='10%2c14' stroke-dashoffset='37' stroke-linecap='square'/%3e%3c/svg%3e")
    }

    .bg-repeat_no-repeat {
        background-repeat: no-repeat
    }

    .bg_100\%_100\% {
        background-size: 100% 100%
    }

    .bottom_4 {
        bottom: var(--spacing-4)
    }

    .z_100 {
        z-index: 100
    }

    .fs_30px {
        font-size: 30px
    }

    .rounded_full {
        border-radius: var(--radii-full)
    }

    .h_50px {
        height: 50px
    }

    .w_50px {
        width: 50px
    }

    .p_0 {
        padding: var(--spacing-0)
    }

    .py_0 {
        padding-block: var(--spacing-0)
    }

    .gap_3\.5 {
        gap: var(--spacing-3\.5)
    }

    .h_220px {
        height: 220px
    }

    .h_calc\(100vh_-_130px\) {
        height: calc(100vh - 130px)
    }

    .overflow-y_scroll {
        overflow-y: scroll
    }

    .scrollbar-width_none {
        scrollbar-width: none
    }

    .p_1 {
        padding: var(--spacing-1)
    }

    .backdrop_auto {
        backdrop-filter: var(--backdrop-blur) var(--backdrop-brightness) var(--backdrop-contrast) var(--backdrop-grayscale) var(--backdrop-hue-rotate) var(--backdrop-invert) var(--backdrop-saturate) var(--backdrop-sepia);
        -webkit-backdrop-filter: var(--backdrop-blur) var(--backdrop-brightness) var(--backdrop-contrast) var(--backdrop-grayscale) var(--backdrop-hue-rotate) var(--backdrop-invert) var(--backdrop-saturate) var(--backdrop-sepia)
    }

    .backdrop_none {
        backdrop-filter: none;
        -webkit-backdrop-filter: none
    }

    .backdrop-blur_lg {
        --backdrop-blur: blur(var(--blurs-lg))
    }

    .backdrop-blur_none {
        --backdrop-blur: blur(none)
    }

    .bg_\#15112b60 {
        background: #15112b60
    }

    .bg_transparent {
        background: var(--colors-transparent)
    }

    .pointer-events_all {
        pointer-events: all
    }

    .top_0 {
        top: var(--spacing-0)
    }

    .left_0 {
        left: var(--spacing-0)
    }

    .z_1000 {
        z-index: 1000
    }

    .bg_\#0000003fF {
        background: #0000003fF
    }

    .font_600 {
        font-weight: 600
    }

    .h_50 {
        height: 50px
    }

    .mt_0 {
        margin-top: var(--spacing-0)
    }

    .pos_sticky {
        position: sticky
    }

    .bg_white {
        background: var(--colors-white)
    }

    .pb_4 {
        padding-bottom: var(--spacing-4)
    }

    .w_120px {
        width: 120px
    }

    .rounded_4px {
        border-radius: 4px
    }

    .bg_\#6D56FA {
        background: #6d56fa
    }

    .bg_\#6c56fa25 {
        background: #6c56fa25
    }

    .h_45px {
        height: 45px
    }

    .overflow_visible {
        overflow: visible
    }

    .rounded_lg {
        border-radius: var(--radii-lg)
    }

    .border_1\.1px_solid_rgba\(21\,_17\,_43\,_0\.1\) {
        border: 1.1px solid rgba(21, 17, 43, .1)
    }

    .scrollbar-gutter_stable {
        scrollbar-gutter: stable
    }

    .z_10000 {
        z-index: 10000
    }

    .drop-shadow_3xl {
        --drop-shadow: 3xl
    }

    .w_450px {
        width: 450px
    }

    .text_green\.5 {
        color: green.5
    }

    .z_10 {
        z-index: 10
    }

    .w_full {
        width: var(--sizes-full)
    }

    .h_20 {
        height: var(--sizes-20)
    }

    .w_20 {
        width: var(--sizes-20)
    }

    .w_30px {
        width: 30px
    }

    .h_30px {
        height: 30px
    }

    .px_0 {
        padding-inline: var(--spacing-0)
    }

    .w_40px {
        width: 40px
    }

    .bottom_2px {
        bottom: 2px
    }

    .fs_3xl {
        font-size: var(--font-sizes-3xl)
    }

    .text_rgba\(21\,_17\,_43\,_0\.5\) {
        color: rgba(21, 17, 43, .5)
    }

    .fs_xs {
        font-size: var(--font-sizes-xs)
    }

    .text_fg\.default {
        color: var(--colors-fg-default)
    }

    .rounded_12 {
        border-radius: 12px
    }

    .h_75 {
        height: 75px
    }

    .pl_5 {
        padding-left: var(--spacing-5)
    }

    .w_35\% {
        width: 35%
    }

    .border-b_0 {
        border-bottom: 0
    }

    .my_0 {
        margin-block: var(--spacing-0)
    }

    .text_\#111111 {
        color: #111
    }

    .text_rgba\(17\,_17\,_17\,_0\.7\) {
        color: hsla(0, 0%, 7%, .7)
    }

    .d_-webkit-box {
        display: -webkit-box
    }

    .\-webkit-line-clamp_3 {
        -webkit-line-clamp: 3
    }

    .break_break-word {
        word-break: break-word
    }

    .ml_auto {
        margin-left: auto
    }

    .mt_1 {
        margin-top: var(--spacing-1)
    }

    .rounded_35 {
        border-radius: 35px
    }

    .border_1\.12px_solid_rgba\(109\,_86\,_250\,_0\.2\) {
        border: 1.12px solid rgba(109, 86, 250, .2)
    }

    .py_1\.5 {
        padding-block: var(--spacing-1\.5)
    }

    .max-w_100px {
        max-width: 100px
    }

    .text_\#484846 {
        color: #484846
    }

    .border_\#E7E8EA {
        border-color: #e7e8ea
    }

    .scale_1 {
        scale: 1
    }

    .w_85 {
        width: 85px
    }

    .h_89 {
        height: 89px
    }

    .w_11\.76 {
        width: 11.76px
    }

    .h_13\.07 {
        height: 13.07px
    }

    .scale_1\.2 {
        scale: 1.2
    }

    .text-decor_none {
        text-decoration: none
    }

    .h_150px {
        height: 150px
    }

    .border-b_1px_solid_\#E5E5E5 {
        border-bottom: 1px solid #e5e5e5
    }

    .rounded_1rem_1rem_0_0 {
        border-radius: 1rem 1rem 0 0
    }

    .border_1px_solid_\#E5E5E5 {
        border: 1px solid #e5e5e5
    }

    .h_auto {
        height: auto
    }

    .w_300 {
        width: 300px
    }

    .h_400 {
        height: 400px
    }

    .object_cover {
        object-fit: cover
    }

    .m_0 {
        margin: var(--spacing-0)
    }

    .text_\#8E8E8E {
        color: #8e8e8e
    }

    .border-t_1px_solid_\#E5E5E5 {
        border-top: 1px solid #e5e5e5
    }

    .pb_1 {
        padding-bottom: var(--spacing-1)
    }

    .font_light {
        font-weight: var(--font-weights-light)
    }

    .max-w_5xl {
        max-width: var(--sizes-5xl)
    }

    .py_8 {
        padding-block: var(--spacing-8)
    }

    .text_rgba\(102\,_109\,_128\,_1\) {
        color: #666d80
    }

    .max-w_100\% {
        max-width: 100%
    }

    .font_700 {
        font-weight: 700
    }

    .leading_80px {
        line-height: 80px
    }

    .py_1 {
        padding-block: var(--spacing-1)
    }

    .border_5px_solid_\#6D56FA {
        border: 5px solid #007ee5
    }

    .bg_linear-gradient\(136\.06deg\,_\#A192FF_19\.77\%\,_\#5F45FC_84\.93\%\) {
        background: linear-gradient(136.06deg, #007ee5 19.77%, #007ee5 84.93%)
    }

    .font_initial {
        font-weight: 400
    }

    .gap_16 {
        gap: var(--spacing-16)
    }

    .z_-1 {
        z-index: -1
    }

    .left_-25\% {
        left: -25%
    }

    .w_100svw {
        width: 100svw
    }

    .shadow_0px_0px_40px_0px_\#6D56FA26 {
        box-shadow: 0 0 40px 0 #5692fa26
    }

    .border_1px_solid_\#6c56fa20 {
        border: 1px solid #568dfa20
    }

    .bg_\#ffffffe9f {
        background: #ffffffe9
    }

    .backdrop-blur_sm {
        --backdrop-blur: blur(var(--blurs-sm))
    }

    .w_44px {
        width: 44px
    }

    .bg_transparent {
        background-color: var(--colors-transparent)
    }

    .bg_\#F3F3F3 {
        background-color: #f3f3f3
    }

    .h_44px {
        height: 44px
    }

    .text_rgb\(21\,_17\,_43\) {
        color: #15112b
    }

    .pb_3_new {
        padding-bottom: var(--spacing-3);
    }
	
    .pb_3\.5 {
        padding-bottom: var(--spacing-3\.5)
    }

    .bg_rgba\(21\,_17\,_43\,_0\.03\) {
        background: rgba(21, 17, 43, .03)
    }

    .fs_14px {
        font-size: 14px
    }

    .pt_3\.5 {
        padding-top: var(--spacing-3\.5)
    }

    .w_100px {
        width: 100px
    }

    .h_20px {
        height: 20px
    }

    .w_14px {
        width: 14px
    }

    .h_14px {
        height: 14px
    }

    .max-h_calc\(4\.5_\*_\(14px_\*_1\.5_\+_2\.5_\*_2_\*_4px\)\) {
        max-height: calc(4.5 * (14px * 1.5 + 2.5 * 2 * 4px))
    }

    .px_5 {
        padding-inline: var(--spacing-5)
    }

    .py_2\.5 {
        padding-block: var(--spacing-2\.5)
    }

    .text_\#202020 {
        color: #202020
    }

    .text_rgb\(21\,_17\,_43\,0\.6\) {
        color: rgba(21, 17, 43, .6)
    }

    .border-l_3px_solid {
        border-left: 3px solid
    }

    .border-l_none {
        border-left: var(--borders-none)
    }

    .border-l_accent\.default {
        border-left-color: var(--colors-accent-default)
    }

    .text_\#73726F {
        color: #73726f
    }

    .text-size-adjust_16px {
        text-size-adjust: 16px;
        -webkit-text-size-adjust: 16px
    }

    .text_\#363636 {
        color: #363636
    }

    .all_unset {
        all: unset
    }

    .px_1 {
        padding-inline: var(--spacing-1)
    }

    .cursor_not-allowed {
        cursor: not-allowed
    }

    .text_\#14112B {
        color: #111e2b
    }

    .mb_1 {
        margin-bottom: var(--spacing-1)
    }

    .h_12px {
        height: 12px
    }

    .fs_12px {
        font-size: 12px
    }

    .text_\#838383 {
        color: #838383
    }

    .d_infinite {
        display: infinite
    }

    .text_\#5C5C5C {
        color: #5c5c5c
    }

    .text_\#fff {
        color: #fff
    }

    .p_1rem_10rem {
        padding: 1rem 10rem
    }

    .min-w_600px {
        min-width: 600px
    }

    .text_neutral\.800 {
        color: neutral.800
    }

    .max-w_800 {
        max-width: 800px
    }

    .self_flex-end {
        align-self: flex-end
    }

    .w_8px {
        width: 8px
    }

    .h_8px {
        height: 8px
    }

    .bg_\#6D56FA\! {
        background-color: #5695fa !important
    }

    .bg_\#2121211A\! {
        background-color: #2121211a !important
    }

    .border_\#6D56FA\! {
        border-color: #5698fa !important
    }

    .border_\#2121211A\! {
        border-color: #2121211a !important
    }

    .border_3px_solid {
        border: 3px solid
    }

    .w_xl {
        width: var(--sizes-xl)
    }

    .max-h_200px {
        max-height: 200px
    }

    .bg_\#ECE9FF4D {
        background: #ece9ff4d
    }

    .bg_\#ECE9FF {
        background: #ece9ff
    }

    .pb_0 {
        padding-bottom: var(--spacing-0)
    }

    .max-w_260px {
        max-width: 260px
    }

    .shadow_0px_2px_12px_0px_\#EAEAEA40 {
        box-shadow: 0 2px 12px 0 #eaeaea40
    }

    .self_flex-start {
        align-self: flex-start
    }

    .text_\#15112BB2 {
        color: #15112bb2
    }

    .mb_30 {
        margin-bottom: 30px
    }

    .d_grid {
        display: grid
    }

    .grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .mr_-6 {
        margin-right: calc(var(--spacing-6) * -1)
    }

    .grow_1 {
        flex-grow: 1
    }

    .bg_linear-gradient\(to_bottom\,_transparent_45\%\,_\#bbc7ce_45\%\,_\#bbc7ce_55\%\,_transparent_55\%\)\; {
        background: linear-gradient(180deg, transparent 45%, #bbc7ce 0, #bbc7ce 55%, transparent 0)
    }

    .flex_0_0_auto {
        flex: 0 0 auto
    }

    .w_4 {
        width: var(--sizes-4)
    }

    .h_4 {
        height: var(--sizes-4)
    }

    .rounded_9999px {
        border-radius: 9999px
    }

    .mt_6 {
        margin-top: var(--spacing-6)
    }

    .max-w_775px {
        max-width: 775px
    }

    .w_800px {
        width: 800px
    }

    .max-w_90vw {
        max-width: 90vw
    }

    .text_start {
        text-align: start
    }

    .color-palette_red {
        --colors-color-palette-light-1: var(--colors-red-light-1);
        --colors-color-palette-light-2: var(--colors-red-light-2);
        --colors-color-palette-light-3: var(--colors-red-light-3);
        --colors-color-palette-light-4: var(--colors-red-light-4);
        --colors-color-palette-light-5: var(--colors-red-light-5);
        --colors-color-palette-light-6: var(--colors-red-light-6);
        --colors-color-palette-light-7: var(--colors-red-light-7);
        --colors-color-palette-light-8: var(--colors-red-light-8);
        --colors-color-palette-light-9: var(--colors-red-light-9);
        --colors-color-palette-light-10: var(--colors-red-light-10);
        --colors-color-palette-light-11: var(--colors-red-light-11);
        --colors-color-palette-light-12: var(--colors-red-light-12);
        --colors-color-palette-light-a1: var(--colors-red-light-a1);
        --colors-color-palette-light-a2: var(--colors-red-light-a2);
        --colors-color-palette-light-a3: var(--colors-red-light-a3);
        --colors-color-palette-light-a4: var(--colors-red-light-a4);
        --colors-color-palette-light-a5: var(--colors-red-light-a5);
        --colors-color-palette-light-a6: var(--colors-red-light-a6);
        --colors-color-palette-light-a7: var(--colors-red-light-a7);
        --colors-color-palette-light-a8: var(--colors-red-light-a8);
        --colors-color-palette-light-a9: var(--colors-red-light-a9);
        --colors-color-palette-light-a10: var(--colors-red-light-a10);
        --colors-color-palette-light-a11: var(--colors-red-light-a11);
        --colors-color-palette-light-a12: var(--colors-red-light-a12);
        --colors-color-palette-dark-1: var(--colors-red-dark-1);
        --colors-color-palette-dark-2: var(--colors-red-dark-2);
        --colors-color-palette-dark-3: var(--colors-red-dark-3);
        --colors-color-palette-dark-4: var(--colors-red-dark-4);
        --colors-color-palette-dark-5: var(--colors-red-dark-5);
        --colors-color-palette-dark-6: var(--colors-red-dark-6);
        --colors-color-palette-dark-7: var(--colors-red-dark-7);
        --colors-color-palette-dark-8: var(--colors-red-dark-8);
        --colors-color-palette-dark-9: var(--colors-red-dark-9);
        --colors-color-palette-dark-10: var(--colors-red-dark-10);
        --colors-color-palette-dark-11: var(--colors-red-dark-11);
        --colors-color-palette-dark-12: var(--colors-red-dark-12);
        --colors-color-palette-dark-a1: var(--colors-red-dark-a1);
        --colors-color-palette-dark-a2: var(--colors-red-dark-a2);
        --colors-color-palette-dark-a3: var(--colors-red-dark-a3);
        --colors-color-palette-dark-a4: var(--colors-red-dark-a4);
        --colors-color-palette-dark-a5: var(--colors-red-dark-a5);
        --colors-color-palette-dark-a6: var(--colors-red-dark-a6);
        --colors-color-palette-dark-a7: var(--colors-red-dark-a7);
        --colors-color-palette-dark-a8: var(--colors-red-dark-a8);
        --colors-color-palette-dark-a9: var(--colors-red-dark-a9);
        --colors-color-palette-dark-a10: var(--colors-red-dark-a10);
        --colors-color-palette-dark-a11: var(--colors-red-dark-a11);
        --colors-color-palette-dark-a12: var(--colors-red-dark-a12);
        --colors-color-palette-1: var(--colors-red-1);
        --colors-color-palette-2: var(--colors-red-2);
        --colors-color-palette-3: var(--colors-red-3);
        --colors-color-palette-4: var(--colors-red-4);
        --colors-color-palette-5: var(--colors-red-5);
        --colors-color-palette-6: var(--colors-red-6);
        --colors-color-palette-7: var(--colors-red-7);
        --colors-color-palette-8: var(--colors-red-8);
        --colors-color-palette-9: var(--colors-red-9);
        --colors-color-palette-10: var(--colors-red-10);
        --colors-color-palette-11: var(--colors-red-11);
        --colors-color-palette-12: var(--colors-red-12);
        --colors-color-palette-a1: var(--colors-red-a1);
        --colors-color-palette-a2: var(--colors-red-a2);
        --colors-color-palette-a3: var(--colors-red-a3);
        --colors-color-palette-a4: var(--colors-red-a4);
        --colors-color-palette-a5: var(--colors-red-a5);
        --colors-color-palette-a6: var(--colors-red-a6);
        --colors-color-palette-a7: var(--colors-red-a7);
        --colors-color-palette-a8: var(--colors-red-a8);
        --colors-color-palette-a9: var(--colors-red-a9);
        --colors-color-palette-a10: var(--colors-red-a10);
        --colors-color-palette-a11: var(--colors-red-a11);
        --colors-color-palette-a12: var(--colors-red-a12);
        --colors-color-palette-default: var(--colors-red-default);
        --colors-color-palette-emphasized: var(--colors-red-emphasized);
        --colors-color-palette-fg: var(--colors-red-fg);
        --colors-color-palette-text: var(--colors-red-text)
    }

    .color-palette_black {
        --colors-color-palette: var(--colors-black);
        --colors-color-palette-a1: var(--colors-black-a1);
        --colors-color-palette-a2: var(--colors-black-a2);
        --colors-color-palette-a3: var(--colors-black-a3);
        --colors-color-palette-a4: var(--colors-black-a4);
        --colors-color-palette-a5: var(--colors-black-a5);
        --colors-color-palette-a6: var(--colors-black-a6);
        --colors-color-palette-a7: var(--colors-black-a7);
        --colors-color-palette-a8: var(--colors-black-a8);
        --colors-color-palette-a9: var(--colors-black-a9);
        --colors-color-palette-a10: var(--colors-black-a10);
        --colors-color-palette-a11: var(--colors-black-a11);
        --colors-color-palette-a12: var(--colors-black-a12)
    }

    .bg_red {
        background-color: red
    }

    .mr_1 {
        margin-right: var(--spacing-1)
    }

    .w_lg {
        width: var(--sizes-lg)
    }

    .pt_2 {
        padding-top: var(--spacing-2)
    }

    .pb_2 {
        padding-bottom: var(--spacing-2)
    }

    .mr_auto {
        margin-right: auto
    }

    .mb_5 {
        margin-bottom: var(--spacing-5)
    }

    .max-h_400px {
        max-height: 400px
    }

    .min-h_36px {
        min-height: 36px
    }

    .rounded_l3 {
        border-radius: var(--radii-l3)
    }

    .border_\#15112B0F {
        border-color: #15112b0f
    }

    .border-w_1\.22px {
        border-width: 1.22px
    }

    .white-space_normal {
        white-space: normal
    }

    .text_left {
        text-align: left
    }

    .text_accent\.default {
        color: var(--colors-accent-default)
    }

    .text_gray {
        color: gray
    }

    .border_none {
        border: var(--borders-none)
    }

    .border_1px_solid_rgba\(0\,0\,0\,0\.08\) {
        border: 1px solid rgba(0, 0, 0, .08)
    }

    .h_70px {
        height: 70px
    }

    .min-w_0 {
        min-width: var(--sizes-0)
    }

    .pt_1 {
        padding-top: var(--spacing-1)
    }

    .overflow-x_auto {
        overflow-x: auto
    }

    .mt_-2 {
        margin-top: calc(var(--spacing-2) * -1)
    }

    .text_rgba\(21\,17\,43\,0\.5\) {
        color: rgba(21, 17, 43, .5)
    }

    .justify_flex-end {
        justify-content: flex-end
    }

    .bg_quizard\.black {
        background: var(--colors-quizard-black)
    }

    .fs_0\.7rem {
        font-size: .7rem
    }

    .w_md {
        width: var(--sizes-md)
    }

    .mt_29vh {
        margin-top: 29vh
    }

    .h_700px {
        height: 700px
    }

    .pt_56\.25\% {
        padding-top: 56.25%
    }

    .pt_0 {
        padding-top: var(--spacing-0)
    }

    .bg_\#F1EFFC {
        background-color: #f1effc
    }

    .p_3 {
        padding: var(--spacing-3)
    }

    .w_calc\(100\%_-_16px\) {
        width: calc(100% - 16px)
    }

    .bg_accent\.default {
        background-color: var(--colors-accent-default)
    }

    .bg_\#ededed {
        background-color: #ededed
    }

    .p_5px {
        padding: 5px
    }

    .self_self-start {
        align-self: self-start
    }

    .shadow_md {
        box-shadow: var(--shadows-md)
    }

    .bg_rgba\(109\,_86\,_250\,_0\.09\) {
        background-color: rgba(109, 86, 250, .09)
    }

    .border_1px_solid_rgba\(76\,_48\,_224\,_0\.05\)\) {
        border: 1px solid)
    }

    .fs_15px {
        font-size: 15px
    }

    .text_grey {
        color: grey
    }

    .w_10 {
        width: var(--sizes-10)
    }

    .bg_rgba\(76\,_48\,_224\,_0\.08\) {
        background-color: rgba(48, 63, 224, 0.08)
    }

    .text_\#4C30E0 {
        color: #4c30e0
    }

    .py_0\.75 {
        padding-block: .75px
    }

    .border_1px_solid_rgba\(76\,_48\,_224\,_0\.04\) {
        border: 1px solid rgba(76, 48, 224, .04)
    }

    .min-w_7 {
        min-width: var(--sizes-7)
    }

    .w_48 {
        width: var(--sizes-48)
    }

    .text_\#888693 {
        color: #888693
    }

    .bg-img_url\(\"data\:image\/svg\+xml\,\%3csvg_width\=\'100\%25\'_height\=\'100\%25\'_xmlns\=\'http\:\/\/www\.w3\.org\/2000\/svg\'\%3e\%3crect_width\=\'100\%25\'_height\=\'100\%25\'_fill\=\'none\'_rx\=\'12\'_ry\=\'12\'_stroke\=\'rgba\(176\,_176\,_176\,_0\.4\)\'_stroke-width\=\'4\'_stroke-dasharray\=\'10\%2c14\'_stroke-dashoffset\=\'37\'_stroke-linecap\=\'square\'\/\%3e\%3c\/svg\%3e\"\) {
        background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='rgba(176, 176, 176, 0.4)' stroke-width='4' stroke-dasharray='10%2c14' stroke-dashoffset='37' stroke-linecap='square'/%3e%3c/svg%3e")
    }

    .py_7 {
        padding-block: var(--spacing-7)
    }

    .min-h_100px {
        min-height: 100px
    }

    .fs_18 {
        font-size: 18px
    }

    .text_\#6d56fa {
        color: #6d56fa
    }

    .text_rgba\(21\,_17\,_43\,_0\.8\) {
        color: rgba(21, 17, 43, .8)
    }

    .text_\#151129 {
        color: #151129
    }

    .w_70\% {
        width: 70%
    }

    .text_rgba\(21\,_17\,_43\,_0\.9\) {
        color: rgba(21, 17, 43, .9)
    }

    .ml_1 {
        margin-left: var(--spacing-1)
    }

    .top_8 {
        top: var(--spacing-8)
    }

    .rounded_3xl {
        border-radius: var(--radii-3xl)
    }

    .bg_\#6D56FA\/5 {
        --mix-background: color-mix(in srgb, #56b3fa 5%, transparent);
        background: var(--mix-background, #56b3fa)
    }

    .rounded_100px {
        border-radius: 100px
    }

    .gap_3rem {
        gap: 3rem
    }

    .fs_2rem {
        font-size: 2rem
    }

    .fs_1rem {
        font-size: 1rem
    }

    .p_0\.5rem {
        padding: .5rem
    }

    .w_2xl {
        width: var(--sizes-2xl)
    }

    .mt_2rem {
        margin-top: 2rem
    }

    .mb_2rem {
        margin-bottom: 2rem
    }

    .mb_6 {
        margin-bottom: var(--spacing-6)
    }

    .pr_5 {
        padding-right: var(--spacing-5)
    }

    .max-w_504px {
        max-width: 504px
    }

    .text_zinc\.600 {
        color: zinc.600
    }

    .min-h_253px {
        min-height: 253px
    }

    .gap_2rem {
        gap: 2rem
    }

    .bg_\#E5E5E5 {
        background: #e5e5e5
    }

    .bg_\#F5F5F5 {
        background: #f5f5f5
    }

    .rounded_10px {
        border-radius: 10px
    }

    .p_1rem {
        padding: 1rem
    }

    .text_\#ffffff {
        color: #fff
    }

    .rounded_5px {
        border-radius: 5px
    }

    .mb_4 {
        margin-bottom: var(--spacing-4)
    }

    .text_5C5C5C {
        color: 5C5C5C
    }

    .w_32px {
        width: 32px
    }

    .border_1px_solid_\#E2E2E2 {
        border: 1px solid #e2e2e2
    }

    .mr_2 {
        margin-right: var(--spacing-2)
    }

    .shadow_0_-8px_0_0_white\,_0_8px_0_0_white {
        box-shadow: 0 -8px 0 0 #fff, 0 8px 0 0 #fff
    }

    .ml_36px {
        margin-left: 36px
    }

    .fs_5rem {
        font-size: 5rem
    }

    .pr_3 {
        padding-right: var(--spacing-3)
    }

    .pl_1\.5 {
        padding-left: var(--spacing-1\.5)
    }

    .min-h_10 {
        min-height: var(--sizes-10)
    }

    .border_1px_solid_rgba\(21\,_17\,_43\,_0\.06\) {
        border: 1px solid rgba(21, 17, 43, .06)
    }

    .w_25px {
        width: 25px
    }

    .h_25px {
        height: 25px
    }

    .cursor_default {
        cursor: default
    }

    .ml_7 {
        margin-left: var(--spacing-7)
    }

    .p_0\.75 {
        padding: .75px
    }

    .shadow_shadow {
        box-shadow: shadow
    }

    .text_\#1B112B {
        color: #1b112b
    }

    .text_\#646464 {
        color: #646464
    }

    .leading_18px {
        line-height: 18px
    }

    .bg_\#6D56FA1F {
        background: #6d56fa1f
    }

    .fill_white {
        fill: var(--colors-white)
    }

    .h_100 {
        height: 100px
    }

    .rounded-t_0 {
        border-top-left-radius: 0;
        border-top-right-radius: 0
    }

    .border-b_1\.1px_solid_rgba\(21\,_17\,_43\,_0\.1\) {
        border-bottom: 1.1px solid rgba(21, 17, 43, .1)
    }

    .w_40\% {
        width: 40%
    }

    .w_50\% {
        width: 50%
    }

    .w_25\% {
        width: 25%
    }

    .w_20\% {
        width: 20%
    }

    .w_15\% {
        width: 15%
    }

    .max-h_53vh {
        max-height: 53vh
    }

    .mx_4 {
        margin-inline: var(--spacing-4)
    }

    .right_0 {
        right: var(--spacing-0)
    }

    .bottom_0 {
        bottom: var(--spacing-0)
    }

    .min-h_300px {
        min-height: 300px
    }

    .text_\#475467 {
        color: #475467
    }

    .text-decor_underline {
        text-decoration: underline
    }

    .pl_4 {
        padding-left: var(--spacing-4)
    }

    .pl_48px {
        padding-left: 48px
    }

    .pr_4 {
        padding-right: var(--spacing-4)
    }

    .w_50vw {
        width: 50vw
    }

    .max-w_750px {
        max-width: 750px
    }

    .z_0 {
        z-index: 0
    }

    .rounded-t_12 {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px
    }

    .fs_xl {
        font-size: var(--font-sizes-xl)
    }

    .w_175px {
        width: 175px
    }

    .max-h_150px {
        max-height: 150px
    }

    .min-h_20px {
        min-height: 20px
    }

    .min-w_100px {
        min-width: 100px
    }

    .border-b_1px_solid_rgba\(0\,_0\,_0\,_0\.04\) {
        border-bottom: 1px solid rgba(0, 0, 0, .04)
    }

    .pb_8px {
        padding-bottom: 8px
    }

    .mb_8px {
        margin-bottom: 8px
    }

    .mt_8px {
        margin-top: 8px
    }

    .ml_5 {
        margin-left: var(--spacing-5)
    }

    .grid-cols_repeat\(1\,_minmax\(0\,_1fr\)\) {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .max-h_210px {
        max-height: 210px
    }

    .max-h_230 {
        max-height: 230px
    }

    .py_6 {
        padding-block: var(--spacing-6)
    }

    .bg_\#6D56FA14 {
        background: #6d56fa14
    }

    .bg-img_url\(\"data\:image\/svg\+xml\,\%3csvg_width\=\'100\%25\'_height\=\'100\%25\'_xmlns\=\'http\:\/\/www\.w3\.org\/2000\/svg\'\%3e\%3crect_width\=\'100\%25\'_height\=\'100\%25\'_fill\=\'none\'_rx\=\'12\'_ry\=\'12\'_stroke\=\'rgba\(109\,_86\,_250\,_0\.3\)\'_stroke-width\=\'4\'_stroke-dasharray\=\'10\%2c14\'_stroke-dashoffset\=\'37\'_stroke-linecap\=\'square\'\/\%3e\%3c\/svg\%3e\"\)\! {
        background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='rgba(109, 86, 250, 0.3)' stroke-width='4' stroke-dasharray='10%2c14' stroke-dashoffset='37' stroke-linecap='square'/%3e%3c/svg%3e") !important
    }

    .h_calc\(50vh_-_50px\) {
        height: calc(50vh - 50px)
    }

    .pos_rel {
        position: rel
    }

    .p_0_30px {
        padding: 0 30px
    }

    .truncate_true {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .w_150px {
        width: 150px
    }

    .rounded_0 {
        border-radius: 0
    }

    .pl_1 {
        padding-left: var(--spacing-1)
    }

    .bottom_5 {
        bottom: var(--spacing-5)
    }

    .left_5 {
        left: var(--spacing-5)
    }

    .content_center {
        align-content: center
    }

    .text_\#000000B2 {
        color: #000000b2
    }

    .p_7 {
        padding: var(--spacing-7)
    }

    .min-w_25vw {
        min-width: 25vw
    }

    .shadow_lg {
        box-shadow: var(--shadows-lg)
    }

    .min-w_100\% {
        min-width: 100%
    }

    .py_12 {
        padding-block: var(--spacing-12)
    }

    .pos_fixed {
        position: fixed
    }

    .bg_\#6D56FACC {
        background-color: #6d56facc
    }

    .backdrop_blur\(8px\) {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px)
    }

    .z_3 {
        z-index: 3
    }

    .justify_right {
        justify-content: right
    }

    .top_5 {
        top: var(--spacing-5)
    }

    .fs_9xl {
        font-size: var(--font-sizes-9xl)
    }

    .bg_\#f5f5f6 {
        background-color: #f5f5f6
    }

    .h_60px {
        height: 60px
    }

    .rounded-tl_md {
        border-top-left-radius: var(--radii-md)
    }

    .rounded-bl_md {
        border-bottom-left-radius: var(--radii-md)
    }

    .rounded-tr_md {
        border-top-right-radius: var(--radii-md)
    }

    .rounded-br_md {
        border-bottom-right-radius: var(--radii-md)
    }

    .h_2 {
        height: var(--sizes-2)
    }

    .align_middle {
        vertical-align: middle
    }

    .m_-4 {
        margin: calc(var(--spacing-4) * -1)
    }

    .gap_0\.5 {
        gap: var(--spacing-0\.5)
    }

    .shadow_none {
        box-shadow: none
    }

    .bg_\#f6f6ff {
        background-color: #f6f6ff
    }

    .w_2rem {
        width: 2rem
    }

    .h_2rem {
        height: 2rem
    }

    .rounded_14 {
        border-radius: 14px
    }

    .rounded_48 {
        border-radius: 48px
    }

    .leading_1\.5 {
        line-height: 1.5
    }

    .leading_1 {
        line-height: 1
    }

    .border_1\.5px_solid_rgba\(109\,_86\,_250\,_0\.2\) {
        border: 1.5px solid rgba(109, 86, 250, .2)
    }

    .white-space_pre {
        white-space: pre
    }

    .w_fit-content {
        width: fit-content
    }

    .white-space_pre-line {
        white-space: pre-line
    }

    .mr_-8px {
        margin-right: -8px
    }

    .z_auto {
        z-index: auto
    }

    .max-w_150px {
        max-width: 150px
    }

    .z_1000\! {
        z-index: 1000 !important
    }

    .h_1rem {
        height: 1rem
    }

    .w_1rem {
        width: 1rem
    }

    .text_\#48484633 {
        color: #48484633
    }

    .\[\&\:\:placeholder\]\:text_quizard\.black::placeholder {
        color: var(--colors-quizard-black)
    }

    .scrollbar\:w_3px::-webkit-scrollbar {
        width: 3px
    }

    .scrollbar\:h_3px::-webkit-scrollbar {
        height: 3px
    }

    .disabled\:bg_\#6e56cf:is(:disabled, [disabled], [data-disabled]) {
        background: #497ad5 
    }

    .before\:content_\"\":before {
        content: ""
    }

    .before\:pos_absolute:before {
        position: absolute
    }

    .before\:left_16px:before {
        left: 16px
    }

    .before\:top_0:before {
        top: var(--spacing-0)
    }

    .before\:bottom_20:before {
        bottom: var(--spacing-20)
    }

    .before\:w_1px:before {
        width: 1px
    }

    .before\:bg_\#5C5C5C:before {
        background-color: #5c5c5c
    }

    .before\:z_-1:before {
        z-index: -1
    }

    .horizontal\:shadow_0_-1px_0_0_inset_rgba\(217\,_217\,_217\,_0\.5\)[data-orientation=horizontal] {
        box-shadow: inset 0 -1px 0 0 hsla(0, 0%, 85%, .5)
    }

    .focus\:ring_none:is(:focus, [data-focus]) {
        outline: var(--borders-none)
    }

    .hover\:bg_rgba\(26\,_12\,_108\,_0\.06\):is(:hover, [data-hover]) {
        background-color: rgba(26, 12, 108, .06)
    }

    .hover\:bg_\#1D9BD1:is(:hover, [data-hover]) {
        background-color: #1d9bd1
    }

    .hover\:cursor_pointer:is(:hover, [data-hover]) {
        cursor: pointer
    }

    .hover\:bg_red\.dark\.11:is(:hover, [data-hover]) {
        background: var(--colors-red-dark-11)
    }

    .hover\:bg_rgba\(26\,_12\,_108\,_0\.12\):is(:hover, [data-hover]) {
        background-color: rgba(26, 12, 108, .12)
    }

    .hover\:bg_white:is(:hover, [data-hover]) {
        background-color: var(--colors-white)
    }

    .hover\:bg_\#ECE9FF\/30:is(:hover, [data-hover]) {
        --mix-background: color-mix(in srgb, #ece9ff 30%, transparent);
        background: var(--mix-background, #ece9ff)
    }

    .\[\&\:hover\]\:text-decor_none:hover {
        text-decoration: none
    }

    .hover\:bg_rgba\(21\,_17\,_43\,0\.1\):is(:hover, [data-hover]) {
        background-color: rgba(21, 17, 43, .1)
    }

    .hover\:bg_transparent:is(:hover, [data-hover]) {
        background-color: var(--colors-transparent)
    }

    .hover\:bg_\#F1F1F0:is(:hover, [data-hover]) {
        background: #f1f1f0
    }

    .hover\:bg_\#9FA1FF:is(:hover, [data-hover]) {
        background: #9fa1ff
    }

    .hover\:bg_\#ECE9FF:is(:hover, [data-hover]) {
        background: #ece9ff
    }

    .hover\:bg_\#15112B0F:is(:hover, [data-hover]) {
        background: #15112b0f
    }

    .hover\:bg_purple\.light\.2:is(:hover, [data-hover]) {
        background-color: purple.light.2
    }

    .hover\:bg_\#D5D5D5:is(:hover, [data-hover]) {
        background: #d5d5d5
    }

    .hover\:bg_\#eaeaea:is(:hover, [data-hover]) {
        background: #eaeaea
    }

    .hover\:text-decor_underline:is(:hover, [data-hover]) {
        text-decoration: underline
    }

    .hover\:bg_\#E5E5E5:is(:hover, [data-hover]) {
        background: #e5e5e5
    }

    .hover\:bg_inherit:is(:hover, [data-hover]) {
        background-color: inherit
    }

    .hover\:text_black:is(:hover, [data-hover]) {
        color: var(--colors-black)
    }

    .\[\&\:hover\]\:bg_\#f0f0f0:hover {
        background-color: #f0f0f0
    }

    @media screen and (min-width:40em) {
        .sm\:fs_24 {
            font-size: 24px
        }

        .sm\:fs_18 {
            font-size: 18px
        }

        .sm\:flex-wrap_wrap {
            flex-wrap: wrap
        }

        .sm\:mt_10 {
            margin-top: var(--spacing-10)
        }

        .sm\:max-w_full {
            max-width: var(--sizes-full)
        }

        .sm\:flex_row {
            flex-direction: row
        }

        .sm\:gap_16 {
            gap: var(--spacing-16)
        }

        .sm\:d_none {
            display: none
        }

        .sm\:px_6 {
            padding-inline: var(--spacing-6)
        }

        .sm\:px_8 {
            padding-inline: var(--spacing-8)
        }

        .sm\:d_flex {
            display: flex
        }

        .sm\:d_block {
            display: block
        }

        .sm\:w_16px {
            width: 16px
        }

        .sm\:bg_\#ECE9FF\/30 {
            --mix-background: color-mix(in srgb, #ece9ff 30%, transparent);
            background: var(--mix-background, #ece9ff)
        }

        .sm\:border_1px_solid_\#6c56fa20 {
            border: 1px solid #6c56fa20
        }

        .sm\:pb_2 {
            padding-bottom: var(--spacing-2)
        }

        .sm\:pt_4 {
            padding-top: var(--spacing-4)
        }

        .sm\:justify_flex-start {
            justify-content: flex-start
        }

        .sm\:px_4 {
            padding-inline: var(--spacing-4)
        }

        .sm\:gap_2 {
            gap: var(--spacing-2)
        }

        .sm\:font_medium {
            font-weight: var(--font-weights-medium)
        }

        .sm\:p_4 {
            padding: var(--spacing-4)
        }

        .sm\:p_2 {
            padding: var(--spacing-2)
        }

        .sm\:pr_104px {
            padding-right: 104px
        }
    }

    @media screen and (min-width:48em) {
        .md\:w_40\% {
            width: 40%
        }

        .md\:fs_16 {
            font-size: 16px
        }

        .md\:w_250px {
            width: 250px
        }

        .md\:flex_row {
            flex-direction: row
        }

        .md\:w_3xl {
            width: var(--sizes-3xl)
        }

        .md\:gap_20 {
            gap: var(--spacing-20)
        }

        .md\:max-w_300px {
            max-width: 300px
        }
    }

    @media (max-width:640px) {
        .\[\@media_\(max-width\:_640px\)\]\:w_100\% {
            width: 100%
        }
    }
}