@iclips/ui 0.0.18 → 0.0.19

package/dist/index.css

@@ -1,6 +1,7 @@
 /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
-
-  *, :before, :after, ::backdrop {
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *, :before, :after, ::backdrop {
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
@@ -74,9 +75,11 @@
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
+    }
+  }
 }
 
-
+@layer theme {
   :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@@ -221,9 +224,10 @@
     --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
     --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
     --color-border: var(--border);
+  }
 }
 
-
+@layer base {
   *, :after, :before, ::backdrop {
     box-sizing: border-box;
     border: 0 solid;
@@ -376,8 +380,10 @@
     color: currentColor;
   }
 
-  ::placeholder {
+  @supports (color: color-mix(in lab, red, red)) {
+    ::placeholder {
       color: color-mix(in oklab, currentColor 50%, transparent);
+    }
   }
 
   textarea {
@@ -466,8 +472,10 @@
     outline-color: var(--ring);
   }
 
-  * {
+  @supports (color: color-mix(in lab, red, red)) {
+    * {
       outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
   }
 
   * {
@@ -475,8 +483,10 @@
     outline-color: var(--ring);
   }
 
-  * {
+  @supports (color: color-mix(in lab, red, red)) {
+    * {
       outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
   }
 
   body {
@@ -524,9 +534,10 @@
     font-size: var(--text-base);
     font-weight: var(--font-weight-normal);
     line-height: 1.5;
+  }
 }
 
-
+@layer utilities {
   .\@container\/card-header {
     container: card-header / inline-size;
   }
@@ -802,26 +813,31 @@
   @media (width >= 40rem) {
     .container {
       max-width: 40rem;
+    }
   }
 
   @media (width >= 48rem) {
     .container {
       max-width: 48rem;
+    }
   }
 
   @media (width >= 64rem) {
     .container {
       max-width: 64rem;
+    }
   }
 
   @media (width >= 80rem) {
     .container {
       max-width: 80rem;
+    }
   }
 
   @media (width >= 96rem) {
     .container {
       max-width: 96rem;
+    }
   }
 
   .m-0 {
@@ -2476,8 +2492,10 @@
     border-color: var(--blue-500);
   }
 
-  .border-blue-500\/20 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-blue-500\/20 {
       border-color: color-mix(in oklab, var(--blue-500) 20%, transparent);
+    }
   }
 
   .border-border {
@@ -2488,8 +2506,10 @@
     border-color: var(--border);
   }
 
-  .border-border\/50 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-border\/50 {
       border-color: color-mix(in oklab, var(--border) 50%, transparent);
+    }
   }
 
   .border-destructive {
@@ -2500,16 +2520,20 @@
     border-color: var(--destructive);
   }
 
-  .border-destructive\/20 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-destructive\/20 {
       border-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
   }
 
   .border-destructive\/50 {
     border-color: var(--destructive);
   }
 
-  .border-destructive\/50 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-destructive\/50 {
       border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+    }
   }
 
   .border-emerald-200 {
@@ -2556,8 +2580,10 @@
     border-color: var(--green-500);
   }
 
-  .border-green-500\/20 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-green-500\/20 {
       border-color: color-mix(in oklab, var(--green-500) 20%, transparent);
+    }
   }
 
   .border-green-600 {
@@ -2568,8 +2594,10 @@
     border-color: var(--green-600);
   }
 
-  .border-green-600\/20 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-green-600\/20 {
       border-color: color-mix(in oklab, var(--green-600) 20%, transparent);
+    }
   }
 
   .border-input {
@@ -2596,8 +2624,10 @@
     border-color: var(--orange-500);
   }
 
-  .border-orange-500\/20 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-orange-500\/20 {
       border-color: color-mix(in oklab, var(--orange-500) 20%, transparent);
+    }
   }
 
   .border-pink-100 {
@@ -2616,16 +2646,20 @@
     border-color: var(--primary);
   }
 
-  .border-primary\/20 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-primary\/20 {
       border-color: color-mix(in oklab, var(--primary) 20%, transparent);
+    }
   }
 
   .border-primary\/40 {
     border-color: var(--primary);
   }
 
-  .border-primary\/40 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-primary\/40 {
       border-color: color-mix(in oklab, var(--primary) 40%, transparent);
+    }
   }
 
   .border-purple-100 {
@@ -2688,24 +2722,30 @@
     border-color: #fff3;
   }
 
-  .border-white\/20 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-white\/20 {
       border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+    }
   }
 
   .border-white\/30 {
     border-color: #ffffff4d;
   }
 
-  .border-white\/30 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-white\/30 {
       border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
+    }
   }
 
   .border-white\/50 {
     border-color: #ffffff80;
   }
 
-  .border-white\/50 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-white\/50 {
       border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
+    }
   }
 
   .border-yellow-100 {
@@ -2720,8 +2760,10 @@
     border-color: var(--yellow-600);
   }
 
-  .border-yellow-600\/20 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-yellow-600\/20 {
       border-color: color-mix(in oklab, var(--yellow-600) 20%, transparent);
+    }
   }
 
   .border-t-transparent {
@@ -2836,48 +2878,60 @@
     background-color: var(--background);
   }
 
-  .bg-background\/50 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-background\/50 {
       background-color: color-mix(in oklab, var(--background) 50%, transparent);
+    }
   }
 
   .bg-background\/95 {
     background-color: var(--background);
   }
 
