feat(frontend): redesign homepage and file config form with aurora palette

Rebuild the visual identity from the actual Ombrora mark (violet/cyan aurora
blobs) instead of the generic blue/amber scheme, add Bricolage Grotesque and
IBM Plex Mono for display and code-like text, and give the hero an animated
aurora backdrop, gradient headline, and a format-pair marquee driven by the
real registered converters.

Rework the file config form: target format and icon size are both chip
groups now instead of a native select, and quality/compression sliders get a
gradient-filled track, custom thumb, and a mono value pill to match. File
type icons are color-coded by family (images/documents/fonts/ebooks) and
reused across FileConfigCard, FileCard, and FormatsGrid.

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

frontend/src/components/FormatsGrid.jsx

@@ -1,18 +1,32 @@
 import { useTranslation } from 'react-i18next';
+import { Image, FileText, TextAa, BookOpen } from '@phosphor-icons/react';
 import { FORMAT_FAMILIES } from '../data/formats.js';
 
+const FAMILY_ICONS = {
+  images: Image,
+  documents: FileText,
+  fonts: TextAa,
+  ebooks: BookOpen,
+};
+
 export function FormatsGrid() {
   const { t } = useTranslation();
   return (
     <section className="formats-grid-section">
       <h2>{t('formats.title')}</h2>
       <div className="formats-grid">
-        {FORMAT_FAMILIES.map(({ key, formats }) => (
-          <div key={key} className="formats-family">
-            <h3>{t(`formats.${key}`)}</h3>
-            <p>{formats.join(', ').toUpperCase()}</p>
-          </div>
-        ))}
+        {FORMAT_FAMILIES.map(({ key, formats }) => {
+          const Icon = FAMILY_ICONS[key];
+          return (
+            <div key={key} className="formats-family" style={{ '--tile-color': `var(--color-family-${key})` }}>
+              <span className="formats-family-icon">
+                <Icon size={22} weight="regular" />
+              </span>
+              <h3>{t(`formats.${key}`)}</h3>
+              <p>{formats.join(', ').toUpperCase()}</p>
+            </div>
+          );
+        })}
       </div>
     </section>
   );