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/FileCard.jsx

@@ -1,8 +1,13 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { File as FileIcon, CircleNotch, DownloadSimple } from '@phosphor-icons/react';
+import { CircleNotch, DownloadSimple, CheckCircle, WarningCircle } from '@phosphor-icons/react';
 import { fetchJobStatus, downloadUrl } from './api.js';
 import { formatBytes } from './utils/formatBytes.js';
+import { fileTypeMeta } from './utils/fileFamily.js';
+
+function extensionOf(fileName) {
+  return fileName.split('.').pop();
+}
 
 export function FileCard({ fileName, fileSize, targetFormat, jobId, initialError }) {
   const { t } = useTranslation();
@@ -29,27 +34,42 @@ export function FileCard({ fileName, fileSize, targetFormat, jobId, initialError
     };
   }, [jobId, initialError]);
 
+  const { Icon, colorVar } = fileTypeMeta(extensionOf(fileName));
+
   return (
-    <li className="file-card">
+    <li className={`file-card file-card-${status}`}>
       <div className="file-tile-header">
-        <FileIcon size={24} weight="regular" />
+        <span className="file-tile-icon" style={{ '--tile-color': `var(${colorVar})` }}>
+          <Icon size={20} weight="regular" />
+        </span>
         <span className="file-tile-name">{fileName}</span>
         {targetFormat && <span className="format-badge">{targetFormat.toUpperCase()}</span>}
         <span className="file-tile-size">{formatBytes(fileSize)}</span>
       </div>
       {(status === 'pending' || status === 'processing') && (
-        <span className="job-status">
-          <CircleNotch size={18} weight="bold" className="spin" />
-          {t('job.converting')}
-        </span>
+        <div className="job-progress">
+          <span className="job-status">
+            <CircleNotch size={18} weight="bold" className="spin" />
+            {t('job.converting')}
+          </span>
+          <span className="progress-track" aria-hidden="true">
+            <span className="progress-fill" />
+          </span>
+        </div>
       )}
       {status === 'done' && (
         <a className="download-button" href={downloadUrl(jobId)}>
+          <CheckCircle size={18} weight="fill" className="status-icon-success" />
           <DownloadSimple size={20} weight="regular" />
           {t('job.download')} ({formatBytes(outputSize)})
         </a>
       )}
-      {status === 'failed' && <span className="error">{errorMessage}</span>}
+      {status === 'failed' && (
+        <span className="error">
+          <WarningCircle size={18} weight="fill" />
+          {errorMessage}
+        </span>
+      )}
     </li>
   );
 }