/* 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{--un-bg-opacity:100%;--un-border-opacity:100%;--un-ring-offset-opacity:100%;--un-ring-opacity:100%;--un-space-x-reverse:initial;--un-space-y-reverse:initial;--un-text-opacity:100%;}}
@property --un-text-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
@property --un-border-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
@property --un-ring-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
@property --un-ring-offset-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
@property --un-inset-ring-color{syntax:"*";inherits:false;}
@property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-inset-shadow-color{syntax:"*";inherits:false;}
@property --un-ring-color{syntax:"*";inherits:false;}
@property --un-ring-inset{syntax:"*";inherits:false;}
@property --un-ring-offset-color{syntax:"*";inherits:false;}
@property --un-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0px;}
@property --un-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-shadow-color{syntax:"*";inherits:false;}
@property --un-blur{syntax:"*";inherits:false;}
@property --un-brightness{syntax:"*";inherits:false;}
@property --un-contrast{syntax:"*";inherits:false;}
@property --un-drop-shadow{syntax:"*";inherits:false;}
@property --un-grayscale{syntax:"*";inherits:false;}
@property --un-hue-rotate{syntax:"*";inherits:false;}
@property --un-invert{syntax:"*";inherits:false;}
@property --un-saturate{syntax:"*";inherits:false;}
@property --un-sepia{syntax:"*";inherits:false;}
@property --un-space-y-reverse{syntax:"*";inherits:false;initial-value:0;}
@property --un-space-x-reverse{syntax:"*";inherits:false;initial-value:0;}
/* layer: theme */
:root, :host {
--colors-amber-100: oklch(96.2% 0.059 95.617);
--colors-amber-200: oklch(92.4% 0.12 95.746);
--colors-amber-300: oklch(87.9% 0.169 91.605);
--colors-amber-400: oklch(82.8% 0.189 84.429);
--colors-amber-500: oklch(76.9% 0.188 70.08);
--colors-amber-600: oklch(66.6% 0.179 58.318);
--colors-amber-700: oklch(55.5% 0.163 48.998);
--colors-amber-800: oklch(47.3% 0.137 46.201);
--colors-blue-100: oklch(93.2% 0.032 255.585);
--colors-blue-200: oklch(88.2% 0.059 254.128);
--colors-blue-300: oklch(80.9% 0.105 251.813);
--colors-blue-400: oklch(70.7% 0.165 254.624);
--colors-blue-500: oklch(62.3% 0.214 259.815);
--colors-blue-600: oklch(54.6% 0.245 262.881);
--colors-blue-800: oklch(42.4% 0.199 265.638);
--colors-cyan-100: oklch(95.6% 0.045 203.388);
--colors-cyan-200: oklch(91.7% 0.08 205.041);
--colors-cyan-300: oklch(86.5% 0.127 207.078);
--colors-cyan-400: oklch(78.9% 0.154 211.53);
--colors-cyan-500: oklch(71.5% 0.143 215.221);
--colors-cyan-600: oklch(60.9% 0.126 221.723);
--colors-cyan-800: oklch(45% 0.085 224.283);
--colors-emerald-100: oklch(95% 0.052 163.051);
--colors-emerald-200: oklch(90.5% 0.093 164.15);
--colors-emerald-300: oklch(84.5% 0.143 164.978);
--colors-emerald-400: oklch(76.5% 0.177 163.223);
--colors-emerald-500: oklch(69.6% 0.17 162.48);
--colors-emerald-600: oklch(59.6% 0.145 163.225);
--colors-emerald-800: oklch(43.2% 0.095 166.913);
--colors-fuchsia-100: oklch(95.2% 0.037 318.852);
--colors-fuchsia-200: oklch(90.3% 0.076 319.62);
--colors-fuchsia-300: oklch(83.3% 0.145 321.434);
--colors-fuchsia-400: oklch(74% 0.238 322.16);
--colors-fuchsia-500: oklch(66.7% 0.295 322.15);
--colors-fuchsia-600: oklch(59.1% 0.293 322.896);
--colors-fuchsia-800: oklch(45.2% 0.211 324.591);
--colors-gray-100: oklch(96.7% 0.003 264.542);
--colors-gray-200: oklch(92.8% 0.006 264.531);
--colors-gray-300: oklch(87.2% 0.01 258.338);
--colors-gray-400: oklch(70.7% 0.022 261.325);
--colors-gray-50: oklch(98.5% 0.002 247.839);
--colors-gray-500: oklch(55.1% 0.027 264.364);
--colors-gray-600: oklch(44.6% 0.03 256.802);
--colors-gray-700: oklch(37.3% 0.034 259.733);
--colors-gray-800: oklch(27.8% 0.033 256.848);
--colors-gray-900: oklch(21% 0.034 264.665);
--colors-green-100: oklch(96.2% 0.044 156.743);
--colors-green-200: oklch(92.5% 0.084 155.995);
--colors-green-300: oklch(87.1% 0.15 154.449);
--colors-green-400: oklch(79.2% 0.209 151.711);
--colors-green-500: oklch(72.3% 0.219 149.579);
--colors-green-600: oklch(62.7% 0.194 149.214);
--colors-green-800: oklch(44.8% 0.119 151.328);
--colors-indigo-100: oklch(93% 0.034 272.788);
--colors-indigo-200: oklch(87% 0.065 274.039);
--colors-indigo-300: oklch(78.5% 0.115 274.713);
--colors-indigo-400: oklch(67.3% 0.182 276.935);
--colors-indigo-500: oklch(58.5% 0.233 277.117);
--colors-indigo-600: oklch(51.1% 0.262 276.966);
--colors-indigo-800: oklch(39.8% 0.195 277.366);
--colors-lime-100: oklch(96.7% 0.067 122.328);
--colors-lime-200: oklch(93.8% 0.127 124.321);
--colors-lime-300: oklch(89.7% 0.196 126.665);
--colors-lime-400: oklch(84.1% 0.238 128.85);
--colors-lime-500: oklch(76.8% 0.233 130.85);
--colors-lime-600: oklch(64.8% 0.2 131.684);
--colors-lime-700: oklch(53.2% 0.157 131.589);
--colors-lime-800: oklch(45.3% 0.124 130.933);
--colors-orange-100: oklch(95.4% 0.038 75.164);
--colors-orange-200: oklch(90.1% 0.076 70.697);
--colors-orange-300: oklch(83.7% 0.128 66.29);
--colors-orange-400: oklch(75% 0.183 55.934);
--colors-orange-500: oklch(70.5% 0.213 47.604);
--colors-orange-600: oklch(64.6% 0.222 41.116);
--colors-orange-700: oklch(55.3% 0.195 38.402);
--colors-orange-800: oklch(47% 0.157 37.304);
--colors-pink-100: oklch(94.8% 0.028 342.258);
--colors-pink-200: oklch(89.9% 0.061 343.231);
--colors-pink-300: oklch(82.3% 0.12 346.018);
--colors-pink-400: oklch(71.8% 0.202 349.761);
--colors-pink-500: oklch(65.6% 0.241 354.308);
--colors-pink-600: oklch(59.2% 0.249 0.584);
--colors-pink-700: oklch(52.5% 0.223 3.958);
--colors-pink-800: oklch(45.9% 0.187 3.815);
--colors-purple-100: oklch(94.6% 0.033 307.174);
--colors-purple-200: oklch(90.2% 0.063 306.703);
--colors-purple-300: oklch(82.7% 0.119 306.383);
--colors-purple-400: oklch(71.4% 0.203 305.504);
--colors-purple-500: oklch(62.7% 0.265 303.9);
--colors-purple-600: oklch(55.8% 0.288 302.321);
--colors-purple-800: oklch(43.8% 0.218 303.724);
--colors-red-100: oklch(93.6% 0.032 17.717);
--colors-red-200: oklch(88.5% 0.062 18.334);
--colors-red-300: oklch(80.8% 0.114 19.571);
--colors-red-400: oklch(70.4% 0.191 22.216);
--colors-red-500: oklch(63.7% 0.237 25.331);
--colors-red-600: oklch(57.7% 0.245 27.325);
--colors-red-800: oklch(44.4% 0.177 26.899);
--colors-rose-100: oklch(94.1% 0.03 12.58);
--colors-rose-200: oklch(89.2% 0.058 10.001);
--colors-rose-300: oklch(81% 0.117 11.638);
--colors-rose-400: oklch(71.2% 0.194 13.428);
--colors-rose-500: oklch(64.5% 0.246 16.439);
--colors-rose-600: oklch(58.6% 0.253 17.585);
--colors-rose-700: oklch(51.4% 0.222 16.935);
--colors-rose-800: oklch(45.5% 0.188 13.697);
--colors-sky-100: oklch(95.1% 0.026 236.824);
--colors-sky-200: oklch(90.1% 0.058 230.902);
--colors-sky-300: oklch(82.8% 0.111 230.318);
--colors-sky-400: oklch(74.6% 0.16 232.661);
--colors-sky-500: oklch(68.5% 0.169 237.323);
--colors-sky-600: oklch(58.8% 0.158 241.966);
--colors-sky-800: oklch(44.3% 0.11 240.79);
--colors-teal-100: oklch(95.3% 0.051 180.801);
--colors-teal-200: oklch(91% 0.096 180.426);
--colors-teal-300: oklch(85.5% 0.138 181.071);
--colors-teal-400: oklch(77.7% 0.152 181.912);
--colors-teal-500: oklch(70.4% 0.14 182.503);
--colors-teal-600: oklch(60% 0.118 184.704);
--colors-teal-800: oklch(43.7% 0.078 188.216);
--colors-violet-100: oklch(94.3% 0.029 294.588);
--colors-violet-200: oklch(89.4% 0.057 293.283);
--colors-violet-300: oklch(81.1% 0.111 293.571);
--colors-violet-400: oklch(70.2% 0.183 293.541);
--colors-violet-500: oklch(60.6% 0.25 292.717);
--colors-violet-600: oklch(54.1% 0.281 293.009);
--colors-violet-800: oklch(43.2% 0.232 292.759);
--colors-white: #fff;
--colors-yellow-100: oklch(97.3% 0.071 103.193);
--colors-yellow-200: oklch(94.5% 0.129 101.54);
--colors-yellow-300: oklch(90.5% 0.182 98.111);
--colors-yellow-400: oklch(85.2% 0.199 91.936);
--colors-yellow-500: oklch(79.5% 0.184 86.047);
--colors-yellow-600: oklch(68.1% 0.162 75.834);
--colors-yellow-800: oklch(47.6% 0.114 61.907);
--container-xs: 20rem;
--default-transition-duration: 150ms;
--default-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1);
--fontWeight-medium: 500;
--fontWeight-normal: 400;
--fontWeight-semibold: 600;
--radius-DEFAULT: 0.25rem;
--radius-lg: 0.5rem;
--radius-md: 0.375rem;
--radius-none: 0;
--radius-sm: 0.25rem;
--radius-xl: 0.75rem;
--radius-xs: 0.125rem;
--spacing: 0.25rem;
--text-sm-fontSize: 0.875rem;
--text-sm-lineHeight: 1.25rem;
--tracking-normal: 0em;
}
/* layer: preflights */

:root {
color-scheme: light;
}

:root:where(.dark, [data-theme="dark"]) {
color-scheme: dark;
}

.slexkit-theme-uno,
.slexkit-theme-flowbite,
body.slexkit-theme-uno {
color-scheme: light;
--background: #fff;
--foreground: oklch(14.1% 0.005 285.823);
--card: #fff;
--card-foreground: oklch(14.1% 0.005 285.823);
--popover: #fff;
--popover-foreground: oklch(14.1% 0.005 285.823);
--primary: oklch(21% 0.006 285.885);
--primary-foreground: oklch(98.5% 0 0);
--secondary: oklch(96.7% 0.001 286.375);
--secondary-foreground: oklch(21% 0.006 285.885);
--muted: oklch(96.7% 0.001 286.375);
--muted-foreground: oklch(55.2% 0.016 285.938);
--accent: oklch(96.7% 0.001 286.375);
--accent-foreground: oklch(21% 0.006 285.885);
--info: oklch(48.8% 0.243 264.376);
--info-foreground: #fff;
--success: oklch(59.6% 0.145 163.225);
--success-foreground: #fff;
--warning: oklch(66.6% 0.179 58.318);
--warning-foreground: oklch(14.1% 0.005 285.823);
--destructive: oklch(57.7% 0.245 27.325);
--destructive-foreground: oklch(98.5% 0 0);
--border: oklch(92% 0.004 286.32);
--input: oklch(92% 0.004 286.32);
--ring: oklch(14.1% 0.005 285.823);
--radius: 0.5rem;
--slex-control-height: 2.25rem;
--slex-primary-50: oklch(98.5% 0 0);
--slex-primary-100: oklch(96.7% 0.001 286.375);
--slex-primary-200: oklch(92% 0.004 286.32);
--slex-primary-300: oklch(87.1% 0.006 286.286);
--slex-primary-400: oklch(70.5% 0.015 286.067);
--slex-primary-500: oklch(55.2% 0.016 285.938);
--slex-primary-600: oklch(44.2% 0.017 285.786);
--slex-primary-700: oklch(37% 0.013 285.805);
--slex-primary-800: oklch(27.4% 0.006 286.033);
--slex-primary-900: oklch(21% 0.006 285.885);
--slex-primary-950: oklch(14.1% 0.005 285.823);
}

:where(.dark, [data-theme="dark"]) .slexkit-theme-uno,
.slexkit-theme-uno:where(.dark, [data-theme="dark"]),
:where(.dark, [data-theme="dark"]) .slexkit-theme-flowbite,
.slexkit-theme-flowbite:where(.dark, [data-theme="dark"]),
:where(.dark, [data-theme="dark"]) body.slexkit-theme-uno,
body.slexkit-theme-uno:where(.dark, [data-theme="dark"]) {
color-scheme: dark;
--background: oklch(14.1% 0.005 285.823);
--foreground: oklch(98.5% 0 0);
--card: oklch(21% 0.006 285.885);
--card-foreground: oklch(98.5% 0 0);
--popover: oklch(21% 0.006 285.885);
--popover-foreground: oklch(98.5% 0 0);
--primary: oklch(98.5% 0 0);
--primary-foreground: oklch(14.1% 0.005 285.823);
--secondary: oklch(27.4% 0.006 286.033);
--secondary-foreground: oklch(98.5% 0 0);
--muted: oklch(27.4% 0.006 286.033);
--muted-foreground: oklch(70.5% 0.015 286.067);
--accent: oklch(27.4% 0.006 286.033);
--accent-foreground: oklch(98.5% 0 0);
--info: oklch(62.3% 0.214 259.815);
--info-foreground: oklch(14.1% 0.005 285.823);
--success: oklch(76.5% 0.177 163.223);
--success-foreground: oklch(14.1% 0.005 285.823);
--warning: oklch(82.8% 0.189 84.429);
--warning-foreground: oklch(14.1% 0.005 285.823);
--destructive: oklch(70.4% 0.191 22.216);
--destructive-foreground: oklch(14.1% 0.005 285.823);
--border: oklch(27.4% 0.006 286.033);
--input: oklch(37% 0.013 285.805);
--ring: oklch(87.1% 0.006 286.286);
--radius: 0.5rem;
--slex-control-height: 2.25rem;
--slex-primary-50: oklch(98.5% 0 0);
--slex-primary-100: oklch(96.7% 0.001 286.375);
--slex-primary-200: oklch(92% 0.004 286.32);
--slex-primary-300: oklch(87.1% 0.006 286.286);
--slex-primary-400: oklch(70.5% 0.015 286.067);
--slex-primary-500: oklch(55.2% 0.016 285.938);
--slex-primary-600: oklch(44.2% 0.017 285.786);
--slex-primary-700: oklch(37% 0.013 285.805);
--slex-primary-800: oklch(27.4% 0.006 286.033);
--slex-primary-900: oklch(21% 0.006 285.885);
--slex-primary-950: oklch(14.1% 0.005 285.823);
}

