@flexkit/studio 0.0.36 → 0.1.1

package/dist/index.css

@@ -6,16 +6,41 @@
   :root, :host {
     --fk-color-red-100: oklch(93.6% 0.032 17.717);
     --fk-color-red-400: oklch(70.4% 0.191 22.216);
+    --fk-color-red-500: oklch(63.7% 0.237 25.331);
     --fk-color-red-600: oklch(57.7% 0.245 27.325);
+    --fk-color-red-700: oklch(50.5% 0.213 27.518);
     --fk-color-red-800: oklch(44.4% 0.177 26.899);
+    --fk-color-orange-500: oklch(70.5% 0.213 47.604);
     --fk-color-orange-600: oklch(64.6% 0.222 41.116);
+    --fk-color-orange-700: oklch(55.3% 0.195 38.402);
+    --fk-color-amber-400: oklch(82.8% 0.189 84.429);
+    --fk-color-amber-500: oklch(76.9% 0.188 70.08);
+    --fk-color-amber-600: oklch(66.6% 0.179 58.318);
+    --fk-color-amber-700: oklch(55.5% 0.163 48.998);
     --fk-color-yellow-600: oklch(68.1% 0.162 75.834);
     --fk-color-green-50: oklch(98.2% 0.018 155.826);
     --fk-color-green-600: oklch(62.7% 0.194 149.214);
+    --fk-color-green-700: oklch(52.7% 0.154 150.069);
+    --fk-color-emerald-400: oklch(76.5% 0.177 163.223);
     --fk-color-emerald-500: oklch(69.6% 0.17 162.48);
+    --fk-color-emerald-700: oklch(50.8% 0.118 165.612);
+    --fk-color-teal-100: oklch(95.3% 0.051 180.801);
+    --fk-color-teal-300: oklch(85.5% 0.138 181.071);
     --fk-color-teal-400: oklch(77.7% 0.152 181.912);
+    --fk-color-teal-800: oklch(43.7% 0.078 188.216);
+    --fk-color-teal-950: oklch(27.7% 0.046 192.524);
+    --fk-color-sky-100: oklch(95.1% 0.026 236.824);
+    --fk-color-sky-300: oklch(82.8% 0.111 230.318);
+    --fk-color-sky-800: oklch(44.3% 0.11 240.79);
+    --fk-color-sky-950: oklch(29.3% 0.066 243.157);
+    --fk-color-blue-400: oklch(70.7% 0.165 254.624);
     --fk-color-blue-500: oklch(62.3% 0.214 259.815);
     --fk-color-blue-600: oklch(54.6% 0.245 262.881);
+    --fk-color-blue-700: oklch(48.8% 0.243 264.376);
+    --fk-color-indigo-100: oklch(93% 0.034 272.788);
+    --fk-color-indigo-300: oklch(78.5% 0.115 274.713);
+    --fk-color-indigo-800: oklch(39.8% 0.195 277.366);
+    --fk-color-indigo-950: oklch(25.7% 0.09 281.288);
     --fk-color-pink-500: oklch(65.6% 0.241 354.308);
     --fk-color-pink-600: oklch(59.2% 0.249 0.584);
     --fk-color-pink-800: oklch(45.9% 0.187 3.815);
@@ -26,8 +51,11 @@
     --fk-spacing: 0.25rem;
     --fk-container-xs: 20rem;
     --fk-container-sm: 24rem;
+    --fk-container-md: 28rem;
     --fk-container-lg: 32rem;
+    --fk-container-4xl: 56rem;
     --fk-container-5xl: 64rem;
+    --fk-container-6xl: 72rem;
     --fk-text-xs: 0.75rem;
     --fk-text-xs--line-height: calc(1 / 0.75);
     --fk-text-sm: 0.875rem;
@@ -36,6 +64,8 @@
     --fk-text-base--line-height: calc(1.5 / 1);
     --fk-text-lg: 1.125rem;
     --fk-text-lg--line-height: calc(1.75 / 1.125);
+    --fk-text-xl: 1.25rem;
+    --fk-text-xl--line-height: calc(1.75 / 1.25);
     --fk-text-2xl: 1.5rem;
     --fk-text-2xl--line-height: calc(2 / 1.5);
     --fk-text-4xl: 2.25rem;
@@ -54,6 +84,7 @@
     --fk-leading-normal: 1.5;
     --fk-leading-relaxed: 1.625;
     --fk-radius-xs: 0.125rem;
+    --fk-radius-xl: 0.75rem;
     --fk-drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
     --fk-ease-out: cubic-bezier(0, 0, 0.2, 1);
     --fk-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
@@ -66,6 +97,8 @@
     --fk-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --fk-default-font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --fk-default-mono-font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --fk-animate-roll-up-in: roll-up-in 0.3s ease-out;
+    --fk-animate-roll-up-out: roll-up-out 0.3s ease-out forwards;
   }
 }
 @layer base {
@@ -223,6 +256,12 @@
   .fk\:pointer-events-none {
     pointer-events: none;
   }
+  .fk\:invisible {
+    visibility: hidden;
+  }
+  .fk\:visible {
+    visibility: visible;
+  }
   .fk\:sr-only {
     position: absolute;
     width: 1px;
@@ -261,6 +300,9 @@
   .fk\:top-0\.75 {
     top: calc(var(--fk-spacing) * 0.75);
   }
+  .fk\:top-1 {
+    top: calc(var(--fk-spacing) * 1);
+  }
   .fk\:top-1\.5 {
     top: calc(var(--fk-spacing) * 1.5);
   }
@@ -330,9 +372,15 @@
   .fk\:left-2 {
     left: calc(var(--fk-spacing) * 2);
   }
+  .fk\:left-3 {
+    left: calc(var(--fk-spacing) * 3);
+  }
   .fk\:left-4 {
     left: calc(var(--fk-spacing) * 4);
   }
+  .fk\:left-\[5px\] {
+    left: 5px;
+  }
   .fk\:left-\[50\%\] {
     left: 50%;
   }
@@ -387,6 +435,12 @@
   .fk\:m-0\! {
     margin: calc(var(--fk-spacing) * 0) !important;
   }
+  .fk\:m-1\.5 {
+    margin: calc(var(--fk-spacing) * 1.5);
+  }
+  .fk\:m-auto {
+    margin: auto;
+  }
   .fk\:container {
     margin-inline: auto;
     padding-inline: 2rem;
@@ -400,9 +454,15 @@
   .fk\:-mx-1 {
     margin-inline: calc(var(--fk-spacing) * -1);
   }
+  .fk\:-mx-3 {
+    margin-inline: calc(var(--fk-spacing) * -3);
+  }
   .fk\:mx-2 {
     margin-inline: calc(var(--fk-spacing) * 2);
   }
+  .fk\:mx-3 {
+    margin-inline: calc(var(--fk-spacing) * 3);
+  }
   .fk\:mx-3\.5 {
     margin-inline: calc(var(--fk-spacing) * 3.5);
   }
@@ -1055,6 +1115,9 @@
   .fk\:-mt-2 {
     margin-top: calc(var(--fk-spacing) * -2);
   }
+  .fk\:mt-0 {
+    margin-top: calc(var(--fk-spacing) * 0);
+  }
   .fk\:mt-0\.5 {
     margin-top: calc(var(--fk-spacing) * 0.5);
   }
@@ -1085,6 +1148,9 @@
   .fk\:mt-auto {
     margin-top: auto;
   }
+  .fk\:mt-px {
+    margin-top: 1px;
+  }
   .fk\:-mr-1 {
     margin-right: calc(var(--fk-spacing) * -1);
   }
@@ -1106,6 +1172,12 @@
   .fk\:-mb-px {
     margin-bottom: -1px;
   }
+  .fk\:mb-1 {
+    margin-bottom: calc(var(--fk-spacing) * 1);
+  }
+  .fk\:mb-1\.5 {
+    margin-bottom: calc(var(--fk-spacing) * 1.5);
+  }
   .fk\:mb-2 {
     margin-bottom: calc(var(--fk-spacing) * 2);
   }
@@ -1124,12 +1196,27 @@
   .fk\:mb-10 {
     margin-bottom: calc(var(--fk-spacing) * 10);
   }
+  .fk\:-ml-0\.5 {
+    margin-left: calc(var(--fk-spacing) * -0.5);
+  }
+  .fk\:-ml-0\.75 {
+    margin-left: calc(var(--fk-spacing) * -0.75);
+  }
+  .fk\:-ml-1 {
+    margin-left: calc(var(--fk-spacing) * -1);
+  }
   .fk\:ml-0\! {
     margin-left: calc(var(--fk-spacing) * 0) !important;
   }
+  .fk\:ml-0\.75 {
+    margin-left: calc(var(--fk-spacing) * 0.75);
+  }
   .fk\:ml-1 {
     margin-left: calc(var(--fk-spacing) * 1);
   }
+  .fk\:ml-1\.5 {
+    margin-left: calc(var(--fk-spacing) * 1.5);
+  }
   .fk\:ml-2 {
     margin-left: calc(var(--fk-spacing) * 2);
   }
@@ -1145,6 +1232,18 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
   }
+  .fk\:line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+  .fk\:line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
   .fk\:block {
     display: block;
   }
@@ -1223,6 +1322,10 @@
     width: calc(var(--fk-spacing) * 12);
     height: calc(var(--fk-spacing) * 12);
   }
+  .fk\:size-14 {
+    width: calc(var(--fk-spacing) * 14);
+    height: calc(var(--fk-spacing) * 14);
+  }
   .fk\:size-16 {
     width: calc(var(--fk-spacing) * 16);
     height: calc(var(--fk-spacing) * 16);
@@ -1231,6 +1334,10 @@
     width: calc(var(--fk-spacing) * 24);
     height: calc(var(--fk-spacing) * 24);
   }
+  .fk\:size-\[11px\] {
+    width: 11px;
+    height: 11px;
+  }
   .fk\:size-auto {
     width: auto;
     height: auto;
@@ -1245,12 +1352,18 @@
   .fk\:h-\(--radix-select-trigger-height\) {
     height: var(--radix-select-trigger-height);
   }
+  .fk\:h-0 {
+    height: calc(var(--fk-spacing) * 0);
+  }
   .fk\:h-0\.5 {
     height: calc(var(--fk-spacing) * 0.5);
   }
   .fk\:h-1\.5 {
     height: calc(var(--fk-spacing) * 1.5);
   }
+  .fk\:h-2 {
+    height: calc(var(--fk-spacing) * 2);
+  }
   .fk\:h-2\.5 {
     height: calc(var(--fk-spacing) * 2.5);
   }
@@ -1263,6 +1376,9 @@
   .fk\:h-4 {
     height: calc(var(--fk-spacing) * 4);
   }
+  .fk\:h-4\.75 {
+    height: calc(var(--fk-spacing) * 4.75);
+  }
   .fk\:h-5 {
     height: calc(var(--fk-spacing) * 5);
   }
@@ -1287,6 +1403,9 @@
   .fk\:h-12 {
     height: calc(var(--fk-spacing) * 12);
   }
+  .fk\:h-14 {
+    height: calc(var(--fk-spacing) * 14);
+  }
   .fk\:h-16 {
     height: calc(var(--fk-spacing) * 16);
   }
@@ -1296,9 +1415,15 @@
   .fk\:h-24 {
     height: calc(var(--fk-spacing) * 24);
   }
+  .fk\:h-40 {
+    height: calc(var(--fk-spacing) * 40);
+  }
   .fk\:h-52 {
     height: calc(var(--fk-spacing) * 52);
   }
+  .fk\:h-75 {
+    height: calc(var(--fk-spacing) * 75);
+  }
   .fk\:h-\[17\.5rem\] {
     height: 17.5rem;
   }
@@ -1326,9 +1451,15 @@
   .fk\:h-\[calc\(100vh-10rem\)\] {
     height: calc(100vh - 10rem);
   }
+  .fk\:h-\[min\(85vh\,56rem\)\] {
+    height: min(85vh, 56rem);
+  }
   .fk\:h-auto {
     height: auto;
   }
+  .fk\:h-dvh {
+    height: 100dvh;
+  }
   .fk\:h-full {
     height: 100%;
   }
@@ -1347,12 +1478,27 @@
   .fk\:max-h-55 {
     max-height: calc(var(--fk-spacing) * 55);
   }
+  .fk\:max-h-56 {
+    max-height: calc(var(--fk-spacing) * 56);
+  }
+  .fk\:max-h-64 {
+    max-height: calc(var(--fk-spacing) * 64);
+  }
+  .fk\:max-h-72 {
+    max-height: calc(var(--fk-spacing) * 72);
+  }
   .fk\:max-h-80 {
     max-height: calc(var(--fk-spacing) * 80);
   }
+  .fk\:max-h-\[85vh\] {
+    max-height: 85vh;
+  }
   .fk\:max-h-\[300px\] {
     max-height: 300px;
   }
+  .fk\:max-h-\[320px\] {
+    max-height: 320px;
+  }
   .fk\:max-h-\[330px\] {
     max-height: 330px;
   }
@@ -1362,12 +1508,24 @@
   .fk\:max-h-\[calc\(100\%-3\.5rem\)\] {
     max-height: calc(100% - 3.5rem);
   }
+  .fk\:max-h-full {
+    max-height: 100%;
+  }
+  .fk\:max-h-screen {
+    max-height: 100vh;
+  }
   .fk\:min-h-0 {
     min-height: calc(var(--fk-spacing) * 0);
   }
   .fk\:min-h-4 {
     min-height: calc(var(--fk-spacing) * 4);
   }
+  .fk\:min-h-5 {
+    min-height: calc(var(--fk-spacing) * 5);
+  }
+  .fk\:min-h-8 {
+    min-height: calc(var(--fk-spacing) * 8);
+  }
   .fk\:min-h-9 {
     min-height: calc(var(--fk-spacing) * 9);
   }
@@ -1380,24 +1538,39 @@
   .fk\:min-h-16 {
     min-height: calc(var(--fk-spacing) * 16);
   }
+  .fk\:min-h-48 {
+    min-height: calc(var(--fk-spacing) * 48);
+  }
   .fk\:min-h-\[2\.5rem\] {
     min-height: 2.5rem;
   }
   .fk\:min-h-\[150px\] {
     min-height: 150px;
   }
+  .fk\:min-h-\[160px\] {
+    min-height: 160px;
+  }
+  .fk\:min-h-screen {
+    min-height: 100vh;
+  }
   .fk\:w-\(--cell-size\) {
     width: var(--cell-size);
   }
   .fk\:w-\(--sidebar-width\) {
     width: var(--sidebar-width);
   }
+  .fk\:w-0 {
+    width: calc(var(--fk-spacing) * 0);
+  }
   .fk\:w-1\.5 {
     width: calc(var(--fk-spacing) * 1.5);
   }
   .fk\:w-2\.5 {
     width: calc(var(--fk-spacing) * 2.5);
   }
+  .fk\:w-2\/3 {
+    width: calc(2 / 3 * 100%);
+  }
   .fk\:w-3 {
     width: calc(var(--fk-spacing) * 3);
   }
@@ -1434,15 +1607,33 @@
   .fk\:w-16 {
     width: calc(var(--fk-spacing) * 16);
   }
+  .fk\:w-20 {
+    width: calc(var(--fk-spacing) * 20);
+  }
+  .fk\:w-24 {
+    width: calc(var(--fk-spacing) * 24);
+  }
   .fk\:w-28 {
     width: calc(var(--fk-spacing) * 28);
   }
+  .fk\:w-32 {
+    width: calc(var(--fk-spacing) * 32);
+  }
   .fk\:w-36 {
     width: calc(var(--fk-spacing) * 36);
   }
+  .fk\:w-37\.5 {
+    width: calc(var(--fk-spacing) * 37.5);
+  }
+  .fk\:w-40 {
+    width: calc(var(--fk-spacing) * 40);
+  }
   .fk\:w-44 {
     width: calc(var(--fk-spacing) * 44);
   }
+  .fk\:w-45 {
+    width: calc(var(--fk-spacing) * 45);
+  }
   .fk\:w-48 {
     width: calc(var(--fk-spacing) * 48);
   }
@@ -1467,12 +1658,21 @@
   .fk\:w-72 {
     width: calc(var(--fk-spacing) * 72);
   }
+  .fk\:w-80 {
+    width: calc(var(--fk-spacing) * 80);
+  }
   .fk\:w-\[12rem\] {
     width: 12rem;
   }
   .fk\:w-\[20px\] {
     width: 20px;
   }
+  .fk\:w-\[50\%\] {
+    width: 50%;
+  }
+  .fk\:w-\[75\%\] {
+    width: 75%;
+  }
   .fk\:w-\[90px\] {
     width: 90px;
   }
@@ -1485,12 +1685,21 @@
   .fk\:w-\[150px\] {
     width: 150px;
   }
+  .fk\:w-\[240px\] {
+    width: 240px;
+  }
   .fk\:w-\[350px\] {
     width: 350px;
   }
+  .fk\:w-\[calc\(100\%-0\.75rem\)\] {
+    width: calc(100% - 0.75rem);
+  }
   .fk\:w-auto {
     width: auto;
   }
+  .fk\:w-dvw {
+    width: 100dvw;
+  }
   .fk\:w-fit {
     width: fit-content;
   }
@@ -1506,18 +1715,36 @@
   .fk\:max-w-\(--skeleton-width\) {
     max-width: var(--skeleton-width);
   }
+  .fk\:max-w-4xl {
+    max-width: var(--fk-container-4xl);
+  }
   .fk\:max-w-5xl {
     max-width: var(--fk-container-5xl);
   }
+  .fk\:max-w-6xl {
+    max-width: var(--fk-container-6xl);
+  }
   .fk\:max-w-60 {
     max-width: calc(var(--fk-spacing) * 60);
   }
   .fk\:max-w-64 {
     max-width: calc(var(--fk-spacing) * 64);
   }
+  .fk\:max-w-72 {
+    max-width: calc(var(--fk-spacing) * 72);
+  }
+  .fk\:max-w-96 {
+    max-width: calc(var(--fk-spacing) * 96);
+  }
+  .fk\:max-w-100 {
+    max-width: calc(var(--fk-spacing) * 100);
+  }
   .fk\:max-w-150 {
     max-width: calc(var(--fk-spacing) * 150);
   }
+  .fk\:max-w-\[70\%\] {
+    max-width: 70%;
+  }
   .fk\:max-w-\[90vw\] {
     max-width: 90vw;
   }
@@ -1530,6 +1757,18 @@
   .fk\:max-w-full {
     max-width: 100%;
   }
+  .fk\:max-w-lg {
+    max-width: var(--fk-container-lg);
+  }
+  .fk\:max-w-md {
+    max-width: var(--fk-container-md);
+  }
+  .fk\:max-w-none {
+    max-width: none;
+  }
+  .fk\:max-w-sm {
+    max-width: var(--fk-container-sm);
+  }
   .fk\:max-w-xs {
     max-width: var(--fk-container-xs);
   }
@@ -1554,9 +1793,21 @@
   .fk\:min-w-10 {
     min-width: calc(var(--fk-spacing) * 10);
   }
+  .fk\:min-w-26 {
+    min-width: calc(var(--fk-spacing) * 26);
+  }
+  .fk\:min-w-28 {
+    min-width: calc(var(--fk-spacing) * 28);
+  }
   .fk\:min-w-32 {
     min-width: calc(var(--fk-spacing) * 32);
   }
+  .fk\:min-w-34 {
+    min-width: calc(var(--fk-spacing) * 34);
+  }
+  .fk\:min-w-44 {
+    min-width: calc(var(--fk-spacing) * 44);
+  }
   .fk\:min-w-\[8rem\] {
     min-width: 8rem;
   }
@@ -1619,6 +1870,10 @@
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .fk\:translate-y-0\.5 {
+    --tw-translate-y: calc(var(--fk-spacing) * 0.5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .fk\:translate-y-\[-50\%\] {
     --tw-translate-y: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1636,6 +1891,34 @@
   .fk\:rotate-180 {
     rotate: 180deg;
   }
+  .fk\:shimmer {
+    --_spread: var(--shimmer-spread, calc(3ch + 40px));
+    --_base: currentColor;
+    --_highlight: var(
+    --shimmer-color,
+    oklch(from currentColor l c h / calc(alpha* 0.2))
+  );
+    background-image: var( --shimmer-image, linear-gradient( calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), var(--_highlight) calc(50% - var(--_spread) * 0.5), var(--_highlight) 50%, var(--_highlight) calc(50% + var(--_spread) * 0.5), var(--_base) calc(50% + var(--_spread)) ) );
+    @supports (color: color-mix(in lab, red, red)) {
+      background-image: var( --shimmer-image, linear-gradient( calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * 0.5), var(--_highlight) 50%, color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * 0.5), var(--_base) calc(50% + var(--_spread)) ) );
+    }
+    background-repeat: no-repeat;
+    background-size: calc(200% + var(--_spread) * 2) 100%;
+    background-position: 0 0;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
+    animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
+    &:is([style="color-scheme: dark;"] *) {
+      --_highlight: var(
+      --shimmer-color,
+      oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4))
+    );
+    }
+    &:where([dir="rtl"], [dir="rtl"] *) {
+      animation-direction: reverse;
+    }
+  }
   .fk\:animate-bounce {
     animation: var(--fk-animate-bounce);
   }
