Refactor inline styles to CSS utility classes for better maintainability

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Author: Copilot

apps/playground/src/index.css

@@ -67,3 +67,21 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  /* Dot grid background patterns */
+  .bg-dot-pattern {
+    background-image: radial-gradient(circle, #cbd5e1 1.5px, transparent 1.5px);
+    background-size: 32px 32px;
+  }
+  
+  .bg-dot-pattern-sm {
+    background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px);
+    background-size: 20px 20px;
+  }
+  
+  /* Custom spinner animation */
+  .animate-spin-reverse {
+    animation: spin 1s linear infinite reverse;
+  }
+}

apps/playground/src/pages/Home.tsx

@@ -111,10 +111,7 @@ export const Home = () => {
                 {/* Mock Preview Window */}
                 <div className="bg-gradient-to-br from-gray-50 to-slate-100 border-b border-gray-200 p-6 flex-1 flex items-center justify-center overflow-hidden relative">
                     {/* Decorative grid */}
-                    <div className="absolute inset-0 opacity-20" style={{ 
-                      backgroundImage: 'radial-gradient(circle, #cbd5e1 1px, transparent 1px)',
-                      backgroundSize: '20px 20px'
-                    }}></div>
+                    <div className="absolute inset-0 opacity-20 bg-dot-pattern-sm"></div>
 
                     <div className="relative w-3/4 h-3/4 bg-white shadow-xl border-2 border-gray-300 rounded-xl flex flex-col group-hover:scale-110 transition-transform duration-500">
                       <div className="h-5 border-b-2 border-gray-200 bg-gradient-to-b from-gray-100 to-gray-50 flex items-center px-2 gap-1.5 rounded-t-xl">

apps/playground/src/pages/Studio.tsx

@@ -323,11 +323,7 @@ const StudioEditor = ({ exampleId, initialJson }: { exampleId: ExampleKey, initi
           </div>
 
           <div 
-            className="flex-1 overflow-auto p-8 flex justify-center bg-gradient-to-br from-slate-100 via-gray-50 to-indigo-100 relative"
-            style={{ 
-              backgroundImage: 'radial-gradient(circle, #cbd5e1 1.5px, transparent 1.5px)', 
-              backgroundSize: '32px 32px' 
-            }}
+            className="flex-1 overflow-auto p-8 flex justify-center bg-gradient-to-br from-slate-100 via-gray-50 to-indigo-100 relative bg-dot-pattern"
           >
             <div className={`${viewportStyles[viewportSize]} transition-all duration-300 ease-in-out`}>
               <div 
@@ -369,7 +365,7 @@ const StudioEditor = ({ exampleId, initialJson }: { exampleId: ExampleKey, initi
                         <div className="flex flex-col items-center gap-4">
                            <div className="relative">
                              <div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
-                             <div className="absolute inset-0 w-12 h-12 border-4 border-purple-200 border-t-purple-600 rounded-full animate-spin" style={{ animationDirection: 'reverse', animationDuration: '1s' }}></div>
+                             <div className="absolute inset-0 w-12 h-12 border-4 border-purple-200 border-t-purple-600 rounded-full animate-spin-reverse"></div>
                            </div>
                            <p className="text-sm font-semibold text-gray-600">Rendering your UI...</p>
                         </div>
@@ -414,12 +410,7 @@ const StudioEditor = ({ exampleId, initialJson }: { exampleId: ExampleKey, initi
           </div>
 
           {/* Side Preview */}
-          <div className="w-1/2 h-full flex flex-col bg-gradient-to-br from-slate-100 via-gray-50 to-indigo-100 relative" 
-            style={{ 
-              backgroundImage: 'radial-gradient(circle, #cbd5e1 1.5px, transparent 1.5px)', 
-              backgroundSize: '32px 32px' 
-            }}
-          >
+          <div className="w-1/2 h-full flex flex-col bg-gradient-to-br from-slate-100 via-gray-50 to-indigo-100 relative bg-dot-pattern">
              <div className="flex-1 overflow-auto p-8 flex items-center justify-center">
                 <div className="w-full max-w-xl mx-auto rounded-2xl shadow-2xl bg-background border-2 border-gray-300 overflow-hidden">
                   <div className="h-9 bg-gradient-to-b from-gray-100 to-gray-50 border-b-2 border-gray-300 flex items-center px-3 gap-2">