/* layer: shortcuts */
.site-example-desc{font-size:13px;color:color-mix(in srgb, var(--muted-foreground) var(--un-text-opacity), transparent) /* var(--muted-foreground) */;margin-top:calc(var(--spacing) * 2);}
.site-example-title{font-size:15px;--un-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal);--un-font-weight:var(--fontWeight-semibold);font-weight:var(--fontWeight-semibold);margin:calc(var(--spacing) * 0);}
.ui-button{font-size:var(--text-sm-fontSize);line-height:var(--un-leading, var(--text-sm-lineHeight));--un-font-weight:var(--fontWeight-medium);font-weight:var(--fontWeight-medium);padding-inline:calc(var(--spacing) * 3);-webkit-appearance:none;appearance:none;border-width:1px;border-color:transparent;border-radius:var(--radius-md);--un-border-style:solid;border-style:solid;text-decoration:none;display:inline-flex;height:calc(var(--spacing) * 9);white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));align-items:center;justify-content:center;}
.site-example-card{color:color-mix(in srgb, var(--card-foreground) var(--un-text-opacity), transparent) /* var(--card-foreground) */;padding:calc(var(--spacing) * 4);border-width:1px;border-color:color-mix(in srgb, var(--border) var(--un-border-opacity), transparent) /* var(--border) */;border-radius:var(--radius-lg);--un-border-style:solid;border-style:solid;background-color:color-mix(in srgb, var(--card) var(--un-bg-opacity), transparent) /* var(--card) */;display:flex;flex-direction:column;min-height:92px;cursor:pointer;--un-shadow:0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
.ui-button-outline{color:color-mix(in srgb, var(--foreground) var(--un-text-opacity), transparent) /* var(--foreground) */;border-width:1px;border-color:color-mix(in srgb, var(--input) var(--un-border-opacity), transparent) /* var(--input) */;background-color:color-mix(in srgb, var(--background) var(--un-bg-opacity), transparent) /* var(--background) */;--un-shadow:0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.ui-button-primary{color:color-mix(in srgb, var(--primary-foreground) var(--un-text-opacity), transparent) /* var(--primary-foreground) */;border-width:1px;border-color:color-mix(in srgb, var(--primary) var(--un-border-opacity), transparent) /* var(--primary) */;background-color:color-mix(in srgb, var(--primary) var(--un-bg-opacity), transparent) /* var(--primary) */;--un-shadow:0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.ui-button-secondary{color:color-mix(in srgb, var(--secondary-foreground) var(--un-text-opacity), transparent) /* var(--secondary-foreground) */;background-color:color-mix(in srgb, var(--secondary) var(--un-bg-opacity), transparent) /* var(--secondary) */;--un-shadow:0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.site-example-card:hover{color:color-mix(in srgb, var(--accent-foreground) var(--un-text-opacity), transparent) /* var(--accent-foreground) */;background-color:color-mix(in srgb, var(--accent) var(--un-bg-opacity), transparent) /* var(--accent) */;}
.ui-button-outline:hover{color:color-mix(in srgb, var(--accent-foreground) var(--un-text-opacity), transparent) /* var(--accent-foreground) */;background-color:color-mix(in srgb, var(--accent) var(--un-bg-opacity), transparent) /* var(--accent) */;}
.ui-button-secondary:hover{color:color-mix(in srgb, var(--accent-foreground) var(--un-text-opacity), transparent) /* var(--accent-foreground) */;background-color:color-mix(in srgb, var(--accent) var(--un-bg-opacity), transparent) /* var(--accent) */;}
.ui-button:focus-visible{--un-outline-style:none;outline-style:none;--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(2px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:color-mix(in srgb, var(--ring) var(--un-ring-opacity), transparent) /* var(--ring) */;--un-ring-offset-width:2px;--un-ring-offset-shadow:var(--un-ring-inset,) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-offset-color:color-mix(in srgb, var(--background) var(--un-ring-offset-opacity), transparent) /* var(--background) */;}
.ui-button-primary:hover{opacity:90%;}
.ui-button:disabled{opacity:50%;pointer-events:none;}
.container{width:100%;}
@media (min-width: 40rem){
.container{max-width:40rem;}
}
@media (min-width: 48rem){
.container{max-width:48rem;}
}
@media (min-width: 64rem){
.container{max-width:64rem;}
}
@media (min-width: 80rem){
.container{max-width:80rem;}
}
@media (min-width: 96rem){
.container{max-width:96rem;}
}
/* layer: default */
.text-sm{font-size:var(--text-sm-fontSize);line-height:var(--un-leading, var(--text-sm-lineHeight));}
.dark .dark\:text-amber-200{color:color-mix(in srgb, var(--colors-amber-200) var(--un-text-opacity), transparent) /* oklch(92.4% 0.12 95.746) */;}
.dark .dark\:text-blue-200{color:color-mix(in srgb, var(--colors-blue-200) var(--un-text-opacity), transparent) /* oklch(88.2% 0.059 254.128) */;}
.dark .dark\:text-cyan-200{color:color-mix(in srgb, var(--colors-cyan-200) var(--un-text-opacity), transparent) /* oklch(91.7% 0.08 205.041) */;}
.dark .dark\:text-emerald-200{color:color-mix(in srgb, var(--colors-emerald-200) var(--un-text-opacity), transparent) /* oklch(90.5% 0.093 164.15) */;}
.dark .dark\:text-fuchsia-200{color:color-mix(in srgb, var(--colors-fuchsia-200) var(--un-text-opacity), transparent) /* oklch(90.3% 0.076 319.62) */;}
.dark .dark\:text-gray-200{color:color-mix(in srgb, var(--colors-gray-200) var(--un-text-opacity), transparent) /* oklch(92.8% 0.006 264.531) */;}
.dark .dark\:text-gray-400,
.text-gray-400{color:color-mix(in srgb, var(--colors-gray-400) var(--un-text-opacity), transparent) /* oklch(70.7% 0.022 261.325) */;}
.dark .dark\:text-gray-500,
.text-gray-500{color:color-mix(in srgb, var(--colors-gray-500) var(--un-text-opacity), transparent) /* oklch(55.1% 0.027 264.364) */;}
.dark .dark\:text-green-200{color:color-mix(in srgb, var(--colors-green-200) var(--un-text-opacity), transparent) /* oklch(92.5% 0.084 155.995) */;}
.dark .dark\:text-indigo-200{color:color-mix(in srgb, var(--colors-indigo-200) var(--un-text-opacity), transparent) /* oklch(87% 0.065 274.039) */;}
.dark .dark\:text-lime-200{color:color-mix(in srgb, var(--colors-lime-200) var(--un-text-opacity), transparent) /* oklch(93.8% 0.127 124.321) */;}
.dark .dark\:text-orange-200{color:color-mix(in srgb, var(--colors-orange-200) var(--un-text-opacity), transparent) /* oklch(90.1% 0.076 70.697) */;}
.dark .dark\:text-pink-200{color:color-mix(in srgb, var(--colors-pink-200) var(--un-text-opacity), transparent) /* oklch(89.9% 0.061 343.231) */;}
.dark .dark\:text-primary-200{color:color-mix(in srgb, var(--slex-primary-200) var(--un-text-opacity), transparent) /* var(--slex-primary-200) */;}
.dark .dark\:text-primary-400{color:color-mix(in srgb, var(--slex-primary-400) var(--un-text-opacity), transparent) /* var(--slex-primary-400) */;}
.dark .dark\:text-primary-500,
.text-primary-500{color:color-mix(in srgb, var(--slex-primary-500) var(--un-text-opacity), transparent) /* var(--slex-primary-500) */;}
.dark .dark\:text-purple-200{color:color-mix(in srgb, var(--colors-purple-200) var(--un-text-opacity), transparent) /* oklch(90.2% 0.063 306.703) */;}
.dark .dark\:text-red-200{color:color-mix(in srgb, var(--colors-red-200) var(--un-text-opacity), transparent) /* oklch(88.5% 0.062 18.334) */;}
.dark .dark\:text-rose-200{color:color-mix(in srgb, var(--colors-rose-200) var(--un-text-opacity), transparent) /* oklch(89.2% 0.058 10.001) */;}
.dark .dark\:text-sky-200{color:color-mix(in srgb, var(--colors-sky-200) var(--un-text-opacity), transparent) /* oklch(90.1% 0.058 230.902) */;}
.dark .dark\:text-teal-200{color:color-mix(in srgb, var(--colors-teal-200) var(--un-text-opacity), transparent) /* oklch(91% 0.096 180.426) */;}
.dark .dark\:text-violet-200{color:color-mix(in srgb, var(--colors-violet-200) var(--un-text-opacity), transparent) /* oklch(89.4% 0.057 293.283) */;}
.dark .dark\:text-white,
.text-white{color:color-mix(in srgb, var(--colors-white) var(--un-text-opacity), transparent) /* #fff */;}
.dark .dark\:text-yellow-200{color:color-mix(in srgb, var(--colors-yellow-200) var(--un-text-opacity), transparent) /* oklch(94.5% 0.129 101.54) */;}
.text-accent-foreground{color:color-mix(in srgb, var(--accent-foreground) var(--un-text-opacity), transparent) /* var(--accent-foreground) */;}
.text-amber-500{color:color-mix(in srgb, var(--colors-amber-500) var(--un-text-opacity), transparent) /* oklch(76.9% 0.188 70.08) */;}
.text-blue-500{color:color-mix(in srgb, var(--colors-blue-500) var(--un-text-opacity), transparent) /* oklch(62.3% 0.214 259.815) */;}
.text-cyan-500{color:color-mix(in srgb, var(--colors-cyan-500) var(--un-text-opacity), transparent) /* oklch(71.5% 0.143 215.221) */;}
.text-emerald-500{color:color-mix(in srgb, var(--colors-emerald-500) var(--un-text-opacity), transparent) /* oklch(69.6% 0.17 162.48) */;}
.text-fuchsia-500{color:color-mix(in srgb, var(--colors-fuchsia-500) var(--un-text-opacity), transparent) /* oklch(66.7% 0.295 322.15) */;}
.text-gray-800{color:color-mix(in srgb, var(--colors-gray-800) var(--un-text-opacity), transparent) /* oklch(27.8% 0.033 256.848) */;}
.text-gray-900{color:color-mix(in srgb, var(--colors-gray-900) var(--un-text-opacity), transparent) /* oklch(21% 0.034 264.665) */;}
.text-green-500{color:color-mix(in srgb, var(--colors-green-500) var(--un-text-opacity), transparent) /* oklch(72.3% 0.219 149.579) */;}
.text-indigo-500{color:color-mix(in srgb, var(--colors-indigo-500) var(--un-text-opacity), transparent) /* oklch(58.5% 0.233 277.117) */;}
.text-lime-500{color:color-mix(in srgb, var(--colors-lime-500) var(--un-text-opacity), transparent) /* oklch(76.8% 0.233 130.85) */;}
.text-orange-500{color:color-mix(in srgb, var(--colors-orange-500) var(--un-text-opacity), transparent) /* oklch(70.5% 0.213 47.604) */;}
.text-pink-500{color:color-mix(in srgb, var(--colors-pink-500) var(--un-text-opacity), transparent) /* oklch(65.6% 0.241 354.308) */;}
.text-primary-600{color:color-mix(in srgb, var(--slex-primary-600) var(--un-text-opacity), transparent) /* var(--slex-primary-600) */;}
.text-purple-500{color:color-mix(in srgb, var(--colors-purple-500) var(--un-text-opacity), transparent) /* oklch(62.7% 0.265 303.9) */;}
.text-red-500{color:color-mix(in srgb, var(--colors-red-500) var(--un-text-opacity), transparent) /* oklch(63.7% 0.237 25.331) */;}
.text-rose-500{color:color-mix(in srgb, var(--colors-rose-500) var(--un-text-opacity), transparent) /* oklch(64.5% 0.246 16.439) */;}
.text-sky-500{color:color-mix(in srgb, var(--colors-sky-500) var(--un-text-opacity), transparent) /* oklch(68.5% 0.169 237.323) */;}
.text-teal-500{color:color-mix(in srgb, var(--colors-teal-500) var(--un-text-opacity), transparent) /* oklch(70.4% 0.14 182.503) */;}
.text-violet-500{color:color-mix(in srgb, var(--colors-violet-500) var(--un-text-opacity), transparent) /* oklch(60.6% 0.25 292.717) */;}
.text-yellow-500{color:color-mix(in srgb, var(--colors-yellow-500) var(--un-text-opacity), transparent) /* oklch(79.5% 0.184 86.047) */;}
.dark .dark\:hover\:text-amber-300:hover{color:color-mix(in srgb, var(--colors-amber-300) var(--un-text-opacity), transparent) /* oklch(87.9% 0.169 91.605) */;}
.dark .dark\:hover\:text-amber-500:hover{color:color-mix(in srgb, var(--colors-amber-500) var(--un-text-opacity), transparent) /* oklch(76.9% 0.188 70.08) */;}
.dark .dark\:hover\:text-blue-300:hover{color:color-mix(in srgb, var(--colors-blue-300) var(--un-text-opacity), transparent) /* oklch(80.9% 0.105 251.813) */;}
.dark .dark\:hover\:text-blue-500:hover{color:color-mix(in srgb, var(--colors-blue-500) var(--un-text-opacity), transparent) /* oklch(62.3% 0.214 259.815) */;}
.dark .dark\:hover\:text-cyan-300:hover{color:color-mix(in srgb, var(--colors-cyan-300) var(--un-text-opacity), transparent) /* oklch(86.5% 0.127 207.078) */;}
.dark .dark\:hover\:text-cyan-500:hover{color:color-mix(in srgb, var(--colors-cyan-500) var(--un-text-opacity), transparent) /* oklch(71.5% 0.143 215.221) */;}
.dark .dark\:hover\:text-emerald-300:hover{color:color-mix(in srgb, var(--colors-emerald-300) var(--un-text-opacity), transparent) /* oklch(84.5% 0.143 164.978) */;}
.dark .dark\:hover\:text-emerald-500:hover{color:color-mix(in srgb, var(--colors-emerald-500) var(--un-text-opacity), transparent) /* oklch(69.6% 0.17 162.48) */;}
.dark .dark\:hover\:text-fuchsia-300:hover{color:color-mix(in srgb, var(--colors-fuchsia-300) var(--un-text-opacity), transparent) /* oklch(83.3% 0.145 321.434) */;}
.dark .dark\:hover\:text-fuchsia-500:hover{color:color-mix(in srgb, var(--colors-fuchsia-500) var(--un-text-opacity), transparent) /* oklch(66.7% 0.295 322.15) */;}
.dark .dark\:hover\:text-gray-300:hover{color:color-mix(in srgb, var(--colors-gray-300) var(--un-text-opacity), transparent) /* oklch(87.2% 0.01 258.338) */;}
.dark .dark\:hover\:text-gray-500:hover{color:color-mix(in srgb, var(--colors-gray-500) var(--un-text-opacity), transparent) /* oklch(55.1% 0.027 264.364) */;}
.dark .dark\:hover\:text-green-300:hover{color:color-mix(in srgb, var(--colors-green-300) var(--un-text-opacity), transparent) /* oklch(87.1% 0.15 154.449) */;}
.dark .dark\:hover\:text-green-500:hover{color:color-mix(in srgb, var(--colors-green-500) var(--un-text-opacity), transparent) /* oklch(72.3% 0.219 149.579) */;}
.dark .dark\:hover\:text-indigo-300:hover{color:color-mix(in srgb, var(--colors-indigo-300) var(--un-text-opacity), transparent) /* oklch(78.5% 0.115 274.713) */;}
.dark .dark\:hover\:text-indigo-500:hover{color:color-mix(in srgb, var(--colors-indigo-500) var(--un-text-opacity), transparent) /* oklch(58.5% 0.233 277.117) */;}
.dark .dark\:hover\:text-lime-300:hover{color:color-mix(in srgb, var(--colors-lime-300) var(--un-text-opacity), transparent) /* oklch(89.7% 0.196 126.665) */;}
.dark .dark\:hover\:text-lime-500:hover{color:color-mix(in srgb, var(--colors-lime-500) var(--un-text-opacity), transparent) /* oklch(76.8% 0.233 130.85) */;}
.dark .dark\:hover\:text-orange-300:hover{color:color-mix(in srgb, var(--colors-orange-300) var(--un-text-opacity), transparent) /* oklch(83.7% 0.128 66.29) */;}
.dark .dark\:hover\:text-orange-500:hover{color:color-mix(in srgb, var(--colors-orange-500) var(--un-text-opacity), transparent) /* oklch(70.5% 0.213 47.604) */;}
.dark .dark\:hover\:text-pink-300:hover{color:color-mix(in srgb, var(--colors-pink-300) var(--un-text-opacity), transparent) /* oklch(82.3% 0.12 346.018) */;}
.dark .dark\:hover\:text-pink-500:hover{color:color-mix(in srgb, var(--colors-pink-500) var(--un-text-opacity), transparent) /* oklch(65.6% 0.241 354.308) */;}
.dark .dark\:hover\:text-primary-300:hover{color:color-mix(in srgb, var(--slex-primary-300) var(--un-text-opacity), transparent) /* var(--slex-primary-300) */;}
.dark .dark\:hover\:text-primary-500:hover{color:color-mix(in srgb, var(--slex-primary-500) var(--un-text-opacity), transparent) /* var(--slex-primary-500) */;}
.dark .dark\:hover\:text-purple-300:hover{color:color-mix(in srgb, var(--colors-purple-300) var(--un-text-opacity), transparent) /* oklch(82.7% 0.119 306.383) */;}
.dark .dark\:hover\:text-purple-500:hover{color:color-mix(in srgb, var(--colors-purple-500) var(--un-text-opacity), transparent) /* oklch(62.7% 0.265 303.9) */;}
.dark .dark\:hover\:text-red-300:hover{color:color-mix(in srgb, var(--colors-red-300) var(--un-text-opacity), transparent) /* oklch(80.8% 0.114 19.571) */;}
.dark .dark\:hover\:text-red-500:hover{color:color-mix(in srgb, var(--colors-red-500) var(--un-text-opacity), transparent) /* oklch(63.7% 0.237 25.331) */;}
.dark .dark\:hover\:text-rose-300:hover{color:color-mix(in srgb, var(--colors-rose-300) var(--un-text-opacity), transparent) /* oklch(81% 0.117 11.638) */;}
.dark .dark\:hover\:text-rose-500:hover{color:color-mix(in srgb, var(--colors-rose-500) var(--un-text-opacity), transparent) /* oklch(64.5% 0.246 16.439) */;}
.dark .dark\:hover\:text-sky-300:hover{color:color-mix(in srgb, var(--colors-sky-300) var(--un-text-opacity), transparent) /* oklch(82.8% 0.111 230.318) */;}
.dark .dark\:hover\:text-sky-500:hover{color:color-mix(in srgb, var(--colors-sky-500) var(--un-text-opacity), transparent) /* oklch(68.5% 0.169 237.323) */;}
.dark .dark\:hover\:text-teal-300:hover{color:color-mix(in srgb, var(--colors-teal-300) var(--un-text-opacity), transparent) /* oklch(85.5% 0.138 181.071) */;}
.dark .dark\:hover\:text-teal-500:hover{color:color-mix(in srgb, var(--colors-teal-500) var(--un-text-opacity), transparent) /* oklch(70.4% 0.14 182.503) */;}
.dark .dark\:hover\:text-violet-300:hover{color:color-mix(in srgb, var(--colors-violet-300) var(--un-text-opacity), transparent) /* oklch(81.1% 0.111 293.571) */;}
.dark .dark\:hover\:text-violet-500:hover{color:color-mix(in srgb, var(--colors-violet-500) var(--un-text-opacity), transparent) /* oklch(60.6% 0.25 292.717) */;}
.dark .dark\:hover\:text-white:hover{color:color-mix(in srgb, var(--colors-white) var(--un-text-opacity), transparent) /* #fff */;}
.dark .dark\:hover\:text-yellow-300:hover{color:color-mix(in srgb, var(--colors-yellow-300) var(--un-text-opacity), transparent) /* oklch(90.5% 0.182 98.111) */;}
.dark .dark\:hover\:text-yellow-500:hover{color:color-mix(in srgb, var(--colors-yellow-500) var(--un-text-opacity), transparent) /* oklch(79.5% 0.184 86.047) */;}
.hover\:text-amber-600:hover{color:color-mix(in srgb, var(--colors-amber-600) var(--un-text-opacity), transparent) /* oklch(66.6% 0.179 58.318) */;}
.hover\:text-blue-600:hover{color:color-mix(in srgb, var(--colors-blue-600) var(--un-text-opacity), transparent) /* oklch(54.6% 0.245 262.881) */;}
.hover\:text-cyan-600:hover{color:color-mix(in srgb, var(--colors-cyan-600) var(--un-text-opacity), transparent) /* oklch(60.9% 0.126 221.723) */;}
.hover\:text-emerald-600:hover{color:color-mix(in srgb, var(--colors-emerald-600) var(--un-text-opacity), transparent) /* oklch(59.6% 0.145 163.225) */;}
.hover\:text-fuchsia-600:hover{color:color-mix(in srgb, var(--colors-fuchsia-600) var(--un-text-opacity), transparent) /* oklch(59.1% 0.293 322.896) */;}
.hover\:text-gray-600:hover{color:color-mix(in srgb, var(--colors-gray-600) var(--un-text-opacity), transparent) /* oklch(44.6% 0.03 256.802) */;}
.hover\:text-gray-700:hover{color:color-mix(in srgb, var(--colors-gray-700) var(--un-text-opacity), transparent) /* oklch(37.3% 0.034 259.733) */;}
.hover\:text-gray-900:hover{color:color-mix(in srgb, var(--colors-gray-900) var(--un-text-opacity), transparent) /* oklch(21% 0.034 264.665) */;}
.hover\:text-green-600:hover{color:color-mix(in srgb, var(--colors-green-600) var(--un-text-opacity), transparent) /* oklch(62.7% 0.194 149.214) */;}
.hover\:text-indigo-600:hover{color:color-mix(in srgb, var(--colors-indigo-600) var(--un-text-opacity), transparent) /* oklch(51.1% 0.262 276.966) */;}
.hover\:text-lime-600:hover{color:color-mix(in srgb, var(--colors-lime-600) var(--un-text-opacity), transparent) /* oklch(64.8% 0.2 131.684) */;}
.hover\:text-orange-600:hover{color:color-mix(in srgb, var(--colors-orange-600) var(--un-text-opacity), transparent) /* oklch(64.6% 0.222 41.116) */;}
.hover\:text-pink-600:hover{color:color-mix(in srgb, var(--colors-pink-600) var(--un-text-opacity), transparent) /* oklch(59.2% 0.249 0.584) */;}
.hover\:text-primary-600:hover{color:color-mix(in srgb, var(--slex-primary-600) var(--un-text-opacity), transparent) /* var(--slex-primary-600) */;}
.hover\:text-purple-600:hover{color:color-mix(in srgb, var(--colors-purple-600) var(--un-text-opacity), transparent) /* oklch(55.8% 0.288 302.321) */;}
.hover\:text-red-600:hover{color:color-mix(in srgb, var(--colors-red-600) var(--un-text-opacity), transparent) /* oklch(57.7% 0.245 27.325) */;}
.hover\:text-rose-600:hover{color:color-mix(in srgb, var(--colors-rose-600) var(--un-text-opacity), transparent) /* oklch(58.6% 0.253 17.585) */;}
.hover\:text-sky-600:hover{color:color-mix(in srgb, var(--colors-sky-600) var(--un-text-opacity), transparent) /* oklch(58.8% 0.158 241.966) */;}
.hover\:text-teal-600:hover{color:color-mix(in srgb, var(--colors-teal-600) var(--un-text-opacity), transparent) /* oklch(60% 0.118 184.704) */;}
.hover\:text-violet-600:hover{color:color-mix(in srgb, var(--colors-violet-600) var(--un-text-opacity), transparent) /* oklch(54.1% 0.281 293.009) */;}
.hover\:text-yellow-600:hover{color:color-mix(in srgb, var(--colors-yellow-600) var(--un-text-opacity), transparent) /* oklch(68.1% 0.162 75.834) */;}
.text-inherit{color:inherit;}
.font-medium{--un-font-weight:var(--fontWeight-medium);font-weight:var(--fontWeight-medium);}
.font-normal{--un-font-weight:var(--fontWeight-normal);font-weight:var(--fontWeight-normal);}
.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}
.m-0{margin:calc(var(--spacing) * 0);}
.m-0\.5{margin:calc(var(--spacing) * 0.5);}
.m1{margin:calc(var(--spacing) * 1);}
.-mx-1\.5{margin-inline:calc(var(--spacing) * -1.5);}
.-my-1\.5{margin-block:calc(var(--spacing) * -1.5);}
.-mb-px{margin-bottom:-1px;}
.ms{margin-inline-start:calc(var(--spacing) * 4);}
.ms-auto{margin-inline-start:auto;}
.mt-4{margin-top:calc(var(--spacing) * 4);}
.p-0\.5{padding:calc(var(--spacing) * 0.5);}
.p-1\.5{padding:calc(var(--spacing) * 1.5);}
.p-2\.5{padding:calc(var(--spacing) * 2.5);}
.p-4{padding:calc(var(--spacing) * 4);}
.p-5{padding:calc(var(--spacing) * 5);}
.p\[\"aria-label\"\]{padding:"aria-label";}
.px,
.px-4{padding-inline:calc(var(--spacing) * 4);}
.py{padding-block:calc(var(--spacing) * 4);}
.py-3{padding-block:calc(var(--spacing) * 3);}
.py-5{padding-block:calc(var(--spacing) * 5);}
.text-center{text-align:center;}
.text-left{text-align:left;}
.focus\:outline-hidden:focus{outline-style:none;}
.b,
.border{border-width:1px;}
.border-b{border-bottom-width:1px;}
.border-b-2{border-bottom-width:2px;}
.border-e{border-inline-end-width:1px;}
.border-l{border-left-width:1px;}
.border-s{border-inline-start-width:1px;}
.border-t,
.group:first-child .group-first\:border-t{border-top-width:1px;}
.border-gray-200{border-color:color-mix(in srgb, var(--colors-gray-200) var(--un-border-opacity), transparent) /* oklch(92.8% 0.006 264.531) */;}
.border-primary-600{border-color:color-mix(in srgb, var(--slex-primary-600) var(--un-border-opacity), transparent) /* var(--slex-primary-600) */;}
.border-transparent{border-color:transparent;}
.dark .dark\:border-gray-700{border-color:color-mix(in srgb, var(--colors-gray-700) var(--un-border-opacity), transparent) /* oklch(37.3% 0.034 259.733) */;}
.dark .dark\:border-primary-500{border-color:color-mix(in srgb, var(--slex-primary-500) var(--un-border-opacity), transparent) /* var(--slex-primary-500) */;}
.hover\:border-gray-300:hover{border-color:color-mix(in srgb, var(--colors-gray-300) var(--un-border-opacity), transparent) /* oklch(87.2% 0.01 258.338) */;}
.rounded{border-radius:var(--radius-DEFAULT);}
.rounded-lg{border-radius:var(--radius-lg);}
.rounded-none{border-radius:var(--radius-none);}
.rounded-sm{border-radius:var(--radius-sm);}
.rounded-xs{border-radius:var(--radius-xs);}
.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);}
.rounded-t-xl,
.group:first-child .group-first\:rounded-t-xl{border-top-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl);}
.group:first-child .group-first\:rounded-s-lg{border-end-start-radius:var(--radius-lg);border-start-start-radius:var(--radius-lg);}
.group:last-child .group-last\:rounded-e-lg{border-start-end-radius:var(--radius-lg);border-end-end-radius:var(--radius-lg);}
.border-inherit{--un-border-style:inherit;border-style:inherit;}
.bg-accent{background-color:color-mix(in srgb, var(--accent) var(--un-bg-opacity), transparent) /* var(--accent) */;}
.bg-amber-100{background-color:color-mix(in srgb, var(--colors-amber-100) var(--un-bg-opacity), transparent) /* oklch(96.2% 0.059 95.617) */;}
.bg-blue-100{background-color:color-mix(in srgb, var(--colors-blue-100) var(--un-bg-opacity), transparent) /* oklch(93.2% 0.032 255.585) */;}
.bg-cyan-100{background-color:color-mix(in srgb, var(--colors-cyan-100) var(--un-bg-opacity), transparent) /* oklch(95.6% 0.045 203.388) */;}
.bg-emerald-100{background-color:color-mix(in srgb, var(--colors-emerald-100) var(--un-bg-opacity), transparent) /* oklch(95% 0.052 163.051) */;}
.bg-fuchsia-100{background-color:color-mix(in srgb, var(--colors-fuchsia-100) var(--un-bg-opacity), transparent) /* oklch(95.2% 0.037 318.852) */;}
.bg-gray-100{background-color:color-mix(in srgb, var(--colors-gray-100) var(--un-bg-opacity), transparent) /* oklch(96.7% 0.003 264.542) */;}
.bg-gray-200{background-color:color-mix(in srgb, var(--colors-gray-200) var(--un-bg-opacity), transparent) /* oklch(92.8% 0.006 264.531) */;}
.bg-gray-50{background-color:color-mix(in srgb, var(--colors-gray-50) var(--un-bg-opacity), transparent) /* oklch(98.5% 0.002 247.839) */;}
.bg-green-100{background-color:color-mix(in srgb, var(--colors-green-100) var(--un-bg-opacity), transparent) /* oklch(96.2% 0.044 156.743) */;}
.bg-indigo-100{background-color:color-mix(in srgb, var(--colors-indigo-100) var(--un-bg-opacity), transparent) /* oklch(93% 0.034 272.788) */;}
.bg-inherit{background-color:inherit;}
.bg-lime-100{background-color:color-mix(in srgb, var(--colors-lime-100) var(--un-bg-opacity), transparent) /* oklch(96.7% 0.067 122.328) */;}
.bg-orange-100{background-color:color-mix(in srgb, var(--colors-orange-100) var(--un-bg-opacity), transparent) /* oklch(95.4% 0.038 75.164) */;}
.bg-pink-100{background-color:color-mix(in srgb, var(--colors-pink-100) var(--un-bg-opacity), transparent) /* oklch(94.8% 0.028 342.258) */;}
.bg-primary-100{background-color:color-mix(in srgb, var(--slex-primary-100) var(--un-bg-opacity), transparent) /* var(--slex-primary-100) */;}
.bg-primary-600{background-color:color-mix(in srgb, var(--slex-primary-600) var(--un-bg-opacity), transparent) /* var(--slex-primary-600) */;}
.bg-purple-100{background-color:color-mix(in srgb, var(--colors-purple-100) var(--un-bg-opacity), transparent) /* oklch(94.6% 0.033 307.174) */;}
.bg-red-100{background-color:color-mix(in srgb, var(--colors-red-100) var(--un-bg-opacity), transparent) /* oklch(93.6% 0.032 17.717) */;}
.bg-rose-100{background-color:color-mix(in srgb, var(--colors-rose-100) var(--un-bg-opacity), transparent) /* oklch(94.1% 0.03 12.58) */;}
.bg-sky-100{background-color:color-mix(in srgb, var(--colors-sky-100) var(--un-bg-opacity), transparent) /* oklch(95.1% 0.026 236.824) */;}
.bg-teal-100{background-color:color-mix(in srgb, var(--colors-teal-100) var(--un-bg-opacity), transparent) /* oklch(95.3% 0.051 180.801) */;}
.bg-transparent{background-color:transparent;}
.bg-violet-100{background-color:color-mix(in srgb, var(--colors-violet-100) var(--un-bg-opacity), transparent) /* oklch(94.3% 0.029 294.588) */;}
.bg-white{background-color:color-mix(in srgb, var(--colors-white) var(--un-bg-opacity), transparent) /* #fff */;}
.bg-yellow-100{background-color:color-mix(in srgb, var(--colors-yellow-100) var(--un-bg-opacity), transparent) /* oklch(97.3% 0.071 103.193) */;}
.dark .dark\:bg-amber-700{background-color:color-mix(in srgb, var(--colors-amber-700) var(--un-bg-opacity), transparent) /* oklch(55.5% 0.163 48.998) */;}
.dark .dark\:bg-blue-800{background-color:color-mix(in srgb, var(--colors-blue-800) var(--un-bg-opacity), transparent) /* oklch(42.4% 0.199 265.638) */;}
.dark .dark\:bg-cyan-800{background-color:color-mix(in srgb, var(--colors-cyan-800) var(--un-bg-opacity), transparent) /* oklch(45% 0.085 224.283) */;}
.dark .dark\:bg-emerald-800{background-color:color-mix(in srgb, var(--colors-emerald-800) var(--un-bg-opacity), transparent) /* oklch(43.2% 0.095 166.913) */;}
.dark .dark\:bg-fuchsia-800{background-color:color-mix(in srgb, var(--colors-fuchsia-800) var(--un-bg-opacity), transparent) /* oklch(45.2% 0.211 324.591) */;}
.dark .dark\:bg-gray-700{background-color:color-mix(in srgb, var(--colors-gray-700) var(--un-bg-opacity), transparent) /* oklch(37.3% 0.034 259.733) */;}
.dark .dark\:bg-gray-800{background-color:color-mix(in srgb, var(--colors-gray-800) var(--un-bg-opacity), transparent) /* oklch(27.8% 0.033 256.848) */;}
.dark .dark\:bg-green-800{background-color:color-mix(in srgb, var(--colors-green-800) var(--un-bg-opacity), transparent) /* oklch(44.8% 0.119 151.328) */;}
.dark .dark\:bg-indigo-800{background-color:color-mix(in srgb, var(--colors-indigo-800) var(--un-bg-opacity), transparent) /* oklch(39.8% 0.195 277.366) */;}
.dark .dark\:bg-lime-700{background-color:color-mix(in srgb, var(--colors-lime-700) var(--un-bg-opacity), transparent) /* oklch(53.2% 0.157 131.589) */;}
.dark .dark\:bg-orange-700{background-color:color-mix(in srgb, var(--colors-orange-700) var(--un-bg-opacity), transparent) /* oklch(55.3% 0.195 38.402) */;}
.dark .dark\:bg-pink-700{background-color:color-mix(in srgb, var(--colors-pink-700) var(--un-bg-opacity), transparent) /* oklch(52.5% 0.223 3.958) */;}
.dark .dark\:bg-primary-800{background-color:color-mix(in srgb, var(--slex-primary-800) var(--un-bg-opacity), transparent) /* var(--slex-primary-800) */;}
.dark .dark\:bg-purple-800{background-color:color-mix(in srgb, var(--colors-purple-800) var(--un-bg-opacity), transparent) /* oklch(43.8% 0.218 303.724) */;}
.dark .dark\:bg-red-800{background-color:color-mix(in srgb, var(--colors-red-800) var(--un-bg-opacity), transparent) /* oklch(44.4% 0.177 26.899) */;}
.dark .dark\:bg-rose-700{background-color:color-mix(in srgb, var(--colors-rose-700) var(--un-bg-opacity), transparent) /* oklch(51.4% 0.222 16.935) */;}
.dark .dark\:bg-sky-800{background-color:color-mix(in srgb, var(--colors-sky-800) var(--un-bg-opacity), transparent) /* oklch(44.3% 0.11 240.79) */;}
.dark .dark\:bg-teal-800{background-color:color-mix(in srgb, var(--colors-teal-800) var(--un-bg-opacity), transparent) /* oklch(43.7% 0.078 188.216) */;}
.dark .dark\:bg-violet-800{background-color:color-mix(in srgb, var(--colors-violet-800) var(--un-bg-opacity), transparent) /* oklch(43.2% 0.232 292.759) */;}
.dark .dark\:bg-yellow-800{background-color:color-mix(in srgb, var(--colors-yellow-800) var(--un-bg-opacity), transparent) /* oklch(47.6% 0.114 61.907) */;}
.dark .dark\:hover\:bg-amber-800:hover{background-color:color-mix(in srgb, var(--colors-amber-800) var(--un-bg-opacity), transparent) /* oklch(47.3% 0.137 46.201) */;}
.dark .dark\:hover\:bg-blue-800:hover{background-color:color-mix(in srgb, var(--colors-blue-800) var(--un-bg-opacity), transparent) /* oklch(42.4% 0.199 265.638) */;}
.dark .dark\:hover\:bg-cyan-800:hover{background-color:color-mix(in srgb, var(--colors-cyan-800) var(--un-bg-opacity), transparent) /* oklch(45% 0.085 224.283) */;}
.dark .dark\:hover\:bg-emerald-800:hover{background-color:color-mix(in srgb, var(--colors-emerald-800) var(--un-bg-opacity), transparent) /* oklch(43.2% 0.095 166.913) */;}
.dark .dark\:hover\:bg-fuchsia-800:hover{background-color:color-mix(in srgb, var(--colors-fuchsia-800) var(--un-bg-opacity), transparent) /* oklch(45.2% 0.211 324.591) */;}
.dark .dark\:hover\:bg-gray-700:hover{background-color:color-mix(in srgb, var(--colors-gray-700) var(--un-bg-opacity), transparent) /* oklch(37.3% 0.034 259.733) */;}
.dark .dark\:hover\:bg-gray-800:hover{background-color:color-mix(in srgb, var(--colors-gray-800) var(--un-bg-opacity), transparent) /* oklch(27.8% 0.033 256.848) */;}
.dark .dark\:hover\:bg-green-800:hover{background-color:color-mix(in srgb, var(--colors-green-800) var(--un-bg-opacity), transparent) /* oklch(44.8% 0.119 151.328) */;}
.dark .dark\:hover\:bg-indigo-800:hover{background-color:color-mix(in srgb, var(--colors-indigo-800) var(--un-bg-opacity), transparent) /* oklch(39.8% 0.195 277.366) */;}
.dark .dark\:hover\:bg-lime-800:hover{background-color:color-mix(in srgb, var(--colors-lime-800) var(--un-bg-opacity), transparent) /* oklch(45.3% 0.124 130.933) */;}
.dark .dark\:hover\:bg-orange-800:hover{background-color:color-mix(in srgb, var(--colors-orange-800) var(--un-bg-opacity), transparent) /* oklch(47% 0.157 37.304) */;}
.dark .dark\:hover\:bg-pink-800:hover{background-color:color-mix(in srgb, var(--colors-pink-800) var(--un-bg-opacity), transparent) /* oklch(45.9% 0.187 3.815) */;}
.dark .dark\:hover\:bg-primary-800:hover{background-color:color-mix(in srgb, var(--slex-primary-800) var(--un-bg-opacity), transparent) /* var(--slex-primary-800) */;}
.dark .dark\:hover\:bg-purple-800:hover{background-color:color-mix(in srgb, var(--colors-purple-800) var(--un-bg-opacity), transparent) /* oklch(43.8% 0.218 303.724) */;}
.dark .dark\:hover\:bg-red-800:hover{background-color:color-mix(in srgb, var(--colors-red-800) var(--un-bg-opacity), transparent) /* oklch(44.4% 0.177 26.899) */;}
.dark .dark\:hover\:bg-rose-800:hover{background-color:color-mix(in srgb, var(--colors-rose-800) var(--un-bg-opacity), transparent) /* oklch(45.5% 0.188 13.697) */;}
.dark .dark\:hover\:bg-sky-800:hover{background-color:color-mix(in srgb, var(--colors-sky-800) var(--un-bg-opacity), transparent) /* oklch(44.3% 0.11 240.79) */;}
.dark .dark\:hover\:bg-teal-800:hover{background-color:color-mix(in srgb, var(--colors-teal-800) var(--un-bg-opacity), transparent) /* oklch(43.7% 0.078 188.216) */;}
.dark .dark\:hover\:bg-violet-800:hover{background-color:color-mix(in srgb, var(--colors-violet-800) var(--un-bg-opacity), transparent) /* oklch(43.2% 0.232 292.759) */;}
.dark .dark\:hover\:bg-yellow-800:hover{background-color:color-mix(in srgb, var(--colors-yellow-800) var(--un-bg-opacity), transparent) /* oklch(47.6% 0.114 61.907) */;}
.hover\:bg-amber-200:hover{background-color:color-mix(in srgb, var(--colors-amber-200) var(--un-bg-opacity), transparent) /* oklch(92.4% 0.12 95.746) */;}
.hover\:bg-blue-200:hover{background-color:color-mix(in srgb, var(--colors-blue-200) var(--un-bg-opacity), transparent) /* oklch(88.2% 0.059 254.128) */;}
.hover\:bg-cyan-200:hover{background-color:color-mix(in srgb, var(--colors-cyan-200) var(--un-bg-opacity), transparent) /* oklch(91.7% 0.08 205.041) */;}
.hover\:bg-emerald-200:hover{background-color:color-mix(in srgb, var(--colors-emerald-200) var(--un-bg-opacity), transparent) /* oklch(90.5% 0.093 164.15) */;}
.hover\:bg-fuchsia-200:hover{background-color:color-mix(in srgb, var(--colors-fuchsia-200) var(--un-bg-opacity), transparent) /* oklch(90.3% 0.076 319.62) */;}
.hover\:bg-gray-100:hover{background-color:color-mix(in srgb, var(--colors-gray-100) var(--un-bg-opacity), transparent) /* oklch(96.7% 0.003 264.542) */;}
.hover\:bg-gray-200:hover{background-color:color-mix(in srgb, var(--colors-gray-200) var(--un-bg-opacity), transparent) /* oklch(92.8% 0.006 264.531) */;}
.hover\:bg-gray-50:hover{background-color:color-mix(in srgb, var(--colors-gray-50) var(--un-bg-opacity), transparent) /* oklch(98.5% 0.002 247.839) */;}
.hover\:bg-green-200:hover{background-color:color-mix(in srgb, var(--colors-green-200) var(--un-bg-opacity), transparent) /* oklch(92.5% 0.084 155.995) */;}
.hover\:bg-indigo-200:hover{background-color:color-mix(in srgb, var(--colors-indigo-200) var(--un-bg-opacity), transparent) /* oklch(87% 0.065 274.039) */;}
.hover\:bg-lime-200:hover{background-color:color-mix(in srgb, var(--colors-lime-200) var(--un-bg-opacity), transparent) /* oklch(93.8% 0.127 124.321) */;}
.hover\:bg-orange-200:hover{background-color:color-mix(in srgb, var(--colors-orange-200) var(--un-bg-opacity), transparent) /* oklch(90.1% 0.076 70.697) */;}
.hover\:bg-pink-200:hover{background-color:color-mix(in srgb, var(--colors-pink-200) var(--un-bg-opacity), transparent) /* oklch(89.9% 0.061 343.231) */;}
.hover\:bg-primary-200:hover{background-color:color-mix(in srgb, var(--slex-primary-200) var(--un-bg-opacity), transparent) /* var(--slex-primary-200) */;}
.hover\:bg-purple-200:hover{background-color:color-mix(in srgb, var(--colors-purple-200) var(--un-bg-opacity), transparent) /* oklch(90.2% 0.063 306.703) */;}
.hover\:bg-red-200:hover{background-color:color-mix(in srgb, var(--colors-red-200) var(--un-bg-opacity), transparent) /* oklch(88.5% 0.062 18.334) */;}
.hover\:bg-rose-200:hover{background-color:color-mix(in srgb, var(--colors-rose-200) var(--un-bg-opacity), transparent) /* oklch(89.2% 0.058 10.001) */;}
.hover\:bg-sky-200:hover{background-color:color-mix(in srgb, var(--colors-sky-200) var(--un-bg-opacity), transparent) /* oklch(90.1% 0.058 230.902) */;}
.hover\:bg-teal-200:hover{background-color:color-mix(in srgb, var(--colors-teal-200) var(--un-bg-opacity), transparent) /* oklch(91% 0.096 180.426) */;}
.hover\:bg-violet-200:hover{background-color:color-mix(in srgb, var(--colors-violet-200) var(--un-bg-opacity), transparent) /* oklch(89.4% 0.057 293.283) */;}
.hover\:bg-yellow-200:hover{background-color:color-mix(in srgb, var(--colors-yellow-200) var(--un-bg-opacity), transparent) /* oklch(94.5% 0.129 101.54) */;}
.disabled\:opacity-50:disabled{opacity:50%;}
.underline{text-decoration-line:underline;}
.flex{display:flex;}
.inline-flex{display:inline-flex;}
.shrink-0{flex-shrink:0;}
.gap-3{gap:calc(var(--spacing) * 3);}
.grid{display:grid;}
.h-\[10px\]{height:10px;}
.h-3{height:calc(var(--spacing) * 3);}
.h-3\.5{height:calc(var(--spacing) * 3.5);}
.h-5{height:calc(var(--spacing) * 5);}
.h-8{height:calc(var(--spacing) * 8);}
.h-px{height:1px;}
.h2{height:calc(var(--spacing) * 2);}
.max-w-xs{max-width:var(--container-xs);}
.w-\[10px\]{width:10px;}
.w-3{width:calc(var(--spacing) * 3);}
.w-3\.5{width:calc(var(--spacing) * 3.5);}
.w-5{width:calc(var(--spacing) * 5);}
.w-8{width:calc(var(--spacing) * 8);}
.w-full{width:100%;}
.inline{display:inline;}
.block{display:block;}
.inline-block{display:inline-block;}
.hidden{display:none;}
.visible{visibility:visible;}
.cursor-not-allowed{cursor:not-allowed;}
.disabled\:cursor-not-allowed:disabled{cursor:not-allowed;}
.pointer-events-none{pointer-events:none;}
.resize{resize:both;}
.whitespace-normal{white-space:normal;}
.focus\:ring-0:focus{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(0px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.focus\:ring-1:focus{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(1px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.focus\:ring-2:focus{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(2px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.focus\:ring-4:focus{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(4px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.dark .dark\:focus\:ring-gray-800:focus{--un-ring-color:color-mix(in srgb, var(--colors-gray-800) var(--un-ring-opacity), transparent) /* oklch(27.8% 0.033 256.848) */;}
.focus\:ring-amber-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-amber-400) var(--un-ring-opacity), transparent) /* oklch(82.8% 0.189 84.429) */;}
.focus\:ring-blue-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-blue-400) var(--un-ring-opacity), transparent) /* oklch(70.7% 0.165 254.624) */;}
.focus\:ring-cyan-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-cyan-400) var(--un-ring-opacity), transparent) /* oklch(78.9% 0.154 211.53) */;}
.focus\:ring-emerald-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-emerald-400) var(--un-ring-opacity), transparent) /* oklch(76.5% 0.177 163.223) */;}
.focus\:ring-fuchsia-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-fuchsia-400) var(--un-ring-opacity), transparent) /* oklch(74% 0.238 322.16) */;}
.focus\:ring-gray-200:focus{--un-ring-color:color-mix(in srgb, var(--colors-gray-200) var(--un-ring-opacity), transparent) /* oklch(92.8% 0.006 264.531) */;}
.focus\:ring-gray-300:focus{--un-ring-color:color-mix(in srgb, var(--colors-gray-300) var(--un-ring-opacity), transparent) /* oklch(87.2% 0.01 258.338) */;}
.focus\:ring-gray-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-gray-400) var(--un-ring-opacity), transparent) /* oklch(70.7% 0.022 261.325) */;}
.focus\:ring-green-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-green-400) var(--un-ring-opacity), transparent) /* oklch(79.2% 0.209 151.711) */;}
.focus\:ring-indigo-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-indigo-400) var(--un-ring-opacity), transparent) /* oklch(67.3% 0.182 276.935) */;}
.focus\:ring-lime-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-lime-400) var(--un-ring-opacity), transparent) /* oklch(84.1% 0.238 128.85) */;}
.focus\:ring-orange-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-orange-400) var(--un-ring-opacity), transparent) /* oklch(75% 0.183 55.934) */;}
.focus\:ring-pink-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-pink-400) var(--un-ring-opacity), transparent) /* oklch(71.8% 0.202 349.761) */;}
.focus\:ring-primary-300:focus{--un-ring-color:color-mix(in srgb, var(--slex-primary-300) var(--un-ring-opacity), transparent) /* var(--slex-primary-300) */;}
.focus\:ring-primary-400:focus{--un-ring-color:color-mix(in srgb, var(--slex-primary-400) var(--un-ring-opacity), transparent) /* var(--slex-primary-400) */;}
.focus\:ring-purple-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-purple-400) var(--un-ring-opacity), transparent) /* oklch(71.4% 0.203 305.504) */;}
.focus\:ring-red-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-red-400) var(--un-ring-opacity), transparent) /* oklch(70.4% 0.191 22.216) */;}
.focus\:ring-rose-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-rose-400) var(--un-ring-opacity), transparent) /* oklch(71.2% 0.194 13.428) */;}
.focus\:ring-sky-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-sky-400) var(--un-ring-opacity), transparent) /* oklch(74.6% 0.16 232.661) */;}
.focus\:ring-teal-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-teal-400) var(--un-ring-opacity), transparent) /* oklch(77.7% 0.152 181.912) */;}
.focus\:ring-violet-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-violet-400) var(--un-ring-opacity), transparent) /* oklch(70.2% 0.183 293.541) */;}
.focus\:ring-yellow-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-yellow-400) var(--un-ring-opacity), transparent) /* oklch(85.2% 0.199 91.936) */;}
.shadow-sm{--un-shadow:0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.-rotate-135{rotate:-135deg;}
.-rotate-45{rotate:-45deg;}
.rotate-135{rotate:135deg;}
.rotate-45{rotate:45deg;}
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
.items-start{align-items:flex-start;}
.items-center{align-items:center;}
.end-5{inset-inline-end:calc(var(--spacing) * 5);}
.start-5{inset-inline-start:calc(var(--spacing) * 5);}
.bottom-4{bottom:calc(var(--spacing) * 4);}
.bottom-5{bottom:calc(var(--spacing) * 5);}
.left-4{left:calc(var(--spacing) * 4);}
.right-4{right:calc(var(--spacing) * 4);}
.top-4{top:calc(var(--spacing) * 4);}
.top-5{top:calc(var(--spacing) * 5);}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}
.absolute{position:absolute;}
.fixed{position:fixed;}
.relative{position:relative;}
.static{position:static;}
.z-50{z-index:50;}
.focus-within\:z-10:focus-within{z-index:10;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
.blur{--un-blur:blur(8px);filter:var(--un-blur,) var(--un-brightness,) var(--un-contrast,) var(--un-grayscale,) var(--un-hue-rotate,) var(--un-invert,) var(--un-saturate,) var(--un-sepia,) var(--un-drop-shadow,);}
.table{display:table;}
.rtl\:space-x-reverse{
[dir="rtl"] :where(&>:not(:last-child)){--un-space-x-reverse:1;}
}
.space-x-2{
:where(&>:not(:last-child)){--un-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--un-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--un-space-x-reverse)));}
}
.space-y-3{
:where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--un-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--un-space-y-reverse)));}
}
@media (forced-colors: active){
.focus\:outline-hidden:focus{outline:2px solid transparent;outline-offset:2px;}
}
@supports (color: color-mix(in lab, red, red)){
.dark .dark\:text-amber-200{color:color-mix(in oklab, var(--colors-amber-200) var(--un-text-opacity), transparent) /* oklch(92.4% 0.12 95.746) */;}
.dark .dark\:text-blue-200{color:color-mix(in oklab, var(--colors-blue-200) var(--un-text-opacity), transparent) /* oklch(88.2% 0.059 254.128) */;}
.dark .dark\:text-cyan-200{color:color-mix(in oklab, var(--colors-cyan-200) var(--un-text-opacity), transparent) /* oklch(91.7% 0.08 205.041) */;}
.dark .dark\:text-emerald-200{color:color-mix(in oklab, var(--colors-emerald-200) var(--un-text-opacity), transparent) /* oklch(90.5% 0.093 164.15) */;}
.dark .dark\:text-fuchsia-200{color:color-mix(in oklab, var(--colors-fuchsia-200) var(--un-text-opacity), transparent) /* oklch(90.3% 0.076 319.62) */;}
.dark .dark\:text-gray-200{color:color-mix(in oklab, var(--colors-gray-200) var(--un-text-opacity), transparent) /* oklch(92.8% 0.006 264.531) */;}
.dark .dark\:text-gray-400{color:color-mix(in oklab, var(--colors-gray-400) var(--un-text-opacity), transparent) /* oklch(70.7% 0.022 261.325) */;}
.dark .dark\:text-gray-500{color:color-mix(in oklab, var(--colors-gray-500) var(--un-text-opacity), transparent) /* oklch(55.1% 0.027 264.364) */;}
.dark .dark\:text-green-200{color:color-mix(in oklab, var(--colors-green-200) var(--un-text-opacity), transparent) /* oklch(92.5% 0.084 155.995) */;}
.dark .dark\:text-indigo-200{color:color-mix(in oklab, var(--colors-indigo-200) var(--un-text-opacity), transparent) /* oklch(87% 0.065 274.039) */;}
.dark .dark\:text-lime-200{color:color-mix(in oklab, var(--colors-lime-200) var(--un-text-opacity), transparent) /* oklch(93.8% 0.127 124.321) */;}
.dark .dark\:text-orange-200{color:color-mix(in oklab, var(--colors-orange-200) var(--un-text-opacity), transparent) /* oklch(90.1% 0.076 70.697) */;}
.dark .dark\:text-pink-200{color:color-mix(in oklab, var(--colors-pink-200) var(--un-text-opacity), transparent) /* oklch(89.9% 0.061 343.231) */;}
.dark .dark\:text-purple-200{color:color-mix(in oklab, var(--colors-purple-200) var(--un-text-opacity), transparent) /* oklch(90.2% 0.063 306.703) */;}
.dark .dark\:text-red-200{color:color-mix(in oklab, var(--colors-red-200) var(--un-text-opacity), transparent) /* oklch(88.5% 0.062 18.334) */;}
.dark .dark\:text-rose-200{color:color-mix(in oklab, var(--colors-rose-200) var(--un-text-opacity), transparent) /* oklch(89.2% 0.058 10.001) */;}
.dark .dark\:text-sky-200{color:color-mix(in oklab, var(--colors-sky-200) var(--un-text-opacity), transparent) /* oklch(90.1% 0.058 230.902) */;}
.dark .dark\:text-teal-200{color:color-mix(in oklab, var(--colors-teal-200) var(--un-text-opacity), transparent) /* oklch(91% 0.096 180.426) */;}
.dark .dark\:text-violet-200{color:color-mix(in oklab, var(--colors-violet-200) var(--un-text-opacity), transparent) /* oklch(89.4% 0.057 293.283) */;}
.dark .dark\:text-white{color:color-mix(in oklab, var(--colors-white) var(--un-text-opacity), transparent) /* #fff */;}
.dark .dark\:text-yellow-200{color:color-mix(in oklab, var(--colors-yellow-200) var(--un-text-opacity), transparent) /* oklch(94.5% 0.129 101.54) */;}
.text-amber-500{color:color-mix(in oklab, var(--colors-amber-500) var(--un-text-opacity), transparent) /* oklch(76.9% 0.188 70.08) */;}
.text-blue-500{color:color-mix(in oklab, var(--colors-blue-500) var(--un-text-opacity), transparent) /* oklch(62.3% 0.214 259.815) */;}
.text-cyan-500{color:color-mix(in oklab, var(--colors-cyan-500) var(--un-text-opacity), transparent) /* oklch(71.5% 0.143 215.221) */;}
.text-emerald-500{color:color-mix(in oklab, var(--colors-emerald-500) var(--un-text-opacity), transparent) /* oklch(69.6% 0.17 162.48) */;}
.text-fuchsia-500{color:color-mix(in oklab, var(--colors-fuchsia-500) var(--un-text-opacity), transparent) /* oklch(66.7% 0.295 322.15) */;}
.text-gray-400{color:color-mix(in oklab, var(--colors-gray-400) var(--un-text-opacity), transparent) /* oklch(70.7% 0.022 261.325) */;}
.text-gray-500{color:color-mix(in oklab, var(--colors-gray-500) var(--un-text-opacity), transparent) /* oklch(55.1% 0.027 264.364) */;}
.text-gray-800{color:color-mix(in oklab, var(--colors-gray-800) var(--un-text-opacity), transparent) /* oklch(27.8% 0.033 256.848) */;}
.text-gray-900{color:color-mix(in oklab, var(--colors-gray-900) var(--un-text-opacity), transparent) /* oklch(21% 0.034 264.665) */;}
.text-green-500{color:color-mix(in oklab, var(--colors-green-500) var(--un-text-opacity), transparent) /* oklch(72.3% 0.219 149.579) */;}
.text-indigo-500{color:color-mix(in oklab, var(--colors-indigo-500) var(--un-text-opacity), transparent) /* oklch(58.5% 0.233 277.117) */;}
.text-lime-500{color:color-mix(in oklab, var(--colors-lime-500) var(--un-text-opacity), transparent) /* oklch(76.8% 0.233 130.85) */;}
.text-orange-500{color:color-mix(in oklab, var(--colors-orange-500) var(--un-text-opacity), transparent) /* oklch(70.5% 0.213 47.604) */;}
.text-pink-500{color:color-mix(in oklab, var(--colors-pink-500) var(--un-text-opacity), transparent) /* oklch(65.6% 0.241 354.308) */;}
.text-purple-500{color:color-mix(in oklab, var(--colors-purple-500) var(--un-text-opacity), transparent) /* oklch(62.7% 0.265 303.9) */;}
.text-red-500{color:color-mix(in oklab, var(--colors-red-500) var(--un-text-opacity), transparent) /* oklch(63.7% 0.237 25.331) */;}
.text-rose-500{color:color-mix(in oklab, var(--colors-rose-500) var(--un-text-opacity), transparent) /* oklch(64.5% 0.246 16.439) */;}
.text-sky-500{color:color-mix(in oklab, var(--colors-sky-500) var(--un-text-opacity), transparent) /* oklch(68.5% 0.169 237.323) */;}
.text-teal-500{color:color-mix(in oklab, var(--colors-teal-500) var(--un-text-opacity), transparent) /* oklch(70.4% 0.14 182.503) */;}
.text-violet-500{color:color-mix(in oklab, var(--colors-violet-500) var(--un-text-opacity), transparent) /* oklch(60.6% 0.25 292.717) */;}
.text-white{color:color-mix(in oklab, var(--colors-white) var(--un-text-opacity), transparent) /* #fff */;}
.text-yellow-500{color:color-mix(in oklab, var(--colors-yellow-500) var(--un-text-opacity), transparent) /* oklch(79.5% 0.184 86.047) */;}
.dark .dark\:hover\:text-amber-300:hover{color:color-mix(in oklab, var(--colors-amber-300) var(--un-text-opacity), transparent) /* oklch(87.9% 0.169 91.605) */;}
.dark .dark\:hover\:text-amber-500:hover{color:color-mix(in oklab, var(--colors-amber-500) var(--un-text-opacity), transparent) /* oklch(76.9% 0.188 70.08) */;}
.dark .dark\:hover\:text-blue-300:hover{color:color-mix(in oklab, var(--colors-blue-300) var(--un-text-opacity), transparent) /* oklch(80.9% 0.105 251.813) */;}
.dark .dark\:hover\:text-blue-500:hover{color:color-mix(in oklab, var(--colors-blue-500) var(--un-text-opacity), transparent) /* oklch(62.3% 0.214 259.815) */;}
.dark .dark\:hover\:text-cyan-300:hover{color:color-mix(in oklab, var(--colors-cyan-300) var(--un-text-opacity), transparent) /* oklch(86.5% 0.127 207.078) */;}
.dark .dark\:hover\:text-cyan-500:hover{color:color-mix(in oklab, var(--colors-cyan-500) var(--un-text-opacity), transparent) /* oklch(71.5% 0.143 215.221) */;}
.dark .dark\:hover\:text-emerald-300:hover{color:color-mix(in oklab, var(--colors-emerald-300) var(--un-text-opacity), transparent) /* oklch(84.5% 0.143 164.978) */;}
.dark .dark\:hover\:text-emerald-500:hover{color:color-mix(in oklab, var(--colors-emerald-500) var(--un-text-opacity), transparent) /* oklch(69.6% 0.17 162.48) */;}
.dark .dark\:hover\:text-fuchsia-300:hover{color:color-mix(in oklab, var(--colors-fuchsia-300) var(--un-text-opacity), transparent) /* oklch(83.3% 0.145 321.434) */;}
.dark .dark\:hover\:text-fuchsia-500:hover{color:color-mix(in oklab, var(--colors-fuchsia-500) var(--un-text-opacity), transparent) /* oklch(66.7% 0.295 322.15) */;}
.dark .dark\:hover\:text-gray-300:hover{color:color-mix(in oklab, var(--colors-gray-300) var(--un-text-opacity), transparent) /* oklch(87.2% 0.01 258.338) */;}
.dark .dark\:hover\:text-gray-500:hover{color:color-mix(in oklab, var(--colors-gray-500) var(--un-text-opacity), transparent) /* oklch(55.1% 0.027 264.364) */;}
.dark .dark\:hover\:text-green-300:hover{color:color-mix(in oklab, var(--colors-green-300) var(--un-text-opacity), transparent) /* oklch(87.1% 0.15 154.449) */;}
.dark .dark\:hover\:text-green-500:hover{color:color-mix(in oklab, var(--colors-green-500) var(--un-text-opacity), transparent) /* oklch(72.3% 0.219 149.579) */;}
.dark .dark\:hover\:text-indigo-300:hover{color:color-mix(in oklab, var(--colors-indigo-300) var(--un-text-opacity), transparent) /* oklch(78.5% 0.115 274.713) */;}
.dark .dark\:hover\:text-indigo-500:hover{color:color-mix(in oklab, var(--colors-indigo-500) var(--un-text-opacity), transparent) /* oklch(58.5% 0.233 277.117) */;}
.dark .dark\:hover\:text-lime-300:hover{color:color-mix(in oklab, var(--colors-lime-300) var(--un-text-opacity), transparent) /* oklch(89.7% 0.196 126.665) */;}
.dark .dark\:hover\:text-lime-500:hover{color:color-mix(in oklab, var(--colors-lime-500) var(--un-text-opacity), transparent) /* oklch(76.8% 0.233 130.85) */;}
.dark .dark\:hover\:text-orange-300:hover{color:color-mix(in oklab, var(--colors-orange-300) var(--un-text-opacity), transparent) /* oklch(83.7% 0.128 66.29) */;}
.dark .dark\:hover\:text-orange-500:hover{color:color-mix(in oklab, var(--colors-orange-500) var(--un-text-opacity), transparent) /* oklch(70.5% 0.213 47.604) */;}
.dark .dark\:hover\:text-pink-300:hover{color:color-mix(in oklab, var(--colors-pink-300) var(--un-text-opacity), transparent) /* oklch(82.3% 0.12 346.018) */;}
.dark .dark\:hover\:text-pink-500:hover{color:color-mix(in oklab, var(--colors-pink-500) var(--un-text-opacity), transparent) /* oklch(65.6% 0.241 354.308) */;}
.dark .dark\:hover\:text-purple-300:hover{color:color-mix(in oklab, var(--colors-purple-300) var(--un-text-opacity), transparent) /* oklch(82.7% 0.119 306.383) */;}
.dark .dark\:hover\:text-purple-500:hover{color:color-mix(in oklab, var(--colors-purple-500) var(--un-text-opacity), transparent) /* oklch(62.7% 0.265 303.9) */;}
.dark .dark\:hover\:text-red-300:hover{color:color-mix(in oklab, var(--colors-red-300) var(--un-text-opacity), transparent) /* oklch(80.8% 0.114 19.571) */;}
.dark .dark\:hover\:text-red-500:hover{color:color-mix(in oklab, var(--colors-red-500) var(--un-text-opacity), transparent) /* oklch(63.7% 0.237 25.331) */;}
.dark .dark\:hover\:text-rose-300:hover{color:color-mix(in oklab, var(--colors-rose-300) var(--un-text-opacity), transparent) /* oklch(81% 0.117 11.638) */;}
.dark .dark\:hover\:text-rose-500:hover{color:color-mix(in oklab, var(--colors-rose-500) var(--un-text-opacity), transparent) /* oklch(64.5% 0.246 16.439) */;}
.dark .dark\:hover\:text-sky-300:hover{color:color-mix(in oklab, var(--colors-sky-300) var(--un-text-opacity), transparent) /* oklch(82.8% 0.111 230.318) */;}
.dark .dark\:hover\:text-sky-500:hover{color:color-mix(in oklab, var(--colors-sky-500) var(--un-text-opacity), transparent) /* oklch(68.5% 0.169 237.323) */;}
.dark .dark\:hover\:text-teal-300:hover{color:color-mix(in oklab, var(--colors-teal-300) var(--un-text-opacity), transparent) /* oklch(85.5% 0.138 181.071) */;}
.dark .dark\:hover\:text-teal-500:hover{color:color-mix(in oklab, var(--colors-teal-500) var(--un-text-opacity), transparent) /* oklch(70.4% 0.14 182.503) */;}
.dark .dark\:hover\:text-violet-300:hover{color:color-mix(in oklab, var(--colors-violet-300) var(--un-text-opacity), transparent) /* oklch(81.1% 0.111 293.571) */;}
.dark .dark\:hover\:text-violet-500:hover{color:color-mix(in oklab, var(--colors-violet-500) var(--un-text-opacity), transparent) /* oklch(60.6% 0.25 292.717) */;}
.dark .dark\:hover\:text-white:hover{color:color-mix(in oklab, var(--colors-white) var(--un-text-opacity), transparent) /* #fff */;}
.dark .dark\:hover\:text-yellow-300:hover{color:color-mix(in oklab, var(--colors-yellow-300) var(--un-text-opacity), transparent) /* oklch(90.5% 0.182 98.111) */;}
.dark .dark\:hover\:text-yellow-500:hover{color:color-mix(in oklab, var(--colors-yellow-500) var(--un-text-opacity), transparent) /* oklch(79.5% 0.184 86.047) */;}
.hover\:text-amber-600:hover{color:color-mix(in oklab, var(--colors-amber-600) var(--un-text-opacity), transparent) /* oklch(66.6% 0.179 58.318) */;}
.hover\:text-blue-600:hover{color:color-mix(in oklab, var(--colors-blue-600) var(--un-text-opacity), transparent) /* oklch(54.6% 0.245 262.881) */;}
.hover\:text-cyan-600:hover{color:color-mix(in oklab, var(--colors-cyan-600) var(--un-text-opacity), transparent) /* oklch(60.9% 0.126 221.723) */;}
.hover\:text-emerald-600:hover{color:color-mix(in oklab, var(--colors-emerald-600) var(--un-text-opacity), transparent) /* oklch(59.6% 0.145 163.225) */;}
.hover\:text-fuchsia-600:hover{color:color-mix(in oklab, var(--colors-fuchsia-600) var(--un-text-opacity), transparent) /* oklch(59.1% 0.293 322.896) */;}
.hover\:text-gray-600:hover{color:color-mix(in oklab, var(--colors-gray-600) var(--un-text-opacity), transparent) /* oklch(44.6% 0.03 256.802) */;}
.hover\:text-gray-700:hover{color:color-mix(in oklab, var(--colors-gray-700) var(--un-text-opacity), transparent) /* oklch(37.3% 0.034 259.733) */;}
.hover\:text-gray-900:hover{color:color-mix(in oklab, var(--colors-gray-900) var(--un-text-opacity), transparent) /* oklch(21% 0.034 264.665) */;}
.hover\:text-green-600:hover{color:color-mix(in oklab, var(--colors-green-600) var(--un-text-opacity), transparent) /* oklch(62.7% 0.194 149.214) */;}
.hover\:text-indigo-600:hover{color:color-mix(in oklab, var(--colors-indigo-600) var(--un-text-opacity), transparent) /* oklch(51.1% 0.262 276.966) */;}
.hover\:text-lime-600:hover{color:color-mix(in oklab, var(--colors-lime-600) var(--un-text-opacity), transparent) /* oklch(64.8% 0.2 131.684) */;}
.hover\:text-orange-600:hover{color:color-mix(in oklab, var(--colors-orange-600) var(--un-text-opacity), transparent) /* oklch(64.6% 0.222 41.116) */;}
.hover\:text-pink-600:hover{color:color-mix(in oklab, var(--colors-pink-600) var(--un-text-opacity), transparent) /* oklch(59.2% 0.249 0.584) */;}
.hover\:text-purple-600:hover{color:color-mix(in oklab, var(--colors-purple-600) var(--un-text-opacity), transparent) /* oklch(55.8% 0.288 302.321) */;}
.hover\:text-red-600:hover{color:color-mix(in oklab, var(--colors-red-600) var(--un-text-opacity), transparent) /* oklch(57.7% 0.245 27.325) */;}
.hover\:text-rose-600:hover{color:color-mix(in oklab, var(--colors-rose-600) var(--un-text-opacity), transparent) /* oklch(58.6% 0.253 17.585) */;}
.hover\:text-sky-600:hover{color:color-mix(in oklab, var(--colors-sky-600) var(--un-text-opacity), transparent) /* oklch(58.8% 0.158 241.966) */;}
.hover\:text-teal-600:hover{color:color-mix(in oklab, var(--colors-teal-600) var(--un-text-opacity), transparent) /* oklch(60% 0.118 184.704) */;}
.hover\:text-violet-600:hover{color:color-mix(in oklab, var(--colors-violet-600) var(--un-text-opacity), transparent) /* oklch(54.1% 0.281 293.009) */;}
.hover\:text-yellow-600:hover{color:color-mix(in oklab, var(--colors-yellow-600) var(--un-text-opacity), transparent) /* oklch(68.1% 0.162 75.834) */;}
.border-gray-200{border-color:color-mix(in oklab, var(--colors-gray-200) var(--un-border-opacity), transparent) /* oklch(92.8% 0.006 264.531) */;}
.dark .dark\:border-gray-700{border-color:color-mix(in oklab, var(--colors-gray-700) var(--un-border-opacity), transparent) /* oklch(37.3% 0.034 259.733) */;}
.hover\:border-gray-300:hover{border-color:color-mix(in oklab, var(--colors-gray-300) var(--un-border-opacity), transparent) /* oklch(87.2% 0.01 258.338) */;}
.bg-amber-100{background-color:color-mix(in oklab, var(--colors-amber-100) var(--un-bg-opacity), transparent) /* oklch(96.2% 0.059 95.617) */;}
.bg-blue-100{background-color:color-mix(in oklab, var(--colors-blue-100) var(--un-bg-opacity), transparent) /* oklch(93.2% 0.032 255.585) */;}
.bg-cyan-100{background-color:color-mix(in oklab, var(--colors-cyan-100) var(--un-bg-opacity), transparent) /* oklch(95.6% 0.045 203.388) */;}
.bg-emerald-100{background-color:color-mix(in oklab, var(--colors-emerald-100) var(--un-bg-opacity), transparent) /* oklch(95% 0.052 163.051) */;}
.bg-fuchsia-100{background-color:color-mix(in oklab, var(--colors-fuchsia-100) var(--un-bg-opacity), transparent) /* oklch(95.2% 0.037 318.852) */;}
.bg-gray-100{background-color:color-mix(in oklab, var(--colors-gray-100) var(--un-bg-opacity), transparent) /* oklch(96.7% 0.003 264.542) */;}
.bg-gray-200{background-color:color-mix(in oklab, var(--colors-gray-200) var(--un-bg-opacity), transparent) /* oklch(92.8% 0.006 264.531) */;}
.bg-gray-50{background-color:color-mix(in oklab, var(--colors-gray-50) var(--un-bg-opacity), transparent) /* oklch(98.5% 0.002 247.839) */;}
.bg-green-100{background-color:color-mix(in oklab, var(--colors-green-100) var(--un-bg-opacity), transparent) /* oklch(96.2% 0.044 156.743) */;}
.bg-indigo-100{background-color:color-mix(in oklab, var(--colors-indigo-100) var(--un-bg-opacity), transparent) /* oklch(93% 0.034 272.788) */;}
.bg-lime-100{background-color:color-mix(in oklab, var(--colors-lime-100) var(--un-bg-opacity), transparent) /* oklch(96.7% 0.067 122.328) */;}
.bg-orange-100{background-color:color-mix(in oklab, var(--colors-orange-100) var(--un-bg-opacity), transparent) /* oklch(95.4% 0.038 75.164) */;}
.bg-pink-100{background-color:color-mix(in oklab, var(--colors-pink-100) var(--un-bg-opacity), transparent) /* oklch(94.8% 0.028 342.258) */;}
.bg-purple-100{background-color:color-mix(in oklab, var(--colors-purple-100) var(--un-bg-opacity), transparent) /* oklch(94.6% 0.033 307.174) */;}
.bg-red-100{background-color:color-mix(in oklab, var(--colors-red-100) var(--un-bg-opacity), transparent) /* oklch(93.6% 0.032 17.717) */;}
.bg-rose-100{background-color:color-mix(in oklab, var(--colors-rose-100) var(--un-bg-opacity), transparent) /* oklch(94.1% 0.03 12.58) */;}
.bg-sky-100{background-color:color-mix(in oklab, var(--colors-sky-100) var(--un-bg-opacity), transparent) /* oklch(95.1% 0.026 236.824) */;}
.bg-teal-100{background-color:color-mix(in oklab, var(--colors-teal-100) var(--un-bg-opacity), transparent) /* oklch(95.3% 0.051 180.801) */;}
.bg-violet-100{background-color:color-mix(in oklab, var(--colors-violet-100) var(--un-bg-opacity), transparent) /* oklch(94.3% 0.029 294.588) */;}
.bg-white{background-color:color-mix(in oklab, var(--colors-white) var(--un-bg-opacity), transparent) /* #fff */;}
.bg-yellow-100{background-color:color-mix(in oklab, var(--colors-yellow-100) var(--un-bg-opacity), transparent) /* oklch(97.3% 0.071 103.193) */;}
.dark .dark\:bg-amber-700{background-color:color-mix(in oklab, var(--colors-amber-700) var(--un-bg-opacity), transparent) /* oklch(55.5% 0.163 48.998) */;}
.dark .dark\:bg-blue-800{background-color:color-mix(in oklab, var(--colors-blue-800) var(--un-bg-opacity), transparent) /* oklch(42.4% 0.199 265.638) */;}
.dark .dark\:bg-cyan-800{background-color:color-mix(in oklab, var(--colors-cyan-800) var(--un-bg-opacity), transparent) /* oklch(45% 0.085 224.283) */;}
.dark .dark\:bg-emerald-800{background-color:color-mix(in oklab, var(--colors-emerald-800) var(--un-bg-opacity), transparent) /* oklch(43.2% 0.095 166.913) */;}
.dark .dark\:bg-fuchsia-800{background-color:color-mix(in oklab, var(--colors-fuchsia-800) var(--un-bg-opacity), transparent) /* oklch(45.2% 0.211 324.591) */;}
.dark .dark\:bg-gray-700{background-color:color-mix(in oklab, var(--colors-gray-700) var(--un-bg-opacity), transparent) /* oklch(37.3% 0.034 259.733) */;}
.dark .dark\:bg-gray-800{background-color:color-mix(in oklab, var(--colors-gray-800) var(--un-bg-opacity), transparent) /* oklch(27.8% 0.033 256.848) */;}
.dark .dark\:bg-green-800{background-color:color-mix(in oklab, var(--colors-green-800) var(--un-bg-opacity), transparent) /* oklch(44.8% 0.119 151.328) */;}
.dark .dark\:bg-indigo-800{background-color:color-mix(in oklab, var(--colors-indigo-800) var(--un-bg-opacity), transparent) /* oklch(39.8% 0.195 277.366) */;}
.dark .dark\:bg-lime-700{background-color:color-mix(in oklab, var(--colors-lime-700) var(--un-bg-opacity), transparent) /* oklch(53.2% 0.157 131.589) */;}
.dark .dark\:bg-orange-700{background-color:color-mix(in oklab, var(--colors-orange-700) var(--un-bg-opacity), transparent) /* oklch(55.3% 0.195 38.402) */;}
.dark .dark\:bg-pink-700{background-color:color-mix(in oklab, var(--colors-pink-700) var(--un-bg-opacity), transparent) /* oklch(52.5% 0.223 3.958) */;}
.dark .dark\:bg-purple-800{background-color:color-mix(in oklab, var(--colors-purple-800) var(--un-bg-opacity), transparent) /* oklch(43.8% 0.218 303.724) */;}
.dark .dark\:bg-red-800{background-color:color-mix(in oklab, var(--colors-red-800) var(--un-bg-opacity), transparent) /* oklch(44.4% 0.177 26.899) */;}
.dark .dark\:bg-rose-700{background-color:color-mix(in oklab, var(--colors-rose-700) var(--un-bg-opacity), transparent) /* oklch(51.4% 0.222 16.935) */;}
.dark .dark\:bg-sky-800{background-color:color-mix(in oklab, var(--colors-sky-800) var(--un-bg-opacity), transparent) /* oklch(44.3% 0.11 240.79) */;}
.dark .dark\:bg-teal-800{background-color:color-mix(in oklab, var(--colors-teal-800) var(--un-bg-opacity), transparent) /* oklch(43.7% 0.078 188.216) */;}
.dark .dark\:bg-violet-800{background-color:color-mix(in oklab, var(--colors-violet-800) var(--un-bg-opacity), transparent) /* oklch(43.2% 0.232 292.759) */;}
.dark .dark\:bg-yellow-800{background-color:color-mix(in oklab, var(--colors-yellow-800) var(--un-bg-opacity), transparent) /* oklch(47.6% 0.114 61.907) */;}
.dark .dark\:hover\:bg-amber-800:hover{background-color:color-mix(in oklab, var(--colors-amber-800) var(--un-bg-opacity), transparent) /* oklch(47.3% 0.137 46.201) */;}
.dark .dark\:hover\:bg-blue-800:hover{background-color:color-mix(in oklab, var(--colors-blue-800) var(--un-bg-opacity), transparent) /* oklch(42.4% 0.199 265.638) */;}
.dark .dark\:hover\:bg-cyan-800:hover{background-color:color-mix(in oklab, var(--colors-cyan-800) var(--un-bg-opacity), transparent) /* oklch(45% 0.085 224.283) */;}
.dark .dark\:hover\:bg-emerald-800:hover{background-color:color-mix(in oklab, var(--colors-emerald-800) var(--un-bg-opacity), transparent) /* oklch(43.2% 0.095 166.913) */;}
.dark .dark\:hover\:bg-fuchsia-800:hover{background-color:color-mix(in oklab, var(--colors-fuchsia-800) var(--un-bg-opacity), transparent) /* oklch(45.2% 0.211 324.591) */;}
.dark .dark\:hover\:bg-gray-700:hover{background-color:color-mix(in oklab, var(--colors-gray-700) var(--un-bg-opacity), transparent) /* oklch(37.3% 0.034 259.733) */;}
.dark .dark\:hover\:bg-gray-800:hover{background-color:color-mix(in oklab, var(--colors-gray-800) var(--un-bg-opacity), transparent) /* oklch(27.8% 0.033 256.848) */;}
.dark .dark\:hover\:bg-green-800:hover{background-color:color-mix(in oklab, var(--colors-green-800) var(--un-bg-opacity), transparent) /* oklch(44.8% 0.119 151.328) */;}
.dark .dark\:hover\:bg-indigo-800:hover{background-color:color-mix(in oklab, var(--colors-indigo-800) var(--un-bg-opacity), transparent) /* oklch(39.8% 0.195 277.366) */;}
.dark .dark\:hover\:bg-lime-800:hover{background-color:color-mix(in oklab, var(--colors-lime-800) var(--un-bg-opacity), transparent) /* oklch(45.3% 0.124 130.933) */;}
.dark .dark\:hover\:bg-orange-800:hover{background-color:color-mix(in oklab, var(--colors-orange-800) var(--un-bg-opacity), transparent) /* oklch(47% 0.157 37.304) */;}
.dark .dark\:hover\:bg-pink-800:hover{background-color:color-mix(in oklab, var(--colors-pink-800) var(--un-bg-opacity), transparent) /* oklch(45.9% 0.187 3.815) */;}
.dark .dark\:hover\:bg-purple-800:hover{background-color:color-mix(in oklab, var(--colors-purple-800) var(--un-bg-opacity), transparent) /* oklch(43.8% 0.218 303.724) */;}
.dark .dark\:hover\:bg-red-800:hover{background-color:color-mix(in oklab, var(--colors-red-800) var(--un-bg-opacity), transparent) /* oklch(44.4% 0.177 26.899) */;}
.dark .dark\:hover\:bg-rose-800:hover{background-color:color-mix(in oklab, var(--colors-rose-800) var(--un-bg-opacity), transparent) /* oklch(45.5% 0.188 13.697) */;}
.dark .dark\:hover\:bg-sky-800:hover{background-color:color-mix(in oklab, var(--colors-sky-800) var(--un-bg-opacity), transparent) /* oklch(44.3% 0.11 240.79) */;}
.dark .dark\:hover\:bg-teal-800:hover{background-color:color-mix(in oklab, var(--colors-teal-800) var(--un-bg-opacity), transparent) /* oklch(43.7% 0.078 188.216) */;}
.dark .dark\:hover\:bg-violet-800:hover{background-color:color-mix(in oklab, var(--colors-violet-800) var(--un-bg-opacity), transparent) /* oklch(43.2% 0.232 292.759) */;}
.dark .dark\:hover\:bg-yellow-800:hover{background-color:color-mix(in oklab, var(--colors-yellow-800) var(--un-bg-opacity), transparent) /* oklch(47.6% 0.114 61.907) */;}
.hover\:bg-amber-200:hover{background-color:color-mix(in oklab, var(--colors-amber-200) var(--un-bg-opacity), transparent) /* oklch(92.4% 0.12 95.746) */;}
.hover\:bg-blue-200:hover{background-color:color-mix(in oklab, var(--colors-blue-200) var(--un-bg-opacity), transparent) /* oklch(88.2% 0.059 254.128) */;}
.hover\:bg-cyan-200:hover{background-color:color-mix(in oklab, var(--colors-cyan-200) var(--un-bg-opacity), transparent) /* oklch(91.7% 0.08 205.041) */;}
.hover\:bg-emerald-200:hover{background-color:color-mix(in oklab, var(--colors-emerald-200) var(--un-bg-opacity), transparent) /* oklch(90.5% 0.093 164.15) */;}
.hover\:bg-fuchsia-200:hover{background-color:color-mix(in oklab, var(--colors-fuchsia-200) var(--un-bg-opacity), transparent) /* oklch(90.3% 0.076 319.62) */;}
.hover\:bg-gray-100:hover{background-color:color-mix(in oklab, var(--colors-gray-100) var(--un-bg-opacity), transparent) /* oklch(96.7% 0.003 264.542) */;}
.hover\:bg-gray-200:hover{background-color:color-mix(in oklab, var(--colors-gray-200) var(--un-bg-opacity), transparent) /* oklch(92.8% 0.006 264.531) */;}
.hover\:bg-gray-50:hover{background-color:color-mix(in oklab, var(--colors-gray-50) var(--un-bg-opacity), transparent) /* oklch(98.5% 0.002 247.839) */;}
.hover\:bg-green-200:hover{background-color:color-mix(in oklab, var(--colors-green-200) var(--un-bg-opacity), transparent) /* oklch(92.5% 0.084 155.995) */;}
.hover\:bg-indigo-200:hover{background-color:color-mix(in oklab, var(--colors-indigo-200) var(--un-bg-opacity), transparent) /* oklch(87% 0.065 274.039) */;}
.hover\:bg-lime-200:hover{background-color:color-mix(in oklab, var(--colors-lime-200) var(--un-bg-opacity), transparent) /* oklch(93.8% 0.127 124.321) */;}
.hover\:bg-orange-200:hover{background-color:color-mix(in oklab, var(--colors-orange-200) var(--un-bg-opacity), transparent) /* oklch(90.1% 0.076 70.697) */;}
.hover\:bg-pink-200:hover{background-color:color-mix(in oklab, var(--colors-pink-200) var(--un-bg-opacity), transparent) /* oklch(89.9% 0.061 343.231) */;}
.hover\:bg-purple-200:hover{background-color:color-mix(in oklab, var(--colors-purple-200) var(--un-bg-opacity), transparent) /* oklch(90.2% 0.063 306.703) */;}
.hover\:bg-red-200:hover{background-color:color-mix(in oklab, var(--colors-red-200) var(--un-bg-opacity), transparent) /* oklch(88.5% 0.062 18.334) */;}
.hover\:bg-rose-200:hover{background-color:color-mix(in oklab, var(--colors-rose-200) var(--un-bg-opacity), transparent) /* oklch(89.2% 0.058 10.001) */;}
.hover\:bg-sky-200:hover{background-color:color-mix(in oklab, var(--colors-sky-200) var(--un-bg-opacity), transparent) /* oklch(90.1% 0.058 230.902) */;}
.hover\:bg-teal-200:hover{background-color:color-mix(in oklab, var(--colors-teal-200) var(--un-bg-opacity), transparent) /* oklch(91% 0.096 180.426) */;}
.hover\:bg-violet-200:hover{background-color:color-mix(in oklab, var(--colors-violet-200) var(--un-bg-opacity), transparent) /* oklch(89.4% 0.057 293.283) */;}
.hover\:bg-yellow-200:hover{background-color:color-mix(in oklab, var(--colors-yellow-200) var(--un-bg-opacity), transparent) /* oklch(94.5% 0.129 101.54) */;}
.dark .dark\:focus\:ring-gray-800:focus{--un-ring-color:color-mix(in oklab, var(--colors-gray-800) var(--un-ring-opacity), transparent) /* oklch(27.8% 0.033 256.848) */;}
.focus\:ring-amber-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-amber-400) var(--un-ring-opacity), transparent) /* oklch(82.8% 0.189 84.429) */;}
.focus\:ring-blue-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-blue-400) var(--un-ring-opacity), transparent) /* oklch(70.7% 0.165 254.624) */;}
.focus\:ring-cyan-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-cyan-400) var(--un-ring-opacity), transparent) /* oklch(78.9% 0.154 211.53) */;}
.focus\:ring-emerald-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-emerald-400) var(--un-ring-opacity), transparent) /* oklch(76.5% 0.177 163.223) */;}
.focus\:ring-fuchsia-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-fuchsia-400) var(--un-ring-opacity), transparent) /* oklch(74% 0.238 322.16) */;}
.focus\:ring-gray-200:focus{--un-ring-color:color-mix(in oklab, var(--colors-gray-200) var(--un-ring-opacity), transparent) /* oklch(92.8% 0.006 264.531) */;}
.focus\:ring-gray-300:focus{--un-ring-color:color-mix(in oklab, var(--colors-gray-300) var(--un-ring-opacity), transparent) /* oklch(87.2% 0.01 258.338) */;}
.focus\:ring-gray-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-gray-400) var(--un-ring-opacity), transparent) /* oklch(70.7% 0.022 261.325) */;}
.focus\:ring-green-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-green-400) var(--un-ring-opacity), transparent) /* oklch(79.2% 0.209 151.711) */;}
.focus\:ring-indigo-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-indigo-400) var(--un-ring-opacity), transparent) /* oklch(67.3% 0.182 276.935) */;}
.focus\:ring-lime-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-lime-400) var(--un-ring-opacity), transparent) /* oklch(84.1% 0.238 128.85) */;}
.focus\:ring-orange-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-orange-400) var(--un-ring-opacity), transparent) /* oklch(75% 0.183 55.934) */;}
.focus\:ring-pink-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-pink-400) var(--un-ring-opacity), transparent) /* oklch(71.8% 0.202 349.761) */;}
.focus\:ring-purple-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-purple-400) var(--un-ring-opacity), transparent) /* oklch(71.4% 0.203 305.504) */;}
.focus\:ring-red-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-red-400) var(--un-ring-opacity), transparent) /* oklch(70.4% 0.191 22.216) */;}
.focus\:ring-rose-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-rose-400) var(--un-ring-opacity), transparent) /* oklch(71.2% 0.194 13.428) */;}
.focus\:ring-sky-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-sky-400) var(--un-ring-opacity), transparent) /* oklch(74.6% 0.16 232.661) */;}
.focus\:ring-teal-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-teal-400) var(--un-ring-opacity), transparent) /* oklch(77.7% 0.152 181.912) */;}
.focus\:ring-violet-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-violet-400) var(--un-ring-opacity), transparent) /* oklch(70.2% 0.183 293.541) */;}
.focus\:ring-yellow-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-yellow-400) var(--un-ring-opacity), transparent) /* oklch(85.2% 0.199 91.936) */;}
}

