/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */

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

@layer theme {
    :host, :root {
        --color-red-50: oklch(97.1% .013 17.38);
        --color-red-100: oklch(93.6% .032 17.717);
        --color-red-200: oklch(88.5% .062 18.334);
        --color-red-300: oklch(80.8% .114 19.571);
        --color-red-400: oklch(70.4% .191 22.216);
        --color-red-500: oklch(63.7% .237 25.331);
        --color-red-600: oklch(57.7% .245 27.325);
        --color-red-700: oklch(50.5% .213 27.518);
        --color-red-800: oklch(44.4% .177 26.899);
        --color-red-900: oklch(39.6% .141 25.723);
        --color-orange-50: oklch(98% .016 73.684);
        --color-orange-100: oklch(95.4% .038 75.164);
        --color-orange-200: oklch(90.1% .076 70.697);
        --color-orange-300: oklch(83.7% .128 66.29);
        --color-orange-400: oklch(75% .183 55.934);
        --color-orange-500: oklch(70.5% .213 47.604);
        --color-orange-600: oklch(64.6% .222 41.116);
        --color-orange-700: oklch(55.3% .195 38.402);
        --color-orange-800: oklch(47% .157 37.304);
        --color-amber-50: oklch(98.7% .022 95.277);
        --color-amber-100: oklch(96.2% .059 95.617);
        --color-amber-200: oklch(92.4% .12 95.746);
        --color-amber-300: oklch(87.9% .169 91.605);
        --color-amber-400: oklch(82.8% .189 84.429);
        --color-amber-500: oklch(76.9% .188 70.08);
        --color-amber-600: oklch(66.6% .179 58.318);
        --color-amber-700: oklch(55.5% .163 48.998);
        --color-amber-800: oklch(47.3% .137 46.201);
        --color-amber-900: oklch(41.4% .112 45.904);
        --color-yellow-50: oklch(98.7% .026 102.212);
        --color-yellow-100: oklch(97.3% .071 103.193);
        --color-yellow-200: oklch(94.5% .129 101.54);
        --color-yellow-300: oklch(90.5% .182 98.111);
        --color-yellow-400: oklch(85.2% .199 91.936);
        --color-yellow-500: oklch(79.5% .184 86.047);
        --color-yellow-600: oklch(68.1% .162 75.834);
        --color-yellow-700: oklch(55.4% .135 66.442);
        --color-yellow-800: oklch(47.6% .114 61.907);
        --color-yellow-900: oklch(42.1% .095 57.708);
        --color-green-50: oklch(98.2% .018 155.826);
        --color-green-100: oklch(96.2% .044 156.743);
        --color-green-200: oklch(92.5% .084 155.995);
        --color-green-400: oklch(79.2% .209 151.711);
        --color-green-500: oklch(72.3% .219 149.579);
        --color-green-600: oklch(62.7% .194 149.214);
        --color-green-700: oklch(52.7% .154 150.069);
        --color-green-800: oklch(44.8% .119 151.328);
        --color-green-900: oklch(39.3% .095 152.535);
        --color-emerald-50: oklch(97.9% .021 166.113);
        --color-emerald-100: oklch(95% .052 163.051);
        --color-emerald-200: oklch(90.5% .093 164.15);
        --color-emerald-300: oklch(84.5% .143 164.978);
        --color-emerald-400: oklch(76.5% .177 163.223);
        --color-emerald-500: oklch(69.6% .17 162.48);
        --color-emerald-600: oklch(59.6% .145 163.225);
        --color-emerald-700: oklch(50.8% .118 165.612);
        --color-emerald-800: oklch(43.2% .095 166.913);
        --color-emerald-900: oklch(37.8% .077 168.94);
        --color-teal-50: oklch(98.4% .014 180.72);
        --color-teal-100: oklch(95.3% .051 180.801);
        --color-teal-200: oklch(91% .096 180.426);
        --color-teal-300: oklch(85.5% .138 181.071);
        --color-teal-400: oklch(77.7% .152 181.912);
        --color-teal-500: oklch(70.4% .14 182.503);
        --color-teal-600: oklch(60% .118 184.704);
        --color-teal-700: oklch(51.1% .096 186.391);
        --color-teal-800: oklch(43.7% .078 188.216);
        --color-cyan-50: oklch(98.4% .019 200.873);
        --color-cyan-100: oklch(95.6% .045 203.388);
        --color-cyan-200: oklch(91.7% .08 205.041);
        --color-cyan-600: oklch(60.9% .126 221.723);
        --color-sky-50: oklch(97.7% .013 236.62);
        --color-sky-100: oklch(95.1% .026 236.824);
        --color-sky-200: oklch(90.1% .058 230.902);
        --color-sky-300: oklch(82.8% .111 230.318);
        --color-sky-400: oklch(74.6% .16 232.661);
        --color-sky-500: oklch(68.5% .169 237.323);
        --color-sky-600: oklch(58.8% .158 241.966);
        --color-sky-700: oklch(50% .134 242.749);
        --color-sky-800: oklch(44.3% .11 240.79);
        --color-blue-50: oklch(97% .014 254.604);
        --color-blue-100: oklch(93.2% .032 255.585);
        --color-blue-200: oklch(88.2% .059 254.128);
        --color-blue-300: oklch(80.9% .105 251.813);
        --color-blue-400: oklch(70.7% .165 254.624);
        --color-blue-500: oklch(62.3% .214 259.815);
        --color-blue-600: oklch(54.6% .245 262.881);
        --color-blue-700: oklch(48.8% .243 264.376);
        --color-blue-800: oklch(42.4% .199 265.638);
        --color-blue-900: oklch(37.9% .146 265.522);
        --color-indigo-50: oklch(96.2% .018 272.314);
        --color-indigo-100: oklch(93% .034 272.788);
        --color-indigo-200: oklch(87% .065 274.039);
        --color-indigo-300: oklch(78.5% .115 274.713);
        --color-indigo-400: oklch(67.3% .182 276.935);
        --color-indigo-500: oklch(58.5% .233 277.117);
        --color-indigo-600: oklch(51.1% .262 276.966);
        --color-indigo-700: oklch(45.7% .24 277.023);
        --color-indigo-800: oklch(39.8% .195 277.366);
        --color-indigo-900: oklch(35.9% .144 278.697);
        --color-indigo-950: oklch(25.7% .09 281.288);
        --color-violet-50: oklch(96.9% .016 293.756);
        --color-violet-100: oklch(94.3% .029 294.588);
        --color-violet-200: oklch(89.4% .057 293.283);
        --color-violet-300: oklch(81.1% .111 293.571);
        --color-violet-400: oklch(70.2% .183 293.541);
        --color-violet-500: oklch(60.6% .25 292.717);
        --color-violet-600: oklch(54.1% .281 293.009);
        --color-violet-700: oklch(49.1% .27 292.581);
        --color-violet-900: oklch(38% .189 293.745);
        --color-violet-950: oklch(28.3% .141 291.089);
        --color-purple-50: oklch(97.7% .014 308.299);
        --color-purple-100: oklch(94.6% .033 307.174);
        --color-purple-200: oklch(90.2% .063 306.703);
        --color-purple-300: oklch(82.7% .119 306.383);
        --color-purple-400: oklch(71.4% .203 305.504);
        --color-purple-500: oklch(62.7% .265 303.9);
        --color-purple-600: oklch(55.8% .288 302.321);
        --color-purple-700: oklch(49.6% .265 301.924);
        --color-purple-800: oklch(43.8% .218 303.724);
        --color-purple-900: oklch(38.1% .176 304.987);
        --color-fuchsia-600: oklch(59.1% .293 322.896);
        --color-pink-50: oklch(97.1% .014 343.198);
        --color-pink-100: oklch(94.8% .028 342.258);
        --color-pink-200: oklch(89.9% .061 343.231);
        --color-pink-300: oklch(82.3% .12 346.018);
        --color-pink-400: oklch(71.8% .202 349.761);
        --color-pink-500: oklch(65.6% .241 354.308);
        --color-pink-600: oklch(59.2% .249 .584);
        --color-pink-700: oklch(52.5% .223 3.958);
        --color-rose-50: oklch(96.9% .015 12.422);
        --color-rose-100: oklch(94.1% .03 12.58);
        --color-rose-200: oklch(89.2% .058 10.001);
        --color-rose-300: oklch(81% .117 11.638);
        --color-rose-400: oklch(71.2% .194 13.428);
        --color-rose-500: oklch(64.5% .246 16.439);
        --color-rose-600: oklch(58.6% .253 17.585);
        --color-rose-700: oklch(51.4% .222 16.935);
        --color-rose-800: oklch(45.5% .188 13.697);
        --color-slate-50: oklch(98.4% .003 247.858);
        --color-slate-100: oklch(96.8% .007 247.896);
        --color-slate-200: oklch(92.9% .013 255.508);
        --color-slate-300: oklch(86.9% .022 252.894);
        --color-slate-400: oklch(70.4% .04 256.788);
        --color-slate-500: oklch(55.4% .046 257.417);
        --color-slate-600: oklch(44.6% .043 257.281);
        --color-slate-700: oklch(37.2% .044 257.287);
        --color-slate-800: oklch(27.9% .041 260.031);
        --color-slate-900: oklch(20.8% .042 265.755);
        --color-slate-950: oklch(12.9% .042 264.695);
        --color-gray-50: oklch(98.5% .002 247.839);
        --color-gray-100: oklch(96.7% .003 264.542);
        --color-gray-200: oklch(92.8% .006 264.531);
        --color-gray-300: oklch(87.2% .01 258.338);
        --color-gray-400: oklch(70.7% .022 261.325);
        --color-gray-500: oklch(55.1% .027 264.364);
        --color-gray-600: oklch(44.6% .03 256.802);
        --color-gray-700: oklch(37.3% .034 259.733);
        --color-gray-800: oklch(27.8% .033 256.848);
        --color-gray-900: oklch(21% .034 264.665);
        --color-gray-950: oklch(13% .028 261.692);
        --color-black: #000;
        --color-white: #fff;
        --spacing: .25rem;
        --container-xs: 20rem;
        --container-sm: 24rem;
        --container-md: 28rem;
        --container-lg: 32rem;
        --container-xl: 36rem;
        --container-2xl: 42rem;
        --container-3xl: 48rem;
        --container-4xl: 56rem;
        --container-5xl: 64rem;
        --container-6xl: 72rem;
        --container-7xl: 80rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1/.75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25/.875);
        --text-base: 1rem;
        --text-base--line-height: calc(1.5/1);
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75/1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75/1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2/1.5);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: calc(2.25/1.875);
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5/2.25);
        --text-5xl: 3rem;
        --text-5xl--line-height: 1;
        --text-6xl: 3.75rem;
        --text-6xl--line-height: 1;
        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-extrabold: 800;
        --font-weight-black: 900;
        --tracking-tight: -.025em;
        --tracking-wide: .025em;
        --tracking-wider: .05em;
        --tracking-widest: .1em;
        --leading-tight: 1.25;
        --leading-snug: 1.375;
        --leading-relaxed: 1.625;
        --radius-md: .375rem;
        --radius-lg: .5rem;
        --radius-xl: .75rem;
        --radius-2xl: 1rem;
        --radius-3xl: 1.5rem;
        --drop-shadow-sm: 0 1px 2px #00000026;
        --drop-shadow-md: 0 3px 3px #0000001f;
        --drop-shadow-lg: 0 4px 4px #00000026;
        --drop-shadow-xl: 0 9px 7px #0000001a;
        --ease-out: cubic-bezier(0,0,.2,1);
        --ease-in-out: cubic-bezier(.4,0,.2,1);
        --animate-spin: spin 1s linear infinite;
        --animate-ping: ping 1s cubic-bezier(0,0,.2,1)infinite;
        --animate-pulse: pulse 2s cubic-bezier(.4,0,.6,1)infinite;
        --animate-bounce: bounce 1s infinite;
        --blur-xs: 4px;
        --blur-sm: 8px;
        --blur-md: 12px;
        --blur-lg: 16px;
        --blur-xl: 24px;
        --blur-2xl: 40px;
        --blur-3xl: 64px;
        --aspect-video: 16/9;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
        --default-font-family: var(--font-geist-sans);
        --default-mono-font-family: var(--font-geist-mono)
    }
}

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

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

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

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

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

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

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

    b, strong {
        font-weight: bolder
    }

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

    small {
        font-size: 80%
    }

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

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

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

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

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

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

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

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

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

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

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

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

    ::placeholder {
        opacity: 1
    }

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

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

    textarea {
        resize: vertical
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@layer components;

@layer utilities {
    .pointer-events-auto {
        pointer-events: auto
    }

    .pointer-events-none {
        pointer-events: none
    }

    .collapse {
        visibility: collapse
    }

    .invisible {
        visibility: hidden
    }

    .visible {
        visibility: visible
    }

    .sr-only {
        clip-path: inset(50%);
        white-space: nowrap;
        border-width: 0;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden
    }

    .absolute, .sr-only {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .static {
        position: static
    }

    .sticky {
        position: sticky
    }

    .-inset-6 {
        inset: calc(var(--spacing)*-6)
    }

    .inset-0 {
        inset: calc(var(--spacing)*0)
    }

    .inset-x-0 {
        inset-inline: calc(var(--spacing)*0)
    }

    .inset-x-8 {
        inset-inline: calc(var(--spacing)*8)
    }

    .inset-y-0 {
        inset-block: calc(var(--spacing)*0)
    }

    .-top-3 {
        top: calc(var(--spacing)*-3)
    }

    .-top-4 {
        top: calc(var(--spacing)*-4)
    }

    .-top-5 {
        top: calc(var(--spacing)*-5)
    }

    .-top-6 {
        top: calc(var(--spacing)*-6)
    }

    .-top-7 {
        top: calc(var(--spacing)*-7)
    }

    .-top-8 {
        top: calc(var(--spacing)*-8)
    }

    .-top-10 {
        top: calc(var(--spacing)*-10)
    }

    .-top-12 {
        top: calc(var(--spacing)*-12)
    }

    .-top-16 {
        top: calc(var(--spacing)*-16)
    }

    .-top-20 {
        top: calc(var(--spacing)*-20)
    }

    .-top-24 {
        top: calc(var(--spacing)*-24)
    }

    .-top-32 {
        top: calc(var(--spacing)*-32)
    }

    .-top-40 {
        top: calc(var(--spacing)*-40)
    }

    .top-0 {
        top: calc(var(--spacing)*0)
    }

    .top-1\/2 {
        top: 50%
    }

    .top-1\/3 {
        top: 33.3333%
    }

    .top-1\/4 {
        top: 25%
    }

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

    .top-2\.5 {
        top: calc(var(--spacing)*2.5)
    }

    .top-3 {
        top: calc(var(--spacing)*3)
    }

    .top-4 {
        top: calc(var(--spacing)*4)
    }

    .top-5 {
        top: calc(var(--spacing)*5)
    }

    .top-6 {
        top: calc(var(--spacing)*6)
    }

    .top-8 {
        top: calc(var(--spacing)*8)
    }

    .top-10 {
        top: calc(var(--spacing)*10)
    }

    .top-20 {
        top: calc(var(--spacing)*20)
    }

    .top-24 {
        top: calc(var(--spacing)*24)
    }

    .top-\[-36px\] {
        top: -36px
    }

    .top-\[-60px\] {
        top: -60px
    }

    .top-\[4\.5rem\] {
        top: 4.5rem
    }

    .top-\[5\%\] {
        top: 5%
    }

    .top-\[18\%\] {
        top: 18%
    }

    .top-\[30\%\] {
        top: 30%
    }

    .top-full {
        top: 100%
    }

    .-right-4 {
        right: calc(var(--spacing)*-4)
    }

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

    .-right-8 {
        right: calc(var(--spacing)*-8)
    }

    .-right-10 {
        right: calc(var(--spacing)*-10)
    }

    .-right-16 {
        right: calc(var(--spacing)*-16)
    }

    .-right-24 {
        right: calc(var(--spacing)*-24)
    }

    .-right-32 {
        right: calc(var(--spacing)*-32)
    }

    .-right-40 {
        right: calc(var(--spacing)*-40)
    }

    .right-0 {
        right: calc(var(--spacing)*0)
    }

    .right-1\/2 {
        right: 50%
    }

    .right-1\/3 {
        right: 33.3333%
    }

    .right-1\/4 {
        right: 25%
    }

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

    .right-3 {
        right: calc(var(--spacing)*3)
    }

    .right-4 {
        right: calc(var(--spacing)*4)
    }

    .right-8 {
        right: calc(var(--spacing)*8)
    }

    .right-10 {
        right: calc(var(--spacing)*10)
    }

    .right-20 {
        right: calc(var(--spacing)*20)
    }

    .right-\[-36px\] {
        right: -36px
    }

    .right-\[-50px\] {
        right: -50px
    }

    .right-\[-70px\] {
        right: -70px
    }

    .right-\[10\%\] {
        right: 10%
    }

    .right-\[15\%\] {
        right: 15%
    }

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

    .-bottom-4 {
        bottom: calc(var(--spacing)*-4)
    }

    .-bottom-6 {
        bottom: calc(var(--spacing)*-6)
    }

    .-bottom-10 {
        bottom: calc(var(--spacing)*-10)
    }

    .-bottom-16 {
        bottom: calc(var(--spacing)*-16)
    }

    .-bottom-20 {
        bottom: calc(var(--spacing)*-20)
    }

    .-bottom-24 {
        bottom: calc(var(--spacing)*-24)
    }

    .bottom-0 {
        bottom: calc(var(--spacing)*0)
    }

    .bottom-1\/4 {
        bottom: 25%
    }

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

    .bottom-3 {
        bottom: calc(var(--spacing)*3)
    }

    .bottom-4 {
        bottom: calc(var(--spacing)*4)
    }

    .bottom-6 {
        bottom: calc(var(--spacing)*6)
    }

    .bottom-8 {
        bottom: calc(var(--spacing)*8)
    }

    .bottom-10 {
        bottom: calc(var(--spacing)*10)
    }

    .bottom-20 {
        bottom: calc(var(--spacing)*20)
    }

    .bottom-32 {
        bottom: calc(var(--spacing)*32)
    }

    .bottom-\[-80px\] {
        bottom: -80px
    }

    .bottom-\[8\%\] {
        bottom: 8%
    }

    .bottom-\[22\%\] {
        bottom: 22%
    }

    .bottom-full {
        bottom: 100%
    }

    .-left-4 {
        left: calc(var(--spacing)*-4)
    }

    .-left-6 {
        left: calc(var(--spacing)*-6)
    }

    .-left-10 {
        left: calc(var(--spacing)*-10)
    }

    .-left-16 {
        left: calc(var(--spacing)*-16)
    }

    .-left-20 {
        left: calc(var(--spacing)*-20)
    }

    .-left-24 {
        left: calc(var(--spacing)*-24)
    }

    .-left-32 {
        left: calc(var(--spacing)*-32)
    }

    .left-0 {
        left: calc(var(--spacing)*0)
    }

    .left-1\/2 {
        left: 50%
    }

    .left-1\/3 {
        left: 33.3333%
    }

    .left-1\/4 {
        left: 25%
    }

    .left-3 {
        left: calc(var(--spacing)*3)
    }

    .left-4 {
        left: calc(var(--spacing)*4)
    }

    .left-5 {
        left: calc(var(--spacing)*5)
    }

    .left-6 {
        left: calc(var(--spacing)*6)
    }

    .left-7 {
        left: calc(var(--spacing)*7)
    }

    .left-8 {
        left: calc(var(--spacing)*8)
    }

    .left-10 {
        left: calc(var(--spacing)*10)
    }

    .left-\[-60px\] {
        left: -60px
    }

    .left-\[6\%\] {
        left: 6%
    }

    .left-\[10\%\] {
        left: 10%
    }

    .left-\[calc\(50\%\+4rem\)\] {
        left: calc(50% + 4rem)
    }

    .z-0 {
        z-index: 0
    }

    .z-10 {
        z-index: 10
    }

    .z-20 {
        z-index: 20
    }

    .z-30 {
        z-index: 30
    }

    .z-40 {
        z-index: 40
    }

    .z-50 {
        z-index: 50
    }

    .z-\[90\] {
        z-index: 90
    }

    .z-\[100\] {
        z-index: 100
    }

    .z-\[110\] {
        z-index: 110
    }

    .z-\[9998\] {
        z-index: 9998
    }

    .z-\[9999\] {
        z-index: 9999
    }

    .order-1 {
        order: 1
    }

    .order-2 {
        order: 2
    }

    .col-span-1 {
        grid-column: span 1/span 1
    }

    .col-span-2 {
        grid-column: span 2/span 2
    }

    .col-span-3 {
        grid-column: span 3/span 3
    }

    .col-span-9 {
        grid-column: span 9/span 9
    }

    .row-1 {
        grid-row: 1
    }

    .row-2 {
        grid-row: 2
    }

    .row-3 {
        grid-row: 3
    }

    .row-4 {
        grid-row: 4
    }

    .container {
        width: 100%
    }

    @media (min-width:40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media (min-width:48rem) {
        .container {
            max-width: 48rem
        }
    }

    @media (min-width:64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media (min-width:80rem) {
        .container {
            max-width: 80rem
        }
    }

    @media (min-width:96rem) {
        .container {
            max-width: 96rem
        }
    }

    .m-0 {
        margin: calc(var(--spacing)*0)
    }

    .-mx-1 {
        margin-inline: calc(var(--spacing)*-1)
    }

    .-mx-3 {
        margin-inline: calc(var(--spacing)*-3)
    }

    .mx-1 {
        margin-inline: calc(var(--spacing)*1)
    }

    .mx-1\.5 {
        margin-inline: calc(var(--spacing)*1.5)
    }

    .mx-2 {
        margin-inline: calc(var(--spacing)*2)
    }

    .mx-4 {
        margin-inline: calc(var(--spacing)*4)
    }

    .mx-6 {
        margin-inline: calc(var(--spacing)*6)
    }

    .mx-auto {
        margin-inline: auto
    }

    .my-1 {
        margin-block: calc(var(--spacing)*1)
    }

    .my-1\.5 {
        margin-block: calc(var(--spacing)*1.5)
    }

    .my-4 {
        margin-block: calc(var(--spacing)*4)
    }

    .my-5 {
        margin-block: calc(var(--spacing)*5)
    }

    .my-6 {
        margin-block: calc(var(--spacing)*6)
    }

    .my-8 {
        margin-block: calc(var(--spacing)*8)
    }

    .my-10 {
        margin-block: calc(var(--spacing)*10)
    }

    .my-12 {
        margin-block: calc(var(--spacing)*12)
    }

    .-mt-8 {
        margin-top: calc(var(--spacing)*-8)
    }

    .-mt-16 {
        margin-top: calc(var(--spacing)*-16)
    }

    .-mt-32 {
        margin-top: calc(var(--spacing)*-32)
    }

    .-mt-48 {
        margin-top: calc(var(--spacing)*-48)
    }

    .-mt-px {
        margin-top: -1px
    }

    .mt-0 {
        margin-top: calc(var(--spacing)*0)
    }

    .mt-0\.5 {
        margin-top: calc(var(--spacing)*.5)
    }

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

    .mt-1\.5 {
        margin-top: calc(var(--spacing)*1.5)
    }

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

    .mt-3 {
        margin-top: calc(var(--spacing)*3)
    }

    .mt-4 {
        margin-top: calc(var(--spacing)*4)
    }

    .mt-5 {
        margin-top: calc(var(--spacing)*5)
    }

    .mt-6 {
        margin-top: calc(var(--spacing)*6)
    }

    .mt-7 {
        margin-top: calc(var(--spacing)*7)
    }

    .mt-8 {
        margin-top: calc(var(--spacing)*8)
    }

    .mt-10 {
        margin-top: calc(var(--spacing)*10)
    }

    .mt-12 {
        margin-top: calc(var(--spacing)*12)
    }

    .mt-14 {
        margin-top: calc(var(--spacing)*14)
    }

    .mt-16 {
        margin-top: calc(var(--spacing)*16)
    }

    .mt-24 {
        margin-top: calc(var(--spacing)*24)
    }

    .mt-auto {
        margin-top: auto
    }

    .-mr-16 {
        margin-right: calc(var(--spacing)*-16)
    }

    .-mr-32 {
        margin-right: calc(var(--spacing)*-32)
    }

    .-mr-48 {
        margin-right: calc(var(--spacing)*-48)
    }

    .-mr-\[50vw\] {
        margin-right: -50vw
    }

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

    .mr-1\.5 {
        margin-right: calc(var(--spacing)*1.5)
    }

    .mr-2 {
        margin-right: calc(var(--spacing)*2)
    }

    .mr-3 {
        margin-right: calc(var(--spacing)*3)
    }

    .mr-4 {
        margin-right: calc(var(--spacing)*4)
    }

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

    .-mb-16 {
        margin-bottom: calc(var(--spacing)*-16)
    }

    .-mb-24 {
        margin-bottom: calc(var(--spacing)*-24)
    }

    .-mb-40 {
        margin-bottom: calc(var(--spacing)*-40)
    }

    .mb-0 {
        margin-bottom: calc(var(--spacing)*0)
    }

    .mb-0\.5 {
        margin-bottom: calc(var(--spacing)*.5)
    }

    .mb-1 {
        margin-bottom: calc(var(--spacing)*1)
    }

    .mb-1\.5 {
        margin-bottom: calc(var(--spacing)*1.5)
    }

    .mb-2 {
        margin-bottom: calc(var(--spacing)*2)
    }

    .mb-3 {
        margin-bottom: calc(var(--spacing)*3)
    }

    .mb-4 {
        margin-bottom: calc(var(--spacing)*4)
    }

    .mb-5 {
        margin-bottom: calc(var(--spacing)*5)
    }

    .mb-6 {
        margin-bottom: calc(var(--spacing)*6)
    }

    .mb-7 {
        margin-bottom: calc(var(--spacing)*7)
    }

    .mb-8 {
        margin-bottom: calc(var(--spacing)*8)
    }

    .mb-9 {
        margin-bottom: calc(var(--spacing)*9)
    }

    .mb-10 {
        margin-bottom: calc(var(--spacing)*10)
    }

    .mb-12 {
        margin-bottom: calc(var(--spacing)*12)
    }

    .mb-14 {
        margin-bottom: calc(var(--spacing)*14)
    }

    .mb-16 {
        margin-bottom: calc(var(--spacing)*16)
    }

    .mb-20 {
        margin-bottom: calc(var(--spacing)*20)
    }

    .-ml-1 {
        margin-left: calc(var(--spacing)*-1)
    }

    .-ml-16 {
        margin-left: calc(var(--spacing)*-16)
    }

    .-ml-24 {
        margin-left: calc(var(--spacing)*-24)
    }

    .-ml-40 {
        margin-left: calc(var(--spacing)*-40)
    }

    .-ml-\[50vw\] {
        margin-left: -50vw
    }

    .ml-0 {
        margin-left: calc(var(--spacing)*0)
    }

    .ml-0\.5 {
        margin-left: calc(var(--spacing)*.5)
    }

    .ml-1 {
        margin-left: calc(var(--spacing)*1)
    }

    .ml-1\.5 {
        margin-left: calc(var(--spacing)*1.5)
    }

    .ml-2 {
        margin-left: calc(var(--spacing)*2)
    }

    .ml-3 {
        margin-left: calc(var(--spacing)*3)
    }

    .ml-4 {
        margin-left: calc(var(--spacing)*4)
    }

    .ml-6 {
        margin-left: calc(var(--spacing)*6)
    }

    .ml-auto {
        margin-left: auto
    }

    .line-clamp-1 {
        -webkit-line-clamp: 1
    }

    .line-clamp-1, .line-clamp-2 {
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

    .line-clamp-2 {
        -webkit-line-clamp: 2
    }

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

    .line-clamp-3, .line-clamp-4 {
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

    .line-clamp-4 {
        -webkit-line-clamp: 4
    }

    .block {
        display: block
    }

    .contents {
        display: contents
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .inline {
        display: inline
    }

    .inline-block {
        display: inline-block
    }

    .inline-flex {
        display: inline-flex
    }

    .table {
        display: table
    }

    .aspect-\[4\/3\] {
        aspect-ratio: 4/3
    }

    .aspect-\[16\/6\] {
        aspect-ratio: 16/6
    }

    .aspect-\[16\/9\] {
        aspect-ratio: 16/9
    }

    .aspect-\[21\/9\] {
        aspect-ratio: 21/9
    }

    .aspect-square {
        aspect-ratio: 1
    }

    .aspect-video {
        aspect-ratio: var(--aspect-video)
    }

    .h-0 {
        height: calc(var(--spacing)*0)
    }

    .h-0\.5 {
        height: calc(var(--spacing)*.5)
    }

    .h-1 {
        height: calc(var(--spacing)*1)
    }

    .h-1\.5 {
        height: calc(var(--spacing)*1.5)
    }

    .h-2 {
        height: calc(var(--spacing)*2)
    }

    .h-2\.5 {
        height: calc(var(--spacing)*2.5)
    }

    .h-3 {
        height: calc(var(--spacing)*3)
    }

    .h-3\.5 {
        height: calc(var(--spacing)*3.5)
    }

    .h-4 {
        height: calc(var(--spacing)*4)
    }

    .h-5 {
        height: calc(var(--spacing)*5)
    }

    .h-6 {
        height: calc(var(--spacing)*6)
    }

    .h-7 {
        height: calc(var(--spacing)*7)
    }

    .h-8 {
        height: calc(var(--spacing)*8)
    }

    .h-9 {
        height: calc(var(--spacing)*9)
    }

    .h-10 {
        height: calc(var(--spacing)*10)
    }

    .h-11 {
        height: calc(var(--spacing)*11)
    }

    .h-12 {
        height: calc(var(--spacing)*12)
    }

    .h-14 {
        height: calc(var(--spacing)*14)
    }

    .h-16 {
        height: calc(var(--spacing)*16)
    }

    .h-20 {
        height: calc(var(--spacing)*20)
    }

    .h-24 {
        height: calc(var(--spacing)*24)
    }

    .h-28 {
        height: calc(var(--spacing)*28)
    }

    .h-32 {
        height: calc(var(--spacing)*32)
    }

    .h-36 {
        height: calc(var(--spacing)*36)
    }

    .h-40 {
        height: calc(var(--spacing)*40)
    }

    .h-44 {
        height: calc(var(--spacing)*44)
    }

    .h-48 {
        height: calc(var(--spacing)*48)
    }

    .h-56 {
        height: calc(var(--spacing)*56)
    }

    .h-64 {
        height: calc(var(--spacing)*64)
    }

    .h-72 {
        height: calc(var(--spacing)*72)
    }

    .h-80 {
        height: calc(var(--spacing)*80)
    }

    .h-96 {
        height: calc(var(--spacing)*96)
    }

    .h-\[42px\] {
        height: 42px
    }

    .h-\[120px\] {
        height: 120px
    }

    .h-\[146px\] {
        height: 146px
    }

    .h-\[300px\] {
        height: 300px
    }

    .h-\[320px\] {
        height: 320px
    }

    .h-\[360px\] {
        height: 360px
    }

    .h-\[400px\] {
        height: 400px
    }

    .h-\[420px\] {
        height: 420px
    }

    .h-\[450px\] {
        height: 450px
    }

    .h-\[500px\] {
        height: 500px
    }

    .h-\[600px\] {
        height: 600px
    }

    .h-\[700px\] {
        height: 700px
    }

    .h-\[calc\(100\%-48px\)\] {
        height: calc(100% - 48px)
    }

    .h-\[calc\(100vh-3\.5rem\)\] {
        height: calc(100vh - 3.5rem)
    }

    .h-\[calc\(100vh-140px\)\] {
        height: calc(100vh - 140px)
    }

    .h-\[min\(50vw\,360px\)\] {
        height: min(50vw,360px)
    }

    .h-\[min\(60vw\,400px\)\] {
        height: min(60vw,400px)
    }

    .h-\[min\(70vw\,460px\)\] {
        height: min(70vw,460px)
    }

    .h-\[min\(75vw\,600px\)\] {
        height: min(75vw,600px)
    }

    .h-\[min\(80vw\,520px\)\] {
        height: min(80vw,520px)
    }

    .h-\[min\(85vw\,760px\)\] {
        height: min(85vw,760px)
    }

    .h-auto {
        height: auto
    }

    .h-fit {
        height: fit-content
    }

    .h-full {
        height: 100%
    }

    .h-px {
        height: 1px
    }

    .h-screen {
        height: 100vh
    }

    .max-h-0 {
        max-height: calc(var(--spacing)*0)
    }

    .max-h-10 {
        max-height: calc(var(--spacing)*10)
    }

    .max-h-14 {
        max-height: calc(var(--spacing)*14)
    }

    .max-h-40 {
        max-height: calc(var(--spacing)*40)
    }

    .max-h-48 {
        max-height: calc(var(--spacing)*48)
    }

    .max-h-56 {
        max-height: calc(var(--spacing)*56)
    }

    .max-h-64 {
        max-height: calc(var(--spacing)*64)
    }

    .max-h-80 {
        max-height: calc(var(--spacing)*80)
    }

    .max-h-96 {
        max-height: calc(var(--spacing)*96)
    }

    .max-h-\[90vh\] {
        max-height: 90vh
    }

    .max-h-\[300px\] {
        max-height: 300px
    }

    .max-h-\[400px\] {
        max-height: 400px
    }

    .max-h-\[560px\] {
        max-height: 560px
    }

    .max-h-\[calc\(90vh-5rem\)\] {
        max-height: calc(90vh - 5rem)
    }

    .max-h-\[calc\(100dvh-1rem\)\] {
        max-height: calc(100dvh - 1rem)
    }

    .max-h-\[calc\(100vh-6rem\)\] {
        max-height: calc(100vh - 6rem)
    }

    .max-h-\[calc\(100vh-7rem\)\] {
        max-height: calc(100vh - 7rem)
    }

    .max-h-\[calc\(100vh-16rem\)\] {
        max-height: calc(100vh - 16rem)
    }

    .max-h-\[calc\(100vh-80px\)\] {
        max-height: calc(100vh - 80px)
    }

    .max-h-\[calc\(100vh-100px\)\] {
        max-height: calc(100vh - 100px)
    }

    .max-h-\[min\(70vh\,calc\(100dvh-12rem\)\)\] {
        max-height: min(70vh,100dvh - 12rem)
    }

    .max-h-\[min\(2000px\,calc\(100vh-160px\)\)\] {
        max-height: min(2000px,100vh - 160px)
    }

    .max-h-full {
        max-height: 100%
    }

    .min-h-0 {
        min-height: calc(var(--spacing)*0)
    }

    .min-h-9 {
        min-height: calc(var(--spacing)*9)
    }

    .min-h-\[3rem\] {
        min-height: 3rem
    }

    .min-h-\[30vh\] {
        min-height: 30vh
    }

    .min-h-\[40vh\] {
        min-height: 40vh
    }

    .min-h-\[42px\] {
        min-height: 42px
    }

    .min-h-\[50vh\] {
        min-height: 50vh
    }

    .min-h-\[56px\] {
        min-height: 56px
    }

    .min-h-\[60px\] {
        min-height: 60px
    }

    .min-h-\[60vh\] {
        min-height: 60vh
    }

    .min-h-\[80px\] {
        min-height: 80px
    }

    .min-h-\[82vh\] {
        min-height: 82vh
    }

    .min-h-\[90px\] {
        min-height: 90px
    }

    .min-h-\[100px\] {
        min-height: 100px
    }

    .min-h-\[120px\] {
        min-height: 120px
    }

    .min-h-\[150px\] {
        min-height: 150px
    }

    .min-h-\[160px\] {
        min-height: 160px
    }

    .min-h-\[200px\] {
        min-height: 200px
    }

    .min-h-\[240px\] {
        min-height: 240px
    }

    .min-h-\[260px\] {
        min-height: 260px
    }

    .min-h-\[280px\] {
        min-height: 280px
    }

    .min-h-\[420px\] {
        min-height: 420px
    }

    .min-h-\[480px\] {
        min-height: 480px
    }

    .min-h-\[520px\] {
        min-height: 520px
    }

    .min-h-\[800px\] {
        min-height: 800px
    }

    .min-h-\[calc\(100vh-4rem\)\] {
        min-height: calc(100vh - 4rem)
    }

    .min-h-\[calc\(100vh-5\.5rem\)\] {
        min-height: calc(100vh - 5.5rem)
    }

    .min-h-\[calc\(100vh-8\.5rem\)\] {
        min-height: calc(100vh - 8.5rem)
    }

    .min-h-screen {
        min-height: 100vh
    }

    .w-0 {
        width: calc(var(--spacing)*0)
    }

    .w-0\.5 {
        width: calc(var(--spacing)*.5)
    }

    .w-1 {
        width: calc(var(--spacing)*1)
    }

    .w-1\.5 {
        width: calc(var(--spacing)*1.5)
    }

    .w-1\/2 {
        width: 50%
    }

    .w-1\/3 {
        width: 33.3333%
    }

    .w-1\/4 {
        width: 25%
    }

    .w-2 {
        width: calc(var(--spacing)*2)
    }

    .w-2\.5 {
        width: calc(var(--spacing)*2.5)
    }

    .w-2\/3 {
        width: 66.6667%
    }

    .w-3 {
        width: calc(var(--spacing)*3)
    }

    .w-3\.5 {
        width: calc(var(--spacing)*3.5)
    }

    .w-3\/4 {
        width: 75%
    }

    .w-4 {
        width: calc(var(--spacing)*4)
    }

    .w-4\/6 {
        width: 66.6667%
    }

    .w-5 {
        width: calc(var(--spacing)*5)
    }

    .w-5\/6 {
        width: 83.3333%
    }

    .w-6 {
        width: calc(var(--spacing)*6)
    }

    .w-7 {
        width: calc(var(--spacing)*7)
    }

    .w-8 {
        width: calc(var(--spacing)*8)
    }

    .w-9 {
        width: calc(var(--spacing)*9)
    }

    .w-10 {
        width: calc(var(--spacing)*10)
    }

    .w-11 {
        width: calc(var(--spacing)*11)
    }

    .w-12 {
        width: calc(var(--spacing)*12)
    }

    .w-14 {
        width: calc(var(--spacing)*14)
    }

    .w-16 {
        width: calc(var(--spacing)*16)
    }

    .w-20 {
        width: calc(var(--spacing)*20)
    }

    .w-24 {
        width: calc(var(--spacing)*24)
    }

    .w-28 {
        width: calc(var(--spacing)*28)
    }

    .w-32 {
        width: calc(var(--spacing)*32)
    }

    .w-36 {
        width: calc(var(--spacing)*36)
    }

    .w-40 {
        width: calc(var(--spacing)*40)
    }

    .w-44 {
        width: calc(var(--spacing)*44)
    }

    .w-48 {
        width: calc(var(--spacing)*48)
    }

    .w-52 {
        width: calc(var(--spacing)*52)
    }

    .w-56 {
        width: calc(var(--spacing)*56)
    }

    .w-64 {
        width: calc(var(--spacing)*64)
    }

    .w-72 {
        width: calc(var(--spacing)*72)
    }

    .w-80 {
        width: calc(var(--spacing)*80)
    }

    .w-96 {
        width: calc(var(--spacing)*96)
    }

    .w-\[80\%\] {
        width: 80%
    }

    .w-\[92vw\] {
        width: 92vw
    }

    .w-\[160px\] {
        width: 160px
    }

    .w-\[230px\] {
        width: 230px
    }

    .w-\[280px\] {
        width: 280px
    }

    .w-\[300px\] {
        width: 300px
    }

    .w-\[320px\] {
        width: 320px
    }

    .w-\[360px\] {
        width: 360px
    }

    .w-\[400px\] {
        width: 400px
    }

    .w-\[420px\] {
        width: 420px
    }

    .w-\[500px\] {
        width: 500px
    }

    .w-\[600px\] {
        width: 600px
    }

    .w-\[700px\] {
        width: 700px
    }

    .w-\[720px\] {
        width: 720px
    }

    .w-\[900px\] {
        width: 900px
    }

    .w-\[calc\(100\%-5rem\)\] {
        width: calc(100% - 5rem)
    }

    .w-\[min\(60vw\,400px\)\] {
        width: min(60vw,400px)
    }

    .w-\[min\(70vw\,440px\)\] {
        width: min(70vw,440px)
    }

    .w-\[min\(75vw\,600px\)\] {
        width: min(75vw,600px)
    }

    .w-\[min\(80vw\,540px\)\] {
        width: min(80vw,540px)
    }

    .w-\[min\(85vw\,760px\)\] {
        width: min(85vw,760px)
    }

    .w-\[min\(90vw\,600px\)\] {
        width: min(90vw,600px)
    }

    .w-\[min\(100\%\,720px\)\] {
        width: min(100%,720px)
    }

    .w-\[min\(100vw\,900px\)\] {
        width: min(100vw,900px)
    }

    .w-auto {
        width: auto
    }

    .w-fit {
        width: fit-content
    }

    .w-full {
        width: 100%
    }

    .w-px {
        width: 1px
    }

    .w-screen {
        width: 100vw
    }

    .max-w-2xl {
        max-width: var(--container-2xl)
    }

    .max-w-3xl {
        max-width: var(--container-3xl)
    }

    .max-w-4xl {
        max-width: var(--container-4xl)
    }

    .max-w-5xl {
        max-width: var(--container-5xl)
    }

    .max-w-6xl {
        max-width: var(--container-6xl)
    }

    .max-w-7xl {
        max-width: var(--container-7xl)
    }

    .max-w-\[22vw\] {
        max-width: 22vw
    }

    .max-w-\[36vw\] {
        max-width: 36vw
    }

    .max-w-\[40vw\] {
        max-width: 40vw
    }

    .max-w-\[80px\] {
        max-width: 80px
    }

    .max-w-\[90vw\] {
        max-width: 90vw
    }

    .max-w-\[95\%\] {
        max-width: 95%
    }

    .max-w-\[95vw\] {
        max-width: 95vw
    }

    .max-w-\[120px\] {
        max-width: 120px
    }

    .max-w-\[140px\] {
        max-width: 140px
    }

    .max-w-\[220px\] {
        max-width: 220px
    }

    .max-w-\[360px\] {
        max-width: 360px
    }

    .max-w-\[420px\] {
        max-width: 420px
    }

    .max-w-\[480px\] {
        max-width: 480px
    }

    .max-w-\[520px\] {
        max-width: 520px
    }

    .max-w-\[600px\] {
        max-width: 600px
    }

    .max-w-\[720px\] {
        max-width: 720px
    }

    .max-w-\[800px\] {
        max-width: 800px
    }

    .max-w-\[900px\] {
        max-width: 900px
    }

    .max-w-\[1092px\] {
        max-width: 1092px
    }

    .max-w-\[1200px\] {
        max-width: 1200px
    }

    .max-w-\[1600px\] {
        max-width: 1600px
    }

    .max-w-\[1800px\] {
        max-width: 1800px
    }

    .max-w-full {
        max-width: 100%
    }

    .max-w-lg {
        max-width: var(--container-lg)
    }

    .max-w-md {
        max-width: var(--container-md)
    }

    .max-w-none {
        max-width: none
    }

    .max-w-sm {
        max-width: var(--container-sm)
    }

    .max-w-xl {
        max-width: var(--container-xl)
    }

    .max-w-xs {
        max-width: var(--container-xs)
    }

    .min-w-0 {
        min-width: calc(var(--spacing)*0)
    }

    .min-w-6 {
        min-width: calc(var(--spacing)*6)
    }

    .min-w-\[100px\] {
        min-width: 100px
    }

    .min-w-\[120px\] {
        min-width: 120px
    }

    .min-w-\[130px\] {
        min-width: 130px
    }

    .min-w-\[140px\] {
        min-width: 140px
    }

    .min-w-\[180px\] {
        min-width: 180px
    }

    .min-w-\[200px\] {
        min-width: 200px
    }

    .min-w-\[320px\] {
        min-width: 320px
    }

    .min-w-\[420px\] {
        min-width: 420px
    }

    .min-w-\[520px\] {
        min-width: 520px
    }

    .min-w-\[600px\] {
        min-width: 600px
    }

    .min-w-full {
        min-width: 100%
    }

    .flex-1 {
        flex: 1
    }

    .flex-shrink-0, .shrink-0 {
        flex-shrink: 0
    }

    .shrink-1 {
        flex-shrink: 1
    }

    .flex-grow, .grow {
        flex-grow: 1
    }

    .border-collapse {
        border-collapse: collapse
    }

    .origin-top-left {
        transform-origin: 0 0
    }

    .-translate-x-1\/2 {
        --tw-translate-x: calc(calc(1/2*100%)*-1)
    }

    .-translate-x-1\/2, .translate-x-1 {
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .translate-x-1 {
        --tw-translate-x: calc(var(--spacing)*1)
    }

    .translate-x-1\/2 {
        --tw-translate-x: calc(1/2*100%)
    }

    .translate-x-1\/2, .translate-x-2 {
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .translate-x-2 {
        --tw-translate-x: calc(var(--spacing)*2)
    }

    .translate-x-5 {
        --tw-translate-x: calc(var(--spacing)*5)
    }

    .-translate-y-1\/2, .translate-x-5 {
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .-translate-y-1\/2 {
        --tw-translate-y: calc(calc(1/2*100%)*-1)
    }

    .translate-y-1\/2 {
        --tw-translate-y: calc(1/2*100%);
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .scale-90 {
        --tw-scale-x: 90%;
        --tw-scale-y: 90%;
        --tw-scale-z: 90%
    }

    .scale-105, .scale-90 {
        scale: var(--tw-scale-x)var(--tw-scale-y)
    }

    .scale-105 {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%
    }

    .scale-\[0\.995\] {
        scale: .995
    }

    .scale-\[1\.01\] {
        scale: 1.01
    }

    .scale-\[1\.12\] {
        scale: 1.12
    }

    .scale-\[1\.045\] {
        scale: 1.045
    }

    .-rotate-45 {
        rotate: -45deg
    }

    .rotate-45 {
        rotate: 45deg
    }

    .rotate-180 {
        rotate: 180deg
    }

    .rotate-\[-90deg\] {
        rotate: -90deg
    }

    .transform {
        transform: var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)
    }

    .animate-bounce {
        animation: var(--animate-bounce)
    }

    .animate-ping {
        animation: var(--animate-ping)
    }

    .animate-pulse {
        animation: var(--animate-pulse)
    }

    .animate-spin {
        animation: var(--animate-spin)
    }

    .cursor-col-resize {
        cursor: col-resize
    }

    .cursor-default {
        cursor: default
    }

    .cursor-help {
        cursor: help
    }

    .cursor-not-allowed {
        cursor: not-allowed
    }

    .cursor-pointer {
        cursor: pointer
    }

    .cursor-text {
        cursor: text
    }

    .cursor-wait {
        cursor: wait
    }

    .resize {
        resize: both
    }

    .resize-none {
        resize: none
    }

    .resize-y {
        resize: vertical
    }

    .scroll-mt-24 {
        scroll-margin-top: calc(var(--spacing)*24)
    }

    .list-inside {
        list-style-position: inside
    }

    .list-decimal {
        list-style-type: decimal
    }

    .list-disc {
        list-style-type: disc
    }

    .list-none {
        list-style-type: none
    }

    .appearance-none {
        appearance: none
    }

    .grid-cols-1 {
        grid-template-columns: repeat(1,minmax(0,1fr))
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .grid-cols-3 {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .grid-cols-5 {
        grid-template-columns: repeat(5,minmax(0,1fr))
    }

    .grid-cols-12 {
        grid-template-columns: repeat(12,minmax(0,1fr))
    }

    .grid-cols-\[6px_88px_1fr_auto\] {
        grid-template-columns: 6px 88px 1fr auto
    }

    .grid-rows-\[0fr\] {
        grid-template-rows: 0fr
    }

    .grid-rows-\[1fr\] {
        grid-template-rows: 1fr
    }

    .flex-col {
        flex-direction: column
    }

    .flex-col-reverse {
        flex-direction: column-reverse
    }

    .flex-row {
        flex-direction: row
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .place-items-center {
        place-items: center
    }

    .items-baseline {
        align-items: baseline
    }

    .items-center {
        align-items: center
    }

    .items-end {
        align-items: flex-end
    }

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

    .items-stretch {
        align-items: stretch
    }

    .\!justify-start {
        justify-content: flex-start !important
    }

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

    .justify-center {
        justify-content: center
    }

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

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

    .\!gap-2 {
        gap: calc(var(--spacing)*2) !important
    }

    .gap-0 {
        gap: calc(var(--spacing)*0)
    }

    .gap-0\.5 {
        gap: calc(var(--spacing)*.5)
    }

    .gap-1 {
        gap: calc(var(--spacing)*1)
    }

    .gap-1\.5 {
        gap: calc(var(--spacing)*1.5)
    }

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

    .gap-2\.5 {
        gap: calc(var(--spacing)*2.5)
    }

    .gap-3 {
        gap: calc(var(--spacing)*3)
    }

    .gap-4 {
        gap: calc(var(--spacing)*4)
    }

    .gap-5 {
        gap: calc(var(--spacing)*5)
    }

    .gap-6 {
        gap: calc(var(--spacing)*6)
    }

    .gap-7 {
        gap: calc(var(--spacing)*7)
    }

    .gap-8 {
        gap: calc(var(--spacing)*8)
    }

    .gap-10 {
        gap: calc(var(--spacing)*10)
    }

    .gap-12 {
        gap: calc(var(--spacing)*12)
    }

    .gap-16 {
        gap: calc(var(--spacing)*16)
    }

    :where(.space-y-0\.5>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*.5)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-1>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-1\.5>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-2>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-3>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-3\.5>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*3.5)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*3.5)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-4>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-5>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*5)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*5)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-6>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-8>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-9>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*9)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*9)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-10>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*10)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*10)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-12>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*12)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*12)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-16>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*16)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*16)*calc(1 - var(--tw-space-y-reverse)))
    }

    .gap-x-3 {
        column-gap: calc(var(--spacing)*3)
    }

    .gap-x-4 {
        column-gap: calc(var(--spacing)*4)
    }

    .gap-x-10 {
        column-gap: calc(var(--spacing)*10)
    }

    :where(.space-x-1>:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing)*1)*var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-x-reverse)))
    }

    :where(.space-x-2>:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))
    }

    :where(.space-x-3>:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing)*3)*var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-x-reverse)))
    }

    :where(.space-x-4>:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))
    }

    .gap-y-1 {
        row-gap: calc(var(--spacing)*1)
    }

    .gap-y-4 {
        row-gap: calc(var(--spacing)*4)
    }

    :where(.divide-y>:not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(1px*var(--tw-divide-y-reverse));
        border-bottom-width: calc(1px*calc(1 - var(--tw-divide-y-reverse)))
    }

    :where(.divide-black\/5>:not(:last-child)) {
        border-color: #0000000d
    }

    @supports (color:color-mix(in lab,red,red)) {
        :where(.divide-black\/5>:not(:last-child)) {
            border-color: color-mix(in oklab,var(--color-black)5%,transparent)
        }
    }

    :where(.divide-gray-50>:not(:last-child)) {
        border-color: var(--color-gray-50)
    }

    :where(.divide-gray-100>:not(:last-child)) {
        border-color: var(--color-gray-100)
    }

    :where(.divide-gray-100\/80>:not(:last-child)) {
        border-color: #f3f4f6cc
    }

    @supports (color:color-mix(in lab,red,red)) {
        :where(.divide-gray-100\/80>:not(:last-child)) {
            border-color: color-mix(in oklab,var(--color-gray-100)80%,transparent)
        }
    }

    :where(.divide-gray-200>:not(:last-child)) {
        border-color: var(--color-gray-200)
    }

    :where(.divide-indigo-100>:not(:last-child)) {
        border-color: var(--color-indigo-100)
    }

    :where(.divide-slate-100>:not(:last-child)) {
        border-color: var(--color-slate-100)
    }

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

    .self-stretch {
        align-self: stretch
    }

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

    .overflow-auto {
        overflow: auto
    }

    .overflow-hidden {
        overflow: hidden
    }

    .overflow-visible {
        overflow: visible
    }

    .overflow-x-auto {
        overflow-x: auto
    }

    .overflow-x-clip {
        overflow-x: clip
    }

    .overflow-x-hidden {
        overflow-x: hidden
    }

    .overflow-y-auto {
        overflow-y: auto
    }

    .overflow-y-hidden {
        overflow-y: hidden
    }

    .scroll-smooth {
        scroll-behavior: smooth
    }

    .rounded {
        border-radius: .25rem
    }

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

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

    .rounded-\[10px\] {
        border-radius: 10px
    }

    .rounded-\[12px\] {
        border-radius: 12px
    }

    .rounded-\[16px\] {
        border-radius: 16px
    }

    .rounded-\[inherit\] {
        border-radius: inherit
    }

    .rounded-full {
        border-radius: 3.40282e+38px
    }

    .rounded-lg {
        border-radius: var(--radius-lg)
    }

    .rounded-md {
        border-radius: var(--radius-md)
    }

    .rounded-none {
        border-radius: 0
    }

    .rounded-xl {
        border-radius: var(--radius-xl)
    }

    .rounded-t {
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem
    }

    .rounded-t-2xl {
        border-top-left-radius: var(--radius-2xl);
        border-top-right-radius: var(--radius-2xl)
    }

    .rounded-t-xl {
        border-top-left-radius: var(--radius-xl);
        border-top-right-radius: var(--radius-xl)
    }

    .rounded-l {
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem
    }

    .rounded-tl-lg {
        border-top-left-radius: var(--radius-lg)
    }

    .rounded-r-full {
        border-top-right-radius: 3.40282e+38px;
        border-bottom-right-radius: 3.40282e+38px
    }

    .rounded-r-lg {
        border-top-right-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg)
    }

    .rounded-r-xl {
        border-top-right-radius: var(--radius-xl);
        border-bottom-right-radius: var(--radius-xl)
    }

    .rounded-tr-lg {
        border-top-right-radius: var(--radius-lg)
    }

    .rounded-b-xl {
        border-bottom-right-radius: var(--radius-xl);
        border-bottom-left-radius: var(--radius-xl)
    }

    .rounded-bl-full {
        border-bottom-left-radius: 3.40282e+38px
    }

    .rounded-bl-lg {
        border-bottom-left-radius: var(--radius-lg)
    }

    .\!border-0 {
        border-style: var(--tw-border-style) !important;
        border-width: 0 !important
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-0 {
        border-style: var(--tw-border-style);
        border-width: 0
    }

    .border-1 {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-2 {
        border-style: var(--tw-border-style);
        border-width: 2px
    }

    .border-4 {
        border-style: var(--tw-border-style);
        border-width: 4px
    }

    .border-8 {
        border-style: var(--tw-border-style);
        border-width: 8px
    }

    .border-\[5px\] {
        border-style: var(--tw-border-style);
        border-width: 5px
    }

    .border-\[6px\] {
        border-style: var(--tw-border-style);
        border-width: 6px
    }

    .border-y {
        border-block-style: var(--tw-border-style);
        border-block-width: 1px
    }

    .border-t {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px
    }

    .border-t-0 {
        border-top-style: var(--tw-border-style);
        border-top-width: 0
    }

    .border-t-2 {
        border-top-style: var(--tw-border-style);
        border-top-width: 2px
    }

    .border-t-4 {
        border-top-style: var(--tw-border-style);
        border-top-width: 4px
    }

    .border-r-4 {
        border-right-style: var(--tw-border-style);
        border-right-width: 4px
    }

    .border-b {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px
    }

    .border-b-2 {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 2px
    }

    .border-b-4 {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 4px
    }

    .border-l {
        border-left-style: var(--tw-border-style);
        border-left-width: 1px
    }

    .border-l-2 {
        border-left-style: var(--tw-border-style);
        border-left-width: 2px
    }

    .border-l-4 {
        border-left-style: var(--tw-border-style);
        border-left-width: 4px
    }

    .border-dashed {
        --tw-border-style: dashed;
        border-style: dashed
    }

    .border-dotted {
        --tw-border-style: dotted;
        border-style: dotted
    }

    .border-\[\#A03CD2\]\/90 {
        border-color: oklab(56.3877% .149363 -.166996/.9)
    }

    .border-\[var\(--button-primary\)\] {
        border-color: var(--button-primary)
    }

    .border-\[var\(--qhrm-primary\)\] {
        border-color: var(--qhrm-primary)
    }

    .border-amber-100 {
        border-color: var(--color-amber-100)
    }

    .border-amber-200 {
        border-color: var(--color-amber-200)
    }

    .border-amber-200\/60 {
        border-color: #fee68599
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-amber-200\/60 {
            border-color: color-mix(in oklab,var(--color-amber-200)60%,transparent)
        }
    }

    .border-amber-400 {
        border-color: var(--color-amber-400)
    }

    .border-amber-400\/50 {
        border-color: #fcbb0080
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-amber-400\/50 {
            border-color: color-mix(in oklab,var(--color-amber-400)50%,transparent)
        }
    }

    .border-amber-500 {
        border-color: var(--color-amber-500)
    }

    .border-black\/5 {
        border-color: #0000000d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-black\/5 {
            border-color: color-mix(in oklab,var(--color-black)5%,transparent)
        }
    }

    .border-black\/10 {
        border-color: #0000001a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-black\/10 {
            border-color: color-mix(in oklab,var(--color-black)10%,transparent)
        }
    }

    .border-black\/20 {
        border-color: #0003
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-black\/20 {
            border-color: color-mix(in oklab,var(--color-black)20%,transparent)
        }
    }

    .border-blue-100 {
        border-color: var(--color-blue-100)
    }

    .border-blue-200 {
        border-color: var(--color-blue-200)
    }

    .border-blue-500 {
        border-color: var(--color-blue-500)
    }

    .border-blue-600 {
        border-color: var(--color-blue-600)
    }

    .border-emerald-100 {
        border-color: var(--color-emerald-100)
    }

    .border-emerald-200 {
        border-color: var(--color-emerald-200)
    }

    .border-emerald-200\/60 {
        border-color: #a4f4cf99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-emerald-200\/60 {
            border-color: color-mix(in oklab,var(--color-emerald-200)60%,transparent)
        }
    }

    .border-emerald-200\/70 {
        border-color: #a4f4cfb3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-emerald-200\/70 {
            border-color: color-mix(in oklab,var(--color-emerald-200)70%,transparent)
        }
    }

    .border-emerald-300 {
        border-color: var(--color-emerald-300)
    }

    .border-emerald-300\/30 {
        border-color: #5ee9b54d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-emerald-300\/30 {
            border-color: color-mix(in oklab,var(--color-emerald-300)30%,transparent)
        }
    }

    .border-gray-100 {
        border-color: var(--color-gray-100)
    }

    .border-gray-200 {
        border-color: var(--color-gray-200)
    }

    .border-gray-200\/50 {
        border-color: #e5e7eb80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-gray-200\/50 {
            border-color: color-mix(in oklab,var(--color-gray-200)50%,transparent)
        }
    }

    .border-gray-200\/60 {
        border-color: #e5e7eb99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-gray-200\/60 {
            border-color: color-mix(in oklab,var(--color-gray-200)60%,transparent)
        }
    }

    .border-gray-200\/80 {
        border-color: #e5e7ebcc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-gray-200\/80 {
            border-color: color-mix(in oklab,var(--color-gray-200)80%,transparent)
        }
    }

    .border-gray-200\/90 {
        border-color: #e5e7ebe6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-gray-200\/90 {
            border-color: color-mix(in oklab,var(--color-gray-200)90%,transparent)
        }
    }

    .border-gray-300 {
        border-color: var(--color-gray-300)
    }

    .border-gray-600\/30 {
        border-color: #4a55654d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-gray-600\/30 {
            border-color: color-mix(in oklab,var(--color-gray-600)30%,transparent)
        }
    }

    .border-gray-600\/50 {
        border-color: #4a556580
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-gray-600\/50 {
            border-color: color-mix(in oklab,var(--color-gray-600)50%,transparent)
        }
    }

    .border-gray-700\/50 {
        border-color: #36415380
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-gray-700\/50 {
            border-color: color-mix(in oklab,var(--color-gray-700)50%,transparent)
        }
    }

    .border-gray-700\/60 {
        border-color: #36415399
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-gray-700\/60 {
            border-color: color-mix(in oklab,var(--color-gray-700)60%,transparent)
        }
    }

    .border-gray-800 {
        border-color: var(--color-gray-800)
    }

    .border-gray-800\/50 {
        border-color: #1e293980
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-gray-800\/50 {
            border-color: color-mix(in oklab,var(--color-gray-800)50%,transparent)
        }
    }

    .border-gray-900 {
        border-color: var(--color-gray-900)
    }

    .border-green-200 {
        border-color: var(--color-green-200)
    }

    .border-green-600 {
        border-color: var(--color-green-600)
    }

    .border-indigo-50 {
        border-color: var(--color-indigo-50)
    }

    .border-indigo-100 {
        border-color: var(--color-indigo-100)
    }

    .border-indigo-100\/50 {
        border-color: #e0e7ff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-indigo-100\/50 {
            border-color: color-mix(in oklab,var(--color-indigo-100)50%,transparent)
        }
    }

    .border-indigo-100\/60 {
        border-color: #e0e7ff99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-indigo-100\/60 {
            border-color: color-mix(in oklab,var(--color-indigo-100)60%,transparent)
        }
    }

    .border-indigo-100\/70 {
        border-color: #e0e7ffb3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-indigo-100\/70 {
            border-color: color-mix(in oklab,var(--color-indigo-100)70%,transparent)
        }
    }

    .border-indigo-100\/80 {
        border-color: #e0e7ffcc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-indigo-100\/80 {
            border-color: color-mix(in oklab,var(--color-indigo-100)80%,transparent)
        }
    }

    .border-indigo-200 {
        border-color: var(--color-indigo-200)
    }

    .border-indigo-200\/50 {
        border-color: #c7d2ff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-indigo-200\/50 {
            border-color: color-mix(in oklab,var(--color-indigo-200)50%,transparent)
        }
    }

    .border-indigo-200\/60 {
        border-color: #c7d2ff99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-indigo-200\/60 {
            border-color: color-mix(in oklab,var(--color-indigo-200)60%,transparent)
        }
    }

    .border-indigo-200\/70 {
        border-color: #c7d2ffb3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-indigo-200\/70 {
            border-color: color-mix(in oklab,var(--color-indigo-200)70%,transparent)
        }
    }

    .border-indigo-200\/80 {
        border-color: #c7d2ffcc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-indigo-200\/80 {
            border-color: color-mix(in oklab,var(--color-indigo-200)80%,transparent)
        }
    }

    .border-indigo-200\/90 {
        border-color: #c7d2ffe6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-indigo-200\/90 {
            border-color: color-mix(in oklab,var(--color-indigo-200)90%,transparent)
        }
    }

    .border-indigo-300 {
        border-color: var(--color-indigo-300)
    }

    .border-indigo-400 {
        border-color: var(--color-indigo-400)
    }

    .border-indigo-400\/20 {
        border-color: #7d87ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-indigo-400\/20 {
            border-color: color-mix(in oklab,var(--color-indigo-400)20%,transparent)
        }
    }

    .border-indigo-400\/30 {
        border-color: #7d87ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-indigo-400\/30 {
            border-color: color-mix(in oklab,var(--color-indigo-400)30%,transparent)
        }
    }

    .border-indigo-500 {
        border-color: var(--color-indigo-500)
    }

    .border-indigo-500\/20 {
        border-color: #625fff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-indigo-500\/20 {
            border-color: color-mix(in oklab,var(--color-indigo-500)20%,transparent)
        }
    }

    .border-indigo-500\/25 {
        border-color: #625fff40
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-indigo-500\/25 {
            border-color: color-mix(in oklab,var(--color-indigo-500)25%,transparent)
        }
    }

    .border-indigo-600 {
        border-color: var(--color-indigo-600)
    }

    .border-indigo-700 {
        border-color: var(--color-indigo-700)
    }

    .border-indigo-800 {
        border-color: var(--color-indigo-800)
    }

    .border-orange-600 {
        border-color: var(--color-orange-600)
    }

    .border-pink-100 {
        border-color: var(--color-pink-100)
    }

    .border-pink-200\/50 {
        border-color: #fccee880
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-pink-200\/50 {
            border-color: color-mix(in oklab,var(--color-pink-200)50%,transparent)
        }
    }

    .border-purple-100 {
        border-color: var(--color-purple-100)
    }

    .border-purple-200 {
        border-color: var(--color-purple-200)
    }

    .border-purple-200\/50 {
        border-color: #e9d5ff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-purple-200\/50 {
            border-color: color-mix(in oklab,var(--color-purple-200)50%,transparent)
        }
    }

    .border-purple-500 {
        border-color: var(--color-purple-500)
    }

    .border-purple-600 {
        border-color: var(--color-purple-600)
    }

    .border-red-100 {
        border-color: var(--color-red-100)
    }

    .border-red-200 {
        border-color: var(--color-red-200)
    }

    .border-red-200\/80 {
        border-color: #ffcacacc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-red-200\/80 {
            border-color: color-mix(in oklab,var(--color-red-200)80%,transparent)
        }
    }

    .border-red-200\/90 {
        border-color: #ffcacae6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-red-200\/90 {
            border-color: color-mix(in oklab,var(--color-red-200)90%,transparent)
        }
    }

    .border-red-300 {
        border-color: var(--color-red-300)
    }

    .border-red-400 {
        border-color: var(--color-red-400)
    }

    .border-red-500 {
        border-color: var(--color-red-500)
    }

    .border-rose-200 {
        border-color: var(--color-rose-200)
    }

    .border-sky-200\/70 {
        border-color: #b8e6feb3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-sky-200\/70 {
            border-color: color-mix(in oklab,var(--color-sky-200)70%,transparent)
        }
    }

    .border-sky-300\/30 {
        border-color: #77d4ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-sky-300\/30 {
            border-color: color-mix(in oklab,var(--color-sky-300)30%,transparent)
        }
    }

    .border-slate-100 {
        border-color: var(--color-slate-100)
    }

    .border-slate-100\/80 {
        border-color: #f1f5f9cc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-slate-100\/80 {
            border-color: color-mix(in oklab,var(--color-slate-100)80%,transparent)
        }
    }

    .border-slate-200 {
        border-color: var(--color-slate-200)
    }

    .border-slate-200\/50 {
        border-color: #e2e8f080
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-slate-200\/50 {
            border-color: color-mix(in oklab,var(--color-slate-200)50%,transparent)
        }
    }

    .border-slate-200\/60 {
        border-color: #e2e8f099
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-slate-200\/60 {
            border-color: color-mix(in oklab,var(--color-slate-200)60%,transparent)
        }
    }

    .border-slate-200\/70 {
        border-color: #e2e8f0b3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-slate-200\/70 {
            border-color: color-mix(in oklab,var(--color-slate-200)70%,transparent)
        }
    }

    .border-slate-200\/80 {
        border-color: #e2e8f0cc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-slate-200\/80 {
            border-color: color-mix(in oklab,var(--color-slate-200)80%,transparent)
        }
    }

    .border-slate-200\/90 {
        border-color: #e2e8f0e6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-slate-200\/90 {
            border-color: color-mix(in oklab,var(--color-slate-200)90%,transparent)
        }
    }

    .border-slate-300 {
        border-color: var(--color-slate-300)
    }

    .border-slate-800 {
        border-color: var(--color-slate-800)
    }

    .border-teal-200 {
        border-color: var(--color-teal-200)
    }

    .border-teal-600 {
        border-color: var(--color-teal-600)
    }

    .border-transparent {
        border-color: #0000
    }

    .border-violet-200 {
        border-color: var(--color-violet-200)
    }

    .border-violet-200\/90 {
        border-color: #ddd6ffe6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-violet-200\/90 {
            border-color: color-mix(in oklab,var(--color-violet-200)90%,transparent)
        }
    }

    .border-violet-400 {
        border-color: var(--color-violet-400)
    }

    .border-violet-600 {
        border-color: var(--color-violet-600)
    }

    .border-white {
        border-color: var(--color-white)
    }

    .border-white\/10 {
        border-color: #ffffff1a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-white\/10 {
            border-color: color-mix(in oklab,var(--color-white)10%,transparent)
        }
    }

    .border-white\/15 {
        border-color: #ffffff26
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-white\/15 {
            border-color: color-mix(in oklab,var(--color-white)15%,transparent)
        }
    }

    .border-white\/20 {
        border-color: #fff3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-white\/20 {
            border-color: color-mix(in oklab,var(--color-white)20%,transparent)
        }
    }

    .border-white\/25 {
        border-color: #ffffff40
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-white\/25 {
            border-color: color-mix(in oklab,var(--color-white)25%,transparent)
        }
    }

    .border-white\/30 {
        border-color: #ffffff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-white\/30 {
            border-color: color-mix(in oklab,var(--color-white)30%,transparent)
        }
    }

    .border-white\/40 {
        border-color: #fff6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-white\/40 {
            border-color: color-mix(in oklab,var(--color-white)40%,transparent)
        }
    }

    .border-white\/50 {
        border-color: #ffffff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-white\/50 {
            border-color: color-mix(in oklab,var(--color-white)50%,transparent)
        }
    }

    .border-white\/60 {
        border-color: #fff9
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-white\/60 {
            border-color: color-mix(in oklab,var(--color-white)60%,transparent)
        }
    }

    .border-white\/70 {
        border-color: #ffffffb3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .border-white\/70 {
            border-color: color-mix(in oklab,var(--color-white)70%,transparent)
        }
    }

    .border-yellow-100 {
        border-color: var(--color-yellow-100)
    }

    .border-yellow-200 {
        border-color: var(--color-yellow-200)
    }

    .border-yellow-600 {
        border-color: var(--color-yellow-600)
    }

    .border-t-\[var\(--button-primary\)\] {
        border-top-color: var(--button-primary)
    }

    .border-t-\[var\(--qhrm-primary\)\] {
        border-top-color: var(--qhrm-primary)
    }

    .border-t-blue-600 {
        border-top-color: var(--color-blue-600)
    }

    .border-t-gray-200 {
        border-top-color: var(--color-gray-200)
    }

    .border-t-indigo-600 {
        border-top-color: var(--color-indigo-600)
    }

    .border-t-transparent {
        border-top-color: #0000
    }

    .border-t-white {
        border-top-color: var(--color-white)
    }

    .bg-\[\#0c0c10\] {
        background-color: #0c0c10
    }

    .bg-\[\#080810\] {
        background-color: #080810
    }

    .bg-\[\#A03CD2\] {
        background-color: #a03cd2
    }

    .bg-\[\#f8fafc\] {
        background-color: #f8fafc
    }

    .bg-\[var\(--button-primary\)\]\/10 {
        background-color: var(--button-primary)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-\[var\(--button-primary\)\]\/10 {
            background-color: color-mix(in oklab,var(--button-primary)10%,transparent)
        }
    }

    .bg-\[var\(--button-primary\)\]\/20 {
        background-color: var(--button-primary)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-\[var\(--button-primary\)\]\/20 {
            background-color: color-mix(in oklab,var(--button-primary)20%,transparent)
        }
    }

    .bg-\[var\(--qhrm-primary\)\], .bg-\[var\(--qhrm-primary\)\]\/10 {
        background-color: var(--qhrm-primary)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-\[var\(--qhrm-primary\)\]\/10 {
            background-color: color-mix(in oklab,var(--qhrm-primary)10%,transparent)
        }
    }

    .bg-amber-50 {
        background-color: var(--color-amber-50)
    }

    .bg-amber-50\/40 {
        background-color: #fffbeb66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-amber-50\/40 {
            background-color: color-mix(in oklab,var(--color-amber-50)40%,transparent)
        }
    }

    .bg-amber-100 {
        background-color: var(--color-amber-100)
    }

    .bg-amber-200 {
        background-color: var(--color-amber-200)
    }

    .bg-amber-300 {
        background-color: var(--color-amber-300)
    }

    .bg-amber-400 {
        background-color: var(--color-amber-400)
    }

    .bg-amber-500\/20 {
        background-color: #f99c0033
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-amber-500\/20 {
            background-color: color-mix(in oklab,var(--color-amber-500)20%,transparent)
        }
    }

    .bg-amber-500\/90 {
        background-color: #f99c00e6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-amber-500\/90 {
            background-color: color-mix(in oklab,var(--color-amber-500)90%,transparent)
        }
    }

    .bg-black {
        background-color: var(--color-black)
    }

    .bg-black\/5 {
        background-color: #0000000d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-black\/5 {
            background-color: color-mix(in oklab,var(--color-black)5%,transparent)
        }
    }

    .bg-black\/20 {
        background-color: #0003
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-black\/20 {
            background-color: color-mix(in oklab,var(--color-black)20%,transparent)
        }
    }

    .bg-black\/30 {
        background-color: #0000004d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-black\/30 {
            background-color: color-mix(in oklab,var(--color-black)30%,transparent)
        }
    }

    .bg-black\/40 {
        background-color: #0006
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-black\/40 {
            background-color: color-mix(in oklab,var(--color-black)40%,transparent)
        }
    }

    .bg-black\/50 {
        background-color: #00000080
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-black\/50 {
            background-color: color-mix(in oklab,var(--color-black)50%,transparent)
        }
    }

    .bg-black\/60 {
        background-color: #0009
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-black\/60 {
            background-color: color-mix(in oklab,var(--color-black)60%,transparent)
        }
    }

    .bg-blue-50 {
        background-color: var(--color-blue-50)
    }

    .bg-blue-50\/50 {
        background-color: #eff6ff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-blue-50\/50 {
            background-color: color-mix(in oklab,var(--color-blue-50)50%,transparent)
        }
    }

    .bg-blue-100 {
        background-color: var(--color-blue-100)
    }

    .bg-blue-200 {
        background-color: var(--color-blue-200)
    }

    .bg-blue-200\/20 {
        background-color: #bedbff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-blue-200\/20 {
            background-color: color-mix(in oklab,var(--color-blue-200)20%,transparent)
        }
    }

    .bg-blue-200\/25 {
        background-color: #bedbff40
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-blue-200\/25 {
            background-color: color-mix(in oklab,var(--color-blue-200)25%,transparent)
        }
    }

    .bg-blue-200\/30 {
        background-color: #bedbff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-blue-200\/30 {
            background-color: color-mix(in oklab,var(--color-blue-200)30%,transparent)
        }
    }

    .bg-blue-400 {
        background-color: var(--color-blue-400)
    }

    .bg-blue-500 {
        background-color: var(--color-blue-500)
    }

    .bg-blue-500\/20 {
        background-color: #3080ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-blue-500\/20 {
            background-color: color-mix(in oklab,var(--color-blue-500)20%,transparent)
        }
    }

    .bg-blue-600 {
        background-color: var(--color-blue-600)
    }

    .bg-blue-700 {
        background-color: var(--color-blue-700)
    }

    .bg-blue-800 {
        background-color: var(--color-blue-800)
    }

    .bg-cyan-50 {
        background-color: var(--color-cyan-50)
    }

    .bg-emerald-50 {
        background-color: var(--color-emerald-50)
    }

    .bg-emerald-50\/40 {
        background-color: #ecfdf566
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-emerald-50\/40 {
            background-color: color-mix(in oklab,var(--color-emerald-50)40%,transparent)
        }
    }

    .bg-emerald-50\/60 {
        background-color: #ecfdf599
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-emerald-50\/60 {
            background-color: color-mix(in oklab,var(--color-emerald-50)60%,transparent)
        }
    }

    .bg-emerald-50\/80 {
        background-color: #ecfdf5cc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-emerald-50\/80 {
            background-color: color-mix(in oklab,var(--color-emerald-50)80%,transparent)
        }
    }

    .bg-emerald-50\/90 {
        background-color: #ecfdf5e6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-emerald-50\/90 {
            background-color: color-mix(in oklab,var(--color-emerald-50)90%,transparent)
        }
    }

    .bg-emerald-100 {
        background-color: var(--color-emerald-100)
    }

    .bg-emerald-300 {
        background-color: var(--color-emerald-300)
    }

    .bg-emerald-400 {
        background-color: var(--color-emerald-400)
    }

    .bg-emerald-500 {
        background-color: var(--color-emerald-500)
    }

    .bg-emerald-500\/20 {
        background-color: #00bb7f33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-emerald-500\/20 {
            background-color: color-mix(in oklab,var(--color-emerald-500)20%,transparent)
        }
    }

    .bg-emerald-600 {
        background-color: var(--color-emerald-600)
    }

    .bg-emerald-600\/90 {
        background-color: #009767e6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-emerald-600\/90 {
            background-color: color-mix(in oklab,var(--color-emerald-600)90%,transparent)
        }
    }

    .bg-gray-50 {
        background-color: var(--color-gray-50)
    }

    .bg-gray-50\/30 {
        background-color: #f9fafb4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-gray-50\/30 {
            background-color: color-mix(in oklab,var(--color-gray-50)30%,transparent)
        }
    }

    .bg-gray-50\/40 {
        background-color: #f9fafb66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-gray-50\/40 {
            background-color: color-mix(in oklab,var(--color-gray-50)40%,transparent)
        }
    }

    .bg-gray-50\/50 {
        background-color: #f9fafb80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-gray-50\/50 {
            background-color: color-mix(in oklab,var(--color-gray-50)50%,transparent)
        }
    }

    .bg-gray-50\/60 {
        background-color: #f9fafb99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-gray-50\/60 {
            background-color: color-mix(in oklab,var(--color-gray-50)60%,transparent)
        }
    }

    .bg-gray-50\/80 {
        background-color: #f9fafbcc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-gray-50\/80 {
            background-color: color-mix(in oklab,var(--color-gray-50)80%,transparent)
        }
    }

    .bg-gray-100 {
        background-color: var(--color-gray-100)
    }

    .bg-gray-200 {
        background-color: var(--color-gray-200)
    }

    .bg-gray-300 {
        background-color: var(--color-gray-300)
    }

    .bg-gray-300\/50 {
        background-color: #d1d5dc80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-gray-300\/50 {
            background-color: color-mix(in oklab,var(--color-gray-300)50%,transparent)
        }
    }

    .bg-gray-400 {
        background-color: var(--color-gray-400)
    }

    .bg-gray-500 {
        background-color: var(--color-gray-500)
    }

    .bg-gray-500\/90 {
        background-color: #6a7282e6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-gray-500\/90 {
            background-color: color-mix(in oklab,var(--color-gray-500)90%,transparent)
        }
    }

    .bg-gray-600 {
        background-color: var(--color-gray-600)
    }

    .bg-gray-700 {
        background-color: var(--color-gray-700)
    }

    .bg-gray-700\/30 {
        background-color: #3641534d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-gray-700\/30 {
            background-color: color-mix(in oklab,var(--color-gray-700)30%,transparent)
        }
    }

    .bg-gray-700\/50 {
        background-color: #36415380
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-gray-700\/50 {
            background-color: color-mix(in oklab,var(--color-gray-700)50%,transparent)
        }
    }

    .bg-gray-800\/30 {
        background-color: #1e29394d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-gray-800\/30 {
            background-color: color-mix(in oklab,var(--color-gray-800)30%,transparent)
        }
    }

    .bg-gray-800\/50 {
        background-color: #1e293980
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-gray-800\/50 {
            background-color: color-mix(in oklab,var(--color-gray-800)50%,transparent)
        }
    }

    .bg-gray-800\/60 {
        background-color: #1e293999
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-gray-800\/60 {
            background-color: color-mix(in oklab,var(--color-gray-800)60%,transparent)
        }
    }

    .bg-gray-800\/70 {
        background-color: #1e2939b3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-gray-800\/70 {
            background-color: color-mix(in oklab,var(--color-gray-800)70%,transparent)
        }
    }

    .bg-gray-800\/80 {
        background-color: #1e2939cc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-gray-800\/80 {
            background-color: color-mix(in oklab,var(--color-gray-800)80%,transparent)
        }
    }

    .bg-gray-900 {
        background-color: var(--color-gray-900)
    }

    .bg-gray-900\/40 {
        background-color: #10182866
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-gray-900\/40 {
            background-color: color-mix(in oklab,var(--color-gray-900)40%,transparent)
        }
    }

    .bg-green-50 {
        background-color: var(--color-green-50)
    }

    .bg-green-100 {
        background-color: var(--color-green-100)
    }

    .bg-green-400 {
        background-color: var(--color-green-400)
    }

    .bg-green-500 {
        background-color: var(--color-green-500)
    }

    .bg-green-600 {
        background-color: var(--color-green-600)
    }

    .bg-green-600\/90 {
        background-color: #00a544e6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-green-600\/90 {
            background-color: color-mix(in oklab,var(--color-green-600)90%,transparent)
        }
    }

    .bg-indigo-50 {
        background-color: var(--color-indigo-50)
    }

    .bg-indigo-50\/50 {
        background-color: #eef2ff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-50\/50 {
            background-color: color-mix(in oklab,var(--color-indigo-50)50%,transparent)
        }
    }

    .bg-indigo-50\/60 {
        background-color: #eef2ff99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-50\/60 {
            background-color: color-mix(in oklab,var(--color-indigo-50)60%,transparent)
        }
    }

    .bg-indigo-50\/80 {
        background-color: #eef2ffcc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-50\/80 {
            background-color: color-mix(in oklab,var(--color-indigo-50)80%,transparent)
        }
    }

    .bg-indigo-50\/90 {
        background-color: #eef2ffe6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-50\/90 {
            background-color: color-mix(in oklab,var(--color-indigo-50)90%,transparent)
        }
    }

    .bg-indigo-50\/\[0\.15\] {
        background-color: #eef2ff26
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-50\/\[0\.15\] {
            background-color: color-mix(in oklab,var(--color-indigo-50)15%,transparent)
        }
    }

    .bg-indigo-100 {
        background-color: var(--color-indigo-100)
    }

    .bg-indigo-100\/30 {
        background-color: #e0e7ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-100\/30 {
            background-color: color-mix(in oklab,var(--color-indigo-100)30%,transparent)
        }
    }

    .bg-indigo-100\/80 {
        background-color: #e0e7ffcc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-100\/80 {
            background-color: color-mix(in oklab,var(--color-indigo-100)80%,transparent)
        }
    }

    .bg-indigo-100\/90 {
        background-color: #e0e7ffe6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-100\/90 {
            background-color: color-mix(in oklab,var(--color-indigo-100)90%,transparent)
        }
    }

    .bg-indigo-200 {
        background-color: var(--color-indigo-200)
    }

    .bg-indigo-200\/20 {
        background-color: #c7d2ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-200\/20 {
            background-color: color-mix(in oklab,var(--color-indigo-200)20%,transparent)
        }
    }

    .bg-indigo-200\/30 {
        background-color: #c7d2ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-200\/30 {
            background-color: color-mix(in oklab,var(--color-indigo-200)30%,transparent)
        }
    }

    .bg-indigo-200\/40 {
        background-color: #c7d2ff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-200\/40 {
            background-color: color-mix(in oklab,var(--color-indigo-200)40%,transparent)
        }
    }

    .bg-indigo-200\/50 {
        background-color: #c7d2ff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-200\/50 {
            background-color: color-mix(in oklab,var(--color-indigo-200)50%,transparent)
        }
    }

    .bg-indigo-300\/30 {
        background-color: #a4b3ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-300\/30 {
            background-color: color-mix(in oklab,var(--color-indigo-300)30%,transparent)
        }
    }

    .bg-indigo-300\/40 {
        background-color: #a4b3ff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-300\/40 {
            background-color: color-mix(in oklab,var(--color-indigo-300)40%,transparent)
        }
    }

    .bg-indigo-400 {
        background-color: var(--color-indigo-400)
    }

    .bg-indigo-400\/10 {
        background-color: #7d87ff1a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-400\/10 {
            background-color: color-mix(in oklab,var(--color-indigo-400)10%,transparent)
        }
    }

    .bg-indigo-400\/20 {
        background-color: #7d87ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-400\/20 {
            background-color: color-mix(in oklab,var(--color-indigo-400)20%,transparent)
        }
    }

    .bg-indigo-500 {
        background-color: var(--color-indigo-500)
    }

    .bg-indigo-500\/10 {
        background-color: #625fff1a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-500\/10 {
            background-color: color-mix(in oklab,var(--color-indigo-500)10%,transparent)
        }
    }

    .bg-indigo-500\/12 {
        background-color: #625fff1f
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-500\/12 {
            background-color: color-mix(in oklab,var(--color-indigo-500)12%,transparent)
        }
    }

    .bg-indigo-500\/15 {
        background-color: #625fff26
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-500\/15 {
            background-color: color-mix(in oklab,var(--color-indigo-500)15%,transparent)
        }
    }

    .bg-indigo-500\/20 {
        background-color: #625fff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-500\/20 {
            background-color: color-mix(in oklab,var(--color-indigo-500)20%,transparent)
        }
    }

    .bg-indigo-600 {
        background-color: var(--color-indigo-600)
    }

    .bg-indigo-600\/15 {
        background-color: #4f39f626
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-600\/15 {
            background-color: color-mix(in oklab,var(--color-indigo-600)15%,transparent)
        }
    }

    .bg-indigo-700 {
        background-color: var(--color-indigo-700)
    }

    .bg-indigo-700\/20 {
        background-color: #432dd733
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-indigo-700\/20 {
            background-color: color-mix(in oklab,var(--color-indigo-700)20%,transparent)
        }
    }

    .bg-orange-50 {
        background-color: var(--color-orange-50)
    }

    .bg-orange-50\/\[0\.15\] {
        background-color: #fff7ed26
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-orange-50\/\[0\.15\] {
            background-color: color-mix(in oklab,var(--color-orange-50)15%,transparent)
        }
    }

    .bg-orange-100 {
        background-color: var(--color-orange-100)
    }

    .bg-orange-400 {
        background-color: var(--color-orange-400)
    }

    .bg-orange-600 {
        background-color: var(--color-orange-600)
    }

    .bg-pink-50 {
        background-color: var(--color-pink-50)
    }

    .bg-pink-100 {
        background-color: var(--color-pink-100)
    }

    .bg-pink-200\/20 {
        background-color: #fccee833
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-pink-200\/20 {
            background-color: color-mix(in oklab,var(--color-pink-200)20%,transparent)
        }
    }

    .bg-pink-200\/25 {
        background-color: #fccee840
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-pink-200\/25 {
            background-color: color-mix(in oklab,var(--color-pink-200)25%,transparent)
        }
    }

    .bg-pink-200\/40 {
        background-color: #fccee866
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-pink-200\/40 {
            background-color: color-mix(in oklab,var(--color-pink-200)40%,transparent)
        }
    }

    .bg-pink-400\/30 {
        background-color: #fb64b64d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-pink-400\/30 {
            background-color: color-mix(in oklab,var(--color-pink-400)30%,transparent)
        }
    }

    .bg-pink-400\/40 {
        background-color: #fb64b666
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-pink-400\/40 {
            background-color: color-mix(in oklab,var(--color-pink-400)40%,transparent)
        }
    }

    .bg-pink-600 {
        background-color: var(--color-pink-600)
    }

    .bg-purple-50 {
        background-color: var(--color-purple-50)
    }

    .bg-purple-100 {
        background-color: var(--color-purple-100)
    }

    .bg-purple-200 {
        background-color: var(--color-purple-200)
    }

    .bg-purple-200\/20 {
        background-color: #e9d5ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-purple-200\/20 {
            background-color: color-mix(in oklab,var(--color-purple-200)20%,transparent)
        }
    }

    .bg-purple-200\/25 {
        background-color: #e9d5ff40
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-purple-200\/25 {
            background-color: color-mix(in oklab,var(--color-purple-200)25%,transparent)
        }
    }

    .bg-purple-200\/30 {
        background-color: #e9d5ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-purple-200\/30 {
            background-color: color-mix(in oklab,var(--color-purple-200)30%,transparent)
        }
    }

    .bg-purple-200\/40 {
        background-color: #e9d5ff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-purple-200\/40 {
            background-color: color-mix(in oklab,var(--color-purple-200)40%,transparent)
        }
    }

    .bg-purple-400 {
        background-color: var(--color-purple-400)
    }

    .bg-purple-400\/10 {
        background-color: #c07eff1a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-purple-400\/10 {
            background-color: color-mix(in oklab,var(--color-purple-400)10%,transparent)
        }
    }

    .bg-purple-500 {
        background-color: var(--color-purple-500)
    }

    .bg-purple-600 {
        background-color: var(--color-purple-600)
    }

    .bg-purple-600\/90 {
        background-color: #9810fae6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-purple-600\/90 {
            background-color: color-mix(in oklab,var(--color-purple-600)90%,transparent)
        }
    }

    .bg-red-50 {
        background-color: var(--color-red-50)
    }

    .bg-red-50\/50 {
        background-color: #fef2f280
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-red-50\/50 {
            background-color: color-mix(in oklab,var(--color-red-50)50%,transparent)
        }
    }

    .bg-red-50\/60 {
        background-color: #fef2f299
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-red-50\/60 {
            background-color: color-mix(in oklab,var(--color-red-50)60%,transparent)
        }
    }

    .bg-red-50\/90 {
        background-color: #fef2f2e6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-red-50\/90 {
            background-color: color-mix(in oklab,var(--color-red-50)90%,transparent)
        }
    }

    .bg-red-100 {
        background-color: var(--color-red-100)
    }

    .bg-red-200\/80 {
        background-color: #ffcacacc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-red-200\/80 {
            background-color: color-mix(in oklab,var(--color-red-200)80%,transparent)
        }
    }

    .bg-red-500 {
        background-color: var(--color-red-500)
    }

    .bg-red-600 {
        background-color: var(--color-red-600)
    }

    .bg-rose-50 {
        background-color: var(--color-rose-50)
    }

    .bg-rose-50\/\[0\.15\] {
        background-color: #fff1f226
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-rose-50\/\[0\.15\] {
            background-color: color-mix(in oklab,var(--color-rose-50)15%,transparent)
        }
    }

    .bg-rose-100 {
        background-color: var(--color-rose-100)
    }

    .bg-rose-400 {
        background-color: var(--color-rose-400)
    }

    .bg-rose-500\/20 {
        background-color: #ff235733
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-rose-500\/20 {
            background-color: color-mix(in oklab,var(--color-rose-500)20%,transparent)
        }
    }

    .bg-sky-50 {
        background-color: var(--color-sky-50)
    }

    .bg-sky-50\/90 {
        background-color: #f0f9ffe6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-sky-50\/90 {
            background-color: color-mix(in oklab,var(--color-sky-50)90%,transparent)
        }
    }

    .bg-sky-50\/\[0\.15\] {
        background-color: #f0f9ff26
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-sky-50\/\[0\.15\] {
            background-color: color-mix(in oklab,var(--color-sky-50)15%,transparent)
        }
    }

    .bg-sky-100 {
        background-color: var(--color-sky-100)
    }

    .bg-sky-300 {
        background-color: var(--color-sky-300)
    }

    .bg-sky-400 {
        background-color: var(--color-sky-400)
    }

    .bg-sky-500 {
        background-color: var(--color-sky-500)
    }

    .bg-sky-500\/20 {
        background-color: #00a5ef33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-sky-500\/20 {
            background-color: color-mix(in oklab,var(--color-sky-500)20%,transparent)
        }
    }

    .bg-slate-50 {
        background-color: var(--color-slate-50)
    }

    .bg-slate-50\/50 {
        background-color: #f8fafc80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-slate-50\/50 {
            background-color: color-mix(in oklab,var(--color-slate-50)50%,transparent)
        }
    }

    .bg-slate-50\/60 {
        background-color: #f8fafc99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-slate-50\/60 {
            background-color: color-mix(in oklab,var(--color-slate-50)60%,transparent)
        }
    }

    .bg-slate-50\/80 {
        background-color: #f8fafccc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-slate-50\/80 {
            background-color: color-mix(in oklab,var(--color-slate-50)80%,transparent)
        }
    }

    .bg-slate-50\/95 {
        background-color: #f8fafcf2
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-slate-50\/95 {
            background-color: color-mix(in oklab,var(--color-slate-50)95%,transparent)
        }
    }

    .bg-slate-100 {
        background-color: var(--color-slate-100)
    }

    .bg-slate-100\/90 {
        background-color: #f1f5f9e6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-slate-100\/90 {
            background-color: color-mix(in oklab,var(--color-slate-100)90%,transparent)
        }
    }

    .bg-slate-200 {
        background-color: var(--color-slate-200)
    }

    .bg-slate-400\/70 {
        background-color: #90a1b9b3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-slate-400\/70 {
            background-color: color-mix(in oklab,var(--color-slate-400)70%,transparent)
        }
    }

    .bg-slate-900 {
        background-color: var(--color-slate-900)
    }

    .bg-slate-900\/45 {
        background-color: #0f172b73
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-slate-900\/45 {
            background-color: color-mix(in oklab,var(--color-slate-900)45%,transparent)
        }
    }

    .bg-teal-50 {
        background-color: var(--color-teal-50)
    }

    .bg-teal-100 {
        background-color: var(--color-teal-100)
    }

    .bg-teal-500\/20 {
        background-color: #00baa733
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-teal-500\/20 {
            background-color: color-mix(in oklab,var(--color-teal-500)20%,transparent)
        }
    }

    .bg-transparent {
        background-color: #0000
    }

    .bg-violet-50 {
        background-color: var(--color-violet-50)
    }

    .bg-violet-100 {
        background-color: var(--color-violet-100)
    }

    .bg-violet-200\/20 {
        background-color: #ddd6ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-violet-200\/20 {
            background-color: color-mix(in oklab,var(--color-violet-200)20%,transparent)
        }
    }

    .bg-violet-500\/15 {
        background-color: #8d54ff26
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-violet-500\/15 {
            background-color: color-mix(in oklab,var(--color-violet-500)15%,transparent)
        }
    }

    .bg-violet-500\/20 {
        background-color: #8d54ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-violet-500\/20 {
            background-color: color-mix(in oklab,var(--color-violet-500)20%,transparent)
        }
    }

    .bg-violet-600 {
        background-color: var(--color-violet-600)
    }

    .bg-violet-600\/15 {
        background-color: #7f22fe26
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-violet-600\/15 {
            background-color: color-mix(in oklab,var(--color-violet-600)15%,transparent)
        }
    }

    .bg-white {
        background-color: var(--color-white)
    }

    .bg-white\/5 {
        background-color: #ffffff0d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/5 {
            background-color: color-mix(in oklab,var(--color-white)5%,transparent)
        }
    }

    .bg-white\/8 {
        background-color: #ffffff14
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/8 {
            background-color: color-mix(in oklab,var(--color-white)8%,transparent)
        }
    }

    .bg-white\/10 {
        background-color: #ffffff1a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/10 {
            background-color: color-mix(in oklab,var(--color-white)10%,transparent)
        }
    }

    .bg-white\/15 {
        background-color: #ffffff26
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/15 {
            background-color: color-mix(in oklab,var(--color-white)15%,transparent)
        }
    }

    .bg-white\/20 {
        background-color: #fff3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/20 {
            background-color: color-mix(in oklab,var(--color-white)20%,transparent)
        }
    }

    .bg-white\/50 {
        background-color: #ffffff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/50 {
            background-color: color-mix(in oklab,var(--color-white)50%,transparent)
        }
    }

    .bg-white\/60 {
        background-color: #fff9
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/60 {
            background-color: color-mix(in oklab,var(--color-white)60%,transparent)
        }
    }

    .bg-white\/65 {
        background-color: #ffffffa6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/65 {
            background-color: color-mix(in oklab,var(--color-white)65%,transparent)
        }
    }

    .bg-white\/70 {
        background-color: #ffffffb3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/70 {
            background-color: color-mix(in oklab,var(--color-white)70%,transparent)
        }
    }

    .bg-white\/80 {
        background-color: #fffc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/80 {
            background-color: color-mix(in oklab,var(--color-white)80%,transparent)
        }
    }

    .bg-white\/90 {
        background-color: #ffffffe6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/90 {
            background-color: color-mix(in oklab,var(--color-white)90%,transparent)
        }
    }

    .bg-white\/95 {
        background-color: #fffffff2
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/95 {
            background-color: color-mix(in oklab,var(--color-white)95%,transparent)
        }
    }

    .bg-white\/\[0\.05\] {
        background-color: #ffffff0d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/\[0\.05\] {
            background-color: color-mix(in oklab,var(--color-white)5%,transparent)
        }
    }

    .bg-yellow-50 {
        background-color: var(--color-yellow-50)
    }

    .bg-yellow-50\/50 {
        background-color: #fefce880
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-yellow-50\/50 {
            background-color: color-mix(in oklab,var(--color-yellow-50)50%,transparent)
        }
    }

    .bg-yellow-100 {
        background-color: var(--color-yellow-100)
    }

    .bg-yellow-200\/20 {
        background-color: #fff08533
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-yellow-200\/20 {
            background-color: color-mix(in oklab,var(--color-yellow-200)20%,transparent)
        }
    }

    .bg-yellow-300 {
        background-color: var(--color-yellow-300)
    }

    .bg-yellow-300\/20 {
        background-color: #ffe02a33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-yellow-300\/20 {
            background-color: color-mix(in oklab,var(--color-yellow-300)20%,transparent)
        }
    }

    .bg-yellow-500 {
        background-color: var(--color-yellow-500)
    }

    .bg-yellow-600 {
        background-color: var(--color-yellow-600)
    }

    .bg-gradient-to-b {
        --tw-gradient-position: to bottom in oklab
    }

    .bg-gradient-to-b, .bg-gradient-to-bl {
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .bg-gradient-to-bl {
        --tw-gradient-position: to bottom left in oklab
    }

    .bg-gradient-to-br {
        --tw-gradient-position: to bottom right in oklab
    }

    .bg-gradient-to-br, .bg-gradient-to-l {
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .bg-gradient-to-l {
        --tw-gradient-position: to left in oklab
    }

    .bg-gradient-to-r {
        --tw-gradient-position: to right in oklab
    }

    .bg-gradient-to-r, .bg-gradient-to-t {
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .bg-gradient-to-t {
        --tw-gradient-position: to top in oklab
    }

    .bg-gradient-to-tr {
        --tw-gradient-position: to top right in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .bg-\[linear-gradient\(165deg\,\#f1f5f9_0\%\,\#f8fafc_42\%\,\#eef2ff_100\%\)\] {
        background-image: linear-gradient(165deg,#f1f5f9,#f8fafc 42%,#eef2ff)
    }

    .bg-\[linear-gradient\(rgba\(255\,255\,255\,\.03\)_1px\,transparent_1px\)\,linear-gradient\(90deg\,rgba\(255\,255\,255\,\.03\)_1px\,transparent_1px\)\] {
        background-image: linear-gradient(#ffffff08 1px,#0000 0),linear-gradient(90deg,#ffffff08 1px,#0000 0)
    }

    .bg-\[linear-gradient\(rgba\(255\,255\,255\,\.025\)_1px\,transparent_1px\)\,linear-gradient\(90deg\,rgba\(255\,255\,255\,\.025\)_1px\,transparent_1px\)\] {
        background-image: linear-gradient(#ffffff06 1px,#0000 0),linear-gradient(90deg,#ffffff06 1px,#0000 0)
    }

    .bg-\[radial-gradient\(ellipse_80\%_40\%_at_50\%_0\%\,rgba\(99\,102\,241\,0\.08\)\,transparent_50\%\)\] {
        background-image: radial-gradient(80% 40% at 50% 0,#6366f114,#0000 50%)
    }

    .bg-\[radial-gradient\(ellipse_80\%_50\%_at_50\%_-15\%\,rgba\(99\,102\,241\,0\.14\)\,transparent\)\] {
        background-image: radial-gradient(80% 50% at 50% -15%,#6366f124,#0000)
    }

    .bg-\[radial-gradient\(ellipse_80\%_60\%_at_50\%_0\%\,rgba\(99\,102\,241\,0\.15\)\,transparent_55\%\)\] {
        background-image: radial-gradient(80% 60% at 50% 0,#6366f126,#0000 55%)
    }

    .bg-\[radial-gradient\(ellipse_at_center\,rgba\(99\,102\,241\,0\.07\)\,transparent_70\%\)\] {
        background-image: radial-gradient(#6366f112,#0000 70%)
    }

    .bg-none {
        background-image: none
    }

    .from-\[var\(--button-primary\)\] {
        --tw-gradient-from: var(--button-primary);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-\[var\(--button-primary\)\]\/5 {
        --tw-gradient-from: var(--button-primary)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-\[var\(--button-primary\)\]\/5 {
            --tw-gradient-from: color-mix(in oklab,var(--button-primary)5%,transparent)
        }
    }

    .from-\[var\(--button-primary\)\]\/5 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-\[var\(--button-primary\)\]\/10 {
        --tw-gradient-from: var(--button-primary)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-\[var\(--button-primary\)\]\/10 {
            --tw-gradient-from: color-mix(in oklab,var(--button-primary)10%,transparent)
        }
    }

    .from-\[var\(--button-primary\)\]\/10 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-\[var\(--qhrm-primary\)\] {
        --tw-gradient-from: var(--qhrm-primary);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-amber-50 {
        --tw-gradient-from: var(--color-amber-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-amber-50\/60 {
        --tw-gradient-from: #fffbeb99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-amber-50\/60 {
            --tw-gradient-from: color-mix(in oklab,var(--color-amber-50)60%,transparent)
        }
    }

    .from-amber-50\/60 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-amber-200 {
        --tw-gradient-from: var(--color-amber-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-amber-400 {
        --tw-gradient-from: var(--color-amber-400);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-black\/5 {
        --tw-gradient-from: #0000000d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-black\/5 {
            --tw-gradient-from: color-mix(in oklab,var(--color-black)5%,transparent)
        }
    }

    .from-black\/5 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-black\/20 {
        --tw-gradient-from: #0003
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-black\/20 {
            --tw-gradient-from: color-mix(in oklab,var(--color-black)20%,transparent)
        }
    }

    .from-black\/20 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-black\/40 {
        --tw-gradient-from: #0006
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-black\/40 {
            --tw-gradient-from: color-mix(in oklab,var(--color-black)40%,transparent)
        }
    }

    .from-black\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-black\/45 {
        --tw-gradient-from: #00000073
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-black\/45 {
            --tw-gradient-from: color-mix(in oklab,var(--color-black)45%,transparent)
        }
    }

    .from-black\/45 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-black\/55 {
        --tw-gradient-from: #0000008c
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-black\/55 {
            --tw-gradient-from: color-mix(in oklab,var(--color-black)55%,transparent)
        }
    }

    .from-black\/55 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-black\/70 {
        --tw-gradient-from: #000000b3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-black\/70 {
            --tw-gradient-from: color-mix(in oklab,var(--color-black)70%,transparent)
        }
    }

    .from-black\/70 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-blue-50 {
        --tw-gradient-from: var(--color-blue-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-blue-50\/0 {
        --tw-gradient-from: #0000
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-blue-50\/0 {
            --tw-gradient-from: color-mix(in oklab,var(--color-blue-50)0%,transparent)
        }
    }

    .from-blue-50\/0 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-blue-50\/60 {
        --tw-gradient-from: #eff6ff99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-blue-50\/60 {
            --tw-gradient-from: color-mix(in oklab,var(--color-blue-50)60%,transparent)
        }
    }

    .from-blue-50\/60 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-blue-100 {
        --tw-gradient-from: var(--color-blue-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-blue-200\/30 {
        --tw-gradient-from: #bedbff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-blue-200\/30 {
            --tw-gradient-from: color-mix(in oklab,var(--color-blue-200)30%,transparent)
        }
    }

    .from-blue-200\/30 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-blue-200\/40 {
        --tw-gradient-from: #bedbff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-blue-200\/40 {
            --tw-gradient-from: color-mix(in oklab,var(--color-blue-200)40%,transparent)
        }
    }

    .from-blue-200\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-blue-500 {
        --tw-gradient-from: var(--color-blue-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-blue-600 {
        --tw-gradient-from: var(--color-blue-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-cyan-50\/60 {
        --tw-gradient-from: #ecfeff99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-cyan-50\/60 {
            --tw-gradient-from: color-mix(in oklab,var(--color-cyan-50)60%,transparent)
        }
    }

    .from-cyan-50\/60 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-emerald-50\/50 {
        --tw-gradient-from: #ecfdf580
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-emerald-50\/50 {
            --tw-gradient-from: color-mix(in oklab,var(--color-emerald-50)50%,transparent)
        }
    }

    .from-emerald-50\/50 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-emerald-100 {
        --tw-gradient-from: var(--color-emerald-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-emerald-200 {
        --tw-gradient-from: var(--color-emerald-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-emerald-400\/12 {
        --tw-gradient-from: #00d2941f
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-emerald-400\/12 {
            --tw-gradient-from: color-mix(in oklab,var(--color-emerald-400)12%,transparent)
        }
    }

    .from-emerald-400\/12 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-emerald-500 {
        --tw-gradient-from: var(--color-emerald-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-gray-50 {
        --tw-gradient-from: var(--color-gray-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-gray-50\/50 {
        --tw-gradient-from: #f9fafb80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-gray-50\/50 {
            --tw-gradient-from: color-mix(in oklab,var(--color-gray-50)50%,transparent)
        }
    }

    .from-gray-50\/50 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-gray-50\/80 {
        --tw-gradient-from: #f9fafbcc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-gray-50\/80 {
            --tw-gradient-from: color-mix(in oklab,var(--color-gray-50)80%,transparent)
        }
    }

    .from-gray-50\/80 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-gray-100 {
        --tw-gradient-from: var(--color-gray-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-gray-200 {
        --tw-gradient-from: var(--color-gray-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-gray-400 {
        --tw-gradient-from: var(--color-gray-400);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-green-50 {
        --tw-gradient-from: var(--color-green-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-green-50\/60 {
        --tw-gradient-from: #f0fdf499
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-green-50\/60 {
            --tw-gradient-from: color-mix(in oklab,var(--color-green-50)60%,transparent)
        }
    }

    .from-green-50\/60 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-green-500 {
        --tw-gradient-from: var(--color-green-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-50 {
        --tw-gradient-from: var(--color-indigo-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-50\/0 {
        --tw-gradient-from: #0000
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-50\/0 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-50)0%,transparent)
        }
    }

    .from-indigo-50\/0 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-50\/20 {
        --tw-gradient-from: #eef2ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-50\/20 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-50)20%,transparent)
        }
    }

    .from-indigo-50\/20 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-50\/30 {
        --tw-gradient-from: #eef2ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-50\/30 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-50)30%,transparent)
        }
    }

    .from-indigo-50\/30 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-50\/60 {
        --tw-gradient-from: #eef2ff99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-50\/60 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-50)60%,transparent)
        }
    }

    .from-indigo-50\/60 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-50\/80 {
        --tw-gradient-from: #eef2ffcc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-50\/80 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-50)80%,transparent)
        }
    }

    .from-indigo-50\/80 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-50\/90 {
        --tw-gradient-from: #eef2ffe6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-50\/90 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-50)90%,transparent)
        }
    }

    .from-indigo-50\/90 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-50\/100 {
        --tw-gradient-from: var(--color-indigo-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-100 {
        --tw-gradient-from: var(--color-indigo-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-100\/50 {
        --tw-gradient-from: #e0e7ff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-100\/50 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-100)50%,transparent)
        }
    }

    .from-indigo-100\/50 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-200 {
        --tw-gradient-from: var(--color-indigo-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-200\/30 {
        --tw-gradient-from: #c7d2ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-200\/30 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-200)30%,transparent)
        }
    }

    .from-indigo-200\/30 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-200\/40 {
        --tw-gradient-from: #c7d2ff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-200\/40 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-200)40%,transparent)
        }
    }

    .from-indigo-200\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-200\/50 {
        --tw-gradient-from: #c7d2ff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-200\/50 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-200)50%,transparent)
        }
    }

    .from-indigo-200\/50 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-200\/90 {
        --tw-gradient-from: #c7d2ffe6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-200\/90 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-200)90%,transparent)
        }
    }

    .from-indigo-200\/90 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-300\/10 {
        --tw-gradient-from: #a4b3ff1a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-300\/10 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-300)10%,transparent)
        }
    }

    .from-indigo-300\/10 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-300\/12 {
        --tw-gradient-from: #a4b3ff1f
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-300\/12 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-300)12%,transparent)
        }
    }

    .from-indigo-300\/12 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-300\/35 {
        --tw-gradient-from: #a4b3ff59
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-300\/35 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-300)35%,transparent)
        }
    }

    .from-indigo-300\/35 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-300\/70 {
        --tw-gradient-from: #a4b3ffb3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-300\/70 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-300)70%,transparent)
        }
    }

    .from-indigo-300\/70 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-400 {
        --tw-gradient-from: var(--color-indigo-400);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-400\/30 {
        --tw-gradient-from: #7d87ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-400\/30 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-400)30%,transparent)
        }
    }

    .from-indigo-400\/30 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-400\/60 {
        --tw-gradient-from: #7d87ff99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-400\/60 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-400)60%,transparent)
        }
    }

    .from-indigo-400\/60 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-400\/80 {
        --tw-gradient-from: #7d87ffcc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-400\/80 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-400)80%,transparent)
        }
    }

    .from-indigo-400\/80 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-500 {
        --tw-gradient-from: var(--color-indigo-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-500\/0 {
        --tw-gradient-from: #0000
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-500\/0 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-500)0%,transparent)
        }
    }

    .from-indigo-500\/0 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-500\/6 {
        --tw-gradient-from: #625fff0f
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-500\/6 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-500)6%,transparent)
        }
    }

    .from-indigo-500\/6 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-500\/10 {
        --tw-gradient-from: #625fff1a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-500\/10 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-500)10%,transparent)
        }
    }

    .from-indigo-500\/10 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-500\/20 {
        --tw-gradient-from: #625fff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-500\/20 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-500)20%,transparent)
        }
    }

    .from-indigo-500\/20 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-500\/25 {
        --tw-gradient-from: #625fff40
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-500\/25 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-500)25%,transparent)
        }
    }

    .from-indigo-500\/25 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-500\/50 {
        --tw-gradient-from: #625fff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-500\/50 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-500)50%,transparent)
        }
    }

    .from-indigo-500\/50 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-500\/60 {
        --tw-gradient-from: #625fff99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-500\/60 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-500)60%,transparent)
        }
    }

    .from-indigo-500\/60 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-600 {
        --tw-gradient-from: var(--color-indigo-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-600\/20 {
        --tw-gradient-from: #4f39f633
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-600\/20 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-600)20%,transparent)
        }
    }

    .from-indigo-600\/20 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-700 {
        --tw-gradient-from: var(--color-indigo-700);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-900 {
        --tw-gradient-from: var(--color-indigo-900);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-900\/30 {
        --tw-gradient-from: #312c854d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-900\/30 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-900)30%,transparent)
        }
    }

    .from-indigo-900\/30 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-950\/8 {
        --tw-gradient-from: #1e1a4d14
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-950\/8 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-950)8%,transparent)
        }
    }

    .from-indigo-950\/8 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-indigo-950\/50 {
        --tw-gradient-from: #1e1a4d80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-indigo-950\/50 {
            --tw-gradient-from: color-mix(in oklab,var(--color-indigo-950)50%,transparent)
        }
    }

    .from-indigo-950\/50 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-orange-50 {
        --tw-gradient-from: var(--color-orange-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-orange-500 {
        --tw-gradient-from: var(--color-orange-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-pink-50 {
        --tw-gradient-from: var(--color-pink-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-pink-50\/60 {
        --tw-gradient-from: #fdf2f899
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-pink-50\/60 {
            --tw-gradient-from: color-mix(in oklab,var(--color-pink-50)60%,transparent)
        }
    }

    .from-pink-50\/60 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-pink-200 {
        --tw-gradient-from: var(--color-pink-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-pink-200\/40 {
        --tw-gradient-from: #fccee866
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-pink-200\/40 {
            --tw-gradient-from: color-mix(in oklab,var(--color-pink-200)40%,transparent)
        }
    }

    .from-pink-200\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-pink-300 {
        --tw-gradient-from: var(--color-pink-300);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-pink-400 {
        --tw-gradient-from: var(--color-pink-400);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-pink-500 {
        --tw-gradient-from: var(--color-pink-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-pink-600 {
        --tw-gradient-from: var(--color-pink-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-purple-50 {
        --tw-gradient-from: var(--color-purple-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-purple-50\/0 {
        --tw-gradient-from: #0000
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-purple-50\/0 {
            --tw-gradient-from: color-mix(in oklab,var(--color-purple-50)0%,transparent)
        }
    }

    .from-purple-50\/0 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-purple-100 {
        --tw-gradient-from: var(--color-purple-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-purple-100\/30 {
        --tw-gradient-from: #f3e8ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-purple-100\/30 {
            --tw-gradient-from: color-mix(in oklab,var(--color-purple-100)30%,transparent)
        }
    }

    .from-purple-100\/30 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-purple-500 {
        --tw-gradient-from: var(--color-purple-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-purple-600 {
        --tw-gradient-from: var(--color-purple-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-red-50 {
        --tw-gradient-from: var(--color-red-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-rose-50\/60 {
        --tw-gradient-from: #fff1f299
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-rose-50\/60 {
            --tw-gradient-from: color-mix(in oklab,var(--color-rose-50)60%,transparent)
        }
    }

    .from-rose-50\/60 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-sky-200 {
        --tw-gradient-from: var(--color-sky-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-sky-200\/35 {
        --tw-gradient-from: #b8e6fe59
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-sky-200\/35 {
            --tw-gradient-from: color-mix(in oklab,var(--color-sky-200)35%,transparent)
        }
    }

    .from-sky-200\/35 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-sky-400\/14 {
        --tw-gradient-from: #00bcfe24
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-sky-400\/14 {
            --tw-gradient-from: color-mix(in oklab,var(--color-sky-400)14%,transparent)
        }
    }

    .from-sky-400\/14 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-sky-500 {
        --tw-gradient-from: var(--color-sky-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-slate-50 {
        --tw-gradient-from: var(--color-slate-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-slate-50\/40 {
        --tw-gradient-from: #f8fafc66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-slate-50\/40 {
            --tw-gradient-from: color-mix(in oklab,var(--color-slate-50)40%,transparent)
        }
    }

    .from-slate-50\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-slate-50\/50 {
        --tw-gradient-from: #f8fafc80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-slate-50\/50 {
            --tw-gradient-from: color-mix(in oklab,var(--color-slate-50)50%,transparent)
        }
    }

    .from-slate-50\/50 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-slate-50\/80 {
        --tw-gradient-from: #f8fafccc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-slate-50\/80 {
            --tw-gradient-from: color-mix(in oklab,var(--color-slate-50)80%,transparent)
        }
    }

    .from-slate-50\/80 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-slate-50\/90 {
        --tw-gradient-from: #f8fafce6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-slate-50\/90 {
            --tw-gradient-from: color-mix(in oklab,var(--color-slate-50)90%,transparent)
        }
    }

    .from-slate-50\/90 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-slate-50\/95 {
        --tw-gradient-from: #f8fafcf2
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-slate-50\/95 {
            --tw-gradient-from: color-mix(in oklab,var(--color-slate-50)95%,transparent)
        }
    }

    .from-slate-50\/95 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-slate-100 {
        --tw-gradient-from: var(--color-slate-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-slate-800 {
        --tw-gradient-from: var(--color-slate-800);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-slate-900 {
        --tw-gradient-from: var(--color-slate-900);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-slate-950\/25 {
        --tw-gradient-from: #02061840
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-slate-950\/25 {
            --tw-gradient-from: color-mix(in oklab,var(--color-slate-950)25%,transparent)
        }
    }

    .from-slate-950\/25 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-teal-50 {
        --tw-gradient-from: var(--color-teal-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-teal-50\/60 {
        --tw-gradient-from: #f0fdfa99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-teal-50\/60 {
            --tw-gradient-from: color-mix(in oklab,var(--color-teal-50)60%,transparent)
        }
    }

    .from-teal-50\/60 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-transparent {
        --tw-gradient-from: transparent;
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-violet-50 {
        --tw-gradient-from: var(--color-violet-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-violet-50\/60 {
        --tw-gradient-from: #f5f3ff99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-violet-50\/60 {
            --tw-gradient-from: color-mix(in oklab,var(--color-violet-50)60%,transparent)
        }
    }

    .from-violet-50\/60 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-violet-100 {
        --tw-gradient-from: var(--color-violet-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-violet-200 {
        --tw-gradient-from: var(--color-violet-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-violet-500 {
        --tw-gradient-from: var(--color-violet-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-violet-500\/20 {
        --tw-gradient-from: #8d54ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-violet-500\/20 {
            --tw-gradient-from: color-mix(in oklab,var(--color-violet-500)20%,transparent)
        }
    }

    .from-violet-500\/20 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-white {
        --tw-gradient-from: var(--color-white);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-white\/30 {
        --tw-gradient-from: #ffffff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-white\/30 {
            --tw-gradient-from: color-mix(in oklab,var(--color-white)30%,transparent)
        }
    }

    .from-white\/30 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-white\/40 {
        --tw-gradient-from: #fff6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-white\/40 {
            --tw-gradient-from: color-mix(in oklab,var(--color-white)40%,transparent)
        }
    }

    .from-white\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-white\/80 {
        --tw-gradient-from: #fffc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-white\/80 {
            --tw-gradient-from: color-mix(in oklab,var(--color-white)80%,transparent)
        }
    }

    .from-white\/80 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-yellow-50 {
        --tw-gradient-from: var(--color-yellow-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-yellow-200 {
        --tw-gradient-from: var(--color-yellow-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .via-\[var\(--qhrm-purple\)\] {
        --tw-gradient-via: var(--qhrm-purple);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-black\/0 {
        --tw-gradient-via: #0000
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-black\/0 {
            --tw-gradient-via: color-mix(in oklab,var(--color-black)0%,transparent)
        }
    }

    .via-black\/0 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-black\/15 {
        --tw-gradient-via: #00000026
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-black\/15 {
            --tw-gradient-via: color-mix(in oklab,var(--color-black)15%,transparent)
        }
    }

    .via-black\/15 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-black\/20 {
        --tw-gradient-via: #0003
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-black\/20 {
            --tw-gradient-via: color-mix(in oklab,var(--color-black)20%,transparent)
        }
    }

    .via-black\/20 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-blue-50 {
        --tw-gradient-via: var(--color-blue-50);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-blue-500 {
        --tw-gradient-via: var(--color-blue-500);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-blue-600 {
        --tw-gradient-via: var(--color-blue-600);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-gray-900 {
        --tw-gradient-via: var(--color-gray-900);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-indigo-50 {
        --tw-gradient-via: var(--color-indigo-50);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-indigo-50\/10 {
        --tw-gradient-via: #eef2ff1a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-indigo-50\/10 {
            --tw-gradient-via: color-mix(in oklab,var(--color-indigo-50)10%,transparent)
        }
    }

    .via-indigo-50\/10 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-indigo-50\/30 {
        --tw-gradient-via: #eef2ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-indigo-50\/30 {
            --tw-gradient-via: color-mix(in oklab,var(--color-indigo-50)30%,transparent)
        }
    }

    .via-indigo-50\/30 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-indigo-50\/40 {
        --tw-gradient-via: #eef2ff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-indigo-50\/40 {
            --tw-gradient-via: color-mix(in oklab,var(--color-indigo-50)40%,transparent)
        }
    }

    .via-indigo-50\/40 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-indigo-100 {
        --tw-gradient-via: var(--color-indigo-100);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-indigo-100\/30 {
        --tw-gradient-via: #e0e7ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-indigo-100\/30 {
            --tw-gradient-via: color-mix(in oklab,var(--color-indigo-100)30%,transparent)
        }
    }

    .via-indigo-100\/30 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-indigo-200\/70 {
        --tw-gradient-via: #c7d2ffb3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-indigo-200\/70 {
            --tw-gradient-via: color-mix(in oklab,var(--color-indigo-200)70%,transparent)
        }
    }

    .via-indigo-200\/70 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-indigo-300 {
        --tw-gradient-via: var(--color-indigo-300);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-indigo-400\/10 {
        --tw-gradient-via: #7d87ff1a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-indigo-400\/10 {
            --tw-gradient-via: color-mix(in oklab,var(--color-indigo-400)10%,transparent)
        }
    }

    .via-indigo-400\/10 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-indigo-500 {
        --tw-gradient-via: var(--color-indigo-500);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-indigo-500\/15 {
        --tw-gradient-via: #625fff26
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-indigo-500\/15 {
            --tw-gradient-via: color-mix(in oklab,var(--color-indigo-500)15%,transparent)
        }
    }

    .via-indigo-500\/15 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-indigo-600 {
        --tw-gradient-via: var(--color-indigo-600);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-indigo-900\/90 {
        --tw-gradient-via: #312c85e6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-indigo-900\/90 {
            --tw-gradient-via: color-mix(in oklab,var(--color-indigo-900)90%,transparent)
        }
    }

    .via-indigo-900\/90 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-indigo-950 {
        --tw-gradient-via: var(--color-indigo-950);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-pink-50 {
        --tw-gradient-via: var(--color-pink-50);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-purple-50 {
        --tw-gradient-via: var(--color-purple-50);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-purple-50\/20 {
        --tw-gradient-via: #faf5ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-purple-50\/20 {
            --tw-gradient-via: color-mix(in oklab,var(--color-purple-50)20%,transparent)
        }
    }

    .via-purple-50\/20 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-purple-50\/30 {
        --tw-gradient-via: #faf5ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-purple-50\/30 {
            --tw-gradient-via: color-mix(in oklab,var(--color-purple-50)30%,transparent)
        }
    }

    .via-purple-50\/30 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-purple-100 {
        --tw-gradient-via: var(--color-purple-100);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-purple-200\/40 {
        --tw-gradient-via: #e9d5ff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-purple-200\/40 {
            --tw-gradient-via: color-mix(in oklab,var(--color-purple-200)40%,transparent)
        }
    }

    .via-purple-200\/40 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-purple-200\/50 {
        --tw-gradient-via: #e9d5ff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-purple-200\/50 {
            --tw-gradient-via: color-mix(in oklab,var(--color-purple-200)50%,transparent)
        }
    }

    .via-purple-200\/50 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-purple-300 {
        --tw-gradient-via: var(--color-purple-300);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-purple-400 {
        --tw-gradient-via: var(--color-purple-400);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-purple-400\/20 {
        --tw-gradient-via: #c07eff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-purple-400\/20 {
            --tw-gradient-via: color-mix(in oklab,var(--color-purple-400)20%,transparent)
        }
    }

    .via-purple-400\/20 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-purple-500 {
        --tw-gradient-via: var(--color-purple-500);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-purple-500\/0 {
        --tw-gradient-via: #0000
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-purple-500\/0 {
            --tw-gradient-via: color-mix(in oklab,var(--color-purple-500)0%,transparent)
        }
    }

    .via-purple-500\/0 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-purple-600 {
        --tw-gradient-via: var(--color-purple-600);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-purple-700 {
        --tw-gradient-via: var(--color-purple-700);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-purple-900 {
        --tw-gradient-via: var(--color-purple-900);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-sky-50 {
        --tw-gradient-via: var(--color-sky-50);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-sky-400 {
        --tw-gradient-via: var(--color-sky-400);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-sky-400\/10 {
        --tw-gradient-via: #00bcfe1a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-sky-400\/10 {
            --tw-gradient-via: color-mix(in oklab,var(--color-sky-400)10%,transparent)
        }
    }

    .via-sky-400\/10 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-sky-500 {
        --tw-gradient-via: var(--color-sky-500);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-slate-50 {
        --tw-gradient-via: var(--color-slate-50);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-slate-50\/30 {
        --tw-gradient-via: #f8fafc4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-slate-50\/30 {
            --tw-gradient-via: color-mix(in oklab,var(--color-slate-50)30%,transparent)
        }
    }

    .via-slate-50\/30 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-slate-50\/40 {
        --tw-gradient-via: #f8fafc66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-slate-50\/40 {
            --tw-gradient-via: color-mix(in oklab,var(--color-slate-50)40%,transparent)
        }
    }

    .via-slate-50\/40 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-slate-50\/90 {
        --tw-gradient-via: #f8fafce6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-slate-50\/90 {
            --tw-gradient-via: color-mix(in oklab,var(--color-slate-50)90%,transparent)
        }
    }

    .via-slate-50\/90 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-slate-900 {
        --tw-gradient-via: var(--color-slate-900);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-slate-950\/0 {
        --tw-gradient-via: #0000
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-slate-950\/0 {
            --tw-gradient-via: color-mix(in oklab,var(--color-slate-950)0%,transparent)
        }
    }

    .via-slate-950\/0 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-teal-400\/8 {
        --tw-gradient-via: #00d3bd14
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-teal-400\/8 {
            --tw-gradient-via: color-mix(in oklab,var(--color-teal-400)8%,transparent)
        }
    }

    .via-teal-400\/8 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-transparent {
        --tw-gradient-via: transparent;
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-violet-50\/95 {
        --tw-gradient-via: #f5f3fff2
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-violet-50\/95 {
            --tw-gradient-via: color-mix(in oklab,var(--color-violet-50)95%,transparent)
        }
    }

    .via-violet-50\/95 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-violet-200\/25 {
        --tw-gradient-via: #ddd6ff40
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-violet-200\/25 {
            --tw-gradient-via: color-mix(in oklab,var(--color-violet-200)25%,transparent)
        }
    }

    .via-violet-200\/25 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-violet-300 {
        --tw-gradient-via: var(--color-violet-300);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-violet-300\/6 {
        --tw-gradient-via: #c4b4ff0f
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-violet-300\/6 {
            --tw-gradient-via: color-mix(in oklab,var(--color-violet-300)6%,transparent)
        }
    }

    .via-violet-300\/6 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-violet-300\/8 {
        --tw-gradient-via: #c4b4ff14
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-violet-300\/8 {
            --tw-gradient-via: color-mix(in oklab,var(--color-violet-300)8%,transparent)
        }
    }

    .via-violet-300\/8 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-violet-500\/15 {
        --tw-gradient-via: #8d54ff26
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-violet-500\/15 {
            --tw-gradient-via: color-mix(in oklab,var(--color-violet-500)15%,transparent)
        }
    }

    .via-violet-500\/15 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-violet-600 {
        --tw-gradient-via: var(--color-violet-600);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-violet-700\/12 {
        --tw-gradient-via: #7008e71f
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-violet-700\/12 {
            --tw-gradient-via: color-mix(in oklab,var(--color-violet-700)12%,transparent)
        }
    }

    .via-violet-700\/12 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-violet-900\/20 {
        --tw-gradient-via: #4d179a33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-violet-900\/20 {
            --tw-gradient-via: color-mix(in oklab,var(--color-violet-900)20%,transparent)
        }
    }

    .via-violet-900\/20 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-white {
        --tw-gradient-via: var(--color-white);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-white\/10 {
        --tw-gradient-via: #ffffff1a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-white\/10 {
            --tw-gradient-via: color-mix(in oklab,var(--color-white)10%,transparent)
        }
    }

    .via-white\/10 {
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-yellow-100 {
        --tw-gradient-via: var(--color-yellow-100);
        --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .to-\[var\(--button-primary\)\] {
        --tw-gradient-to: var(--button-primary);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-\[var\(--button-primary\)\]\/5 {
        --tw-gradient-to: var(--button-primary)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-\[var\(--button-primary\)\]\/5 {
            --tw-gradient-to: color-mix(in oklab,var(--button-primary)5%,transparent)
        }
    }

    .to-\[var\(--button-primary\)\]\/5 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-\[var\(--button-primary\)\]\/80 {
        --tw-gradient-to: var(--button-primary)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-\[var\(--button-primary\)\]\/80 {
            --tw-gradient-to: color-mix(in oklab,var(--button-primary)80%,transparent)
        }
    }

    .to-\[var\(--button-primary\)\]\/80 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-amber-50 {
        --tw-gradient-to: var(--color-amber-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-amber-100 {
        --tw-gradient-to: var(--color-amber-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-amber-100\/50 {
        --tw-gradient-to: #fef3c680
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-amber-100\/50 {
            --tw-gradient-to: color-mix(in oklab,var(--color-amber-100)50%,transparent)
        }
    }

    .to-amber-100\/50 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-blue-50 {
        --tw-gradient-to: var(--color-blue-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-blue-50\/20 {
        --tw-gradient-to: #eff6ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-blue-50\/20 {
            --tw-gradient-to: color-mix(in oklab,var(--color-blue-50)20%,transparent)
        }
    }

    .to-blue-50\/20 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-blue-50\/40 {
        --tw-gradient-to: #eff6ff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-blue-50\/40 {
            --tw-gradient-to: color-mix(in oklab,var(--color-blue-50)40%,transparent)
        }
    }

    .to-blue-50\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-blue-100 {
        --tw-gradient-to: var(--color-blue-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-blue-100\/50 {
        --tw-gradient-to: #dbeafe80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-blue-100\/50 {
            --tw-gradient-to: color-mix(in oklab,var(--color-blue-100)50%,transparent)
        }
    }

    .to-blue-100\/50 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-blue-300 {
        --tw-gradient-to: var(--color-blue-300);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-blue-400 {
        --tw-gradient-to: var(--color-blue-400);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-blue-600 {
        --tw-gradient-to: var(--color-blue-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-blue-700 {
        --tw-gradient-to: var(--color-blue-700);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-cyan-50 {
        --tw-gradient-to: var(--color-cyan-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-cyan-50\/0 {
        --tw-gradient-to: #0000
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-cyan-50\/0 {
            --tw-gradient-to: color-mix(in oklab,var(--color-cyan-50)0%,transparent)
        }
    }

    .to-cyan-50\/0 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-cyan-50\/40 {
        --tw-gradient-to: #ecfeff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-cyan-50\/40 {
            --tw-gradient-to: color-mix(in oklab,var(--color-cyan-50)40%,transparent)
        }
    }

    .to-cyan-50\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-cyan-100 {
        --tw-gradient-to: var(--color-cyan-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-cyan-200 {
        --tw-gradient-to: var(--color-cyan-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-cyan-200\/40 {
        --tw-gradient-to: #a2f4fd66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-cyan-200\/40 {
            --tw-gradient-to: color-mix(in oklab,var(--color-cyan-200)40%,transparent)
        }
    }

    .to-cyan-200\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-cyan-600 {
        --tw-gradient-to: var(--color-cyan-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-emerald-50 {
        --tw-gradient-to: var(--color-emerald-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-emerald-50\/40 {
        --tw-gradient-to: #ecfdf566
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-emerald-50\/40 {
            --tw-gradient-to: color-mix(in oklab,var(--color-emerald-50)40%,transparent)
        }
    }

    .to-emerald-50\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-emerald-200 {
        --tw-gradient-to: var(--color-emerald-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-emerald-400 {
        --tw-gradient-to: var(--color-emerald-400);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-emerald-400\/10 {
        --tw-gradient-to: #00d2941a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-emerald-400\/10 {
            --tw-gradient-to: color-mix(in oklab,var(--color-emerald-400)10%,transparent)
        }
    }

    .to-emerald-400\/10 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-emerald-600 {
        --tw-gradient-to: var(--color-emerald-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-fuchsia-600 {
        --tw-gradient-to: var(--color-fuchsia-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-gray-50 {
        --tw-gradient-to: var(--color-gray-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-gray-50\/30 {
        --tw-gradient-to: #f9fafb4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-gray-50\/30 {
            --tw-gradient-to: color-mix(in oklab,var(--color-gray-50)30%,transparent)
        }
    }

    .to-gray-50\/30 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-gray-100 {
        --tw-gradient-to: var(--color-gray-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-gray-100\/50 {
        --tw-gradient-to: #f3f4f680
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-gray-100\/50 {
            --tw-gradient-to: color-mix(in oklab,var(--color-gray-100)50%,transparent)
        }
    }

    .to-gray-100\/50 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-gray-100\/80 {
        --tw-gradient-to: #f3f4f6cc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-gray-100\/80 {
            --tw-gradient-to: color-mix(in oklab,var(--color-gray-100)80%,transparent)
        }
    }

    .to-gray-100\/80 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-gray-200 {
        --tw-gradient-to: var(--color-gray-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-gray-300 {
        --tw-gradient-to: var(--color-gray-300);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-gray-600 {
        --tw-gradient-to: var(--color-gray-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-gray-900 {
        --tw-gradient-to: var(--color-gray-900);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-green-100 {
        --tw-gradient-to: var(--color-green-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-green-100\/50 {
        --tw-gradient-to: #dcfce780
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-green-100\/50 {
            --tw-gradient-to: color-mix(in oklab,var(--color-green-100)50%,transparent)
        }
    }

    .to-green-100\/50 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-50 {
        --tw-gradient-to: var(--color-indigo-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-50\/20 {
        --tw-gradient-to: #eef2ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-indigo-50\/20 {
            --tw-gradient-to: color-mix(in oklab,var(--color-indigo-50)20%,transparent)
        }
    }

    .to-indigo-50\/20 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-50\/30 {
        --tw-gradient-to: #eef2ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-indigo-50\/30 {
            --tw-gradient-to: color-mix(in oklab,var(--color-indigo-50)30%,transparent)
        }
    }

    .to-indigo-50\/30 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-50\/40 {
        --tw-gradient-to: #eef2ff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-indigo-50\/40 {
            --tw-gradient-to: color-mix(in oklab,var(--color-indigo-50)40%,transparent)
        }
    }

    .to-indigo-50\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-50\/50 {
        --tw-gradient-to: #eef2ff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-indigo-50\/50 {
            --tw-gradient-to: color-mix(in oklab,var(--color-indigo-50)50%,transparent)
        }
    }

    .to-indigo-50\/50 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-50\/70 {
        --tw-gradient-to: #eef2ffb3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-indigo-50\/70 {
            --tw-gradient-to: color-mix(in oklab,var(--color-indigo-50)70%,transparent)
        }
    }

    .to-indigo-50\/70 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-100 {
        --tw-gradient-to: var(--color-indigo-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-100\/30 {
        --tw-gradient-to: #e0e7ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-indigo-100\/30 {
            --tw-gradient-to: color-mix(in oklab,var(--color-indigo-100)30%,transparent)
        }
    }

    .to-indigo-100\/30 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-100\/50 {
        --tw-gradient-to: #e0e7ff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-indigo-100\/50 {
            --tw-gradient-to: color-mix(in oklab,var(--color-indigo-100)50%,transparent)
        }
    }

    .to-indigo-100\/50 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-200 {
        --tw-gradient-to: var(--color-indigo-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-200\/30 {
        --tw-gradient-to: #c7d2ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-indigo-200\/30 {
            --tw-gradient-to: color-mix(in oklab,var(--color-indigo-200)30%,transparent)
        }
    }

    .to-indigo-200\/30 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-200\/40 {
        --tw-gradient-to: #c7d2ff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-indigo-200\/40 {
            --tw-gradient-to: color-mix(in oklab,var(--color-indigo-200)40%,transparent)
        }
    }

    .to-indigo-200\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-300 {
        --tw-gradient-to: var(--color-indigo-300);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-400 {
        --tw-gradient-to: var(--color-indigo-400);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-500 {
        --tw-gradient-to: var(--color-indigo-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-500\/0 {
        --tw-gradient-to: #0000
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-indigo-500\/0 {
            --tw-gradient-to: color-mix(in oklab,var(--color-indigo-500)0%,transparent)
        }
    }

    .to-indigo-500\/0 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-600 {
        --tw-gradient-to: var(--color-indigo-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-800 {
        --tw-gradient-to: var(--color-indigo-800);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-800\/90 {
        --tw-gradient-to: #372aace6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-indigo-800\/90 {
            --tw-gradient-to: color-mix(in oklab,var(--color-indigo-800)90%,transparent)
        }
    }

    .to-indigo-800\/90 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-indigo-950 {
        --tw-gradient-to: var(--color-indigo-950);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-orange-50 {
        --tw-gradient-to: var(--color-orange-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-orange-100 {
        --tw-gradient-to: var(--color-orange-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-orange-300 {
        --tw-gradient-to: var(--color-orange-300);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-orange-500 {
        --tw-gradient-to: var(--color-orange-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-pink-50 {
        --tw-gradient-to: var(--color-pink-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-pink-50\/0 {
        --tw-gradient-to: #0000
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-pink-50\/0 {
            --tw-gradient-to: color-mix(in oklab,var(--color-pink-50)0%,transparent)
        }
    }

    .to-pink-50\/0 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-pink-50\/30 {
        --tw-gradient-to: #fdf2f84d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-pink-50\/30 {
            --tw-gradient-to: color-mix(in oklab,var(--color-pink-50)30%,transparent)
        }
    }

    .to-pink-50\/30 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-pink-50\/40 {
        --tw-gradient-to: #fdf2f866
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-pink-50\/40 {
            --tw-gradient-to: color-mix(in oklab,var(--color-pink-50)40%,transparent)
        }
    }

    .to-pink-50\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-pink-100 {
        --tw-gradient-to: var(--color-pink-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-pink-200 {
        --tw-gradient-to: var(--color-pink-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-pink-200\/20 {
        --tw-gradient-to: #fccee833
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-pink-200\/20 {
            --tw-gradient-to: color-mix(in oklab,var(--color-pink-200)20%,transparent)
        }
    }

    .to-pink-200\/20 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-pink-200\/40 {
        --tw-gradient-to: #fccee866
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-pink-200\/40 {
            --tw-gradient-to: color-mix(in oklab,var(--color-pink-200)40%,transparent)
        }
    }

    .to-pink-200\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-pink-500 {
        --tw-gradient-to: var(--color-pink-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-pink-500\/0 {
        --tw-gradient-to: #0000
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-pink-500\/0 {
            --tw-gradient-to: color-mix(in oklab,var(--color-pink-500)0%,transparent)
        }
    }

    .to-pink-500\/0 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-pink-600 {
        --tw-gradient-to: var(--color-pink-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-50 {
        --tw-gradient-to: var(--color-purple-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-50\/0 {
        --tw-gradient-to: #0000
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-purple-50\/0 {
            --tw-gradient-to: color-mix(in oklab,var(--color-purple-50)0%,transparent)
        }
    }

    .to-purple-50\/0 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-50\/30 {
        --tw-gradient-to: #faf5ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-purple-50\/30 {
            --tw-gradient-to: color-mix(in oklab,var(--color-purple-50)30%,transparent)
        }
    }

    .to-purple-50\/30 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-50\/40 {
        --tw-gradient-to: #faf5ff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-purple-50\/40 {
            --tw-gradient-to: color-mix(in oklab,var(--color-purple-50)40%,transparent)
        }
    }

    .to-purple-50\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-50\/60 {
        --tw-gradient-to: #faf5ff99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-purple-50\/60 {
            --tw-gradient-to: color-mix(in oklab,var(--color-purple-50)60%,transparent)
        }
    }

    .to-purple-50\/60 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-50\/100 {
        --tw-gradient-to: var(--color-purple-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-100 {
        --tw-gradient-to: var(--color-purple-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-100\/50 {
        --tw-gradient-to: #f3e8ff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-purple-100\/50 {
            --tw-gradient-to: color-mix(in oklab,var(--color-purple-100)50%,transparent)
        }
    }

    .to-purple-100\/50 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-200 {
        --tw-gradient-to: var(--color-purple-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-200\/30 {
        --tw-gradient-to: #e9d5ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-purple-200\/30 {
            --tw-gradient-to: color-mix(in oklab,var(--color-purple-200)30%,transparent)
        }
    }

    .to-purple-200\/30 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-200\/40 {
        --tw-gradient-to: #e9d5ff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-purple-200\/40 {
            --tw-gradient-to: color-mix(in oklab,var(--color-purple-200)40%,transparent)
        }
    }

    .to-purple-200\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-300 {
        --tw-gradient-to: var(--color-purple-300);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-400 {
        --tw-gradient-to: var(--color-purple-400);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-500 {
        --tw-gradient-to: var(--color-purple-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-600 {
        --tw-gradient-to: var(--color-purple-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-600\/70 {
        --tw-gradient-to: #9810fab3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-purple-600\/70 {
            --tw-gradient-to: color-mix(in oklab,var(--color-purple-600)70%,transparent)
        }
    }

    .to-purple-600\/70 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-700 {
        --tw-gradient-to: var(--color-purple-700);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-purple-900\/70 {
        --tw-gradient-to: #59168bb3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-purple-900\/70 {
            --tw-gradient-to: color-mix(in oklab,var(--color-purple-900)70%,transparent)
        }
    }

    .to-purple-900\/70 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-red-100 {
        --tw-gradient-to: var(--color-red-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-rose-50 {
        --tw-gradient-to: var(--color-rose-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-rose-300 {
        --tw-gradient-to: var(--color-rose-300);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-rose-300\/30 {
        --tw-gradient-to: #ffa2ae4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-rose-300\/30 {
            --tw-gradient-to: color-mix(in oklab,var(--color-rose-300)30%,transparent)
        }
    }

    .to-rose-300\/30 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-rose-600 {
        --tw-gradient-to: var(--color-rose-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-sky-50 {
        --tw-gradient-to: var(--color-sky-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-sky-100 {
        --tw-gradient-to: var(--color-sky-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-sky-200 {
        --tw-gradient-to: var(--color-sky-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-slate-50 {
        --tw-gradient-to: var(--color-slate-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-slate-50\/50 {
        --tw-gradient-to: #f8fafc80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-slate-50\/50 {
            --tw-gradient-to: color-mix(in oklab,var(--color-slate-50)50%,transparent)
        }
    }

    .to-slate-50\/50 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-slate-50\/80 {
        --tw-gradient-to: #f8fafccc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-slate-50\/80 {
            --tw-gradient-to: color-mix(in oklab,var(--color-slate-50)80%,transparent)
        }
    }

    .to-slate-50\/80 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-slate-200\/20 {
        --tw-gradient-to: #e2e8f033
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-slate-200\/20 {
            --tw-gradient-to: color-mix(in oklab,var(--color-slate-200)20%,transparent)
        }
    }

    .to-slate-200\/20 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-slate-900\/60 {
        --tw-gradient-to: #0f172b99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-slate-900\/60 {
            --tw-gradient-to: color-mix(in oklab,var(--color-slate-900)60%,transparent)
        }
    }

    .to-slate-900\/60 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-slate-950\/10 {
        --tw-gradient-to: #0206181a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-slate-950\/10 {
            --tw-gradient-to: color-mix(in oklab,var(--color-slate-950)10%,transparent)
        }
    }

    .to-slate-950\/10 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-teal-100 {
        --tw-gradient-to: var(--color-teal-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-teal-300 {
        --tw-gradient-to: var(--color-teal-300);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-teal-500 {
        --tw-gradient-to: var(--color-teal-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-teal-600 {
        --tw-gradient-to: var(--color-teal-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-transparent {
        --tw-gradient-to: transparent;
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-violet-50 {
        --tw-gradient-to: var(--color-violet-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-violet-50\/20 {
        --tw-gradient-to: #f5f3ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-violet-50\/20 {
            --tw-gradient-to: color-mix(in oklab,var(--color-violet-50)20%,transparent)
        }
    }

    .to-violet-50\/20 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-violet-50\/25 {
        --tw-gradient-to: #f5f3ff40
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-violet-50\/25 {
            --tw-gradient-to: color-mix(in oklab,var(--color-violet-50)25%,transparent)
        }
    }

    .to-violet-50\/25 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-violet-50\/60 {
        --tw-gradient-to: #f5f3ff99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-violet-50\/60 {
            --tw-gradient-to: color-mix(in oklab,var(--color-violet-50)60%,transparent)
        }
    }

    .to-violet-50\/60 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-violet-50\/90 {
        --tw-gradient-to: #f5f3ffe6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-violet-50\/90 {
            --tw-gradient-to: color-mix(in oklab,var(--color-violet-50)90%,transparent)
        }
    }

    .to-violet-50\/90 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-violet-100 {
        --tw-gradient-to: var(--color-violet-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-violet-200\/40 {
        --tw-gradient-to: #ddd6ff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-violet-200\/40 {
            --tw-gradient-to: color-mix(in oklab,var(--color-violet-200)40%,transparent)
        }
    }

    .to-violet-200\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-violet-200\/60 {
        --tw-gradient-to: #ddd6ff99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-violet-200\/60 {
            --tw-gradient-to: color-mix(in oklab,var(--color-violet-200)60%,transparent)
        }
    }

    .to-violet-200\/60 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-violet-400 {
        --tw-gradient-to: var(--color-violet-400);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-violet-500 {
        --tw-gradient-to: var(--color-violet-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-violet-500\/25 {
        --tw-gradient-to: #8d54ff40
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-violet-500\/25 {
            --tw-gradient-to: color-mix(in oklab,var(--color-violet-500)25%,transparent)
        }
    }

    .to-violet-500\/25 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-violet-600 {
        --tw-gradient-to: var(--color-violet-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-violet-950 {
        --tw-gradient-to: var(--color-violet-950);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-violet-950\/8 {
        --tw-gradient-to: #2f0d6814
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-violet-950\/8 {
            --tw-gradient-to: color-mix(in oklab,var(--color-violet-950)8%,transparent)
        }
    }

    .to-violet-950\/8 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-white {
        --tw-gradient-to: var(--color-white);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-white\/80 {
        --tw-gradient-to: #fffc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-white\/80 {
            --tw-gradient-to: color-mix(in oklab,var(--color-white)80%,transparent)
        }
    }

    .to-white\/80 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-yellow-50\/40 {
        --tw-gradient-to: #fefce866
    }

    @supports (color:color-mix(in lab,red,red)) {
        .to-yellow-50\/40 {
            --tw-gradient-to: color-mix(in oklab,var(--color-yellow-50)40%,transparent)
        }
    }

    .to-yellow-50\/40 {
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-yellow-100 {
        --tw-gradient-to: var(--color-yellow-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-yellow-500 {
        --tw-gradient-to: var(--color-yellow-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .bg-\[size\:48px_48px\] {
        background-size: 48px 48px
    }

    .bg-\[size\:56px_56px\] {
        background-size: 56px 56px
    }

    .bg-clip-text {
        -webkit-background-clip: text;
        background-clip: text
    }

    .fill-current {
        fill: currentColor
    }

    .stroke-purple-200 {
        stroke: var(--color-purple-200)
    }

    .stroke-white {
        stroke: var(--color-white)
    }

    .stroke-white\/80 {
        stroke: #fffc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .stroke-white\/80 {
            stroke: color-mix(in oklab,var(--color-white)80%,transparent)
        }
    }

    .stroke-white\/90 {
        stroke: #ffffffe6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .stroke-white\/90 {
            stroke: color-mix(in oklab,var(--color-white)90%,transparent)
        }
    }

    .object-contain {
        object-fit: contain
    }

    .object-cover {
        object-fit: cover
    }

    .p-0 {
        padding: calc(var(--spacing)*0)
    }

    .p-0\.5 {
        padding: calc(var(--spacing)*.5)
    }

    .p-1 {
        padding: calc(var(--spacing)*1)
    }

    .p-1\.5 {
        padding: calc(var(--spacing)*1.5)
    }

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

    .p-2\.5 {
        padding: calc(var(--spacing)*2.5)
    }

    .p-3 {
        padding: calc(var(--spacing)*3)
    }

    .p-3\.5 {
        padding: calc(var(--spacing)*3.5)
    }

    .p-4 {
        padding: calc(var(--spacing)*4)
    }

    .p-5 {
        padding: calc(var(--spacing)*5)
    }

    .p-6 {
        padding: calc(var(--spacing)*6)
    }

    .p-7 {
        padding: calc(var(--spacing)*7)
    }

    .p-8 {
        padding: calc(var(--spacing)*8)
    }

    .p-10 {
        padding: calc(var(--spacing)*10)
    }

    .p-12 {
        padding: calc(var(--spacing)*12)
    }

    .p-\[1px\] {
        padding: 1px
    }

    .\!px-0 {
        padding-inline: calc(var(--spacing)*0) !important
    }

    .px-0 {
        padding-inline: calc(var(--spacing)*0)
    }

    .px-1 {
        padding-inline: calc(var(--spacing)*1)
    }

    .px-1\.5 {
        padding-inline: calc(var(--spacing)*1.5)
    }

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

    .px-2\.5 {
        padding-inline: calc(var(--spacing)*2.5)
    }

    .px-3 {
        padding-inline: calc(var(--spacing)*3)
    }

    .px-3\.5 {
        padding-inline: calc(var(--spacing)*3.5)
    }

    .px-4 {
        padding-inline: calc(var(--spacing)*4)
    }

    .px-5 {
        padding-inline: calc(var(--spacing)*5)
    }

    .px-6 {
        padding-inline: calc(var(--spacing)*6)
    }

    .px-7 {
        padding-inline: calc(var(--spacing)*7)
    }

    .px-8 {
        padding-inline: calc(var(--spacing)*8)
    }

    .px-10 {
        padding-inline: calc(var(--spacing)*10)
    }

    .px-11 {
        padding-inline: calc(var(--spacing)*11)
    }

    .px-12 {
        padding-inline: calc(var(--spacing)*12)
    }

    .px-16 {
        padding-inline: calc(var(--spacing)*16)
    }

    .\!py-0 {
        padding-block: calc(var(--spacing)*0) !important
    }

    .py-0 {
        padding-block: calc(var(--spacing)*0)
    }

    .py-0\.5 {
        padding-block: calc(var(--spacing)*.5)
    }

    .py-1 {
        padding-block: calc(var(--spacing)*1)
    }

    .py-1\.5 {
        padding-block: calc(var(--spacing)*1.5)
    }

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

    .py-2\.5 {
        padding-block: calc(var(--spacing)*2.5)
    }

    .py-3 {
        padding-block: calc(var(--spacing)*3)
    }

    .py-3\.5 {
        padding-block: calc(var(--spacing)*3.5)
    }

    .py-4 {
        padding-block: calc(var(--spacing)*4)
    }

    .py-4\.5 {
        padding-block: calc(var(--spacing)*4.5)
    }

    .py-5 {
        padding-block: calc(var(--spacing)*5)
    }

    .py-6 {
        padding-block: calc(var(--spacing)*6)
    }

    .py-7 {
        padding-block: calc(var(--spacing)*7)
    }

    .py-8 {
        padding-block: calc(var(--spacing)*8)
    }

    .py-9 {
        padding-block: calc(var(--spacing)*9)
    }

    .py-10 {
        padding-block: calc(var(--spacing)*10)
    }

    .py-12 {
        padding-block: calc(var(--spacing)*12)
    }

    .py-14 {
        padding-block: calc(var(--spacing)*14)
    }

    .py-16 {
        padding-block: calc(var(--spacing)*16)
    }

    .py-20 {
        padding-block: calc(var(--spacing)*20)
    }

    .py-24 {
        padding-block: calc(var(--spacing)*24)
    }

    .py-32 {
        padding-block: calc(var(--spacing)*32)
    }

    .pt-0 {
        padding-top: calc(var(--spacing)*0)
    }

    .pt-0\.5 {
        padding-top: calc(var(--spacing)*.5)
    }

    .pt-1 {
        padding-top: calc(var(--spacing)*1)
    }

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

    .pt-3 {
        padding-top: calc(var(--spacing)*3)
    }

    .pt-4 {
        padding-top: calc(var(--spacing)*4)
    }

    .pt-5 {
        padding-top: calc(var(--spacing)*5)
    }

    .pt-6 {
        padding-top: calc(var(--spacing)*6)
    }

    .pt-7 {
        padding-top: calc(var(--spacing)*7)
    }

    .pt-8 {
        padding-top: calc(var(--spacing)*8)
    }

    .pt-10 {
        padding-top: calc(var(--spacing)*10)
    }

    .pt-12 {
        padding-top: calc(var(--spacing)*12)
    }

    .pt-14 {
        padding-top: calc(var(--spacing)*14)
    }

    .pt-16 {
        padding-top: calc(var(--spacing)*16)
    }

    .pr-1 {
        padding-right: calc(var(--spacing)*1)
    }

    .pr-3 {
        padding-right: calc(var(--spacing)*3)
    }

    .pr-3\.5 {
        padding-right: calc(var(--spacing)*3.5)
    }

    .pr-4 {
        padding-right: calc(var(--spacing)*4)
    }

    .pr-5 {
        padding-right: calc(var(--spacing)*5)
    }

    .pr-6 {
        padding-right: calc(var(--spacing)*6)
    }

    .pr-8 {
        padding-right: calc(var(--spacing)*8)
    }

    .pr-10 {
        padding-right: calc(var(--spacing)*10)
    }

    .pr-12 {
        padding-right: calc(var(--spacing)*12)
    }

    .pb-0 {
        padding-bottom: calc(var(--spacing)*0)
    }

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

    .pb-3 {
        padding-bottom: calc(var(--spacing)*3)
    }

    .pb-4 {
        padding-bottom: calc(var(--spacing)*4)
    }

    .pb-5 {
        padding-bottom: calc(var(--spacing)*5)
    }

    .pb-6 {
        padding-bottom: calc(var(--spacing)*6)
    }

    .pb-8 {
        padding-bottom: calc(var(--spacing)*8)
    }

    .pb-12 {
        padding-bottom: calc(var(--spacing)*12)
    }

    .pb-14 {
        padding-bottom: calc(var(--spacing)*14)
    }

    .pb-16 {
        padding-bottom: calc(var(--spacing)*16)
    }

    .pb-20 {
        padding-bottom: calc(var(--spacing)*20)
    }

    .pl-0 {
        padding-left: calc(var(--spacing)*0)
    }

    .pl-1 {
        padding-left: calc(var(--spacing)*1)
    }

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

    .pl-3 {
        padding-left: calc(var(--spacing)*3)
    }

    .pl-3\.5 {
        padding-left: calc(var(--spacing)*3.5)
    }

    .pl-4 {
        padding-left: calc(var(--spacing)*4)
    }

    .pl-5 {
        padding-left: calc(var(--spacing)*5)
    }

    .pl-6 {
        padding-left: calc(var(--spacing)*6)
    }

    .pl-8 {
        padding-left: calc(var(--spacing)*8)
    }

    .pl-9 {
        padding-left: calc(var(--spacing)*9)
    }

    .pl-10 {
        padding-left: calc(var(--spacing)*10)
    }

    .pl-11 {
        padding-left: calc(var(--spacing)*11)
    }

    .pl-12 {
        padding-left: calc(var(--spacing)*12)
    }

    .pl-14 {
        padding-left: calc(var(--spacing)*14)
    }

    .text-center {
        text-align: center
    }

    .text-left {
        text-align: left
    }

    .text-right {
        text-align: right
    }

    .align-middle {
        vertical-align: middle
    }

    .align-top {
        vertical-align: top
    }

    .font-mono {
        font-family: var(--font-geist-mono)
    }

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

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

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

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

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

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

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

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

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

    .text-\[0\.8rem\] {
        font-size: .8rem
    }

    .text-\[0\.9em\] {
        font-size: .9em
    }

    .text-\[0\.68rem\] {
        font-size: .68rem
    }

    .text-\[0\.96rem\] {
        font-size: .96rem
    }

    .text-\[0\.97rem\] {
        font-size: .97rem
    }

    .text-\[0\.99rem\] {
        font-size: .99rem
    }

    .text-\[1\.05rem\] {
        font-size: 1.05rem
    }

    .text-\[1\.25rem\] {
        font-size: 1.25rem
    }

    .text-\[1\.65rem\] {
        font-size: 1.65rem
    }

    .text-\[1rem\] {
        font-size: 1rem
    }

    .text-\[2\.5rem\] {
        font-size: 2.5rem
    }

    .text-\[10px\] {
        font-size: 10px
    }

    .text-\[11px\] {
        font-size: 11px
    }

    .text-\[12px\] {
        font-size: 12px
    }

    .text-\[13px\] {
        font-size: 13px
    }

    .text-\[15px\] {
        font-size: 15px
    }

    .text-\[17px\] {
        font-size: 17px
    }

    .leading-6 {
        --tw-leading: calc(var(--spacing)*6);
        line-height: calc(var(--spacing)*6)
    }

    .leading-\[1\.1\] {
        --tw-leading: 1.1;
        line-height: 1.1
    }

    .leading-\[1\.2\] {
        --tw-leading: 1.2;
        line-height: 1.2
    }

    .leading-\[1\.05\] {
        --tw-leading: 1.05;
        line-height: 1.05
    }

    .leading-\[1\.6\] {
        --tw-leading: 1.6;
        line-height: 1.6
    }

    .leading-\[1\.12\] {
        --tw-leading: 1.12;
        line-height: 1.12
    }

    .leading-\[1\.15\] {
        --tw-leading: 1.15;
        line-height: 1.15
    }

    .leading-none {
        --tw-leading: 1;
        line-height: 1
    }

    .leading-relaxed {
        --tw-leading: var(--leading-relaxed);
        line-height: var(--leading-relaxed)
    }

    .leading-snug {
        --tw-leading: var(--leading-snug);
        line-height: var(--leading-snug)
    }

    .leading-tight {
        --tw-leading: var(--leading-tight);
        line-height: var(--leading-tight)
    }

    .font-black {
        --tw-font-weight: var(--font-weight-black);
        font-weight: var(--font-weight-black)
    }

    .font-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold)
    }

    .font-extrabold {
        --tw-font-weight: var(--font-weight-extrabold);
        font-weight: var(--font-weight-extrabold)
    }

    .font-light {
        --tw-font-weight: var(--font-weight-light);
        font-weight: var(--font-weight-light)
    }

    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .font-normal {
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal)
    }

    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .tracking-\[0\.2em\] {
        --tw-tracking: .2em;
        letter-spacing: .2em
    }

    .tracking-\[0\.08em\] {
        --tw-tracking: .08em;
        letter-spacing: .08em
    }

    .tracking-\[0\.12em\] {
        --tw-tracking: .12em;
        letter-spacing: .12em
    }

    .tracking-\[0\.15em\] {
        --tw-tracking: .15em;
        letter-spacing: .15em
    }

    .tracking-\[0\.18em\] {
        --tw-tracking: .18em;
        letter-spacing: .18em
    }

    .tracking-\[0\.25em\] {
        --tw-tracking: .25em;
        letter-spacing: .25em
    }

    .tracking-tight {
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .tracking-wide {
        --tw-tracking: var(--tracking-wide);
        letter-spacing: var(--tracking-wide)
    }

    .tracking-wider {
        --tw-tracking: var(--tracking-wider);
        letter-spacing: var(--tracking-wider)
    }

    .tracking-widest {
        --tw-tracking: var(--tracking-widest);
        letter-spacing: var(--tracking-widest)
    }

    .break-words {
        overflow-wrap: break-word
    }

    .whitespace-normal {
        white-space: normal
    }

    .whitespace-nowrap {
        white-space: nowrap
    }

    .whitespace-pre-line {
        white-space: pre-line
    }

    .whitespace-pre-wrap {
        white-space: pre-wrap
    }

    .\!text-indigo-700 {
        color: var(--color-indigo-700) !important
    }

    .text-\[var\(--button-primary\)\] {
        color: var(--button-primary)
    }

    .text-\[var\(--qhrm-primary\)\] {
        color: var(--qhrm-primary)
    }

    .text-amber-300 {
        color: var(--color-amber-300)
    }

    .text-amber-500 {
        color: var(--color-amber-500)
    }

    .text-amber-600 {
        color: var(--color-amber-600)
    }

    .text-amber-700 {
        color: var(--color-amber-700)
    }

    .text-amber-700\/80 {
        color: #b75000cc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-amber-700\/80 {
            color: color-mix(in oklab,var(--color-amber-700)80%,transparent)
        }
    }

    .text-amber-800 {
        color: var(--color-amber-800)
    }

    .text-amber-900 {
        color: var(--color-amber-900)
    }

    .text-black {
        color: var(--color-black)
    }

    .text-blue-200 {
        color: var(--color-blue-200)
    }

    .text-blue-500 {
        color: var(--color-blue-500)
    }

    .text-blue-600 {
        color: var(--color-blue-600)
    }

    .text-blue-700 {
        color: var(--color-blue-700)
    }

    .text-blue-800 {
        color: var(--color-blue-800)
    }

    .text-blue-900 {
        color: var(--color-blue-900)
    }

    .text-cyan-600 {
        color: var(--color-cyan-600)
    }

    .text-emerald-200\/90 {
        color: #a4f4cfe6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-emerald-200\/90 {
            color: color-mix(in oklab,var(--color-emerald-200)90%,transparent)
        }
    }

    .text-emerald-300 {
        color: var(--color-emerald-300)
    }

    .text-emerald-500 {
        color: var(--color-emerald-500)
    }

    .text-emerald-600 {
        color: var(--color-emerald-600)
    }

    .text-emerald-700 {
        color: var(--color-emerald-700)
    }

    .text-emerald-700\/80 {
        color: #007956cc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-emerald-700\/80 {
            color: color-mix(in oklab,var(--color-emerald-700)80%,transparent)
        }
    }

    .text-emerald-800 {
        color: var(--color-emerald-800)
    }

    .text-emerald-900 {
        color: var(--color-emerald-900)
    }

    .text-gray-100 {
        color: var(--color-gray-100)
    }

    .text-gray-300 {
        color: var(--color-gray-300)
    }

    .text-gray-400 {
        color: var(--color-gray-400)
    }

    .text-gray-500 {
        color: var(--color-gray-500)
    }

    .text-gray-600 {
        color: var(--color-gray-600)
    }

    .text-gray-700 {
        color: var(--color-gray-700)
    }

    .text-gray-800 {
        color: var(--color-gray-800)
    }

    .text-gray-900 {
        color: var(--color-gray-900)
    }

    .text-green-400 {
        color: var(--color-green-400)
    }

    .text-green-500 {
        color: var(--color-green-500)
    }

    .text-green-600 {
        color: var(--color-green-600)
    }

    .text-green-700 {
        color: var(--color-green-700)
    }

    .text-green-800 {
        color: var(--color-green-800)
    }

    .text-green-900 {
        color: var(--color-green-900)
    }

    .text-indigo-50 {
        color: var(--color-indigo-50)
    }

    .text-indigo-100 {
        color: var(--color-indigo-100)
    }

    .text-indigo-200 {
        color: var(--color-indigo-200)
    }

    .text-indigo-200\/90 {
        color: #c7d2ffe6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-indigo-200\/90 {
            color: color-mix(in oklab,var(--color-indigo-200)90%,transparent)
        }
    }

    .text-indigo-300 {
        color: var(--color-indigo-300)
    }

    .text-indigo-400 {
        color: var(--color-indigo-400)
    }

    .text-indigo-500 {
        color: var(--color-indigo-500)
    }

    .text-indigo-500\/60 {
        color: #625fff99
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-indigo-500\/60 {
            color: color-mix(in oklab,var(--color-indigo-500)60%,transparent)
        }
    }

    .text-indigo-600 {
        color: var(--color-indigo-600)
    }

    .text-indigo-700 {
        color: var(--color-indigo-700)
    }

    .text-indigo-700\/70 {
        color: #432dd7b3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-indigo-700\/70 {
            color: color-mix(in oklab,var(--color-indigo-700)70%,transparent)
        }
    }

    .text-indigo-700\/80 {
        color: #432dd7cc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-indigo-700\/80 {
            color: color-mix(in oklab,var(--color-indigo-700)80%,transparent)
        }
    }

    .text-indigo-800 {
        color: var(--color-indigo-800)
    }

    .text-indigo-900 {
        color: var(--color-indigo-900)
    }

    .text-indigo-900\/80 {
        color: #312c85cc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-indigo-900\/80 {
            color: color-mix(in oklab,var(--color-indigo-900)80%,transparent)
        }
    }

    .text-indigo-900\/95 {
        color: #312c85f2
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-indigo-900\/95 {
            color: color-mix(in oklab,var(--color-indigo-900)95%,transparent)
        }
    }

    .text-indigo-950 {
        color: var(--color-indigo-950)
    }

    .text-orange-600 {
        color: var(--color-orange-600)
    }

    .text-orange-700 {
        color: var(--color-orange-700)
    }

    .text-orange-800 {
        color: var(--color-orange-800)
    }

    .text-pink-200 {
        color: var(--color-pink-200)
    }

    .text-pink-300 {
        color: var(--color-pink-300)
    }

    .text-pink-600 {
        color: var(--color-pink-600)
    }

    .text-pink-700 {
        color: var(--color-pink-700)
    }

    .text-purple-300 {
        color: var(--color-purple-300)
    }

    .text-purple-600 {
        color: var(--color-purple-600)
    }

    .text-purple-700 {
        color: var(--color-purple-700)
    }

    .text-purple-800 {
        color: var(--color-purple-800)
    }

    .text-red-400 {
        color: var(--color-red-400)
    }

    .text-red-500 {
        color: var(--color-red-500)
    }

    .text-red-600 {
        color: var(--color-red-600)
    }

    .text-red-700 {
        color: var(--color-red-700)
    }

    .text-red-700\/80 {
        color: #bf000fcc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-red-700\/80 {
            color: color-mix(in oklab,var(--color-red-700)80%,transparent)
        }
    }

    .text-red-800 {
        color: var(--color-red-800)
    }

    .text-red-900 {
        color: var(--color-red-900)
    }

    .text-rose-600 {
        color: var(--color-rose-600)
    }

    .text-rose-700 {
        color: var(--color-rose-700)
    }

    .text-rose-800 {
        color: var(--color-rose-800)
    }

    .text-sky-300 {
        color: var(--color-sky-300)
    }

    .text-sky-500 {
        color: var(--color-sky-500)
    }

    .text-sky-600 {
        color: var(--color-sky-600)
    }

    .text-sky-700 {
        color: var(--color-sky-700)
    }

    .text-sky-800 {
        color: var(--color-sky-800)
    }

    .text-slate-100 {
        color: var(--color-slate-100)
    }

    .text-slate-200 {
        color: var(--color-slate-200)
    }

    .text-slate-300 {
        color: var(--color-slate-300)
    }

    .text-slate-400 {
        color: var(--color-slate-400)
    }

    .text-slate-500 {
        color: var(--color-slate-500)
    }

    .text-slate-600 {
        color: var(--color-slate-600)
    }

    .text-slate-700 {
        color: var(--color-slate-700)
    }

    .text-slate-800 {
        color: var(--color-slate-800)
    }

    .text-slate-900 {
        color: var(--color-slate-900)
    }

    .text-teal-600 {
        color: var(--color-teal-600)
    }

    .text-teal-700 {
        color: var(--color-teal-700)
    }

    .text-teal-800 {
        color: var(--color-teal-800)
    }

    .text-transparent {
        color: #0000
    }

    .text-violet-300 {
        color: var(--color-violet-300)
    }

    .text-violet-400 {
        color: var(--color-violet-400)
    }

    .text-violet-500 {
        color: var(--color-violet-500)
    }

    .text-violet-600 {
        color: var(--color-violet-600)
    }

    .text-violet-700 {
        color: var(--color-violet-700)
    }

    .text-violet-900 {
        color: var(--color-violet-900)
    }

    .text-white {
        color: var(--color-white)
    }

    .text-white\/60 {
        color: #fff9
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-white\/60 {
            color: color-mix(in oklab,var(--color-white)60%,transparent)
        }
    }

    .text-white\/70 {
        color: #ffffffb3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-white\/70 {
            color: color-mix(in oklab,var(--color-white)70%,transparent)
        }
    }

    .text-white\/75 {
        color: #ffffffbf
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-white\/75 {
            color: color-mix(in oklab,var(--color-white)75%,transparent)
        }
    }

    .text-white\/80 {
        color: #fffc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-white\/80 {
            color: color-mix(in oklab,var(--color-white)80%,transparent)
        }
    }

    .text-white\/90 {
        color: #ffffffe6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-white\/90 {
            color: color-mix(in oklab,var(--color-white)90%,transparent)
        }
    }

    .text-white\/95 {
        color: #fffffff2
    }

    @supports (color:color-mix(in lab,red,red)) {
        .text-white\/95 {
            color: color-mix(in oklab,var(--color-white)95%,transparent)
        }
    }

    .text-yellow-200 {
        color: var(--color-yellow-200)
    }

    .text-yellow-300 {
        color: var(--color-yellow-300)
    }

    .text-yellow-400 {
        color: var(--color-yellow-400)
    }

    .text-yellow-600 {
        color: var(--color-yellow-600)
    }

    .text-yellow-700 {
        color: var(--color-yellow-700)
    }

    .text-yellow-800 {
        color: var(--color-yellow-800)
    }

    .text-yellow-900 {
        color: var(--color-yellow-900)
    }

    .capitalize {
        text-transform: capitalize
    }

    .lowercase {
        text-transform: lowercase
    }

    .uppercase {
        text-transform: uppercase
    }

    .italic {
        font-style: italic
    }

    .tabular-nums {
        --tw-numeric-spacing: tabular-nums;
        font-variant-numeric: var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)
    }

    .no-underline {
        text-decoration-line: none
    }

    .underline {
        text-decoration-line: underline
    }

    .decoration-indigo-300 {
        -webkit-text-decoration-color: var(--color-indigo-300);
        text-decoration-color: var(--color-indigo-300)
    }

    .underline-offset-2 {
        text-underline-offset: 2px
    }

    .underline-offset-4 {
        text-underline-offset: 4px
    }

    .antialiased {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

    .placeholder-gray-400::placeholder {
        color: var(--color-gray-400)
    }

    .accent-indigo-600 {
        accent-color: var(--color-indigo-600)
    }

    .opacity-0 {
        opacity: 0
    }

    .opacity-20 {
        opacity: .2
    }

    .opacity-25 {
        opacity: .25
    }

    .opacity-30 {
        opacity: .3
    }

    .opacity-40 {
        opacity: .4
    }

    .opacity-50 {
        opacity: .5
    }

    .opacity-60 {
        opacity: .6
    }

    .opacity-70 {
        opacity: .7
    }

    .opacity-75 {
        opacity: .75
    }

    .opacity-80 {
        opacity: .8
    }

    .opacity-85 {
        opacity: .85
    }

    .opacity-90 {
        opacity: .9
    }

    .opacity-95 {
        opacity: .95
    }

    .opacity-100 {
        opacity: 1
    }

    .opacity-\[0\.1\] {
        opacity: .1
    }

    .opacity-\[0\.02\] {
        opacity: .02
    }

    .opacity-\[0\.03\] {
        opacity: .03
    }

    .opacity-\[0\.06\] {
        opacity: .06
    }

    .opacity-\[0\.08\] {
        opacity: .08
    }

    .opacity-\[0\.18\] {
        opacity: .18
    }

    .opacity-\[0\.025\] {
        opacity: .025
    }

    .opacity-\[0\.35\] {
        opacity: .35
    }

    .mix-blend-soft-light {
        mix-blend-mode: soft-light
    }

    .shadow-\[var\(--button-primary\)\]\/35 {
        --tw-shadow-alpha: 35%;
        --tw-shadow: var(--button-primary)
    }

    .shadow, .shadow-\[var\(--button-primary\)\]\/35 {
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .shadow {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a)
    }

    .shadow-2xl {
        --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color,#00000040)
    }

    .shadow-2xl, .shadow-\[0_0_0_1px_rgba\(0\,0\,0\,0\.06\)\,0_4px_6px_rgba\(0\,0\,0\,0\.05\)\,0_20px_50px_rgba\(0\,0\,0\,0\.12\)\] {
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .shadow-\[0_0_0_1px_rgba\(0\,0\,0\,0\.06\)\,0_4px_6px_rgba\(0\,0\,0\,0\.05\)\,0_20px_50px_rgba\(0\,0\,0\,0\.12\)\] {
        --tw-shadow: 0 0 0 1px var(--tw-shadow-color,#0000000f),0 4px 6px var(--tw-shadow-color,#0000000d),0 20px 50px var(--tw-shadow-color,#0000001f)
    }

    .shadow-\[0_1px_0_0_rgba\(0\,0\,0\,0\.05\)\] {
        --tw-shadow: 0 1px 0 0 var(--tw-shadow-color,#0000000d)
    }

    .shadow-\[0_1px_0_0_rgba\(0\,0\,0\,0\.05\)\], .shadow-\[0_1px_0_0_rgba\(0\,0\,0\,0\.08\)\] {
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .shadow-\[0_1px_0_0_rgba\(0\,0\,0\,0\.08\)\] {
        --tw-shadow: 0 1px 0 0 var(--tw-shadow-color,#00000014)
    }

    .shadow-\[0_1px_2px_rgba\(15\,23\,42\,0\.04\)\,0_12px_32px_-8px_rgba\(15\,23\,42\,0\.12\)\] {
        --tw-shadow: 0 1px 2px var(--tw-shadow-color,#0f172a0a),0 12px 32px -8px var(--tw-shadow-color,#0f172a1f);
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .shadow-\[0_2px_8px_-2px_rgba\(15\,23\,42\,0\.12\)\] {
        --tw-shadow: 0 2px 8px -2px var(--tw-shadow-color,#0f172a1f)
    }

    .shadow-\[0_2px_8px_-2px_rgba\(15\,23\,42\,0\.12\)\], .shadow-\[0_4px_24px_rgba\(100\,81\,220\,0\.085\)\] {
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .shadow-\[0_4px_24px_rgba\(100\,81\,220\,0\.085\)\] {
        --tw-shadow: 0 4px 24px var(--tw-shadow-color,#6451dc16)
    }

    .shadow-inner {
        --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d)
    }

    .shadow-inner, .shadow-lg {
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .shadow-lg {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a)
    }

    .shadow-md {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a)
    }

    .shadow-md, .shadow-none {
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .shadow-none {
        --tw-shadow: 0 0 #0000
    }

    .shadow-sm {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a)
    }

    .shadow-sm, .shadow-xl {
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .shadow-xl {
        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a)
    }

    .ring {
        --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)
    }

    .ring, .ring-0 {
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .ring-0 {
        --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)
    }

    .ring-1 {
        --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)
    }

    .ring-1, .ring-2 {
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .ring-2 {
        --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)
    }

    .ring-4 {
        --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(4px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .shadow-\[\#A03CD2\]\/30 {
        --tw-shadow-color: #a03cd24d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-\[\#A03CD2\]\/30 {
            --tw-shadow-color: color-mix(in oklab,oklab(56.3877% .149363 -.166996/.3) var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-amber-50 {
        --tw-shadow-color: oklch(98.7% .022 95.277)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-amber-50 {
            --tw-shadow-color: color-mix(in oklab,var(--color-amber-50)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-black\/25 {
        --tw-shadow-color: #00000040
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-black\/25 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-black)25%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-blue-500\/30 {
        --tw-shadow-color: #3080ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-blue-500\/30 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-blue-500)30%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-emerald-50 {
        --tw-shadow-color: oklch(97.9% .021 166.113)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-emerald-50 {
            --tw-shadow-color: color-mix(in oklab,var(--color-emerald-50)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-emerald-100 {
        --tw-shadow-color: oklch(95% .052 163.051)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-emerald-100 {
            --tw-shadow-color: color-mix(in oklab,var(--color-emerald-100)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-gray-200\/50 {
        --tw-shadow-color: #e5e7eb80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-gray-200\/50 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-gray-200)50%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-green-500\/30 {
        --tw-shadow-color: #00c7584d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-green-500\/30 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-green-500)30%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-indigo-50 {
        --tw-shadow-color: oklch(96.2% .018 272.314)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-indigo-50 {
            --tw-shadow-color: color-mix(in oklab,var(--color-indigo-50)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-indigo-100 {
        --tw-shadow-color: oklch(93% .034 272.788)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-indigo-100 {
            --tw-shadow-color: color-mix(in oklab,var(--color-indigo-100)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-indigo-500\/10 {
        --tw-shadow-color: #625fff1a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-indigo-500\/10 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-indigo-500)10%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-indigo-500\/15 {
        --tw-shadow-color: #625fff26
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-indigo-500\/15 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-indigo-500)15%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-indigo-500\/20 {
        --tw-shadow-color: #625fff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-indigo-500\/20 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-indigo-500)20%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-indigo-500\/25 {
        --tw-shadow-color: #625fff40
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-indigo-500\/25 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-indigo-500)25%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-indigo-500\/30 {
        --tw-shadow-color: #625fff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-indigo-500\/30 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-indigo-500)30%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-indigo-500\/50 {
        --tw-shadow-color: #625fff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-indigo-500\/50 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-indigo-500)50%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-indigo-900\/20 {
        --tw-shadow-color: #312c8533
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-indigo-900\/20 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-indigo-900)20%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-indigo-950\/5 {
        --tw-shadow-color: #1e1a4d0d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-indigo-950\/5 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-indigo-950)5%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-purple-500\/30 {
        --tw-shadow-color: #ac4bff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-purple-500\/30 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-purple-500)30%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-red-50 {
        --tw-shadow-color: oklch(97.1% .013 17.38)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-red-50 {
            --tw-shadow-color: color-mix(in oklab,var(--color-red-50)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-slate-200\/30 {
        --tw-shadow-color: #e2e8f04d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-slate-200\/30 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-slate-200)30%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-slate-200\/40 {
        --tw-shadow-color: #e2e8f066
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-slate-200\/40 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-slate-200)40%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-slate-200\/50 {
        --tw-shadow-color: #e2e8f080
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-slate-200\/50 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-slate-200)50%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-slate-200\/60 {
        --tw-shadow-color: #e2e8f099
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-slate-200\/60 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-slate-200)60%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-slate-300\/70 {
        --tw-shadow-color: #cad5e2b3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-slate-300\/70 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-slate-300)70%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-slate-900\/10 {
        --tw-shadow-color: #0f172b1a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-slate-900\/10 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-slate-900)10%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-slate-900\/15 {
        --tw-shadow-color: #0f172b26
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-slate-900\/15 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-slate-900)15%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-slate-900\/50 {
        --tw-shadow-color: #0f172b80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-slate-900\/50 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-slate-900)50%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .shadow-violet-900\/20 {
        --tw-shadow-color: #4d179a33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .shadow-violet-900\/20 {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-violet-900)20%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .ring-amber-200 {
        --tw-ring-color: var(--color-amber-200)
    }

    .ring-black\/5 {
        --tw-ring-color: #0000000d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-black\/5 {
            --tw-ring-color: color-mix(in oklab,var(--color-black)5%,transparent)
        }
    }

    .ring-black\/10 {
        --tw-ring-color: #0000001a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-black\/10 {
            --tw-ring-color: color-mix(in oklab,var(--color-black)10%,transparent)
        }
    }

    .ring-blue-200 {
        --tw-ring-color: var(--color-blue-200)
    }

    .ring-emerald-200 {
        --tw-ring-color: var(--color-emerald-200)
    }

    .ring-emerald-200\/80 {
        --tw-ring-color: #a4f4cfcc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-emerald-200\/80 {
            --tw-ring-color: color-mix(in oklab,var(--color-emerald-200)80%,transparent)
        }
    }

    .ring-gray-100 {
        --tw-ring-color: var(--color-gray-100)
    }

    .ring-gray-200 {
        --tw-ring-color: var(--color-gray-200)
    }

    .ring-green-200 {
        --tw-ring-color: var(--color-green-200)
    }

    .ring-indigo-100 {
        --tw-ring-color: var(--color-indigo-100)
    }

    .ring-indigo-100\/80 {
        --tw-ring-color: #e0e7ffcc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-indigo-100\/80 {
            --tw-ring-color: color-mix(in oklab,var(--color-indigo-100)80%,transparent)
        }
    }

    .ring-indigo-100\/90 {
        --tw-ring-color: #e0e7ffe6
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-indigo-100\/90 {
            --tw-ring-color: color-mix(in oklab,var(--color-indigo-100)90%,transparent)
        }
    }

    .ring-indigo-200 {
        --tw-ring-color: var(--color-indigo-200)
    }

    .ring-indigo-200\/20 {
        --tw-ring-color: #c7d2ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-indigo-200\/20 {
            --tw-ring-color: color-mix(in oklab,var(--color-indigo-200)20%,transparent)
        }
    }

    .ring-indigo-200\/70 {
        --tw-ring-color: #c7d2ffb3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-indigo-200\/70 {
            --tw-ring-color: color-mix(in oklab,var(--color-indigo-200)70%,transparent)
        }
    }

    .ring-indigo-300 {
        --tw-ring-color: var(--color-indigo-300)
    }

    .ring-indigo-300\/10 {
        --tw-ring-color: #a4b3ff1a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-indigo-300\/10 {
            --tw-ring-color: color-mix(in oklab,var(--color-indigo-300)10%,transparent)
        }
    }

    .ring-orange-200 {
        --tw-ring-color: var(--color-orange-200)
    }

    .ring-rose-200 {
        --tw-ring-color: var(--color-rose-200)
    }

    .ring-sky-200 {
        --tw-ring-color: var(--color-sky-200)
    }

    .ring-slate-100\/80 {
        --tw-ring-color: #f1f5f9cc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-slate-100\/80 {
            --tw-ring-color: color-mix(in oklab,var(--color-slate-100)80%,transparent)
        }
    }

    .ring-slate-200 {
        --tw-ring-color: var(--color-slate-200)
    }

    .ring-slate-200\/80 {
        --tw-ring-color: #e2e8f0cc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-slate-200\/80 {
            --tw-ring-color: color-mix(in oklab,var(--color-slate-200)80%,transparent)
        }
    }

    .ring-slate-300\/40 {
        --tw-ring-color: #cad5e266
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-slate-300\/40 {
            --tw-ring-color: color-mix(in oklab,var(--color-slate-300)40%,transparent)
        }
    }

    .ring-teal-200 {
        --tw-ring-color: var(--color-teal-200)
    }

    .ring-violet-100\/80 {
        --tw-ring-color: #ede9fecc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-violet-100\/80 {
            --tw-ring-color: color-mix(in oklab,var(--color-violet-100)80%,transparent)
        }
    }

    .ring-white {
        --tw-ring-color: var(--color-white)
    }

    .ring-white\/10 {
        --tw-ring-color: #ffffff1a
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-white\/10 {
            --tw-ring-color: color-mix(in oklab,var(--color-white)10%,transparent)
        }
    }

    .ring-white\/20 {
        --tw-ring-color: #fff3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-white\/20 {
            --tw-ring-color: color-mix(in oklab,var(--color-white)20%,transparent)
        }
    }

    .ring-white\/25 {
        --tw-ring-color: #ffffff40
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-white\/25 {
            --tw-ring-color: color-mix(in oklab,var(--color-white)25%,transparent)
        }
    }

    .ring-white\/30 {
        --tw-ring-color: #ffffff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-white\/30 {
            --tw-ring-color: color-mix(in oklab,var(--color-white)30%,transparent)
        }
    }

    .ring-white\/50 {
        --tw-ring-color: #ffffff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .ring-white\/50 {
            --tw-ring-color: color-mix(in oklab,var(--color-white)50%,transparent)
        }
    }

    .ring-offset-1 {
        --tw-ring-offset-width: 1px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)
    }

    .outline {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }

    .blur {
        --tw-blur: blur(8px)
    }

    .blur, .blur-2xl {
        filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
    }

    .blur-2xl {
        --tw-blur: blur(var(--blur-2xl))
    }

    .blur-3xl {
        --tw-blur: blur(var(--blur-3xl))
    }

    .blur-3xl, .blur-\[140px\] {
        filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
    }

    .blur-\[140px\] {
        --tw-blur: blur(140px)
    }

    .blur-lg {
        --tw-blur: blur(var(--blur-lg))
    }

    .blur-lg, .blur-sm {
        filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
    }

    .blur-sm {
        --tw-blur: blur(var(--blur-sm))
    }

    .blur-xl {
        --tw-blur: blur(var(--blur-xl))
    }

    .blur-xl, .drop-shadow {
        filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
    }

    .drop-shadow {
        --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a))drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));
        --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a)drop-shadow(0 1px 1px #0000000f)
    }

    .drop-shadow-lg {
        --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color,#00000026));
        --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg))
    }

    .drop-shadow-lg, .drop-shadow-md {
        filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
    }

    .drop-shadow-md {
        --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color,#0000001f));
        --tw-drop-shadow: drop-shadow(var(--drop-shadow-md))
    }

    .drop-shadow-sm {
        --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#00000026));
        --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm))
    }

    .drop-shadow-sm, .drop-shadow-xl {
        filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
    }

    .drop-shadow-xl {
        --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color,#0000001a));
        --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl))
    }

    .filter {
        filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
    }

    .backdrop-blur {
        --tw-backdrop-blur: blur(8px)
    }

    .backdrop-blur, .backdrop-blur-\[2px\] {
        -webkit-backdrop-filter: var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);
        backdrop-filter: var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)
    }

    .backdrop-blur-\[2px\] {
        --tw-backdrop-blur: blur(2px)
    }

    .backdrop-blur-lg {
        --tw-backdrop-blur: blur(var(--blur-lg))
    }

    .backdrop-blur-lg, .backdrop-blur-md {
        -webkit-backdrop-filter: var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);
        backdrop-filter: var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)
    }

    .backdrop-blur-md {
        --tw-backdrop-blur: blur(var(--blur-md))
    }

    .backdrop-blur-sm {
        --tw-backdrop-blur: blur(var(--blur-sm))
    }

    .backdrop-blur-sm, .backdrop-blur-xl {
        -webkit-backdrop-filter: var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);
        backdrop-filter: var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)
    }

    .backdrop-blur-xl {
        --tw-backdrop-blur: blur(var(--blur-xl))
    }

    .backdrop-blur-xs {
        --tw-backdrop-blur: blur(var(--blur-xs))
    }

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

    .transition {
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .transition-\[grid-template-rows\] {
        transition-property: grid-template-rows;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .transition-\[margin-left\] {
        transition-property: margin-left;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .transition-\[max-height\,padding\] {
        transition-property: max-height,padding;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .transition-\[opacity\,transform\] {
        transition-property: opacity,transform;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .transition-\[width\] {
        transition-property: width;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .transition-all {
        transition-property: all;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .transition-colors {
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .transition-opacity {
        transition-property: opacity;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .transition-shadow {
        transition-property: box-shadow;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .transition-transform {
        transition-property: transform,translate,scale,rotate;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .duration-150 {
        --tw-duration: .15s;
        transition-duration: .15s
    }

    .duration-200 {
        --tw-duration: .2s;
        transition-duration: .2s
    }

    .duration-250 {
        --tw-duration: .25s;
        transition-duration: .25s
    }

    .duration-300 {
        --tw-duration: .3s;
        transition-duration: .3s
    }

    .duration-500 {
        --tw-duration: .5s;
        transition-duration: .5s
    }

    .duration-700 {
        --tw-duration: .7s;
        transition-duration: .7s
    }

    .duration-900 {
        --tw-duration: .9s;
        transition-duration: .9s
    }

    .duration-1000 {
        --tw-duration: 1s;
        transition-duration: 1s
    }

    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }

    .ease-out {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out)
    }

    .will-change-transform {
        will-change: transform
    }

    .outline-none {
        --tw-outline-style: none;
        outline-style: none
    }

    .select-none {
        -webkit-user-select: none;
        user-select: none
    }

    .\[-ms-overflow-style\:none\] {
        -ms-overflow-style: none
    }

    .\[scrollbar-width\:none\] {
        scrollbar-width: none
    }

    .group-open\:rotate-180:is(:where(.group):is([open],:popover-open,:open) *) {
        rotate: 180deg
    }

    .group-focus-within\:text-\[var\(--qhrm-primary\)\]:is(:where(.group):focus-within *) {
        color: var(--qhrm-primary)
    }

    .group-focus-within\:text-indigo-500:is(:where(.group):focus-within *) {
        color: var(--color-indigo-500)
    }

    @media (hover:hover) {
        .group-hover\:-translate-x-1:is(:where(.group):hover *) {
            --tw-translate-x: calc(var(--spacing)*-1);
            translate: var(--tw-translate-x)var(--tw-translate-y)
        }

        .group-hover\:translate-x-0:is(:where(.group):hover *) {
            --tw-translate-x: calc(var(--spacing)*0);
            translate: var(--tw-translate-x)var(--tw-translate-y)
        }

        .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
            --tw-translate-x: calc(var(--spacing)*.5);
            translate: var(--tw-translate-x)var(--tw-translate-y)
        }

        .group-hover\:translate-x-1:is(:where(.group):hover *) {
            --tw-translate-x: calc(var(--spacing)*1);
            translate: var(--tw-translate-x)var(--tw-translate-y)
        }

        .group-hover\:scale-105:is(:where(.group):hover *) {
            --tw-scale-x: 105%;
            --tw-scale-y: 105%;
            --tw-scale-z: 105%;
            scale: var(--tw-scale-x)var(--tw-scale-y)
        }

        .group-hover\:scale-110:is(:where(.group):hover *) {
            --tw-scale-x: 110%;
            --tw-scale-y: 110%;
            --tw-scale-z: 110%;
            scale: var(--tw-scale-x)var(--tw-scale-y)
        }

        .group-hover\:rotate-3:is(:where(.group):hover *) {
            rotate: 3deg
        }

        .group-hover\:rotate-12:is(:where(.group):hover *) {
            rotate: 12deg
        }

        .group-hover\:gap-2:is(:where(.group):hover *) {
            gap: calc(var(--spacing)*2)
        }

        .group-hover\:border-indigo-100:is(:where(.group):hover *) {
            border-color: var(--color-indigo-100)
        }

        .group-hover\:border-indigo-200:is(:where(.group):hover *) {
            border-color: var(--color-indigo-200)
        }

        .group-hover\:bg-black\/40:is(:where(.group):hover *) {
            background-color: #0006
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:bg-black\/40:is(:where(.group):hover *) {
                background-color: color-mix(in oklab,var(--color-black)40%,transparent)
            }
        }

        .group-hover\:bg-emerald-100:is(:where(.group):hover *) {
            background-color: var(--color-emerald-100)
        }

        .group-hover\:bg-indigo-50:is(:where(.group):hover *) {
            background-color: var(--color-indigo-50)
        }

        .group-hover\:bg-indigo-50\/30:is(:where(.group):hover *) {
            background-color: #eef2ff4d
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:bg-indigo-50\/30:is(:where(.group):hover *) {
                background-color: color-mix(in oklab,var(--color-indigo-50)30%,transparent)
            }
        }

        .group-hover\:bg-indigo-100:is(:where(.group):hover *) {
            background-color: var(--color-indigo-100)
        }

        .group-hover\:bg-indigo-200:is(:where(.group):hover *) {
            background-color: var(--color-indigo-200)
        }

        .group-hover\:bg-indigo-700:is(:where(.group):hover *) {
            background-color: var(--color-indigo-700)
        }

        .group-hover\:bg-pink-100:is(:where(.group):hover *) {
            background-color: var(--color-pink-100)
        }

        .group-hover\:bg-purple-100:is(:where(.group):hover *) {
            background-color: var(--color-purple-100)
        }

        .group-hover\:bg-white:is(:where(.group):hover *) {
            background-color: var(--color-white)
        }

        .group-hover\:bg-white\/20:is(:where(.group):hover *) {
            background-color: #fff3
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:bg-white\/20:is(:where(.group):hover *) {
                background-color: color-mix(in oklab,var(--color-white)20%,transparent)
            }
        }

        .group-hover\:bg-white\/60:is(:where(.group):hover *) {
            background-color: #fff9
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:bg-white\/60:is(:where(.group):hover *) {
                background-color: color-mix(in oklab,var(--color-white)60%,transparent)
            }
        }

        .group-hover\:from-\[var\(--button-primary\)\]\/10:is(:where(.group):hover *) {
            --tw-gradient-from: var(--button-primary)
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:from-\[var\(--button-primary\)\]\/10:is(:where(.group):hover *) {
                --tw-gradient-from: color-mix(in oklab,var(--button-primary)10%,transparent)
            }
        }

        .group-hover\:from-\[var\(--button-primary\)\]\/10:is(:where(.group):hover *) {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:from-blue-50\/50:is(:where(.group):hover *) {
            --tw-gradient-from: #eff6ff80
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:from-blue-50\/50:is(:where(.group):hover *) {
                --tw-gradient-from: color-mix(in oklab,var(--color-blue-50)50%,transparent)
            }
        }

        .group-hover\:from-blue-50\/50:is(:where(.group):hover *) {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:from-indigo-50\/50:is(:where(.group):hover *) {
            --tw-gradient-from: #eef2ff80
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:from-indigo-50\/50:is(:where(.group):hover *) {
                --tw-gradient-from: color-mix(in oklab,var(--color-indigo-50)50%,transparent)
            }
        }

        .group-hover\:from-indigo-50\/50:is(:where(.group):hover *) {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:from-indigo-100:is(:where(.group):hover *) {
            --tw-gradient-from: var(--color-indigo-100);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:from-indigo-500\/3:is(:where(.group):hover *) {
            --tw-gradient-from: #625fff08
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:from-indigo-500\/3:is(:where(.group):hover *) {
                --tw-gradient-from: color-mix(in oklab,var(--color-indigo-500)3%,transparent)
            }
        }

        .group-hover\:from-indigo-500\/3:is(:where(.group):hover *) {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:from-indigo-500\/10:is(:where(.group):hover *) {
            --tw-gradient-from: #625fff1a
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:from-indigo-500\/10:is(:where(.group):hover *) {
                --tw-gradient-from: color-mix(in oklab,var(--color-indigo-500)10%,transparent)
            }
        }

        .group-hover\:from-indigo-500\/10:is(:where(.group):hover *) {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:from-indigo-500\/35:is(:where(.group):hover *) {
            --tw-gradient-from: #625fff59
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:from-indigo-500\/35:is(:where(.group):hover *) {
                --tw-gradient-from: color-mix(in oklab,var(--color-indigo-500)35%,transparent)
            }
        }

        .group-hover\:from-indigo-500\/35:is(:where(.group):hover *) {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:from-purple-50\/50:is(:where(.group):hover *) {
            --tw-gradient-from: #faf5ff80
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:from-purple-50\/50:is(:where(.group):hover *) {
                --tw-gradient-from: color-mix(in oklab,var(--color-purple-50)50%,transparent)
            }
        }

        .group-hover\:from-purple-50\/50:is(:where(.group):hover *) {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:via-purple-500\/3:is(:where(.group):hover *) {
            --tw-gradient-via: #ac4bff08
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:via-purple-500\/3:is(:where(.group):hover *) {
                --tw-gradient-via: color-mix(in oklab,var(--color-purple-500)3%,transparent)
            }
        }

        .group-hover\:via-purple-500\/3:is(:where(.group):hover *) {
            --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-via-stops)
        }

        .group-hover\:via-purple-500\/10:is(:where(.group):hover *) {
            --tw-gradient-via: #ac4bff1a
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:via-purple-500\/10:is(:where(.group):hover *) {
                --tw-gradient-via: color-mix(in oklab,var(--color-purple-500)10%,transparent)
            }
        }

        .group-hover\:via-purple-500\/10:is(:where(.group):hover *) {
            --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-via-stops)
        }

        .group-hover\:to-\[var\(--button-primary\)\]\/5:is(:where(.group):hover *) {
            --tw-gradient-to: var(--button-primary)
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:to-\[var\(--button-primary\)\]\/5:is(:where(.group):hover *) {
                --tw-gradient-to: color-mix(in oklab,var(--button-primary)5%,transparent)
            }
        }

        .group-hover\:to-\[var\(--button-primary\)\]\/5:is(:where(.group):hover *) {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:to-cyan-50\/30:is(:where(.group):hover *) {
            --tw-gradient-to: #ecfeff4d
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:to-cyan-50\/30:is(:where(.group):hover *) {
                --tw-gradient-to: color-mix(in oklab,var(--color-cyan-50)30%,transparent)
            }
        }

        .group-hover\:to-cyan-50\/30:is(:where(.group):hover *) {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:to-pink-50\/30:is(:where(.group):hover *) {
            --tw-gradient-to: #fdf2f84d
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:to-pink-50\/30:is(:where(.group):hover *) {
                --tw-gradient-to: color-mix(in oklab,var(--color-pink-50)30%,transparent)
            }
        }

        .group-hover\:to-pink-50\/30:is(:where(.group):hover *) {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:to-pink-500\/3:is(:where(.group):hover *) {
            --tw-gradient-to: #f6339a08
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:to-pink-500\/3:is(:where(.group):hover *) {
                --tw-gradient-to: color-mix(in oklab,var(--color-pink-500)3%,transparent)
            }
        }

        .group-hover\:to-pink-500\/3:is(:where(.group):hover *) {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:to-pink-500\/10:is(:where(.group):hover *) {
            --tw-gradient-to: #f6339a1a
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:to-pink-500\/10:is(:where(.group):hover *) {
                --tw-gradient-to: color-mix(in oklab,var(--color-pink-500)10%,transparent)
            }
        }

        .group-hover\:to-pink-500\/10:is(:where(.group):hover *) {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:to-purple-50\/30:is(:where(.group):hover *) {
            --tw-gradient-to: #faf5ff4d
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:to-purple-50\/30:is(:where(.group):hover *) {
                --tw-gradient-to: color-mix(in oklab,var(--color-purple-50)30%,transparent)
            }
        }

        .group-hover\:to-purple-50\/30:is(:where(.group):hover *) {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:to-purple-100:is(:where(.group):hover *) {
            --tw-gradient-to: var(--color-purple-100);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:to-violet-500\/35:is(:where(.group):hover *) {
            --tw-gradient-to: #8d54ff59
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:to-violet-500\/35:is(:where(.group):hover *) {
                --tw-gradient-to: color-mix(in oklab,var(--color-violet-500)35%,transparent)
            }
        }

        .group-hover\:to-violet-500\/35:is(:where(.group):hover *) {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .group-hover\:text-\[var\(--button-primary\)\]:is(:where(.group):hover *) {
            color: var(--button-primary)
        }

        .group-hover\:text-\[var\(--qhrm-primary\)\]:is(:where(.group):hover *) {
            color: var(--qhrm-primary)
        }

        .group-hover\:text-blue-600:is(:where(.group):hover *) {
            color: var(--color-blue-600)
        }

        .group-hover\:text-blue-700:is(:where(.group):hover *) {
            color: var(--color-blue-700)
        }

        .group-hover\:text-gray-300:is(:where(.group):hover *) {
            color: var(--color-gray-300)
        }

        .group-hover\:text-gray-600:is(:where(.group):hover *) {
            color: var(--color-gray-600)
        }

        .group-hover\:text-gray-700:is(:where(.group):hover *) {
            color: var(--color-gray-700)
        }

        .group-hover\:text-green-600:is(:where(.group):hover *) {
            color: var(--color-green-600)
        }

        .group-hover\:text-indigo-300:is(:where(.group):hover *) {
            color: var(--color-indigo-300)
        }

        .group-hover\:text-indigo-400:is(:where(.group):hover *) {
            color: var(--color-indigo-400)
        }

        .group-hover\:text-indigo-500:is(:where(.group):hover *) {
            color: var(--color-indigo-500)
        }

        .group-hover\:text-indigo-600:is(:where(.group):hover *) {
            color: var(--color-indigo-600)
        }

        .group-hover\:text-indigo-700:is(:where(.group):hover *) {
            color: var(--color-indigo-700)
        }

        .group-hover\:text-indigo-800:is(:where(.group):hover *) {
            color: var(--color-indigo-800)
        }

        .group-hover\:text-purple-600:is(:where(.group):hover *) {
            color: var(--color-purple-600)
        }

        .group-hover\:text-purple-700:is(:where(.group):hover *) {
            color: var(--color-purple-700)
        }

        .group-hover\:text-white:is(:where(.group):hover *) {
            color: var(--color-white)
        }

        .group-hover\:opacity-15:is(:where(.group):hover *) {
            opacity: .15
        }

        .group-hover\:opacity-90:is(:where(.group):hover *) {
            opacity: .9
        }

        .group-hover\:opacity-95:is(:where(.group):hover *) {
            opacity: .95
        }

        .group-hover\:opacity-100:is(:where(.group):hover *) {
            opacity: 1
        }

        .group-hover\:shadow:is(:where(.group):hover *) {
            --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);
            box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
        }

        .group-hover\:shadow-lg:is(:where(.group):hover *) {
            --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);
            box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
        }

        .group-hover\:shadow-indigo-100:is(:where(.group):hover *) {
            --tw-shadow-color: oklch(93% .034 272.788)
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\:shadow-indigo-100:is(:where(.group):hover *) {
                --tw-shadow-color: color-mix(in oklab,var(--color-indigo-100)var(--tw-shadow-alpha),transparent)
            }
        }

        .group-hover\:brightness-95:is(:where(.group):hover *) {
            --tw-brightness: brightness(95%);
            filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
        }

        .group-hover\/link\:translate-x-1:is(:where(.group\/link):hover *) {
            --tw-translate-x: calc(var(--spacing)*1);
            translate: var(--tw-translate-x)var(--tw-translate-y)
        }

        .group-hover\/resize\:h-16:is(:where(.group\/resize):hover *) {
            height: calc(var(--spacing)*16)
        }

        .group-hover\/resize\:bg-indigo-300\/60:is(:where(.group\/resize):hover *) {
            background-color: #a4b3ff99
        }

        @supports (color:color-mix(in lab,red,red)) {
            .group-hover\/resize\:bg-indigo-300\/60:is(:where(.group\/resize):hover *) {
                background-color: color-mix(in oklab,var(--color-indigo-300)60%,transparent)
            }
        }

        .group-hover\/resize\:opacity-100:is(:where(.group\/resize):hover *) {
            opacity: 1
        }

        .group-hover\/title\:text-indigo-600:is(:where(.group\/title):hover *) {
            color: var(--color-indigo-600)
        }
    }

    .marker\:font-semibold ::marker {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .marker\:font-semibold::marker {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .marker\:font-semibold ::-webkit-details-marker, .marker\:font-semibold::-webkit-details-marker {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .marker\:text-indigo-500 ::marker {
        color: var(--color-indigo-500)
    }

    .marker\:text-indigo-500::marker {
        color: var(--color-indigo-500)
    }

    .marker\:text-indigo-500 ::-webkit-details-marker, .marker\:text-indigo-500::-webkit-details-marker {
        color: var(--color-indigo-500)
    }

    .marker\:text-indigo-600 ::marker {
        color: var(--color-indigo-600)
    }

    .marker\:text-indigo-600::marker {
        color: var(--color-indigo-600)
    }

    .marker\:text-indigo-600 ::-webkit-details-marker, .marker\:text-indigo-600::-webkit-details-marker {
        color: var(--color-indigo-600)
    }

    .file\:mr-3::file-selector-button {
        margin-right: calc(var(--spacing)*3)
    }

    .file\:mr-4::file-selector-button {
        margin-right: calc(var(--spacing)*4)
    }

    .file\:rounded-lg::file-selector-button {
        border-radius: var(--radius-lg)
    }

    .file\:border-0::file-selector-button {
        border-style: var(--tw-border-style);
        border-width: 0
    }

    .file\:bg-indigo-50::file-selector-button {
        background-color: var(--color-indigo-50)
    }

    .file\:bg-purple-50::file-selector-button {
        background-color: var(--color-purple-50)
    }

    .file\:px-3::file-selector-button {
        padding-inline: calc(var(--spacing)*3)
    }

    .file\:px-4::file-selector-button {
        padding-inline: calc(var(--spacing)*4)
    }

    .file\:py-2::file-selector-button {
        padding-block: calc(var(--spacing)*2)
    }

    .file\:text-sm::file-selector-button {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height))
    }

    .file\:font-semibold::file-selector-button {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .file\:text-indigo-700::file-selector-button {
        color: var(--color-indigo-700)
    }

    .file\:text-indigo-900::file-selector-button {
        color: var(--color-indigo-900)
    }

    .file\:text-purple-700::file-selector-button {
        color: var(--color-purple-700)
    }

    .placeholder\:text-gray-400::placeholder {
        color: var(--color-gray-400)
    }

    .placeholder\:text-gray-500::placeholder {
        color: var(--color-gray-500)
    }

    .placeholder\:text-slate-400::placeholder {
        color: var(--color-slate-400)
    }

    .before\:pointer-events-none:before {
        content: var(--tw-content);
        pointer-events: none
    }

    .before\:absolute:before {
        content: var(--tw-content);
        position: absolute
    }

    .before\:inset-y-0:before {
        content: var(--tw-content);
        inset-block: calc(var(--spacing)*0)
    }

    .before\:left-0:before {
        content: var(--tw-content);
        left: calc(var(--spacing)*0)
    }

    .before\:z-10:before {
        content: var(--tw-content);
        z-index: 10
    }

    .before\:w-1:before {
        content: var(--tw-content);
        width: calc(var(--spacing)*1)
    }

    .before\:bg-gradient-to-b:before {
        content: var(--tw-content);
        --tw-gradient-position: to bottom in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .before\:from-indigo-500:before {
        content: var(--tw-content);
        --tw-gradient-from: var(--color-indigo-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .before\:to-violet-600:before {
        content: var(--tw-content);
        --tw-gradient-to: var(--color-violet-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .last\:border-0:last-child {
        border-style: var(--tw-border-style);
        border-width: 0
    }

    .last\:border-b-0:last-child {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 0
    }

    .last\:pb-0:last-child {
        padding-bottom: calc(var(--spacing)*0)
    }

    .odd\:bg-white:nth-child(odd) {
        background-color: var(--color-white)
    }

    .even\:bg-black\/2\.5:nth-child(2n) {
        background-color: #00000006
    }

    @supports (color:color-mix(in lab,red,red)) {
        .even\:bg-black\/2\.5:nth-child(2n) {
            background-color: color-mix(in oklab,var(--color-black)2.5%,transparent)
        }
    }

    .focus-within\:border-indigo-300:focus-within {
        border-color: var(--color-indigo-300)
    }

    .focus-within\:border-indigo-500:focus-within {
        border-color: var(--color-indigo-500)
    }

    .focus-within\:ring-2:focus-within {
        --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .focus-within\:ring-blue-500\/20:focus-within {
        --tw-ring-color: #3080ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus-within\:ring-blue-500\/20:focus-within {
            --tw-ring-color: color-mix(in oklab,var(--color-blue-500)20%,transparent)
        }
    }

    .focus-within\:ring-indigo-200:focus-within {
        --tw-ring-color: var(--color-indigo-200)
    }

    .focus-within\:ring-indigo-500\/20:focus-within {
        --tw-ring-color: #625fff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus-within\:ring-indigo-500\/20:focus-within {
            --tw-ring-color: color-mix(in oklab,var(--color-indigo-500)20%,transparent)
        }
    }

    @media (hover:hover) {
        .hover\:translate-x-1:hover {
            --tw-translate-x: calc(var(--spacing)*1);
            translate: var(--tw-translate-x)var(--tw-translate-y)
        }

        .hover\:-translate-y-0\.5:hover {
            --tw-translate-y: calc(var(--spacing)*-.5);
            translate: var(--tw-translate-x)var(--tw-translate-y)
        }

        .hover\:-translate-y-1:hover {
            --tw-translate-y: calc(var(--spacing)*-1);
            translate: var(--tw-translate-x)var(--tw-translate-y)
        }

        .hover\:-translate-y-1\.5:hover {
            --tw-translate-y: calc(var(--spacing)*-1.5);
            translate: var(--tw-translate-x)var(--tw-translate-y)
        }

        .hover\:-translate-y-2:hover {
            --tw-translate-y: calc(var(--spacing)*-2);
            translate: var(--tw-translate-x)var(--tw-translate-y)
        }

        .hover\:scale-105:hover {
            --tw-scale-x: 105%;
            --tw-scale-y: 105%;
            --tw-scale-z: 105%;
            scale: var(--tw-scale-x)var(--tw-scale-y)
        }

        .hover\:scale-110:hover {
            --tw-scale-x: 110%;
            --tw-scale-y: 110%;
            --tw-scale-z: 110%;
            scale: var(--tw-scale-x)var(--tw-scale-y)
        }

        .hover\:scale-125:hover {
            --tw-scale-x: 125%;
            --tw-scale-y: 125%;
            --tw-scale-z: 125%;
            scale: var(--tw-scale-x)var(--tw-scale-y)
        }

        .hover\:scale-\[1\.02\]:hover {
            scale: 1.02
        }

        .hover\:scale-\[1\.013\]:hover {
            scale: 1.013
        }

        .hover\:border-blue-200:hover {
            border-color: var(--color-blue-200)
        }

        .hover\:border-blue-400:hover {
            border-color: var(--color-blue-400)
        }

        .hover\:border-blue-500:hover {
            border-color: var(--color-blue-500)
        }

        .hover\:border-blue-600:hover {
            border-color: var(--color-blue-600)
        }

        .hover\:border-emerald-200\/60:hover {
            border-color: #a4f4cf99
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:border-emerald-200\/60:hover {
                border-color: color-mix(in oklab,var(--color-emerald-200)60%,transparent)
            }
        }

        .hover\:border-gray-200:hover {
            border-color: var(--color-gray-200)
        }

        .hover\:border-gray-300:hover {
            border-color: var(--color-gray-300)
        }

        .hover\:border-gray-300\/60:hover {
            border-color: #d1d5dc99
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:border-gray-300\/60:hover {
                border-color: color-mix(in oklab,var(--color-gray-300)60%,transparent)
            }
        }

        .hover\:border-gray-400:hover {
            border-color: var(--color-gray-400)
        }

        .hover\:border-gray-600:hover {
            border-color: var(--color-gray-600)
        }

        .hover\:border-green-200:hover {
            border-color: var(--color-green-200)
        }

        .hover\:border-indigo-200:hover {
            border-color: var(--color-indigo-200)
        }

        .hover\:border-indigo-200\/50:hover {
            border-color: #c7d2ff80
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:border-indigo-200\/50:hover {
                border-color: color-mix(in oklab,var(--color-indigo-200)50%,transparent)
            }
        }

        .hover\:border-indigo-200\/60:hover {
            border-color: #c7d2ff99
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:border-indigo-200\/60:hover {
                border-color: color-mix(in oklab,var(--color-indigo-200)60%,transparent)
            }
        }

        .hover\:border-indigo-200\/70:hover {
            border-color: #c7d2ffb3
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:border-indigo-200\/70:hover {
                border-color: color-mix(in oklab,var(--color-indigo-200)70%,transparent)
            }
        }

        .hover\:border-indigo-200\/80:hover {
            border-color: #c7d2ffcc
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:border-indigo-200\/80:hover {
                border-color: color-mix(in oklab,var(--color-indigo-200)80%,transparent)
            }
        }

        .hover\:border-indigo-300:hover {
            border-color: var(--color-indigo-300)
        }

        .hover\:border-indigo-300\/50:hover {
            border-color: #a4b3ff80
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:border-indigo-300\/50:hover {
                border-color: color-mix(in oklab,var(--color-indigo-300)50%,transparent)
            }
        }

        .hover\:border-indigo-300\/60:hover {
            border-color: #a4b3ff99
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:border-indigo-300\/60:hover {
                border-color: color-mix(in oklab,var(--color-indigo-300)60%,transparent)
            }
        }

        .hover\:border-indigo-400:hover {
            border-color: var(--color-indigo-400)
        }

        .hover\:border-indigo-500:hover {
            border-color: var(--color-indigo-500)
        }

        .hover\:border-indigo-500\/35:hover {
            border-color: #625fff59
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:border-indigo-500\/35:hover {
                border-color: color-mix(in oklab,var(--color-indigo-500)35%,transparent)
            }
        }

        .hover\:border-indigo-500\/40:hover {
            border-color: #625fff66
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:border-indigo-500\/40:hover {
                border-color: color-mix(in oklab,var(--color-indigo-500)40%,transparent)
            }
        }

        .hover\:border-indigo-600:hover {
            border-color: var(--color-indigo-600)
        }

        .hover\:border-indigo-800:hover {
            border-color: var(--color-indigo-800)
        }

        .hover\:border-pink-200:hover {
            border-color: var(--color-pink-200)
        }

        .hover\:border-purple-200:hover {
            border-color: var(--color-purple-200)
        }

        .hover\:border-purple-300:hover {
            border-color: var(--color-purple-300)
        }

        .hover\:border-purple-400:hover {
            border-color: var(--color-purple-400)
        }

        .hover\:border-red-300:hover {
            border-color: var(--color-red-300)
        }

        .hover\:border-red-500:hover {
            border-color: var(--color-red-500)
        }

        .hover\:border-slate-200:hover {
            border-color: var(--color-slate-200)
        }

        .hover\:border-slate-300:hover {
            border-color: var(--color-slate-300)
        }

        .hover\:border-slate-300\/80:hover {
            border-color: #cad5e2cc
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:border-slate-300\/80:hover {
                border-color: color-mix(in oklab,var(--color-slate-300)80%,transparent)
            }
        }

        .hover\:border-slate-900:hover {
            border-color: var(--color-slate-900)
        }

        .hover\:border-white\/40:hover {
            border-color: #fff6
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:border-white\/40:hover {
                border-color: color-mix(in oklab,var(--color-white)40%,transparent)
            }
        }

        .hover\:bg-\[\#8a33b8\]:hover {
            background-color: #8a33b8
        }

        .hover\:bg-\[var\(--qhrm-primary\)\]:hover {
            background-color: var(--qhrm-primary)
        }

        .hover\:bg-amber-50\/70:hover {
            background-color: #fffbebb3
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-amber-50\/70:hover {
                background-color: color-mix(in oklab,var(--color-amber-50)70%,transparent)
            }
        }

        .hover\:bg-black:hover {
            background-color: var(--color-black)
        }

        .hover\:bg-black\/5:hover {
            background-color: #0000000d
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-black\/5:hover {
                background-color: color-mix(in oklab,var(--color-black)5%,transparent)
            }
        }

        .hover\:bg-blue-50:hover {
            background-color: var(--color-blue-50)
        }

        .hover\:bg-blue-100:hover {
            background-color: var(--color-blue-100)
        }

        .hover\:bg-blue-500:hover {
            background-color: var(--color-blue-500)
        }

        .hover\:bg-blue-600:hover {
            background-color: var(--color-blue-600)
        }

        .hover\:bg-blue-700:hover {
            background-color: var(--color-blue-700)
        }

        .hover\:bg-blue-800:hover {
            background-color: var(--color-blue-800)
        }

        .hover\:bg-blue-900:hover {
            background-color: var(--color-blue-900)
        }

        .hover\:bg-emerald-50\/70:hover {
            background-color: #ecfdf5b3
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-emerald-50\/70:hover {
                background-color: color-mix(in oklab,var(--color-emerald-50)70%,transparent)
            }
        }

        .hover\:bg-emerald-200\/80:hover {
            background-color: #a4f4cfcc
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-emerald-200\/80:hover {
                background-color: color-mix(in oklab,var(--color-emerald-200)80%,transparent)
            }
        }

        .hover\:bg-emerald-600:hover {
            background-color: var(--color-emerald-600)
        }

        .hover\:bg-gray-50:hover {
            background-color: var(--color-gray-50)
        }

        .hover\:bg-gray-50\/40:hover {
            background-color: #f9fafb66
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-gray-50\/40:hover {
                background-color: color-mix(in oklab,var(--color-gray-50)40%,transparent)
            }
        }

        .hover\:bg-gray-50\/50:hover {
            background-color: #f9fafb80
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-gray-50\/50:hover {
                background-color: color-mix(in oklab,var(--color-gray-50)50%,transparent)
            }
        }

        .hover\:bg-gray-50\/60:hover {
            background-color: #f9fafb99
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-gray-50\/60:hover {
                background-color: color-mix(in oklab,var(--color-gray-50)60%,transparent)
            }
        }

        .hover\:bg-gray-50\/70:hover {
            background-color: #f9fafbb3
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-gray-50\/70:hover {
                background-color: color-mix(in oklab,var(--color-gray-50)70%,transparent)
            }
        }

        .hover\:bg-gray-50\/80:hover {
            background-color: #f9fafbcc
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-gray-50\/80:hover {
                background-color: color-mix(in oklab,var(--color-gray-50)80%,transparent)
            }
        }

        .hover\:bg-gray-100:hover {
            background-color: var(--color-gray-100)
        }

        .hover\:bg-gray-100\/60:hover {
            background-color: #f3f4f699
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-gray-100\/60:hover {
                background-color: color-mix(in oklab,var(--color-gray-100)60%,transparent)
            }
        }

        .hover\:bg-gray-200:hover {
            background-color: var(--color-gray-200)
        }

        .hover\:bg-gray-200\/80:hover {
            background-color: #e5e7ebcc
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-gray-200\/80:hover {
                background-color: color-mix(in oklab,var(--color-gray-200)80%,transparent)
            }
        }

        .hover\:bg-gray-300:hover {
            background-color: var(--color-gray-300)
        }

        .hover\:bg-gray-600:hover {
            background-color: var(--color-gray-600)
        }

        .hover\:bg-gray-700:hover {
            background-color: var(--color-gray-700)
        }

        .hover\:bg-gray-800:hover {
            background-color: var(--color-gray-800)
        }

        .hover\:bg-gray-900:hover {
            background-color: var(--color-gray-900)
        }

        .hover\:bg-green-100:hover {
            background-color: var(--color-green-100)
        }

        .hover\:bg-green-700:hover {
            background-color: var(--color-green-700)
        }

        .hover\:bg-indigo-50:hover {
            background-color: var(--color-indigo-50)
        }

        .hover\:bg-indigo-50\/30:hover {
            background-color: #eef2ff4d
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-indigo-50\/30:hover {
                background-color: color-mix(in oklab,var(--color-indigo-50)30%,transparent)
            }
        }

        .hover\:bg-indigo-50\/40:hover {
            background-color: #eef2ff66
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-indigo-50\/40:hover {
                background-color: color-mix(in oklab,var(--color-indigo-50)40%,transparent)
            }
        }

        .hover\:bg-indigo-50\/50:hover {
            background-color: #eef2ff80
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-indigo-50\/50:hover {
                background-color: color-mix(in oklab,var(--color-indigo-50)50%,transparent)
            }
        }

        .hover\:bg-indigo-50\/60:hover {
            background-color: #eef2ff99
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-indigo-50\/60:hover {
                background-color: color-mix(in oklab,var(--color-indigo-50)60%,transparent)
            }
        }

        .hover\:bg-indigo-50\/80:hover {
            background-color: #eef2ffcc
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-indigo-50\/80:hover {
                background-color: color-mix(in oklab,var(--color-indigo-50)80%,transparent)
            }
        }

        .hover\:bg-indigo-50\/\[0\.25\]:hover {
            background-color: #eef2ff40
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-indigo-50\/\[0\.25\]:hover {
                background-color: color-mix(in oklab,var(--color-indigo-50)25%,transparent)
            }
        }

        .hover\:bg-indigo-100:hover {
            background-color: var(--color-indigo-100)
        }

        .hover\:bg-indigo-200:hover {
            background-color: var(--color-indigo-200)
        }

        .hover\:bg-indigo-400:hover {
            background-color: var(--color-indigo-400)
        }

        .hover\:bg-indigo-700:hover {
            background-color: var(--color-indigo-700)
        }

        .hover\:bg-indigo-700\/90:hover {
            background-color: #432dd7e6
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-indigo-700\/90:hover {
                background-color: color-mix(in oklab,var(--color-indigo-700)90%,transparent)
            }
        }

        .hover\:bg-indigo-800:hover {
            background-color: var(--color-indigo-800)
        }

        .hover\:bg-orange-50\/\[0\.25\]:hover {
            background-color: #fff7ed40
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-orange-50\/\[0\.25\]:hover {
                background-color: color-mix(in oklab,var(--color-orange-50)25%,transparent)
            }
        }

        .hover\:bg-orange-100:hover {
            background-color: var(--color-orange-100)
        }

        .hover\:bg-purple-100:hover {
            background-color: var(--color-purple-100)
        }

        .hover\:bg-purple-700:hover {
            background-color: var(--color-purple-700)
        }

        .hover\:bg-red-50:hover {
            background-color: var(--color-red-50)
        }

        .hover\:bg-red-100:hover {
            background-color: var(--color-red-100)
        }

        .hover\:bg-red-500:hover {
            background-color: var(--color-red-500)
        }

        .hover\:bg-red-700:hover {
            background-color: var(--color-red-700)
        }

        .hover\:bg-rose-50\/\[0\.25\]:hover {
            background-color: #fff1f240
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-rose-50\/\[0\.25\]:hover {
                background-color: color-mix(in oklab,var(--color-rose-50)25%,transparent)
            }
        }

        .hover\:bg-sky-50\/\[0\.25\]:hover {
            background-color: #f0f9ff40
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-sky-50\/\[0\.25\]:hover {
                background-color: color-mix(in oklab,var(--color-sky-50)25%,transparent)
            }
        }

        .hover\:bg-sky-600:hover {
            background-color: var(--color-sky-600)
        }

        .hover\:bg-slate-50:hover {
            background-color: var(--color-slate-50)
        }

        .hover\:bg-slate-50\/80:hover {
            background-color: #f8fafccc
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-slate-50\/80:hover {
                background-color: color-mix(in oklab,var(--color-slate-50)80%,transparent)
            }
        }

        .hover\:bg-slate-100:hover {
            background-color: var(--color-slate-100)
        }

        .hover\:bg-slate-200:hover {
            background-color: var(--color-slate-200)
        }

        .hover\:bg-slate-500\/80:hover {
            background-color: #62748ecc
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-slate-500\/80:hover {
                background-color: color-mix(in oklab,var(--color-slate-500)80%,transparent)
            }
        }

        .hover\:bg-slate-900:hover {
            background-color: var(--color-slate-900)
        }

        .hover\:bg-teal-100:hover {
            background-color: var(--color-teal-100)
        }

        .hover\:bg-transparent:hover {
            background-color: #0000
        }

        .hover\:bg-violet-50\/35:hover {
            background-color: #f5f3ff59
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-violet-50\/35:hover {
                background-color: color-mix(in oklab,var(--color-violet-50)35%,transparent)
            }
        }

        .hover\:bg-white:hover {
            background-color: var(--color-white)
        }

        .hover\:bg-white\/10:hover {
            background-color: #ffffff1a
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-white\/10:hover {
                background-color: color-mix(in oklab,var(--color-white)10%,transparent)
            }
        }

        .hover\:bg-white\/15:hover {
            background-color: #ffffff26
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-white\/15:hover {
                background-color: color-mix(in oklab,var(--color-white)15%,transparent)
            }
        }

        .hover\:bg-white\/20:hover {
            background-color: #fff3
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-white\/20:hover {
                background-color: color-mix(in oklab,var(--color-white)20%,transparent)
            }
        }

        .hover\:bg-white\/70:hover {
            background-color: #ffffffb3
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-white\/70:hover {
                background-color: color-mix(in oklab,var(--color-white)70%,transparent)
            }
        }

        .hover\:bg-white\/80:hover {
            background-color: #fffc
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-white\/80:hover {
                background-color: color-mix(in oklab,var(--color-white)80%,transparent)
            }
        }

        .hover\:bg-white\/90:hover {
            background-color: #ffffffe6
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-white\/90:hover {
                background-color: color-mix(in oklab,var(--color-white)90%,transparent)
            }
        }

        .hover\:bg-white\/95:hover {
            background-color: #fffffff2
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-white\/95:hover {
                background-color: color-mix(in oklab,var(--color-white)95%,transparent)
            }
        }

        .hover\:bg-white\/\[0\.08\]:hover {
            background-color: #ffffff14
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:bg-white\/\[0\.08\]:hover {
                background-color: color-mix(in oklab,var(--color-white)8%,transparent)
            }
        }

        .hover\:bg-yellow-100:hover {
            background-color: var(--color-yellow-100)
        }

        .hover\:bg-yellow-700:hover {
            background-color: var(--color-yellow-700)
        }

        .hover\:bg-gradient-to-r:hover {
            --tw-gradient-position: to right in oklab;
            background-image: linear-gradient(var(--tw-gradient-stops))
        }

        .hover\:from-blue-700:hover {
            --tw-gradient-from: var(--color-blue-700);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:from-indigo-50:hover {
            --tw-gradient-from: var(--color-indigo-50);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:from-indigo-50\/60:hover {
            --tw-gradient-from: #eef2ff99
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:from-indigo-50\/60:hover {
                --tw-gradient-from: color-mix(in oklab,var(--color-indigo-50)60%,transparent)
            }
        }

        .hover\:from-indigo-50\/60:hover {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:from-indigo-100:hover {
            --tw-gradient-from: var(--color-indigo-100);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:from-indigo-500:hover {
            --tw-gradient-from: var(--color-indigo-500);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:from-indigo-500\/25:hover {
            --tw-gradient-from: #625fff40
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:from-indigo-500\/25:hover {
                --tw-gradient-from: color-mix(in oklab,var(--color-indigo-500)25%,transparent)
            }
        }

        .hover\:from-indigo-500\/25:hover {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:from-indigo-600:hover {
            --tw-gradient-from: var(--color-indigo-600);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:from-indigo-700:hover {
            --tw-gradient-from: var(--color-indigo-700);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:from-purple-700:hover {
            --tw-gradient-from: var(--color-purple-700);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:via-purple-500\/25:hover {
            --tw-gradient-via: #ac4bff40
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:via-purple-500\/25:hover {
                --tw-gradient-via: color-mix(in oklab,var(--color-purple-500)25%,transparent)
            }
        }

        .hover\:via-purple-500\/25:hover {
            --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-via-stops)
        }

        .hover\:to-blue-800:hover {
            --tw-gradient-to: var(--color-blue-800);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:to-indigo-500\/25:hover {
            --tw-gradient-to: #625fff40
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:to-indigo-500\/25:hover {
                --tw-gradient-to: color-mix(in oklab,var(--color-indigo-500)25%,transparent)
            }
        }

        .hover\:to-indigo-500\/25:hover {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:to-purple-50:hover {
            --tw-gradient-to: var(--color-purple-50);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:to-purple-50\/40:hover {
            --tw-gradient-to: #faf5ff66
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:to-purple-50\/40:hover {
                --tw-gradient-to: color-mix(in oklab,var(--color-purple-50)40%,transparent)
            }
        }

        .hover\:to-purple-50\/40:hover {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:to-purple-100:hover {
            --tw-gradient-to: var(--color-purple-100);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:to-purple-600:hover {
            --tw-gradient-to: var(--color-purple-600);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:to-purple-700:hover {
            --tw-gradient-to: var(--color-purple-700);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:to-purple-800:hover {
            --tw-gradient-to: var(--color-purple-800);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:to-violet-500:hover {
            --tw-gradient-to: var(--color-violet-500);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .hover\:text-\[var\(--qhrm-primary-dark\)\]:hover {
            color: var(--qhrm-primary-dark)
        }

        .hover\:text-blue-600:hover {
            color: var(--color-blue-600)
        }

        .hover\:text-blue-800:hover {
            color: var(--color-blue-800)
        }

        .hover\:text-gray-600:hover {
            color: var(--color-gray-600)
        }

        .hover\:text-gray-700:hover {
            color: var(--color-gray-700)
        }

        .hover\:text-gray-900:hover {
            color: var(--color-gray-900)
        }

        .hover\:text-green-800:hover {
            color: var(--color-green-800)
        }

        .hover\:text-indigo-300:hover {
            color: var(--color-indigo-300)
        }

        .hover\:text-indigo-400:hover {
            color: var(--color-indigo-400)
        }

        .hover\:text-indigo-600:hover {
            color: var(--color-indigo-600)
        }

        .hover\:text-indigo-700:hover {
            color: var(--color-indigo-700)
        }

        .hover\:text-indigo-800:hover {
            color: var(--color-indigo-800)
        }

        .hover\:text-indigo-900:hover {
            color: var(--color-indigo-900)
        }

        .hover\:text-purple-600:hover {
            color: var(--color-purple-600)
        }

        .hover\:text-red-600:hover {
            color: var(--color-red-600)
        }

        .hover\:text-red-700:hover {
            color: var(--color-red-700)
        }

        .hover\:text-slate-600:hover {
            color: var(--color-slate-600)
        }

        .hover\:text-slate-800:hover {
            color: var(--color-slate-800)
        }

        .hover\:text-slate-900:hover {
            color: var(--color-slate-900)
        }

        .hover\:text-violet-600:hover {
            color: var(--color-violet-600)
        }

        .hover\:text-violet-900:hover {
            color: var(--color-violet-900)
        }

        .hover\:text-white:hover {
            color: var(--color-white)
        }

        .hover\:underline:hover {
            text-decoration-line: underline
        }

        .hover\:decoration-indigo-600:hover {
            -webkit-text-decoration-color: var(--color-indigo-600);
            text-decoration-color: var(--color-indigo-600)
        }

        .hover\:opacity-90:hover {
            opacity: .9
        }

        .hover\:opacity-95:hover {
            opacity: .95
        }

        .hover\:shadow-\[var\(--button-primary\)\]\/30:hover {
            --tw-shadow-alpha: 30%;
            --tw-shadow: var(--button-primary)
        }

        .hover\:shadow-\[var\(--button-primary\)\]\/30:hover, .hover\:shadow:hover {
            box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
        }

        .hover\:shadow:hover {
            --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a)
        }

        .hover\:shadow-2xl:hover {
            --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color,#00000040)
        }

        .hover\:shadow-2xl:hover, .hover\:shadow-lg:hover {
            box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
        }

        .hover\:shadow-lg:hover {
            --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a)
        }

        .hover\:shadow-md:hover {
            --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a)
        }

        .hover\:shadow-md:hover, .hover\:shadow-sm:hover {
            box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
        }

        .hover\:shadow-sm:hover {
            --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a)
        }

        .hover\:shadow-xl:hover {
            --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a)
        }

        .hover\:ring-2:hover, .hover\:shadow-xl:hover {
            box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
        }

        .hover\:ring-2:hover {
            --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)
        }

        .hover\:shadow-\[\#A03CD2\]\/35:hover {
            --tw-shadow-color: #a03cd259
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:shadow-\[\#A03CD2\]\/35:hover {
                --tw-shadow-color: color-mix(in oklab,oklab(56.3877% .149363 -.166996/.35) var(--tw-shadow-alpha),transparent)
            }
        }

        .hover\:shadow-black\/20:hover {
            --tw-shadow-color: #0003
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:shadow-black\/20:hover {
                --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-black)20%,transparent)var(--tw-shadow-alpha),transparent)
            }
        }

        .hover\:shadow-blue-500\/20:hover {
            --tw-shadow-color: #3080ff33
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:shadow-blue-500\/20:hover {
                --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-blue-500)20%,transparent)var(--tw-shadow-alpha),transparent)
            }
        }

        .hover\:shadow-blue-600\/20:hover {
            --tw-shadow-color: #155dfc33
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:shadow-blue-600\/20:hover {
                --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-blue-600)20%,transparent)var(--tw-shadow-alpha),transparent)
            }
        }

        .hover\:shadow-indigo-100:hover {
            --tw-shadow-color: oklch(93% .034 272.788)
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:shadow-indigo-100:hover {
                --tw-shadow-color: color-mix(in oklab,var(--color-indigo-100)var(--tw-shadow-alpha),transparent)
            }
        }

        .hover\:shadow-indigo-500\/5:hover {
            --tw-shadow-color: #625fff0d
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:shadow-indigo-500\/5:hover {
                --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-indigo-500)5%,transparent)var(--tw-shadow-alpha),transparent)
            }
        }

        .hover\:shadow-indigo-500\/10:hover {
            --tw-shadow-color: #625fff1a
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:shadow-indigo-500\/10:hover {
                --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-indigo-500)10%,transparent)var(--tw-shadow-alpha),transparent)
            }
        }

        .hover\:shadow-indigo-500\/15:hover {
            --tw-shadow-color: #625fff26
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:shadow-indigo-500\/15:hover {
                --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-indigo-500)15%,transparent)var(--tw-shadow-alpha),transparent)
            }
        }

        .hover\:shadow-indigo-500\/20:hover {
            --tw-shadow-color: #625fff33
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:shadow-indigo-500\/20:hover {
                --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-indigo-500)20%,transparent)var(--tw-shadow-alpha),transparent)
            }
        }

        .hover\:shadow-indigo-500\/30:hover {
            --tw-shadow-color: #625fff4d
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:shadow-indigo-500\/30:hover {
                --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-indigo-500)30%,transparent)var(--tw-shadow-alpha),transparent)
            }
        }

        .hover\:shadow-indigo-500\/35:hover {
            --tw-shadow-color: #625fff59
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:shadow-indigo-500\/35:hover {
                --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-indigo-500)35%,transparent)var(--tw-shadow-alpha),transparent)
            }
        }

        .hover\:shadow-indigo-500\/40:hover {
            --tw-shadow-color: #625fff66
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:shadow-indigo-500\/40:hover {
                --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-indigo-500)40%,transparent)var(--tw-shadow-alpha),transparent)
            }
        }

        .hover\:shadow-red-500\/20:hover {
            --tw-shadow-color: #fb2c3633
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:shadow-red-500\/20:hover {
                --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-red-500)20%,transparent)var(--tw-shadow-alpha),transparent)
            }
        }

        .hover\:shadow-white\/50:hover {
            --tw-shadow-color: #ffffff80
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:shadow-white\/50:hover {
                --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-white)50%,transparent)var(--tw-shadow-alpha),transparent)
            }
        }

        .hover\:ring-indigo-100:hover {
            --tw-ring-color: var(--color-indigo-100)
        }

        .hover\:file\:bg-indigo-100:hover::file-selector-button {
            background-color: var(--color-indigo-100)
        }

        .hover\:file\:bg-indigo-100\/90:hover::file-selector-button {
            background-color: #e0e7ffe6
        }

        @supports (color:color-mix(in lab,red,red)) {
            .hover\:file\:bg-indigo-100\/90:hover::file-selector-button {
                background-color: color-mix(in oklab,var(--color-indigo-100)90%,transparent)
            }
        }

        .hover\:file\:bg-purple-100:hover::file-selector-button {
            background-color: var(--color-purple-100)
        }
    }

    .focus\:border-\[var\(--button-primary\)\]:focus, .focus\:border-\[var\(--button-primary\)\]\/50:focus {
        border-color: var(--button-primary)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:border-\[var\(--button-primary\)\]\/50:focus {
            border-color: color-mix(in oklab,var(--button-primary)50%,transparent)
        }
    }

    .focus\:border-\[var\(--qhrm-primary\)\]:focus {
        border-color: var(--qhrm-primary)
    }

    .focus\:border-black:focus {
        border-color: var(--color-black)
    }

    .focus\:border-blue-500:focus {
        border-color: var(--color-blue-500)
    }

    .focus\:border-gray-500:focus {
        border-color: var(--color-gray-500)
    }

    .focus\:border-indigo-300:focus {
        border-color: var(--color-indigo-300)
    }

    .focus\:border-indigo-400:focus {
        border-color: var(--color-indigo-400)
    }

    .focus\:border-indigo-500:focus {
        border-color: var(--color-indigo-500)
    }

    .focus\:border-red-300:focus {
        border-color: var(--color-red-300)
    }

    .focus\:border-red-500:focus {
        border-color: var(--color-red-500)
    }

    .focus\:border-transparent:focus {
        border-color: #0000
    }

    .focus\:border-violet-400:focus {
        border-color: var(--color-violet-400)
    }

    .focus\:border-white\/60:focus {
        border-color: #fff9
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:border-white\/60:focus {
            border-color: color-mix(in oklab,var(--color-white)60%,transparent)
        }
    }

    .focus\:bg-indigo-50\/50:focus {
        background-color: #eef2ff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:bg-indigo-50\/50:focus {
            background-color: color-mix(in oklab,var(--color-indigo-50)50%,transparent)
        }
    }

    .focus\:bg-white:focus {
        background-color: var(--color-white)
    }

    .focus\:shadow-\[0_0_0_3px_rgba\(99\,102\,241\,0\.12\)\]:focus {
        --tw-shadow: 0 0 0 3px var(--tw-shadow-color,#6366f11f)
    }

    .focus\:shadow-\[0_0_0_3px_rgba\(139\,92\,246\,0\.12\)\]:focus, .focus\:shadow-\[0_0_0_3px_rgba\(99\,102\,241\,0\.12\)\]:focus {
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .focus\:shadow-\[0_0_0_3px_rgba\(139\,92\,246\,0\.12\)\]:focus {
        --tw-shadow: 0 0 0 3px var(--tw-shadow-color,#8b5cf61f)
    }

    .focus\:ring-0:focus {
        --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)
    }

    .focus\:ring-0:focus, .focus\:ring-2:focus {
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .focus\:ring-2:focus {
        --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)
    }

    .focus\:ring-4:focus {
        --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(4px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)
    }

    .focus\:ring-4:focus, .focus\:ring-\[3px\]:focus {
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .focus\:ring-\[3px\]:focus {
        --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)
    }

    .focus\:ring-\[var\(--button-primary\)\]\/20:focus {
        --tw-ring-color: var(--button-primary)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:ring-\[var\(--button-primary\)\]\/20:focus {
            --tw-ring-color: color-mix(in oklab,var(--button-primary)20%,transparent)
        }
    }

    .focus\:ring-\[var\(--button-primary\)\]\/30:focus {
        --tw-ring-color: var(--button-primary)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:ring-\[var\(--button-primary\)\]\/30:focus {
            --tw-ring-color: color-mix(in oklab,var(--button-primary)30%,transparent)
        }
    }

    .focus\:ring-\[var\(--button-primary\)\]\/40:focus {
        --tw-ring-color: var(--button-primary)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:ring-\[var\(--button-primary\)\]\/40:focus {
            --tw-ring-color: color-mix(in oklab,var(--button-primary)40%,transparent)
        }
    }

    .focus\:ring-\[var\(--qhrm-primary\)\]\/25:focus {
        --tw-ring-color: var(--qhrm-primary)
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:ring-\[var\(--qhrm-primary\)\]\/25:focus {
            --tw-ring-color: color-mix(in oklab,var(--qhrm-primary)25%,transparent)
        }
    }

    .focus\:ring-blue-500:focus {
        --tw-ring-color: var(--color-blue-500)
    }

    .focus\:ring-blue-500\/20:focus {
        --tw-ring-color: #3080ff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:ring-blue-500\/20:focus {
            --tw-ring-color: color-mix(in oklab,var(--color-blue-500)20%,transparent)
        }
    }

    .focus\:ring-emerald-500\/50:focus {
        --tw-ring-color: #00bb7f80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:ring-emerald-500\/50:focus {
            --tw-ring-color: color-mix(in oklab,var(--color-emerald-500)50%,transparent)
        }
    }

    .focus\:ring-gray-200:focus {
        --tw-ring-color: var(--color-gray-200)
    }

    .focus\:ring-gray-500:focus {
        --tw-ring-color: var(--color-gray-500)
    }

    .focus\:ring-gray-500\/20:focus {
        --tw-ring-color: #6a728233
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:ring-gray-500\/20:focus {
            --tw-ring-color: color-mix(in oklab,var(--color-gray-500)20%,transparent)
        }
    }

    .focus\:ring-gray-900\/20:focus {
        --tw-ring-color: #10182833
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:ring-gray-900\/20:focus {
            --tw-ring-color: color-mix(in oklab,var(--color-gray-900)20%,transparent)
        }
    }

    .focus\:ring-indigo-100:focus {
        --tw-ring-color: var(--color-indigo-100)
    }

    .focus\:ring-indigo-200:focus {
        --tw-ring-color: var(--color-indigo-200)
    }

    .focus\:ring-indigo-300:focus {
        --tw-ring-color: var(--color-indigo-300)
    }

    .focus\:ring-indigo-400:focus {
        --tw-ring-color: var(--color-indigo-400)
    }

    .focus\:ring-indigo-500:focus {
        --tw-ring-color: var(--color-indigo-500)
    }

    .focus\:ring-indigo-500\/20:focus {
        --tw-ring-color: #625fff33
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:ring-indigo-500\/20:focus {
            --tw-ring-color: color-mix(in oklab,var(--color-indigo-500)20%,transparent)
        }
    }

    .focus\:ring-indigo-500\/30:focus {
        --tw-ring-color: #625fff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:ring-indigo-500\/30:focus {
            --tw-ring-color: color-mix(in oklab,var(--color-indigo-500)30%,transparent)
        }
    }

    .focus\:ring-indigo-500\/40:focus {
        --tw-ring-color: #625fff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:ring-indigo-500\/40:focus {
            --tw-ring-color: color-mix(in oklab,var(--color-indigo-500)40%,transparent)
        }
    }

    .focus\:ring-indigo-500\/50:focus {
        --tw-ring-color: #625fff80
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:ring-indigo-500\/50:focus {
            --tw-ring-color: color-mix(in oklab,var(--color-indigo-500)50%,transparent)
        }
    }

    .focus\:ring-indigo-500\/70:focus {
        --tw-ring-color: #625fffb3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:ring-indigo-500\/70:focus {
            --tw-ring-color: color-mix(in oklab,var(--color-indigo-500)70%,transparent)
        }
    }

    .focus\:ring-indigo-600:focus {
        --tw-ring-color: var(--color-indigo-600)
    }

    .focus\:ring-purple-500:focus {
        --tw-ring-color: var(--color-purple-500)
    }

    .focus\:ring-red-200:focus {
        --tw-ring-color: var(--color-red-200)
    }

    .focus\:ring-red-500\/20:focus {
        --tw-ring-color: #fb2c3633
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:ring-red-500\/20:focus {
            --tw-ring-color: color-mix(in oklab,var(--color-red-500)20%,transparent)
        }
    }

    .focus\:ring-white\/70:focus {
        --tw-ring-color: #ffffffb3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus\:ring-white\/70:focus {
            --tw-ring-color: color-mix(in oklab,var(--color-white)70%,transparent)
        }
    }

    .focus\:ring-offset-1:focus {
        --tw-ring-offset-width: 1px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)
    }

    .focus\:ring-offset-2:focus {
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)
    }

    .focus\:outline-indigo-500:focus {
        outline-color: var(--color-indigo-500)
    }

    .focus\:outline-none:focus {
        --tw-outline-style: none;
        outline-style: none
    }

    .focus-visible\:ring-2:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .focus-visible\:ring-gray-300:focus-visible {
        --tw-ring-color: var(--color-gray-300)
    }

    .focus-visible\:ring-indigo-300:focus-visible {
        --tw-ring-color: var(--color-indigo-300)
    }

    .focus-visible\:ring-indigo-400:focus-visible {
        --tw-ring-color: var(--color-indigo-400)
    }

    .focus-visible\:ring-indigo-500\/30:focus-visible {
        --tw-ring-color: #625fff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus-visible\:ring-indigo-500\/30:focus-visible {
            --tw-ring-color: color-mix(in oklab,var(--color-indigo-500)30%,transparent)
        }
    }

    .focus-visible\:ring-indigo-500\/35:focus-visible {
        --tw-ring-color: #625fff59
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus-visible\:ring-indigo-500\/35:focus-visible {
            --tw-ring-color: color-mix(in oklab,var(--color-indigo-500)35%,transparent)
        }
    }

    .focus-visible\:ring-indigo-500\/40:focus-visible {
        --tw-ring-color: #625fff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus-visible\:ring-indigo-500\/40:focus-visible {
            --tw-ring-color: color-mix(in oklab,var(--color-indigo-500)40%,transparent)
        }
    }

    .focus-visible\:ring-violet-500\/30:focus-visible {
        --tw-ring-color: #8d54ff4d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus-visible\:ring-violet-500\/30:focus-visible {
            --tw-ring-color: color-mix(in oklab,var(--color-violet-500)30%,transparent)
        }
    }

    .focus-visible\:ring-violet-500\/35:focus-visible {
        --tw-ring-color: #8d54ff59
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus-visible\:ring-violet-500\/35:focus-visible {
            --tw-ring-color: color-mix(in oklab,var(--color-violet-500)35%,transparent)
        }
    }

    .focus-visible\:ring-violet-500\/40:focus-visible {
        --tw-ring-color: #8d54ff66
    }

    @supports (color:color-mix(in lab,red,red)) {
        .focus-visible\:ring-violet-500\/40:focus-visible {
            --tw-ring-color: color-mix(in oklab,var(--color-violet-500)40%,transparent)
        }
    }

    .focus-visible\:ring-offset-2:focus-visible {
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)
    }

    .focus-visible\:ring-offset-white:focus-visible {
        --tw-ring-offset-color: var(--color-white)
    }

    .focus-visible\:outline-none:focus-visible {
        --tw-outline-style: none;
        outline-style: none
    }

    .active\:translate-y-0:active {
        --tw-translate-y: calc(var(--spacing)*0);
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .active\:scale-95:active {
        --tw-scale-x: 95%;
        --tw-scale-y: 95%;
        --tw-scale-z: 95%;
        scale: var(--tw-scale-x)var(--tw-scale-y)
    }

    .active\:scale-\[0\.98\]:active {
        scale: .98
    }

    .active\:bg-\[\#7529a0\]:active {
        background-color: #7529a0
    }

    .active\:shadow-lg:active {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .disabled\:pointer-events-none:disabled {
        pointer-events: none
    }

    .disabled\:transform-none:disabled {
        transform: none
    }

    .disabled\:cursor-not-allowed:disabled {
        cursor: not-allowed
    }

    .disabled\:bg-gray-100:disabled {
        background-color: var(--color-gray-100)
    }

    .disabled\:bg-indigo-300:disabled {
        background-color: var(--color-indigo-300)
    }

    .disabled\:bg-white\/70:disabled {
        background-color: #ffffffb3
    }

    @supports (color:color-mix(in lab,red,red)) {
        .disabled\:bg-white\/70:disabled {
            background-color: color-mix(in oklab,var(--color-white)70%,transparent)
        }
    }

    .disabled\:opacity-30:disabled {
        opacity: .3
    }

    .disabled\:opacity-40:disabled {
        opacity: .4
    }

    .disabled\:opacity-45:disabled {
        opacity: .45
    }

    .disabled\:opacity-50:disabled {
        opacity: .5
    }

    .disabled\:opacity-60:disabled {
        opacity: .6
    }

    .disabled\:opacity-80:disabled {
        opacity: .8
    }

    @media (hover:hover) {
        .disabled\:hover\:border-gray-300:disabled:hover {
            border-color: var(--color-gray-300)
        }

        .disabled\:hover\:bg-transparent:disabled:hover {
            background-color: #0000
        }
    }

    @media (min-width:40rem) {
        .sm\:col-span-2 {
            grid-column: span 2/span 2
        }

        .sm\:mx-0 {
            margin-inline: calc(var(--spacing)*0)
        }

        .sm\:ml-0 {
            margin-left: calc(var(--spacing)*0)
        }

        .sm\:block {
            display: block
        }

        .sm\:flex {
            display: flex
        }

        .sm\:hidden {
            display: none
        }

        .sm\:inline {
            display: inline
        }

        .sm\:inline-flex {
            display: inline-flex
        }

        .sm\:table-cell {
            display: table-cell
        }

        .sm\:aspect-\[3\/2\] {
            aspect-ratio: 3/2
        }

        .sm\:h-8 {
            height: calc(var(--spacing)*8)
        }

        .sm\:h-16 {
            height: calc(var(--spacing)*16)
        }

        .sm\:max-h-\[70vh\] {
            max-height: 70vh
        }

        .sm\:max-h-\[90vh\] {
            max-height: 90vh
        }

        .sm\:w-8 {
            width: calc(var(--spacing)*8)
        }

        .sm\:w-16 {
            width: calc(var(--spacing)*16)
        }

        .sm\:w-32 {
            width: calc(var(--spacing)*32)
        }

        .sm\:w-44 {
            width: calc(var(--spacing)*44)
        }

        .sm\:w-52 {
            width: calc(var(--spacing)*52)
        }

        .sm\:w-56 {
            width: calc(var(--spacing)*56)
        }

        .sm\:w-64 {
            width: calc(var(--spacing)*64)
        }

        .sm\:w-80 {
            width: calc(var(--spacing)*80)
        }

        .sm\:w-\[360px\] {
            width: 360px
        }

        .sm\:w-\[420px\] {
            width: 420px
        }

        .sm\:w-auto {
            width: auto
        }

        .sm\:max-w-none {
            max-width: none
        }

        .sm\:max-w-sm {
            max-width: var(--container-sm)
        }

        .sm\:max-w-xs {
            max-width: var(--container-xs)
        }

        .sm\:min-w-0 {
            min-width: calc(var(--spacing)*0)
        }

        .sm\:min-w-\[260px\] {
            min-width: 260px
        }

        .sm\:flex-initial {
            flex: 0 auto
        }

        .sm\:grid-cols-2 {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .sm\:grid-cols-3 {
            grid-template-columns: repeat(3,minmax(0,1fr))
        }

        .sm\:flex-row {
            flex-direction: row
        }

        .sm\:flex-wrap {
            flex-wrap: wrap
        }

        .sm\:items-center {
            align-items: center
        }

        .sm\:items-end {
            align-items: flex-end
        }

        .sm\:items-start {
            align-items: flex-start
        }

        .sm\:justify-between {
            justify-content: space-between
        }

        .sm\:justify-end {
            justify-content: flex-end
        }

        .sm\:gap-2 {
            gap: calc(var(--spacing)*2)
        }

        .sm\:gap-3 {
            gap: calc(var(--spacing)*3)
        }

        .sm\:gap-4 {
            gap: calc(var(--spacing)*4)
        }

        .sm\:gap-5 {
            gap: calc(var(--spacing)*5)
        }

        .sm\:gap-6 {
            gap: calc(var(--spacing)*6)
        }

        :where(.sm\:space-y-6>:not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));
            margin-block-end: calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))
        }

        :where(.sm\:space-y-8>:not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));
            margin-block-end: calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)))
        }

        .sm\:rounded-2xl {
            border-radius: var(--radius-2xl)
        }

        .sm\:p-0 {
            padding: calc(var(--spacing)*0)
        }

        .sm\:p-3 {
            padding: calc(var(--spacing)*3)
        }

        .sm\:p-4 {
            padding: calc(var(--spacing)*4)
        }

        .sm\:p-5 {
            padding: calc(var(--spacing)*5)
        }

        .sm\:p-6 {
            padding: calc(var(--spacing)*6)
        }

        .sm\:p-8 {
            padding: calc(var(--spacing)*8)
        }

        .sm\:p-9 {
            padding: calc(var(--spacing)*9)
        }

        .sm\:p-10 {
            padding: calc(var(--spacing)*10)
        }

        .sm\:px-0 {
            padding-inline: calc(var(--spacing)*0)
        }

        .sm\:px-4 {
            padding-inline: calc(var(--spacing)*4)
        }

        .sm\:px-6 {
            padding-inline: calc(var(--spacing)*6)
        }

        .sm\:px-7 {
            padding-inline: calc(var(--spacing)*7)
        }

        .sm\:px-8 {
            padding-inline: calc(var(--spacing)*8)
        }

        .sm\:py-2 {
            padding-block: calc(var(--spacing)*2)
        }

        .sm\:py-3 {
            padding-block: calc(var(--spacing)*3)
        }

        .sm\:py-4 {
            padding-block: calc(var(--spacing)*4)
        }

        .sm\:py-5 {
            padding-block: calc(var(--spacing)*5)
        }

        .sm\:py-6 {
            padding-block: calc(var(--spacing)*6)
        }

        .sm\:py-8 {
            padding-block: calc(var(--spacing)*8)
        }

        .sm\:py-10 {
            padding-block: calc(var(--spacing)*10)
        }

        .sm\:pt-6 {
            padding-top: calc(var(--spacing)*6)
        }

        .sm\:pb-6 {
            padding-bottom: calc(var(--spacing)*6)
        }

        .sm\:text-right {
            text-align: right
        }

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

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

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

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

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

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

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

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

        .sm\:text-\[13px\] {
            font-size: 13px
        }

        .sm\:tracking-tight {
            --tw-tracking: var(--tracking-tight);
            letter-spacing: var(--tracking-tight)
        }
    }

    @media (min-width:48rem) {
        .md\:sticky {
            position: sticky
        }

        .md\:top-24 {
            top: calc(var(--spacing)*24)
        }

        .md\:right-6 {
            right: calc(var(--spacing)*6)
        }

        .md\:order-1 {
            order: 1
        }

        .md\:order-2 {
            order: 2
        }

        .md\:col-span-1 {
            grid-column: span 1/span 1
        }

        .md\:col-span-2 {
            grid-column: span 2/span 2
        }

        .md\:col-span-3 {
            grid-column: span 3/span 3
        }

        .md\:col-span-10 {
            grid-column: span 10/span 10
        }

        .md\:-mx-4 {
            margin-inline: calc(var(--spacing)*-4)
        }

        .md\:mx-0 {
            margin-inline: calc(var(--spacing)*0)
        }

        .md\:mt-6 {
            margin-top: calc(var(--spacing)*6)
        }

        .md\:mt-20 {
            margin-top: calc(var(--spacing)*20)
        }

        .md\:mt-24 {
            margin-top: calc(var(--spacing)*24)
        }

        .md\:mb-0 {
            margin-bottom: calc(var(--spacing)*0)
        }

        .md\:mb-10 {
            margin-bottom: calc(var(--spacing)*10)
        }

        .md\:mb-16 {
            margin-bottom: calc(var(--spacing)*16)
        }

        .md\:mb-20 {
            margin-bottom: calc(var(--spacing)*20)
        }

        .md\:block {
            display: block
        }

        .md\:flex {
            display: flex
        }

        .md\:hidden {
            display: none
        }

        .md\:inline {
            display: inline
        }

        .md\:h-7 {
            height: calc(var(--spacing)*7)
        }

        .md\:h-9 {
            height: calc(var(--spacing)*9)
        }

        .md\:h-12 {
            height: calc(var(--spacing)*12)
        }

        .md\:h-14 {
            height: calc(var(--spacing)*14)
        }

        .md\:h-20 {
            height: calc(var(--spacing)*20)
        }

        .md\:h-24 {
            height: calc(var(--spacing)*24)
        }

        .md\:h-32 {
            height: calc(var(--spacing)*32)
        }

        .md\:h-\[22rem\] {
            height: 22rem
        }

        .md\:h-\[26rem\] {
            height: 26rem
        }

        .md\:h-\[440px\] {
            height: 440px
        }

        .md\:h-\[500px\] {
            height: 500px
        }

        .md\:min-h-\[88vh\] {
            min-height: 88vh
        }

        .md\:w-7 {
            width: calc(var(--spacing)*7)
        }

        .md\:w-9 {
            width: calc(var(--spacing)*9)
        }

        .md\:w-12 {
            width: calc(var(--spacing)*12)
        }

        .md\:w-14 {
            width: calc(var(--spacing)*14)
        }

        .md\:w-24 {
            width: calc(var(--spacing)*24)
        }

        .md\:w-32 {
            width: calc(var(--spacing)*32)
        }

        .md\:w-72 {
            width: calc(var(--spacing)*72)
        }

        .md\:w-\[22rem\] {
            width: 22rem
        }

        .md\:w-\[26rem\] {
            width: 26rem
        }

        .md\:w-\[420px\] {
            width: 420px
        }

        .md\:max-w-md {
            max-width: var(--container-md)
        }

        .md\:min-w-\[200px\] {
            min-width: 200px
        }

        .md\:translate-x-0 {
            --tw-translate-x: calc(var(--spacing)*0);
            translate: var(--tw-translate-x)var(--tw-translate-y)
        }

        .md\:grid-cols-2 {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .md\:grid-cols-3 {
            grid-template-columns: repeat(3,minmax(0,1fr))
        }

        .md\:grid-cols-4 {
            grid-template-columns: repeat(4,minmax(0,1fr))
        }

        .md\:grid-cols-5 {
            grid-template-columns: repeat(5,minmax(0,1fr))
        }

        .md\:grid-cols-6 {
            grid-template-columns: repeat(6,minmax(0,1fr))
        }

        .md\:flex-row {
            flex-direction: row
        }

        .md\:items-center {
            align-items: center
        }

        .md\:items-start {
            align-items: flex-start
        }

        .md\:justify-between {
            justify-content: space-between
        }

        .md\:justify-end {
            justify-content: flex-end
        }

        .md\:justify-start {
            justify-content: flex-start
        }

        .md\:gap-4 {
            gap: calc(var(--spacing)*4)
        }

        .md\:gap-6 {
            gap: calc(var(--spacing)*6)
        }

        .md\:gap-8 {
            gap: calc(var(--spacing)*8)
        }

        .md\:gap-12 {
            gap: calc(var(--spacing)*12)
        }

        .md\:gap-14 {
            gap: calc(var(--spacing)*14)
        }

        .md\:gap-16 {
            gap: calc(var(--spacing)*16)
        }

        :where(.md\:space-y-5>:not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(calc(var(--spacing)*5)*var(--tw-space-y-reverse));
            margin-block-end: calc(calc(var(--spacing)*5)*calc(1 - var(--tw-space-y-reverse)))
        }

        .md\:p-3 {
            padding: calc(var(--spacing)*3)
        }

        .md\:p-5 {
            padding: calc(var(--spacing)*5)
        }

        .md\:p-6 {
            padding: calc(var(--spacing)*6)
        }

        .md\:p-7 {
            padding: calc(var(--spacing)*7)
        }

        .md\:p-8 {
            padding: calc(var(--spacing)*8)
        }

        .md\:p-10 {
            padding: calc(var(--spacing)*10)
        }

        .md\:p-12 {
            padding: calc(var(--spacing)*12)
        }

        .md\:p-14 {
            padding: calc(var(--spacing)*14)
        }

        .md\:px-0 {
            padding-inline: calc(var(--spacing)*0)
        }

        .md\:px-2 {
            padding-inline: calc(var(--spacing)*2)
        }

        .md\:px-3 {
            padding-inline: calc(var(--spacing)*3)
        }

        .md\:px-4 {
            padding-inline: calc(var(--spacing)*4)
        }

        .md\:px-6 {
            padding-inline: calc(var(--spacing)*6)
        }

        .md\:px-10 {
            padding-inline: calc(var(--spacing)*10)
        }

        .md\:px-12 {
            padding-inline: calc(var(--spacing)*12)
        }

        .md\:px-15 {
            padding-inline: calc(var(--spacing)*15)
        }

        .md\:px-16 {
            padding-inline: calc(var(--spacing)*16)
        }

        .md\:py-2 {
            padding-block: calc(var(--spacing)*2)
        }

        .md\:py-6 {
            padding-block: calc(var(--spacing)*6)
        }

        .md\:py-8 {
            padding-block: calc(var(--spacing)*8)
        }

        .md\:py-12 {
            padding-block: calc(var(--spacing)*12)
        }

        .md\:py-14 {
            padding-block: calc(var(--spacing)*14)
        }

        .md\:py-16 {
            padding-block: calc(var(--spacing)*16)
        }

        .md\:py-20 {
            padding-block: calc(var(--spacing)*20)
        }

        .md\:py-24 {
            padding-block: calc(var(--spacing)*24)
        }

        .md\:py-28 {
            padding-block: calc(var(--spacing)*28)
        }

        .md\:py-32 {
            padding-block: calc(var(--spacing)*32)
        }

        .md\:pt-20 {
            padding-top: calc(var(--spacing)*20)
        }

        .md\:pb-20 {
            padding-bottom: calc(var(--spacing)*20)
        }

        .md\:pb-24 {
            padding-bottom: calc(var(--spacing)*24)
        }

        .md\:pl-6 {
            padding-left: calc(var(--spacing)*6)
        }

        .md\:pl-12 {
            padding-left: calc(var(--spacing)*12)
        }

        .md\:text-left {
            text-align: left
        }

        .md\:text-right {
            text-align: right
        }

        .md\:text-2xl {
            font-size: var(--text-2xl);
            line-height: var(--tw-leading,var(--text-2xl--line-height))
        }

        .md\:text-3xl {
            font-size: var(--text-3xl);
            line-height: var(--tw-leading,var(--text-3xl--line-height))
        }

        .md\:text-4xl {
            font-size: var(--text-4xl);
            line-height: var(--tw-leading,var(--text-4xl--line-height))
        }

        .md\:text-5xl {
            font-size: var(--text-5xl);
            line-height: var(--tw-leading,var(--text-5xl--line-height))
        }

        .md\:text-6xl {
            font-size: var(--text-6xl);
            line-height: var(--tw-leading,var(--text-6xl--line-height))
        }

        .md\:text-base {
            font-size: var(--text-base);
            line-height: var(--tw-leading,var(--text-base--line-height))
        }

        .md\:text-lg {
            font-size: var(--text-lg);
            line-height: var(--tw-leading,var(--text-lg--line-height))
        }

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

        .md\:text-xl {
            font-size: var(--text-xl);
            line-height: var(--tw-leading,var(--text-xl--line-height))
        }
    }

    @media (min-width:64rem) {
        .lg\:sticky {
            position: sticky
        }

        .lg\:top-8 {
            top: calc(var(--spacing)*8)
        }

        .lg\:top-24 {
            top: calc(var(--spacing)*24)
        }

        .lg\:order-1 {
            order: 1
        }

        .lg\:order-2 {
            order: 2
        }

        .lg\:col-span-1 {
            grid-column: span 1/span 1
        }

        .lg\:col-span-2 {
            grid-column: span 2/span 2
        }

        .lg\:col-span-3 {
            grid-column: span 3/span 3
        }

        .lg\:col-span-9 {
            grid-column: span 9/span 9
        }

        .lg\:mx-0 {
            margin-inline: calc(var(--spacing)*0)
        }

        .lg\:mt-0 {
            margin-top: calc(var(--spacing)*0)
        }

        .lg\:mr-3 {
            margin-right: calc(var(--spacing)*3)
        }

        .lg\:ml-10 {
            margin-left: calc(var(--spacing)*10)
        }

        .lg\:block {
            display: block
        }

        .lg\:flex {
            display: flex
        }

        .lg\:hidden {
            display: none
        }

        .lg\:table-cell {
            display: table-cell
        }

        .lg\:h-\[600px\] {
            height: 600px
        }

        .lg\:h-fit {
            height: fit-content
        }

        .lg\:min-h-\[540px\] {
            min-height: 540px
        }

        .lg\:w-\[44\%\] {
            width: 44%
        }

        .lg\:w-\[56\%\] {
            width: 56%
        }

        .lg\:max-w-2xl {
            max-width: var(--container-2xl)
        }

        .lg\:max-w-3xl {
            max-width: var(--container-3xl)
        }

        .lg\:max-w-md {
            max-width: var(--container-md)
        }

        .lg\:flex-shrink-0 {
            flex-shrink: 0
        }

        .lg\:grid-cols-2 {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .lg\:grid-cols-3 {
            grid-template-columns: repeat(3,minmax(0,1fr))
        }

        .lg\:grid-cols-4 {
            grid-template-columns: repeat(4,minmax(0,1fr))
        }

        .lg\:grid-cols-12 {
            grid-template-columns: repeat(12,minmax(0,1fr))
        }

        .lg\:grid-cols-\[3fr_2fr\] {
            grid-template-columns: 3fr 2fr
        }

        .lg\:grid-cols-\[60\%_40\%\] {
            grid-template-columns: 60% 40%
        }

        .lg\:grid-cols-\[260px_1fr\] {
            grid-template-columns: 260px 1fr
        }

        .lg\:flex-row {
            flex-direction: row
        }

        .lg\:items-center {
            align-items: center
        }

        .lg\:items-start {
            align-items: flex-start
        }

        .lg\:items-stretch {
            align-items: stretch
        }

        .lg\:justify-between {
            justify-content: space-between
        }

        .lg\:justify-end {
            justify-content: flex-end
        }

        .lg\:justify-start {
            justify-content: flex-start
        }

        .lg\:gap-8 {
            gap: calc(var(--spacing)*8)
        }

        .lg\:gap-12 {
            gap: calc(var(--spacing)*12)
        }

        .lg\:gap-14 {
            gap: calc(var(--spacing)*14)
        }

        .lg\:gap-16 {
            gap: calc(var(--spacing)*16)
        }

        .lg\:gap-20 {
            gap: calc(var(--spacing)*20)
        }

        .lg\:self-start {
            align-self: flex-start
        }

        .lg\:border-r-2 {
            border-right-style: var(--tw-border-style);
            border-right-width: 2px
        }

        .lg\:border-indigo-100 {
            border-color: var(--color-indigo-100)
        }

        .lg\:p-8 {
            padding: calc(var(--spacing)*8)
        }

        .lg\:p-10 {
            padding: calc(var(--spacing)*10)
        }

        .lg\:p-12 {
            padding: calc(var(--spacing)*12)
        }

        .lg\:p-16 {
            padding: calc(var(--spacing)*16)
        }

        .lg\:px-6 {
            padding-inline: calc(var(--spacing)*6)
        }

        .lg\:px-8 {
            padding-inline: calc(var(--spacing)*8)
        }

        .lg\:px-10 {
            padding-inline: calc(var(--spacing)*10)
        }

        .lg\:px-12 {
            padding-inline: calc(var(--spacing)*12)
        }

        .lg\:py-6 {
            padding-block: calc(var(--spacing)*6)
        }

        .lg\:py-16 {
            padding-block: calc(var(--spacing)*16)
        }

        .lg\:py-24 {
            padding-block: calc(var(--spacing)*24)
        }

        .lg\:py-28 {
            padding-block: calc(var(--spacing)*28)
        }

        .lg\:py-36 {
            padding-block: calc(var(--spacing)*36)
        }

        .lg\:pt-16 {
            padding-top: calc(var(--spacing)*16)
        }

        .lg\:pt-24 {
            padding-top: calc(var(--spacing)*24)
        }

        .lg\:pr-8 {
            padding-right: calc(var(--spacing)*8)
        }

        .lg\:pb-24 {
            padding-bottom: calc(var(--spacing)*24)
        }

        .lg\:text-left {
            text-align: left
        }

        .lg\:text-2xl {
            font-size: var(--text-2xl);
            line-height: var(--tw-leading,var(--text-2xl--line-height))
        }

        .lg\:text-3xl {
            font-size: var(--text-3xl);
            line-height: var(--tw-leading,var(--text-3xl--line-height))
        }

        .lg\:text-4xl {
            font-size: var(--text-4xl);
            line-height: var(--tw-leading,var(--text-4xl--line-height))
        }

        .lg\:text-5xl {
            font-size: var(--text-5xl);
            line-height: var(--tw-leading,var(--text-5xl--line-height))
        }

        .lg\:text-6xl {
            font-size: var(--text-6xl);
            line-height: var(--tw-leading,var(--text-6xl--line-height))
        }

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

        .lg\:text-xl {
            font-size: var(--text-xl);
            line-height: var(--tw-leading,var(--text-xl--line-height))
        }

        .lg\:text-\[2\.5rem\] {
            font-size: 2.5rem
        }

        .lg\:text-\[2\.9rem\] {
            font-size: 2.9rem
        }

        .lg\:text-\[2\.75rem\] {
            font-size: 2.75rem
        }

        .lg\:text-\[3\.25rem\] {
            font-size: 3.25rem
        }
    }

    @media (min-width:80rem) {
        .xl\:aspect-\[3\/2\] {
            aspect-ratio: 3/2
        }

        .xl\:h-\[520px\] {
            height: 520px
        }

        .xl\:grid-cols-4 {
            grid-template-columns: repeat(4,minmax(0,1fr))
        }

        .xl\:gap-24 {
            gap: calc(var(--spacing)*24)
        }

        .xl\:px-12 {
            padding-inline: calc(var(--spacing)*12)
        }

        .xl\:text-4xl {
            font-size: var(--text-4xl);
            line-height: var(--tw-leading,var(--text-4xl--line-height))
        }

        .xl\:text-5xl {
            font-size: var(--text-5xl);
            line-height: var(--tw-leading,var(--text-5xl--line-height))
        }

        .xl\:text-6xl {
            font-size: var(--text-6xl);
            line-height: var(--tw-leading,var(--text-6xl--line-height))
        }

        .xl\:text-\[3\.5rem\] {
            font-size: 3.5rem
        }

        .xl\:text-\[3\.75rem\] {
            font-size: 3.75rem
        }
    }

    @media (prefers-color-scheme:dark) {
        .dark\:border-gray-600 {
            border-color: var(--color-gray-600)
        }

        .dark\:border-gray-700 {
            border-color: var(--color-gray-700)
        }

        .dark\:border-slate-700 {
            border-color: var(--color-slate-700)
        }

        .dark\:border-t-blue-400 {
            border-top-color: var(--color-blue-400)
        }

        .dark\:bg-black\/80 {
            background-color: #000c
        }

        @supports (color:color-mix(in lab,red,red)) {
            .dark\:bg-black\/80 {
                background-color: color-mix(in oklab,var(--color-black)80%,transparent)
            }
        }

        .dark\:bg-blue-400 {
            background-color: var(--color-blue-400)
        }

        .dark\:bg-blue-900\/30 {
            background-color: #1c398e4d
        }

        @supports (color:color-mix(in lab,red,red)) {
            .dark\:bg-blue-900\/30 {
                background-color: color-mix(in oklab,var(--color-blue-900)30%,transparent)
            }
        }

        .dark\:bg-gray-700 {
            background-color: var(--color-gray-700)
        }

        .dark\:bg-gray-700\/50 {
            background-color: #36415380
        }

        @supports (color:color-mix(in lab,red,red)) {
            .dark\:bg-gray-700\/50 {
                background-color: color-mix(in oklab,var(--color-gray-700)50%,transparent)
            }
        }

        .dark\:bg-gray-800 {
            background-color: var(--color-gray-800)
        }

        .dark\:bg-gray-900 {
            background-color: var(--color-gray-900)
        }

        .dark\:bg-gray-950 {
            background-color: var(--color-gray-950)
        }

        .dark\:bg-purple-900\/30 {
            background-color: #59168b4d
        }

        @supports (color:color-mix(in lab,red,red)) {
            .dark\:bg-purple-900\/30 {
                background-color: color-mix(in oklab,var(--color-purple-900)30%,transparent)
            }
        }

        .dark\:bg-slate-900 {
            background-color: var(--color-slate-900)
        }

        .dark\:from-gray-800 {
            --tw-gradient-from: var(--color-gray-800);
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .dark\:to-gray-800\/50 {
            --tw-gradient-to: #1e293980
        }

        @supports (color:color-mix(in lab,red,red)) {
            .dark\:to-gray-800\/50 {
                --tw-gradient-to: color-mix(in oklab,var(--color-gray-800)50%,transparent)
            }
        }

        .dark\:to-gray-800\/50 {
            --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))
        }

        .dark\:text-blue-300 {
            color: var(--color-blue-300)
        }

        .dark\:text-blue-400 {
            color: var(--color-blue-400)
        }

        .dark\:text-gray-100 {
            color: var(--color-gray-100)
        }

        .dark\:text-gray-300 {
            color: var(--color-gray-300)
        }

        .dark\:text-gray-400 {
            color: var(--color-gray-400)
        }

        .dark\:text-purple-400 {
            color: var(--color-purple-400)
        }

        .dark\:text-red-400 {
            color: var(--color-red-400)
        }

        .dark\:brightness-110 {
            --tw-brightness: brightness(110%);
            filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
        }

        .dark\:file\:bg-purple-900\/30::file-selector-button {
            background-color: #59168b4d
        }

        @supports (color:color-mix(in lab,red,red)) {
            .dark\:file\:bg-purple-900\/30::file-selector-button {
                background-color: color-mix(in oklab,var(--color-purple-900)30%,transparent)
            }
        }

        .dark\:file\:text-purple-300::file-selector-button {
            color: var(--color-purple-300)
        }

        @media (hover:hover) {
            .dark\:hover\:border-gray-500:hover {
                border-color: var(--color-gray-500)
            }

            .dark\:hover\:border-purple-500:hover {
                border-color: var(--color-purple-500)
            }

            .dark\:hover\:bg-gray-700:hover {
                background-color: var(--color-gray-700)
            }

            .dark\:hover\:bg-gray-700\/50:hover {
                background-color: #36415380
            }

            @supports (color:color-mix(in lab,red,red)) {
                .dark\:hover\:bg-gray-700\/50:hover {
                    background-color: color-mix(in oklab,var(--color-gray-700)50%,transparent)
                }
            }

            .dark\:hover\:bg-red-900\/20:hover {
                background-color: #82181a33
            }

            @supports (color:color-mix(in lab,red,red)) {
                .dark\:hover\:bg-red-900\/20:hover {
                    background-color: color-mix(in oklab,var(--color-red-900)20%,transparent)
                }
            }

            .dark\:hover\:text-gray-100:hover {
                color: var(--color-gray-100)
            }

            .dark\:hover\:file\:bg-purple-900\/50:hover::file-selector-button {
                background-color: #59168b80
            }

            @supports (color:color-mix(in lab,red,red)) {
                .dark\:hover\:file\:bg-purple-900\/50:hover::file-selector-button {
                    background-color: color-mix(in oklab,var(--color-purple-900)50%,transparent)
                }
            }
        }
    }

    .\[\&_h2\]\:mb-4 h2 {
        margin-bottom: calc(var(--spacing)*4)
    }

    .\[\&_h2\]\:text-2xl h2 {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading,var(--text-2xl--line-height))
    }

    .\[\&_h2\]\:font-semibold h2 {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .\[\&_h2\]\:\[color\:\#1a1a1a\] h2 {
        color: #1a1a1a
    }

    .\[\&_p\]\:my-2 p {
        margin-block: calc(var(--spacing)*2)
    }

    .\[\&_p\]\:leading-relaxed p {
        --tw-leading: var(--leading-relaxed);
        line-height: var(--leading-relaxed)
    }

    .\[\&_p\:first-child\]\:mt-0 p:first-child {
        margin-top: calc(var(--spacing)*0)
    }

    .\[\&_p\:last-child\]\:mb-0 p:last-child {
        margin-bottom: calc(var(--spacing)*0)
    }

    .\[\&_section\]\:mb-8 section {
        margin-bottom: calc(var(--spacing)*8)
    }

    .\[\&_ul\]\:ml-4 ul {
        margin-left: calc(var(--spacing)*4)
    }

    .\[\&_ul\]\:list-inside ul {
        list-style-position: inside
    }

    .\[\&_ul\]\:list-disc ul {
        list-style-type: disc
    }

    :where(.\[\&_ul\]\:space-y-2 ul>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))
    }

    .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
        display: none
    }

    .\[\&\:\:-webkit-scrollbar\]\:w-2::-webkit-scrollbar {
        width: calc(var(--spacing)*2)
    }

    .\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb {
        border-radius: 3.40282e+38px
    }

    .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-gray-300::-webkit-scrollbar-thumb {
        background-color: var(--color-gray-300)
    }

    @media (hover:hover) {
        .hover\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-gray-400:hover::-webkit-scrollbar-thumb {
            background-color: var(--color-gray-400)
        }
    }

    .\[\&\:\:-webkit-scrollbar-track\]\:bg-gray-100\/80::-webkit-scrollbar-track {
        background-color: #f3f4f6cc
    }

    @supports (color:color-mix(in lab,red,red)) {
        .\[\&\:\:-webkit-scrollbar-track\]\:bg-gray-100\/80::-webkit-scrollbar-track {
            background-color: color-mix(in oklab,var(--color-gray-100)80%,transparent)
        }
    }
}

:root {
    --background: #fafafa;
    --foreground: #0f172a;
    --muted: #f4f4f5;
    --border: #e5e7eb;
    --qhrm-purple: #6b46c1;
    --qhrm-purple-light: #8b5cf6;
    --qhrm-purple-dark: #553c9a;
    --qhrm-blue: #3b82f6;
    --qhrm-blue-light: #60a5fa;
    --qhrm-blue-dark: #2563eb;
    --qhrm-primary: #6366f1;
    --qhrm-primary-light: #818cf8;
    --qhrm-primary-dark: #4f46e5;
    --qhrm-text-dark: #374151;
    --qhrm-text-light: #fff;
    --qhrm-bg-white: #fff;
    --qhrm-bg-gray: #f8f9fa;
    --button-primary: #a03cd2;
    --button-primary-hover: #8932b5;
    --qhrm-gold: #d4af37;
    --qhrm-gold-light: #e8c547
}

@keyframes page-loader-logo-breathe {
    0%,to {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .94;
        transform: scale(1.04)
    }
}

@keyframes page-loader-ring-rotate {
    to {
        transform: rotate(1turn)
    }
}

@keyframes page-loader-dot-orbit {
    to {
        transform: rotate(1turn)
    }
}

@keyframes page-loader-shimmer {
    0% {
        background-position: -200% 0
    }

    to {
        background-position: 200% 0
    }
}

@keyframes page-loader-progress {
    0% {
        transform: translate(-100%)
    }

    to {
        transform: translate(400%)
    }
}

@keyframes page-loader-dot-pulse {
    0%,80%,to {
        opacity: .6;
        transform: scale(.7)
    }

    40% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes testimonialDrawerSlide {
    0% {
        transform: translate(100%)
    }

    to {
        transform: translate(0)
    }
}

@keyframes page-loader-fade-in {
    0% {
        opacity: 0;
        transform: scale(.98)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes page-loader-dot-bounce {
    0%,60%,to {
        opacity: .9;
        transform: translateY(0)scale(1)
    }

    30% {
        opacity: 1;
        transform: translateY(-8px)scale(1.15)
    }
}

@media (prefers-color-scheme:dark) {
    :root {
        --background: #0b1220;
        --foreground: #e5e7eb;
        --muted: #111827;
        --border: #1f2937
    }
}

*, :after, :before {
    box-sizing: border-box
}

html {
    max-width: 100vw
}

body, html {
    overflow-x: hidden
}

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0
}

body {
    max-width: 100vw;
    color: var(--foreground);
    font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji
}

#__next {
    width: 100%;
    height: 100%
}

.cpcm-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem
}

.boxed-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem
}

@media (max-width:639px) {
    .boxed-container {
        max-width: 100%;
        padding: 0 1rem
    }
}

@media (min-width:640px) and (max-width:767px) {
    .boxed-container {
        max-width: 100%;
        padding: 0 1.5rem
    }
}

@media (min-width:768px) and (max-width:1023px) {
    .boxed-container {
        max-width: 100%;
        padding: 0 2rem
    }
}

@media (min-width:1024px) and (max-width:1279px) {
    .boxed-container {
        max-width: 1200px;
        padding: 0 2.5rem
    }
}

@media (min-width:1280px) and (max-width:1535px) {
    .boxed-container {
        max-width: 1400px;
        padding: 0 3rem
    }
}

@media (min-width:1536px) {
    .boxed-container {
        max-width: 1600px;
        padding: 0 4rem
    }
}

.qhrm-gradient-primary {
    background: linear-gradient(135deg,var(--qhrm-purple)0,var(--qhrm-blue)100%)
}

.qhrm-gradient-purple {
    background: linear-gradient(135deg,var(--qhrm-purple)0,var(--qhrm-purple-dark)100%)
}

.qhrm-gradient-hero {
    background: linear-gradient(135deg,var(--qhrm-purple)0,var(--qhrm-blue)100%)
}

.bg-slate-950\/90 {
    background-color: #020617e6
}

@media (min-width:640px) {
    .sm\:justify-center {
        justify-content: center
    }

    .sm\:items-center {
        align-items: center
    }
}

.from-slate-900.via-slate-800.to-indigo-900 {
    background-image: linear-gradient(to bottom right,#0f172a,#1f2937,#312e81)
}

.full-width, .section-bg-full-width {
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    position: relative;
    left: 50%;
    right: 50%
}

.full-width {
    max-width: 100vw
}

.full-width-bg {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw)
}

@media (max-width:768px) {
    .cpcm-container {
        padding: 0 1rem
    }
}

.admin-toolbar {
    gap: 8px;
    display: flex
}

.admin-card {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 2px #0000000a
}

.admin-card-header {
    background: linear-gradient(#fafbff,#f6f8fb);
    border-bottom: 1px solid #eef1f5;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 22px;
    display: flex
}

.admin-card-body {
    padding: 20px 22px
}

.admin-input {
    border: 1px solid var(--border);
    height: 42px
}

@supports (color:color-mix(in lab,red,red)) {
    .admin-input {
        border: 1px solid color-mix(in srgb,var(--border),transparent 0%)
    }
}

.admin-input {
    -webkit-backdrop-filter: saturate(180%)blur(8px);
    backdrop-filter: saturate(180%)blur(8px);
    background: linear-gradient(#fff9,#fff9),#fff;
    border-radius: 12px;
    padding: 0 14px
}

    .admin-input:focus {
        border-color: #6366f159;
        outline: none;
        box-shadow: 0 0 0 4px #6366f12e,0 1px 2px #0000000f
    }

.admin-button {
    cursor: pointer;
    color: #111827;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    transition: all .2s;
    display: inline-flex
}

    .admin-button:hover {
        background: #f9fafb
    }

    .admin-button.primary {
        background: var(--button-primary);
        color: #fff;
        border-color: var(--button-primary)
    }

        .admin-button.primary:hover {
            background: var(--button-primary-hover);
            border-color: var(--button-primary-hover)
        }

.btn-primary {
    background-color: var(--button-primary);
    color: #fff
}

    .btn-primary:hover:not(:disabled) {
        background-color: var(--button-primary-hover)
    }

.admin-button.border {
    background: #fff;
    border: 1px solid #e5e7eb
}

    .admin-button.border:hover {
        background: #f9fafb;
        border-color: #d1d5db
    }

.admin-badge {
    color: #111827;
    background: #f3f4f6;
    border-radius: 9999px;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    font-size: 12px;
    display: inline-flex
}

.admin-form-section {
    margin-bottom: 24px
}

.admin-form-section-header {
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid #e5e7eb;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    display: flex
}

    .admin-form-section-header svg {
        width: 16px;
        height: 16px;
        color: var(--button-primary)
    }

.admin-form-group {
    margin-bottom: 16px
}

.admin-form-label {
    color: #374151;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    display: block
}

.admin-form-label-helper {
    color: #6b7280;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4
}

.admin-form-input {
    color: #111827;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    outline: none;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    font-size: 14px;
    transition: all .2s
}

    .admin-form-input:focus {
        border-color: var(--button-primary);
        background: #fff;
        box-shadow: 0 0 0 3px #5d5de21a
    }

    .admin-form-input:disabled, .admin-form-input[readonly] {
        color: #6b7280;
        cursor: not-allowed;
        background: #f3f4f6;
        border-color: #e5e7eb
    }

.admin-form-select {
    color: #111827;
    cursor: pointer;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    outline: none;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    font-size: 14px;
    transition: all .2s
}

    .admin-form-select:focus {
        border-color: var(--button-primary);
        box-shadow: 0 0 0 3px #5d5de21a
    }

    .admin-form-select:disabled {
        color: #6b7280;
        cursor: not-allowed;
        background: #f3f4f6
    }

.admin-form-textarea {
    color: #111827;
    resize: vertical;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    outline: none;
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    transition: all .2s
}

    .admin-form-textarea:focus {
        border-color: var(--button-primary);
        box-shadow: 0 0 0 3px #5d5de21a
    }

    .admin-form-textarea::placeholder {
        color: #9ca3af
    }

.admin-form-checkbox-wrapper {
    color: #6b7280;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    display: flex
}

    .admin-form-checkbox-wrapper input[type=checkbox] {
        cursor: pointer;
        width: 16px;
        height: 16px;
        accent-color: var(--button-primary)
    }

.admin-form-upload-area {
    cursor: pointer;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 100px;
    padding: 16px;
    transition: all .2s;
    display: flex
}

    .admin-form-upload-area:hover {
        border-color: var(--button-primary);
        background: #f3f4f6
    }

    .admin-form-upload-area svg {
        width: 24px;
        height: 24px;
        color: var(--button-primary)
    }

    .admin-form-upload-area span {
        color: #6b7280;
        font-size: 13px;
        font-weight: 500
    }

.admin-form-image-preview {
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    align-items: center;
    gap: 12px;
    padding: 12px;
    display: flex
}

    .admin-form-image-preview img {
        object-fit: contain;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        width: auto;
        height: 48px
    }

.admin-form-image-actions {
    align-items: center;
    gap: 8px;
    display: flex
}

.admin-form-image-button {
    color: #374151;
    cursor: pointer;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 6px;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    transition: all .2s
}

    .admin-form-image-button:hover {
        background: #f3f4f6;
        border-color: #d1d5db
    }

.admin-form-toggle {
    cursor: pointer;
    border: none;
    border-radius: 9999px;
    outline: none;
    align-items: center;
    width: 44px;
    height: 24px;
    transition: background-color .2s;
    display: inline-flex;
    position: relative
}

    .admin-form-toggle[aria-checked=true] {
        background: #10b981
    }

    .admin-form-toggle[aria-checked=false] {
        background: #d1d5db
    }

    .admin-form-toggle:focus {
        box-shadow: 0 0 0 3px #10b98133
    }

.admin-form-toggle-thumb {
    background: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    transition: transform .2s;
    display: inline-block;
    box-shadow: 0 2px 4px #0003
}

.admin-form-toggle[aria-checked=true] .admin-form-toggle-thumb {
    transform: translate(20px)
}

.admin-form-toggle[aria-checked=false] .admin-form-toggle-thumb {
    transform: translate(2px)
}

.admin-form-info-box {
    color: #92400e;
    background: linear-gradient(135deg,#fef9c3,#fef3c7);
    border: 1.5px solid #fcd34d;
    border-radius: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5
}

.admin-form-footer {
    background: #fafafa;
    border-top: 1.5px solid #e5e7eb;
    justify-content: start;
    gap: 12px;
    padding: 16px 20px;
    display: flex
}

.admin-form-footer-button {
    cursor: pointer;
    border: 1.5px solid #0000;
    border-radius: 8px;
    height: 38px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all .2s
}

    .admin-form-footer-button.cancel {
        color: #374151;
        background: #fff;
        border-color: #d1d5db
    }

        .admin-form-footer-button.cancel:hover {
            background: #f9fafb;
            border-color: #9ca3af
        }

    .admin-form-footer-button.save {
        background: var(--button-primary);
        color: #fff;
        border-color: var(--button-primary)
    }

        .admin-form-footer-button.save:hover:not(:disabled) {
            background: var(--button-primary-hover);
            border-color: var(--button-primary-hover)
        }

    .admin-form-footer-button:disabled {
        opacity: .6;
        cursor: not-allowed
    }

.admin-drawer-header {
    background: #fff;
    border-bottom: 1.5px solid #e5e7eb;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    padding: 0 20px;
    display: flex
}

    .admin-drawer-header h2 {
        color: #111827;
        margin: 0;
        font-size: 18px;
        font-weight: 600
    }

.admin-drawer-close {
    color: #6b7280;
    cursor: pointer;
    background: 0 0;
    border: none;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    transition: all .2s;
    display: inline-flex
}

    .admin-drawer-close:hover {
        color: #374151;
        background: #f3f4f6
    }

.admin-drawer-body {
    background: #fff;
    flex: 1;
    min-height: 0;
    padding: 24px;
    overflow-y: auto
}

.admin-drawer-overlay {
    z-index: 50;
    position: fixed;
    inset: 0
}

.admin-drawer-backdrop {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: #0006;
    position: absolute;
    inset: 0
}

@keyframes admin-drawer-in {
    0% {
        opacity: 0;
        transform: translate(20px)
    }

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

.admin-drawer-panel {
    will-change: transform,opacity;
    background: #fff;
    border-left: 1px solid #e5e7eb;
    flex-direction: column;
    width: 100%;
    height: 100%;
    animation: admin-drawer-in .24s cubic-bezier(.22,1,.36,1);
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: 0 24px 64px #0000002e,0 8px 20px #0000001f
}

.admin-drawer-header {
    top: 0
}

.admin-drawer-footer, .admin-drawer-header {
    z-index: 2;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #ffffffeb;
    position: sticky
}

.admin-drawer-footer {
    border-top: 1.5px solid #e5e7eb;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 20px;
    display: flex;
    bottom: 0
}

aside nav.overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: #6366f159 transparent
}

    aside nav.overflow-y-auto::-webkit-scrollbar {
        width: 6px
    }

    aside nav.overflow-y-auto::-webkit-scrollbar-track {
        background: 0 0
    }

    aside nav.overflow-y-auto::-webkit-scrollbar-thumb {
        background: #6366f159;
        border-radius: 3px
    }

        aside nav.overflow-y-auto::-webkit-scrollbar-thumb:hover {
            background: #6366f180
        }

.events-card-body-scroll {
    scrollbar-width: thin;
    scrollbar-color: #a855f766 transparent
}

    .events-card-body-scroll::-webkit-scrollbar {
        width: 8px
    }

    .events-card-body-scroll::-webkit-scrollbar-track {
        background: #f3e8ff4d;
        border-radius: 4px
    }

    .events-card-body-scroll::-webkit-scrollbar-thumb {
        background: #a855f766;
        border-radius: 4px
    }

        .events-card-body-scroll::-webkit-scrollbar-thumb:hover {
            background: #a855f799
        }

.admin-form-grid {
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    display: grid
}

.admin-form-grid-full {
    grid-column: 1/-1
}

button[class*=bg-gray-900][class*=text-white] {
    background-color: #a03cd2 !important;
    border-color: #a03cd2 !important
}

    button[class*=bg-gray-900][class*=text-white]:hover:not(:disabled) {
        background-color: #8932b5 !important;
        border-color: #8932b5 !important
    }

button[class*=bg-black][class*=text-white]:not([class*=bg-black\/]) {
    background-color: #a03cd2 !important;
    border-color: #a03cd2 !important
}

button[class*=bg-black][class*=text-white]:hover:not(:disabled):not([class*=bg-black\/]) {
    background-color: #8932b5 !important;
    border-color: #8932b5 !important
}

.cursor-pointer, [role=button], a, button, input[type=button], input[type=submit], label[for] {
    cursor: pointer
}

    [role=button][aria-disabled=true], a:disabled, button:disabled, input[type=button]:disabled, input[type=submit]:disabled {
        cursor: not-allowed
    }

@keyframes scroll {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(calc(-1680px - 16.5rem))
    }
}

.animate-scroll {
    will-change: transform;
    width: max-content;
    animation: scroll 25s linear infinite;
    display: flex
}

    .animate-scroll:hover {
        animation-play-state: paused
    }

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }

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

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0
    }

    to {
        background-position: 200% 0
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translate(-50px)
    }

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

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translate(50px)
    }

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

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(.95)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.animate-fade-in-up {
    animation: fadeInUp .6s ease-out forwards
}

.animate-fade-in {
    animation: fadeIn .8s ease-out forwards
}

.animate-scale-in {
    animation: scaleIn .5s ease-out forwards
}

.animate-slide-in-left {
    animation: slideInLeft .8s ease-out forwards
}

.animate-slide-in-right {
    animation: slideInRight .8s ease-out forwards
}

.animate-fade-in-scale {
    animation: fadeInScale .7s ease-out forwards
}

.scroll-animate {
    opacity: 0;
    transition: opacity .8s ease-out,transform .8s ease-out
}

    .scroll-animate.animate {
        opacity: 1
    }

.scroll-animate-fade-up {
    opacity: 0;
    transition: opacity .8s ease-out,transform .8s ease-out;
    transform: translateY(40px)
}

    .scroll-animate-fade-up.animate {
        opacity: 1;
        transform: translateY(0)
    }

.scroll-animate-slide-left {
    opacity: 0;
    transition: opacity .8s ease-out,transform .8s ease-out;
    transform: translate(-40px)
}

    .scroll-animate-slide-left.animate {
        opacity: 1;
        transform: translate(0)
    }

.scroll-animate-slide-right {
    opacity: 0;
    transition: opacity .8s ease-out,transform .8s ease-out;
    transform: translate(40px)
}

    .scroll-animate-slide-right.animate {
        opacity: 1;
        transform: translate(0)
    }

.scroll-animate-scale {
    opacity: 0;
    transition: opacity .8s ease-out,transform .8s ease-out;
    transform: scale(.9)
}

    .scroll-animate-scale.animate {
        opacity: 1;
        transform: scale(1)
    }

html {
    scroll-behavior: smooth
}

.hover-lift {
    transition: transform .3s,box-shadow .3s
}

    .hover-lift:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px #0000001a
    }

.prose {
    --tw-prose-body: #374151;
    --tw-prose-headings: #111827;
    --tw-prose-lead: #4b5563;
    --tw-prose-links: #6366f1;
    --tw-prose-bold: #111827;
    --tw-prose-counters: #6b7280;
    --tw-prose-bullets: #d1d5db;
    --tw-prose-hr: #e5e7eb;
    --tw-prose-quotes: #111827;
    --tw-prose-quote-borders: #e5e7eb;
    --tw-prose-captions: #6b7280;
    --tw-prose-code: #6366f1;
    --tw-prose-pre-code: #e5e7eb;
    --tw-prose-pre-bg: #1f2937;
    --tw-prose-th-borders: #d1d5db;
    --tw-prose-td-borders: #e5e7eb
}

    .prose h1, .prose h2, .prose h3, .prose h4 {
        color: var(--tw-prose-headings);
        margin-top: 2em;
        margin-bottom: 1em;
        font-weight: 700;
        line-height: 1.2
    }

    .prose h1 {
        border-bottom: 2px solid #e5e7eb;
        padding-bottom: .5em;
        font-size: 2.25em
    }

    .prose h2 {
        margin-top: 2.5em;
        font-size: 1.875em
    }

    .prose h3 {
        font-size: 1.5em
    }

    .prose h4 {
        font-size: 1.25em
    }

    .prose p {
        margin-top: 1.25em;
        margin-bottom: 1.25em;
        line-height: 1.75
    }

    .prose a {
        color: var(--tw-prose-links);
        font-weight: 500;
        text-decoration: none;
        transition: color .2s
    }

        .prose a:hover {
            color: #4f46e5;
            text-decoration: underline
        }

    .prose strong {
        color: var(--tw-prose-bold);
        font-weight: 600
    }

    .prose ol, .prose ul {
        margin-top: 1.25em;
        margin-bottom: 1.25em;
        padding-left: 1.625em
    }

    .prose li {
        margin-top: .5em;
        margin-bottom: .5em
    }

    .prose blockquote {
        color: var(--tw-prose-quotes);
        quotes: "“""”""‘""’";
        background: linear-gradient(90deg,#eef2ff,#0000);
        border-left-width: .25rem;
        border-left-color: #6366f1;
        border-radius: .5rem;
        margin-top: 1.6em;
        margin-bottom: 1.6em;
        padding: 1.5em;
        font-style: italic;
        font-weight: 500
    }

    .prose code {
        color: var(--tw-prose-code);
        background-color: #eef2ff;
        border-radius: .375rem;
        padding: .25em .5em;
        font-size: .875em;
        font-weight: 600
    }

    .prose pre {
        color: var(--tw-prose-pre-code);
        background-color: var(--tw-prose-pre-bg);
        border-radius: .75rem;
        margin-top: 1.71429em;
        margin-bottom: 1.71429em;
        padding: 1.25em;
        font-size: .875em;
        font-weight: 400;
        line-height: 1.71429;
        overflow-x: auto;
        box-shadow: 0 4px 6px -1px #0000001a
    }

        .prose pre code {
            font-weight: inherit;
            color: inherit;
            font-size: inherit;
            font-family: inherit;
            line-height: inherit;
            background-color: #0000;
            border-width: 0;
            border-radius: 0;
            padding: 0
        }

    .prose img {
        border-radius: .75rem;
        margin-top: 2em;
        margin-bottom: 2em;
        box-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d
    }

    .prose hr {
        border-color: var(--tw-prose-hr);
        border-top-width: 1px;
        margin-top: 3em;
        margin-bottom: 3em
    }

    .prose table {
        table-layout: auto;
        text-align: left;
        border-collapse: collapse;
        width: 100%;
        margin-top: 2em;
        margin-bottom: 2em;
        font-size: .875em;
        line-height: 1.71429
    }

    .prose thead {
        border-bottom-width: 1px;
        border-bottom-color: var(--tw-prose-th-borders)
    }

        .prose thead th {
            color: var(--tw-prose-headings);
            vertical-align: bottom;
            padding-bottom: .571429em;
            padding-left: .571429em;
            padding-right: .571429em;
            font-weight: 600
        }

    .prose tbody tr {
        border-bottom-width: 1px;
        border-bottom-color: var(--tw-prose-td-borders)
    }

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

    .prose tbody td {
        vertical-align: baseline;
        padding: .571429em
    }

.p-0 {
    padding: 0 !important
}

.demo-feature-card {
    transition: all .3s
}

.demo-benefit-item, .demo-feature-card {
    border-radius: .75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px #0000001a
}

.demo-benefit-item {
    gap: 1rem
}

    .demo-benefit-item:hover {
        transform: translate(4px);
        box-shadow: 0 4px 6px #0000001a
    }

.demo-check-icon {
    width: 1.5rem;
    height: 1.5rem
}

.demo-use-case-card {
    background: #fff;
    border-radius: .75rem;
    padding: 1.5rem;
    transition: all .3s;
    box-shadow: 0 1px 3px #0000001a
}

    .demo-use-case-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 6px #0000001a
    }

.demo-capability-card {
    background: #fff;
    border-top: 3px solid #6366f1;
    border-radius: .75rem;
    padding: 1.5rem;
    transition: all .3s;
    box-shadow: 0 1px 3px #0000001a
}

    .demo-capability-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 6px #0000001a
    }

.demo-related-link {
    border-radius: .5rem;
    padding: .75rem 1.5rem;
    font-weight: 500;
    transition: all .3s;
    box-shadow: 0 1px 3px #0000001a
}

    .demo-related-link:hover {
        background: #6366f1;
        transform: translateY(-2px);
        box-shadow: 0 4px 6px #6366f14d
    }

.demo-faq-item {
    border: 1px solid #0000;
    border-radius: .75rem;
    height: 100%;
    padding: 1.5rem;
    transition: all .3s;
    box-shadow: 0 1px 3px #0000001a
}

    .demo-faq-item:hover {
        border-left: 4px solid #6366f1;
        padding-left: calc(1.5rem - 4px);
        transform: translateY(-2px);
        box-shadow: 0 8px 16px #6366f126
    }

.about-hero-section {
    background: linear-gradient(135deg,#6366f1,#8b5cf6 50%,#9333ea);
    position: relative;
    overflow: hidden
}

.demo-hero-section:before {
    content: "";
    pointer-events: none;
    background: radial-gradient(circle at 20% 30%,#ffffff26 0,#0000 50%),radial-gradient(circle at 80% 70%,#ffffff1a 0,#0000 50%),radial-gradient(circle,#ffffff0d 0,#0000 70%);
    animation: pulse 4s ease-in-out infinite;
    position: absolute;
    inset: 0
}

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

.demo-hero-gradient {
    pointer-events: none;
    background: radial-gradient(circle at 20%,#ffffff1a 0,#0000 50%),radial-gradient(circle at 80% 80%,#ffffff1a 0,#0000 50%);
    position: absolute;
    inset: 0
}

.demo-hero-badge {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #6366f1;
    letter-spacing: .5px;
    background: #fffc;
    border: 1px solid #6366f133;
    padding: .625rem 1.5rem;
    font-size: .9375rem;
    transition: all .3s;
    animation: fadeInUp .6s ease-out;
    box-shadow: 0 4px 16px #0000001a
}

    .demo-hero-badge:hover {
        background: #fffffff2;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px #00000026
    }

.demo-section-badge {
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    border-radius: 9999px;
    padding: .5rem 1.25rem;
    display: inline-block
}

    .demo-section-badge span {
        color: #fff;
        letter-spacing: .5px;
        text-transform: uppercase;
        font-size: .875rem;
        font-weight: 600
    }

.demo-screenshot-card {
    background: #fff;
    border: 1px solid #0000000d;
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 4px 6px #00000012,0 1px 3px #0000000f
}

    .demo-screenshot-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 25px #0000001a,0 10px 10px #0000000a
    }

.demo-screenshot-wrapper {
    background: linear-gradient(135deg,#f5f7fa,#e8ecf1);
    border-radius: .75rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 4px #0000000f
}

.demo-screenshot-image {
    border-radius: .5rem;
    width: auto;
    max-height: 600px;
    margin: 0 auto;
    transition: transform .4s;
    display: block
}

.demo-screenshot-card:hover .demo-screenshot-image {
    transform: scale(1.02)
}

.demo-info-box {
    max-width: 4xl;
    background: linear-gradient(135deg,#eff6ff,#dbeafe);
    border: 1px solid #bfdbfe;
    border-radius: 1rem;
    margin: 0 auto;
    padding: 1.5rem;
    box-shadow: 0 4px 6px #3b82f61a
}

.demo-code {
    color: #1e40af;
    background: #93c5fd;
    border-radius: .375rem;
    padding: .25rem .5rem;
    font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
    font-size: .875rem;
    font-weight: 600
}

.demo-overview-content {
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 1px 3px #0000001a
}

.demo-feature-card {
    border-left: 4px solid;
    height: 100%;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 2px 4px #0000000d,0 1px 2px #0000001a
}

    .demo-feature-card:before {
        opacity: 0;
        background: linear-gradient(90deg,#0000,currentColor,#0000);
        height: 4px;
        transition: opacity .3s;
        right: 0
    }

    .demo-feature-card:hover:before {
        opacity: .5
    }

.demo-feature-card-purple {
    border-left-color: #6366f1
}

    .demo-feature-card-purple:hover {
        background: linear-gradient(135deg,#fff,#eef2ff);
        border-left-color: #4f46e5
    }

.demo-feature-card-gold {
    border-left-color: #d4af37
}

    .demo-feature-card-gold:hover {
        background: linear-gradient(135deg,#fff,#fffbeb);
        border-left-color: #b8941f
    }

.demo-benefit-item {
    background: linear-gradient(135deg,#fff,#f9fafb);
    border: 1px solid #0000000d;
    padding: 2rem;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 2px 4px #0000000d
}

    .demo-benefit-item:hover {
        border-color: #d4af3733;
        box-shadow: 0 10px 20px #d4af3726
    }

.demo-check-icon {
    color: #d4af37;
    filter: drop-shadow(0 2px 4px #d4af3733);
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: .125rem
}

.demo-use-case-card {
    background: linear-gradient(135deg,#fff,#f9fafb);
    border: 1px solid #0000000d;
    border-radius: 1rem;
    height: 100%;
    padding: 2rem;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px #0000000d
}

    .demo-use-case-card:after {
        content: "";
        transform-origin: 0;
        background: linear-gradient(90deg,#6366f1,#8b5cf6,#6366f1);
        width: 100%;
        height: 3px;
        transition: transform .3s;
        position: absolute;
        top: 0;
        left: 0;
        transform: scaleX(0)
    }

    .demo-use-case-card:hover:after {
        transform: scaleX(1)
    }

    .demo-use-case-card:hover {
        background: #fff;
        transform: translateY(-6px);
        box-shadow: 0 12px 24px #6366f126
    }

.demo-capability-card {
    background: linear-gradient(135deg,#fff,#f9fafb);
    border-top: 4px solid #6366f1;
    border-radius: 1rem;
    height: 100%;
    padding: 2rem;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    position: relative;
    box-shadow: 0 2px 4px #0000000d
}

    .demo-capability-card:before {
        content: "";
        opacity: 0;
        background: linear-gradient(135deg,#6366f10d,#0000);
        border-radius: 1rem;
        transition: opacity .3s;
        position: absolute;
        inset: 0
    }

    .demo-capability-card:hover:before {
        opacity: 1
    }

    .demo-capability-card:hover {
        border-top-color: #4f46e5;
        transform: translateY(-6px);
        box-shadow: 0 12px 24px #6366f133
    }

.demo-related-link {
    color: #6366f1;
    border-radius: .75rem;
    align-items: center;
    padding: 1rem 2rem;
    font-weight: 600;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    display: inline-flex;
    box-shadow: 0 2px 4px #0000001a
}

    .demo-related-link:hover {
        color: #fff;
        background: linear-gradient(135deg,#6366f1,#8b5cf6);
        transform: translateY(-3px)scale(1.02);
        box-shadow: 0 8px 16px #6366f166
    }

.ProseMirror {
    outline: none;
    min-height: 200px;
    padding: 1.5rem;
    line-height: 1.75
}

    .ProseMirror:focus {
        outline: none
    }

    .ProseMirror p.is-editor-empty:first-child:before {
        color: #9ca3af;
        content: attr(data-placeholder);
        float: left;
        pointer-events: none;
        height: 0;
        font-style: italic
    }

    .ProseMirror img {
        max-width: 100%;
        height: auto;
        margin: 1rem 0;
        display: block
    }

        .ProseMirror img.ProseMirror-selectednode {
            outline-offset: 2px;
            border-radius: .5rem;
            outline: 3px solid #6366f1;
            transition: outline .2s
        }

        .ProseMirror img:hover {
            opacity: .9;
            transition: opacity .2s
        }

    .ProseMirror a {
        color: #6366f1;
        cursor: pointer;
        text-decoration: underline
    }

        .ProseMirror a:hover {
            color: #4f46e5
        }

    .ProseMirror code {
        color: #6366f1;
        background-color: #eef2ff;
        border-radius: .375rem;
        padding: .25em .5em;
        font-size: .875em;
        font-weight: 600
    }

    .ProseMirror pre {
        color: #e5e7eb;
        background: #1f2937;
        border: 1px solid #ffffff1a;
        border-radius: .75rem;
        margin: 1.25rem 0;
        padding: 1.25rem;
        overflow-x: auto;
        box-shadow: 0 4px 6px #0000001a
    }

        .ProseMirror pre code {
            color: inherit;
            background: 0 0;
            padding: 0;
            font-size: .875em;
            font-weight: 400
        }

    .ProseMirror blockquote {
        background: linear-gradient(90deg,#eef2ff,#0000);
        border-left: 4px solid #6366f1;
        border-radius: .75rem;
        margin: 1.5em 0;
        padding: 1.25em 1.5em;
        font-style: italic;
        box-shadow: 0 1px 3px #0000000d
    }

    .ProseMirror ol, .ProseMirror ul {
        margin: 1em 0;
        padding-left: 1.5em
    }

    .ProseMirror ul {
        list-style-type: disc
    }

    .ProseMirror ol {
        list-style-type: decimal
    }

    .ProseMirror li {
        margin: .5em 0
    }

    .ProseMirror h1, .ProseMirror h2, .ProseMirror h3, .ProseMirror h4, .ProseMirror h5, .ProseMirror h6 {
        margin-top: 1.5em;
        margin-bottom: .75em;
        font-weight: 700;
        line-height: 1.2
    }

    .ProseMirror h1 {
        border-bottom: 2px solid #e5e7eb;
        padding-bottom: .5em;
        font-size: 2.25em
    }

    .ProseMirror h2 {
        font-size: 1.875em
    }

    .ProseMirror h3 {
        font-size: 1.5em
    }

    .ProseMirror h4 {
        font-size: 1.25em
    }

    .ProseMirror hr {
        border: none;
        border-top: 2px solid #e5e7eb;
        margin: 2em 0
    }

@media (prefers-color-scheme:dark) {
    .ProseMirror {
        color: #e5e7eb
    }

        .ProseMirror p.is-editor-empty:first-child:before {
            color: #6b7280
        }

        .ProseMirror code {
            color: #818cf8;
            background-color: #1f2937
        }

        .ProseMirror blockquote {
            background: linear-gradient(90deg,#6366f11a,#0000);
            border-left-color: #818cf8
        }

        .ProseMirror h1 {
            border-bottom-color: #374151
        }

        .ProseMirror hr {
            border-top-color: #374151
        }
}

.hljs {
    color: #e5e7eb;
    background: #1f2937;
    padding: 1em;
    display: block;
    overflow-x: auto
}

.hljs-comment, .hljs-quote {
    color: #6b7280;
    font-style: italic
}

.hljs-keyword, .hljs-selector-tag, .hljs-subst {
    color: #f472b6;
    font-weight: 700
}

.hljs-literal, .hljs-number, .hljs-tag .hljs-attr, .hljs-template-variable, .hljs-variable {
    color: #60a5fa
}

.hljs-doctag, .hljs-string {
    color: #34d399
}

.hljs-section, .hljs-selector-id, .hljs-title {
    color: #fbbf24;
    font-weight: 700
}

.hljs-class .hljs-title, .hljs-type {
    color: #a78bfa;
    font-weight: 700
}

.hljs-attribute, .hljs-name, .hljs-tag {
    color: #60a5fa;
    font-weight: 400
}

.hljs-link, .hljs-regexp {
    color: #34d399
}

.hljs-bullet, .hljs-symbol {
    color: #f472b6
}

.hljs-built_in, .hljs-builtin-name {
    color: #818cf8
}

.hljs-meta {
    color: #9ca3af
}

.hljs-deletion {
    background: #991b1b
}

.hljs-addition {
    background: #065f46
}

.hljs-emphasis {
    font-style: italic
}

.hljs-strong {
    font-weight: 700
}

.demo-page-container {
    background: linear-gradient(#fafafa,#fff);
    width: 100%;
    min-height: 100vh
}

.demo-section {
    padding: 5rem 0;
    position: relative
}

.demo-section-alt {
    background: linear-gradient(#fff,#f9fafb);
    position: relative
}

    .demo-section-alt:before {
        content: "";
        background: linear-gradient(90deg,#0000,#6366f133,#0000);
        height: 1px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0
    }

.demo-section-tinted {
    background: linear-gradient(90deg,#eef2ff,#faf5ff)
}

.demo-section-dark {
    background: linear-gradient(to bottom right,#4f46e5,#9333ea)
}

.demo-section-heading {
    color: #1a1a2e
}

.demo-section-header {
    margin-bottom: 4rem;
    position: relative
}

.demo-hero-title {
    color: #6366f1;
    text-shadow: 0 2px 20px #ffffff80;
    letter-spacing: -.03em;
    margin: 1.5rem 0;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    animation: fadeInUp .8s ease-out
}

.demo-section-title {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.2;
    display: inline-block;
    position: relative
}

.demo-card-title, .demo-feature-title, .demo-value-title {
    letter-spacing: -.01em;
    margin-bottom: .875rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3
}

.demo-feature-title, .demo-value-title {
    font-size: 1.375rem
}

.demo-related-link h3 {
    color: #6366f1;
    letter-spacing: -.01em;
    margin-bottom: .625rem;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    transition: color .3s
}

.demo-hero-content {
    text-align: left;
    z-index: 1;
    padding: 6rem 0 5rem;
    position: relative
}

.demo-hero-subtitle {
    color: #475569;
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.7;
    animation: fadeInUp .8s ease-out .2s both
}

.demo-overview-content {
    border: 1px solid #6366f11a;
    border-radius: 1.25rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px #00000014,0 1px 3px #0000000d
}

.demo-text-large {
    color: #374151;
    margin-bottom: 1.75rem;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.85
}

    .demo-text-large:last-child {
        margin-bottom: 0
    }

    .demo-text-large:first-child:first-letter {
        color: #6366f1;
        float: left;
        margin: .1em .1em 0 0;
        padding-right: .1em;
        font-size: 3rem;
        font-weight: 700;
        line-height: 1
    }

.demo-mission-vision-grid {
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 2rem;
    margin-top: 2rem;
    display: grid
}

.demo-mission-card, .demo-vision-card {
    background: #fff;
    border: 1px solid #6366f11a;
    border-radius: 1.25rem;
    padding: 3rem;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px #00000014,0 2px 4px #0000000d
}

    .demo-mission-card:before, .demo-vision-card:before {
        content: "";
        transform-origin: 0;
        background: linear-gradient(90deg,#6366f1,#8b5cf6);
        height: 5px;
        transition: transform .4s;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        transform: scaleX(0)
    }

    .demo-mission-card:hover:before, .demo-vision-card:hover:before {
        transform: scaleX(1)
    }

    .demo-vision-card:before {
        background: linear-gradient(90deg,#9333ea,#a855f7)
    }

    .demo-mission-card:hover, .demo-vision-card:hover {
        border-color: #6366f14d;
        transform: translateY(-6px);
        box-shadow: 0 20px 40px #0000001f,0 8px 16px #6366f126
    }

.demo-icon-wrapper {
    border-radius: 1.25rem;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 1.5rem;
    transition: all .3s;
    display: flex;
    box-shadow: 0 4px 16px #6366f133
}

.demo-mission-card:hover .demo-icon-wrapper, .demo-vision-card:hover .demo-icon-wrapper {
    transform: scale(1.1)rotate(5deg);
    box-shadow: 0 8px 24px #6366f14d
}

.demo-icon-primary {
    color: #6366f1;
    background: linear-gradient(135deg,#eef2ff,#e0e7ff)
}

.demo-icon-purple {
    color: #9333ea;
    background: linear-gradient(135deg,#faf5ff,#f3e8ff)
}

.demo-icon {
    width: 32px;
    height: 32px
}

.demo-card-title {
    letter-spacing: -.02em;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3
}

.demo-text-primary {
    color: #6366f1
}

.demo-text-purple {
    color: #9333ea
}

.demo-card-text {
    color: #4b5563;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.75
}

.demo-values-grid {
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    display: grid
}

.demo-value-card {
    text-align: center;
    background: #fff;
    border: 1px solid #0000000d;
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px #0000000f,0 2px 4px #0000000a
}

    .demo-value-card:after {
        content: "";
        opacity: 0;
        background: linear-gradient(135deg,#6366f108,#0000);
        transition: opacity .4s;
        position: absolute;
        inset: 0
    }

    .demo-value-card:hover:after {
        opacity: 1
    }

    .demo-value-card:hover {
        border-color: #6366f133;
        transform: translateY(-6px)scale(1.02);
        box-shadow: 0 16px 32px #0000001f,0 8px 16px #00000014
    }

.demo-value-icon {
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    transition: all .3s;
    display: flex;
    box-shadow: 0 4px 12px #0000001a
}

.demo-value-card:hover .demo-value-icon {
    transform: scale(1.1)rotate(5deg);
    box-shadow: 0 8px 20px #00000026
}

.demo-icon-green {
    color: #16a34a;
    background: linear-gradient(135deg,#f0fdf4,#dcfce7)
}

.demo-icon-blue {
    color: #2563eb;
    background: linear-gradient(135deg,#eff6ff,#dbeafe)
}

.demo-icon-yellow {
    color: #ca8a04;
    background: linear-gradient(135deg,#fefce8,#fef9c3)
}

.demo-icon-orange {
    color: #ea580c;
    background: linear-gradient(135deg,#fff7ed,#ffedd5)
}

.demo-icon-pink {
    color: #db2777;
    background: linear-gradient(135deg,#fdf2f8,#fce7f3)
}

.demo-text-green {
    color: #16a34a
}

.demo-text-blue {
    color: #2563eb
}

.demo-text-yellow {
    color: #ca8a04
}

.demo-text-orange {
    color: #ea580c
}

.demo-text-pink {
    color: #db2777
}

.demo-value-text {
    color: #6b7280;
    font-size: .9375rem;
    line-height: 1.6
}

.demo-features-grid {
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    display: grid
}

.demo-feature-card {
    border: 1px solid #6366f11a;
    border-radius: 1.25rem;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 2rem;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    display: flex;
    position: relative;
    box-shadow: 0 4px 12px #0000000f,0 2px 4px #0000000a
}

    .demo-feature-card:before {
        content: "";
        transform-origin: top;
        background: linear-gradient(#6366f1,#8b5cf6);
        width: 4px;
        transition: transform .4s;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        transform: scaleY(0)
    }

    .demo-feature-card:hover:before {
        transform: scaleY(1)
    }

    .demo-feature-card:hover {
        background: linear-gradient(135deg,#fff,#f8faff);
        border-color: #6366f14d;
        transform: translate(8px)translateY(-4px);
        box-shadow: 0 16px 32px #6366f126,0 8px 16px #0000001a
    }

.demo-feature-icon {
    color: #6366f1;
    background: linear-gradient(135deg,#eef2ff,#e0e7ff);
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    transition: all .3s;
    display: flex;
    box-shadow: 0 4px 12px #6366f133
}

.demo-feature-card:hover .demo-feature-icon {
    color: #fff;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    box-shadow: 0 8px 20px #6366f14d
}

.demo-feature-content {
    flex: 1
}

.demo-feature-text {
    color: #6b7280;
    font-size: .9375rem;
    line-height: 1.6
}

.demo-intro-text {
    color: #475569;
    text-align: left;
    z-index: 1;
    max-width: 800px;
    margin-bottom: 2rem;
    margin-left: 0;
    margin-right: auto;
    font-size: 1.125rem;
    line-height: 1.75;
    position: relative
}

.demo-journey-section .demo-intro-text {
    color: #334155;
    margin-bottom: 3rem;
    font-size: 1.1875rem
}

.demo-benefits-list {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    list-style: none
}

.demo-benefit-item {
    background: #fff;
    border-left: 4px solid #0000;
    border-radius: 1rem;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1rem;
    padding: 1.75rem;
    transition: all .3s;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px #0000000f
}

    .demo-benefit-item:before {
        content: "";
        transform-origin: top;
        background: linear-gradient(#d4af37,#f4d03f);
        width: 4px;
        transition: transform .3s;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        transform: scaleY(0)
    }

    .demo-benefit-item:hover:before {
        transform: scaleY(1)
    }

    .demo-benefit-item:hover {
        background: linear-gradient(135deg,#fff,#fffbeb);
        border-left-color: #d4af37;
        transform: translate(8px);
        box-shadow: 0 8px 20px #d4af3733
    }

    .demo-benefit-item svg {
        color: #d4af37;
        filter: drop-shadow(0 2px 4px #d4af3733);
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        margin-top: .125rem;
        transition: transform .3s
    }

    .demo-benefit-item:hover svg {
        transform: scale(1.1)rotate(5deg)
    }

    .demo-benefit-item span {
        color: #374151;
        font-size: 1.0625rem;
        line-height: 1.7
    }

.demo-journey-grid {
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    display: grid
}

.demo-journey-item {
    text-align: center;
    background: #fff;
    border-left: 5px solid #6366f1;
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px #0000000f,0 2px 4px #0000000a
}

    .demo-journey-item:after {
        content: "";
        opacity: 0;
        background: linear-gradient(135deg,#6366f10d,#0000);
        transition: opacity .4s;
        position: absolute;
        inset: 0
    }

    .demo-journey-item:hover:after {
        opacity: 1
    }

    .demo-journey-item:hover {
        border-left-width: 6px;
        transform: translateY(-6px)scale(1.02);
        box-shadow: 0 16px 32px #6366f133,0 8px 16px #0000001a
    }

    .demo-journey-item p {
        color: #374151;
        margin: 0;
        font-size: 1.0625rem;
        line-height: 1.7
    }

.demo-links-grid {
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    display: grid
}

.demo-related-link {
    background: #fff;
    border: 2px solid #0000;
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    text-decoration: none;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px #0000000f,0 2px 4px #0000000a
}

    .demo-related-link:before {
        content: "";
        background: linear-gradient(90deg,#0000,#6366f11a,#0000);
        width: 100%;
        height: 100%;
        transition: left .5s;
        position: absolute;
        top: 0;
        left: -100%
    }

    .demo-related-link:hover:before {
        left: 100%
    }

    .demo-related-link:hover {
        background: linear-gradient(135deg,#fff,#eef2ff);
        border-color: #6366f1;
        transform: translateY(-6px)scale(1.02);
        box-shadow: 0 20px 40px #6366f140,0 8px 16px #0000001a
    }

        .demo-related-link:hover h3 {
            color: #4f46e5
        }

@media (max-width:768px) {
    .demo-hero-title {
        letter-spacing: -.02em;
        font-size: 2.5rem
    }

    .demo-section-title {
        letter-spacing: -.01em;
        font-size: 2rem
    }

    .demo-card-title {
        font-size: 1.5rem
    }

    .demo-feature-title, .demo-related-link h3, .demo-value-title {
        font-size: 1.25rem
    }
}

.demo-related-link p {
    color: #6b7280;
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6
}

.demo-faq-container {
    max-width: 900px;
    margin: 0 auto
}

.demo-faq-item {
    background: #fff;
    border: 1px solid #0000000d;
    border-radius: 1rem;
    margin-bottom: 1rem;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px #0000000f,0 2px 4px #0000000a
}

    .demo-faq-item:before {
        content: "";
        transform-origin: top;
        background: linear-gradient(#6366f1,#8b5cf6);
        width: 4px;
        transition: transform .4s;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        transform: scaleY(0)
    }

    .demo-faq-item:hover:before, .demo-faq-item[open]:before {
        transform: scaleY(1)
    }

    .demo-faq-item:hover {
        transform: translate(4px);
        box-shadow: 0 8px 20px #6366f126,0 4px 8px #00000014
    }

    .demo-faq-item[open] {
        border-color: #6366f14d;
        box-shadow: 0 12px 24px #6366f133,0 4px 8px #0000001a
    }

.demo-faq-summary {
    cursor: pointer;
    color: #111827;
    background: linear-gradient(135deg,#fff,#fafafa);
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem;
    font-size: 1.0625rem;
    font-weight: 600;
    list-style: none;
    transition: all .3s;
    display: flex
}

.demo-faq-item[open] .demo-faq-summary {
    color: #6366f1;
    background: linear-gradient(135deg,#f8faff,#eef2ff)
}

.demo-faq-summary::-webkit-details-marker {
    display: none
}

.demo-faq-summary span {
    flex: 1
}

.demo-faq-icon {
    color: #6366f1;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: 1rem;
    transition: transform .3s
}

.demo-faq-item[open] .demo-faq-icon {
    transform: rotate(180deg)
}

.demo-faq-content {
    color: #4b5563;
    padding: 0 1.5rem 1.5rem;
    line-height: 1.7
}

    .demo-faq-content p {
        margin: 0;
        font-size: .9375rem
    }

.demo-feature-icon, .demo-icon-wrapper, .demo-value-icon {
    transition: transform .3s
}

.demo-feature-card:hover .demo-feature-icon, .demo-mission-card:hover .demo-icon-wrapper, .demo-value-card:hover .demo-value-icon, .demo-vision-card:hover .demo-icon-wrapper {
    transform: scale(1.1)rotate(5deg)
}

@media (max-width:768px) {
    .demo-hero-title {
        font-size: 2.5rem
    }

    .demo-hero-subtitle {
        font-size: 1.25rem
    }

    .demo-section-title {
        font-size: 2rem
    }

    .demo-features-grid, .demo-journey-grid, .demo-links-grid, .demo-mission-vision-grid, .demo-values-grid {
        grid-template-columns: 1fr
    }

    .demo-overview-content {
        padding: 2rem 1.5rem
    }

    .demo-mission-card, .demo-vision-card {
        padding: 2rem
    }

    .demo-value-card {
        padding: 2rem 1.5rem
    }

    .demo-feature-card {
        padding: 1.5rem
    }
}

.hero-banner {
    justify-content: center;
    align-items: center;
    width: 100vw;
    min-height: 700px;
    margin-bottom: 4rem;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 5rem 1.5rem;
    display: flex;
    position: relative;
    left: 50%;
    right: 50%;
    overflow: hidden
}

.hero-banner-background {
    z-index: 0;
    background: linear-gradient(135deg,#6366f1,#8b5cf6 50%,#9333ea);
    position: absolute;
    inset: 0
}

    .hero-banner-background:before {
        content: "";
        pointer-events: none;
        background: radial-gradient(circle at 20% 30%,#ffffff26 0,#0000 50%),radial-gradient(circle at 80% 70%,#ffffff1a 0,#0000 50%),radial-gradient(circle,#ffffff0d 0,#0000 70%);
        animation: pulse 4s ease-in-out infinite;
        position: absolute;
        inset: 0
    }

.hero-banner-container {
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative
}

.hero-banner-wrapper {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
    width: 100%;
    display: grid
}

.hero-banner-content {
    z-index: 2;
    text-align: left;
    animation: fadeInUp .8s ease-out;
    position: relative
}

.hero-banner-badge {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    letter-spacing: .5px;
    background: #ffffff40;
    border: 1px solid #fff6;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
    padding: .625rem 1.5rem;
    font-size: .9375rem;
    font-weight: 600;
    transition: all .3s;
    animation: fadeInUp .6s ease-out .2s both;
    display: inline-block;
    box-shadow: 0 4px 16px #0000001a
}

    .hero-banner-badge:hover {
        background: #ffffff4d;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px #00000026
    }

.hero-banner-title {
    color: #fff;
    text-shadow: 0 2px 20px #0000001a;
    letter-spacing: -.03em;
    margin: 0 0 1.5rem;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    animation: fadeInUp .8s ease-out .3s both
}

.hero-banner-subtitle {
    color: #fffffff2;
    margin-bottom: 2rem;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.7;
    animation: fadeInUp .8s ease-out .4s both
}

.hero-banner-features {
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
    animation: fadeInUp .8s ease-out .45s both;
    display: flex
}

.hero-banner-feature-item {
    color: #fff;
    align-items: center;
    gap: .75rem;
    font-size: 1rem;
    font-weight: 500;
    display: flex
}

.hero-banner-feature-icon {
    color: #fff;
    filter: drop-shadow(0 2px 4px #0003);
    flex-shrink: 0;
    width: 24px;
    height: 24px
}

.hero-banner-actions {
    flex-wrap: wrap;
    gap: 1rem;
    animation: fadeInUp .8s ease-out .5s both;
    display: flex
}

.hero-banner-button {
    cursor: pointer;
    border: 2px solid #0000;
    border-radius: .75rem;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: 1rem 2.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s;
    display: inline-flex;
    box-shadow: 0 4px 12px #00000026
}

.hero-banner-button-icon {
    width: 20px;
    height: 20px;
    transition: transform .3s
}

.hero-banner-button-primary {
    color: #fff;
    background: #a03cd2;
    border-color: #a03cd2
}

    .hero-banner-button-primary:hover {
        background: #8932b5;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px #a03cd266
    }

        .hero-banner-button-primary:hover .hero-banner-button-icon {
            transform: translate(4px)
        }

.hero-banner-button-secondary {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    background: #ffffff26;
    border-color: #ffffff4d
}

    .hero-banner-button-secondary:hover {
        background: #ffffff40;
        border-color: #ffffff80;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px #0003
    }

.hero-banner-image-wrapper {
    z-index: 2;
    width: 100%;
    height: 600px;
    animation: fadeInUp .8s ease-out .6s both;
    position: relative
}

.hero-banner-image-container {
    border-radius: 1.5rem;
    width: 100%;
    height: 100%;
    transition: transform .5s;
    position: relative;
    overflow: hidden;
    transform: perspective(1000px)rotateY(-5deg);
    box-shadow: 0 20px 60px #0000004d
}

.hero-banner-image-wrapper:hover .hero-banner-image-container {
    transform: perspective(1000px)rotateY(0)scale(1.02)
}

.hero-banner-image {
    object-fit: cover;
    object-position: center;
    border-radius: 1.5rem
}

.hero-banner-image-overlay {
    pointer-events: none;
    background: linear-gradient(135deg,#6366f11a,#8b5cf61a);
    border-radius: 1.5rem;
    position: absolute;
    inset: 0
}

.hero-banner-image-decoration {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: -1;
    background: linear-gradient(135deg,#fff3,#ffffff1a);
    border: 2px solid #ffffff4d;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: float 6s ease-in-out infinite;
    position: absolute;
    top: -20px;
    right: -20px
}

    .hero-banner-image-decoration:before {
        content: "";
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        background: linear-gradient(135deg,#ffffff26,#ffffff0d);
        border: 2px solid #fff3;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        animation: float 4s ease-in-out infinite reverse;
        position: absolute;
        bottom: -30px;
        left: -30px
    }

@keyframes float {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-20px)
    }
}

.hero-float-slow {
    animation: float 8s ease-in-out infinite
}

.hero-float-slower {
    animation: float 10s ease-in-out 1s infinite
}

.hero-float-card {
    animation: float 6s ease-in-out infinite
}

.hero-float-card-delay {
    animation: float 7s ease-in-out .5s infinite
}

@keyframes floatReverse {
    0%,to {
        transform: translateY(0)translate(0)
    }

    33% {
        transform: translateY(10px)translate(-10px)
    }

    66% {
        transform: translateY(-20px)translate(10px)
    }
}

@keyframes pulseGlow {
    0%,to {
        opacity: .6;
        transform: translate(-50%,-50%)scale(1)
    }

    50% {
        opacity: .3;
        transform: translate(-50%,-50%)scale(1.1)
    }
}

.animate-float {
    animation: float 20s ease-in-out infinite
}

.animate-float-reverse {
    animation: floatReverse 25s ease-in-out infinite
}

.animate-float-slow {
    animation: float 15s ease-in-out infinite
}

.animate-float-slow-reverse {
    animation: floatReverse 18s ease-in-out infinite
}

.animate-pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite
}

@media (max-width:1024px) {
    .hero-banner-wrapper {
        gap: 3rem
    }

    .hero-banner-title {
        font-size: 3rem
    }

    .hero-banner-image-wrapper {
        height: 500px
    }
}

@media (max-width:768px) {
    .hero-banner {
        border-radius: 1.5rem;
        min-height: auto;
        margin-bottom: 3rem;
        padding: 3rem 1rem
    }

    .hero-banner-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem
    }

    .hero-banner-content {
        text-align: center;
        order: 1
    }

    .hero-banner-image-wrapper {
        order: 2;
        height: 400px
    }

    .hero-banner-image-container {
        transform: none
    }

    .hero-banner-image-wrapper:hover .hero-banner-image-container {
        transform: scale(1.02)
    }

    .hero-banner-title {
        letter-spacing: -.02em;
        margin-bottom: 1rem;
        font-size: 2.5rem
    }

    .hero-banner-subtitle {
        margin-bottom: 1.5rem;
        font-size: 1.125rem
    }

    .hero-banner-badge {
        margin-bottom: 1.5rem;
        padding: .5rem 1.25rem;
        font-size: .875rem
    }

    .hero-banner-features {
        align-items: center;
        margin-bottom: 2rem
    }

    .hero-banner-actions {
        flex-direction: column;
        align-items: stretch
    }

    .hero-banner-button {
        justify-content: center;
        width: 100%;
        padding: .875rem 2rem;
        font-size: 1rem
    }
}

@media (max-width:480px) {
    .hero-banner {
        padding: 2.5rem 1rem
    }

    .hero-banner-title {
        font-size: 2rem
    }

    .hero-banner-subtitle {
        font-size: 1rem
    }

    .hero-banner-image-wrapper {
        height: 300px
    }
}

.demo-section-odd {
    background-color: #fff;
    padding: 4rem 0
}

.demo-section-even {
    background-color: #f8f9fa;
    padding: 4rem 0
}

.demo-banner {
    color: #1f2937;
    background: linear-gradient(135deg,#eef2ff,#f3e8ff 50%,#dbeafe);
    padding: 5rem 0;
    position: relative;
    overflow: hidden
}

    .demo-banner:before {
        content: "";
        opacity: .5;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        position: absolute;
        inset: 0
    }

.demo-banner-wrapper {
    z-index: 1;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    position: relative
}

.demo-banner-content {
    text-align: left
}

.demo-banner-title {
    color: #6366f1;
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2
}

.demo-banner-subtitle {
    opacity: .9;
    color: #4b5563;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    line-height: 1.6
}

.demo-banner-buttons {
    flex-wrap: wrap;
    gap: 1rem;
    display: flex
}

.demo-banner-button {
    border-radius: .75rem;
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s,box-shadow .2s;
    display: inline-block
}

.demo-banner-button-primary {
    color: #fff;
    background: #a03cd2;
    box-shadow: 0 4px 6px -1px #a03cd24d
}

    .demo-banner-button-primary:hover {
        background: #8932b5;
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px #a03cd266
    }

.demo-banner-button-secondary {
    color: #6366f1;
    background: #fff;
    border: 2px solid #6366f1;
    box-shadow: 0 4px 6px -1px #0000001a
}

    .demo-banner-button-secondary:hover {
        background: #f3f4f6;
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px #00000026
    }

.demo-banner-image {
    border-radius: 1.5rem;
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px #0000004d
}

.demo-banner-img {
    object-fit: cover;
    border-radius: 1.5rem;
    width: 100%;
    height: 100%
}

.demo-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem
}

.demo-section-title {
    color: #6366f1;
    margin-bottom: 1.5rem;
    font-size: 2.5rem
}

.demo-section-description {
    color: #6b7280;
    font-size: 1.125rem;
    line-height: 1.7
}

.demo-section-header {
    gap: 3rem
}

.demo-overview-section, .demo-section-header {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    display: grid
}

.demo-overview-section {
    gap: 4rem
}

.demo-overview-image {
    border-radius: 1.5rem;
    width: 100%;
    height: 450px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a
}

    .demo-overview-image:hover .demo-overview-img {
        transform: scale(1.02)
    }

.demo-overview-content {
    flex-direction: column;
    justify-content: center;
    display: flex
}

.demo-overview-feature {
    align-items: center;
    gap: 1rem;
    padding: .75rem 0;
    display: flex
}

.demo-overview-feature-icon {
    color: #10b981;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem
}

.demo-overview-feature-text {
    color: #374151;
    font-size: 1.125rem;
    font-weight: 500
}

.demo-section-header-reverse {
    direction: rtl;
    grid-template-columns: 1fr 1fr
}

    .demo-section-header-reverse > * {
        direction: ltr
    }

.demo-section-text {
    flex-direction: column;
    justify-content: center;
    display: flex
}

.demo-section-image {
    border-radius: 1rem;
    width: 100%;
    height: 350px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px #0000001a
}

.demo-section-img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.demo-card-grid {
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 2rem;
    display: grid
}

.demo-card {
    background: #fff;
    border-radius: 1rem;
    flex-direction: column;
    transition: transform .3s,box-shadow .3s;
    display: flex;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f
}

    .demo-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d
    }

.demo-card-image-wrapper {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden
}

.demo-card-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .3s
}

.demo-card:hover .demo-card-image {
    transform: scale(1.05)
}

.demo-card-content {
    flex-direction: column;
    flex-grow: 1;
    padding: 1.5rem;
    display: flex
}

.demo-card-icon {
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 5rem;
    margin-bottom: 1.5rem;
    display: flex
}

.demo-card-title {
    color: #1f2937;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 600
}

.demo-card-description {
    color: #6b7280;
    flex-grow: 1;
    margin-bottom: 1rem;
    line-height: 1.6
}

.demo-page {
    overflow-x: hidden
}

    .demo-page .demo-enhance-hero-glow {
        pointer-events: none;
        background: radial-gradient(circle,#fbbf2426 0,#6366f11f 40%,#0000 70%);
        border-radius: 50%;
        width: min(80vw,420px);
        height: min(80vw,420px);
        position: absolute;
        top: 50%;
        right: 5%;
        transform: translate(20%,-50%)
    }

    .demo-page .demo-enhance-section-title {
        display: inline-block;
        position: relative
    }

        .demo-page .demo-enhance-section-title:after {
            content: "";
            background: linear-gradient(90deg,#6366f1,#f59e0b);
            border-radius: 2px;
            width: 48px;
            height: 4px;
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translate(-50%)
        }

    .demo-page .demo-enhance-card {
        transition: transform .35s,box-shadow .35s
    }

        .demo-page .demo-enhance-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 24px 48px -12px #6366f12e,0 12px 24px -8px #00000014
        }

    .demo-page .demo-enhance-why-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 48px -12px #6366f11f
    }

    .demo-page .demo-enhance-cta {
        background: linear-gradient(135deg,#4f46e5,#6366f1 50%,#7c3aed);
        position: relative
    }

        .demo-page .demo-enhance-cta:before {
            content: "";
            pointer-events: none;
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
            position: absolute;
            inset: 0
        }

    .demo-page .demo-enhance-btn-primary:hover {
        transform: scale(1.04);
        box-shadow: 0 12px 28px -8px #ffffff4d
    }

    .demo-page .demo-enhance-btn-outline:hover {
        background: #ffffff1f;
        transform: scale(1.02)
    }

@keyframes demo-enhance-fade-up {
    0% {
        opacity: 0;
        transform: translateY(16px)
    }

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

.demo-page .demo-enhance-fade-up {
    animation: demo-enhance-fade-up .6s ease-out forwards
}

.demo-page .demo-enhance-hero-image-wrap {
    transition: transform .4s
}

    .demo-page .demo-enhance-hero-image-wrap:hover {
        transform: translateY(-4px)
    }

.demo-page .demo-enhance-list-accent li {
    padding-left: 1.25rem;
    position: relative
}

    .demo-page .demo-enhance-list-accent li:before {
        content: "";
        background: linear-gradient(135deg,#6366f1,#8b5cf6);
        border-radius: 50%;
        width: 6px;
        height: 6px;
        position: absolute;
        top: .5em;
        left: 0
    }

.demo-page .demo-enhance-feature-img-wrap {
    position: relative
}

    .demo-page .demo-enhance-feature-img-wrap:after {
        content: "";
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(135deg,#6366f140,#f59e0b26);
        padding: 1px;
        position: absolute;
        inset: -1px;
        -webkit-mask-image: linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);
        mask-image: linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);
        -webkit-mask-position: 0 0,0 0;
        mask-position: 0 0,0 0;
        -webkit-mask-size: auto,auto;
        mask-size: auto,auto;
        -webkit-mask-repeat: repeat,repeat;
        mask-repeat: repeat,repeat;
        -webkit-mask-clip: content-box,border-box;
        mask-clip: content-box,border-box;
        -webkit-mask-origin: content-box,border-box;
        mask-origin: content-box,border-box;
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        -webkit-mask-source-type: auto,auto;
        mask-mode: match-source,match-source
    }

.demo-hero {
    padding: 5rem 0 5.5rem
}

.demo-hero-badge {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fffffffa;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: #ffffff2e;
    border: 1px solid #ffffff40;
    border-radius: 9999px;
    margin-bottom: 1.25rem;
    padding: .5rem 1.25rem;
    font-size: .8125rem;
    font-weight: 600;
    display: inline-block;
    box-shadow: 0 4px 12px #00000014
}

.demo-page .hero-content {
    text-align: center
}

.demo-page .hero-cta {
    justify-content: center
}

.demo-what-content .demo-section-title-inline {
    text-align: center;
    display: block
}

.demo-page-section {
    padding: 4.5rem 0
}

.demo-page-section-alt {
    background: linear-gradient(#f8fafc,#f1f5f9)
}

.demo-section-header {
    text-align: center;
    margin-bottom: 3rem
}

.demo-section-icon-wrap {
    background: linear-gradient(135deg,var(--qhrm-primary)0,var(--qhrm-primary-dark)100%);
    color: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.25rem;
    display: inline-flex;
    box-shadow: 0 8px 24px #6366f159
}

.demo-section-icon-wrap-inline {
    flex-shrink: 0;
    margin: 0
}

.demo-section-icon-wrap-accent {
    background: linear-gradient(135deg,#f59e0b,#d97706);
    box-shadow: 0 8px 24px #f59e0b59
}

.demo-section-icon {
    width: 1.75rem;
    height: 1.75rem
}

.demo-section-title {
    color: #1e293b;
    letter-spacing: -.02em;
    margin: 0 0 .5rem;
    font-size: clamp(1.75rem,4vw,2.25rem);
    font-weight: 700;
    line-height: 1.25
}

.demo-section-title-inline {
    font-size: clamp(1.5rem,3vw,2rem)
}

.demo-section-subtitle {
    color: #64748b;
    max-width: 520px;
    margin: 0 auto;
    font-size: 1.0625rem
}

.demo-in-action-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 3rem;
    display: grid
}

.demo-in-action-visual {
    position: sticky;
    top: 2rem
}

.demo-in-action-card {
    background: #fff;
    border: 1px solid #6366f11f;
    border-radius: 1.25rem;
    transition: box-shadow .3s,transform .3s;
    overflow: hidden;
    box-shadow: 0 24px 48px #6366f114,0 8px 24px #0000000f
}

    .demo-in-action-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 28px 56px #6366f11f,0 12px 28px #00000014
    }

.demo-in-action-img {
    vertical-align: middle;
    width: 100%;
    height: auto;
    display: block
}

.demo-in-action-list {
    margin: 0;
    padding: 0;
    list-style: none
}

.demo-in-action-item {
    border-bottom: 1px solid #e2e8f0;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 0;
    display: flex
}

    .demo-in-action-item:last-child {
        border-bottom: none;
        padding-bottom: 0
    }

.demo-in-action-item-icon {
    color: #10b981;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    margin-top: .15rem
}

    .demo-in-action-item-icon svg {
        width: 100%;
        height: 100%
    }

.demo-in-action-item-title {
    color: #1e293b;
    margin: 0 0 .35rem;
    font-size: 1.0625rem;
    font-weight: 600
}

.demo-in-action-item-desc {
    color: #64748b;
    margin: 0;
    font-size: .9375rem;
    line-height: 1.55
}

.demo-what-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    display: grid
}

.demo-what-content {
    max-width: 36rem
}

.demo-what-p {
    color: #475569;
    margin: 0 0 1rem;
    font-size: 1.0625rem;
    line-height: 1.75
}

    .demo-what-p:last-child {
        margin-bottom: 0
    }

.demo-what-visual {
    background: #fff;
    border: 1px solid #0000000d;
    border-radius: 1.25rem;
    transition: box-shadow .3s,transform .3s;
    overflow: hidden;
    box-shadow: 0 20px 48px #00000014,0 8px 20px #6366f10f
}

    .demo-what-visual:hover {
        transform: translateY(-4px);
        box-shadow: 0 24px 56px #0000001a,0 12px 28px #6366f114
    }

.demo-what-img {
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block
}

.demo-card-grid-three {
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 1.75rem
}

.demo-page .demo-card {
    border: 1px solid #0000000d;
    border-radius: 1.25rem;
    transition: box-shadow .3s,transform .3s,border-color .3s;
    box-shadow: 0 4px 20px #0000000f,0 2px 8px #0000000a
}

    .demo-page .demo-card:hover {
        border-color: #6366f126;
        transform: translateY(-6px);
        box-shadow: 0 20px 40px #6366f11a,0 8px 24px #0000000f
    }

.demo-page .demo-card-image-wrapper {
    height: 200px
}

.demo-page .demo-card-content {
    padding: 1.5rem 1.75rem
}

.demo-why-grid {
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 1.75rem;
    max-width: 960px;
    margin: 0 auto
}

.demo-faq-grid {
    grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
    gap: 1.5rem
}

.demo-page .demo-faq-grid .demo-card {
    border-left: 4px solid var(--qhrm-primary);
    padding-left: 0
}

.demo-page .demo-faq-grid .demo-card-content {
    padding-left: 1.5rem
}

.demo-page .demo-faq-grid .demo-card:hover {
    border-left-color: var(--qhrm-primary-dark)
}

.demo-cta-section {
    background: linear-gradient(135deg,var(--qhrm-primary-dark)0,var(--qhrm-primary)50%,var(--qhrm-primary-light)100%);
    padding: 4rem 0;
    position: relative;
    overflow: hidden
}

    .demo-cta-section:before {
        content: "";
        pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 20V40H20'/%3E%3C/g%3E%3C/svg%3E");
        position: absolute;
        inset: 0
    }

.demo-cta-inner {
    text-align: center;
    z-index: 1;
    position: relative
}

.demo-cta-title {
    letter-spacing: -.02em;
    text-shadow: 0 2px 12px #0000001a;
    margin: 0 0 1rem;
    font-size: clamp(1.875rem,4vw,2.75rem);
    font-weight: 800;
    line-height: 1.2
}

.demo-cta-desc {
    color: #fffffff0;
    max-width: 36rem;
    margin: 0 auto 2rem;
    font-size: 1.125rem;
    line-height: 1.65
}

.demo-cta-btn {
    color: var(--qhrm-primary);
    background: #fff;
    border-radius: 9999px;
    justify-content: center;
    align-items: center;
    padding: 1rem 2.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    transition: transform .25s,box-shadow .25s,background .2s;
    display: inline-flex;
    box-shadow: 0 12px 32px #0000002e
}

    .demo-cta-btn:hover {
        background: #f8fafc;
        transform: translateY(-3px)scale(1.02);
        box-shadow: 0 16px 40px #00000038
    }

@media (max-width:1024px) {
    .demo-in-action-grid {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .demo-in-action-visual {
        position: static
    }

    .demo-what-grid {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .demo-what-content {
        max-width: none
    }

    .demo-what-visual {
        order: -1;
        max-width: 480px;
        margin: 0 auto
    }
}

@media (max-width:768px) {
    .demo-page-section {
        padding: 3rem 0
    }

    .demo-section-header {
        margin-bottom: 2rem
    }

    .demo-cta-section {
        padding: 3rem 0
    }
}

.demo-feature-grid {
    grid-template-columns: repeat(auto-fit,minmax(400px,1fr));
    gap: 2rem;
    display: grid
}

.demo-feature-card {
    background: #fff;
    border-radius: 1rem;
    transition: transform .3s,box-shadow .3s;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f
}

    .demo-feature-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d
    }

.demo-feature-image-wrapper {
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden
}

.demo-feature-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .3s
}

.demo-feature-card:hover .demo-feature-image {
    transform: scale(1.05)
}

.demo-feature-list {
    margin: 0;
    padding: 2rem;
    list-style: none
}

.demo-feature-item {
    border-bottom: 1px solid #e5e7eb;
    align-items: center;
    padding: 1rem 0;
    display: flex
}

    .demo-feature-item:last-child {
        border-bottom: none
    }

.demo-feature-icon {
    color: #10b981;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1rem
}

.demo-feature-text {
    color: #374151;
    font-size: 1.125rem
}

.demo-cta-section {
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    border-radius: 1.5rem;
    margin: 4rem 0;
    padding: 4rem 2rem
}

.demo-cta-title {
    color: #fff;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    font-weight: 700
}

.demo-cta-text {
    opacity: .95;
    color: #fff;
    margin-bottom: 2rem;
    font-size: 1.25rem
}

.demo-button {
    color: #6366f1;
    background: #fff;
    border-radius: .75rem;
    padding: 1rem 2.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s,box-shadow .2s;
    display: inline-block
}

    .demo-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px #0003
    }

.demo-icon-bg-indigo {
    background-color: #eef2ff
}

.demo-icon-bg-purple {
    background-color: #f3e8ff
}

.demo-icon-bg-blue {
    background-color: #dbeafe
}

.demo-icon-bg-green {
    background-color: #dcfce7
}

.demo-icon-color-indigo {
    color: #6366f1
}

.demo-icon-color-purple {
    color: #8b5cf6
}

.demo-icon-color-blue {
    color: #3b82f6
}

.demo-icon-color-green {
    color: #10b981
}

@media (max-width:768px) {
    .demo-banner-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .demo-banner-content {
        text-align: center
    }

    .demo-banner-image {
        height: 300px
    }

    .demo-banner-title {
        font-size: 2.5rem
    }

    .demo-banner-subtitle {
        font-size: 1.25rem
    }

    .demo-banner-buttons {
        justify-content: center
    }

    .demo-banner-button {
        padding: .875rem 2rem;
        font-size: 1rem
    }

    .demo-section-header {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .demo-section-header-reverse {
        direction: ltr
    }

    .demo-section-image {
        height: 250px
    }

    .demo-section-title {
        font-size: 2rem
    }

    .demo-card-grid, .demo-feature-grid {
        grid-template-columns: 1fr
    }

    .demo-cta-title {
        font-size: 2rem
    }

    .demo-overview-section {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .demo-overview-image {
        order: 1;
        height: 300px
    }

    .demo-overview-content {
        order: 2
    }
}

.grid-pattern-overlay {
    background-image: linear-gradient(#ffffff1a 1px,#0000 0),linear-gradient(90deg,#ffffff1a 1px,#0000 0);
    background-size: 50px 50px
}

.animation-delay-1s {
    animation-delay: 1s
}

.demo-hero-section-with-image {
    background: linear-gradient(135deg,#fafbff,#f5f7ff 30%,#faf5ff 70%,#fefcff) 0 0/200% 200%;
    align-items: center;
    min-height: 600px;
    animation: gradientShift 15s infinite;
    display: flex;
    position: relative;
    overflow: hidden
}

.demo-hero-with-image {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    padding: 4rem 0;
    display: grid
}

.demo-hero-image-wrapper, .demo-hero-section-with-image .demo-hero-content {
    z-index: 2;
    position: relative
}

.demo-hero-image-wrapper {
    border-radius: 1.5rem;
    overflow: hidden
}

.demo-hero-image {
    object-fit: cover;
    border-radius: 1.5rem;
    width: 100%;
    height: auto;
    transition: transform .5s
}

.demo-hero-image-wrapper:hover .demo-hero-image {
    transform: scale(1.05)
}

.demo-hero-background-overlay {
    opacity: .15;
    z-index: 1;
    background: url(/images/Home/home.svg) 50%/cover;
    position: absolute;
    inset: 0
}

@keyframes gradientShift {
    0%,to {
        background-position: 0
    }

    50% {
        background-position: 100%
    }
}

.demo-hero-stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
    display: flex
}

.demo-stat-item {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #ffffffe6;
    border: 1px solid #6366f133;
    border-radius: 1rem;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    transition: all .3s;
    display: flex;
    box-shadow: 0 4px 16px #0000001a
}

    .demo-stat-item:hover {
        background: #fff;
        transform: translateY(-5px);
        box-shadow: 0 8px 24px #00000026
    }

.demo-stat-icon {
    color: #6366f1;
    width: 2.5rem;
    height: 2.5rem
}

.demo-stat-content {
    flex-direction: column;
    display: flex
}

.demo-stat-number {
    color: #1e293b;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1
}

.demo-stat-label {
    color: #64748b;
    margin-top: .25rem;
    font-size: .875rem
}

.demo-badge-icon {
    width: 1rem;
    height: 1rem;
    margin-right: .5rem
}

.demo-overview-with-image {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    margin-top: 2rem;
    display: grid
}

.demo-overview-image-wrapper {
    border-radius: 1.5rem;
    position: relative;
    overflow: hidden
}

.demo-overview-img {
    object-fit: cover;
    width: 100%;
    height: auto;
    transition: transform .5s
}

.demo-overview-image-wrapper:hover .demo-overview-img {
    transform: scale(1.05)
}

.demo-overview-image-badge {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    background: #6366f1f2;
    border-radius: .75rem;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    font-size: .875rem;
    font-weight: 600;
    display: flex;
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem
}

.demo-badge-icon-small {
    width: 1rem;
    height: 1rem
}

.demo-overview-features {
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    display: flex
}

.demo-overview-feature-item {
    color: #6366f1;
    align-items: center;
    gap: .75rem;
    font-weight: 600;
    display: flex
}

.demo-feature-check-icon {
    color: #10b981;
    width: 1.25rem;
    height: 1.25rem
}

.demo-features-grid-with-images {
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 2rem;
    margin-top: 3rem;
    display: grid
}

.demo-feature-card-with-image {
    background: #fff;
    border: 1px solid #6366f11a;
    border-radius: 1.5rem;
    padding: 2.5rem;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px #00000014
}

    .demo-feature-card-with-image:before {
        content: "";
        transform-origin: 0;
        background: linear-gradient(90deg,#6366f1,#8b5cf6);
        height: 4px;
        transition: transform .4s;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        transform: scaleX(0)
    }

    .demo-feature-card-with-image:hover:before {
        transform: scaleX(1)
    }

    .demo-feature-card-with-image:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 40px #6366f126
    }

.demo-feature-image-container {
    justify-content: center;
    margin-bottom: 1.5rem;
    display: flex
}

.demo-feature-icon-large {
    border-radius: 1.25rem;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 5rem;
    transition: all .3s;
    display: flex
}

.demo-feature-card-with-image:hover .demo-feature-icon-large {
    transform: scale(1.1)rotate(5deg)
}

.demo-feature-icon-large .demo-icon {
    color: #fff;
    width: 2.5rem;
    height: 2.5rem
}

.demo-benefits-grid {
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 1.5rem;
    margin-top: 3rem;
    display: grid
}

.demo-benefit-card {
    background: #fff;
    border: 1px solid #6366f11a;
    border-radius: 1rem;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.75rem;
    transition: all .3s;
    display: flex;
    box-shadow: 0 2px 12px #0000000f
}

    .demo-benefit-card:hover {
        border-color: #6366f14d;
        transform: translateY(-4px);
        box-shadow: 0 8px 24px #6366f11f
    }

.demo-benefit-icon {
    color: #10b981;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .25rem
}

.demo-benefit-card span {
    color: #374151;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6
}

.demo-journey-section {
    background: linear-gradient(135deg,#f8fafc,#f1f5f9 50%,#e2e8f0);
    position: relative;
    overflow: hidden
}

    .demo-journey-section:before {
        content: "";
        pointer-events: none;
        background: radial-gradient(circle at 20% 30%,#6366f114 0,#0000 50%),radial-gradient(circle at 80% 70%,#8b5cf614 0,#0000 50%);
        position: absolute;
        inset: 0
    }

.demo-journey-layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 4rem;
    margin-top: 4rem;
    display: grid
}

.demo-journey-timeline {
    padding-left: 2.5rem;
    position: relative
}

.demo-journey-image-wrapper {
    border-radius: 1.5rem;
    height: fit-content;
    transition: transform .3s,box-shadow .3s;
    position: sticky;
    top: 2rem;
    overflow: hidden;
    box-shadow: 0 20px 60px #0000001f
}

    .demo-journey-image-wrapper:hover {
        transform: translateY(-8px);
        box-shadow: 0 24px 72px #6366f133
    }

.demo-journey-image {
    object-fit: cover;
    border-radius: 1.5rem;
    width: 100%;
    height: auto;
    transition: transform .5s;
    display: block
}

.demo-journey-image-wrapper:hover .demo-journey-image {
    transform: scale(1.05)
}

@keyframes gradientFlow {
    0%,to {
        background-position: 0 0
    }

    50% {
        background-position: 0 100%
    }
}

.demo-timeline-item {
    opacity: 0;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    animation: fadeInUp .6s forwards;
    display: flex;
    position: relative
}

    .demo-timeline-item:first-child {
        animation-delay: .1s
    }

    .demo-timeline-item:nth-child(2) {
        animation-delay: .2s
    }

    .demo-timeline-item:nth-child(3) {
        animation-delay: .3s
    }

    .demo-timeline-item:nth-child(4) {
        animation-delay: .4s
    }

    .demo-timeline-item:last-child {
        margin-bottom: 0
    }

.demo-timeline-icon-wrapper {
    z-index: 2;
    flex-shrink: 0;
    position: relative
}

.demo-timeline-icon {
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    display: flex;
    position: relative;
    box-shadow: 0 6px 16px #0000001a
}

    .demo-timeline-icon:before {
        content: "";
        opacity: 0;
        background: linear-gradient(135deg,#6366f1,#8b5cf6,#ec4899);
        border-radius: 50%;
        padding: 2px;
        transition: opacity .4s;
        position: absolute;
        inset: -4px;
        -webkit-mask-image: linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);
        -webkit-mask-position: 0 0,0 0;
        -webkit-mask-size: auto,auto;
        -webkit-mask-repeat: repeat,repeat;
        -webkit-mask-clip: content-box,border-box;
        -webkit-mask-origin: content-box,border-box;
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        -webkit-mask-source-type: auto,auto;
        mask-mode: match-source,match-source
    }

.demo-icon-clock {
    background: linear-gradient(135deg,#6366f1,#8b5cf6)
}

.demo-icon-trending {
    background: linear-gradient(135deg,#8b5cf6,#ec4899)
}

.demo-icon-users {
    background: linear-gradient(135deg,#ec4899,#f59e0b)
}

.demo-icon-heart {
    background: linear-gradient(135deg,#f59e0b,#10b981)
}

.demo-timeline-icon .demo-icon {
    color: #fff;
    z-index: 1;
    width: 1.5rem;
    height: 1.5rem;
    transition: transform .3s;
    position: relative
}

.demo-timeline-item:hover .demo-timeline-icon {
    transform: scale(1.1)rotate(5deg);
    box-shadow: 0 8px 24px #6366f14d
}

    .demo-timeline-item:hover .demo-timeline-icon:before {
        opacity: 1
    }

    .demo-timeline-item:hover .demo-timeline-icon .demo-icon {
        transform: scale(1.1)
    }

.demo-timeline-content {
    background: #fff;
    border: 1px solid #6366f114;
    border-radius: 1rem;
    flex: 1;
    padding: 1.5rem;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 12px #0000000f,0 1px 4px #0000000a
}

    .demo-timeline-content:before {
        content: "";
        transform-origin: 0;
        background: linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899);
        height: 3px;
        transition: transform .4s;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        transform: scaleX(0)
    }

.demo-timeline-item:hover .demo-timeline-content {
    border-color: #6366f133;
    transform: translate(8px)translateY(-2px);
    box-shadow: 0 8px 24px #6366f11f,0 3px 12px #0000000f
}

    .demo-timeline-item:hover .demo-timeline-content:before {
        transform: scaleX(1)
    }

.demo-timeline-title {
    -webkit-text-fill-color: transparent;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    transition: all .3s
}

.demo-timeline-item:hover .demo-timeline-title {
    -webkit-text-fill-color: transparent;
    background: linear-gradient(135deg,#6366f1,#ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    transform: translate(4px)
}

.demo-timeline-text {
    color: #64748b;
    font-size: .9375rem;
    line-height: 1.6;
    transition: color .3s
}

.demo-timeline-item:hover .demo-timeline-text {
    color: #475569
}

@media (max-width:1024px) {
    .demo-hero-with-image {
        gap: 2rem;
        padding: 3rem 0
    }

    .demo-journey-layout {
        grid-template-columns: 1fr;
        gap: 3rem
    }

    .demo-journey-image-wrapper {
        order: -1;
        max-width: 600px;
        margin: 0 auto;
        position: relative;
        top: 0
    }
}

@media (max-width:768px) {
    .demo-hero-section-with-image {
        min-height: 500px
    }

    .demo-hero-with-image {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 0
    }

    .demo-hero-image-wrapper {
        order: -1;
        max-width: 100%;
        margin: 0 auto
    }

    .demo-hero-stats {
        flex-direction: column;
        align-items: stretch
    }

    .demo-stat-item {
        justify-content: center
    }

    .demo-benefits-grid, .demo-features-grid-with-images, .demo-journey-layout, .demo-overview-with-image {
        grid-template-columns: 1fr
    }

    .demo-journey-layout {
        gap: 3rem;
        margin-top: 3rem
    }

    .demo-journey-timeline {
        padding-left: 2rem
    }

    .demo-journey-image-wrapper {
        order: -1;
        position: relative;
        top: 0
    }

    .demo-timeline-item {
        gap: 1.25rem;
        margin-bottom: 2rem
    }

    .demo-timeline-icon-wrapper {
        flex-shrink: 0
    }

    .demo-timeline-icon {
        width: 2.75rem;
        height: 2.75rem
    }

        .demo-timeline-icon .demo-icon {
            width: 1.375rem;
            height: 1.375rem
        }

    .demo-timeline-content {
        padding: 1.25rem
    }

    .demo-timeline-title {
        font-size: 1rem
    }

    .demo-timeline-text {
        font-size: .875rem
    }

    .demo-timeline-item:hover .demo-timeline-content {
        transform: translate(4px)translateY(-2px)
    }
}

.fs-xs {
    font-size: .625rem !important
}

.fs-sm {
    font-size: .75rem !important
}

.fs-md {
    font-size: .875rem !important
}

.fs-lg {
    font-size: 1rem !important
}

.fs-xl {
    font-size: 1.25rem !important
}

.fs-xxl {
    font-size: 1.5rem !important
}

.fs-2xl {
    font-size: 2rem !important
}

.fs-3xl {
    font-size: 2.5rem !important
}

.fs-4xl {
    font-size: 3rem !important
}

.fs-5xl {
    font-size: 3.5rem !important
}

.fs-6xl {
    font-size: 4rem !important
}

.fw-100 {
    font-weight: 100 !important
}

.fw-200 {
    font-weight: 200 !important
}

.fw-300 {
    font-weight: 300 !important
}

.fw-400 {
    font-weight: 400 !important
}

.fw-500 {
    font-weight: 500 !important
}

.fw-600 {
    font-weight: 600 !important
}

.fw-700 {
    font-weight: 700 !important
}

.fw-800 {
    font-weight: 800 !important
}

.fw-900 {
    font-weight: 900 !important
}

.fw-normal {
    font-weight: 400 !important
}

.fw-bold {
    font-weight: 700 !important
}

.lh-1 {
    line-height: 1 !important
}

.lh-1-1 {
    line-height: 1.1 !important
}

.lh-1-2 {
    line-height: 1.2 !important
}

.lh-1-3 {
    line-height: 1.3 !important
}

.lh-1-4 {
    line-height: 1.4 !important
}

.lh-1-5 {
    line-height: 1.5 !important
}

.lh-1-6 {
    line-height: 1.6 !important
}

.lh-1-7 {
    line-height: 1.7 !important
}

.lh-1-8 {
    line-height: 1.8 !important
}

.lh-2 {
    line-height: 2 !important
}

.mt-0 {
    margin-top: 0 !important
}

.mt-1 {
    margin-top: .25rem !important
}

.mt-2 {
    margin-top: .5rem !important
}

.mt-3 {
    margin-top: .75rem !important
}

.mt-4 {
    margin-top: 1rem !important
}

.mt-5 {
    margin-top: 1.25rem !important
}

.mt-6 {
    margin-top: 1.5rem !important
}

.mt-8 {
    margin-top: 2rem !important
}

.mt-10 {
    margin-top: 2.5rem !important
}

.mt-12 {
    margin-top: 3rem !important
}

.mt-16 {
    margin-top: 4rem !important
}

.mt-20 {
    margin-top: 5rem !important
}

.mt-24 {
    margin-top: 6rem !important
}

.mt-auto {
    margin-top: auto !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: .25rem !important
}

.mb-2 {
    margin-bottom: .5rem !important
}

.mb-3 {
    margin-bottom: .75rem !important
}

.mb-4 {
    margin-bottom: 1rem !important
}

.mb-5 {
    margin-bottom: 1.25rem !important
}

.mb-6 {
    margin-bottom: 1.5rem !important
}

.mb-8 {
    margin-bottom: 2rem !important
}

.mb-10 {
    margin-bottom: 2.5rem !important
}

.mb-12 {
    margin-bottom: 3rem !important
}

.mb-16 {
    margin-bottom: 4rem !important
}

.mb-20 {
    margin-bottom: 5rem !important
}

.mb-24 {
    margin-bottom: 6rem !important
}

.mb-auto {
    margin-bottom: auto !important
}

.ml-0 {
    margin-left: 0 !important
}

.ml-1 {
    margin-left: .25rem !important
}

.ml-2 {
    margin-left: .5rem !important
}

.ml-3 {
    margin-left: .75rem !important
}

.ml-4 {
    margin-left: 1rem !important
}

.ml-5 {
    margin-left: 1.25rem !important
}

.ml-6 {
    margin-left: 1.5rem !important
}

.ml-8 {
    margin-left: 2rem !important
}

.ml-10 {
    margin-left: 2.5rem !important
}

.ml-12 {
    margin-left: 3rem !important
}

.ml-16 {
    margin-left: 4rem !important
}

.ml-20 {
    margin-left: 5rem !important
}

.ml-auto {
    margin-left: auto !important
}

.mr-0 {
    margin-right: 0 !important
}

.mr-1 {
    margin-right: .25rem !important
}

.mr-2 {
    margin-right: .5rem !important
}

.mr-3 {
    margin-right: .75rem !important
}

.mr-4 {
    margin-right: 1rem !important
}

.mr-5 {
    margin-right: 1.25rem !important
}

.mr-6 {
    margin-right: 1.5rem !important
}

.mr-8 {
    margin-right: 2rem !important
}

.mr-10 {
    margin-right: 2.5rem !important
}

.mr-12 {
    margin-right: 3rem !important
}

.mr-16 {
    margin-right: 4rem !important
}

.mr-20 {
    margin-right: 5rem !important
}

.mr-auto {
    margin-right: auto !important
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.mx-1 {
    margin-left: .25rem !important;
    margin-right: .25rem !important
}

.mx-2 {
    margin-left: .5rem !important;
    margin-right: .5rem !important
}

.mx-3 {
    margin-left: .75rem !important;
    margin-right: .75rem !important
}

.mx-4 {
    margin-left: 1rem !important;
    margin-right: 1rem !important
}

.mx-5 {
    margin-left: 1.25rem !important;
    margin-right: 1.25rem !important
}

.mx-6 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important
}

.mx-8 {
    margin-left: 2rem !important;
    margin-right: 2rem !important
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.my-1 {
    margin-top: .25rem !important;
    margin-bottom: .25rem !important
}

.my-2 {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important
}

.my-3 {
    margin-top: .75rem !important;
    margin-bottom: .75rem !important
}

.my-4 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important
}

.my-5 {
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important
}

.my-6 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important
}

.my-8 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important
}

.my-10 {
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important
}

.my-12 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important
}

.pt-0 {
    padding-top: 0 !important
}

.pt-1 {
    padding-top: .25rem !important
}

.pt-2 {
    padding-top: .5rem !important
}

.pt-3 {
    padding-top: .75rem !important
}

.pt-4 {
    padding-top: 1rem !important
}

.pt-5 {
    padding-top: 1.25rem !important
}

.pt-6 {
    padding-top: 1.5rem !important
}

.pt-8 {
    padding-top: 2rem !important
}

.pt-10 {
    padding-top: 2.5rem !important
}

.pt-12 {
    padding-top: 3rem !important
}

.pt-16 {
    padding-top: 4rem !important
}

.pt-20 {
    padding-top: 5rem !important
}

.pt-24 {
    padding-top: 6rem !important
}

.pb-0 {
    padding-bottom: 0 !important
}

.pb-1 {
    padding-bottom: .25rem !important
}

.pb-2 {
    padding-bottom: .5rem !important
}

.pb-3 {
    padding-bottom: .75rem !important
}

.pb-4 {
    padding-bottom: 1rem !important
}

.pb-5 {
    padding-bottom: 1.25rem !important
}

.pb-6 {
    padding-bottom: 1.5rem !important
}

.pb-8 {
    padding-bottom: 2rem !important
}

.pb-10 {
    padding-bottom: 2.5rem !important
}

.pb-12 {
    padding-bottom: 3rem !important
}

.pb-16 {
    padding-bottom: 4rem !important
}

.pb-20 {
    padding-bottom: 5rem !important
}

.pb-24 {
    padding-bottom: 6rem !important
}

.pl-0 {
    padding-left: 0 !important
}

.pl-1 {
    padding-left: .25rem !important
}

.pl-2 {
    padding-left: .5rem !important
}

.pl-3 {
    padding-left: .75rem !important
}

.pl-4 {
    padding-left: 1rem !important
}

.pl-5 {
    padding-left: 1.25rem !important
}

.pl-6 {
    padding-left: 1.5rem !important
}

.pl-8 {
    padding-left: 2rem !important
}

.pl-10 {
    padding-left: 2.5rem !important
}

.pl-12 {
    padding-left: 3rem !important
}

.pl-16 {
    padding-left: 4rem !important
}

.pl-20 {
    padding-left: 5rem !important
}

.pr-0 {
    padding-right: 0 !important
}

.pr-1 {
    padding-right: .25rem !important
}

.pr-2 {
    padding-right: .5rem !important
}

.pr-3 {
    padding-right: .75rem !important
}

.pr-4 {
    padding-right: 1rem !important
}

.pr-5 {
    padding-right: 1.25rem !important
}

.pr-6 {
    padding-right: 1.5rem !important
}

.pr-8 {
    padding-right: 2rem !important
}

.pr-10 {
    padding-right: 2.5rem !important
}

.pr-12 {
    padding-right: 3rem !important
}

.pr-16 {
    padding-right: 4rem !important
}

.pr-20 {
    padding-right: 5rem !important
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.px-1 {
    padding-left: .25rem !important;
    padding-right: .25rem !important
}

.px-2 {
    padding-left: .5rem !important;
    padding-right: .5rem !important
}

.px-3 {
    padding-left: .75rem !important;
    padding-right: .75rem !important
}

.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important
}

.px-5 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important
}

.px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important
}

.px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important
}

.px-10 {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important
}

.px-12 {
    padding-left: 3rem !important;
    padding-right: 3rem !important
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.py-1 {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important
}

.py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important
}

.py-3 {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important
}

.py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important
}

.py-5 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important
}

.py-6 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important
}

.py-8 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important
}

.py-10 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important
}

.py-12 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important
}

.left-0 {
    left: 0 !important
}

.left-1 {
    left: .25rem !important
}

.left-2 {
    left: .5rem !important
}

.left-3 {
    left: .75rem !important
}

.left-4 {
    left: 1rem !important
}

.left-5 {
    left: 1.25rem !important
}

.left-6 {
    left: 1.5rem !important
}

.left-8 {
    left: 2rem !important
}

.left-10 {
    left: 2.5rem !important
}

.left-12 {
    left: 3rem !important
}

.left-auto {
    left: auto !important
}

.left-1\/2 {
    left: 50% !important
}

.left-full {
    left: 100% !important
}

.right-0 {
    right: 0 !important
}

.right-1 {
    right: .25rem !important
}

.right-2 {
    right: .5rem !important
}

.right-3 {
    right: .75rem !important
}

.right-4 {
    right: 1rem !important
}

.right-5 {
    right: 1.25rem !important
}

.right-6 {
    right: 1.5rem !important
}

.right-8 {
    right: 2rem !important
}

.right-10 {
    right: 2.5rem !important
}

.right-12 {
    right: 3rem !important
}

.right-auto {
    right: auto !important
}

.right-1\/2 {
    right: 50% !important
}

.right-full {
    right: 100% !important
}

.top-0 {
    top: 0 !important
}

.top-1 {
    top: .25rem !important
}

.top-2 {
    top: .5rem !important
}

.top-4 {
    top: 1rem !important
}

.top-8 {
    top: 2rem !important
}

.top-auto {
    top: auto !important
}

.top-1\/2 {
    top: 50% !important
}

.top-full {
    top: 100% !important
}

.bottom-0 {
    bottom: 0 !important
}

.bottom-1 {
    bottom: .25rem !important
}

.bottom-2 {
    bottom: .5rem !important
}

.bottom-4 {
    bottom: 1rem !important
}

.bottom-8 {
    bottom: 2rem !important
}

.bottom-auto {
    bottom: auto !important
}

.bottom-1\/2 {
    bottom: 50% !important
}

.bottom-full {
    bottom: 100% !important
}

.text-white {
    color: #fff !important
}

.text-black {
    color: #000 !important
}

.text-gray-50 {
    color: #f9fafb !important
}

.text-gray-100 {
    color: #f3f4f6 !important
}

.text-gray-200 {
    color: #e5e7eb !important
}

.text-gray-300 {
    color: #d1d5db !important
}

.text-gray-400 {
    color: #9ca3af !important
}

.text-gray-500 {
    color: #6b7280 !important
}

.text-gray-600 {
    color: #4b5563 !important
}

.text-gray-700 {
    color: #374151 !important
}

.text-gray-800 {
    color: #1f2937 !important
}

.text-gray-900 {
    color: #111827 !important
}

.text-primary {
    color: var(--qhrm-primary) !important
}

.text-primary-light {
    color: var(--qhrm-primary-light) !important
}

.text-primary-dark {
    color: var(--qhrm-primary-dark) !important
}

.text-purple {
    color: var(--qhrm-purple) !important
}

.text-purple-light {
    color: var(--qhrm-purple-light) !important
}

.text-purple-dark {
    color: var(--qhrm-purple-dark) !important
}

.text-blue {
    color: var(--qhrm-blue) !important
}

.text-blue-light {
    color: var(--qhrm-blue-light) !important
}

.text-blue-dark {
    color: var(--qhrm-blue-dark) !important
}

.text-red {
    color: #ef4444 !important
}

.text-red-light {
    color: #f87171 !important
}

.text-red-dark {
    color: #dc2626 !important
}

.text-green {
    color: #10b981 !important
}

.text-green-light {
    color: #34d399 !important
}

.text-green-dark {
    color: #059669 !important
}

.text-yellow {
    color: #f59e0b !important
}

.text-yellow-light {
    color: #fbbf24 !important
}

.text-yellow-dark {
    color: #d97706 !important
}

.text-orange {
    color: #f97316 !important
}

.text-orange-light {
    color: #fb923c !important
}

.text-orange-dark {
    color: #ea580c !important
}

.text-pink {
    color: #ec4899 !important
}

.text-pink-light {
    color: #f472b6 !important
}

.text-pink-dark {
    color: #db2777 !important
}

.bg-white {
    background-color: #fff !important
}

.bg-black {
    background-color: #000 !important
}

.bg-gray-50 {
    background-color: #f9fafb !important
}

.bg-gray-100 {
    background-color: #f3f4f6 !important
}

.bg-gray-200 {
    background-color: #e5e7eb !important
}

.bg-gray-300 {
    background-color: #d1d5db !important
}

.bg-gray-400 {
    background-color: #9ca3af !important
}

.bg-gray-500 {
    background-color: #6b7280 !important
}

.bg-gray-600 {
    background-color: #4b5563 !important
}

.bg-gray-700 {
    background-color: #374151 !important
}

.bg-gray-800 {
    background-color: #1f2937 !important
}

.bg-gray-900 {
    background-color: #111827 !important
}

.bg-primary {
    background-color: var(--qhrm-primary) !important
}

.bg-primary-light {
    background-color: var(--qhrm-primary-light) !important
}

.bg-primary-dark {
    background-color: var(--qhrm-primary-dark) !important
}

.bg-purple {
    background-color: var(--qhrm-purple) !important
}

.bg-purple-light {
    background-color: var(--qhrm-purple-light) !important
}

.bg-purple-dark {
    background-color: var(--qhrm-purple-dark) !important
}

.bg-blue {
    background-color: var(--qhrm-blue) !important
}

.bg-blue-light {
    background-color: var(--qhrm-blue-light) !important
}

.bg-blue-dark {
    background-color: var(--qhrm-blue-dark) !important
}

.bg-red {
    background-color: #ef4444 !important
}

.bg-red-light {
    background-color: #f87171 !important
}

.bg-red-dark {
    background-color: #dc2626 !important
}

.bg-green {
    background-color: #10b981 !important
}

.bg-green-light {
    background-color: #34d399 !important
}

.bg-green-dark {
    background-color: #059669 !important
}

.bg-yellow {
    background-color: #f59e0b !important
}

.bg-yellow-light {
    background-color: #fbbf24 !important
}

.bg-yellow-dark {
    background-color: #d97706 !important
}

.bg-orange {
    background-color: #f97316 !important
}

.bg-orange-light {
    background-color: #fb923c !important
}

.bg-orange-dark {
    background-color: #ea580c !important
}

.bg-pink {
    background-color: #ec4899 !important
}

.bg-pink-light {
    background-color: #f472b6 !important
}

.bg-pink-dark {
    background-color: #db2777 !important
}

.bg-transparent {
    background-color: #0000 !important
}

.btn-primary {
    background-color: var(--button-primary) !important;
    color: #fff !important;
    border-color: var(--button-primary) !important
}

    .btn-primary:hover:not(:disabled) {
        background-color: var(--button-primary-hover) !important;
        border-color: var(--button-primary-hover) !important
    }

.btn-secondary {
    color: #fff !important;
    background-color: #6b7280 !important;
    border-color: #6b7280 !important
}

    .btn-secondary:hover:not(:disabled) {
        background-color: #4b5563 !important;
        border-color: #4b5563 !important
    }

.btn-success {
    color: #fff !important;
    background-color: #10b981 !important;
    border-color: #10b981 !important
}

    .btn-success:hover:not(:disabled) {
        background-color: #059669 !important;
        border-color: #059669 !important
    }

.btn-danger {
    color: #fff !important;
    background-color: #ef4444 !important;
    border-color: #ef4444 !important
}

    .btn-danger:hover:not(:disabled) {
        background-color: #dc2626 !important;
        border-color: #dc2626 !important
    }

.btn-warning {
    color: #fff !important;
    background-color: #f59e0b !important;
    border-color: #f59e0b !important
}

    .btn-warning:hover:not(:disabled) {
        background-color: #d97706 !important;
        border-color: #d97706 !important
    }

.btn-info {
    background-color: var(--qhrm-blue) !important;
    color: #fff !important;
    border-color: var(--qhrm-blue) !important
}

    .btn-info:hover:not(:disabled) {
        background-color: var(--qhrm-blue-dark) !important;
        border-color: var(--qhrm-blue-dark) !important
    }

.btn-light {
    color: #111827 !important;
    background-color: #f3f4f6 !important;
    border-color: #d1d5db !important
}

    .btn-light:hover:not(:disabled) {
        background-color: #e5e7eb !important;
        border-color: #9ca3af !important
    }

.btn-dark {
    color: #fff !important;
    background-color: #111827 !important;
    border-color: #111827 !important
}

    .btn-dark:hover:not(:disabled) {
        background-color: #1f2937 !important;
        border-color: #1f2937 !important
    }

.btn-outline-primary {
    color: var(--button-primary) !important;
    border-color: var(--button-primary) !important;
    background-color: #0000 !important
}

    .btn-outline-primary:hover:not(:disabled) {
        background-color: var(--button-primary) !important;
        color: #fff !important
    }

.btn-outline-secondary {
    color: #6b7280 !important;
    background-color: #0000 !important;
    border-color: #6b7280 !important
}

    .btn-outline-secondary:hover:not(:disabled) {
        color: #fff !important;
        background-color: #6b7280 !important
    }

.btn-outline-success {
    color: #10b981 !important;
    background-color: #0000 !important;
    border-color: #10b981 !important
}

    .btn-outline-success:hover:not(:disabled) {
        color: #fff !important;
        background-color: #10b981 !important
    }

.btn-outline-danger {
    color: #ef4444 !important;
    background-color: #0000 !important;
    border-color: #ef4444 !important
}

    .btn-outline-danger:hover:not(:disabled) {
        color: #fff !important;
        background-color: #ef4444 !important
    }

.d-none {
    display: none !important
}

.d-inline {
    display: inline !important
}

.d-inline-block {
    display: inline-block !important
}

.d-block {
    display: block !important
}

.d-flex {
    display: flex !important
}

.d-grid {
    display: grid !important
}

.d-table {
    display: table !important
}

.flex-row {
    flex-direction: row !important
}

.flex-column {
    flex-direction: column !important
}

.flex-wrap {
    flex-wrap: wrap !important
}

.flex-nowrap {
    flex-wrap: nowrap !important
}

.justify-start {
    justify-content: flex-start !important
}

.justify-end {
    justify-content: flex-end !important
}

.justify-center {
    justify-content: center !important
}

.justify-between {
    justify-content: space-between !important
}

.justify-around {
    justify-content: space-around !important
}

.align-start {
    align-items: flex-start !important
}

.align-end {
    align-items: flex-end !important
}

.align-center {
    align-items: center !important
}

.align-stretch {
    align-items: stretch !important
}

.hover\:align-center:hover {
    align-items: center !important
}

.hover\:align-end:hover {
    align-items: flex-end !important
}

.hover\:align-start:hover {
    align-items: flex-start !important
}

.hover\:justify-center:hover {
    justify-content: center !important
}

.hover\:justify-end:hover {
    justify-content: flex-end !important
}

.focus\:align-center:focus {
    align-items: center !important
}

.focus\:align-end:focus {
    align-items: flex-end !important
}

.active\:align-center:active {
    align-items: center !important
}

.active\:align-end:active {
    align-items: flex-end !important
}

.gap-1 {
    gap: .25rem !important
}

.gap-2 {
    gap: .5rem !important
}

.gap-3 {
    gap: .75rem !important
}

.gap-4 {
    gap: 1rem !important
}

.gap-5 {
    gap: 1.25rem !important
}

.gap-6 {
    gap: 1.5rem !important
}

.gap-8 {
    gap: 2rem !important
}

.gap-10 {
    gap: 2.5rem !important
}

.gap-12 {
    gap: 3rem !important
}

.gap-16 {
    gap: 4rem !important
}

.gap-20 {
    gap: 5rem !important
}

.gap-24 {
    gap: 6rem !important
}

.grid {
    display: grid !important
}

.grid-inline {
    display: inline-grid !important
}

.grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important
}

.grid-cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important
}

.grid-cols-4 {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important
}

.grid-cols-5 {
    grid-template-columns: repeat(5,minmax(0,1fr)) !important
}

.grid-cols-6 {
    grid-template-columns: repeat(6,minmax(0,1fr)) !important
}

.grid-cols-7 {
    grid-template-columns: repeat(7,minmax(0,1fr)) !important
}

.grid-cols-8 {
    grid-template-columns: repeat(8,minmax(0,1fr)) !important
}

.grid-cols-9 {
    grid-template-columns: repeat(9,minmax(0,1fr)) !important
}

.grid-cols-10 {
    grid-template-columns: repeat(10,minmax(0,1fr)) !important
}

.grid-cols-11 {
    grid-template-columns: repeat(11,minmax(0,1fr)) !important
}

.grid-cols-12 {
    grid-template-columns: repeat(12,minmax(0,1fr)) !important
}

.grid-cols-none {
    grid-template-columns: none !important
}

.grid-cols-subgrid {
    grid-template-columns: subgrid !important
}

.grid-rows-1 {
    grid-template-rows: repeat(1,minmax(0,1fr)) !important
}

.grid-rows-2 {
    grid-template-rows: repeat(2,minmax(0,1fr)) !important
}

.grid-rows-3 {
    grid-template-rows: repeat(3,minmax(0,1fr)) !important
}

.grid-rows-4 {
    grid-template-rows: repeat(4,minmax(0,1fr)) !important
}

.grid-rows-5 {
    grid-template-rows: repeat(5,minmax(0,1fr)) !important
}

.grid-rows-6 {
    grid-template-rows: repeat(6,minmax(0,1fr)) !important
}

.grid-rows-none {
    grid-template-rows: none !important
}

.grid-rows-subgrid {
    grid-template-rows: subgrid !important
}

.grid-flow-row {
    grid-auto-flow: row !important
}

.grid-flow-col {
    grid-auto-flow: column !important
}

.grid-flow-dense, .grid-flow-row-dense {
    grid-auto-flow: dense !important
}

.grid-flow-col-dense {
    grid-auto-flow: column dense !important
}

.auto-cols-auto {
    grid-auto-columns: auto !important
}

.auto-cols-min {
    grid-auto-columns: min-content !important
}

.auto-cols-max {
    grid-auto-columns: max-content !important
}

.auto-cols-fr {
    grid-auto-columns: minmax(0,1fr) !important
}

.auto-rows-auto {
    grid-auto-rows: auto !important
}

.auto-rows-min {
    grid-auto-rows: min-content !important
}

.auto-rows-max {
    grid-auto-rows: max-content !important
}

.auto-rows-fr {
    grid-auto-rows: minmax(0,1fr) !important
}

.col-auto {
    grid-column: auto !important
}

.col-span-1 {
    grid-column: span 1/span 1 !important
}

.col-span-2 {
    grid-column: span 2/span 2 !important
}

.col-span-3 {
    grid-column: span 3/span 3 !important
}

.col-span-4 {
    grid-column: span 4/span 4 !important
}

.col-span-5 {
    grid-column: span 5/span 5 !important
}

.col-span-6 {
    grid-column: span 6/span 6 !important
}

.col-span-7 {
    grid-column: span 7/span 7 !important
}

.col-span-8 {
    grid-column: span 8/span 8 !important
}

.col-span-9 {
    grid-column: span 9/span 9 !important
}

.col-span-10 {
    grid-column: span 10/span 10 !important
}

.col-span-11 {
    grid-column: span 11/span 11 !important
}

.col-span-12 {
    grid-column: span 12/span 12 !important
}

.col-span-full {
    grid-column: 1/-1 !important
}

.col-start-1 {
    grid-column-start: 1 !important
}

.col-start-2 {
    grid-column-start: 2 !important
}

.col-start-3 {
    grid-column-start: 3 !important
}

.col-start-4 {
    grid-column-start: 4 !important
}

.col-start-5 {
    grid-column-start: 5 !important
}

.col-start-6 {
    grid-column-start: 6 !important
}

.col-start-7 {
    grid-column-start: 7 !important
}

.col-start-8 {
    grid-column-start: 8 !important
}

.col-start-9 {
    grid-column-start: 9 !important
}

.col-start-10 {
    grid-column-start: 10 !important
}

.col-start-11 {
    grid-column-start: 11 !important
}

.col-start-12 {
    grid-column-start: 12 !important
}

.col-start-13 {
    grid-column-start: 13 !important
}

.col-start-auto {
    grid-column-start: auto !important
}

.col-end-1 {
    grid-column-end: 1 !important
}

.col-end-2 {
    grid-column-end: 2 !important
}

.col-end-3 {
    grid-column-end: 3 !important
}

.col-end-4 {
    grid-column-end: 4 !important
}

.col-end-5 {
    grid-column-end: 5 !important
}

.col-end-6 {
    grid-column-end: 6 !important
}

.col-end-7 {
    grid-column-end: 7 !important
}

.col-end-8 {
    grid-column-end: 8 !important
}

.col-end-9 {
    grid-column-end: 9 !important
}

.col-end-10 {
    grid-column-end: 10 !important
}

.col-end-11 {
    grid-column-end: 11 !important
}

.col-end-12 {
    grid-column-end: 12 !important
}

.col-end-13 {
    grid-column-end: 13 !important
}

.col-end-auto {
    grid-column-end: auto !important
}

.row-auto {
    grid-row: auto !important
}

.row-span-1 {
    grid-row: span 1/span 1 !important
}

.row-span-2 {
    grid-row: span 2/span 2 !important
}

.row-span-3 {
    grid-row: span 3/span 3 !important
}

.row-span-4 {
    grid-row: span 4/span 4 !important
}

.row-span-5 {
    grid-row: span 5/span 5 !important
}

.row-span-6 {
    grid-row: span 6/span 6 !important
}

.row-span-full {
    grid-row: 1/-1 !important
}

.row-start-1 {
    grid-row-start: 1 !important
}

.row-start-2 {
    grid-row-start: 2 !important
}

.row-start-3 {
    grid-row-start: 3 !important
}

.row-start-4 {
    grid-row-start: 4 !important
}

.row-start-5 {
    grid-row-start: 5 !important
}

.row-start-6 {
    grid-row-start: 6 !important
}

.row-start-7 {
    grid-row-start: 7 !important
}

.row-start-auto {
    grid-row-start: auto !important
}

.row-end-1 {
    grid-row-end: 1 !important
}

.row-end-2 {
    grid-row-end: 2 !important
}

.row-end-3 {
    grid-row-end: 3 !important
}

.row-end-4 {
    grid-row-end: 4 !important
}

.row-end-5 {
    grid-row-end: 5 !important
}

.row-end-6 {
    grid-row-end: 6 !important
}

.row-end-7 {
    grid-row-end: 7 !important
}

.row-end-auto {
    grid-row-end: auto !important
}

.gap-x-0 {
    column-gap: 0 !important
}

.gap-x-1 {
    column-gap: .25rem !important
}

.gap-x-2 {
    column-gap: .5rem !important
}

.gap-x-3 {
    column-gap: .75rem !important
}

.gap-x-4 {
    column-gap: 1rem !important
}

.gap-x-5 {
    column-gap: 1.25rem !important
}

.gap-x-6 {
    column-gap: 1.5rem !important
}

.gap-x-8 {
    column-gap: 2rem !important
}

.gap-x-10 {
    column-gap: 2.5rem !important
}

.gap-x-12 {
    column-gap: 3rem !important
}

.gap-x-16 {
    column-gap: 4rem !important
}

.gap-x-20 {
    column-gap: 5rem !important
}

.gap-x-24 {
    column-gap: 6rem !important
}

.gap-y-0 {
    row-gap: 0 !important
}

.gap-y-1 {
    row-gap: .25rem !important
}

.gap-y-2 {
    row-gap: .5rem !important
}

.gap-y-3 {
    row-gap: .75rem !important
}

.gap-y-4 {
    row-gap: 1rem !important
}

.gap-y-5 {
    row-gap: 1.25rem !important
}

.gap-y-6 {
    row-gap: 1.5rem !important
}

.gap-y-8 {
    row-gap: 2rem !important
}

.gap-y-10 {
    row-gap: 2.5rem !important
}

.gap-y-12 {
    row-gap: 3rem !important
}

.gap-y-16 {
    row-gap: 4rem !important
}

.gap-y-20 {
    row-gap: 5rem !important
}

.gap-y-24 {
    row-gap: 6rem !important
}

.justify-items-start {
    justify-items: start !important
}

.justify-items-end {
    justify-items: end !important
}

.justify-items-center {
    justify-items: center !important
}

.justify-items-stretch {
    justify-items: stretch !important
}

.items-start {
    align-items: flex-start !important
}

.items-end {
    align-items: flex-end !important
}

.items-center {
    align-items: center !important
}

.items-baseline {
    align-items: baseline !important
}

.items-stretch {
    align-items: stretch !important
}

.content-start {
    align-content: flex-start !important
}

.content-end {
    align-content: flex-end !important
}

.content-center {
    align-content: center !important
}

.content-between {
    align-content: space-between !important
}

.content-around {
    align-content: space-around !important
}

.content-evenly {
    align-content: space-evenly !important
}

.content-stretch {
    align-content: stretch !important
}

.place-items-auto {
    place-items: auto !important
}

.place-items-start {
    place-items: start !important
}

.place-items-end {
    place-items: end !important
}

.place-items-center {
    place-items: center !important
}

.place-items-stretch {
    place-items: stretch stretch !important
}

.place-content-center {
    place-content: center !important
}

.place-content-start {
    place-content: start !important
}

.place-content-end {
    place-content: end !important
}

.place-content-between {
    place-content: space-between !important
}

.place-content-around {
    place-content: space-around !important
}

.place-content-evenly {
    place-content: space-evenly !important
}

.place-content-stretch {
    place-content: stretch !important
}

.place-self-auto {
    place-self: auto !important
}

.place-self-start {
    place-self: start !important
}

.place-self-end {
    place-self: end !important
}

.place-self-center {
    place-self: center !important
}

.place-self-stretch {
    place-self: stretch stretch !important
}

.grid-areas-none {
    grid-template-areas: none !important
}

.grid-auto-fit {
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr)) !important
}

.grid-auto-fill {
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr)) !important
}

.grid-fit-250 {
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr)) !important
}

.grid-fit-280 {
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) !important
}

.grid-fit-300 {
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr)) !important
}

.grid-fit-350 {
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr)) !important
}

.grid-fit-400 {
    grid-template-columns: repeat(auto-fill,minmax(400px,1fr)) !important
}

.w-auto {
    width: auto !important
}

.w-full {
    width: 100% !important
}

.w-1\/2 {
    width: 50% !important
}

.w-1\/3 {
    width: 33.3333% !important
}

.w-2\/3 {
    width: 66.6667% !important
}

.w-1\/4 {
    width: 25% !important
}

.w-3\/4 {
    width: 75% !important
}

.w-screen {
    width: 100vw !important
}

.h-auto {
    height: auto !important
}

.h-full {
    height: 100% !important
}

.h-screen {
    height: 100vh !important
}

.h-1\/2 {
    height: 50% !important
}

.h-1\/3 {
    height: 33.3333% !important
}

.h-2\/3 {
    height: 66.6667% !important
}

.rounded-none {
    border-radius: 0 !important
}

.rounded-sm {
    border-radius: .125rem !important
}

.rounded {
    border-radius: .25rem !important
}

.rounded-md {
    border-radius: .375rem !important
}

.rounded-lg {
    border-radius: .5rem !important
}

.rounded-xl {
    border-radius: .75rem !important
}

.rounded-2xl {
    border-radius: 1rem !important
}

.rounded-full {
    border-radius: 9999px !important
}

.border {
    border-width: 1px !important
}

.border-0 {
    border-width: 0 !important
}

.border-2 {
    border-width: 2px !important
}

.border-4 {
    border-width: 4px !important
}

.border-t {
    border-top-width: 1px !important
}

.border-r {
    border-right-width: 1px !important
}

.border-b {
    border-bottom-width: 1px !important
}

.border-l {
    border-left-width: 1px !important
}

.border-white {
    border-color: #fff !important
}

.border-gray-200 {
    border-color: #e5e7eb !important
}

.border-gray-300 {
    border-color: #d1d5db !important
}

.border-gray-400 {
    border-color: #9ca3af !important
}

.border-primary {
    border-color: var(--qhrm-primary) !important
}

.border-purple {
    border-color: var(--qhrm-purple) !important
}

.border-blue {
    border-color: var(--qhrm-blue) !important
}

.border-transparent {
    border-color: #0000 !important
}

.text-left {
    text-align: left !important
}

.text-center {
    text-align: center !important
}

.text-right {
    text-align: right !important
}

.text-justify {
    text-align: justify !important
}

.uppercase {
    text-transform: uppercase !important
}

.lowercase {
    text-transform: lowercase !important
}

.capitalize {
    text-transform: capitalize !important
}

.normal-case {
    text-transform: none !important
}

.underline {
    text-decoration: underline !important
}

.line-through {
    text-decoration: line-through !important
}

.no-underline {
    text-decoration: none !important
}

.overflow-auto {
    overflow: auto !important
}

.overflow-hidden {
    overflow: hidden !important
}

.overflow-visible {
    overflow: visible !important
}

.overflow-scroll {
    overflow: scroll !important
}

.overflow-x-auto {
    overflow-x: auto !important
}

.overflow-y-auto {
    overflow-y: auto !important
}

.overflow-x-hidden {
    overflow-x: hidden !important
}

.overflow-y-hidden {
    overflow-y: hidden !important
}

.position-static {
    position: static !important
}

.position-relative {
    position: relative !important
}

.position-absolute {
    position: absolute !important
}

.position-fixed {
    position: fixed !important
}

.position-sticky {
    position: sticky !important
}

.z-0 {
    z-index: 0 !important
}

.z-10 {
    z-index: 10 !important
}

.z-20 {
    z-index: 20 !important
}

.z-30 {
    z-index: 30 !important
}

.z-40 {
    z-index: 40 !important
}

.z-50 {
    z-index: 50 !important
}

.cursor-auto {
    cursor: auto !important
}

.cursor-default {
    cursor: default !important
}

.cursor-pointer {
    cursor: pointer !important
}

.cursor-wait {
    cursor: wait !important
}

.cursor-text {
    cursor: text !important
}

.cursor-move {
    cursor: move !important
}

.cursor-not-allowed {
    cursor: not-allowed !important
}

.opacity-0 {
    opacity: 0 !important
}

.opacity-25 {
    opacity: .25 !important
}

.opacity-50 {
    opacity: .5 !important
}

.opacity-75 {
    opacity: .75 !important
}

.opacity-100 {
    opacity: 1 !important
}

.shadow-none {
    box-shadow: none !important
}

.shadow-sm {
    box-shadow: 0 1px 2px #0000000d !important
}

.shadow {
    box-shadow: 0 1px 3px #0000001a,0 1px 2px #0000000f !important
}

.shadow-md {
    box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f !important
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d !important
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a !important
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px #00000040 !important
}

.transition {
    transition-property: all !important;
    transition-duration: .15s !important;
    transition-timing-function: cubic-bezier(.4,0,.2,1) !important
}

.transition-none {
    transition-property: none !important
}

.transition-all {
    transition-property: all !important
}

.transition-colors {
    transition-property: color,background-color,border-color !important
}

.transition-opacity {
    transition-property: opacity !important
}

.transition-transform {
    transition-property: transform !important
}

.transform {
    transform: translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y)) !important
}

.scale-0 {
    transform: scale(0) !important
}

.scale-50 {
    transform: scale(.5) !important
}

.scale-75 {
    transform: scale(.75) !important
}

.scale-100 {
    transform: scale(1) !important
}

.scale-105 {
    transform: scale(1.05) !important
}

.scale-110 {
    transform: scale(1.1) !important
}

.scale-125 {
    transform: scale(1.25) !important
}

.scale-150 {
    transform: scale(1.5) !important
}

.object-contain {
    object-fit: contain !important
}

.object-cover {
    object-fit: cover !important
}

.object-fill {
    object-fit: fill !important
}

.object-none {
    object-fit: none !important
}

.object-scale-down {
    object-fit: scale-down !important
}

.hero-section-bg {
    background: linear-gradient(#fff,#f0f7ff 30%,#e0f2fe 60%,#f0f9ff);
    padding-top: 80px;
    padding-bottom: 100px
}

.hero-gradient-orb-1 {
    z-index: 0;
    filter: blur(40px);
    background: radial-gradient(circle,#3b82f626 0,#3b82f60d 40%,#0000 70%);
    border-radius: 50%;
    width: 600px;
    height: 600px;
    top: 10%;
    right: 5%
}

.hero-gradient-orb-2 {
    z-index: 0;
    filter: blur(50px);
    background: radial-gradient(circle,#93c5fd33 0,#93c5fd14 40%,#0000 70%);
    border-radius: 50%;
    width: 500px;
    height: 500px;
    bottom: 10%;
    left: 5%
}

.hero-gradient-orb-3 {
    z-index: 0;
    filter: blur(60px);
    background: radial-gradient(circle,#60a5fa14 0,#0000 60%);
    border-radius: 50%;
    width: 800px;
    height: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.hero-grid-overlay {
    z-index: 0;
    opacity: .5;
    background-image: linear-gradient(#3b82f608 1px,#0000 0),linear-gradient(90deg,#3b82f608 1px,#0000 0);
    background-size: 50px 50px;
    inset: 0
}

.hero-content-wrapper {
    min-height: 600px
}

.hero-content-left {
    flex: 52%;
    min-width: 320px;
    padding-top: 2rem
}

.hero-badge {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: linear-gradient(135deg,#3b82f61a,#93c5fd26);
    border: 1px solid #3b82f633
}

.hero-icon-container {
    width: 120px;
    height: 120px;
    position: relative
}

.hero-icon-glow {
    background: radial-gradient(circle,#3b82f64d 0,#0000 70%);
    border-radius: 50%;
    width: 140px;
    height: 140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.hero-icon-box {
    background: linear-gradient(135deg,#3b82f6,#2563eb 50%,#1e40af);
    width: 120px;
    height: 120px;
    box-shadow: 0 20px 60px #3b82f666,inset 0 0 0 1px #ffffff1a
}

.hero-heading {
    -webkit-text-fill-color: transparent;
    letter-spacing: -.02em;
    background: linear-gradient(135deg,#1e3a8a,#3b82f6 50%,#60a5fa);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(2.5rem,5vw,4rem);
    line-height: 1.1
}

.hero-heading-subtitle {
    opacity: .9;
    font-size: .7em
}

.hero-description {
    color: #475569;
    max-width: 580px;
    font-size: 1.25rem;
    font-weight: 400
}

.hero-feature-pill {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor: pointer;
    background: #ffffffe6;
    border: 1px solid #3b82f61a;
    transition: all .3s cubic-bezier(.4,0,.2,1)
}

    .hero-feature-pill:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px #3b82f626
    }

.hero-feature-pill-icon {
    background: linear-gradient(135deg,#3b82f626,#93c5fd33)
}

.hero-feature-pill-text {
    color: #1e293b;
    font-size: .95rem
}

.hero-btn-primary {
    cursor: pointer;
    background: linear-gradient(135deg,#3b82f6,#2563eb);
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    display: flex;
    box-shadow: 0 10px 30px #3b82f666
}

    .hero-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 40px #3b82f680
    }

.hero-btn-secondary {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #3b82f6;
    cursor: pointer;
    background: #ffffffe6;
    border: 2px solid #3b82f633;
    font-size: 1rem;
    transition: all .3s cubic-bezier(.4,0,.2,1)
}

    .hero-btn-secondary:hover {
        background: #fff;
        border-color: #3b82f666;
        transform: translateY(-2px)
    }

.hero-image-wrapper {
    flex: 45%;
    min-width: 320px
}

.hero-image-container {
    width: 100%;
    max-width: 650px
}

.hero-image-decorative-1 {
    z-index: -1;
    filter: blur(20px);
    background: linear-gradient(135deg,#3b82f633,#93c5fd26);
    border-radius: 30px;
    width: 120px;
    height: 120px;
    top: -30px;
    right: -30px;
    transform: rotate(12deg)
}

.hero-image-decorative-2 {
    z-index: -1;
    filter: blur(25px);
    background: linear-gradient(135deg,#93c5fd33,#3b82f61a);
    border-radius: 40px;
    width: 150px;
    height: 150px;
    bottom: -40px;
    left: -40px;
    transform: rotate(-8deg)
}

.hero-image-box {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: linear-gradient(135deg,#fffffff2,#fffffffa);
    border: 1px solid #3b82f61a;
    border-radius: 32px;
    box-shadow: 0 25px 80px #3b82f626,inset 0 0 0 1px #ffffff80
}

.hero-image {
    object-fit: contain;
    border-radius: 24px;
    width: 100%;
    height: auto
}

.hero-image-badge-top {
    background: linear-gradient(135deg,#3b82f6,#2563eb);
    border: 4px solid #fff;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    top: -20px;
    right: -20px;
    box-shadow: 0 15px 40px #3b82f666
}

.hero-image-badge-bottom {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #fffffff2;
    border: 1px solid #3b82f633;
    bottom: -15px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 10px 30px #0000001a
}

.hero-content-z-index {
    z-index: 1
}

.icon-size-16 {
    width: 16px;
    height: 16px
}

.icon-size-20 {
    width: 20px;
    height: 20px
}

.icon-size-24 {
    width: 24px;
    height: 24px
}

.icon-size-28 {
    width: 28px;
    height: 28px
}

.icon-size-32 {
    width: 32px;
    height: 32px
}

.icon-size-40 {
    width: 40px;
    height: 40px
}

.icon-size-44 {
    width: 44px;
    height: 44px
}

.icon-size-48 {
    width: 48px;
    height: 48px
}

.icon-size-64 {
    width: 64px;
    height: 64px
}

.icon-container-56 {
    width: 56px;
    height: 56px
}

.icon-container-flex-shrink {
    flex-shrink: 0
}

.gradient-purple-pink {
    background: linear-gradient(135deg,#6366f1,#8b5cf6)
}

.gradient-orange {
    background: linear-gradient(135deg,#fbbf24,#f97316)
}

.gradient-blue {
    background: linear-gradient(135deg,#3b82f6,#4f46e5)
}

.gradient-green {
    background: linear-gradient(135deg,#10b981,#14b8a6)
}

.gradient-purple-magenta {
    background: linear-gradient(135deg,#a855f7,#ec4899)
}

.gradient-red-pink {
    background: linear-gradient(135deg,#ef4444,#ec4899)
}

.gradient-blue-cyan {
    background: linear-gradient(135deg,#3b82f6,#06b6d4)
}

.border-primary-light {
    border-color: #6366f133 !important
}

.mobile-content-flex {
    flex: 400px
}

.border-left-gold {
    border-left-color: #d4af37
}

.bg-gold {
    background-color: #d4af37
}

.grid-auto-fit {
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 1.5rem
}

.border-top-primary {
    border-top-style: solid;
    border-top-width: 4px
}

.star-filled {
    fill: #fbbf24
}

.icon-size-14 {
    width: 14px;
    height: 14px
}

.banner-layout {
    align-items: center;
    gap: 3rem;
    min-height: 600px;
    display: flex
}

.banner-content-left {
    flex-direction: column;
    max-width: 600px
}

.banner-content-left, .banner-image-right {
    flex: 50%;
    justify-content: center;
    display: flex
}

.banner-image-right {
    align-items: center;
    position: relative
}

@media (max-width:1024px) {
    .banner-layout {
        flex-direction: column;
        gap: 2rem;
        min-height: auto;
        padding: 2rem 0
    }

    .banner-content-left {
        text-align: center;
        max-width: 100%
    }

    .banner-image-right {
        width: 100%
    }
}

.qhrm-banner-badge {
    color: #6366f1;
    background: 0 0;
    border: 1.5px solid #6366f14d;
    border-radius: 8px;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.5rem;
    padding: 10px 20px;
    font-size: .9rem;
    font-weight: 600;
    display: inline-flex
}

.qhrm-banner-heading {
    color: #1e293b;
    letter-spacing: -.02em;
    margin-bottom: 1.5rem;
    font-size: clamp(2.5rem,5vw,3.5rem);
    font-weight: 700;
    line-height: 1.2
}

.qhrm-banner-description {
    color: #475569;
    max-width: 550px;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.8
}

.qhrm-btn-demo {
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg,#6366f1,#4f46e5);
    border: none;
    border-radius: 8px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    transition: all .3s;
    box-shadow: 0 4px 14px #6366f14d
}

    .qhrm-btn-demo:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px #6366f166
    }

.qhrm-btn-quote {
    color: #6366f1;
    cursor: pointer;
    background: #fff;
    border: 2px solid #6366f1;
    border-radius: 8px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    transition: all .3s
}

    .qhrm-btn-quote:hover {
        color: #fff;
        background: #6366f1;
        transform: translateY(-2px)
    }

.mobile-screens-container {
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 600px;
    height: 600px;
    display: flex;
    position: relative
}

.modern-mobile-container .mobile-screens-container {
    height: 650px
}

.mobile-screen {
    background: #fff;
    border: 8px solid #1e293b;
    border-radius: 24px;
    position: absolute;
    overflow: hidden;
    box-shadow: 0 20px 60px #00000026
}

.mobile-screen-1 {
    z-index: 3;
    width: 280px;
    height: 560px;
    transform: translate(-20px)rotate(-5deg)
}

.mobile-screen-2 {
    z-index: 2;
    width: 280px;
    height: 560px;
    transform: translate(0)rotate(2deg)
}

.mobile-screen-3 {
    z-index: 1;
    width: 280px;
    height: 560px;
    transform: translate(20px)rotate(5deg)
}

.mobile-screen-4 {
    z-index: 4;
    width: 200px;
    height: 400px;
    top: -40px;
    right: -30px;
    transform: rotate(-8deg)
}

.mobile-screen-5 {
    z-index: 4;
    width: 180px;
    height: 360px;
    bottom: -30px;
    right: -20px;
    transform: rotate(8deg)
}

.mobile-screen img, .mobile-screen-image {
    object-fit: cover;
    width: 100%;
    height: 100%
}

@media (max-width:1024px) {
    .mobile-screens-container {
        height: 500px
    }

    .mobile-screen-1, .mobile-screen-2, .mobile-screen-3 {
        width: 240px;
        height: 480px
    }

    .mobile-screen-4, .mobile-screen-5 {
        display: none
    }
}

@media (max-width:768px) {
    .mobile-screens-container {
        height: 400px
    }

    .mobile-screen-1 {
        width: 200px;
        height: 400px;
        transform: translate(0)rotate(0)
    }

    .mobile-screen-2, .mobile-screen-3 {
        display: none
    }
}

.bg-light-gradient {
    background: linear-gradient(#fff,#f8fafc 25%,#f1f5f9 50%,#e2e8f0 75%,#f0f7ff)
}

.bg-light-gradient-blue {
    background: linear-gradient(#fff,#f0f7ff 30%,#e0f2fe 60%,#f0f9ff)
}

.bg-cool-gradient {
    background: linear-gradient(135deg,#667eea,#764ba2 25%,#f093fb 50%,#4facfe 75%,#00f2fe) 0 0/400% 400%;
    animation: gradient-shift 15s infinite
}

@keyframes gradient-shift {
    0% {
        background-position: 0
    }

    50% {
        background-position: 100%
    }

    to {
        background-position: 0
    }
}

.bg-cool-gradient-purple {
    background: linear-gradient(135deg,#667eea,#764ba2 50%,#f093fb);
    position: relative;
    overflow: hidden
}

    .bg-cool-gradient-purple:before {
        content: "";
        z-index: 0;
        background: linear-gradient(135deg,#667eea1a,#764ba21a 50%,#f093fb1a);
        position: absolute;
        inset: 0
    }

.modern-banner-bg {
    background: linear-gradient(135deg,#667eea,#764ba2 25%,#f093fb 50%,#4facfe 75%,#00f2fe);
    position: relative;
    overflow: hidden
}

    .modern-banner-bg:before {
        content: "";
        z-index: 0;
        background: radial-gradient(circle,#ffffff1a 0,#0000 70%);
        width: 200%;
        height: 200%;
        animation: rotate-bg 20s linear infinite;
        position: absolute;
        top: -50%;
        right: -50%
    }

    .modern-banner-bg:after {
        content: "";
        z-index: 0;
        background: radial-gradient(circle,#667eea33 0,#0000 70%);
        width: 150%;
        height: 150%;
        animation: rotate-bg-reverse 25s linear infinite;
        position: absolute;
        bottom: -30%;
        left: -30%
    }

@keyframes rotate-bg {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes rotate-bg-reverse {
    0% {
        transform: rotate(1turn)
    }

    to {
        transform: rotate(0)
    }
}

.modern-banner-content {
    z-index: 1;
    position: relative
}

.modern-banner-heading {
    -webkit-text-fill-color: transparent;
    letter-spacing: -.03em;
    text-shadow: 0 4px 20px #ffffff4d;
    background: linear-gradient(135deg,#fff,#f0f0ff 50%,#fff);
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: 1.5rem;
    font-size: clamp(2.5rem,6vw,4rem);
    font-weight: 800;
    line-height: 1.1
}

.modern-banner-description {
    color: #fffffff2;
    text-shadow: 0 2px 10px #0000001a;
    max-width: 580px;
    margin-bottom: 2.5rem;
    font-size: 1.15rem;
    line-height: 1.8
}

.modern-badge {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    background: #ffffff26;
    border: 1.5px solid #ffffff4d;
    border-radius: 50px;
    align-items: center;
    gap: 8px;
    margin-bottom: 2rem;
    padding: 12px 24px;
    font-size: .9rem;
    font-weight: 600;
    display: inline-flex;
    box-shadow: 0 4px 15px #0000001a
}

.modern-btn-primary {
    color: #667eea;
    cursor: pointer;
    background: linear-gradient(135deg,#fff,#f0f0ff);
    border: none;
    border-radius: 50px;
    padding: 16px 36px;
    font-size: 1rem;
    font-weight: 700;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px #0003,0 0 #ffffff80
}

    .modern-btn-primary:before {
        content: "";
        background: linear-gradient(90deg,#0000,#fff6,#0000);
        width: 100%;
        height: 100%;
        transition: left .5s;
        position: absolute;
        top: 0;
        left: -100%
    }

    .modern-btn-primary:hover:before {
        left: 100%
    }

    .modern-btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 35px #0000004d,0 0 0 4px #ffffff4d
    }

.modern-btn-secondary {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    background: #ffffff1a;
    border: 2px solid #fff6;
    border-radius: 50px;
    padding: 16px 36px;
    font-size: 1rem;
    font-weight: 700;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 4px 15px #0000001a
}

    .modern-btn-secondary:hover {
        background: #fff3;
        border-color: #fff9;
        transform: translateY(-3px);
        box-shadow: 0 8px 25px #0003
    }

.modern-mobile-container {
    z-index: 1;
    position: relative
}

.modern-mobile-screen {
    background: #fff;
    border: 10px solid #1a1a2e;
    border-radius: 30px;
    transition: transform .3s;
    position: absolute;
    overflow: hidden;
    box-shadow: 0 25px 80px #0006,0 0 0 8px #ffffff1a
}

    .modern-mobile-screen:hover {
        z-index: 10;
        transform: scale(1.05)translateY(-10px)
    }

.modern-mobile-screen-1 {
    z-index: 3;
    width: 300px;
    height: 600px;
    animation: float-screen-1 6s ease-in-out infinite;
    transform: translate(-30px)rotate(-8deg)
}

.modern-mobile-screen-2 {
    z-index: 2;
    width: 300px;
    height: 600px;
    animation: float-screen-2 7s ease-in-out infinite;
    transform: translate(0)rotate(3deg)
}

.modern-mobile-screen-3 {
    z-index: 1;
    width: 300px;
    height: 600px;
    animation: float-screen-3 8s ease-in-out infinite;
    transform: translate(30px)rotate(8deg)
}

@keyframes float-screen-1 {
    0%,to {
        transform: translate(-30px)rotate(-8deg)translateY(0)
    }

    50% {
        transform: translate(-30px)rotate(-8deg)translateY(-15px)
    }
}

@keyframes float-screen-2 {
    0%,to {
        transform: translate(0)rotate(3deg)translateY(0)
    }

    50% {
        transform: translate(0)rotate(3deg)translateY(-20px)
    }
}

@keyframes float-screen-3 {
    0%,to {
        transform: translate(30px)rotate(8deg)translateY(0)
    }

    50% {
        transform: translate(30px)rotate(8deg)translateY(-15px)
    }
}

.modern-decorative-orb {
    filter: blur(60px);
    opacity: .6;
    z-index: 0;
    border-radius: 50%;
    position: absolute
}

.modern-orb-1 {
    background: radial-gradient(circle,#ffffff4d 0,#0000 70%);
    width: 500px;
    height: 500px;
    animation: pulse-orb 8s ease-in-out infinite;
    top: -100px;
    right: -100px
}

.modern-orb-2 {
    background: radial-gradient(circle,#667eea66 0,#0000 70%);
    width: 400px;
    height: 400px;
    animation: pulse-orb 10s ease-in-out infinite;
    bottom: -80px;
    left: -80px
}

.modern-orb-3 {
    background: radial-gradient(circle,#f093fb4d 0,#0000 70%);
    width: 350px;
    height: 350px;
    animation: pulse-orb-3 12s ease-in-out infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

@keyframes pulse-orb {
    0%,to {
        opacity: .6;
        transform: scale(1)
    }

    50% {
        opacity: .8;
        transform: scale(1.2)
    }
}

@keyframes pulse-orb-3 {
    0%,to {
        opacity: .6;
        transform: translate(-50%,-50%)scale(1)
    }

    50% {
        opacity: .8;
        transform: translate(-50%,-50%)scale(1.2)
    }
}

@media (max-width:1024px) {
    .modern-mobile-screen-1, .modern-mobile-screen-2, .modern-mobile-screen-3 {
        width: 250px;
        height: 500px
    }

    .modern-mobile-screen-1 {
        transform: translate(-20px)rotate(-5deg)
    }

    .modern-mobile-screen-3 {
        transform: translate(20px)rotate(5deg)
    }
}

@media (max-width:768px) {
    .modern-mobile-screen-1 {
        width: 220px;
        height: 440px;
        transform: translate(0)rotate(0)
    }

    .modern-mobile-screen-2, .modern-mobile-screen-3 {
        display: none
    }

    .modern-banner-heading {
        font-size: clamp(2rem,8vw,3rem)
    }

    .modern-banner-description {
        font-size: 1rem
    }
}

@keyframes blob {
    0% {
        transform: translate(0)scale(1)
    }

    33% {
        transform: translate(30px,-50px)scale(1.1)
    }

    66% {
        transform: translate(-20px,20px)scale(.9)
    }

    to {
        transform: translate(0)scale(1)
    }
}

.animate-blob {
    animation: blob 7s infinite
}

.animation-delay-2000 {
    animation-delay: 2s
}

.animation-delay-4000 {
    animation-delay: 4s
}

.expense-management-page {
    background: var(--background);
    min-height: 100vh
}

.hero-section {
    background: linear-gradient(135deg,#6366f1,#8b5cf6 50%,#a855f7);
    padding: 2rem 0;
    position: relative;
    overflow: hidden
}

    .hero-section:before {
        content: "";
        opacity: .3;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        animation: patternMove 20s linear infinite;
        position: absolute;
        inset: 0
    }

.hero-section-home:before {
    display: none
}

@media (max-width:768px) {
    .hero-section-home {
        padding: 0
    }
}

@media (max-width:640px) {
    .hero-section-home {
        padding: 0
    }
}

@keyframes patternMove {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(60px,60px)
    }
}

.logo-slider {
    position: relative;
    -webkit-mask-image: linear-gradient(90deg,#0000,#000 8% 92%,#0000);
    mask-image: linear-gradient(90deg,#0000,#000 8% 92%,#0000)
}

.logo-slider-track {
    width: max-content;
    animation: logoScroll 40s linear infinite
}

.logo-slider-track-reverse {
    animation: logoScrollReverse 38s linear infinite
}

.logo-slider-item {
    flex: none
}

.logo-slider:hover .logo-slider-track, .logo-slider:hover .logo-slider-track-reverse {
    animation-play-state: paused
}

.logo-card {
    min-width: 140px
}

    .logo-card:before {
        content: "";
        border-radius: inherit;
        opacity: 0;
        pointer-events: none;
        background: linear-gradient(135deg,#6366f126,#8b5cf614);
        padding: 1px;
        transition: opacity .3s;
        position: absolute;
        inset: -1px;
        -webkit-mask-image: linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);
        mask-image: linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);
        -webkit-mask-position: 0 0,0 0;
        mask-position: 0 0,0 0;
        -webkit-mask-size: auto,auto;
        mask-size: auto,auto;
        -webkit-mask-repeat: repeat,repeat;
        mask-repeat: repeat,repeat;
        -webkit-mask-clip: content-box,border-box;
        mask-clip: content-box,border-box;
        -webkit-mask-origin: content-box,border-box;
        mask-origin: content-box,border-box;
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        -webkit-mask-source-type: auto,auto;
        mask-mode: match-source,match-source
    }

    .logo-card:hover:before {
        opacity: 1
    }

@keyframes logoScroll {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

@keyframes logoScrollReverse {
    0% {
        transform: translate(-50%)
    }

    to {
        transform: translate(0)
    }
}

.hero-wrapper {
    z-index: 1;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
    animation: fadeInUp .8s ease-out;
    display: grid;
    position: relative
}

.hero-content {
    z-index: 1;
    text-align: left;
    animation: fadeInLeft .8s ease-out .2s both;
    position: relative
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate(-30px)
    }

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

.hero-title {
    color: #fff;
    text-shadow: 0 2px 10px #0000001a;
    margin: 0 0 1.5rem;
    font-size: clamp(2rem,4vw,3.5rem);
    font-weight: 800;
    line-height: 1.2
}

.brand-text {
    color: #4620b4;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    background: linear-gradient(135deg,#bd44e6,#0b60f5);
    -webkit-background-clip: text;
    background-clip: text
}

.hero-description {
    color: #fffffff2;
    margin: 0 0 2rem;
    font-size: clamp(1rem,1.5vw,1.25rem);
    line-height: 1.7
}

.hero-cta {
    margin-top: 2rem
}

    .hero-cta .btn {
        border-radius: .75rem;
        align-items: center;
        gap: .5rem;
        padding: .875rem 2rem;
        font-size: 1.1rem;
        font-weight: 600;
        text-decoration: none;
        transition: all .3s;
        display: inline-flex
    }

    .hero-cta .btn-primary {
        color: #1f2937;
        background: linear-gradient(135deg,#fbbf24,#f59e0b);
        box-shadow: 0 4px 15px #fbbf2466
    }

        .hero-cta .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px #fbbf2480
        }

    .hero-cta .icon-sm {
        width: 1.25rem;
        height: 1.25rem
    }

.hero-image {
    z-index: 1;
    animation: fadeInRight .8s ease-out .4s both;
    position: relative
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate(30px)
    }

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

.hero-image-wrapper {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative
}

    .hero-image-wrapper:before {
        content: "";
        z-index: -1;
        background: radial-gradient(circle,#ffffff1a 0,#0000 70%);
        border-radius: 50%;
        width: 120%;
        height: 120%;
        animation: pulse 3s ease-in-out infinite;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%)
    }

.hero-img {
    object-fit: contain;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #ffffff0d;
    border-radius: 1.5rem;
    width: 100%;
    height: auto;
    animation: float 6s ease-in-out infinite;
    box-shadow: 0 20px 60px #0000004d,0 0 0 1px #ffffff1a
}

.screenshots-section {
    background: linear-gradient(to bottom,var(--background)0,#f8f9fa 100%);
    padding: 5rem 0
}

.screenshots-card {
    background: linear-gradient(135deg,#fff,#f8f9fa);
    border: 1px solid #6366f11a;
    border-radius: 2rem;
    padding: 3.5rem;
    transition: transform .3s,box-shadow .3s;
    box-shadow: 0 10px 40px #00000014,0 2px 8px #0000000a
}

    .screenshots-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 60px #0000001f,0 4px 12px #0000000f
    }

.screenshots-content {
    flex-direction: column;
    gap: 3.5rem;
    margin-bottom: 2rem;
    display: flex
}

.screenshot-group {
    flex-direction: column;
    gap: 2rem;
    display: flex
}

.screenshot-group-title {
    color: #6366f1;
    align-items: center;
    gap: .75rem;
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex
}

.screenshot-grid {
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 2.5rem;
    display: grid
}

.screenshot-item {
    flex-direction: column;
    align-items: center;
    transition: transform .3s;
    display: flex
}

    .screenshot-item:hover {
        transform: translateY(-8px)
    }

.screenshot-image-wrapper {
    background: #fff;
    border-radius: 1.25rem;
    width: 100%;
    max-width: 280px;
    padding: .75rem;
    transition: all .3s;
    overflow: hidden;
    box-shadow: 0 12px 32px #00000026,0 4px 12px #0000001a
}

    .screenshot-image-wrapper:hover {
        transform: scale(1.02);
        box-shadow: 0 16px 48px #0003,0 6px 16px #00000026
    }

    .screenshot-image-wrapper.screenshot-web {
        max-width: 100%
    }

.screenshot-image {
    border-radius: .75rem;
    width: 100%;
    height: auto;
    transition: transform .3s;
    display: block
}

.screenshot-image-wrapper:hover .screenshot-image {
    transform: scale(1.05)
}

.screenshot-caption {
    margin-top: 1.25rem;
    font-weight: 500
}

.screenshot-caption, .screenshot-note {
    color: #6b7280;
    text-align: center;
    font-size: .875rem
}

.screenshot-note {
    background: linear-gradient(135deg,#fff,#f8f9fa);
    border: 1px solid #6366f11a;
    border-radius: 1rem;
    margin-top: 2.5rem;
    padding: 2rem
}

    .screenshot-note code {
        color: #6366f1;
        background: linear-gradient(135deg,#f3f4f6,#e5e7eb);
        border: 1px solid #6366f133;
        border-radius: .375rem;
        padding: .375rem .75rem;
        font-family: Courier New,monospace;
        font-weight: 600
    }

    .screenshot-note p {
        margin: .75rem 0
    }

        .screenshot-note p:first-child {
            margin-top: 0
        }

        .screenshot-note p:last-child {
            margin-bottom: 0
        }

.content-section {
    background: linear-gradient(#fff,#f8f9fa);
    padding: 5rem 0;
    position: relative
}

    .content-section:before {
        content: "";
        background: linear-gradient(90deg,#0000,#6366f14d 50%,#0000);
        height: 1px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0
    }

.content-wrapper {
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    gap: 4rem;
    animation: fadeInUp .8s ease-out;
    display: grid
}

.content-image {
    animation: fadeInLeft .8s ease-out .2s both;
    position: relative
}

.content-image-wrapper {
    background: linear-gradient(135deg,#f8f9fa,#fff);
    border-radius: 1.5rem;
    padding: 1rem;
    transition: transform .3s,box-shadow .3s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px #6366f126,0 0 0 1px #6366f11a
}

    .content-image-wrapper:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 70px #6366f133,0 0 0 1px #6366f126
    }

    .content-image-wrapper:before {
        content: "";
        z-index: 0;
        background: radial-gradient(circle,#6366f11a 0,#0000 70%);
        width: 200%;
        height: 200%;
        animation: rotate 20s linear infinite;
        position: absolute;
        top: -50%;
        left: -50%
    }

@keyframes rotate {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.content-img {
    object-fit: cover;
    z-index: 1;
    border-radius: 1rem;
    width: 100%;
    height: auto;
    transition: transform .3s;
    display: block;
    position: relative
}

.content-image-wrapper:hover .content-img {
    transform: scale(1.02)
}

.content-image-overlay {
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(135deg,#6366f10d,#8b5cf60d);
    border-radius: 1rem;
    position: absolute;
    inset: 0
}

.content-text {
    z-index: 1;
    animation: fadeInRight .8s ease-out .4s both;
    position: relative
}

    .content-text p {
        color: #374151;
        margin: 0 0 1.75rem;
        font-size: 1.125rem;
        line-height: 1.9
    }

        .content-text p:last-child {
            margin-bottom: 0
        }

.section-title {
    -webkit-text-fill-color: transparent;
    text-align: center;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    margin: 0 0 3.5rem;
    padding-bottom: 1rem;
    font-size: clamp(2rem,4vw,2.75rem);
    font-weight: 700;
    position: relative
}

    .section-title:after {
        content: "";
        background: linear-gradient(90deg,#6366f1,#8b5cf6);
        border-radius: 2px;
        width: 80px;
        height: 4px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%)
    }

.features-section {
    background: linear-gradient(to bottom,var(--background)0,#fff 100%);
    padding: 5rem 0
}

.features-grid {
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
    gap: 2.5rem;
    display: grid
}

.feature-card {
    background: #fff;
    border-top: 4px solid;
    border-radius: 1.25rem;
    padding: 2.5rem;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px #00000014,0 2px 4px #0000000a
}

    .feature-card:before {
        content: "";
        opacity: 0;
        background: linear-gradient(90deg,#0000,currentColor 50%,#0000);
        height: 4px;
        transition: opacity .3s;
        position: absolute;
        top: 0;
        left: 0;
        right: 0
    }

    .feature-card:hover:before {
        opacity: 1
    }

    .feature-card:hover {
        transform: translateY(-8px)scale(1.02);
        box-shadow: 0 16px 48px #0000001f,0 8px 16px #00000014
    }

.feature-card-primary {
    border-top-color: #6366f1
}

.feature-card-gold {
    border-top-color: #d4af37
}

.feature-icon {
    color: #fff;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.75rem;
    transition: all .3s;
    display: flex;
    box-shadow: 0 4px 16px #6366f14d
}

.feature-card:hover .feature-icon {
    transform: scale(1.1)rotate(5deg);
    box-shadow: 0 8px 24px #6366f166
}

.feature-card-gold .feature-icon {
    background: linear-gradient(135deg,#d4af37,#b8941f);
    box-shadow: 0 4px 16px #d4af374d
}

.feature-card-gold:hover .feature-icon {
    box-shadow: 0 8px 24px #d4af3766
}

.feature-title {
    color: var(--foreground);
    margin: 0 0 1.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3
}

.feature-description {
    color: #6b7280;
    margin: 0;
    font-size: 1rem;
    line-height: 1.75
}

.why-choose-section {
    background: linear-gradient(135deg,#eef2ff,#e0e7ff 50%,#c7d2fe);
    padding: 5rem 0;
    position: relative;
    overflow: hidden
}

    .why-choose-section:before {
        content: "";
        background: radial-gradient(circle,#6366f11a 0,#0000 70%);
        border-radius: 50%;
        width: 500px;
        height: 500px;
        position: absolute;
        top: -50%;
        right: -10%
    }

.why-choose-wrapper {
    z-index: 1;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 4rem;
    animation: fadeInUp .8s ease-out;
    display: grid;
    position: relative
}

.why-choose-list {
    z-index: 1;
    flex-direction: column;
    gap: 2.5rem;
    animation: fadeInLeft .8s ease-out .2s both;
    display: flex;
    position: relative
}

.why-choose-image {
    z-index: 1;
    animation: fadeInRight .8s ease-out .4s both;
    position: relative
}

.why-choose-image-wrapper {
    background: linear-gradient(135deg,#fff,#f8f9fa);
    border-radius: 1.5rem;
    padding: 1rem;
    transition: transform .3s,box-shadow .3s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px #6366f133,0 0 0 1px #6366f126
}

    .why-choose-image-wrapper:hover {
        transform: translateY(-5px)scale(1.02);
        box-shadow: 0 25px 70px #6366f140,0 0 0 1px #6366f133
    }

    .why-choose-image-wrapper:before {
        content: "";
        z-index: 0;
        background: radial-gradient(circle,#d4af3726 0,#0000 70%);
        width: 200%;
        height: 200%;
        animation: rotate 20s linear infinite;
        position: absolute;
        top: -50%;
        right: -50%
    }

.why-choose-img {
    object-fit: cover;
    z-index: 1;
    border-radius: 1rem;
    width: 100%;
    height: auto;
    transition: transform .3s;
    display: block;
    position: relative
}

.why-choose-image-wrapper:hover .why-choose-img {
    transform: scale(1.03)
}

.why-choose-image-overlay {
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(135deg,#6366f114,#d4af370d);
    border-radius: 1rem;
    position: absolute;
    inset: 0
}

.why-choose-image-decoration {
    opacity: .1;
    z-index: 0;
    background: linear-gradient(135deg,#d4af37,#b8941f);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: pulse 3s ease-in-out infinite;
    position: absolute;
    top: -20px;
    right: -20px
}

.why-choose-image-wrapper:after {
    content: "";
    opacity: .1;
    z-index: 0;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: pulse 3s ease-in-out 1.5s infinite;
    position: absolute;
    bottom: -30px;
    left: -30px
}

.why-choose-item {
    background: #fff;
    border-left: 4px solid #0000;
    border-radius: 1.25rem;
    gap: 2rem;
    padding: 2.5rem;
    transition: all .3s;
    display: flex;
    box-shadow: 0 4px 16px #00000014
}

    .why-choose-item:hover {
        border-left-color: #d4af37;
        transform: translate(8px);
        box-shadow: 0 8px 32px #0000001f
    }

.why-choose-icon {
    color: #fff;
    background: linear-gradient(135deg,#6366f1,#8b5cf6 50%,#a855f7);
    border-radius: .75rem;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    transition: all .3s;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px #6366f140,0 0 0 1px #6366f11a
}

    .why-choose-icon:before {
        content: "";
        opacity: 0;
        background: linear-gradient(135deg,#fff3,#0000);
        border-radius: .75rem;
        transition: opacity .3s;
        position: absolute;
        inset: 0
    }

    .why-choose-icon:hover:before {
        opacity: 1
    }

.why-choose-item:hover .why-choose-icon {
    transform: scale(1.05)translateY(-2px);
    box-shadow: 0 6px 20px #6366f159,0 0 0 1px #6366f126
}

.why-choose-content {
    flex: 1
}

.why-choose-title {
    color: var(--foreground);
    margin: 0 0 1rem;
    font-size: 1.5rem;
    font-weight: 700
}

.why-choose-text {
    color: #6b7280;
    margin: 0;
    font-size: 1rem;
    line-height: 1.75
}

.section-description {
    color: #6b7280;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3.5rem;
    font-size: 1.125rem;
    line-height: 1.8
}

.needs-grid {
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    display: grid
}

.needs-card {
    background: linear-gradient(135deg,#fff,#f8f9fa);
    border-left: 4px solid #6366f1;
    border-radius: 1.5rem;
    flex-direction: column;
    padding: 2.5rem;
    transition: all .3s;
    animation: fadeInUp .6s ease-out;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px #00000014,0 0 0 1px #6366f11a
}

    .needs-card:first-child {
        animation-delay: .1s
    }

    .needs-card:nth-child(2) {
        animation-delay: .2s
    }

    .needs-card:nth-child(3) {
        animation-delay: .3s
    }

    .needs-card:nth-child(4) {
        animation-delay: .4s
    }

    .needs-card:nth-child(5) {
        animation-delay: .5s
    }

    .needs-card:nth-child(6) {
        animation-delay: .6s
    }

    .needs-card:before {
        content: "";
        transform-origin: top;
        background: linear-gradient(#6366f1,#8b5cf6 50%,#a855f7);
        width: 4px;
        height: 100%;
        transition: transform .3s;
        position: absolute;
        top: 0;
        left: 0;
        transform: scaleY(0)
    }

    .needs-card:after {
        content: "";
        opacity: 0;
        background: radial-gradient(circle,#6366f10d 0,#0000 70%);
        width: 200%;
        height: 200%;
        transition: opacity .3s;
        position: absolute;
        top: -50%;
        right: -50%
    }

    .needs-card:hover {
        border-left-width: 6px;
        transform: translateY(-6px);
        box-shadow: 0 12px 40px #6366f126,0 0 0 1px #6366f133
    }

        .needs-card:hover:before {
            transform: scaleY(1)
        }

        .needs-card:hover:after {
            opacity: 1
        }

.needs-icon {
    color: #fff;
    background: linear-gradient(135deg,#6366f1,#8b5cf6 50%,#a855f7);
    border-radius: .75rem;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    transition: all .3s;
    display: flex;
    box-shadow: 0 4px 12px #6366f140
}

.needs-card:hover .needs-icon {
    transform: scale(1.1)rotate(5deg);
    box-shadow: 0 6px 20px #6366f159
}

.needs-title {
    color: var(--foreground);
    margin: 0 0 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3
}

.needs-text {
    color: #6b7280;
    flex-grow: 1;
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: 1.75
}

.needs-features {
    flex-direction: column;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

    .needs-features li {
        color: #4b5563;
        align-items: flex-start;
        padding-left: 1.75rem;
        font-size: .9375rem;
        line-height: 1.6;
        display: flex;
        position: relative
    }

        .needs-features li:before {
            content: "";
            background: linear-gradient(135deg,#6366f1,#8b5cf6);
            border-radius: 50%;
            width: 6px;
            height: 6px;
            position: absolute;
            top: .5rem;
            left: 0;
            box-shadow: 0 0 0 3px #6366f11a
        }

.needs-card:hover .needs-features li:before {
    transition: all .3s;
    transform: scale(1.2);
    box-shadow: 0 0 0 4px #6366f126
}

.features-overview-section {
    background: linear-gradient(to bottom,var(--background)0,#fff 100%);
    padding: 5rem 0
}

.features-overview-grid {
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    display: grid
}

.features-overview-item {
    background: linear-gradient(135deg,#fff,#f8f9fa);
    border: 2px solid #0000;
    border-radius: 1.5rem;
    flex-direction: column;
    padding: 2.5rem;
    transition: all .3s;
    animation: fadeInUp .6s ease-out;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px #00000014,0 0 0 1px #6366f11a
}

    .features-overview-item:first-child {
        animation-delay: .1s
    }

    .features-overview-item:nth-child(2) {
        animation-delay: .2s
    }

    .features-overview-item:nth-child(3) {
        animation-delay: .3s
    }

    .features-overview-item:nth-child(4) {
        animation-delay: .4s
    }

    .features-overview-item:nth-child(5) {
        animation-delay: .5s
    }

    .features-overview-item:nth-child(6) {
        animation-delay: .6s
    }

    .features-overview-item:before {
        content: "";
        transform-origin: 0;
        background: linear-gradient(90deg,#6366f1,#8b5cf6 50%,#a855f7);
        height: 4px;
        transition: transform .3s;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        transform: scaleX(0)
    }

    .features-overview-item:after {
        content: "";
        opacity: 0;
        background: radial-gradient(circle,#6366f10d 0,#0000 70%);
        width: 200%;
        height: 200%;
        transition: opacity .3s;
        position: absolute;
        top: -50%;
        right: -50%
    }

    .features-overview-item:hover {
        border-color: #6366f14d;
        transform: translateY(-6px);
        box-shadow: 0 12px 40px #6366f126,0 0 0 1px #6366f133
    }

        .features-overview-item:hover:before {
            transform: scaleX(1)
        }

        .features-overview-item:hover:after {
            opacity: 1
        }

.features-overview-icon {
    color: #fff;
    background: linear-gradient(135deg,#6366f1,#8b5cf6 50%,#a855f7);
    border-radius: .75rem;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    transition: all .3s;
    display: flex;
    box-shadow: 0 4px 12px #6366f140
}

.features-overview-item:hover .features-overview-icon {
    transform: scale(1.1)rotate(5deg);
    box-shadow: 0 6px 20px #6366f159
}

.features-overview-title {
    color: var(--foreground);
    margin: 0 0 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3
}

.features-overview-text {
    color: #6b7280;
    flex-grow: 1;
    margin: 0;
    font-size: 1rem;
    line-height: 1.75
}

.related-products-section {
    background: #fff;
    padding: 5rem 0
}

.related-products-grid {
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
    display: grid
}

.related-product-link {
    color: #fff;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    border-radius: 1rem;
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px #6366f14d
}

    .related-product-link:before {
        content: "";
        background: linear-gradient(90deg,#0000,#fff3 50%,#0000);
        width: 100%;
        height: 100%;
        transition: left .5s;
        position: absolute;
        top: 0;
        left: -100%
    }

    .related-product-link:hover:before {
        left: 100%
    }

    .related-product-link:hover {
        transform: translateY(-4px)scale(1.02);
        box-shadow: 0 12px 32px #6366f166
    }

    .related-product-link .icon-sm {
        transition: transform .3s
    }

    .related-product-link:hover .icon-sm {
        transform: translate(4px)
    }

.faq-section {
    background: linear-gradient(to bottom,var(--background)0,#f8f9fa 100%);
    padding: 5rem 0
}

.faq-grid {
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    display: grid
}

.faq-card {
    background: #fff;
    border: 2px solid #0000;
    border-radius: 1.25rem;
    padding: 2.5rem;
    transition: all .3s;
    position: relative;
    box-shadow: 0 4px 16px #00000014
}

    .faq-card:before {
        content: "";
        opacity: 0;
        background: linear-gradient(90deg,#6366f1,#8b5cf6);
        border-radius: 1.25rem 1.25rem 0 0;
        height: 3px;
        transition: opacity .3s;
        position: absolute;
        top: 0;
        left: 0;
        right: 0
    }

    .faq-card:hover {
        border-color: #6366f133;
        transform: translateY(-4px);
        box-shadow: 0 12px 32px #0000001f
    }

        .faq-card:hover:before {
            opacity: 1
        }

.faq-question {
    color: var(--foreground);
    margin: 0 0 1.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4
}

.faq-answer {
    color: #6b7280;
    margin: 0;
    font-size: 1rem;
    line-height: 1.75
}

.faq-accordion-item {
    animation: fadeInUp .4s ease-out;
    position: relative
}

    .faq-accordion-item:before {
        content: "";
        opacity: 0;
        transform-origin: top;
        background: linear-gradient(#6366f1,#8b5cf6);
        border-radius: 1rem 0 0 1rem;
        width: 4px;
        transition: all .3s;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        transform: scaleY(0)
    }

.faq-accordion-open:before {
    opacity: 1;
    transform: scaleY(1)
}

.faq-accordion-item:hover {
    transform: translate(4px)
}

.faq-accordion-open:hover {
    transform: translate(4px)scale(1.01)
}

.faq-accordion-button {
    position: relative
}

    .faq-accordion-button:hover .faq-icon-wrapper {
        transform: scale(1.1);
        box-shadow: 0 4px 12px #6366f14d
    }

.faq-accordion-open .faq-icon-wrapper {
    box-shadow: 0 4px 16px #6366f166
}

.faq-accordion-button:focus {
    outline: none
}

.faq-accordion-button:focus-visible {
    outline-offset: 2px;
    border-radius: .5rem;
    outline: 2px solid #6366f180
}

.faq-accordion-content {
    position: relative
}

    .faq-accordion-content:before {
        content: "";
        opacity: 0;
        background: linear-gradient(90deg,#6366f133,#0000);
        height: 1px;
        transition: opacity .3s;
        position: absolute;
        top: 0;
        left: 7rem;
        right: 2rem
    }

.faq-accordion-open .faq-accordion-content:before {
    opacity: 1
}

@media (max-width:768px) {
    .faq-accordion-item {
        border-radius: .75rem
    }

    .faq-accordion-button {
        padding: 1.25rem 1.5rem
    }

    .faq-accordion-question {
        font-size: 1rem !important
    }

    .faq-icon-wrapper {
        width: 2rem !important;
        height: 2rem !important
    }

    .faq-accordion-answer {
        padding: 0 1.5rem 1.25rem 5rem !important;
        font-size: .9375rem !important
    }

    .faq-accordion-content:before {
        left: 5rem;
        right: 1.5rem
    }
}

@media (max-width:640px) {
    .faq-accordion-button {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        padding: 1rem 1.25rem
    }

    .faq-icon-wrapper {
        width: 1.75rem !important;
        height: 1.75rem !important
    }

    .faq-accordion-answer {
        padding: 0 1.25rem 1rem !important
    }

    .faq-accordion-content:before {
        left: 1.25rem;
        right: 1.25rem
    }
}

.icon-sm {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem
}

.icon-lg {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem
}

@media (max-width:1024px) {
    .hero-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem
    }

    .hero-content {
        text-align: center
    }

    .hero-title {
        font-size: 2.5rem
    }

    .content-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem
    }

    .content-image {
        order: 1
    }

    .content-text {
        order: 2
    }

    .why-choose-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem
    }

    .why-choose-image {
        order: 1
    }

    .why-choose-list {
        order: 2
    }

    .section-title {
        font-size: 2.25rem
    }

    .features-grid {
        grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
        gap: 2rem
    }

    .features-overview-grid, .needs-grid {
        grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
        gap: 2rem
    }

    .screenshots-card {
        padding: 2.5rem
    }
}

@media (max-width:768px) {
    .hero-section {
        padding: 3.5rem 0
    }

    .hero-wrapper {
        gap: 2rem
    }

    .hero-content {
        text-align: center
    }

    .hero-title {
        font-size: 2rem
    }

    .hero-description {
        font-size: 1.125rem
    }

    .hero-cta .btn {
        padding: .75rem 1.5rem;
        font-size: 1rem
    }

    .content-section {
        padding: 3.5rem 0
    }

    .content-wrapper {
        gap: 2rem
    }

    .content-image-wrapper {
        padding: .75rem
    }

    .content-text p {
        font-size: 1rem;
        line-height: 1.8
    }

    .screenshots-card {
        border-radius: 1.5rem;
        padding: 2rem 1.5rem
    }

    .features-grid, .screenshot-grid {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .feature-card {
        padding: 2rem
    }

    .why-choose-section {
        padding: 3.5rem 0
    }

    .why-choose-wrapper {
        gap: 2rem
    }

    .why-choose-image-wrapper {
        padding: .75rem
    }

    .why-choose-image-decoration {
        width: 80px;
        height: 80px;
        top: -10px;
        right: -10px
    }

    .why-choose-item {
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem
    }

    .why-choose-icon {
        border-radius: .625rem;
        align-self: flex-start;
        width: 2.5rem;
        height: 2.5rem
    }

    .section-description {
        margin-bottom: 2.5rem;
        padding: 0 1rem;
        font-size: 1rem
    }

    .features-overview-grid {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .features-overview-item {
        border-radius: 1.25rem;
        padding: 2rem
    }

    .features-overview-icon {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: 1.25rem
    }

    .features-overview-title {
        font-size: 1.25rem
    }

    .features-overview-text {
        font-size: .9375rem
    }

    .needs-grid {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .needs-card {
        border-radius: 1.25rem;
        padding: 2rem
    }

    .needs-icon {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: 1.25rem
    }

    .needs-title {
        font-size: 1.25rem
    }

    .needs-text {
        margin-bottom: 1.25rem;
        font-size: .9375rem
    }

    .needs-features {
        gap: .625rem
    }

        .needs-features li {
            padding-left: 1.5rem;
            font-size: .875rem
        }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .related-products-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem
    }

    .content-section, .faq-section, .features-overview-section, .features-section, .related-products-section, .screenshots-section, .why-choose-section {
        padding: 3.5rem 0
    }
}

@media (max-width:640px) {
    .hero-section {
        padding: 2.5rem 0
    }

    .section-title {
        margin-bottom: 2.5rem;
        font-size: 1.75rem
    }

    .faq-card, .feature-card, .features-overview-item, .needs-card {
        padding: 1.75rem
    }

    .screenshots-card {
        padding: 1.5rem
    }
}

.admin-table-scroll {
    max-height: calc(100vh - 15rem);
    overflow: auto
}

    .admin-table-scroll thead th {
        z-index: 10;
        background: #f9fafb;
        position: sticky;
        top: 0;
        box-shadow: 0 1px #0000000f
    }

.learnMore {
    box-shadow: none !important;
    padding: .5rem 1rem !important
}

.bookADemo, .startFreeTrial {
    cursor: pointer;
    border: 1px solid #c0b5ec;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    transition: transform .2s,box-shadow .2s,background .2s;
    display: inline-flex
}

    .bookADemo:hover, .startFreeTrial:hover {
        transform: translateY(-2px)
    }

.startFreeTrial {
    color: #fff;
    background: linear-gradient(135deg,#4f46e5,#7c3aed);
    box-shadow: 0 10px 25px -5px #4f46e559,0 4px 6px -2px #4f46e533;
    z-index: 5;
}

    .startFreeTrial:hover {
        box-shadow: 0 16px 32px -4px #4f46e566,0 6px 10px -2px #4f46e540;
        background: linear-gradient(135deg,#4338ca,#6d28d9) !important
    }

    .startFreeTrial:after {
        content: "";
        background-color: currentColor;
        width: 1.25rem;
        height: 1.25rem;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

.bookADemo {
    z-index: 5;
    color: #1e293b !important;
    background: #fffffff2 !important
}

    .bookADemo:hover {
        box-shadow: 0 8px 20px #0000001a,0 0 0 2px #6366f166;
        background: #fff !important
    }

    .bookADemo:after {
        content: "";
        background-color: currentColor;
        width: 1.25rem;
        height: 1.25rem;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

.btn-make-good-design {
    cursor: pointer;
    color: #fff;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: linear-gradient(135deg,#fff3,#ffffff14);
    border: 2px solid #ffffff80;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s,box-shadow .25s,background .25s,border-color .2s;
    display: inline-flex;
    box-shadow: 0 4px 20px #00000026,inset 0 1px #ffffff40
}

    .btn-make-good-design:hover {
        background: linear-gradient(135deg,#ffffff59,#ffffff26);
        border-color: #fffc;
        transform: translateY(-3px);
        box-shadow: 0 12px 28px #0003,inset 0 1px #fff6
    }

    .btn-make-good-design:active {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px #0000002e
    }

    .btn-make-good-design:before {
        content: "";
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(135deg,#fff6,#0000 50%,#ffffff1a);
        padding: 2px;
        position: absolute;
        inset: 0;
        -webkit-mask-image: linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);
        mask-image: linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);
        -webkit-mask-position: 0 0,0 0;
        mask-position: 0 0,0 0;
        -webkit-mask-size: auto,auto;
        mask-size: auto,auto;
        -webkit-mask-repeat: repeat,repeat;
        mask-repeat: repeat,repeat;
        -webkit-mask-clip: content-box,border-box;
        mask-clip: content-box,border-box;
        -webkit-mask-origin: content-box,border-box;
        mask-origin: content-box,border-box;
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        -webkit-mask-source-type: auto,auto;
        mask-mode: match-source,match-source
    }

.btn-make-good-design {
    position: relative
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-space-x-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-divide-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-gradient-position {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-via {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-to {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-via-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0
}

@property --tw-gradient-via-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 50%
}

@property --tw-gradient-to-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-leading {
    syntax: "*";
    inherits: false
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-tracking {
    syntax: "*";
    inherits: false
}

@property --tw-ordinal {
    syntax: "*";
    inherits: false
}

@property --tw-slashed-zero {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-figure {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-spacing {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-fraction {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-blur {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-invert {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-duration {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}

@property --tw-content {
    syntax: "*";
    inherits: false;
    initial-value: ""
}

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

@keyframes ping {
    75%,to {
        opacity: 0;
        transform: scale(2)
    }
}

@keyframes bounce {
    0%,to {
        animation-timing-function: cubic-bezier(.8,0,1,1);
        transform: translateY(-25%)
    }

    50% {
        animation-timing-function: cubic-bezier(0,0,.2,1);
        transform: none
    }
}