a11y: add error boundary, reduced motion, remaining fixes

src/components/ErrorBoundary.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends React.Component<{ children: React.ReactNode }, ErrorBoundaryState> {
+  constructor(props: { children: React.ReactNode }) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          role="alert"
+          className="h-screen w-screen flex items-center justify-center bg-zinc-950 text-zinc-100 p-8"
+        >
+          <div className="max-w-md text-center">
+            <h1 className="text-2xl font-bold mb-4">Something went wrong</h1>
+            <p className="text-zinc-400 mb-6">
+              TypoGenie encountered an unexpected error. Please reload the application.
+            </p>
+            <button
+              onClick={() => window.location.reload()}
+              className="px-6 py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold rounded-xl transition-colors"
+            >
+              Reload
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/components/StyleSelector.tsx

@@ -431,7 +431,7 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
                     )}
                   </div>
                 </div>
-                <p className="text-xs text-zinc-400 line-clamp-2 leading-relaxed mb-2">{style.description}</p>
+                <p className="text-xs text-zinc-400 line-clamp-2 leading-relaxed mb-2" title={style.description}>{style.description}</p>
                 <div className="flex items-center gap-2">
                   <span className={`text-[10px] uppercase font-mono tracking-wider px-1.5 py-0.5 rounded
                     ${selectedStyle === style.id ? 'bg-indigo-500/20 text-indigo-300' : 'bg-zinc-800 text-zinc-400'}`}>