/* dist/slexkit.css */
@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: 0;
}

@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;
}

:root, :host {
  --colors-amber-100: oklch(96.2% .059 95.617);
  --colors-amber-200: oklch(92.4% .12 95.746);
  --colors-amber-300: oklch(87.9% .169 91.605);
  --colors-amber-400: oklch(82.8% .189 84.429);
  --colors-amber-500: oklch(76.9% .188 70.08);
  --colors-amber-600: oklch(66.6% .179 58.318);
  --colors-amber-700: oklch(55.5% .163 48.998);
  --colors-amber-800: oklch(47.3% .137 46.201);
  --colors-blue-100: oklch(93.2% .032 255.585);
  --colors-blue-200: oklch(88.2% .059 254.128);
  --colors-blue-300: oklch(80.9% .105 251.813);
  --colors-blue-400: oklch(70.7% .165 254.624);
  --colors-blue-500: oklch(62.3% .214 259.815);
  --colors-blue-600: oklch(54.6% .245 262.881);
  --colors-blue-800: oklch(42.4% .199 265.638);
  --colors-cyan-100: oklch(95.6% .045 203.388);
  --colors-cyan-200: oklch(91.7% .08 205.041);
  --colors-cyan-300: oklch(86.5% .127 207.078);
  --colors-cyan-400: oklch(78.9% .154 211.53);
  --colors-cyan-500: oklch(71.5% .143 215.221);
  --colors-cyan-600: oklch(60.9% .126 221.723);
  --colors-cyan-800: oklch(45% .085 224.283);
  --colors-emerald-100: oklch(95% .052 163.051);
  --colors-emerald-200: oklch(90.5% .093 164.15);
  --colors-emerald-300: oklch(84.5% .143 164.978);
  --colors-emerald-400: oklch(76.5% .177 163.223);
  --colors-emerald-500: oklch(69.6% .17 162.48);
  --colors-emerald-600: oklch(59.6% .145 163.225);
  --colors-emerald-800: oklch(43.2% .095 166.913);
  --colors-fuchsia-100: oklch(95.2% .037 318.852);
  --colors-fuchsia-200: oklch(90.3% .076 319.62);
  --colors-fuchsia-300: oklch(83.3% .145 321.434);
  --colors-fuchsia-400: oklch(74% .238 322.16);
  --colors-fuchsia-500: oklch(66.7% .295 322.15);
  --colors-fuchsia-600: oklch(59.1% .293 322.896);
  --colors-fuchsia-800: oklch(45.2% .211 324.591);
  --colors-gray-100: oklch(96.7% .003 264.542);
  --colors-gray-200: oklch(92.8% .006 264.531);
  --colors-gray-300: oklch(87.2% .01 258.338);
  --colors-gray-400: oklch(70.7% .022 261.325);
  --colors-gray-50: oklch(98.5% .002 247.839);
  --colors-gray-500: oklch(55.1% .027 264.364);
  --colors-gray-600: oklch(44.6% .03 256.802);
  --colors-gray-700: oklch(37.3% .034 259.733);
  --colors-gray-800: oklch(27.8% .033 256.848);
  --colors-gray-900: oklch(21% .034 264.665);
  --colors-green-100: oklch(96.2% .044 156.743);
  --colors-green-200: oklch(92.5% .084 155.995);
  --colors-green-300: oklch(87.1% .15 154.449);
  --colors-green-400: oklch(79.2% .209 151.711);
  --colors-green-500: oklch(72.3% .219 149.579);
  --colors-green-600: oklch(62.7% .194 149.214);
  --colors-green-800: oklch(44.8% .119 151.328);
  --colors-indigo-100: oklch(93% .034 272.788);
  --colors-indigo-200: oklch(87% .065 274.039);
  --colors-indigo-300: oklch(78.5% .115 274.713);
  --colors-indigo-400: oklch(67.3% .182 276.935);
  --colors-indigo-500: oklch(58.5% .233 277.117);
  --colors-indigo-600: oklch(51.1% .262 276.966);
  --colors-indigo-800: oklch(39.8% .195 277.366);
  --colors-lime-100: oklch(96.7% .067 122.328);
  --colors-lime-200: oklch(93.8% .127 124.321);
  --colors-lime-300: oklch(89.7% .196 126.665);
  --colors-lime-400: oklch(84.1% .238 128.85);
  --colors-lime-500: oklch(76.8% .233 130.85);
  --colors-lime-600: oklch(64.8% .2 131.684);
  --colors-lime-700: oklch(53.2% .157 131.589);
  --colors-lime-800: oklch(45.3% .124 130.933);
  --colors-orange-100: oklch(95.4% .038 75.164);
  --colors-orange-200: oklch(90.1% .076 70.697);
  --colors-orange-300: oklch(83.7% .128 66.29);
  --colors-orange-400: oklch(75% .183 55.934);
  --colors-orange-500: oklch(70.5% .213 47.604);
  --colors-orange-600: oklch(64.6% .222 41.116);
  --colors-orange-700: oklch(55.3% .195 38.402);
  --colors-orange-800: oklch(47% .157 37.304);
  --colors-pink-100: oklch(94.8% .028 342.258);
  --colors-pink-200: oklch(89.9% .061 343.231);
  --colors-pink-300: oklch(82.3% .12 346.018);
  --colors-pink-400: oklch(71.8% .202 349.761);
  --colors-pink-500: oklch(65.6% .241 354.308);
  --colors-pink-600: oklch(59.2% .249 .584);
  --colors-pink-700: oklch(52.5% .223 3.958);
  --colors-pink-800: oklch(45.9% .187 3.815);
  --colors-purple-100: oklch(94.6% .033 307.174);
  --colors-purple-200: oklch(90.2% .063 306.703);
  --colors-purple-300: oklch(82.7% .119 306.383);
  --colors-purple-400: oklch(71.4% .203 305.504);
  --colors-purple-500: oklch(62.7% .265 303.9);
  --colors-purple-600: oklch(55.8% .288 302.321);
  --colors-purple-800: oklch(43.8% .218 303.724);
  --colors-red-100: oklch(93.6% .032 17.717);
  --colors-red-200: oklch(88.5% .062 18.334);
  --colors-red-300: oklch(80.8% .114 19.571);
  --colors-red-400: oklch(70.4% .191 22.216);
  --colors-red-500: oklch(63.7% .237 25.331);
  --colors-red-600: oklch(57.7% .245 27.325);
  --colors-red-800: oklch(44.4% .177 26.899);
  --colors-rose-100: oklch(94.1% .03 12.58);
  --colors-rose-200: oklch(89.2% .058 10.001);
  --colors-rose-300: oklch(81% .117 11.638);
  --colors-rose-400: oklch(71.2% .194 13.428);
  --colors-rose-500: oklch(64.5% .246 16.439);
  --colors-rose-600: oklch(58.6% .253 17.585);
  --colors-rose-700: oklch(51.4% .222 16.935);
  --colors-rose-800: oklch(45.5% .188 13.697);
  --colors-sky-100: oklch(95.1% .026 236.824);
  --colors-sky-200: oklch(90.1% .058 230.902);
  --colors-sky-300: oklch(82.8% .111 230.318);
  --colors-sky-400: oklch(74.6% .16 232.661);
  --colors-sky-500: oklch(68.5% .169 237.323);
  --colors-sky-600: oklch(58.8% .158 241.966);
  --colors-sky-800: oklch(44.3% .11 240.79);
  --colors-teal-100: oklch(95.3% .051 180.801);
  --colors-teal-200: oklch(91% .096 180.426);
  --colors-teal-300: oklch(85.5% .138 181.071);
  --colors-teal-400: oklch(77.7% .152 181.912);
  --colors-teal-500: oklch(70.4% .14 182.503);
  --colors-teal-600: oklch(60% .118 184.704);
  --colors-teal-800: oklch(43.7% .078 188.216);
  --colors-violet-100: oklch(94.3% .029 294.588);
  --colors-violet-200: oklch(89.4% .057 293.283);
  --colors-violet-300: oklch(81.1% .111 293.571);
  --colors-violet-400: oklch(70.2% .183 293.541);
  --colors-violet-500: oklch(60.6% .25 292.717);
  --colors-violet-600: oklch(54.1% .281 293.009);
  --colors-violet-800: oklch(43.2% .232 292.759);
  --colors-white: #fff;
  --colors-yellow-100: oklch(97.3% .071 103.193);
  --colors-yellow-200: oklch(94.5% .129 101.54);
  --colors-yellow-300: oklch(90.5% .182 98.111);
  --colors-yellow-400: oklch(85.2% .199 91.936);
  --colors-yellow-500: oklch(79.5% .184 86.047);
  --colors-yellow-600: oklch(68.1% .162 75.834);
  --colors-yellow-800: oklch(47.6% .114 61.907);
  --container-xs: 20rem;
  --default-transition-duration: .15s;
  --default-transition-timingFunction: cubic-bezier(.4, 0, .2, 1);
  --fontWeight-medium: 500;
  --fontWeight-normal: 400;
  --fontWeight-semibold: 600;
  --radius-DEFAULT: .25rem;
  --radius-lg: .5rem;
  --radius-md: .375rem;
  --radius-none: 0;
  --radius-sm: .25rem;
  --radius-xl: .75rem;
  --radius-xs: .125rem;
  --spacing: .25rem;
  --text-sm-fontSize: .875rem;
  --text-sm-lineHeight: 1.25rem;
  --tracking-normal: 0em;
}

:root {
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
}

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

.slexkit-theme-uno, .slexkit-theme-flowbite, body.slexkit-theme-uno {
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
  --background: #fff;
  --foreground: oklch(14.1% .005 285.823);
  --card: #fff;
  --card-foreground: oklch(14.1% .005 285.823);
  --popover: #fff;
  --popover-foreground: oklch(14.1% .005 285.823);
  --primary: oklch(21% .006 285.885);
  --primary-foreground: oklch(98.5% 0 0);
  --secondary: oklch(96.7% .001 286.375);
  --secondary-foreground: oklch(21% .006 285.885);
  --muted: oklch(96.7% .001 286.375);
  --muted-foreground: oklch(55.2% .016 285.938);
  --accent: oklch(96.7% .001 286.375);
  --accent-foreground: oklch(21% .006 285.885);
  --info: oklch(48.8% .243 264.376);
  --info-foreground: #fff;
  --success: oklch(59.6% .145 163.225);
  --success-foreground: #fff;
  --warning: oklch(66.6% .179 58.318);
  --warning-foreground: oklch(14.1% .005 285.823);
  --destructive: oklch(57.7% .245 27.325);
  --destructive-foreground: oklch(98.5% 0 0);
  --border: oklch(92% .004 286.32);
  --input: oklch(92% .004 286.32);
  --ring: oklch(14.1% .005 285.823);
  --radius: .5rem;
  --slex-control-height: 2.25rem;
  --slex-primary-50: oklch(98.5% 0 0);
  --slex-primary-100: oklch(96.7% .001 286.375);
  --slex-primary-200: oklch(92% .004 286.32);
  --slex-primary-300: oklch(87.1% .006 286.286);
  --slex-primary-400: oklch(70.5% .015 286.067);
  --slex-primary-500: oklch(55.2% .016 285.938);
  --slex-primary-600: oklch(44.2% .017 285.786);
  --slex-primary-700: oklch(37% .013 285.805);
  --slex-primary-800: oklch(27.4% .006 286.033);
  --slex-primary-900: oklch(21% .006 285.885);
  --slex-primary-950: oklch(14.1% .005 285.823);
}

:where(.dark, [data-theme="dark"]) .slexkit-theme-uno {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  --background: oklch(14.1% .005 285.823);
  --foreground: oklch(98.5% 0 0);
  --card: oklch(21% .006 285.885);
  --card-foreground: oklch(98.5% 0 0);
  --popover: oklch(21% .006 285.885);
  --popover-foreground: oklch(98.5% 0 0);
  --primary: oklch(98.5% 0 0);
  --primary-foreground: oklch(14.1% .005 285.823);
  --secondary: oklch(27.4% .006 286.033);
  --secondary-foreground: oklch(98.5% 0 0);
  --muted: oklch(27.4% .006 286.033);
  --muted-foreground: oklch(70.5% .015 286.067);
  --accent: oklch(27.4% .006 286.033);
  --accent-foreground: oklch(98.5% 0 0);
  --info: oklch(62.3% .214 259.815);
  --info-foreground: oklch(14.1% .005 285.823);
  --success: oklch(76.5% .177 163.223);
  --success-foreground: oklch(14.1% .005 285.823);
  --warning: oklch(82.8% .189 84.429);
  --warning-foreground: oklch(14.1% .005 285.823);
  --destructive: oklch(70.4% .191 22.216);
  --destructive-foreground: oklch(14.1% .005 285.823);
  --border: oklch(27.4% .006 286.033);
  --input: oklch(37% .013 285.805);
  --ring: oklch(87.1% .006 286.286);
  --radius: .5rem;
  --slex-control-height: 2.25rem;
  --slex-primary-50: oklch(98.5% 0 0);
  --slex-primary-100: oklch(96.7% .001 286.375);
  --slex-primary-200: oklch(92% .004 286.32);
  --slex-primary-300: oklch(87.1% .006 286.286);
  --slex-primary-400: oklch(70.5% .015 286.067);
  --slex-primary-500: oklch(55.2% .016 285.938);
  --slex-primary-600: oklch(44.2% .017 285.786);
  --slex-primary-700: oklch(37% .013 285.805);
  --slex-primary-800: oklch(27.4% .006 286.033);
  --slex-primary-900: oklch(21% .006 285.885);
  --slex-primary-950: oklch(14.1% .005 285.823);
}

.slexkit-theme-uno:where(.dark, [data-theme="dark"]) {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  --background: oklch(14.1% .005 285.823);
  --foreground: oklch(98.5% 0 0);
  --card: oklch(21% .006 285.885);
  --card-foreground: oklch(98.5% 0 0);
  --popover: oklch(21% .006 285.885);
  --popover-foreground: oklch(98.5% 0 0);
  --primary: oklch(98.5% 0 0);
  --primary-foreground: oklch(14.1% .005 285.823);
  --secondary: oklch(27.4% .006 286.033);
  --secondary-foreground: oklch(98.5% 0 0);
  --muted: oklch(27.4% .006 286.033);
  --muted-foreground: oklch(70.5% .015 286.067);
  --accent: oklch(27.4% .006 286.033);
  --accent-foreground: oklch(98.5% 0 0);
  --info: oklch(62.3% .214 259.815);
  --info-foreground: oklch(14.1% .005 285.823);
  --success: oklch(76.5% .177 163.223);
  --success-foreground: oklch(14.1% .005 285.823);
  --warning: oklch(82.8% .189 84.429);
  --warning-foreground: oklch(14.1% .005 285.823);
  --destructive: oklch(70.4% .191 22.216);
  --destructive-foreground: oklch(14.1% .005 285.823);
  --border: oklch(27.4% .006 286.033);
  --input: oklch(37% .013 285.805);
  --ring: oklch(87.1% .006 286.286);
  --radius: .5rem;
  --slex-control-height: 2.25rem;
  --slex-primary-50: oklch(98.5% 0 0);
  --slex-primary-100: oklch(96.7% .001 286.375);
  --slex-primary-200: oklch(92% .004 286.32);
  --slex-primary-300: oklch(87.1% .006 286.286);
  --slex-primary-400: oklch(70.5% .015 286.067);
  --slex-primary-500: oklch(55.2% .016 285.938);
  --slex-primary-600: oklch(44.2% .017 285.786);
  --slex-primary-700: oklch(37% .013 285.805);
  --slex-primary-800: oklch(27.4% .006 286.033);
  --slex-primary-900: oklch(21% .006 285.885);
  --slex-primary-950: oklch(14.1% .005 285.823);
}

:where(.dark, [data-theme="dark"]) .slexkit-theme-flowbite {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  --background: oklch(14.1% .005 285.823);
  --foreground: oklch(98.5% 0 0);
  --card: oklch(21% .006 285.885);
  --card-foreground: oklch(98.5% 0 0);
  --popover: oklch(21% .006 285.885);
  --popover-foreground: oklch(98.5% 0 0);
  --primary: oklch(98.5% 0 0);
  --primary-foreground: oklch(14.1% .005 285.823);
  --secondary: oklch(27.4% .006 286.033);
  --secondary-foreground: oklch(98.5% 0 0);
  --muted: oklch(27.4% .006 286.033);
  --muted-foreground: oklch(70.5% .015 286.067);
  --accent: oklch(27.4% .006 286.033);
  --accent-foreground: oklch(98.5% 0 0);
  --info: oklch(62.3% .214 259.815);
  --info-foreground: oklch(14.1% .005 285.823);
  --success: oklch(76.5% .177 163.223);
  --success-foreground: oklch(14.1% .005 285.823);
  --warning: oklch(82.8% .189 84.429);
  --warning-foreground: oklch(14.1% .005 285.823);
  --destructive: oklch(70.4% .191 22.216);
  --destructive-foreground: oklch(14.1% .005 285.823);
  --border: oklch(27.4% .006 286.033);
  --input: oklch(37% .013 285.805);
  --ring: oklch(87.1% .006 286.286);
  --radius: .5rem;
  --slex-control-height: 2.25rem;
  --slex-primary-50: oklch(98.5% 0 0);
  --slex-primary-100: oklch(96.7% .001 286.375);
  --slex-primary-200: oklch(92% .004 286.32);
  --slex-primary-300: oklch(87.1% .006 286.286);
  --slex-primary-400: oklch(70.5% .015 286.067);
  --slex-primary-500: oklch(55.2% .016 285.938);
  --slex-primary-600: oklch(44.2% .017 285.786);
  --slex-primary-700: oklch(37% .013 285.805);
  --slex-primary-800: oklch(27.4% .006 286.033);
  --slex-primary-900: oklch(21% .006 285.885);
  --slex-primary-950: oklch(14.1% .005 285.823);
}

.slexkit-theme-flowbite:where(.dark, [data-theme="dark"]) {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  --background: oklch(14.1% .005 285.823);
  --foreground: oklch(98.5% 0 0);
  --card: oklch(21% .006 285.885);
  --card-foreground: oklch(98.5% 0 0);
  --popover: oklch(21% .006 285.885);
  --popover-foreground: oklch(98.5% 0 0);
  --primary: oklch(98.5% 0 0);
  --primary-foreground: oklch(14.1% .005 285.823);
  --secondary: oklch(27.4% .006 286.033);
  --secondary-foreground: oklch(98.5% 0 0);
  --muted: oklch(27.4% .006 286.033);
  --muted-foreground: oklch(70.5% .015 286.067);
  --accent: oklch(27.4% .006 286.033);
  --accent-foreground: oklch(98.5% 0 0);
  --info: oklch(62.3% .214 259.815);
  --info-foreground: oklch(14.1% .005 285.823);
  --success: oklch(76.5% .177 163.223);
  --success-foreground: oklch(14.1% .005 285.823);
  --warning: oklch(82.8% .189 84.429);
  --warning-foreground: oklch(14.1% .005 285.823);
  --destructive: oklch(70.4% .191 22.216);
  --destructive-foreground: oklch(14.1% .005 285.823);
  --border: oklch(27.4% .006 286.033);
  --input: oklch(37% .013 285.805);
  --ring: oklch(87.1% .006 286.286);
  --radius: .5rem;
  --slex-control-height: 2.25rem;
  --slex-primary-50: oklch(98.5% 0 0);
  --slex-primary-100: oklch(96.7% .001 286.375);
  --slex-primary-200: oklch(92% .004 286.32);
  --slex-primary-300: oklch(87.1% .006 286.286);
  --slex-primary-400: oklch(70.5% .015 286.067);
  --slex-primary-500: oklch(55.2% .016 285.938);
  --slex-primary-600: oklch(44.2% .017 285.786);
  --slex-primary-700: oklch(37% .013 285.805);
  --slex-primary-800: oklch(27.4% .006 286.033);
  --slex-primary-900: oklch(21% .006 285.885);
  --slex-primary-950: oklch(14.1% .005 285.823);
}

:where(.dark, [data-theme="dark"]) body.slexkit-theme-uno {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  --background: oklch(14.1% .005 285.823);
  --foreground: oklch(98.5% 0 0);
  --card: oklch(21% .006 285.885);
  --card-foreground: oklch(98.5% 0 0);
  --popover: oklch(21% .006 285.885);
  --popover-foreground: oklch(98.5% 0 0);
  --primary: oklch(98.5% 0 0);
  --primary-foreground: oklch(14.1% .005 285.823);
  --secondary: oklch(27.4% .006 286.033);
  --secondary-foreground: oklch(98.5% 0 0);
  --muted: oklch(27.4% .006 286.033);
  --muted-foreground: oklch(70.5% .015 286.067);
  --accent: oklch(27.4% .006 286.033);
  --accent-foreground: oklch(98.5% 0 0);
  --info: oklch(62.3% .214 259.815);
  --info-foreground: oklch(14.1% .005 285.823);
  --success: oklch(76.5% .177 163.223);
  --success-foreground: oklch(14.1% .005 285.823);
  --warning: oklch(82.8% .189 84.429);
  --warning-foreground: oklch(14.1% .005 285.823);
  --destructive: oklch(70.4% .191 22.216);
  --destructive-foreground: oklch(14.1% .005 285.823);
  --border: oklch(27.4% .006 286.033);
  --input: oklch(37% .013 285.805);
  --ring: oklch(87.1% .006 286.286);
  --radius: .5rem;
  --slex-control-height: 2.25rem;
  --slex-primary-50: oklch(98.5% 0 0);
  --slex-primary-100: oklch(96.7% .001 286.375);
  --slex-primary-200: oklch(92% .004 286.32);
  --slex-primary-300: oklch(87.1% .006 286.286);
  --slex-primary-400: oklch(70.5% .015 286.067);
  --slex-primary-500: oklch(55.2% .016 285.938);
  --slex-primary-600: oklch(44.2% .017 285.786);
  --slex-primary-700: oklch(37% .013 285.805);
  --slex-primary-800: oklch(27.4% .006 286.033);
  --slex-primary-900: oklch(21% .006 285.885);
  --slex-primary-950: oklch(14.1% .005 285.823);
}