@@ -1648,6 +1931,12 @@
   .fk\:animate-pulse {
     animation: var(--fk-animate-pulse);
   }
+  .fk\:animate-roll-up-in {
+    animation: var(--fk-animate-roll-up-in);
+  }
+  .fk\:animate-roll-up-out {
+    animation: var(--fk-animate-roll-up-out);
+  }
   .fk\:animate-spin {
     animation: var(--fk-animate-spin);
   }
@@ -1684,12 +1973,33 @@
   .fk\:list-disc {
     list-style-type: disc;
   }
+  .fk\:list-none {
+    list-style-type: none;
+  }
   .fk\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .fk\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .fk\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .fk\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .fk\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .fk\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
   .fk\:grid-cols-\[repeat\(auto-fill\,minmax\(8rem\,1fr\)\)\] {
     grid-template-columns: repeat(auto-fill,minmax(8rem,1fr));
   }
+  .fk\:grid-cols-\[repeat\(auto-fill\,minmax\(10rem\,1fr\)\)\] {
+    grid-template-columns: repeat(auto-fill,minmax(10rem,1fr));
+  }
   .fk\:grid-rows-\[auto_1fr\] {
     grid-template-rows: auto 1fr;
   }
@@ -1714,15 +2024,24 @@
   .fk\:place-items-center {
     place-items: center;
   }
