nitrostack 1.0.71 → 1.0.72

package/src/studio/app/globals.css

@@ -1,110 +1,152 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@layer utilities {
+  .animate-spin-slow {
+    animation: spin 3s linear infinite;
+  }
+}
+
 @layer base {
   :root {
-    /* Nitrocloud Light Theme - Following Branding Guidelines */
-    --background: 0 0% 100%;
-    /* #FFFFFF */
-    --foreground: 222.2 84% 4.9%;
-    /* #020617 - Near black */
+    /* MCP Brand - Light Mode Palette */
+    /* Background */
+    --background: 246 247 250;
+    /* #F5F6FA - canvas */
+    --foreground: 234 8 9;
+    /* #121217 - slateInk */
     --card: 0 0% 100%;
+    /* #FFFFFF - white */
+    --card-foreground: 234 8 9;
+    /* #121217 */
+
+    /* Primary: CoolMint */
+    --primary: 173 60% 44%;
+    /* #2AB5A5 */
+    --primary-foreground: 0 0% 100%;
     /* #FFFFFF */
-    --card-foreground: 222.2 84% 4.9%;
-    /* #020617 */
-    --popover: 0 0% 100%;
+
+    /* Secondary/Accent: SignalBlue */
+    --secondary: 217 89% 61%;
+    /* #3B82F6 */
+    --secondary-foreground: 0 0% 100%;
     /* #FFFFFF */
-    --popover-foreground: 222.2 84% 4.9%;
-    /* #020617 */
-    --primary: 217 91% 60%;
-    /* #3B9FFF - Nitrocloud Blue */
-    --primary-foreground: 210 40% 98%;
-    /* #F8FAFC */
-    --secondary: 210 40% 96.1%;
-    /* #F1F5F9 */
-    --secondary-foreground: 222.2 84% 4.9%;
-    /* #020617 */
-    --muted: 210 40% 96.1%;
-    /* #F1F5F9 */
-    --muted-foreground: 215.4 16.3% 46.9%;
-    /* #64748B */
-    --accent: 217 91% 60%;
-    /* #3B9FFF - Nitrocloud Blue */
-    --accent-foreground: 222.2 84% 4.9%;
-    /* #020617 */
-    --destructive: 0 84.2% 60.2%;
-    /* #EF4444 */
-    --destructive-foreground: 0 0% 100%;
+
+    /* Muted */
+    --muted: 225 12% 95%;
+    /* #EEF0F6 - border subtle */
+    --muted-foreground: 231 10% 38%;
+    /* #5F6475 - text secondary */
+
+    /* Accent: Steel */
+    --accent: 188 25% 40%;
+    /* #4D777F */
+    --accent-foreground: 0 0% 100%;
     /* #FFFFFF */
-    --border: 214.3 31.8% 91.4%;
-    /* #E2E8F0 */
-    --input: 214.3 31.8% 91.4%;
-    /* #E2E8F0 */
-    --ring: 217 91% 60%;
-    /* #3B9FFF - Nitrocloud Blue */
-    --radius: 0.75rem;
-    /* 12px - Global default */
-    --success: 142.1 76.2% 36.3%;
-    /* #22C55E */
+
+    /* Status Colors */
+    --success: 173 60% 44%;
+    /* #2AB5A5 - coolMint */
     --warning: 38 92% 50%;
     /* #F59E0B */
-    --info: 217 91% 60%;
-    /* #3B9FFF */
+    --error: 0 84% 60%;
+    /* #EF4444 */
+    --info: 184 100% 34%;
+    /* #0A9CA9 */
+
+    /* Destructive (maps to error) */
+    --destructive: 0 84% 60%;
+    /* #EF4444 */
+    --destructive-foreground: 0 0% 100%;
+    /* #FFFFFF */
+
+    /* Borders */
+    --border: 228 29% 91%;
+    /* #E6E8F0 - border soft */
+    --input: 228 29% 91%;
+    /* #E6E8F0 */
+    --ring: 173 60% 44%;
+    /* #2AB5A5 - coolMint focus */
 
-    /* Nitrocloud Gradient */
-    --nitrocloud-gradient-start: 217 91% 60%;
-    /* Blue */
-    --nitrocloud-gradient-end: 221 83% 53%;
-    /* Deep Blue-Purple */
+    /* Radius: 4px default */
+    --radius: 0.25rem;
+    /* 4px */
+
+    /* Popover */
+    --popover: 0 0% 100%;
+    /* #FFFFFF */
+    --popover-foreground: 234 8 9;
+    /* #121217 */
   }
 
   .dark {
-    /* Nitrocloud Dark Theme - Following Branding Guidelines */
-    --background: 222.2 84% 4.9%;
-    /* #020617 - Deep dark blue */
-    --foreground: 210 40% 98%;
-    /* #F8FAFC */
-    --card: 217.2 32.6% 17.5%;
-    /* #1E293B */
-    --card-foreground: 210 40% 98%;
-    /* #F8FAFC */
-    --popover: 217.2 32.6% 17.5%;
-    /* #1E293B */
-    --popover-foreground: 210 40% 98%;
-    /* #F8FAFC */
-    --primary: 217 91% 60%;
-    /* #3B9FFF - Brighter in dark */
-    --primary-foreground: 222.2 47.4% 11.2%;
-    /* #0F172A */
-    --secondary: 217.2 32.6% 17.5%;
-    /* #1E293B */
-    --secondary-foreground: 210 40% 98%;
-    /* #F8FAFC */
-    --muted: 217.2 32.6% 17.5%;
-    /* #1E293B */
-    --muted-foreground: 215 20.2% 65.1%;
-    /* #94A3B8 */
-    --accent: 217 91% 60%;
-    /* #3B9FFF */
-    --accent-foreground: 210 40% 98%;
-    /* #F8FAFC */
-    --destructive: 0 62.8% 30.6%;
-    /* #991B1B */
-    --destructive-foreground: 210 40% 98%;
-    /* #F8FAFC */
-    --border: 217.2 32.6% 17.5%;
-    /* #1E293B */
-    --input: 217.2 32.6% 17.5%;
-    /* #1E293B */
-    --ring: 217 91% 60%;
-    /* #3B9FFF */
-    --success: 142.1 70.6% 45.3%;
-    /* #10B981 */
+    /* MCP Brand - Dark Mode Palette */
+    /* Background */
+    --background: 228 30% 6%;
+    /* #0E0F14 - base */
+    --foreground: 240 6% 92%;
+    /* #E9E9F0 - text primary */
+    --card: 240 7% 11%;
+    /* #1B1B20 - surface */
+    --card-foreground: 240 6% 92%;
+    /* #E9E9F0 */
+
+    /* Primary: CoolMint (same as light) */
+    --primary: 173 60% 44%;
+    /* #2AB5A5 */
+    --primary-foreground: 0 0% 100%;
+    /* #FFFFFF */
+
+    /* Secondary/Accent: SignalBlue (same as light) */
+    --secondary: 217 89% 61%;
+    /* #3B82F6 */
+    --secondary-foreground: 0 0% 100%;
+    /* #FFFFFF */
+
+    /* Muted */
+    --muted: 0 12% 17%;
+    /* #312626 - border panel */
+    --muted-foreground: 243 17% 75%;
+    /* #B4B4CC - text muted */
+
+    /* Accent: Steel */
+    --accent: 188 25% 40%;
+    /* #4D777F */
+    --accent-foreground: 0 0% 100%;
+    /* #FFFFFF */
+
+    /* Status Colors (same as light) */
+    --success: 173 60% 44%;
+    /* #2AB5A5 */
     --warning: 38 92% 50%;
     /* #F59E0B */
-    --info: 217 91% 60%;
-    /* #3B9FFF */
+    --error: 0 84% 60%;
+    /* #EF4444 */
+    --info: 184 100% 34%;
+    /* #0A9CA9 */
+
+    /* Destructive */
+    --destructive: 0 84% 60%;
+    /* #EF4444 */
+    --destructive-foreground: 0 0% 100%;
+    /* #FFFFFF */
+
+    /* Borders */
+    --border: 0 12% 17%;
+    /* #312626 */
+    --input: 0 12% 17%;
+    /* #312626 */
+    --ring: 173 60% 44%;
+    /* #2AB5A5 */
+
+    /* Popover */
+    --popover: 240 7% 11%;
+    /* #1B1B20 */
+    --popover-foreground: 240 6% 92%;
+    /* #E9E9F0 */
   }
 
   * {
@@ -113,41 +155,63 @@
 
   body {
     @apply bg-background text-foreground;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1, 'ss02' 1;
+    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-size: 16px;
+    line-height: 150%;
+    font-weight: 400;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
-  code,
-  pre,
-  .font-mono {
-    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
-  }
-
+  /* Typography Scale - MCP Branding */
   h1,
   h2,
-  h3,
+  h3 {
+    font-family: 'Space Grotesk', sans-serif;
+  }
+
   h4,
   h5,
   h6 {
-    @apply font-semibold tracking-tight;
+    font-family: 'IBM Plex Sans', sans-serif;
   }
 
   h1 {
-    @apply text-4xl font-bold;
+    font-size: 48px;
+    line-height: 125%;
+    font-weight: 700;
+    /* Bold */
   }
 
   h2 {
-    @apply text-3xl font-bold;
+    font-size: 36px;
+    line-height: 130%;
+    font-weight: 600;
+    /* SemiBold */
   }
 
   h3 {
-    @apply text-2xl font-semibold;
+    font-size: 28px;
+    line-height: 135%;
+    font-weight: 500;
+    /* Medium */
+  }
+
+  h4 {
+    font-size: 16px;
+    line-height: 150%;
+    font-weight: 500;
+    /* Medium */
+  }
+
+  code,
+  pre,
+  .font-mono {
+    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
   }
 }
 
-/* Professional Scrollbar */
+/* MCP Scrollbar */
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
@@ -177,15 +241,25 @@
   transition-duration: 150ms;
 }
 
-/* Professional Card Styles */
+/* MCP Component System */
 @layer components {
+
+  /* Cards - 4px radius per MCP */
+  .card {
+    @apply rounded border bg-card text-card-foreground;
+  }
+
+  /* Light mode shadow */
   .card {
-    @apply rounded-xl border bg-card text-card-foreground;
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    box-shadow: 0px 1px 3px rgba(240, 100, 49, 0.08);
+  }
+
+  .dark .card {
+    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.07);
   }
 
   .card-hover {
-    @apply card hover:shadow-lg hover:border-primary/50;
+    @apply card hover:border-primary/50;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
@@ -193,44 +267,73 @@
     transform: translateY(-2px);
   }
 
+  /* Light mode medium shadow on hover */
+  .card-hover:hover {
+    box-shadow: 0px 4px 12px rgba(240, 100, 49, 0.11);
+  }
+
+  .dark .card-hover:hover {
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.10);
+  }
+
   .card-interactive {
     @apply card-hover cursor-pointer;
   }
 
