@mrintel/villain-ui 0.8.2 → 0.9.1

package/dist/theme.css

@@ -5,7 +5,7 @@
   :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --font-mono: 'JetBrains Mono', monospace;
+    --font-mono: 'IBM Plex Mono', monospace;
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-neutral-400: oklch(70.8% 0 0);
@@ -42,19 +42,19 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --tracking-normal: 0em;
     --tracking-wide: 0.025em;
     --tracking-wider: 0.05em;
     --leading-tight: 1.25;
     --leading-snug: 1.375;
     --leading-relaxed: 1.625;
-    --radius-sm: 6px;
-    --radius-md: 10px;
-    --radius-lg: 14px;
-    --radius-xl: 18px;
-    --radius-2xl: 24px;
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-lg: 6px;
+    --radius-xl: 8px;
+    --radius-2xl: 8px;
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
-    --blur-md: 12px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -63,9 +63,9 @@
     --color-base-1: #121212;
     --color-base-2: #1a1a1a;
     --color-base-3: #242424;
-    --color-accent: #6b21a8;
+    --color-accent: #621d9e;
     --color-accent-soft: #8b5cf6;
-    --color-accent-dark: #581c87;
+    --color-accent-dark: #521a80;
     --color-secondary: #3b82f6;
     --color-crimson: #ef4444;
     --color-text: #e0e0e0;
@@ -77,12 +77,14 @@
     --color-info: #0891b2;
     --color-surface: var(--color-base-1);
     --color-panel: var(--color-base-2);
-    --color-overlay: color-mix(in srgb, black 75%, transparent);
+    --color-overlay: color-mix(in srgb, black 85%, transparent);
+    --color-border-subtle: color-mix(in srgb, white 8%, transparent);
     --color-border: color-mix(in srgb, white 15%, transparent);
-    --color-border-strong: color-mix(in srgb, white 20%, transparent);
+    --color-border-strong: color-mix(in srgb, white 25%, transparent);
+    --color-border-bright: color-mix(in srgb, white 35%, transparent);
     --color-border-glow: color-mix(
 		in srgb,
-		#6b21a8 30%,
+		#621d9e 30%,
 		transparent
 	);
     @supports (color: color-mix(in lab, red, red)) {
@@ -92,9 +94,10 @@
 		transparent
 	);
     }
+    --color-border-metal: color-mix(in srgb, white 25%, transparent);
     --color-accent-overlay-5: color-mix(
 		in srgb,
-		#6b21a8 5%,
+		#621d9e 5%,
 		transparent
 	);
     @supports (color: color-mix(in lab, red, red)) {
@@ -106,7 +109,7 @@
     }
     --color-accent-overlay-10: color-mix(
 		in srgb,
-		#6b21a8 10%,
+		#621d9e 10%,
 		transparent
 	);
     @supports (color: color-mix(in lab, red, red)) {
@@ -118,7 +121,7 @@
     }
     --color-accent-overlay-15: color-mix(
 		in srgb,
-		#6b21a8 15%,
+		#621d9e 15%,
 		transparent
 	);
     @supports (color: color-mix(in lab, red, red)) {
@@ -130,7 +133,7 @@
     }
     --color-accent-overlay-20: color-mix(
 		in srgb,
-		#6b21a8 20%,
+		#621d9e 20%,
 		transparent
 	);
     @supports (color: color-mix(in lab, red, red)) {
@@ -142,7 +145,7 @@
     }
     --color-accent-overlay-30: color-mix(
 		in srgb,
-		#6b21a8 30%,
+		#621d9e 30%,
 		transparent
 	);
     @supports (color: color-mix(in lab, red, red)) {
@@ -154,7 +157,7 @@
     }
     --color-accent-overlay-50: color-mix(
 		in srgb,
-		#6b21a8 50%,
+		#621d9e 50%,
 		transparent
 	);
     @supports (color: color-mix(in lab, red, red)) {
@@ -166,7 +169,7 @@
     }
     --color-accent-overlay-70: color-mix(
 		in srgb,
-		#6b21a8 70%,
+		#621d9e 70%,
 		transparent
 	);
     @supports (color: color-mix(in lab, red, red)) {
@@ -310,15 +313,11 @@
 		transparent
 	);
     }