+  .fk\:items-baseline {
+    align-items: baseline;
+  }
   .fk\:items-center {
     align-items: center;
   }
+  .fk\:items-end {
+    align-items: flex-end;
+  }
   .fk\:items-start {
     align-items: flex-start;
   }
   .fk\:items-stretch {
     align-items: stretch;
   }
+  .fk\:justify-around {
+    justify-content: space-around;
+  }
   .fk\:justify-between {
     justify-content: space-between;
   }
@@ -1762,6 +2081,9 @@
   .fk\:gap-5 {
     gap: calc(var(--fk-spacing) * 5);
   }
+  .fk\:gap-6 {
+    gap: calc(var(--fk-spacing) * 6);
+  }
   .fk\:gap-8 {
     gap: calc(var(--fk-spacing) * 8);
   }
@@ -1803,6 +2125,13 @@
       margin-block-end: calc(calc(var(--fk-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .fk\:space-y-5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--fk-spacing) * 5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--fk-spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .fk\:space-y-6 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1810,9 +2139,25 @@
       margin-block-end: calc(calc(var(--fk-spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .fk\:space-y-8 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--fk-spacing) * 8) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--fk-spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .fk\:gap-x-2 {
+    column-gap: calc(var(--fk-spacing) * 2);
+  }
+  .fk\:gap-x-3 {
+    column-gap: calc(var(--fk-spacing) * 3);
+  }
   .fk\:gap-x-4 {
     column-gap: calc(var(--fk-spacing) * 4);
   }
+  .fk\:gap-x-16 {
+    column-gap: calc(var(--fk-spacing) * 16);
+  }
   .fk\:-space-x-1 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1841,9 +2186,32 @@
       margin-inline-end: calc(calc(var(--fk-spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .fk\:gap-y-1 {
+    row-gap: calc(var(--fk-spacing) * 1);
+  }
+  .fk\:gap-y-2 {
+    row-gap: calc(var(--fk-spacing) * 2);
+  }
+  .fk\:divide-y {
+    :where(& > :not(:last-child)) {
+      --tw-divide-y-reverse: 0;
+      border-bottom-style: var(--tw-border-style);
+      border-top-style: var(--tw-border-style);
+      border-top-width: calc(1px * var(--tw-divide-y-reverse));
+      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+    }
+  }
+  .fk\:divide-border {
+    :where(& > :not(:last-child)) {
+      border-color: hsl(var(--border));
+    }
+  }
   .fk\:self-end {
     align-self: flex-end;
   }
+  .fk\:self-start {
+    align-self: flex-start;
+  }
   .fk\:self-stretch {
     align-self: stretch;
   }
@@ -1903,9 +2271,16 @@
   .fk\:rounded-sm {
     border-radius: calc(var(--radius) - 4px);
   }
+  .fk\:rounded-xl {
+    border-radius: var(--fk-radius-xl);
+  }
   .fk\:rounded-xs {
     border-radius: var(--fk-radius-xs);
   }
+  .fk\:rounded-t-lg {
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+  }
   .fk\:rounded-t-md {
     border-top-left-radius: calc(var(--radius) - 2px);
     border-top-right-radius: calc(var(--radius) - 2px);
@@ -1926,6 +2301,14 @@
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
+  .fk\:rounded-b-lg {
+    border-bottom-right-radius: var(--radius);
+    border-bottom-left-radius: var(--radius);
+  }
+  .fk\:rounded-b-md {
+    border-bottom-right-radius: calc(var(--radius) - 2px);
+    border-bottom-left-radius: calc(var(--radius) - 2px);
+  }
   .fk\:border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1938,6 +2321,10 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .fk\:border-x {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 1px;
+  }
   .fk\:border-y {
     border-block-style: var(--tw-border-style);
     border-block-width: 1px;
@@ -1977,12 +2364,63 @@
   .fk\:border-accent {
     border-color: hsl(var(--accent));
   }
+  .fk\:border-amber-500\/30 {
+    border-color: var(--fk-color-amber-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--fk-color-amber-500) 30%, transparent);
+    }
+  }
+  .fk\:border-amber-500\/40 {
+    border-color: var(--fk-color-amber-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--fk-color-amber-500) 40%, transparent);
+    }
+  }
+  .fk\:border-blue-500\/30 {
+    border-color: var(--fk-color-blue-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--fk-color-blue-500) 30%, transparent);
+    }
+  }
   .fk\:border-border {
     border-color: hsl(var(--border));
   }
+  .fk\:border-border\/70 {
+    border-color: hsl(var(--border));
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, hsl(var(--border)) 70%, transparent);
+    }
+  }
+  .fk\:border-destructive {
+    border-color: hsl(var(--destructive));
+  }
+  .fk\:border-destructive\/30 {
+    border-color: hsl(var(--destructive));
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, hsl(var(--destructive)) 30%, transparent);
+    }
+  }
+  .fk\:border-destructive\/50 {
+    border-color: hsl(var(--destructive));
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, hsl(var(--destructive)) 50%, transparent);
+    }
+  }
   .fk\:border-emerald-500 {
     border-color: var(--fk-color-emerald-500);
   }