-  .bg-background\/95 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-background\/95 {
       background-color: color-mix(in oklab, var(--background) 95%, transparent);
+    }
   }
 
   .bg-black\/0 {
     background-color: #0000;
   }
 
-  .bg-black\/0 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/0 {
       background-color: color-mix(in oklab, var(--color-black) 0%, transparent);
+    }
   }
 
   .bg-black\/10 {
     background-color: #0000001a;
   }
 
-  .bg-black\/10 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/10 {
       background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+    }
   }
 
   .bg-black\/20 {
     background-color: #0003;
   }
 
-  .bg-black\/20 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/20 {
       background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
+    }
   }
 
   .bg-black\/50 {
     background-color: #00000080;
   }
 
-  .bg-black\/50 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/50 {
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
   }
 
   .bg-blue-50 {
@@ -2888,8 +2942,10 @@
     background-color: var(--blue-50);
   }
 
-  .bg-blue-50\/30 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-blue-50\/30 {
       background-color: color-mix(in oklab, var(--blue-50) 30%, transparent);
+    }
   }
 
   .bg-blue-100 {
@@ -2904,8 +2960,10 @@
     background-color: var(--blue-500);
   }
 
-  .bg-blue-500\/10 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-blue-500\/10 {
       background-color: color-mix(in oklab, var(--blue-500) 10%, transparent);
+    }
   }
 
   .bg-blue-600 {
@@ -2936,16 +2994,20 @@
     background-color: var(--destructive);
   }
 
-  .bg-destructive\/5 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-destructive\/5 {
       background-color: color-mix(in oklab, var(--destructive) 5%, transparent);
+    }
   }
 
   .bg-destructive\/10 {
     background-color: var(--destructive);
   }
 
-  .bg-destructive\/10 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-destructive\/10 {
       background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    }
   }
 
   .bg-foreground {
@@ -2960,16 +3022,20 @@
     background-color: var(--gray-50);
   }
 
-  .bg-gray-50\/30 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-gray-50\/30 {
       background-color: color-mix(in oklab, var(--gray-50) 30%, transparent);
+    }
   }
 
   .bg-gray-50\/50 {
     background-color: var(--gray-50);
   }
 
-  .bg-gray-50\/50 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-gray-50\/50 {
       background-color: color-mix(in oklab, var(--gray-50) 50%, transparent);
+    }
   }
 
   .bg-gray-100 {
@@ -3008,8 +3074,10 @@
     background-color: var(--green-500);
   }
 
-  .bg-green-500\/10 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-green-500\/10 {
       background-color: color-mix(in oklab, var(--green-500) 10%, transparent);
+    }
   }
 
   .bg-green-600 {
@@ -3032,40 +3100,50 @@
     background-color: var(--muted);
   }
 
-  .bg-muted\/5 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted\/5 {
       background-color: color-mix(in oklab, var(--muted) 5%, transparent);
+    }
   }
 
   .bg-muted\/10 {
     background-color: var(--muted);
   }
 
-  .bg-muted\/10 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted\/10 {
       background-color: color-mix(in oklab, var(--muted) 10%, transparent);
+    }
   }
 
   .bg-muted\/20 {
     background-color: var(--muted);
   }
 
-  .bg-muted\/20 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted\/20 {
       background-color: color-mix(in oklab, var(--muted) 20%, transparent);
+    }
   }
 
   .bg-muted\/30 {
     background-color: var(--muted);
   }
 
-  .bg-muted\/30 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted\/30 {
       background-color: color-mix(in oklab, var(--muted) 30%, transparent);
+    }
   }
 
   .bg-muted\/50 {
     background-color: var(--muted);
   }
 
-  .bg-muted\/50 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted\/50 {
       background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
   }
 
   .bg-orange-50 {
@@ -3084,8 +3162,10 @@
     background-color: var(--orange-500);
   }
 
-  .bg-orange-500\/10 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-orange-500\/10 {
       background-color: color-mix(in oklab, var(--orange-500) 10%, transparent);
+    }
   }
 
   .bg-orange-600 {
@@ -3116,24 +3196,30 @@
     background-color: var(--primary);
   }
 
-  .bg-primary\/5 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/5 {
       background-color: color-mix(in oklab, var(--primary) 5%, transparent);
+    }
   }
 
   .bg-primary\/10 {
     background-color: var(--primary);
   }
 
-  .bg-primary\/10 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/10 {
       background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+    }
   }
 
   .bg-primary\/20 {
     background-color: var(--primary);
   }
 
-  .bg-primary\/20 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/20 {
       background-color: color-mix(in oklab, var(--primary) 20%, transparent);
+    }
   }
 
   .bg-purple-50 {
@@ -3144,16 +3230,20 @@
     background-color: var(--purple-50);
   }
 
-  .bg-purple-50\/30 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-purple-50\/30 {
       background-color: color-mix(in oklab, var(--purple-50) 30%, transparent);
+    }
   }
 
   .bg-purple-50\/50 {
     background-color: var(--purple-50);
   }
 
-  .bg-purple-50\/50 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-purple-50\/50 {
       background-color: color-mix(in oklab, var(--purple-50) 50%, transparent);
+    }
   }
 
   .bg-purple-100 {
@@ -3172,8 +3262,10 @@
     background-color: var(--purple-500);
   }
 
