/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --ks-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --ks-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --ks-color-red-50: oklch(97.1% 0.013 17.38);
    --ks-color-red-100: oklch(93.6% 0.032 17.717);
    --ks-color-red-200: oklch(88.5% 0.062 18.334);
    --ks-color-red-300: oklch(80.8% 0.114 19.571);
    --ks-color-red-400: oklch(70.4% 0.191 22.216);
    --ks-color-red-500: oklch(63.7% 0.237 25.331);
    --ks-color-red-600: oklch(57.7% 0.245 27.325);
    --ks-color-red-700: oklch(50.5% 0.213 27.518);
    --ks-color-red-800: oklch(44.4% 0.177 26.899);
    --ks-color-red-900: oklch(39.6% 0.141 25.723);
    --ks-color-red-950: oklch(25.8% 0.092 26.042);
    --ks-color-orange-50: oklch(98% 0.016 73.684);
    --ks-color-orange-100: oklch(95.4% 0.038 75.164);
    --ks-color-orange-200: oklch(90.1% 0.076 70.697);
    --ks-color-orange-300: oklch(83.7% 0.128 66.29);
    --ks-color-orange-400: oklch(75% 0.183 55.934);
    --ks-color-orange-500: oklch(70.5% 0.213 47.604);
    --ks-color-orange-600: oklch(64.6% 0.222 41.116);
    --ks-color-orange-700: oklch(55.3% 0.195 38.402);
    --ks-color-orange-800: oklch(47% 0.157 37.304);
    --ks-color-orange-900: oklch(40.8% 0.123 38.172);
    --ks-color-orange-950: oklch(26.6% 0.079 36.259);
    --ks-color-amber-50: oklch(98.7% 0.022 95.277);
    --ks-color-amber-100: oklch(96.2% 0.059 95.617);
    --ks-color-amber-200: oklch(92.4% 0.12 95.746);
    --ks-color-amber-300: oklch(87.9% 0.169 91.605);
    --ks-color-amber-400: oklch(82.8% 0.189 84.429);
    --ks-color-amber-500: oklch(76.9% 0.188 70.08);
    --ks-color-amber-600: oklch(66.6% 0.179 58.318);
    --ks-color-amber-700: oklch(55.5% 0.163 48.998);
    --ks-color-amber-800: oklch(47.3% 0.137 46.201);
    --ks-color-amber-900: oklch(41.4% 0.112 45.904);
    --ks-color-amber-950: oklch(27.9% 0.077 45.635);
    --ks-color-yellow-50: oklch(98.7% 0.026 102.212);
    --ks-color-yellow-100: oklch(97.3% 0.071 103.193);
    --ks-color-yellow-200: oklch(94.5% 0.129 101.54);
    --ks-color-yellow-300: oklch(90.5% 0.182 98.111);
    --ks-color-yellow-400: oklch(85.2% 0.199 91.936);
    --ks-color-yellow-500: oklch(79.5% 0.184 86.047);
    --ks-color-yellow-600: oklch(68.1% 0.162 75.834);
    --ks-color-yellow-700: oklch(55.4% 0.135 66.442);
    --ks-color-yellow-800: oklch(47.6% 0.114 61.907);
    --ks-color-yellow-900: oklch(42.1% 0.095 57.708);
    --ks-color-yellow-950: oklch(28.6% 0.066 53.813);
    --ks-color-lime-50: oklch(98.6% 0.031 120.757);
    --ks-color-lime-100: oklch(96.7% 0.067 122.328);
    --ks-color-lime-200: oklch(93.8% 0.127 124.321);
    --ks-color-lime-300: oklch(89.7% 0.196 126.665);
    --ks-color-lime-400: oklch(84.1% 0.238 128.85);
    --ks-color-lime-500: oklch(76.8% 0.233 130.85);
    --ks-color-lime-600: oklch(64.8% 0.2 131.684);
    --ks-color-lime-700: oklch(53.2% 0.157 131.589);
    --ks-color-lime-800: oklch(45.3% 0.124 130.933);
    --ks-color-lime-900: oklch(40.5% 0.101 131.063);
    --ks-color-lime-950: oklch(27.4% 0.072 132.109);
    --ks-color-green-50: oklch(98.2% 0.018 155.826);
    --ks-color-green-100: oklch(96.2% 0.044 156.743);
    --ks-color-green-200: oklch(92.5% 0.084 155.995);
    --ks-color-green-300: oklch(87.1% 0.15 154.449);
    --ks-color-green-400: oklch(79.2% 0.209 151.711);
    --ks-color-green-500: oklch(72.3% 0.219 149.579);
    --ks-color-green-600: oklch(62.7% 0.194 149.214);
    --ks-color-green-700: oklch(52.7% 0.154 150.069);
    --ks-color-green-800: oklch(44.8% 0.119 151.328);
    --ks-color-green-900: oklch(39.3% 0.095 152.535);
    --ks-color-green-950: oklch(26.6% 0.065 152.934);
    --ks-color-emerald-50: oklch(97.9% 0.021 166.113);
    --ks-color-emerald-100: oklch(95% 0.052 163.051);
    --ks-color-emerald-200: oklch(90.5% 0.093 164.15);
    --ks-color-emerald-300: oklch(84.5% 0.143 164.978);
    --ks-color-emerald-400: oklch(76.5% 0.177 163.223);
    --ks-color-emerald-500: oklch(69.6% 0.17 162.48);
    --ks-color-emerald-600: oklch(59.6% 0.145 163.225);
    --ks-color-emerald-700: oklch(50.8% 0.118 165.612);
    --ks-color-emerald-800: oklch(43.2% 0.095 166.913);
    --ks-color-emerald-900: oklch(37.8% 0.077 168.94);
    --ks-color-emerald-950: oklch(26.2% 0.051 172.552);
    --ks-color-teal-50: oklch(98.4% 0.014 180.72);
    --ks-color-teal-100: oklch(95.3% 0.051 180.801);
    --ks-color-teal-200: oklch(91% 0.096 180.426);
    --ks-color-teal-300: oklch(85.5% 0.138 181.071);
    --ks-color-teal-400: oklch(77.7% 0.152 181.912);
    --ks-color-teal-500: oklch(70.4% 0.14 182.503);
    --ks-color-teal-600: oklch(60% 0.118 184.704);
    --ks-color-teal-700: oklch(51.1% 0.096 186.391);
    --ks-color-teal-800: oklch(43.7% 0.078 188.216);
    --ks-color-teal-900: oklch(38.6% 0.063 188.416);
    --ks-color-teal-950: oklch(27.7% 0.046 192.524);
    --ks-color-cyan-50: oklch(98.4% 0.019 200.873);
    --ks-color-cyan-100: oklch(95.6% 0.045 203.388);
    --ks-color-cyan-200: oklch(91.7% 0.08 205.041);
    --ks-color-cyan-300: oklch(86.5% 0.127 207.078);
    --ks-color-cyan-400: oklch(78.9% 0.154 211.53);
    --ks-color-cyan-500: oklch(71.5% 0.143 215.221);
    --ks-color-cyan-600: oklch(60.9% 0.126 221.723);
    --ks-color-cyan-700: oklch(52% 0.105 223.128);
    --ks-color-cyan-800: oklch(45% 0.085 224.283);
    --ks-color-cyan-900: oklch(39.8% 0.07 227.392);
    --ks-color-cyan-950: oklch(30.2% 0.056 229.695);
    --ks-color-sky-50: oklch(97.7% 0.013 236.62);
    --ks-color-sky-100: oklch(95.1% 0.026 236.824);
    --ks-color-sky-200: oklch(90.1% 0.058 230.902);
    --ks-color-sky-300: oklch(82.8% 0.111 230.318);
    --ks-color-sky-400: oklch(74.6% 0.16 232.661);
    --ks-color-sky-500: oklch(68.5% 0.169 237.323);
    --ks-color-sky-600: oklch(58.8% 0.158 241.966);
    --ks-color-sky-700: oklch(50% 0.134 242.749);
    --ks-color-sky-800: oklch(44.3% 0.11 240.79);
    --ks-color-sky-900: oklch(39.1% 0.09 240.876);
    --ks-color-sky-950: oklch(29.3% 0.066 243.157);
    --ks-color-blue-50: oklch(97% 0.014 254.604);
    --ks-color-blue-100: oklch(93.2% 0.032 255.585);
    --ks-color-blue-200: oklch(88.2% 0.059 254.128);
    --ks-color-blue-300: oklch(80.9% 0.105 251.813);
    --ks-color-blue-400: oklch(70.7% 0.165 254.624);
    --ks-color-blue-500: oklch(62.3% 0.214 259.815);
    --ks-color-blue-600: oklch(54.6% 0.245 262.881);
    --ks-color-blue-700: oklch(48.8% 0.243 264.376);
    --ks-color-blue-800: oklch(42.4% 0.199 265.638);
    --ks-color-blue-900: oklch(37.9% 0.146 265.522);
    --ks-color-blue-950: oklch(28.2% 0.091 267.935);
    --ks-color-indigo-50: oklch(96.2% 0.018 272.314);
    --ks-color-indigo-100: oklch(93% 0.034 272.788);
    --ks-color-indigo-200: oklch(87% 0.065 274.039);
    --ks-color-indigo-300: oklch(78.5% 0.115 274.713);
    --ks-color-indigo-400: oklch(67.3% 0.182 276.935);
    --ks-color-indigo-500: oklch(58.5% 0.233 277.117);
    --ks-color-indigo-600: oklch(51.1% 0.262 276.966);
    --ks-color-indigo-700: oklch(45.7% 0.24 277.023);
    --ks-color-indigo-800: oklch(39.8% 0.195 277.366);
    --ks-color-indigo-900: oklch(35.9% 0.144 278.697);
    --ks-color-indigo-950: oklch(25.7% 0.09 281.288);
    --ks-color-violet-50: oklch(96.9% 0.016 293.756);
    --ks-color-violet-100: oklch(94.3% 0.029 294.588);
    --ks-color-violet-200: oklch(89.4% 0.057 293.283);
    --ks-color-violet-300: oklch(81.1% 0.111 293.571);
    --ks-color-violet-400: oklch(70.2% 0.183 293.541);
    --ks-color-violet-500: oklch(60.6% 0.25 292.717);
    --ks-color-violet-600: oklch(54.1% 0.281 293.009);
    --ks-color-violet-700: oklch(49.1% 0.27 292.581);
    --ks-color-violet-800: oklch(43.2% 0.232 292.759);
    --ks-color-violet-900: oklch(38% 0.189 293.745);
    --ks-color-violet-950: oklch(28.3% 0.141 291.089);
    --ks-color-purple-50: oklch(97.7% 0.014 308.299);
    --ks-color-purple-100: oklch(94.6% 0.033 307.174);
    --ks-color-purple-200: oklch(90.2% 0.063 306.703);
    --ks-color-purple-300: oklch(82.7% 0.119 306.383);
    --ks-color-purple-400: oklch(71.4% 0.203 305.504);
    --ks-color-purple-500: oklch(62.7% 0.265 303.9);
    --ks-color-purple-600: oklch(55.8% 0.288 302.321);
    --ks-color-purple-700: oklch(49.6% 0.265 301.924);
    --ks-color-purple-800: oklch(43.8% 0.218 303.724);
    --ks-color-purple-900: oklch(38.1% 0.176 304.987);
    --ks-color-purple-950: oklch(29.1% 0.149 302.717);
    --ks-color-fuchsia-50: oklch(97.7% 0.017 320.058);
    --ks-color-fuchsia-100: oklch(95.2% 0.037 318.852);
    --ks-color-fuchsia-200: oklch(90.3% 0.076 319.62);
    --ks-color-fuchsia-300: oklch(83.3% 0.145 321.434);
    --ks-color-fuchsia-400: oklch(74% 0.238 322.16);
    --ks-color-fuchsia-500: oklch(66.7% 0.295 322.15);
    --ks-color-fuchsia-600: oklch(59.1% 0.293 322.896);
    --ks-color-fuchsia-700: oklch(51.8% 0.253 323.949);
    --ks-color-fuchsia-800: oklch(45.2% 0.211 324.591);
    --ks-color-fuchsia-900: oklch(40.1% 0.17 325.612);
    --ks-color-fuchsia-950: oklch(29.3% 0.136 325.661);
    --ks-color-pink-50: oklch(97.1% 0.014 343.198);
    --ks-color-pink-100: oklch(94.8% 0.028 342.258);
    --ks-color-pink-200: oklch(89.9% 0.061 343.231);
    --ks-color-pink-300: oklch(82.3% 0.12 346.018);
    --ks-color-pink-400: oklch(71.8% 0.202 349.761);
    --ks-color-pink-500: oklch(65.6% 0.241 354.308);
    --ks-color-pink-600: oklch(59.2% 0.249 0.584);
    --ks-color-pink-700: oklch(52.5% 0.223 3.958);
    --ks-color-pink-800: oklch(45.9% 0.187 3.815);
    --ks-color-pink-900: oklch(40.8% 0.153 2.432);
    --ks-color-pink-950: oklch(28.4% 0.109 3.907);
    --ks-color-rose-50: oklch(96.9% 0.015 12.422);
    --ks-color-rose-100: oklch(94.1% 0.03 12.58);
    --ks-color-rose-200: oklch(89.2% 0.058 10.001);
    --ks-color-rose-300: oklch(81% 0.117 11.638);
    --ks-color-rose-400: oklch(71.2% 0.194 13.428);
    --ks-color-rose-500: oklch(64.5% 0.246 16.439);
    --ks-color-rose-600: oklch(58.6% 0.253 17.585);
    --ks-color-rose-700: oklch(51.4% 0.222 16.935);
    --ks-color-rose-800: oklch(45.5% 0.188 13.697);
    --ks-color-rose-900: oklch(41% 0.159 10.272);
    --ks-color-rose-950: oklch(27.1% 0.105 12.094);
    --ks-color-slate-50: oklch(98.4% 0.003 247.858);
    --ks-color-slate-100: oklch(96.8% 0.007 247.896);
    --ks-color-slate-200: oklch(92.9% 0.013 255.508);
    --ks-color-slate-300: oklch(86.9% 0.022 252.894);
    --ks-color-slate-400: oklch(70.4% 0.04 256.788);
    --ks-color-slate-500: oklch(55.4% 0.046 257.417);
    --ks-color-slate-600: oklch(44.6% 0.043 257.281);
    --ks-color-slate-700: oklch(37.2% 0.044 257.287);
    --ks-color-slate-800: oklch(27.9% 0.041 260.031);
    --ks-color-gray-100: oklch(96.7% 0.003 264.542);
    --ks-color-gray-200: oklch(92.8% 0.006 264.531);
    --ks-color-gray-300: oklch(87.2% 0.01 258.338);
    --ks-color-gray-400: oklch(70.7% 0.022 261.325);
    --ks-color-gray-500: oklch(55.1% 0.027 264.364);
    --ks-color-gray-700: oklch(37.3% 0.034 259.733);
    --ks-color-zinc-50: oklch(98.5% 0 0);
    --ks-color-zinc-100: oklch(96.7% 0.001 286.375);
    --ks-color-zinc-200: oklch(92% 0.004 286.32);
    --ks-color-zinc-300: oklch(87.1% 0.006 286.286);
    --ks-color-zinc-400: oklch(70.5% 0.015 286.067);
    --ks-color-zinc-500: oklch(55.2% 0.016 285.938);
    --ks-color-zinc-600: oklch(44.2% 0.017 285.786);
    --ks-color-zinc-800: oklch(27.4% 0.006 286.033);
    --ks-color-zinc-900: oklch(21% 0.006 285.885);
    --ks-color-stone-50: oklch(98.5% 0.001 106.423);
    --ks-color-stone-100: oklch(97% 0.001 106.424);
    --ks-color-stone-200: oklch(92.3% 0.003 48.717);
    --ks-color-stone-300: oklch(86.9% 0.005 56.366);
    --ks-color-stone-400: oklch(70.9% 0.01 56.259);
    --ks-color-stone-500: oklch(55.3% 0.013 58.071);
    --ks-color-stone-600: oklch(44.4% 0.011 73.639);
    --ks-color-stone-700: oklch(37.4% 0.01 67.558);
    --ks-color-stone-800: oklch(26.8% 0.007 34.298);
    --ks-color-black: oklch(12.9% 0.042 264.695);
    --ks-color-white: #fff;
    --ks-spacing: 0.25rem;
    --ks-container-xs: 20rem;
    --ks-container-sm: 24rem;
    --ks-container-md: 28rem;
    --ks-container-lg: 32rem;
    --ks-container-xl: 36rem;
    --ks-container-2xl: 42rem;
    --ks-container-3xl: 48rem;
    --ks-container-4xl: 56rem;
    --ks-container-5xl: 64rem;
    --ks-container-6xl: 72rem;
    --ks-container-7xl: 80rem;
    --ks-text-xs: 0.75rem;
    --ks-text-xs--line-height: calc(1 / 0.75);
    --ks-text-sm: 0.875rem;
    --ks-text-sm--line-height: calc(1.25 / 0.875);
    --ks-text-base: 1rem;
    --ks-text-base--line-height: calc(1.5 / 1);
    --ks-text-lg: 1.125rem;
    --ks-text-lg--line-height: calc(1.75 / 1.125);
    --ks-text-xl: 1.25rem;
    --ks-text-xl--line-height: calc(1.75 / 1.25);
    --ks-text-2xl: 1.5rem;
    --ks-text-2xl--line-height: calc(2 / 1.5);
    --ks-text-3xl: 1.875rem;
    --ks-text-3xl--line-height: calc(2.25 / 1.875);
    --ks-text-4xl: 2.25rem;
    --ks-text-4xl--line-height: calc(2.5 / 2.25);
    --ks-text-5xl: 3rem;
    --ks-text-5xl--line-height: 1;
    --ks-text-6xl: 3.75rem;
    --ks-text-6xl--line-height: 1;
    --ks-text-9xl: 8rem;
    --ks-text-9xl--line-height: 1;
    --ks-font-weight-light: 300;
    --ks-font-weight-normal: 400;
    --ks-font-weight-medium: 500;
    --ks-font-weight-semibold: 600;
    --ks-font-weight-bold: 700;
    --ks-leading-tight: 1.25;
    --ks-leading-relaxed: 1.625;
    --ks-radius-sm: 0.25rem;
    --ks-radius-md: 0.375rem;
    --ks-radius-lg: 0.5rem;
    --ks-radius-xl: 0.75rem;
    --ks-radius-2xl: 1rem;
    --ks-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ks-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ks-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ks-animate-spin: spin 1s linear infinite;
    --ks-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --ks-blur-xs: 4px;
    --ks-blur-sm: 8px;
    --ks-blur-lg: 16px;
    --ks-blur-xl: 24px;
    --ks-blur-2xl: 40px;
    --ks-default-transition-duration: 150ms;
    --ks-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --ks-default-font-family: var(--ks-font-sans);
    --ks-default-mono-font-family: var(--ks-font-mono);
    --ks-font-body: 'Onest', 'Inter', sans-serif;
    --ks-font-secondary: 'Funnel Display', cursive;
    --ks-font-cursive: 'Caveat', cursive;
    --ks-color-subtitle: oklch(55.4% 0.046 257.417);
    --ks-color-primary: oklch(27.9% 0.041 260.031);
    --ks-color-primary-50: oklch(98.4% 0.003 247.858);
    --ks-color-primary-100: oklch(96.8% 0.007 247.896);
    --ks-color-primary-200: oklch(92.9% 0.013 255.508);
    --ks-color-primary-300: oklch(86.9% 0.022 252.894);
    --ks-color-primary-400: oklch(70.4% 0.04 256.788);
    --ks-color-primary-500: oklch(55.4% 0.046 257.417);
    --ks-color-primary-600: oklch(44.6% 0.043 257.281);
    --ks-color-primary-700: oklch(37.2% 0.044 257.287);
    --ks-color-primary-800: oklch(27.9% 0.041 260.031);
    --ks-color-primary-900: oklch(20.8% 0.042 265.755);
    --ks-color-accent: #007FB5;
    --ks-color-accent-50: #FFFFFF;
    --ks-color-accent-100: #E5F2FF;
    --ks-color-accent-200: #C9E6FF;
    --ks-color-accent-300: #89CEFF;
    --ks-color-accent-400: #34B5FA;
    --ks-color-accent-500: #009ADA;
    --ks-color-accent-600: #007FB5;
    --ks-color-accent-700: #006591;
    --ks-color-accent-800: #004C6E;
    --ks-color-accent-950: #00344D;
    --ks-color-secondary: oklch(75.991% 0.15071 43.079);
    --ks-color-secondary-500: oklch(69.832% 0.19906 40.546);
    --ks-color-secondary-600: oklch(63.177% 0.21143 37.007);
    --ks-color-secondary-700: oklch(51.834% 0.17119 37.597);
    --ks-radius-app: 0.5rem;
    --ks-spacing-top-gap: 6.75rem;
    --ks-animate-spin-reverse: spin-reverse 4s linear infinite;
    --ks-animate-bar-loader: bar-loader 1.5s linear infinite;
    --ks-animate-shine: shine 2s linear infinite;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--ks-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(--ks-default-font-feature-settings, normal);
    font-variation-settings: var(--ks-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, samp, pre {
    font-family: var(--ks-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--ks-default-mono-font-feature-settings, normal);
    font-variation-settings: var(--ks-default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :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)) {
        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, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::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 utilities {
  .ks\:dotteb-bg {
    pointer-events: none;
    position: absolute;
    inset: calc(var(--ks-spacing) * 0);
    z-index: calc(10 * -1);
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 1px 1px,currentColor 1px,transparent 0);
    --tw-mask-bottom-from-color: transparent;
    --tw-mask-bottom-from-position: 10%;
    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
    mask-composite: intersect;
    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
    --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
    --tw-mask-bottom-to-color: var(--ks-color-black);
    background-size: 10px 10px;
    background-position: 7.5px 7.5px;
    mask-mode: alpha;
    opacity: 10%;
  }
  .ks\:form-border {
    pointer-events: none;
    position: absolute;
    inset: calc(var(--ks-spacing) * 2);
    color: var(--ks-color-primary-200);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ks-color-primary-200) 80%, transparent);
    }
    .ks\:form-border-line {
      position: absolute;
      height: calc(var(--ks-spacing) * 15);
      width: calc(var(--ks-spacing) * 0.5);
      border-radius: calc(infinity * 1px);
      --tw-gradient-from: currentcolor;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .ks\:form-border-dot {
      position: absolute;
      width: calc(var(--ks-spacing) * 2.5);
      height: calc(var(--ks-spacing) * 2.5);
      border-radius: calc(infinity * 1px);
      background-color: currentcolor;
      --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-shadow-color: var(--ks-color-primary-300);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-shadow-color: color-mix(in oklab, var(--ks-color-primary-300) var(--tw-shadow-alpha), transparent);
      }
    }
  }
  .ks\:input-wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ks-spacing) * 1.5);
    .ks\:input-hint {
      font-size: var(--ks-text-xs);
      line-height: var(--tw-leading, var(--ks-text-xs--line-height));
      --tw-font-weight: var(--ks-font-weight-medium);
      font-weight: var(--ks-font-weight-medium);
      color: var(--ks-color-primary-500);
      &[data-state="error"] {
        color: var(--ks-color-red-600);
      }
      &[data-state="success"] {
        color: var(--ks-color-green-600);
      }
      &[data-state="warning"] {
        color: var(--ks-color-yellow-600);
      }
    }
    .ks\:label {
      font-size: var(--ks-text-sm);
      line-height: var(--tw-leading, var(--ks-text-sm--line-height));
      --tw-font-weight: var(--ks-font-weight-medium);
      font-weight: var(--ks-font-weight-medium);
      color: var(--ks-color-primary-800);
    }
    .ks\:field-wrapper {
      display: flex;
      width: 100%;
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--ks-color-primary-300);
      &:focus-within {
        border-color: var(--ks-color-accent);
      }
      position: relative;
      border-radius: var(--ks-radius-app);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: transparent;
      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(--ks-default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
      &:focus-within {
        --tw-ring-color: var(--ks-color-accent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--ks-color-accent) 15%, transparent);
        }
      }
      .ks\:input {
        width: 100%;
        padding-inline: calc(var(--ks-spacing) * 4);
        padding-block: calc(var(--ks-spacing) * 3);
        font-size: var(--ks-text-sm);
        line-height: var(--tw-leading, var(--ks-text-sm--line-height));
        --tw-font-weight: var(--ks-font-weight-medium);
        font-weight: var(--ks-font-weight-medium);
        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(--ks-default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
        --tw-outline-style: none;
        outline-style: none;
        &::placeholder {
          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(--ks-default-transition-timing-function));
          transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
        }
        &:focus-within {
          &::placeholder {
            --tw-translate-y: calc(var(--ks-spacing) * 2);
            translate: var(--tw-translate-x) var(--tw-translate-y);
          }
        }
        &:focus-within {
          &::placeholder {
            opacity: 0%;
          }
        }
        &:disabled {
          cursor: not-allowed;
        }
        &:disabled {
          border-color: var(--ks-color-primary-300);
        }
        &:disabled {
          color: var(--ks-color-primary-500);
        }
        &[type="file"] {
          cursor: pointer;
          &::file-selector-button {
            margin-block: calc(var(--ks-spacing) * -1);
          }
          &::file-selector-button {
            margin-right: calc(var(--ks-spacing) * 4);
          }
          &::file-selector-button {
            border-radius: var(--ks-radius-app);
          }
          &::file-selector-button {
            padding-inline: calc(var(--ks-spacing) * 4);
          }
          &::file-selector-button {
            padding-block: calc(var(--ks-spacing) * 1);
          }
          &::file-selector-button {
            --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
          }
          &::file-selector-button {
            --tw-ring-color: var(--ks-color-primary-300);
          }
          &::file-selector-button {
            --tw-ring-inset: inset;
          }
          &:hover {
            @media (hover: hover) {
              &::file-selector-button {
                background-color: var(--ks-color-primary-100);
              }
            }
          }
        }
      }
      &:has(.ks\:prefix-icon) {
        .ks\:choices-inner {
          margin-inline-start: calc(var(--ks-spacing) * 7);
        }
        .ks\:input {
          margin-inline-start: calc(var(--ks-spacing) * 7);
        }
      }
      &:has(.ks\:suffix-icon) {
        .ks\:choices-inner {
          margin-inline-end: calc(var(--ks-spacing) * 7);
        }
        .ks\:input {
          margin-inline-end: calc(var(--ks-spacing) * 7);
        }
      }
      .ks\:select {
        width: 100%;
        border-right-style: var(--tw-border-style);
        border-right-width: 10px;
        border-color: transparent;
        font-size: var(--ks-text-sm);
        line-height: var(--tw-leading, var(--ks-text-sm--line-height));
        --tw-font-weight: var(--ks-font-weight-medium);
        font-weight: var(--ks-font-weight-medium);
        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(--ks-default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
        --tw-outline-style: none;
        outline-style: none;
        &::placeholder {
          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(--ks-default-transition-timing-function));
          transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
        }
        &:focus-within {
          &::placeholder {
            --tw-translate-y: calc(var(--ks-spacing) * 2);
            translate: var(--tw-translate-x) var(--tw-translate-y);
          }
        }
        &:focus-within {
          &::placeholder {
            opacity: 0%;
          }
        }
        &:disabled {
          cursor: not-allowed;
        }
        &:disabled {
          border-color: var(--ks-color-primary-300);
        }
        &:disabled {
          color: var(--ks-color-primary-500);
        }
      }
      .ks\:prefix-icon {
        position: absolute;
        inset-block: calc(var(--ks-spacing) * 0);
        left: calc(var(--ks-spacing) * 0);
        display: flex;
        width: calc(var(--ks-spacing) * 10);
        align-items: center;
        justify-content: center;
        border-top-left-radius: var(--ks-radius-app);
        border-bottom-left-radius: var(--ks-radius-app);
        &:not(.clickable) {
          pointer-events: none;
        }
      }
      .ks\:suffix-icon {
        position: absolute;
        inset-block: calc(var(--ks-spacing) * 0);
        right: calc(var(--ks-spacing) * 0);
        display: flex;
        width: calc(var(--ks-spacing) * 10);
        align-items: center;
        justify-content: center;
        border-top-right-radius: var(--ks-radius-app);
        border-bottom-right-radius: var(--ks-radius-app);
        &:not(.clickable) {
          pointer-events: none;
        }
      }
      .ks\:prefix, .ks\:suffix {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-inline: calc(var(--ks-spacing) * 2.5);
      }
      .ks\:prefix {
        border-top-left-radius: var(--ks-radius-app);
        border-bottom-left-radius: var(--ks-radius-app);
        border-right-style: var(--tw-border-style);
        border-right-width: 1px;
        border-color: var(--ks-color-primary-300);
      }
      .ks\:suffix {
        border-top-right-radius: var(--ks-radius-app);
        border-bottom-right-radius: var(--ks-radius-app);
        border-left-style: var(--tw-border-style);
        border-left-width: 1px;
        border-color: var(--ks-color-primary-300);
      }
      .iti--allow-dropdown {
        width: 100%;
      }
    }
    .ks\:segmented-btn-group {
      display: flex;
      width: 100%;
      gap: calc(var(--ks-spacing) * 1);
      border-radius: var(--ks-radius-app);
      background-color: var(--ks-color-primary-100);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-primary-200);
      --tw-ring-offset-width: 0.5px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      &[data-dark] {
        background-color: var(--ks-color-black);
      }
      &[data-dark] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
      }
      &[data-dark] {
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      }
      .ks\:segmented-btn {
        position: relative;
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        border-radius: var(--ks-radius-app);
        padding-inline: calc(var(--ks-spacing) * 4);
        padding-block: calc(var(--ks-spacing) * 2);
        font-size: var(--ks-text-sm);
        line-height: var(--tw-leading, var(--ks-text-sm--line-height));
        --tw-font-weight: var(--ks-font-weight-medium);
        font-weight: var(--ks-font-weight-medium);
        &:is(:where(.ks\:group)[data-dark] *) {
          color: var(--ks-color-white);
          @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--ks-color-white) 60%, transparent);
          }
        }
        &:hover {
          @media (hover: hover) {
            background-color: var(--ks-color-primary-200);
          }
        }
        &:is(:where(.ks\:group)[data-dark] *) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--ks-color-primary-800);
            }
          }
        }
        .ks\:segmented-btn-icon {
          width: calc(var(--ks-spacing) * 4);
          height: calc(var(--ks-spacing) * 4);
          font-size: var(--ks-text-sm);
          line-height: var(--tw-leading, var(--ks-text-sm--line-height));
          --tw-font-weight: var(--ks-font-weight-medium);
          font-weight: var(--ks-font-weight-medium);
        }
        .ks\:segmented-btn-badge {
          position: absolute;
          top: calc(var(--ks-spacing) * -2.5);
          right: calc(var(--ks-spacing) * 0);
          display: inline-flex;
          align-items: center;
          gap: calc(var(--ks-spacing) * 1);
          border-radius: var(--ks-radius-xl);
          padding-inline: calc(var(--ks-spacing) * 2);
          padding-block: 1px;
          font-size: var(--ks-text-xs);
          line-height: var(--tw-leading, var(--ks-text-xs--line-height));
          --tw-font-weight: var(--ks-font-weight-medium);
          font-weight: var(--ks-font-weight-medium);
          background-color: var(--ks-color-red-600);
          color: var(--ks-color-white);
          --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        &.ks\:active {
          background-color: var(--ks-color-white);
          color: var(--ks-color-black);
          --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          --tw-ring-color: var(--ks-color-primary-200);
          &:is(:where(.ks\:group)[data-dark] *) {
            background-color: var(--ks-color-white);
          }
          &:is(:where(.ks\:group)[data-dark] *) {
            --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          }
          &:is(:where(.ks\:group)[data-dark] *) {
            --tw-ring-color: transparent;
          }
        }
      }
    }
  }
  .ks\:pointer-events-auto {
    pointer-events: auto;
  }
  .ks\:pointer-events-none {
    pointer-events: none;
  }
  .ks\:cage-icon {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: currentcolor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, currentcolor 10%, transparent);
    }
    padding: calc(var(--ks-spacing) * 2);
    color: currentcolor;
    &:is(:where(.ks\:group):hover *) {
      @media (hover: hover) {
        background-color: currentcolor;
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, currentcolor 20%, transparent);
        }
      }
    }
    .ks\:cage-icon-inner {
      position: absolute;
      inset: calc(var(--ks-spacing) * -2);
      :is(& > *) {
        position: absolute;
      }
      :is(& > *) {
        background-color: currentcolor;
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, currentcolor 10%, transparent);
        }
      }
      i:nth-child(1) {
        top: calc(var(--ks-spacing) * 1);
        left: calc(var(--ks-spacing) * 0);
        height: 1px;
        width: 100%;
      }
      i:nth-child(2) {
        bottom: calc(var(--ks-spacing) * 1);
        left: calc(var(--ks-spacing) * 0);
        height: 1px;
        width: 100%;
      }
      i:nth-child(3) {
        top: calc(var(--ks-spacing) * 0);
        left: calc(var(--ks-spacing) * 1);
        height: 100%;
        width: 1px;
      }
      i:nth-child(4) {
        top: calc(var(--ks-spacing) * 0);
        right: calc(var(--ks-spacing) * 1);
        height: 100%;
        width: 1px;
      }
    }
  }
  .ks\:bottom-navigation-wrapper {
    @media (width >= 48rem) {
      display: none;
    }
    .ks\:bottom-navigation-backdrop {
      position: fixed;
      inset: calc(var(--ks-spacing) * 0);
      z-index: 999;
      height: 100%;
      width: 100%;
      cursor: pointer;
      background-color: var(--ks-color-white);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-white) 10%, transparent);
      }
      --tw-backdrop-blur: blur(var(--ks-blur-xs));
      -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-property: background-color;
      transition-timing-function: var(--tw-ease, var(--ks-default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-white);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--ks-color-white) 20%, transparent);
          }
        }
      }
    }
    .ks\:bottom-navigation {
      position: fixed;
      right: calc(var(--ks-spacing) * 0);
      bottom: calc(var(--ks-spacing) * 0);
      left: calc(var(--ks-spacing) * 0);
      z-index: 999;
      max-height: 100vh;
      overflow: clip;
      overflow-y: auto;
      background-color: var(--ks-color-primary-700);
      color: var(--ks-color-white);
      --tw-shadow: 0 -4px 6px -1px var(--tw-shadow-color, rgba(0,0,0,0.2));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      .ks\:bottom-navigation-items {
        position: sticky;
        bottom: calc(var(--ks-spacing) * 0);
        grid-column: 1 / -1;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        background-color: var(--ks-color-black);
        .ks\:bottom-navigation-item {
          display: flex;
          flex: 1;
          cursor: pointer;
          flex-direction: column;
          align-items: center;
          gap: calc(var(--ks-spacing) * 0.5);
          overflow: hidden;
          padding-block: calc(var(--ks-spacing) * 3);
          font-size: var(--ks-text-xl);
          line-height: var(--tw-leading, var(--ks-text-xl--line-height));
          @media (width >= 48rem) {
            padding-inline: calc(var(--ks-spacing) * 4);
          }
          outline-style: var(--tw-outline-style);
          outline-width: 0px;
          transition-property: transform, translate, scale, rotate;
          transition-timing-function: var(--tw-ease, var(--ks-default-transition-timing-function));
          transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
          --tw-duration: 100ms;
          transition-duration: 100ms;
          --tw-ease: var(--ks-ease-in-out);
          transition-timing-function: var(--ks-ease-in-out);
          &:hover {
            @media (hover: hover) {
              color: var(--ks-color-accent);
            }
          }
          &:hover {
            @media (hover: hover) {
              opacity: 100%;
            }
          }
          &:active {
            --tw-scale-x: 98%;
            --tw-scale-y: 98%;
            --tw-scale-z: 98%;
            scale: var(--tw-scale-x) var(--tw-scale-y);
          }
          &[data-current] {
            color: var(--ks-color-accent);
          }
          .ks\:bottom-navigation-icon {
            display: flex;
            width: calc(4 / 5 * 100%);
            align-items: center;
            justify-content: center;
            border-radius: calc(infinity * 1px);
            padding-block: calc(var(--ks-spacing) * 1.5);
            font-size: var(--ks-text-lg);
            line-height: var(--tw-leading, var(--ks-text-lg--line-height));
            &:is(:where(.ks\:group):hover *) {
              @media (hover: hover) {
                background-color: var(--ks-color-accent-500);
                @supports (color: color-mix(in lab, red, red)) {
                  background-color: color-mix(in oklab, var(--ks-color-accent-500) 40%, transparent);
                }
              }
            }
            &:is(:where(.ks\:group)[data-current] *) {
              background-color: var(--ks-color-accent-500);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--ks-color-accent-500) 25%, transparent);
              }
            }
            .ks\:icon {
              display: block;
              &:is(:where(.ks\:group)[data-current] *) {
                display: none;
              }
            }
            .ks\:icon-fill {
              display: none;
              &:is(:where(.ks\:group)[data-current] *) {
                display: block;
              }
            }
          }
          .ks\:bottom-navigation-label {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
            font-size: var(--ks-text-xs);
            line-height: var(--tw-leading, var(--ks-text-xs--line-height));
            --tw-font-weight: var(--ks-font-weight-medium);
            font-weight: var(--ks-font-weight-medium);
            @media (width >= 48rem) {
              font-size: var(--ks-text-sm);
              line-height: var(--tw-leading, var(--ks-text-sm--line-height));
            }
          }
        }
      }
      .ks\:bottom-more-items {
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: flex-start;
        &:not(*:is([x-cloak])) {
          display: grid;
        }
        .ks\:bottom-more-item {
          display: flex;
          width: 100%;
          align-items: center;
          gap: calc(var(--ks-spacing) * 2);
          padding-inline: calc(var(--ks-spacing) * 6);
          padding-block: calc(var(--ks-spacing) * 4);
          font-size: var(--ks-text-sm);
          line-height: var(--tw-leading, var(--ks-text-sm--line-height));
          &:hover {
            @media (hover: hover) {
              background-color: var(--ks-color-white);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--ks-color-white) 5%, transparent);
              }
            }
          }
          .ks\:bottom-more-item-icon {
            font-size: var(--ks-text-lg);
            line-height: var(--tw-leading, var(--ks-text-lg--line-height));
            --tw-leading: calc(var(--ks-spacing) * 0);
            line-height: calc(var(--ks-spacing) * 0);
            opacity: 70%;
          }
        }
        .ks\:separator {
          margin-block: calc(var(--ks-spacing) * 2);
          height: 1px;
          width: 100%;
          border-color: transparent;
          background-color: var(--ks-color-white);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--ks-color-white) 15%, transparent);
          }
        }
      }
    }
  }
  .ks\:logo-ray-container {
    position: absolute;
    inset: calc(var(--ks-spacing) * 0);
    z-index: 10;
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
    margin-inline: auto;
    max-width: calc(var(--ks-spacing) * 340);
    padding-inline: calc(var(--ks-spacing) * 2);
    @media (width >= 40rem) {
      padding-inline: calc(var(--ks-spacing) * 6);
    }
    @media (width >= 64rem) {
      padding-inline: calc(var(--ks-spacing) * 8);
    }
    .ks\:logo-ray-wrapper {
      pointer-events: none;
      position: absolute;
      inset: calc(var(--ks-spacing) * 0);
      overflow: clip;
      .ks\:logo-ray {
        position: absolute;
        top: calc(var(--ks-spacing) * 0);
        left: calc(var(--ks-spacing) * 26);
        height: calc(var(--ks-spacing) * 60);
        width: calc(var(--ks-spacing) * 70);
        overflow: clip;
        color: currentcolor;
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, currentcolor 10%, transparent);
        }
        &[data-dark] {
          color: var(--ks-color-white);
          @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--ks-color-white) 5%, transparent);
          }
        }
        &::before {
          position: absolute;
          top: calc(calc(2 / 3 * 100%) * -1);
          left: calc(calc(1 / 2 * 100%) * -1);
          height: 100%;
          width: 100%;
          rotate: 35deg;
          --tw-gradient-position: calc(115deg * -1);
          @supports (background-image: linear-gradient(in lab, red, red)) {
            --tw-gradient-position: calc(115deg * -1) in oklab;
          }
          background-image: linear-gradient(var(--tw-gradient-stops));
          --tw-gradient-from: currentcolor;
          --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
          --tw-gradient-to-position: 30%;
          --tw-content: '';
          content: var(--tw-content);
        }
      }
    }
  }
  .ks\:form-checkbox-wrapper {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--ks-spacing) * 2.5);
    font-size: var(--ks-text-sm);
    line-height: var(--tw-leading, var(--ks-text-sm--line-height));
    color: var(--ks-color-primary-600);
    -webkit-user-select: none;
    user-select: none;
    .ks\:form-checkbox {
      position: relative;
      z-index: 0;
      width: calc(var(--ks-spacing) * 5);
      height: calc(var(--ks-spacing) * 5);
      flex-shrink: 0;
      cursor: pointer;
      accent-color: var(--ks-color-primary-600);
      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(--ks-default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
      &:not(*:focus-within) {
        &::before {
          content: var(--tw-content);
          --tw-scale-x: 0%;
          --tw-scale-y: 0%;
          --tw-scale-z: 0%;
          scale: var(--tw-scale-x) var(--tw-scale-y);
        }
      }
      &::before {
        position: absolute;
        inset: calc(var(--ks-spacing) * -2.5);
        border-radius: calc(infinity * 1px);
        background-color: var(--ks-color-accent-500);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--ks-color-accent-500) 10%, transparent);
        }
        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(--ks-default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
        --tw-content: '';
        content: var(--tw-content);
      }
    }
  }
  .ks\:app-header {
    position: fixed;
    top: calc(var(--ks-spacing) * 0);
    z-index: 999;
    width: 100%;
    &[data-sticky] {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
    &[data-sticky] {
      border-color: var(--ks-color-primary-200);
    }
    &[data-sticky] {
      background-color: var(--ks-color-white);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-white) 90%, transparent);
      }
    }
    &[data-sticky] {
      --tw-backdrop-blur: blur(var(--ks-blur-lg));
      -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,);
    }
    .ks\:app-logo {
      height: calc(var(--ks-spacing) * 10);
      &:is(:where(.ks\:group\/header)[data-dark] *) {
        &:is(:where(.ks\:group\/header):not(*[data-sticky]) *) {
          color: var(--ks-color-white);
        }
      }
      @media (width >= 48rem) {
        height: calc(var(--ks-spacing) * 14);
      }
    }
    .ks\:app-header-nav {
      display: none;
      border-radius: calc(infinity * 1px);
      @media (width >= 64rem) {
        display: flex;
      }
      @media (width >= 64rem) {
        column-gap: calc(var(--ks-spacing) * 6);
      }
      .ks\:app-header-nav-item {
        position: relative;
        z-index: 0;
        padding-block: calc(var(--ks-spacing) * 1);
        --tw-font-weight: var(--ks-font-weight-medium);
        font-weight: var(--ks-font-weight-medium);
        color: var(--ks-color-black);
        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(--ks-default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
        &:hover {
          @media (hover: hover) {
            color: var(--ks-color-black);
          }
        }
        &:hover {
          @media (hover: hover) {
            opacity: 100%;
          }
        }
        &:is(:where(.ks\:group\/header)[data-dark] *) {
          &:is(:where(.ks\:group\/header):not(*[data-sticky]) *) {
            color: var(--ks-color-white);
          }
        }
        &.ks\:item-active {
          color: var(--ks-color-primary);
          opacity: 100%;
          &:is(:where(.ks\:group\/header)[data-dark] *) {
            &:is(:where(.ks\:group\/header):not(*[data-sticky]) *) {
              color: var(--ks-color-white);
            }
          }
          &:is(:where(.ks\:group\/header)[data-dark] *) {
            &:is(:where(.ks\:group\/header):not(*[data-sticky]) *) {
              &::before {
                content: var(--tw-content);
                background-color: var(--ks-color-accent);
                @supports (color: color-mix(in lab, red, red)) {
                  background-color: color-mix(in oklab, var(--ks-color-accent) 70%, transparent);
                }
              }
            }
          }
          &::before {
            position: absolute;
            bottom: calc(var(--ks-spacing) * -1);
            left: calc(1 / 2 * 100%);
            height: calc(var(--ks-spacing) * 1);
            width: calc(var(--ks-spacing) * 5);
            --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
            translate: var(--tw-translate-x) var(--tw-translate-y);
            border-radius: calc(infinity * 1px);
            background-color: var(--ks-color-accent);
            --tw-content: '';
            content: var(--tw-content);
          }
        }
      }
    }
    .ks\:header-announcement-banner-wrapper {
      display: flex;
      flex-direction: column;
      .ks\:header-announcement-banner {
        background-color: var(--ks-color-accent-500);
        padding-block: calc(var(--ks-spacing) * 2);
        text-align: center;
        font-size: var(--ks-text-sm);
        line-height: var(--tw-leading, var(--ks-text-sm--line-height));
        color: var(--ks-color-black);
        &[data-theme="dark"] {
          color: var(--ks-color-white);
        }
        &[data-color="primary"] {
          background-color: var(--ks-color-primary-500);
        }
        &[data-color="secondary"] {
          background-color: var(--ks-color-secondary-500);
        }
        &[data-color="warning"] {
          background-color: var(--ks-color-yellow-500);
        }
        &[data-color="danger"] {
          background-color: var(--ks-color-red-500);
        }
        &[data-color="success"] {
          background-color: var(--ks-color-green-500);
        }
        &[data-color="info"] {
          background-color: var(--ks-color-blue-500);
        }
        &[data-color="light"] {
          background-color: var(--ks-color-gray-100);
        }
        &[data-color="dark"] {
          background-color: var(--ks-color-black);
        }
        &[data-color="white"] {
          background-color: var(--ks-color-white);
        }
        &[data-color="gray"] {
          background-color: var(--ks-color-gray-500);
        }
        &[data-color="slate"] {
          background-color: var(--ks-color-slate-500);
        }
        .ks\:close-btn {
          width: calc(var(--ks-spacing) * 6);
          height: calc(var(--ks-spacing) * 6);
          flex-shrink: 0;
          cursor: pointer;
          border-radius: calc(infinity * 1px);
          font-size: var(--ks-text-xl);
          line-height: var(--tw-leading, var(--ks-text-xl--line-height));
          color: var(--ks-color-black);
          &:is(:where(.ks\:group\/announcement-banner)[data-theme="dark"] *) {
            color: var(--ks-color-white);
          }
          &:hover {
            @media (hover: hover) {
              background-color: var(--ks-color-black);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--ks-color-black) 10%, transparent);
              }
            }
          }
        }
      }
    }
  }
  .ks\:btn-shine {
    position: relative;
    &::after {
      position: absolute;
      top: calc(var(--ks-spacing) * 0);
      left: calc(var(--ks-spacing) * 0);
      display: block;
      height: calc(var(--ks-spacing) * 40);
      width: calc(var(--ks-spacing) * 40);
      --tw-skew-x: skewX(calc(40deg * -1));
      transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
      --tw-gradient-position: to right;
      @supports (background-image: linear-gradient(in lab, red, red)) {
        --tw-gradient-position: to right in oklab;
      }
      background-image: linear-gradient(var(--tw-gradient-stops));
      --tw-gradient-from: transparent;
      --tw-gradient-from-position: 40%;
      --tw-gradient-via: var(--ks-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);
      --tw-gradient-via-position: 50%;
      --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));
      --tw-gradient-to-position: 60%;
      --tw-blur: blur(var(--ks-blur-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,);
      --tw-content: '';
      content: var(--tw-content);
      animation: var(--ks-animate-shine);
    }
  }
  .ks\:btn {
    position: relative;
    z-index: 0;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--ks-spacing) * 2);
    border-radius: var(--ks-radius-app);
    padding-inline: calc(var(--ks-spacing) * 4);
    font-size: var(--ks-text-sm);
    line-height: var(--tw-leading, var(--ks-text-sm--line-height));
    --tw-font-weight: var(--ks-font-weight-medium);
    font-weight: var(--ks-font-weight-medium);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--ks-default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
    --tw-ease: var(--ks-ease-in-out);
    transition-timing-function: var(--ks-ease-in-out);
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &>span {
      max-width: 100%;
    }
    &>span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &.ks\:btn-sm {
      padding-inline: calc(var(--ks-spacing) * 2.5);
      padding-block: calc(var(--ks-spacing) * 1.5);
      font-size: var(--ks-text-sm);
      line-height: var(--tw-leading, var(--ks-text-sm--line-height));
    }
    &.ks\:btn-base {
      padding-inline: calc(var(--ks-spacing) * 3);
      padding-block: calc(var(--ks-spacing) * 1.5);
      @media (width >= 48rem) {
        padding-inline: calc(var(--ks-spacing) * 4);
      }
      @media (width >= 48rem) {
        padding-block: calc(var(--ks-spacing) * 2.5);
      }
    }
    &.ks\:btn-md {
      padding-inline: calc(var(--ks-spacing) * 5);
      padding-block: calc(var(--ks-spacing) * 2.5);
      font-size: var(--ks-text-base);
      line-height: var(--tw-leading, var(--ks-text-base--line-height));
    }
    &.ks\:btn-lg {
      padding-inline: calc(var(--ks-spacing) * 6);
      padding-block: calc(var(--ks-spacing) * 4);
      font-size: var(--ks-text-base);
      line-height: var(--tw-leading, var(--ks-text-base--line-height));
    }
    &.ks\:btn-rounded {
      border-radius: calc(infinity * 1px);
    }
    &.ks\:btn-rounded-md {
      border-radius: var(--ks-radius-md);
    }
    &.ks\:btn-rounded-lg {
      border-radius: var(--ks-radius-lg);
    }
    &.ks\:btn-rounded-xl {
      border-radius: var(--ks-radius-xl);
    }
    &.ks\:btn-rounded-2xl {
      border-radius: var(--ks-radius-2xl);
    }
    &.ks\:btn-rounded-app {
      border-radius: var(--ks-radius-app);
    }
    &.ks\:icon-btn {
      display: flex;
      width: calc(var(--ks-spacing) * 10);
      height: calc(var(--ks-spacing) * 10);
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      padding: calc(var(--ks-spacing) * 0);
      &.ks\:btn-sm {
        width: calc(var(--ks-spacing) * 9);
        height: calc(var(--ks-spacing) * 9);
      }
      &.ks\:btn-base {
        width: calc(var(--ks-spacing) * 11);
        height: calc(var(--ks-spacing) * 11);
      }
      &.ks\:btn-md {
        width: calc(var(--ks-spacing) * 12);
        height: calc(var(--ks-spacing) * 12);
      }
      &.ks\:btn-lg {
        width: calc(var(--ks-spacing) * 14);
        height: calc(var(--ks-spacing) * 14);
      }
    }
    &.ks\:btn-loading, &:disabled {
      cursor: not-allowed;
      opacity: 80%;
    }
    .ks\:btn-prefix-icon, .ks\:btn-suffix-icon {
      display: flex;
      width: calc(var(--ks-spacing) * 6);
      height: calc(var(--ks-spacing) * 6);
      align-items: center;
      justify-content: center;
      opacity: 70%;
      transition-property: all;
      transition-timing-function: var(--tw-ease, var(--ks-default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
      --tw-duration: 300ms;
      transition-duration: 300ms;
      --tw-ease: var(--ks-ease-in-out);
      transition-timing-function: var(--ks-ease-in-out);
      &.ks\:btn-sm {
        width: calc(var(--ks-spacing) * 4);
        height: calc(var(--ks-spacing) * 4);
      }
      &.ks\:btn-md {
        width: calc(var(--ks-spacing) * 6);
        height: calc(var(--ks-spacing) * 6);
      }
      &.ks\:btn-lg {
        width: calc(var(--ks-spacing) * 8);
        height: calc(var(--ks-spacing) * 8);
      }
      &.ks\:btn-xl {
        width: calc(var(--ks-spacing) * 10);
        height: calc(var(--ks-spacing) * 10);
      }
    }
    &.ks\:btn-primary {
      background-color: var(--ks-color-primary);
      color: var(--ks-color-white);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-primary);
      --tw-ring-inset: inset;
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-primary-700);
        }
      }
    }
    &.ks\:btn-light {
      background-color: var(--ks-color-white);
      color: var(--ks-color-primary);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-white);
      --tw-backdrop-blur: blur(var(--ks-blur-xs));
      -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,);
      --tw-ring-inset: inset;
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-white);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--ks-color-white) 90%, transparent);
          }
        }
      }
    }
    &.ks\:btn-secondary {
      background-color: var(--ks-color-slate-200);
      color: var(--ks-color-slate-800);
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-slate-300);
        }
      }
    }
    &.ks\:btn-outline, &.ks\:btn-o {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-inset: inset;
      color: var(--ks-color-slate-800);
      --tw-ring-color: var(--ks-color-black);
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-slate-100);
        }
      }
      &.ks\:btn-o-white {
        color: var(--ks-color-white);
        --tw-ring-color: var(--ks-color-white);
        --tw-backdrop-blur: blur(var(--ks-blur-xs));
        -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,);
        &:hover {
          @media (hover: hover) {
            background-color: var(--ks-color-white);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--ks-color-white) 10%, transparent);
            }
          }
        }
      }
      &.ks\:btn-o-accent {
        color: var(--ks-color-accent);
        --tw-ring-color: var(--ks-color-accent);
        &:hover {
          @media (hover: hover) {
            background-color: var(--ks-color-accent-600);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--ks-color-accent-600) 10%, transparent);
            }
          }
        }
      }
      &.ks\:btn-o-primary {
        color: var(--ks-color-primary-800);
        --tw-ring-color: var(--ks-color-primary);
        &:hover {
          @media (hover: hover) {
            background-color: var(--ks-color-primary);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--ks-color-primary) 10%, transparent);
            }
          }
        }
      }
      &.ks\:btn-o-secondary {
        color: var(--ks-color-slate-800);
        --tw-ring-color: var(--ks-color-slate-200);
        &:hover {
          @media (hover: hover) {
            background-color: var(--ks-color-slate-600);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--ks-color-slate-600) 10%, transparent);
            }
          }
        }
      }
      &.ks\:btn-o-dark {
        color: var(--ks-color-slate-800);
        --tw-ring-color: var(--ks-color-slate-800);
        &:hover {
          @media (hover: hover) {
            background-color: var(--ks-color-slate-600);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--ks-color-slate-600) 10%, transparent);
            }
          }
        }
      }
      &.ks\:btn-o-success {
        color: var(--ks-color-emerald-800);
        --tw-ring-color: var(--ks-color-emerald-600);
        &:hover {
          @media (hover: hover) {
            background-color: var(--ks-color-emerald-600);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--ks-color-emerald-600) 10%, transparent);
            }
          }
        }
      }
      &.ks\:btn-o-warning {
        color: var(--ks-color-yellow-600);
        --tw-ring-color: var(--ks-color-yellow-600);
        &:hover {
          @media (hover: hover) {
            background-color: var(--ks-color-yellow-600);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--ks-color-yellow-600) 10%, transparent);
            }
          }
        }
      }
      &.ks\:btn-o-info {
        color: var(--ks-color-blue-600);
        --tw-ring-color: var(--ks-color-blue-600);
        &:hover {
          @media (hover: hover) {
            background-color: var(--ks-color-blue-600);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--ks-color-blue-600) 10%, transparent);
            }
          }
        }
      }
      &.ks\:btn-o-danger {
        color: var(--ks-color-red-600);
        --tw-ring-color: var(--ks-color-red-600);
        &:hover {
          @media (hover: hover) {
            background-color: var(--ks-color-red-600);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--ks-color-red-600) 10%, transparent);
            }
          }
        }
      }
    }
    &.ks\:btn-bordered, &.ks\:btn-b {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-inset: inset;
      color: var(--ks-color-slate-800);
      --tw-ring-color: var(--ks-color-slate-200);
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-slate-100);
        }
      }
      &.ks\:btn-b-accent {
        color: var(--ks-color-accent);
      }
      &.ks\:btn-b-primary {
        color: var(--ks-color-primary-700);
      }
      &.ks\:btn-b-secondary {
        color: var(--ks-color-slate-700);
      }
      &.ks\:btn-b-dark {
        color: var(--ks-color-slate-700);
      }
      &.ks\:btn-b-success {
        color: var(--ks-color-emerald-700);
      }
      &.ks\:btn-b-warning {
        color: var(--ks-color-yellow-700);
      }
      &.ks\:btn-b-info {
        color: var(--ks-color-blue-700);
      }
      &.ks\:btn-b-danger {
        color: var(--ks-color-red-700);
      }
    }
    &.ks\:btn-ghost {
      background-color: transparent;
      color: var(--ks-color-primary-800);
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-primary-100);
        }
      }
    }
    &.ks\:btn-tonal {
      background-color: var(--ks-color-slate-100);
      color: var(--ks-color-slate-800);
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-slate-200);
        }
      }
      &.ks\:btn-tonal-dark {
        background-color: var(--ks-color-slate-800);
        color: var(--ks-color-white);
        &:hover {
          @media (hover: hover) {
            background-color: var(--ks-color-slate-700);
          }
        }
      }
    }
    &.ks\:btn-text {
      color: var(--ks-color-primary-800);
      &:hover {
        @media (hover: hover) {
          color: var(--ks-color-primary-700);
        }
      }
      &.ks\:btn-text-accent {
        &:hover {
          @media (hover: hover) {
            color: var(--ks-color-accent-700);
          }
        }
      }
      &.ks\:btn-text-primary {
        &:hover {
          @media (hover: hover) {
            color: var(--ks-color-primary-700);
          }
        }
      }
      &.ks\:btn-text-secondary {
        &:hover {
          @media (hover: hover) {
            color: var(--ks-color-secondary-700);
          }
        }
      }
      &.ks\:btn-text-success {
        &:hover {
          @media (hover: hover) {
            color: var(--ks-color-emerald-500);
          }
        }
      }
      &.ks\:btn-text-warning {
        &:hover {
          @media (hover: hover) {
            color: var(--ks-color-yellow-500);
          }
        }
      }
      &.ks\:btn-text-info {
        &:hover {
          @media (hover: hover) {
            color: var(--ks-color-blue-500);
          }
        }
      }
      &.ks\:btn-text-danger {
        &:hover {
          @media (hover: hover) {
            color: var(--ks-color-red-500);
          }
        }
      }
      &.ks\:btn-text-white {
        &:hover {
          @media (hover: hover) {
            color: var(--ks-color-white);
            @supports (color: color-mix(in lab, red, red)) {
              color: color-mix(in oklab, var(--ks-color-white) 80%, transparent);
            }
          }
        }
      }
      &.ks\:btn-text-black {
        &:hover {
          @media (hover: hover) {
            color: var(--ks-color-black);
            @supports (color: color-mix(in lab, red, red)) {
              color: color-mix(in oklab, var(--ks-color-black) 80%, transparent);
            }
          }
        }
      }
      &.ks\:btn-text-gray {
        &:hover {
          @media (hover: hover) {
            color: var(--ks-color-gray-500);
          }
        }
      }
      &.ks\:btn-text-light {
        &:hover {
          @media (hover: hover) {
            color: var(--ks-color-slate-500);
          }
        }
      }
      &.ks\:btn-text-dark {
        &:hover {
          @media (hover: hover) {
            color: var(--ks-color-black);
          }
        }
      }
    }
    &.ks\:btn-link {
      color: var(--ks-color-primary-800);
      text-decoration-line: underline;
      text-decoration-color: var(--ks-color-primary-200);
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
      &:hover {
        @media (hover: hover) {
          text-decoration-color: var(--ks-color-primary-300);
        }
      }
    }
    &.ks\:btn-black {
      background-color: var(--ks-color-slate-800);
      color: var(--ks-color-white);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-slate-600);
      --tw-ring-inset: inset;
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-slate-700);
        }
      }
    }
    &.ks\:btn-success {
      background-color: var(--ks-color-emerald-600);
      color: var(--ks-color-white);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-emerald-600);
      --tw-ring-inset: inset;
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-emerald-500);
        }
      }
    }
    &.ks\:btn-warning {
      background-color: var(--ks-color-yellow-500);
      color: var(--ks-color-black);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-yellow-500);
      --tw-ring-inset: inset;
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-yellow-400);
        }
      }
    }
    &.ks\:btn-info {
      background-color: var(--ks-color-blue-500);
      color: var(--ks-color-white);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-blue-600);
      --tw-ring-inset: inset;
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-blue-400);
        }
      }
    }
    &.ks\:btn-danger {
      background-color: var(--ks-color-red-600);
      color: var(--ks-color-white);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-red-600);
      --tw-ring-inset: inset;
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-red-500);
        }
      }
    }
    &.ks\:btn-dark {
      background-color: var(--ks-color-slate-800);
      color: var(--ks-color-white);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-slate-600);
      --tw-ring-inset: inset;
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-slate-700);
        }
      }
    }
    &.ks\:btn-accent {
      background-color: var(--ks-color-accent);
      color: var(--ks-color-white);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-accent);
      --tw-ring-inset: inset;
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-accent-700);
        }
      }
    }
    &.ks\:btn-accent-light {
      background-color: var(--ks-color-accent-50);
      color: var(--ks-color-accent);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-accent);
      --tw-ring-inset: inset;
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-accent-100);
        }
      }
    }
    &.ks\:btn-indigo {
      background-color: var(--ks-color-indigo-600);
      color: var(--ks-color-white);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-indigo-600);
      --tw-ring-inset: inset;
      &:hover {
        @media (hover: hover) {
          background-color: var(--ks-color-indigo-500);
        }
      }
    }
    &.ks\:btn-linear-success {
      --tw-gradient-position: to top left;
      @supports (background-image: linear-gradient(in lab, red, red)) {
        --tw-gradient-position: to top left in oklab;
      }
      background-image: linear-gradient(var(--tw-gradient-stops));
      --tw-gradient-from: var(--ks-color-emerald-600);
      --tw-gradient-to: var(--ks-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));
      color: var(--ks-color-white);
      &:hover {
        @media (hover: hover) {
          --tw-gradient-from: var(--ks-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));
        }
      }
      &:hover {
        @media (hover: hover) {
          --tw-gradient-to: var(--ks-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));
        }
      }
    }
    &.ks\:btn-linear-accent {
      --tw-gradient-position: to top left;
      @supports (background-image: linear-gradient(in lab, red, red)) {
        --tw-gradient-position: to top left in oklab;
      }
      background-image: linear-gradient(var(--tw-gradient-stops));
      --tw-gradient-from: var(--ks-color-accent-600);
      --tw-gradient-to: var(--ks-color-accent-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));
      color: var(--ks-color-white);
      &:hover {
        @media (hover: hover) {
          --tw-gradient-from: var(--ks-color-accent-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 {
        @media (hover: hover) {
          --tw-gradient-to: var(--ks-color-accent-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));
        }
      }
    }
    .ks\:btn-spinner {
      position: relative;
      &::before {
        position: absolute;
        inset: calc(var(--ks-spacing) * 0.5);
        display: block;
        animation: var(--ks-animate-spin);
        border-radius: calc(infinity * 1px);
        border-style: var(--tw-border-style);
        border-width: 2px;
        border-color: currentcolor;
        border-bottom-color: transparent;
        opacity: 70%;
        --tw-content: '';
        content: var(--tw-content);
      }
      &.ks\:spinner-xs {
        width: calc(var(--ks-spacing) * 3);
        height: calc(var(--ks-spacing) * 3);
      }
      &.ks\:spinner-sm {
        width: calc(var(--ks-spacing) * 4);
        height: calc(var(--ks-spacing) * 4);
      }
      &.ks\:spinner-md {
        width: calc(var(--ks-spacing) * 5);
        height: calc(var(--ks-spacing) * 5);
      }
      &.ks\:spinner-lg {
        width: calc(var(--ks-spacing) * 6);
        height: calc(var(--ks-spacing) * 6);
      }
      &.ks\:spinner-xl {
        width: calc(var(--ks-spacing) * 7);
        height: calc(var(--ks-spacing) * 7);
      }
    }
  }
  .ks\:sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .ks\:absolute {
    position: absolute;
  }
  .ks\:fixed {
    position: fixed;
  }
  .ks\:relative {
    position: relative;
  }
  .ks\:sticky {
    position: sticky;
  }
  .ks\:-inset-2\.5 {
    inset: calc(var(--ks-spacing) * -2.5);
  }
  .ks\:inset-0 {
    inset: calc(var(--ks-spacing) * 0);
  }
  .ks\:inset-1 {
    inset: calc(var(--ks-spacing) * 1);
  }
  .ks\:inset-\[0_2px\] {
    inset: 0 2px;
  }
  .ks\:inset-x-0 {
    inset-inline: calc(var(--ks-spacing) * 0);
  }
  .ks\:start-2 {
    inset-inline-start: calc(var(--ks-spacing) * 2);
  }
  .ks\:-top-1\.5 {
    top: calc(var(--ks-spacing) * -1.5);
  }
  .ks\:top-0 {
    top: calc(var(--ks-spacing) * 0);
  }
  .ks\:top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .ks\:top-20 {
    top: calc(var(--ks-spacing) * 20);
  }
  .ks\:top-24 {
    top: calc(var(--ks-spacing) * 24);
  }
  .ks\:top-30 {
    top: calc(var(--ks-spacing) * 30);
  }
  .ks\:-right-60 {
    right: calc(var(--ks-spacing) * -60);
  }
  .ks\:right-0 {
    right: calc(var(--ks-spacing) * 0);
  }
  .ks\:right-1 {
    right: calc(var(--ks-spacing) * 1);
  }
  .ks\:right-10 {
    right: calc(var(--ks-spacing) * 10);
  }
  .ks\:right-70 {
    right: calc(var(--ks-spacing) * 70);
  }
  .ks\:-bottom-5 {
    bottom: calc(var(--ks-spacing) * -5);
  }
  .ks\:bottom-0 {
    bottom: calc(var(--ks-spacing) * 0);
  }
  .ks\:bottom-25 {
    bottom: calc(var(--ks-spacing) * 25);
  }
  .ks\:bottom-full {
    bottom: 100%;
  }
  .ks\:left-0 {
    left: calc(var(--ks-spacing) * 0);
  }
  .ks\:left-1 {
    left: calc(var(--ks-spacing) * 1);
  }
  .ks\:left-1\/2\! {
    left: calc(1 / 2 * 100%) !important;
  }
  .ks\:left-4 {
    left: calc(var(--ks-spacing) * 4);
  }
  .ks\:left-10 {
    left: calc(var(--ks-spacing) * 10);
  }
  .ks\:-z-10 {
    z-index: calc(10 * -1);
  }
  .ks\:z-0 {
    z-index: 0;
  }
  .ks\:z-10 {
    z-index: 10;
  }
  .ks\:z-50 {
    z-index: 50;
  }
  .ks\:order-first {
    order: -9999;
  }
  .ks\:order-last {
    order: 9999;
  }
  .ks\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .ks\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .ks\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .ks\:col-span-full {
    grid-column: 1 / -1;
  }
  .ks\:container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .ks\:container {
    margin-inline: auto;
    max-width: calc(var(--ks-spacing) * 340);
    padding-inline: calc(var(--ks-spacing) * 2);
    @media (width >= 40rem) {
      padding-inline: calc(var(--ks-spacing) * 6);
    }
    @media (width >= 64rem) {
      padding-inline: calc(var(--ks-spacing) * 8);
    }
  }
  .ks\:full-width {
    margin-inline: calc(var(--ks-spacing) * -4);
    @media (width >= 40rem) {
      margin-inline: calc(var(--ks-spacing) * -10);
    }
  }
  .ks\:-mx-1 {
    margin-inline: calc(var(--ks-spacing) * -1);
  }
  .ks\:-mx-2 {
    margin-inline: calc(var(--ks-spacing) * -2);
  }
  .ks\:-mx-4 {
    margin-inline: calc(var(--ks-spacing) * -4);
  }
  .ks\:-mx-5 {
    margin-inline: calc(var(--ks-spacing) * -5);
  }
  .ks\:mx-1 {
    margin-inline: calc(var(--ks-spacing) * 1);
  }
  .ks\:mx-1\.5 {
    margin-inline: calc(var(--ks-spacing) * 1.5);
  }
  .ks\:mx-2 {
    margin-inline: calc(var(--ks-spacing) * 2);
  }
  .ks\:mx-4 {
    margin-inline: calc(var(--ks-spacing) * 4);
  }
  .ks\:mx-5 {
    margin-inline: calc(var(--ks-spacing) * 5);
  }
  .ks\:mx-auto {
    margin-inline: auto;
  }
  .ks\:-my-2 {
    margin-block: calc(var(--ks-spacing) * -2);
  }
  .ks\:-my-2\.5 {
    margin-block: calc(var(--ks-spacing) * -2.5);
  }
  .ks\:my-1 {
    margin-block: calc(var(--ks-spacing) * 1);
  }
  .ks\:my-2 {
    margin-block: calc(var(--ks-spacing) * 2);
  }
  .ks\:my-2\.5 {
    margin-block: calc(var(--ks-spacing) * 2.5);
  }
  .ks\:my-4 {
    margin-block: calc(var(--ks-spacing) * 4);
  }
  .ks\:my-5 {
    margin-block: calc(var(--ks-spacing) * 5);
  }
  .ks\:ms-2 {
    margin-inline-start: calc(var(--ks-spacing) * 2);
  }
  .ks\:ms-auto {
    margin-inline-start: auto;
  }
  .ks\:me-1 {
    margin-inline-end: calc(var(--ks-spacing) * 1);
  }
  .ks\:me-1\.5 {
    margin-inline-end: calc(var(--ks-spacing) * 1.5);
  }
  .ks\:me-2 {
    margin-inline-end: calc(var(--ks-spacing) * 2);
  }
  .ks\:-mt-20 {
    margin-top: calc(var(--ks-spacing) * -20);
  }
  .ks\:-mt-22 {
    margin-top: calc(var(--ks-spacing) * -22);
  }
  .ks\:-mt-25 {
    margin-top: calc(var(--ks-spacing) * -25);
  }
  .ks\:-mt-30 {
    margin-top: calc(var(--ks-spacing) * -30);
  }
  .ks\:mt-0\.5 {
    margin-top: calc(var(--ks-spacing) * 0.5);
  }
  .ks\:mt-1 {
    margin-top: calc(var(--ks-spacing) * 1);
  }
  .ks\:mt-2 {
    margin-top: calc(var(--ks-spacing) * 2);
  }
  .ks\:mt-2\.5 {
    margin-top: calc(var(--ks-spacing) * 2.5);
  }
  .ks\:mt-3 {
    margin-top: calc(var(--ks-spacing) * 3);
  }
  .ks\:mt-4 {
    margin-top: calc(var(--ks-spacing) * 4);
  }
  .ks\:mt-5 {
    margin-top: calc(var(--ks-spacing) * 5);
  }
  .ks\:mt-6 {
    margin-top: calc(var(--ks-spacing) * 6);
  }
  .ks\:mt-8 {
    margin-top: calc(var(--ks-spacing) * 8);
  }
  .ks\:mt-10 {
    margin-top: calc(var(--ks-spacing) * 10);
  }
  .ks\:mr-1 {
    margin-right: calc(var(--ks-spacing) * 1);
  }
  .ks\:mr-2 {
    margin-right: calc(var(--ks-spacing) * 2);
  }
  .ks\:-mb-px {
    margin-bottom: -1px;
  }
  .ks\:mb-0\.5 {
    margin-bottom: calc(var(--ks-spacing) * 0.5);
  }
  .ks\:mb-1 {
    margin-bottom: calc(var(--ks-spacing) * 1);
  }
  .ks\:mb-1\.5 {
    margin-bottom: calc(var(--ks-spacing) * 1.5);
  }
  .ks\:mb-2 {
    margin-bottom: calc(var(--ks-spacing) * 2);
  }
  .ks\:mb-2\.5 {
    margin-bottom: calc(var(--ks-spacing) * 2.5);
  }
  .ks\:mb-3 {
    margin-bottom: calc(var(--ks-spacing) * 3);
  }
  .ks\:mb-4 {
    margin-bottom: calc(var(--ks-spacing) * 4);
  }
  .ks\:mb-5 {
    margin-bottom: calc(var(--ks-spacing) * 5);
  }
  .ks\:mb-6 {
    margin-bottom: calc(var(--ks-spacing) * 6);
  }
  .ks\:mb-8 {
    margin-bottom: calc(var(--ks-spacing) * 8);
  }
  .ks\:mb-10 {
    margin-bottom: calc(var(--ks-spacing) * 10);
  }
  .ks\:mb-12 {
    margin-bottom: calc(var(--ks-spacing) * 12);
  }
  .ks\:mb-15 {
    margin-bottom: calc(var(--ks-spacing) * 15);
  }
  .ks\:mb-20 {
    margin-bottom: calc(var(--ks-spacing) * 20);
  }
  .ks\:ml-0 {
    margin-left: calc(var(--ks-spacing) * 0);
  }
  .ks\:ml-1 {
    margin-left: calc(var(--ks-spacing) * 1);
  }
  .ks\:ml-auto {
    margin-left: auto;
  }
  .ks\:line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .ks\:block {
    display: block;
  }
  .ks\:flex {
    display: flex;
  }
  .ks\:grid {
    display: grid;
  }
  .ks\:hidden {
    display: none;
  }
  .ks\:inline-block {
    display: inline-block;
  }
  .ks\:inline-flex {
    display: inline-flex;
  }
  .ks\:inline-grid {
    display: inline-grid;
  }
  .ks\:aspect-square {
    aspect-ratio: 1 / 1;
  }
  .ks\:size-0 {
    width: calc(var(--ks-spacing) * 0);
    height: calc(var(--ks-spacing) * 0);
  }
  .ks\:size-5 {
    width: calc(var(--ks-spacing) * 5);
    height: calc(var(--ks-spacing) * 5);
  }
  .ks\:size-6 {
    width: calc(var(--ks-spacing) * 6);
    height: calc(var(--ks-spacing) * 6);
  }
  .ks\:size-8 {
    width: calc(var(--ks-spacing) * 8);
    height: calc(var(--ks-spacing) * 8);
  }
  .ks\:size-10 {
    width: calc(var(--ks-spacing) * 10);
    height: calc(var(--ks-spacing) * 10);
  }
  .ks\:size-12 {
    width: calc(var(--ks-spacing) * 12);
    height: calc(var(--ks-spacing) * 12);
  }
  .ks\:size-14 {
    width: calc(var(--ks-spacing) * 14);
    height: calc(var(--ks-spacing) * 14);
  }
  .ks\:size-16 {
    width: calc(var(--ks-spacing) * 16);
    height: calc(var(--ks-spacing) * 16);
  }
  .ks\:size-20 {
    width: calc(var(--ks-spacing) * 20);
    height: calc(var(--ks-spacing) * 20);
  }
  .ks\:size-30 {
    width: calc(var(--ks-spacing) * 30);
    height: calc(var(--ks-spacing) * 30);
  }
  .ks\:size-full {
    width: 100%;
    height: 100%;
  }
  .ks\:h-3 {
    height: calc(var(--ks-spacing) * 3);
  }
  .ks\:h-3\/4 {
    height: calc(3 / 4 * 100%);
  }
  .ks\:h-4 {
    height: calc(var(--ks-spacing) * 4);
  }
  .ks\:h-5 {
    height: calc(var(--ks-spacing) * 5);
  }
  .ks\:h-10 {
    height: calc(var(--ks-spacing) * 10);
  }
  .ks\:h-16 {
    height: calc(var(--ks-spacing) * 16);
  }
  .ks\:h-20 {
    height: calc(var(--ks-spacing) * 20);
  }
  .ks\:h-50 {
    height: calc(var(--ks-spacing) * 50);
  }
  .ks\:h-60 {
    height: calc(var(--ks-spacing) * 60);
  }
  .ks\:h-70 {
    height: calc(var(--ks-spacing) * 70);
  }
  .ks\:h-100 {
    height: calc(var(--ks-spacing) * 100);
  }
  .ks\:h-auto {
    height: auto;
  }
  .ks\:h-fit {
    height: fit-content;
  }
  .ks\:h-full {
    height: 100%;
  }
  .ks\:h-px {
    height: 1px;
  }
  .ks\:max-h-50 {
    max-height: calc(var(--ks-spacing) * 50);
  }
  .ks\:max-h-160 {
    max-height: calc(var(--ks-spacing) * 160);
  }
  .ks\:max-h-\[80vh\] {
    max-height: 80vh;
  }
  .ks\:max-h-\[550px\] {
    max-height: 550px;
  }
  .ks\:min-h-40 {
    min-height: calc(var(--ks-spacing) * 40);
  }
  .ks\:min-h-100 {
    min-height: calc(var(--ks-spacing) * 100);
  }
  .ks\:min-h-min {
    min-height: min-content;
  }
  .ks\:w-0\.5 {
    width: calc(var(--ks-spacing) * 0.5);
  }
  .ks\:w-7 {
    width: calc(var(--ks-spacing) * 7);
  }
  .ks\:w-10 {
    width: calc(var(--ks-spacing) * 10);
  }
  .ks\:w-20 {
    width: calc(var(--ks-spacing) * 20);
  }
  .ks\:w-30 {
    width: calc(var(--ks-spacing) * 30);
  }
  .ks\:w-60 {
    width: calc(var(--ks-spacing) * 60);
  }
  .ks\:w-75 {
    width: calc(var(--ks-spacing) * 75);
  }
  .ks\:w-auto {
    width: auto;
  }
  .ks\:w-full {
    width: 100%;
  }
  .ks\:max-w-2xl {
    max-width: var(--ks-container-2xl);
  }
  .ks\:max-w-3xl {
    max-width: var(--ks-container-3xl);
  }
  .ks\:max-w-4xl {
    max-width: var(--ks-container-4xl);
  }
  .ks\:max-w-5xl {
    max-width: var(--ks-container-5xl);
  }
  .ks\:max-w-30 {
    max-width: calc(var(--ks-spacing) * 30);
  }
  .ks\:max-w-lg {
    max-width: var(--ks-container-lg);
  }
  .ks\:max-w-md {
    max-width: var(--ks-container-md);
  }
  .ks\:max-w-xl {
    max-width: var(--ks-container-xl);
  }
  .ks\:max-w-xs {
    max-width: var(--ks-container-xs);
  }
  .ks\:min-w-0 {
    min-width: calc(var(--ks-spacing) * 0);
  }
  .ks\:min-w-48 {
    min-width: calc(var(--ks-spacing) * 48);
  }
  .ks\:min-w-70 {
    min-width: calc(var(--ks-spacing) * 70);
  }
  .ks\:min-w-90 {
    min-width: calc(var(--ks-spacing) * 90);
  }
  .ks\:flex-1 {
    flex: 1;
  }
  .ks\:shrink-0 {
    flex-shrink: 0;
  }
  .ks\:grow-0 {
    flex-grow: 0;
  }
  .ks\:basis-12 {
    flex-basis: calc(var(--ks-spacing) * 12);
  }
  .ks\:basis-16 {
    flex-basis: calc(var(--ks-spacing) * 16);
  }
  .ks\:basis-20 {
    flex-basis: calc(var(--ks-spacing) * 20);
  }
  .ks\:basis-22 {
    flex-basis: calc(var(--ks-spacing) * 22);
  }
  .ks\:origin-top-right {
    transform-origin: 100% 0;
  }
  .ks\:-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .ks\:-translate-x-1\/2\! {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1) !important;
    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
  }
  .ks\:-translate-x-5 {
    --tw-translate-x: calc(var(--ks-spacing) * -5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .ks\:translate-x-5 {
    --tw-translate-x: calc(var(--ks-spacing) * 5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .ks\:-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .ks\:-translate-y-4 {
    --tw-translate-y: calc(var(--ks-spacing) * -4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .ks\:-translate-y-8 {
    --tw-translate-y: calc(var(--ks-spacing) * -8);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .ks\:-translate-y-20 {
    --tw-translate-y: calc(var(--ks-spacing) * -20);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .ks\:translate-y-0 {
    --tw-translate-y: calc(var(--ks-spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .ks\:translate-y-10 {
    --tw-translate-y: calc(var(--ks-spacing) * 10);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .ks\:scale-90 {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .ks\:scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .ks\:-rotate-16 {
    rotate: calc(16deg * -1);
  }
  .ks\:rotate-180 {
    rotate: 180deg;
  }
  .ks\:animate-pulse {
    animation: var(--ks-animate-pulse);
  }
  .ks\:animate-spin {
    animation: var(--ks-animate-spin);
  }
  .ks\:link {
    cursor: pointer;
    &.ks\:link-underline {
      text-decoration-line: underline;
      text-decoration-color: var(--ks-color-primary-300);
      text-decoration-style: dashed;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
      &:hover {
        @media (hover: hover) {
          text-decoration-color: var(--ks-color-primary-600);
        }
      }
    }
  }
  .ks\:cursor-pointer {
    cursor: pointer;
  }
  .ks\:scroll-pt-top-gap {
    scroll-padding-top: var(--ks-spacing-top-gap);
  }
  .ks\:list-inside {
    list-style-position: inside;
  }
  .ks\:list-disc {
    list-style-type: disc;
  }
  .ks\:list-none {
    list-style-type: none;
  }
  .ks\:appearance-none {
    appearance: none;
  }
  .ks\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ks\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ks\:grid-cols-subgrid {
    grid-template-columns: subgrid;
  }
  .ks\:flex-col {
    flex-direction: column;
  }
  .ks\:flex-nowrap\! {
    flex-wrap: nowrap !important;
  }
  .ks\:flex-wrap {
    flex-wrap: wrap;
  }
  .ks\:place-content-center {
    place-content: center;
  }
  .ks\:place-items-center {
    place-items: center;
  }
  .ks\:items-center {
    align-items: center;
  }
  .ks\:items-center-safe {
    align-items: safe center;
  }
  .ks\:items-end {
    align-items: flex-end;
  }
  .ks\:items-start {
    align-items: flex-start;
  }
  .ks\:items-stretch {
    align-items: stretch;
  }
  .ks\:justify-between {
    justify-content: space-between;
  }
  .ks\:justify-center {
    justify-content: center;
  }
  .ks\:justify-center-safe {
    justify-content: safe center;
  }
  .ks\:justify-end {
    justify-content: flex-end;
  }
  .ks\:justify-end-safe {
    justify-content: safe flex-end;
  }
  .ks\:justify-start {
    justify-content: flex-start;
  }
  .ks\:gap-1 {
    gap: calc(var(--ks-spacing) * 1);
  }
  .ks\:gap-1\.5 {
    gap: calc(var(--ks-spacing) * 1.5);
  }
  .ks\:gap-2 {
    gap: calc(var(--ks-spacing) * 2);
  }
  .ks\:gap-2\.5 {
    gap: calc(var(--ks-spacing) * 2.5);
  }
  .ks\:gap-3 {
    gap: calc(var(--ks-spacing) * 3);
  }
  .ks\:gap-4 {
    gap: calc(var(--ks-spacing) * 4);
  }
  .ks\:gap-5 {
    gap: calc(var(--ks-spacing) * 5);
  }
  .ks\:gap-6 {
    gap: calc(var(--ks-spacing) * 6);
  }
  .ks\:gap-8 {
    gap: calc(var(--ks-spacing) * 8);
  }
  .ks\:gap-10 {
    gap: calc(var(--ks-spacing) * 10);
  }
  .ks\:gap-20 {
    gap: calc(var(--ks-spacing) * 20);
  }
  .ks\:space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--ks-spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--ks-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .ks\:space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--ks-spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--ks-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .ks\:space-y-2\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--ks-spacing) * 2.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--ks-spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .ks\:space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--ks-spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--ks-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .ks\:space-y-5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--ks-spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--ks-spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .ks\:space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--ks-spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--ks-spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .ks\:space-y-10 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--ks-spacing) * 10) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--ks-spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .ks\:space-y-px {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(1px * var(--tw-space-y-reverse));
      margin-block-end: calc(1px * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .ks\:gap-x-2 {
    column-gap: calc(var(--ks-spacing) * 2);
  }
  .ks\:gap-x-2\.5 {
    column-gap: calc(var(--ks-spacing) * 2.5);
  }
  .ks\:gap-x-3 {
    column-gap: calc(var(--ks-spacing) * 3);
  }
  .ks\:gap-x-4 {
    column-gap: calc(var(--ks-spacing) * 4);
  }
  .ks\:gap-x-6 {
    column-gap: calc(var(--ks-spacing) * 6);
  }
  .ks\:gap-x-10 {
    column-gap: calc(var(--ks-spacing) * 10);
  }
  .ks\:gap-y-2 {
    row-gap: calc(var(--ks-spacing) * 2);
  }
  .ks\:gap-y-2\.5 {
    row-gap: calc(var(--ks-spacing) * 2.5);
  }
  .ks\:gap-y-4 {
    row-gap: calc(var(--ks-spacing) * 4);
  }
  .ks\:gap-y-5 {
    row-gap: calc(var(--ks-spacing) * 5);
  }
  .ks\:gap-y-8 {
    row-gap: calc(var(--ks-spacing) * 8);
  }
  .ks\:gap-y-10 {
    row-gap: calc(var(--ks-spacing) * 10);
  }
  .ks\:divide-x {
    :where(& > :not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-style: var(--tw-border-style);
      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }
  }
  .ks\:divide-y {
    :where(& > :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)));
    }
  }
  .ks\:divide-black\/8 {
    :where(& > :not(:last-child)) {
      border-color: var(--ks-color-black);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--ks-color-black) 8%, transparent);
      }
    }
  }
  .ks\:divide-primary-200 {
    :where(& > :not(:last-child)) {
      border-color: var(--ks-color-primary-200);
    }
  }
  .ks\:divide-stone-200 {
    :where(& > :not(:last-child)) {
      border-color: var(--ks-color-stone-200);
    }
  }
  .ks\:divide-zinc-200 {
    :where(& > :not(:last-child)) {
      border-color: var(--ks-color-zinc-200);
    }
  }
  .ks\:divide-zinc-300 {
    :where(& > :not(:last-child)) {
      border-color: var(--ks-color-zinc-300);
    }
  }
  .ks\:place-self-center {
    place-self: center;
  }
  .ks\:justify-self-end-safe {
    justify-self: safe flex-end;
  }
  .ks\:truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ks\:overflow-clip {
    overflow: clip;
  }
  .ks\:overflow-hidden {
    overflow: hidden;
  }
  .ks\:overflow-x-auto {
    overflow-x: auto;
  }
  .ks\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .ks\:overflow-y-auto {
    overflow-y: auto;
  }
  .ks\:rounded-2xl {
    border-radius: var(--ks-radius-2xl);
  }
  .ks\:rounded-app {
    border-radius: var(--ks-radius-app);
  }
  .ks\:rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .ks\:rounded-lg {
    border-radius: var(--ks-radius-lg);
  }
  .ks\:rounded-md {
    border-radius: var(--ks-radius-md);
  }
  .ks\:rounded-sm {
    border-radius: var(--ks-radius-sm);
  }
  .ks\:rounded-xl {
    border-radius: var(--ks-radius-xl);
  }
  .ks\:rounded-t-md {
    border-top-left-radius: var(--ks-radius-md);
    border-top-right-radius: var(--ks-radius-md);
  }
  .ks\:rounded-t-xl {
    border-top-left-radius: var(--ks-radius-xl);
    border-top-right-radius: var(--ks-radius-xl);
  }
  .ks\:rounded-l-md {
    border-top-left-radius: var(--ks-radius-md);
    border-bottom-left-radius: var(--ks-radius-md);
  }
  .ks\:rounded-r-md {
    border-top-right-radius: var(--ks-radius-md);
    border-bottom-right-radius: var(--ks-radius-md);
  }
  .ks\:rounded-b-md {
    border-bottom-right-radius: var(--ks-radius-md);
    border-bottom-left-radius: var(--ks-radius-md);
  }
  .ks\:rounded-b-xl {
    border-bottom-right-radius: var(--ks-radius-xl);
    border-bottom-left-radius: var(--ks-radius-xl);
  }
  .ks\:border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .ks\:border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .ks\:container-inner {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 1px;
    border-color: var(--ks-color-slate-200);
    padding-inline: calc(var(--ks-spacing) * 4);
    &[data-theme="dark"] {
      border-color: var(--ks-color-white);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--ks-color-white) 10%, transparent);
      }
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--ks-spacing) * 10);
    }
  }
  .ks\:border-x {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 1px;
  }
  .ks\:border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }
  .ks\:border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .ks\:border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .ks\:border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .ks\:border-b-8 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 8px;
  }
  .ks\:border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .ks\:border-accent {
    border-color: var(--ks-color-accent);
  }
  .ks\:border-accent-200 {
    border-color: var(--ks-color-accent-200);
  }
  .ks\:border-accent-600 {
    border-color: var(--ks-color-accent-600);
  }
  .ks\:border-primary-200 {
    border-color: var(--ks-color-primary-200);
  }
  .ks\:border-primary-300 {
    border-color: var(--ks-color-primary-300);
  }
  .ks\:border-slate-200 {
    border-color: var(--ks-color-slate-200);
  }
  .ks\:border-slate-600 {
    border-color: var(--ks-color-slate-600);
  }
  .ks\:border-stone-100 {
    border-color: var(--ks-color-stone-100);
  }
  .ks\:border-stone-200 {
    border-color: var(--ks-color-stone-200);
  }
  .ks\:border-stone-300 {
    border-color: var(--ks-color-stone-300);
  }
  .ks\:border-transparent {
    border-color: transparent;
  }
  .ks\:border-zinc-100 {
    border-color: var(--ks-color-zinc-100);
  }
  .ks\:border-zinc-200 {
    border-color: var(--ks-color-zinc-200);
  }
  .ks\:border-zinc-300 {
    border-color: var(--ks-color-zinc-300);
  }
  .ks\:bg-accent {
    background-color: var(--ks-color-accent);
  }
  .ks\:bg-accent-50 {
    background-color: var(--ks-color-accent-50);
  }
  .ks\:bg-accent-100 {
    background-color: var(--ks-color-accent-100);
  }
  .ks\:bg-accent-300 {
    background-color: var(--ks-color-accent-300);
  }
  .ks\:bg-accent-400\/20 {
    background-color: var(--ks-color-accent-400);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-accent-400) 20%, transparent);
    }
  }
  .ks\:bg-accent-500\/1 {
    background-color: var(--ks-color-accent-500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-accent-500) 1%, transparent);
    }
  }
  .ks\:bg-accent-500\/5 {
    background-color: var(--ks-color-accent-500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-accent-500) 5%, transparent);
    }
  }
  .ks\:bg-accent-500\/10 {
    background-color: var(--ks-color-accent-500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-accent-500) 10%, transparent);
    }
  }
  .ks\:bg-accent-500\/20 {
    background-color: var(--ks-color-accent-500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-accent-500) 20%, transparent);
    }
  }
  .ks\:bg-accent-600 {
    background-color: var(--ks-color-accent-600);
  }
  .ks\:bg-accent-600\/10 {
    background-color: var(--ks-color-accent-600);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-accent-600) 10%, transparent);
    }
  }
  .ks\:bg-accent-700\/8 {
    background-color: var(--ks-color-accent-700);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-accent-700) 8%, transparent);
    }
  }
  .ks\:bg-accent-800\/8 {
    background-color: var(--ks-color-accent-800);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-accent-800) 8%, transparent);
    }
  }
  .ks\:bg-accent\/8 {
    background-color: var(--ks-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-accent) 8%, transparent);
    }
  }
  .ks\:bg-accent\/15 {
    background-color: var(--ks-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-accent) 15%, transparent);
    }
  }
  .ks\:bg-amber-50 {
    background-color: var(--ks-color-amber-50);
  }
  .ks\:bg-amber-100 {
    background-color: var(--ks-color-amber-100);
  }
  .ks\:bg-amber-200 {
    background-color: var(--ks-color-amber-200);
  }
  .ks\:bg-amber-300 {
    background-color: var(--ks-color-amber-300);
  }
  .ks\:bg-amber-400 {
    background-color: var(--ks-color-amber-400);
  }
  .ks\:bg-amber-500 {
    background-color: var(--ks-color-amber-500);
  }
  .ks\:bg-amber-600 {
    background-color: var(--ks-color-amber-600);
  }
  .ks\:bg-amber-600\/15 {
    background-color: var(--ks-color-amber-600);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-amber-600) 15%, transparent);
    }
  }
  .ks\:bg-amber-700 {
    background-color: var(--ks-color-amber-700);
  }
  .ks\:bg-amber-800 {
    background-color: var(--ks-color-amber-800);
  }
  .ks\:bg-amber-900 {
    background-color: var(--ks-color-amber-900);
  }
  .ks\:bg-amber-950 {
    background-color: var(--ks-color-amber-950);
  }
  .ks\:bg-black {
    background-color: var(--ks-color-black);
  }
  .ks\:bg-black\/2 {
    background-color: var(--ks-color-black);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-black) 2%, transparent);
    }
  }
  .ks\:bg-black\/15 {
    background-color: var(--ks-color-black);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-black) 15%, transparent);
    }
  }
  .ks\:bg-blue-50 {
    background-color: var(--ks-color-blue-50);
  }
  .ks\:bg-blue-100 {
    background-color: var(--ks-color-blue-100);
  }
  .ks\:bg-blue-200 {
    background-color: var(--ks-color-blue-200);
  }
  .ks\:bg-blue-300 {
    background-color: var(--ks-color-blue-300);
  }
  .ks\:bg-blue-400 {
    background-color: var(--ks-color-blue-400);
  }
  .ks\:bg-blue-500 {
    background-color: var(--ks-color-blue-500);
  }
  .ks\:bg-blue-500\/15 {
    background-color: var(--ks-color-blue-500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-blue-500) 15%, transparent);
    }
  }
  .ks\:bg-blue-600 {
    background-color: var(--ks-color-blue-600);
  }
  .ks\:bg-blue-600\/15 {
    background-color: var(--ks-color-blue-600);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-blue-600) 15%, transparent);
    }
  }
  .ks\:bg-blue-700 {
    background-color: var(--ks-color-blue-700);
  }
  .ks\:bg-blue-800 {
    background-color: var(--ks-color-blue-800);
  }
  .ks\:bg-blue-900 {
    background-color: var(--ks-color-blue-900);
  }
  .ks\:bg-blue-950 {
    background-color: var(--ks-color-blue-950);
  }
  .ks\:bg-cyan-50 {
    background-color: var(--ks-color-cyan-50);
  }
  .ks\:bg-cyan-100 {
    background-color: var(--ks-color-cyan-100);
  }
  .ks\:bg-cyan-200 {
    background-color: var(--ks-color-cyan-200);
  }
  .ks\:bg-cyan-300 {
    background-color: var(--ks-color-cyan-300);
  }
  .ks\:bg-cyan-400 {
    background-color: var(--ks-color-cyan-400);
  }
  .ks\:bg-cyan-500 {
    background-color: var(--ks-color-cyan-500);
  }
  .ks\:bg-cyan-600 {
    background-color: var(--ks-color-cyan-600);
  }
  .ks\:bg-cyan-700 {
    background-color: var(--ks-color-cyan-700);
  }
  .ks\:bg-cyan-800 {
    background-color: var(--ks-color-cyan-800);
  }
  .ks\:bg-cyan-900 {
    background-color: var(--ks-color-cyan-900);
  }
  .ks\:bg-cyan-950 {
    background-color: var(--ks-color-cyan-950);
  }
  .ks\:bg-emerald-50 {
    background-color: var(--ks-color-emerald-50);
  }
  .ks\:bg-emerald-100 {
    background-color: var(--ks-color-emerald-100);
  }
  .ks\:bg-emerald-200 {
    background-color: var(--ks-color-emerald-200);
  }
  .ks\:bg-emerald-300 {
    background-color: var(--ks-color-emerald-300);
  }
  .ks\:bg-emerald-400 {
    background-color: var(--ks-color-emerald-400);
  }
  .ks\:bg-emerald-500 {
    background-color: var(--ks-color-emerald-500);
  }
  .ks\:bg-emerald-600 {
    background-color: var(--ks-color-emerald-600);
  }
  .ks\:bg-emerald-600\/15 {
    background-color: var(--ks-color-emerald-600);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-emerald-600) 15%, transparent);
    }
  }
  .ks\:bg-emerald-700 {
    background-color: var(--ks-color-emerald-700);
  }
  .ks\:bg-emerald-800 {
    background-color: var(--ks-color-emerald-800);
  }
  .ks\:bg-emerald-900 {
    background-color: var(--ks-color-emerald-900);
  }
  .ks\:bg-emerald-950 {
    background-color: var(--ks-color-emerald-950);
  }
  .ks\:bg-fuchsia-50 {
    background-color: var(--ks-color-fuchsia-50);
  }
  .ks\:bg-fuchsia-100 {
    background-color: var(--ks-color-fuchsia-100);
  }
  .ks\:bg-fuchsia-200 {
    background-color: var(--ks-color-fuchsia-200);
  }
  .ks\:bg-fuchsia-300 {
    background-color: var(--ks-color-fuchsia-300);
  }
  .ks\:bg-fuchsia-400 {
    background-color: var(--ks-color-fuchsia-400);
  }
  .ks\:bg-fuchsia-500 {
    background-color: var(--ks-color-fuchsia-500);
  }
  .ks\:bg-fuchsia-600 {
    background-color: var(--ks-color-fuchsia-600);
  }
  .ks\:bg-fuchsia-700 {
    background-color: var(--ks-color-fuchsia-700);
  }
  .ks\:bg-fuchsia-800 {
    background-color: var(--ks-color-fuchsia-800);
  }
  .ks\:bg-fuchsia-900 {
    background-color: var(--ks-color-fuchsia-900);
  }
  .ks\:bg-fuchsia-950 {
    background-color: var(--ks-color-fuchsia-950);
  }
  .ks\:bg-green-50 {
    background-color: var(--ks-color-green-50);
  }
  .ks\:bg-green-100 {
    background-color: var(--ks-color-green-100);
  }
  .ks\:bg-green-200 {
    background-color: var(--ks-color-green-200);
  }
  .ks\:bg-green-300 {
    background-color: var(--ks-color-green-300);
  }
  .ks\:bg-green-400 {
    background-color: var(--ks-color-green-400);
  }
  .ks\:bg-green-500 {
    background-color: var(--ks-color-green-500);
  }
  .ks\:bg-green-500\/10 {
    background-color: var(--ks-color-green-500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-green-500) 10%, transparent);
    }
  }
  .ks\:bg-green-500\/15 {
    background-color: var(--ks-color-green-500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-green-500) 15%, transparent);
    }
  }
  .ks\:bg-green-600 {
    background-color: var(--ks-color-green-600);
  }
  .ks\:bg-green-700 {
    background-color: var(--ks-color-green-700);
  }
  .ks\:bg-green-800 {
    background-color: var(--ks-color-green-800);
  }
  .ks\:bg-green-900 {
    background-color: var(--ks-color-green-900);
  }
  .ks\:bg-green-950 {
    background-color: var(--ks-color-green-950);
  }
  .ks\:bg-indigo-50 {
    background-color: var(--ks-color-indigo-50);
  }
  .ks\:bg-indigo-100 {
    background-color: var(--ks-color-indigo-100);
  }
  .ks\:bg-indigo-200 {
    background-color: var(--ks-color-indigo-200);
  }
  .ks\:bg-indigo-300 {
    background-color: var(--ks-color-indigo-300);
  }
  .ks\:bg-indigo-400 {
    background-color: var(--ks-color-indigo-400);
  }
  .ks\:bg-indigo-500 {
    background-color: var(--ks-color-indigo-500);
  }
  .ks\:bg-indigo-600 {
    background-color: var(--ks-color-indigo-600);
  }
  .ks\:bg-indigo-600\/15 {
    background-color: var(--ks-color-indigo-600);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-indigo-600) 15%, transparent);
    }
  }
  .ks\:bg-indigo-700 {
    background-color: var(--ks-color-indigo-700);
  }
  .ks\:bg-indigo-800 {
    background-color: var(--ks-color-indigo-800);
  }
  .ks\:bg-indigo-900 {
    background-color: var(--ks-color-indigo-900);
  }
  .ks\:bg-indigo-950 {
    background-color: var(--ks-color-indigo-950);
  }
  .ks\:bg-lime-50 {
    background-color: var(--ks-color-lime-50);
  }
  .ks\:bg-lime-100 {
    background-color: var(--ks-color-lime-100);
  }
  .ks\:bg-lime-200 {
    background-color: var(--ks-color-lime-200);
  }
  .ks\:bg-lime-300 {
    background-color: var(--ks-color-lime-300);
  }
  .ks\:bg-lime-400 {
    background-color: var(--ks-color-lime-400);
  }
  .ks\:bg-lime-500 {
    background-color: var(--ks-color-lime-500);
  }
  .ks\:bg-lime-600 {
    background-color: var(--ks-color-lime-600);
  }
  .ks\:bg-lime-700 {
    background-color: var(--ks-color-lime-700);
  }
  .ks\:bg-lime-800 {
    background-color: var(--ks-color-lime-800);
  }
  .ks\:bg-lime-900 {
    background-color: var(--ks-color-lime-900);
  }
  .ks\:bg-lime-950 {
    background-color: var(--ks-color-lime-950);
  }
  .ks\:bg-orange-50 {
    background-color: var(--ks-color-orange-50);
  }
  .ks\:bg-orange-100 {
    background-color: var(--ks-color-orange-100);
  }
  .ks\:bg-orange-200 {
    background-color: var(--ks-color-orange-200);
  }
  .ks\:bg-orange-300 {
    background-color: var(--ks-color-orange-300);
  }
  .ks\:bg-orange-400 {
    background-color: var(--ks-color-orange-400);
  }
  .ks\:bg-orange-500 {
    background-color: var(--ks-color-orange-500);
  }
  .ks\:bg-orange-600 {
    background-color: var(--ks-color-orange-600);
  }
  .ks\:bg-orange-700 {
    background-color: var(--ks-color-orange-700);
  }
  .ks\:bg-orange-800 {
    background-color: var(--ks-color-orange-800);
  }
  .ks\:bg-orange-900 {
    background-color: var(--ks-color-orange-900);
  }
  .ks\:bg-orange-950 {
    background-color: var(--ks-color-orange-950);
  }
  .ks\:bg-pink-50 {
    background-color: var(--ks-color-pink-50);
  }
  .ks\:bg-pink-100 {
    background-color: var(--ks-color-pink-100);
  }
  .ks\:bg-pink-200 {
    background-color: var(--ks-color-pink-200);
  }
  .ks\:bg-pink-300 {
    background-color: var(--ks-color-pink-300);
  }
  .ks\:bg-pink-400 {
    background-color: var(--ks-color-pink-400);
  }
  .ks\:bg-pink-500 {
    background-color: var(--ks-color-pink-500);
  }
  .ks\:bg-pink-600 {
    background-color: var(--ks-color-pink-600);
  }
  .ks\:bg-pink-700 {
    background-color: var(--ks-color-pink-700);
  }
  .ks\:bg-pink-800 {
    background-color: var(--ks-color-pink-800);
  }
  .ks\:bg-pink-900 {
    background-color: var(--ks-color-pink-900);
  }
  .ks\:bg-pink-950 {
    background-color: var(--ks-color-pink-950);
  }
  .ks\:bg-primary-50 {
    background-color: var(--ks-color-primary-50);
  }
  .ks\:bg-primary-100 {
    background-color: var(--ks-color-primary-100);
  }
  .ks\:bg-primary-600 {
    background-color: var(--ks-color-primary-600);
  }
  .ks\:bg-primary-900 {
    background-color: var(--ks-color-primary-900);
  }
  .ks\:bg-purple-50 {
    background-color: var(--ks-color-purple-50);
  }
  .ks\:bg-purple-100 {
    background-color: var(--ks-color-purple-100);
  }
  .ks\:bg-purple-200 {
    background-color: var(--ks-color-purple-200);
  }
  .ks\:bg-purple-300 {
    background-color: var(--ks-color-purple-300);
  }
  .ks\:bg-purple-400 {
    background-color: var(--ks-color-purple-400);
  }
  .ks\:bg-purple-500 {
    background-color: var(--ks-color-purple-500);
  }
  .ks\:bg-purple-600 {
    background-color: var(--ks-color-purple-600);
  }
  .ks\:bg-purple-700 {
    background-color: var(--ks-color-purple-700);
  }
  .ks\:bg-purple-800 {
    background-color: var(--ks-color-purple-800);
  }
  .ks\:bg-purple-900 {
    background-color: var(--ks-color-purple-900);
  }
  .ks\:bg-purple-950 {
    background-color: var(--ks-color-purple-950);
  }
  .ks\:bg-red-50 {
    background-color: var(--ks-color-red-50);
  }
  .ks\:bg-red-100 {
    background-color: var(--ks-color-red-100);
  }
  .ks\:bg-red-200 {
    background-color: var(--ks-color-red-200);
  }
  .ks\:bg-red-300 {
    background-color: var(--ks-color-red-300);
  }
  .ks\:bg-red-400 {
    background-color: var(--ks-color-red-400);
  }
  .ks\:bg-red-500 {
    background-color: var(--ks-color-red-500);
  }
  .ks\:bg-red-500\/10 {
    background-color: var(--ks-color-red-500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-red-500) 10%, transparent);
    }
  }
  .ks\:bg-red-500\/15 {
    background-color: var(--ks-color-red-500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-red-500) 15%, transparent);
    }
  }
  .ks\:bg-red-600 {
    background-color: var(--ks-color-red-600);
  }
  .ks\:bg-red-600\/15 {
    background-color: var(--ks-color-red-600);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-red-600) 15%, transparent);
    }
  }
  .ks\:bg-red-700 {
    background-color: var(--ks-color-red-700);
  }
  .ks\:bg-red-800 {
    background-color: var(--ks-color-red-800);
  }
  .ks\:bg-red-900 {
    background-color: var(--ks-color-red-900);
  }
  .ks\:bg-red-950 {
    background-color: var(--ks-color-red-950);
  }
  .ks\:bg-rose-50 {
    background-color: var(--ks-color-rose-50);
  }
  .ks\:bg-rose-100 {
    background-color: var(--ks-color-rose-100);
  }
  .ks\:bg-rose-200 {
    background-color: var(--ks-color-rose-200);
  }
  .ks\:bg-rose-300 {
    background-color: var(--ks-color-rose-300);
  }
  .ks\:bg-rose-400 {
    background-color: var(--ks-color-rose-400);
  }
  .ks\:bg-rose-500 {
    background-color: var(--ks-color-rose-500);
  }
  .ks\:bg-rose-600 {
    background-color: var(--ks-color-rose-600);
  }
  .ks\:bg-rose-600\/15 {
    background-color: var(--ks-color-rose-600);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-rose-600) 15%, transparent);
    }
  }
  .ks\:bg-rose-700 {
    background-color: var(--ks-color-rose-700);
  }
  .ks\:bg-rose-800 {
    background-color: var(--ks-color-rose-800);
  }
  .ks\:bg-rose-900 {
    background-color: var(--ks-color-rose-900);
  }
  .ks\:bg-rose-950 {
    background-color: var(--ks-color-rose-950);
  }
  .ks\:bg-sky-50 {
    background-color: var(--ks-color-sky-50);
  }
  .ks\:bg-sky-100 {
    background-color: var(--ks-color-sky-100);
  }
  .ks\:bg-sky-200 {
    background-color: var(--ks-color-sky-200);
  }
  .ks\:bg-sky-300 {
    background-color: var(--ks-color-sky-300);
  }
  .ks\:bg-sky-400 {
    background-color: var(--ks-color-sky-400);
  }
  .ks\:bg-sky-500 {
    background-color: var(--ks-color-sky-500);
  }
  .ks\:bg-sky-600 {
    background-color: var(--ks-color-sky-600);
  }
  .ks\:bg-sky-600\/15 {
    background-color: var(--ks-color-sky-600);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-sky-600) 15%, transparent);
    }
  }
  .ks\:bg-sky-700 {
    background-color: var(--ks-color-sky-700);
  }
  .ks\:bg-sky-800 {
    background-color: var(--ks-color-sky-800);
  }
  .ks\:bg-sky-900 {
    background-color: var(--ks-color-sky-900);
  }
  .ks\:bg-sky-950 {
    background-color: var(--ks-color-sky-950);
  }
  .ks\:bg-stone-50 {
    background-color: var(--ks-color-stone-50);
  }
  .ks\:bg-stone-100 {
    background-color: var(--ks-color-stone-100);
  }
  .ks\:bg-teal-50 {
    background-color: var(--ks-color-teal-50);
  }
  .ks\:bg-teal-100 {
    background-color: var(--ks-color-teal-100);
  }
  .ks\:bg-teal-200 {
    background-color: var(--ks-color-teal-200);
  }
  .ks\:bg-teal-300 {
    background-color: var(--ks-color-teal-300);
  }
  .ks\:bg-teal-400 {
    background-color: var(--ks-color-teal-400);
  }
  .ks\:bg-teal-500 {
    background-color: var(--ks-color-teal-500);
  }
  .ks\:bg-teal-600 {
    background-color: var(--ks-color-teal-600);
  }
  .ks\:bg-teal-700 {
    background-color: var(--ks-color-teal-700);
  }
  .ks\:bg-teal-800 {
    background-color: var(--ks-color-teal-800);
  }
  .ks\:bg-teal-900 {
    background-color: var(--ks-color-teal-900);
  }
  .ks\:bg-teal-950 {
    background-color: var(--ks-color-teal-950);
  }
  .ks\:bg-transparent {
    background-color: transparent;
  }
  .ks\:bg-violet-50 {
    background-color: var(--ks-color-violet-50);
  }
  .ks\:bg-violet-100 {
    background-color: var(--ks-color-violet-100);
  }
  .ks\:bg-violet-200 {
    background-color: var(--ks-color-violet-200);
  }
  .ks\:bg-violet-300 {
    background-color: var(--ks-color-violet-300);
  }
  .ks\:bg-violet-400 {
    background-color: var(--ks-color-violet-400);
  }
  .ks\:bg-violet-500 {
    background-color: var(--ks-color-violet-500);
  }
  .ks\:bg-violet-600 {
    background-color: var(--ks-color-violet-600);
  }
  .ks\:bg-violet-600\/15 {
    background-color: var(--ks-color-violet-600);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-violet-600) 15%, transparent);
    }
  }
  .ks\:bg-violet-700 {
    background-color: var(--ks-color-violet-700);
  }
  .ks\:bg-violet-800 {
    background-color: var(--ks-color-violet-800);
  }
  .ks\:bg-violet-900 {
    background-color: var(--ks-color-violet-900);
  }
  .ks\:bg-violet-950 {
    background-color: var(--ks-color-violet-950);
  }
  .ks\:bg-white {
    background-color: var(--ks-color-white);
  }
  .ks\:bg-white\/1 {
    background-color: var(--ks-color-white);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-white) 1%, transparent);
    }
  }
  .ks\:bg-white\/60 {
    background-color: var(--ks-color-white);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-white) 60%, transparent);
    }
  }
  .ks\:bg-white\/70 {
    background-color: var(--ks-color-white);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-white) 70%, transparent);
    }
  }
  .ks\:bg-white\/90 {
    background-color: var(--ks-color-white);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-white) 90%, transparent);
    }
  }
  .ks\:bg-yellow-50 {
    background-color: var(--ks-color-yellow-50);
  }
  .ks\:bg-yellow-100 {
    background-color: var(--ks-color-yellow-100);
  }
  .ks\:bg-yellow-200 {
    background-color: var(--ks-color-yellow-200);
  }
  .ks\:bg-yellow-300 {
    background-color: var(--ks-color-yellow-300);
  }
  .ks\:bg-yellow-400 {
    background-color: var(--ks-color-yellow-400);
  }
  .ks\:bg-yellow-500 {
    background-color: var(--ks-color-yellow-500);
  }
  .ks\:bg-yellow-500\/10 {
    background-color: var(--ks-color-yellow-500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-yellow-500) 10%, transparent);
    }
  }
  .ks\:bg-yellow-600 {
    background-color: var(--ks-color-yellow-600);
  }
  .ks\:bg-yellow-600\/5 {
    background-color: var(--ks-color-yellow-600);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-yellow-600) 5%, transparent);
    }
  }
  .ks\:bg-yellow-700 {
    background-color: var(--ks-color-yellow-700);
  }
  .ks\:bg-yellow-800 {
    background-color: var(--ks-color-yellow-800);
  }
  .ks\:bg-yellow-900 {
    background-color: var(--ks-color-yellow-900);
  }
  .ks\:bg-yellow-950 {
    background-color: var(--ks-color-yellow-950);
  }
  .ks\:bg-zinc-50 {
    background-color: var(--ks-color-zinc-50);
  }
  .ks\:bg-zinc-100 {
    background-color: var(--ks-color-zinc-100);
  }
  .ks\:bg-linear-to-b {
    --tw-gradient-position: to bottom;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to bottom in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .ks\:bg-linear-to-bl {
    --tw-gradient-position: to bottom left;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to bottom left in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .ks\:bg-linear-to-br {
    --tw-gradient-position: to bottom right;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to bottom right in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .ks\:bg-linear-to-t {
    --tw-gradient-position: to top;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to top in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .ks\:bg-linear-to-tl {
    --tw-gradient-position: to top left;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to top left in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .ks\:bg-linear-to-tr {
    --tw-gradient-position: to top right;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to top right in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .ks\:from-accent-100 {
    --tw-gradient-from: var(--ks-color-accent-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));
  }
  .ks\:from-accent-200 {
    --tw-gradient-from: var(--ks-color-accent-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));
  }
  .ks\:from-accent-500\/8 {
    --tw-gradient-from: var(--ks-color-accent-500);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--ks-color-accent-500) 8%, 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));
  }
  .ks\:from-accent-500\/10 {
    --tw-gradient-from: var(--ks-color-accent-500);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--ks-color-accent-500) 10%, 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));
  }
  .ks\:from-accent-500\/15 {
    --tw-gradient-from: var(--ks-color-accent-500);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--ks-color-accent-500) 15%, 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));
  }
  .ks\:from-accent-500\/20 {
    --tw-gradient-from: var(--ks-color-accent-500);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--ks-color-accent-500) 20%, 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));
  }
  .ks\:from-accent\/5 {
    --tw-gradient-from: var(--ks-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--ks-color-accent) 5%, 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));
  }
  .ks\:from-accent\/10 {
    --tw-gradient-from: var(--ks-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--ks-color-accent) 10%, 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));
  }
  .ks\:from-amber-500\/10 {
    --tw-gradient-from: var(--ks-color-amber-500);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--ks-color-amber-500) 10%, 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));
  }
  .ks\:from-black\/5 {
    --tw-gradient-from: var(--ks-color-black);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--ks-color-black) 5%, 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));
  }
  .ks\:from-black\/40 {
    --tw-gradient-from: var(--ks-color-black);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--ks-color-black) 40%, 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));
  }
  .ks\:from-black\/50 {
    --tw-gradient-from: var(--ks-color-black);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--ks-color-black) 50%, 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));
  }
  .ks\:from-black\/70 {
    --tw-gradient-from: var(--ks-color-black);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--ks-color-black) 70%, 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));
  }
  .ks\:from-current {
    --tw-gradient-from: currentcolor;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .ks\:from-emerald-500\/8 {
    --tw-gradient-from: var(--ks-color-emerald-500);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--ks-color-emerald-500) 8%, 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));
  }
  .ks\:from-primary-50 {
    --tw-gradient-from: var(--ks-color-primary-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));
  }
  .ks\:from-red-500\/15 {
    --tw-gradient-from: var(--ks-color-red-500);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--ks-color-red-500) 15%, 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));
  }
  .ks\:from-stone-50 {
    --tw-gradient-from: var(--ks-color-stone-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));
  }
  .ks\:from-stone-100 {
    --tw-gradient-from: var(--ks-color-stone-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));
  }
  .ks\:from-white {
    --tw-gradient-from: var(--ks-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));
  }
  .ks\:from-zinc-900 {
    --tw-gradient-from: var(--ks-color-zinc-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));
  }
  .ks\:from-5\% {
    --tw-gradient-from-position: 5%;
  }
  .ks\:from-50\% {
    --tw-gradient-from-position: 50%;
  }
  .ks\:from-95\% {
    --tw-gradient-from-position: 95%;
  }
  .ks\:from-\[20px\] {
    --tw-gradient-from-position: 20px;
  }
  .ks\:via-accent-50 {
    --tw-gradient-via: var(--ks-color-accent-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);
  }
  .ks\:via-primary-50 {
    --tw-gradient-via: var(--ks-color-primary-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);
  }
  .ks\:via-10\% {
    --tw-gradient-via-position: 10%;
  }
  .ks\:to-accent-100\/5 {
    --tw-gradient-to: var(--ks-color-accent-100);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--ks-color-accent-100) 5%, 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));
  }
  .ks\:to-accent-100\/10 {
    --tw-gradient-to: var(--ks-color-accent-100);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--ks-color-accent-100) 10%, 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));
  }
  .ks\:to-accent-500\/4 {
    --tw-gradient-to: var(--ks-color-accent-500);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--ks-color-accent-500) 4%, 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));
  }
  .ks\:to-accent-950 {
    --tw-gradient-to: var(--ks-color-accent-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));
  }
  .ks\:to-amber-100\/5 {
    --tw-gradient-to: var(--ks-color-amber-100);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--ks-color-amber-100) 5%, 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));
  }
  .ks\:to-black\/20 {
    --tw-gradient-to: var(--ks-color-black);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--ks-color-black) 20%, 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));
  }
  .ks\:to-black\/40 {
    --tw-gradient-to: var(--ks-color-black);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--ks-color-black) 40%, 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));
  }
  .ks\:to-black\/50 {
    --tw-gradient-to: var(--ks-color-black);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--ks-color-black) 50%, 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));
  }
  .ks\:to-emerald-500\/4 {
    --tw-gradient-to: var(--ks-color-emerald-500);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--ks-color-emerald-500) 4%, 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));
  }
  .ks\:to-primary-50 {
    --tw-gradient-to: var(--ks-color-primary-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));
  }
  .ks\:to-red-100\/10 {
    --tw-gradient-to: var(--ks-color-red-100);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--ks-color-red-100) 10%, 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));
  }
  .ks\: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));
  }
  .ks\:to-white {
    --tw-gradient-to: var(--ks-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));
  }
  .ks\:to-30\% {
    --tw-gradient-to-position: 30%;
  }
  .ks\:to-40\% {
    --tw-gradient-to-position: 40%;
  }
  .ks\:to-50\% {
    --tw-gradient-to-position: 50%;
  }
  .ks\:to-60\% {
    --tw-gradient-to-position: 60%;
  }
  .ks\:to-85\% {
    --tw-gradient-to-position: 85%;
  }
  .ks\:mask-t-from-black {
    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
    mask-composite: intersect;
    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
    --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
    --tw-mask-top-from-color: var(--ks-color-black);
  }
  .ks\:mask-t-from-80\% {
    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
    mask-composite: intersect;
    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
    --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
    --tw-mask-top-from-position: 80%;
  }
  .ks\:mask-r-from-black {
    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
    mask-composite: intersect;
    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
    --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
    --tw-mask-right-from-color: var(--ks-color-black);
  }
  .ks\:mask-r-from-transparent {
    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
    mask-composite: intersect;
    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
    --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
    --tw-mask-right-from-color: transparent;
  }
  .ks\:mask-r-from-10\% {
    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
    mask-composite: intersect;
    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
    --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
    --tw-mask-right-from-position: 10%;
  }
  .ks\:mask-r-to-black {
    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
    mask-composite: intersect;
    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
    --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
    --tw-mask-right-to-color: var(--ks-color-black);
  }
  .ks\:mask-b-from-black {
    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
    mask-composite: intersect;
    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
    --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
    --tw-mask-bottom-from-color: var(--ks-color-black);
  }
  .ks\:mask-l-from-30\% {
    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
    mask-composite: intersect;
    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
    --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
    --tw-mask-left-from-position: 30%;
  }
  .ks\:mask-alpha {
    mask-mode: alpha;
  }
  .ks\:object-contain {
    object-fit: contain;
  }
  .ks\:object-cover {
    object-fit: cover;
  }
  .ks\:object-bottom-left {
    object-position: left bottom;
  }
  .ks\:object-center {
    object-position: center;
  }
  .ks\:object-right {
    object-position: right;
  }
  .ks\:object-top {
    object-position: top;
  }
  .ks\:object-top-left {
    object-position: left top;
  }
  .ks\:p-0 {
    padding: calc(var(--ks-spacing) * 0);
  }
  .ks\:p-0\.5 {
    padding: calc(var(--ks-spacing) * 0.5);
  }
  .ks\:p-1 {
    padding: calc(var(--ks-spacing) * 1);
  }
  .ks\:p-1\.5 {
    padding: calc(var(--ks-spacing) * 1.5);
  }
  .ks\:p-2 {
    padding: calc(var(--ks-spacing) * 2);
  }
  .ks\:p-2\.5 {
    padding: calc(var(--ks-spacing) * 2.5);
  }
  .ks\:p-3 {
    padding: calc(var(--ks-spacing) * 3);
  }
  .ks\:p-4 {
    padding: calc(var(--ks-spacing) * 4);
  }
  .ks\:p-5 {
    padding: calc(var(--ks-spacing) * 5);
  }
  .ks\:p-6 {
    padding: calc(var(--ks-spacing) * 6);
  }
  .ks\:p-10 {
    padding: calc(var(--ks-spacing) * 10);
  }
  .ks\:\!px-3 {
    padding-inline: calc(var(--ks-spacing) * 3) !important;
  }
  .ks\:px-0 {
    padding-inline: calc(var(--ks-spacing) * 0);
  }
  .ks\:px-1 {
    padding-inline: calc(var(--ks-spacing) * 1);
  }
  .ks\:px-1\.5\! {
    padding-inline: calc(var(--ks-spacing) * 1.5) !important;
  }
  .ks\:px-2 {
    padding-inline: calc(var(--ks-spacing) * 2);
  }
  .ks\:px-2\.5 {
    padding-inline: calc(var(--ks-spacing) * 2.5);
  }
  .ks\:px-3 {
    padding-inline: calc(var(--ks-spacing) * 3);
  }
  .ks\:px-4 {
    padding-inline: calc(var(--ks-spacing) * 4);
  }
  .ks\:px-4\! {
    padding-inline: calc(var(--ks-spacing) * 4) !important;
  }
  .ks\:px-5 {
    padding-inline: calc(var(--ks-spacing) * 5);
  }
  .ks\:px-6 {
    padding-inline: calc(var(--ks-spacing) * 6);
  }
  .ks\:px-8 {
    padding-inline: calc(var(--ks-spacing) * 8);
  }
  .ks\:px-10 {
    padding-inline: calc(var(--ks-spacing) * 10);
  }
  .ks\:py-0\.5 {
    padding-block: calc(var(--ks-spacing) * 0.5);
  }
  .ks\:py-1 {
    padding-block: calc(var(--ks-spacing) * 1);
  }
  .ks\:py-1\.5 {
    padding-block: calc(var(--ks-spacing) * 1.5);
  }
  .ks\:py-1\.5\! {
    padding-block: calc(var(--ks-spacing) * 1.5) !important;
  }
  .ks\:py-2 {
    padding-block: calc(var(--ks-spacing) * 2);
  }
  .ks\:py-2\! {
    padding-block: calc(var(--ks-spacing) * 2) !important;
  }
  .ks\:py-2\.5 {
    padding-block: calc(var(--ks-spacing) * 2.5);
  }
  .ks\:py-3 {
    padding-block: calc(var(--ks-spacing) * 3);
  }
  .ks\:py-4 {
    padding-block: calc(var(--ks-spacing) * 4);
  }
  .ks\:py-5 {
    padding-block: calc(var(--ks-spacing) * 5);
  }
  .ks\:py-6 {
    padding-block: calc(var(--ks-spacing) * 6);
  }
  .ks\:py-8 {
    padding-block: calc(var(--ks-spacing) * 8);
  }
  .ks\:py-10 {
    padding-block: calc(var(--ks-spacing) * 10);
  }
  .ks\:py-15 {
    padding-block: calc(var(--ks-spacing) * 15);
  }
  .ks\:py-20 {
    padding-block: calc(var(--ks-spacing) * 20);
  }
  .ks\:py-30 {
    padding-block: calc(var(--ks-spacing) * 30);
  }
  .ks\:py-35 {
    padding-block: calc(var(--ks-spacing) * 35);
  }
  .ks\:py-px {
    padding-block: 1px;
  }
  .ks\:ps-4 {
    padding-inline-start: calc(var(--ks-spacing) * 4);
  }
  .ks\:ps-5 {
    padding-inline-start: calc(var(--ks-spacing) * 5);
  }
  .ks\:pt-0 {
    padding-top: calc(var(--ks-spacing) * 0);
  }
  .ks\:pt-1 {
    padding-top: calc(var(--ks-spacing) * 1);
  }
  .ks\:pt-4 {
    padding-top: calc(var(--ks-spacing) * 4);
  }
  .ks\:pt-5 {
    padding-top: calc(var(--ks-spacing) * 5);
  }
  .ks\:pt-8 {
    padding-top: calc(var(--ks-spacing) * 8);
  }
  .ks\:pt-10 {
    padding-top: calc(var(--ks-spacing) * 10);
  }
  .ks\:pt-20 {
    padding-top: calc(var(--ks-spacing) * 20);
  }
  .ks\:pt-top-gap {
    padding-top: var(--ks-spacing-top-gap);
  }
  .ks\:pr-0\! {
    padding-right: calc(var(--ks-spacing) * 0) !important;
  }
  .ks\:pr-3 {
    padding-right: calc(var(--ks-spacing) * 3);
  }
  .ks\:pr-4 {
    padding-right: calc(var(--ks-spacing) * 4);
  }
  .ks\:pb-0 {
    padding-bottom: calc(var(--ks-spacing) * 0);
  }
  .ks\:pb-1 {
    padding-bottom: calc(var(--ks-spacing) * 1);
  }
  .ks\:pb-2 {
    padding-bottom: calc(var(--ks-spacing) * 2);
  }
  .ks\:pb-4 {
    padding-bottom: calc(var(--ks-spacing) * 4);
  }
  .ks\:pb-5 {
    padding-bottom: calc(var(--ks-spacing) * 5);
  }
  .ks\:pb-10 {
    padding-bottom: calc(var(--ks-spacing) * 10);
  }
  .ks\:pb-12 {
    padding-bottom: calc(var(--ks-spacing) * 12);
  }
  .ks\:pb-20 {
    padding-bottom: calc(var(--ks-spacing) * 20);
  }
  .ks\:pb-25 {
    padding-bottom: calc(var(--ks-spacing) * 25);
  }
  .ks\:pb-30 {
    padding-bottom: calc(var(--ks-spacing) * 30);
  }
  .ks\:pb-35 {
    padding-bottom: calc(var(--ks-spacing) * 35);
  }
  .ks\:pb-40 {
    padding-bottom: calc(var(--ks-spacing) * 40);
  }
  .ks\:pl-3 {
    padding-left: calc(var(--ks-spacing) * 3);
  }
  .ks\:pl-4 {
    padding-left: calc(var(--ks-spacing) * 4);
  }
  .ks\:pl-12 {
    padding-left: calc(var(--ks-spacing) * 12);
  }
  .ks\:text-center {
    text-align: center;
  }
  .ks\:text-end {
    text-align: end;
  }
  .ks\:text-left {
    text-align: left;
  }
  .ks\:font-body {
    font-family: var(--ks-font-body);
  }
  .ks\:font-cursive {
    font-family: var(--ks-font-cursive);
  }
  .ks\:text-2xl {
    font-size: var(--ks-text-2xl);
    line-height: var(--tw-leading, var(--ks-text-2xl--line-height));
  }
  .ks\:text-3xl {
    font-size: var(--ks-text-3xl);
    line-height: var(--tw-leading, var(--ks-text-3xl--line-height));
  }
  .ks\:text-4xl {
    font-size: var(--ks-text-4xl);
    line-height: var(--tw-leading, var(--ks-text-4xl--line-height));
  }
  .ks\:text-5xl {
    font-size: var(--ks-text-5xl);
    line-height: var(--tw-leading, var(--ks-text-5xl--line-height));
  }
  .ks\:text-base {
    font-size: var(--ks-text-base);
    line-height: var(--tw-leading, var(--ks-text-base--line-height));
  }
  .ks\:text-lg {
    font-size: var(--ks-text-lg);
    line-height: var(--tw-leading, var(--ks-text-lg--line-height));
  }
  .ks\:text-sm {
    font-size: var(--ks-text-sm);
    line-height: var(--tw-leading, var(--ks-text-sm--line-height));
  }
  .ks\:text-xl {
    font-size: var(--ks-text-xl);
    line-height: var(--tw-leading, var(--ks-text-xl--line-height));
  }
  .ks\:text-xs {
    font-size: var(--ks-text-xs);
    line-height: var(--tw-leading, var(--ks-text-xs--line-height));
  }
  .ks\:text-\[13px\] {
    font-size: 13px;
  }
  .ks\:leading-relaxed {
    --tw-leading: var(--ks-leading-relaxed);
    line-height: var(--ks-leading-relaxed);
  }
  .ks\:leading-tight {
    --tw-leading: var(--ks-leading-tight);
    line-height: var(--ks-leading-tight);
  }
  .ks\:lh-0 {
    --tw-leading: calc(var(--ks-spacing) * 0);
    line-height: calc(var(--ks-spacing) * 0);
  }
  .ks\:font-bold {
    --tw-font-weight: var(--ks-font-weight-bold);
    font-weight: var(--ks-font-weight-bold);
  }
  .ks\:font-light {
    --tw-font-weight: var(--ks-font-weight-light);
    font-weight: var(--ks-font-weight-light);
  }
  .ks\:font-medium {
    --tw-font-weight: var(--ks-font-weight-medium);
    font-weight: var(--ks-font-weight-medium);
  }
  .ks\:font-normal {
    --tw-font-weight: var(--ks-font-weight-normal);
    font-weight: var(--ks-font-weight-normal);
  }
  .ks\:font-semibold {
    --tw-font-weight: var(--ks-font-weight-semibold);
    font-weight: var(--ks-font-weight-semibold);
  }
  .ks\:text-pretty {
    text-wrap: pretty;
  }
  .ks\:break-all {
    word-break: break-all;
  }
  .ks\:whitespace-nowrap {
    white-space: nowrap;
  }
  .ks\:text-accent {
    color: var(--ks-color-accent);
  }
  .ks\:text-accent-500 {
    color: var(--ks-color-accent-500);
  }
  .ks\:text-accent-600 {
    color: var(--ks-color-accent-600);
  }
  .ks\:text-accent-700 {
    color: var(--ks-color-accent-700);
  }
  .ks\:text-accent-800 {
    color: var(--ks-color-accent-800);
  }
  .ks\:text-amber-50 {
    color: var(--ks-color-amber-50);
  }
  .ks\:text-amber-100 {
    color: var(--ks-color-amber-100);
  }
  .ks\:text-amber-200 {
    color: var(--ks-color-amber-200);
  }
  .ks\:text-amber-300 {
    color: var(--ks-color-amber-300);
  }
  .ks\:text-amber-400 {
    color: var(--ks-color-amber-400);
  }
  .ks\:text-amber-500 {
    color: var(--ks-color-amber-500);
  }
  .ks\:text-amber-600 {
    color: var(--ks-color-amber-600);
  }
  .ks\:text-amber-700 {
    color: var(--ks-color-amber-700);
  }
  .ks\:text-amber-800 {
    color: var(--ks-color-amber-800);
  }
  .ks\:text-amber-900 {
    color: var(--ks-color-amber-900);
  }
  .ks\:text-amber-950 {
    color: var(--ks-color-amber-950);
  }
  .ks\:text-black {
    color: var(--ks-color-black);
  }
  .ks\:text-black\/80 {
    color: var(--ks-color-black);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ks-color-black) 80%, transparent);
    }
  }
  .ks\:text-black\/90 {
    color: var(--ks-color-black);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ks-color-black) 90%, transparent);
    }
  }
  .ks\:text-blue-50 {
    color: var(--ks-color-blue-50);
  }
  .ks\:text-blue-100 {
    color: var(--ks-color-blue-100);
  }
  .ks\:text-blue-200 {
    color: var(--ks-color-blue-200);
  }
  .ks\:text-blue-300 {
    color: var(--ks-color-blue-300);
  }
  .ks\:text-blue-400 {
    color: var(--ks-color-blue-400);
  }
  .ks\:text-blue-500 {
    color: var(--ks-color-blue-500);
  }
  .ks\:text-blue-600 {
    color: var(--ks-color-blue-600);
  }
  .ks\:text-blue-700 {
    color: var(--ks-color-blue-700);
  }
  .ks\:text-blue-800 {
    color: var(--ks-color-blue-800);
  }
  .ks\:text-blue-900 {
    color: var(--ks-color-blue-900);
  }
  .ks\:text-blue-950 {
    color: var(--ks-color-blue-950);
  }
  .ks\:text-cyan-50 {
    color: var(--ks-color-cyan-50);
  }
  .ks\:text-cyan-100 {
    color: var(--ks-color-cyan-100);
  }
  .ks\:text-cyan-200 {
    color: var(--ks-color-cyan-200);
  }
  .ks\:text-cyan-300 {
    color: var(--ks-color-cyan-300);
  }
  .ks\:text-cyan-400 {
    color: var(--ks-color-cyan-400);
  }
  .ks\:text-cyan-500 {
    color: var(--ks-color-cyan-500);
  }
  .ks\:text-cyan-600 {
    color: var(--ks-color-cyan-600);
  }
  .ks\:text-cyan-700 {
    color: var(--ks-color-cyan-700);
  }
  .ks\:text-cyan-800 {
    color: var(--ks-color-cyan-800);
  }
  .ks\:text-cyan-900 {
    color: var(--ks-color-cyan-900);
  }
  .ks\:text-cyan-950 {
    color: var(--ks-color-cyan-950);
  }
  .ks\:text-emerald-50 {
    color: var(--ks-color-emerald-50);
  }
  .ks\:text-emerald-100 {
    color: var(--ks-color-emerald-100);
  }
  .ks\:text-emerald-200 {
    color: var(--ks-color-emerald-200);
  }
  .ks\:text-emerald-300 {
    color: var(--ks-color-emerald-300);
  }
  .ks\:text-emerald-400 {
    color: var(--ks-color-emerald-400);
  }
  .ks\:text-emerald-500 {
    color: var(--ks-color-emerald-500);
  }
  .ks\:text-emerald-600 {
    color: var(--ks-color-emerald-600);
  }
  .ks\:text-emerald-700 {
    color: var(--ks-color-emerald-700);
  }
  .ks\:text-emerald-800 {
    color: var(--ks-color-emerald-800);
  }
  .ks\:text-emerald-900 {
    color: var(--ks-color-emerald-900);
  }
  .ks\:text-emerald-950 {
    color: var(--ks-color-emerald-950);
  }
  .ks\:text-fuchsia-50 {
    color: var(--ks-color-fuchsia-50);
  }
  .ks\:text-fuchsia-100 {
    color: var(--ks-color-fuchsia-100);
  }
  .ks\:text-fuchsia-200 {
    color: var(--ks-color-fuchsia-200);
  }
  .ks\:text-fuchsia-300 {
    color: var(--ks-color-fuchsia-300);
  }
  .ks\:text-fuchsia-400 {
    color: var(--ks-color-fuchsia-400);
  }
  .ks\:text-fuchsia-500 {
    color: var(--ks-color-fuchsia-500);
  }
  .ks\:text-fuchsia-600 {
    color: var(--ks-color-fuchsia-600);
  }
  .ks\:text-fuchsia-700 {
    color: var(--ks-color-fuchsia-700);
  }
  .ks\:text-fuchsia-800 {
    color: var(--ks-color-fuchsia-800);
  }
  .ks\:text-fuchsia-900 {
    color: var(--ks-color-fuchsia-900);
  }
  .ks\:text-fuchsia-950 {
    color: var(--ks-color-fuchsia-950);
  }
  .ks\:text-gray-300 {
    color: var(--ks-color-gray-300);
  }
  .ks\:text-gray-400 {
    color: var(--ks-color-gray-400);
  }
  .ks\:text-gray-500 {
    color: var(--ks-color-gray-500);
  }
  .ks\:text-green-50 {
    color: var(--ks-color-green-50);
  }
  .ks\:text-green-100 {
    color: var(--ks-color-green-100);
  }
  .ks\:text-green-200 {
    color: var(--ks-color-green-200);
  }
  .ks\:text-green-300 {
    color: var(--ks-color-green-300);
  }
  .ks\:text-green-400 {
    color: var(--ks-color-green-400);
  }
  .ks\:text-green-500 {
    color: var(--ks-color-green-500);
  }
  .ks\:text-green-600 {
    color: var(--ks-color-green-600);
  }
  .ks\:text-green-700 {
    color: var(--ks-color-green-700);
  }
  .ks\:text-green-800 {
    color: var(--ks-color-green-800);
  }
  .ks\:text-green-900 {
    color: var(--ks-color-green-900);
  }
  .ks\:text-green-950 {
    color: var(--ks-color-green-950);
  }
  .ks\:text-indigo-50 {
    color: var(--ks-color-indigo-50);
  }
  .ks\:text-indigo-100 {
    color: var(--ks-color-indigo-100);
  }
  .ks\:text-indigo-200 {
    color: var(--ks-color-indigo-200);
  }
  .ks\:text-indigo-300 {
    color: var(--ks-color-indigo-300);
  }
  .ks\:text-indigo-400 {
    color: var(--ks-color-indigo-400);
  }
  .ks\:text-indigo-500 {
    color: var(--ks-color-indigo-500);
  }
  .ks\:text-indigo-600 {
    color: var(--ks-color-indigo-600);
  }
  .ks\:text-indigo-700 {
    color: var(--ks-color-indigo-700);
  }
  .ks\:text-indigo-800 {
    color: var(--ks-color-indigo-800);
  }
  .ks\:text-indigo-900 {
    color: var(--ks-color-indigo-900);
  }
  .ks\:text-indigo-950 {
    color: var(--ks-color-indigo-950);
  }
  .ks\:text-lime-50 {
    color: var(--ks-color-lime-50);
  }
  .ks\:text-lime-100 {
    color: var(--ks-color-lime-100);
  }
  .ks\:text-lime-200 {
    color: var(--ks-color-lime-200);
  }
  .ks\:text-lime-300 {
    color: var(--ks-color-lime-300);
  }
  .ks\:text-lime-400 {
    color: var(--ks-color-lime-400);
  }
  .ks\:text-lime-500 {
    color: var(--ks-color-lime-500);
  }
  .ks\:text-lime-600 {
    color: var(--ks-color-lime-600);
  }
  .ks\:text-lime-700 {
    color: var(--ks-color-lime-700);
  }
  .ks\:text-lime-800 {
    color: var(--ks-color-lime-800);
  }
  .ks\:text-lime-900 {
    color: var(--ks-color-lime-900);
  }
  .ks\:text-lime-950 {
    color: var(--ks-color-lime-950);
  }
  .ks\:text-orange-50 {
    color: var(--ks-color-orange-50);
  }
  .ks\:text-orange-100 {
    color: var(--ks-color-orange-100);
  }
  .ks\:text-orange-200 {
    color: var(--ks-color-orange-200);
  }
  .ks\:text-orange-300 {
    color: var(--ks-color-orange-300);
  }
  .ks\:text-orange-400 {
    color: var(--ks-color-orange-400);
  }
  .ks\:text-orange-500 {
    color: var(--ks-color-orange-500);
  }
  .ks\:text-orange-600 {
    color: var(--ks-color-orange-600);
  }
  .ks\:text-orange-700 {
    color: var(--ks-color-orange-700);
  }
  .ks\:text-orange-800 {
    color: var(--ks-color-orange-800);
  }
  .ks\:text-orange-900 {
    color: var(--ks-color-orange-900);
  }
  .ks\:text-orange-950 {
    color: var(--ks-color-orange-950);
  }
  .ks\:text-pink-50 {
    color: var(--ks-color-pink-50);
  }
  .ks\:text-pink-100 {
    color: var(--ks-color-pink-100);
  }
  .ks\:text-pink-200 {
    color: var(--ks-color-pink-200);
  }
  .ks\:text-pink-300 {
    color: var(--ks-color-pink-300);
  }
  .ks\:text-pink-400 {
    color: var(--ks-color-pink-400);
  }
  .ks\:text-pink-500 {
    color: var(--ks-color-pink-500);
  }
  .ks\:text-pink-600 {
    color: var(--ks-color-pink-600);
  }
  .ks\:text-pink-700 {
    color: var(--ks-color-pink-700);
  }
  .ks\:text-pink-800 {
    color: var(--ks-color-pink-800);
  }
  .ks\:text-pink-900 {
    color: var(--ks-color-pink-900);
  }
  .ks\:text-pink-950 {
    color: var(--ks-color-pink-950);
  }
  .ks\:text-primary {
    color: var(--ks-color-primary);
  }
  .ks\:text-primary-400 {
    color: var(--ks-color-primary-400);
  }
  .ks\:text-primary-500 {
    color: var(--ks-color-primary-500);
  }
  .ks\:text-primary-600 {
    color: var(--ks-color-primary-600);
  }
  .ks\:text-primary-800 {
    color: var(--ks-color-primary-800);
  }
  .ks\:text-primary-900 {
    color: var(--ks-color-primary-900);
  }
  .ks\:text-purple-50 {
    color: var(--ks-color-purple-50);
  }
  .ks\:text-purple-100 {
    color: var(--ks-color-purple-100);
  }
  .ks\:text-purple-200 {
    color: var(--ks-color-purple-200);
  }
  .ks\:text-purple-300 {
    color: var(--ks-color-purple-300);
  }
  .ks\:text-purple-400 {
    color: var(--ks-color-purple-400);
  }
  .ks\:text-purple-500 {
    color: var(--ks-color-purple-500);
  }
  .ks\:text-purple-600 {
    color: var(--ks-color-purple-600);
  }
  .ks\:text-purple-700 {
    color: var(--ks-color-purple-700);
  }
  .ks\:text-purple-800 {
    color: var(--ks-color-purple-800);
  }
  .ks\:text-purple-900 {
    color: var(--ks-color-purple-900);
  }
  .ks\:text-purple-950 {
    color: var(--ks-color-purple-950);
  }
  .ks\:text-red-50 {
    color: var(--ks-color-red-50);
  }
  .ks\:text-red-100 {
    color: var(--ks-color-red-100);
  }
  .ks\:text-red-200 {
    color: var(--ks-color-red-200);
  }
  .ks\:text-red-300 {
    color: var(--ks-color-red-300);
  }
  .ks\:text-red-400 {
    color: var(--ks-color-red-400);
  }
  .ks\:text-red-500 {
    color: var(--ks-color-red-500);
  }
  .ks\:text-red-600 {
    color: var(--ks-color-red-600);
  }
  .ks\:text-red-600\! {
    color: var(--ks-color-red-600) !important;
  }
  .ks\:text-red-700 {
    color: var(--ks-color-red-700);
  }
  .ks\:text-red-800 {
    color: var(--ks-color-red-800);
  }
  .ks\:text-red-900 {
    color: var(--ks-color-red-900);
  }
  .ks\:text-red-950 {
    color: var(--ks-color-red-950);
  }
  .ks\:text-rose-50 {
    color: var(--ks-color-rose-50);
  }
  .ks\:text-rose-100 {
    color: var(--ks-color-rose-100);
  }
  .ks\:text-rose-200 {
    color: var(--ks-color-rose-200);
  }
  .ks\:text-rose-300 {
    color: var(--ks-color-rose-300);
  }
  .ks\:text-rose-400 {
    color: var(--ks-color-rose-400);
  }
  .ks\:text-rose-500 {
    color: var(--ks-color-rose-500);
  }
  .ks\:text-rose-600 {
    color: var(--ks-color-rose-600);
  }
  .ks\:text-rose-700 {
    color: var(--ks-color-rose-700);
  }
  .ks\:text-rose-800 {
    color: var(--ks-color-rose-800);
  }
  .ks\:text-rose-900 {
    color: var(--ks-color-rose-900);
  }
  .ks\:text-rose-950 {
    color: var(--ks-color-rose-950);
  }
  .ks\:text-sky-50 {
    color: var(--ks-color-sky-50);
  }
  .ks\:text-sky-100 {
    color: var(--ks-color-sky-100);
  }
  .ks\:text-sky-200 {
    color: var(--ks-color-sky-200);
  }
  .ks\:text-sky-300 {
    color: var(--ks-color-sky-300);
  }
  .ks\:text-sky-400 {
    color: var(--ks-color-sky-400);
  }
  .ks\:text-sky-500 {
    color: var(--ks-color-sky-500);
  }
  .ks\:text-sky-600 {
    color: var(--ks-color-sky-600);
  }
  .ks\:text-sky-700 {
    color: var(--ks-color-sky-700);
  }
  .ks\:text-sky-800 {
    color: var(--ks-color-sky-800);
  }
  .ks\:text-sky-900 {
    color: var(--ks-color-sky-900);
  }
  .ks\:text-sky-950 {
    color: var(--ks-color-sky-950);
  }
  .ks\:text-stone-300 {
    color: var(--ks-color-stone-300);
  }
  .ks\:text-stone-400 {
    color: var(--ks-color-stone-400);
  }
  .ks\:text-stone-500 {
    color: var(--ks-color-stone-500);
  }
  .ks\:text-stone-600 {
    color: var(--ks-color-stone-600);
  }
  .ks\:text-stone-800 {
    color: var(--ks-color-stone-800);
  }
  .ks\:text-subtitle {
    color: var(--ks-color-subtitle);
  }
  .ks\:text-teal-50 {
    color: var(--ks-color-teal-50);
  }
  .ks\:text-teal-100 {
    color: var(--ks-color-teal-100);
  }
  .ks\:text-teal-200 {
    color: var(--ks-color-teal-200);
  }
  .ks\:text-teal-300 {
    color: var(--ks-color-teal-300);
  }
  .ks\:text-teal-400 {
    color: var(--ks-color-teal-400);
  }
  .ks\:text-teal-500 {
    color: var(--ks-color-teal-500);
  }
  .ks\:text-teal-600 {
    color: var(--ks-color-teal-600);
  }
  .ks\:text-teal-700 {
    color: var(--ks-color-teal-700);
  }
  .ks\:text-teal-800 {
    color: var(--ks-color-teal-800);
  }
  .ks\:text-teal-900 {
    color: var(--ks-color-teal-900);
  }
  .ks\:text-teal-950 {
    color: var(--ks-color-teal-950);
  }
  .ks\:text-violet-50 {
    color: var(--ks-color-violet-50);
  }
  .ks\:text-violet-100 {
    color: var(--ks-color-violet-100);
  }
  .ks\:text-violet-200 {
    color: var(--ks-color-violet-200);
  }
  .ks\:text-violet-300 {
    color: var(--ks-color-violet-300);
  }
  .ks\:text-violet-400 {
    color: var(--ks-color-violet-400);
  }
  .ks\:text-violet-500 {
    color: var(--ks-color-violet-500);
  }
  .ks\:text-violet-600 {
    color: var(--ks-color-violet-600);
  }
  .ks\:text-violet-700 {
    color: var(--ks-color-violet-700);
  }
  .ks\:text-violet-800 {
    color: var(--ks-color-violet-800);
  }
  .ks\:text-violet-900 {
    color: var(--ks-color-violet-900);
  }
  .ks\:text-violet-950 {
    color: var(--ks-color-violet-950);
  }
  .ks\:text-white {
    color: var(--ks-color-white);
  }
  .ks\:text-white\/10 {
    color: var(--ks-color-white);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ks-color-white) 10%, transparent);
    }
  }
  .ks\:text-white\/40 {
    color: var(--ks-color-white);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ks-color-white) 40%, transparent);
    }
  }
  .ks\:text-white\/60 {
    color: var(--ks-color-white);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ks-color-white) 60%, transparent);
    }
  }
  .ks\:text-white\/80 {
    color: var(--ks-color-white);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ks-color-white) 80%, transparent);
    }
  }
  .ks\:text-white\/90 {
    color: var(--ks-color-white);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ks-color-white) 90%, transparent);
    }
  }
  .ks\:text-yellow-50 {
    color: var(--ks-color-yellow-50);
  }
  .ks\:text-yellow-100 {
    color: var(--ks-color-yellow-100);
  }
  .ks\:text-yellow-200 {
    color: var(--ks-color-yellow-200);
  }
  .ks\:text-yellow-300 {
    color: var(--ks-color-yellow-300);
  }
  .ks\:text-yellow-400 {
    color: var(--ks-color-yellow-400);
  }
  .ks\:text-yellow-500 {
    color: var(--ks-color-yellow-500);
  }
  .ks\:text-yellow-600 {
    color: var(--ks-color-yellow-600);
  }
  .ks\:text-yellow-600\! {
    color: var(--ks-color-yellow-600) !important;
  }
  .ks\:text-yellow-700 {
    color: var(--ks-color-yellow-700);
  }
  .ks\:text-yellow-800 {
    color: var(--ks-color-yellow-800);
  }
  .ks\:text-yellow-900 {
    color: var(--ks-color-yellow-900);
  }
  .ks\:text-yellow-950 {
    color: var(--ks-color-yellow-950);
  }
  .ks\:text-zinc-200 {
    color: var(--ks-color-zinc-200);
  }
  .ks\:text-zinc-300 {
    color: var(--ks-color-zinc-300);
  }
  .ks\:text-zinc-400 {
    color: var(--ks-color-zinc-400);
  }
  .ks\:text-zinc-500 {
    color: var(--ks-color-zinc-500);
  }
  .ks\:text-zinc-600 {
    color: var(--ks-color-zinc-600);
  }
  .ks\:text-zinc-800 {
    color: var(--ks-color-zinc-800);
  }
  .ks\:uppercase {
    text-transform: uppercase;
  }
  .ks\:italic {
    font-style: italic;
  }
  .ks\:underline {
    text-decoration-line: underline;
  }
  .ks\:decoration-wavy {
    text-decoration-style: wavy;
  }
  .ks\:underline-offset-4 {
    text-underline-offset: 4px;
  }
  .ks\:underline-offset-6 {
    text-underline-offset: 6px;
  }
  .ks\:antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .ks\:opacity-0 {
    opacity: 0%;
  }
  .ks\:opacity-10 {
    opacity: 10%;
  }
  .ks\:opacity-30 {
    opacity: 30%;
  }
  .ks\:opacity-40 {
    opacity: 40%;
  }
  .ks\:opacity-50 {
    opacity: 50%;
  }
  .ks\:opacity-60 {
    opacity: 60%;
  }
  .ks\:opacity-70 {
    opacity: 70%;
  }
  .ks\:opacity-80 {
    opacity: 80%;
  }
  .ks\:opacity-100 {
    opacity: 100%;
  }
  .ks\:mix-blend-multiply {
    mix-blend-mode: multiply;
  }
  .ks\:shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ks\:shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ks\:shadow-\[inset_1px_1px_2px_0_var\(--tw-shadow-color\)\] {
    --tw-shadow: inset 1px 1px 2px 0 var(--tw-shadow-color, var(--tw-shadow-color));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ks\:shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ks\:shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ks\:shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ks\:ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
  }
  .ks\:ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
  }
  .ks\:ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
  }
  .ks\:ring-2 {
    --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);
  }
  .ks\:ring-3 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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);
  }
  .ks\:ring-\[1\.5px\] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1.5px + 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);
  }
  .ks\:shadow-white\/40 {
    --tw-shadow-color: var(--ks-color-white);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--ks-color-white) 40%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .ks\:ring-accent-100 {
    --tw-ring-color: var(--ks-color-accent-100);
  }
  .ks\:ring-accent-200 {
    --tw-ring-color: var(--ks-color-accent-200);
  }
  .ks\:ring-accent-300 {
    --tw-ring-color: var(--ks-color-accent-300);
  }
  .ks\:ring-accent-500 {
    --tw-ring-color: var(--ks-color-accent-500);
  }
  .ks\:ring-accent-500\/10 {
    --tw-ring-color: var(--ks-color-accent-500);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ks-color-accent-500) 10%, transparent);
    }
  }
  .ks\:ring-accent-600\/25 {
    --tw-ring-color: var(--ks-color-accent-600);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ks-color-accent-600) 25%, transparent);
    }
  }
  .ks\:ring-accent-600\/30 {
    --tw-ring-color: var(--ks-color-accent-600);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ks-color-accent-600) 30%, transparent);
    }
  }
  .ks\:ring-accent\/20 {
    --tw-ring-color: var(--ks-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ks-color-accent) 20%, transparent);
    }
  }
  .ks\:ring-amber-500\/20 {
    --tw-ring-color: var(--ks-color-amber-500);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ks-color-amber-500) 20%, transparent);
    }
  }
  .ks\:ring-black {
    --tw-ring-color: var(--ks-color-black);
  }
  .ks\:ring-black\/5 {
    --tw-ring-color: var(--ks-color-black);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ks-color-black) 5%, transparent);
    }
  }
  .ks\:ring-black\/8 {
    --tw-ring-color: var(--ks-color-black);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ks-color-black) 8%, transparent);
    }
  }
  .ks\:ring-primary-200 {
    --tw-ring-color: var(--ks-color-primary-200);
  }
  .ks\:ring-primary-300\/75 {
    --tw-ring-color: var(--ks-color-primary-300);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ks-color-primary-300) 75%, transparent);
    }
  }
  .ks\:ring-red-200 {
    --tw-ring-color: var(--ks-color-red-200);
  }
  .ks\:ring-red-500 {
    --tw-ring-color: var(--ks-color-red-500);
  }
  .ks\:ring-red-600 {
    --tw-ring-color: var(--ks-color-red-600);
  }
  .ks\:ring-stone-50 {
    --tw-ring-color: var(--ks-color-stone-50);
  }
  .ks\:ring-stone-200 {
    --tw-ring-color: var(--ks-color-stone-200);
  }
  .ks\:ring-stone-200\/40 {
    --tw-ring-color: var(--ks-color-stone-200);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ks-color-stone-200) 40%, transparent);
    }
  }
  .ks\:ring-stone-300 {
    --tw-ring-color: var(--ks-color-stone-300);
  }
  .ks\:ring-stone-700 {
    --tw-ring-color: var(--ks-color-stone-700);
  }
  .ks\:ring-stone-800 {
    --tw-ring-color: var(--ks-color-stone-800);
  }
  .ks\:ring-transparent {
    --tw-ring-color: transparent;
  }
  .ks\:ring-white {
    --tw-ring-color: var(--ks-color-white);
  }
  .ks\:ring-white\/20 {
    --tw-ring-color: var(--ks-color-white);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ks-color-white) 20%, transparent);
    }
  }
  .ks\:ring-yellow-600\/20 {
    --tw-ring-color: var(--ks-color-yellow-600);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ks-color-yellow-600) 20%, transparent);
    }
  }
  .ks\:ring-zinc-200 {
    --tw-ring-color: var(--ks-color-zinc-200);
  }
  .ks\: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);
  }
  .ks\:ring-offset-2 {
    --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);
  }
  .ks\:ring-offset-4 {
    --tw-ring-offset-width: 4px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
  .ks\:ring-offset-stone-50 {
    --tw-ring-offset-color: var(--ks-color-stone-50);
  }
  .ks\:ring-offset-white {
    --tw-ring-offset-color: var(--ks-color-white);
  }
  .ks\:backdrop-blur-2xl {
    --tw-backdrop-blur: blur(var(--ks-blur-2xl));
    -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,);
  }
  .ks\:backdrop-blur-lg {
    --tw-backdrop-blur: blur(var(--ks-blur-lg));
    -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,);
  }
  .ks\:backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--ks-blur-sm));
    -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,);
  }
  .ks\:backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--ks-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,);
  }
  .ks\:backdrop-blur-xs {
    --tw-backdrop-blur: blur(var(--ks-blur-xs));
    -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,);
  }
  .ks\: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(--ks-default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
  }
  .ks\:transition-\[padding\] {
    transition-property: padding;
    transition-timing-function: var(--tw-ease, var(--ks-default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
  }
  .ks\:transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--ks-default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
  }
  .ks\: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(--ks-default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
  }
  .ks\:transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--ks-default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
  }
  .ks\:delay-100 {
    transition-delay: 100ms;
  }
  .ks\:delay-150 {
    transition-delay: 150ms;
  }
  .ks\:delay-200 {
    transition-delay: 200ms;
  }
  .ks\:delay-250 {
    transition-delay: 250ms;
  }
  .ks\:delay-300 {
    transition-delay: 300ms;
  }
  .ks\:delay-400 {
    transition-delay: 400ms;
  }
  .ks\:duration-100 {
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .ks\:duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .ks\:duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .ks\:duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .ks\:duration-700 {
    --tw-duration: 700ms;
    transition-duration: 700ms;
  }
  .ks\:ease-in {
    --tw-ease: var(--ks-ease-in);
    transition-timing-function: var(--ks-ease-in);
  }
  .ks\:ease-in-out {
    --tw-ease: var(--ks-ease-in-out);
    transition-timing-function: var(--ks-ease-in-out);
  }
  .ks\:ease-out {
    --tw-ease: var(--ks-ease-out);
    transition-timing-function: var(--ks-ease-out);
  }
  .ks\:outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .ks\:select-all {
    -webkit-user-select: all;
    user-select: all;
  }
  .ks\:select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .ks\:ring-inset {
    --tw-ring-inset: inset;
  }
  .ks\:text-shadow-xs {
    text-shadow: 0px 1px 1px var(--tw-text-shadow-color, rgb(0 0 0 / 0.2));
  }
  .ks\:\*\:flex {
    :is(& > *) {
      display: flex;
    }
  }
  .ks\:\*\:items-start {
    :is(& > *) {
      align-items: flex-start;
    }
  }
  .ks\:\*\:gap-4 {
    :is(& > *) {
      gap: calc(var(--ks-spacing) * 4);
    }
  }
  .ks\:\*\:pr-5 {
    :is(& > *) {
      padding-right: calc(var(--ks-spacing) * 5);
    }
  }
  .ks\:not-group-has-checked\:hidden {
    &:not(*:is(:where(.ks\:group):has(*:checked) *)) {
      display: none;
    }
  }
  .ks\:not-group-has-checked\/radio\:hidden {
    &:not(*:is(:where(.ks\:group\/radio):has(*:checked) *)) {
      display: none;
    }
  }
  .ks\:not-group-data-active\:translate-y-8 {
    &:not(*:is(:where(.ks\:group)[data-active] *)) {
      --tw-translate-y: calc(var(--ks-spacing) * 8);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .ks\:not-group-data-active\:opacity-10 {
    &:not(*:is(:where(.ks\:group)[data-active] *)) {
      opacity: 10%;
    }
  }
  .ks\:not-last\:border-b {
    &:not(*:last-child) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
  }
  .ks\:\*\:not-last\:pb-2\.5 {
    :is(& > *) {
      &:not(*:last-child) {
        padding-bottom: calc(var(--ks-spacing) * 2.5);
      }
    }
  }
  .ks\:not-focus-within\:border-white\/20\! {
    &:not(*:focus-within) {
      border-color: var(--ks-color-white) !important;
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--ks-color-white) 20%, transparent) !important;
      }
    }
  }
  .ks\:not-hover\:text-primary-500 {
    &:not(*:hover) {
      color: var(--ks-color-primary-500);
    }
    @media not (hover: hover) {
      color: var(--ks-color-primary-500);
    }
  }
  .ks\:not-hover\:text-stone-500 {
    &:not(*:hover) {
      color: var(--ks-color-stone-500);
    }
    @media not (hover: hover) {
      color: var(--ks-color-stone-500);
    }
  }
  .ks\:not-has-checked\:opacity-50 {
    &:not(*:has(*:checked)) {
      opacity: 50%;
    }
  }
  .ks\:not-data-active\:translate-y-5 {
    &:not(*[data-active]) {
      --tw-translate-y: calc(var(--ks-spacing) * 5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .ks\:not-data-active\:scale-90 {
    &:not(*[data-active]) {
      --tw-scale-x: 90%;
      --tw-scale-y: 90%;
      --tw-scale-z: 90%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .ks\:not-data-active\:\*\:blur-sm {
    &:not(*[data-active]) {
      :is(& > *) {
        --tw-blur: blur(var(--ks-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,);
      }
    }
  }
  .ks\:not-data-current\:pointer-events-none {
    &:not(*[data-current]) {
      pointer-events: none;
    }
  }
  .ks\:not-data-current\:opacity-30 {
    &:not(*[data-current]) {
      opacity: 30%;
    }
  }
  .ks\:not-data-current\:blur-xs {
    &:not(*[data-current]) {
      --tw-blur: blur(var(--ks-blur-xs));
      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,);
    }
  }
  .ks\:group-hover\:scale-105 {
    &:is(:where(.ks\:group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .ks\:group-hover\:bg-amber-500 {
    &:is(:where(.ks\:group):hover *) {
      @media (hover: hover) {
        background-color: var(--ks-color-amber-500);
      }
    }
  }
  .ks\:group-hover\:bg-black {
    &:is(:where(.ks\:group):hover *) {
      @media (hover: hover) {
        background-color: var(--ks-color-black);
      }
    }
  }
  .ks\:group-hover\:bg-blue-500 {
    &:is(:where(.ks\:group):hover *) {
      @media (hover: hover) {
        background-color: var(--ks-color-blue-500);
      }
    }
  }
  .ks\:group-hover\:bg-emerald-500 {
    &:is(:where(.ks\:group):hover *) {
      @media (hover: hover) {
        background-color: var(--ks-color-emerald-500);
      }
    }
  }
  .ks\:group-hover\:bg-red-500 {
    &:is(:where(.ks\:group):hover *) {
      @media (hover: hover) {
        background-color: var(--ks-color-red-500);
      }
    }
  }
  .ks\:group-hover\:bg-rose-500 {
    &:is(:where(.ks\:group):hover *) {
      @media (hover: hover) {
        background-color: var(--ks-color-rose-500);
      }
    }
  }
  .ks\:group-hover\:bg-sky-500 {
    &:is(:where(.ks\:group):hover *) {
      @media (hover: hover) {
        background-color: var(--ks-color-sky-500);
      }
    }
  }
  .ks\:group-hover\:bg-violet-500 {
    &:is(:where(.ks\:group):hover *) {
      @media (hover: hover) {
        background-color: var(--ks-color-violet-500);
      }
    }
  }
  .ks\:group-hover\:text-black {
    &:is(:where(.ks\:group):hover *) {
      @media (hover: hover) {
        color: var(--ks-color-black);
      }
    }
  }
  .ks\:group-hover\:text-white {
    &:is(:where(.ks\:group):hover *) {
      @media (hover: hover) {
        color: var(--ks-color-white);
      }
    }
  }
  .ks\:group-hover\:underline {
    &:is(:where(.ks\:group):hover *) {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .ks\:group-hover\/live\:translate-x-0\.5 {
    &:is(:where(.ks\:group\/live):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--ks-spacing) * 0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .ks\:group-hover\/live\:text-accent\/85 {
    &:is(:where(.ks\:group\/live):hover *) {
      @media (hover: hover) {
        color: var(--ks-color-accent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--ks-color-accent) 85%, transparent);
        }
      }
    }
  }
  .ks\:group-has-checked\:hidden {
    &:is(:where(.ks\:group):has(*:checked) *) {
      display: none;
    }
  }
  .ks\:group-has-checked\/radio\:hidden {
    &:is(:where(.ks\:group\/radio):has(*:checked) *) {
      display: none;
    }
  }
  .ks\:group-data-active\:text-black {
    &:is(:where(.ks\:group)[data-active] *) {
      color: var(--ks-color-black);
    }
  }
  .ks\:group-data-active\:ring-2 {
    &:is(:where(.ks\:group)[data-active] *) {
      --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);
    }
  }
  .ks\:group-data-active\:ring-accent {
    &:is(:where(.ks\:group)[data-active] *) {
      --tw-ring-color: var(--ks-color-accent);
    }
  }
  .ks\:group-data-dark\/header\:group-not-data-sticky\/header\:text-white {
    &:is(:where(.ks\:group\/header)[data-dark] *) {
      &:is(:where(.ks\:group\/header):not(*[data-sticky]) *) {
        color: var(--ks-color-white);
      }
    }
  }
  .ks\:group-data-sticky\/header\:top-0 {
    &:is(:where(.ks\:group\/header)[data-sticky] *) {
      top: calc(var(--ks-spacing) * 0);
    }
  }
  .ks\:group-data-sticky\/header\:py-3 {
    &:is(:where(.ks\:group\/header)[data-sticky] *) {
      padding-block: calc(var(--ks-spacing) * 3);
    }
  }
  .ks\:group-data-\[theme\=AIR\]\:bg-amber-600\/8 {
    &:is(:where(.ks\:group)[data-theme="AIR"] *) {
      background-color: var(--ks-color-amber-600);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-amber-600) 8%, transparent);
      }
    }
  }
  .ks\:group-data-\[theme\=AIR\]\:bg-amber-600\/10 {
    &:is(:where(.ks\:group)[data-theme="AIR"] *) {
      background-color: var(--ks-color-amber-600);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-amber-600) 10%, transparent);
      }
    }
  }
  .ks\:group-data-\[theme\=AIR\]\:bg-amber-800\/8 {
    &:is(:where(.ks\:group)[data-theme="AIR"] *) {
      background-color: var(--ks-color-amber-800);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-amber-800) 8%, transparent);
      }
    }
  }
  .ks\:group-data-\[theme\=AIR\]\:text-amber-600 {
    &:is(:where(.ks\:group)[data-theme="AIR"] *) {
      color: var(--ks-color-amber-600);
    }
  }
  .ks\:selection\:bg-fuchsia-300 {
    & *::selection {
      background-color: var(--ks-color-fuchsia-300);
    }
    &::selection {
      background-color: var(--ks-color-fuchsia-300);
    }
  }
  .ks\:selection\:text-fuchsia-900 {
    & *::selection {
      color: var(--ks-color-fuchsia-900);
    }
    &::selection {
      color: var(--ks-color-fuchsia-900);
    }
  }
  .ks\:\*\:first\:pr-2 {
    :is(& > *) {
      &:first-child {
        padding-right: calc(var(--ks-spacing) * 2);
      }
    }
  }
  .ks\:hover\:btn-shine {
    &:hover {
      @media (hover: hover) {
        position: relative;
        &::after {
          position: absolute;
          top: calc(var(--ks-spacing) * 0);
          left: calc(var(--ks-spacing) * 0);
          display: block;
          height: calc(var(--ks-spacing) * 40);
          width: calc(var(--ks-spacing) * 40);
          --tw-skew-x: skewX(calc(40deg * -1));
          transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
          --tw-gradient-position: to right;
          @supports (background-image: linear-gradient(in lab, red, red)) {
            --tw-gradient-position: to right in oklab;
          }
          background-image: linear-gradient(var(--tw-gradient-stops));
          --tw-gradient-from: transparent;
          --tw-gradient-from-position: 40%;
          --tw-gradient-via: var(--ks-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);
          --tw-gradient-via-position: 50%;
          --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));
          --tw-gradient-to-position: 60%;
          --tw-blur: blur(var(--ks-blur-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,);
          --tw-content: '';
          content: var(--tw-content);
          animation: var(--ks-animate-shine);
        }
      }
    }
  }
  .ks\:hover\:scale-101 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 101%;
        --tw-scale-y: 101%;
        --tw-scale-z: 101%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .ks\:hover\:bg-accent-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--ks-color-accent-100);
      }
    }
  }
  .ks\:hover\:bg-primary-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--ks-color-primary-50);
      }
    }
  }
  .ks\:hover\:bg-primary-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--ks-color-primary-100);
      }
    }
  }
  .ks\:hover\:bg-stone-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--ks-color-stone-50);
      }
    }
  }
  .ks\:hover\:bg-stone-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--ks-color-stone-100);
      }
    }
  }
  .ks\:hover\:bg-white\/5 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--ks-color-white);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--ks-color-white) 5%, transparent);
        }
      }
    }
  }
  .ks\:hover\:bg-white\/60 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--ks-color-white);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--ks-color-white) 60%, transparent);
        }
      }
    }
  }
  .ks\:hover\:bg-zinc-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--ks-color-zinc-50);
      }
    }
  }
  .ks\:hover\:bg-zinc-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--ks-color-zinc-100);
      }
    }
  }
  .ks\:hover\:bg-zinc-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--ks-color-zinc-200);
      }
    }
  }
  .ks\:hover\:from-accent\/10 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--ks-color-accent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-gradient-from: color-mix(in oklab, var(--ks-color-accent) 10%, 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));
      }
    }
  }
  .ks\:hover\:text-accent {
    &:hover {
      @media (hover: hover) {
        color: var(--ks-color-accent);
      }
    }
  }
  .ks\:hover\:text-accent-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--ks-color-accent-700);
      }
    }
  }
  .ks\:hover\:shadow-md {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .ks\:hover\:ring-accent {
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--ks-color-accent);
      }
    }
  }
  .ks\:group-data-dark\/header\:group-not-data-sticky\/header\:hover\:bg-black\/10 {
    &:is(:where(.ks\:group\/header)[data-dark] *) {
      &:is(:where(.ks\:group\/header):not(*[data-sticky]) *) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--ks-color-black);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--ks-color-black) 10%, transparent);
            }
          }
        }
      }
    }
  }
  .ks\: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);
    }
  }
  .ks\:focus-visible\:ring-accent-500 {
    &:focus-visible {
      --tw-ring-color: var(--ks-color-accent-500);
    }
  }
  .ks\:focus-visible\:outline-none {
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .ks\:has-checked\:border-accent-500 {
    &:has(*:checked) {
      border-color: var(--ks-color-accent-500);
    }
  }
  .ks\:has-checked\:border-yellow-500 {
    &:has(*:checked) {
      border-color: var(--ks-color-yellow-500);
    }
  }
  .ks\:has-checked\:bg-accent-500\/5 {
    &:has(*:checked) {
      background-color: var(--ks-color-accent-500);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-accent-500) 5%, transparent);
      }
    }
  }
  .ks\:has-checked\:bg-primary-100 {
    &:has(*:checked) {
      background-color: var(--ks-color-primary-100);
    }
  }
  .ks\:has-checked\:bg-yellow-600\/5 {
    &:has(*:checked) {
      background-color: var(--ks-color-yellow-600);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-yellow-600) 5%, transparent);
      }
    }
  }
  .ks\:has-checked\:ring-accent-600\/20 {
    &:has(*:checked) {
      --tw-ring-color: var(--ks-color-accent-600);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--ks-color-accent-600) 20%, transparent);
      }
    }
  }
  .ks\:has-checked\:ring-yellow-600\/20 {
    &:has(*:checked) {
      --tw-ring-color: var(--ks-color-yellow-600);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--ks-color-yellow-600) 20%, transparent);
      }
    }
  }
  .ks\:data-active\:z-10 {
    &[data-active] {
      z-index: 10;
    }
  }
  .ks\:data-\[theme\=AIR\]\:from-amber-50 {
    &[data-theme="AIR"] {
      --tw-gradient-from: var(--ks-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));
    }
  }
  .ks\:data-\[theme\=AIR\]\:ring-amber-600\/10 {
    &[data-theme="AIR"] {
      --tw-ring-color: var(--ks-color-amber-600);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--ks-color-amber-600) 10%, transparent);
      }
    }
  }
  .ks\:max-lg\:order-first {
    @media (width < 64rem) {
      order: -9999;
    }
  }
  .ks\:max-lg\:mt-10 {
    @media (width < 64rem) {
      margin-top: calc(var(--ks-spacing) * 10);
    }
  }
  .ks\:max-lg\:w-full {
    @media (width < 64rem) {
      width: 100%;
    }
  }
  .ks\:max-lg\:flex-col {
    @media (width < 64rem) {
      flex-direction: column;
    }
  }
  .ks\:max-lg\:items-end {
    @media (width < 64rem) {
      align-items: flex-end;
    }
  }
  .ks\:max-lg\:items-start {
    @media (width < 64rem) {
      align-items: flex-start;
    }
  }
  .ks\:max-lg\:justify-center {
    @media (width < 64rem) {
      justify-content: center;
    }
  }
  .ks\:max-lg\:gap-1 {
    @media (width < 64rem) {
      gap: calc(var(--ks-spacing) * 1);
    }
  }
  .ks\:max-lg\:gap-2 {
    @media (width < 64rem) {
      gap: calc(var(--ks-spacing) * 2);
    }
  }
  .ks\:max-lg\:gap-4 {
    @media (width < 64rem) {
      gap: calc(var(--ks-spacing) * 4);
    }
  }
  .ks\:max-lg\:opacity-40 {
    @media (width < 64rem) {
      opacity: 40%;
    }
  }
  .ks\:max-md\:bottom-\(--bottom-nav-height\) {
    @media (width < 48rem) {
      bottom: var(--bottom-nav-height);
    }
  }
  .ks\:max-md\:order-last {
    @media (width < 48rem) {
      order: 9999;
    }
  }
  .ks\:max-md\:col-span-full {
    @media (width < 48rem) {
      grid-column: 1 / -1;
    }
  }
  .ks\:max-md\:hidden {
    @media (width < 48rem) {
      display: none;
    }
  }
  .ks\:max-md\:w-full {
    @media (width < 48rem) {
      width: 100%;
    }
  }
  .ks\:max-md\:flex-col {
    @media (width < 48rem) {
      flex-direction: column;
    }
  }
  .ks\:max-md\:items-start {
    @media (width < 48rem) {
      align-items: flex-start;
    }
  }
  .ks\:max-md\:justify-center {
    @media (width < 48rem) {
      justify-content: center;
    }
  }
  .ks\:max-md\:gap-1 {
    @media (width < 48rem) {
      gap: calc(var(--ks-spacing) * 1);
    }
  }
  .ks\:max-md\:gap-2 {
    @media (width < 48rem) {
      gap: calc(var(--ks-spacing) * 2);
    }
  }
  .ks\:max-md\:divide-y {
    @media (width < 48rem) {
      :where(& > :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)));
      }
    }
  }
  .ks\:max-md\:rounded-xl {
    @media (width < 48rem) {
      border-radius: var(--ks-radius-xl);
    }
  }
  .ks\:max-md\:text-center {
    @media (width < 48rem) {
      text-align: center;
    }
  }
  .ks\:max-md\:text-sm {
    @media (width < 48rem) {
      font-size: var(--ks-text-sm);
      line-height: var(--tw-leading, var(--ks-text-sm--line-height));
    }
  }
  .ks\:max-md\:opacity-10 {
    @media (width < 48rem) {
      opacity: 10%;
    }
  }
  .ks\:max-md\:opacity-15 {
    @media (width < 48rem) {
      opacity: 15%;
    }
  }
  .ks\:max-sm\:mb-3 {
    @media (width < 40rem) {
      margin-bottom: calc(var(--ks-spacing) * 3);
    }
  }
  .ks\:max-sm\:w-full {
    @media (width < 40rem) {
      width: 100%;
    }
  }
  .ks\:max-sm\:flex-col {
    @media (width < 40rem) {
      flex-direction: column;
    }
  }
  .ks\:sm\:ml-auto {
    @media (width >= 40rem) {
      margin-left: auto;
    }
  }
  .ks\:sm\:flex {
    @media (width >= 40rem) {
      display: flex;
    }
  }
  .ks\:sm\:max-w-xl {
    @media (width >= 40rem) {
      max-width: var(--ks-container-xl);
    }
  }
  .ks\:sm\:translate-y-10 {
    @media (width >= 40rem) {
      --tw-translate-y: calc(var(--ks-spacing) * 10);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .ks\:sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .ks\:sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .ks\:sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .ks\:sm\:px-10 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--ks-spacing) * 10);
    }
  }
  .ks\:md\:inset-4 {
    @media (width >= 48rem) {
      inset: calc(var(--ks-spacing) * 4);
    }
  }
  .ks\:md\:inset-\[0_10px\] {
    @media (width >= 48rem) {
      inset: 0 10px;
    }
  }
  .ks\:md\:inset-\[0_10px_10px_10px\] {
    @media (width >= 48rem) {
      inset: 0 10px 10px 10px;
    }
  }
  .ks\:md\:col-span-1 {
    @media (width >= 48rem) {
      grid-column: span 1 / span 1;
    }
  }
  .ks\:md\:col-span-2 {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .ks\:md\:col-span-3 {
    @media (width >= 48rem) {
      grid-column: span 3 / span 3;
    }
  }
  .ks\:md\:col-span-4 {
    @media (width >= 48rem) {
      grid-column: span 4 / span 4;
    }
  }
  .ks\:md\:col-span-5 {
    @media (width >= 48rem) {
      grid-column: span 5 / span 5;
    }
  }
  .ks\:md\:col-span-6 {
    @media (width >= 48rem) {
      grid-column: span 6 / span 6;
    }
  }
  .ks\:md\:col-span-7 {
    @media (width >= 48rem) {
      grid-column: span 7 / span 7;
    }
  }
  .ks\:md\:col-span-8 {
    @media (width >= 48rem) {
      grid-column: span 8 / span 8;
    }
  }
  .ks\:md\:col-span-9 {
    @media (width >= 48rem) {
      grid-column: span 9 / span 9;
    }
  }
  .ks\:md\:col-span-10 {
    @media (width >= 48rem) {
      grid-column: span 10 / span 10;
    }
  }
  .ks\:md\:col-span-11 {
    @media (width >= 48rem) {
      grid-column: span 11 / span 11;
    }
  }
  .ks\:md\:col-span-12 {
    @media (width >= 48rem) {
      grid-column: span 12 / span 12;
    }
  }
  .ks\:md\:col-span-full {
    @media (width >= 48rem) {
      grid-column: 1 / -1;
    }
  }
  .ks\:md\:row-span-2 {
    @media (width >= 48rem) {
      grid-row: span 2 / span 2;
    }
  }
  .ks\:md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .ks\:md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .ks\:md\:size-25 {
    @media (width >= 48rem) {
      width: calc(var(--ks-spacing) * 25);
      height: calc(var(--ks-spacing) * 25);
    }
  }
  .ks\:md\:h-0\.5 {
    @media (width >= 48rem) {
      height: calc(var(--ks-spacing) * 0.5);
    }
  }
  .ks\:md\:h-18 {
    @media (width >= 48rem) {
      height: calc(var(--ks-spacing) * 18);
    }
  }
  .ks\:md\:h-30 {
    @media (width >= 48rem) {
      height: calc(var(--ks-spacing) * 30);
    }
  }
  .ks\:md\:max-h-\[calc\(100vh-var\(--top-space\)-1rem\)\] {
    @media (width >= 48rem) {
      max-height: calc(100vh - var(--top-space) - 1rem);
    }
  }
  .ks\:md\:max-h-\[calc\(100vh-var\(--top-space\)-2rem\)\] {
    @media (width >= 48rem) {
      max-height: calc(100vh - var(--top-space) - 2rem);
    }
  }
  .ks\:md\:w-4 {
    @media (width >= 48rem) {
      width: calc(var(--ks-spacing) * 4);
    }
  }
  .ks\:md\:max-w-2xl {
    @media (width >= 48rem) {
      max-width: var(--ks-container-2xl);
    }
  }
  .ks\:md\:max-w-5xl {
    @media (width >= 48rem) {
      max-width: var(--ks-container-5xl);
    }
  }
  .ks\:md\:max-w-40 {
    @media (width >= 48rem) {
      max-width: calc(var(--ks-spacing) * 40);
    }
  }
  .ks\:md\:min-w-xs {
    @media (width >= 48rem) {
      min-width: var(--ks-container-xs);
    }
  }
  .ks\:md\:-translate-x-16 {
    @media (width >= 48rem) {
      --tw-translate-x: calc(var(--ks-spacing) * -16);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .ks\:md\:translate-x-16 {
    @media (width >= 48rem) {
      --tw-translate-x: calc(var(--ks-spacing) * 16);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .ks\:md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .ks\:md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .ks\:md\:grid-cols-4 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .ks\:md\:grid-cols-6 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .ks\:md\:grid-cols-12 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .ks\:md\:grid-cols-\[auto_8rem_auto\] {
    @media (width >= 48rem) {
      grid-template-columns: auto 8rem auto;
    }
  }
  .ks\:md\:grid-cols-subgrid {
    @media (width >= 48rem) {
      grid-template-columns: subgrid;
    }
  }
  .ks\:md\:flex-col {
    @media (width >= 48rem) {
      flex-direction: column;
    }
  }
  .ks\:md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .ks\:md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .ks\:md\:items-end {
    @media (width >= 48rem) {
      align-items: flex-end;
    }
  }
  .ks\:md\:items-start {
    @media (width >= 48rem) {
      align-items: flex-start;
    }
  }
  .ks\:md\:justify-between {
    @media (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .ks\:md\:justify-center {
    @media (width >= 48rem) {
      justify-content: center;
    }
  }
  .ks\:md\:justify-end {
    @media (width >= 48rem) {
      justify-content: flex-end;
    }
  }
  .ks\:md\:justify-end-safe {
    @media (width >= 48rem) {
      justify-content: safe flex-end;
    }
  }
  .ks\:md\:justify-start {
    @media (width >= 48rem) {
      justify-content: flex-start;
    }
  }
  .ks\:md\:gap-2 {
    @media (width >= 48rem) {
      gap: calc(var(--ks-spacing) * 2);
    }
  }
  .ks\:md\:gap-x-5 {
    @media (width >= 48rem) {
      column-gap: calc(var(--ks-spacing) * 5);
    }
  }
  .ks\:md\:divide-x {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
      }
    }
  }
  .ks\:md\:rounded {
    @media (width >= 48rem) {
      border-radius: 0.25rem;
    }
  }
  .ks\:md\:rounded-app {
    @media (width >= 48rem) {
      border-radius: var(--ks-radius-app);
    }
  }
  .ks\:md\:rounded-tl-xl {
    @media (width >= 48rem) {
      border-top-left-radius: var(--ks-radius-xl);
    }
  }
  .ks\:md\:rounded-tr-xl {
    @media (width >= 48rem) {
      border-top-right-radius: var(--ks-radius-xl);
    }
  }
  .ks\:md\:rounded-br-xl {
    @media (width >= 48rem) {
      border-bottom-right-radius: var(--ks-radius-xl);
    }
  }
  .ks\:md\:rounded-bl-xl {
    @media (width >= 48rem) {
      border-bottom-left-radius: var(--ks-radius-xl);
    }
  }
  .ks\:md\:p-6 {
    @media (width >= 48rem) {
      padding: calc(var(--ks-spacing) * 6);
    }
  }
  .ks\:md\:px-8 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--ks-spacing) * 8);
    }
  }
  .ks\:md\:pb-4 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--ks-spacing) * 4);
    }
  }
  .ks\:md\:text-end {
    @media (width >= 48rem) {
      text-align: end;
    }
  }
  .ks\:md\:text-right {
    @media (width >= 48rem) {
      text-align: right;
    }
  }
  .ks\:md\:text-2xl {
    @media (width >= 48rem) {
      font-size: var(--ks-text-2xl);
      line-height: var(--tw-leading, var(--ks-text-2xl--line-height));
    }
  }
  .ks\:lg\:top-24 {
    @media (width >= 64rem) {
      top: calc(var(--ks-spacing) * 24);
    }
  }
  .ks\:lg\:right-0 {
    @media (width >= 64rem) {
      right: calc(var(--ks-spacing) * 0);
    }
  }
  .ks\:lg\:col-span-1 {
    @media (width >= 64rem) {
      grid-column: span 1 / span 1;
    }
  }
  .ks\:lg\:col-span-2 {
    @media (width >= 64rem) {
      grid-column: span 2 / span 2;
    }
  }
  .ks\:lg\:col-span-3 {
    @media (width >= 64rem) {
      grid-column: span 3 / span 3;
    }
  }
  .ks\:lg\:col-span-4 {
    @media (width >= 64rem) {
      grid-column: span 4 / span 4;
    }
  }
  .ks\:lg\:col-span-5 {
    @media (width >= 64rem) {
      grid-column: span 5 / span 5;
    }
  }
  .ks\:lg\:col-span-6 {
    @media (width >= 64rem) {
      grid-column: span 6 / span 6;
    }
  }
  .ks\:lg\:col-span-7 {
    @media (width >= 64rem) {
      grid-column: span 7 / span 7;
    }
  }
  .ks\:lg\:col-span-8 {
    @media (width >= 64rem) {
      grid-column: span 8 / span 8;
    }
  }
  .ks\:lg\:col-span-9 {
    @media (width >= 64rem) {
      grid-column: span 9 / span 9;
    }
  }
  .ks\:lg\:col-span-10 {
    @media (width >= 64rem) {
      grid-column: span 10 / span 10;
    }
  }
  .ks\:lg\:col-span-11 {
    @media (width >= 64rem) {
      grid-column: span 11 / span 11;
    }
  }
  .ks\:lg\:col-span-12 {
    @media (width >= 64rem) {
      grid-column: span 12 / span 12;
    }
  }
  .ks\:lg\:col-span-full {
    @media (width >= 64rem) {
      grid-column: 1 / -1;
    }
  }
  .ks\:lg\:row-span-2 {
    @media (width >= 64rem) {
      grid-row: span 2 / span 2;
    }
  }
  .ks\:lg\:-mt-16 {
    @media (width >= 64rem) {
      margin-top: calc(var(--ks-spacing) * -16);
    }
  }
  .ks\:lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .ks\:lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .ks\:lg\:grid-cols-5 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .ks\:lg\:grid-cols-6 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .ks\:lg\:grid-cols-12 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .ks\:lg\:grid-cols-14 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(14, minmax(0, 1fr));
    }
  }
  .ks\:lg\:items-center {
    @media (width >= 64rem) {
      align-items: center;
    }
  }
  .ks\:lg\:items-end {
    @media (width >= 64rem) {
      align-items: flex-end;
    }
  }
  .ks\:lg\:justify-between {
    @media (width >= 64rem) {
      justify-content: space-between;
    }
  }
  .ks\:lg\:justify-end {
    @media (width >= 64rem) {
      justify-content: flex-end;
    }
  }
  .ks\:lg\:justify-end-safe {
    @media (width >= 64rem) {
      justify-content: safe flex-end;
    }
  }
  .ks\:lg\:gap-20 {
    @media (width >= 64rem) {
      gap: calc(var(--ks-spacing) * 20);
    }
  }
  .ks\:lg\:border-l {
    @media (width >= 64rem) {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
  }
  .ks\:lg\:px-16 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--ks-spacing) * 16);
    }
  }
  .ks\:lg\:py-1\! {
    @media (width >= 64rem) {
      padding-block: calc(var(--ks-spacing) * 1) !important;
    }
  }
  .ks\:lg\:py-20 {
    @media (width >= 64rem) {
      padding-block: calc(var(--ks-spacing) * 20);
    }
  }
  .ks\:lg\:pl-10 {
    @media (width >= 64rem) {
      padding-left: calc(var(--ks-spacing) * 10);
    }
  }
  .ks\:xl\:col-span-1 {
    @media (width >= 80rem) {
      grid-column: span 1 / span 1;
    }
  }
  .ks\:xl\:col-span-2 {
    @media (width >= 80rem) {
      grid-column: span 2 / span 2;
    }
  }
  .ks\:xl\:col-span-3 {
    @media (width >= 80rem) {
      grid-column: span 3 / span 3;
    }
  }
  .ks\:xl\:col-span-4 {
    @media (width >= 80rem) {
      grid-column: span 4 / span 4;
    }
  }
  .ks\:xl\:col-span-5 {
    @media (width >= 80rem) {
      grid-column: span 5 / span 5;
    }
  }
  .ks\:xl\:col-span-6 {
    @media (width >= 80rem) {
      grid-column: span 6 / span 6;
    }
  }
  .ks\:xl\:col-span-7 {
    @media (width >= 80rem) {
      grid-column: span 7 / span 7;
    }
  }
  .ks\:xl\:col-span-8 {
    @media (width >= 80rem) {
      grid-column: span 8 / span 8;
    }
  }
  .ks\:xl\:col-span-9 {
    @media (width >= 80rem) {
      grid-column: span 9 / span 9;
    }
  }
  .ks\:xl\:col-span-10 {
    @media (width >= 80rem) {
      grid-column: span 10 / span 10;
    }
  }
  .ks\:xl\:col-span-11 {
    @media (width >= 80rem) {
      grid-column: span 11 / span 11;
    }
  }
  .ks\:xl\:col-span-12 {
    @media (width >= 80rem) {
      grid-column: span 12 / span 12;
    }
  }
  .ks\:xl\:col-span-full {
    @media (width >= 80rem) {
      grid-column: 1 / -1;
    }
  }
  .ks\:2xl\:col-span-1 {
    @media (width >= 96rem) {
      grid-column: span 1 / span 1;
    }
  }
  .ks\:2xl\:col-span-2 {
    @media (width >= 96rem) {
      grid-column: span 2 / span 2;
    }
  }
  .ks\:2xl\:col-span-3 {
    @media (width >= 96rem) {
      grid-column: span 3 / span 3;
    }
  }
  .ks\:2xl\:col-span-4 {
    @media (width >= 96rem) {
      grid-column: span 4 / span 4;
    }
  }
  .ks\:2xl\:col-span-5 {
    @media (width >= 96rem) {
      grid-column: span 5 / span 5;
    }
  }
  .ks\:2xl\:col-span-6 {
    @media (width >= 96rem) {
      grid-column: span 6 / span 6;
    }
  }
  .ks\:2xl\:col-span-7 {
    @media (width >= 96rem) {
      grid-column: span 7 / span 7;
    }
  }
  .ks\:2xl\:col-span-8 {
    @media (width >= 96rem) {
      grid-column: span 8 / span 8;
    }
  }
  .ks\:2xl\:col-span-9 {
    @media (width >= 96rem) {
      grid-column: span 9 / span 9;
    }
  }
  .ks\:2xl\:col-span-10 {
    @media (width >= 96rem) {
      grid-column: span 10 / span 10;
    }
  }
  .ks\:2xl\:col-span-11 {
    @media (width >= 96rem) {
      grid-column: span 11 / span 11;
    }
  }
  .ks\:2xl\:col-span-12 {
    @media (width >= 96rem) {
      grid-column: span 12 / span 12;
    }
  }
  .ks\:2xl\:col-span-full {
    @media (width >= 96rem) {
      grid-column: 1 / -1;
    }
  }
  .ks\:dark\:bg-amber-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-amber-50);
    }
  }
  .ks\:dark\:bg-amber-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-amber-100);
    }
  }
  .ks\:dark\:bg-amber-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-amber-200);
    }
  }
  .ks\:dark\:bg-amber-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-amber-300);
    }
  }
  .ks\:dark\:bg-amber-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-amber-400);
    }
  }
  .ks\:dark\:bg-amber-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-amber-500);
    }
  }
  .ks\:dark\:bg-amber-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-amber-600);
    }
  }
  .ks\:dark\:bg-amber-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-amber-700);
    }
  }
  .ks\:dark\:bg-amber-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-amber-800);
    }
  }
  .ks\:dark\:bg-amber-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-amber-900);
    }
  }
  .ks\:dark\:bg-amber-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-amber-950);
    }
  }
  .ks\:dark\:bg-blue-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-blue-50);
    }
  }
  .ks\:dark\:bg-blue-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-blue-100);
    }
  }
  .ks\:dark\:bg-blue-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-blue-200);
    }
  }
  .ks\:dark\:bg-blue-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-blue-300);
    }
  }
  .ks\:dark\:bg-blue-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-blue-400);
    }
  }
  .ks\:dark\:bg-blue-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-blue-500);
    }
  }
  .ks\:dark\:bg-blue-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-blue-600);
    }
  }
  .ks\:dark\:bg-blue-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-blue-700);
    }
  }
  .ks\:dark\:bg-blue-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-blue-800);
    }
  }
  .ks\:dark\:bg-blue-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-blue-900);
    }
  }
  .ks\:dark\:bg-blue-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-blue-950);
    }
  }
  .ks\:dark\:bg-cyan-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-cyan-50);
    }
  }
  .ks\:dark\:bg-cyan-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-cyan-100);
    }
  }
  .ks\:dark\:bg-cyan-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-cyan-200);
    }
  }
  .ks\:dark\:bg-cyan-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-cyan-300);
    }
  }
  .ks\:dark\:bg-cyan-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-cyan-400);
    }
  }
  .ks\:dark\:bg-cyan-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-cyan-500);
    }
  }
  .ks\:dark\:bg-cyan-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-cyan-600);
    }
  }
  .ks\:dark\:bg-cyan-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-cyan-700);
    }
  }
  .ks\:dark\:bg-cyan-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-cyan-800);
    }
  }
  .ks\:dark\:bg-cyan-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-cyan-900);
    }
  }
  .ks\:dark\:bg-cyan-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-cyan-950);
    }
  }
  .ks\:dark\:bg-emerald-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-emerald-50);
    }
  }
  .ks\:dark\:bg-emerald-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-emerald-100);
    }
  }
  .ks\:dark\:bg-emerald-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-emerald-200);
    }
  }
  .ks\:dark\:bg-emerald-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-emerald-300);
    }
  }
  .ks\:dark\:bg-emerald-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-emerald-400);
    }
  }
  .ks\:dark\:bg-emerald-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-emerald-500);
    }
  }
  .ks\:dark\:bg-emerald-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-emerald-600);
    }
  }
  .ks\:dark\:bg-emerald-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-emerald-700);
    }
  }
  .ks\:dark\:bg-emerald-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-emerald-800);
    }
  }
  .ks\:dark\:bg-emerald-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-emerald-900);
    }
  }
  .ks\:dark\:bg-emerald-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-emerald-950);
    }
  }
  .ks\:dark\:bg-fuchsia-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-fuchsia-50);
    }
  }
  .ks\:dark\:bg-fuchsia-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-fuchsia-100);
    }
  }
  .ks\:dark\:bg-fuchsia-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-fuchsia-200);
    }
  }
  .ks\:dark\:bg-fuchsia-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-fuchsia-300);
    }
  }
  .ks\:dark\:bg-fuchsia-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-fuchsia-400);
    }
  }
  .ks\:dark\:bg-fuchsia-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-fuchsia-500);
    }
  }
  .ks\:dark\:bg-fuchsia-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-fuchsia-600);
    }
  }
  .ks\:dark\:bg-fuchsia-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-fuchsia-700);
    }
  }
  .ks\:dark\:bg-fuchsia-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-fuchsia-800);
    }
  }
  .ks\:dark\:bg-fuchsia-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-fuchsia-900);
    }
  }
  .ks\:dark\:bg-fuchsia-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-fuchsia-950);
    }
  }
  .ks\:dark\:bg-green-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-green-50);
    }
  }
  .ks\:dark\:bg-green-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-green-100);
    }
  }
  .ks\:dark\:bg-green-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-green-200);
    }
  }
  .ks\:dark\:bg-green-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-green-300);
    }
  }
  .ks\:dark\:bg-green-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-green-400);
    }
  }
  .ks\:dark\:bg-green-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-green-500);
    }
  }
  .ks\:dark\:bg-green-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-green-600);
    }
  }
  .ks\:dark\:bg-green-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-green-700);
    }
  }
  .ks\:dark\:bg-green-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-green-800);
    }
  }
  .ks\:dark\:bg-green-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-green-900);
    }
  }
  .ks\:dark\:bg-green-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-green-950);
    }
  }
  .ks\:dark\:bg-indigo-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-indigo-50);
    }
  }
  .ks\:dark\:bg-indigo-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-indigo-100);
    }
  }
  .ks\:dark\:bg-indigo-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-indigo-200);
    }
  }
  .ks\:dark\:bg-indigo-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-indigo-300);
    }
  }
  .ks\:dark\:bg-indigo-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-indigo-400);
    }
  }
  .ks\:dark\:bg-indigo-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-indigo-500);
    }
  }
  .ks\:dark\:bg-indigo-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-indigo-600);
    }
  }
  .ks\:dark\:bg-indigo-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-indigo-700);
    }
  }
  .ks\:dark\:bg-indigo-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-indigo-800);
    }
  }
  .ks\:dark\:bg-indigo-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-indigo-900);
    }
  }
  .ks\:dark\:bg-indigo-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-indigo-950);
    }
  }
  .ks\:dark\:bg-lime-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-lime-50);
    }
  }
  .ks\:dark\:bg-lime-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-lime-100);
    }
  }
  .ks\:dark\:bg-lime-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-lime-200);
    }
  }
  .ks\:dark\:bg-lime-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-lime-300);
    }
  }
  .ks\:dark\:bg-lime-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-lime-400);
    }
  }
  .ks\:dark\:bg-lime-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-lime-500);
    }
  }
  .ks\:dark\:bg-lime-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-lime-600);
    }
  }
  .ks\:dark\:bg-lime-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-lime-700);
    }
  }
  .ks\:dark\:bg-lime-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-lime-800);
    }
  }
  .ks\:dark\:bg-lime-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-lime-900);
    }
  }
  .ks\:dark\:bg-lime-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-lime-950);
    }
  }
  .ks\:dark\:bg-orange-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-orange-50);
    }
  }
  .ks\:dark\:bg-orange-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-orange-100);
    }
  }
  .ks\:dark\:bg-orange-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-orange-200);
    }
  }
  .ks\:dark\:bg-orange-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-orange-300);
    }
  }
  .ks\:dark\:bg-orange-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-orange-400);
    }
  }
  .ks\:dark\:bg-orange-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-orange-500);
    }
  }
  .ks\:dark\:bg-orange-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-orange-600);
    }
  }
  .ks\:dark\:bg-orange-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-orange-700);
    }
  }
  .ks\:dark\:bg-orange-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-orange-800);
    }
  }
  .ks\:dark\:bg-orange-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-orange-900);
    }
  }
  .ks\:dark\:bg-orange-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-orange-950);
    }
  }
  .ks\:dark\:bg-pink-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-pink-50);
    }
  }
  .ks\:dark\:bg-pink-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-pink-100);
    }
  }
  .ks\:dark\:bg-pink-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-pink-200);
    }
  }
  .ks\:dark\:bg-pink-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-pink-300);
    }
  }
  .ks\:dark\:bg-pink-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-pink-400);
    }
  }
  .ks\:dark\:bg-pink-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-pink-500);
    }
  }
  .ks\:dark\:bg-pink-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-pink-600);
    }
  }
  .ks\:dark\:bg-pink-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-pink-700);
    }
  }
  .ks\:dark\:bg-pink-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-pink-800);
    }
  }
  .ks\:dark\:bg-pink-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-pink-900);
    }
  }
  .ks\:dark\:bg-pink-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-pink-950);
    }
  }
  .ks\:dark\:bg-purple-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-purple-50);
    }
  }
  .ks\:dark\:bg-purple-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-purple-100);
    }
  }
  .ks\:dark\:bg-purple-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-purple-200);
    }
  }
  .ks\:dark\:bg-purple-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-purple-300);
    }
  }
  .ks\:dark\:bg-purple-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-purple-400);
    }
  }
  .ks\:dark\:bg-purple-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-purple-500);
    }
  }
  .ks\:dark\:bg-purple-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-purple-600);
    }
  }
  .ks\:dark\:bg-purple-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-purple-700);
    }
  }
  .ks\:dark\:bg-purple-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-purple-800);
    }
  }
  .ks\:dark\:bg-purple-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-purple-900);
    }
  }
  .ks\:dark\:bg-purple-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-purple-950);
    }
  }
  .ks\:dark\:bg-red-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-red-50);
    }
  }
  .ks\:dark\:bg-red-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-red-100);
    }
  }
  .ks\:dark\:bg-red-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-red-200);
    }
  }
  .ks\:dark\:bg-red-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-red-300);
    }
  }
  .ks\:dark\:bg-red-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-red-400);
    }
  }
  .ks\:dark\:bg-red-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-red-500);
    }
  }
  .ks\:dark\:bg-red-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-red-600);
    }
  }
  .ks\:dark\:bg-red-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-red-700);
    }
  }
  .ks\:dark\:bg-red-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-red-800);
    }
  }
  .ks\:dark\:bg-red-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-red-900);
    }
  }
  .ks\:dark\:bg-red-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-red-950);
    }
  }
  .ks\:dark\:bg-rose-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-rose-50);
    }
  }
  .ks\:dark\:bg-rose-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-rose-100);
    }
  }
  .ks\:dark\:bg-rose-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-rose-200);
    }
  }
  .ks\:dark\:bg-rose-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-rose-300);
    }
  }
  .ks\:dark\:bg-rose-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-rose-400);
    }
  }
  .ks\:dark\:bg-rose-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-rose-500);
    }
  }
  .ks\:dark\:bg-rose-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-rose-600);
    }
  }
  .ks\:dark\:bg-rose-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-rose-700);
    }
  }
  .ks\:dark\:bg-rose-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-rose-800);
    }
  }
  .ks\:dark\:bg-rose-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-rose-900);
    }
  }
  .ks\:dark\:bg-rose-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-rose-950);
    }
  }
  .ks\:dark\:bg-sky-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-sky-50);
    }
  }
  .ks\:dark\:bg-sky-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-sky-100);
    }
  }
  .ks\:dark\:bg-sky-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-sky-200);
    }
  }
  .ks\:dark\:bg-sky-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-sky-300);
    }
  }
  .ks\:dark\:bg-sky-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-sky-400);
    }
  }
  .ks\:dark\:bg-sky-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-sky-500);
    }
  }
  .ks\:dark\:bg-sky-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-sky-600);
    }
  }
  .ks\:dark\:bg-sky-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-sky-700);
    }
  }
  .ks\:dark\:bg-sky-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-sky-800);
    }
  }
  .ks\:dark\:bg-sky-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-sky-900);
    }
  }
  .ks\:dark\:bg-sky-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-sky-950);
    }
  }
  .ks\:dark\:bg-teal-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-teal-50);
    }
  }
  .ks\:dark\:bg-teal-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-teal-100);
    }
  }
  .ks\:dark\:bg-teal-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-teal-200);
    }
  }
  .ks\:dark\:bg-teal-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-teal-300);
    }
  }
  .ks\:dark\:bg-teal-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-teal-400);
    }
  }
  .ks\:dark\:bg-teal-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-teal-500);
    }
  }
  .ks\:dark\:bg-teal-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-teal-600);
    }
  }
  .ks\:dark\:bg-teal-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-teal-700);
    }
  }
  .ks\:dark\:bg-teal-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-teal-800);
    }
  }
  .ks\:dark\:bg-teal-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-teal-900);
    }
  }
  .ks\:dark\:bg-teal-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-teal-950);
    }
  }
  .ks\:dark\:bg-violet-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-violet-50);
    }
  }
  .ks\:dark\:bg-violet-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-violet-100);
    }
  }
  .ks\:dark\:bg-violet-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-violet-200);
    }
  }
  .ks\:dark\:bg-violet-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-violet-300);
    }
  }
  .ks\:dark\:bg-violet-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-violet-400);
    }
  }
  .ks\:dark\:bg-violet-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-violet-500);
    }
  }
  .ks\:dark\:bg-violet-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-violet-600);
    }
  }
  .ks\:dark\:bg-violet-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-violet-700);
    }
  }
  .ks\:dark\:bg-violet-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-violet-800);
    }
  }
  .ks\:dark\:bg-violet-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-violet-900);
    }
  }
  .ks\:dark\:bg-violet-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-violet-950);
    }
  }
  .ks\:dark\:bg-yellow-50 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-yellow-50);
    }
  }
  .ks\:dark\:bg-yellow-100 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-yellow-100);
    }
  }
  .ks\:dark\:bg-yellow-200 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-yellow-200);
    }
  }
  .ks\:dark\:bg-yellow-300 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-yellow-300);
    }
  }
  .ks\:dark\:bg-yellow-400 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-yellow-400);
    }
  }
  .ks\:dark\:bg-yellow-500 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-yellow-500);
    }
  }
  .ks\:dark\:bg-yellow-600 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-yellow-600);
    }
  }
  .ks\:dark\:bg-yellow-700 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-yellow-700);
    }
  }
  .ks\:dark\:bg-yellow-800 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-yellow-800);
    }
  }
  .ks\:dark\:bg-yellow-900 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-yellow-900);
    }
  }
  .ks\:dark\:bg-yellow-950 {
    &:where(.dark, .dark *) {
      background-color: var(--ks-color-yellow-950);
    }
  }
  .ks\:dark\:text-amber-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-amber-50);
    }
  }
  .ks\:dark\:text-amber-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-amber-100);
    }
  }
  .ks\:dark\:text-amber-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-amber-200);
    }
  }
  .ks\:dark\:text-amber-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-amber-300);
    }
  }
  .ks\:dark\:text-amber-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-amber-400);
    }
  }
  .ks\:dark\:text-amber-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-amber-500);
    }
  }
  .ks\:dark\:text-amber-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-amber-600);
    }
  }
  .ks\:dark\:text-amber-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-amber-700);
    }
  }
  .ks\:dark\:text-amber-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-amber-800);
    }
  }
  .ks\:dark\:text-amber-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-amber-900);
    }
  }
  .ks\:dark\:text-amber-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-amber-950);
    }
  }
  .ks\:dark\:text-blue-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-blue-50);
    }
  }
  .ks\:dark\:text-blue-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-blue-100);
    }
  }
  .ks\:dark\:text-blue-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-blue-200);
    }
  }
  .ks\:dark\:text-blue-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-blue-300);
    }
  }
  .ks\:dark\:text-blue-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-blue-400);
    }
  }
  .ks\:dark\:text-blue-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-blue-500);
    }
  }
  .ks\:dark\:text-blue-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-blue-600);
    }
  }
  .ks\:dark\:text-blue-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-blue-700);
    }
  }
  .ks\:dark\:text-blue-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-blue-800);
    }
  }
  .ks\:dark\:text-blue-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-blue-900);
    }
  }
  .ks\:dark\:text-blue-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-blue-950);
    }
  }
  .ks\:dark\:text-cyan-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-cyan-50);
    }
  }
  .ks\:dark\:text-cyan-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-cyan-100);
    }
  }
  .ks\:dark\:text-cyan-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-cyan-200);
    }
  }
  .ks\:dark\:text-cyan-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-cyan-300);
    }
  }
  .ks\:dark\:text-cyan-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-cyan-400);
    }
  }
  .ks\:dark\:text-cyan-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-cyan-500);
    }
  }
  .ks\:dark\:text-cyan-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-cyan-600);
    }
  }
  .ks\:dark\:text-cyan-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-cyan-700);
    }
  }
  .ks\:dark\:text-cyan-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-cyan-800);
    }
  }
  .ks\:dark\:text-cyan-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-cyan-900);
    }
  }
  .ks\:dark\:text-cyan-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-cyan-950);
    }
  }
  .ks\:dark\:text-emerald-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-emerald-50);
    }
  }
  .ks\:dark\:text-emerald-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-emerald-100);
    }
  }
  .ks\:dark\:text-emerald-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-emerald-200);
    }
  }
  .ks\:dark\:text-emerald-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-emerald-300);
    }
  }
  .ks\:dark\:text-emerald-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-emerald-400);
    }
  }
  .ks\:dark\:text-emerald-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-emerald-500);
    }
  }
  .ks\:dark\:text-emerald-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-emerald-600);
    }
  }
  .ks\:dark\:text-emerald-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-emerald-700);
    }
  }
  .ks\:dark\:text-emerald-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-emerald-800);
    }
  }
  .ks\:dark\:text-emerald-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-emerald-900);
    }
  }
  .ks\:dark\:text-emerald-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-emerald-950);
    }
  }
  .ks\:dark\:text-fuchsia-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-fuchsia-50);
    }
  }
  .ks\:dark\:text-fuchsia-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-fuchsia-100);
    }
  }
  .ks\:dark\:text-fuchsia-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-fuchsia-200);
    }
  }
  .ks\:dark\:text-fuchsia-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-fuchsia-300);
    }
  }
  .ks\:dark\:text-fuchsia-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-fuchsia-400);
    }
  }
  .ks\:dark\:text-fuchsia-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-fuchsia-500);
    }
  }
  .ks\:dark\:text-fuchsia-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-fuchsia-600);
    }
  }
  .ks\:dark\:text-fuchsia-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-fuchsia-700);
    }
  }
  .ks\:dark\:text-fuchsia-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-fuchsia-800);
    }
  }
  .ks\:dark\:text-fuchsia-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-fuchsia-900);
    }
  }
  .ks\:dark\:text-fuchsia-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-fuchsia-950);
    }
  }
  .ks\:dark\:text-green-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-green-50);
    }
  }
  .ks\:dark\:text-green-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-green-100);
    }
  }
  .ks\:dark\:text-green-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-green-200);
    }
  }
  .ks\:dark\:text-green-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-green-300);
    }
  }
  .ks\:dark\:text-green-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-green-400);
    }
  }
  .ks\:dark\:text-green-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-green-500);
    }
  }
  .ks\:dark\:text-green-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-green-600);
    }
  }
  .ks\:dark\:text-green-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-green-700);
    }
  }
  .ks\:dark\:text-green-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-green-800);
    }
  }
  .ks\:dark\:text-green-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-green-900);
    }
  }
  .ks\:dark\:text-green-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-green-950);
    }
  }
  .ks\:dark\:text-indigo-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-indigo-50);
    }
  }
  .ks\:dark\:text-indigo-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-indigo-100);
    }
  }
  .ks\:dark\:text-indigo-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-indigo-200);
    }
  }
  .ks\:dark\:text-indigo-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-indigo-300);
    }
  }
  .ks\:dark\:text-indigo-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-indigo-400);
    }
  }
  .ks\:dark\:text-indigo-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-indigo-500);
    }
  }
  .ks\:dark\:text-indigo-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-indigo-600);
    }
  }
  .ks\:dark\:text-indigo-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-indigo-700);
    }
  }
  .ks\:dark\:text-indigo-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-indigo-800);
    }
  }
  .ks\:dark\:text-indigo-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-indigo-900);
    }
  }
  .ks\:dark\:text-indigo-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-indigo-950);
    }
  }
  .ks\:dark\:text-lime-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-lime-50);
    }
  }
  .ks\:dark\:text-lime-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-lime-100);
    }
  }
  .ks\:dark\:text-lime-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-lime-200);
    }
  }
  .ks\:dark\:text-lime-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-lime-300);
    }
  }
  .ks\:dark\:text-lime-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-lime-400);
    }
  }
  .ks\:dark\:text-lime-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-lime-500);
    }
  }
  .ks\:dark\:text-lime-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-lime-600);
    }
  }
  .ks\:dark\:text-lime-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-lime-700);
    }
  }
  .ks\:dark\:text-lime-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-lime-800);
    }
  }
  .ks\:dark\:text-lime-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-lime-900);
    }
  }
  .ks\:dark\:text-lime-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-lime-950);
    }
  }
  .ks\:dark\:text-orange-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-orange-50);
    }
  }
  .ks\:dark\:text-orange-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-orange-100);
    }
  }
  .ks\:dark\:text-orange-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-orange-200);
    }
  }
  .ks\:dark\:text-orange-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-orange-300);
    }
  }
  .ks\:dark\:text-orange-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-orange-400);
    }
  }
  .ks\:dark\:text-orange-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-orange-500);
    }
  }
  .ks\:dark\:text-orange-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-orange-600);
    }
  }
  .ks\:dark\:text-orange-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-orange-700);
    }
  }
  .ks\:dark\:text-orange-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-orange-800);
    }
  }
  .ks\:dark\:text-orange-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-orange-900);
    }
  }
  .ks\:dark\:text-orange-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-orange-950);
    }
  }
  .ks\:dark\:text-pink-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-pink-50);
    }
  }
  .ks\:dark\:text-pink-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-pink-100);
    }
  }
  .ks\:dark\:text-pink-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-pink-200);
    }
  }
  .ks\:dark\:text-pink-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-pink-300);
    }
  }
  .ks\:dark\:text-pink-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-pink-400);
    }
  }
  .ks\:dark\:text-pink-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-pink-500);
    }
  }
  .ks\:dark\:text-pink-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-pink-600);
    }
  }
  .ks\:dark\:text-pink-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-pink-700);
    }
  }
  .ks\:dark\:text-pink-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-pink-800);
    }
  }
  .ks\:dark\:text-pink-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-pink-900);
    }
  }
  .ks\:dark\:text-pink-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-pink-950);
    }
  }
  .ks\:dark\:text-purple-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-purple-50);
    }
  }
  .ks\:dark\:text-purple-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-purple-100);
    }
  }
  .ks\:dark\:text-purple-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-purple-200);
    }
  }
  .ks\:dark\:text-purple-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-purple-300);
    }
  }
  .ks\:dark\:text-purple-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-purple-400);
    }
  }
  .ks\:dark\:text-purple-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-purple-500);
    }
  }
  .ks\:dark\:text-purple-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-purple-600);
    }
  }
  .ks\:dark\:text-purple-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-purple-700);
    }
  }
  .ks\:dark\:text-purple-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-purple-800);
    }
  }
  .ks\:dark\:text-purple-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-purple-900);
    }
  }
  .ks\:dark\:text-purple-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-purple-950);
    }
  }
  .ks\:dark\:text-red-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-red-50);
    }
  }
  .ks\:dark\:text-red-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-red-100);
    }
  }
  .ks\:dark\:text-red-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-red-200);
    }
  }
  .ks\:dark\:text-red-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-red-300);
    }
  }
  .ks\:dark\:text-red-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-red-400);
    }
  }
  .ks\:dark\:text-red-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-red-500);
    }
  }
  .ks\:dark\:text-red-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-red-600);
    }
  }
  .ks\:dark\:text-red-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-red-700);
    }
  }
  .ks\:dark\:text-red-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-red-800);
    }
  }
  .ks\:dark\:text-red-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-red-900);
    }
  }
  .ks\:dark\:text-red-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-red-950);
    }
  }
  .ks\:dark\:text-rose-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-rose-50);
    }
  }
  .ks\:dark\:text-rose-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-rose-100);
    }
  }
  .ks\:dark\:text-rose-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-rose-200);
    }
  }
  .ks\:dark\:text-rose-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-rose-300);
    }
  }
  .ks\:dark\:text-rose-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-rose-400);
    }
  }
  .ks\:dark\:text-rose-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-rose-500);
    }
  }
  .ks\:dark\:text-rose-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-rose-600);
    }
  }
  .ks\:dark\:text-rose-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-rose-700);
    }
  }
  .ks\:dark\:text-rose-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-rose-800);
    }
  }
  .ks\:dark\:text-rose-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-rose-900);
    }
  }
  .ks\:dark\:text-rose-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-rose-950);
    }
  }
  .ks\:dark\:text-sky-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-sky-50);
    }
  }
  .ks\:dark\:text-sky-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-sky-100);
    }
  }
  .ks\:dark\:text-sky-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-sky-200);
    }
  }
  .ks\:dark\:text-sky-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-sky-300);
    }
  }
  .ks\:dark\:text-sky-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-sky-400);
    }
  }
  .ks\:dark\:text-sky-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-sky-500);
    }
  }
  .ks\:dark\:text-sky-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-sky-600);
    }
  }
  .ks\:dark\:text-sky-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-sky-700);
    }
  }
  .ks\:dark\:text-sky-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-sky-800);
    }
  }
  .ks\:dark\:text-sky-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-sky-900);
    }
  }
  .ks\:dark\:text-sky-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-sky-950);
    }
  }
  .ks\:dark\:text-teal-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-teal-50);
    }
  }
  .ks\:dark\:text-teal-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-teal-100);
    }
  }
  .ks\:dark\:text-teal-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-teal-200);
    }
  }
  .ks\:dark\:text-teal-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-teal-300);
    }
  }
  .ks\:dark\:text-teal-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-teal-400);
    }
  }
  .ks\:dark\:text-teal-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-teal-500);
    }
  }
  .ks\:dark\:text-teal-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-teal-600);
    }
  }
  .ks\:dark\:text-teal-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-teal-700);
    }
  }
  .ks\:dark\:text-teal-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-teal-800);
    }
  }
  .ks\:dark\:text-teal-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-teal-900);
    }
  }
  .ks\:dark\:text-teal-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-teal-950);
    }
  }
  .ks\:dark\:text-violet-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-violet-50);
    }
  }
  .ks\:dark\:text-violet-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-violet-100);
    }
  }
  .ks\:dark\:text-violet-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-violet-200);
    }
  }
  .ks\:dark\:text-violet-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-violet-300);
    }
  }
  .ks\:dark\:text-violet-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-violet-400);
    }
  }
  .ks\:dark\:text-violet-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-violet-500);
    }
  }
  .ks\:dark\:text-violet-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-violet-600);
    }
  }
  .ks\:dark\:text-violet-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-violet-700);
    }
  }
  .ks\:dark\:text-violet-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-violet-800);
    }
  }
  .ks\:dark\:text-violet-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-violet-900);
    }
  }
  .ks\:dark\:text-violet-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-violet-950);
    }
  }
  .ks\:dark\:text-yellow-50 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-yellow-50);
    }
  }
  .ks\:dark\:text-yellow-100 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-yellow-100);
    }
  }
  .ks\:dark\:text-yellow-200 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-yellow-200);
    }
  }
  .ks\:dark\:text-yellow-300 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-yellow-300);
    }
  }
  .ks\:dark\:text-yellow-400 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-yellow-400);
    }
  }
  .ks\:dark\:text-yellow-500 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-yellow-500);
    }
  }
  .ks\:dark\:text-yellow-600 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-yellow-600);
    }
  }
  .ks\:dark\:text-yellow-700 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-yellow-700);
    }
  }
  .ks\:dark\:text-yellow-800 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-yellow-800);
    }
  }
  .ks\:dark\:text-yellow-900 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-yellow-900);
    }
  }
  .ks\:dark\:text-yellow-950 {
    &:where(.dark, .dark *) {
      color: var(--ks-color-yellow-950);
    }
  }
  .ks\:starting\:translate-x-10 {
    @starting-style {
      --tw-translate-x: calc(var(--ks-spacing) * 10);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .ks\:starting\:translate-y-10 {
    @starting-style {
      --tw-translate-y: calc(var(--ks-spacing) * 10);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .ks\:starting\:translate-y-15 {
    @starting-style {
      --tw-translate-y: calc(var(--ks-spacing) * 15);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .ks\:starting\:translate-y-20 {
    @starting-style {
      --tw-translate-y: calc(var(--ks-spacing) * 20);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .ks\:starting\:opacity-0 {
    @starting-style {
      opacity: 0%;
    }
  }
  .ks\:starting\:blur-sm {
    @starting-style {
      --tw-blur: blur(var(--ks-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,);
    }
  }
}
@layer components {
  .ks\:verified-badge {
    margin-left: calc(var(--ks-spacing) * 2);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--ks-spacing) * 1);
    vertical-align: middle;
    font-size: var(--ks-text-xs);
    line-height: var(--tw-leading, var(--ks-text-xs--line-height));
    --tw-font-weight: var(--ks-font-weight-medium);
    font-weight: var(--ks-font-weight-medium);
    color: var(--ks-color-primary-500);
    .ks\:verified-badge-icon {
      margin-block: calc(var(--ks-spacing) * -2);
      --tw-leading: calc(var(--ks-spacing) * 0);
      line-height: calc(var(--ks-spacing) * 0);
      color: var(--ks-color-green-600);
    }
  }
  .ks\:form-panel {
    border-radius: var(--ks-radius-app);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--ks-color-white);
    background-color: var(--ks-color-primary-50);
    padding: calc(var(--ks-spacing) * 0.5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--ks-color-primary-200);
    .ks\:form-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-inline: calc(var(--ks-spacing) * 4);
      padding-top: calc(var(--ks-spacing) * 1.5);
      padding-bottom: calc(var(--ks-spacing) * 2);
    }
    .ks\:form-panel-footer {
      position: relative;
      margin-top: calc(var(--ks-spacing) * 2.5);
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: var(--ks-radius-app);
      background-color: var(--ks-color-white);
      padding-inline: calc(var(--ks-spacing) * 4);
      padding-block: calc(var(--ks-spacing) * 2.5);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-primary-200);
    }
    .ks\:form-panel-inner {
      position: relative;
      border-radius: var(--ks-radius-app);
      background-color: var(--ks-color-white);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-primary-200);
    }
  }
  input[type="checkbox"] {
    appearance: none;
    border-radius: var(--ks-radius-app);
    --tw-ring-color: var(--ks-color-primary-300);
    forced-color-adjust: auto;
    &:not(*:checked) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
    }
    &:checked {
      background-color: var(--ks-color-accent);
      background-size: 1.1em 1.1em;
      background-position: center;
      background-repeat: no-repeat;
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
      background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 11.917 9.724 16.5 19 7.5'/%3e %3c/svg%3e");
    }
    &:indeterminate {
      background-color: var(--ks-color-accent);
      background-size: 1.1em 1.1em;
      background-position: center;
      background-repeat: no-repeat;
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
      background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 12h12'/%3e %3c/svg%3e");
    }
  }
  .ks\:form-switch-wrapper {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--ks-spacing) * 2.5);
    font-size: var(--ks-text-sm);
    line-height: var(--tw-leading, var(--ks-text-sm--line-height));
    color: var(--ks-color-primary-600);
    -webkit-user-select: none;
    user-select: none;
    .ks\:form-switch-input {
      position: absolute;
      height: calc(var(--ks-spacing) * 0);
      width: calc(var(--ks-spacing) * 0);
      opacity: 0%;
      &:is(:where(.ks\:group\/switch):has(*:checked) *) {
        background-color: var(--ks-color-accent-600);
      }
    }
    .ks\:form-switch {
      position: relative;
      height: calc(var(--ks-spacing) * 2.5);
      width: calc(var(--ks-spacing) * 12);
      cursor: pointer;
      border-radius: calc(infinity * 1px);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-primary-300);
      &:is(:where(.ks\:group\/switch):has(*:checked) *) {
        background-color: var(--ks-color-accent-600);
      }
      &:is(:where(.ks\:group\/switch):has(*:checked) *) {
        --tw-ring-color: var(--ks-color-accent-600);
      }
      &:is(:where(.ks\:group\/switch):has(*:checked) *) {
        &::before {
          content: var(--tw-content);
          width: 100%;
        }
      }
      .ks\:form-switch-track {
        position: absolute;
        top: calc(1 / 2 * 100%);
        left: calc(var(--ks-spacing) * 0);
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        background-color: var(--ks-color-primary-400);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--ks-default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
        --tw-duration: 300ms;
        transition-duration: 300ms;
        --tw-ease: var(--ks-ease-in-out);
        transition-timing-function: var(--ks-ease-in-out);
        width: calc(var(--ks-spacing) * 7);
        height: calc(var(--ks-spacing) * 7);
        border-radius: calc(infinity * 1px);
        background-color: var(--ks-color-white);
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--ks-color-primary-300);
        &:is(:where(.ks\:group\/switch):has(*:checked) *) {
          --tw-translate-x: calc(var(--ks-spacing) * 5);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
        &:not(*:is(:where(.ks\:group\/switch):hover *)) {
          &::before {
            content: var(--tw-content);
            display: none;
          }
        }
        @media not (hover: hover) {
          &::before {
            content: var(--tw-content);
            display: none;
          }
        }
        &:is(:where(.ks\:group\/switch):has(*:checked) *) {
          &::before {
            content: var(--tw-content);
            --tw-ring-color: var(--ks-color-accent-400);
          }
        }
        &:not(:has(i))::before {
          position: absolute;
          inset: calc(var(--ks-spacing) * 2);
          border-radius: calc(infinity * 1px);
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          --tw-ring-color: var(--ks-color-primary-200);
          --tw-content: '';
          content: var(--tw-content);
        }
      }
    }
  }
  .ks\:form-btn-groups {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--ks-spacing) * 2);
    .ks\:form-btn {
      display: flex;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      gap: calc(var(--ks-spacing) * 2.5);
      border-radius: var(--ks-radius-app);
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--ks-color-primary-300);
      background-color: var(--ks-color-white);
      padding-inline: calc(var(--ks-spacing) * 5);
      padding-block: calc(var(--ks-spacing) * 3);
      font-size: var(--ks-text-sm);
      line-height: var(--tw-leading, var(--ks-text-sm--line-height));
      --tw-font-weight: var(--ks-font-weight-medium);
      font-weight: var(--ks-font-weight-medium);
      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(--ks-default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
      -webkit-user-select: none;
      user-select: none;
      &:has(*:disabled) {
        cursor: not-allowed;
      }
      &:has(*:disabled) {
        opacity: 50%;
      }
      &:has(*:checked) {
        border-color: var(--ks-color-primary-700);
      }
      &:has(*:checked) {
        background-color: var(--ks-color-primary-700);
      }
      &:has(*:checked) {
        color: var(--ks-color-white);
      }
      &:has(*:checked) {
        &[data-theme="primary"] {
          border-color: var(--ks-color-primary-600);
        }
      }
      &:has(*:checked) {
        &[data-theme="accent"] {
          border-color: var(--ks-color-accent);
        }
      }
      &:has(*:checked) {
        &[data-theme="accent"] {
          background-color: var(--ks-color-accent);
        }
      }
      &:has(*:checked) {
        &[data-theme="accent"] {
          color: var(--ks-color-white);
        }
      }
      &:has(*:checked) {
        &[data-theme="secondary"] {
          border-color: var(--ks-color-secondary-600);
        }
      }
      &:has(*:checked) {
        &[data-theme="secondary"] {
          background-color: var(--ks-color-secondary-600);
        }
      }
      &:has(*:checked) {
        &[data-theme="secondary"] {
          color: var(--ks-color-white);
        }
      }
      &:has(*:checked) {
        &[data-theme="success"] {
          border-color: var(--ks-color-green-600);
        }
      }
      &:has(*:checked) {
        &[data-theme="success"] {
          background-color: var(--ks-color-green-600);
        }
      }
      &:has(*:checked) {
        &[data-theme="success"] {
          color: var(--ks-color-white);
        }
      }
      &:has(*:checked) {
        &[data-theme="warning"] {
          border-color: var(--ks-color-yellow-600);
        }
      }
      &:has(*:checked) {
        &[data-theme="warning"] {
          background-color: var(--ks-color-yellow-600);
        }
      }
      &:has(*:checked) {
        &[data-theme="warning"] {
          color: var(--ks-color-white);
        }
      }
      &:has(*:checked) {
        &[data-theme="info"] {
          border-color: var(--ks-color-blue-600);
        }
      }
      &:has(*:checked) {
        &[data-theme="info"] {
          background-color: var(--ks-color-blue-600);
        }
      }
      &:has(*:checked) {
        &[data-theme="info"] {
          color: var(--ks-color-white);
        }
      }
      &:has(*:checked) {
        &[data-theme="danger"] {
          border-color: var(--ks-color-red-700);
        }
      }
      &:has(*:checked) {
        &[data-theme="danger"] {
          background-color: var(--ks-color-red-700);
        }
      }
      &:has(*:checked) {
        &[data-theme="danger"] {
          color: var(--ks-color-white);
        }
      }
      &:has(*:checked) {
        &[data-theme="indigo"] {
          border-color: var(--ks-color-indigo-600);
        }
      }
      &:has(*:checked) {
        &[data-theme="indigo"] {
          background-color: var(--ks-color-indigo-600);
        }
      }
      &:has(*:checked) {
        &[data-theme="indigo"] {
          color: var(--ks-color-white);
        }
      }
      input {
        position: absolute;
        height: calc(var(--ks-spacing) * 0);
        width: calc(var(--ks-spacing) * 0);
        opacity: 0%;
      }
    }
  }
  .ks\:badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--ks-spacing) * 1);
    border-radius: var(--ks-radius-app);
    padding-inline: calc(var(--ks-spacing) * 2);
    padding-block: calc(var(--ks-spacing) * 1);
    font-size: var(--ks-text-xs);
    line-height: var(--tw-leading, var(--ks-text-xs--line-height));
    --tw-font-weight: var(--ks-font-weight-medium);
    font-weight: var(--ks-font-weight-medium);
    background-color: var(--ks-color-primary-600);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ks-color-primary-600) 10%, transparent);
    }
    color: var(--ks-color-primary-700);
    &.ks\:badge-icon {
      display: inline-flex;
      align-items: center;
      gap: calc(var(--ks-spacing) * 1);
      border-radius: var(--ks-radius-md);
      padding-inline: calc(var(--ks-spacing) * 2);
      padding-block: calc(var(--ks-spacing) * 0.5);
      font-size: var(--ks-text-xs);
      line-height: var(--tw-leading, var(--ks-text-xs--line-height));
      --tw-leading: calc(var(--ks-spacing) * 0);
      line-height: calc(var(--ks-spacing) * 0);
      --tw-font-weight: var(--ks-font-weight-medium);
      font-weight: var(--ks-font-weight-medium);
    }
    &.ks\:badge-primary {
      background-color: var(--ks-color-primary-600);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-primary-600) 10%, transparent);
      }
      color: var(--ks-color-primary-700);
    }
    &.ks\:badge-accent {
      background-color: var(--ks-color-accent-600);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-accent-600) 10%, transparent);
      }
      color: var(--ks-color-accent-700);
    }
    &.ks\:badge-info {
      background-color: var(--ks-color-blue-600);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-blue-600) 10%, transparent);
      }
      color: var(--ks-color-blue-700);
    }
    &.ks\:badge-secondary {
      background-color: var(--ks-color-secondary-600);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-secondary-600) 10%, transparent);
      }
      color: var(--ks-color-secondary-700);
    }
    &.ks\:badge-success {
      background-color: var(--ks-color-green-600);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-green-600) 10%, transparent);
      }
      color: var(--ks-color-green-700);
    }
    &.ks\:badge-warning {
      background-color: var(--ks-color-yellow-600);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-yellow-600) 10%, transparent);
      }
      color: var(--ks-color-yellow-700);
    }
    &.ks\:badge-error {
      background-color: var(--ks-color-red-600);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-red-600) 10%, transparent);
      }
      color: var(--ks-color-red-700);
    }
    &.ks\:badge-xl {
      padding-inline: calc(var(--ks-spacing) * 3);
      padding-block: calc(var(--ks-spacing) * 1);
      font-size: var(--ks-text-base);
      line-height: var(--tw-leading, var(--ks-text-base--line-height));
    }
    &.ks\:badge-lg {
      padding-inline: calc(var(--ks-spacing) * 3);
      padding-block: calc(var(--ks-spacing) * 1);
      font-size: var(--ks-text-sm);
      line-height: var(--tw-leading, var(--ks-text-sm--line-height));
    }
    &.ks\:badge-sm {
      padding-inline: calc(var(--ks-spacing) * 2);
      padding-block: calc(var(--ks-spacing) * 0.5);
      font-size: var(--ks-text-sm);
      line-height: var(--tw-leading, var(--ks-text-sm--line-height));
    }
  }
  .ks\:ratings {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--ks-spacing) * 1);
    font-size: var(--ks-text-lg);
    line-height: var(--tw-leading, var(--ks-text-lg--line-height));
    --tw-leading: calc(var(--ks-spacing) * 0);
    line-height: calc(var(--ks-spacing) * 0);
    color: var(--ks-color-primary-300);
    .ks\:rated {
      color: var(--ks-color-amber-500);
    }
  }
  .ks\:dropdown {
    position: relative;
  }
  .ks\:dropdown-panel {
    margin-top: calc(var(--ks-spacing) * 2);
    border-radius: var(--ks-radius-app);
    background-color: var(--ks-color-white);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: color-mix(in oklab, var(--ks-color-black) 12%, transparent);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--ks-color-white);
    .ks\:dropdown-panel-list {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--ks-spacing) * 1) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--ks-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
      }
      padding-inline: calc(var(--ks-spacing) * 1);
      padding-block: calc(var(--ks-spacing) * 1);
      :is(& > *) {
        border-radius: var(--ks-radius-app);
      }
      :is(& > *) {
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--ks-default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
      }
      :is(& > *) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--ks-color-primary-100);
          }
        }
      }
      .ks\:dropdown-panel-item {
        display: flex;
        width: 100%;
        align-items: safe center;
        column-gap: calc(var(--ks-spacing) * 2);
        padding-inline: calc(var(--ks-spacing) * 2.5);
        padding-block: calc(var(--ks-spacing) * 2);
        --tw-font-weight: var(--ks-font-weight-medium);
        font-weight: var(--ks-font-weight-medium);
        &:hover {
          @media (hover: hover) {
            background-color: var(--ks-color-primary-500);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--ks-color-primary-500) 5%, transparent);
            }
          }
        }
      }
    }
  }
  .ks\:callout-wrapper {
    display: flex;
    gap: calc(var(--ks-spacing) * 2);
    border-radius: var(--ks-radius-app);
    padding: calc(var(--ks-spacing) * 3);
    color: var(--ks-color-primary-600);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--ks-color-primary-200);
    .ks\:callout-icon {
      display: flex;
      width: calc(var(--ks-spacing) * 5);
      height: calc(var(--ks-spacing) * 5);
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      font-size: var(--ks-text-lg);
      line-height: var(--tw-leading, var(--ks-text-lg--line-height));
      i {
        --tw-leading: calc(var(--ks-spacing) * 0);
        line-height: calc(var(--ks-spacing) * 0);
      }
    }
    .ks\:callout-inner {
      display: flex;
      flex-direction: column;
      gap: calc(var(--ks-spacing) * 2.5);
      text-align: start;
      .ks\:callout-content {
        display: flex;
        flex-direction: column;
        gap: calc(var(--ks-spacing) * 1);
        .ks\:callout-content-title {
          --tw-font-weight: var(--ks-font-weight-medium);
          font-weight: var(--ks-font-weight-medium);
          color: var(--ks-color-primary-800);
        }
        .ks\:callout-content-description {
          font-size: var(--ks-text-sm);
          line-height: var(--tw-leading, var(--ks-text-sm--line-height));
          color: var(--ks-color-subtitle);
          p {
            &:not(*:last-child) {
              margin-bottom: calc(var(--ks-spacing) * 1);
            }
          }
        }
      }
      .ks\:callout-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: calc(var(--ks-spacing) * 2.5);
      }
    }
  }
  .ks\:lifecycle-steps {
    margin-bottom: calc(var(--ks-spacing) * 2);
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    @media (width < 48rem) {
      flex-direction: column;
    }
    .ks\:lifecycle-step {
      display: flex;
      flex: 1;
      gap: calc(var(--ks-spacing) * 2);
      @media (width < 48rem) {
        align-items: center;
      }
      @media (width >= 48rem) {
        flex-direction: column;
      }
      .ks\:lifecycle-step-icon {
        display: flex;
        align-items: center;
        gap: calc(var(--ks-spacing) * 1);
        @media (width < 48rem) {
          flex-direction: column;
        }
        .ks\:lifecycle-step-icon-line-left {
          height: calc(var(--ks-spacing) * 0.5);
          width: 100%;
          background-color: var(--ks-color-primary-500);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--ks-color-primary-500) 10%, transparent);
          }
          @media (width < 48rem) {
            height: calc(var(--ks-spacing) * 0);
          }
          @media (width < 48rem) {
            width: calc(var(--ks-spacing) * 0.5);
          }
        }
        .ks\:lifecycle-step-icon-line-right {
          height: calc(var(--ks-spacing) * 0.5);
          width: 100%;
          background-color: var(--ks-color-primary-500);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--ks-color-primary-500) 10%, transparent);
          }
          @media (width < 48rem) {
            height: calc(var(--ks-spacing) * 5);
          }
          @media (width < 48rem) {
            width: calc(var(--ks-spacing) * 0.5);
          }
        }
        i {
          font-size: var(--ks-text-xl);
          line-height: var(--tw-leading, var(--ks-text-xl--line-height));
          --tw-leading: calc(var(--ks-spacing) * 0);
          line-height: calc(var(--ks-spacing) * 0);
          color: var(--ks-color-primary-400);
          &:is(:where(.ks\:group)[data-state="danger"] *) {
            color: var(--ks-color-red-600);
          }
          &:is(:where(.ks\:group)[data-state="warning"] *) {
            color: var(--ks-color-yellow-500);
          }
          &:is(:where(.ks\:group)[data-state="info"] *) {
            color: var(--ks-color-blue-500);
          }
          &:is(:where(.ks\:group)[data-state="success"] *) {
            color: var(--ks-color-green-500);
          }
        }
        .ks\:lifecycle-step-icon-line-left, .ks\:lifecycle-step-icon-line-right {
          &:is(:where(.ks\:group)[data-state="danger"] *) {
            background-color: var(--ks-color-red-600);
          }
          &:is(:where(.ks\:group)[data-state="warning"] *) {
            background-color: var(--ks-color-yellow-500);
          }
          &:is(:where(.ks\:group)[data-state="info"] *) {
            background-color: var(--ks-color-blue-500);
          }
          &:is(:where(.ks\:group)[data-state="success"] *) {
            background-color: var(--ks-color-green-500);
          }
        }
      }
      .ks\:lifecycle-step-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(var(--ks-spacing) * 0.5);
        padding-inline: calc(var(--ks-spacing) * 4);
        text-align: center;
        font-size: var(--ks-text-sm);
        line-height: var(--tw-leading, var(--ks-text-sm--line-height));
      }
    }
  }
}
@layer components {
  .flatpickr-calendar {
    border-radius: var(--ks-radius-xl) !important;
    background-color: var(--ks-color-white);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)) !important;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
    --tw-ring-color: color-mix(in oklab, var(--ks-color-black) 12%, transparent) !important;
    --tw-ring-offset-width: 2px !important;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
    --tw-ring-offset-color: var(--ks-color-white) !important;
    &.arrowBottom {
      margin-top: calc(var(--ks-spacing) * -1.5);
    }
    &.arrowTop {
      margin-top: calc(var(--ks-spacing) * 1.5);
    }
    &:has(.ks\:flatpickr-inner-wrapper).open {
      display: flex !important;
      width: auto !important;
      gap: calc(var(--ks-spacing) * 1);
      padding: calc(var(--ks-spacing) * 1) !important;
      @media (width < 48rem) {
        flex-direction: column-reverse;
      }
      .ks\:flatpickr-inner-wrapper {
        position: relative;
      }
      .ks\:flatpickr-presets {
        display: flex;
        flex-direction: column;
        border-radius: var(--ks-radius-app);
        padding: calc(var(--ks-spacing) * 1);
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--ks-color-slate-200);
        .ks\:flatpickr-preset-item {
          cursor: pointer;
          border-radius: var(--ks-radius-md);
          padding-inline: calc(var(--ks-spacing) * 2.5);
          padding-block: calc(var(--ks-spacing) * 2);
          text-align: left;
          font-size: var(--ks-text-sm);
          line-height: var(--tw-leading, var(--ks-text-sm--line-height));
          &:hover {
            @media (hover: hover) {
              background-color: var(--ks-color-slate-100);
            }
          }
        }
      }
    }
  }
  .flatpickr-day.selected {
    border-color: var(--ks-color-accent-800) !important;
    background-color: var(--ks-color-accent-800) !important;
  }
  .flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after, .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after {
    display: none !important;
  }
  .flatpickr-day:focus, .flatpickr-day:hover {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--ks-color-white);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ks-color-white) 50%, transparent);
    }
    --tw-ring-inset: inset;
  }
  .flatpickr-current-month .flatpickr-monthDropdown-months {
    border-radius: var(--ks-radius-xl) !important;
  }
  .ks\:choices-field-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    outline-style: var(--tw-outline-style);
    outline-width: 0px;
    &.is-disabled {
      cursor: not-allowed;
      border-color: var(--ks-color-primary-200) !important;
      color: var(--ks-color-primary-500) !important;
      --tw-ring-color: transparent !important;
      :is(& > *) {
        color: var(--ks-color-primary-500) !important;
      }
      .choices__item {
        cursor: not-allowed !important;
        -webkit-user-select: none !important;
        user-select: none !important;
      }
    }
    &[data-type*=select-one] .choices__item:not([data-placeholder]) .choices__button {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==');
      position: absolute;
      top: calc(1 / 2 * 100%);
      right: calc(var(--ks-spacing) * 8);
      width: calc(var(--ks-spacing) * 5);
      height: calc(var(--ks-spacing) * 5);
      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
      background-size: 8px;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 80%;
    }
    &:has(.ks\:field-lg) {
      .ks\:choices-inner {
        padding-inline: calc(var(--ks-spacing) * 4);
        padding-block: calc(var(--ks-spacing) * 4);
        &:after {
          inset-block: calc(var(--ks-spacing) * 2);
        }
      }
      .choices__button {
        --tw-scale-x: 130%;
        --tw-scale-y: 130%;
        --tw-scale-z: 130%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
    &:not(:has(.ks\:border-less)) {
      border-radius: var(--ks-radius-app);
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--ks-color-primary-300);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: transparent;
      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(--ks-default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
      &:focus-within {
        border-color: var(--ks-color-accent);
      }
      &:focus-within {
        --tw-ring-color: var(--ks-color-accent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--ks-color-accent) 15%, transparent);
        }
      }
    }
    .ks\:choices-inner {
      display: flex;
      height: 100%;
      width: 100%;
      flex-wrap: wrap;
      align-items: center;
      gap: calc(var(--ks-spacing) * 1);
      overflow: clip;
      border-style: var(--tw-border-style);
      border-width: 0px;
      padding-inline: calc(var(--ks-spacing) * 2);
      padding-block: calc(var(--ks-spacing) * 2);
      padding-right: calc(var(--ks-spacing) * 4);
      &::after {
        pointer-events: none;
        position: absolute;
        inset-block: calc(var(--ks-spacing) * 0);
        right: calc(var(--ks-spacing) * 0);
        display: flex;
        width: calc(var(--ks-spacing) * 10);
        align-items: flex-start;
        justify-content: center;
        border-radius: var(--ks-radius-app);
        padding-top: calc(var(--ks-spacing) * 3);
        font-family: bootstrap-icons;
        font-size: var(--ks-text-sm);
        line-height: var(--tw-leading, var(--ks-text-sm--line-height));
        opacity: 80%;
        --tw-content: '\F282';
        content: var(--tw-content);
      }
      .ks\:choices-input {
        width: 100%;
        appearance: none;
        padding-block: calc(var(--ks-spacing) * 1);
        font-size: var(--ks-text-sm);
        line-height: var(--tw-leading, var(--ks-text-sm--line-height));
        --tw-font-weight: var(--ks-font-weight-medium);
        font-weight: var(--ks-font-weight-medium);
        outline-style: var(--tw-outline-style);
        outline-width: 0px;
      }
      .choices__list--single {
        padding-right: calc(var(--ks-spacing) * 6) !important;
      }
      .choices__list--single {
        .choices__item {
          font-size: var(--ks-text-sm);
          line-height: var(--tw-leading, var(--ks-text-sm--line-height));
        }
      }
      .choices__placeholder {
        padding: calc(var(--ks-spacing) * 0);
        font-size: var(--ks-text-sm);
        line-height: var(--tw-leading, var(--ks-text-sm--line-height));
      }
      .choices__item--selectable {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .choices__item {
        --tw-font-weight: var(--ks-font-weight-medium);
        font-weight: var(--ks-font-weight-medium);
      }
      .choices__list--multiple {
        margin-right: calc(var(--ks-spacing) * 1) !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: calc(var(--ks-spacing) * 1) !important;
        .choices__item {
          margin: calc(var(--ks-spacing) * 0) !important;
          display: inline-flex !important;
          align-items: center !important;
          gap: calc(var(--ks-spacing) * 1) !important;
          border-radius: var(--ks-radius-md) !important;
          border-color: var(--ks-color-primary-300) !important;
          background-color: var(--ks-color-primary-50) !important;
          padding-inline: calc(var(--ks-spacing) * 2) !important;
          color: var(--ks-color-primary-600) !important;
          &:hover {
            @media (hover: hover) {
              background-color: var(--ks-color-primary-100) !important;
            }
          }
          .choices__button {
            text-indent: calc(var(--ks-spacing) * 0) !important;
            font-size: 0;
            color: var(--ks-color-primary-600) !important;
            &:hover {
              @media (hover: hover) {
                color: var(--ks-color-red-500) !important;
              }
            }
            &::before {
              display: inline-flex;
              font-family: bootstrap-icons;
              font-size: var(--ks-text-xs);
              line-height: var(--tw-leading, var(--ks-text-xs--line-height));
              --tw-content: '\F659';
              content: var(--tw-content);
            }
          }
        }
      }
    }
    [placeholder] {
      color: var(--ks-color-primary-500);
      &::placeholder {
        --tw-content: 'Search';
        content: var(--tw-content);
      }
    }
    &:has(.choices-left) {
      .choices-list-dropdown {
        right: calc(var(--ks-spacing) * 0) !important;
        left: auto !important;
      }
    }
    .choices-list-dropdown {
      z-index: unset;
      margin: unset;
      margin-bottom: calc(var(--ks-spacing) * 2) !important;
      box-sizing: border-box;
      min-width: calc(var(--ks-spacing) * 70);
      border-radius: var(--ks-radius-xl) !important;
      border-style: var(--tw-border-style) !important;
      border-width: 0px !important;
      background-color: var(--ks-color-white) !important;
      --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: color-mix(in oklab, var(--ks-color-black) 12%, transparent);
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-offset-color: var(--ks-color-white);
      &:not(*:is(is-flipped)) {
        margin-top: calc(var(--ks-spacing) * 2) !important;
      }
      .ks\:choices-input {
        margin-inline: -1px !important;
        width: 100%;
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
        border-color: var(--ks-color-primary-200);
        padding-inline: calc(var(--ks-spacing) * 2.5);
        padding-block: calc(var(--ks-spacing) * 3);
        font-size: var(--ks-text-sm);
        line-height: var(--tw-leading, var(--ks-text-sm--line-height));
        --tw-font-weight: var(--ks-font-weight-medium);
        font-weight: var(--ks-font-weight-medium);
        outline-style: var(--tw-outline-style);
        outline-width: 0px;
      }
      & > .choices__list {
        width: 100%;
        padding-inline: calc(var(--ks-spacing) * 1) !important;
        padding-block: calc(var(--ks-spacing) * 1.5);
        .choices__item {
          border-radius: var(--ks-radius-app);
          padding-inline: calc(var(--ks-spacing) * 2);
          padding-block: calc(var(--ks-spacing) * 1.5);
          &:hover {
            @media (hover: hover) {
              background-color: var(--ks-color-slate-100);
            }
          }
          &.is-selected, &.is-highlighted {
            --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            --tw-ring-color: var(--ks-color-white);
            @supports (color: color-mix(in lab, red, red)) {
              --tw-ring-color: color-mix(in oklab, var(--ks-color-white) 80%, transparent);
            }
            --tw-ring-inset: inset;
          }
        }
      }
      &.is-active {
        z-index: 99 !important;
      }
      .ks\:location-choice-item {
        display: flex;
        align-items: flex-start;
        gap: calc(var(--ks-spacing) * 2);
        .ks\:location-choice-item-flag {
          margin-top: calc(var(--ks-spacing) * 0.5);
          width: calc(var(--ks-spacing) * 4);
          height: calc(var(--ks-spacing) * 4);
          flex-shrink: 0;
          border-radius: var(--ks-radius-sm);
        }
        .ks\:location-choice-item-info {
          display: flex;
          flex-direction: column;
          gap: calc(var(--ks-spacing) * 0.5);
          .ks\:location-choice-item-info-country-wrapper {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: calc(var(--ks-spacing) * 2);
            .ks\:location-choice-item-info-recent {
              display: inline-block;
              border-radius: calc(infinity * 1px);
              background-color: var(--ks-color-slate-200);
              padding-inline: calc(var(--ks-spacing) * 2);
              padding-block: 1px;
              font-size: var(--ks-text-xs);
              line-height: var(--tw-leading, var(--ks-text-xs--line-height));
              --tw-font-weight: var(--ks-font-weight-medium);
              font-weight: var(--ks-font-weight-medium);
              color: var(--ks-color-black);
            }
          }
          .ks\:location-choice-item-label {
            font-size: var(--ks-text-sm);
            line-height: var(--tw-leading, var(--ks-text-sm--line-height));
            --tw-font-weight: var(--ks-font-weight-medium);
            font-weight: var(--ks-font-weight-medium);
            color: var(--ks-color-primary-800);
          }
          .ks\:location-choice-item-sub-label {
            color: var(--ks-color-primary-500);
            text-transform: capitalize;
          }
        }
      }
    }
  }
  .ks\:toastify-card-wrapper {
    pointer-events: none;
    position: fixed;
    z-index: 9999;
    margin-inline: calc(var(--ks-spacing) * 2);
    opacity: 0%;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--ks-default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
    @media (width < 40rem) {
      width: 100%;
    }
    @media (width >= 40rem) {
      width: calc(var(--ks-spacing) * 90);
    }
    &.on {
      pointer-events: auto;
    }
    &.on {
      opacity: 100%;
    }
    &.on.toastify-bottom {
      bottom: calc(var(--ks-spacing) * 0);
    }
    &.on.toastify-top {
      top: calc(var(--ks-spacing) * 0);
    }
    &.toastify-bottom {
      bottom: calc(var(--ks-spacing) * -100);
    }
    &.toastify-center {
      left: calc(1 / 2 * 100%);
    }
    &.toastify-center {
      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    &.toastify-left {
      left: calc(var(--ks-spacing) * 0);
    }
    &.toastify-right {
      right: calc(var(--ks-spacing) * 0);
    }
    &.toastify-top {
      top: calc(var(--ks-spacing) * -100);
    }
    &>.toast-close {
      display: none;
    }
    .ks\:toastify-card {
      display: flex;
      flex-direction: column;
      gap: calc(var(--ks-spacing) * 2);
      border-radius: var(--ks-radius-app);
      background-color: var(--ks-color-white);
      padding: calc(var(--ks-spacing) * 3);
      --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      &:where(.dark, .dark *) {
        background-color: var(--ks-color-slate-700);
      }
      &:where(.dark, .dark *) {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      color: var(--ks-color-white);
      &[data-status="primary"] {
        background-color: var(--ks-color-primary-800);
      }
      &[data-status="accent"] {
        background-color: var(--ks-color-accent-800);
      }
      &[data-status="secondary"] {
        background-color: var(--ks-color-secondary);
      }
      &[data-status="black"] {
        background-color: var(--ks-color-black);
      }
      &[data-status="white"] {
        background-color: var(--ks-color-white);
      }
      &[data-status="success"] {
        background-color: var(--ks-color-green-800);
      }
      &[data-status="warning"] {
        background-color: var(--ks-color-yellow-800);
      }
      &[data-status="error"] {
        background-color: var(--ks-color-red-800);
      }
      &[data-status="info"] {
        background-color: var(--ks-color-blue-800);
      }
      &[data-status="muted"] {
        background-color: var(--ks-color-primary-800);
      }
      &[data-status="light"] {
        background-color: var(--ks-color-primary-800);
      }
      .ks\:btn-toast-close {
        margin-block: calc(var(--ks-spacing) * -1.5);
        margin-left: auto;
        display: inline-flex;
        height: calc(var(--ks-spacing) * 8);
        width: calc(var(--ks-spacing) * 8);
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        gap: calc(var(--ks-spacing) * 2);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: var(--ks-radius-md);
        background-color: transparent;
        font-size: var(--ks-text-sm);
        line-height: var(--tw-leading, var(--ks-text-sm--line-height));
        --tw-font-weight: var(--ks-font-weight-medium);
        font-weight: var(--ks-font-weight-medium);
        color: var(--ks-color-white);
        &:hover {
          @media (hover: hover) {
            background-color: var(--ks-color-slate-800);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--ks-color-slate-800) 10%, transparent);
            }
          }
        }
        &:disabled {
          cursor: default;
        }
        &:disabled {
          opacity: 50%;
        }
        &:where(.dark, .dark *) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--ks-color-white);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--ks-color-white) 20%, transparent);
              }
            }
          }
        }
        &:where(.dark, .dark *) {
          &:hover {
            @media (hover: hover) {
              color: var(--ks-color-white);
            }
          }
        }
        &:where(.dark, .dark *) {
          &:disabled {
            opacity: 75%;
          }
        }
      }
      .ks\:toast-close {
        display: none;
      }
      .ks\:toastify-icon {
        --tw-leading: calc(var(--ks-spacing) * 0);
        line-height: calc(var(--ks-spacing) * 0);
      }
      .ks\:toastify-card-content {
        display: flex;
        width: 100%;
        align-items: flex-start;
        gap: calc(var(--ks-spacing) * 2);
      }
      .ks\:toastify-card-actions {
        margin-top: calc(var(--ks-spacing) * 1);
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: calc(var(--ks-spacing) * 2);
      }
    }
  }
}
.iti--inline-dropdown {
  width: 100%;
  .iti__country-container {
    .iti__selected-country-primary {
      border-radius: var(--ks-radius-md);
    }
    .iti__selected-dial-code {
      font-size: var(--ks-text-sm);
      line-height: var(--tw-leading, var(--ks-text-sm--line-height));
    }
  }
  .iti__dropdown-content {
    margin-top: calc(var(--ks-spacing) * 2) !important;
    border-radius: var(--ks-radius-xl) !important;
    border-style: var(--tw-border-style) !important;
    border-width: 0px !important;
    background-color: color-mix(in oklab, var(--ks-color-white) 85%, transparent) !important;
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)) !important;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
    --tw-ring-color: color-mix(in oklab, var(--ks-color-black) 12%, transparent) !important;
    --tw-ring-offset-width: 2px !important;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
    --tw-ring-offset-color: var(--ks-color-white) !important;
    --tw-backdrop-blur: blur(var(--ks-blur-lg)) !important;
    -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,) !important;
    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,) !important;
  }
  .iti__search-input-wrapper {
    margin-inline: calc(var(--ks-spacing) * -0.5) !important;
    margin-top: calc(var(--ks-spacing) * -1) !important;
    border-radius: 0 !important;
    border-bottom-style: var(--tw-border-style) !important;
    border-bottom-width: 1px !important;
    border-color: var(--ks-color-primary-300) !important;
    padding-inline: calc(var(--ks-spacing) * 2) !important;
    padding-block: calc(var(--ks-spacing) * 1) !important;
    .iti__search-icon {
      .iti__search-icon-svg {
        display: none;
        width: calc(var(--ks-spacing) * 5);
        height: calc(var(--ks-spacing) * 5);
      }
      &::before {
        display: flex;
        width: calc(var(--ks-spacing) * 6);
        height: calc(var(--ks-spacing) * 6);
        align-items: center;
        justify-content: center;
        font-family: bootstrap-icons;
        color: var(--ks-color-primary-600);
        --tw-content: '\F52A';
        content: var(--tw-content);
      }
    }
    .iti__search-input {
      --tw-border-style: none;
      border-style: none;
      padding-block: calc(var(--ks-spacing) * 1.5);
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .iti__country-list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--ks-spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--ks-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding: calc(var(--ks-spacing) * 1);
    .iti__country {
      border-radius: var(--ks-radius-app);
      padding-block: calc(var(--ks-spacing) * 2.5);
      font-size: var(--ks-text-sm);
      line-height: var(--tw-leading, var(--ks-text-sm--line-height));
      --tw-font-weight: var(--ks-font-weight-medium);
      font-weight: var(--ks-font-weight-medium);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: transparent;
      &:hover {
        @media (hover: hover) {
          --tw-ring-color: var(--ks-color-white);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--ks-color-white) 20%, transparent);
          }
        }
      }
    }
  }
}
.tippy-box {
  border-radius: var(--ks-radius-app) !important;
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  .tippy-content {
    padding-inline: calc(var(--ks-spacing) * 4) !important;
    padding-block: calc(var(--ks-spacing) * 2) !important;
  }
  .tippy-arrow {
    display: none !important;
  }
}
#nprogress {
  .bar {
    height: calc(var(--ks-spacing) * 1) !important;
    border-radius: calc(infinity * 1px) !important;
  }
  .spinner-icon {
    width: calc(var(--ks-spacing) * 7) !important;
    height: calc(var(--ks-spacing) * 7) !important;
  }
}
@layer components {
  .ks\:app-table {
    position: relative;
    z-index: 0;
    width: 100%;
    border-collapse: separate;
    --tw-border-spacing-y: 5px;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
    border-radius: var(--ks-radius-md);
    text-align: left;
  }
  .ks\:app-table thead {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--ks-color-primary-200);
    background-color: transparent;
    font-size: var(--ks-text-sm);
    line-height: var(--tw-leading, var(--ks-text-sm--line-height));
    color: var(--ks-color-gray-700);
    border-radius: var(--ks-radius-xl);
    &>tr>th {
      &:first-child {
        border-top-left-radius: var(--ks-radius-xl);
        border-bottom-left-radius: var(--ks-radius-xl);
      }
    }
    &>tr>th {
      &:last-child {
        border-top-right-radius: var(--ks-radius-xl);
        border-bottom-right-radius: var(--ks-radius-xl);
      }
    }
    background-color: var(--ks-color-primary-100);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--ks-color-primary-300);
    --tw-ring-inset: inset;
  }
  .ks\:app-table-thead-cell {
    position: relative;
    min-width: attr(data-width px);
    padding-inline: calc(var(--ks-spacing) * 4);
    padding-block: calc(var(--ks-spacing) * 3);
    --tw-font-weight: var(--ks-font-weight-medium);
    font-weight: var(--ks-font-weight-medium);
    white-space: nowrap;
    color: var(--ks-color-primary-600);
    &::before {
      content: var(--tw-content);
      position: absolute;
    }
    &::before {
      content: var(--tw-content);
      top: calc(1 / 2 * 100%);
    }
    &::before {
      content: var(--tw-content);
      right: calc(var(--ks-spacing) * 0);
    }
    &::before {
      content: var(--tw-content);
      display: block;
    }
    &::before {
      content: var(--tw-content);
      height: calc(1 / 2 * 100%);
    }
    &::before {
      content: var(--tw-content);
      width: 1px;
    }
    &::before {
      content: var(--tw-content);
      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    &::before {
      content: var(--tw-content);
      border-radius: calc(infinity * 1px);
    }
    &::before {
      content: var(--tw-content);
      background-color: var(--ks-color-primary-300);
    }
    &:last-child {
      &::before {
        content: var(--tw-content);
        display: none;
      }
    }
  }
  .ks\:app-table-body-cell {
    padding-inline: calc(var(--ks-spacing) * 4);
    padding-block: calc(var(--ks-spacing) * 3);
    font-size: var(--ks-text-sm);
    line-height: var(--tw-leading, var(--ks-text-sm--line-height));
    position: relative;
    &::before {
      content: var(--tw-content);
      position: absolute;
    }
    &::before {
      content: var(--tw-content);
      top: calc(1 / 2 * 100%);
    }
    &::before {
      content: var(--tw-content);
      right: calc(var(--ks-spacing) * 0);
    }
    &::before {
      content: var(--tw-content);
      display: block;
    }
    &::before {
      content: var(--tw-content);
      height: calc(2 / 3 * 100%);
    }
    &::before {
      content: var(--tw-content);
      width: 1px;
    }
    &::before {
      content: var(--tw-content);
      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    &::before {
      content: var(--tw-content);
      border-radius: calc(infinity * 1px);
    }
    &::before {
      content: var(--tw-content);
      background-color: var(--ks-color-primary-200);
    }
    &:last-child {
      &::before {
        content: var(--tw-content);
        display: none;
      }
    }
    .ks\:app-table-body-cell-actions {
      display: flex;
      align-items: center;
      justify-content: safe flex-end;
      gap: calc(var(--ks-spacing) * 2);
      :is(& > *) {
        &:first-child {
          padding-right: calc(var(--ks-spacing) * 2);
        }
      }
    }
  }
  .ks\:app-table tbody>tr, .ks\:app-table tfoot>tr {
    border-color: var(--ks-color-gray-200);
    background-color: var(--ks-color-white);
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
    border-radius: var(--ks-radius-xl);
    &>td {
      &:first-child {
        border-top-left-radius: var(--ks-radius-xl);
        border-bottom-left-radius: var(--ks-radius-xl);
      }
    }
    &>td {
      &:last-child {
        border-top-right-radius: var(--ks-radius-xl);
        border-bottom-right-radius: var(--ks-radius-xl);
      }
    }
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1.2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--ks-color-primary-200);
    --tw-ring-inset: inset;
    &:hover {
      @media (hover: hover) {
        background-color: var(--ks-color-accent-500);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--ks-color-accent-500) 4%, transparent);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--ks-color-accent-600);
      }
    }
    &:hover {
      @media (hover: hover) {
        :is(& > *) {
          &::before {
            content: var(--tw-content);
            background-color: var(--ks-color-accent-600);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--ks-color-accent-600) 50%, transparent);
            }
          }
        }
      }
    }
  }
  .ks\:app-table-cell-placeholder {
    padding-inline: calc(var(--ks-spacing) * 2);
    padding-block: calc(var(--ks-spacing) * 2);
    &::before {
      display: block;
      height: calc(var(--ks-spacing) * 8);
      width: 100%;
      animation: var(--ks-animate-pulse);
      border-radius: var(--ks-radius-md);
      background-color: var(--ks-color-primary-200);
      --tw-content: '';
      content: var(--tw-content);
    }
  }
}
@layer components {
  .ks\:article {
    h3 {
      margin-bottom: calc(var(--ks-spacing) * 2);
      font-size: var(--ks-text-2xl);
      line-height: var(--tw-leading, var(--ks-text-2xl--line-height));
      --tw-leading: var(--ks-leading-tight);
      line-height: var(--ks-leading-tight);
      --tw-font-weight: var(--ks-font-weight-medium);
      font-weight: var(--ks-font-weight-medium);
      text-wrap: pretty;
      color: var(--ks-color-primary);
      &:not(*:first-child) {
        margin-top: calc(var(--ks-spacing) * 8);
      }
    }
    p {
      font-size: var(--ks-text-lg);
      line-height: var(--tw-leading, var(--ks-text-lg--line-height));
      color: var(--ks-color-subtitle);
      &:not(*:last-child) {
        margin-bottom: calc(var(--ks-spacing) * 2);
      }
    }
    strong {
      --tw-font-weight: var(--ks-font-weight-semibold);
      font-weight: var(--ks-font-weight-semibold);
      color: var(--ks-color-black);
    }
    ul {
      list-style-position: inside;
      list-style-type: disc;
      &:not(*:last-child) {
        margin-block: calc(var(--ks-spacing) * 2);
      }
    }
    a {
      color: var(--ks-color-blue-600);
      text-decoration-line: underline;
      text-decoration-color: var(--ks-color-blue-200);
      text-decoration-style: dashed;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
      &:hover {
        @media (hover: hover) {
          text-decoration-color: var(--ks-color-blue-600);
        }
      }
    }
  }
}
@layer components {
  .ks\:posts {
    h2 {
      margin-bottom: calc(var(--ks-spacing) * 2);
      font-size: var(--ks-text-xl);
      line-height: var(--tw-leading, var(--ks-text-xl--line-height));
      --tw-leading: var(--ks-leading-tight);
      line-height: var(--ks-leading-tight);
      --tw-font-weight: var(--ks-font-weight-medium);
      font-weight: var(--ks-font-weight-medium);
      text-wrap: pretty;
      color: var(--ks-color-primary);
      &:not(*:first-child) {
        margin-top: calc(var(--ks-spacing) * 8);
      }
    }
    h3 {
      margin-bottom: calc(var(--ks-spacing) * 2);
      font-size: var(--ks-text-lg);
      line-height: var(--tw-leading, var(--ks-text-lg--line-height));
      --tw-leading: var(--ks-leading-tight);
      line-height: var(--ks-leading-tight);
      --tw-font-weight: var(--ks-font-weight-medium);
      font-weight: var(--ks-font-weight-medium);
      text-wrap: pretty;
      color: var(--ks-color-primary);
      &:not(*:first-child) {
        margin-top: calc(var(--ks-spacing) * 6);
      }
    }
    h4 {
      margin-bottom: calc(var(--ks-spacing) * 2);
      font-size: var(--ks-text-base);
      line-height: var(--tw-leading, var(--ks-text-base--line-height));
      --tw-leading: var(--ks-leading-tight);
      line-height: var(--ks-leading-tight);
      --tw-font-weight: var(--ks-font-weight-medium);
      font-weight: var(--ks-font-weight-medium);
      text-wrap: pretty;
      color: var(--ks-color-primary);
      &:not(*:first-child) {
        margin-top: calc(var(--ks-spacing) * 4);
      }
    }
    h5 {
      margin-bottom: calc(var(--ks-spacing) * 2);
      font-size: var(--ks-text-sm);
      line-height: var(--tw-leading, var(--ks-text-sm--line-height));
      --tw-leading: var(--ks-leading-tight);
      line-height: var(--ks-leading-tight);
      --tw-font-weight: var(--ks-font-weight-medium);
      font-weight: var(--ks-font-weight-medium);
      text-wrap: pretty;
      color: var(--ks-color-primary);
      &:not(*:first-child) {
        margin-top: calc(var(--ks-spacing) * 2);
      }
    }
    p {
      color: var(--ks-color-subtitle);
      &:not(*:last-child) {
        margin-bottom: calc(var(--ks-spacing) * 2);
      }
    }
    strong {
      --tw-font-weight: var(--ks-font-weight-semibold);
      font-weight: var(--ks-font-weight-semibold);
      color: var(--ks-color-black);
    }
    ul {
      list-style-position: inside;
      list-style-type: disc;
      &:not(*:last-child) {
        margin-block: calc(var(--ks-spacing) * 2);
      }
    }
    a {
      color: var(--ks-color-blue-600);
      text-decoration-line: underline;
      text-decoration-color: var(--ks-color-blue-200);
      text-decoration-style: dashed;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
      &:hover {
        @media (hover: hover) {
          text-decoration-color: var(--ks-color-blue-600);
        }
      }
    }
  }
}
@layer components {
  .ks\:modal-wrapper {
    position: fixed;
    top: calc(var(--ks-spacing) * 0);
    left: calc(var(--ks-spacing) * 0);
    z-index: 9999;
    height: 100vh;
    width: 100vw;
    overflow-y: auto;
    .ks\:modal-overlay {
      position: fixed;
      inset: calc(var(--ks-spacing) * 0);
      height: 100%;
      width: 100%;
      background-color: var(--ks-color-black);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-black) 40%, transparent);
      }
    }
    .ks\:modal-content {
      position: relative;
      margin-inline: auto;
      margin-top: calc(var(--ks-spacing) * 15);
      display: flex;
      width: 100%;
      flex-direction: column;
      justify-content: space-between;
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--ks-color-primary-400);
      background-color: var(--ks-color-white);
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      --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);
      --tw-ring-color: color-mix(in oklab, var(--ks-color-white) 40%, transparent);
      @media (width >= 40rem) {
        max-width: var(--ks-container-lg);
      }
      @media (width >= 40rem) {
        border-radius: var(--ks-radius-2xl);
      }
      .ks\:modal-header {
        position: sticky;
        top: calc(var(--ks-spacing) * 0);
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top-left-radius: var(--ks-radius-2xl);
        border-top-right-radius: var(--ks-radius-2xl);
        background-color: var(--ks-color-white);
        padding-inline: calc(var(--ks-spacing) * 7);
        padding-top: calc(var(--ks-spacing) * 5);
        padding-bottom: calc(var(--ks-spacing) * 3);
        &.ks\:has-shadow {
          --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        .ks\:modal-close-btn {
          position: absolute;
          top: calc(var(--ks-spacing) * 3);
          right: calc(var(--ks-spacing) * 0);
          margin-top: calc(var(--ks-spacing) * 0.5);
          margin-right: calc(var(--ks-spacing) * 5);
          display: flex;
          width: calc(var(--ks-spacing) * 8);
          height: calc(var(--ks-spacing) * 8);
          align-items: center;
          justify-content: center;
          border-radius: var(--ks-radius-xl);
          color: var(--ks-color-primary-600);
          &:hover {
            @media (hover: hover) {
              background-color: var(--ks-color-primary-100);
            }
          }
          &:hover {
            @media (hover: hover) {
              color: var(--ks-color-primary-800);
            }
          }
        }
      }
      .ks\:modal-footer {
        position: sticky;
        bottom: calc(var(--ks-spacing) * 0);
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: safe flex-end;
        border-bottom-right-radius: var(--ks-radius-2xl);
        border-bottom-left-radius: var(--ks-radius-2xl);
        background-color: var(--ks-color-white);
        padding-inline: calc(var(--ks-spacing) * 7);
        padding-top: calc(var(--ks-spacing) * 3);
        padding-bottom: calc(var(--ks-spacing) * 5);
      }
      .ks\:modal-body {
        position: relative;
        width: auto;
        padding-inline: calc(var(--ks-spacing) * 7);
        padding-block: calc(var(--ks-spacing) * 4);
      }
      &.ks\:modal-lg {
        max-width: var(--ks-container-lg);
      }
      &.ks\:modal-md {
        @media (width >= 48rem) {
          max-width: var(--ks-container-md);
        }
      }
      &.ks\:modal-sm {
        @media (width >= 48rem) {
          max-width: var(--ks-container-sm);
        }
      }
      &.ks\:modal-xs {
        @media (width >= 48rem) {
          max-width: var(--ks-container-xs);
        }
      }
      &.ks\:modal-2xl {
        @media (width >= 48rem) {
          max-width: var(--ks-container-2xl);
        }
      }
      &.ks\:modal-3xl {
        @media (width >= 48rem) {
          max-width: var(--ks-container-3xl);
        }
      }
      &.ks\:modal-4xl {
        @media (width >= 48rem) {
          max-width: var(--ks-container-4xl);
        }
      }
      &.ks\:modal-5xl {
        @media (width >= 48rem) {
          max-width: var(--ks-container-5xl);
        }
      }
    }
  }
}
@layer components {
  .ks\:radar-animation {
    position: relative;
    width: calc(var(--ks-spacing) * 28);
    height: calc(var(--ks-spacing) * 28);
    .ks\:radar-animation-border {
      position: absolute;
      inset: calc(var(--ks-spacing) * -2);
      border-radius: calc(infinity * 1px);
      &::before, &::after {
        position: absolute;
        inset: calc(var(--ks-spacing) * -2);
        border-radius: calc(infinity * 1px);
        background-color: var(--ks-color-primary-200);
        --tw-content: '';
        content: var(--tw-content);
      }
      &::after {
        position: absolute;
        inset: calc(1 / 2 * 100%);
        height: 100%;
        width: 1px;
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
      &::before {
        position: absolute;
        inset: calc(1 / 2 * 100%);
        height: 1px;
        width: 100%;
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
    .ks\:radar-animation-circle {
      position: absolute;
      top: calc(var(--ks-spacing) * 0);
      left: calc(var(--ks-spacing) * 0);
      width: 100%;
      height: 100%;
      border-radius: calc(infinity * 1px);
      .ks\:object {
        position: absolute;
        width: calc(var(--ks-spacing) * 2);
        height: calc(var(--ks-spacing) * 2);
        animation: ping 2s infinite;
        border-radius: calc(infinity * 1px);
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
        &.ks\:object-outside {
          top: calc(var(--ks-spacing) * 0);
          left: calc(var(--ks-spacing) * 0);
          background-color: var(--ks-color-primary-100);
          --tw-ring-color: var(--ks-color-primary-500);
        }
        &.ks\:object-inside {
          top: calc(var(--ks-spacing) * 16);
          left: calc(var(--ks-spacing) * 6);
          background-color: var(--ks-color-green-100);
          --tw-ring-color: var(--ks-color-green-500);
        }
        &.ks\:object-inside-danger {
          top: calc(var(--ks-spacing) * 10);
          left: calc(var(--ks-spacing) * 1);
          background-color: var(--ks-color-red-100);
          --tw-ring-color: var(--ks-color-red-500);
        }
      }
      .ks\:radar-animation-circle-highlight {
        position: absolute;
        inset: calc(var(--ks-spacing) * 0);
        animation: var(--ks-animate-spin-reverse);
        border-radius: calc(infinity * 1px);
        --tw-gradient-position: from 30deg in oklab;
        background-image: conic-gradient(var(--tw-gradient-stops));
        --tw-gradient-from: color-mix(in oklab, var(--ks-color-primary-600) 8%, transparent);
        --tw-gradient-from-position: 0%;
        --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);
        --tw-gradient-via-position: 20%;
        --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));
        --tw-gradient-to-position: 100%;
      }
      &::before, &::after {
        position: absolute;
        inset: calc(var(--ks-spacing) * -2);
        border-radius: calc(infinity * 1px);
        --tw-content: '';
        content: var(--tw-content);
      }
      &::before {
        background-image: repeating-radial-gradient(circle,var(--ks-color-primary-300) 0,var(--ks-color-primary-300) 1px,transparent 1px,transparent 20px);
      }
    }
  }
  .ks\:error-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--ks-spacing) * 4);
    font-size: var(--ks-text-9xl);
    line-height: var(--tw-leading, var(--ks-text-9xl--line-height));
    --tw-font-weight: var(--ks-font-weight-medium);
    font-weight: var(--ks-font-weight-medium);
    color: var(--ks-color-primary-50);
    -webkit-text-stroke: 1px #ccc;
  }
}
@layer components {
  .ks\:editor {
    position: relative;
    z-index: 0;
    border-collapse: separate;
    --tw-border-spacing-y: 5px;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
    border-radius: var(--ks-radius-app);
    .tiptap {
      max-height: var(--height,100px);
      min-height: var(--height,100px);
      overflow-y: auto;
      border-radius: var(--ks-radius-md);
      padding: calc(var(--ks-spacing) * 2);
      &:focus {
        --tw-outline-style: none !important;
        outline-style: none !important;
      }
      p.is-editor-empty:first-child::before {
        pointer-events: none;
        float: left;
        height: calc(var(--ks-spacing) * 0);
        color: var(--ks-color-primary-500);
        --tw-content: attr(data-placeholder);
        content: var(--tw-content);
      }
      ul {
        list-style-type: disc;
        padding-left: calc(var(--ks-spacing) * 4);
      }
      ol {
        list-style-type: decimal;
        padding-left: calc(var(--ks-spacing) * 4);
      }
      table {
        width: auto;
        border-collapse: collapse;
        --tw-border-spacing-x: calc(var(--ks-spacing) * 0);
        --tw-border-spacing-y: calc(var(--ks-spacing) * 0);
        border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
        border-radius: var(--ks-radius-md);
        border-color: var(--ks-color-gray-200);
      }
      td {
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--ks-color-gray-200);
        padding: calc(var(--ks-spacing) * 2);
      }
      th {
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--ks-color-gray-200);
        padding: calc(var(--ks-spacing) * 2);
        text-align: left;
        --tw-font-weight: var(--ks-font-weight-bold);
        font-weight: var(--ks-font-weight-bold);
      }
      h1 {
        font-size: var(--ks-text-2xl);
        line-height: var(--tw-leading, var(--ks-text-2xl--line-height));
        --tw-font-weight: var(--ks-font-weight-bold);
        font-weight: var(--ks-font-weight-bold);
      }
      h2 {
        font-size: var(--ks-text-xl);
        line-height: var(--tw-leading, var(--ks-text-xl--line-height));
        --tw-font-weight: var(--ks-font-weight-bold);
        font-weight: var(--ks-font-weight-bold);
      }
      h3 {
        font-size: var(--ks-text-lg);
        line-height: var(--tw-leading, var(--ks-text-lg--line-height));
        --tw-font-weight: var(--ks-font-weight-bold);
        font-weight: var(--ks-font-weight-bold);
      }
      h4 {
        font-size: var(--ks-text-base);
        line-height: var(--tw-leading, var(--ks-text-base--line-height));
        --tw-font-weight: var(--ks-font-weight-bold);
        font-weight: var(--ks-font-weight-bold);
      }
      h5 {
        font-size: var(--ks-text-sm);
        line-height: var(--tw-leading, var(--ks-text-sm--line-height));
        --tw-font-weight: var(--ks-font-weight-bold);
        font-weight: var(--ks-font-weight-bold);
      }
      h6 {
        font-size: var(--ks-text-xs);
        line-height: var(--tw-leading, var(--ks-text-xs--line-height));
        --tw-font-weight: var(--ks-font-weight-bold);
        font-weight: var(--ks-font-weight-bold);
      }
    }
    &.ks\:editor-bordered {
      .tiptap {
        padding: calc(var(--ks-spacing) * 5);
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--ks-color-primary-200);
        --tw-ring-inset: inset;
      }
    }
  }
}
@property --border-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: '<angle>';
}
:root {
  --bottom-nav-height: 5rem;
  --top-nav-height: 5rem;
}
@layer utilities {
  [x-cloak] {
    display: none;
  }
}
@layer components {
  .ks\:animate-smooth {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--ks-default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
    --tw-duration: 700ms !important;
    transition-duration: 700ms !important;
    --tw-ease: var(--ks-ease-in-out);
    transition-timing-function: var(--ks-ease-in-out);
  }
  .ks\:not-animate-fade-up {
    :is(:not([data-animated])&) {
      --tw-translate-y: calc(var(--ks-spacing) * 5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    :is(:not([data-animated])&) {
      opacity: 0%;
    }
    :is(:not([data-animated])&) {
      --tw-blur: blur(var(--ks-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,);
    }
  }
  .ks\:not-animate-fade-down {
    :is(:not([data-animated])&) {
      --tw-translate-y: calc(var(--ks-spacing) * 5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    :is(:not([data-animated])&) {
      opacity: 0%;
    }
    :is(:not([data-animated])&) {
      --tw-blur: blur(var(--ks-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,);
    }
  }
  .ks\:heading-1 {
    font-family: var(--ks-font-secondary);
    font-size: var(--ks-text-4xl);
    line-height: var(--tw-leading, var(--ks-text-4xl--line-height));
    --tw-leading: var(--ks-leading-tight);
    line-height: var(--ks-leading-tight);
    --tw-font-weight: var(--ks-font-weight-semibold);
    font-weight: var(--ks-font-weight-semibold);
    text-wrap: pretty;
    color: var(--ks-color-black);
    @media (width >= 48rem) {
      font-size: var(--ks-text-6xl);
      line-height: var(--tw-leading, var(--ks-text-6xl--line-height));
    }
  }
  .ks\:heading-2 {
    font-family: var(--ks-font-secondary);
    font-size: var(--ks-text-3xl);
    line-height: var(--tw-leading, var(--ks-text-3xl--line-height));
    --tw-leading: var(--ks-leading-tight);
    line-height: var(--ks-leading-tight);
    --tw-font-weight: var(--ks-font-weight-semibold);
    font-weight: var(--ks-font-weight-semibold);
    text-wrap: pretty;
    color: var(--ks-color-black);
    @media (width >= 48rem) {
      font-size: var(--ks-text-5xl);
      line-height: var(--tw-leading, var(--ks-text-5xl--line-height));
    }
  }
  .ks\:heading-3 {
    font-family: var(--ks-font-secondary);
    font-size: var(--ks-text-2xl);
    line-height: var(--tw-leading, var(--ks-text-2xl--line-height));
    --tw-leading: var(--ks-leading-tight);
    line-height: var(--ks-leading-tight);
    --tw-font-weight: var(--ks-font-weight-semibold);
    font-weight: var(--ks-font-weight-semibold);
    text-wrap: pretty;
    color: var(--ks-color-black);
    @media (width >= 48rem) {
      font-size: var(--ks-text-4xl);
      line-height: var(--tw-leading, var(--ks-text-4xl--line-height));
    }
  }
  .ks\:heading-4 {
    font-family: var(--ks-font-secondary);
    font-size: var(--ks-text-xl);
    line-height: var(--tw-leading, var(--ks-text-xl--line-height));
    --tw-leading: var(--ks-leading-tight);
    line-height: var(--ks-leading-tight);
    --tw-font-weight: var(--ks-font-weight-semibold);
    font-weight: var(--ks-font-weight-semibold);
    text-wrap: pretty;
    color: var(--ks-color-black);
    @media (width >= 48rem) {
      font-size: var(--ks-text-3xl);
      line-height: var(--tw-leading, var(--ks-text-3xl--line-height));
    }
  }
  .ks\:heading-5 {
    font-family: var(--ks-font-secondary);
    font-size: var(--ks-text-lg);
    line-height: var(--tw-leading, var(--ks-text-lg--line-height));
    --tw-leading: var(--ks-leading-tight);
    line-height: var(--ks-leading-tight);
    --tw-font-weight: var(--ks-font-weight-semibold);
    font-weight: var(--ks-font-weight-semibold);
    text-wrap: pretty;
    color: var(--ks-color-black);
    @media (width >= 48rem) {
      font-size: var(--ks-text-2xl);
      line-height: var(--tw-leading, var(--ks-text-2xl--line-height));
    }
  }
  .ks\:heading-6 {
    font-family: var(--ks-font-secondary);
    font-size: var(--ks-text-base);
    line-height: var(--tw-leading, var(--ks-text-base--line-height));
    --tw-leading: var(--ks-leading-tight);
    line-height: var(--ks-leading-tight);
    --tw-font-weight: var(--ks-font-weight-semibold);
    font-weight: var(--ks-font-weight-semibold);
    text-wrap: pretty;
    color: var(--ks-color-black);
    @media (width >= 48rem) {
      font-size: var(--ks-text-xl);
      line-height: var(--tw-leading, var(--ks-text-xl--line-height));
    }
  }
  .ks\:title-1 {
    font-size: var(--ks-text-3xl);
    line-height: var(--tw-leading, var(--ks-text-3xl--line-height));
    --tw-leading: var(--ks-leading-tight);
    line-height: var(--ks-leading-tight);
    --tw-font-weight: var(--ks-font-weight-semibold);
    font-weight: var(--ks-font-weight-semibold);
    text-wrap: pretty;
    color: var(--ks-color-black);
    @media (width >= 48rem) {
      font-size: var(--ks-text-4xl);
      line-height: var(--tw-leading, var(--ks-text-4xl--line-height));
    }
  }
  .ks\:title-2 {
    font-size: var(--ks-text-2xl);
    line-height: var(--tw-leading, var(--ks-text-2xl--line-height));
    --tw-leading: var(--ks-leading-tight);
    line-height: var(--ks-leading-tight);
    --tw-font-weight: var(--ks-font-weight-semibold);
    font-weight: var(--ks-font-weight-semibold);
    text-wrap: pretty;
    color: var(--ks-color-black);
    @media (width >= 48rem) {
      font-size: var(--ks-text-3xl);
      line-height: var(--tw-leading, var(--ks-text-3xl--line-height));
    }
  }
  .ks\:title-3 {
    font-size: var(--ks-text-xl);
    line-height: var(--tw-leading, var(--ks-text-xl--line-height));
    --tw-leading: var(--ks-leading-tight);
    line-height: var(--ks-leading-tight);
    --tw-font-weight: var(--ks-font-weight-semibold);
    font-weight: var(--ks-font-weight-semibold);
    text-wrap: pretty;
    color: var(--ks-color-black);
    @media (width >= 48rem) {
      font-size: var(--ks-text-2xl);
      line-height: var(--tw-leading, var(--ks-text-2xl--line-height));
    }
  }
  .ks\:repeater-item {
    position: relative;
    border-radius: var(--ks-radius-app);
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:not(*:last-child) {
      margin-bottom: calc(var(--ks-spacing) * 2.5);
    }
    &::before {
      position: absolute;
      inset: calc(var(--ks-spacing) * 0);
      top: calc(1 / 2 * 100%);
      left: -1px;
      height: calc(5 / 6 * 100%);
      width: 2px;
      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
      border-radius: var(--ks-radius-app);
      background-color: var(--ks-color-primary-500);
      --tw-content: '';
      content: var(--tw-content);
    }
    &.ks\:repeater-item-indigo {
      &::before {
        content: var(--tw-content);
        background-color: var(--ks-color-indigo-500);
      }
    }
    &.ks\:repeater-item-accent {
      &::before {
        content: var(--tw-content);
        background-color: var(--ks-color-accent-500);
      }
    }
    &.ks\:repeater-item-primary {
      &::before {
        content: var(--tw-content);
        background-color: var(--ks-color-primary-500);
      }
    }
    &.ks\:repeater-item-secondary {
      &::before {
        content: var(--tw-content);
        background-color: var(--ks-color-slate-500);
      }
    }
    &.ks\:repeater-item-accent {
      &::before {
        content: var(--tw-content);
        background-color: var(--ks-color-accent-500);
      }
    }
    &.ks\:repeater-item-warning {
      &::before {
        content: var(--tw-content);
        background-color: var(--ks-color-yellow-500);
      }
    }
    &.ks\:repeater-item-danger {
      &::before {
        content: var(--tw-content);
        background-color: var(--ks-color-red-500);
      }
    }
    &.ks\:repeater-item-info {
      &::before {
        content: var(--tw-content);
        background-color: var(--ks-color-blue-500);
      }
    }
    &.ks\:repeater-item-success {
      &::before {
        content: var(--tw-content);
        background-color: var(--ks-color-green-500);
      }
    }
    .ks\:repeater-item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: calc(var(--ks-spacing) * 2);
      border-top-left-radius: var(--ks-radius-app);
      border-top-right-radius: var(--ks-radius-app);
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
      border-color: var(--ks-color-slate-200);
      background-color: var(--ks-color-slate-50);
      padding-inline: calc(var(--ks-spacing) * 2);
      padding-block: calc(var(--ks-spacing) * 0.5);
      @media (width >= 48rem) {
        padding-inline: calc(var(--ks-spacing) * 4);
      }
    }
    .ks\:repeater-item-content {
      padding-inline: calc(var(--ks-spacing) * 2);
      padding-block: calc(var(--ks-spacing) * 2);
      @media (width >= 48rem) {
        padding-inline: calc(var(--ks-spacing) * 4);
      }
      @media (width >= 48rem) {
        padding-block: calc(var(--ks-spacing) * 4);
      }
    }
    &.ks\:repeater-rainbow {
      &:nth-child(1) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-blue-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-blue-600);
        }
      }
      &:nth-child(2) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-green-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-green-600);
        }
      }
      &:nth-child(3) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-yellow-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-yellow-600);
        }
      }
      &:nth-child(4) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-red-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-red-600);
        }
      }
      &:nth-child(5) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-yellow-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-yellow-600);
        }
      }
      &:nth-child(6) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-indigo-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-indigo-600);
        }
      }
      &:nth-child(7) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-purple-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-purple-600);
        }
      }
      &:nth-child(8) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-pink-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-pink-600);
        }
      }
      &:nth-child(9) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-orange-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-orange-600);
        }
      }
      &:nth-child(10) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-teal-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-teal-600);
        }
      }
      &:nth-child(11) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-cyan-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-cyan-600);
        }
      }
      &:nth-child(12) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-violet-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-violet-600);
        }
      }
      &:nth-child(13) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-lime-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-lime-600);
        }
      }
      &:nth-child(14) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-amber-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-amber-600);
        }
      }
      &:nth-child(15) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-fuchsia-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-fuchsia-600);
        }
      }
      &:nth-child(16) {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-purple-600);
        }
        .ks\:marker-color {
          background-color: var(--ks-color-purple-600);
        }
      }
    }
  }
  .ks\:pattern {
    background-image: repeating-linear-gradient(315deg,var(--pattern-bg) 0,var(--pattern-bg) 1px,transparent 0,transparent 50%);
    background-size: 12px 10px;
    --pattern-bg: var(--ks-color-black);
    @supports (color: color-mix(in lab, red, red)) {
      --pattern-bg: color-mix(in oklab, var(--ks-color-black) 5%, transparent);
    }
    &[data-theme="dark"] {
      --pattern-bg: var(--ks-color-white);
      @supports (color: color-mix(in lab, red, red)) {
        --pattern-bg: color-mix(in oklab, var(--ks-color-white) 10%, transparent);
      }
    }
  }
  .ks\:user-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--ks-spacing) * 1);
    border-radius: var(--ks-radius-app);
    padding-inline: calc(var(--ks-spacing) * 2);
    padding-block: calc(var(--ks-spacing) * 0.5);
    font-size: var(--ks-text-xs);
    line-height: var(--tw-leading, var(--ks-text-xs--line-height));
    --tw-font-weight: var(--ks-font-weight-medium);
    font-weight: var(--ks-font-weight-medium);
    --tw-gradient-position: to right;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to right in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--ks-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));
    --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);
    --tw-ring-offset-color: var(--ks-color-white);
    color: var(--ks-color-slate-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--ks-color-slate-300);
    &[data-type="gold"] {
      --tw-gradient-from: var(--ks-color-amber-500);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-from: color-mix(in oklab, var(--ks-color-amber-500) 5%, 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));
    }
    &[data-type="gold"] {
      color: var(--ks-color-amber-600);
    }
    &[data-type="gold"] {
      --tw-ring-color: var(--ks-color-amber-500);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--ks-color-amber-500) 30%, transparent);
      }
    }
  }
  .ks\:empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--ks-spacing) * 6);
    padding: calc(var(--ks-spacing) * 5);
    .ks\:empty-state-icon {
      display: flex;
      width: calc(var(--ks-spacing) * 12);
      height: calc(var(--ks-spacing) * 12);
      align-items: center;
      justify-content: center;
      border-radius: calc(infinity * 1px);
      background-color: var(--ks-color-slate-100);
      font-size: var(--ks-text-2xl);
      line-height: var(--tw-leading, var(--ks-text-2xl--line-height));
      color: var(--ks-color-slate-500);
    }
    .ks\:empty-state-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: calc(var(--ks-spacing) * 2);
      .ks\:empty-state-title {
        text-align: center;
        font-size: var(--ks-text-lg);
        line-height: var(--tw-leading, var(--ks-text-lg--line-height));
        --tw-font-weight: var(--ks-font-weight-medium);
        font-weight: var(--ks-font-weight-medium);
        color: var(--ks-color-slate-800);
      }
      .ks\:empty-state-description {
        text-align: center;
        font-size: var(--ks-text-sm);
        line-height: var(--tw-leading, var(--ks-text-sm--line-height));
        color: var(--ks-color-subtitle);
      }
    }
  }
  .ks\:message-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--ks-spacing) * 4);
    text-align: center;
    .ks\:message-icon {
      display: flex;
      flex-shrink: 0;
      align-items: baseline;
      justify-content: center;
      font-size: var(--ks-text-2xl);
      line-height: var(--tw-leading, var(--ks-text-2xl--line-height));
    }
    .ks\:message-inner {
      display: flex;
      flex-direction: column;
      gap: calc(var(--ks-spacing) * 1);
      .ks\:message-title {
        margin-bottom: calc(var(--ks-spacing) * 2);
        font-size: var(--ks-text-lg);
        line-height: var(--tw-leading, var(--ks-text-lg--line-height));
        --tw-font-weight: var(--ks-font-weight-medium);
        font-weight: var(--ks-font-weight-medium);
        color: var(--ks-color-slate-800);
      }
      .ks\:message-content {
        display: flex;
        flex-direction: column;
        color: var(--ks-color-subtitle);
        & p {
          &:not(*:last-child) {
            margin-bottom: calc(var(--ks-spacing) * 2);
          }
        }
      }
    }
    .ks\:message-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: calc(var(--ks-spacing) * 2.5);
    }
  }
  .ks\:step-wizard {
    margin-bottom: calc(var(--ks-spacing) * 4);
    display: flex;
    overflow: clip;
    border-radius: var(--ks-radius-lg);
    background-color: var(--ks-color-white);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--ks-color-slate-200);
    :is(& > *) {
      padding-inline: calc(var(--ks-spacing) * 2);
    }
    @media (width < 64rem) {
      :where(& > :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)));
      }
    }
    @media (width < 64rem) {
      :where(& > :not(:last-child)) {
        border-color: var(--ks-color-slate-100);
      }
    }
    @media (width < 48rem) {
      flex-direction: column;
    }
    @media (width < 48rem) {
      padding: calc(var(--ks-spacing) * 0.5);
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      justify-content: space-between;
    }
    [data-current]+.ks\:step-wizard-item {
      .ks\:step-wizard-indicator {
        &::before {
          content: var(--tw-content);
          background-color: var(--ks-color-accent);
        }
        &::before {
          content: var(--tw-content);
          --tw-ring-color: var(--ks-color-white);
        }
      }
    }
    .ks\:step-wizard-item {
      position: relative;
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: safe center;
      gap: calc(var(--ks-spacing) * 2);
      padding-block: calc(var(--ks-spacing) * 4);
      &[data-current] {
        background-color: var(--ks-color-accent);
      }
      @media (width < 48rem) {
        border-radius: var(--ks-radius-md);
      }
      .ks\:step-wizard-label {
        --tw-font-weight: var(--ks-font-weight-medium);
        font-weight: var(--ks-font-weight-medium);
        color: var(--ks-color-slate-800);
        &:is(:where(.ks\:group)[data-current] *) {
          color: var(--ks-color-white);
        }
      }
      .ks\:step-wizard-indicator {
        position: absolute;
        inset-block: calc(var(--ks-spacing) * 0);
        left: calc(var(--ks-spacing) * -5);
        width: calc(var(--ks-spacing) * 14) !important;
        overflow: clip;
        @media (width < 64rem) {
          display: none;
        }
        &::before {
          position: absolute;
          inset-block: calc(var(--ks-spacing) * 0);
          right: calc(var(--ks-spacing) * 4);
          width: 100%;
          height: 100%;
          rotate: 45deg;
          border-radius: var(--ks-radius-sm);
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          --tw-ring-color: var(--ks-color-slate-200);
          --tw-content: '';
          content: var(--tw-content);
          &:is(:where(.ks\:group)[data-current] *) {
            --tw-ring-color: var(--ks-color-white);
          }
        }
      }
    }
  }
  .ks\:bar-loader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--ks-spacing) * 4);
    padding-block: calc(var(--ks-spacing) * 10);
    .ks\:bar-loader {
      display: flex;
      min-height: calc(var(--ks-spacing) * 8);
      align-items: center;
      justify-content: center;
      gap: calc(var(--ks-spacing) * 2);
      overflow: clip;
      padding: calc(var(--ks-spacing) * 1);
      .ks\:bar-loader-item {
        height: calc(var(--ks-spacing) * 6);
        width: calc(var(--ks-spacing) * 1.5);
        animation: var(--ks-animate-bar-loader);
        border-radius: calc(infinity * 1px);
        background-color: var(--ks-color-slate-800);
        font-size: 0;
        &:first-child {
          animation-delay: 0s;
        }
        &:nth-child(2) {
          animation-delay: 0.2s;
        }
        &:last-child {
          animation-delay: 0.4s;
        }
      }
    }
    .ks\:bar-loader-message {
      animation: var(--ks-animate-pulse);
      font-size: var(--ks-text-sm);
      line-height: var(--tw-leading, var(--ks-text-sm--line-height));
      color: var(--ks-color-slate-500);
    }
  }
  el-dialog {
    display: none !important;
  }
  .ks\:dialog {
    position: fixed;
    inset: calc(var(--ks-spacing) * 0);
    z-index: 9999;
    display: flex;
    min-height: 100vh;
    min-width: 100vw;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    background-color: transparent;
    outline-style: var(--tw-outline-style);
    outline-width: 0px;
    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(--ks-default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--ks-default-transition-duration));
    transition-behavior: allow-discrete;
    &::backdrop {
      background-color: var(--ks-color-black);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-black) 30%, transparent);
      }
    }
    &::backdrop {
      transition-behavior: allow-discrete;
    }
    &::backdrop {
      --tw-duration: 300ms;
      transition-duration: 300ms;
    }
    &::backdrop {
      --tw-ease: var(--ks-ease-in-out);
      transition-timing-function: var(--ks-ease-in-out);
    }
    .ks\:dialog-backdrop {
      position: fixed;
      inset: calc(var(--ks-spacing) * 0);
      height: 100dvh;
      width: 100dvw;
      background-color: var(--ks-color-black);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--ks-color-black) 30%, transparent);
      }
      transition-behavior: allow-discrete;
      --tw-duration: 300ms;
      transition-duration: 300ms;
      --tw-ease: var(--ks-ease-in-out);
      transition-timing-function: var(--ks-ease-in-out);
      --tw-content: '';
      content: var(--tw-content);
    }
    .ks\:dialog-content {
      pointer-events: auto;
      position: relative;
      margin-inline: auto;
      margin-block: auto;
      display: flex;
      width: 100%;
      cursor: default;
      flex-direction: column;
      justify-content: space-between;
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--ks-color-slate-400);
      background-color: var(--ks-color-white);
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      @media (width >= 40rem) {
        max-width: var(--ks-container-lg);
      }
      @media (width >= 40rem) {
        border-radius: var(--ks-radius-app);
      }
      &.ks\:dialog-xs {
        @media (width >= 48rem) {
          max-width: var(--ks-container-xs);
        }
      }
      &.ks\:dialog-lg {
        @media (width >= 48rem) {
          max-width: var(--ks-container-lg);
        }
      }
      &.ks\:dialog-md {
        @media (width >= 48rem) {
          max-width: var(--ks-container-md);
        }
      }
      &.ks\:dialog-sm {
        @media (width >= 48rem) {
          max-width: var(--ks-container-sm);
        }
      }
      &.ks\:dialog-2xl {
        @media (width >= 48rem) {
          max-width: var(--ks-container-2xl);
        }
      }
      &.ks\:dialog-3xl {
        @media (width >= 48rem) {
          max-width: var(--ks-container-3xl);
        }
      }
      &.ks\:dialog-4xl {
        @media (width >= 48rem) {
          max-width: var(--ks-container-4xl);
        }
      }
      &.ks\:dialog-5xl {
        @media (width >= 48rem) {
          max-width: var(--ks-container-5xl);
        }
      }
      &.ks\:dialog-6xl {
        @media (width >= 48rem) {
          max-width: var(--ks-container-6xl);
        }
      }
      &.ks\:dialog-7xl {
        @media (width >= 48rem) {
          max-width: var(--ks-container-7xl);
        }
      }
      .ks\:dialog-header {
        position: sticky;
        top: calc(var(--ks-spacing) * 0);
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top-left-radius: var(--ks-radius-app);
        border-top-right-radius: var(--ks-radius-app);
        background-color: var(--ks-color-white);
        padding-inline: calc(var(--ks-spacing) * 6);
        padding-top: calc(var(--ks-spacing) * 4);
        padding-bottom: calc(var(--ks-spacing) * 3);
        &:is(:where(.ks\:group\/dialog)[data-header-sticky] *) {
          --tw-shadow: 0px 2px 4px -1px var(--tw-shadow-color, rgba(0,0,0,0.1));
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        .ks\:dialog-close-btn {
          position: absolute;
          top: calc(var(--ks-spacing) * 3);
          right: calc(var(--ks-spacing) * 0);
          margin-top: calc(var(--ks-spacing) * -0.5);
          margin-right: calc(var(--ks-spacing) * 5);
          display: flex;
          width: calc(var(--ks-spacing) * 9);
          height: calc(var(--ks-spacing) * 9);
          cursor: pointer;
          align-items: center;
          justify-content: center;
          border-radius: var(--ks-radius-lg);
          color: var(--ks-color-slate-600);
          &:hover {
            @media (hover: hover) {
              background-color: var(--ks-color-slate-100);
            }
          }
          &:hover {
            @media (hover: hover) {
              color: var(--ks-color-slate-800);
            }
          }
        }
      }
      .ks\:dialog-body {
        position: relative;
        width: auto;
        padding-inline: calc(var(--ks-spacing) * 6);
        padding-block: calc(var(--ks-spacing) * 4);
      }
      .ks\:dialog-footer {
        position: sticky;
        bottom: calc(var(--ks-spacing) * 0);
        display: flex;
        align-items: center;
        gap: calc(var(--ks-spacing) * 2.5);
        border-bottom-right-radius: var(--ks-radius-app);
        border-bottom-left-radius: var(--ks-radius-app);
        background-color: var(--ks-color-white);
        padding-inline: calc(var(--ks-spacing) * 6);
        padding-top: calc(var(--ks-spacing) * 3);
        padding-bottom: calc(var(--ks-spacing) * 5);
        &:is(:where(.ks\:group\/dialog)[data-footer-sticky] *) {
          --tw-shadow: 0px -2px 4px -1px var(--tw-shadow-color, rgba(0,0,0,0.1));
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
  }
  .ks\:tab-header-wrapper {
    margin-bottom: calc(var(--ks-spacing) * 5);
    overflow-x: auto;
    padding-bottom: calc(var(--ks-spacing) * 2.5);
    .ks\:tab-header {
      display: flex;
      gap: calc(var(--ks-spacing) * 5);
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
      border-color: var(--ks-color-slate-200);
      .ks\:tab-item {
        display: flex;
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 2px;
        border-bottom-color: transparent;
        padding-inline: calc(var(--ks-spacing) * 2.5);
        padding-bottom: calc(var(--ks-spacing) * 2);
        white-space: nowrap;
        color: var(--ks-color-slate-500);
        &:hover {
          @media (hover: hover) {
            color: var(--ks-color-primary);
          }
        }
        &[data-current] {
          border-color: var(--ks-color-accent);
        }
        &[data-current] {
          --tw-font-weight: var(--ks-font-weight-medium);
          font-weight: var(--ks-font-weight-medium);
        }
        &[data-current] {
          color: var(--ks-color-accent-700);
        }
      }
    }
  }
  .ks\:breadcrumbs {
    margin-bottom: calc(var(--ks-spacing) * 6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--ks-spacing) * 2.5);
    font-size: var(--ks-text-sm);
    line-height: var(--tw-leading, var(--ks-text-sm--line-height));
    .ks\:breadcrumbs-item {
      display: flex;
      align-items: center;
      gap: calc(var(--ks-spacing) * 2.5);
      font-size: var(--ks-text-sm);
      line-height: var(--tw-leading, var(--ks-text-sm--line-height));
      --tw-font-weight: var(--ks-font-weight-medium);
      font-weight: var(--ks-font-weight-medium);
      color: var(--ks-color-slate-500);
      &:is(:where(.ks\:group\/breadcrumbs)[data-theme="dark"] *) {
        color: var(--ks-color-white);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--ks-color-white) 60%, transparent);
        }
      }
      &[data-current] {
        --tw-font-weight: var(--ks-font-weight-medium);
        font-weight: var(--ks-font-weight-medium);
      }
      &[data-current] {
        color: var(--ks-color-slate-700);
      }
      &[data-current] {
        opacity: 100%;
      }
      &[data-current] {
        &:is(:where(.ks\:group\/breadcrumbs)[data-theme="dark"] *) {
          color: var(--ks-color-white);
          @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--ks-color-white) 80%, transparent);
          }
        }
      }
      &[href] {
        &:hover {
          @media (hover: hover) {
            color: var(--ks-color-accent);
          }
        }
        &:hover {
          @media (hover: hover) {
            opacity: 100%;
          }
        }
        &:hover {
          @media (hover: hover) {
            &:is(:where(.ks\:group\/breadcrumbs)[data-theme="dark"] *) {
              color: var(--ks-color-white);
              @supports (color: color-mix(in lab, red, red)) {
                color: color-mix(in oklab, var(--ks-color-white) 80%, transparent);
              }
            }
          }
        }
      }
    }
    .ks\:breadcrumbs-separator {
      color: var(--ks-color-slate-400);
      &:is(:where(.ks\:group\/breadcrumbs)[data-theme="dark"] *) {
        color: var(--ks-color-white);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--ks-color-white) 40%, transparent);
        }
      }
    }
  }
  .ks\:hr-line {
    height: calc(var(--ks-spacing) * 0.5);
    width: 100%;
    border-radius: calc(infinity * 1px);
    border-color: transparent;
    color: var(--ks-color-black);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ks-color-black) 15%, transparent);
    }
    &[data-theme="dark"] {
      color: var(--ks-color-white);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--ks-color-white) 15%, transparent);
      }
    }
    &.ks\:hr-line-centered {
      --tw-gradient-position: to right;
      @supports (background-image: linear-gradient(in lab, red, red)) {
        --tw-gradient-position: to right in oklab;
      }
      background-image: linear-gradient(var(--tw-gradient-stops));
      --tw-gradient-from: transparent;
      --tw-gradient-from-position: 10%;
      --tw-gradient-via: currentcolor;
      --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);
      --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));
      --tw-gradient-to-position: 80%;
    }
    &.ks\:hr-line-left {
      --tw-gradient-position: to right;
      @supports (background-image: linear-gradient(in lab, red, red)) {
        --tw-gradient-position: to right in oklab;
      }
      background-image: linear-gradient(var(--tw-gradient-stops));
      --tw-gradient-from: currentcolor;
      --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));
    }
    &.ks\:hr-line-right {
      --tw-gradient-position: to right;
      @supports (background-image: linear-gradient(in lab, red, red)) {
        --tw-gradient-position: to right in oklab;
      }
      background-image: linear-gradient(var(--tw-gradient-stops));
      --tw-gradient-from: transparent;
      --tw-gradient-to: currentcolor;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    &.ks\:hr-line-full {
      background-color: currentcolor;
    }
  }
  .ks\:card {
    position: relative;
    border-radius: var(--ks-radius-app);
    background-color: var(--ks-color-primary-50);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--ks-color-primary) 8%, transparent) var(--tw-shadow-alpha), transparent);
    --tw-ring-color: var(--ks-color-primary-200);
    .ks\:card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-inline: calc(var(--ks-spacing) * 4);
      padding-block: calc(var(--ks-spacing) * 4);
    }
    .ks\:card-footer {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-inline: calc(var(--ks-spacing) * 4);
      padding-block: calc(var(--ks-spacing) * 4);
    }
    .ks\:card-content {
      position: relative;
      border-radius: var(--ks-radius-app);
      background-color: var(--ks-color-white);
      padding-inline: calc(var(--ks-spacing) * 4);
      padding-block: calc(var(--ks-spacing) * 4);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--ks-color-primary-300);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--ks-color-primary-300) 75%, transparent);
      }
    }
  }
  .ks\:icon-list {
    list-style-position: inside;
    list-style-type: disc;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--ks-spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--ks-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
    .ks\:icon-item {
      display: flex;
      align-items: flex-start;
      gap: calc(var(--ks-spacing) * 3);
      .ks\:icon {
        flex-shrink: 0;
      }
    }
  }
}
@property --tw-mask-linear {
  syntax: "*";
  inherits: false;
  initial-value: linear-gradient(#fff, #fff);
}
@property --tw-mask-radial {
  syntax: "*";
  inherits: false;
  initial-value: linear-gradient(#fff, #fff);
}
@property --tw-mask-conic {
  syntax: "*";
  inherits: false;
  initial-value: linear-gradient(#fff, #fff);
}
@property --tw-mask-left {
  syntax: "*";
  inherits: false;
  initial-value: linear-gradient(#fff, #fff);
}
@property --tw-mask-right {
  syntax: "*";
  inherits: false;
  initial-value: linear-gradient(#fff, #fff);
}
@property --tw-mask-bottom {
  syntax: "*";
  inherits: false;
  initial-value: linear-gradient(#fff, #fff);
}
@property --tw-mask-top {
  syntax: "*";
  inherits: false;
  initial-value: linear-gradient(#fff, #fff);
}
@property --tw-mask-bottom-from-position {
  syntax: "*";
  inherits: false;
  initial-value: 0%;
}
@property --tw-mask-bottom-to-position {
  syntax: "*";
  inherits: false;
  initial-value: 100%;
}
@property --tw-mask-bottom-from-color {
  syntax: "*";
  inherits: false;
  initial-value: black;
}
@property --tw-mask-bottom-to-color {
  syntax: "*";
  inherits: false;
  initial-value: transparent;
}
@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-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: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-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-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}
@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-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-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-mask-top-from-position {
  syntax: "*";
  inherits: false;
  initial-value: 0%;
}
@property --tw-mask-top-to-position {
  syntax: "*";
  inherits: false;
  initial-value: 100%;
}
@property --tw-mask-top-from-color {
  syntax: "*";
  inherits: false;
  initial-value: black;
}
@property --tw-mask-top-to-color {
  syntax: "*";
  inherits: false;
  initial-value: transparent;
}
@property --tw-mask-right-from-position {
  syntax: "*";
  inherits: false;
  initial-value: 0%;
}
@property --tw-mask-right-to-position {
  syntax: "*";
  inherits: false;
  initial-value: 100%;
}
@property --tw-mask-right-from-color {
  syntax: "*";
  inherits: false;
  initial-value: black;
}
@property --tw-mask-right-to-color {
  syntax: "*";
  inherits: false;
  initial-value: transparent;
}
@property --tw-mask-left-from-position {
  syntax: "*";
  inherits: false;
  initial-value: 0%;
}
@property --tw-mask-left-to-position {
  syntax: "*";
  inherits: false;
  initial-value: 100%;
}
@property --tw-mask-left-from-color {
  syntax: "*";
  inherits: false;
  initial-value: black;
}
@property --tw-mask-left-to-color {
  syntax: "*";
  inherits: false;
  initial-value: transparent;
}
@property --tw-text-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-text-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-border-spacing-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-spacing-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@keyframes spin-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes bar-loader {
  0%, 80%, 100% {
    height: 1.5rem;
  }
  40% {
    height: 0.5rem;
  }
}
@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-mask-linear: linear-gradient(#fff, #fff);
      --tw-mask-radial: linear-gradient(#fff, #fff);
      --tw-mask-conic: linear-gradient(#fff, #fff);
      --tw-mask-left: linear-gradient(#fff, #fff);
      --tw-mask-right: linear-gradient(#fff, #fff);
      --tw-mask-bottom: linear-gradient(#fff, #fff);
      --tw-mask-top: linear-gradient(#fff, #fff);
      --tw-mask-bottom-from-position: 0%;
      --tw-mask-bottom-to-position: 100%;
      --tw-mask-bottom-from-color: black;
      --tw-mask-bottom-to-color: transparent;
      --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-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-font-weight: initial;
      --tw-border-style: solid;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --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-outline-style: solid;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-leading: initial;
      --tw-content: "";
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --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-space-y-reverse: 0;
      --tw-divide-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-mask-top-from-position: 0%;
      --tw-mask-top-to-position: 100%;
      --tw-mask-top-from-color: black;
      --tw-mask-top-to-color: transparent;
      --tw-mask-right-from-position: 0%;
      --tw-mask-right-to-position: 100%;
      --tw-mask-right-from-color: black;
      --tw-mask-right-to-color: transparent;
      --tw-mask-left-from-position: 0%;
      --tw-mask-left-to-position: 100%;
      --tw-mask-left-from-color: black;
      --tw-mask-left-to-color: transparent;
      --tw-text-shadow-color: initial;
      --tw-text-shadow-alpha: 100%;
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --border-angle: 0deg;
    }
  }
}