+  .fk\:border-emerald-500\/30 {
+    border-color: var(--fk-color-emerald-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--fk-color-emerald-500) 30%, transparent);
+    }
+  }
+  .fk\:border-green-700\/40 {
+    border-color: var(--fk-color-green-700);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--fk-color-green-700) 40%, transparent);
+    }
+  }
   .fk\:border-input {
     border-color: hsl(var(--input));
   }
@@ -1998,21 +2436,42 @@
       border-color: color-mix(in oklab, var(--fk-color-red-400) 30%, transparent);
     }
   }
+  .fk\:border-red-500\/30 {
+    border-color: var(--fk-color-red-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--fk-color-red-500) 30%, transparent);
+    }
+  }
+  .fk\:border-red-700\/40 {
+    border-color: var(--fk-color-red-700);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--fk-color-red-700) 40%, transparent);
+    }
+  }
   .fk\:border-sidebar-border {
     border-color: hsl(var(--sidebar-border));
   }
   .fk\:border-stone-200 {
     border-color: var(--fk-color-stone-200);
   }
+  .fk\:border-success {
+    border-color: hsl(var(--success));
+  }
   .fk\:border-transparent {
     border-color: transparent;
   }
   .fk\:border-transparent\! {
     border-color: transparent !important;
   }
+  .fk\:border-white\! {
+    border-color: var(--fk-color-white) !important;
+  }
   .fk\:border-t-transparent {
     border-top-color: transparent;
   }
+  .fk\:border-b-border {
+    border-bottom-color: hsl(var(--border));
+  }
   .fk\:border-l-transparent {
     border-left-color: transparent;
   }
@@ -2022,15 +2481,45 @@
   .fk\:bg-accent {
     background-color: hsl(var(--accent));
   }
+  .fk\:bg-amber-500\/5 {
+    background-color: var(--fk-color-amber-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--fk-color-amber-500) 5%, transparent);
+    }
+  }
+  .fk\:bg-amber-500\/10 {
+    background-color: var(--fk-color-amber-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--fk-color-amber-500) 10%, transparent);
+    }
+  }
+  .fk\:bg-amber-500\/20 {
+    background-color: var(--fk-color-amber-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--fk-color-amber-500) 20%, transparent);
+    }
+  }
   .fk\:bg-background {
     background-color: hsl(var(--background));
   }
+  .fk\:bg-background\/60 {
+    background-color: hsl(var(--background));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--background)) 60%, transparent);
+    }
+  }
   .fk\:bg-background\/80 {
     background-color: hsl(var(--background));
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, hsl(var(--background)) 80%, transparent);
     }
   }
+  .fk\:bg-background\/90 {
+    background-color: hsl(var(--background));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--background)) 90%, transparent);
+    }
+  }
   .fk\:bg-bitbucket\! {
     background-color: #0052CC !important;
   }
@@ -2040,6 +2529,18 @@
       background-color: color-mix(in oklab, var(--fk-color-black) 50%, transparent);
     }
   }
+  .fk\:bg-black\/90 {
+    background-color: var(--fk-color-black);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--fk-color-black) 90%, transparent);
+    }
+  }
+  .fk\:bg-blue-500\/5 {
+    background-color: var(--fk-color-blue-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--fk-color-blue-500) 5%, transparent);
+    }
+  }
   .fk\:bg-border {
     background-color: hsl(var(--border));
   }
@@ -2052,12 +2553,30 @@
   .fk\:bg-destructive-foreground {
     background-color: hsl(var(--destructive-foreground));
   }
+  .fk\:bg-destructive\/5 {
+    background-color: hsl(var(--destructive));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--destructive)) 5%, transparent);
+    }
+  }
   .fk\:bg-destructive\/10 {
     background-color: hsl(var(--destructive));
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, hsl(var(--destructive)) 10%, transparent);
     }
   }
+  .fk\:bg-destructive\/15 {
+    background-color: hsl(var(--destructive));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--destructive)) 15%, transparent);
+    }
+  }
+  .fk\:bg-emerald-500\/5 {
+    background-color: var(--fk-color-emerald-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--fk-color-emerald-500) 5%, transparent);
+    }
+  }
   .fk\:bg-foreground {
     background-color: hsl(var(--foreground));
   }
@@ -2067,6 +2586,9 @@
   .fk\:bg-green-50 {
     background-color: var(--fk-color-green-50);
   }
+  .fk\:bg-indigo-100 {
+    background-color: var(--fk-color-indigo-100);
+  }
   .fk\:bg-input {
     background-color: hsl(var(--input));
   }
@@ -2085,6 +2607,12 @@
       background-color: color-mix(in oklab, hsl(var(--muted-foreground)) 10%, transparent);
     }
   }
+  .fk\:bg-muted\/30 {
+    background-color: hsl(var(--muted));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--muted)) 30%, transparent);
+    }
+  }
   .fk\:bg-muted\/40 {
     background-color: hsl(var(--muted));
     @supports (color: color-mix(in lab, red, red)) {
@@ -2097,12 +2625,24 @@
       background-color: color-mix(in oklab, hsl(var(--muted)) 50%, transparent);
     }
   }
+  .fk\:bg-muted\/60 {
+    background-color: hsl(var(--muted));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--muted)) 60%, transparent);
+    }
+  }
   .fk\:bg-muted\/80 {
     background-color: hsl(var(--muted));
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, hsl(var(--muted)) 80%, transparent);
     }
   }
+  .fk\:bg-orange-500\/20 {
+    background-color: var(--fk-color-orange-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--fk-color-orange-500) 20%, transparent);
+    }
+  }
   .fk\:bg-overlay\/75 {
     background-color: hsl(var(--overlay));
     @supports (color: color-mix(in lab, red, red)) {
@@ -2121,6 +2661,12 @@
   .fk\:bg-primary {
     background-color: hsl(var(--primary));
   }
+  .fk\:bg-red-500\/5 {
+    background-color: var(--fk-color-red-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--fk-color-red-500) 5%, transparent);
+    }
+  }
   .fk\:bg-row-added {
     background-color: hsl(var(--row-added));
   }
@@ -2133,9 +2679,33 @@
   .fk\:bg-sidebar {
     background-color: hsl(var(--sidebar-background));
   }
+  .fk\:bg-sidebar-accent {
+    background-color: hsl(var(--sidebar-accent));
+  }
   .fk\:bg-sidebar-border {
     background-color: hsl(var(--sidebar-border));
   }
+  .fk\:bg-sky-100 {
+    background-color: var(--fk-color-sky-100);
+  }
+  .fk\:bg-success {
+    background-color: hsl(var(--success));
+  }
+  .fk\:bg-success\/15 {
+    background-color: hsl(var(--success));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--success)) 15%, transparent);
+    }
+  }
+  .fk\:bg-success\/20 {
+    background-color: hsl(var(--success));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--success)) 20%, transparent);
+    }
+  }
+  .fk\:bg-teal-100 {
+    background-color: var(--fk-color-teal-100);
+  }
   .fk\:bg-teal-400 {
     background-color: var(--fk-color-teal-400);
   }
@@ -2148,6 +2718,15 @@
   .fk\:bg-white\! {
     background-color: var(--fk-color-white) !important;
   }