body.slexkit-theme-uno:where(.dark, [data-theme="dark"]) {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  --background: oklch(14.1% .005 285.823);
  --foreground: oklch(98.5% 0 0);
  --card: oklch(21% .006 285.885);
  --card-foreground: oklch(98.5% 0 0);
  --popover: oklch(21% .006 285.885);
  --popover-foreground: oklch(98.5% 0 0);
  --primary: oklch(98.5% 0 0);
  --primary-foreground: oklch(14.1% .005 285.823);
  --secondary: oklch(27.4% .006 286.033);
  --secondary-foreground: oklch(98.5% 0 0);
  --muted: oklch(27.4% .006 286.033);
  --muted-foreground: oklch(70.5% .015 286.067);
  --accent: oklch(27.4% .006 286.033);
  --accent-foreground: oklch(98.5% 0 0);
  --info: oklch(62.3% .214 259.815);
  --info-foreground: oklch(14.1% .005 285.823);
  --success: oklch(76.5% .177 163.223);
  --success-foreground: oklch(14.1% .005 285.823);
  --warning: oklch(82.8% .189 84.429);
  --warning-foreground: oklch(14.1% .005 285.823);
  --destructive: oklch(70.4% .191 22.216);
  --destructive-foreground: oklch(14.1% .005 285.823);
  --border: oklch(27.4% .006 286.033);
  --input: oklch(37% .013 285.805);
  --ring: oklch(87.1% .006 286.286);
  --radius: .5rem;
  --slex-control-height: 2.25rem;
  --slex-primary-50: oklch(98.5% 0 0);
  --slex-primary-100: oklch(96.7% .001 286.375);
  --slex-primary-200: oklch(92% .004 286.32);
  --slex-primary-300: oklch(87.1% .006 286.286);
  --slex-primary-400: oklch(70.5% .015 286.067);
  --slex-primary-500: oklch(55.2% .016 285.938);
  --slex-primary-600: oklch(44.2% .017 285.786);
  --slex-primary-700: oklch(37% .013 285.805);
  --slex-primary-800: oklch(27.4% .006 286.033);
  --slex-primary-900: oklch(21% .006 285.885);
  --slex-primary-950: oklch(14.1% .005 285.823);
}

.site-example-desc {
  color: color-mix(in srgb, var(--muted-foreground) var(--un-text-opacity), transparent);
  margin-top: calc(var(--spacing) * 2);
  font-size: 13px;
}

.site-example-title {
  --un-tracking: var(--tracking-normal);
  letter-spacing: var(--tracking-normal);
  --un-font-weight: var(--fontWeight-semibold);
  font-size: 15px;
  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-radius: var(--radius-md);
  --un-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));
  border: 1px solid #0000;
  justify-content: center;
  align-items:  center;
}

.site-example-card {
  color: color-mix(in srgb, var(--card-foreground) var(--un-text-opacity), transparent);
  padding: calc(var(--spacing) * 4);
  border-width: 1px;
  border-color: color-mix(in srgb, var(--border) var(--un-border-opacity), transparent);
  border-radius: var(--radius-lg);
  --un-border-style: solid;
  background-color: color-mix(in srgb, var(--card) var(--un-bg-opacity), transparent);
  display: flex;
  cursor: pointer;
  --un-shadow: 0 1px 3px 0 var(--un-shadow-color, #0000001a), 0 1px 2px -1px var(--un-shadow-color, #0000001a);
  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));
  border-style: solid;
  flex-direction: column;
  min-height: 92px;
}

.ui-button-outline {
  color: color-mix(in srgb, var(--foreground) var(--un-text-opacity), transparent);
  border-width: 1px;
  border-color: color-mix(in srgb, var(--input) var(--un-border-opacity), transparent);
  background-color: color-mix(in srgb, var(--background) var(--un-bg-opacity), transparent);
  --un-shadow: 0 1px 3px 0 var(--un-shadow-color, #0000001a), 0 1px 2px -1px var(--un-shadow-color, #0000001a);
  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);
  border-width: 1px;
  border-color: color-mix(in srgb, var(--primary) var(--un-border-opacity), transparent);
  background-color: color-mix(in srgb, var(--primary) var(--un-bg-opacity), transparent);
  --un-shadow: 0 1px 3px 0 var(--un-shadow-color, #0000001a), 0 1px 2px -1px var(--un-shadow-color, #0000001a);
  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);
  background-color: color-mix(in srgb, var(--secondary) var(--un-bg-opacity), transparent);
  --un-shadow: 0 1px 3px 0 var(--un-shadow-color, #0000001a), 0 1px 2px -1px var(--un-shadow-color, #0000001a);
  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, .ui-button-outline:hover, .ui-button-secondary:hover {
  color: color-mix(in srgb, var(--accent-foreground) var(--un-text-opacity), transparent);
  background-color: color-mix(in srgb, var(--accent) var(--un-bg-opacity), transparent);
}

.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);
  --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);
}

.ui-button-primary:hover {
  opacity: .9;
}

.ui-button:disabled {
  opacity: .5;
  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;
  }
}

.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);
}

