polish: unit labels in parentheses, export panel styling, remove unused gradient utilities

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/globals.css

@@ -154,31 +154,3 @@ html {
   -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);
-}

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">
+      <div className="flex flex-col md:flex-row gap-3">
-        <Button size="sm" variant="outline" onClick={copy} className="flex-1">
+        <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>

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}