+  .fk\:bg-white\/10 {
+    background-color: var(--fk-color-white);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--fk-color-white) 10%, transparent);
+    }
+  }
+  .fk\:mask-\[linear-gradient\(to_bottom\,black_calc\(100\%-2\.75rem\)\,\#0009_calc\(100\%-1\.25rem\)\,\#0003_calc\(100\%-0\.5rem\)\,transparent\)\] {
+    mask-image: linear-gradient(to bottom,black calc(100% - 2.75rem),#0009 calc(100% - 1.25rem),#0003 calc(100% - 0.5rem),transparent);
+  }
   .fk\:bg-\[length\:250\%_100\%\,auto\] {
     background-size: 250% 100%,auto;
   }
@@ -2157,9 +2736,15 @@
   .fk\:\[background-repeat\:no-repeat\,padding-box\] {
     background-repeat: no-repeat,padding-box;
   }
+  .fk\:fill-amber-400 {
+    fill: var(--fk-color-amber-400);
+  }
   .fk\:fill-foreground {
     fill: hsl(var(--foreground));
   }
+  .fk\:fill-transparent {
+    fill: transparent;
+  }
   .fk\:object-contain {
     object-fit: contain;
   }
@@ -2175,9 +2760,18 @@
   .fk\:p-0\.5 {
     padding: calc(var(--fk-spacing) * 0.5);
   }
+  .fk\:p-0\.75 {
+    padding: calc(var(--fk-spacing) * 0.75);
+  }
   .fk\:p-1 {
     padding: calc(var(--fk-spacing) * 1);
   }
+  .fk\:p-1\! {
+    padding: calc(var(--fk-spacing) * 1) !important;
+  }
+  .fk\:p-1\.5 {
+    padding: calc(var(--fk-spacing) * 1.5);
+  }
   .fk\:p-2 {
     padding: calc(var(--fk-spacing) * 2);
   }
@@ -2202,6 +2796,9 @@
   .fk\:px-0\.5 {
     padding-inline: calc(var(--fk-spacing) * 0.5);
   }
+  .fk\:px-0\.75 {
+    padding-inline: calc(var(--fk-spacing) * 0.75);
+  }
   .fk\:px-1 {
     padding-inline: calc(var(--fk-spacing) * 1);
   }
@@ -2211,6 +2808,9 @@
   .fk\:px-1\.5 {
     padding-inline: calc(var(--fk-spacing) * 1.5);
   }
+  .fk\:px-1\.25 {
+    padding-inline: calc(var(--fk-spacing) * 1.25);
+  }
   .fk\:px-2 {
     padding-inline: calc(var(--fk-spacing) * 2);
   }
@@ -2220,12 +2820,21 @@
   .fk\:px-3 {
     padding-inline: calc(var(--fk-spacing) * 3);
   }
+  .fk\:px-3\.5 {
+    padding-inline: calc(var(--fk-spacing) * 3.5);
+  }
   .fk\:px-4 {
     padding-inline: calc(var(--fk-spacing) * 4);
   }
+  .fk\:px-5 {
+    padding-inline: calc(var(--fk-spacing) * 5);
+  }
   .fk\:px-6 {
     padding-inline: calc(var(--fk-spacing) * 6);
   }
+  .fk\:px-7 {
+    padding-inline: calc(var(--fk-spacing) * 7);
+  }
   .fk\:px-8 {
     padding-inline: calc(var(--fk-spacing) * 8);
   }
@@ -2256,6 +2865,9 @@
   .fk\:py-3\.5 {
     padding-block: calc(var(--fk-spacing) * 3.5);
   }
+  .fk\:py-4 {
+    padding-block: calc(var(--fk-spacing) * 4);
+  }
   .fk\:py-6 {
     padding-block: calc(var(--fk-spacing) * 6);
   }
@@ -2265,6 +2877,9 @@
   .fk\:pt-0\.5 {
     padding-top: calc(var(--fk-spacing) * 0.5);
   }
+  .fk\:pt-2 {
+    padding-top: calc(var(--fk-spacing) * 2);
+  }
   .fk\:pt-3 {
     padding-top: calc(var(--fk-spacing) * 3);
   }
@@ -2274,6 +2889,12 @@
   .fk\:pt-8 {
     padding-top: calc(var(--fk-spacing) * 8);
   }
+  .fk\:pt-10 {
+    padding-top: calc(var(--fk-spacing) * 10);
+  }
+  .fk\:pt-px {
+    padding-top: 1px;
+  }
   .fk\:pr-1 {
     padding-right: calc(var(--fk-spacing) * 1);
   }
@@ -2289,6 +2910,9 @@
   .fk\:pr-6 {
     padding-right: calc(var(--fk-spacing) * 6);
   }
+  .fk\:pr-7 {
+    padding-right: calc(var(--fk-spacing) * 7);
+  }
   .fk\:pr-8 {
     padding-right: calc(var(--fk-spacing) * 8);
   }
@@ -2298,15 +2922,33 @@
   .fk\:pb-0 {
     padding-bottom: calc(var(--fk-spacing) * 0);
   }
+  .fk\:pb-0\.5 {
+    padding-bottom: calc(var(--fk-spacing) * 0.5);
+  }
+  .fk\:pb-1 {
+    padding-bottom: calc(var(--fk-spacing) * 1);
+  }
   .fk\:pb-1\.5 {
     padding-bottom: calc(var(--fk-spacing) * 1.5);
   }
   .fk\:pb-2 {
     padding-bottom: calc(var(--fk-spacing) * 2);
   }
+  .fk\:pb-2\.5 {
+    padding-bottom: calc(var(--fk-spacing) * 2.5);
+  }
   .fk\:pb-3 {
     padding-bottom: calc(var(--fk-spacing) * 3);
   }
+  .fk\:pb-4 {
+    padding-bottom: calc(var(--fk-spacing) * 4);
+  }
+  .fk\:pb-6 {
+    padding-bottom: calc(var(--fk-spacing) * 6);
+  }
+  .fk\:pb-11 {
+    padding-bottom: calc(var(--fk-spacing) * 11);
+  }
   .fk\:pb-16 {
     padding-bottom: calc(var(--fk-spacing) * 16);
   }
@@ -2316,18 +2958,36 @@
   .fk\:pl-0 {
     padding-left: calc(var(--fk-spacing) * 0);
   }
+  .fk\:pl-0\! {
+    padding-left: calc(var(--fk-spacing) * 0) !important;
+  }
+  .fk\:pl-0\.5 {
+    padding-left: calc(var(--fk-spacing) * 0.5);
+  }
   .fk\:pl-1\! {
     padding-left: calc(var(--fk-spacing) * 1) !important;
   }
   .fk\:pl-2 {
     padding-left: calc(var(--fk-spacing) * 2);
   }
+  .fk\:pl-2\.5 {
+    padding-left: calc(var(--fk-spacing) * 2.5);
+  }
   .fk\:pl-3 {
     padding-left: calc(var(--fk-spacing) * 3);
   }
+  .fk\:pl-3\.25 {
+    padding-left: calc(var(--fk-spacing) * 3.25);
+  }
   .fk\:pl-4 {
     padding-left: calc(var(--fk-spacing) * 4);
   }
+  .fk\:pl-6 {
+    padding-left: calc(var(--fk-spacing) * 6);
+  }
+  .fk\:pl-7 {
+    padding-left: calc(var(--fk-spacing) * 7);
+  }
   .fk\:pl-8 {
     padding-left: calc(var(--fk-spacing) * 8);
   }
@@ -2340,6 +3000,9 @@
   .fk\:text-left {
     text-align: left;
   }
+  .fk\:text-right {
+    text-align: right;
+  }
   .fk\:align-middle {
     vertical-align: middle;
   }
@@ -2370,6 +3033,10 @@
     font-size: var(--fk-text-sm);
     line-height: var(--tw-leading, var(--fk-text-sm--line-height));
   }
+  .fk\:text-xl {
+    font-size: var(--fk-text-xl);
+    line-height: var(--tw-leading, var(--fk-text-xl--line-height));
+  }
   .fk\:text-xs {
     font-size: var(--fk-text-xs);
     line-height: var(--tw-leading, var(--fk-text-xs--line-height));
@@ -2377,9 +3044,21 @@
   .fk\:text-\[0\.8rem\] {
     font-size: 0.8rem;
   }
+  .fk\:text-\[0\.625rem\] {
+    font-size: 0.625rem;
+  }
+  .fk\:text-\[0\.875em\] {
+    font-size: 0.875em;
+  }
   .fk\:text-\[0\.6875rem\] {
     font-size: 0.6875rem;
   }
+  .fk\:text-\[10px\] {
+    font-size: 10px;
+  }
+  .fk\:text-\[11px\] {
+    font-size: 11px;
+  }
   .fk\:leading-3 {
     --tw-leading: calc(var(--fk-spacing) * 3);
     line-height: calc(var(--fk-spacing) * 3);
@@ -2388,6 +3067,10 @@
     --tw-leading: calc(var(--fk-spacing) * 4);
     line-height: calc(var(--fk-spacing) * 4);
   }
+  .fk\:leading-4\.5 {
+    --tw-leading: calc(var(--fk-spacing) * 4.5);
+    line-height: calc(var(--fk-spacing) * 4.5);
+  }
   .fk\:leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -2396,6 +3079,10 @@
     --tw-leading: var(--fk-leading-normal);
     line-height: var(--fk-leading-normal);
   }
+  .fk\:leading-relaxed {
+    --tw-leading: var(--fk-leading-relaxed);
+    line-height: var(--fk-leading-relaxed);
+  }
   .fk\:leading-snug {
     --tw-leading: var(--fk-leading-snug);
     line-height: var(--fk-leading-snug);
@@ -2438,12 +3125,27 @@
   .fk\:wrap-break-word {
     overflow-wrap: break-word;
   }
+  .fk\:break-all {
+    word-break: break-all;
+  }
   .fk\:whitespace-nowrap {
     white-space: nowrap;
   }
+  .fk\:whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
   .fk\:text-accent-foreground {
     color: hsl(var(--accent-foreground));
   }
+  .fk\:text-amber-400 {
+    color: var(--fk-color-amber-400);
+  }
+  .fk\:text-amber-600 {
+    color: var(--fk-color-amber-600);
+  }
+  .fk\:text-amber-700 {
+    color: var(--fk-color-amber-700);
+  }
   .fk\:text-background {
     color: hsl(var(--background));
   }
@@ -2462,6 +3164,9 @@
   .fk\:text-blue-600 {
     color: var(--fk-color-blue-600);
   }
+  .fk\:text-blue-700 {
+    color: var(--fk-color-blue-700);
+  }
   .fk\:text-card-foreground {
     color: hsl(var(--card-foreground));
   }
@@ -2474,6 +3179,9 @@
   .fk\:text-emerald-500 {
     color: var(--fk-color-emerald-500);
   }
+  .fk\:text-emerald-700 {
+    color: var(--fk-color-emerald-700);
+  }
   .fk\:text-foreground {
     color: hsl(var(--foreground));
   }
@@ -2486,6 +3194,12 @@
   .fk\:text-green-600 {
     color: var(--fk-color-green-600);
   }
+  .fk\:text-green-700 {
+    color: var(--fk-color-green-700);
+  }
+  .fk\:text-indigo-800 {
+    color: var(--fk-color-indigo-800);
+  }
   .fk\:text-inherit {
     color: inherit;
   }
@@ -2498,9 +3212,18 @@
   .fk\:text-muted-foreground\! {
     color: hsl(var(--muted-foreground)) !important;
   }
+  .fk\:text-muted-foreground\/40 {
+    color: hsl(var(--muted-foreground));
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, hsl(var(--muted-foreground)) 40%, transparent);
+    }
+  }
   .fk\:text-orange-600 {
     color: var(--fk-color-orange-600);
   }