-  .bg-purple-500\/10 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-purple-500\/10 {
       background-color: color-mix(in oklab, var(--purple-500) 10%, transparent);
+    }
   }
 
   .bg-purple-600 {
@@ -3188,8 +3280,10 @@
     background-color: var(--red-50);
   }
 
-  .bg-red-50\/50 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-red-50\/50 {
       background-color: color-mix(in oklab, var(--red-50) 50%, transparent);
+    }
   }
 
   .bg-red-100 {
@@ -3224,8 +3318,10 @@
     background-color: color-mix(in srgb, oklch(.984 .003 247.858) 50%, transparent);
   }
 
-  .bg-slate-50\/50 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-slate-50\/50 {
       background-color: color-mix(in oklab, var(--color-slate-50) 50%, transparent);
+    }
   }
 
   .bg-slate-800 {
@@ -3252,16 +3348,20 @@
     background-color: #fff3;
   }
 
-  .bg-white\/20 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/20 {
       background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+    }
   }
 
   .bg-white\/80 {
     background-color: #fffc;
   }
 
-  .bg-white\/80 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/80 {
       background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
+    }
   }
 
   .bg-yellow-50 {
@@ -3335,8 +3435,10 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .from-primary\/10 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-primary\/10 {
       --tw-gradient-from: color-mix(in oklab, var(--primary) 10%, transparent);
+    }
   }
 
   .from-purple-50 {
@@ -3434,8 +3536,10 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .to-primary\/5 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-primary\/5 {
       --tw-gradient-to: color-mix(in oklab, var(--primary) 5%, transparent);
+    }
   }
 
   .to-primary\/60 {
@@ -3443,8 +3547,10 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .to-primary\/60 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-primary\/60 {
       --tw-gradient-to: color-mix(in oklab, var(--primary) 60%, transparent);
+    }
   }
 
   .to-purple-500\/10 {
@@ -3452,8 +3558,10 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .to-purple-500\/10 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-purple-500\/10 {
       --tw-gradient-to: color-mix(in oklab, var(--purple-500) 10%, transparent);
+    }
   }
 
   .to-purple-600 {
@@ -3972,16 +4080,20 @@
     color: var(--foreground);
   }
 
-  .text-foreground\/80 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-foreground\/80 {
       color: color-mix(in oklab, var(--foreground) 80%, transparent);
+    }
   }
 
   .text-foreground\/90 {
     color: var(--foreground);
   }
 
-  .text-foreground\/90 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-foreground\/90 {
       color: color-mix(in oklab, var(--foreground) 90%, transparent);
+    }
   }
 
   .text-gray-400 {
@@ -4040,8 +4152,10 @@
     color: var(--muted-foreground);
   }
 
-  .text-muted-foreground\/40 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-muted-foreground\/40 {
       color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
+    }
   }
 
   .text-orange-100 {
@@ -4144,8 +4258,10 @@
     color: var(--sidebar-foreground);
   }
 
-  .text-sidebar-foreground\/70 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-sidebar-foreground\/70 {
       color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
+    }
   }
 
   .text-sky-500 {
@@ -4246,9 +4362,11 @@
     text-decoration-color: var(--primary);
   }
 
-  .decoration-primary\/30 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .decoration-primary\/30 {
       -webkit-text-decoration-color: color-mix(in oklab, var(--primary) 30%, transparent);
       text-decoration-color: color-mix(in oklab, var(--primary) 30%, transparent);
+    }
   }
 
   .underline-offset-4 {
@@ -4381,8 +4499,10 @@
     --tw-ring-color: var(--primary);
   }
 
-  .ring-primary\/20 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-primary\/20 {
       --tw-ring-color: color-mix(in oklab, var(--primary) 20%, transparent);
+    }
   }
 
   .ring-purple-500 {
@@ -4397,8 +4517,10 @@
     --tw-ring-color: var(--ring);
   }
 
