diff --git a/app/globals.css b/app/globals.css
index 970291b..73a6d34 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -153,32 +153,4 @@ html {
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid var(--border);
-}
-
-@utility gradient-purple-blue {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-@utility gradient-cyan-purple {
-  background: linear-gradient(135deg, #2dd4bf 0%, #8b5cf6 100%);
-}
-
-@utility gradient-indigo-purple {
-  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
-}
-
-@utility gradient-yellow-amber {
-  background: linear-gradient(135deg, #eab308 0%, #f59e0b 100%);
-}
-
-@utility gradient-green-teal {
-  background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
-}
-
-@utility gradient-blue-cyan {
-  background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
-}
-
-@utility gradient-brand {
-  background: linear-gradient(to right, #a78bfa, #f472b6, #22d3ee);
-}
+}
\ No newline at end of file
diff --git a/components/animate/ExportPanel.tsx b/components/animate/ExportPanel.tsx
index c8e7f4e..10e1b12 100644
--- a/components/animate/ExportPanel.tsx
+++ b/components/animate/ExportPanel.tsx
@@ -33,16 +33,16 @@ function CodeBlock({ code, filename }: { code: string; filename: string }) {
   return (
     <div className="space-y-3">
       <div className="relative">
-        <pre className="p-4 rounded-xl bg-muted/30 border border-border text-xs font-mono leading-relaxed overflow-auto max-h-72 text-foreground/90 whitespace-pre">
+        <pre className="p-4 rounded-xl bg-muted/30 border border-border text-xs font-mono leading-relaxed overflow-auto max-h-72 text-foreground/90 whitespace-pre scrollbar">
           <code>{code}</code>
         </pre>
       </div>
-      <div className="flex gap-2">
-        <Button size="sm" variant="outline" onClick={copy} className="flex-1">
+      <div className="flex flex-col md:flex-row gap-3">
+        <Button variant="outline" onClick={copy} className="w-full md:flex-1">
           <Copy className="h-3.5 w-3.5 mr-1.5" />
           Copy
         </Button>
-        <Button size="sm" variant="outline" onClick={download} className="flex-1">
+        <Button onClick={download} className="w-full md:flex-1">
           <Download className="h-3.5 w-3.5 mr-1.5" />
           Download .css
         </Button>
diff --git a/components/animate/KeyframeProperties.tsx b/components/animate/KeyframeProperties.tsx
index 7bf9e6c..387d364 100644
--- a/components/animate/KeyframeProperties.tsx
+++ b/components/animate/KeyframeProperties.tsx
@@ -30,7 +30,7 @@ function SliderRow({ label, unit, value, min, max, step = 1, onChange }: SliderR
     <div className="grid grid-cols-[1fr_auto] gap-x-3 items-center">
       <div className="space-y-1">
         <Label className="text-[10px] text-muted-foreground">
-          {label}{unit && <span className="text-muted-foreground/50 ml-0.5">{unit}</span>}
+          {label}{unit && <span className="text-muted-foreground/50"> ({unit})</span>}
         </Label>
         <Slider
           min={min}