-    --shadow-accent-glow: 0 0 20px
-			color-mix(in srgb, #6b21a8 50%, transparent),
-		0 0 40px color-mix(in srgb, #6b21a8 30%, transparent),
-		0 0 60px color-mix(in srgb, #6b21a8 15%, transparent);
+    --shadow-accent-glow: 0 0 12px
+		color-mix(in srgb, #621d9e 25%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      --shadow-accent-glow: 0 0 20px
-			color-mix(in srgb, var(--color-accent) 50%, transparent),
-		0 0 40px color-mix(in srgb, var(--color-accent) 30%, transparent),
-		0 0 60px color-mix(in srgb, var(--color-accent) 15%, transparent);
+      --shadow-accent-glow: 0 0 12px
+		color-mix(in srgb, var(--color-accent) 25%, transparent);
     }
     --shadow-error-glow: 0 0 20px
 		color-mix(in srgb, #ef4444 30%, transparent);
@@ -326,44 +325,42 @@
       --shadow-error-glow: 0 0 20px
 		color-mix(in srgb, var(--color-error) 30%, transparent);
     }
-    --shadow-deep: 0 10px 40px color-mix(in srgb, black 60%, transparent);
-    --shadow-text-glow: 0 0 20px
-			color-mix(in srgb, #6b21a8 60%, transparent),
-		0 0 40px color-mix(in srgb, #6b21a8 40%, transparent);
+    --shadow-deep: 0 8px 24px color-mix(in srgb, black 40%, transparent);
+    --shadow-text-glow: 0 0 16px
+		color-mix(in srgb, #621d9e 35%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      --shadow-text-glow: 0 0 20px
-			color-mix(in srgb, var(--color-accent) 60%, transparent),
-		0 0 40px color-mix(in srgb, var(--color-accent) 40%, transparent);
+      --shadow-text-glow: 0 0 16px
+		color-mix(in srgb, var(--color-accent) 35%, transparent);
     }
-    --glass-panel-background: color-mix(in srgb, white 5%, transparent);
-    --glass-panel-blur: 12px;
+    --glass-panel-background: var(--color-base-1);
+    --glass-panel-blur: 0px;
     --radius-none: 0px;
     --radius-pill: 999px;
-    --font-heading: 'Inter', sans-serif;
-    --font-body: 'Inter', sans-serif;
+    --font-heading: 'Archivo', sans-serif;
+    --font-body: 'Archivo', sans-serif;
     --text-h1-size: 3.5rem;
-    --text-h1-line-height: 1.2;
-    --text-h1-weight: 700;
-    --text-h1-letter-spacing: -0.02em;
+    --text-h1-line-height: 1.1;
+    --text-h1-weight: 900;
+    --text-h1-letter-spacing: -0.03em;
     --text-h2-size: 2.5rem;
-    --text-h2-line-height: 1.25;
-    --text-h2-weight: 600;
-    --text-h2-letter-spacing: -0.015em;
+    --text-h2-line-height: 1.15;
+    --text-h2-weight: 900;
+    --text-h2-letter-spacing: -0.03em;
     --text-h3-size: 2rem;
-    --text-h3-line-height: 1.3;
-    --text-h3-weight: 600;
-    --text-h3-letter-spacing: -0.01em;
+    --text-h3-line-height: 1.2;
+    --text-h3-weight: 800;
+    --text-h3-letter-spacing: -0.02em;
     --text-h4-size: 1.5rem;
-    --text-h4-line-height: 1.35;
-    --text-h4-weight: 600;
-    --text-h4-letter-spacing: -0.01em;
+    --text-h4-line-height: 1.3;
+    --text-h4-weight: 700;
+    --text-h4-letter-spacing: -0.015em;
     --text-h5-size: 1.25rem;
     --text-h5-line-height: 1.4;
-    --text-h5-weight: 500;
-    --text-h5-letter-spacing: -0.005em;
+    --text-h5-weight: 600;
+    --text-h5-letter-spacing: -0.01em;
     --text-h6-size: 1rem;
     --text-h6-line-height: 1.5;
-    --text-h6-weight: 500;
+    --text-h6-weight: 600;
     --text-h6-letter-spacing: 0;
     --text-body-size: 1rem;
     --text-body-line-height: 1.6;
@@ -733,6 +730,9 @@
       max-width: 96rem;
     }
   }
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
   .mx-0 {
     margin-inline: calc(var(--spacing) * 0);
   }
@@ -781,6 +781,9 @@
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -811,12 +814,18 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .mb-5 {
+    margin-bottom: calc(var(--spacing) * 5);
+  }
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
+  .mb-12 {
+    margin-bottom: calc(var(--spacing) * 12);
+  }
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
@@ -1159,26 +1168,23 @@
   .animate-\[fade-out_0\.2s_var\(--ease-sharp\)\] {
     animation: fade-out 0.2s var(--ease-sharp);
   }
-  .animate-\[fade-up_0\.2s_var\(--ease-luxe\)\] {
-    animation: fade-up 0.2s var(--ease-luxe);
-  }
-  .animate-\[fade-up_0\.3s_var\(--ease-luxe\)\] {
-    animation: fade-up 0.3s var(--ease-luxe);
+  .animate-\[scale-in_0\.2s_var\(--ease-sharp\)\] {
+    animation: scale-in 0.2s var(--ease-sharp);
   }
-  .animate-\[glow-pulse_3s_ease-in-out_infinite\] {
-    animation: glow-pulse 3s ease-in-out infinite;
+  .animate-\[scale-in_0\.15s_var\(--ease-sharp\)\] {
+    animation: scale-in 0.15s var(--ease-sharp);
   }
-  .animate-\[slide-in-bottom_0\.3s_var\(--ease-luxe\)\] {
-    animation: slide-in-bottom 0.3s var(--ease-luxe);
+  .animate-\[slide-in-bottom_0\.2s_var\(--ease-sharp\)\] {
+    animation: slide-in-bottom 0.2s var(--ease-sharp);
   }
-  .animate-\[slide-in-left_0\.3s_var\(--ease-luxe\)\] {
-    animation: slide-in-left 0.3s var(--ease-luxe);
+  .animate-\[slide-in-left_0\.2s_var\(--ease-sharp\)\] {
+    animation: slide-in-left 0.2s var(--ease-sharp);
   }
-  .animate-\[slide-in-right_0\.3s_var\(--ease-luxe\)\] {
-    animation: slide-in-right 0.3s var(--ease-luxe);
+  .animate-\[slide-in-right_0\.2s_var\(--ease-sharp\)\] {
+    animation: slide-in-right 0.2s var(--ease-sharp);
   }
-  .animate-\[slide-in-top_0\.3s_var\(--ease-luxe\)\] {
-    animation: slide-in-top 0.3s var(--ease-luxe);
+  .animate-\[slide-in-top_0\.2s_var\(--ease-sharp\)\] {
+    animation: slide-in-top 0.2s var(--ease-sharp);
   }
   .animate-\[step-error-shake_0\.4s_var\(--step-ease\)\] {
     animation: step-error-shake 0.4s var(--step-ease);
@@ -1282,6 +1288,9 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-5 {
+    gap: calc(var(--spacing) * 5);
+  }
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
@@ -1354,9 +1363,6 @@
   .rounded-\[var\(--radius-sm\)\] {
     border-radius: var(--radius-sm);
   }
-  .rounded-\[var\(--radius-xl\)\] {
-    border-radius: var(--radius-xl);
-  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -1366,19 +1372,23 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .rounded-none {
+    border-radius: var(--radius-none);
+  }
   .rounded-pill {
     border-radius: var(--radius-pill);
   }
   .rounded-sm {
     border-radius: var(--radius-sm);
   }
-  .rounded-xl {
-    border-radius: var(--radius-xl);
-  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -1387,6 +1397,10 @@
     border-style: var(--tw-border-style);
     border-width: 4px;
   }
+  .border-\[1\.5px\] {
+    border-style: var(--tw-border-style);
+    border-width: 1.5px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1436,12 +1450,18 @@
   .border-\[var\(--color-border\)\] {
     border-color: var(--color-border);
   }
+  .border-\[var\(--color-border-bright\)\] {
+    border-color: var(--color-border-bright);
+  }
   .border-\[var\(--color-border-glow\)\] {
     border-color: var(--color-border-glow);
   }
   .border-\[var\(--color-border-strong\)\] {
     border-color: var(--color-border-strong);
   }
+  .border-\[var\(--color-border-subtle\)\] {
+    border-color: var(--color-border-subtle);
+  }
   .border-\[var\(--color-error\)\] {
     border-color: var(--color-error);
   }
@@ -1544,6 +1564,9 @@
   .bg-\[var\(--color-info-overlay-10\)\] {
     background-color: var(--color-info-overlay-10);
   }
+  .bg-\[var\(--color-neutral-overlay-2\)\] {
+    background-color: var(--color-neutral-overlay-2);
+  }
   .bg-\[var\(--color-secondary-overlay-10\)\] {
     background-color: var(--color-secondary-overlay-10);
   }
@@ -1587,7 +1610,7 @@
     background-color: var(--color-accent-overlay-10);
   }
   .bg-accent\/20 {
-    background-color: color-mix(in srgb, #6b21a8 0.2, transparent);
+    background-color: color-mix(in srgb, #621d9e 0.2, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-accent) var(--opacity-20), transparent);
     }
@@ -1658,9 +1681,15 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
+  .px-3\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -1709,9 +1738,6 @@
   .pt-0\.5 {
     padding-top: calc(var(--spacing) * 0.5);
   }
-  .pt-3 {
-    padding-top: calc(var(--spacing) * 3);
-  }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -1825,6 +1851,10 @@
     --tw-font-weight: var(--font-heading);
     font-weight: var(--font-heading);
   }
+  .font-\[var\(--font-mono\)\] {
+    --tw-font-weight: var(--font-mono);
+    font-weight: var(--font-mono);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -1837,6 +1867,14 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-\[0\.08em\] {
+    --tw-tracking: 0.08em;
+    letter-spacing: 0.08em;
+  }
+  .tracking-normal {
+    --tw-tracking: var(--tracking-normal);
+    letter-spacing: var(--tracking-normal);
+  }
   .tracking-wide {
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
@@ -1941,6 +1979,9 @@
   .lowercase {
     text-transform: lowercase;
   }
+  .normal-case {
+    text-transform: none;
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -1991,10 +2032,6 @@
     --tw-shadow: 0 0 12px var(--tw-shadow-color, var(--step-error-glow));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[0_0_20px_var\(--color-error-overlay-30\)\] {
-    --tw-shadow: 0 0 20px var(--tw-shadow-color, var(--color-error-overlay-30));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-\[0_0_20px_var\(--step-active-glow\)\] {
     --tw-shadow: 0 0 20px var(--tw-shadow-color, var(--step-active-glow));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2004,7 +2041,7 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-deep {
-    --tw-shadow: 0 10px 40px var(--tw-shadow-color, color-mix(in srgb, black 60%, transparent));
+    --tw-shadow: 0 8px 24px var(--tw-shadow-color, color-mix(in srgb, black 40%, transparent));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-xl {
@@ -2040,11 +2077,6 @@
   .filter {
     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,);
   }
-  .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,);
-  }
   .backdrop-filter {
     -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,);
@@ -2159,26 +2191,6 @@
       background-color: var(--color-accent);
     }
   }
-  .hover\:scale-105 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-scale-x: 105%;
-        --tw-scale-y: 105%;
-        --tw-scale-z: 105%;
-        scale: var(--tw-scale-x) var(--tw-scale-y);
-      }
-    }
-  }
-  .hover\:scale-110 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-scale-x: 110%;
-        --tw-scale-y: 110%;
-        --tw-scale-z: 110%;
-        scale: var(--tw-scale-x) var(--tw-scale-y);
-      }
-    }
-  }
   .hover\:scale-\[1\.01\] {
     &:hover {
       @media (hover: hover) {
@@ -2186,17 +2198,17 @@
       }
     }
   }
-  .hover\:scale-\[1\.02\] {
+  .hover\:border-\[var\(--color-accent\)\] {
     &:hover {
       @media (hover: hover) {
-        scale: 1.02;
+        border-color: var(--color-accent);
       }
     }
   }
-  .hover\:border-\[var\(--color-accent\)\] {
+  .hover\:border-\[var\(--color-border-strong\)\] {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-accent);
+        border-color: var(--color-border-strong);
       }
     }
   }
@@ -2214,6 +2226,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--color-accent-soft\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-accent-soft);
+      }
+    }
+  }
   .hover\:bg-\[var\(--color-base-2\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2326,14 +2345,6 @@
       }
     }
   }
-  .hover\:shadow-\[0_0_12px_var\(--color-accent-overlay-30\)\] {
-    &:hover {
-      @media (hover: hover) {
-        --tw-shadow: 0 0 12px var(--tw-shadow-color, var(--color-accent-overlay-30));
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
   .hover\:shadow-\[var\(--shadow-accent-glow\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2342,7 +2353,7 @@
       }
     }
   }
-  .focus\:border-accent {
+  .focus\:border-\[var\(--color-accent\)\] {
     &:focus {
       border-color: var(--color-accent);
     }
@@ -2385,6 +2396,12 @@
       outline-style: none;
     }
   }
+  .active\:translate-y-px {
+    &:active {
+      --tw-translate-y: 1px;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .disabled\:cursor-not-allowed {
     &:disabled {
       cursor: not-allowed;
@@ -2518,6 +2535,12 @@
     }
   }
 }
+[data-display='bodoni'] {
+  --font-heading: 'Bodoni Moda', serif;
+}
+[data-display='oswald'] {
+  --font-heading: 'Oswald', sans-serif;
+}
 * {
   box-sizing: border-box;
 }
@@ -2531,11 +2554,11 @@
 }
 ::-webkit-scrollbar-track {
   background: var(--color-base-2);
-  border-radius: var(--radius-sm);
+  border-radius: 0;
 }
 ::-webkit-scrollbar-thumb {
   background: var(--color-accent-overlay-30);
-  border-radius: var(--radius-sm);
+  border-radius: 0;
   border: 2px solid var(--color-base-2);
   transition: background 0.2s var(--ease-luxe);
 }
@@ -2615,26 +2638,17 @@ code,
 pre {
   font-family: var(--font-mono);
 }
-select:focus {
-  box-shadow: 0 0 0 2px var(--color-accent-overlay-20),
-		var(--shadow-accent-glow);
-  border-color: var(--color-accent);
-}
-input:focus {
-  box-shadow: 0 0 0 2px var(--color-accent-overlay-20),
-		var(--shadow-accent-glow);
-  border-color: var(--color-accent);
-}
+select:focus,
+input:focus,
 textarea:focus {
-  box-shadow: 0 0 0 2px var(--color-accent-overlay-20),
-		var(--shadow-accent-glow);
+  outline: none;
   border-color: var(--color-accent);
+  box-shadow: 0 0 0 1px var(--color-accent);
 }
 .glass-panel {
-  backdrop-filter: blur(var(--glass-panel-blur));
   background: var(--glass-panel-background);
   border: 1px solid var(--color-border);
-  box-shadow: var(--shadow-deep);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
 }
 .panel-base {
   background: linear-gradient(
@@ -2642,7 +2656,7 @@ textarea:focus {
 		var(--color-base-1),
 		var(--color-base-0)
 	);
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-border-subtle);
   box-shadow: none;
 }
 .panel-raised {
@@ -2651,8 +2665,10 @@ textarea:focus {
 		var(--color-base-2),
 		var(--color-base-1)
 	);
-  border: 1px solid var(--color-border);
-  box-shadow: 0 6px 18px color-mix(in srgb, black 55%, transparent);
+  border: 1px solid var(--color-border-strong);
+  border-top-color: color-mix(in srgb, white 28%, transparent);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent),
+		0 2px 12px color-mix(in srgb, black 45%, transparent);
 }
 .panel-floating {
   background: linear-gradient(
@@ -2661,25 +2677,29 @@ textarea:focus {
 		var(--color-base-2)
 	);
   border: 1px solid var(--color-border-strong);
-  box-shadow: 0 12px 30px color-mix(in srgb, black 65%, transparent);
+  border-top-color: color-mix(in srgb, white 32%, transparent);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent),
+		var(--shadow-deep);
 }
 .panel-spectral {
   background: linear-gradient(
 		180deg,
-		color-mix(in srgb, #1a1a1a 92%, black),
-		color-mix(in srgb, #121212 96%, black)
+		color-mix(in srgb, #0a0a0a 55%, #121212),
+		var(--color-base-1)
 	);
   @supports (color: color-mix(in lab, red, red)) {
     background: linear-gradient(
 		180deg,
-		color-mix(in srgb, var(--color-base-2) 92%, black),
-		color-mix(in srgb, var(--color-base-1) 96%, black)
+		color-mix(in srgb, var(--color-base-0) 55%, var(--color-base-1)),
+		var(--color-base-1)
 	);
   }
   border: 1px solid var(--color-border);
-  box-shadow: 0 10px 28px color-mix(in srgb, black 70%, transparent);
+  border-bottom-color: color-mix(in srgb, white 22%, transparent);
+  box-shadow: inset 0 2px 10px color-mix(in srgb, black 45%, transparent);
 }
-.glass-panel.error-state {
+.glass-panel.error-state,
+.input-well.error-state {
   border-color: var(--color-error) !important;
   box-shadow: 0 0 0 3px var(--color-error-overlay-10),
 		var(--shadow-error-glow);
@@ -2688,11 +2708,18 @@ textarea:focus {
   box-shadow: var(--shadow-accent-glow);
 }
 .hover-lift {
-  transition: all 0.3s var(--ease-sharp);
+  transition: border-color 180ms var(--ease-sharp),
+		transform 180ms var(--ease-sharp),
+		filter 180ms var(--ease-sharp),
+		background-color 180ms var(--ease-sharp);
 }
 .hover-lift:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-accent-glow), var(--shadow-deep);
+  border-color: var(--color-border-bright);
+  transform: translateY(-2px);
+  filter: brightness(1.08);
+}
+.hover-lift:active {
+  transform: translateY(0);
 }
 .drag-child {
   transition: all var(--duration-200) var(--ease-luxe);
@@ -2816,6 +2843,31 @@ textarea:focus {
   border-top: 1px solid var(--color-border-metal);
   border-left: 0.5px solid var(--color-border-metal);
 }
+.machined {
+  box-shadow: inset 0 1px 0 color-mix(in srgb, white 14%, transparent),
+		inset 0 -1px 0 color-mix(in srgb, black 25%, transparent),
+		0 1px 3px color-mix(in srgb, black 40%, transparent);
+}
+.accent-edge {
+  border-left: 2px solid var(--color-accent);
+}
+.input-well {
+  background: color-mix(in srgb, #0a0a0a 50%, #121212);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in srgb, var(--color-base-0) 50%, var(--color-base-1));
+  }
+  border: 1px solid var(--color-border);
+  box-shadow: inset 0 1px 3px color-mix(in srgb, black 35%, transparent);
+  transition: background-color 180ms var(--ease-sharp),
+		border-color 180ms var(--ease-sharp),
+		transform 180ms var(--ease-sharp),
+		box-shadow 180ms var(--ease-sharp);
+}
+.input-well:focus,
+.input-well:focus-within {
+  background: var(--color-base-1);
+  transform: translateY(-1px);
+}
 .obsidian-surface {
   background: linear-gradient(
 		145deg,
@@ -2833,8 +2885,8 @@ textarea:focus {
 .sidebar-collapsed-letter {
   width: 2.5rem;
   height: 2.5rem;
-  border-radius: var(--radius-pill);
-  background: color-mix(in srgb, #6b21a8 20%, transparent);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, #621d9e 20%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
     background: color-mix(in srgb, var(--color-accent) 20%, transparent);
   }
@@ -3116,49 +3168,14 @@ textarea:focus {
     opacity: 1;
   }
 }
-@keyframes fade-up {
+@keyframes scale-in {
   from {
     opacity: 0;
-    transform: translateY(20px);
+    transform: scale(0.98);
   }
   to {
     opacity: 1;
-    transform: translateY(0);
-  }
-}
-@keyframes glow-pulse {
-  0%,
-		100% {
-    box-shadow: 0 0 20px
-					color-mix(in srgb, #6b21a8 50%, transparent),
-				0 0 40px
-					color-mix(in srgb, #6b21a8 30%, transparent),
-				0 0 60px
-					color-mix(in srgb, #6b21a8 15%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      box-shadow: 0 0 20px
-					color-mix(in srgb, var(--color-accent) 50%, transparent),
-				0 0 40px
-					color-mix(in srgb, var(--color-accent) 30%, transparent),
-				0 0 60px
-					color-mix(in srgb, var(--color-accent) 15%, transparent);
-    }
-  }
-  50% {
-    box-shadow: 0 0 30px
-					color-mix(in srgb, #6b21a8 70%, transparent),
-				0 0 60px
-					color-mix(in srgb, #6b21a8 40%, transparent),
-				0 0 90px
-					color-mix(in srgb, #6b21a8 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      box-shadow: 0 0 30px
-					color-mix(in srgb, var(--color-accent) 70%, transparent),
-				0 0 60px
-					color-mix(in srgb, var(--color-accent) 40%, transparent),
-				0 0 90px
-					color-mix(in srgb, var(--color-accent) 20%, transparent);
-    }
+    transform: scale(1);
   }
 }
 @keyframes fade-out {