@nuvoui/core 1.3.4 → 1.4.0

package/dist/nuvoui.css

@@ -1,11 +1,32 @@
+/*!
+ * NuvoUI SCSS Framework
+ * MIT License
+ *
+ * Copyright (c) 2025 NuvoUI
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
 *,
 ::before,
 ::after,
 ::backdrop,
 ::file-selector-button {
   box-sizing: border-box;
-  margin: 0;
-  padding: 0;
 }
 
 body,
@@ -89,15 +110,11 @@ select:disabled {
 ul[role=list],
 ol[role=list] {
   list-style: none;
-  margin: 0;
-  padding: 0;
   padding-inline-start: 0;
   margin-block: 0;
 }
 ul[role=list] > li,
 ol[role=list] > li {
-  margin: 0;
-  padding: 0;
   margin-block: 0;
 }
 
@@ -130,7 +147,7 @@ textarea:not([rows]) {
 }
 
 html {
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 body {
@@ -571,73 +588,73 @@ code {
   align-self: auto;
 }
 .flex > .fill-1, .flex\@xs > .fill-1, .flex\@sm > .fill-1, .flex\@md > .fill-1, .flex\@lg > .fill-1, .flex\@xl > .fill-1, .flex\@2xl > .fill-1 {
-  flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 12));
+  flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
 }
 .flex > .order-1, .flex\@xs > .order-1, .flex\@sm > .order-1, .flex\@md > .order-1, .flex\@lg > .order-1, .flex\@xl > .order-1, .flex\@2xl > .order-1 {
   order: 1;
 }
 .flex > .fill-2, .flex\@xs > .fill-2, .flex\@sm > .fill-2, .flex\@md > .fill-2, .flex\@lg > .fill-2, .flex\@xl > .fill-2, .flex\@2xl > .fill-2 {
-  flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 6));
+  flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
 }
 .flex > .order-2, .flex\@xs > .order-2, .flex\@sm > .order-2, .flex\@md > .order-2, .flex\@lg > .order-2, .flex\@xl > .order-2, .flex\@2xl > .order-2 {
   order: 2;
 }
 .flex > .fill-3, .flex\@xs > .fill-3, .flex\@sm > .fill-3, .flex\@md > .fill-3, .flex\@lg > .fill-3, .flex\@xl > .fill-3, .flex\@2xl > .fill-3 {
-  flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 4));
+  flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
 }
 .flex > .order-3, .flex\@xs > .order-3, .flex\@sm > .order-3, .flex\@md > .order-3, .flex\@lg > .order-3, .flex\@xl > .order-3, .flex\@2xl > .order-3 {
   order: 3;
 }
 .flex > .fill-4, .flex\@xs > .fill-4, .flex\@sm > .fill-4, .flex\@md > .fill-4, .flex\@lg > .fill-4, .flex\@xl > .fill-4, .flex\@2xl > .fill-4 {
-  flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 3));
+  flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
 }
 .flex > .order-4, .flex\@xs > .order-4, .flex\@sm > .order-4, .flex\@md > .order-4, .flex\@lg > .order-4, .flex\@xl > .order-4, .flex\@2xl > .order-4 {
   order: 4;
 }
 .flex > .fill-5, .flex\@xs > .fill-5, .flex\@sm > .fill-5, .flex\@md > .fill-5, .flex\@lg > .fill-5, .flex\@xl > .fill-5, .flex\@2xl > .fill-5 {
-  flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 2.4));
+  flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
 }
 .flex > .order-5, .flex\@xs > .order-5, .flex\@sm > .order-5, .flex\@md > .order-5, .flex\@lg > .order-5, .flex\@xl > .order-5, .flex\@2xl > .order-5 {
   order: 5;
 }
 .flex > .fill-6, .flex\@xs > .fill-6, .flex\@sm > .fill-6, .flex\@md > .fill-6, .flex\@lg > .fill-6, .flex\@xl > .fill-6, .flex\@2xl > .fill-6 {
-  flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 2));
+  flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
 }
 .flex > .order-6, .flex\@xs > .order-6, .flex\@sm > .order-6, .flex\@md > .order-6, .flex\@lg > .order-6, .flex\@xl > .order-6, .flex\@2xl > .order-6 {
   order: 6;
 }
 .flex > .fill-7, .flex\@xs > .fill-7, .flex\@sm > .fill-7, .flex\@md > .fill-7, .flex\@lg > .fill-7, .flex\@xl > .fill-7, .flex\@2xl > .fill-7 {
-  flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 1.7142857143));
+  flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
 }
 .flex > .order-7, .flex\@xs > .order-7, .flex\@sm > .order-7, .flex\@md > .order-7, .flex\@lg > .order-7, .flex\@xl > .order-7, .flex\@2xl > .order-7 {
   order: 7;
 }
 .flex > .fill-8, .flex\@xs > .fill-8, .flex\@sm > .fill-8, .flex\@md > .fill-8, .flex\@lg > .fill-8, .flex\@xl > .fill-8, .flex\@2xl > .fill-8 {
-  flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 1.5));
+  flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
 }
 .flex > .order-8, .flex\@xs > .order-8, .flex\@sm > .order-8, .flex\@md > .order-8, .flex\@lg > .order-8, .flex\@xl > .order-8, .flex\@2xl > .order-8 {
   order: 8;
 }
 .flex > .fill-9, .flex\@xs > .fill-9, .flex\@sm > .fill-9, .flex\@md > .fill-9, .flex\@lg > .fill-9, .flex\@xl > .fill-9, .flex\@2xl > .fill-9 {
-  flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 1.3333333333));
+  flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
 }
 .flex > .order-9, .flex\@xs > .order-9, .flex\@sm > .order-9, .flex\@md > .order-9, .flex\@lg > .order-9, .flex\@xl > .order-9, .flex\@2xl > .order-9 {
   order: 9;
 }
 .flex > .fill-10, .flex\@xs > .fill-10, .flex\@sm > .fill-10, .flex\@md > .fill-10, .flex\@lg > .fill-10, .flex\@xl > .fill-10, .flex\@2xl > .fill-10 {
-  flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 1.2));
+  flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
 }
 .flex > .order-10, .flex\@xs > .order-10, .flex\@sm > .order-10, .flex\@md > .order-10, .flex\@lg > .order-10, .flex\@xl > .order-10, .flex\@2xl > .order-10 {
   order: 10;
 }
 .flex > .fill-11, .flex\@xs > .fill-11, .flex\@sm > .fill-11, .flex\@md > .fill-11, .flex\@lg > .fill-11, .flex\@xl > .fill-11, .flex\@2xl > .fill-11 {
-  flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 1.0909090909));
+  flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
 }
 .flex > .order-11, .flex\@xs > .order-11, .flex\@sm > .order-11, .flex\@md > .order-11, .flex\@lg > .order-11, .flex\@xl > .order-11, .flex\@2xl > .order-11 {
   order: 11;
 }
 .flex > .fill-12, .flex\@xs > .fill-12, .flex\@sm > .fill-12, .flex\@md > .fill-12, .flex\@lg > .fill-12, .flex\@xl > .fill-12, .flex\@2xl > .fill-12 {
-  flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 1));
+  flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
 }
 .flex > .order-12, .flex\@xs > .order-12, .flex\@sm > .order-12, .flex\@md > .order-12, .flex\@lg > .order-12, .flex\@xl > .order-12, .flex\@2xl > .order-12 {
   order: 12;
@@ -771,73 +788,73 @@ code {
     align-self: auto;
   }
   .flex > .fill-1\@xs, .flex\@xs > .fill-1\@xs, .flex\@sm > .fill-1\@xs, .flex\@md > .fill-1\@xs, .flex\@lg > .fill-1\@xs, .flex\@xl > .fill-1\@xs, .flex\@2xl > .fill-1\@xs {
-    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 12));
+    flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
   }
   .flex > .order-1\@xs, .flex\@xs > .order-1\@xs, .flex\@sm > .order-1\@xs, .flex\@md > .order-1\@xs, .flex\@lg > .order-1\@xs, .flex\@xl > .order-1\@xs, .flex\@2xl > .order-1\@xs {
     order: 1;
   }
   .flex > .fill-2\@xs, .flex\@xs > .fill-2\@xs, .flex\@sm > .fill-2\@xs, .flex\@md > .fill-2\@xs, .flex\@lg > .fill-2\@xs, .flex\@xl > .fill-2\@xs, .flex\@2xl > .fill-2\@xs {
-    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 6));
+    flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
   }
   .flex > .order-2\@xs, .flex\@xs > .order-2\@xs, .flex\@sm > .order-2\@xs, .flex\@md > .order-2\@xs, .flex\@lg > .order-2\@xs, .flex\@xl > .order-2\@xs, .flex\@2xl > .order-2\@xs {
     order: 2;
   }
   .flex > .fill-3\@xs, .flex\@xs > .fill-3\@xs, .flex\@sm > .fill-3\@xs, .flex\@md > .fill-3\@xs, .flex\@lg > .fill-3\@xs, .flex\@xl > .fill-3\@xs, .flex\@2xl > .fill-3\@xs {
-    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 4));
+    flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
   }
   .flex > .order-3\@xs, .flex\@xs > .order-3\@xs, .flex\@sm > .order-3\@xs, .flex\@md > .order-3\@xs, .flex\@lg > .order-3\@xs, .flex\@xl > .order-3\@xs, .flex\@2xl > .order-3\@xs {
     order: 3;
   }
   .flex > .fill-4\@xs, .flex\@xs > .fill-4\@xs, .flex\@sm > .fill-4\@xs, .flex\@md > .fill-4\@xs, .flex\@lg > .fill-4\@xs, .flex\@xl > .fill-4\@xs, .flex\@2xl > .fill-4\@xs {
-    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 3));
+    flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
   }
   .flex > .order-4\@xs, .flex\@xs > .order-4\@xs, .flex\@sm > .order-4\@xs, .flex\@md > .order-4\@xs, .flex\@lg > .order-4\@xs, .flex\@xl > .order-4\@xs, .flex\@2xl > .order-4\@xs {
     order: 4;
   }
   .flex > .fill-5\@xs, .flex\@xs > .fill-5\@xs, .flex\@sm > .fill-5\@xs, .flex\@md > .fill-5\@xs, .flex\@lg > .fill-5\@xs, .flex\@xl > .fill-5\@xs, .flex\@2xl > .fill-5\@xs {
-    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 2.4));
+    flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
   }
   .flex > .order-5\@xs, .flex\@xs > .order-5\@xs, .flex\@sm > .order-5\@xs, .flex\@md > .order-5\@xs, .flex\@lg > .order-5\@xs, .flex\@xl > .order-5\@xs, .flex\@2xl > .order-5\@xs {
     order: 5;
   }
   .flex > .fill-6\@xs, .flex\@xs > .fill-6\@xs, .flex\@sm > .fill-6\@xs, .flex\@md > .fill-6\@xs, .flex\@lg > .fill-6\@xs, .flex\@xl > .fill-6\@xs, .flex\@2xl > .fill-6\@xs {
-    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 2));
+    flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
   }
   .flex > .order-6\@xs, .flex\@xs > .order-6\@xs, .flex\@sm > .order-6\@xs, .flex\@md > .order-6\@xs, .flex\@lg > .order-6\@xs, .flex\@xl > .order-6\@xs, .flex\@2xl > .order-6\@xs {
     order: 6;
   }
   .flex > .fill-7\@xs, .flex\@xs > .fill-7\@xs, .flex\@sm > .fill-7\@xs, .flex\@md > .fill-7\@xs, .flex\@lg > .fill-7\@xs, .flex\@xl > .fill-7\@xs, .flex\@2xl > .fill-7\@xs {
-    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 1.7142857143));
+    flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
   }
   .flex > .order-7\@xs, .flex\@xs > .order-7\@xs, .flex\@sm > .order-7\@xs, .flex\@md > .order-7\@xs, .flex\@lg > .order-7\@xs, .flex\@xl > .order-7\@xs, .flex\@2xl > .order-7\@xs {
     order: 7;
   }
   .flex > .fill-8\@xs, .flex\@xs > .fill-8\@xs, .flex\@sm > .fill-8\@xs, .flex\@md > .fill-8\@xs, .flex\@lg > .fill-8\@xs, .flex\@xl > .fill-8\@xs, .flex\@2xl > .fill-8\@xs {
-    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 1.5));
+    flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
   }
   .flex > .order-8\@xs, .flex\@xs > .order-8\@xs, .flex\@sm > .order-8\@xs, .flex\@md > .order-8\@xs, .flex\@lg > .order-8\@xs, .flex\@xl > .order-8\@xs, .flex\@2xl > .order-8\@xs {
     order: 8;
   }
   .flex > .fill-9\@xs, .flex\@xs > .fill-9\@xs, .flex\@sm > .fill-9\@xs, .flex\@md > .fill-9\@xs, .flex\@lg > .fill-9\@xs, .flex\@xl > .fill-9\@xs, .flex\@2xl > .fill-9\@xs {
-    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 1.3333333333));
+    flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
   }
   .flex > .order-9\@xs, .flex\@xs > .order-9\@xs, .flex\@sm > .order-9\@xs, .flex\@md > .order-9\@xs, .flex\@lg > .order-9\@xs, .flex\@xl > .order-9\@xs, .flex\@2xl > .order-9\@xs {
     order: 9;
   }
   .flex > .fill-10\@xs, .flex\@xs > .fill-10\@xs, .flex\@sm > .fill-10\@xs, .flex\@md > .fill-10\@xs, .flex\@lg > .fill-10\@xs, .flex\@xl > .fill-10\@xs, .flex\@2xl > .fill-10\@xs {
-    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 1.2));
+    flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
   }
   .flex > .order-10\@xs, .flex\@xs > .order-10\@xs, .flex\@sm > .order-10\@xs, .flex\@md > .order-10\@xs, .flex\@lg > .order-10\@xs, .flex\@xl > .order-10\@xs, .flex\@2xl > .order-10\@xs {
     order: 10;
   }
   .flex > .fill-11\@xs, .flex\@xs > .fill-11\@xs, .flex\@sm > .fill-11\@xs, .flex\@md > .fill-11\@xs, .flex\@lg > .fill-11\@xs, .flex\@xl > .fill-11\@xs, .flex\@2xl > .fill-11\@xs {
-    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 1.0909090909));
+    flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
   }
   .flex > .order-11\@xs, .flex\@xs > .order-11\@xs, .flex\@sm > .order-11\@xs, .flex\@md > .order-11\@xs, .flex\@lg > .order-11\@xs, .flex\@xl > .order-11\@xs, .flex\@2xl > .order-11\@xs {
     order: 11;
   }
   .flex > .fill-12\@xs, .flex\@xs > .fill-12\@xs, .flex\@sm > .fill-12\@xs, .flex\@md > .fill-12\@xs, .flex\@lg > .fill-12\@xs, .flex\@xl > .fill-12\@xs, .flex\@2xl > .fill-12\@xs {
-    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 1));
+    flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
   }
   .flex > .order-12\@xs, .flex\@xs > .order-12\@xs, .flex\@sm > .order-12\@xs, .flex\@md > .order-12\@xs, .flex\@lg > .order-12\@xs, .flex\@xl > .order-12\@xs, .flex\@2xl > .order-12\@xs {
     order: 12;
@@ -971,73 +988,73 @@ code {
     align-self: auto;
   }
   .flex > .fill-1\@sm, .flex\@xs > .fill-1\@sm, .flex\@sm > .fill-1\@sm, .flex\@md > .fill-1\@sm, .flex\@lg > .fill-1\@sm, .flex\@xl > .fill-1\@sm, .flex\@2xl > .fill-1\@sm {
-    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 12));
+    flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
   }
   .flex > .order-1\@sm, .flex\@xs > .order-1\@sm, .flex\@sm > .order-1\@sm, .flex\@md > .order-1\@sm, .flex\@lg > .order-1\@sm, .flex\@xl > .order-1\@sm, .flex\@2xl > .order-1\@sm {
     order: 1;
   }
   .flex > .fill-2\@sm, .flex\@xs > .fill-2\@sm, .flex\@sm > .fill-2\@sm, .flex\@md > .fill-2\@sm, .flex\@lg > .fill-2\@sm, .flex\@xl > .fill-2\@sm, .flex\@2xl > .fill-2\@sm {
-    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 6));
+    flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
   }
   .flex > .order-2\@sm, .flex\@xs > .order-2\@sm, .flex\@sm > .order-2\@sm, .flex\@md > .order-2\@sm, .flex\@lg > .order-2\@sm, .flex\@xl > .order-2\@sm, .flex\@2xl > .order-2\@sm {
     order: 2;
   }
   .flex > .fill-3\@sm, .flex\@xs > .fill-3\@sm, .flex\@sm > .fill-3\@sm, .flex\@md > .fill-3\@sm, .flex\@lg > .fill-3\@sm, .flex\@xl > .fill-3\@sm, .flex\@2xl > .fill-3\@sm {
-    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 4));
+    flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
   }
   .flex > .order-3\@sm, .flex\@xs > .order-3\@sm, .flex\@sm > .order-3\@sm, .flex\@md > .order-3\@sm, .flex\@lg > .order-3\@sm, .flex\@xl > .order-3\@sm, .flex\@2xl > .order-3\@sm {
     order: 3;
   }
   .flex > .fill-4\@sm, .flex\@xs > .fill-4\@sm, .flex\@sm > .fill-4\@sm, .flex\@md > .fill-4\@sm, .flex\@lg > .fill-4\@sm, .flex\@xl > .fill-4\@sm, .flex\@2xl > .fill-4\@sm {
-    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 3));
+    flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
   }
   .flex > .order-4\@sm, .flex\@xs > .order-4\@sm, .flex\@sm > .order-4\@sm, .flex\@md > .order-4\@sm, .flex\@lg > .order-4\@sm, .flex\@xl > .order-4\@sm, .flex\@2xl > .order-4\@sm {
     order: 4;
   }
   .flex > .fill-5\@sm, .flex\@xs > .fill-5\@sm, .flex\@sm > .fill-5\@sm, .flex\@md > .fill-5\@sm, .flex\@lg > .fill-5\@sm, .flex\@xl > .fill-5\@sm, .flex\@2xl > .fill-5\@sm {
-    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 2.4));
+    flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
   }
   .flex > .order-5\@sm, .flex\@xs > .order-5\@sm, .flex\@sm > .order-5\@sm, .flex\@md > .order-5\@sm, .flex\@lg > .order-5\@sm, .flex\@xl > .order-5\@sm, .flex\@2xl > .order-5\@sm {
     order: 5;
   }
   .flex > .fill-6\@sm, .flex\@xs > .fill-6\@sm, .flex\@sm > .fill-6\@sm, .flex\@md > .fill-6\@sm, .flex\@lg > .fill-6\@sm, .flex\@xl > .fill-6\@sm, .flex\@2xl > .fill-6\@sm {
-    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 2));
+    flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
   }
   .flex > .order-6\@sm, .flex\@xs > .order-6\@sm, .flex\@sm > .order-6\@sm, .flex\@md > .order-6\@sm, .flex\@lg > .order-6\@sm, .flex\@xl > .order-6\@sm, .flex\@2xl > .order-6\@sm {
     order: 6;
   }
   .flex > .fill-7\@sm, .flex\@xs > .fill-7\@sm, .flex\@sm > .fill-7\@sm, .flex\@md > .fill-7\@sm, .flex\@lg > .fill-7\@sm, .flex\@xl > .fill-7\@sm, .flex\@2xl > .fill-7\@sm {
-    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 1.7142857143));
+    flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
   }
   .flex > .order-7\@sm, .flex\@xs > .order-7\@sm, .flex\@sm > .order-7\@sm, .flex\@md > .order-7\@sm, .flex\@lg > .order-7\@sm, .flex\@xl > .order-7\@sm, .flex\@2xl > .order-7\@sm {
     order: 7;
   }
   .flex > .fill-8\@sm, .flex\@xs > .fill-8\@sm, .flex\@sm > .fill-8\@sm, .flex\@md > .fill-8\@sm, .flex\@lg > .fill-8\@sm, .flex\@xl > .fill-8\@sm, .flex\@2xl > .fill-8\@sm {
-    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 1.5));
+    flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
   }
   .flex > .order-8\@sm, .flex\@xs > .order-8\@sm, .flex\@sm > .order-8\@sm, .flex\@md > .order-8\@sm, .flex\@lg > .order-8\@sm, .flex\@xl > .order-8\@sm, .flex\@2xl > .order-8\@sm {
     order: 8;
   }
   .flex > .fill-9\@sm, .flex\@xs > .fill-9\@sm, .flex\@sm > .fill-9\@sm, .flex\@md > .fill-9\@sm, .flex\@lg > .fill-9\@sm, .flex\@xl > .fill-9\@sm, .flex\@2xl > .fill-9\@sm {
-    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 1.3333333333));
+    flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
   }
   .flex > .order-9\@sm, .flex\@xs > .order-9\@sm, .flex\@sm > .order-9\@sm, .flex\@md > .order-9\@sm, .flex\@lg > .order-9\@sm, .flex\@xl > .order-9\@sm, .flex\@2xl > .order-9\@sm {
     order: 9;
   }
   .flex > .fill-10\@sm, .flex\@xs > .fill-10\@sm, .flex\@sm > .fill-10\@sm, .flex\@md > .fill-10\@sm, .flex\@lg > .fill-10\@sm, .flex\@xl > .fill-10\@sm, .flex\@2xl > .fill-10\@sm {
-    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 1.2));
+    flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
   }
   .flex > .order-10\@sm, .flex\@xs > .order-10\@sm, .flex\@sm > .order-10\@sm, .flex\@md > .order-10\@sm, .flex\@lg > .order-10\@sm, .flex\@xl > .order-10\@sm, .flex\@2xl > .order-10\@sm {
     order: 10;
   }
   .flex > .fill-11\@sm, .flex\@xs > .fill-11\@sm, .flex\@sm > .fill-11\@sm, .flex\@md > .fill-11\@sm, .flex\@lg > .fill-11\@sm, .flex\@xl > .fill-11\@sm, .flex\@2xl > .fill-11\@sm {
-    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 1.0909090909));
+    flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
   }
   .flex > .order-11\@sm, .flex\@xs > .order-11\@sm, .flex\@sm > .order-11\@sm, .flex\@md > .order-11\@sm, .flex\@lg > .order-11\@sm, .flex\@xl > .order-11\@sm, .flex\@2xl > .order-11\@sm {
     order: 11;
   }
   .flex > .fill-12\@sm, .flex\@xs > .fill-12\@sm, .flex\@sm > .fill-12\@sm, .flex\@md > .fill-12\@sm, .flex\@lg > .fill-12\@sm, .flex\@xl > .fill-12\@sm, .flex\@2xl > .fill-12\@sm {
-    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 1));
+    flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
   }
   .flex > .order-12\@sm, .flex\@xs > .order-12\@sm, .flex\@sm > .order-12\@sm, .flex\@md > .order-12\@sm, .flex\@lg > .order-12\@sm, .flex\@xl > .order-12\@sm, .flex\@2xl > .order-12\@sm {
     order: 12;
@@ -1171,73 +1188,73 @@ code {
     align-self: auto;
   }
   .flex > .fill-1\@md, .flex\@xs > .fill-1\@md, .flex\@sm > .fill-1\@md, .flex\@md > .fill-1\@md, .flex\@lg > .fill-1\@md, .flex\@xl > .fill-1\@md, .flex\@2xl > .fill-1\@md {
-    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 12));
+    flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
   }
   .flex > .order-1\@md, .flex\@xs > .order-1\@md, .flex\@sm > .order-1\@md, .flex\@md > .order-1\@md, .flex\@lg > .order-1\@md, .flex\@xl > .order-1\@md, .flex\@2xl > .order-1\@md {
     order: 1;
   }
   .flex > .fill-2\@md, .flex\@xs > .fill-2\@md, .flex\@sm > .fill-2\@md, .flex\@md > .fill-2\@md, .flex\@lg > .fill-2\@md, .flex\@xl > .fill-2\@md, .flex\@2xl > .fill-2\@md {
-    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 6));
+    flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
   }
   .flex > .order-2\@md, .flex\@xs > .order-2\@md, .flex\@sm > .order-2\@md, .flex\@md > .order-2\@md, .flex\@lg > .order-2\@md, .flex\@xl > .order-2\@md, .flex\@2xl > .order-2\@md {
     order: 2;
   }
   .flex > .fill-3\@md, .flex\@xs > .fill-3\@md, .flex\@sm > .fill-3\@md, .flex\@md > .fill-3\@md, .flex\@lg > .fill-3\@md, .flex\@xl > .fill-3\@md, .flex\@2xl > .fill-3\@md {
-    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 4));
+    flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
   }
   .flex > .order-3\@md, .flex\@xs > .order-3\@md, .flex\@sm > .order-3\@md, .flex\@md > .order-3\@md, .flex\@lg > .order-3\@md, .flex\@xl > .order-3\@md, .flex\@2xl > .order-3\@md {
     order: 3;
   }
   .flex > .fill-4\@md, .flex\@xs > .fill-4\@md, .flex\@sm > .fill-4\@md, .flex\@md > .fill-4\@md, .flex\@lg > .fill-4\@md, .flex\@xl > .fill-4\@md, .flex\@2xl > .fill-4\@md {
-    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 3));
+    flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
   }
   .flex > .order-4\@md, .flex\@xs > .order-4\@md, .flex\@sm > .order-4\@md, .flex\@md > .order-4\@md, .flex\@lg > .order-4\@md, .flex\@xl > .order-4\@md, .flex\@2xl > .order-4\@md {
     order: 4;
   }
   .flex > .fill-5\@md, .flex\@xs > .fill-5\@md, .flex\@sm > .fill-5\@md, .flex\@md > .fill-5\@md, .flex\@lg > .fill-5\@md, .flex\@xl > .fill-5\@md, .flex\@2xl > .fill-5\@md {
-    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 2.4));
+    flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
   }
   .flex > .order-5\@md, .flex\@xs > .order-5\@md, .flex\@sm > .order-5\@md, .flex\@md > .order-5\@md, .flex\@lg > .order-5\@md, .flex\@xl > .order-5\@md, .flex\@2xl > .order-5\@md {
     order: 5;
   }
   .flex > .fill-6\@md, .flex\@xs > .fill-6\@md, .flex\@sm > .fill-6\@md, .flex\@md > .fill-6\@md, .flex\@lg > .fill-6\@md, .flex\@xl > .fill-6\@md, .flex\@2xl > .fill-6\@md {
-    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 2));
+    flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
   }
   .flex > .order-6\@md, .flex\@xs > .order-6\@md, .flex\@sm > .order-6\@md, .flex\@md > .order-6\@md, .flex\@lg > .order-6\@md, .flex\@xl > .order-6\@md, .flex\@2xl > .order-6\@md {
     order: 6;
   }
   .flex > .fill-7\@md, .flex\@xs > .fill-7\@md, .flex\@sm > .fill-7\@md, .flex\@md > .fill-7\@md, .flex\@lg > .fill-7\@md, .flex\@xl > .fill-7\@md, .flex\@2xl > .fill-7\@md {
-    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 1.7142857143));
+    flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
   }
   .flex > .order-7\@md, .flex\@xs > .order-7\@md, .flex\@sm > .order-7\@md, .flex\@md > .order-7\@md, .flex\@lg > .order-7\@md, .flex\@xl > .order-7\@md, .flex\@2xl > .order-7\@md {
     order: 7;
   }
   .flex > .fill-8\@md, .flex\@xs > .fill-8\@md, .flex\@sm > .fill-8\@md, .flex\@md > .fill-8\@md, .flex\@lg > .fill-8\@md, .flex\@xl > .fill-8\@md, .flex\@2xl > .fill-8\@md {
-    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 1.5));
+    flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
   }
   .flex > .order-8\@md, .flex\@xs > .order-8\@md, .flex\@sm > .order-8\@md, .flex\@md > .order-8\@md, .flex\@lg > .order-8\@md, .flex\@xl > .order-8\@md, .flex\@2xl > .order-8\@md {
     order: 8;
   }
   .flex > .fill-9\@md, .flex\@xs > .fill-9\@md, .flex\@sm > .fill-9\@md, .flex\@md > .fill-9\@md, .flex\@lg > .fill-9\@md, .flex\@xl > .fill-9\@md, .flex\@2xl > .fill-9\@md {
-    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 1.3333333333));
+    flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
   }
   .flex > .order-9\@md, .flex\@xs > .order-9\@md, .flex\@sm > .order-9\@md, .flex\@md > .order-9\@md, .flex\@lg > .order-9\@md, .flex\@xl > .order-9\@md, .flex\@2xl > .order-9\@md {
     order: 9;
   }
   .flex > .fill-10\@md, .flex\@xs > .fill-10\@md, .flex\@sm > .fill-10\@md, .flex\@md > .fill-10\@md, .flex\@lg > .fill-10\@md, .flex\@xl > .fill-10\@md, .flex\@2xl > .fill-10\@md {
-    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 1.2));
+    flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
   }
   .flex > .order-10\@md, .flex\@xs > .order-10\@md, .flex\@sm > .order-10\@md, .flex\@md > .order-10\@md, .flex\@lg > .order-10\@md, .flex\@xl > .order-10\@md, .flex\@2xl > .order-10\@md {
     order: 10;
   }
   .flex > .fill-11\@md, .flex\@xs > .fill-11\@md, .flex\@sm > .fill-11\@md, .flex\@md > .fill-11\@md, .flex\@lg > .fill-11\@md, .flex\@xl > .fill-11\@md, .flex\@2xl > .fill-11\@md {
-    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 1.0909090909));
+    flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
   }
   .flex > .order-11\@md, .flex\@xs > .order-11\@md, .flex\@sm > .order-11\@md, .flex\@md > .order-11\@md, .flex\@lg > .order-11\@md, .flex\@xl > .order-11\@md, .flex\@2xl > .order-11\@md {
     order: 11;
   }
   .flex > .fill-12\@md, .flex\@xs > .fill-12\@md, .flex\@sm > .fill-12\@md, .flex\@md > .fill-12\@md, .flex\@lg > .fill-12\@md, .flex\@xl > .fill-12\@md, .flex\@2xl > .fill-12\@md {
-    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 1));
+    flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
   }
   .flex > .order-12\@md, .flex\@xs > .order-12\@md, .flex\@sm > .order-12\@md, .flex\@md > .order-12\@md, .flex\@lg > .order-12\@md, .flex\@xl > .order-12\@md, .flex\@2xl > .order-12\@md {
     order: 12;
@@ -1371,73 +1388,73 @@ code {
     align-self: auto;
   }
   .flex > .fill-1\@lg, .flex\@xs > .fill-1\@lg, .flex\@sm > .fill-1\@lg, .flex\@md > .fill-1\@lg, .flex\@lg > .fill-1\@lg, .flex\@xl > .fill-1\@lg, .flex\@2xl > .fill-1\@lg {
-    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 12));
+    flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
   }
   .flex > .order-1\@lg, .flex\@xs > .order-1\@lg, .flex\@sm > .order-1\@lg, .flex\@md > .order-1\@lg, .flex\@lg > .order-1\@lg, .flex\@xl > .order-1\@lg, .flex\@2xl > .order-1\@lg {
     order: 1;
   }
   .flex > .fill-2\@lg, .flex\@xs > .fill-2\@lg, .flex\@sm > .fill-2\@lg, .flex\@md > .fill-2\@lg, .flex\@lg > .fill-2\@lg, .flex\@xl > .fill-2\@lg, .flex\@2xl > .fill-2\@lg {
-    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 6));
+    flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
   }
   .flex > .order-2\@lg, .flex\@xs > .order-2\@lg, .flex\@sm > .order-2\@lg, .flex\@md > .order-2\@lg, .flex\@lg > .order-2\@lg, .flex\@xl > .order-2\@lg, .flex\@2xl > .order-2\@lg {
     order: 2;
   }
   .flex > .fill-3\@lg, .flex\@xs > .fill-3\@lg, .flex\@sm > .fill-3\@lg, .flex\@md > .fill-3\@lg, .flex\@lg > .fill-3\@lg, .flex\@xl > .fill-3\@lg, .flex\@2xl > .fill-3\@lg {
-    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 4));
+    flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
   }
   .flex > .order-3\@lg, .flex\@xs > .order-3\@lg, .flex\@sm > .order-3\@lg, .flex\@md > .order-3\@lg, .flex\@lg > .order-3\@lg, .flex\@xl > .order-3\@lg, .flex\@2xl > .order-3\@lg {
     order: 3;
   }
   .flex > .fill-4\@lg, .flex\@xs > .fill-4\@lg, .flex\@sm > .fill-4\@lg, .flex\@md > .fill-4\@lg, .flex\@lg > .fill-4\@lg, .flex\@xl > .fill-4\@lg, .flex\@2xl > .fill-4\@lg {
-    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 3));
+    flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
   }
   .flex > .order-4\@lg, .flex\@xs > .order-4\@lg, .flex\@sm > .order-4\@lg, .flex\@md > .order-4\@lg, .flex\@lg > .order-4\@lg, .flex\@xl > .order-4\@lg, .flex\@2xl > .order-4\@lg {
     order: 4;
   }
   .flex > .fill-5\@lg, .flex\@xs > .fill-5\@lg, .flex\@sm > .fill-5\@lg, .flex\@md > .fill-5\@lg, .flex\@lg > .fill-5\@lg, .flex\@xl > .fill-5\@lg, .flex\@2xl > .fill-5\@lg {
-    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 2.4));
+    flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
   }
   .flex > .order-5\@lg, .flex\@xs > .order-5\@lg, .flex\@sm > .order-5\@lg, .flex\@md > .order-5\@lg, .flex\@lg > .order-5\@lg, .flex\@xl > .order-5\@lg, .flex\@2xl > .order-5\@lg {
     order: 5;
   }
   .flex > .fill-6\@lg, .flex\@xs > .fill-6\@lg, .flex\@sm > .fill-6\@lg, .flex\@md > .fill-6\@lg, .flex\@lg > .fill-6\@lg, .flex\@xl > .fill-6\@lg, .flex\@2xl > .fill-6\@lg {
-    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 2));
+    flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
   }
   .flex > .order-6\@lg, .flex\@xs > .order-6\@lg, .flex\@sm > .order-6\@lg, .flex\@md > .order-6\@lg, .flex\@lg > .order-6\@lg, .flex\@xl > .order-6\@lg, .flex\@2xl > .order-6\@lg {
     order: 6;
   }
   .flex > .fill-7\@lg, .flex\@xs > .fill-7\@lg, .flex\@sm > .fill-7\@lg, .flex\@md > .fill-7\@lg, .flex\@lg > .fill-7\@lg, .flex\@xl > .fill-7\@lg, .flex\@2xl > .fill-7\@lg {
-    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 1.7142857143));
+    flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
   }
   .flex > .order-7\@lg, .flex\@xs > .order-7\@lg, .flex\@sm > .order-7\@lg, .flex\@md > .order-7\@lg, .flex\@lg > .order-7\@lg, .flex\@xl > .order-7\@lg, .flex\@2xl > .order-7\@lg {
     order: 7;
   }
   .flex > .fill-8\@lg, .flex\@xs > .fill-8\@lg, .flex\@sm > .fill-8\@lg, .flex\@md > .fill-8\@lg, .flex\@lg > .fill-8\@lg, .flex\@xl > .fill-8\@lg, .flex\@2xl > .fill-8\@lg {
-    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 1.5));
+    flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
   }
   .flex > .order-8\@lg, .flex\@xs > .order-8\@lg, .flex\@sm > .order-8\@lg, .flex\@md > .order-8\@lg, .flex\@lg > .order-8\@lg, .flex\@xl > .order-8\@lg, .flex\@2xl > .order-8\@lg {
     order: 8;
   }
   .flex > .fill-9\@lg, .flex\@xs > .fill-9\@lg, .flex\@sm > .fill-9\@lg, .flex\@md > .fill-9\@lg, .flex\@lg > .fill-9\@lg, .flex\@xl > .fill-9\@lg, .flex\@2xl > .fill-9\@lg {
-    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 1.3333333333));
+    flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
   }
   .flex > .order-9\@lg, .flex\@xs > .order-9\@lg, .flex\@sm > .order-9\@lg, .flex\@md > .order-9\@lg, .flex\@lg > .order-9\@lg, .flex\@xl > .order-9\@lg, .flex\@2xl > .order-9\@lg {
     order: 9;
   }
   .flex > .fill-10\@lg, .flex\@xs > .fill-10\@lg, .flex\@sm > .fill-10\@lg, .flex\@md > .fill-10\@lg, .flex\@lg > .fill-10\@lg, .flex\@xl > .fill-10\@lg, .flex\@2xl > .fill-10\@lg {
-    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 1.2));
+    flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
   }
   .flex > .order-10\@lg, .flex\@xs > .order-10\@lg, .flex\@sm > .order-10\@lg, .flex\@md > .order-10\@lg, .flex\@lg > .order-10\@lg, .flex\@xl > .order-10\@lg, .flex\@2xl > .order-10\@lg {
     order: 10;
   }
   .flex > .fill-11\@lg, .flex\@xs > .fill-11\@lg, .flex\@sm > .fill-11\@lg, .flex\@md > .fill-11\@lg, .flex\@lg > .fill-11\@lg, .flex\@xl > .fill-11\@lg, .flex\@2xl > .fill-11\@lg {
-    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 1.0909090909));
+    flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
   }
   .flex > .order-11\@lg, .flex\@xs > .order-11\@lg, .flex\@sm > .order-11\@lg, .flex\@md > .order-11\@lg, .flex\@lg > .order-11\@lg, .flex\@xl > .order-11\@lg, .flex\@2xl > .order-11\@lg {
     order: 11;
   }
   .flex > .fill-12\@lg, .flex\@xs > .fill-12\@lg, .flex\@sm > .fill-12\@lg, .flex\@md > .fill-12\@lg, .flex\@lg > .fill-12\@lg, .flex\@xl > .fill-12\@lg, .flex\@2xl > .fill-12\@lg {
-    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 1));
+    flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
   }
   .flex > .order-12\@lg, .flex\@xs > .order-12\@lg, .flex\@sm > .order-12\@lg, .flex\@md > .order-12\@lg, .flex\@lg > .order-12\@lg, .flex\@xl > .order-12\@lg, .flex\@2xl > .order-12\@lg {
     order: 12;
@@ -1571,73 +1588,73 @@ code {
     align-self: auto;
   }
   .flex > .fill-1\@xl, .flex\@xs > .fill-1\@xl, .flex\@sm > .fill-1\@xl, .flex\@md > .fill-1\@xl, .flex\@lg > .fill-1\@xl, .flex\@xl > .fill-1\@xl, .flex\@2xl > .fill-1\@xl {
-    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 12));
+    flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
   }
   .flex > .order-1\@xl, .flex\@xs > .order-1\@xl, .flex\@sm > .order-1\@xl, .flex\@md > .order-1\@xl, .flex\@lg > .order-1\@xl, .flex\@xl > .order-1\@xl, .flex\@2xl > .order-1\@xl {
     order: 1;
   }
   .flex > .fill-2\@xl, .flex\@xs > .fill-2\@xl, .flex\@sm > .fill-2\@xl, .flex\@md > .fill-2\@xl, .flex\@lg > .fill-2\@xl, .flex\@xl > .fill-2\@xl, .flex\@2xl > .fill-2\@xl {
-    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 6));
+    flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
   }
   .flex > .order-2\@xl, .flex\@xs > .order-2\@xl, .flex\@sm > .order-2\@xl, .flex\@md > .order-2\@xl, .flex\@lg > .order-2\@xl, .flex\@xl > .order-2\@xl, .flex\@2xl > .order-2\@xl {
     order: 2;
   }
   .flex > .fill-3\@xl, .flex\@xs > .fill-3\@xl, .flex\@sm > .fill-3\@xl, .flex\@md > .fill-3\@xl, .flex\@lg > .fill-3\@xl, .flex\@xl > .fill-3\@xl, .flex\@2xl > .fill-3\@xl {
-    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 4));
+    flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
   }
   .flex > .order-3\@xl, .flex\@xs > .order-3\@xl, .flex\@sm > .order-3\@xl, .flex\@md > .order-3\@xl, .flex\@lg > .order-3\@xl, .flex\@xl > .order-3\@xl, .flex\@2xl > .order-3\@xl {
     order: 3;
   }
   .flex > .fill-4\@xl, .flex\@xs > .fill-4\@xl, .flex\@sm > .fill-4\@xl, .flex\@md > .fill-4\@xl, .flex\@lg > .fill-4\@xl, .flex\@xl > .fill-4\@xl, .flex\@2xl > .fill-4\@xl {
-    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 3));
+    flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
   }
   .flex > .order-4\@xl, .flex\@xs > .order-4\@xl, .flex\@sm > .order-4\@xl, .flex\@md > .order-4\@xl, .flex\@lg > .order-4\@xl, .flex\@xl > .order-4\@xl, .flex\@2xl > .order-4\@xl {
     order: 4;
   }
   .flex > .fill-5\@xl, .flex\@xs > .fill-5\@xl, .flex\@sm > .fill-5\@xl, .flex\@md > .fill-5\@xl, .flex\@lg > .fill-5\@xl, .flex\@xl > .fill-5\@xl, .flex\@2xl > .fill-5\@xl {
-    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 2.4));
+    flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
   }
   .flex > .order-5\@xl, .flex\@xs > .order-5\@xl, .flex\@sm > .order-5\@xl, .flex\@md > .order-5\@xl, .flex\@lg > .order-5\@xl, .flex\@xl > .order-5\@xl, .flex\@2xl > .order-5\@xl {
     order: 5;
   }
   .flex > .fill-6\@xl, .flex\@xs > .fill-6\@xl, .flex\@sm > .fill-6\@xl, .flex\@md > .fill-6\@xl, .flex\@lg > .fill-6\@xl, .flex\@xl > .fill-6\@xl, .flex\@2xl > .fill-6\@xl {
-    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 2));
+    flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
   }
   .flex > .order-6\@xl, .flex\@xs > .order-6\@xl, .flex\@sm > .order-6\@xl, .flex\@md > .order-6\@xl, .flex\@lg > .order-6\@xl, .flex\@xl > .order-6\@xl, .flex\@2xl > .order-6\@xl {
     order: 6;
   }
   .flex > .fill-7\@xl, .flex\@xs > .fill-7\@xl, .flex\@sm > .fill-7\@xl, .flex\@md > .fill-7\@xl, .flex\@lg > .fill-7\@xl, .flex\@xl > .fill-7\@xl, .flex\@2xl > .fill-7\@xl {
-    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 1.7142857143));
+    flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
   }
   .flex > .order-7\@xl, .flex\@xs > .order-7\@xl, .flex\@sm > .order-7\@xl, .flex\@md > .order-7\@xl, .flex\@lg > .order-7\@xl, .flex\@xl > .order-7\@xl, .flex\@2xl > .order-7\@xl {
     order: 7;
   }
   .flex > .fill-8\@xl, .flex\@xs > .fill-8\@xl, .flex\@sm > .fill-8\@xl, .flex\@md > .fill-8\@xl, .flex\@lg > .fill-8\@xl, .flex\@xl > .fill-8\@xl, .flex\@2xl > .fill-8\@xl {
-    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 1.5));
+    flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
   }
   .flex > .order-8\@xl, .flex\@xs > .order-8\@xl, .flex\@sm > .order-8\@xl, .flex\@md > .order-8\@xl, .flex\@lg > .order-8\@xl, .flex\@xl > .order-8\@xl, .flex\@2xl > .order-8\@xl {
     order: 8;
   }
   .flex > .fill-9\@xl, .flex\@xs > .fill-9\@xl, .flex\@sm > .fill-9\@xl, .flex\@md > .fill-9\@xl, .flex\@lg > .fill-9\@xl, .flex\@xl > .fill-9\@xl, .flex\@2xl > .fill-9\@xl {
-    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 1.3333333333));
+    flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
   }
   .flex > .order-9\@xl, .flex\@xs > .order-9\@xl, .flex\@sm > .order-9\@xl, .flex\@md > .order-9\@xl, .flex\@lg > .order-9\@xl, .flex\@xl > .order-9\@xl, .flex\@2xl > .order-9\@xl {
     order: 9;
   }
   .flex > .fill-10\@xl, .flex\@xs > .fill-10\@xl, .flex\@sm > .fill-10\@xl, .flex\@md > .fill-10\@xl, .flex\@lg > .fill-10\@xl, .flex\@xl > .fill-10\@xl, .flex\@2xl > .fill-10\@xl {
-    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 1.2));
+    flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
   }
   .flex > .order-10\@xl, .flex\@xs > .order-10\@xl, .flex\@sm > .order-10\@xl, .flex\@md > .order-10\@xl, .flex\@lg > .order-10\@xl, .flex\@xl > .order-10\@xl, .flex\@2xl > .order-10\@xl {
     order: 10;
   }
   .flex > .fill-11\@xl, .flex\@xs > .fill-11\@xl, .flex\@sm > .fill-11\@xl, .flex\@md > .fill-11\@xl, .flex\@lg > .fill-11\@xl, .flex\@xl > .fill-11\@xl, .flex\@2xl > .fill-11\@xl {
-    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 1.0909090909));
+    flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
   }
   .flex > .order-11\@xl, .flex\@xs > .order-11\@xl, .flex\@sm > .order-11\@xl, .flex\@md > .order-11\@xl, .flex\@lg > .order-11\@xl, .flex\@xl > .order-11\@xl, .flex\@2xl > .order-11\@xl {
     order: 11;
   }
   .flex > .fill-12\@xl, .flex\@xs > .fill-12\@xl, .flex\@sm > .fill-12\@xl, .flex\@md > .fill-12\@xl, .flex\@lg > .fill-12\@xl, .flex\@xl > .fill-12\@xl, .flex\@2xl > .fill-12\@xl {
-    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 1));
+    flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
   }
   .flex > .order-12\@xl, .flex\@xs > .order-12\@xl, .flex\@sm > .order-12\@xl, .flex\@md > .order-12\@xl, .flex\@lg > .order-12\@xl, .flex\@xl > .order-12\@xl, .flex\@2xl > .order-12\@xl {
     order: 12;
@@ -1771,73 +1788,73 @@ code {
     align-self: auto;
   }
   .flex > .fill-1\@2xl, .flex\@xs > .fill-1\@2xl, .flex\@sm > .fill-1\@2xl, .flex\@md > .fill-1\@2xl, .flex\@lg > .fill-1\@2xl, .flex\@xl > .fill-1\@2xl, .flex\@2xl > .fill-1\@2xl {
-    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 12));
+    flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
   }
   .flex > .order-1\@2xl, .flex\@xs > .order-1\@2xl, .flex\@sm > .order-1\@2xl, .flex\@md > .order-1\@2xl, .flex\@lg > .order-1\@2xl, .flex\@xl > .order-1\@2xl, .flex\@2xl > .order-1\@2xl {
     order: 1;
   }
   .flex > .fill-2\@2xl, .flex\@xs > .fill-2\@2xl, .flex\@sm > .fill-2\@2xl, .flex\@md > .fill-2\@2xl, .flex\@lg > .fill-2\@2xl, .flex\@xl > .fill-2\@2xl, .flex\@2xl > .fill-2\@2xl {
-    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 6));
+    flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
   }
   .flex > .order-2\@2xl, .flex\@xs > .order-2\@2xl, .flex\@sm > .order-2\@2xl, .flex\@md > .order-2\@2xl, .flex\@lg > .order-2\@2xl, .flex\@xl > .order-2\@2xl, .flex\@2xl > .order-2\@2xl {
     order: 2;
   }
   .flex > .fill-3\@2xl, .flex\@xs > .fill-3\@2xl, .flex\@sm > .fill-3\@2xl, .flex\@md > .fill-3\@2xl, .flex\@lg > .fill-3\@2xl, .flex\@xl > .fill-3\@2xl, .flex\@2xl > .fill-3\@2xl {
-    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 4));
+    flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
   }
   .flex > .order-3\@2xl, .flex\@xs > .order-3\@2xl, .flex\@sm > .order-3\@2xl, .flex\@md > .order-3\@2xl, .flex\@lg > .order-3\@2xl, .flex\@xl > .order-3\@2xl, .flex\@2xl > .order-3\@2xl {
     order: 3;
   }
   .flex > .fill-4\@2xl, .flex\@xs > .fill-4\@2xl, .flex\@sm > .fill-4\@2xl, .flex\@md > .fill-4\@2xl, .flex\@lg > .fill-4\@2xl, .flex\@xl > .fill-4\@2xl, .flex\@2xl > .fill-4\@2xl {
-    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 3));
+    flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
   }
   .flex > .order-4\@2xl, .flex\@xs > .order-4\@2xl, .flex\@sm > .order-4\@2xl, .flex\@md > .order-4\@2xl, .flex\@lg > .order-4\@2xl, .flex\@xl > .order-4\@2xl, .flex\@2xl > .order-4\@2xl {
     order: 4;
   }
   .flex > .fill-5\@2xl, .flex\@xs > .fill-5\@2xl, .flex\@sm > .fill-5\@2xl, .flex\@md > .fill-5\@2xl, .flex\@lg > .fill-5\@2xl, .flex\@xl > .fill-5\@2xl, .flex\@2xl > .fill-5\@2xl {
-    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 2.4));
+    flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
   }
   .flex > .order-5\@2xl, .flex\@xs > .order-5\@2xl, .flex\@sm > .order-5\@2xl, .flex\@md > .order-5\@2xl, .flex\@lg > .order-5\@2xl, .flex\@xl > .order-5\@2xl, .flex\@2xl > .order-5\@2xl {
     order: 5;
   }
   .flex > .fill-6\@2xl, .flex\@xs > .fill-6\@2xl, .flex\@sm > .fill-6\@2xl, .flex\@md > .fill-6\@2xl, .flex\@lg > .fill-6\@2xl, .flex\@xl > .fill-6\@2xl, .flex\@2xl > .fill-6\@2xl {
-    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 2));
+    flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
   }
   .flex > .order-6\@2xl, .flex\@xs > .order-6\@2xl, .flex\@sm > .order-6\@2xl, .flex\@md > .order-6\@2xl, .flex\@lg > .order-6\@2xl, .flex\@xl > .order-6\@2xl, .flex\@2xl > .order-6\@2xl {
     order: 6;
   }
   .flex > .fill-7\@2xl, .flex\@xs > .fill-7\@2xl, .flex\@sm > .fill-7\@2xl, .flex\@md > .fill-7\@2xl, .flex\@lg > .fill-7\@2xl, .flex\@xl > .fill-7\@2xl, .flex\@2xl > .fill-7\@2xl {
-    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 1.7142857143));
+    flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
   }
   .flex > .order-7\@2xl, .flex\@xs > .order-7\@2xl, .flex\@sm > .order-7\@2xl, .flex\@md > .order-7\@2xl, .flex\@lg > .order-7\@2xl, .flex\@xl > .order-7\@2xl, .flex\@2xl > .order-7\@2xl {
     order: 7;
   }
   .flex > .fill-8\@2xl, .flex\@xs > .fill-8\@2xl, .flex\@sm > .fill-8\@2xl, .flex\@md > .fill-8\@2xl, .flex\@lg > .fill-8\@2xl, .flex\@xl > .fill-8\@2xl, .flex\@2xl > .fill-8\@2xl {
-    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 1.5));
+    flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
   }
   .flex > .order-8\@2xl, .flex\@xs > .order-8\@2xl, .flex\@sm > .order-8\@2xl, .flex\@md > .order-8\@2xl, .flex\@lg > .order-8\@2xl, .flex\@xl > .order-8\@2xl, .flex\@2xl > .order-8\@2xl {
     order: 8;
   }
   .flex > .fill-9\@2xl, .flex\@xs > .fill-9\@2xl, .flex\@sm > .fill-9\@2xl, .flex\@md > .fill-9\@2xl, .flex\@lg > .fill-9\@2xl, .flex\@xl > .fill-9\@2xl, .flex\@2xl > .fill-9\@2xl {
-    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 1.3333333333));
+    flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
   }
   .flex > .order-9\@2xl, .flex\@xs > .order-9\@2xl, .flex\@sm > .order-9\@2xl, .flex\@md > .order-9\@2xl, .flex\@lg > .order-9\@2xl, .flex\@xl > .order-9\@2xl, .flex\@2xl > .order-9\@2xl {
     order: 9;
   }
   .flex > .fill-10\@2xl, .flex\@xs > .fill-10\@2xl, .flex\@sm > .fill-10\@2xl, .flex\@md > .fill-10\@2xl, .flex\@lg > .fill-10\@2xl, .flex\@xl > .fill-10\@2xl, .flex\@2xl > .fill-10\@2xl {
-    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 1.2));
+    flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
   }
   .flex > .order-10\@2xl, .flex\@xs > .order-10\@2xl, .flex\@sm > .order-10\@2xl, .flex\@md > .order-10\@2xl, .flex\@lg > .order-10\@2xl, .flex\@xl > .order-10\@2xl, .flex\@2xl > .order-10\@2xl {
     order: 10;
   }
   .flex > .fill-11\@2xl, .flex\@xs > .fill-11\@2xl, .flex\@sm > .fill-11\@2xl, .flex\@md > .fill-11\@2xl, .flex\@lg > .fill-11\@2xl, .flex\@xl > .fill-11\@2xl, .flex\@2xl > .fill-11\@2xl {
-    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 1.0909090909));
+    flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
   }
   .flex > .order-11\@2xl, .flex\@xs > .order-11\@2xl, .flex\@sm > .order-11\@2xl, .flex\@md > .order-11\@2xl, .flex\@lg > .order-11\@2xl, .flex\@xl > .order-11\@2xl, .flex\@2xl > .order-11\@2xl {
     order: 11;
   }
   .flex > .fill-12\@2xl, .flex\@xs > .fill-12\@2xl, .flex\@sm > .fill-12\@2xl, .flex\@md > .fill-12\@2xl, .flex\@lg > .fill-12\@2xl, .flex\@xl > .fill-12\@2xl, .flex\@2xl > .fill-12\@2xl {
-    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 1));
+    flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
   }
   .flex > .order-12\@2xl, .flex\@xs > .order-12\@2xl, .flex\@sm > .order-12\@2xl, .flex\@md > .order-12\@2xl, .flex\@lg > .order-12\@2xl, .flex\@xl > .order-12\@2xl, .flex\@2xl > .order-12\@2xl {
     order: 12;
@@ -3155,6 +3172,229 @@ code {
     place-items: stretch;
   }
 }
+.container-inline-size {
+  container-type: inline-size;
+}
+
+.container-size {
+  container-type: size;
+}
+
+.container-main {
+  container-name: "main";
+}
+
+.container-sidebar {
+  container-name: "sidebar";
+}
+
+.container-card {
+  container-name: "card";
+}
+
+.container-section {
+  container-name: "section";
+}
+
+:root {
+  --tooltip-bg: rgba(17 17 17 / 90%);
+  --tooltip-shadow-color: rgb(0 0 0 / 20%);
+  --tooltip-text-color: #fff;
+  --microtip-transition-duration: 0.18s;
+  --microtip-transition-easing: ease-in-out;
+  --microtip-transition-delay: 0s;
+  --microtip-font-size: 13px;
+  --microtip-font-weight: normal;
+  --microtip-text-transform: none;
+  --tooltip-small-width: 80px;
+  --tooltip-medium-width: 150px;
+  --tooltip-large-width: 260px;
+  --tooltip-border-radius: 4px;
+}
+
+[data-tooltip][role~=tooltip] {
+  position: relative;
+}
+[data-tooltip][role~=tooltip]::before, [data-tooltip][role~=tooltip]::after {
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  will-change: transform;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay), transform var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay);
+  position: absolute;
+  box-sizing: border-box;
+  z-index: 10;
+  transform-origin: top;
+}
+[data-tooltip][role~=tooltip]::before {
+  background-size: 100% auto !important;
+  content: "";
+}
+[data-tooltip][role~=tooltip]::after {
+  background: var(--tooltip-bg);
+  box-shadow: 0 3px 7px var(--tooltip-shadow-color);
+  border-radius: var(--tooltip-border-radius);
+  color: var(--tooltip-text-color);
+  content: attr(data-tooltip);
+  font-size: var(--microtip-font-size);
+  font-weight: var(--microtip-font-weight);
+  text-transform: var(--microtip-text-transform);
+  padding: 0.5em 1em;
+  white-space: nowrap;
+  box-sizing: content-box;
+}
+[data-tooltip][role~=tooltip]:hover::before, [data-tooltip][role~=tooltip]:hover::after, [data-tooltip][role~=tooltip]:focus::before, [data-tooltip][role~=tooltip]:focus::after {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+[role~=tooltip][data-microtip-position|=top]::before {
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+  border-top: 6px solid var(--tooltip-bg);
+  height: 0;
+  width: 0;
+  margin-bottom: 6px;
+  transform: translate3d(-50%, 0, 0);
+  bottom: 100%;
+  left: 50%;
+  z-index: 999;
+}
+[role~=tooltip][data-microtip-position|=top]::after {
+  margin-bottom: 11px;
+  transform: translate3d(-50%, 0, 0);
+  bottom: 100%;
+  left: 50%;
+}
+[role~=tooltip][data-microtip-position|=top]:hover::before {
+  transform: translate3d(-50%, -5px, 0);
+}
+[role~=tooltip][data-microtip-position|=top]:hover::after {
+  transform: translate3d(-50%, -5px, 0);
+}
+
+[role~=tooltip][data-microtip-position=top-left]::after {
+  transform: translate3d(calc(-100% + 16px), 0, 0);
+  bottom: 100%;
+}
+[role~=tooltip][data-microtip-position=top-left]:hover::after {
+  transform: translate3d(calc(-100% + 16px), -5px, 0);
+}
+
+[role~=tooltip][data-microtip-position=top-right]::after {
+  transform: translate3d(calc(0% - 16px), 0, 0);
+  bottom: 100%;
+}
+[role~=tooltip][data-microtip-position=top-right]:hover::after {
+  transform: translate3d(calc(0% - 16px), -5px, 0);
+}
+
+[role~=tooltip][data-microtip-position|=bottom]::before {
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+  border-bottom: 6px solid var(--tooltip-bg);
+  height: 0;
+  width: 0;
+  margin-top: 5px;
+  margin-bottom: 0;
+  transform: translate3d(-50%, -10px, 0);
+  bottom: auto;
+  left: 50%;
+  top: 100%;
+  z-index: 999;
+}
+[role~=tooltip][data-microtip-position|=bottom]::after {
+  margin-top: 11px;
+  transform: translate3d(-50%, -10px, 0);
+  top: 100%;
+  left: 50%;
+}
+[role~=tooltip][data-microtip-position|=bottom]:hover::before {
+  transform: translate3d(-50%, 0, 0);
+}
+[role~=tooltip][data-microtip-position|=bottom]:hover::after {
+  transform: translate3d(-50%, 0, 0);
+}
+
+[role~=tooltip][data-microtip-position=bottom-left]::after {
+  transform: translate3d(calc(-100% + 16px), -10px, 0);
+  top: 100%;
+}
+[role~=tooltip][data-microtip-position=bottom-left]:hover::after {
+  transform: translate3d(calc(-100% + 16px), 0, 0);
+}
+
+[role~=tooltip][data-microtip-position=bottom-right]::after {
+  transform: translate3d(calc(0% - 16px), -10px, 0);
+  top: 100%;
+}
+[role~=tooltip][data-microtip-position=bottom-right]:hover::after {
+  transform: translate3d(calc(0% - 16px), 0, 0);
+}
+
+[role~=tooltip][data-microtip-position=left]::before, [role~=tooltip][data-microtip-position=left]::after {
+  inset: auto auto auto 100%;
+  left: auto;
+  right: 100%;
+  top: 50%;
+  transform: translate3d(10px, -50%, 0);
+}
+[role~=tooltip][data-microtip-position=left]::before {
+  border-top: 9px solid transparent;
+  border-bottom: 9px solid transparent;
+  border-left: 6px solid var(--tooltip-bg);
+  height: 0;
+  width: 0;
+  margin-right: 5px;
+  margin-bottom: 0;
+  z-index: 999;
+}
+[role~=tooltip][data-microtip-position=left]::after {
+  margin-right: 11px;
+}
+[role~=tooltip][data-microtip-position=left]:hover::before, [role~=tooltip][data-microtip-position=left]:hover::after {
+  transform: translate3d(0, -50%, 0);
+}
+
+[role~=tooltip][data-microtip-position=right]::before, [role~=tooltip][data-microtip-position=right]::after {
+  bottom: auto;
+  left: 100%;
+  top: 50%;
+  transform: translate3d(-10px, -50%, 0);
+}
+[role~=tooltip][data-microtip-position=right]::before {
+  border-top: 9px solid transparent;
+  border-bottom: 9px solid transparent;
+  border-right: 6px solid var(--tooltip-bg);
+  height: 0;
+  width: 0;
+  margin-bottom: 0;
+  margin-left: 5px;
+  z-index: 999;
+}
+[role~=tooltip][data-microtip-position=right]::after {
+  margin-left: 11px;
+}
+[role~=tooltip][data-microtip-position=right]:hover::before, [role~=tooltip][data-microtip-position=right]:hover::after {
+  transform: translate3d(0, -50%, 0);
+}
+
+[role~=tooltip][data-microtip-size=small]::after {
+  white-space: initial;
+  width: var(--tooltip-small-width);
+}
+
+[role~=tooltip][data-microtip-size=medium]::after {
+  white-space: initial;
+  width: var(--tooltip-medium-width);
+}
+
+[role~=tooltip][data-microtip-size=large]::after {
+  white-space: initial;
+  width: var(--tooltip-large-width);
+}
+
 .opacity-0,
 .hover\:opacity-0:hover,
 .focus\:opacity-0:focus,
@@ -5875,43 +6115,43 @@ code {
 }
 
 .rounded-full {
-  border-radius: 50%;
+  border-radius: 99in;
 }
 
 .rounded-t-full {
-  border-top-left-radius: 50%;
-  border-top-right-radius: 50%;
+  border-top-left-radius: 99in;
+  border-top-right-radius: 99in;
 }
 
 .rounded-r-full {
-  border-top-right-radius: 50%;
-  border-bottom-right-radius: 50%;
+  border-top-right-radius: 99in;
+  border-bottom-right-radius: 99in;
 }
 
 .rounded-b-full {
-  border-bottom-left-radius: 50%;
-  border-bottom-right-radius: 50%;
+  border-bottom-left-radius: 99in;
+  border-bottom-right-radius: 99in;
 }
 
 .rounded-l-full {
-  border-top-left-radius: 50%;
-  border-bottom-left-radius: 50%;
+  border-top-left-radius: 99in;
+  border-bottom-left-radius: 99in;
 }
 
 .rounded-tl-full {
-  border-top-left-radius: 50%;
+  border-top-left-radius: 99in;
 }
 
 .rounded-tr-full {
-  border-top-right-radius: 50%;
+  border-top-right-radius: 99in;
 }
 
 .rounded-br-full {
-  border-bottom-right-radius: 50%;
+  border-bottom-right-radius: 99in;
 }
 
 .rounded-bl-full {
-  border-bottom-left-radius: 50%;
+  border-bottom-left-radius: 99in;
 }
 
 .rounded-none {
@@ -5963,7 +6203,7 @@ code {
 .active\:border-solid:active,
 .focus\:border-solid:focus,
 .group:hover .group-hover\:border-solid {
-  border-style: solid;
+  --border-style: solid;
 }
 
 .border-dashed,
@@ -5971,7 +6211,7 @@ code {
 .active\:border-dashed:active,
 .focus\:border-dashed:focus,
 .group:hover .group-hover\:border-dashed {
-  border-style: dashed;
+  --border-style: dashed;
 }
 
 .border-dotted,
@@ -5979,7 +6219,7 @@ code {
 .active\:border-dotted:active,
 .focus\:border-dotted:focus,
 .group:hover .group-hover\:border-dotted {
-  border-style: dotted;
+  --border-style: dotted;
 }
 
 .border-double,
@@ -5987,7 +6227,7 @@ code {
 .active\:border-double:active,
 .focus\:border-double:focus,
 .group:hover .group-hover\:border-double {
-  border-style: double;
+  --border-style: double;
 }
 
 .border-none,
@@ -5995,7 +6235,7 @@ code {
 .active\:border-none:active,
 .focus\:border-none:focus,
 .group:hover .group-hover\:border-none {
-  border-style: none;
+  --border-style: none;
 }
 
 .border-primary,
@@ -6004,6 +6244,7 @@ code {
 .focus\:border-primary:focus,
 .group:hover .group-hover\:border-primary {
   border-color: var(--primary);
+  --border-color: var(--primary);
 }
 
 .border-secondary,
@@ -6012,6 +6253,7 @@ code {
 .focus\:border-secondary:focus,
 .group:hover .group-hover\:border-secondary {
   border-color: var(--secondary);
+  --border-color: var(--secondary);
 }
 
 .border-success,
@@ -6020,6 +6262,7 @@ code {
 .focus\:border-success:focus,
 .group:hover .group-hover\:border-success {
   border-color: var(--success);
+  --border-color: var(--success);
 }
 
 .border-danger,
@@ -6028,6 +6271,7 @@ code {
 .focus\:border-danger:focus,
 .group:hover .group-hover\:border-danger {
   border-color: var(--danger);
+  --border-color: var(--danger);
 }
 
 .border-warning,
@@ -6036,6 +6280,7 @@ code {
 .focus\:border-warning:focus,
 .group:hover .group-hover\:border-warning {
   border-color: var(--warning);
+  --border-color: var(--warning);
 }
 
 .border-info,
@@ -6044,6 +6289,7 @@ code {
 .focus\:border-info:focus,
 .group:hover .group-hover\:border-info {
   border-color: var(--info);
+  --border-color: var(--info);
 }
 
 .border-gray,
@@ -6052,6 +6298,7 @@ code {
 .focus\:border-gray:focus,
 .group:hover .group-hover\:border-gray {
   border-color: var(--gray);
+  --border-color: var(--gray);
 }
 
 .border-red,
@@ -6060,6 +6307,7 @@ code {
 .focus\:border-red:focus,
 .group:hover .group-hover\:border-red {
   border-color: var(--red);
+  --border-color: var(--red);
 }
 
 .border-blue,
@@ -6068,6 +6316,7 @@ code {
 .focus\:border-blue:focus,
 .group:hover .group-hover\:border-blue {
   border-color: var(--blue);
+  --border-color: var(--blue);
 }
 
 .border-green,
@@ -6076,6 +6325,7 @@ code {
 .focus\:border-green:focus,
 .group:hover .group-hover\:border-green {
   border-color: var(--green);
+  --border-color: var(--green);
 }
 
 .border-yellow,
@@ -6084,6 +6334,7 @@ code {
 .focus\:border-yellow:focus,
 .group:hover .group-hover\:border-yellow {
   border-color: var(--yellow);
+  --border-color: var(--yellow);
 }
 
 .border-purple,
@@ -6092,6 +6343,7 @@ code {
 .focus\:border-purple:focus,
 .group:hover .group-hover\:border-purple {
   border-color: var(--purple);
+  --border-color: var(--purple);
 }
 
 .border-pink,
@@ -6100,6 +6352,7 @@ code {
 .focus\:border-pink:focus,
 .group:hover .group-hover\:border-pink {
   border-color: var(--pink);
+  --border-color: var(--pink);
 }
 
 .border-black,
@@ -6108,6 +6361,7 @@ code {
 .focus\:border-black:focus,
 .group:hover .group-hover\:border-black {
   border-color: var(--black);
+  --border-color: var(--black);
 }
 
 .border-white,
@@ -6116,6 +6370,7 @@ code {
 .focus\:border-white:focus,
 .group:hover .group-hover\:border-white {
   border-color: var(--white);
+  --border-color: var(--white);
 }
 
 .border-transparent,
@@ -6124,6 +6379,7 @@ code {
 .focus\:border-transparent:focus,
 .group:hover .group-hover\:border-transparent {
   border-color: var(--transparent);
+  --border-color: var(--transparent);
 }
 
 @media (min-width: 480px) {
@@ -6202,7 +6458,7 @@ code {
     border-radius: 1.25rem;
   }
   .rounded-full\@xs {
-    border-radius: 50%;
+    border-radius: 99in;
   }
   .rounded-none\@xs {
     border-radius: 0px;
@@ -6293,7 +6549,7 @@ code {
     border-radius: 1.25rem;
   }
   .rounded-full\@sm {
-    border-radius: 50%;
+    border-radius: 99in;
   }
   .rounded-none\@sm {
     border-radius: 0px;
@@ -6384,7 +6640,7 @@ code {
     border-radius: 1.25rem;
   }
   .rounded-full\@md {
-    border-radius: 50%;
+    border-radius: 99in;
   }
   .rounded-none\@md {
     border-radius: 0px;
@@ -6475,7 +6731,7 @@ code {
     border-radius: 1.25rem;
   }
   .rounded-full\@lg {
-    border-radius: 50%;
+    border-radius: 99in;
   }
   .rounded-none\@lg {
     border-radius: 0px;
@@ -6566,7 +6822,7 @@ code {
     border-radius: 1.25rem;
   }
   .rounded-full\@xl {
-    border-radius: 50%;
+    border-radius: 99in;
   }
   .rounded-none\@xl {
     border-radius: 0px;
@@ -6657,7 +6913,7 @@ code {
     border-radius: 1.25rem;
   }
   .rounded-full\@2xl {
-    border-radius: 50%;
+    border-radius: 99in;
   }
   .rounded-none\@2xl {
     border-radius: 0px;
@@ -6672,30 +6928,6 @@ code {
     border-radius: 9999px;
   }
 }
-.container-inline-size {
-  container-type: inline-size;
-}
-
-.container-size {
-  container-type: size;
-}
-
-.container-main {
-  container-name: "main";
-}
-
-.container-sidebar {
-  container-name: "sidebar";
-}
-
-.container-card {
-  container-name: "card";
-}
-
-.container-section {
-  container-name: "section";
-}
-
 .cursor-auto {
   cursor: auto;
 }
@@ -14933,193 +15165,6 @@ code {
     max-height: 16rem;
   }
 }
-:root {
-  --tooltip-bg: rgba(17 17 17 / 90%);
-  --tooltip-shadow-color: rgb(0 0 0 / 20%);
-  --tooltip-text-color: #fff;
-  --microtip-transition-duration: 0.18s;
-  --microtip-transition-easing: ease-in-out;
-  --microtip-transition-delay: 0s;
-  --microtip-font-size: 13px;
-  --microtip-font-weight: normal;
-  --microtip-text-transform: none;
-  --tooltip-small-width: 80px;
-  --tooltip-medium-width: 150px;
-  --tooltip-large-width: 260px;
-  --tooltip-border-radius: 4px;
-}
-
-[data-tooltip][role~=tooltip] {
-  position: relative;
-}
-[data-tooltip][role~=tooltip]::before, [data-tooltip][role~=tooltip]::after {
-  transform: translate3d(0, 0, 0);
-  backface-visibility: hidden;
-  will-change: transform;
-  opacity: 0;
-  pointer-events: none;
-  transition: all var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay);
-  position: absolute;
-  box-sizing: border-box;
-  z-index: 10;
-  transform-origin: top;
-}
-[data-tooltip][role~=tooltip]::before {
-  background-size: 100% auto !important;
-  content: "";
-}
-[data-tooltip][role~=tooltip]::after {
-  background: var(--tooltip-bg);
-  box-shadow: 0 3px 7px var(--tooltip-shadow-color);
-  border-radius: var(--tooltip-border-radius);
-  color: var(--tooltip-text-color);
-  content: attr(data-tooltip);
-  font-size: var(--microtip-font-size);
-  font-weight: var(--microtip-font-weight);
-  text-transform: var(--microtip-text-transform);
-  padding: 0.5em 1em;
-  white-space: nowrap;
-  box-sizing: content-box;
-}
-[data-tooltip][role~=tooltip]:hover::before, [data-tooltip][role~=tooltip]:hover::after, [data-tooltip][role~=tooltip]:focus::before, [data-tooltip][role~=tooltip]:focus::after {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-[role~=tooltip][data-microtip-position|=top]::before {
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-  height: 6px;
-  width: 18px;
-  margin-bottom: 6px;
-  transform: translate3d(-50%, 0, 0);
-  bottom: 100%;
-  left: 50%;
-}
-[role~=tooltip][data-microtip-position|=top]::after {
-  margin-bottom: 11px;
-  transform: translate3d(-50%, 0, 0);
-  bottom: 100%;
-  left: 50%;
-}
-[role~=tooltip][data-microtip-position|=top]:hover::before {
-  transform: translate3d(-50%, -5px, 0);
-}
-[role~=tooltip][data-microtip-position|=top]:hover::after {
-  transform: translate3d(-50%, -5px, 0);
-}
-
-[role~=tooltip][data-microtip-position=top-left]::after {
-  transform: translate3d(calc(-100% + 16px), 0, 0);
-  bottom: 100%;
-}
-[role~=tooltip][data-microtip-position=top-left]:hover::after {
-  transform: translate3d(calc(-100% + 16px), -5px, 0);
-}
-
-[role~=tooltip][data-microtip-position=top-right]::after {
-  transform: translate3d(calc(0% - 16px), 0, 0);
-  bottom: 100%;
-}
-[role~=tooltip][data-microtip-position=top-right]:hover::after {
-  transform: translate3d(calc(0% - 16px), -5px, 0);
-}
-
-[role~=tooltip][data-microtip-position|=bottom]::before {
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-  height: 6px;
-  width: 18px;
-  margin-top: 5px;
-  margin-bottom: 0;
-  transform: translate3d(-50%, -10px, 0);
-  bottom: auto;
-  left: 50%;
-  top: 100%;
-}
-[role~=tooltip][data-microtip-position|=bottom]::after {
-  margin-top: 11px;
-  transform: translate3d(-50%, -10px, 0);
-  top: 100%;
-  left: 50%;
-}
-[role~=tooltip][data-microtip-position|=bottom]:hover::before {
-  transform: translate3d(-50%, 0, 0);
-}
-[role~=tooltip][data-microtip-position|=bottom]:hover::after {
-  transform: translate3d(-50%, 0, 0);
-}
-
-[role~=tooltip][data-microtip-position=bottom-left]::after {
-  transform: translate3d(calc(-100% + 16px), -10px, 0);
-  top: 100%;
-}
-[role~=tooltip][data-microtip-position=bottom-left]:hover::after {
-  transform: translate3d(calc(-100% + 16px), 0, 0);
-}
-
-[role~=tooltip][data-microtip-position=bottom-right]::after {
-  transform: translate3d(calc(0% - 16px), -10px, 0);
-  top: 100%;
-}
-[role~=tooltip][data-microtip-position=bottom-right]:hover::after {
-  transform: translate3d(calc(0% - 16px), 0, 0);
-}
-
-[role~=tooltip][data-microtip-position=left]::before, [role~=tooltip][data-microtip-position=left]::after {
-  inset: auto auto auto 100%;
-  left: auto;
-  right: 100%;
-  top: 50%;
-  transform: translate3d(10px, -50%, 0);
-}
-[role~=tooltip][data-microtip-position=left]::before {
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-  height: 18px;
-  width: 6px;
-  margin-right: 5px;
-  margin-bottom: 0;
-}
-[role~=tooltip][data-microtip-position=left]::after {
-  margin-right: 11px;
-}
-[role~=tooltip][data-microtip-position=left]:hover::before, [role~=tooltip][data-microtip-position=left]:hover::after {
-  transform: translate3d(0, -50%, 0);
-}
-
-[role~=tooltip][data-microtip-position=right]::before, [role~=tooltip][data-microtip-position=right]::after {
-  bottom: auto;
-  left: 100%;
-  top: 50%;
-  transform: translate3d(-10px, -50%, 0);
-}
-[role~=tooltip][data-microtip-position=right]::before {
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-  height: 18px;
-  width: 6px;
-  margin-bottom: 0;
-  margin-left: 5px;
-}
-[role~=tooltip][data-microtip-position=right]::after {
-  margin-left: 11px;
-}
-[role~=tooltip][data-microtip-position=right]:hover::before, [role~=tooltip][data-microtip-position=right]:hover::after {
-  transform: translate3d(0, -50%, 0);
-}
-
-[role~=tooltip][data-microtip-size=small]::after {
-  white-space: initial;
-  width: var(--tooltip-small-width);
-}
-
-[role~=tooltip][data-microtip-size=medium]::after {
-  white-space: initial;
-  width: var(--tooltip-medium-width);
-}
-
-[role~=tooltip][data-microtip-size=large]::after {
-  white-space: initial;
-  width: var(--tooltip-large-width);
-}
-
 .translate-x-0,
 .hover\:translate-x-0:hover,
 .group:hover .group-hover\:translate-x-0 {
@@ -23019,6 +23064,7 @@ code {
 
 .gap-y-0 {
   row-gap: 0px;
+  --flex-gap: 0px;
 }
 
 .space-x-0 > * + * {
@@ -23111,6 +23157,7 @@ code {
 
 .gap-y-1 {
   row-gap: 0.25rem;
+  --flex-gap: 0.25rem;
 }
 
 .space-x-1 > * + * {
@@ -23203,6 +23250,7 @@ code {
 
 .gap-y-2 {
   row-gap: 0.5rem;
+  --flex-gap: 0.5rem;
 }
 
 .space-x-2 > * + * {
@@ -23295,6 +23343,7 @@ code {
 
 .gap-y-3 {
   row-gap: 0.75rem;
+  --flex-gap: 0.75rem;
 }
 
 .space-x-3 > * + * {
@@ -23387,6 +23436,7 @@ code {
 
 .gap-y-4 {
   row-gap: 1rem;
+  --flex-gap: 1rem;
 }
 
 .space-x-4 > * + * {
@@ -23479,6 +23529,7 @@ code {
 
 .gap-y-5 {
   row-gap: 1.25rem;
+  --flex-gap: 1.25rem;
 }
 
 .space-x-5 > * + * {
@@ -23571,6 +23622,7 @@ code {
 
 .gap-y-6 {
   row-gap: 1.5rem;
+  --flex-gap: 1.5rem;
 }
 
 .space-x-6 > * + * {
@@ -23663,6 +23715,7 @@ code {
 
 .gap-y-8 {
   row-gap: 2rem;
+  --flex-gap: 2rem;
 }
 
 .space-x-8 > * + * {
@@ -23755,6 +23808,7 @@ code {
 
 .gap-y-10 {
   row-gap: 2.5rem;
+  --flex-gap: 2.5rem;
 }
 
 .space-x-10 > * + * {
@@ -23847,6 +23901,7 @@ code {
 
 .gap-y-12 {
   row-gap: 3rem;
+  --flex-gap: 3rem;
 }
 
 .space-x-12 > * + * {
@@ -23939,6 +23994,7 @@ code {
 
 .gap-y-16 {
   row-gap: 4rem;
+  --flex-gap: 4rem;
 }
 
 .space-x-16 > * + * {
@@ -24031,6 +24087,7 @@ code {
 
 .gap-y-20 {
   row-gap: 5rem;
+  --flex-gap: 5rem;
 }
 
 .space-x-20 > * + * {
@@ -24123,6 +24180,7 @@ code {
 
 .gap-y-24 {
   row-gap: 6rem;
+  --flex-gap: 6rem;
 }
 
 .space-x-24 > * + * {
@@ -24215,6 +24273,7 @@ code {
 
 .gap-y-32 {
   row-gap: 8rem;
+  --flex-gap: 8rem;
 }
 
 .space-x-32 > * + * {
@@ -24307,6 +24366,7 @@ code {
 
 .gap-y-40 {
   row-gap: 10rem;
+  --flex-gap: 10rem;
 }
 
 .space-x-40 > * + * {
@@ -24399,6 +24459,7 @@ code {
 
 .gap-y-48 {
   row-gap: 12rem;
+  --flex-gap: 12rem;
 }
 
 .space-x-48 > * + * {
@@ -24491,6 +24552,7 @@ code {
 
 .gap-y-56 {
   row-gap: 14rem;
+  --flex-gap: 14rem;
 }
 
 .space-x-56 > * + * {
@@ -24583,6 +24645,7 @@ code {
 
 .gap-y-64 {
   row-gap: 16rem;
+  --flex-gap: 16rem;
 }
 
 .space-x-64 > * + * {
@@ -32176,9 +32239,9 @@ code {
 }
 
 .animate-shake {
-  animation: anim-shake-strip-unit(5px) 0.5s ease-in-out 1;
+  animation: anim-shake-5 0.5s ease-in-out 1;
 }
-@keyframes anim-shake-strip-unit(5px) {
+@keyframes anim-shake-5 {
   0%, 100% {
     transform: translateX(0);
   }
@@ -32213,7 +32276,7 @@ code {
     animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
   }
   .animate-shake\@xs {
-    animation: anim-shake-strip-unit(5px) 0.5s ease-in-out 1;
+    animation: anim-shake-5 0.5s ease-in-out 1;
   }
 }
 @media (min-width: 640px) {
@@ -32239,7 +32302,7 @@ code {
     animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
   }
   .animate-shake\@sm {
-    animation: anim-shake-strip-unit(5px) 0.5s ease-in-out 1;
+    animation: anim-shake-5 0.5s ease-in-out 1;
   }
 }
 @media (min-width: 768px) {
@@ -32265,7 +32328,7 @@ code {
     animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
   }
   .animate-shake\@md {
-    animation: anim-shake-strip-unit(5px) 0.5s ease-in-out 1;
+    animation: anim-shake-5 0.5s ease-in-out 1;
   }
 }
 @media (min-width: 1024px) {
@@ -32291,7 +32354,7 @@ code {
     animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
   }
   .animate-shake\@lg {
-    animation: anim-shake-strip-unit(5px) 0.5s ease-in-out 1;
+    animation: anim-shake-5 0.5s ease-in-out 1;
   }
 }
 @media (min-width: 1280px) {
@@ -32317,7 +32380,7 @@ code {
     animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
   }
   .animate-shake\@xl {
-    animation: anim-shake-strip-unit(5px) 0.5s ease-in-out 1;
+    animation: anim-shake-5 0.5s ease-in-out 1;
   }
 }
 @media (min-width: 1536px) {
@@ -32343,7 +32406,7 @@ code {
     animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
   }
   .animate-shake\@2xl {
-    animation: anim-shake-strip-unit(5px) 0.5s ease-in-out 1;
+    animation: anim-shake-5 0.5s ease-in-out 1;
   }
 }
 .hover-ready {
@@ -34821,6 +34884,7 @@ code {
   --black: #000;
   --white: #fff;
   --transparent: transparent;
+  --button-text-color: ;
   --button-bg-color: var(--primary);
   --button-bg-color-hover: var(--primary-600);
   --link-color: var(--primary);
@@ -34849,16 +34913,34 @@ code {
   --button-bg-color-hover: var(--primary-400);
   --link-color: var(--primary);
   --link-hover-color: var(--primary-400);
-  scrollbar-color: #555 var(--background);
-}
-[data-theme=dark]::-webkit-scrollbar-track {
-  background: var(--background);
-}
-[data-theme=dark]::-webkit-scrollbar-thumb {
-  background-color: #555;
-  border: 3px solid var(--background);
 }
 
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :not([data-theme]) {
+    --bg-base: #1a1a1a;
+    --inverted-bg-base: #fbfafc;
+    --bg-alternate: #f1f1f1;
+    --inverted-bg-alternate: #1a1a1a;
+    --bg-surface: #2e2e2e;
+    --inverted-bg-surface: #fff;
+    --border-base: #2e2e2e;
+    --inverted-border-base: #d3d5d9;
+    --text-color: #f1f1f1;
+    --inverted-text-color: #1a1a1a;
+    --text-muted: rgba(241, 241, 241, 0.5411764706);
+    --inverted-text-muted: rgba(26, 26, 26, 0.5411764706);
+    --text-subtle: rgba(241, 241, 241, 0.3137254902);
+    --inverted-text-subtle: rgba(26, 26, 26, 0.3137254902);
+    --text-inverted: #1a1a1a;
+    --inverted-text-inverted: #f1f1f1;
+    --button-text-color: ;
+    --button-bg-color: var(--primary);
+    --button-bg-color-hover: var(--primary-400);
+    --link-color: var(--primary);
+    --link-hover-color: var(--primary-400);
+  }
+}
 .text-on-primary-50 {
   color: #1a1a1a;
 }