-  .ring-ring\/50 {
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-ring\/50 {
       --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
   }
 
   .ring-sidebar-ring {
@@ -4428,6 +4550,7 @@
     .outline-hidden {
       outline-offset: 2px;
       outline: 2px solid #0000;
+    }
   }
 
   .outline {
@@ -4595,6 +4718,7 @@
       --tw-scale-y: 105%;
       --tw-scale-z: 105%;
       scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
   }
 
   @media (hover: hover) {
@@ -4602,8 +4726,11 @@
       border-color: var(--primary);
     }
 
-    .group-hover\:border-primary\/50:is(:where(.group):hover *) {
+    @supports (color: color-mix(in lab, red, red)) {
+      .group-hover\:border-primary\/50:is(:where(.group):hover *) {
         border-color: color-mix(in oklab, var(--primary) 50%, transparent);
+      }
+    }
   }
 
   @media (hover: hover) {
@@ -4611,13 +4738,17 @@
       background-color: var(--primary);
     }
 
-    .group-hover\:bg-primary\/20:is(:where(.group):hover *) {
+    @supports (color: color-mix(in lab, red, red)) {
+      .group-hover\:bg-primary\/20:is(:where(.group):hover *) {
         background-color: color-mix(in oklab, var(--primary) 20%, transparent);
+      }
+    }
   }
 
   @media (hover: hover) {
     .group-hover\:opacity-100:is(:where(.group):hover *) {
       opacity: 1;
+    }
   }
 
   @media (hover: hover) {
@@ -4625,34 +4756,42 @@
       background-color: #0000001a;
     }
 
-    .group-hover\/att\:bg-black\/10:is(:where(.group\/att):hover *) {
+    @supports (color: color-mix(in lab, red, red)) {
+      .group-hover\/att\:bg-black\/10:is(:where(.group\/att):hover *) {
         background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+      }
+    }
   }
 
   @media (hover: hover) {
     .group-hover\/menu-item\:opacity-100:is(:where(.group\/menu-item):hover *) {
       opacity: 1;
+    }
   }
 
   @media (hover: hover) {
     .group-hover\/milestone\:opacity-100:is(:where(.group\/milestone):hover *) {
       opacity: 1;
+    }
   }
 
   @media (hover: hover) {
     .group-hover\/task\:scale-\[1\.02\]:is(:where(.group\/task):hover *) {
       scale: 1.02;
+    }
   }
 
   @media (hover: hover) {
     .group-hover\/task\:opacity-100:is(:where(.group\/task):hover *) {
       opacity: 1;
+    }
   }
 
   @media (hover: hover) {
     .group-hover\/task\:shadow-lg:is(:where(.group\/task):hover *) {
       --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
   }
 
   .group-has-data-\[sidebar\=menu-action\]\/menu-item\:pr-8:is(:where(.group\/menu-item):has([data-sidebar="menu-action"]) *) {
@@ -4823,6 +4962,7 @@
   @media (hover: hover) {
     .peer-hover\/menu-button\:text-sidebar-accent-foreground:is(:where(.peer\/menu-button):hover ~ *) {
       color: var(--sidebar-accent-foreground);
+    }
   }
 
   .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
@@ -4983,23 +5123,28 @@
     --tw-ring-color: var(--primary);
   }
 
-  .focus-within\:ring-primary\/20:focus-within {
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus-within\:ring-primary\/20:focus-within {
       --tw-ring-color: color-mix(in oklab, var(--primary) 20%, transparent);
+    }
   }
 
   @media (hover: hover) {
     .hover\:z-50:hover {
       z-index: 50;
+    }
   }
 
   @media (hover: hover) {
     .hover\:h-auto\!:hover {
       height: auto !important;
+    }
   }
 
   @media (hover: hover) {
     .hover\:min-h-\[min-content\]:hover {
       min-height: min-content;
+    }
   }
 
   @media (hover: hover) {
@@ -5008,6 +5153,7 @@
       --tw-scale-y: 105%;
       --tw-scale-z: 105%;
       scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
   }
 
   @media (hover: hover) {
@@ -5016,6 +5162,7 @@
       --tw-scale-y: 110%;
       --tw-scale-z: 110%;
       scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
   }
 
   @media (hover: hover) {
@@ -5024,61 +5171,73 @@
       --tw-scale-y: 125%;
       --tw-scale-z: 125%;
       scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
   }
 
   @media (hover: hover) {
     .hover\:scale-\[1\.01\]:hover {
       scale: 1.01;
+    }
   }
 
   @media (hover: hover) {
     .hover\:scale-\[1\.02\]:hover {
       scale: 1.02;
+    }
   }
 
   @media (hover: hover) {
     .hover\:overflow-visible:hover {
       overflow: visible;
+    }
   }
 
   @media (hover: hover) {
     .hover\:border-border:hover {
       border-color: var(--border);
+    }
   }
 
   @media (hover: hover) {
     .hover\:border-primary:hover {
       border-color: var(--primary);
+    }
   }
 
   @media (hover: hover) {
     .hover\:border-purple-500:hover {
       border-color: var(--purple-500);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-\[\#6B1FA3\]:hover {
       background-color: #6b1fa3;
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-\[\#6E21A6\]:hover {
       background-color: #6e21a6;
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-\[\#6a1f9f\]:hover {
       background-color: #6a1f9f;
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-\[\#7F26BF\]\/20:hover {
       background-color: oklab(48.7207% .128454 -.178582 / .2);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-accent:hover {
       background-color: var(--accent);
+    }
   }
 
   @media (hover: hover) {
@@ -5086,28 +5245,35 @@
       background-color: var(--accent);
     }
 
-    .hover\:bg-accent\/50:hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-accent\/50:hover {
         background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+      }
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-amber-100:hover {
       background-color: var(--color-amber-100);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-blue-50:hover {
       background-color: var(--blue-50);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-blue-100:hover {
       background-color: var(--blue-100);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-blue-500:hover {
       background-color: var(--blue-500);
+    }
   }
 
   @media (hover: hover) {
@@ -5115,13 +5281,17 @@
       background-color: var(--blue-500);
     }
 
-    .hover\:bg-blue-500\/20:hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-blue-500\/20:hover {
         background-color: color-mix(in oklab, var(--blue-500) 20%, transparent);
+      }
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-blue-700:hover {
       background-color: var(--blue-700);
+    }
   }
 
   @media (hover: hover) {
@@ -5129,8 +5299,11 @@
       background-color: var(--destructive);
     }
 
-    .hover\:bg-destructive\/10:hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-destructive\/10:hover {
         background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+      }
+    }
   }
 
   @media (hover: hover) {
@@ -5138,13 +5311,17 @@
       background-color: var(--destructive);
     }
 
-    .hover\:bg-destructive\/90:hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-destructive\/90:hover {
         background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+      }
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-gray-50:hover {
       background-color: var(--gray-50);
+    }
   }
 
   @media (hover: hover) {
@@ -5152,38 +5329,47 @@
       background-color: var(--gray-50);
     }
 
-    .hover\:bg-gray-50\/50:hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-gray-50\/50:hover {
         background-color: color-mix(in oklab, var(--gray-50) 50%, transparent);
+      }
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-gray-700:hover {
       background-color: var(--gray-700);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-green-50:hover {
       background-color: var(--green-50);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-green-100:hover {
       background-color: var(--green-100);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-green-700:hover {
       background-color: var(--green-700);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-indigo-700:hover {
       background-color: var(--color-indigo-700);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-muted:hover {
       background-color: var(--muted);
+    }
   }
 
   @media (hover: hover) {
@@ -5191,8 +5377,11 @@
       background-color: var(--muted);
     }
 
-    .hover\:bg-muted\/20:hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-muted\/20:hover {
         background-color: color-mix(in oklab, var(--muted) 20%, transparent);
+      }
+    }
   }
 
   @media (hover: hover) {
@@ -5200,18 +5389,23 @@
       background-color: var(--muted);
     }
 
-    .hover\:bg-muted\/50:hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-muted\/50:hover {
         background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+      }
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-orange-50:hover {
       background-color: var(--orange-50);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-orange-500:hover {
       background-color: var(--orange-500);
+    }
   }
 
   @media (hover: hover) {
@@ -5219,23 +5413,29 @@
       background-color: var(--orange-500);
     }
 
-    .hover\:bg-orange-500\/20:hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-orange-500\/20:hover {
         background-color: color-mix(in oklab, var(--orange-500) 20%, transparent);
+      }
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-orange-700:hover {
       background-color: var(--orange-700);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-pink-700:hover {
       background-color: var(--pink-700);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-primary:hover {
       background-color: var(--primary);
+    }
   }
 
   @media (hover: hover) {
@@ -5243,8 +5443,11 @@
       background-color: var(--primary);
     }
 
-    .hover\:bg-primary\/50:hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/50:hover {
         background-color: color-mix(in oklab, var(--primary) 50%, transparent);
+      }
+    }
   }
 
   @media (hover: hover) {
@@ -5252,33 +5455,41 @@
       background-color: var(--primary);
     }
 
-    .hover\:bg-primary\/90:hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/90:hover {
         background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+      }
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-purple-50:hover {
       background-color: var(--purple-50);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-purple-500:hover {
       background-color: var(--purple-500);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-purple-700:hover {
       background-color: var(--purple-700);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-red-200:hover {
       background-color: var(--red-200);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-red-700:hover {
       background-color: var(--red-700);
+    }
   }
 
   @media (hover: hover) {
@@ -5286,33 +5497,41 @@
       background-color: var(--secondary);
     }
 
-    .hover\:bg-secondary\/80:hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-secondary\/80:hover {
         background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+      }
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-sidebar-accent:hover {
       background-color: var(--sidebar-accent);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-teal-700:hover {
       background-color: var(--teal-700);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-transparent:hover {
       background-color: #0000;
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-yellow-100:hover {
       background-color: var(--yellow-100);
+    }
   }
 
   @media (hover: hover) {
     .hover\:bg-yellow-700:hover {
       background-color: var(--yellow-700);
+    }
   }
 
   @media (hover: hover) {
@@ -5537,7 +5756,8 @@
     --tw-ring-color: var(--destructive);
   }
 
-  .focus-visible\:ring-destructive\/20:focus-visible {
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus-visible\:ring-destructive\/20:focus-visible {
       --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
     }
   }
@@ -5550,7 +5770,8 @@
     --tw-ring-color: var(--ring);
   }
 
-  .focus-visible\:ring-ring\/40:focus-visible {
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus-visible\:ring-ring\/40:focus-visible {
       --tw-ring-color: color-mix(in oklab, var(--ring) 40%, transparent);
     }
   }
@@ -5559,7 +5780,8 @@
     --tw-ring-color: var(--ring);
   }
 
-  .focus-visible\:ring-ring\/50:focus-visible {
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus-visible\:ring-ring\/50:focus-visible {
       --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
     }
   }
@@ -5680,7 +5902,8 @@
     --tw-ring-color: var(--destructive);
   }
 
-  .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
+  @supports (color: color-mix(in lab, red, red)) {
+    .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
       --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
     }
   }
@@ -5721,7 +5944,8 @@
     background-color: var(--accent);
   }
 
-  .data-\[active\=true\]\:bg-accent\/50[data-active="true"] {
+  @supports (color: color-mix(in lab, red, red)) {
+    .data-\[active\=true\]\:bg-accent\/50[data-active="true"] {
       background-color: color-mix(in oklab, var(--accent) 50%, transparent);
     }
   }
@@ -5752,7 +5976,8 @@
     --tw-ring-color: var(--ring);
   }
 
-  .data-\[active\=true\]\:ring-ring\/50[data-active="true"] {
+  @supports (color: color-mix(in lab, red, red)) {
+    .data-\[active\=true\]\:ring-ring\/50[data-active="true"] {
       --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
     }
   }
@@ -5775,7 +6000,8 @@
     --tw-ring-color: var(--destructive);
   }
 
-  .data-\[active\=true\]\:aria-invalid\:ring-destructive\/20[data-active="true"][aria-invalid="true"] {
+  @supports (color: color-mix(in lab, red, red)) {
+    .data-\[active\=true\]\:aria-invalid\:ring-destructive\/20[data-active="true"][aria-invalid="true"] {
       --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
     }
   }
@@ -5979,7 +6205,8 @@
     color: var(--destructive);
   }
 
-  :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
+  @supports (color: color-mix(in lab, red, red)) {
+    :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
       color: color-mix(in oklab, var(--destructive) 90%, transparent);
     }
   }
@@ -6123,7 +6350,8 @@
     background-color: var(--accent);
   }
 
-  .data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
+  @supports (color: color-mix(in lab, red, red)) {
+    .data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
       background-color: color-mix(in oklab, var(--accent) 50%, transparent);
     }
   }
@@ -6240,7 +6468,8 @@
     background-color: var(--destructive);
   }
 
-  .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus {
+  @supports (color: color-mix(in lab, red, red)) {
+    .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus {
       background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
     }
   }
@@ -6350,11 +6579,13 @@
     border-bottom-width: 1px;
   }
 
-  .supports-\[backdrop-filter\]\:bg-background\/60 {
+  @supports ((-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))) {
+    .supports-\[backdrop-filter\]\:bg-background\/60 {
       background-color: var(--background);
     }
 
-    .supports-\[backdrop-filter\]\:bg-background\/60 {
+    @supports (color: color-mix(in lab, red, red)) {
+      .supports-\[backdrop-filter\]\:bg-background\/60 {
         background-color: color-mix(in oklab, var(--background) 60%, transparent);
       }
     }
@@ -6813,7 +7044,8 @@
     border-color: color-mix(in srgb, oklch(.396 .141 25.723) 20%, transparent);
   }
 
-  .dark\:border-red-900\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:border-red-900\/20:is(.dark *) {
       border-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
     }
   }
@@ -6822,7 +7054,8 @@
     border-color: color-mix(in srgb, oklch(.396 .141 25.723) 50%, transparent);
   }
 
-  .dark\:border-red-900\/50:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:border-red-900\/50:is(.dark *) {
       border-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);
     }
   }