+  .fk\:text-orange-700 {
+    color: var(--fk-color-orange-700);
+  }
   .fk\:text-pink-600 {
     color: var(--fk-color-pink-600);
   }
@@ -2516,6 +3239,9 @@
   .fk\:text-red-600 {
     color: var(--fk-color-red-600);
   }
+  .fk\:text-red-700 {
+    color: var(--fk-color-red-700);
+  }
   .fk\:text-secondary-foreground {
     color: hsl(var(--secondary-foreground));
   }
@@ -2528,12 +3254,21 @@
       color: color-mix(in oklab, hsl(var(--sidebar-foreground)) 70%, transparent);
     }
   }
+  .fk\:text-sky-800 {
+    color: var(--fk-color-sky-800);
+  }
   .fk\:text-success {
     color: hsl(var(--success));
   }
+  .fk\:text-teal-800 {
+    color: var(--fk-color-teal-800);
+  }
   .fk\:text-transparent {
     color: transparent;
   }
+  .fk\:text-warning {
+    color: hsl(var(--warning));
+  }
   .fk\:text-white {
     color: var(--fk-color-white);
   }
@@ -2543,6 +3278,9 @@
   .fk\:text-yellow-600 {
     color: var(--fk-color-yellow-600);
   }
+  .fk\:capitalize {
+    text-transform: capitalize;
+  }
   .fk\:uppercase {
     text-transform: uppercase;
   }
@@ -2550,6 +3288,9 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .fk\:line-through {
+    text-decoration-line: line-through;
+  }
   .fk\:underline {
     text-decoration-line: underline;
   }
@@ -2577,12 +3318,21 @@
   .fk\:opacity-50 {
     opacity: 50%;
   }
+  .fk\:opacity-60 {
+    opacity: 60%;
+  }
   .fk\:opacity-70 {
     opacity: 70%;
   }
   .fk\:opacity-100 {
     opacity: 100%;
   }
+  .fk\:opacity-100\! {
+    opacity: 100% !important;
+  }
+  .fk\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
   .fk\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
     --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-border)));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2632,6 +3382,12 @@
       --tw-ring-color: color-mix(in oklab, hsl(var(--border)) 60%, transparent);
     }
   }
+  .fk\:ring-primary\/40 {
+    --tw-ring-color: hsl(var(--primary));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, hsl(var(--primary)) 40%, transparent);
+    }
+  }
   .fk\:ring-ring {
     --tw-ring-color: hsl(var(--ring));
   }
@@ -2695,6 +3451,11 @@
     transition-timing-function: var(--tw-ease, var(--fk-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--fk-default-transition-duration));
   }
+  .fk\:transition-\[opacity\,visibility\] {
+    transition-property: opacity,visibility;
+    transition-timing-function: var(--tw-ease, var(--fk-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--fk-default-transition-duration));
+  }
   .fk\:transition-\[transform\,background-color\] {
     transition-property: transform,background-color;
     transition-timing-function: var(--tw-ease, var(--fk-default-transition-timing-function));
@@ -2816,6 +3577,9 @@
   .fk\:fade-in-0 {
     --tw-enter-opacity: 0;
   }
+  .fk\:shimmer-duration-1000 {
+    --shimmer-duration: calc(1000 * 1ms);
+  }
   .fk\:zoom-in-95 {
     --tw-enter-scale: .95;
   }
@@ -2824,6 +3588,23 @@
       opacity: 100%;
     }
   }
+  .fk\:group-hover\:bg-background\/10 {
+    &:is(:where(.fk\:group):hover *) {
+      @media (hover: hover) {
+        background-color: hsl(var(--background));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, hsl(var(--background)) 10%, transparent);
+        }
+      }
+    }
+  }
+  .fk\:group-hover\:text-white\! {
+    &:is(:where(.fk\:group):hover *) {
+      @media (hover: hover) {
+        color: var(--fk-color-white) !important;
+      }
+    }
+  }
   .fk\:group-hover\:opacity-100 {
     &:is(:where(.fk\:group):hover *) {
       @media (hover: hover) {
@@ -2831,6 +3612,13 @@
       }
     }
   }
+  .fk\:group-hover\/chat\:opacity-100 {
+    &:is(:where(.fk\:group\/chat):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .fk\:group-hover\/copyable\:opacity-100 {
     &:is(:where(.fk\:group\/copyable):hover *) {
       @media (hover: hover) {
@@ -3086,6 +3874,11 @@
       height: calc(var(--fk-spacing) * 3);
     }
   }
+  .fk\:group-data-\[state\=open\]\:rotate-90 {
+    &:is(:where(.fk\:group)[data-state="open"] *) {
+      rotate: 90deg;
+    }
+  }
   .fk\:group-data-\[state\=open\]\:rotate-180 {
     &:is(:where(.fk\:group)[data-state="open"] *) {
       rotate: 180deg;
@@ -3438,6 +4231,13 @@
       content: var(--tw-content);
     }
   }
+  .fk\:before\:content-none {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: none;
+      content: none;
+    }
+  }
   .fk\:before\:select-none {
     &::before {
       content: var(--tw-content);
@@ -3526,6 +4326,13 @@
       content: var(--tw-content);
     }
   }
+  .fk\:after\:content-none {
+    &::after {
+      content: var(--tw-content);
+      --tw-content: none;
+      content: none;
+    }
+  }
   .fk\:group-data-\[collapsible\=offcanvas\]\:after\:left-full {
     &:is(:where(.fk\:group)[data-collapsible="offcanvas"] *) {
       &::after {
@@ -3582,6 +4389,11 @@
       }
     }
   }
+  .fk\:last\:pb-0 {
+    &:last-child {
+      padding-bottom: calc(var(--fk-spacing) * 0);
+    }
+  }
   .fk\:focus-within\:ring-2 {
     &:focus-within {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -3609,6 +4421,23 @@
       }
     }
   }
+  .fk\:hover\:border-border {
+    &:hover {
+      @media (hover: hover) {
+        border-color: hsl(var(--border));
+      }
+    }
+  }
+  .fk\:hover\:border-muted-foreground\/30 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: hsl(var(--muted-foreground));
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, hsl(var(--muted-foreground)) 30%, transparent);
+        }
+      }
+    }
+  }
   .fk\:hover\:bg-accent {
     &:hover {
       @media (hover: hover) {
@@ -3633,6 +4462,16 @@
       }
     }
   }
+  .fk\:hover\:bg-accent\/60 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: hsl(var(--accent));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, hsl(var(--accent)) 60%, transparent);
+        }
+      }
+    }
+  }
   .fk\:hover\:bg-background {
     &:hover {
       @media (hover: hover) {
@@ -3647,6 +4486,13 @@
       }
     }
   }
+  .fk\:hover\:bg-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--fk-color-blue-500);
+      }
+    }
+  }
   .fk\:hover\:bg-destructive\/90 {
     &:hover {
       @media (hover: hover) {
@@ -3753,6 +4599,16 @@
       }
     }
   }
+  .fk\:hover\:bg-white\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--fk-color-white);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--fk-color-white) 20%, transparent);
+        }
+      }
+    }
+  }
   .fk\:hover\:text-accent-foreground {
     &:hover {
       @media (hover: hover) {
@@ -3909,6 +4765,11 @@
       border-color: hsl(var(--ring)) !important;
     }
   }
+  .fk\:focus-visible\:bg-accent {
+    &:focus-visible {
+      background-color: hsl(var(--accent));
+    }
+  }
   .fk\:focus-visible\:ring-0 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -3954,6 +4815,14 @@
       }
     }
   }
+  .fk\:focus-visible\:ring-white\/60 {
+    &:focus-visible {
+      --tw-ring-color: var(--fk-color-white);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--fk-color-white) 60%, transparent);
+      }
+    }
+  }
   .fk\:focus-visible\:ring-offset-0 {
     &:focus-visible {
       --tw-ring-offset-width: 0px;
@@ -3993,6 +4862,12 @@
       outline-color: hsl(var(--ring));
     }
   }