/* layout.css */

.slexkit-root {
  --font-sans:
    "Geist", "Geist Sans", "Noto Sans SC", "Noto Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:
    "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code",
    Consolas, monospace;
  font-family: var(
    --font-sans,
    "Geist",
    "Geist Sans",
    "Noto Sans SC",
    "Noto Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif
  );
  color: var(--foreground);
  background: transparent;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slexkit-root,
.slexkit-root *,
.slexkit-root *::before,
.slexkit-root *::after {
  box-sizing: border-box;
}

.slexkit-source-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.slexkit-source-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 0.625rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}

.slexkit-source-button:hover {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: var(--border);
}

.slexkit-source-button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.slexkit-preview {
  width: 100%;
}

.slex-layout {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 1rem;
}

.slex-layout > .slex-row {
  justify-content: space-between;
  align-items: center;
}

.slex-layout .slex-text {
  color: var(--foreground);
}

.slex-layout .slex-text--muted {
  color: var(--muted-foreground);
}

.slex-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-width: 0;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 150ms ease,
    border-color 150ms ease;
}

.slex-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}

.slex-card-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--card-foreground);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
}

.slex-card-body {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: 1rem;
}

.slex-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1rem;
}

.slex-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.slex-row > * {
  min-width: 0;
}

.slex-row--balanced-tiles {
  --slex-balanced-tile-width: 136px;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(var(--slex-balanced-tracks, var(--slex-balanced-cols)), minmax(0, 1fr));
  justify-content: stretch;
  align-items: stretch;
}