@@ -6851,7 +7084,8 @@
     background-color: color-mix(in srgb, oklch(.279 .077 45.635) 20%, transparent);
   }
 
-  .dark\:bg-amber-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-amber-950\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-amber-950) 20%, transparent);
     }
   }
@@ -6864,7 +7098,8 @@
     background-color: #0003;
   }
 
-  .dark\:bg-black\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-black\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
     }
   }
@@ -6877,7 +7112,8 @@
     background-color: color-mix(in srgb, oklch(.379 .146 265.522) 20%, transparent);
   }
 
-  .dark\:bg-blue-900\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-blue-900\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
     }
   }
@@ -6890,7 +7126,8 @@
     background-color: color-mix(in srgb, oklch(.282 .091 267.935) 20%, transparent);
   }
 
-  .dark\:bg-blue-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-blue-950\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-blue-950) 20%, transparent);
     }
   }
@@ -6899,7 +7136,8 @@
     background-color: color-mix(in srgb, oklch(.398 .07 227.392) 20%, transparent);
   }
 
-  .dark\:bg-cyan-900\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-cyan-900\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-cyan-900) 20%, transparent);
     }
   }
@@ -6908,7 +7146,8 @@
     background-color: var(--destructive);
   }
 
-  .dark\:bg-destructive\/60:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-destructive\/60:is(.dark *) {
       background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
     }
   }