-  /* Professional Button System */
+  /* MCP Button System */
   .btn {
-    @apply inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+    @apply inline-flex items-center justify-center gap-2 rounded text-sm font-medium;
+    @apply ring-offset-background transition-all;
+    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+    @apply disabled:pointer-events-none disabled:opacity-50;
     padding: 0.625rem 1.25rem;
+    border-radius: 4px;
+    /* MCP 4px */
   }
 
   .btn-primary {
-    background: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
-    @apply shadow-sm hover:opacity-90;
+    @apply bg-primary text-primary-foreground;
   }
 
-  .btn-secondary {
-    background: hsl(var(--secondary));
-    color: hsl(var(--secondary-foreground));
-    @apply border hover:opacity-80;
+  .btn-primary:hover:not(:disabled) {
+    @apply opacity-90;
   }
 
-  .btn-ghost {
-    background: transparent;
-    @apply hover:bg-accent;
+  .btn-primary {
+    box-shadow: 0px 1px 3px rgba(240, 100, 49, 0.08);
+  }
+
+  .dark .btn-primary {
+    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.07);
+  }
+
+  /* Focus ring: 2px as per MCP */
+  .btn-primary:focus-visible {
+    @apply ring-2 ring-primary ring-offset-2;
+  }
+
+  .btn-secondary {
+    @apply bg-secondary text-secondary-foreground;
   }
 
-  .btn-ghost:hover {
-    color: hsl(var(--accent-foreground));
+  .btn-secondary:hover:not(:disabled) {
+    @apply opacity-90;
   }
 
   .btn-outline {
-    background: hsl(var(--background));
-    @apply border border-input hover:bg-accent;
+    @apply bg-background border border-input;
   }
 
-  .btn-outline:hover {
-    color: hsl(var(--accent-foreground));
+  .btn-outline:hover:not(:disabled) {
+    @apply bg-accent text-accent-foreground;
+  }
+
+  .btn-ghost {
+    @apply bg-transparent;
+  }
+
+  .btn-ghost:hover:not(:disabled) {
+    @apply bg-accent text-accent-foreground;
   }
 
   .btn-sm {
@@ -243,9 +346,13 @@
     padding: 0.75rem 1.5rem;
   }
 
-  /* Professional Badge System */
+  /* MCP Badge System - 999px pill radius */
   .badge {
-    @apply inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors;
+    @apply inline-flex items-center text-xs font-semibold transition-colors;
+    border-radius: 999px;
+    /* MCP pill */
+    padding: 6px 12px;
+    /* MCP spec */
   }
 
   .badge-primary {
@@ -253,44 +360,53 @@
   }
 
   .badge-secondary {
-    background: hsl(var(--secondary));
-    color: hsl(var(--secondary-foreground));
+    @apply bg-secondary/10 text-secondary ring-1 ring-inset ring-secondary/20;
   }
 
   .badge-success {
-    @apply bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20;
-  }
-
-  .dark .badge-success {
-    @apply bg-emerald-500/10 text-emerald-400 ring-emerald-500/20;
+    background-color: hsl(var(--success) / 0.1);
+    color: hsl(var(--success));
+    @apply ring-1 ring-inset;
+    ring-color: hsl(var(--success) / 0.2);
   }
 
   .badge-warning {
-    @apply bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/20;
-  }
-
-  .dark .badge-warning {
-    @apply bg-amber-500/10 text-amber-400 ring-amber-500/20;
+    background-color: hsl(var(--warning) / 0.1);
+    color: hsl(var(--warning));
+    @apply ring-1 ring-inset;
+    ring-color: hsl(var(--warning) / 0.2);
   }
 
   .badge-error {
-    @apply bg-rose-50 text-rose-700 ring-1 ring-inset ring-rose-600/20;
+    background-color: hsl(var(--error) / 0.1);
+    color: hsl(var(--error));
+    @apply ring-1 ring-inset;
+    ring-color: hsl(var(--error) / 0.2);
   }
 
-  .dark .badge-error {
-    @apply bg-rose-500/10 text-rose-400 ring-rose-500/20;
+  .badge-info {
+    background-color: hsl(var(--info) / 0.1);
+    color: hsl(var(--info));
+    @apply ring-1 ring-inset;
+    ring-color: hsl(var(--info) / 0.2);
   }
 
-  /* Professional Input System */
+  /* MCP Input System */
   .input {
-    @apply flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50;
+    @apply flex h-10 w-full border border-input bg-background px-3 py-2 text-sm;
+    @apply ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium;
+    @apply placeholder:text-muted-foreground;
+    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0;
+    @apply disabled:cursor-not-allowed disabled:opacity-50;
+    border-radius: 4px;
+    /* MCP 4px */
   }
 
   .textarea {
     @apply input min-h-[80px] resize-y;
   }
 
-  /* Professional Status Indicators */
+  /* Status Indicators */
   .status-dot {
     @apply relative flex h-3 w-3 rounded-full;
   }
@@ -301,31 +417,31 @@
   }
 
   .status-connected {
-    @apply bg-emerald-500;
+    background-color: hsl(var(--success));
   }
 
   .status-connected::before {
-    @apply bg-emerald-500;
+    background-color: hsl(var(--success));
   }
 
   .status-connecting {
-    @apply bg-amber-500;
+    background-color: hsl(var(--warning));
   }
 
   .status-connecting::before {
-    @apply bg-amber-500;
+    background-color: hsl(var(--warning));
   }
 
   .status-disconnected {
-    @apply bg-rose-500;
+    background-color: hsl(var(--error));
   }
 
   .status-disconnected::before {
-    @apply bg-rose-500;
+    background-color: hsl(var(--error));
     animation: none;
   }
 
-  /* Professional Loading States */
+  /* Loading States */
   .skeleton {
     @apply animate-pulse rounded-md bg-muted;
   }
@@ -350,22 +466,32 @@
   }
 }
 
-/* Professional Animations */
+/* MCP Animations */
 @keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translateY(8px);
   }
 
   to {
     opacity: 1;
-    transform: translateY(0);
   }
 }
 
