@qwik.dev/devtools 0.2.6 → 0.2.7

package/dist/ui/styles.css

@@ -12,14 +12,9 @@ html:not([data-theme]) .themeIcon.auto {
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-divide-y-reverse: 0;
@@ -35,6 +30,7 @@ html:not([data-theme]) .themeIcon.auto {
       --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -73,9 +69,9 @@ html:not([data-theme]) .themeIcon.auto {
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
-      --tw-scale-x: 1;
-      --tw-scale-y: 1;
-      --tw-scale-z: 1;
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
     }
   }
 }
@@ -89,18 +85,13 @@ html:not([data-theme]) .themeIcon.auto {
     --color-red-400: oklch(70.4% .191 22.216);
     --color-amber-400: oklch(82.8% .189 84.429);
     --color-green-400: oklch(79.2% .209 151.711);
-    --color-emerald-100: oklch(95% .052 163.051);
-    --color-emerald-300: oklch(84.5% .143 164.978);
-    --color-emerald-700: oklch(50.8% .118 165.612);
-    --color-emerald-900: oklch(37.8% .077 168.94);
     --color-blue-400: oklch(70.7% .165 254.624);
-    --color-violet-300: oklch(81.1% .111 293.571);
-    --color-violet-400: oklch(70.2% .183 293.541);
     --color-purple-400: oklch(71.4% .203 305.504);
     --color-pink-400: oklch(71.8% .202 349.761);
     --color-black: #000;
     --color-white: #fff;
     --spacing: .25rem;
+    --container-7xl: 80rem;
     --text-xs: .75rem;
     --text-xs--line-height: calc(1 / .75);
     --text-sm: .875rem;
@@ -109,8 +100,6 @@ html:not([data-theme]) .themeIcon.auto {
     --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
-    --text-xl: 1.25rem;
-    --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
@@ -118,16 +107,17 @@ html:not([data-theme]) .themeIcon.auto {
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --tracking-tight: -.025em;
     --leading-relaxed: 1.625;
     --radius-md: .375rem;
     --radius-lg: .5rem;
     --radius-xl: .75rem;
-    --drop-shadow-md: 0 3px 3px #0000001f;
+    --radius-2xl: 1rem;
     --ease-out: cubic-bezier(0, 0, .2, 1);
     --ease-in-out: cubic-bezier(.4, 0, .2, 1);
     --animate-spin: spin 1s linear infinite;
+    --blur-sm: 8px;
     --blur-md: 12px;
-    --blur-lg: 16px;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     --default-font-family: var(--font-sans);
@@ -139,9 +129,11 @@ html:not([data-theme]) .themeIcon.auto {
     --color-muted-foreground: #6b7280;
     --color-accent: #16b6f6;
     --color-border: #e5e7eb;
-    --color-card: #f2f2f2;
+    --color-glass-border: #fff6;
+    --color-glass-bg: #ffffffb3;
+    --color-glass-shadow: #0000000d;
     --color-card-item-bg: #00000005;
-    --color-card-item-hover-bg: #00000008;
+    --color-card-item-hover-bg: #0000000a;
   }
 }
 
@@ -431,16 +423,16 @@ html:not([data-theme]) .themeIcon.auto {
     inset-inline-end: var(--spacing);
   }
 
-  .qwik-devtools .top-3 {
-    top: calc(var(--spacing) * 3);
+  .qwik-devtools .top-4 {
+    top: calc(var(--spacing) * 4);
   }
 
   .qwik-devtools .right-0 {
     right: calc(var(--spacing) * 0);
   }
 
-  .qwik-devtools .right-3 {
-    right: calc(var(--spacing) * 3);
+  .qwik-devtools .right-4 {
+    right: calc(var(--spacing) * 4);
   }
 
   .qwik-devtools .right-6 {
@@ -455,8 +447,16 @@ html:not([data-theme]) .themeIcon.auto {
     bottom: calc(var(--spacing) * 6);
   }
 
-  .qwik-devtools .z-10 {
-    z-index: 10;
+  .qwik-devtools .z-20 {
+    z-index: 20;
+  }
+
+  .qwik-devtools .z-\[9990\] {
+    z-index: 9990;
+  }
+
+  .qwik-devtools .z-\[9991\] {
+    z-index: 9991;
   }
 
   .qwik-devtools .z-\[9999\] {
@@ -604,14 +604,18 @@ html:not([data-theme]) .themeIcon.auto {
     height: calc(var(--spacing) * 9);
   }
 
-  .qwik-devtools .h-10 {
-    height: calc(var(--spacing) * 10);
+  .qwik-devtools .h-11 {
+    height: calc(var(--spacing) * 11);
   }
 
   .qwik-devtools .h-12 {
     height: calc(var(--spacing) * 12);
   }
 
+  .qwik-devtools .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
+
   .qwik-devtools .h-\[60vh\] {
     height: 60vh;
   }
@@ -664,14 +668,22 @@ html:not([data-theme]) .themeIcon.auto {
     width: calc(var(--spacing) * 9);
   }
 
-  .qwik-devtools .w-10 {
-    width: calc(var(--spacing) * 10);
+  .qwik-devtools .w-11 {
+    width: calc(var(--spacing) * 11);
   }
 
   .qwik-devtools .w-12 {
     width: calc(var(--spacing) * 12);
   }
 
+  .qwik-devtools .w-14 {
+    width: calc(var(--spacing) * 14);
+  }
+
+  .qwik-devtools .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
+
   .qwik-devtools .w-\[420px\] {
     width: 420px;
   }
@@ -684,6 +696,10 @@ html:not([data-theme]) .themeIcon.auto {
     width: 100%;
   }
 
+  .qwik-devtools .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
+
   .qwik-devtools .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -700,13 +716,26 @@ html:not([data-theme]) .themeIcon.auto {
     flex-shrink: 0;
   }
 
+  .qwik-devtools .origin-bottom-right {
+    transform-origin: 100% 100%;
+  }
+
   .qwik-devtools .origin-center {
     transform-origin: center;
   }
 
-  .qwik-devtools .translate-y-0 {
-    --tw-translate-y: calc(var(--spacing) * 0);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
+  .qwik-devtools .scale-90 {
+    --tw-scale-x: 90%;
+    --tw-scale-y: 90%;
+    --tw-scale-z: 90%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
+  .qwik-devtools .scale-95 {
+    --tw-scale-x: 95%;
+    --tw-scale-y: 95%;
+    --tw-scale-z: 95%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
   }
 
   .qwik-devtools .-rotate-90 {
@@ -721,18 +750,10 @@ html:not([data-theme]) .themeIcon.auto {
     rotate: 180deg;
   }
 
-  .qwik-devtools .transform {
-    transform: var(--tw-rotate-x,  ) var(--tw-rotate-y,  ) var(--tw-rotate-z,  ) var(--tw-skew-x,  ) var(--tw-skew-y,  );
-  }
-
   .qwik-devtools .animate-spin {
     animation: var(--animate-spin);
   }
 
-  .qwik-devtools .cursor-grab {
-    cursor: grab;
-  }
-
   .qwik-devtools .cursor-grabbing {
     cursor: grabbing;
   }
@@ -789,6 +810,10 @@ html:not([data-theme]) .themeIcon.auto {
     justify-content: center;
   }
 
+  .qwik-devtools .justify-start {
+    justify-content: flex-start;
+  }
+
   .qwik-devtools .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -837,6 +862,12 @@ html:not([data-theme]) .themeIcon.auto {
     margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  :where(.qwik-devtools .space-y-8 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
   .qwik-devtools .gap-x-6 {
     column-gap: calc(var(--spacing) * 6);
   }
@@ -847,12 +878,6 @@ html:not([data-theme]) .themeIcon.auto {
     margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
   }
 
-  :where(.qwik-devtools .space-x-4 > :not(:last-child)) {
-    --tw-space-x-reverse: 0;
-    margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
-    margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   .qwik-devtools .gap-y-3 {
     row-gap: calc(var(--spacing) * 3);
   }
@@ -865,8 +890,8 @@ html:not([data-theme]) .themeIcon.auto {
     border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   }
 
-  :where(.qwik-devtools .divide-border > :not(:last-child)) {
-    border-color: var(--color-border);
+  :where(.qwik-devtools .divide-glass-border > :not(:last-child)) {
+    border-color: var(--color-glass-border);
   }
 
   .qwik-devtools .truncate {
@@ -895,6 +920,10 @@ html:not([data-theme]) .themeIcon.auto {
     border-radius: .25rem;
   }
 
+  .qwik-devtools .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
+
   .qwik-devtools .rounded-full {
     border-radius: 3.40282e38px;
   }
@@ -936,11 +965,6 @@ html:not([data-theme]) .themeIcon.auto {
     border-bottom-width: 1px;
   }
 
-  .qwik-devtools .border-b-2 {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 2px;
-  }
-
   .qwik-devtools .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
@@ -956,36 +980,16 @@ html:not([data-theme]) .themeIcon.auto {
     }
   }
 
-  .qwik-devtools .border-accent\/50 {
-    border-color: #16b6f680;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .qwik-devtools .border-accent\/50 {
-      border-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
-    }
-  }
-
   .qwik-devtools .border-border {
     border-color: var(--color-border);
   }
 
-  .qwik-devtools .border-border\/50 {
-    border-color: #e5e7eb80;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .qwik-devtools .border-border\/50 {
-      border-color: color-mix(in oklab, var(--color-border) 50%, transparent);
-    }
-  }
-
   .qwik-devtools .border-current {
     border-color: currentColor;
   }
 
-  .qwik-devtools .border-emerald-300 {
-    border-color: var(--color-emerald-300);
+  .qwik-devtools .border-glass-border {
+    border-color: var(--color-glass-border);
   }
 
   .qwik-devtools .border-primary\/20 {
@@ -1012,10 +1016,6 @@ html:not([data-theme]) .themeIcon.auto {
     border-top-color: #0000;
   }
 
-  .qwik-devtools .border-b-transparent {
-    border-bottom-color: #0000;
-  }
-
   .qwik-devtools .bg-accent {
     background-color: var(--color-accent);
   }
@@ -1024,58 +1024,20 @@ html:not([data-theme]) .themeIcon.auto {
     background-color: var(--color-background);
   }
 
-  .qwik-devtools .bg-background\/90 {
-    background-color: #ffffffe6;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .qwik-devtools .bg-background\/90 {
-      background-color: color-mix(in oklab, var(--color-background) 90%, transparent);
-    }
-  }
-
-  .qwik-devtools .bg-background\/95 {
-    background-color: #fffffff2;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .qwik-devtools .bg-background\/95 {
-      background-color: color-mix(in oklab, var(--color-background) 95%, transparent);
-    }
-  }
-
-  .qwik-devtools .bg-black\/20 {
-    background-color: #0003;
+  .qwik-devtools .bg-black\/50 {
+    background-color: #00000080;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .qwik-devtools .bg-black\/20 {
-      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
+    .qwik-devtools .bg-black\/50 {
+      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
 
-  .qwik-devtools .bg-black\/40 {
-    background-color: #0006;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .qwik-devtools .bg-black\/40 {
-      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
-    }
-  }
-
-  .qwik-devtools .bg-card {
-    background-color: var(--color-card);
-  }
-
   .qwik-devtools .bg-card-item-bg {
     background-color: var(--color-card-item-bg);
   }
 
-  .qwik-devtools .bg-emerald-100 {
-    background-color: var(--color-emerald-100);
-  }
-
   .qwik-devtools .bg-foreground\/5 {
     background-color: #0000000d;
   }
@@ -1106,8 +1068,14 @@ html:not([data-theme]) .themeIcon.auto {
     }
   }
 
-  .qwik-devtools .bg-transparent {
-    background-color: #0000;
+  .qwik-devtools .bg-primary\/15 {
+    background-color: #16b6f626;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .bg-primary\/15 {
+      background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+    }
   }
 
   .qwik-devtools .bg-gradient-to-br {
@@ -1129,6 +1097,11 @@ html:not([data-theme]) .themeIcon.auto {
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .qwik-devtools .from-foreground {
+    --tw-gradient-from: var(--color-foreground);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
   .qwik-devtools .from-primary\/0 {
     --tw-gradient-from: #0000;
   }
@@ -1201,6 +1174,11 @@ html:not([data-theme]) .themeIcon.auto {
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .qwik-devtools .to-muted-foreground {
+    --tw-gradient-to: var(--color-muted-foreground);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
   .qwik-devtools .to-primary\/5 {
     --tw-gradient-to: #16b6f60d;
   }
@@ -1229,6 +1207,11 @@ html:not([data-theme]) .themeIcon.auto {
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .qwik-devtools .bg-clip-text {
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+
   .qwik-devtools .object-cover {
     object-fit: cover;
   }
@@ -1249,10 +1232,6 @@ html:not([data-theme]) .themeIcon.auto {
     padding: calc(var(--spacing) * 2);
   }
 
-  .qwik-devtools .p-2\.5 {
-    padding: calc(var(--spacing) * 2.5);
-  }
-
   .qwik-devtools .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -1273,6 +1252,10 @@ html:not([data-theme]) .themeIcon.auto {
     padding: calc(var(--spacing) * 8);
   }
 
+  .qwik-devtools .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+
   .qwik-devtools .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -1305,8 +1288,8 @@ html:not([data-theme]) .themeIcon.auto {
     padding-block: calc(var(--spacing) * 2);
   }
 
-  .qwik-devtools .py-3 {
-    padding-block: calc(var(--spacing) * 3);
+  .qwik-devtools .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
   }
 
   .qwik-devtools .py-4 {
@@ -1317,12 +1300,16 @@ html:not([data-theme]) .themeIcon.auto {
     padding-block: calc(var(--spacing) * 8);
   }
 
+  .qwik-devtools .pb-1 {
+    padding-bottom: calc(var(--spacing) * 1);
+  }
+
   .qwik-devtools .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
 
-  .qwik-devtools .pb-6 {
-    padding-bottom: calc(var(--spacing) * 6);
+  .qwik-devtools .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
   }
 
   .qwik-devtools .text-center {
@@ -1370,11 +1357,6 @@ html:not([data-theme]) .themeIcon.auto {
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
 
-  .qwik-devtools .text-xl {
-    font-size: var(--text-xl);
-    line-height: var(--tw-leading, var(--text-xl--line-height));
-  }
-
   .qwik-devtools .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -1404,6 +1386,11 @@ html:not([data-theme]) .themeIcon.auto {
     font-weight: var(--font-weight-semibold);
   }
 
+  .qwik-devtools .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
+
   .qwik-devtools .break-all {
     word-break: break-all;
   }
@@ -1424,14 +1411,20 @@ html:not([data-theme]) .themeIcon.auto {
     color: var(--color-blue-400);
   }
 
-  .qwik-devtools .text-emerald-700 {
-    color: var(--color-emerald-700);
-  }
-
   .qwik-devtools .text-foreground {
     color: var(--color-foreground);
   }
 
+  .qwik-devtools .text-foreground\/50 {
+    color: #00000080;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .text-foreground\/50 {
+      color: color-mix(in oklab, var(--color-foreground) 50%, transparent);
+    }
+  }
+
   .qwik-devtools .text-foreground\/70 {
     color: #000000b3;
   }
@@ -1468,6 +1461,16 @@ html:not([data-theme]) .themeIcon.auto {
     }
   }
 
+  .qwik-devtools .text-primary\/80 {
+    color: #16b6f6cc;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .text-primary\/80 {
+      color: color-mix(in oklab, var(--color-primary) 80%, transparent);
+    }
+  }
+
   .qwik-devtools .text-purple-400 {
     color: var(--color-purple-400);
   }
@@ -1476,8 +1479,8 @@ html:not([data-theme]) .themeIcon.auto {
     color: var(--color-red-400);
   }
 
-  .qwik-devtools .text-violet-400 {
-    color: var(--color-violet-400);
+  .qwik-devtools .text-transparent {
+    color: #0000;
   }
 
   .qwik-devtools .text-white {
@@ -1488,17 +1491,20 @@ html:not([data-theme]) .themeIcon.auto {
     opacity: 0;
   }
 
+  .qwik-devtools .opacity-80 {
+    opacity: .8;
+  }
+
   .qwik-devtools .opacity-90 {
     opacity: .9;
   }
 
-  .qwik-devtools .shadow {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  .qwik-devtools .opacity-100 {
+    opacity: 1;
   }
 
-  .qwik-devtools .shadow-lg {
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
+  .qwik-devtools .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -1517,13 +1523,13 @@ html:not([data-theme]) .themeIcon.auto {
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .qwik-devtools .shadow-accent\/35 {
-    --tw-shadow-color: #16b6f659;
+  .qwik-devtools .shadow-accent\/20 {
+    --tw-shadow-color: #16b6f633;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .qwik-devtools .shadow-accent\/35 {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-accent) 35%, transparent) var(--tw-shadow-alpha), transparent);
+    .qwik-devtools .shadow-accent\/20 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-accent) 20%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
 
@@ -1531,9 +1537,9 @@ html:not([data-theme]) .themeIcon.auto {
     --tw-ring-color: var(--color-primary-active);
   }
 
-  .qwik-devtools .drop-shadow-md {
-    --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, #0000001f));
-    --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
+  .qwik-devtools .drop-shadow-\[0_2px_4px_rgba\(0\,0\,0\,0\.2\)\] {
+    --tw-drop-shadow-size: drop-shadow(0 2px 4px var(--tw-drop-shadow-color, #0003));
+    --tw-drop-shadow: var(--tw-drop-shadow-size);
     filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
   }
 
@@ -1541,20 +1547,14 @@ html:not([data-theme]) .themeIcon.auto {
     filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
   }
 
-  .qwik-devtools .backdrop-blur-\[1px\] {
-    --tw-backdrop-blur: blur(1px);
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
-    backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
-  }
-
-  .qwik-devtools .backdrop-blur-lg {
-    --tw-backdrop-blur: blur(var(--blur-lg));
+  .qwik-devtools .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
     backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
   }
 
-  .qwik-devtools .backdrop-blur-md {
-    --tw-backdrop-blur: blur(var(--blur-md));
+  .qwik-devtools .backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
     backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
   }
@@ -1589,6 +1589,11 @@ html:not([data-theme]) .themeIcon.auto {
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .qwik-devtools .duration-150 {
+    --tw-duration: .15s;
+    transition-duration: .15s;
+  }
+
   .qwik-devtools .duration-200 {
     --tw-duration: .2s;
     transition-duration: .2s;
@@ -1599,6 +1604,11 @@ html:not([data-theme]) .themeIcon.auto {
     transition-duration: .3s;
   }
 
+  .qwik-devtools .duration-500 {
+    --tw-duration: .5s;
+    transition-duration: .5s;
+  }
+
   .qwik-devtools .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -1644,12 +1654,23 @@ html:not([data-theme]) .themeIcon.auto {
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
 
+  .qwik-devtools .placeholder\:text-muted-foreground::placeholder {
+    color: var(--color-muted-foreground);
+  }
+
   @media (hover: hover) {
     .qwik-devtools .hover\:-translate-y-0\.5:hover {
       --tw-translate-y: calc(var(--spacing) * -.5);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
 
+    .qwik-devtools .hover\:scale-105:hover {
+      --tw-scale-x: 105%;
+      --tw-scale-y: 105%;
+      --tw-scale-z: 105%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+
     .qwik-devtools .hover\:scale-110:hover {
       --tw-scale-x: 110%;
       --tw-scale-y: 110%;
@@ -1725,6 +1746,15 @@ html:not([data-theme]) .themeIcon.auto {
       opacity: .9;
     }
 
+    .qwik-devtools .hover\:opacity-100:hover {
+      opacity: 1;
+    }
+
+    .qwik-devtools .hover\:shadow-\[0_0_20px_rgba\(22\,182\,246\,0\.5\)\]:hover {
+      --tw-shadow: 0 0 20px var(--tw-shadow-color, #16b6f680);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+
     .qwik-devtools .hover\:shadow-lg:hover {
       --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1741,13 +1771,16 @@ html:not([data-theme]) .themeIcon.auto {
     }
   }
 
-  .qwik-devtools .focus\:ring-primary-active:focus {
-    --tw-ring-color: var(--color-primary-active);
+  .qwik-devtools .focus\:ring-0:focus {
+    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .qwik-devtools .focus\:ring-offset-0:focus {
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,  ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  .qwik-devtools .active\:scale-95:active {
+    --tw-scale-x: 95%;
+    --tw-scale-y: 95%;
+    --tw-scale-z: 95%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
   }
 
   @media (min-width: 40rem) {
@@ -1765,6 +1798,14 @@ html:not([data-theme]) .themeIcon.auto {
       margin-top: calc(var(--spacing) * 6);
     }
 
+    .qwik-devtools .md\:w-20 {
+      width: calc(var(--spacing) * 20);
+    }
+
+    .qwik-devtools .md\:w-\[90vw\] {
+      width: 90vw;
+    }
+
     .qwik-devtools .md\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -1783,6 +1824,10 @@ html:not([data-theme]) .themeIcon.auto {
   }
 
   @media (min-width: 64rem) {
+    .qwik-devtools .lg\:w-\[85vw\] {
+      width: 85vw;
+    }
+
     .qwik-devtools .lg\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
@@ -1792,44 +1837,6 @@ html:not([data-theme]) .themeIcon.auto {
     }
   }
 
-  @media (prefers-color-scheme: dark) {
-    .qwik-devtools .dark\:border-\[\#374151\] {
-      border-color: #374151;
-    }
-
-    .qwik-devtools .dark\:border-emerald-700\/40 {
-      border-color: #00795666;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .qwik-devtools .dark\:border-emerald-700\/40 {
-        border-color: color-mix(in oklab, var(--color-emerald-700) 40%, transparent);
-      }
-    }
-
-    .qwik-devtools .dark\:bg-\[\#1F2937\] {
-      background-color: #1f2937;
-    }
-
-    .qwik-devtools .dark\:bg-emerald-900\/30 {
-      background-color: #004e3b4d;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .qwik-devtools .dark\:bg-emerald-900\/30 {
-        background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);
-      }
-    }
-
-    .qwik-devtools .dark\:text-emerald-300 {
-      color: var(--color-emerald-300);
-    }
-
-    .qwik-devtools .dark\:text-violet-300 {
-      color: var(--color-violet-300);
-    }
-  }
-
   .custom-scrollbar {
     scrollbar-width: thin;
     scrollbar-color: var(--color-scrollbar-thumb) transparent;
@@ -1837,6 +1844,7 @@ html:not([data-theme]) .themeIcon.auto {
 
   .custom-scrollbar::-webkit-scrollbar {
     width: 6px;
+    height: 6px;
   }
 
   .custom-scrollbar::-webkit-scrollbar-track {
@@ -1845,30 +1853,48 @@ html:not([data-theme]) .themeIcon.auto {
 
   .custom-scrollbar::-webkit-scrollbar-thumb {
     background-color: var(--color-scrollbar-thumb);
-    border-radius: 20px;
+    border-radius: 9999px;
   }
 
   .custom-scrollbar::-webkit-scrollbar-thumb:hover {
     background-color: var(--color-scrollbar-thumb-hover);
   }
+
+  .glass-panel {
+    background-color: var(--color-glass-panel-bg);
+    -webkit-backdrop-filter: blur(24px);
+    border: 1px solid var(--color-glass-border);
+    box-shadow: 0 8px 32px 0 var(--color-glass-shadow);
+  }
+
+  .glass-button {
+    background-color: var(--color-glass-bg);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--color-glass-border);
+    box-shadow: 0 4px 16px 0 var(--color-glass-shadow);
+  }
 }
 
 :root {
   --theme-name: "light";
-  --color-background: #fff;
-  --color-foreground: #000;
+  --color-background: #fdfdfd;
+  --color-foreground: #09090b;
   --color-primary: #16b6f6;
   --color-primary-hover: #38bdf8;
   --color-primary-active: #0ea5e9;
-  --color-secondary: #6b7280;
-  --color-border: #e5e7eb;
-  --color-card: #f2f2f2;
+  --color-secondary: #71717a;
+  --color-border: #e4e4e7;
+  --color-card: #fff9;
   --color-card-item-bg: #00000005;
-  --color-card-item-hover-bg: #00000008;
-  --color-scrollbar-thumb: #d1d5db;
-  --color-scrollbar-thumb-hover: #a1a1aa;
-  --color-muted: #9ca3af;
-  --color-muted-foreground: #6b7280;
+  --color-card-item-hover-bg: #0000000a;
+  --color-glass-border: #fff9;
+  --color-glass-bg: #ffffffd9;
+  --color-glass-panel-bg: #fafafabf;
+  --color-glass-shadow: #00000014;
+  --color-scrollbar-thumb: #a1a1aa80;
+  --color-scrollbar-thumb-hover: #71717ab3;
+  --color-muted: #a1a1aa;
+  --color-muted-foreground: #71717a;
   --color-accent: #16b6f6;
   --color-input: var(--color-border);
   --color-ring: var(--color-primary);
@@ -1876,20 +1902,24 @@ html:not([data-theme]) .themeIcon.auto {
 
 :root[data-theme="dark"] {
   --theme-name: "dark";
-  --color-background: #18181b;
-  --color-foreground: #fff;
+  --color-background: #09090b;
+  --color-foreground: #fafafa;
   --color-primary: #16b6f6;
   --color-primary-hover: #38bdf8;
   --color-primary-active: #0ea5e9;
-  --color-secondary: #9ca3af;
-  --color-border: #374151;
-  --color-card: #27272a;
+  --color-secondary: #a1a1aa;
+  --color-border: #27272a;
+  --color-card: #18181b99;
   --color-card-item-bg: #ffffff08;
-  --color-card-item-hover-bg: #ffffff0d;
-  --color-scrollbar-thumb: #3f3f46;
-  --color-scrollbar-thumb-hover: #52525b;
-  --color-muted: #374151;
-  --color-muted-foreground: #9ca3af;
+  --color-card-item-hover-bg: #ffffff0f;
+  --color-glass-border: #ffffff14;
+  --color-glass-bg: #09090bd9;
+  --color-glass-panel-bg: #18181bbf;
+  --color-glass-shadow: #0000004d;
+  --color-scrollbar-thumb: #52525b80;
+  --color-scrollbar-thumb-hover: #71717ab3;
+  --color-muted: #27272a;
+  --color-muted-foreground: #a1a1aa;
   --color-accent: #16b6f6;
   --color-input: var(--color-border);
   --color-ring: var(--color-primary);
@@ -1898,65 +1928,83 @@ html:not([data-theme]) .themeIcon.auto {
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
     --theme-name: "dark";
-    --color-background: #18181b;
-    --color-foreground: #fff;
+    --color-background: #09090b;
+    --color-foreground: #fafafa;
     --color-primary: #16b6f6;
-    --color-secondary: #9ca3af;
-    --color-border: #374151;
-    --color-card: #27272a;
+    --color-primary-hover: #38bdf8;
+    --color-primary-active: #0ea5e9;
+    --color-secondary: #a1a1aa;
+    --color-border: #27272a;
+    --color-card: #18181b99;
     --color-card-item-bg: #ffffff08;
-    --color-card-item-hover-bg: #ffffff0d;
-    --color-scrollbar-thumb: #3f3f46;
-    --color-scrollbar-thumb-hover: #52525b;
-    --color-muted: #374151;
-    --color-muted-foreground: #9ca3af;
+    --color-card-item-hover-bg: #ffffff0f;
+    --color-glass-border: #ffffff14;
+    --color-glass-bg: #09090bd9;
+    --color-glass-panel-bg: #18181bbf;
+    --color-glass-shadow: #0000004d;
+    --color-scrollbar-thumb: #52525b80;
+    --color-scrollbar-thumb-hover: #71717ab3;
+    --color-muted: #27272a;
+    --color-muted-foreground: #a1a1aa;
     --color-accent: #16b6f6;
     --color-input: var(--color-border);
     --color-ring: var(--color-primary);
   }
 }
 
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
+@keyframes slideUpFade {
+  from {
+    opacity: 0;
+    transform: translateY(20px)scale(.98);
+  }
 
-@property --tw-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
+  to {
+    opacity: 1;
+    transform: translateY(0)scale(1);
+  }
 }
 
-@property --tw-translate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
+@keyframes pulsePulsar {
+  0% {
+    transform: scale(.95);
+    box-shadow: 0 0 #16b6f6b3;
+  }
+
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px #16b6f600;
+  }
+
+  100% {
+    transform: scale(.95);
+    box-shadow: 0 0 #16b6f600;
+  }
 }
 
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false
+.animate-slide-up-fade {
+  animation: .4s cubic-bezier(.16, 1, .3, 1) forwards slideUpFade;
 }
 
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false
+.animate-pulsar {
+  animation: 2s infinite pulsePulsar;
 }
 
-@property --tw-rotate-z {
+@property --tw-scale-x {
   syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: 1;
 }
 
-@property --tw-skew-x {
+@property --tw-scale-y {
   syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: 1;
 }
 
-@property --tw-skew-y {
+@property --tw-scale-z {
   syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: 1;
 }
 
 @property --tw-space-y-reverse {
@@ -2044,6 +2092,11 @@ html:not([data-theme]) .themeIcon.auto {
   inherits: false
 }
 
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false
+}
+
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -2244,22 +2297,22 @@ html:not([data-theme]) .themeIcon.auto {
   inherits: false
 }
 
-@property --tw-scale-x {
+@property --tw-translate-x {
   syntax: "*";
   inherits: false;
-  initial-value: 1;
+  initial-value: 0;
 }
 
-@property --tw-scale-y {
+@property --tw-translate-y {
   syntax: "*";
   inherits: false;
-  initial-value: 1;
+  initial-value: 0;
 }
 
-@property --tw-scale-z {
+@property --tw-translate-z {
   syntax: "*";
   inherits: false;
-  initial-value: 1;
+  initial-value: 0;
 }
 
 @keyframes spin {