@@ -6929,7 +7168,8 @@
     background-color: color-mix(in srgb, oklch(.393 .095 152.535) 10%, transparent);
   }
 
-  .dark\:bg-green-900\/10:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-green-900\/10:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-green-900) 10%, transparent);
     }
   }
@@ -6938,7 +7178,8 @@
     background-color: color-mix(in srgb, oklch(.393 .095 152.535) 20%, transparent);
   }
 
-  .dark\:bg-green-900\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-green-900\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent);
     }
   }
@@ -6951,7 +7192,8 @@
     background-color: color-mix(in srgb, oklch(.266 .065 152.934) 20%, transparent);
   }
 
-  .dark\:bg-green-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-green-950\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-green-950) 20%, transparent);
     }
   }
@@ -6960,7 +7202,8 @@
     background-color: color-mix(in srgb, oklch(.266 .065 152.934) 30%, transparent);
   }
 
-  .dark\:bg-green-950\/30:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-green-950\/30:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-green-950) 30%, transparent);
     }
   }
@@ -6969,7 +7212,8 @@
     background-color: var(--input);
   }
 
-  .dark\:bg-input\/30:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-input\/30:is(.dark *) {
       background-color: color-mix(in oklab, var(--input) 30%, transparent);
     }
   }
@@ -6982,7 +7226,8 @@
     background-color: color-mix(in srgb, oklch(.408 .123 38.172) 20%, transparent);
   }
 
-  .dark\:bg-orange-900\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-orange-900\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-orange-900) 20%, transparent);
     }
   }
@@ -6991,7 +7236,8 @@
     background-color: color-mix(in srgb, oklch(.266 .079 36.259) 20%, transparent);
   }
 
-  .dark\:bg-orange-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-orange-950\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-orange-950) 20%, transparent);
     }
   }
@@ -7000,7 +7246,8 @@
     background-color: color-mix(in srgb, oklch(.408 .153 2.432) 20%, transparent);
   }
 
-  .dark\:bg-pink-900\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-pink-900\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-pink-900) 20%, transparent);
     }
   }