-@keyframes slideIn {
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInLeft {
   from {
-    transform: translateX(-16px);
+    transform: translateX(-100%);
     opacity: 0;
   }
 
@@ -375,6 +501,18 @@
   }
 }
 
+@keyframes slideIn {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
 @keyframes scaleIn {
   from {
     opacity: 0;
@@ -399,45 +537,32 @@
   animation: scaleIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Nitrocloud Brand Gradient */
-.nitrocloud-gradient {
-  background: linear-gradient(135deg,
-      hsl(var(--nitrocloud-gradient-start)),
-      hsl(var(--nitrocloud-gradient-end)));
-}
-
-.nitrocloud-text-gradient {
-  background: linear-gradient(135deg,
-      hsl(var(--nitrocloud-gradient-start)),
-      hsl(var(--nitrocloud-gradient-end)));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+/* MCP Gradients */
+.mcp-gradient-surface {
+  background: linear-gradient(180deg, #FFFFFF 0%, #F5F6FA 100%);
 }
 
-/* Nitrocloud Blue Glow Effects */
-.nitrocloud-glow {
-  box-shadow: 0 0 24px rgba(59, 159, 255, 0.15),
-    0 0 12px rgba(59, 159, 255, 0.1);
+.dark .mcp-gradient-surface {
+  background: linear-gradient(180deg, #1B1B20 0%, #0E0F14 100%);
 }
 
-.dark .nitrocloud-glow {
-  box-shadow: 0 0 32px rgba(59, 159, 255, 0.25),
-    0 0 16px rgba(59, 159, 255, 0.15);
+.mcp-gradient-action {
+  background: linear-gradient(135deg, #3B82F6 0%, #2AB5A5 100%);
 }
 
-/* Glassmorphism Effect */
-.glass {
-  @apply backdrop-blur-xl bg-background/80 border;
-  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
+.mcp-text-gradient {
+  background: linear-gradient(135deg, #3B82F6 0%, #2AB5A5 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
-.dark .glass {
-  @apply bg-card/60;
-  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+/* Focus Styles */
+.focus-ring {
+  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
 }
 
-/* Professional Hover Effects */
+/* Hover Effects */
 .hover-lift {
   transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
     box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -445,13 +570,15 @@
 
 .hover-lift:hover {
   transform: translateY(-4px);
-  box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.12),
-    0 8px 16px -4px rgba(0, 0, 0, 0.08);
 }
 
-/* Focus Visible Styles */
-.focus-ring {
-  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+/* Light mode */
+.hover-lift:hover {
+  box-shadow: 0px 8px 28px rgba(240, 100, 49, 0.14);
+}
+
+.dark .hover-lift:hover {
+  box-shadow: 0px 8px 28px rgba(0, 0, 0, 0.15);
 }
 
 /* Prose/Content Styles */
@@ -461,8 +588,22 @@
 
 .prose :where(code):not(:where([class~="not-prose"] *)) {
   @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm;
+
+  /* Removed nested definition */
 }
 
+.animate-slide-in-right {
+  opacity: 0;
+  /*  Ensure it starts invisible for the delay */
+  animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation-delay: 0.1s;
+}
+
+.animate-slide-in-left {
+  animation: slideInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+
 .prose :where(code):not(:where([class~="not-prose"] *))::before,
 .prose :where(code):not(:where([class~="not-prose"] *))::after {
   content: '';
@@ -483,4 +624,33 @@
 
 .empty-state-description {
   @apply text-sm text-muted-foreground max-w-md;
+}
+
+/* Run App Slide-Up Animation */
+@keyframes slideUpOverlay {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes slideDownOverlay {
+  from {
+    transform: translateY(0%);
+  }
+
+  to {
+    transform: translateY(100%);
+  }
+}
+
+.animate-slide-up-overlay {
+  animation: slideUpOverlay 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-slide-down-overlay {
+  animation: slideDownOverlay 0.3s cubic-bezier(0.32, 0, 0.67, 0) forwards;
 }