+  .fk\:focus-visible\:outline-none {
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .fk\:active\:translate-y-px {
     &:active {
       --tw-translate-y: 1px;
@@ -4857,6 +5732,14 @@
       background-color: hsl(var(--accent));
     }
   }
+  .fk\:data-\[state\=open\]\:bg-background\/15 {
+    &[data-state="open"] {
+      background-color: hsl(var(--background));
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, hsl(var(--background)) 15%, transparent);
+      }
+    }
+  }
   .fk\:data-\[state\=open\]\:bg-muted {
     &[data-state="open"] {
       background-color: hsl(var(--muted));
@@ -5137,16 +6020,31 @@
       border-bottom-width: 1px;
     }
   }
+  .fk\:sm\:hidden {
+    @media (width >= 40rem) {
+      display: none;
+    }
+  }
   .fk\:sm\:w-\[350px\] {
     @media (width >= 40rem) {
       width: 350px;
     }
   }
+  .fk\:sm\:max-w-4xl {
+    @media (width >= 40rem) {
+      max-width: var(--fk-container-4xl);
+    }
+  }
   .fk\:sm\:max-w-lg {
     @media (width >= 40rem) {
       max-width: var(--fk-container-lg);
     }
   }
+  .fk\:sm\:max-w-none {
+    @media (width >= 40rem) {
+      max-width: none;
+    }
+  }
   .fk\:sm\:max-w-sm {
     @media (width >= 40rem) {
       max-width: var(--fk-container-sm);
@@ -5220,6 +6118,11 @@
       }
     }
   }
+  .fk\:md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
   .fk\:md\:w-25 {
     @media (width >= 48rem) {
       width: calc(var(--fk-spacing) * 25);
@@ -5264,11 +6167,26 @@
       display: none;
     }
   }
+  .fk\:lg\:w-70 {
+    @media (width >= 64rem) {
+      width: calc(var(--fk-spacing) * 70);
+    }
+  }
   .fk\:lg\:w-75 {
     @media (width >= 64rem) {
       width: calc(var(--fk-spacing) * 75);
     }
   }
+  .fk\:lg\:grid-cols-2 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .fk\:lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.6fr\)_auto\] {
+    @media (width >= 64rem) {
+      grid-template-columns: minmax(0,1fr) minmax(0,1.6fr) auto;
+    }
+  }
   .fk\:lg\:p-8 {
     @media (width >= 64rem) {
       padding: calc(var(--fk-spacing) * 8);
@@ -5284,6 +6202,11 @@
       padding-inline: calc(var(--fk-spacing) * 3);
     }
   }
+  .fk\:lg\:px-6 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--fk-spacing) * 6);
+    }
+  }
   .fk\:dark\:border-input {
     &:is([style="color-scheme: dark;"] *) {
       border-color: hsl(var(--input));
@@ -5317,6 +6240,11 @@
       background-color: hsl(var(--foreground));
     }
   }
+  .fk\:dark\:bg-indigo-950 {
+    &:is([style="color-scheme: dark;"] *) {
+      background-color: var(--fk-color-indigo-950);
+    }
+  }
   .fk\:dark\:bg-input\/30 {
     &:is([style="color-scheme: dark;"] *) {
       background-color: hsl(var(--input));
@@ -5330,6 +6258,24 @@
       background-color: hsl(var(--muted));
     }
   }
+  .fk\:dark\:bg-muted\/30 {
+    &:is([style="color-scheme: dark;"] *) {
+      background-color: hsl(var(--muted));
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, hsl(var(--muted)) 30%, transparent);
+      }
+    }
+  }
+  .fk\:dark\:bg-sky-950 {
+    &:is([style="color-scheme: dark;"] *) {
+      background-color: var(--fk-color-sky-950);
+    }
+  }
+  .fk\:dark\:bg-teal-950 {
+    &:is([style="color-scheme: dark;"] *) {
+      background-color: var(--fk-color-teal-950);
+    }
+  }
   .fk\:dark\:bg-transparent {
     &:is([style="color-scheme: dark;"] *) {
       background-color: transparent;
@@ -5343,21 +6289,64 @@
       }
     }
   }
+  .fk\:dark\:bg-white\/20 {
+    &:is([style="color-scheme: dark;"] *) {
+      background-color: var(--fk-color-white);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--fk-color-white) 20%, transparent);
+      }
+    }
+  }
   .fk\:dark\:text-\(--shiki-dark\)\! {
     &:is([style="color-scheme: dark;"] *) {
       color: var(--shiki-dark) !important;
     }
   }
+  .fk\:dark\:text-amber-400 {
+    &:is([style="color-scheme: dark;"] *) {
+      color: var(--fk-color-amber-400);
+    }
+  }
   .fk\:dark\:text-background {
     &:is([style="color-scheme: dark;"] *) {
       color: hsl(var(--background));
     }
   }
+  .fk\:dark\:text-blue-400 {
+    &:is([style="color-scheme: dark;"] *) {
+      color: var(--fk-color-blue-400);
+    }
+  }
+  .fk\:dark\:text-emerald-400 {
+    &:is([style="color-scheme: dark;"] *) {
+      color: var(--fk-color-emerald-400);
+    }
+  }
+  .fk\:dark\:text-indigo-300 {
+    &:is([style="color-scheme: dark;"] *) {
+      color: var(--fk-color-indigo-300);
+    }
+  }
   .fk\:dark\:text-muted-foreground {
     &:is([style="color-scheme: dark;"] *) {
       color: hsl(var(--muted-foreground));
     }
   }
+  .fk\:dark\:text-red-400 {
+    &:is([style="color-scheme: dark;"] *) {
+      color: var(--fk-color-red-400);
+    }
+  }
+  .fk\:dark\:text-sky-300 {
+    &:is([style="color-scheme: dark;"] *) {
+      color: var(--fk-color-sky-300);
+    }
+  }
+  .fk\:dark\:text-teal-300 {
+    &:is([style="color-scheme: dark;"] *) {
+      color: var(--fk-color-teal-300);
+    }
+  }
   .fk\:dark\:text-white {
     &:is([style="color-scheme: dark;"] *) {
       color: var(--fk-color-white);
@@ -5653,6 +6642,21 @@
       width: 100%;
     }
   }
+  .fk\:\[\&_th\]\:sticky {
+    & th {
+      position: sticky;
+    }
+  }
+  .fk\:\[\&_th\]\:top-0 {
+    & th {
+      top: calc(var(--fk-spacing) * 0);
+    }
+  }
+  .fk\:\[\&_th\]\:bg-muted {
+    & th {
+      background-color: hsl(var(--muted));
+    }
+  }
   .fk\:\[\&_tr\]\:border-b {
     & tr {
       border-bottom-style: var(--tw-border-style);
@@ -5883,6 +6887,11 @@
       padding-bottom: calc(var(--fk-spacing) * 0);
     }
   }
+  .fk\:\[\&\>div\>div\]\:block\! {
+    &>div>div {
+      display: block !important;
+    }
+  }
   .fk\:\[\&\>img\]\:rounded-full {
     &>img {
       border-radius: calc(infinity * 1px);
@@ -6011,6 +7020,11 @@
       height: calc(var(--fk-spacing) * 4);
     }
   }