@@ -7013,7 +7260,8 @@
     background-color: color-mix(in srgb, oklch(.284 .109 3.907) 20%, transparent);
   }
 
-  .dark\:bg-pink-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-pink-950\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-pink-950) 20%, transparent);
     }
   }
@@ -7034,7 +7282,8 @@
     background-color: color-mix(in srgb, oklch(.381 .176 304.987) 20%, transparent);
   }
 
-  .dark\:bg-purple-900\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-purple-900\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-purple-900) 20%, transparent);
     }
   }
@@ -7043,7 +7292,8 @@
     background-color: color-mix(in srgb, oklch(.381 .176 304.987) 30%, transparent);
   }
 
-  .dark\:bg-purple-900\/30:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-purple-900\/30:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-purple-900) 30%, transparent);
     }
   }
@@ -7056,7 +7306,8 @@
     background-color: color-mix(in srgb, oklch(.291 .149 302.717) 20%, transparent);
   }
 
-  .dark\:bg-purple-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-purple-950\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-purple-950) 20%, transparent);
     }
   }
@@ -7065,7 +7316,8 @@
     background-color: color-mix(in srgb, oklch(.291 .149 302.717) 30%, transparent);
   }
 
-  .dark\:bg-purple-950\/30:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-purple-950\/30:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-purple-950) 30%, transparent);
     }
   }
@@ -7078,7 +7330,8 @@
     background-color: color-mix(in srgb, oklch(.396 .141 25.723) 10%, transparent);
   }
 
-  .dark\:bg-red-900\/10:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-red-900\/10:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-red-900) 10%, transparent);
     }
   }
@@ -7087,7 +7340,8 @@
     background-color: color-mix(in srgb, oklch(.396 .141 25.723) 20%, transparent);
   }
 
-  .dark\:bg-red-900\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-red-900\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
     }
   }
@@ -7096,7 +7350,8 @@
     background-color: color-mix(in srgb, oklch(.396 .141 25.723) 30%, transparent);
   }
 
-  .dark\:bg-red-900\/30:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-red-900\/30:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
     }
   }
@@ -7105,7 +7360,8 @@
     background-color: color-mix(in srgb, oklch(.396 .141 25.723) 40%, transparent);
   }
 
-  .dark\:bg-red-900\/40:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-red-900\/40:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-red-900) 40%, transparent);
     }
   }
@@ -7114,7 +7370,8 @@
     background-color: color-mix(in srgb, oklch(.258 .092 26.042) 20%, transparent);
   }
 
-  .dark\:bg-red-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-red-950\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-red-950) 20%, transparent);
     }
   }
@@ -7131,7 +7388,8 @@
     background-color: color-mix(in srgb, oklch(.129 .042 264.695) 30%, transparent);
   }
 
-  .dark\:bg-slate-950\/30:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-slate-950\/30:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-slate-950) 30%, transparent);
     }
   }
@@ -7140,7 +7398,8 @@
     background-color: #ffffff1a;
   }
 
-  .dark\:bg-white\/10:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-white\/10:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
     }
   }
@@ -7153,7 +7412,8 @@
     background-color: color-mix(in srgb, oklch(.286 .066 53.813) 20%, transparent);
   }
 
-  .dark\:bg-yellow-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-yellow-950\/20:is(.dark *) {
       background-color: color-mix(in oklab, var(--color-yellow-950) 20%, transparent);
     }
   }
@@ -7167,7 +7427,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:from-amber-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:from-amber-950\/20:is(.dark *) {
       --tw-gradient-from: color-mix(in oklab, var(--color-amber-950) 20%, transparent);
     }
   }
@@ -7177,7 +7438,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:from-blue-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:from-blue-950\/20:is(.dark *) {
       --tw-gradient-from: color-mix(in oklab, var(--color-blue-950) 20%, transparent);
     }
   }
@@ -7187,7 +7449,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:from-emerald-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:from-emerald-950\/20:is(.dark *) {
       --tw-gradient-from: color-mix(in oklab, var(--color-emerald-950) 20%, transparent);
     }
   }
@@ -7197,7 +7460,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:from-gray-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:from-gray-950\/20:is(.dark *) {
       --tw-gradient-from: color-mix(in oklab, var(--color-gray-950) 20%, transparent);
     }
   }
@@ -7207,7 +7471,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:from-green-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:from-green-950\/20:is(.dark *) {
       --tw-gradient-from: color-mix(in oklab, var(--color-green-950) 20%, transparent);
     }
   }
@@ -7217,7 +7482,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:from-purple-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:from-purple-950\/20:is(.dark *) {
       --tw-gradient-from: color-mix(in oklab, var(--color-purple-950) 20%, transparent);
     }
   }
@@ -7227,7 +7493,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:from-red-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:from-red-950\/20:is(.dark *) {
       --tw-gradient-from: color-mix(in oklab, var(--color-red-950) 20%, transparent);
     }
   }
@@ -7237,7 +7504,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:from-slate-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:from-slate-950\/20:is(.dark *) {
       --tw-gradient-from: color-mix(in oklab, var(--color-slate-950) 20%, transparent);
     }
   }
@@ -7247,7 +7515,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:from-violet-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:from-violet-950\/20:is(.dark *) {
       --tw-gradient-from: color-mix(in oklab, var(--color-violet-950) 20%, transparent);
     }
   }