.slex-row--balanced-tiles > :is(.slex-stat, .slex-card) {
  width: 100%;
}

.slex-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 1rem;
}

.slex-grid {
  grid-template-columns: 1fr;
}
.slex-grid[data-cols="1"] {
  grid-template-columns: 1fr;
}
.slex-grid[data-cols="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.slex-grid[data-cols="3"] {
  grid-template-columns: repeat(3, 1fr);
}
.slex-grid[data-cols="4"] {
  grid-template-columns: repeat(4, 1fr);
}
.slex-grid[data-cols="5"] {
  grid-template-columns: repeat(5, 1fr);
}
.slex-grid[data-cols="6"] {
  grid-template-columns: repeat(6, 1fr);
}
.slex-grid[data-cols="12"] {
  grid-template-columns: repeat(12, 1fr);
}

@media (min-width: 640px) {
  .slex-grid[data-cols-sm="1"] {
    grid-template-columns: 1fr;
  }
  .slex-grid[data-cols-sm="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .slex-grid[data-cols-sm="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .slex-grid[data-cols-sm="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
  .slex-grid[data-cols-sm="5"] {
    grid-template-columns: repeat(5, 1fr);
  }
  .slex-grid[data-cols-sm="6"] {
    grid-template-columns: repeat(6, 1fr);
  }
  .slex-grid[data-cols-sm="12"] {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 768px) {
  .slex-grid[data-cols-md="1"] {
    grid-template-columns: 1fr;
  }
  .slex-grid[data-cols-md="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .slex-grid[data-cols-md="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .slex-grid[data-cols-md="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
  .slex-grid[data-cols-md="5"] {
    grid-template-columns: repeat(5, 1fr);
  }
  .slex-grid[data-cols-md="6"] {
    grid-template-columns: repeat(6, 1fr);
  }
  .slex-grid[data-cols-md="12"] {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 1024px) {
  .slex-grid[data-cols-lg="1"] {
    grid-template-columns: 1fr;
  }
  .slex-grid[data-cols-lg="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .slex-grid[data-cols-lg="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .slex-grid[data-cols-lg="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
  .slex-grid[data-cols-lg="5"] {
    grid-template-columns: repeat(5, 1fr);
  }
  .slex-grid[data-cols-lg="6"] {
    grid-template-columns: repeat(6, 1fr);
  }
  .slex-grid[data-cols-lg="12"] {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 1280px) {
  .slex-grid[data-cols-xl="1"] {
    grid-template-columns: 1fr;
  }
  .slex-grid[data-cols-xl="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .slex-grid[data-cols-xl="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .slex-grid[data-cols-xl="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
  .slex-grid[data-cols-xl="5"] {
    grid-template-columns: repeat(5, 1fr);
  }
  .slex-grid[data-cols-xl="6"] {
    grid-template-columns: repeat(6, 1fr);
  }
  .slex-grid[data-cols-xl="12"] {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (max-width: 639px) {
  .slex-card {
    padding: 1rem;
  }

  .slex-row {
    align-items: stretch;
  }

  .slex-grid[data-cols],
  .slex-grid[data-cols="2"],
  .slex-grid[data-cols="3"],
  .slex-grid[data-cols="4"],
  .slex-grid[data-cols="5"],
  .slex-grid[data-cols="6"],
  .slex-grid[data-cols="12"] {
    grid-template-columns: 1fr;
  }
}

/* theme.css */

.slexkit-root {
  color: var(--foreground, #111827);
  background: transparent;
  font-family: var(
    --font-sans,
    "Geist",
    "Geist Sans",
    "Noto Sans SC",
    "Noto Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif
  );
}

.slexkit-theme-host-shadcn {
  --slex-primary-50: color-mix(in srgb, var(--primary, #4A90E2) 8%, white);
  --slex-primary-100: color-mix(in srgb, var(--primary, #4A90E2) 14%, white);
  --slex-primary-200: color-mix(in srgb, var(--primary, #4A90E2) 25%, white);
  --slex-primary-300: color-mix(in srgb, var(--primary, #4A90E2) 38%, white);
  --slex-primary-400: color-mix(in srgb, var(--primary, #4A90E2) 62%, white);
  --slex-primary-500: var(--primary, #4A90E2);
  --slex-primary-600: color-mix(in srgb, var(--primary, #4A90E2) 82%, black);
  --slex-primary-700: color-mix(in srgb, var(--primary, #4A90E2) 74%, black);
  --slex-primary-800: color-mix(in srgb, var(--primary, #4A90E2) 65%, black);
  --slex-primary-900: color-mix(in srgb, var(--primary, #4A90E2) 56%, black);
  --slex-primary-950: color-mix(in srgb, var(--primary, #4A90E2) 44%, black);
}

/* tooling.css */

.slex-playground {
  --slex-playground-toolbar-height: var(--slex-control-height, 2.25rem);
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--border) 64%, transparent);
  border-radius: 1rem;
  background: var(--background);
  color: var(--card-foreground);
  box-shadow: none;
}

.slex-playground-heading {
  min-width: 0;
}

.slex-playground-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

.slex-playground-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  line-height: 1.25rem;
}

.slex-playground-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  padding: 0 0.375rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.slex-playground-chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  height: var(--slex-playground-toolbar-height);
  min-height: var(--slex-playground-toolbar-height);
  padding: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 46%, transparent);
  background: color-mix(in oklab, var(--muted) 22%, var(--background));
  pointer-events: none;
  backdrop-filter: blur(12px);
  overflow: visible;
  scrollbar-width: none;
}

.slex-playground-chrome::-webkit-scrollbar {
  display: none;
}

.slex-playground-source-picker {
  position: relative;
  z-index: 60;
  width: 8rem;
  min-width: 8rem;
  height: var(--slex-playground-toolbar-height);
  align-self: stretch;
}

.slex-playground-source-picker .slex-select {
  height: 100%;
}

.slex-playground-tabs,
.slex-playground-actions {
  display: inline-flex;
  height: var(--slex-playground-toolbar-height);
  align-self: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}

.slex-playground-tabs {
  margin-right: auto;
}

.slex-playground-tabs .slex-tabs {
  width: auto;
  height: 100%;
}

.slex-playground-tabs .slex-tabs-list {
  height: 100%;
  border-bottom: 0;
}

.slex-playground-tabs .slex-tabs-trigger {
  width: var(--slex-playground-toolbar-height);
  min-height: var(--slex-playground-toolbar-height);
  height: var(--slex-playground-toolbar-height);
  padding: 0;
  color: var(--muted-foreground);
}

.slex-playground-tabs .slex-tabs-trigger:hover:not([data-disabled]),
.slex-playground-tabs .slex-tabs-trigger.slex-tabs-trigger--selected {
  background: color-mix(in oklab, var(--muted) 32%, transparent);
  color: var(--foreground);
}

.slex-playground-tabs .slex-tabs-trigger-icon {
  width: 1rem;
  height: 1rem;
}

.slex-playground-editor:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.slex-playground-actions .slex-button {
  width: var(--slex-playground-toolbar-height);
  height: var(--slex-playground-toolbar-height);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted-foreground);
  box-shadow: none;
}

.slex-playground-actions .slex-button:hover {
  background: color-mix(in oklab, var(--muted) 44%, var(--background));
  color: var(--foreground);
  transform: none;
  box-shadow: none;
}

.slex-playground-actions {
  border-left: 1px solid color-mix(in oklab, var(--border) 58%, transparent);
}

.slex-playground--workbench {
  height: auto;
  min-height: var(--slex-playground-min-height, 16rem);
}

.slex-playground--embedded {
  height: 100svh;
  box-shadow: none;
}

.slex-playground--standalone {
  height: var(--slex-playground-min-height, calc(100svh - 2rem));
  min-height: var(--slex-playground-min-height, calc(100svh - 2rem));
}

.slex-playground--embedded .slex-playground-preview-pane,
.slex-playground--embedded .slex-playground-code-pane,
.slex-playground--embedded .slex-playground-live-pane,
.slex-playground--standalone .slex-playground-preview-pane,
.slex-playground--standalone .slex-playground-code-pane,
.slex-playground--standalone .slex-playground-live-pane {
  height: 100%;
  min-height: 0;
}

.slex-playground--embedded .slex-playground-code,
.slex-playground--embedded .slex-playground-editor,
.slex-playground--embedded .slex-playground-editor.codemirror,
.slex-playground--embedded .slex-playground-editor .cm-editor,
.slex-playground--embedded .slex-playground-editor .cm-scroller,
.slex-playground--standalone .slex-playground-code,
.slex-playground--standalone .slex-playground-editor,
.slex-playground--standalone .slex-playground-editor.codemirror,
.slex-playground--standalone .slex-playground-editor .cm-editor,
.slex-playground--standalone .slex-playground-editor .cm-scroller {
  height: 100%;
}

.slex-playground-preview-pane {
  display: grid;
  align-items: safe center;
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  min-height: var(--slex-playground-min-height, 16rem);
  padding: calc(var(--slex-playground-toolbar-height) + 1.25rem) 2.25rem 2.25rem;
  background-color: var(--background);
  background-image: radial-gradient(color-mix(in oklab, var(--border) 58%, transparent) 1px, transparent 1px);
  background-position: 0 0;
  background-size: 18px 18px;
}

.slex-playground-preview-pane[hidden],
.slex-playground-code-pane[hidden] {
  display: none;
}

.slex-playground-preview {
  width: 100%;
  margin: 0 auto;
}

.slex-playground[data-preview-align="start"] .slex-playground-preview-pane {
  align-items: start;
}

.slex-playground[data-source-type="markdown"] .slex-playground-preview-pane {
  align-items: start;
}

.slex-playground[data-preview-overflow="true"] .slex-playground-preview-pane {
  align-items: start;
}

.slex-playground[data-preview-align="center"][data-preview-anchor="fixed"]:not([data-preview-overflow="true"]) .slex-playground-preview-pane {
  align-items: start;
}

.slex-playground[data-preview-align="center"][data-preview-anchor="fixed"]:not([data-preview-overflow="true"]) .slex-playground-preview {
  margin-top: var(--slex-preview-anchor-offset, 0);
}

.slex-playground[data-preview-align="start"] .slex-playground-live-preview {
  align-items: start;
}

.slex-playground[data-source-type="markdown"] .slex-playground-live-preview {
  align-items: start;
}

.slex-playground[data-preview-overflow="true"] .slex-playground-live-preview {
  align-items: start;
}

.slex-playground[data-preview-align="center"][data-preview-anchor="fixed"]:not([data-preview-overflow="true"]) .slex-playground-live-preview {
  align-items: start;
}

.slex-playground[data-preview-align="center"][data-preview-anchor="fixed"]:not([data-preview-overflow="true"]) .slex-playground-live-preview > .slex-standalone-playground-preview-inner {
  margin-top: var(--slex-preview-anchor-offset, 0);
}

.slex-playground-code-pane {
  display: flex;
  min-width: 0;
  min-height: var(--slex-playground-min-height, 16rem);
  overflow: hidden;
  background: var(--background);
}

.slex-playground-code {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: var(--slex-playground-min-height, 16rem);
  overflow: hidden;
}

.slex-playground-code-scroll {
  box-sizing: border-box;
  width: 100%;
  overflow: auto;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.slex-playground-code-lines {
  min-width: max-content;
  padding: 3.75rem 0 1.25rem;
}

.slex-playground-live-pane {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  min-height: var(--slex-playground-min-height, 16rem);
  background: var(--background);
}

.slex-playground-live-code {
  min-width: 0;
  min-height: var(--slex-playground-min-height, 16rem);
  overflow: hidden;
  border-right: 1px solid color-mix(in oklab, var(--border) 58%, transparent);
}

.slex-playground-live-preview {
  display: grid;
  align-items: safe center;
  min-width: 0;
  min-height: var(--slex-playground-min-height, 16rem);
  overflow: auto;
  padding: calc(var(--slex-playground-toolbar-height) + 1.25rem) 1.5rem 1.5rem;
  background-color: var(--background);
  background-image: radial-gradient(color-mix(in oklab, var(--border) 52%, transparent) 1px, transparent 1px);
  background-position: 0 0;
  background-size: 18px 18px;
}

.slex-playground-live-pane.vertical {
  grid-template-columns: 1fr;
}

.slex-playground-live-pane.vertical .slex-playground-live-code {
  border-right: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 58%, transparent);
}

.slex-playground-splitter {
  position: relative;
  background: color-mix(in oklab, var(--border) 76%, transparent);
  touch-action: none;
  transition: background-color 120ms ease;
}

.slex-playground-splitter:focus-visible {
  background: color-mix(in oklab, var(--ring) 28%, var(--border));
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

.slex-playground-splitter.dragging {
  background: var(--ring);
  outline: none;
}

.slex-playground-live-pane.horizontal .slex-playground-splitter {
  width: 8px;
  cursor: col-resize;
}

.slex-playground-live-pane.vertical .slex-playground-splitter {
  height: 8px;
  cursor: row-resize;
}

.slex-playground-code-line {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  min-height: 1.55em;
}

.slex-playground-code-line-number {
  user-select: none;
  border-right: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
  padding: 0 0.75rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.slex-playground-code-line-text {
  display: block;
  min-width: max-content;
  white-space: pre;
  padding: 0 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.slex-playground-code-scroll .hljs {
  background: transparent;
  color: var(--foreground);
}

.slex-playground-code-scroll pre,
.slex-playground-code-scroll code {
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
}

.slex-playground-editor {
  --slex-code-keyword: color-mix(in oklab, var(--info) 82%, var(--foreground));
  --slex-code-name: color-mix(in oklab, var(--foreground) 84%, var(--muted-foreground));
  --slex-code-string: color-mix(in oklab, var(--success) 82%, var(--foreground));
  --slex-code-literal: color-mix(in oklab, var(--warning) 82%, var(--foreground));
  --slex-code-function: color-mix(in oklab, var(--info) 64%, var(--foreground));
  --slex-code-punctuation: color-mix(in oklab, var(--muted-foreground) 82%, var(--foreground));
  --slex-code-comment: color-mix(in oklab, var(--muted-foreground) 76%, transparent);
  --slex-code-heading: color-mix(in oklab, var(--foreground) 92%, var(--info));
  --slex-code-link: color-mix(in oklab, var(--info) 86%, var(--foreground));
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--slex-playground-min-height, 16rem);
  resize: none;
  border: 0;
  background: var(--background);
  color: var(--foreground);
  padding: 0;
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  font-size: 0.75rem;
  line-height: 1.5;
  outline: none;
}

.dark .slex-playground-editor {
  --slex-code-keyword: color-mix(in oklab, var(--info) 72%, var(--foreground));
  --slex-code-name: color-mix(in oklab, var(--foreground) 88%, var(--info));
  --slex-code-string: color-mix(in oklab, var(--success) 76%, var(--foreground));
  --slex-code-literal: color-mix(in oklab, var(--warning) 72%, var(--foreground));
  --slex-code-function: color-mix(in oklab, var(--info) 82%, var(--foreground));
  --slex-code-punctuation: color-mix(in oklab, var(--muted-foreground) 88%, var(--foreground));
  --slex-code-comment: color-mix(in oklab, var(--muted-foreground) 82%, transparent);
  --slex-code-heading: color-mix(in oklab, var(--foreground) 94%, var(--info));
  --slex-code-link: color-mix(in oklab, var(--info) 76%, var(--foreground));
}

.dark :where(.slex-playground-editor, .slex-standalone-playground-editor) .cm-content :where([class~="ͼ5"]) {
  color: var(--slex-code-comment) !important;
}

.dark :where(.slex-playground-editor, .slex-standalone-playground-editor) .cm-content :where([class~="ͼ7"]) {
  color: var(--slex-code-heading) !important;
}

.dark :where(.slex-playground-editor, .slex-standalone-playground-editor) .cm-content :where([class~="ͼb"]) {
  color: var(--slex-code-keyword) !important;
}

.dark :where(.slex-playground-editor, .slex-standalone-playground-editor) .cm-content :where([class~="ͼc"], [class~="ͼg"], [class~="ͼh"], [class~="ͼi"], [class~="ͼj"]) {
  color: var(--slex-code-name) !important;
}

.dark :where(.slex-playground-editor, .slex-standalone-playground-editor) .cm-content :where([class~="ͼd"], [class~="ͼf"]) {
  color: var(--slex-code-literal) !important;
}

.dark :where(.slex-playground-editor, .slex-standalone-playground-editor) .cm-content :where([class~="ͼe"]) {
  color: var(--slex-code-string) !important;
}

.slex-playground-editor.codemirror,
.slex-playground-editor .cm-editor {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto;
  min-height: var(--slex-playground-min-height, 16rem);
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
}

.slex-playground-editor .cm-editor.cm-focused .cm-cursor {
  border-left-color: var(--foreground);
}

.slex-playground-editor .cm-editor.cm-focused .cm-selectionBackground,
.slex-playground-editor .cm-editor .cm-selectionBackground,
.slex-playground-editor .cm-editor.cm-focused .cm-content ::selection {
  background: color-mix(in oklab, var(--foreground) 18%, transparent) !important;
}

.slex-playground-editor .cm-focused {
  outline: none;
}

.slex-playground-editor .cm-scroller {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: var(--slex-playground-min-height, 16rem);
  height: auto;
  overflow: auto;
  padding-top: var(--slex-playground-toolbar-height);
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.slex-playground-code-scroll,
.slex-playground-live-preview,
.slex-playground-editor .cm-scroller,
.slex-standalone-playground-preview,
.slex-standalone-playground-editor .cm-scroller {
  scrollbar-color: color-mix(in oklab, var(--muted-foreground) 42%, transparent) transparent;
  scrollbar-width: thin;
}

.slex-playground-code-scroll::-webkit-scrollbar,
.slex-playground-live-preview::-webkit-scrollbar,
.slex-playground-editor .cm-scroller::-webkit-scrollbar,
.slex-standalone-playground-preview::-webkit-scrollbar,
.slex-standalone-playground-editor .cm-scroller::-webkit-scrollbar {
  width: 0.625rem;
  height: 0.625rem;
}

.slex-playground-code-scroll::-webkit-scrollbar-track,
.slex-playground-live-preview::-webkit-scrollbar-track,
.slex-playground-editor .cm-scroller::-webkit-scrollbar-track,
.slex-standalone-playground-preview::-webkit-scrollbar-track,
.slex-standalone-playground-editor .cm-scroller::-webkit-scrollbar-track {
  background: transparent;
}

.slex-playground-code-scroll::-webkit-scrollbar-thumb,
.slex-playground-code-scroll::-webkit-scrollbar-thumb:hover,
.slex-playground-code-scroll::-webkit-scrollbar-thumb:active,
.slex-playground-live-preview::-webkit-scrollbar-thumb,
.slex-playground-live-preview::-webkit-scrollbar-thumb:hover,
.slex-playground-live-preview::-webkit-scrollbar-thumb:active,
.slex-playground-editor .cm-scroller::-webkit-scrollbar-thumb,
.slex-playground-editor .cm-scroller::-webkit-scrollbar-thumb:hover,
.slex-playground-editor .cm-scroller::-webkit-scrollbar-thumb:active,
.slex-standalone-playground-preview::-webkit-scrollbar-thumb,
.slex-standalone-playground-preview::-webkit-scrollbar-thumb:hover,
.slex-standalone-playground-preview::-webkit-scrollbar-thumb:active,
.slex-standalone-playground-editor .cm-scroller::-webkit-scrollbar-thumb,
.slex-standalone-playground-editor .cm-scroller::-webkit-scrollbar-thumb:hover,
.slex-standalone-playground-editor .cm-scroller::-webkit-scrollbar-thumb:active {
  border: 0.1875rem solid transparent;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted-foreground) 42%, transparent);
  background-clip: content-box;
}

.slex-playground-editor .cm-editor .cm-gutters {
  height: calc(var(--slex-playground-min-height, 16rem) - var(--slex-playground-toolbar-height));
}

.slex-playground-editor .cm-gutters {
  height: calc(var(--slex-playground-min-height, 16rem) - var(--slex-playground-toolbar-height));
  border-right: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
}

.slex-playground-editor .cm-activeLine,
.slex-playground-editor .cm-activeLineGutter {
  background: color-mix(in oklab, var(--accent) 42%, transparent);
}

.slex-playground-editor .cm-content {
  min-height: calc(var(--slex-playground-min-height, 16rem) - var(--slex-playground-toolbar-height));
  padding: 1rem 1.25rem 1.25rem;
}

.slexkit-root .sr-only,
.slex-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.slex-playground-error {
  border-top: 1px solid var(--destructive);
  background: color-mix(in oklab, var(--destructive) 10%, transparent);
  color: var(--destructive);
  padding: 0.75rem 1rem;
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  font-size: 0.75rem;
}

.slex-streamdown-block {
  margin-block: 0.75rem;
}

.slex-streamdown-body {
  padding: 0.75rem;
}

.slex-streamdown-error {
  border: 1px dashed var(--destructive);
  border-radius: calc(var(--radius) - 2px);
  color: var(--destructive);
  padding: 1rem;
  text-align: left;
}

.slex-streamdown-error-title {
  font-weight: 700;
}

.slex-streamdown-error-message {
  margin-top: 0.5rem;
  color: var(--foreground);
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.slex-streamdown-error-location,
.slex-streamdown-error-detail {
  margin-top: 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}

.slex-streamdown-error-excerpt {
  overflow: auto;
  margin: 0.75rem 0 0;
  border-radius: calc(var(--radius) - 2px);
  background: var(--background);
  color: var(--foreground);
  padding: 0.75rem;
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre;
}

.slex-standalone-playground {
  box-sizing: border-box;
  width: 100%;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  padding: 1rem;
}

.slex-playground-embedded-body .slex-standalone-playground {
  height: 100svh;
  padding: 0;
}

.slex-playground-embedded-body {
  background: transparent;
}

.slex-standalone-playground-shell {
  position: relative;
  height: calc(100svh - 2rem);
  min-height: calc(100svh - 2rem);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
}

.slex-standalone-playground-toolbar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--muted) 86%, transparent);
  box-shadow: var(--shadow-sm);
}

.slex-standalone-playground-button {
  display: inline-grid;
  width: 2.5rem;
  height: 2.25rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
}

.slex-standalone-playground-button svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}

.slex-standalone-playground-icon {
  display: inline-grid;
  place-items: center;
}

.slex-standalone-playground-button:hover {
  color: var(--foreground);
}

.slex-standalone-playground-button:focus-visible,
.slex-standalone-playground-editor .cm-focused {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.slex-standalone-playground-button--active {
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}

.slex-standalone-playground-error {
  border: 1px solid var(--destructive);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--destructive) 6%, var(--background));
  color: var(--destructive);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}

.slex-standalone-playground-error-title {
  color: var(--destructive);
  font-size: 1rem;
  font-weight: 700;
}

.slex-standalone-playground-error-message {
  margin-top: 0.5rem;
  color: var(--foreground);
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.slex-standalone-playground-error-location,
.slex-standalone-playground-error-detail {
  margin-top: 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}

.slex-standalone-playground-error-excerpt {
  overflow: auto;
  margin: 0.75rem 0 0;
  border-radius: calc(var(--radius) - 2px);
  background: var(--background);
  color: var(--foreground);
  padding: 0.75rem;
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.slex-standalone-playground-surface {
  box-sizing: border-box;
  height: calc(100svh - 2rem);
  min-height: calc(100svh - 2rem);
  overflow: hidden;
}

.slex-standalone-playground-surface:not(.slex-standalone-playground-surface--split) {
  display: block;
}

.slex-standalone-playground-pane {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.slex-standalone-playground-surface--split,
.slex-standalone-playground-surface--split > .split-pane-pane {
  display: grid;
  height: 100%;
  min-height: 0;
}

.slex-standalone-playground-splitter {
  position: relative;
  background: var(--border);
  touch-action: none;
  transition: background-color 120ms ease;
}

.slex-standalone-playground-splitter:focus-visible {
  background: color-mix(in oklab, var(--ring) 28%, var(--border));
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

.slex-standalone-playground-splitter.dragging {
  background: var(--ring);
  outline: none;
}

.slex-standalone-playground-surface--split.horizontal .slex-standalone-playground-splitter {
  width: 100%;
  height: 100%;
}

.slex-standalone-playground-surface--split.vertical .slex-standalone-playground-splitter {
  width: 100%;
  height: 100%;
}

.slex-standalone-playground-code,
.slex-standalone-playground-preview {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.slex-standalone-playground-code {
  background: var(--background);
}

.slex-standalone-playground-code .codemirror {
  display: block;
  width: 100%;
  height: 100%;
}

.slex-standalone-playground-editor {
  --slex-code-keyword: color-mix(in oklab, var(--info) 82%, var(--foreground));
  --slex-code-name: color-mix(in oklab, var(--foreground) 84%, var(--muted-foreground));
  --slex-code-string: color-mix(in oklab, var(--success) 82%, var(--foreground));
  --slex-code-literal: color-mix(in oklab, var(--warning) 82%, var(--foreground));
  --slex-code-function: color-mix(in oklab, var(--info) 64%, var(--foreground));
  --slex-code-punctuation: color-mix(in oklab, var(--muted-foreground) 82%, var(--foreground));
  --slex-code-comment: color-mix(in oklab, var(--muted-foreground) 76%, transparent);
  --slex-code-heading: color-mix(in oklab, var(--foreground) 92%, var(--info));
  --slex-code-link: color-mix(in oklab, var(--info) 86%, var(--foreground));
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  font-size: 0.8125rem;
  line-height: 1.55;
  outline: none;
}

.dark .slex-standalone-playground-editor {
  --slex-code-keyword: color-mix(in oklab, var(--info) 72%, var(--foreground));
  --slex-code-name: color-mix(in oklab, var(--foreground) 88%, var(--info));
  --slex-code-string: color-mix(in oklab, var(--success) 76%, var(--foreground));
  --slex-code-literal: color-mix(in oklab, var(--warning) 72%, var(--foreground));
  --slex-code-function: color-mix(in oklab, var(--info) 82%, var(--foreground));
  --slex-code-punctuation: color-mix(in oklab, var(--muted-foreground) 88%, var(--foreground));
  --slex-code-comment: color-mix(in oklab, var(--muted-foreground) 82%, transparent);
  --slex-code-heading: color-mix(in oklab, var(--foreground) 94%, var(--info));
  --slex-code-link: color-mix(in oklab, var(--info) 76%, var(--foreground));
}

.slex-standalone-playground-editor .cm-editor {
  height: 100%;
  background: var(--background);
  color: var(--foreground);
  font-size: 0.8125rem;
}

.slex-standalone-playground-editor .cm-editor.cm-focused .cm-cursor {
  border-left-color: var(--foreground);
}

.slex-standalone-playground-editor .cm-editor.cm-focused .cm-selectionBackground,
.slex-standalone-playground-editor .cm-editor .cm-selectionBackground,
.slex-standalone-playground-editor .cm-editor.cm-focused .cm-content ::selection {
  background: color-mix(in oklab, var(--foreground) 18%, transparent) !important;
}

.slex-standalone-playground-editor .cm-scroller {
  padding-top: 0.75rem;
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  line-height: 1.55;
}

.slex-standalone-playground-editor .cm-gutters {
  border-right: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
}

.slex-standalone-playground-editor .cm-activeLine,
.slex-standalone-playground-editor .cm-activeLineGutter {
  background: color-mix(in oklab, var(--muted) 58%, transparent);
}

.slex-standalone-playground-editor .cm-content {
  padding: 0 1.25rem 1.25rem;
}

.slex-standalone-playground-preview {
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  padding: 4rem 1.25rem 1.25rem;
  background-color: var(--background);
  background-image: radial-gradient(color-mix(in oklab, var(--border) 78%, transparent) 1px, transparent 1px);
  background-position: 0 0;
  background-size: 18px 18px;
}

.slex-standalone-playground-preview-inner {
  display: grid;
  gap: var(--slex-preview-document-gap, 1rem);
  align-content: center;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.slex-standalone-playground-shell[data-mode="render"] .slex-standalone-playground-preview-inner {
  max-width: 900px;
}

@media (max-width: 640px) {
  .slex-playground {
    border-radius: 0.75rem;
  }

  .slex-playground-chrome {
    padding: 0;
  }

  .slex-playground-actions .slex-button {
    width: var(--slex-playground-toolbar-height);
    height: var(--slex-playground-toolbar-height);
  }

  .slex-playground-preview-pane {
    padding: 1.25rem;
    padding-top: calc(var(--slex-playground-toolbar-height) + 1.25rem);
  }

  .slex-playground-live-pane {
    grid-template-columns: 1fr;
  }

  .slex-playground-live-code {
    border-right: 0;
    border-bottom: 1px solid color-mix(in oklab, var(--border) 58%, transparent);
  }

  .slex-playground-live-preview {
    padding: calc(var(--slex-playground-toolbar-height) + 1.25rem) 1.25rem 1.25rem;
  }

  .slex-playground-source-picker {
    width: 6.75rem;
    min-width: 6.75rem;
  }

  .slex-playground-code-lines {
    padding-top: calc(var(--slex-playground-toolbar-height) + 1rem);
  }

  .slex-standalone-playground {
    padding: 0;
  }

  .slex-standalone-playground-shell {
    height: 100svh;
    min-height: 100svh;
    border-width: 0;
    border-radius: 0;
  }

  .slex-standalone-playground-toolbar {
    right: 0.5rem;
  }

  .slex-standalone-playground-button {
    width: 2.375rem;
  }

  .slex-standalone-playground-surface {
    height: 100svh;
    min-height: 100svh;
  }

  .slex-standalone-playground-editor {
    min-height: 100%;
  }

  .slex-standalone-playground-editor .cm-scroller {
    padding-top: 0.75rem;
  }

  .slex-standalone-playground-editor .cm-content {
    padding: 0 1rem 1rem;
  }
}

/* display.css */

.slex-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  background: var(--muted);
  color: var(--foreground);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.slex-stat:hover {
  background: var(--accent);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.slex-stat-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
}

.slex-stat-value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem;
  color: var(--foreground);
  font-family: var(
    --font-sans,
    "Geist",
    "Geist Sans",
    "Noto Sans SC",
    "Noto Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif
  );
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.slex-stat-number {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.slex-stat-character {
  position: relative;
  display: inline-block;
  height: 1em;
  line-height: 1;
  vertical-align: baseline;
}

.slex-stat-character[data-stat-kind="digit"] {
  min-width: 0.62em;
  text-align: center;
}

.slex-stat-character-current {
  display: block;
}

.slex-stat-character[data-stat-kind="digit"][data-stat-change] {
  overflow: hidden;
}

.slex-stat-character[data-stat-change]::before {
  content: attr(data-stat-previous);
  position: absolute;
  inset: 0;
  display: block;
  text-align: inherit;
}

.slex-stat-character[data-stat-change="up"]::before {
  animation: slex-stat-digit-old-up 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.slex-stat-character[data-stat-change="up"] .slex-stat-character-current {
  animation: slex-stat-digit-new-up 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.slex-stat-character[data-stat-change="down"]::before {
  animation: slex-stat-digit-old-down 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.slex-stat-character[data-stat-change="down"] .slex-stat-character-current {
  animation: slex-stat-digit-new-down 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.slex-stat-character[data-stat-change="changed"]::before {
  animation: slex-stat-symbol-old 260ms ease both;
}

.slex-stat-character[data-stat-change="changed"] .slex-stat-character-current {
  animation: slex-stat-symbol-new 260ms ease both;
}

.slex-stat-character[data-stat-initial="true"]::before,
.slex-stat-character[data-stat-initial="true"] .slex-stat-character-current {
  animation-delay: var(--slex-stat-initial-delay, 520ms);
}

.slex-stat-unit {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.slex-stat[data-tone="normal"] .slex-stat-value,
.slex-stat[data-tone="primary"] .slex-stat-value {
  color: var(--primary);
}

.slex-stat[data-tone="danger"] .slex-stat-value,
.slex-stat[data-tone="destructive"] .slex-stat-value {
  color: var(--destructive);
}

.slex-stat[data-tone="warning"] .slex-stat-value {
  color: var(--warning);
}

.slex-stat[data-tone="info"] .slex-stat-value {
  color: var(--info);
}

.slex-stat[data-tone="success"] .slex-stat-value {
  color: var(--success);
}

.slex-stat[data-tone="muted"] .slex-stat-value {
  color: var(--muted-foreground);
}

@keyframes slex-stat-digit-old-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-110%);
  }
}

@keyframes slex-stat-digit-new-up {
  0% {
    transform: translateY(110%);
  }
  58% {
    transform: translateY(-8%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slex-stat-digit-old-down {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(110%);
  }
}

@keyframes slex-stat-digit-new-down {
  0% {
    transform: translateY(-110%);
  }
  58% {
    transform: translateY(8%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slex-stat-symbol-old {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.18em) scale(0.98);
  }
}

@keyframes slex-stat-symbol-new {
  0% {
    opacity: 0.7;
    transform: translateY(0.18em) scale(0.98);
  }
  60% {
    opacity: 1;
    transform: translateY(-0.04em) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slex-stat-character[data-stat-change]::before,
  .slex-stat-character[data-stat-change] .slex-stat-character-current {
    animation: none;
  }

  .slex-stat-character[data-stat-change]::before {
    content: none;
  }
}

.slex-text {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.625;
}

.slex-text--eyebrow {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}

.slex-text--muted {
  color: var(--muted-foreground);
}

.slex-text--dashboard-title {
  color: var(--foreground);
  font-size: 1.375rem;
  font-weight: 750;
  line-height: 1.2;
}

/* content.css */

.slex-section-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.slex-section-eyebrow {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
}

.slex-section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--foreground);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  font-size: 1.5rem;
}

.slex-section-subtitle {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.slex-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.375rem;
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.slex-link:hover {
  color: color-mix(in oklab, var(--primary) 82%, var(--muted-foreground));
}

.slex-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 24%, transparent);
}

.slex-link[data-variant="muted"] {
  color: var(--muted-foreground);
}

.slex-link[data-variant="button"] {
  min-height: 2.25rem;
  justify-content: center;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  background: var(--background);
  padding: 0 0.75rem;
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}

.slex-link[data-variant="button"]:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.slex-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 1.5rem;
  align-items: center;
  align-self: start;
  gap: 0.25rem;
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: var(--secondary);
  color: var(--secondary-foreground);
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.slex-badge-label {
  min-width: 0;
}

.slex-badge[data-tone="neutral"],
.slex-badge[data-tone="muted"] {
  border-color: color-mix(in oklab, var(--muted-foreground) 18%, var(--border));
  background: color-mix(in oklab, var(--muted-foreground) 8%, var(--background));
  color: var(--muted-foreground);
}

.slex-badge[data-tone="primary"] {
  border-color: color-mix(in oklab, var(--primary) 22%, var(--border));
  background: color-mix(in oklab, var(--primary) 8%, var(--background));
  color: color-mix(in oklab, var(--primary) 88%, var(--foreground));
}

.slex-badge[data-tone="info"] {
  border-color: color-mix(in oklab, var(--info) 24%, var(--border));
  background: color-mix(in oklab, var(--info) 10%, var(--background));
  color: color-mix(in oklab, var(--info) 86%, var(--foreground));
}

.slex-badge[data-tone="success"] {
  border-color: color-mix(in oklab, var(--success) 24%, var(--border));
  background: color-mix(in oklab, var(--success) 10%, var(--background));
  color: color-mix(in oklab, var(--success) 86%, var(--foreground));
}

.slex-badge[data-tone="warning"] {
  border-color: color-mix(in oklab, var(--warning) 26%, var(--border));
  background: color-mix(in oklab, var(--warning) 12%, var(--background));
  color: color-mix(in oklab, var(--warning) 82%, var(--foreground));
}

.slex-badge[data-tone="danger"],
.slex-badge[data-tone="error"],
.slex-badge[data-tone="destructive"] {
  border-color: color-mix(in oklab, var(--destructive) 24%, var(--border));
  background: color-mix(in oklab, var(--destructive) 10%, var(--background));
  color: color-mix(in oklab, var(--destructive) 86%, var(--foreground));
}

.slex-divider {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1rem 0;
}

.slex-divider--labeled {
  display: flex;
  height: auto;
  align-items: center;
  gap: 0.75rem;
  border: 0;
}

.slex-divider--labeled::before,
.slex-divider--labeled::after {
  content: "";
  flex: 1 1 0;
  border-top: 1px solid var(--border);
}

.slex-divider-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
}

.slex-formula {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  color: var(--foreground);
}

.slex-formula[data-display="block"] {
  display: block;
  margin: 0.25rem 0;
}

.slex-formula[data-display="inline"] {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  vertical-align: middle;
}

.slex-callout {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 0.25rem minmax(0, 1fr);
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
  max-width: none;
  min-height: 4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--foreground);
  padding: 0.875rem 1rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.slex-callout:hover {
  border-color: color-mix(in oklab, var(--primary) 20%, var(--border));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.slex-callout-mark {
  align-self: stretch;
  width: 0.25rem;
  min-height: 100%;
  border-radius: 9999px;
  background: var(--info);
}

.slex-callout-icon {
  flex: 0 0 auto;
}

.slex-callout[data-tone="info"] .slex-callout-icon {
  color: var(--info);
}

.slex-callout[data-tone="info"] .slex-callout-mark {
  background: var(--info);
}

.slex-callout[data-tone="success"] .slex-callout-icon {
  color: var(--success);
}

.slex-callout[data-tone="success"] .slex-callout-mark {
  background: var(--success);
}

.slex-callout[data-tone="warning"] .slex-callout-icon {
  color: var(--warning);
}

.slex-callout[data-tone="warning"] .slex-callout-mark {
  background: var(--warning);
}

.slex-callout[data-tone="danger"] .slex-callout-icon,
.slex-callout[data-tone="error"] .slex-callout-icon,
.slex-callout[data-tone="destructive"] .slex-callout-icon {
  color: var(--destructive);
}

.slex-callout[data-tone="danger"] .slex-callout-mark,
.slex-callout[data-tone="error"] .slex-callout-mark,
.slex-callout[data-tone="destructive"] .slex-callout-mark {
  background: var(--destructive);
}

.slex-callout-content {
  align-self: start;
  min-width: 0;
  padding: 0.0625rem 0;
}

.slex-callout-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.slex-callout-body {
  margin-top: 0.125rem;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.slex-callout-body:empty {
  display: none;
}

.slex-code-block {
  --slex-code-keyword: color-mix(in oklab, var(--info) 78%, var(--foreground));
  --slex-code-string: color-mix(in oklab, var(--success) 78%, var(--foreground));
  --slex-code-literal: color-mix(in oklab, var(--warning) 78%, var(--foreground));
  --slex-code-comment: color-mix(in oklab, var(--muted-foreground) 74%, transparent);
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  color: var(--foreground);
}

.slex-code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
}

.slex-code-block-title {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.slex-code-block-language {
  color: var(--muted-foreground);
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
}

.slex-code-block .slex-code-block-pre {
  overflow: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.875rem;
  box-shadow: none;
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  font-size: 0.8125rem;
  line-height: 1.65;
}

.slex-code-block code {
  white-space: pre;
}

.slex-code-block .slex-code-lines {
  display: grid;
  min-width: max-content;
  counter-reset: slex-code-line;
}

.slex-code-block .slex-code-line {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  min-height: 1.65em;
  counter-increment: slex-code-line;
}

.slex-code-block .slex-code-line::before {
  content: counter(slex-code-line);
  user-select: none;
  border-right: 1px solid var(--border);
  color: var(--muted-foreground);
  padding-right: 0.75rem;
  margin-right: 0.75rem;
  text-align: right;
}

.slex-code-block .slex-code-lines[data-line-numbers="false"] .slex-code-line {
  display: block;
}

.slex-code-block .slex-code-lines[data-line-numbers="false"] .slex-code-line::before {
  display: none;
}

.slex-code-block .slex-code-line-content {
  min-width: max-content;
}

.slex-code-block .slex-code-highlight {
  background: transparent;
  color: var(--foreground);
}

.slex-code-block .slex-code-token--keyword {
  color: var(--slex-code-keyword);
}

.slex-code-block .slex-code-token--string {
  color: var(--slex-code-string);
}

.slex-code-block :where(.slex-code-token--literal, .slex-code-token--number) {
  color: var(--slex-code-literal);
}

.slex-code-block .slex-code-token--comment {
  color: var(--slex-code-comment);
  font-style: italic;
}

.slex-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.slex-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  color: var(--foreground);
  font-size: 0.875rem;
}

.slex-table th,
.slex-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.625rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

.slex-table th {
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 650;
}

.slex-table-column-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.slex-table tr:last-child td {
  border-bottom: 0;
}

.slex-section {
  display: grid;
  gap: 1rem;
  min-width: 0;
  scroll-margin-top: 5rem;
}

.slex-section-body {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.slex-section-action {
  display: inline-flex;
  width: fit-content;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  background: var(--background);
  color: var(--foreground);
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.slex-section-action:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.slex-section-action:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.slexkit-secure-error {
  margin-top: 0.75rem;
  white-space: pre-wrap;
  border: 1px solid color-mix(in srgb, var(--destructive, #dc2626) 35%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--destructive, #dc2626) 8%, transparent);
  color: var(--destructive, #b91c1c);
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.75rem;
}

/* components/button.css */

.slex-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 100%;
  min-width: 0;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.slex-button--primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.slex-button--primary:hover:not(:disabled):not(.slex-button--disabled) {
  background: color-mix(in oklab, var(--primary) 90%, transparent);
  border-color: color-mix(in oklab, var(--primary) 90%, transparent);
  color: var(--primary-foreground);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.slex-button--secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--border);
}

.slex-button--secondary:hover:not(:disabled):not(.slex-button--disabled) {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: var(--border);
}

.slex-button--danger {
  background: var(--destructive);
  color: var(--destructive-foreground);
  border-color: var(--destructive);
}

.slex-button--danger:hover:not(:disabled):not(.slex-button--disabled) {
  background: color-mix(in oklab, var(--destructive) 90%, transparent);
  border-color: color-mix(in oklab, var(--destructive) 90%, transparent);
}

.slex-button--ghost {
  background: transparent;
  color: var(--muted-foreground);
  border-color: transparent;
}

.slex-button--ghost:hover:not(:disabled):not(.slex-button--disabled) {
  background: var(--accent);
  color: var(--accent-foreground);
}

.slex-button:disabled,
.slex-button[disabled],
.slex-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.slex-button:active:not(:disabled):not(.slex-button--disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.slex-button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.slex-button--icon {
  width: var(--slex-control-height, 2.25rem);
  min-height: var(--slex-control-height, 2.25rem);
  padding-inline: 0;
}

.slex-button-icon {
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  color: currentColor;
}

.slex-button-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* components/submit.css */

.slex-submit-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* components/slider.css */

.slex-slider-container,
.slex-slider-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.slex-slider-field {
  padding: 0.25rem 0;
}

.slex-slider-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
}

.slex-slider-value {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  font-size: 0.875rem;
  font-weight: 600;
}

.slex-slider-control {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 1rem;
}

.slex-slider-track {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--primary) 0%,
    var(--primary) var(--slex-slider-progress, 0%),
    var(--secondary) var(--slex-slider-progress, 0%),
    var(--secondary) 100%
  );
  pointer-events: none;
  transform: translateY(-50%);
}

.slex-slider {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 1rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: transparent;
  accent-color: var(--primary);
  cursor: pointer;
  overflow: visible;
  transition: box-shadow 150ms ease, filter 150ms ease;
}

.slexkit-root .slex-slider-control input.slex-slider {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 1rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  background: transparent;
  color: transparent;
  -webkit-appearance: none;
  appearance: none;
  overflow: visible;
}

.slex-slider:focus-visible {
  outline: none;
}

.slex-slider::-webkit-slider-thumb {
  box-sizing: border-box;
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  border: 2px solid var(--primary);
  border-radius: 999px;
  background-color: var(--background);
  background-clip: padding-box;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 14%, transparent);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
}

.slex-slider::-webkit-slider-runnable-track {
  box-sizing: border-box;
  width: 100%;
  height: 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.slex-slider::-moz-range-thumb {
  box-sizing: border-box;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--primary);
  border-radius: 999px;
  background-color: var(--background);
  background-clip: padding-box;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 14%, transparent);
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
}

.slex-slider:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 12%, transparent);
  transform: scale(1.06);
}

.slex-slider:hover::-moz-range-thumb {
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 12%, transparent);
  transform: scale(1.06);
}

.slex-slider:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 4px var(--background),
    0 0 0 6px var(--ring);
}

.slex-slider:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 4px var(--background),
    0 0 0 6px var(--ring);
}

.slex-slider:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 16%, transparent);
  transform: scale(1.12);
}

.slex-slider:active::-moz-range-thumb {
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 16%, transparent);
  transform: scale(1.12);
}

.slex-slider::-moz-range-track {
  height: 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.slex-slider::-moz-range-progress {
  height: 1rem;
  border-radius: 999px;
  background: transparent;
}

.slex-slider-label-text {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.375rem;
}

/* components/switch.css */

.slex-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.slex-switch-event-layer {
  display: inline-flex;
}

.slex-choice-event-layer {
  display: inline-flex;
}

.slex-switch-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 500;
}

.slex-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.slex-switch-control {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 1.5rem;
  margin-inline-end: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 9999px;
  background: var(--input);
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.slex-switch-control::after {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  border-radius: 9999px;
  background: var(--background);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 12%, transparent);
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  transform: translateX(0);
  will-change: transform;
}

.slex-switch:hover .slex-switch-control {
  border-color: color-mix(in oklab, var(--primary) 42%, var(--input));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 8%, transparent);
}

.slex-switch:hover .slex-switch-control::after {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 10%, transparent);
}

.slex-switch:active .slex-switch-control::after {
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 16%, transparent);
}

.slex-switch-input:checked + .slex-switch-control {
  border-color: var(--primary);
  background: var(--primary);
}

.slex-switch:hover .slex-switch-input:checked + .slex-switch-control {
  background: color-mix(in oklab, var(--primary) 88%, var(--background));
}

.slex-switch-input:checked + .slex-switch-control::after {
  background: var(--background);
  transform: translateX(1.25rem);
}

.slexkit-root[dir="rtl"] .slex-switch-input:checked + .slex-switch-control::after {
  transform: translateX(-1.25rem);
}

.slex-switch-input:focus-visible + .slex-switch-control {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 18%, transparent);
}

.slex-switch-input:disabled + .slex-switch-control {
  opacity: 0.55;
}

.slex-switch[data-disabled="true"] {
  cursor: not-allowed;
}

.slex-switch[data-disabled="true"]:hover .slex-switch-control,
.slex-switch[data-disabled="true"]:hover .slex-switch-control::after {
  box-shadow: none;
}

/* components/text-input.css */

.slex-input-field {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 100%;
  min-width: 0;
}

.slex-input-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: fit-content;
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
}

.slex-input-field[data-required="true"] .slex-input-label::after {
  content: "*";
  color: var(--destructive);
  font-weight: 700;
}

.slex-input-control {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border-radius: var(--radius);
  transition: box-shadow 150ms ease;
}

.slex-input {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: var(--background);
  background-clip: padding-box;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.slexkit-root .slex-input-control input.slex-input {
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 2.5625rem;
  height: auto;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  box-shadow: none;
  background: var(--background);
  background-clip: padding-box;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.slex-input-control[data-has-unit="true"] .slex-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.slexkit-root .slex-input-control[data-has-unit="true"] input.slex-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.slex-input-unit {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5625rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.slex-input::placeholder {
  color: var(--muted-foreground);
}

.slex-input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 18%, transparent);
}

.slex-input-control[data-has-unit="true"] .slex-input:focus {
  box-shadow: none;
}

.slex-input[type="number"] {
  appearance: textfield;
}

.slex-input[type="number"]::-webkit-outer-spin-button,
.slex-input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.slex-input[readonly] {
  background: color-mix(in oklab, var(--muted) 42%, var(--background));
  color: color-mix(in oklab, var(--foreground) 82%, var(--muted-foreground));
}

.slex-input-field[data-invalid="true"] .slex-input {
  border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
}

.slex-input-field[data-invalid="true"] .slex-input:focus {
  border-color: var(--destructive);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
}

.slex-input-field[data-invalid="true"] .slex-input-control[data-has-unit="true"] .slex-input:focus {
  box-shadow: none;
}

.slex-input-control:focus-within {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
}

.slex-input-control:not([data-has-unit]):focus-within {
  box-shadow: none;
}

.slex-input-control:focus-within .slex-input,
.slex-input-control:focus-within .slex-input-unit {
  border-color: var(--ring);
}

.slex-input-field[data-invalid="true"] .slex-input-unit {
  border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
  color: color-mix(in oklab, var(--destructive) 84%, var(--muted-foreground));
}

.slex-input-field[data-invalid="true"] .slex-input-control:focus-within {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
}

.slex-input-field[data-invalid="true"] .slex-input-control:not([data-has-unit]):focus-within {
  box-shadow: none;
}

.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input,
.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-unit {
  border-color: var(--destructive);
}

.slex-input[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.slex-input[disabled] + .slex-input-unit {
  opacity: 0.5;
  cursor: not-allowed;
}

.slex-input-description {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  line-height: 1.35;
}

.slex-input-error {
  color: var(--destructive);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
}

/* components/select.css */

.slex-select {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: 0.5rem;
}

.slex-select-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
}

.slex-select-control {
  width: 100%;
  min-width: 0;
}

.slex-select .slex-select-trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 8%, transparent);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease;
  appearance: none;
  text-align: left;
}

.slex-select .slex-select-trigger:hover:not(:disabled) {
  background: color-mix(in oklab, var(--accent) 34%, var(--background));
}

.slex-select .slex-select-trigger:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 20%, transparent);
}

.slex-select .slex-select-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.slex-select-value {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slex-select-value[data-placeholder] {
  color: var(--muted-foreground);
}

.slex-select-icon {
  position: relative;
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.72;
}

.slex-select-icon::before {
  position: absolute;
  top: 0.2rem;
  left: 0.125rem;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.slex-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.slex-select-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  width: 100%;
  max-height: 14rem;
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
  border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: var(--radius);
  background: var(--popover, var(--background));
  color: var(--popover-foreground, var(--foreground));
  box-shadow: var(
    --shadow-md,
    0 6px 16px rgb(0 0 0 / 0.12),
    0 2px 4px rgb(0 0 0 / 0.08)
  );
  list-style: none;
}

.slexkit-root .slex-select-menu {
  margin: 0;
  padding: 0.25rem;
  list-style: none;
}

.slexkit-root .slex-select-menu li {
  margin: 0;
  list-style: none;
}

.slex-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2rem;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--radius) - 2px);
  color: var(--popover-foreground, var(--foreground));
  font-size: 0.875rem;
  line-height: 1.25rem;
  cursor: pointer;
  user-select: none;
}

.slex-select-option:hover:not([data-disabled]),
.slex-select-option--active:not([data-disabled]) {
  background: var(--accent);
  color: var(--accent-foreground);
}

.slex-select-option--selected {
  font-weight: 500;
}

.slex-select-option[data-disabled] {
  color: var(--muted-foreground);
  cursor: not-allowed;
  opacity: 0.52;
}

.slex-select-option-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slex-select-check {
  position: relative;
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  color: currentColor;
}

.slex-select-check::before {
  position: absolute;
  top: 0.25rem;
  left: 0.18rem;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  content: "";
  transform: rotate(-45deg);
}

.slex-select[data-variant="toolbar"] {
  height: 100%;
  gap: 0;
}

.slex-select[data-variant="toolbar"] .slex-select-trigger {
  height: var(--slex-control-height, 2.25rem);
  min-height: 0;
  border-width: 0 1px 0 0;
  border-color: color-mix(in oklab, var(--border) 58%, transparent);
  border-radius: 0;
  background: transparent;
  padding: 0 0.75rem 0 0.875rem;
  font-size: 0.8125rem;
  line-height: 1;
  box-shadow: none;
}

.slex-select[data-variant="toolbar"] .slex-select-trigger:hover:not(:disabled) {
  background: color-mix(in oklab, var(--muted) 36%, var(--background));
}

.slex-select[data-variant="toolbar"] .slex-select-menu {
  top: calc(100% + 0.25rem);
  left: 0;
  right: auto;
  width: 100%;
  min-width: 100%;
  border-color: color-mix(in oklab, var(--border) 76%, transparent);
  border-radius: calc(var(--radius) - 2px);
  padding: 0.25rem;
  box-shadow: var(
    --shadow-sm,
    0 4px 10px rgb(0 0 0 / 0.1),
    0 1px 3px rgb(0 0 0 / 0.06)
  );
}

.slex-select[data-variant="toolbar"] .slex-select-option {
  height: 1.875rem;
  border-radius: calc(var(--radius) - 4px);
  font-size: 0.8125rem;
  padding-inline: 0.75rem;
}

/* components/tabs.css */

.slex-tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
}

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

.slex-tabs-list {
  --slex-tabs-indicator-inline-inset: 12px;
  --slex-tabs-indicator-block-inset: 8px;
  position: relative;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.slexkit-root .slex-tabs-list {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slexkit-root .slex-tabs-list li {
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  list-style: none;
}

.slex-tabs-selected-indicator {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: var(--slex-tabs-indicator-width, 0);
  height: var(--slex-tabs-indicator-height, 0.125rem);
  border-radius: 999px;
  background: var(--primary);
  opacity: var(--slex-tabs-indicator-opacity, 0);
  pointer-events: none;
  transform: translate3d(var(--slex-tabs-indicator-x, 0), var(--slex-tabs-indicator-y, 0), 0);
}

.slex-tabs-list[data-indicator-ready="true"] .slex-tabs-selected-indicator {
  transition:
    transform var(--slex-tabs-indicator-duration, 140ms) var(--slex-motion-ease-standard, cubic-bezier(0.22, 1, 0.36, 1)),
    width var(--slex-tabs-indicator-duration, 140ms) var(--slex-motion-ease-standard, cubic-bezier(0.22, 1, 0.36, 1)),
    height var(--slex-tabs-indicator-duration, 140ms) var(--slex-motion-ease-standard, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity var(--slex-tabs-indicator-duration, 140ms) var(--slex-motion-ease-standard, cubic-bezier(0.22, 1, 0.36, 1));
}

.slex-tabs[data-orientation="vertical"] .slex-tabs-list {
  flex-direction: column;
  border-right: 1px solid var(--border);
  border-bottom: none;
}

.slex-tabs-trigger {
  position: relative;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted-foreground);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  user-select: none;
}

.slex-tabs-trigger--icon {
  display: inline-grid;
  width: var(--slex-control-height, 2.25rem);
  min-height: var(--slex-control-height, 2.25rem);
  place-items: center;
  padding-inline: 0;
}

.slex-tabs-trigger--with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.slex-tabs-trigger-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  color: currentColor;
}

.slex-tabs-trigger-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.slex-tabs-trigger:hover:not([data-disabled]) {
  background: transparent;
  color: var(--muted-foreground);
}

.slex-tabs-trigger.slex-tabs-trigger--selected {
  color: var(--primary);
}

.slex-tabs-trigger.slex-tabs-trigger--selected:hover:not([data-disabled]) {
  color: var(--primary);
}

.slex-tabs-trigger[data-disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.slex-tabs-trigger:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

.slex-tabs-content {
  margin-top: 0.75rem !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: var(--foreground);
  font-size: 0.875rem;
  line-height: 1.625;
  animation: slex-tabs-content-in 200ms ease-out;
}

.slex-tabs[data-orientation="vertical"] .slex-tabs-content {
  margin-top: 0 !important;
  margin-left: 0.75rem !important;
}

.slex-tabs-content:empty {
  display: none;
}

@keyframes slex-tabs-content-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slex-tabs-content[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .slex-tabs-list {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .slex-tabs-list::-webkit-scrollbar {
    display: none;
  }

  .slex-tabs[data-orientation="vertical"] {
    flex-direction: column;
  }

  .slex-tabs[data-orientation="vertical"] .slex-tabs-list {
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

}

/* components/choice.css */

.slex-checkbox-field,
.slex-radio-field {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--foreground);
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  transition: color 150ms ease, opacity 150ms ease;
}

.slex-checkbox-label,
.slex-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  color: var(--foreground);
  line-height: 1.35;
  transition: color 150ms ease;
}

.slex-checkbox,
.slex-radio {
  box-sizing: border-box;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 1.5px solid var(--input);
  color: var(--primary);
  accent-color: var(--primary);
  background: var(--background);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 120ms ease;
}

.slex-checkbox {
  border-radius: calc(var(--radius) - 4px);
}

.slex-radio {
  border-radius: 999px;
}

.slex-checkbox::after,
.slex-radio::after {
  content: "";
  display: block;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 120ms ease, transform 140ms ease;
}

.slex-checkbox::after {
  width: 0.55rem;
  height: 0.34rem;
  border: solid var(--primary-foreground);
  border-width: 0 0 2px 2px;
  transform: translateY(-0.08rem) rotate(-45deg) scale(0.5);
}

.slex-radio::after {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--primary-foreground);
}

.slex-checkbox-field:hover .slex-checkbox:not(:disabled),
.slex-radio-field:hover .slex-radio:not(:disabled) {
  border-color: color-mix(in oklab, var(--primary) 48%, var(--input));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 8%, transparent);
}

.slex-checkbox-field:active .slex-checkbox:not(:disabled),
.slex-radio-field:active .slex-radio:not(:disabled) {
  transform: scale(0.92);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 12%, transparent);
}

.slex-checkbox:checked,
.slex-radio:checked {
  border-color: var(--primary);
  background: var(--primary);
}

.slex-checkbox:checked::after,
.slex-radio:checked::after {
  opacity: 1;
}

.slex-checkbox:checked::after {
  transform: translateY(-0.08rem) rotate(-45deg) scale(1);
}

.slex-radio:checked::after {
  transform: scale(1);
}

.slex-checkbox-field:hover .slex-checkbox-label,
.slex-radio-field:hover .slex-radio-label {
  color: var(--foreground);
}

.slex-checkbox:focus-visible,
.slex-radio:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.slex-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.slex-radio-group-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
}

.slex-radio-group-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.slex-radio-group[data-orientation="horizontal"] .slex-radio-group-list {
  flex-direction: row;
  flex-wrap: wrap;
}

.slex-checkbox:disabled,
.slex-radio:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
  transform: none;
}

.slex-checkbox-field[data-disabled="true"],
.slex-radio-field[data-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.65;
}

.slex-radio-indicator {
  display: none;
}

/* disclosure.css */

.slex-accordion,
.slex-collapsible {
  width: 100%;
  color: var(--foreground);
}

.slex-accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}

.slex-accordion-inner {
  width: 100%;
}

.slex-accordion-item + .slex-accordion-item {
  border-top: 1px solid var(--border);
}

.slex-accordion .slex-accordion-heading {
  margin: 0;
  font: inherit;
}

.slex-accordion-trigger,
.slex-collapsible-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 36px;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.slex-accordion-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
}

.slex-collapsible-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
}

.slex-accordion-trigger:hover:not([data-disabled]),
.slex-collapsible-trigger:hover:not([data-disabled]) {
  background: var(--accent);
  color: var(--accent-foreground);
}

.slex-accordion-trigger:focus-visible,
.slex-collapsible-trigger:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

.slex-accordion-indicator,
.slex-collapsible-indicator {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 150ms ease;
  flex-shrink: 0;
}

.slex-accordion-trigger[data-state="open"] .slex-accordion-indicator,
.slex-accordion-trigger[aria-expanded="true"] .slex-accordion-indicator,
.slex-collapsible-trigger[data-state="open"] .slex-collapsible-indicator {
  transform: rotate(-135deg);
}

.slex-accordion-content,
.slex-collapsible-content {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.45;
}

.slex-accordion-content,
.slex-collapsible-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition:
    grid-template-rows 160ms ease,
    opacity 120ms ease,
    visibility 0s linear 160ms;
}

.slex-accordion-content[data-state="open"],
.slex-collapsible-content[data-state="open"] {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 160ms ease,
    opacity 120ms ease,
    visibility 0s;
}

.slex-accordion-content-inner,
.slex-collapsible-content-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 0.75rem;
  transition: padding-bottom 160ms ease;
}

.slex-accordion-content[data-state="open"] .slex-accordion-content-inner,
.slex-collapsible-content[data-state="open"] .slex-collapsible-content-inner {
  padding-bottom: var(--slex-disclosure-content-padding-bottom, 0.25rem);
}

.slex-collapsible {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

.slex-collapsible-content {
  --slex-disclosure-content-padding-bottom: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .slex-accordion-content,
  .slex-collapsible-content,
  .slex-accordion-trigger,
  .slex-collapsible-trigger,
  .slex-accordion-indicator,
  .slex-collapsible-indicator {
    transition: none;
  }

  .slex-accordion-content-inner,
  .slex-collapsible-content-inner {
    transition: none;
  }
}

/* feedback.css */

.slex-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  color: var(--foreground);
}

.slex-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.slex-progress-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
}

.slex-progress-value {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.slex-progress-track {
  overflow: hidden;
  width: 100%;
  height: 8px;
  border-radius: 9999px;
  background: var(--secondary);
}

.slex-progress-range {
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 180ms ease, transform 180ms ease;
}

.slex-progress[data-state="indeterminate"] .slex-progress-range {
  width: 40%;
  animation: slex-progress-indeterminate 1.2s ease-in-out infinite;
}

@keyframes slex-progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}

.slex-toast-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(24rem, 100%);
}

.slex-toast {
  display: grid;
  grid-template-columns: 0.25rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
  width: 100%;
  min-height: 4rem;
  padding: 0.875rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.slex-toast:hover {
  border-color: color-mix(in oklab, var(--primary) 20%, var(--border));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.slex-toast-mark {
  width: 0.25rem;
  min-height: 2.25rem;
  border-radius: 9999px;
  background: var(--info);
}

.slex-toast-icon {
  flex: 0 0 auto;
}

.slex-toast[data-tone="info"] .slex-toast-icon {
  color: var(--info);
}

.slex-toast[data-tone="success"] .slex-toast-icon {
  color: var(--success);
}

.slex-toast[data-tone="warning"] .slex-toast-icon {
  color: var(--warning);
}

.slex-toast[data-tone="danger"] .slex-toast-icon,
.slex-toast[data-tone="error"] .slex-toast-icon,
.slex-toast[data-tone="destructive"] .slex-toast-icon {
  color: var(--destructive);
}

.slex-toast-content {
  min-width: 0;
  padding: 0.0625rem 0;
}

.slex-toast[data-tone="info"] {
  border-color: color-mix(in oklab, var(--info) 24%, var(--border));
  background: color-mix(in oklab, var(--info) 5%, var(--background));
}

.slex-toast[data-tone="info"] .slex-toast-mark {
  background: var(--info);
}

.slex-toast[data-tone="success"] {
  border-color: color-mix(in oklab, var(--success) 24%, var(--border));
  background: color-mix(in oklab, var(--success) 5%, var(--background));
}

.slex-toast[data-tone="success"] .slex-toast-mark {
  background: var(--success);
}

.slex-toast[data-tone="warning"] {
  border-color: color-mix(in oklab, var(--warning) 26%, var(--border));
  background: color-mix(in oklab, var(--warning) 6%, var(--background));
}

.slex-toast[data-tone="warning"] .slex-toast-mark {
  background: var(--warning);
}

.slex-toast[data-tone="danger"],
.slex-toast[data-tone="error"],
.slex-toast[data-tone="destructive"] {
  border-color: color-mix(in oklab, var(--destructive) 28%, var(--border));
  background: color-mix(in oklab, var(--destructive) 6%, var(--background));
}

.slex-toast[data-tone="danger"] .slex-toast-mark,
.slex-toast[data-tone="error"] .slex-toast-mark,
.slex-toast[data-tone="destructive"] .slex-toast-mark {
  background: var(--destructive);
}

.slex-toast-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.slex-toast-description {
  margin-top: 0.125rem;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.slex-toast-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: calc(var(--radius) - 4px);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.slex-toast-close span {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
}

.slex-toast-close svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.slex-toast-close:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.slex-toast-close:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* animation.css */

@keyframes slex-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slex-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes slex-slide-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slex-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-8px);
  }
}

@keyframes slex-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.slex-fade-in {
  animation: slex-fade-in 0.3s ease-out;
}

.slex-fade-out {
  animation: slex-fade-out 0.3s ease-out;
}

.slex-slide-in {
  animation: slex-slide-in 0.3s ease-out;
}

.slex-slide-out {
  animation: slex-slide-out 0.3s ease-out;
}

.slex-pulse {
  animation: slex-pulse 2s ease-in-out infinite;
}

.slex-enter {
  animation-duration: 0.3s;
  animation-fill-mode: both;
}

@keyframes slex-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.slex-scale-in {
  animation-name: slex-scale-in;
}

@media (max-width: 640px) {
  .slex-card {
    padding: 1rem;
  }

  .slex-stat-value {
    font-size: 1.25rem;
  }
}

.slex-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  align-items: center;
  justify-content: center;
  color: currentColor;
  line-height: 1;
  flex-shrink: 0;
}

.slex-icon svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}