+  .fk\:\[\&\>svg\]\:h-12 {
+    &>svg {
+      height: calc(var(--fk-spacing) * 12);
+    }
+  }
   .fk\:\[\&\>svg\]\:h-full {
     &>svg {
       height: 100%;
@@ -6615,6 +7629,360 @@ pre {
     font-weight: 700;
   }
 }
+:root {
+  --tab-background: 0 0% 100%;
+  --tab-foreground: 240 5.9% 10%;
+  --tab-active-foreground: 0 0% 98%;
+}
+.dark {
+  --tab-background: 240 5.9% 23%;
+  --tab-foreground: 0 0% 98%;
+  --tab-active-foreground: 240 5.9% 23%;
+}
+.flexkit-studio {
+  .graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, .graphiql-dialog, .graphiql-dialog-overlay, .graphiql-tooltip, [data-radix-popper-content-wrapper] {
+    --px-2: 2px;
+    --px-4: 4px;
+    --px-6: 6px;
+    --px-8: 8px;
+    --px-10: 10px;
+    --px-12: 12px;
+    --px-16: 16px;
+    --px-20: 20px;
+    --px-24: 24px;
+    --border-radius-2: 2px;
+    --border-radius-4: 4px;
+    --border-radius-8: 4px;
+    --border-radius-12: 4px;
+    --popover-border: none;
+    --sidebar-width: 60px;
+    --toolbar-width: 40px;
+    --color-primary: 338, 95%, 55%;
+    --color-secondary: var(--foreground);
+    --color-tertiary: 188, 100%, 36%;
+    --color-info: var(--link);
+    --color-success: 158, 60%, 42%;
+    --color-warning: var(--muted-foreground);
+    --color-error: 13, 93%, 58%;
+    --color-neutral: var(--foreground);
+    --color-base: 219, 28%, 100%;
+    --alpha-secondary: 0.76;
+    --alpha-tertiary: 0.5;
+    --alpha-background-heavy: 0.15;
+    --alpha-background-medium: 0.1;
+    --alpha-background-light: 0.07;
+    --font-family: inherit;
+    --font-family-mono: 'Fira Code', monospace;
+    --font-size-hint: calc(12rem / 16);
+    --font-size-inline-code: calc(13rem / 16);
+    --font-size-body: calc(15rem / 16);
+    --font-size-h4: calc(18rem / 16);
+    --font-size-h3: calc(22rem / 16);
+    --font-size-h2: calc(25rem / 16);
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --line-height: 1.5;
+    --popover-box-shadow: 0px 6px 20px rgba(59, 76, 106, 0.13), 0px 1.34018px 4.46726px rgba(59, 76, 106, 0.0774939),
+      0px 0.399006px 1.33002px rgba(59, 76, 106, 0.0525061);
+  }
+  .graphiql-container {
+    display: flex;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+    width: 100%;
+    .graphiql-sidebar {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: var(--px-8);
+      width: var(--sidebar-width);
+      .graphiql-sidebar-section {
+        display: flex;
+        flex-direction: column;
+        gap: var(--px-8);
+      }
+      button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: hsla(var(--color-neutral), var(--alpha-secondary));
+        height: calc(var(--sidebar-width) - (2 * var(--px-8)));
+        width: calc(var(--sidebar-width) - (2 * var(--px-8)));
+        &.active {
+          color: hsl(var(--color-neutral));
+        }
+        &:not(:first-child) {
+          margin-top: var(--px-4);
+        }
+        & > svg {
+          height: var(--px-20);
+          width: var(--px-20);
+        }
+      }
+    }
+    .graphiql-session {
+      display: flex;
+      flex: 1;
+    }
+    .graphiql-editors {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+    }
+    .graphiql-tab {
+      color: hsl(var(--tab-foreground));
+      background-color: hsl(var(--tab-background));
+      &.graphiql-tab-active {
+        color: hsl(var(--tab-active-foreground));
+        background-color: hsl(var(--foreground));
+        .graphiql-tab-close {
+          color: hsl(var(--tab-active-foreground));
+          background-color: hsl(var(--foreground));
+        }
+      }
+      .graphiql-tab-close {
+        box-shadow: none;
+        color: hsl(var(--tab-foreground));
+        background-color: hsl(var(--tab-background));
+        &:hover {
+          background-color: hsl(var(--muted-foreground));
+          color: hsl(var(--tab-background));
+        }
+      }
+    }
+    .graphiql-toolbar {
+      width: var(--toolbar-width);
+      & > * + * {
+        margin-top: var(--px-8);
+      }
+    }
+    .graphiql-editor-tools {
+      cursor: row-resize;
+      display: flex;
+      width: 100%;
+      column-gap: var(--px-8);
+      padding: var(--px-8);
+      button {
+        color: hsla(var(--color-neutral), var(--alpha-secondary));
+        &.active {
+          color: hsl(var(--color-neutral));
+        }
+      }
+      & > button:not(.graphiql-toggle-editor-tools) {
+        padding: var(--px-8) var(--px-12);
+      }
+      .graphiql-toggle-editor-tools {
+        margin-left: auto;
+      }
+    }
+    .graphiql-editor-tool {
+      height: 100%;
+      padding: var(--px-16);
+    }
+    .graphiql-toolbar, .graphiql-editor-tools, .graphiql-editor-tool {
+      position: relative;
+    }
+    .graphiql-response {
+      --editor-background: transparent;
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      .result-window {
+        position: relative;
+        flex: 1;
+      }
+    }
+    .CodeMirror-gutter-wrapper {
+      padding-top: 0.125rem;
+      font-size: 0.8125rem;
+      color: hsl(var(--muted-foreground));
+    }
+    .graphiql-footer {
+      border-top: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
+    }
+    .graphiql-plugin {
+      border-left: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--px-16);
+    }
+    .graphiql-chevron-icon {
+      color: hsla(var(--color-neutral), var(--alpha-tertiary));
+      display: block;
+      height: var(--px-12);
+      margin: var(--px-12);
+      width: var(--px-12);
+    }
+    svg {
+      pointer-events: none;
+    }
+  }
+  button.graphiql-tab-add {
+    height: 100%;
+    padding: var(--px-4);
+    & > svg {
+      color: hsla(var(--color-neutral), var(--alpha-secondary));
+      display: block;
+      height: var(--px-16);
+      width: var(--px-16);
+    }
+  }
+  .cm-s-graphiql .CodeMirror-cursor {
+    border-left: 2px solid hsl(var(--muted-foreground));
+  }
+  .CodeMirror-selected {
+    background: hsl(var(--accent-foreground) / 0.15) !important;
+  }
+  .graphiql-editors {
+    .CodeMirror-gutters {
+      background-color: hsl(var(--muted));
+    }
+    .CodeMirror {
+      background-color: hsl(var(--muted));
+    }
+  }
+  .graphiql-doc-explorer-header {
+    position: sticky;
+    top: -1px;
+    display: flex;
+    flex-direction: column-reverse;
+    padding-bottom: 0.25rem;
+    background-color: hsl(var(--background));
+    .graphiql-doc-explorer-search {
+      position: relative;
+      background-color: hsl(var(--muted));
+      border-radius: 8px;
+      & [role='listbox'] {
+        background-color: hsl(var(--muted));
+      }
+    }
+  }
+  .graphiql-doc-explorer-content {
+    overflow: hidden;
+    overflow-x: auto;
+    & > * {
+      color: hsl(var(--muted-foreground));
+    }
+  }
+  .graphiql-doc-explorer-title, .graphiql-history-header {
+    font-size: 1.25rem;
+    visibility: visible !important;
+  }
+  .graphiql-doc-explorer-header-content {
+    margin-top: 0.75rem;
+  }
+  .graphiql-doc-explorer-search-input {
+    border-radius: 0;
+  }
+  .graphiql-doc-explorer-search:not([data-state='idle']) {
+    border: none;
+    box-shadow: none;
+    overflow: hidden;
+    border-radius: 6px;
+  }
+  .graphiql-doc-explorer-search:not([data-state='idle']) .graphiql-doc-explorer-search-input {
+    background: hsl(var(--muted));
+  }
+  .graphiql-doc-explorer-search-input input {
+    height: 1.5rem;
+    width: 100% !important;
+    &::-webkit-input-placeholder {
+      color: hsl(var(--muted-foreground));
+      text-align: right;
+    }
+  }
+  .graphiql-history-item-spacer {
+    height: 0.5rem;
+    border-bottom: 1px solid hsl(var(--border));
+  }
+  button.graphiql-history-item-action {
+    color: hsl(var(--muted-foreground));
+  }
+  button.graphiql-history-item-label:hover, button.graphiql-history-item-label:focus {
+    color: hsl(var(--link));
+  }
+  a.graphiql-doc-explorer-type-name {
+    color: hsl(var(--color-primary));
+  }
+  a.graphiql-doc-explorer-back > svg {
+    overflow: visible;
+  }
+  .graphiql-history-item {
+    color: hsl(var(--muted-foreground));
+  }
+}
+.graphiql-horizontal-drag-bar {
+  width: var(--px-12);
+  cursor: col-resize;
+  &:hover::after {
+    border: var(--px-2) solid hsla(var(--color-neutral), var(--alpha-background-heavy));
+    border-radius: var(--border-radius-2);
+    content: '';
+    display: block;
+    height: 25%;
+    margin: 0 auto;
+    position: relative;
+    top: 37.5%;
+    width: 0;
+  }
+}
+.graphiql-spin {
+  animation: spin 0.8s linear 0s infinite;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.graphiql-dialog .graphiql-dialog-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: var(--px-24);
+}
+.graphiql-dialog .graphiql-dialog-title {
+  font-size: var(--font-size-h3);
+  font-weight: var(--font-weight-medium);
+  margin: 0;
+}
+.graphiql-dialog .graphiql-dialog-section {
+  align-items: center;
+  border-top: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
+  display: flex;
+  justify-content: space-between;
+  padding: var(--px-24);
+}
+.graphiql-dialog .graphiql-dialog-section > :not(:first-child) {
+  margin-left: var(--px-24);
+}
+.graphiql-dialog .graphiql-dialog-section-title {
+  font-size: var(--font-size-h4);
+  font-weight: var(--font-weight-medium);
+}
+.graphiql-dialog .graphiql-dialog-section-caption {
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
+}
+.graphiql-dialog .graphiql-warning-text {
+  color: hsl(var(--color-warning));
+  font-weight: var(--font-weight-medium);
+}
+.graphiql-dialog .graphiql-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.graphiql-dialog .graphiql-table :is(th, td) {
+  border: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
+  padding: var(--px-8) var(--px-12);
+}
+.graphiql-dialog .graphiql-key {
+  background-color: hsla(var(--color-neutral), var(--alpha-background-medium));
+  border-radius: var(--border-radius-4);
+  padding: var(--px-4);
+}
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);
@@ -6652,6 +8020,11 @@ pre {
   inherits: false;
   initial-value: 0;
 }
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -6887,6 +8260,34 @@ pre {
     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
 }
+@keyframes tw-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+@keyframes roll-up-in {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes roll-up-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
 @keyframes progress {
   0% {
     transform:  translateX(0) scaleX(0);
@@ -6912,6 +8313,7 @@ pre {
       --tw-translate-z: 0;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
+      --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;