@@ -7257,7 +7526,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:to-cyan-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:to-cyan-950\/20:is(.dark *) {
       --tw-gradient-to: color-mix(in oklab, var(--color-cyan-950) 20%, transparent);
     }
   }
@@ -7267,7 +7537,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:to-emerald-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:to-emerald-950\/20:is(.dark *) {
       --tw-gradient-to: color-mix(in oklab, var(--color-emerald-950) 20%, transparent);
     }
   }
@@ -7277,7 +7548,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:to-gray-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:to-gray-950\/20:is(.dark *) {
       --tw-gradient-to: color-mix(in oklab, var(--color-gray-950) 20%, transparent);
     }
   }
@@ -7287,7 +7559,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:to-indigo-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:to-indigo-950\/20:is(.dark *) {
       --tw-gradient-to: color-mix(in oklab, var(--color-indigo-950) 20%, transparent);
     }
   }
@@ -7297,7 +7570,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:to-orange-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:to-orange-950\/20:is(.dark *) {
       --tw-gradient-to: color-mix(in oklab, var(--color-orange-950) 20%, transparent);
     }
   }
@@ -7307,7 +7581,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:to-pink-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:to-pink-950\/20:is(.dark *) {
       --tw-gradient-to: color-mix(in oklab, var(--color-pink-950) 20%, transparent);
     }
   }
@@ -7317,7 +7592,8 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  .dark\:to-teal-950\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:to-teal-950\/20:is(.dark *) {
       --tw-gradient-to: color-mix(in oklab, var(--color-teal-950) 20%, transparent);
     }
   }
@@ -7478,7 +7754,8 @@
     --tw-ring-color: color-mix(in srgb, oklch(.396 .141 25.723) 20%, transparent);
   }
 
-  .dark\:ring-red-900\/20:is(.dark *) {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:ring-red-900\/20:is(.dark *) {
       --tw-ring-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
     }
   }
@@ -7488,7 +7765,8 @@
       background-color: var(--accent);
     }
 
-    .dark\:hover\:bg-accent\/50:is(.dark *):hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:hover\:bg-accent\/50:is(.dark *):hover {
         background-color: color-mix(in oklab, var(--accent) 50%, transparent);
       }
     }
@@ -7499,7 +7777,8 @@
       background-color: var(--input);
     }
 
-    .dark\:hover\:bg-input\/50:is(.dark *):hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:hover\:bg-input\/50:is(.dark *):hover {
         background-color: color-mix(in oklab, var(--input) 50%, transparent);
       }
     }
@@ -7510,7 +7789,8 @@
       background-color: color-mix(in srgb, oklch(.381 .176 304.987) 10%, transparent);
     }
 
-    .dark\:hover\:bg-purple-900\/10:is(.dark *):hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:hover\:bg-purple-900\/10:is(.dark *):hover {
         background-color: color-mix(in oklab, var(--color-purple-900) 10%, transparent);
       }
     }
@@ -7520,7 +7800,8 @@
     --tw-ring-color: var(--destructive);
   }
 
-  .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
       --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
     }
   }
@@ -7529,7 +7810,8 @@
     --tw-ring-color: var(--destructive);
   }
 
-  .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
       --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
     }
   }
@@ -7538,7 +7820,8 @@
     --tw-ring-color: var(--destructive);
   }
 
-  .dark\:data-\[active\=true\]\:aria-invalid\:ring-destructive\/40:is(.dark *)[data-active="true"][aria-invalid="true"] {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:data-\[active\=true\]\:aria-invalid\:ring-destructive\/40:is(.dark *)[data-active="true"][aria-invalid="true"] {
       --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
     }
   }
@@ -7551,7 +7834,8 @@
     background-color: var(--input);
   }
 
-  .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] {
       background-color: color-mix(in oklab, var(--input) 30%, transparent);
     }
   }
@@ -7576,7 +7860,8 @@
     background-color: var(--input);
   }
 
-  .dark\:data-\[state\=unchecked\]\:bg-input\/80:is(.dark *)[data-state="unchecked"] {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:data-\[state\=unchecked\]\:bg-input\/80:is(.dark *)[data-state="unchecked"] {
       background-color: color-mix(in oklab, var(--input) 80%, transparent);
     }
   }
@@ -7585,7 +7870,8 @@
     background-color: var(--destructive);
   }
 
-  .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus {
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus {
       background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
     }
   }
@@ -7598,7 +7884,8 @@
     stroke: var(--border);
   }
 
-  .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"] {
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"] {
       stroke: color-mix(in oklab, var(--border) 50%, transparent);
     }
   }
@@ -7945,7 +8232,8 @@
       background-color: var(--destructive);
     }
 
-    a.\[a\&\]\:hover\:bg-destructive\/90:hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      a.\[a\&\]\:hover\:bg-destructive\/90:hover {
         background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
       }
     }
@@ -7956,7 +8244,8 @@
       background-color: var(--primary);
     }
 
-    a.\[a\&\]\:hover\:bg-primary\/90:hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      a.\[a\&\]\:hover\:bg-primary\/90:hover {
         background-color: color-mix(in oklab, var(--primary) 90%, transparent);
       }
     }
@@ -7967,7 +8256,8 @@
       background-color: var(--secondary);
     }
 
-    a.\[a\&\]\:hover\:bg-secondary\/90:hover {
+    @supports (color: color-mix(in lab, red, red)) {
+      a.\[a\&\]\:hover\:bg-secondary\/90:hover {
         background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
       }
     }