.dark .dark\:text-blue-200 {
  color: color-mix(in srgb, var(--colors-blue-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-cyan-200 {
  color: color-mix(in srgb, var(--colors-cyan-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-emerald-200 {
  color: color-mix(in srgb, var(--colors-emerald-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-fuchsia-200 {
  color: color-mix(in srgb, var(--colors-fuchsia-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-gray-200 {
  color: color-mix(in srgb, var(--colors-gray-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-gray-400, .text-gray-400 {
  color: color-mix(in srgb, var(--colors-gray-400) var(--un-text-opacity), transparent);
}

.dark .dark\:text-gray-500, .text-gray-500 {
  color: color-mix(in srgb, var(--colors-gray-500) var(--un-text-opacity), transparent);
}

.dark .dark\:text-green-200 {
  color: color-mix(in srgb, var(--colors-green-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-indigo-200 {
  color: color-mix(in srgb, var(--colors-indigo-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-lime-200 {
  color: color-mix(in srgb, var(--colors-lime-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-orange-200 {
  color: color-mix(in srgb, var(--colors-orange-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-pink-200 {
  color: color-mix(in srgb, var(--colors-pink-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-primary-200 {
  color: color-mix(in srgb, var(--slex-primary-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-primary-400 {
  color: color-mix(in srgb, var(--slex-primary-400) var(--un-text-opacity), transparent);
}

.dark .dark\:text-primary-500, .text-primary-500 {
  color: color-mix(in srgb, var(--slex-primary-500) var(--un-text-opacity), transparent);
}

.dark .dark\:text-purple-200 {
  color: color-mix(in srgb, var(--colors-purple-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-red-200 {
  color: color-mix(in srgb, var(--colors-red-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-rose-200 {
  color: color-mix(in srgb, var(--colors-rose-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-sky-200 {
  color: color-mix(in srgb, var(--colors-sky-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-teal-200 {
  color: color-mix(in srgb, var(--colors-teal-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-violet-200 {
  color: color-mix(in srgb, var(--colors-violet-200) var(--un-text-opacity), transparent);
}

.dark .dark\:text-white, .text-white {
  color: color-mix(in srgb, var(--colors-white) var(--un-text-opacity), transparent);
}

.dark .dark\:text-yellow-200 {
  color: color-mix(in srgb, var(--colors-yellow-200) var(--un-text-opacity), transparent);
}

.text-accent-foreground {
  color: color-mix(in srgb, var(--accent-foreground) var(--un-text-opacity), transparent);
}

.text-amber-500 {
  color: color-mix(in srgb, var(--colors-amber-500) var(--un-text-opacity), transparent);
}

.text-blue-500 {
  color: color-mix(in srgb, var(--colors-blue-500) var(--un-text-opacity), transparent);
}

.text-cyan-500 {
  color: color-mix(in srgb, var(--colors-cyan-500) var(--un-text-opacity), transparent);
}

.text-emerald-500 {
  color: color-mix(in srgb, var(--colors-emerald-500) var(--un-text-opacity), transparent);
}

.text-fuchsia-500 {
  color: color-mix(in srgb, var(--colors-fuchsia-500) var(--un-text-opacity), transparent);
}

.text-gray-800 {
  color: color-mix(in srgb, var(--colors-gray-800) var(--un-text-opacity), transparent);
}

.text-gray-900 {
  color: color-mix(in srgb, var(--colors-gray-900) var(--un-text-opacity), transparent);
}

.text-green-500 {
  color: color-mix(in srgb, var(--colors-green-500) var(--un-text-opacity), transparent);
}

.text-indigo-500 {
  color: color-mix(in srgb, var(--colors-indigo-500) var(--un-text-opacity), transparent);
}

.text-lime-500 {
  color: color-mix(in srgb, var(--colors-lime-500) var(--un-text-opacity), transparent);
}

.text-orange-500 {
  color: color-mix(in srgb, var(--colors-orange-500) var(--un-text-opacity), transparent);
}

.text-pink-500 {
  color: color-mix(in srgb, var(--colors-pink-500) var(--un-text-opacity), transparent);
}

.text-primary-600 {
  color: color-mix(in srgb, var(--slex-primary-600) var(--un-text-opacity), transparent);
}

.text-purple-500 {
  color: color-mix(in srgb, var(--colors-purple-500) var(--un-text-opacity), transparent);
}

.text-red-500 {
  color: color-mix(in srgb, var(--colors-red-500) var(--un-text-opacity), transparent);
}

.text-rose-500 {
  color: color-mix(in srgb, var(--colors-rose-500) var(--un-text-opacity), transparent);
}

.text-sky-500 {
  color: color-mix(in srgb, var(--colors-sky-500) var(--un-text-opacity), transparent);
}

.text-teal-500 {
  color: color-mix(in srgb, var(--colors-teal-500) var(--un-text-opacity), transparent);
}

.text-violet-500 {
  color: color-mix(in srgb, var(--colors-violet-500) var(--un-text-opacity), transparent);
}

.text-yellow-500 {
  color: color-mix(in srgb, var(--colors-yellow-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-amber-300:hover {
  color: color-mix(in srgb, var(--colors-amber-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-amber-500:hover {
  color: color-mix(in srgb, var(--colors-amber-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-blue-300:hover {
  color: color-mix(in srgb, var(--colors-blue-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-blue-500:hover {
  color: color-mix(in srgb, var(--colors-blue-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-cyan-300:hover {
  color: color-mix(in srgb, var(--colors-cyan-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-cyan-500:hover {
  color: color-mix(in srgb, var(--colors-cyan-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-emerald-300:hover {
  color: color-mix(in srgb, var(--colors-emerald-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-emerald-500:hover {
  color: color-mix(in srgb, var(--colors-emerald-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-fuchsia-300:hover {
  color: color-mix(in srgb, var(--colors-fuchsia-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-fuchsia-500:hover {
  color: color-mix(in srgb, var(--colors-fuchsia-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-gray-300:hover {
  color: color-mix(in srgb, var(--colors-gray-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-gray-500:hover {
  color: color-mix(in srgb, var(--colors-gray-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-green-300:hover {
  color: color-mix(in srgb, var(--colors-green-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-green-500:hover {
  color: color-mix(in srgb, var(--colors-green-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-indigo-300:hover {
  color: color-mix(in srgb, var(--colors-indigo-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-indigo-500:hover {
  color: color-mix(in srgb, var(--colors-indigo-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-lime-300:hover {
  color: color-mix(in srgb, var(--colors-lime-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-lime-500:hover {
  color: color-mix(in srgb, var(--colors-lime-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-orange-300:hover {
  color: color-mix(in srgb, var(--colors-orange-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-orange-500:hover {
  color: color-mix(in srgb, var(--colors-orange-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-pink-300:hover {
  color: color-mix(in srgb, var(--colors-pink-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-pink-500:hover {
  color: color-mix(in srgb, var(--colors-pink-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-primary-300:hover {
  color: color-mix(in srgb, var(--slex-primary-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-primary-500:hover {
  color: color-mix(in srgb, var(--slex-primary-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-purple-300:hover {
  color: color-mix(in srgb, var(--colors-purple-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-purple-500:hover {
  color: color-mix(in srgb, var(--colors-purple-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-red-300:hover {
  color: color-mix(in srgb, var(--colors-red-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-red-500:hover {
  color: color-mix(in srgb, var(--colors-red-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-rose-300:hover {
  color: color-mix(in srgb, var(--colors-rose-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-rose-500:hover {
  color: color-mix(in srgb, var(--colors-rose-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-sky-300:hover {
  color: color-mix(in srgb, var(--colors-sky-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-sky-500:hover {
  color: color-mix(in srgb, var(--colors-sky-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-teal-300:hover {
  color: color-mix(in srgb, var(--colors-teal-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-teal-500:hover {
  color: color-mix(in srgb, var(--colors-teal-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-violet-300:hover {
  color: color-mix(in srgb, var(--colors-violet-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-violet-500:hover {
  color: color-mix(in srgb, var(--colors-violet-500) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-white:hover {
  color: color-mix(in srgb, var(--colors-white) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-yellow-300:hover {
  color: color-mix(in srgb, var(--colors-yellow-300) var(--un-text-opacity), transparent);
}

.dark .dark\:hover\:text-yellow-500:hover {
  color: color-mix(in srgb, var(--colors-yellow-500) var(--un-text-opacity), transparent);
}

.hover\:text-amber-600:hover {
  color: color-mix(in srgb, var(--colors-amber-600) var(--un-text-opacity), transparent);
}

.hover\:text-blue-600:hover {
  color: color-mix(in srgb, var(--colors-blue-600) var(--un-text-opacity), transparent);
}

.hover\:text-cyan-600:hover {
  color: color-mix(in srgb, var(--colors-cyan-600) var(--un-text-opacity), transparent);
}

.hover\:text-emerald-600:hover {
  color: color-mix(in srgb, var(--colors-emerald-600) var(--un-text-opacity), transparent);
}

.hover\:text-fuchsia-600:hover {
  color: color-mix(in srgb, var(--colors-fuchsia-600) var(--un-text-opacity), transparent);
}

.hover\:text-gray-600:hover {
  color: color-mix(in srgb, var(--colors-gray-600) var(--un-text-opacity), transparent);
}

.hover\:text-gray-700:hover {
  color: color-mix(in srgb, var(--colors-gray-700) var(--un-text-opacity), transparent);
}

.hover\:text-gray-900:hover {
  color: color-mix(in srgb, var(--colors-gray-900) var(--un-text-opacity), transparent);
}

.hover\:text-green-600:hover {
  color: color-mix(in srgb, var(--colors-green-600) var(--un-text-opacity), transparent);
}

.hover\:text-indigo-600:hover {
  color: color-mix(in srgb, var(--colors-indigo-600) var(--un-text-opacity), transparent);
}

.hover\:text-lime-600:hover {
  color: color-mix(in srgb, var(--colors-lime-600) var(--un-text-opacity), transparent);
}

.hover\:text-orange-600:hover {
  color: color-mix(in srgb, var(--colors-orange-600) var(--un-text-opacity), transparent);
}

.hover\:text-pink-600:hover {
  color: color-mix(in srgb, var(--colors-pink-600) var(--un-text-opacity), transparent);
}

.hover\:text-primary-600:hover {
  color: color-mix(in srgb, var(--slex-primary-600) var(--un-text-opacity), transparent);
}

.hover\:text-purple-600:hover {
  color: color-mix(in srgb, var(--colors-purple-600) var(--un-text-opacity), transparent);
}

.hover\:text-red-600:hover {
  color: color-mix(in srgb, var(--colors-red-600) var(--un-text-opacity), transparent);
}

.hover\:text-rose-600:hover {
  color: color-mix(in srgb, var(--colors-rose-600) var(--un-text-opacity), transparent);
}

.hover\:text-sky-600:hover {
  color: color-mix(in srgb, var(--colors-sky-600) var(--un-text-opacity), transparent);
}

.hover\:text-teal-600:hover {
  color: color-mix(in srgb, var(--colors-teal-600) var(--un-text-opacity), transparent);
}

.hover\:text-violet-600:hover {
  color: color-mix(in srgb, var(--colors-violet-600) var(--un-text-opacity), transparent);
}

.hover\:text-yellow-600:hover {
  color: color-mix(in srgb, var(--colors-yellow-600) var(--un-text-opacity), transparent);
}

.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) * .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) * .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);
}

.border-primary-600 {
  border-color: color-mix(in srgb, var(--slex-primary-600) var(--un-border-opacity), transparent);
}

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

.dark .dark\:border-gray-700 {
  border-color: color-mix(in srgb, var(--colors-gray-700) var(--un-border-opacity), transparent);
}

.dark .dark\:border-primary-500 {
  border-color: color-mix(in srgb, var(--slex-primary-500) var(--un-border-opacity), transparent);
}

.hover\:border-gray-300:hover {
  border-color: color-mix(in srgb, var(--colors-gray-300) var(--un-border-opacity), transparent);
}

.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:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}

.group:first-child .group-first\:rounded-s-lg:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}

.group:first-child .group-first\:rounded-s-lg:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}

.group:first-child .group-first\:rounded-s-lg:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.group:first-child .group-first\:rounded-s-lg:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.group:first-child .group-first\:rounded-s-lg:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.group:last-child .group-last\:rounded-e-lg:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.group:last-child .group-last\:rounded-e-lg:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.group:last-child .group-last\:rounded-e-lg:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.group:last-child .group-last\:rounded-e-lg:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}

.group:last-child .group-last\:rounded-e-lg:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}

.group:last-child .group-last\:rounded-e-lg:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-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);
}

.bg-amber-100 {
  background-color: color-mix(in srgb, var(--colors-amber-100) var(--un-bg-opacity), transparent);
}

.bg-blue-100 {
  background-color: color-mix(in srgb, var(--colors-blue-100) var(--un-bg-opacity), transparent);
}

.bg-cyan-100 {
  background-color: color-mix(in srgb, var(--colors-cyan-100) var(--un-bg-opacity), transparent);
}

.bg-emerald-100 {
  background-color: color-mix(in srgb, var(--colors-emerald-100) var(--un-bg-opacity), transparent);
}

.bg-fuchsia-100 {
  background-color: color-mix(in srgb, var(--colors-fuchsia-100) var(--un-bg-opacity), transparent);
}

.bg-gray-100 {
  background-color: color-mix(in srgb, var(--colors-gray-100) var(--un-bg-opacity), transparent);
}

.bg-gray-200 {
  background-color: color-mix(in srgb, var(--colors-gray-200) var(--un-bg-opacity), transparent);
}

.bg-gray-50 {
  background-color: color-mix(in srgb, var(--colors-gray-50) var(--un-bg-opacity), transparent);
}

.bg-green-100 {
  background-color: color-mix(in srgb, var(--colors-green-100) var(--un-bg-opacity), transparent);
}

.bg-indigo-100 {
  background-color: color-mix(in srgb, var(--colors-indigo-100) var(--un-bg-opacity), transparent);
}

.bg-inherit {
  background-color: inherit;
}

.bg-lime-100 {
  background-color: color-mix(in srgb, var(--colors-lime-100) var(--un-bg-opacity), transparent);
}

.bg-orange-100 {
  background-color: color-mix(in srgb, var(--colors-orange-100) var(--un-bg-opacity), transparent);
}

.bg-pink-100 {
  background-color: color-mix(in srgb, var(--colors-pink-100) var(--un-bg-opacity), transparent);
}

.bg-primary-100 {
  background-color: color-mix(in srgb, var(--slex-primary-100) var(--un-bg-opacity), transparent);
}

.bg-primary-600 {
  background-color: color-mix(in srgb, var(--slex-primary-600) var(--un-bg-opacity), transparent);
}

.bg-purple-100 {
  background-color: color-mix(in srgb, var(--colors-purple-100) var(--un-bg-opacity), transparent);
}

.bg-red-100 {
  background-color: color-mix(in srgb, var(--colors-red-100) var(--un-bg-opacity), transparent);
}

.bg-rose-100 {
  background-color: color-mix(in srgb, var(--colors-rose-100) var(--un-bg-opacity), transparent);
}

.bg-sky-100 {
  background-color: color-mix(in srgb, var(--colors-sky-100) var(--un-bg-opacity), transparent);
}

.bg-teal-100 {
  background-color: color-mix(in srgb, var(--colors-teal-100) var(--un-bg-opacity), transparent);
}

.bg-transparent {
  background-color: #0000;
}

.bg-violet-100 {
  background-color: color-mix(in srgb, var(--colors-violet-100) var(--un-bg-opacity), transparent);
}

.bg-white {
  background-color: color-mix(in srgb, var(--colors-white) var(--un-bg-opacity), transparent);
}

.bg-yellow-100 {
  background-color: color-mix(in srgb, var(--colors-yellow-100) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-amber-700 {
  background-color: color-mix(in srgb, var(--colors-amber-700) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-blue-800 {
  background-color: color-mix(in srgb, var(--colors-blue-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-cyan-800 {
  background-color: color-mix(in srgb, var(--colors-cyan-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-emerald-800 {
  background-color: color-mix(in srgb, var(--colors-emerald-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-fuchsia-800 {
  background-color: color-mix(in srgb, var(--colors-fuchsia-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-gray-700 {
  background-color: color-mix(in srgb, var(--colors-gray-700) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-gray-800 {
  background-color: color-mix(in srgb, var(--colors-gray-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-green-800 {
  background-color: color-mix(in srgb, var(--colors-green-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-indigo-800 {
  background-color: color-mix(in srgb, var(--colors-indigo-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-lime-700 {
  background-color: color-mix(in srgb, var(--colors-lime-700) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-orange-700 {
  background-color: color-mix(in srgb, var(--colors-orange-700) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-pink-700 {
  background-color: color-mix(in srgb, var(--colors-pink-700) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-primary-800 {
  background-color: color-mix(in srgb, var(--slex-primary-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-purple-800 {
  background-color: color-mix(in srgb, var(--colors-purple-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-red-800 {
  background-color: color-mix(in srgb, var(--colors-red-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-rose-700 {
  background-color: color-mix(in srgb, var(--colors-rose-700) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-sky-800 {
  background-color: color-mix(in srgb, var(--colors-sky-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-teal-800 {
  background-color: color-mix(in srgb, var(--colors-teal-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-violet-800 {
  background-color: color-mix(in srgb, var(--colors-violet-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:bg-yellow-800 {
  background-color: color-mix(in srgb, var(--colors-yellow-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-amber-800:hover {
  background-color: color-mix(in srgb, var(--colors-amber-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-blue-800:hover {
  background-color: color-mix(in srgb, var(--colors-blue-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-cyan-800:hover {
  background-color: color-mix(in srgb, var(--colors-cyan-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-emerald-800:hover {
  background-color: color-mix(in srgb, var(--colors-emerald-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-fuchsia-800:hover {
  background-color: color-mix(in srgb, var(--colors-fuchsia-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-gray-700:hover {
  background-color: color-mix(in srgb, var(--colors-gray-700) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-gray-800:hover {
  background-color: color-mix(in srgb, var(--colors-gray-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-green-800:hover {
  background-color: color-mix(in srgb, var(--colors-green-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-indigo-800:hover {
  background-color: color-mix(in srgb, var(--colors-indigo-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-lime-800:hover {
  background-color: color-mix(in srgb, var(--colors-lime-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-orange-800:hover {
  background-color: color-mix(in srgb, var(--colors-orange-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-pink-800:hover {
  background-color: color-mix(in srgb, var(--colors-pink-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-primary-800:hover {
  background-color: color-mix(in srgb, var(--slex-primary-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-purple-800:hover {
  background-color: color-mix(in srgb, var(--colors-purple-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-red-800:hover {
  background-color: color-mix(in srgb, var(--colors-red-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-rose-800:hover {
  background-color: color-mix(in srgb, var(--colors-rose-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-sky-800:hover {
  background-color: color-mix(in srgb, var(--colors-sky-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-teal-800:hover {
  background-color: color-mix(in srgb, var(--colors-teal-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-violet-800:hover {
  background-color: color-mix(in srgb, var(--colors-violet-800) var(--un-bg-opacity), transparent);
}

.dark .dark\:hover\:bg-yellow-800:hover {
  background-color: color-mix(in srgb, var(--colors-yellow-800) var(--un-bg-opacity), transparent);
}

.hover\:bg-amber-200:hover {
  background-color: color-mix(in srgb, var(--colors-amber-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-blue-200:hover {
  background-color: color-mix(in srgb, var(--colors-blue-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-cyan-200:hover {
  background-color: color-mix(in srgb, var(--colors-cyan-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-emerald-200:hover {
  background-color: color-mix(in srgb, var(--colors-emerald-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-fuchsia-200:hover {
  background-color: color-mix(in srgb, var(--colors-fuchsia-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-gray-100:hover {
  background-color: color-mix(in srgb, var(--colors-gray-100) var(--un-bg-opacity), transparent);
}

.hover\:bg-gray-200:hover {
  background-color: color-mix(in srgb, var(--colors-gray-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-gray-50:hover {
  background-color: color-mix(in srgb, var(--colors-gray-50) var(--un-bg-opacity), transparent);
}

.hover\:bg-green-200:hover {
  background-color: color-mix(in srgb, var(--colors-green-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-indigo-200:hover {
  background-color: color-mix(in srgb, var(--colors-indigo-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-lime-200:hover {
  background-color: color-mix(in srgb, var(--colors-lime-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-orange-200:hover {
  background-color: color-mix(in srgb, var(--colors-orange-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-pink-200:hover {
  background-color: color-mix(in srgb, var(--colors-pink-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-primary-200:hover {
  background-color: color-mix(in srgb, var(--slex-primary-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-purple-200:hover {
  background-color: color-mix(in srgb, var(--colors-purple-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-red-200:hover {
  background-color: color-mix(in srgb, var(--colors-red-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-rose-200:hover {
  background-color: color-mix(in srgb, var(--colors-rose-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-sky-200:hover {
  background-color: color-mix(in srgb, var(--colors-sky-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-teal-200:hover {
  background-color: color-mix(in srgb, var(--colors-teal-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-violet-200:hover {
  background-color: color-mix(in srgb, var(--colors-violet-200) var(--un-bg-opacity), transparent);
}

.hover\:bg-yellow-200:hover {
  background-color: color-mix(in srgb, var(--colors-yellow-200) var(--un-bg-opacity), transparent);
}

.disabled\:opacity-50:disabled {
  opacity: .5;
}

.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, .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);
}

.focus\:ring-amber-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-amber-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-blue-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-blue-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-cyan-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-cyan-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-emerald-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-emerald-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-fuchsia-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-fuchsia-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-gray-200:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-gray-200) var(--un-ring-opacity), transparent);
}

.focus\:ring-gray-300:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-gray-300) var(--un-ring-opacity), transparent);
}

.focus\:ring-gray-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-gray-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-green-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-green-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-indigo-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-indigo-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-lime-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-lime-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-orange-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-orange-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-pink-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-pink-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-primary-300:focus {
  --un-ring-color: color-mix(in srgb, var(--slex-primary-300) var(--un-ring-opacity), transparent);
}

.focus\:ring-primary-400:focus {
  --un-ring-color: color-mix(in srgb, var(--slex-primary-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-purple-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-purple-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-red-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-red-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-rose-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-rose-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-sky-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-sky-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-teal-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-teal-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-violet-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-violet-400) var(--un-ring-opacity), transparent);
}

.focus\:ring-yellow-400:focus {
  --un-ring-color: color-mix(in srgb, var(--colors-yellow-400) var(--un-ring-opacity), transparent);
}

.shadow-sm {
  --un-shadow: 0 1px 3px 0 var(--un-shadow-color, #0000001a), 0 1px 2px -1px var(--un-shadow-color, #0000001a);
  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:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: calc(var(--spacing) * 5);
}

.end-5:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: calc(var(--spacing) * 5);
}

.end-5:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: calc(var(--spacing) * 5);
}

.end-5:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: calc(var(--spacing) * 5);
}

.end-5:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: calc(var(--spacing) * 5);
}

.end-5:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: calc(var(--spacing) * 5);
}

.start-5:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  left: calc(var(--spacing) * 5);
}

.start-5:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  left: calc(var(--spacing) * 5);
}

.start-5:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  left: calc(var(--spacing) * 5);
}

.start-5:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: calc(var(--spacing) * 5);
}

.start-5:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: calc(var(--spacing) * 5);
}

.start-5:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 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;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 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;
}

[dir="rtl"] :where(.rtl\:space-x-reverse > :not(:last-child)) {
  --un-space-x-reverse: 1;
}

:where(.space-x-2 > :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)));
}

:where(.space-y-3 > :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 #0000;
    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);
  }

  .dark .dark\:text-blue-200 {
    color: color-mix(in oklab, var(--colors-blue-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-cyan-200 {
    color: color-mix(in oklab, var(--colors-cyan-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-emerald-200 {
    color: color-mix(in oklab, var(--colors-emerald-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-fuchsia-200 {
    color: color-mix(in oklab, var(--colors-fuchsia-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-gray-200 {
    color: color-mix(in oklab, var(--colors-gray-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-gray-400 {
    color: color-mix(in oklab, var(--colors-gray-400) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-gray-500 {
    color: color-mix(in oklab, var(--colors-gray-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-green-200 {
    color: color-mix(in oklab, var(--colors-green-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-indigo-200 {
    color: color-mix(in oklab, var(--colors-indigo-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-lime-200 {
    color: color-mix(in oklab, var(--colors-lime-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-orange-200 {
    color: color-mix(in oklab, var(--colors-orange-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-pink-200 {
    color: color-mix(in oklab, var(--colors-pink-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-purple-200 {
    color: color-mix(in oklab, var(--colors-purple-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-red-200 {
    color: color-mix(in oklab, var(--colors-red-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-rose-200 {
    color: color-mix(in oklab, var(--colors-rose-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-sky-200 {
    color: color-mix(in oklab, var(--colors-sky-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-teal-200 {
    color: color-mix(in oklab, var(--colors-teal-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-violet-200 {
    color: color-mix(in oklab, var(--colors-violet-200) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-white {
    color: color-mix(in oklab, var(--colors-white) var(--un-text-opacity), transparent);
  }

  .dark .dark\:text-yellow-200 {
    color: color-mix(in oklab, var(--colors-yellow-200) var(--un-text-opacity), transparent);
  }

  .text-amber-500 {
    color: color-mix(in oklab, var(--colors-amber-500) var(--un-text-opacity), transparent);
  }

  .text-blue-500 {
    color: color-mix(in oklab, var(--colors-blue-500) var(--un-text-opacity), transparent);
  }

  .text-cyan-500 {
    color: color-mix(in oklab, var(--colors-cyan-500) var(--un-text-opacity), transparent);
  }

  .text-emerald-500 {
    color: color-mix(in oklab, var(--colors-emerald-500) var(--un-text-opacity), transparent);
  }

  .text-fuchsia-500 {
    color: color-mix(in oklab, var(--colors-fuchsia-500) var(--un-text-opacity), transparent);
  }

  .text-gray-400 {
    color: color-mix(in oklab, var(--colors-gray-400) var(--un-text-opacity), transparent);
  }

  .text-gray-500 {
    color: color-mix(in oklab, var(--colors-gray-500) var(--un-text-opacity), transparent);
  }

  .text-gray-800 {
    color: color-mix(in oklab, var(--colors-gray-800) var(--un-text-opacity), transparent);
  }

  .text-gray-900 {
    color: color-mix(in oklab, var(--colors-gray-900) var(--un-text-opacity), transparent);
  }

  .text-green-500 {
    color: color-mix(in oklab, var(--colors-green-500) var(--un-text-opacity), transparent);
  }

  .text-indigo-500 {
    color: color-mix(in oklab, var(--colors-indigo-500) var(--un-text-opacity), transparent);
  }

  .text-lime-500 {
    color: color-mix(in oklab, var(--colors-lime-500) var(--un-text-opacity), transparent);
  }

  .text-orange-500 {
    color: color-mix(in oklab, var(--colors-orange-500) var(--un-text-opacity), transparent);
  }

  .text-pink-500 {
    color: color-mix(in oklab, var(--colors-pink-500) var(--un-text-opacity), transparent);
  }

  .text-purple-500 {
    color: color-mix(in oklab, var(--colors-purple-500) var(--un-text-opacity), transparent);
  }

  .text-red-500 {
    color: color-mix(in oklab, var(--colors-red-500) var(--un-text-opacity), transparent);
  }

  .text-rose-500 {
    color: color-mix(in oklab, var(--colors-rose-500) var(--un-text-opacity), transparent);
  }

  .text-sky-500 {
    color: color-mix(in oklab, var(--colors-sky-500) var(--un-text-opacity), transparent);
  }

  .text-teal-500 {
    color: color-mix(in oklab, var(--colors-teal-500) var(--un-text-opacity), transparent);
  }

  .text-violet-500 {
    color: color-mix(in oklab, var(--colors-violet-500) var(--un-text-opacity), transparent);
  }

  .text-white {
    color: color-mix(in oklab, var(--colors-white) var(--un-text-opacity), transparent);
  }

  .text-yellow-500 {
    color: color-mix(in oklab, var(--colors-yellow-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-amber-300:hover {
    color: color-mix(in oklab, var(--colors-amber-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-amber-500:hover {
    color: color-mix(in oklab, var(--colors-amber-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-blue-300:hover {
    color: color-mix(in oklab, var(--colors-blue-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-blue-500:hover {
    color: color-mix(in oklab, var(--colors-blue-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-cyan-300:hover {
    color: color-mix(in oklab, var(--colors-cyan-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-cyan-500:hover {
    color: color-mix(in oklab, var(--colors-cyan-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-emerald-300:hover {
    color: color-mix(in oklab, var(--colors-emerald-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-emerald-500:hover {
    color: color-mix(in oklab, var(--colors-emerald-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-fuchsia-300:hover {
    color: color-mix(in oklab, var(--colors-fuchsia-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-fuchsia-500:hover {
    color: color-mix(in oklab, var(--colors-fuchsia-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-gray-300:hover {
    color: color-mix(in oklab, var(--colors-gray-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-gray-500:hover {
    color: color-mix(in oklab, var(--colors-gray-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-green-300:hover {
    color: color-mix(in oklab, var(--colors-green-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-green-500:hover {
    color: color-mix(in oklab, var(--colors-green-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-indigo-300:hover {
    color: color-mix(in oklab, var(--colors-indigo-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-indigo-500:hover {
    color: color-mix(in oklab, var(--colors-indigo-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-lime-300:hover {
    color: color-mix(in oklab, var(--colors-lime-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-lime-500:hover {
    color: color-mix(in oklab, var(--colors-lime-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-orange-300:hover {
    color: color-mix(in oklab, var(--colors-orange-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-orange-500:hover {
    color: color-mix(in oklab, var(--colors-orange-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-pink-300:hover {
    color: color-mix(in oklab, var(--colors-pink-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-pink-500:hover {
    color: color-mix(in oklab, var(--colors-pink-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-purple-300:hover {
    color: color-mix(in oklab, var(--colors-purple-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-purple-500:hover {
    color: color-mix(in oklab, var(--colors-purple-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-red-300:hover {
    color: color-mix(in oklab, var(--colors-red-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-red-500:hover {
    color: color-mix(in oklab, var(--colors-red-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-rose-300:hover {
    color: color-mix(in oklab, var(--colors-rose-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-rose-500:hover {
    color: color-mix(in oklab, var(--colors-rose-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-sky-300:hover {
    color: color-mix(in oklab, var(--colors-sky-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-sky-500:hover {
    color: color-mix(in oklab, var(--colors-sky-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-teal-300:hover {
    color: color-mix(in oklab, var(--colors-teal-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-teal-500:hover {
    color: color-mix(in oklab, var(--colors-teal-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-violet-300:hover {
    color: color-mix(in oklab, var(--colors-violet-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-violet-500:hover {
    color: color-mix(in oklab, var(--colors-violet-500) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-white:hover {
    color: color-mix(in oklab, var(--colors-white) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-yellow-300:hover {
    color: color-mix(in oklab, var(--colors-yellow-300) var(--un-text-opacity), transparent);
  }

  .dark .dark\:hover\:text-yellow-500:hover {
    color: color-mix(in oklab, var(--colors-yellow-500) var(--un-text-opacity), transparent);
  }

  .hover\:text-amber-600:hover {
    color: color-mix(in oklab, var(--colors-amber-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-blue-600:hover {
    color: color-mix(in oklab, var(--colors-blue-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-cyan-600:hover {
    color: color-mix(in oklab, var(--colors-cyan-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-emerald-600:hover {
    color: color-mix(in oklab, var(--colors-emerald-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-fuchsia-600:hover {
    color: color-mix(in oklab, var(--colors-fuchsia-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-gray-600:hover {
    color: color-mix(in oklab, var(--colors-gray-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-gray-700:hover {
    color: color-mix(in oklab, var(--colors-gray-700) var(--un-text-opacity), transparent);
  }

  .hover\:text-gray-900:hover {
    color: color-mix(in oklab, var(--colors-gray-900) var(--un-text-opacity), transparent);
  }

  .hover\:text-green-600:hover {
    color: color-mix(in oklab, var(--colors-green-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-indigo-600:hover {
    color: color-mix(in oklab, var(--colors-indigo-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-lime-600:hover {
    color: color-mix(in oklab, var(--colors-lime-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-orange-600:hover {
    color: color-mix(in oklab, var(--colors-orange-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-pink-600:hover {
    color: color-mix(in oklab, var(--colors-pink-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-purple-600:hover {
    color: color-mix(in oklab, var(--colors-purple-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-red-600:hover {
    color: color-mix(in oklab, var(--colors-red-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-rose-600:hover {
    color: color-mix(in oklab, var(--colors-rose-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-sky-600:hover {
    color: color-mix(in oklab, var(--colors-sky-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-teal-600:hover {
    color: color-mix(in oklab, var(--colors-teal-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-violet-600:hover {
    color: color-mix(in oklab, var(--colors-violet-600) var(--un-text-opacity), transparent);
  }

  .hover\:text-yellow-600:hover {
    color: color-mix(in oklab, var(--colors-yellow-600) var(--un-text-opacity), transparent);
  }

  .border-gray-200 {
    border-color: color-mix(in oklab, var(--colors-gray-200) var(--un-border-opacity), transparent);
  }

  .dark .dark\:border-gray-700 {
    border-color: color-mix(in oklab, var(--colors-gray-700) var(--un-border-opacity), transparent);
  }

  .hover\:border-gray-300:hover {
    border-color: color-mix(in oklab, var(--colors-gray-300) var(--un-border-opacity), transparent);
  }

  .bg-amber-100 {
    background-color: color-mix(in oklab, var(--colors-amber-100) var(--un-bg-opacity), transparent);
  }

  .bg-blue-100 {
    background-color: color-mix(in oklab, var(--colors-blue-100) var(--un-bg-opacity), transparent);
  }

  .bg-cyan-100 {
    background-color: color-mix(in oklab, var(--colors-cyan-100) var(--un-bg-opacity), transparent);
  }

  .bg-emerald-100 {
    background-color: color-mix(in oklab, var(--colors-emerald-100) var(--un-bg-opacity), transparent);
  }

  .bg-fuchsia-100 {
    background-color: color-mix(in oklab, var(--colors-fuchsia-100) var(--un-bg-opacity), transparent);
  }

  .bg-gray-100 {
    background-color: color-mix(in oklab, var(--colors-gray-100) var(--un-bg-opacity), transparent);
  }

  .bg-gray-200 {
    background-color: color-mix(in oklab, var(--colors-gray-200) var(--un-bg-opacity), transparent);
  }

  .bg-gray-50 {
    background-color: color-mix(in oklab, var(--colors-gray-50) var(--un-bg-opacity), transparent);
  }

  .bg-green-100 {
    background-color: color-mix(in oklab, var(--colors-green-100) var(--un-bg-opacity), transparent);
  }

  .bg-indigo-100 {
    background-color: color-mix(in oklab, var(--colors-indigo-100) var(--un-bg-opacity), transparent);
  }

  .bg-lime-100 {
    background-color: color-mix(in oklab, var(--colors-lime-100) var(--un-bg-opacity), transparent);
  }

  .bg-orange-100 {
    background-color: color-mix(in oklab, var(--colors-orange-100) var(--un-bg-opacity), transparent);
  }

  .bg-pink-100 {
    background-color: color-mix(in oklab, var(--colors-pink-100) var(--un-bg-opacity), transparent);
  }

  .bg-purple-100 {
    background-color: color-mix(in oklab, var(--colors-purple-100) var(--un-bg-opacity), transparent);
  }

  .bg-red-100 {
    background-color: color-mix(in oklab, var(--colors-red-100) var(--un-bg-opacity), transparent);
  }

  .bg-rose-100 {
    background-color: color-mix(in oklab, var(--colors-rose-100) var(--un-bg-opacity), transparent);
  }

  .bg-sky-100 {
    background-color: color-mix(in oklab, var(--colors-sky-100) var(--un-bg-opacity), transparent);
  }

  .bg-teal-100 {
    background-color: color-mix(in oklab, var(--colors-teal-100) var(--un-bg-opacity), transparent);
  }

  .bg-violet-100 {
    background-color: color-mix(in oklab, var(--colors-violet-100) var(--un-bg-opacity), transparent);
  }

  .bg-white {
    background-color: color-mix(in oklab, var(--colors-white) var(--un-bg-opacity), transparent);
  }

  .bg-yellow-100 {
    background-color: color-mix(in oklab, var(--colors-yellow-100) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-amber-700 {
    background-color: color-mix(in oklab, var(--colors-amber-700) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-blue-800 {
    background-color: color-mix(in oklab, var(--colors-blue-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-cyan-800 {
    background-color: color-mix(in oklab, var(--colors-cyan-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-emerald-800 {
    background-color: color-mix(in oklab, var(--colors-emerald-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-fuchsia-800 {
    background-color: color-mix(in oklab, var(--colors-fuchsia-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-gray-700 {
    background-color: color-mix(in oklab, var(--colors-gray-700) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-gray-800 {
    background-color: color-mix(in oklab, var(--colors-gray-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-green-800 {
    background-color: color-mix(in oklab, var(--colors-green-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-indigo-800 {
    background-color: color-mix(in oklab, var(--colors-indigo-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-lime-700 {
    background-color: color-mix(in oklab, var(--colors-lime-700) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-orange-700 {
    background-color: color-mix(in oklab, var(--colors-orange-700) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-pink-700 {
    background-color: color-mix(in oklab, var(--colors-pink-700) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-purple-800 {
    background-color: color-mix(in oklab, var(--colors-purple-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-red-800 {
    background-color: color-mix(in oklab, var(--colors-red-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-rose-700 {
    background-color: color-mix(in oklab, var(--colors-rose-700) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-sky-800 {
    background-color: color-mix(in oklab, var(--colors-sky-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-teal-800 {
    background-color: color-mix(in oklab, var(--colors-teal-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-violet-800 {
    background-color: color-mix(in oklab, var(--colors-violet-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:bg-yellow-800 {
    background-color: color-mix(in oklab, var(--colors-yellow-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-amber-800:hover {
    background-color: color-mix(in oklab, var(--colors-amber-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-blue-800:hover {
    background-color: color-mix(in oklab, var(--colors-blue-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-cyan-800:hover {
    background-color: color-mix(in oklab, var(--colors-cyan-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-emerald-800:hover {
    background-color: color-mix(in oklab, var(--colors-emerald-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-fuchsia-800:hover {
    background-color: color-mix(in oklab, var(--colors-fuchsia-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-gray-700:hover {
    background-color: color-mix(in oklab, var(--colors-gray-700) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-gray-800:hover {
    background-color: color-mix(in oklab, var(--colors-gray-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-green-800:hover {
    background-color: color-mix(in oklab, var(--colors-green-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-indigo-800:hover {
    background-color: color-mix(in oklab, var(--colors-indigo-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-lime-800:hover {
    background-color: color-mix(in oklab, var(--colors-lime-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-orange-800:hover {
    background-color: color-mix(in oklab, var(--colors-orange-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-pink-800:hover {
    background-color: color-mix(in oklab, var(--colors-pink-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-purple-800:hover {
    background-color: color-mix(in oklab, var(--colors-purple-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-red-800:hover {
    background-color: color-mix(in oklab, var(--colors-red-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-rose-800:hover {
    background-color: color-mix(in oklab, var(--colors-rose-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-sky-800:hover {
    background-color: color-mix(in oklab, var(--colors-sky-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-teal-800:hover {
    background-color: color-mix(in oklab, var(--colors-teal-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-violet-800:hover {
    background-color: color-mix(in oklab, var(--colors-violet-800) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:hover\:bg-yellow-800:hover {
    background-color: color-mix(in oklab, var(--colors-yellow-800) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-amber-200:hover {
    background-color: color-mix(in oklab, var(--colors-amber-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-blue-200:hover {
    background-color: color-mix(in oklab, var(--colors-blue-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-cyan-200:hover {
    background-color: color-mix(in oklab, var(--colors-cyan-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-emerald-200:hover {
    background-color: color-mix(in oklab, var(--colors-emerald-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-fuchsia-200:hover {
    background-color: color-mix(in oklab, var(--colors-fuchsia-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-gray-100:hover {
    background-color: color-mix(in oklab, var(--colors-gray-100) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-gray-200:hover {
    background-color: color-mix(in oklab, var(--colors-gray-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-gray-50:hover {
    background-color: color-mix(in oklab, var(--colors-gray-50) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-green-200:hover {
    background-color: color-mix(in oklab, var(--colors-green-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-indigo-200:hover {
    background-color: color-mix(in oklab, var(--colors-indigo-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-lime-200:hover {
    background-color: color-mix(in oklab, var(--colors-lime-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-orange-200:hover {
    background-color: color-mix(in oklab, var(--colors-orange-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-pink-200:hover {
    background-color: color-mix(in oklab, var(--colors-pink-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-purple-200:hover {
    background-color: color-mix(in oklab, var(--colors-purple-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-red-200:hover {
    background-color: color-mix(in oklab, var(--colors-red-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-rose-200:hover {
    background-color: color-mix(in oklab, var(--colors-rose-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-sky-200:hover {
    background-color: color-mix(in oklab, var(--colors-sky-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-teal-200:hover {
    background-color: color-mix(in oklab, var(--colors-teal-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-violet-200:hover {
    background-color: color-mix(in oklab, var(--colors-violet-200) var(--un-bg-opacity), transparent);
  }

  .hover\:bg-yellow-200:hover {
    background-color: color-mix(in oklab, var(--colors-yellow-200) var(--un-bg-opacity), transparent);
  }

  .dark .dark\:focus\:ring-gray-800:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-gray-800) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-amber-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-amber-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-blue-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-blue-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-cyan-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-cyan-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-emerald-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-emerald-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-fuchsia-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-fuchsia-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-gray-200:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-gray-200) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-gray-300:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-gray-300) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-gray-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-gray-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-green-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-green-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-indigo-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-indigo-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-lime-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-lime-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-orange-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-orange-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-pink-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-pink-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-purple-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-purple-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-red-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-red-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-rose-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-rose-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-sky-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-sky-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-teal-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-teal-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-violet-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-violet-400) var(--un-ring-opacity), transparent);
  }

  .focus\:ring-yellow-400:focus {
    --un-ring-color: color-mix(in oklab, var(--colors-yellow-400) var(--un-ring-opacity), transparent);
  }
}

.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);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: none;
  line-height: 1.5;
}

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

body[data-mobile-nav-open] {
  overflow: hidden;
  overscroll-behavior: contain;
}

#mobileNav {
  --mobile-nav-backdrop-opacity: 0;
  --mobile-nav-panel-translate: -100%;
  pointer-events: none;
}

#mobileNav[data-open="true"] {
  --mobile-nav-backdrop-opacity: 1;
  --mobile-nav-panel-translate: 0px;
  pointer-events: auto;
}

#mobileNav [data-mobile-nav-backdrop] {
  opacity: var(--mobile-nav-backdrop-opacity);
  touch-action: pan-y;
  transition: opacity .18s;
}

#mobileNav [data-mobile-nav-panel] {
  transform: translateX(var(--mobile-nav-panel-translate));
  touch-action: pan-y;
  will-change: transform;
  transition: transform .22s cubic-bezier(.22,1,.36,1);
}

#mobileNav[data-dragging="true"] [data-mobile-nav-backdrop], #mobileNav[data-dragging="true"] [data-mobile-nav-panel] {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  #mobileNav [data-mobile-nav-backdrop], #mobileNav [data-mobile-nav-panel] {
    transition: none;
  }
}

.slexkit-for-wrapper {
  display: contents;
}

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

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

.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;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}

.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;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius)  + 4px);
  box-shadow: var(--shadow-sm);
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 1.25rem;
  transition: box-shadow .15s, border-color .15s;
}

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

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

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

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

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

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

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

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

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

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

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

.slex-grid, .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;
  }
}

.slexkit-root {
  color: var(--foreground, #111827);
  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);
  background: none;
}

.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);
}

.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);
  background: var(--background);
  color: var(--card-foreground);
  box-shadow: none;
  border-radius: 1rem;
}

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

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

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

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

.slex-playground-chrome {
  position: absolute;
  z-index: 4;
  display: flex;
  height: var(--slex-playground-toolbar-height);
  min-height: var(--slex-playground-toolbar-height);
  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;
  justify-content: flex-end;
  align-items:  center;
  gap: 0;
  padding: 0;
  top: 0;
  left: 0;
  right: 0;
}

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

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

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

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

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

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

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

.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);
  color: var(--muted-foreground);
  padding: 0;
}

.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);
  color: var(--muted-foreground);
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
}

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

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

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

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

.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;
  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;
  align-items: safe center;
}

.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, .slex-playground[data-source-type="markdown"] .slex-playground-preview-pane, .slex-playground[data-preview-overflow="true"] .slex-playground-preview-pane, .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, .slex-playground[data-source-type="markdown"] .slex-playground-live-preview, .slex-playground[data-preview-overflow="true"] .slex-playground-live-preview, .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-height: var(--slex-playground-min-height, 16rem);
  overflow: hidden;
  background: var(--background);
  min-width: 0;
}

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

.slex-playground-code-scroll {
  box-sizing: border-box;
  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);
  width: 100%;
  font-size: .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, .95fr) minmax(0, 1.05fr);
  min-height: var(--slex-playground-min-height, 16rem);
  background: var(--background);
}

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

.slex-playground-live-preview {
  display: grid;
  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;
  align-items: safe center;
  min-width: 0;
}

.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 .12s;
}

.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 {
  cursor: col-resize;
  width: 8px;
}

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

.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);
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 0 .75rem;
}

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

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

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

.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;
  min-height: var(--slex-playground-min-height, 16rem);
  resize: none;
  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);
  outline: none;
  border: 0;
  width: 100%;
  padding: 0;
  font-size: .75rem;
  line-height: 1.5;
}

.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 {
  min-height: var(--slex-playground-min-height, 16rem);
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
  height: auto;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.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;
  min-height: var(--slex-playground-min-height, 16rem);
  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);
  flex: auto;
  height: auto;
  font-size: .8125rem;
  line-height: 1.55;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.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 {
  width: .625rem;
  height: .625rem;
}

.slex-playground-live-preview::-webkit-scrollbar {
  width: .625rem;
  height: .625rem;
}

.slex-playground-editor .cm-scroller::-webkit-scrollbar {
  width: .625rem;
  height: .625rem;
}

.slex-standalone-playground-preview::-webkit-scrollbar {
  width: .625rem;
  height: .625rem;
}

.slex-standalone-playground-editor .cm-scroller::-webkit-scrollbar {
  width: .625rem;
  height: .625rem;
}

.slex-playground-code-scroll::-webkit-scrollbar-track {
  background: none;
}

.slex-playground-live-preview::-webkit-scrollbar-track {
  background: none;
}

.slex-playground-editor .cm-scroller::-webkit-scrollbar-track {
  background: none;
}

.slex-standalone-playground-preview::-webkit-scrollbar-track {
  background: none;
}

.slex-standalone-playground-editor .cm-scroller::-webkit-scrollbar-track {
  background: none;
}

.slex-playground-code-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--muted-foreground) 42%, transparent);
  background-clip: content-box;
  border: .1875rem solid #0000;
  border-radius: 999px;
}

.slex-playground-code-scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--muted-foreground) 42%, transparent);
  background-clip: content-box;
  border: .1875rem solid #0000;
  border-radius: 999px;
}

.slex-playground-code-scroll::-webkit-scrollbar-thumb:active {
  background: color-mix(in oklab, var(--muted-foreground) 42%, transparent);
  background-clip: content-box;
  border: .1875rem solid #0000;
  border-radius: 999px;
}

.slex-playground-live-preview::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--muted-foreground) 42%, transparent);
  background-clip: content-box;
  border: .1875rem solid #0000;
  border-radius: 999px;
}

.slex-playground-live-preview::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--muted-foreground) 42%, transparent);
  background-clip: content-box;
  border: .1875rem solid #0000;
  border-radius: 999px;
}

.slex-playground-live-preview::-webkit-scrollbar-thumb:active {
  background: color-mix(in oklab, var(--muted-foreground) 42%, transparent);
  background-clip: content-box;
  border: .1875rem solid #0000;
  border-radius: 999px;
}

.slex-playground-editor .cm-scroller::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--muted-foreground) 42%, transparent);
  background-clip: content-box;
  border: .1875rem solid #0000;
  border-radius: 999px;
}

.slex-playground-editor .cm-scroller::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--muted-foreground) 42%, transparent);
  background-clip: content-box;
  border: .1875rem solid #0000;
  border-radius: 999px;
}

.slex-playground-editor .cm-scroller::-webkit-scrollbar-thumb:active {
  background: color-mix(in oklab, var(--muted-foreground) 42%, transparent);
  background-clip: content-box;
  border: .1875rem solid #0000;
  border-radius: 999px;
}

.slex-standalone-playground-preview::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--muted-foreground) 42%, transparent);
  background-clip: content-box;
  border: .1875rem solid #0000;
  border-radius: 999px;
}

.slex-standalone-playground-preview::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--muted-foreground) 42%, transparent);
  background-clip: content-box;
  border: .1875rem solid #0000;
  border-radius: 999px;
}

.slex-standalone-playground-preview::-webkit-scrollbar-thumb:active {
  background: color-mix(in oklab, var(--muted-foreground) 42%, transparent);
  background-clip: content-box;
  border: .1875rem solid #0000;
  border-radius: 999px;
}

.slex-standalone-playground-editor .cm-scroller::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--muted-foreground) 42%, transparent);
  background-clip: content-box;
  border: .1875rem solid #0000;
  border-radius: 999px;
}

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

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

.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;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
}

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

.slex-streamdown-block {
  margin-block-start: .75rem;
  margin-block-end: .75rem;
}

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

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

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

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

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

.slex-streamdown-error-excerpt {
  overflow: auto;
  border-radius: calc(var(--radius)  - 2px);
  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);
  white-space: pre;
  margin: .75rem 0 0;
  padding: .75rem;
  font-size: .8125rem;
  line-height: 1.55;
}

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

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

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

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

.slex-standalone-playground-toolbar {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  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);
  gap: .25rem;
  padding: .25rem;
  top: .75rem;
  right: .75rem;
}

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

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

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

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

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

.slex-standalone-playground-button:focus-visible {
  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);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}

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

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

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

.slex-standalone-playground-error-excerpt {
  overflow: auto;
  border-radius: calc(var(--radius)  - 2px);
  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);
  margin: .75rem 0 0;
  padding: .75rem;
  font-size: .8125rem;
  line-height: 1.55;
}

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

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

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

.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 .12s;
}

.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, .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;
  height: 100%;
  min-height: 0;
}

.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;
  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);
  outline: none;
  border: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  font-size: .8125rem;
  line-height: 1.55;
}

.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 {
  background: var(--background);
  color: var(--foreground);
  height: 100%;
  font-size: .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 {
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  padding-top: .75rem;
  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;
  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;
  padding: 4rem 1.25rem 1.25rem;
}

.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: .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 {
    border-width: 0;
    border-radius: 0;
    height: 100svh;
    min-height: 100svh;
  }

  .slex-standalone-playground-toolbar {
    right: .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: .75rem;
  }

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

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

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

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

.slex-stat-value {
  display: flex;
  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;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

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

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

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

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

.slex-stat-character[data-stat-change] {
  overflow: hidden;
}

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

.slex-stat-character[data-stat-change="up"]:before {
  animation: slex-stat-digit-old-up .36s cubic-bezier(.2, .8, .2, 1) both;
}

.slex-stat-character[data-stat-change="up"] .slex-stat-character-current {
  animation: slex-stat-digit-new-up .36s cubic-bezier(.2, .8, .2, 1) both;
}

.slex-stat-character[data-stat-change="down"]:before {
  animation: slex-stat-digit-old-down .36s cubic-bezier(.2, .8, .2, 1) both;
}

.slex-stat-character[data-stat-change="down"] .slex-stat-character-current {
  animation: slex-stat-digit-new-down .36s cubic-bezier(.2, .8, .2, 1) both;
}

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

.slex-stat-character[data-stat-change="changed"] .slex-stat-character-current {
  animation: slex-stat-symbol-new .26s 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, .52s);
}

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

.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(-.18em)scale(.98);
  }
}

@keyframes slex-stat-symbol-new {
  0% {
    opacity: .7;
    transform: translateY(.18em)scale(.98);
  }

  60% {
    opacity: 1;
    transform: translateY(-.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: .875rem;
  line-height: 1.625;
}

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

.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;
}

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

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

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

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

.slex-link {
  display: inline-flex;
  color: var(--primary);
  text-decoration: none;
  align-items:  center;
  gap: .375rem;
  width: -moz-fit-content;
  width: fit-content;
  transition: color .15s, background .15s, border-color .15s;
  font-size: .875rem;
  font-weight: 500;
}

.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"] {
  border: 1px solid var(--input);
  border-radius: calc(var(--radius)  - 2px);
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 .75rem;
}

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

.slex-badge {
  display: inline-flex;
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  border-radius: calc(var(--radius)  - 2px);
  background: var(--secondary);
  color: var(--secondary-foreground);
  box-shadow: none;
  align-items:  center;
  gap: .25rem;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 1.5rem;
  padding: .125rem .625rem;
  transition: background .15s, border-color .15s, color .15s;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.25;
}

.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 {
  border: 0;
  border-top: 1px solid var(--border);
  width: 100%;
  height: 0;
  margin: 1rem 0;
}

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

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

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

.slex-callout {
  display: grid;
  grid-template-columns: .25rem minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
  background: none;
  align-items: stretch;
  gap: .75rem;
  width: 100%;
  min-height: 4rem;
  padding: .875rem 1rem;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.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 {
  background: var(--info);
  border-radius: 9999px;
  align-self: stretch;
  width: .25rem;
  min-height: 100%;
}

.slex-callout-icon {
  flex: none;
}

.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: .0625rem 0;
}

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

.slex-callout-body {
  color: var(--muted-foreground);
  margin-top: .125rem;
  font-size: .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;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  color: var(--foreground);
  margin: 0;
}

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

.slex-code-block-title {
  display: inline-flex;
  align-items:  center;
  gap: .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;
  box-shadow: none;
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: .875rem;
  font-size: .8125rem;
  line-height: 1.65;
}

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

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

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

.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);
  text-align: right;
  margin-right: .75rem;
  padding-right: .75rem;
}

.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 {
  color: var(--foreground);
  background: none;
}

.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 {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  width: 100%;
}

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

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

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

.slex-table-column-label {
  display: inline-flex;
  align-items:  center;
  gap: .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;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius)  - 2px);
  background: var(--background);
  color: var(--foreground);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  justify-content: center;
  align-items:  center;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 2.25rem;
  padding: 0 .75rem;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  font-size: .875rem;
  font-weight: 600;
}

.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 {
  white-space: pre-wrap;
  border: 1px solid color-mix(in srgb, var(--destructive, #dc2626) 35%, transparent);
  background: color-mix(in srgb, var(--destructive, #dc2626) 8%, transparent);
  color: var(--destructive, #b91c1c);
  border-radius: .5rem;
  margin-top: .75rem;
  padding: .75rem;
  font-size: .875rem;
  line-height: 1.5;
}

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

.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);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.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 {
  color: var(--muted-foreground);
  background: none;
  border-color: #0000;
}

.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: .5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

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

.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-start: 0;
  padding-inline-end: 0;
}

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

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

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

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

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

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

.slex-slider-value {
  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);
  padding: .125rem .5rem;
  font-size: .875rem;
  font-weight: 600;
}

.slex-slider {
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  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%);
  accent-color: var(--primary);
  cursor: pointer;
  border-radius: 999px;
  width: 100%;
  height: .5rem;
  transition: box-shadow .15s, filter .15s;
}

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

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

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

.slex-slider::-webkit-slider-thumb {
  border: 2px solid var(--primary);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 14%, transparent);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
  width: 1rem;
  height: 1rem;
  transition: border-color .15s, background-color .15s, box-shadow .15s, transform .12s;
  background: var(--background) !important;
}

.slex-slider::-moz-range-thumb {
  border: 2px solid var(--primary);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 14%, transparent);
  border-radius: 999px;
  width: 1rem;
  height: 1rem;
  transition: border-color .15s, background-color .15s, box-shadow .15s, transform .12s;
  background: var(--background) !important;
}

.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: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 {
  background: var(--secondary);
  border: 0;
  border-radius: 999px;
  height: .5rem;
}

.slex-slider::-moz-range-progress {
  background: var(--primary);
  border-radius: 999px;
  height: .5rem;
}

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

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

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

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

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

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

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

.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: .55;
}

.slex-switch:has(.slex-switch-input:disabled) {
  cursor: not-allowed;
}

.slex-switch:has(.slex-switch-input:disabled):hover .slex-switch-control {
  box-shadow: none;
}

.slex-switch:has(.slex-switch-input:disabled):hover .slex-switch-control:after {
  box-shadow: none;
}

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

.slex-input-label {
  display: inline-flex;
  color: var(--foreground);
  align-items:  center;
  gap: .25rem;
  width: -moz-fit-content;
  width: fit-content;
  font-size: .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 {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.slex-input {
  box-sizing: border-box;
  display: inline-flex;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
  outline: none;
  flex: auto;
  align-items:  center;
  width: 100%;
  min-width: 0;
  padding: .5rem .75rem;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.5;
}

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

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

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

.slex-input-controls {
  box-sizing: border-box;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--input);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--background);
  border-left: 0;
  flex: none;
  align-items: stretch;
  width: 3.75rem;
  min-width: 3.75rem;
  min-height: 2.5625rem;
  transition: border-color .15s, box-shadow .15s;
}

.slex-input-step {
  box-sizing: border-box;
  display: inline-flex;
  border: 0;
  border-left: 1px solid var(--input);
  color: var(--foreground);
  font: inherit;
  cursor: pointer;
  background: none;
  border-radius: 0;
  justify-content: center;
  align-items:  center;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 0;
  transition: border-color .15s, background .15s, box-shadow .15s;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
}

.slex-input-step:first-child {
  border-left: 0;
}

.slex-input-step:last-child {
  border-radius: 0;
}

.slex-input-step:hover:not(:disabled) {
  background: color-mix(in oklab, var(--muted) 52%, var(--background));
}

.slex-input-step:focus-visible {
  z-index: 1;
  border-color: var(--ring);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
}

.slex-input-step:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.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) 16%, transparent);
}

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

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

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

.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-control:focus-within .slex-input-unit {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
}

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

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

.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-step, .slex-input-field[data-invalid="true"] .slex-input-controls {
  border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
}

.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-unit {
  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:focus-within .slex-input-step {
  border-color: var(--destructive);
}

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

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

.slex-input[disabled] ~ .slex-input-controls, .slex-input[readonly] ~ .slex-input-controls {
  opacity: .6;
}

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

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

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

.slex-select-label {
  display: inline-flex;
  color: var(--foreground);
  align-items:  center;
  gap: .375rem;
  min-width: 0;
  font-size: .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;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  outline: none;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 8%, transparent);
  cursor: pointer;
  appearance: none;
  text-align: left;
  justify-content: space-between;
  align-items:  center;
  gap: .75rem;
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  margin: 0;
  padding: .5rem 1rem;
  transition: border-color .15s, background-color .15s, box-shadow .15s, color .15s;
  font-size: .875rem;
  line-height: 1.25rem;
}

.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: .5;
}

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

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

.slex-select-icon {
  position: relative;
  opacity: .72;
  flex: none;
  width: .75rem;
  height: .75rem;
}

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

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

.slex-select-menu {
  position: absolute;
  z-index: 40;
  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 #0000001f, 0 2px 4px #00000014);
  list-style: none;
  width: 100%;
  max-height: 14rem;
  margin: 0;
  padding: .25rem;
  top: calc(100% + .375rem);
  left: 0;
  right: 0;
}

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

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

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

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

.slex-select-menu:has(.slex-select-option:hover) .slex-select-option--active:not(:hover) {
  color: var(--popover-foreground, var(--foreground));
  background: none;
}

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

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

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

.slex-select-check {
  position: relative;
  color: currentColor;
  flex: none;
  width: .875rem;
  height: .875rem;
}

.slex-select-check:before {
  position: absolute;
  content: "";
  border-bottom: 1.75px solid;
  border-left: 1.75px solid;
  width: .5rem;
  height: .28rem;
  top: .25rem;
  left: .18rem;
  transform: rotate(-45deg);
}

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

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

.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 {
  border-color: color-mix(in oklab, var(--border) 76%, transparent);
  border-radius: calc(var(--radius)  - 2px);
  box-shadow: var(--shadow-sm, 0 4px 10px #0000001a, 0 1px 3px #0000000f);
  width: 100%;
  min-width: 100%;
  padding: .25rem;
  top: calc(100% + .25rem);
  left: 0;
  right: auto;
}

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

.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;
  list-style: none;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  gap: 0;
  margin: 0;
  padding: 0;
}

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

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

.slex-tabs-selected-indicator {
  position: absolute;
  z-index: 20;
  width: var(--slex-tabs-indicator-width, 0);
  height: var(--slex-tabs-indicator-height, .125rem);
  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);
  border-radius: 999px;
  top: 0;
  left: 0;
}

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

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

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

.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-start: 0;
  padding-inline-end: 0;
}

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

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

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

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

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

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

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

.slex-tabs-content {
  color: var(--foreground);
  animation: slex-tabs-content-in .2s ease-out;
  font-size: .875rem;
  line-height: 1.625;
  background: none !important;
  border-radius: 0 !important;
  margin-top: .75rem !important;
  padding: 0 !important;
}

.slex-tabs[data-orientation="vertical"] .slex-tabs-content {
  margin-top: 0 !important;
  margin-left: .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 {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
  }
}

.slex-checkbox-field, .slex-radio-field {
  display: inline-flex;
  color: var(--foreground);
  cursor: pointer;
  user-select: none;
  align-items:  center;
  gap: .5rem;
  transition: color .15s, opacity .15s;
  font-size: .875rem;
}

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

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

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

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

.slex-checkbox:after, .slex-radio:after {
  content: "";
  display: block;
  opacity: 0;
  transition: opacity .12s, transform .14s;
  transform: scale(.5);
}

.slex-checkbox:after {
  border: solid var(--primary-foreground);
  border-width: 0 0 2px 2px;
  width: .55rem;
  height: .34rem;
  transform: translateY(-.08rem)rotate(-45deg)scale(.5);
}

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

.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) {
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 12%, transparent);
  transform: scale(.92);
}

.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(-.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 {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

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

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

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

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

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

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

.slex-checkbox-field:has(.slex-checkbox:disabled) {
  cursor: not-allowed;
  opacity: .65;
}

.slex-radio-field:has(.slex-radio:disabled) {
  cursor: not-allowed;
  opacity: .65;
}

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

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

.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 {
  font: inherit;
  margin: 0;
}

.slex-accordion-trigger, .slex-collapsible-trigger {
  display: flex;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items:  center;
  gap: .75rem;
  width: 100%;
  min-height: 36px;
  padding: .5rem .75rem;
  transition: background-color .14s, color .14s;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 500;
}

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

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

.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 {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

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

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

.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: .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 .16s, opacity .12s, visibility 0s linear .16s;
}

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

.slex-accordion-content-inner, .slex-collapsible-content-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 .75rem;
  transition: padding-bottom .16s;
}

.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, .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: .75rem;
}

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

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

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

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

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

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

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

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

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

  100% {
    transform: translateX(250%);
  }
}

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

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

.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 {
  background: var(--info);
  border-radius: 9999px;
  width: .25rem;
  min-height: 2.25rem;
}

.slex-toast-icon {
  flex: none;
}

.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: .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;
  color: var(--foreground);
  align-items:  center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.35;
}

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

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

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

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

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

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

@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: .6;
  }
}

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

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

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

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

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

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

@keyframes slex-scale-in {
  from {
    opacity: 0;
    transform: scale(.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;
  color: currentColor;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 1em;
  height: 1em;
  line-height: 1;
}

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

/* site/styles/site-components.css */
.slex-page {
  display: grid;
  gap: 3rem;
  width: calc(100% - 2rem);
  min-width: 0;
  margin: 0 auto;
  padding: 3rem 0;
}

.slex-page[data-density="compact"] {
  gap: 2rem;
}

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

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

.slex-heading-meta {
  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);
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.25;
}

.slex-heading-title, .slex-section-title {
  color: var(--foreground);
  letter-spacing: 0;
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
}

.slex-heading[data-level="1"] .slex-heading-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
}

.slex-heading[data-level="2"] .slex-heading-title, .slex-section-title {
  font-size: 1.5rem;
}

.slex-heading[data-level="3"] .slex-heading-title {
  font-size: 1.25rem;
}

.slex-heading[data-level="4"] .slex-heading-title, .slex-heading[data-level="5"] .slex-heading-title, .slex-heading[data-level="6"] .slex-heading-title {
  font-size: 1rem;
}

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

.slex-paragraph[data-tone="lead"] {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.slex-list {
  display: grid;
  color: var(--foreground);
  gap: .5rem;
  margin: 0;
  padding-left: 1.25rem;
  font-size: .875rem;
  line-height: 1.6;
}

.slex-list-description {
  display: block;
  color: var(--muted-foreground);
  margin-top: .125rem;
}

.slex-hero {
  display: grid;
  align-items:  center;
  gap: 2rem;
  min-width: 0;
}

.slex-hero[data-align="split"] {
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
}

.slex-hero[data-align="center"] {
  text-align: center;
  justify-items: center;
}

.slex-hero-copy {
  min-width: 0;
}

.slex-hero-eyebrow {
  color: var(--muted-foreground);
  letter-spacing: 0;
  font-size: .8125rem;
  font-weight: 600;
}

.slex-hero-title {
  color: var(--foreground);
  letter-spacing: 0;
  overflow-wrap: anywhere;
  margin: .75rem 0 0;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1;
}

.slex-hero-subtitle {
  color: var(--muted-foreground);
  max-width: 38rem;
  margin: 1rem 0 0;
  font-size: 1.125rem;
  line-height: 1.7;
}

.slex-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-top: 1.75rem;
}

.slex-hero[data-align="center"] .slex-hero-actions {
  justify-content: center;
}

.slex-hero-action {
  display: inline-flex;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid #0000;
  justify-content: center;
  align-items:  center;
  min-height: 2.5rem;
  padding: 0 .875rem;
  transition: background .15s, color .15s, border-color .15s;
  font-size: .875rem;
  font-weight: 600;
}

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

.slex-hero-action--primary:hover {
  background: color-mix(in oklab, var(--primary) 90%, var(--background));
}

.slex-hero-action--secondary {
  border-color: var(--input);
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}

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

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

.slex-hero-media {
  min-width: 0;
}

.slex-page--site-home .slex-hero {
  gap: clamp(1.5rem, 3vw, 2.25rem);
  min-height: clamp(620px, 100svh - 7rem, 760px);
}

@media (min-width: 1024px) {
  .slex-page--site-home .slex-hero[data-align="split"] {
    grid-template-columns: minmax(320px, .66fr) minmax(600px, 1.34fr);
  }
}

.slex-page--site-home .slex-hero-eyebrow {
  text-transform: none;
}

.slex-page--site-home .slex-hero-media {
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.slex-page--site-home .slex-playground {
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--border) 62%, transparent);
  border-radius: calc(var(--radius)  + 6px);
  background: var(--background);
  box-shadow: 0 14px 44px color-mix(in oklab, var(--foreground) 7%, transparent);
}

.slex-page--site-home .slex-playground, .slex-page--site-home .slex-playground-preview-pane, .slex-page--site-home .slex-playground-code-pane, .slex-page--site-home .slex-playground-code, .slex-page--site-home .slex-playground-live-pane, .slex-page--site-home .slex-playground-code-scroll {
  height: auto;
  min-height: 0 !important;
}

.slex-page--site-home .slex-playground-editor, .slex-page--site-home .slex-playground-editor.codemirror, .slex-page--site-home .slex-playground-editor .cm-editor, .slex-page--site-home .slex-playground-editor .cm-scroller {
  height: 100%;
}

.slex-page--site-home .slex-playground-preview-pane {
  background: linear-gradient(90deg, color-mix(in oklab, var(--muted) 38%, transparent) 1px, transparent 1px), linear-gradient(0deg, color-mix(in oklab, var(--muted) 38%, transparent) 1px, transparent 1px);
  overflow: visible;
  background-size: 32px 32px;
  padding: 2.5rem 1.5rem 1.5rem;
}

.slex-page--site-home .slex-playground-live-code, .slex-page--site-home .slex-playground-live-preview {
  min-height: 0;
}

.slex-page--site-home .slex-playground-preview {
  width: min(100%, 980px);
}

.slex-formula-line {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--muted) 72%, transparent);
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  color: var(--foreground);
  overflow-wrap: anywhere;
  padding: .75rem .875rem;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.5;
}

.slex-rule-mark {
  display: block;
  background: var(--primary);
  border-radius: 999px;
  width: 3.5rem;
  height: .5rem;
  font-size: 0;
  line-height: 0;
}

.slex-rule-mark--success {
  background: var(--success);
}

.slex-rule-mark--warning {
  background: var(--warning);
}

.slex-skeleton-mark {
  display: block;
  border-radius: calc(var(--radius)  - 2px);
  background: linear-gradient(90deg, var(--muted) 0 31%, transparent 31% 34%, var(--muted) 34% 65%, transparent 65% 68%, var(--muted) 68% 100%);
  height: 2rem;
  font-size: 0;
  line-height: 0;
}

.slex-diagram, .slex-swatch {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius)  + 2px);
  color: #0000;
  font-size: 0;
  line-height: 0;
}

.slex-swatch {
  border-radius: calc(var(--radius)  - 2px);
  background: var(--primary);
  height: 4rem;
}

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

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

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

.slex-swatch[data-tone="destructive"] {
  background: var(--destructive);
}

.slex-swatch[data-tone="neutral"] {
  background: var(--muted);
}

.slex-diagram[data-kind="philosophy"] {
  border: 1px solid var(--border);
  background: radial-gradient(circle at 50% 50%, var(--primary) 0 .45rem, transparent .5rem), radial-gradient(circle at 28% 36%, color-mix(in oklab, var(--info) 85%, white) 0 .35rem, transparent .4rem), radial-gradient(circle at 72% 36%, color-mix(in oklab, var(--success) 85%, white) 0 .35rem, transparent .4rem), radial-gradient(circle at 50% 76%, color-mix(in oklab, var(--warning) 85%, white) 0 .35rem, transparent .4rem), repeating-radial-gradient(circle at 50% 50%, transparent 0 2.35rem, color-mix(in oklab, var(--border) 70%, transparent) 2.4rem 2.45rem), var(--background);
  min-height: 10rem;
}

.slex-diagram[data-kind="philosophy"]:before, .slex-diagram[data-kind="philosophy"]:after {
  position: absolute;
  color: var(--muted-foreground);
  letter-spacing: 0;
  font-size: .75rem;
  font-weight: 650;
  line-height: 1;
}

.slex-diagram[data-kind="philosophy"]:before {
  content: "RUNNABLE";
  top: 1rem;
  left: 1rem;
}

.slex-diagram[data-kind="philosophy"]:after {
  content: "CONVERGENT";
  bottom: 1rem;
  right: 1rem;
}

.slex-diagram[data-kind="markdown"], .slex-diagram[data-kind="fence"], .slex-diagram[data-kind="cards"] {
  background: var(--muted);
  height: 4.75rem;
}

.slex-diagram[data-kind="type"], .slex-diagram[data-kind="icon"], .slex-diagram[data-kind="font-sample"], .slex-diagram[data-kind="alignment"] {
  border-radius: calc(var(--radius)  - 2px);
  background: var(--muted);
  min-height: 3.25rem;
}

.slex-diagram[data-kind="type"]:before, .slex-diagram[data-kind="type"]:after, .slex-diagram[data-kind="alignment"]:before, .slex-diagram[data-kind="alignment"]:after {
  content: "";
  position: absolute;
  background: var(--primary);
  border-radius: 999px;
  left: .75rem;
}

.slex-diagram[data-kind="type"]:before {
  width: 4rem;
  height: .5rem;
  top: .75rem;
}

.slex-diagram[data-kind="type"]:after {
  background: var(--muted-foreground);
  box-shadow: 0 .75rem 0 -.05rem var(--muted-foreground);
  width: 3rem;
  height: .45rem;
  top: 1.5rem;
}

.slex-diagram[data-kind="alignment"]:before {
  width: 8rem;
  height: .4rem;
  top: 1rem;
}

.slex-diagram[data-kind="alignment"]:after {
  background: var(--muted-foreground);
  width: 6rem;
  height: .35rem;
  top: 1.75rem;
}

.slex-diagram[data-kind="icon"]:before {
  content: "<> check close";
  position: absolute;
  color: var(--muted-foreground);
  letter-spacing: 0;
  font-size: .875rem;
  line-height: 1.2;
  top: .9rem;
  left: .75rem;
}

.slex-diagram[data-kind="font-sample"] {
  display: grid;
  color: var(--foreground);
  align-content:  center;
  gap: .45rem;
  min-height: 6.5rem;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1.3;
}

.slex-diagram[data-kind="font-sample"]:before, .slex-diagram[data-kind="font-sample"]:after {
  display: block;
  letter-spacing: 0;
}

.slex-diagram[data-kind="font-sample"]:before {
  content: "SlexKit";
  font-size: 2rem;
  font-weight: 760;
}

.slex-diagram[data-kind="font-sample"]:after {
  content: "文档即工具，工具即文档";
  color: var(--muted-foreground);
  font-size: 1rem;
  font-weight: 500;
}

.slex-diagram[data-kind="state"] {
  border: 1px solid var(--border);
  background: linear-gradient(var(--muted-foreground), var(--muted-foreground)) left 1rem top 1rem / 7rem .45rem no-repeat, linear-gradient(var(--info), var(--info)) left 10rem top 1rem / 7rem .45rem no-repeat, linear-gradient(var(--success), var(--success)) left 19rem top 1rem / 7rem .45rem no-repeat, linear-gradient(var(--border), var(--border)) left 1rem top 2.35rem / calc(100% - 2rem) 1px no-repeat, linear-gradient(var(--muted), var(--muted)) left 1rem top 3.15rem / calc(100% - 2rem) .8rem no-repeat, linear-gradient(var(--muted), var(--muted)) left 1rem top 4.55rem / calc(100% - 2rem) .8rem no-repeat, var(--background);
  height: 7rem;
}

.slex-diagram[data-kind="markdown"]:before, .slex-diagram[data-kind="fence"]:before, .slex-diagram[data-kind="cards"]:before {
  content: "";
  position: absolute;
  border-radius: var(--radius);
  inset: .9rem;
}

.slex-diagram[data-kind="markdown"]:before {
  background: linear-gradient(var(--foreground), var(--foreground)) left 0 top 0 / 42% .45rem no-repeat, linear-gradient(var(--muted-foreground), var(--muted-foreground)) left 0 top 1.1rem / 82% .32rem no-repeat, linear-gradient(var(--muted-foreground), var(--muted-foreground)) left 0 top 1.8rem / 68% .32rem no-repeat;
}

.slex-diagram[data-kind="fence"]:before {
  border: 1px solid var(--border);
  background: linear-gradient(var(--info), var(--info)) left .7rem top .75rem / 4.5rem .38rem no-repeat, linear-gradient(var(--muted-foreground), var(--muted-foreground)) left .7rem top 1.65rem / 72% .28rem no-repeat, linear-gradient(var(--muted-foreground), var(--muted-foreground)) left .7rem top 2.3rem / 58% .28rem no-repeat, var(--background);
}

.slex-diagram[data-kind="cards"]:before {
  background: linear-gradient(var(--background), var(--background)) left 0 top 0 / 31% 100% no-repeat, linear-gradient(var(--background), var(--background)) left 50% top 0 / 31% 100% no-repeat, linear-gradient(var(--background), var(--background)) right 0 top 0 / 31% 100% no-repeat;
}

.slex-card--dashboard-shell {
  border-radius: calc(var(--radius)  + 6px);
  background: linear-gradient(90deg, color-mix(in oklab, var(--muted) 55%, transparent) 0 13rem, transparent 13rem), var(--card);
  width: 100%;
  min-height: 30rem;
  padding: 1.5rem;
}

.slex-card--dashboard-shell > .slex-card-body {
  gap: 1.25rem;
}

.slex-card--dashboard-shell .slex-grid > * {
  min-width: 0;
}

.slex-card--dashboard-shell .slex-demo-span-2 {
  grid-column: span 2;
}

.slex-card--dashboard-shell .slex-stat {
  min-width: 0;
  padding: .875rem;
}

.slex-card--dashboard-shell .slex-stat-value {
  font-size: 1.35rem;
}

.slex-card--dashboard-shell .slex-stat-number {
  overflow-wrap: normal;
  word-break: keep-all;
}

.slex-demo-topbar {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  padding-bottom: 1rem;
}

.slex-card--dashboard-panel {
  border-radius: var(--radius);
  min-width: 0;
  min-height: 12rem;
  padding: 1rem;
}

.slex-card--dashboard-panel .slex-card-title {
  border-bottom: 0;
  margin-bottom: .625rem;
  padding-bottom: 0;
  font-size: .9375rem;
}

.slex-card--dashboard-panel .slex-table {
  font-size: .8125rem;
}

.slex-dashboard-side {
  display: grid;
  gap: .875rem;
  min-width: 0;
}

@media (max-width: 767px) {
  .slex-card--dashboard-shell .slex-demo-span-2 {
    grid-column: auto;
  }
}

.slex-page--site-home .slex-section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:  end;
}

.slex-page--site-home .slex-section-action {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self:  end;
}

.slex-page--site-home .slex-section-title, .slex-page--site-design .slex-section-title {
  font-size: 1.5rem;
}

.slex-page--site-design {
  gap: 0;
}

.slex-design-shell {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .slex-design-shell {
    grid-template-columns: 13.75rem minmax(0, 1fr);
    align-items:  start;
  }

  .slex-design-sidebar {
    position: sticky;
    top: 5rem;
  }
}

.slex-design-content {
  display: grid;
  gap: 2.5rem;
  min-width: 0;
}

.slex-page--site-design .slex-section {
  scroll-margin-top: 5.5rem;
}

.slex-card--rule, .slex-card--swatch, .slex-card--sample, .slex-card--evidence, .slex-page--site-home .slex-section .slex-card {
  min-height: 11rem;
}

.slex-card--rule .slex-card-title, .slex-card--swatch .slex-card-title, .slex-card--sample .slex-card-title, .slex-card--evidence .slex-card-title, .slex-page--site-home .slex-section .slex-card .slex-card-title {
  border-bottom: 0;
  margin-top: .75rem;
  margin-bottom: .5rem;
  padding-bottom: 0;
  font-size: 1rem;
}

.slex-card--swatch .slex-card-body {
  gap: .75rem;
}

.slex-card--evidence {
  background: color-mix(in oklab, var(--card) 88%, var(--muted));
}

.slex-card--evidence .slex-text--eyebrow {
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  text-transform: none;
}

@media (max-width: 900px) {
  .slex-hero[data-align="split"] {
    grid-template-columns: 1fr;
  }
}

.slex-doc-detail {
  color: var(--foreground);
  min-width: 0;
}

.slex-doc-detail-header {
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
}

.slex-doc-detail-title {
  color: var(--foreground);
  letter-spacing: 0;
  overflow-wrap: anywhere;
  margin: .75rem 0 0;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
}

.slex-doc-detail-summary {
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
  max-width: 45rem;
  margin: .5rem 0 0;
  font-size: .9375rem;
  line-height: 1.7;
}

.slex-doc-prose {
  color: var(--foreground);
  min-width: 0;
  max-width: 54rem;
}

.slex-page--site-design .slex-doc-prose {
  max-width: none;
}

.slex-doc-streamdown {
  min-width: 0;
}

.slex-doc-streamdown li > p {
  display: inline;
  margin: 0;
}

.slex-doc-streamdown li > p + :-webkit-any(.katex-display, pre, blockquote, ul, ol) {
  margin-top: .5rem;
}

.slex-doc-streamdown li > p + :-moz-any(.katex-display, pre, blockquote, ul, ol) {
  margin-top: .5rem;
}

.slex-doc-streamdown li > p + :is(.katex-display, pre, blockquote, ul, ol) {
  margin-top: .5rem;
}

.slex-doc-prose .slex-doc-slexkit-demo {
  width: 100% !important;
  max-width: none !important;
  margin: 1rem 0 1.5rem !important;
}

.slex-doc-prose .slex-doc-slexkit-demo--playground {
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--card) !important;
  padding: 1rem !important;
}

.slex-doc-prose .slex-doc-slexkit-demo--component {
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

.slex-page--site-design .slex-doc-prose .slex-doc-slexkit-demo, .slex-doc-prose [data-markdown-doc="design"] .slex-doc-slexkit-demo {
  box-shadow: none;
  background: none !important;
  border: 0 !important;
  margin: 1rem 0 1.75rem !important;
  padding: 0 !important;
}

.slex-doc-prose .slex-doc-slexkit-demo [data-streamdown="code-block-header"], .slex-doc-prose .slex-doc-slexkit-demo .slex-streamdown-toolbar {
  display: none !important;
}

.slex-doc-prose .slex-doc-slexkit-demo .slex-streamdown-body {
  padding: 0;
}

.slex-doc-prose .slex-doc-slexkit-demo .slexkit-root {
  min-width: 0;
}

.slex-page--site-design .slex-doc-prose h1 {
  color: var(--foreground);
  letter-spacing: 0;
  max-width: 48rem;
  margin: 0 0 .625rem;
  font-size: 1.75rem;
  font-weight: 760;
  line-height: 1.18;
}

.slex-page--site-design .slex-doc-prose h2 {
  margin-top: 2.25rem;
  font-size: 1.45rem;
}

.slex-page--site-design .slex-doc-prose p {
  max-width: 58rem;
  font-size: .9375rem;
}

.slex-page--site-design .slex-doc-slexkit-demo .slex-card {
  border-color: color-mix(in oklab, var(--border) 78%, transparent);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: none;
  min-height: 0;
  padding: 1rem;
}

.slex-page--site-design .slex-doc-slexkit-demo .slex-card:hover {
  border-color: var(--border);
  box-shadow: none;
}

.slex-page--site-design .slex-doc-slexkit-demo .slex-card .slex-card-body {
  gap: .75rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-card .slex-card-title {
  color: var(--foreground);
  border-bottom: 0;
  margin: 0;
  padding-bottom: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-card .slex-swatch {
  border-radius: calc(var(--radius)  - 2px);
  order: -1;
  height: 4.5rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-card .slex-diagram[data-kind="type"] {
  min-height: 4.25rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-card .slex-diagram[data-kind="icon"] {
  min-height: 4.25rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-card .slex-diagram[data-kind="font-sample"] {
  min-height: 4.25rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-card .slex-diagram[data-kind="alignment"] {
  min-height: 4.25rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-card .slex-diagram[data-kind="font-sample"] {
  min-height: 6.5rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-card .slex-text {
  color: var(--muted-foreground);
  font-size: .875rem;
  line-height: 1.6;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-column .slex-text {
  color: var(--muted-foreground);
  font-size: .875rem;
  line-height: 1.6;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-heading-eyebrow {
  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);
  font-size: .7rem;
  font-weight: 600;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-heading {
  gap: .35rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-heading-title {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-heading-meta {
  color: color-mix(in oklab, var(--muted-foreground) 72%, transparent);
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-diagram[data-kind="philosophy"] + .slex-grid .slex-card .slex-card-body {
  gap: .5rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-card .slex-card-title {
  margin-bottom: .75rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-stat {
  min-height: 0;
  padding: .7rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-stat-label {
  text-transform: none;
  font-size: .7rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-stat-value {
  font-size: 1.125rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-stat-unit {
  font-size: .72rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-diagram[data-kind="philosophy"] + .slex-grid {
  margin-top: .75rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-doc-slexkit-demo .slex-card .slex-badge {
  margin-top: .125rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--mini {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-height: 0;
  padding: 1rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--gate {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-height: 0;
  padding: 1rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--tone {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-height: 0;
  padding: 1rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--swatch-mini {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-height: 0;
  padding: 1rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--gate {
  min-height: 9.25rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--tone {
  min-height: 9.25rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--mini .slex-card-body {
  gap: .75rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--gate .slex-card-body {
  gap: .75rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--tone .slex-card-body {
  gap: .75rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--swatch-mini .slex-card-body {
  gap: .75rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--mini .slex-card-title {
  border-bottom: 0;
  margin: 0;
  padding-bottom: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--gate .slex-card-title {
  border-bottom: 0;
  margin: 0;
  padding-bottom: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--tone .slex-card-title {
  border-bottom: 0;
  margin: 0;
  padding-bottom: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--swatch-mini .slex-card-title {
  border-bottom: 0;
  margin: 0;
  padding-bottom: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--mini .slex-text {
  color: var(--muted-foreground);
  font-size: .875rem;
  line-height: 1.55;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--gate .slex-text {
  color: var(--muted-foreground);
  font-size: .875rem;
  line-height: 1.55;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--tone .slex-text {
  color: var(--muted-foreground);
  font-size: .875rem;
  line-height: 1.55;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--swatch-mini .slex-text {
  color: var(--muted-foreground);
  font-size: .875rem;
  line-height: 1.55;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--swatch-mini .slex-swatch {
  height: 3.25rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-card--tone .slex-badge {
  margin-top: .125rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-grid + .slex-grid {
  margin-top: .75rem;
}

:where(.slex-page--site-design, .slex-docs-markdown[data-markdown-doc="design"]) .slex-grid + .slex-diagram {
  margin-top: .75rem;
}

.slex-doc-prose .slex-doc-streamdown [data-streamdown="code-block"] {
  box-shadow: var(--shadow-sm);
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--card) !important;
  gap: .375rem !important;
  width: 100% !important;
  max-width: none !important;
  margin: 1rem 0 !important;
  padding: .5rem !important;
}

.slex-doc-playground-inline {
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  box-shadow: var(--shadow-sm);
  width: 100%;
  margin: 1rem 0;
}

.slex-doc-prose .slex-doc-streamdown [data-streamdown="code-block-header"] {
  min-height: 1.5rem;
  padding: 0 .25rem;
  color: var(--muted-foreground) !important;
  height: auto !important;
  font-size: .75rem !important;
}

.slex-doc-prose .slex-doc-streamdown [data-streamdown="code-block-body"] {
  border-color: var(--border) !important;
  border-radius: calc(var(--radius)  - 2px) !important;
  background: var(--muted) !important;
  padding: .875rem !important;
}

.slex-doc-prose .slex-doc-streamdown [data-streamdown="code-block"] pre {
  box-shadow: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.slex-doc-prose h2 {
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
  letter-spacing: 0;
  margin: 2rem 0 .75rem;
  padding-bottom: .5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.slex-doc-prose h2:first-child {
  margin-top: 0;
}

.slex-doc-prose h3 {
  color: var(--foreground);
  letter-spacing: 0;
  margin: 1.25rem 0 .5rem;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}

.slex-doc-prose p, .slex-doc-prose li {
  color: var(--muted-foreground);
  font-size: .9375rem;
  line-height: 1.7;
}

.slex-doc-prose p {
  max-width: 48rem;
  margin: .75rem 0;
}

.slex-doc-prose ul, .slex-doc-prose ol {
  display: grid;
  gap: .25rem;
  margin: .75rem 0;
  padding-left: 1.25rem;
}

.slex-doc-prose pre {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
  margin: 1rem 0;
  padding: 1rem;
}

.slex-doc-prose pre.slex-markdown-code {
  --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-doc-prose .slex-markdown-code .hljs {
  display: block;
  overflow-x: auto;
  color: inherit;
  background: none;
  padding: 0;
}

.slex-doc-prose .slex-markdown-code :where(.hljs-comment, .hljs-quote) {
  color: var(--slex-code-comment);
  font-style: italic;
}

.slex-doc-prose .slex-markdown-code :where(.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type) {
  color: var(--slex-code-keyword);
}

.slex-doc-prose .slex-markdown-code :where(.hljs-title, .hljs-title.function_, .hljs-title.class_, .hljs-section) {
  color: var(--slex-code-function);
}

.slex-doc-prose .slex-markdown-code :where(.hljs-name, .hljs-attribute, .hljs-attr, .hljs-property, .hljs-variable) {
  color: var(--slex-code-name);
}

.slex-doc-prose .slex-markdown-code :where(.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet) {
  color: var(--slex-code-literal);
}

.slex-doc-prose .slex-markdown-code :where(.hljs-string, .hljs-regexp, .hljs-link) {
  color: var(--slex-code-string);
}

.slex-doc-prose .slex-markdown-code :where(.hljs-punctuation, .hljs-operator, .hljs-subst) {
  color: var(--slex-code-punctuation);
}

.slex-doc-prose code {
  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
  font-size: .8125rem;
}

.slex-doc-prose :not(pre) > code {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius)  - 4px);
  background: var(--muted);
  color: var(--foreground);
  padding: .0625rem .25rem;
}

.slex-doc-prose table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  color: var(--foreground);
  width: 100%;
  max-width: 100%;
  margin: 1rem 0;
  font-size: .875rem;
}

.slex-doc-prose th, .slex-doc-prose td {
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  padding: .625rem .75rem;
}

.slex-doc-prose th {
  background: var(--muted);
  color: var(--muted-foreground);
  font-weight: 650;
}

@media (max-width: 640px) {
  .slex-heading[data-level="1"] .slex-heading-title, .slex-hero-title {
    font-size: 2.5rem;
  }

  .slex-hero {
    gap: 1.5rem;
  }

  .slex-hero-subtitle {
    font-size: 1rem;
  }

  .slex-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .slex-hero-action {
    width: 100%;
  }

  .slex-page--site-home .slex-hero {
    min-height: auto;
  }

  .slex-page--site-home .slex-section-header {
    grid-template-columns: 1fr;
  }

  .slex-page--site-home .slex-section-action {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .slex-doc-detail-title {
    font-size: 1.5rem;
  }

  .slex-doc-prose pre {
    padding: .875rem;
  }

  .slex-page--site-design .slex-doc-slexkit-demo .slex-row--balanced-tiles[data-tile-kind="stat"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .slex-page--site-design .slex-doc-slexkit-demo .slex-row--balanced-tiles[data-tile-kind="stat"] > .slex-stat {
    grid-column: auto !important;
  }

  .slex-page--site-design .slex-doc-slexkit-demo .slex-row--balanced-tiles[data-tile-kind="stat"] > .slex-stat:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  .slex-diagram[data-kind="philosophy"] {
    background: radial-gradient(circle at 50% 50%, var(--primary) 0 .45rem, transparent .5rem), radial-gradient(circle at 28% 38%, color-mix(in oklab, var(--info) 85%, white) 0 .35rem, transparent .4rem), radial-gradient(circle at 72% 38%, color-mix(in oklab, var(--success) 85%, white) 0 .35rem, transparent .4rem), radial-gradient(circle at 50% 75%, color-mix(in oklab, var(--warning) 85%, white) 0 .35rem, transparent .4rem), radial-gradient(circle at 50% 50%, transparent 0 1.85rem, color-mix(in oklab, var(--border) 70%, transparent) 1.9rem 1.95rem, transparent 2rem 3.7rem, color-mix(in oklab, var(--border) 70%, transparent) 3.75rem 3.8rem, transparent 3.85rem 5.45rem, color-mix(in oklab, var(--border) 70%, transparent) 5.5rem 5.55rem, transparent 5.6rem), var(--background);
  }

  .slex-diagram[data-kind="state"] {
    background: linear-gradient(var(--muted-foreground), var(--muted-foreground)) left 1rem top 1rem / 28% .45rem no-repeat, linear-gradient(var(--info), var(--info)) center top 1rem / 28% .45rem no-repeat, linear-gradient(var(--success), var(--success)) right 1rem top 1rem / 28% .45rem no-repeat, linear-gradient(var(--border), var(--border)) left 1rem top 2.35rem / calc(100% - 2rem) 1px no-repeat, linear-gradient(var(--muted), var(--muted)) left 1rem top 3.15rem / calc(100% - 2rem) .8rem no-repeat, linear-gradient(var(--muted), var(--muted)) left 1rem top 4.55rem / calc(100% - 2rem) .8rem no-repeat, var(--background);
  }
}

/* site/styles/navigation.css */
.slex-toc {
  color: var(--muted-foreground);
  min-width: 0;
  font-size: .875rem;
}

.slex-toc-label {
  color: var(--muted-foreground);
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: .5rem;
  font-size: .75rem;
  font-weight: 600;
}

.slex-toc-list {
  display: grid;
  gap: .25rem;
}

.slex-toc-link {
  display: block;
  border-radius: calc(var(--radius)  - 2px);
  color: var(--muted-foreground);
  text-decoration: none;
  padding: .375rem .5rem;
  transition: background .15s, color .15s;
}

.slex-toc-link:hover, .slex-toc-link--active {
  background: var(--accent);
  color: var(--accent-foreground);
}

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

.slex-toc[data-orientation="horizontal"] {
  overflow-x: auto;
}

.slex-toc[data-orientation="horizontal"] .slex-toc-list {
  display: flex;
  gap: .25rem;
  width: max-content;
  min-width: 100%;
}

.slex-toc[data-orientation="horizontal"] .slex-toc-link {
  white-space: nowrap;
  flex-shrink: 0;
}

.slex-catalog {
  color: var(--muted-foreground);
  min-width: 0;
}

.slex-catalog-header {
  display: flex;
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items:  center;
  gap: .75rem;
  min-height: 2rem;
  padding-bottom: .75rem;
}

.slex-catalog-label {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
}

.slex-catalog-count {
  color: var(--muted-foreground);
  font-size: .8125rem;
  line-height: 1.25;
}

.slex-catalog-list {
  display: grid;
  gap: 1rem;
  padding-top: 1rem;
}

.slex-catalog-section {
  display: grid;
  gap: .25rem;
}

.slex-catalog-group {
  display: flex;
  color: var(--muted-foreground);
  letter-spacing: 0;
  justify-content: space-between;
  align-items:  center;
  gap: .5rem;
  min-height: 1.5rem;
  padding: 0 .625rem;
  font-size: .75rem;
  font-weight: 700;
}

.slex-catalog-group-count {
  color: color-mix(in oklab, var(--muted-foreground) 72%, transparent);
  font-size: .6875rem;
  font-weight: 600;
}

.slex-catalog-section-list {
  display: grid;
  gap: .125rem;
}

.slex-catalog-item {
  display: flex;
  border-radius: var(--radius);
  color: var(--muted-foreground);
  text-decoration: none;
  justify-content: space-between;
  align-items:  center;
  gap: .5rem;
  min-width: 0;
  min-height: 2.125rem;
  padding: .375rem .625rem;
  transition: background .15s, color .15s, box-shadow .15s;
}

.slex-catalog-item:hover, .slex-catalog-item--active {
  background: var(--accent);
  color: var(--accent-foreground);
}

.slex-catalog-item--active {
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 60%, transparent);
}

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

.slex-catalog-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.slex-catalog-status {
  color: var(--muted-foreground);
  flex-shrink: 0;
  font-size: .6875rem;
}

@media (max-width: 1279px) {
  .slex-doc-detail-rail {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .slex-catalog-header, .slex-catalog-group, .slex-catalog-item {
    gap: .5rem;
  }

  .slex-catalog-title {
    white-space: normal;
  }
}

.slex-doc-detail-layout {
  display: grid;
  align-items:  start;
  gap: 2rem;
}

.slex-doc-detail-content {
  min-width: 0;
}

.slex-doc-detail-rail {
  display: grid;
  color: var(--muted-foreground);
  align-self:  start;
  gap: .875rem;
  font-size: .8125rem;
}

.slex-doc-detail-rail-title {
  color: var(--muted-foreground);
  margin-bottom: .625rem;
  padding-left: .75rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.2;
}

.slex-doc-detail-toc {
  display: grid;
  border-left: 1px solid var(--border);
  gap: .375rem;
}

.slex-doc-detail-toc-link {
  position: relative;
  display: flex;
  color: var(--muted-foreground);
  text-decoration: none;
  background: none;
  border-left: 1px solid #0000;
  align-items:  center;
  min-height: 1.5rem;
  margin-left: -1px;
  padding-left: .75rem;
  transition: color .15s;
  line-height: 1.35;
}

.slex-doc-detail-toc-link:before {
  content: none;
}

.slex-doc-detail-toc-link:hover, .slex-doc-detail-toc-link--active {
  color: var(--foreground);
}

.slex-doc-detail-toc-link--active {
  border-left-color: var(--foreground);
  font-weight: 500;
}

.slex-doc-detail-actions {
  display: inline-flex;
  align-items:  center;
  gap: .25rem;
  min-width: 0;
}

.slex-doc-detail-actions--rail {
  display: grid;
  border-top: 1px solid var(--border);
  justify-items: start;
  gap: .25rem;
  width: 100%;
  margin-top: .625rem;
  padding-top: .75rem;
  padding-left: .75rem;
}

.slex-doc-detail-copy-action {
  position: relative;
  display: inline-flex;
}

.slex-doc-detail-action {
  display: inline-flex;
  border-radius: calc(var(--radius)  - 2px);
  color: var(--muted-foreground);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: center;
  align-items:  center;
  gap: .375rem;
  min-height: 2rem;
  padding: 0 .5rem;
  transition: background .15s, color .15s;
  font-size: .75rem;
  font-weight: 500;
}

.slex-doc-detail-actions--rail .slex-doc-detail-action {
  justify-content: flex-start;
  min-height: 1.875rem;
  padding: 0 .375rem;
}

.slex-doc-detail-action-icon {
  display: inline-flex;
  color: currentColor;
  flex: none;
  width: .875rem;
  height: .875rem;
}

.slex-doc-detail-action-icon svg {
  fill: currentColor;
  width: 100%;
  height: 100%;
}

.slex-doc-detail-copy-feedback {
  position: absolute;
  z-index: 20;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius)  - 2px);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  white-space: nowrap;
  width: max-content;
  max-width: min(12rem, 100vw - 2rem);
  padding: .375rem .5rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.25;
  bottom: calc(100% + .375rem);
  left: 50%;
  transform: translateX(-50%);
}

.slex-doc-detail-copy-feedback:empty {
  display: none;
}

.slex-doc-detail-copy-feedback[data-state="success"] {
  color: var(--popover-foreground);
}

.slex-doc-detail-copy-feedback[data-state="error"] {
  color: var(--destructive);
}

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

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

@media (min-width: 1280px) {
  .slex-doc-detail-layout {
    grid-template-columns: minmax(0, 1fr) 15rem;
  }

  .slex-doc-detail-rail {
    position: sticky;
    top: 5rem;
  }
}

/* site/styles/docs-shell.css */
.slex-site-nav {
  position: relative;
}

.slex-site-nav-brand {
  min-width: 0;
}

.slex-site-nav-actions {
  flex: none;
  align-items:  center;
  width: max-content;
  min-width: max-content;
  display: inline-flex !important;
  gap: .375rem !important;
}

.slex-site-nav-links {
  display: none;
  color: var(--muted-foreground);
  justify-content: center;
  align-items:  center;
  gap: clamp(1.25rem, 3vw, 2rem);
  min-width: 0;
  font-size: 1rem;
  line-height: 1;
}

.slex-site-nav-link {
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color .15s;
}

.slex-site-nav-link:hover, .slex-site-nav-link.text-foreground {
  color: var(--foreground);
}

.slex-site-nav-link:focus-visible {
  color: var(--foreground);
}

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

.slex-site-footer-link {
  color: color-mix(in oklab, var(--primary) 88%, var(--foreground));
  text-decoration-color: color-mix(in oklab, var(--primary) 42%, transparent);
  text-underline-offset: .18em;
  transition: color .14s, text-decoration-color .14s;
}

.slex-doc-prose :where(a:not([class])) {
  color: color-mix(in oklab, var(--primary) 88%, var(--foreground));
  text-decoration-color: color-mix(in oklab, var(--primary) 42%, transparent);
  text-underline-offset: .18em;
  transition: color .14s, text-decoration-color .14s;
}

.slex-static-prose :where(a:not([class])) {
  color: color-mix(in oklab, var(--primary) 88%, var(--foreground));
  text-decoration-color: color-mix(in oklab, var(--primary) 42%, transparent);
  text-underline-offset: .18em;
  transition: color .14s, text-decoration-color .14s;
}

.slex-doc-prose :where(a:not([class])) {
  font-weight: 500;
}

.slex-static-prose :where(a:not([class])) {
  font-weight: 500;
}

.slex-site-footer-link:hover {
  color: var(--foreground);
  text-decoration-color: currentColor;
}

.slex-site-footer-link:focus-visible {
  color: var(--foreground);
  text-decoration-color: currentColor;
}

.slex-doc-prose :where(a:not([class]):hover) {
  color: var(--foreground);
  text-decoration-color: currentColor;
}

.slex-doc-prose :where(a:not([class]):focus-visible) {
  color: var(--foreground);
  text-decoration-color: currentColor;
}

.slex-static-prose :where(a:not([class]):hover) {
  color: var(--foreground);
  text-decoration-color: currentColor;
}

.slex-static-prose :where(a:not([class]):focus-visible) {
  color: var(--foreground);
  text-decoration-color: currentColor;
}

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

.slex-doc-prose :where(a:not([class]):focus-visible) {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 24%, transparent);
}

.slex-static-prose :where(a:not([class]):focus-visible) {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 24%, transparent);
}

.slex-site-logo {
  display: inline-block;
  background: var(--primary);
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KICA8ZGVmcz4KICAgIDxtYXNrIGlkPSJjdXRvdXRNYXNrIj4KICAgICAgPHJlY3Qgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHJ4PSIxMTIiIGZpbGw9IndoaXRlIiAvPgoKICAgICAgPHJlY3QgeD0iNjQiIHk9IjkyIiB3aWR0aD0iMjQwIiBoZWlnaHQ9IjQ4IiByeD0iMTYiIGZpbGw9ImJsYWNrIiAvPgogICAgICA8cmVjdCB4PSIzNDgiIHk9IjkyIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQ4IiByeD0iMTYiIGZpbGw9ImJsYWNrIiAvPgoKICAgICAgPHJlY3QgeD0iNjQiIHk9IjIxMiIgd2lkdGg9IjEwMCIgaGVpZ2h0PSI0OCIgcng9IjE2IiBmaWxsPSJibGFjayIgLz4KICAgICAgPHJlY3QgeD0iMjA4IiB5PSIyMTIiIHdpZHRoPSIyNDAiIGhlaWdodD0iNDgiIHJ4PSIxNiIgZmlsbD0iYmxhY2siIC8+CgogICAgICA8cmVjdCB4PSI2NCIgeT0iMzMyIiB3aWR0aD0iMjQwIiBoZWlnaHQ9Ijg4IiByeD0iMjIiIGZpbGw9ImJsYWNrIiAvPgogICAgICA8Y2lyY2xlIGN4PSIzODgiIGN5PSIzNzYiIHI9IjQyIiBmaWxsPSJibGFjayIgLz4KCiAgICAgIDxjaXJjbGUgY3g9IjEzNiIgY3k9IjM3NiIgcj0iMjIiIGZpbGw9IndoaXRlIiAvPgogICAgICA8Y2lyY2xlIGN4PSIyMzAiIGN5PSIzNzYiIHI9IjIyIiBmaWxsPSJ3aGl0ZSIgLz4KICAgIDwvbWFzaz4KICA8L2RlZnM+CgogIDxyZWN0IHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiByeD0iMTEyIiBmaWxsPSJjdXJyZW50Q29sb3IiIG1hc2s9InVybCgjY3V0b3V0TWFzaykiIC8+Cjwvc3ZnPgo=") center / contain no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KICA8ZGVmcz4KICAgIDxtYXNrIGlkPSJjdXRvdXRNYXNrIj4KICAgICAgPHJlY3Qgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHJ4PSIxMTIiIGZpbGw9IndoaXRlIiAvPgoKICAgICAgPHJlY3QgeD0iNjQiIHk9IjkyIiB3aWR0aD0iMjQwIiBoZWlnaHQ9IjQ4IiByeD0iMTYiIGZpbGw9ImJsYWNrIiAvPgogICAgICA8cmVjdCB4PSIzNDgiIHk9IjkyIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQ4IiByeD0iMTYiIGZpbGw9ImJsYWNrIiAvPgoKICAgICAgPHJlY3QgeD0iNjQiIHk9IjIxMiIgd2lkdGg9IjEwMCIgaGVpZ2h0PSI0OCIgcng9IjE2IiBmaWxsPSJibGFjayIgLz4KICAgICAgPHJlY3QgeD0iMjA4IiB5PSIyMTIiIHdpZHRoPSIyNDAiIGhlaWdodD0iNDgiIHJ4PSIxNiIgZmlsbD0iYmxhY2siIC8+CgogICAgICA8cmVjdCB4PSI2NCIgeT0iMzMyIiB3aWR0aD0iMjQwIiBoZWlnaHQ9Ijg4IiByeD0iMjIiIGZpbGw9ImJsYWNrIiAvPgogICAgICA8Y2lyY2xlIGN4PSIzODgiIGN5PSIzNzYiIHI9IjQyIiBmaWxsPSJibGFjayIgLz4KCiAgICAgIDxjaXJjbGUgY3g9IjEzNiIgY3k9IjM3NiIgcj0iMjIiIGZpbGw9IndoaXRlIiAvPgogICAgICA8Y2lyY2xlIGN4PSIyMzAiIGN5PSIzNzYiIHI9IjIyIiBmaWxsPSJ3aGl0ZSIgLz4KICAgIDwvbWFzaz4KICA8L2RlZnM+CgogIDxyZWN0IHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiByeD0iMTEyIiBmaWxsPSJjdXJyZW50Q29sb3IiIG1hc2s9InVybCgjY3V0b3V0TWFzaykiIC8+Cjwvc3ZnPgo=") center / contain no-repeat;
  transition: background-color .14s;
}

.slex-site-icon-button {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  flex: none;
  place-items:  center;
  transition: background .15s, color .15s, box-shadow .15s;
  display: inline-grid !important;
  border-radius: calc(var(--radius)  + 2px) !important;
  color: var(--muted-foreground) !important;
  box-shadow: none !important;
  background: none !important;
  border: 1px solid #0000 !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-height: 2.25rem !important;
  padding: 0 !important;
}

.slex-site-icon-button:hover {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

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

.slex-site-icon-button :where(svg, .slex-icon) {
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
}

.slex-site-language-control {
  position: relative;
  flex: none;
}

.slex-site-language-menu {
  position: absolute;
  z-index: 70;
  display: grid;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius)  + 2px);
  background: var(--popover, var(--background));
  color: var(--popover-foreground, var(--foreground));
  box-shadow: var(--shadow-md, 0 6px 16px #0000001f, 0 2px 4px #00000014);
  gap: .125rem;
  min-width: 7.75rem;
  padding: .25rem;
  top: calc(100% + .5rem);
  right: 0;
}

.slex-site-language-menu[hidden] {
  display: none;
}

.slex-site-language-option {
  border-radius: var(--radius);
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: none;
  text-align: left;
  background: none;
  border: 0;
  width: 100%;
  padding: .5rem .625rem;
  transition: background .12s, color .12s;
  font-size: .875rem;
  line-height: 1.25rem;
}

.slex-site-language-option:hover, .slex-site-language-option[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-foreground);
}

.slex-site-language-option:focus-visible {
  background: var(--accent);
  color: var(--accent-foreground);
}

.slex-site-language-option[aria-selected="true"] {
  font-weight: 600;
}

.slex-site-language-option:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 28%, transparent);
}

.slex-theme-icon {
  display: inline-flex;
  grid-area: 1 / 1;
}

#themeBtn .slex-theme-icon--dark, .dark #themeBtn .slex-theme-icon--light {
  display: none;
}

.dark #themeBtn .slex-theme-icon--dark {
  display: inline-flex;
}

.slex-docs-shell {
  display: grid;
  box-sizing: border-box;
  align-items:  start;
  gap: 1.5rem;
  width: min(100%, 92rem);
  max-width: none;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.slex-docs-shell-sidebar {
  scrollbar-width: none;
  min-width: 0;
  padding-right: 0;
}

.slex-docs-shell-sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.slex-docs-flowbite-sidebar {
  border-right: 1px solid var(--border);
  color: var(--muted-foreground);
  box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 2rem);
  background: var(--background) !important;
  width: min(18rem, 100vw - 2rem) !important;
  padding: 0 !important;
}

.slex-docs-flowbite-sidebar > div {
  height: 100%;
  background: var(--background) !important;
  overflow-y: auto !important;
  padding: 1rem !important;
}

.slex-docs-flowbite-sidebar :where(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.slex-docs-flowbite-sidebar :where(li) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.slex-docs-flowbite-sidebar :where(li)::marker {
  content: "";
}

.slex-docs-flowbite-sidebar :where(a) {
  display: flex;
  border-radius: calc(var(--radius)  + 2px);
  align-items:  center;
  width: 100%;
  min-height: 2.35rem;
  text-decoration: none !important;
}

.slex-docs-flowbite-sidebar :where(a:hover) {
  text-decoration: none !important;
}

.slex-docs-flowbite-sidebar :where(a:visited) {
  color: inherit;
}

.slex-docs-sidebar-item {
  color: var(--muted-foreground);
  outline: none;
  background: none;
  border: 1px solid #0000;
  margin: .0625rem 0;
  padding: .4375rem .75rem;
  transition: background-color .14s, border-color .14s, color .14s;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.35;
}

.slex-docs-sidebar-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.slex-docs-sidebar-item:hover {
  background: color-mix(in oklab, var(--accent) 56%, transparent);
  color: var(--foreground);
}

.slex-docs-sidebar-item:focus-visible {
  background: color-mix(in oklab, var(--accent) 62%, transparent);
  border-color: color-mix(in oklab, var(--ring) 42%, transparent);
  color: var(--foreground);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 14%, transparent);
}

.slex-docs-sidebar-item--active, .slex-docs-sidebar-item--active:hover {
  background: color-mix(in oklab, var(--accent) 88%, transparent);
  color: var(--foreground);
  box-shadow: none;
  border-color: #0000;
  font-weight: 650;
}

.slex-docs-sidebar-item--active:focus-visible {
  background: color-mix(in oklab, var(--accent) 88%, transparent);
  color: var(--foreground);
  box-shadow: none;
  border-color: #0000;
  font-weight: 650;
}

.slex-docs-section {
  margin: 0;
  padding: 0;
}

.slex-docs-section + .slex-docs-section {
  margin-top: .375rem;
}

.slex-docs-section-trigger {
  display: flex;
  border-radius: calc(var(--radius)  + 2px);
  color: var(--muted-foreground);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items:  center;
  gap: .75rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0 .625rem;
  transition: background .14s, color .14s;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.25;
}

.slex-docs-section-trigger:hover, .slex-docs-section-trigger--open {
  color: var(--foreground);
}

.slex-docs-section-trigger:hover {
  background: color-mix(in oklab, var(--accent) 42%, transparent);
}

.slex-docs-section-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 18%, transparent);
}

.slex-docs-section-trigger-main {
  display: inline-flex;
  align-items:  center;
  gap: .625rem;
  min-width: 0;
}

.slex-docs-section-icon, .slex-docs-section-caret {
  display: inline-flex;
  color: currentColor;
  flex: none;
  width: 1rem;
  height: 1rem;
}

.slex-docs-section-icon svg, .slex-docs-section-caret svg {
  fill: currentColor;
  width: 100%;
  height: 100%;
}

.slex-docs-section-caret {
  opacity: .74;
  transition: transform .14s;
}

.slex-docs-section-trigger[aria-expanded="false"] .slex-docs-section-caret {
  transform: rotate(-90deg);
}

.slex-docs-section-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  border-left: 1px solid #0000;
  margin: 0 0 0 1.125rem;
  padding: 0 0 0 .875rem;
  transition: grid-template-rows .18s, opacity .14s, margin .18s, border-color .18s, padding .18s, visibility 0s linear .18s;
}

.slex-docs-section-panel--open {
  grid-template-rows: 1fr;
  border-left-color: var(--border);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  margin: .375rem 0 1rem 1.125rem;
  padding: .625rem 0 .25rem .875rem;
  transition: grid-template-rows .18s, opacity .14s, margin .18s, border-color .18s, padding .18s, visibility;
}

.slex-docs-section-panel-inner {
  display: grid;
  overflow: hidden;
  gap: 1.125rem;
  min-height: 0;
}

.slex-docs-subgroup {
  display: grid;
  gap: .25rem;
}

.slex-docs-subgroup-title {
  color: color-mix(in oklab, var(--muted-foreground) 74%, transparent);
  letter-spacing: .04em;
  padding: 0 .625rem;
  font-size: .6875rem;
  font-weight: 650;
  line-height: 1.5;
}

.slex-docs-subgroup-items {
  display: grid;
  gap: .0625rem;
}

@media (prefers-reduced-motion: reduce) {
  .slex-docs-section-panel {
    transition: none;
  }
}

.slex-docs-shell-main {
  display: grid;
  align-content:  start;
  width: 100%;
  min-width: 0;
}

.slex-docs-shell-main .slex-doc-detail, .slex-docs-shell-main .slex-doc-prose, .slex-docs-shell-main .slex-doc-streamdown {
  width: 100%;
  max-width: none;
}

.slex-docs-shell > .slex-doc-detail-rail {
  min-width: 0;
}

.slex-docs-shell-playground {
  width: 100%;
  margin-bottom: 1.75rem;
}

.slex-docs-shell-empty {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  color: var(--muted-foreground);
  padding: 1rem;
  font-size: .875rem;
}

.slex-docs-shell-main .slex-doc-detail-header {
  display: flex;
  border-bottom: 0;
  justify-content: flex-end;
  margin-bottom: 1rem;
  padding-bottom: 0;
}

.slex-docs-mobile-toolbar {
  display: flex;
  position: fixed;
  z-index: 55;
  justify-content: flex-end;
  align-items:  center;
  top: 1.375rem;
  right: 7rem;
}

.slex-docs-sidebar-trigger {
  background: none !important;
}

.slex-static-page, .slex-docs-layout {
  box-sizing: border-box;
  width: min(100%, 88rem);
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.slex-static-home {
  min-height: calc(100vh - 5rem);
}

.slex-static-prose {
  color: var(--foreground);
  width: min(100%, 52rem);
  min-width: 0;
}

.slex-static-prose :where(h1) {
  color: var(--foreground);
  letter-spacing: 0;
  margin: 0 0 1rem;
  font-size: 2.25rem;
  font-weight: 750;
  line-height: .96;
}

.slex-static-prose :where(h2) {
  color: var(--foreground);
  letter-spacing: 0;
  margin: 2.25rem 0 .75rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.slex-static-prose :where(p) {
  color: var(--muted-foreground);
  font-size: 1rem;
  line-height: 1.75;
}

.slex-static-prose :where(li) {
  color: var(--muted-foreground);
  font-size: 1rem;
  line-height: 1.75;
}

.slex-static-prose :where(ul, ol) {
  display: grid;
  gap: .375rem;
  margin: 1rem 0;
  padding-left: 1.25rem;
}

.slex-static-prose :where(.slex-streamdown-block, .slexkit-playground-shell) {
  margin-top: 1.5rem;
}

.slex-home-page {
  box-sizing: border-box;
  width: min(100%, 96rem);
  margin: 0 auto;
  padding: 4rem 1.5rem 7rem;
}

.slex-home-hero {
  display: grid;
  place-items:  start center;
  gap: 4rem;
}

.slex-home-copy {
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items:  center;
  width: min(100%, 39rem);
  min-width: 0;
  margin: 0 auto;
}

.slex-home-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items:  center;
  gap: 1.125rem;
  width: min(100%, 38rem);
  min-width: 0;
}

.slex-home-brand-row {
  display: inline-flex;
  justify-content: center;
  align-items:  center;
  gap: 1.25rem;
  min-width: 0;
}

.slex-home-brand-logo {
  border-radius: calc(var(--radius)  + 4px);
  flex: none;
  width: 4.35rem;
  height: 4.35rem;
  margin-top: 0;
  transform: none;
}

.slex-home-brand-text {
  text-align: center;
  min-width: 0;
}

.slex-home-eyebrow {
  color: var(--muted-foreground);
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
}

.slex-home-title {
  color: var(--foreground);
  letter-spacing: 0;
  margin: 0;
  font-size: 5.25rem;
  font-weight: 780;
  line-height: .94;
}

.slex-home-expanded-name {
  display: inline-flex;
  --slex-home-expanded-name-width: 0px;
  color: color-mix(in oklab, var(--muted-foreground) 78%, transparent);
  overflow: hidden;
  white-space: nowrap;
  animation: slex-home-caret .9s steps(1, end) infinite;
  border-right: 2px solid;
  align-items: baseline;
  gap: 0;
  width: 0;
  max-width: 100%;
  margin-bottom: .75rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.4;
}

.slex-home-expanded-word {
  display: inline-flex;
  flex: none;
  align-items: baseline;
}

.slex-home-expanded-initial {
  color: var(--foreground);
  font-weight: 500;
}

.slex-home-expanded-rest {
  color: inherit;
  font-weight: 500;
}

.slex-home-expanded-char {
  display: inline-block;
}

.slex-home-expanded-space {
  width: .42em;
}

.slex-home-lede {
  color: var(--muted-foreground);
  text-align: center;
  width: min(100%, 39rem);
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.6;
}

@keyframes slex-home-caret {
  0%, 49% {
    border-color: currentColor;
  }

  50%, 100% {
    border-color: #0000;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slex-home-expanded-name {
    animation: none;
    border-right: 0;
    width: auto;
  }

  .slex-home-preview {
    animation: none;
  }
}

.slex-home-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 2.5rem;
}

.slex-home-action {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius)  + 2px);
  color: var(--foreground);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  background: none;
  justify-content: center;
  align-items:  center;
  min-height: 3rem;
  padding: 0 1.125rem;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1;
}

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

.slex-home-action:hover {
  transform: translateY(-1px);
}

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

.slex-home-preview {
  position: relative;
  animation: slex-home-preview-enter .68s cubic-bezier(.22, 1, .36, 1) .38s both;
  justify-self: center;
  width: min(100%, 72rem);
  min-width: 0;
}

.slex-home-preview:before {
  position: absolute;
  box-shadow: 0 1.5rem 4rem color-mix(in oklab, var(--foreground) 12%, transparent);
  content: "";
  pointer-events: none;
  border-radius: 1rem;
  inset: 0;
}

.slex-home-preview-surface {
  position: relative;
  display: block;
  overflow: visible;
  --slex-stat-initial-delay: .82s;
  background: none;
  border-radius: 1rem;
  width: 100%;
  height: auto;
}

.slex-home-preview-surface > .slexkit-root, .slex-home-preview-surface > .slexkit-root > .slex-layout, .slex-home-preview-surface .slex-home-playground {
  height: auto;
  min-height: 0;
}

.slex-home-preview-surface .slex-home-playground {
  border-radius: inherit;
}

.slex-home-playground .slex-playground-preview-pane, .slex-home-playground .slex-playground-code-pane, .slex-home-playground .slex-playground-live-pane {
  height: auto;
  min-height: 0;
}

.slex-home-playground .slex-playground-preview-pane {
  overflow: visible;
}

.slex-home-playground .slex-playground-code, .slex-home-playground .slex-playground-editor, .slex-home-playground .slex-playground-editor.codemirror, .slex-home-playground .slex-playground-editor .cm-editor, .slex-home-playground .slex-playground-editor .cm-scroller {
  height: 100%;
  min-height: 0;
}

.slex-home-playground .slex-playground-live-code, .slex-home-playground .slex-playground-live-preview {
  min-height: 0;
}

@keyframes slex-home-preview-enter {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }

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

.slex-docs-layout {
  display: grid;
  align-items:  start;
  gap: 2rem;
}

.slex-docs-sidebar, .slex-docs-toc {
  display: none;
}

.slex-docs-article {
  min-width: 0;
}

.slex-docs-title {
  color: var(--foreground);
  letter-spacing: 0;
  margin: 0;
  font-size: 2rem;
  font-weight: 750;
  line-height: 1;
}

.slex-docs-summary {
  color: var(--muted-foreground);
  width: min(100%, 48rem);
  margin: .875rem 0 0;
  font-size: 1rem;
  line-height: 1.65;
}

.slex-docs-markdown {
  margin-top: 2rem;
}

.slex-docs-markdown table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  color: var(--foreground);
  width: 100%;
  max-width: 100%;
  margin: 1rem 0;
  font-size: .875rem;
}

.slex-docs-markdown th, .slex-docs-markdown td {
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  padding: .625rem .75rem;
}

.slex-docs-markdown th {
  background: var(--muted);
  color: var(--muted-foreground);
  font-weight: 650;
}

.slex-doc-nav-group {
  display: grid;
  gap: .125rem;
}

.slex-doc-nav-group + .slex-doc-nav-group {
  margin-top: 1.25rem;
}

.slex-doc-nav-title, .slex-docs-toc-title {
  color: var(--muted-foreground);
  letter-spacing: 0;
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.25;
}

.slex-doc-nav-link {
  display: block;
  border-radius: calc(var(--radius)  - 2px);
  color: var(--muted-foreground);
  text-decoration: none;
  min-width: 0;
  padding: .4375rem .625rem;
  transition: background .15s, color .15s, box-shadow .15s;
  font-size: .875rem;
  line-height: 1.25;
}

.slex-doc-nav-link:hover, .slex-doc-nav-link.active {
  background: var(--accent);
  color: var(--foreground);
}

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

.slex-docs-toc {
  color: var(--muted-foreground);
  font-size: .8125rem;
}

.slex-docs-toc .slex-toc-link {
  border-left: 1px solid #0000;
  border-radius: 0;
  margin-left: -1px;
  padding: .25rem 0 .25rem .75rem;
}

.slex-docs-toc .slex-toc-link:hover, .slex-docs-toc .slex-toc-link.active, .slex-docs-toc .slex-toc-link--active {
  border-left-color: var(--foreground);
  color: var(--foreground);
  background: none;
}

.slex-docs-toc .slex-toc-link.depth-3 {
  padding-left: 1.25rem;
}

@media (min-width: 768px) {
  .slex-site-nav {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    display: grid !important;
  }

  .slex-site-nav-brand {
    justify-self: start;
  }

  .slex-site-nav-links {
    display: flex;
    justify-self: center;
  }

  .slex-site-nav-actions {
    justify-self: end;
  }
}

@media (min-width: 1024px) {
  .slex-docs-shell {
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
    gap: 2.25rem;
    padding: 2rem 2.5rem;
  }

  .slex-docs-shell-sidebar {
    display: block;
    position: sticky;
    overflow: auto;
    border-right: 1px solid var(--border);
    align-self:  start;
    max-height: calc(100vh - 6rem);
    padding-right: 1.5rem;
    top: 5rem;
  }

  .slex-docs-flowbite-sidebar {
    box-shadow: none;
    border-right: 0;
    max-width: none;
    display: block !important;
    position: static !important;
    background: none !important;
    width: 100% !important;
  }

  .slex-docs-flowbite-sidebar > div {
    height: auto;
    overflow: visible !important;
    background: none !important;
    padding: 0 !important;
  }

  .slex-docs-mobile-toolbar {
    display: none;
  }

  .slex-docs-sidebar-trigger {
    display: none !important;
  }

  .slex-docs-shell-main {
    max-width: 62rem;
  }

  .slex-static-page, .slex-docs-layout {
    padding: 2rem;
  }

  .slex-static-prose :where(h1) {
    font-size: 4.75rem;
  }

  .slex-docs-title {
    font-size: 3.25rem;
  }

  .slex-docs-layout {
    grid-template-columns: 17rem minmax(0, 1fr);
  }

  .slex-home-page {
    padding: 5rem 2rem 7rem;
  }

  .slex-home-hero {
    gap: 4.5rem;
  }

  body[data-site-route="home"] > footer {
    display: none;
  }

  .slex-docs-sidebar {
    position: sticky;
    display: block;
    overflow: auto;
    scrollbar-color: color-mix(in oklab, var(--muted-foreground) 42%, transparent) transparent;
    scrollbar-width: thin;
    max-height: calc(100vh - 6rem);
    padding-right: .5rem;
    top: 5rem;
  }
}

@media (min-width: 1280px) {
  .slex-docs-shell {
    grid-template-columns: minmax(16rem, 19rem) minmax(0, 58rem) minmax(10rem, 13rem);
    gap: 2.5rem;
    width: min(100%, 106rem);
  }

  .slex-docs-shell-main {
    max-width: none;
  }

  .slex-docs-shell > .slex-doc-detail-rail {
    position: sticky;
    display: block;
    margin-top: 0;
    top: 5rem;
  }

  .slex-docs-shell-main .slex-doc-detail-header {
    display: none;
  }

  .slex-docs-layout {
    grid-template-columns: 17rem minmax(0, 1fr) 14rem;
  }

  .slex-docs-toc {
    position: sticky;
    display: block;
    border-left: 1px solid var(--border);
    top: 5rem;
  }
}

@media (max-width: 1023px) {
  .slex-docs-shell {
    padding: 1rem;
  }

  .slex-docs-shell-sidebar {
    display: contents;
  }

  .slex-docs-shell-main .slex-doc-detail-header {
    justify-content: flex-start;
    margin-top: .5rem;
  }

  .slex-static-prose {
    width: 100%;
  }

  .slex-home-page {
    padding-top: 4rem;
  }

  .slex-home-title {
    font-size: 4.25rem;
  }
}

@media (max-width: 480px) {
  .slex-docs-shell, .slex-static-page, .slex-docs-layout {
    padding-inline-start: .75rem;
    padding-inline-end: .75rem;
  }

  .slex-home-page {
    padding: 3rem 1rem 4rem;
  }

  .slex-home-brand-lockup {
    gap: .75rem;
  }

  .slex-home-brand-logo {
    width: 2.45rem;
    height: 2.45rem;
    transform: none;
  }

  .slex-home-title {
    font-size: 3rem;
  }

  .slex-home-expanded-name {
    font-size: 1.0625rem;
  }

  .slex-home-lede {
    font-size: 1rem;
  }
}

/* katex-css:katex/dist/katex.min.css */
.katex {
  position: relative;
  text-indent: 0;
  text-rendering: auto;
  font: 1.21em / 1.2 KaTeX_Main, Times New Roman, serif;
}

.katex * {
  border-color: currentColor;
  -ms-high-contrast-adjust: none !important;
}

.katex .katex-version:after {
  content: "0.17.0";
}

.katex .katex-mathml {
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  overflow: hidden;
  position: absolute;
  border: 0;
  width: 1px;
  height: 1px;
  padding: 0;
}

.katex .katex-html > .newline {
  display: block;
}

.katex .base {
  position: relative;
  white-space: nowrap;
  width: min-content;
}

.katex .base, .katex .strut {
  display: inline-block;
}

.katex .textbf {
  font-weight: 700;
}

.katex .textit {
  font-style: italic;
}

.katex .textrm {
  font-family: KaTeX_Main;
}

.katex .textsf {
  font-family: KaTeX_SansSerif;
}

.katex .texttt {
  font-family: KaTeX_Typewriter;
}

.katex .mathnormal {
  font-family: KaTeX_Math;
  font-style: italic;
}

.katex .mathit {
  font-family: KaTeX_Main;
  font-style: italic;
}

.katex .mathrm {
  font-style: normal;
}

.katex .mathbf {
  font-family: KaTeX_Main;
  font-weight: 700;
}

.katex .boldsymbol {
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 700;
}

.katex .amsrm, .katex .mathbb, .katex .textbb {
  font-family: KaTeX_AMS;
}

.katex .mathcal {
  font-family: KaTeX_Caligraphic;
}

.katex .mathfrak, .katex .textfrak {
  font-family: KaTeX_Fraktur;
}

.katex .mathboldfrak, .katex .textboldfrak {
  font-family: KaTeX_Fraktur;
  font-weight: 700;
}

.katex .mathtt {
  font-family: KaTeX_Typewriter;
}

.katex .mathscr, .katex .textscr {
  font-family: KaTeX_Script;
}

.katex .mathsf, .katex .textsf {
  font-family: KaTeX_SansSerif;
}

.katex .mathboldsf, .katex .textboldsf {
  font-family: KaTeX_SansSerif;
  font-weight: 700;
}

.katex .mathitsf, .katex .mathsfit, .katex .textitsf {
  font-family: KaTeX_SansSerif;
  font-style: italic;
}

.katex .mainrm {
  font-family: KaTeX_Main;
  font-style: normal;
}

.katex .vlist-t {
  border-collapse: collapse;
  display: inline-table;
  table-layout: fixed;
}

.katex .vlist-r {
  display: table-row;
}

.katex .vlist {
  display: table-cell;
  position: relative;
  vertical-align: bottom;
}

.katex .vlist > span {
  display: block;
  position: relative;
  height: 0;
}

.katex .vlist > span > span {
  display: inline-block;
}

.katex .vlist > span > .pstrut {
  overflow: hidden;
  width: 0;
}

.katex .vlist-t2 {
  margin-right: -2px;
}

.katex .vlist-s {
  display: table-cell;
  vertical-align: bottom;
  width: 2px;
  min-width: 2px;
  font-size: 1px;
}

.katex .vbox {
  display: inline-flex;
  flex-direction: column;
  align-items: baseline;
}

.katex .hbox {
  width: 100%;
}

.katex .hbox, .katex .thinbox {
  display: inline-flex;
  flex-direction: row;
}

.katex .thinbox {
  width: 0;
  max-width: 0;
}

.katex .msupsub {
  text-align: left;
}

.katex .mfrac > span > span {
  text-align: center;
}

.katex .mfrac .frac-line {
  display: inline-block;
  border-bottom-style: solid;
  width: 100%;
}

.katex .hdashline, .katex .hline, .katex .mfrac .frac-line, .katex .overline .overline-line, .katex .rule, .katex .underline .underline-line {
  min-height: 1px;
}

.katex .mspace {
  display: inline-block;
}

.katex .smash {
  display: inline;
  line-height: 0;
}

.katex .clap, .katex .llap, .katex .rlap {
  position: relative;
  width: 0;
}

.katex .clap > .inner, .katex .llap > .inner, .katex .rlap > .inner {
  position: absolute;
}

.katex .clap > .fix, .katex .llap > .fix, .katex .rlap > .fix {
  display: inline-block;
}

.katex .llap > .inner {
  right: 0;
}

.katex .clap > .inner, .katex .rlap > .inner {
  left: 0;
}

.katex .clap > .inner > span {
  margin-left: -50%;
  margin-right: 50%;
}

.katex .rule {
  display: inline-block;
  position: relative;
  border: 0 solid;
}

.katex .hline, .katex .overline .overline-line, .katex .underline .underline-line {
  display: inline-block;
  border-bottom-style: solid;
  width: 100%;
}

.katex .hdashline {
  display: inline-block;
  border-bottom-style: dashed;
  width: 100%;
}

.katex .sqrt > .root {
  margin-left: .277778em;
  margin-right: -.555556em;
}

.katex .fontsize-ensurer.reset-size1.size1, .katex .sizing.reset-size1.size1 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size1.size2, .katex .sizing.reset-size1.size2 {
  font-size: 1.2em;
}

.katex .fontsize-ensurer.reset-size1.size3, .katex .sizing.reset-size1.size3 {
  font-size: 1.4em;
}

.katex .fontsize-ensurer.reset-size1.size4, .katex .sizing.reset-size1.size4 {
  font-size: 1.6em;
}

.katex .fontsize-ensurer.reset-size1.size5, .katex .sizing.reset-size1.size5 {
  font-size: 1.8em;
}

.katex .fontsize-ensurer.reset-size1.size6, .katex .sizing.reset-size1.size6 {
  font-size: 2em;
}

.katex .fontsize-ensurer.reset-size1.size7, .katex .sizing.reset-size1.size7 {
  font-size: 2.4em;
}

.katex .fontsize-ensurer.reset-size1.size8, .katex .sizing.reset-size1.size8 {
  font-size: 2.88em;
}

.katex .fontsize-ensurer.reset-size1.size9, .katex .sizing.reset-size1.size9 {
  font-size: 3.456em;
}

.katex .fontsize-ensurer.reset-size1.size10, .katex .sizing.reset-size1.size10 {
  font-size: 4.148em;
}

.katex .fontsize-ensurer.reset-size1.size11, .katex .sizing.reset-size1.size11 {
  font-size: 4.976em;
}

.katex .fontsize-ensurer.reset-size2.size1, .katex .sizing.reset-size2.size1 {
  font-size: .833333em;
}

.katex .fontsize-ensurer.reset-size2.size2, .katex .sizing.reset-size2.size2 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size2.size3, .katex .sizing.reset-size2.size3 {
  font-size: 1.16667em;
}

.katex .fontsize-ensurer.reset-size2.size4, .katex .sizing.reset-size2.size4 {
  font-size: 1.33333em;
}

.katex .fontsize-ensurer.reset-size2.size5, .katex .sizing.reset-size2.size5 {
  font-size: 1.5em;
}

.katex .fontsize-ensurer.reset-size2.size6, .katex .sizing.reset-size2.size6 {
  font-size: 1.66667em;
}

.katex .fontsize-ensurer.reset-size2.size7, .katex .sizing.reset-size2.size7 {
  font-size: 2em;
}

.katex .fontsize-ensurer.reset-size2.size8, .katex .sizing.reset-size2.size8 {
  font-size: 2.4em;
}

.katex .fontsize-ensurer.reset-size2.size9, .katex .sizing.reset-size2.size9 {
  font-size: 2.88em;
}

.katex .fontsize-ensurer.reset-size2.size10, .katex .sizing.reset-size2.size10 {
  font-size: 3.45667em;
}

.katex .fontsize-ensurer.reset-size2.size11, .katex .sizing.reset-size2.size11 {
  font-size: 4.14667em;
}

.katex .fontsize-ensurer.reset-size3.size1, .katex .sizing.reset-size3.size1 {
  font-size: .714286em;
}

.katex .fontsize-ensurer.reset-size3.size2, .katex .sizing.reset-size3.size2 {
  font-size: .857143em;
}

.katex .fontsize-ensurer.reset-size3.size3, .katex .sizing.reset-size3.size3 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size3.size4, .katex .sizing.reset-size3.size4 {
  font-size: 1.14286em;
}

.katex .fontsize-ensurer.reset-size3.size5, .katex .sizing.reset-size3.size5 {
  font-size: 1.28571em;
}

.katex .fontsize-ensurer.reset-size3.size6, .katex .sizing.reset-size3.size6 {
  font-size: 1.42857em;
}

.katex .fontsize-ensurer.reset-size3.size7, .katex .sizing.reset-size3.size7 {
  font-size: 1.71429em;
}

.katex .fontsize-ensurer.reset-size3.size8, .katex .sizing.reset-size3.size8 {
  font-size: 2.05714em;
}

.katex .fontsize-ensurer.reset-size3.size9, .katex .sizing.reset-size3.size9 {
  font-size: 2.46857em;
}

.katex .fontsize-ensurer.reset-size3.size10, .katex .sizing.reset-size3.size10 {
  font-size: 2.96286em;
}

.katex .fontsize-ensurer.reset-size3.size11, .katex .sizing.reset-size3.size11 {
  font-size: 3.55429em;
}

.katex .fontsize-ensurer.reset-size4.size1, .katex .sizing.reset-size4.size1 {
  font-size: .625em;
}

.katex .fontsize-ensurer.reset-size4.size2, .katex .sizing.reset-size4.size2 {
  font-size: .75em;
}

.katex .fontsize-ensurer.reset-size4.size3, .katex .sizing.reset-size4.size3 {
  font-size: .875em;
}

.katex .fontsize-ensurer.reset-size4.size4, .katex .sizing.reset-size4.size4 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size4.size5, .katex .sizing.reset-size4.size5 {
  font-size: 1.125em;
}

.katex .fontsize-ensurer.reset-size4.size6, .katex .sizing.reset-size4.size6 {
  font-size: 1.25em;
}

.katex .fontsize-ensurer.reset-size4.size7, .katex .sizing.reset-size4.size7 {
  font-size: 1.5em;
}

.katex .fontsize-ensurer.reset-size4.size8, .katex .sizing.reset-size4.size8 {
  font-size: 1.8em;
}

.katex .fontsize-ensurer.reset-size4.size9, .katex .sizing.reset-size4.size9 {
  font-size: 2.16em;
}

.katex .fontsize-ensurer.reset-size4.size10, .katex .sizing.reset-size4.size10 {
  font-size: 2.5925em;
}

.katex .fontsize-ensurer.reset-size4.size11, .katex .sizing.reset-size4.size11 {
  font-size: 3.11em;
}

.katex .fontsize-ensurer.reset-size5.size1, .katex .sizing.reset-size5.size1 {
  font-size: .555556em;
}

.katex .fontsize-ensurer.reset-size5.size2, .katex .sizing.reset-size5.size2 {
  font-size: .666667em;
}

.katex .fontsize-ensurer.reset-size5.size3, .katex .sizing.reset-size5.size3 {
  font-size: .777778em;
}

.katex .fontsize-ensurer.reset-size5.size4, .katex .sizing.reset-size5.size4 {
  font-size: .888889em;
}

.katex .fontsize-ensurer.reset-size5.size5, .katex .sizing.reset-size5.size5 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size5.size6, .katex .sizing.reset-size5.size6 {
  font-size: 1.11111em;
}

.katex .fontsize-ensurer.reset-size5.size7, .katex .sizing.reset-size5.size7 {
  font-size: 1.33333em;
}

.katex .fontsize-ensurer.reset-size5.size8, .katex .sizing.reset-size5.size8 {
  font-size: 1.6em;
}

.katex .fontsize-ensurer.reset-size5.size9, .katex .sizing.reset-size5.size9 {
  font-size: 1.92em;
}

.katex .fontsize-ensurer.reset-size5.size10, .katex .sizing.reset-size5.size10 {
  font-size: 2.30444em;
}

.katex .fontsize-ensurer.reset-size5.size11, .katex .sizing.reset-size5.size11 {
  font-size: 2.76444em;
}

.katex .fontsize-ensurer.reset-size6.size1, .katex .sizing.reset-size6.size1 {
  font-size: .5em;
}

.katex .fontsize-ensurer.reset-size6.size2, .katex .sizing.reset-size6.size2 {
  font-size: .6em;
}

.katex .fontsize-ensurer.reset-size6.size3, .katex .sizing.reset-size6.size3 {
  font-size: .7em;
}

.katex .fontsize-ensurer.reset-size6.size4, .katex .sizing.reset-size6.size4 {
  font-size: .8em;
}

.katex .fontsize-ensurer.reset-size6.size5, .katex .sizing.reset-size6.size5 {
  font-size: .9em;
}

.katex .fontsize-ensurer.reset-size6.size6, .katex .sizing.reset-size6.size6 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size6.size7, .katex .sizing.reset-size6.size7 {
  font-size: 1.2em;
}

.katex .fontsize-ensurer.reset-size6.size8, .katex .sizing.reset-size6.size8 {
  font-size: 1.44em;
}

.katex .fontsize-ensurer.reset-size6.size9, .katex .sizing.reset-size6.size9 {
  font-size: 1.728em;
}

.katex .fontsize-ensurer.reset-size6.size10, .katex .sizing.reset-size6.size10 {
  font-size: 2.074em;
}

.katex .fontsize-ensurer.reset-size6.size11, .katex .sizing.reset-size6.size11 {
  font-size: 2.488em;
}

.katex .fontsize-ensurer.reset-size7.size1, .katex .sizing.reset-size7.size1 {
  font-size: .416667em;
}

.katex .fontsize-ensurer.reset-size7.size2, .katex .sizing.reset-size7.size2 {
  font-size: .5em;
}

.katex .fontsize-ensurer.reset-size7.size3, .katex .sizing.reset-size7.size3 {
  font-size: .583333em;
}

.katex .fontsize-ensurer.reset-size7.size4, .katex .sizing.reset-size7.size4 {
  font-size: .666667em;
}

.katex .fontsize-ensurer.reset-size7.size5, .katex .sizing.reset-size7.size5 {
  font-size: .75em;
}

.katex .fontsize-ensurer.reset-size7.size6, .katex .sizing.reset-size7.size6 {
  font-size: .833333em;
}

.katex .fontsize-ensurer.reset-size7.size7, .katex .sizing.reset-size7.size7 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size7.size8, .katex .sizing.reset-size7.size8 {
  font-size: 1.2em;
}

.katex .fontsize-ensurer.reset-size7.size9, .katex .sizing.reset-size7.size9 {
  font-size: 1.44em;
}

.katex .fontsize-ensurer.reset-size7.size10, .katex .sizing.reset-size7.size10 {
  font-size: 1.72833em;
}

.katex .fontsize-ensurer.reset-size7.size11, .katex .sizing.reset-size7.size11 {
  font-size: 2.07333em;
}

.katex .fontsize-ensurer.reset-size8.size1, .katex .sizing.reset-size8.size1 {
  font-size: .347222em;
}

.katex .fontsize-ensurer.reset-size8.size2, .katex .sizing.reset-size8.size2 {
  font-size: .416667em;
}

.katex .fontsize-ensurer.reset-size8.size3, .katex .sizing.reset-size8.size3 {
  font-size: .486111em;
}

.katex .fontsize-ensurer.reset-size8.size4, .katex .sizing.reset-size8.size4 {
  font-size: .555556em;
}

.katex .fontsize-ensurer.reset-size8.size5, .katex .sizing.reset-size8.size5 {
  font-size: .625em;
}

.katex .fontsize-ensurer.reset-size8.size6, .katex .sizing.reset-size8.size6 {
  font-size: .694444em;
}

.katex .fontsize-ensurer.reset-size8.size7, .katex .sizing.reset-size8.size7 {
  font-size: .833333em;
}

.katex .fontsize-ensurer.reset-size8.size8, .katex .sizing.reset-size8.size8 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size8.size9, .katex .sizing.reset-size8.size9 {
  font-size: 1.2em;
}

.katex .fontsize-ensurer.reset-size8.size10, .katex .sizing.reset-size8.size10 {
  font-size: 1.44028em;
}

.katex .fontsize-ensurer.reset-size8.size11, .katex .sizing.reset-size8.size11 {
  font-size: 1.72778em;
}

.katex .fontsize-ensurer.reset-size9.size1, .katex .sizing.reset-size9.size1 {
  font-size: .289352em;
}

.katex .fontsize-ensurer.reset-size9.size2, .katex .sizing.reset-size9.size2 {
  font-size: .347222em;
}

.katex .fontsize-ensurer.reset-size9.size3, .katex .sizing.reset-size9.size3 {
  font-size: .405093em;
}

.katex .fontsize-ensurer.reset-size9.size4, .katex .sizing.reset-size9.size4 {
  font-size: .462963em;
}

.katex .fontsize-ensurer.reset-size9.size5, .katex .sizing.reset-size9.size5 {
  font-size: .520833em;
}

.katex .fontsize-ensurer.reset-size9.size6, .katex .sizing.reset-size9.size6 {
  font-size: .578704em;
}

.katex .fontsize-ensurer.reset-size9.size7, .katex .sizing.reset-size9.size7 {
  font-size: .694444em;
}

.katex .fontsize-ensurer.reset-size9.size8, .katex .sizing.reset-size9.size8 {
  font-size: .833333em;
}

.katex .fontsize-ensurer.reset-size9.size9, .katex .sizing.reset-size9.size9 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size9.size10, .katex .sizing.reset-size9.size10 {
  font-size: 1.20023em;
}

.katex .fontsize-ensurer.reset-size9.size11, .katex .sizing.reset-size9.size11 {
  font-size: 1.43981em;
}

.katex .fontsize-ensurer.reset-size10.size1, .katex .sizing.reset-size10.size1 {
  font-size: .24108em;
}

.katex .fontsize-ensurer.reset-size10.size2, .katex .sizing.reset-size10.size2 {
  font-size: .289296em;
}

.katex .fontsize-ensurer.reset-size10.size3, .katex .sizing.reset-size10.size3 {
  font-size: .337512em;
}

.katex .fontsize-ensurer.reset-size10.size4, .katex .sizing.reset-size10.size4 {
  font-size: .385728em;
}

.katex .fontsize-ensurer.reset-size10.size5, .katex .sizing.reset-size10.size5 {
  font-size: .433944em;
}

.katex .fontsize-ensurer.reset-size10.size6, .katex .sizing.reset-size10.size6 {
  font-size: .48216em;
}

.katex .fontsize-ensurer.reset-size10.size7, .katex .sizing.reset-size10.size7 {
  font-size: .578592em;
}

.katex .fontsize-ensurer.reset-size10.size8, .katex .sizing.reset-size10.size8 {
  font-size: .69431em;
}

.katex .fontsize-ensurer.reset-size10.size9, .katex .sizing.reset-size10.size9 {
  font-size: .833173em;
}

.katex .fontsize-ensurer.reset-size10.size10, .katex .sizing.reset-size10.size10 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size10.size11, .katex .sizing.reset-size10.size11 {
  font-size: 1.19961em;
}

.katex .fontsize-ensurer.reset-size11.size1, .katex .sizing.reset-size11.size1 {
  font-size: .200965em;
}

.katex .fontsize-ensurer.reset-size11.size2, .katex .sizing.reset-size11.size2 {
  font-size: .241158em;
}

.katex .fontsize-ensurer.reset-size11.size3, .katex .sizing.reset-size11.size3 {
  font-size: .28135em;
}

.katex .fontsize-ensurer.reset-size11.size4, .katex .sizing.reset-size11.size4 {
  font-size: .321543em;
}

.katex .fontsize-ensurer.reset-size11.size5, .katex .sizing.reset-size11.size5 {
  font-size: .361736em;
}

.katex .fontsize-ensurer.reset-size11.size6, .katex .sizing.reset-size11.size6 {
  font-size: .401929em;
}

.katex .fontsize-ensurer.reset-size11.size7, .katex .sizing.reset-size11.size7 {
  font-size: .482315em;
}

.katex .fontsize-ensurer.reset-size11.size8, .katex .sizing.reset-size11.size8 {
  font-size: .578778em;
}

.katex .fontsize-ensurer.reset-size11.size9, .katex .sizing.reset-size11.size9 {
  font-size: .694534em;
}

.katex .fontsize-ensurer.reset-size11.size10, .katex .sizing.reset-size11.size10 {
  font-size: .833601em;
}

.katex .fontsize-ensurer.reset-size11.size11, .katex .sizing.reset-size11.size11 {
  font-size: 1em;
}

.katex .delimsizing.size1 {
  font-family: KaTeX_Size1;
}

.katex .delimsizing.size2 {
  font-family: KaTeX_Size2;
}

.katex .delimsizing.size3 {
  font-family: KaTeX_Size3;
}

.katex .delimsizing.size4 {
  font-family: KaTeX_Size4;
}

.katex .delimsizing.mult .delim-size1 > span {
  font-family: KaTeX_Size1;
}

.katex .delimsizing.mult .delim-size4 > span {
  font-family: KaTeX_Size4;
}

.katex .nulldelimiter {
  display: inline-block;
  width: .12em;
}

.katex .delimcenter, .katex .op-symbol {
  position: relative;
}

.katex .op-symbol.small-op {
  font-family: KaTeX_Size1;
}

.katex .op-symbol.large-op {
  font-family: KaTeX_Size2;
}

.katex .accent > .vlist-t, .katex .op-limits > .vlist-t {
  text-align: center;
}

.katex .accent .accent-body {
  position: relative;
}

.katex .accent .accent-body:not(.accent-full) {
  width: 0;
}

.katex .overlay {
  display: block;
}

.katex .mtable .vertical-separator {
  display: inline-block;
  min-width: 1px;
}

.katex .mtable .arraycolsep {
  display: inline-block;
}

.katex .mtable .col-align-c > .vlist-t {
  text-align: center;
}

.katex .mtable .col-align-l > .vlist-t {
  text-align: left;
}

.katex .mtable .col-align-r > .vlist-t {
  text-align: right;
}

.katex .svg-align {
  text-align: left;
}

.katex svg {
  fill: currentColor;
  stroke: currentColor;
  display: block;
  height: inherit;
  position: absolute;
  width: 100%;
}

.katex svg path {
  stroke: none;
}

.katex svg {
  fill-rule: nonzero;
  fill-opacity: 1;
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-opacity: 1;
}

.katex img {
  border-style: none;
  min-width: 0;
  max-width: none;
  min-height: 0;
  max-height: none;
}

.katex .stretchy {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.katex .stretchy:after, .katex .stretchy:before {
  content: "";
}

.katex .hide-tail {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.katex .halfarrow-left {
  overflow: hidden;
  position: absolute;
  width: 50.2%;
  left: 0;
}

.katex .halfarrow-right {
  overflow: hidden;
  position: absolute;
  width: 50.2%;
  right: 0;
}

.katex .brace-left {
  overflow: hidden;
  position: absolute;
  width: 25.1%;
  left: 0;
}

.katex .brace-center {
  overflow: hidden;
  position: absolute;
  width: 50%;
  left: 25%;
}

.katex .brace-right {
  overflow: hidden;
  position: absolute;
  width: 25.1%;
  right: 0;
}

.katex .x-arrow-pad {
  padding: 0 .5em;
}

.katex .cd-arrow-pad {
  padding: 0 .55556em 0 .27778em;
}

.katex .mover, .katex .munder, .katex .x-arrow {
  text-align: center;
}

.katex .boxpad {
  padding: 0 .3em;
}

.katex .fbox, .katex .fcolorbox {
  box-sizing: border-box;
  border: .04em solid;
}

.katex .cancel-pad {
  padding: 0 .2em;
}

.katex .cancel-lap {
  margin-left: -.2em;
  margin-right: -.2em;
}

.katex .sout {
  border-bottom-style: solid;
  border-bottom-width: .08em;
}

.katex .angl {
  box-sizing: border-box;
  border-top: .049em solid;
  border-right: .049em solid;
  margin-right: .03889em;
}

.katex .anglpad {
  padding: 0 .03889em;
}

.katex .eqn-num:before {
  content: "(" counter(katexEqnNo) ")";
  counter-increment: katexEqnNo;
}

.katex .mml-eqn-num:before {
  content: "(" counter(mmlEqnNo) ")";
  counter-increment: mmlEqnNo;
}

.katex .mtr-glue {
  width: 50%;
}

.katex .cd-vert-arrow {
  display: inline-block;
  position: relative;
}

.katex .cd-label-left {
  display: inline-block;
  position: absolute;
  text-align: left;
  right: calc(50% + .3em);
}

.katex .cd-label-right {
  display: inline-block;
  position: absolute;
  text-align: right;
  left: calc(50% + .3em);
}

.katex-display {
  display: block;
  text-align: center;
  margin: 1em 0;
}

.katex-display > .katex {
  display: block;
  text-align: center;
  white-space: nowrap;
}

.katex-display > .katex > .katex-html {
  display: block;
  position: relative;
}

.katex-display > .katex > .katex-html > .tag {
  position: absolute;
  right: 0;
}

.katex-display.leqno > .katex > .katex-html > .tag {
  left: 0;
  right: auto;
}

.katex-display.fleqn > .katex {
  text-align: left;
  padding-left: 2em;
}

body {
  counter-reset: katexEqnNo mmlEqnNo;
}

/* site/main.css */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body.slexkit-theme-uno {
  overflow-x: clip;
}