chore: add HF Spaces Docker deployment

Dockerfile

@@ -0,0 +1,77 @@
+# ─────────────────────────────────────────────────────────────────────────────
+# Hugging Face Spaces — Docker SDK
+# Architecture:
+#   supervisord manages two processes:
+#     - Next.js standalone server on :3000
+#     - FastAPI (uvicorn) on :8000
+#   nginx on :7860 routes:
+#     /api/* and /ws/* → FastAPI :8000
+#     everything else  → Next.js :3000
+# ─────────────────────────────────────────────────────────────────────────────
+
+# ── Stage 1: Build Next.js (standalone output) ─────────────────────────────
+FROM node:20-slim AS frontend-builder
+
+WORKDIR /build/frontend
+COPY frontend/package*.json ./
+RUN npm ci
+
+COPY frontend/ ./
+# Empty API URL → all /api/* and /ws/* go through nginx to FastAPI
+ENV NEXT_PUBLIC_API_URL=""
+# Enable standalone output (required for Docker; skipped in local dev)
+ENV BUILD_STANDALONE=1
+RUN npm run build
+
+# ── Stage 2: Runtime ────────────────────────────────────────────────────────
+FROM python:3.10-slim
+
+# System deps: ffmpeg + OpenCV libs + nginx + supervisor + Node.js runtime
+RUN apt-get update && apt-get install -y \
+    ffmpeg libgl1 libglib2.0-0 \
+    nginx supervisor curl \
+    && curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
+    && apt-get install -y nodejs \
+    && apt-get clean && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# ── Python: CPU-only torch first (layer cache) ──────────────────────────────
+RUN pip install --no-cache-dir \
+    torch==2.1.2 torchvision==0.16.2 \
+    --index-url https://download.pytorch.org/whl/cpu
+
+# ── Python: app dependencies ────────────────────────────────────────────────
+RUN pip install --no-cache-dir \
+    "fastapi>=0.110.0" \
+    "uvicorn[standard]>=0.29.0" \
+    "python-multipart>=0.0.9" \
+    "aiofiles>=23.0.0" \
+    "opencv-python-headless>=4.9.0" \
+    "Pillow>=10.0.0" \
+    "numpy>=1.24.0,<2.0" \
+    "imageio>=2.33.0" \
+    "imageio-ffmpeg>=0.4.9"
+
+# ── Copy app code ────────────────────────────────────────────────────────────
+COPY backend/ ./backend/
+
+# ── Copy Next.js standalone build ───────────────────────────────────────────
+COPY --from=frontend-builder /build/frontend/.next/standalone ./frontend/
+COPY --from=frontend-builder /build/frontend/.next/static     ./frontend/.next/static
+COPY --from=frontend-builder /build/frontend/public           ./frontend/public
+
+# ── nginx config ────────────────────────────────────────────────────────────
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# ── supervisord config ───────────────────────────────────────────────────────
+COPY supervisord.conf /etc/supervisor/conf.d/app.conf
+
+# ── Directories ─────────────────────────────────────────────────────────────
+RUN mkdir -p /tmp/video_seg/uploads /tmp/video_seg/outputs \
+    && mkdir -p /var/log/supervisor
+
+# HF Spaces requires port 7860
+EXPOSE 7860
+
+CMD ["/usr/bin/supervisord", "-n", "-c", "/etc/supervisor/supervisord.conf"]

README.md

@@ -1,196 +1,15 @@
-# SegVision — AI Video Segmentation App
-
-> Upload any video → get real-time semantic segmentation with 21-class PASCAL VOC overlay.  
-> Powered by **DeepLabV3 + ResNet-50**, **FastAPI**, **Celery**, **Redis**, and **Next.js 14**.
-
----
-
-## Architecture
-
-```
-┌─────────────────┐      HTTP/WS      ┌──────────────────┐
-│  Next.js 14     │◄─────────────────►│  FastAPI         │
-│  (port 3000)    │   upload/status   │  (port 8000)     │
-│  Dark UI        │   WS progress     │  DeepLabV3 model │
-└─────────────────┘                   └────────┬─────────┘
-                                               │ Celery tasks
-                                    ┌──────────▼─────────┐
-                                    │  Redis              │
-                                    │  (broker + backend) │
-                                    └──────────┬─────────┘
-                                               │
-                                    ┌──────────▼─────────┐
-                                    │  Celery Worker      │
-                                    │  (GPU inference)    │
-                                    └────────────────────┘
-```
-
----
-
-## Quick Start (Local Dev)
-
-### Prerequisites
-- Python 3.10+
-- Node.js 18+ (for frontend)
-- Redis (or Docker to run Redis)
-- Optional: CUDA-capable GPU
-
-### One-command start
-
-```bash
-bash start.sh
-```
-
-This will:
-1. Start Redis (via Docker if not installed locally)
-2. Create Python venv + install backend deps
-3. Start Celery worker
-4. Start FastAPI on `:8000`
-5. Start Next.js on `:3000`
-
-Then open **http://localhost:3000** 🎉
-
----
-
-## Manual Setup
-
-### Backend
-
-```bash
-cd backend
-python3 -m venv .venv
-source .venv/bin/activate            # Windows: .venv\Scripts\activate
-pip install -r requirements.txt
-
-# Terminal 1 — API server
-uvicorn main:app --reload --port 8000
-
-# Terminal 2 — Celery worker
-celery -A tasks worker --loglevel=info
-```
-
-### Frontend
-
-```bash
-cd frontend
-npm install
-npm run dev
-```
-
-### Redis (if not installed)
-
-```bash
-docker run -d -p 6379:6379 redis:7-alpine
-```
-
 ---
-
-## Docker (Production)
-
-```bash
-docker-compose up --build
-```
-
-Services:
-| Service | Port | Description |
-|---|---|---|
-| `frontend` | 3000 | Next.js UI |
-| `backend` | 8000 | FastAPI + model |
-| `worker` | — | Celery inference worker |
-| `redis` | 6379 | Message broker |
-
+title: SegVision
+emoji: 🎬
+colorFrom: orange
+colorTo: yellow
+sdk: docker
+pinned: false
+short_description: AI Video Segmentation — DeepLabV3 + ResNet-50 side-by-side comparison
 ---
 
-## API Reference
-
-| Method | Endpoint | Description |
-|---|---|---|
-| `POST` | `/api/upload` | Upload video → returns `job_id` |
-| `GET` | `/api/status/{job_id}` | Job progress (0–100%) + detected classes |
-| `GET` | `/api/video/{job_id}` | Stream segmented MP4 |
-| `DELETE` | `/api/job/{job_id}` | Cleanup files |
-| `WS` | `/ws/{job_id}` | Real-time progress stream |
-| `GET` | `/api/health` | Health check + device info |
-| `GET` | `/docs` | Interactive Swagger UI |
-
-### Upload Response
-```json
-{
-  "job_id": "uuid",
-  "status": "queued",
-  "filename": "my_video.mp4",
-  "size_mb": 12.5
-}
-```
-
-### Status Response
-```json
-{
-  "job_id": "uuid",
-  "status": "processing",
-  "pct": 42.7,
-  "detected": ["person", "car", "dog"]
-}
-```
-
----
-
-## PASCAL VOC Classes (21)
-
-| ID | Class | Colour |
-|---|---|---|
-| 0 | background | ⬛ black |
-| 1 | aeroplane | 🔵 sky blue |
-| 2 | bicycle | 🟠 orange |
-| 3 | bird | 🟡 gold |
-| 4 | boat | 💙 deep sky blue |
-| 5 | bottle | 🟣 dark violet |
-| 6 | bus | 🩷 deep pink |
-| 7 | car | 🔴 crimson |
-| 8 | cat | 🟠 dark orange |
-| 9 | chair | 🟤 saddle brown |
-| 10 | cow | 🟡 yellow |
-| 11 | diningtable | 🟤 chocolate |
-| 12 | dog | 🟣 medium orchid |
-| 13 | horse | 🩷 hot pink |
-| 14 | motorbike | 🟢 spring green |
-| 15 | person | 🔴 red-orange |
-| 16 | potted plant | 🟢 forest green |
-| 17 | sheep | 🟡 khaki |
-| 18 | sofa | 🩵 dark turquoise |
-| 19 | train | 🔵 blue |
-| 20 | tv/monitor | 🩵 aquamarine |
-
----
-
-## Performance Tips
-
-- **GPU**: Set `DEVICE=cuda` — inference is ~10× faster
-- **Video length**: Works best on clips ≤ 2 min (longer = queued async)
-- **Resolution**: Frames are resized to max 640px — keeps quality + speed balanced
-- **Workers**: Increase `--concurrency` in Celery for parallel jobs
-
----
+# SegVision — AI Video Segmentation
 
-## Project Structure
+Upload any video and watch AI identify every object in real-time, outputting a stunning side-by-side comparison with coloured overlays.
 
-```
-video-seg-app/
-├── backend/
-│   ├── inference.py      # DeepLabV3 model + frame segmentation
-│   ├── tasks.py          # Celery task (async video processing)
-│   ├── main.py           # FastAPI: upload / status / video / WS
-│   ├── requirements.txt
-│   └── Dockerfile
-├── frontend/
-│   ├── src/app/
-│   │   ├── page.tsx              # Upload UI (drag & drop)
-│   │   ├── processing/[id]/      # Real-time progress page
-│   │   └── result/[id]/          # Video player + class legend
-│   ├── src/app/globals.css       # Dark mode design system
-│   ├── tailwind.config.js
-│   └── Dockerfile
-├── docker-compose.yml
-├── start.sh              # One-command local dev
-└── README.md
-```
+**Powered by:** DeepLabV3 + ResNet-50 · PASCAL VOC 21 Classes · FastAPI · Next.js

README_HF.md

@@ -0,0 +1,15 @@
+---
+title: SegVision
+emoji: 🎬
+colorFrom: orange
+colorTo: yellow
+sdk: docker
+pinned: false
+short_description: AI Video Segmentation — DeepLabV3 + ResNet-50 side-by-side comparison
+---
+
+# SegVision — AI Video Segmentation
+
+Upload any video and watch AI identify every object in real-time, outputting a stunning side-by-side comparison with coloured overlays.
+
+**Powered by:** DeepLabV3 + ResNet-50 · PASCAL VOC 21 Classes · FastAPI · Next.js

backend/app_hf.py

@@ -0,0 +1,228 @@
+"""
+app_hf.py — Simplified FastAPI backend for Hugging Face Spaces.
+
+Differences from main.py:
+  - No Celery / Redis required.
+  - In-memory job registry (jobs dict).
+  - ThreadPoolExecutor runs inference in background thread.
+  - Serves Next.js static export from ../frontend/out/ on all non-API routes.
+"""
+
+import os
+import uuid
+import asyncio
+import logging
+from pathlib import Path
+from concurrent.futures import ThreadPoolExecutor
+from typing import Any, Dict
+
+from fastapi import FastAPI, UploadFile, File, HTTPException, WebSocket, WebSocketDisconnect
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+
+from inference import process_video, get_model, VOC_CLASSES
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# ─── Paths ────────────────────────────────────────────────────────────────────
+
+UPLOAD_DIR = Path(os.getenv("UPLOAD_DIR", "/tmp/video_seg/uploads"))
+OUTPUT_DIR = Path(os.getenv("OUTPUT_DIR", "/tmp/video_seg/outputs"))
+STATIC_DIR = Path(__file__).parent.parent / "frontend" / "out"
+
+UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
+
+ALLOWED_EXTENSIONS = {".mp4", ".avi", ".mov", ".mkv", ".webm"}
+MAX_FILE_SIZE_MB   = int(os.getenv("MAX_FILE_SIZE_MB", "200"))
+
+# ─── In-memory job registry ───────────────────────────────────────────────────
+
+jobs: Dict[str, Dict[str, Any]] = {}
+executor = ThreadPoolExecutor(max_workers=2)
+
+# ─── App ─────────────────────────────────────────────────────────────────────
+
+app = FastAPI(title="SegVision HF API", version="1.0.0")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+@app.on_event("startup")
+async def startup():
+    logger.info("Loading segmentation model…")
+    loop = asyncio.get_event_loop()
+    await loop.run_in_executor(executor, get_model)
+    logger.info("Model ready.")
+
+
+# ─── Background inference runner ─────────────────────────────────────────────
+
+def _run_inference(job_id: str, input_path: str, output_path: str):
+    """Run video segmentation synchronously (called in thread pool)."""
+    jobs[job_id]["status"] = "processing"
+
+    def on_progress(pct: float, detected_names: list):
+        jobs[job_id].update({"pct": pct, "detected": detected_names})
+
+    try:
+        detected_ids = process_video(
+            input_path, output_path, progress_callback=on_progress
+        )
+        detected_names = [
+            VOC_CLASSES[c] for c in sorted(detected_ids) if c < len(VOC_CLASSES)
+        ]
+        jobs[job_id].update({
+            "status":   "done",
+            "pct":      100.0,
+            "detected": detected_names,
+        })
+        logger.info(f"[{job_id}] Done — detected: {detected_names}")
+    except Exception as exc:
+        logger.exception(f"[{job_id}] Inference failed")
+        jobs[job_id].update({"status": "error", "error": str(exc)})
+
+
+# ─── API Endpoints ────────────────────────────────────────────────────────────
+
+@app.post("/api/upload")
+async def upload_video(file: UploadFile = File(...)):
+    ext = Path(file.filename or "x.mp4").suffix.lower()
+    if ext not in ALLOWED_EXTENSIONS:
+        raise HTTPException(400, f"Unsupported format '{ext}'.")
+
+    content = await file.read()
+    size_mb = len(content) / (1024 * 1024)
+    if size_mb > MAX_FILE_SIZE_MB:
+        raise HTTPException(413, f"File too large ({size_mb:.1f} MB). Max {MAX_FILE_SIZE_MB} MB.")
+
+    job_id      = str(uuid.uuid4())
+    input_path  = UPLOAD_DIR / f"{job_id}{ext}"
+    output_path = OUTPUT_DIR / f"{job_id}_output.mp4"
+
+    with open(input_path, "wb") as f:
+        f.write(content)
+
+    jobs[job_id] = {"status": "queued", "pct": 0.0, "detected": []}
+
+    loop = asyncio.get_event_loop()
+    loop.run_in_executor(executor, _run_inference, job_id, str(input_path), str(output_path))
+
+    logger.info(f"[{job_id}] Queued: {file.filename} ({size_mb:.1f} MB)")
+    return {"job_id": job_id, "status": "queued"}
+
+
+@app.get("/api/status/{job_id}")
+async def get_status(job_id: str):
+    if job_id in jobs:
+        return {"job_id": job_id, **jobs[job_id]}
+
+    # Fallback: check if the output file exists (handles server restart)
+    out = OUTPUT_DIR / f"{job_id}_output.mp4"
+    if out.exists():
+        return {"job_id": job_id, "status": "done", "pct": 100.0, "detected": []}
+
+    raise HTTPException(404, "Job not found")
+
+
+@app.head("/api/video/{job_id}")
+@app.get("/api/video/{job_id}")
+async def get_video(job_id: str):
+    output_path = OUTPUT_DIR / f"{job_id}_output.mp4"
+    if not output_path.exists():
+        raise HTTPException(404, "Result not ready yet")
+    return FileResponse(
+        str(output_path),
+        media_type="video/mp4",
+        filename=f"segmented_{job_id[:8]}.mp4",
+    )
+
+
+@app.delete("/api/job/{job_id}")
+async def delete_job(job_id: str):
+    jobs.pop(job_id, None)
+    for path in UPLOAD_DIR.glob(f"{job_id}*"):
+        path.unlink(missing_ok=True)
+    for path in OUTPUT_DIR.glob(f"{job_id}*"):
+        path.unlink(missing_ok=True)
+    return {"job_id": job_id, "status": "deleted"}
+
+
+@app.get("/api/health")
+async def health():
+    import torch
+    return {"status": "ok", "device": "cuda" if torch.cuda.is_available() else "cpu"}
+
+
+# ─── WebSocket progress ───────────────────────────────────────────────────────
+
+@app.websocket("/ws/{job_id}")
+async def websocket_progress(ws: WebSocket, job_id: str):
+    await ws.accept()
+    try:
+        while True:
+            if job_id in jobs:
+                job = jobs[job_id]
+                await ws.send_json({"job_id": job_id, **job})
+                if job["status"] in ("done", "error"):
+                    break
+            else:
+                out = OUTPUT_DIR / f"{job_id}_output.mp4"
+                if out.exists():
+                    await ws.send_json({"status": "done", "pct": 100.0, "detected": []})
+                    break
+                await ws.send_json({"status": "queued", "pct": 0.0, "detected": []})
+            await asyncio.sleep(0.8)
+    except WebSocketDisconnect:
+        pass
+
+
+# ─── Serve Next.js static export ─────────────────────────────────────────────
+
+if STATIC_DIR.exists():
+    # Serve Next.js _next/ assets (JS, CSS, images)
+    _next_dir = STATIC_DIR / "_next"
+    if _next_dir.exists():
+        app.mount("/_next", StaticFiles(directory=str(_next_dir)), name="nextjs-assets")
+
+    @app.get("/{full_path:path}")
+    async def serve_spa(full_path: str):
+        """
+        SPA catch-all: try to serve the exact static file, then .html,
+        then fall back to index.html so client-side routing works.
+        """
+        # Exact file match (images, etc.)
+        candidate = STATIC_DIR / full_path
+        if candidate.is_file():
+            return FileResponse(str(candidate))
+
+        # Next.js static export adds .html per route
+        html_candidate = STATIC_DIR / f"{full_path}.html"
+        if html_candidate.is_file():
+            return FileResponse(str(html_candidate))
+
+        # For dynamic segments like /processing/[id], Next.js generates
+        # processing/[id].html — look for that pattern
+        parts = full_path.split("/")
+        if len(parts) == 2:
+            segment_html = STATIC_DIR / parts[0] / "[id].html"
+            if segment_html.is_file():
+                return FileResponse(str(segment_html))
+
+        # Final fallback: root index.html (SPA entry)
+        index = STATIC_DIR / "index.html"
+        if index.is_file():
+            return FileResponse(str(index))
+
+        raise HTTPException(404, "Not found")
+else:
+    @app.get("/")
+    async def root():
+        return {"message": "SegVision API is running. Frontend not found — build it first."}

backend/main.py

@@ -75,7 +75,10 @@ class ConnectionManager:
 
     def disconnect(self, job_id: str, ws: WebSocket):
         if job_id in self.active:
-            self.active[job_id].discard(ws)
+            try:
+                self.active[job_id].remove(ws)
+            except ValueError:
+                pass
 
     async def broadcast(self, job_id: str, data: dict):
         for ws in list(self.active.get(job_id, [])):
@@ -185,6 +188,7 @@ async def get_status(job_id: str):
     return {"job_id": job_id, "status": state.lower()}
 
 
+@app.head("/api/video/{job_id}")
 @app.get("/api/video/{job_id}")
 async def get_video(job_id: str):
     """Stream the processed video file."""

frontend/next.config.js

@@ -1,19 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  // Local dev: talks directly to FastAPI on :8000
+  // Docker/HF build: NEXT_PUBLIC_API_URL="" — nginx routes /api/* to FastAPI
   env: {
-    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000',
-  },
-  // Allow streaming video from the backend
-  async headers() {
-    return [
-      {
-        source: '/api/:path*',
-        headers: [
-          { key: 'Access-Control-Allow-Origin', value: '*' },
-        ],
-      },
-    ]
+    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000',
   },
+
+  // Standalone output is needed for Docker (HF Spaces).
+  // Set BUILD_STANDALONE=1 in Dockerfile; omit for local dev.
+  ...(process.env.BUILD_STANDALONE === '1' ? { output: 'standalone' } : {}),
 }
 
 module.exports = nextConfig

frontend/package-lock.json

@@ -0,0 +1,1632 @@
+{
+  "name": "video-seg-frontend",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "video-seg-frontend",
+      "version": "0.1.0",
+      "dependencies": {
+        "next": "14.2.3",
+        "react": "^18",
+        "react-dom": "^18"
+      },
+      "devDependencies": {
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "autoprefixer": "^10.0.1",
+        "postcss": "^8",
+        "tailwindcss": "^3.3.0",
+        "typescript": "^5"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz",
+      "integrity": "sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
+      "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
+      "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
+      "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
+      "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
+      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
+      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
+      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
+      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
+      "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.19.39",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.39.tgz",
+      "integrity": "sha512-orrrD74MBUyK8jOAD/r0+lfa1I2MO6I+vAkmAWzMYbCcgrN4lCrmK52gRFQq/JRxfYPfonkr4b0jcY7Olqdqbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.28",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz",
+      "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.0.tgz",
+      "integrity": "sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "caniuse-lite": "^1.0.30001787",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.20",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.20.tgz",
+      "integrity": "sha512-1AaXxEPfXT+GvTBJFuy4yXVHWJBXa4OdbIebGN/wX5DlsIkU0+wzGnd2lOzokSk51d5LUmqjgBLRLlypLUqInQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001788",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001788.tgz",
+      "integrity": "sha512-6q8HFp+lOQtcf7wBK+uEenxymVWkGKkjFpCvw5W25cmMwEDU45p1xQFBQv8JDlMMry7eNxyBaR+qxgmTUZkIRQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.340",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.340.tgz",
+      "integrity": "sha512-908qahOGocRMinT2nM3ajCEM99H4iPdv84eagPP3FfZy/1ZGeOy2CZYzjhms81ckOPCXPlW7LkY4XpxD8r1DrA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/hasown": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.3.tgz",
+      "integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.3.tgz",
+      "integrity": "sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==",
+      "deprecated": "This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "14.2.3",
+        "@swc/helpers": "0.5.5",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "14.2.3",
+        "@next/swc-darwin-x64": "14.2.3",
+        "@next/swc-linux-arm64-gnu": "14.2.3",
+        "@next/swc-linux-arm64-musl": "14.2.3",
+        "@next/swc-linux-x64-gnu": "14.2.3",
+        "@next/swc-linux-x64-musl": "14.2.3",
+        "@next/swc-win32-arm64-msvc": "14.2.3",
+        "@next/swc-win32-ia32-msvc": "14.2.3",
+        "@next/swc-win32-x64-msvc": "14.2.3"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.37",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.37.tgz",
+      "integrity": "sha512-1h5gKZCF+pO/o3Iqt5Jp7wc9rH3eJJ0+nh/CIoiRwjRxde/hAHyLPXYN4V3CqKAbiZPSeJFSWHmJsbkicta0Eg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.10.tgz",
+      "integrity": "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}

frontend/src/app/globals.css

@@ -1,147 +1,401 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+/* ─── Tokens ───────────────────────────────────────────────────────────────── */
 :root {
-  --bg: #0f1117;
-  --surface: #1a1d27;
-  --border: #2a2d3a;
-  --brand: #6366f1;
-  --brand-light: #818cf8;
+  --bg:       #ffffff;
+  --surface:  #fafafa;
+  --border:   #e5e7eb;
+  --border2:  #f0f0f0;
+  --text:     #0f172a;
+  --muted:    #64748b;
+  --accent:   #f97316;
+  --accent2:  #fbbf24;
+  --radius:   16px;
 }
 
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
+* { box-sizing: border-box; margin: 0; padding: 0; }
 
 html, body {
   min-height: 100vh;
-  background-color: var(--bg);
-  color: #fff;
+  background: var(--bg);
+  color: var(--text);
   font-family: 'Inter', system-ui, sans-serif;
   scroll-behavior: smooth;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ─── Scrollbar ─────────────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: #f1f5f9; }
+::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+
+/* ─── Subtle dot grid background ───────────────────────────────────────────── */
+.page-bg {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+/* ─── ─── Scroll Animations ─────────────────────────────────────────────────── */
+.scroll-hidden {
+  opacity: 0;
+  transform: translateY(28px);
+  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.scroll-hidden.delay-1 { transition-delay: 0.1s; }
+.scroll-hidden.delay-2 { transition-delay: 0.2s; }
+.scroll-hidden.delay-3 { transition-delay: 0.3s; }
+.scroll-hidden.delay-4 { transition-delay: 0.4s; }
+
+.scroll-visible {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
 }
 
-/* Custom scrollbar */
-::-webkit-scrollbar { width: 6px; }
-::-webkit-scrollbar-track { background: var(--bg); }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: #3a3d4a; }
+/* Fade in from left */
+.scroll-left {
+  opacity: 0;
+  transform: translateX(-24px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+.scroll-left.scroll-visible { opacity: 1; transform: translateX(0); }
 
-/* Glass card */
-.glass {
-  background: rgba(26, 29, 39, 0.8);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+/* Fade in from right */
+.scroll-right {
+  opacity: 0;
+  transform: translateX(24px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
 }
+.scroll-right.scroll-visible { opacity: 1; transform: translateX(0); }
 
-/* Glow button */
-.btn-glow {
+/* Scale in */
+.scroll-scale {
+  opacity: 0;
+  transform: scale(0.93);
+  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1);
+}
+.scroll-scale.scroll-visible { opacity: 1; transform: scale(1); }
+
+/* ─── Navbar ────────────────────────────────────────────────────────────────── */
+.navbar {
+  background: rgba(255, 255, 255, 0.88);
+  backdrop-filter: blur(16px) saturate(150%);
+  -webkit-backdrop-filter: blur(16px) saturate(150%);
+  border-bottom: 1px solid var(--border2);
+}
+
+/* ─── Cards ─────────────────────────────────────────────────────────────────── */
+.card {
+  background: #ffffff;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  transition: box-shadow 0.25s, border-color 0.25s, transform 0.2s;
+}
+.card:hover {
+  box-shadow: 0 12px 40px rgba(0,0,0,0.09);
+  border-color: #d1d5db;
+  transform: translateY(-2px);
+}
+
+/* ─── Moving Border Card ────────────────────────────────────────────────────── */
+.moving-border-card {
   position: relative;
-  overflow: hidden;
-  transition: all 0.3s ease;
+  background: #ffffff;
+  border-radius: var(--radius);
 }
-.btn-glow::before {
+.moving-border-card::before {
   content: '';
   position: absolute;
-  inset: -2px;
-  border-radius: inherit;
-  background: linear-gradient(135deg, #6366f1, #a855f7, #06b6d4);
-  opacity: 0;
-  transition: opacity 0.3s;
+  inset: -1px;
+  border-radius: calc(var(--radius) + 1px);
+  background: conic-gradient(
+    from var(--angle, 0deg),
+    transparent 75%,
+    #f97316 80%,
+    #fbbf24 85%,
+    #fb923c 90%,
+    transparent 95%
+  );
+  animation: border-spin 4s linear infinite;
   z-index: -1;
 }
-.btn-glow:hover::before { opacity: 1; }
-
-/* Shimmer skeleton */
-.shimmer {
-  background: linear-gradient(
-    90deg,
-    rgba(255,255,255,0.03) 25%,
-    rgba(255,255,255,0.08) 50%,
-    rgba(255,255,255,0.03) 75%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 2s linear infinite;
+.moving-border-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius);
+  background: #ffffff;
+  z-index: -1;
 }
+@property --angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+@keyframes border-spin { to { --angle: 360deg; } }
 
-/* Drop zone */
+/* ─── Drop Zone ─────────────────────────────────────────────────────────────── */
 .drop-zone {
-  border: 2px dashed rgba(99, 102, 241, 0.4);
+  border: 2px dashed #e5e7eb;
+  border-radius: 12px;
+  background: #fafafa;
+  cursor: pointer;
   transition: all 0.25s ease;
 }
 .drop-zone:hover,
 .drop-zone.drag-over {
-  border-color: rgba(99, 102, 241, 0.9);
-  background: rgba(99, 102, 241, 0.06);
-  box-shadow: 0 0 40px rgba(99, 102, 241, 0.12);
+  border-color: #f97316;
+  background: #fff8f2;
+  box-shadow: 0 0 0 4px rgba(249,115,22,0.07);
+}
+
+/* ─── Black CTA Button ──────────────────────────────────────────────────────── */
+.btn-primary {
+  position: relative;
+  overflow: hidden;
+  background: #0f172a;
+  border: 0;
+  border-radius: 12px;
+  color: #ffffff;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
+  letter-spacing: -0.01em;
+}
+.btn-primary::after {
+  content: '';
+  position: absolute;
+  top: -50%; left: -80%;
+  width: 60%; height: 200%;
+  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
+  transform: skewX(-20deg);
+  animation: shimmer-light 3s ease-in-out infinite;
+}
+@keyframes shimmer-light {
+  0%   { left: -80%; }
+  100% { left: 140%; }
+}
+.btn-primary:hover {
+  background: #1e293b;
+  transform: translateY(-1px);
+  box-shadow: 0 8px 30px rgba(15,23,42,0.25);
+}
+.btn-primary:active { transform: translateY(0); }
+.btn-primary:disabled {
+  background: #cbd5e1;
+  color: #94a3b8;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+.btn-primary:disabled::after { display: none; }
+
+/* ─── Outlined Button ───────────────────────────────────────────────────────── */
+.btn-outline {
+  background: transparent;
+  border: 1.5px solid var(--border);
+  border-radius: 12px;
+  color: var(--muted);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.btn-outline:hover {
+  border-color: #94a3b8;
+  color: var(--text);
+  background: #f8fafc;
 }
 
-/* Progress bar */
+/* ─── Progress Bar ──────────────────────────────────────────────────────────── */
 .progress-track {
-  background: rgba(255,255,255,0.06);
+  background: #f1f5f9;
   border-radius: 999px;
   overflow: hidden;
 }
 .progress-fill {
   height: 100%;
   border-radius: 999px;
-  background: linear-gradient(90deg, #6366f1, #a855f7);
-  transition: width 0.5s ease-out;
+  background: linear-gradient(90deg, #f97316, #fbbf24, #fb923c);
+  background-size: 200% 100%;
+  animation: gradient-scroll 2s linear infinite;
+  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
-  overflow: hidden;
 }
 .progress-fill::after {
   content: '';
   position: absolute;
-  top: 0; right: -100%; bottom: 0;
-  width: 60%;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
-  animation: shimmer 1.5s linear infinite;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
+  animation: pill-shimmer 1.5s linear infinite;
+}
+@keyframes gradient-scroll {
+  0%   { background-position: 0% 50%; }
+  100% { background-position: 200% 50%; }
+}
+@keyframes pill-shimmer {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(400%); }
 }
 
-/* Class pill */
+/* ─── Class Pill ─────────────────────────────────────────────────────────────── */
 .class-pill {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 3px 10px;
+  padding: 4px 10px;
   border-radius: 999px;
   font-size: 12px;
   font-weight: 500;
-  background: rgba(255,255,255,0.07);
-  border: 1px solid rgba(255,255,255,0.1);
-  animation: slideUp 0.3s ease-out;
+  background: #f8fafc;
+  border: 1px solid #e5e7eb;
+  color: #475569;
+  transition: all 0.2s;
+  animation: pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.class-pill:hover {
+  background: #fff8f2;
+  border-color: #fdba74;
+  color: #c2410c;
+  transform: scale(1.05);
+}
+@keyframes pop-in {
+  0%   { opacity: 0; transform: scale(0.7); }
+  100% { opacity: 1; transform: scale(1); }
 }
 
-/* Video comparison */
-.video-wrapper {
+/* ─── Stat Card ─────────────────────────────────────────────────────────────── */
+.stat-card {
+  background: #ffffff;
+  border: 1px solid #f0f0f0;
+  border-radius: 14px;
+  padding: 20px;
+  transition: all 0.25s;
   position: relative;
   overflow: hidden;
-  border-radius: 12px;
-  background: #000;
+  cursor: default;
 }
-.video-wrapper video {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  display: block;
+.stat-card:hover {
+  border-color: #fdba74;
+  box-shadow: 0 8px 30px rgba(249,115,22,0.08);
+  transform: translateY(-3px);
+}
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, #f97316, #fbbf24);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s ease;
 }
+.stat-card:hover::before { transform: scaleX(1); }
 
-/* Stat card */
-.stat-card {
-  background: rgba(255,255,255,0.04);
-  border: 1px solid rgba(255,255,255,0.08);
-  border-radius: 12px;
-  padding: 16px 20px;
-  transition: all 0.2s;
+/* ─── Gradient Heading Text ─────────────────────────────────────────────────── */
+.text-gradient {
+  background: linear-gradient(135deg, #f97316 0%, #f59e0b 50%, #fb923c 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-size: 200% 200%;
+  animation: gradient-shift 4s ease infinite;
 }
-.stat-card:hover {
-  background: rgba(255,255,255,0.07);
-  border-color: rgba(99, 102, 241, 0.4);
+@keyframes gradient-shift {
+  0%   { background-position: 0% 50%; }
+  50%  { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* ─── Word animation ────────────────────────────────────────────────────────── */
+.word-animate {
+  display: inline-block;
+  opacity: 0;
+  transform: translateY(20px);
+  animation: word-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
+@keyframes word-in {
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ─── Badge ─────────────────────────────────────────────────────────────────── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 14px;
+  border-radius: 999px;
+  border: 1px solid #fed7aa;
+  background: #fff7ed;
+  font-size: 12px;
+  font-weight: 500;
+  color: #c2410c;
+}
+
+/* ─── Divider ───────────────────────────────────────────────────────────────── */
+.divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, #e5e7eb 20%, #e5e7eb 80%, transparent);
+}
+
+/* ─── Step Indicator ────────────────────────────────────────────────────────── */
+.step-dot {
+  width: 28px; height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  transition: all 0.4s;
+  flex-shrink: 0;
+}
+.step-dot.done    { background: #dcfce7; color: #15803d; border: 2px solid #86efac; }
+.step-dot.active  { background: #0f172a; color: white; border: 2px solid #0f172a; box-shadow: 0 0 0 3px rgba(15,23,42,0.12); }
+.step-dot.pending { background: #f8fafc; color: #94a3b8; border: 2px solid #e5e7eb; }
+
+/* ─── Bounce Dots ───────────────────────────────────────────────────────────── */
+.bounce-dot {
+  display: inline-block;
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  animation: bounce-dot 1.2s ease-in-out infinite;
+}
+.bounce-dot:nth-child(1) { animation-delay: 0s; }
+.bounce-dot:nth-child(2) { animation-delay: 0.2s; }
+.bounce-dot:nth-child(3) { animation-delay: 0.4s; }
+@keyframes bounce-dot {
+  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
+  40%            { transform: scale(1.2); opacity: 1; }
+}
+
+/* ─── Range Input ───────────────────────────────────────────────────────────── */
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background: #e5e7eb;
+  border-radius: 999px;
+  cursor: pointer;
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 14px; height: 14px;
+  border-radius: 50%;
+  background: #0f172a;
+  cursor: pointer;
+}
+
+/* ─── Video UI ──────────────────────────────────────────────────────────────── */
+.video-wrapper { background: #000; border-radius: 12px; overflow: hidden; }
+.video-wrapper video { width: 100%; display: block; object-fit: contain; }
+
+/* ─── Section spacing ───────────────────────────────────────────────────────── */
+.section { padding: 80px 0; }

frontend/src/app/layout.tsx

@@ -2,61 +2,74 @@ import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
 
-const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
+const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
   title: 'SegVision — AI Video Segmentation',
-  description:
-    'Upload any video and get real-time semantic segmentation with 21-class PASCAL VOC overlay. Powered by DeepLabV3 + ResNet-50.',
-  keywords: ['video segmentation', 'AI', 'semantic segmentation', 'DeepLabV3', 'computer vision'],
-  openGraph: {
-    title: 'SegVision — AI Video Segmentation',
-    description: 'Semantic segmentation overlay for any video, in seconds.',
-    type: 'website',
-  },
+  description: 'Upload any video and get real-time semantic segmentation. Powered by DeepLabV3 + ResNet-50.',
 }
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={inter.variable}>
-      <head>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-      </head>
-      <body className="bg-surface text-white antialiased min-h-screen">
-        {/* Ambient background glow */}
-        <div className="fixed inset-0 pointer-events-none overflow-hidden">
-          <div className="absolute -top-40 -left-40 w-96 h-96 bg-brand-600/20 rounded-full blur-3xl animate-pulse-slow" />
-          <div className="absolute -bottom-40 -right-40 w-96 h-96 bg-purple-600/15 rounded-full blur-3xl animate-pulse-slow" style={{ animationDelay: '1.5s' }} />
-        </div>
+    <html lang="en">
+      <body className={`${inter.className} bg-white text-slate-900 antialiased min-h-screen`}>
+
+        {/* Subtle dot grid */}
+        <div className="page-bg" aria-hidden="true" />
 
         {/* Navbar */}
-        <nav className="relative z-10 border-b border-surface-border bg-surface/80 backdrop-blur-xl">
-          <div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
-            <a href="/" className="flex items-center gap-2 group">
-              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5">
+        <nav className="navbar fixed top-0 left-0 right-0 z-50">
+          <div className="max-w-6xl mx-auto px-5 h-16 flex items-center justify-between">
+
+            {/* Logo */}
+            <a href="/" className="flex items-center gap-2.5 group">
+              <div className="w-8 h-8 rounded-xl bg-slate-900 flex items-center justify-center group-hover:scale-105 transition-transform duration-200">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round">
                   <polygon points="5 3 19 12 5 21 5 3"/>
                 </svg>
               </div>
-              <span className="text-lg font-bold tracking-tight">
-                Seg<span className="text-brand-400">Vision</span>
+              <span className="text-base font-bold tracking-tight text-slate-900">
+                Seg<span className="text-gradient">Vision</span>
               </span>
             </a>
-            <div className="flex items-center gap-4 text-sm text-gray-400">
-              <span className="hidden sm:flex items-center gap-1.5">
-                <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
-                DeepLabV3 · ResNet-50 · PASCAL VOC 21
-              </span>
+
+            {/* Right */}
+            <div className="flex items-center gap-3">
+              <div className="hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-green-200 bg-green-50 text-xs font-medium text-green-700">
+                <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse inline-block" />
+                Model Live
+              </div>
+              <a
+                href="https://github.com/mathsphile/video-segmentation-"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-9 h-9 rounded-xl border border-slate-200 flex items-center justify-center text-slate-400 hover:text-slate-700 hover:border-slate-300 transition-all"
+              >
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                </svg>
+              </a>
             </div>
           </div>
         </nav>
 
-        <main className="relative z-10">
+        <main className="relative z-10 pt-16">
           {children}
         </main>
 
-        <footer className="relative z-10 border-t border-surface-border mt-20 py-8 text-center text-sm text-gray-500">
-          <p>SegVision · Semantic Video Segmentation · DeepLabV3 + ResNet-50</p>
+        <footer className="relative z-10 border-t border-slate-100 py-10 mt-20">
+          <div className="max-w-6xl mx-auto px-5 flex flex-col sm:flex-row items-center justify-between gap-4">
+            <div className="flex items-center gap-2">
+              <div className="w-6 h-6 rounded-lg bg-slate-900 flex items-center justify-center">
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+              </div>
+              <span className="text-sm font-semibold text-slate-800">SegVision</span>
+            </div>
+            <p className="text-xs text-slate-400">DeepLabV3 + ResNet-50 · PASCAL VOC 21 Classes · H.264 Output</p>
+            <a href="https://github.com/mathsphile/video-segmentation-" target="_blank" className="text-xs text-slate-400 hover:text-slate-700 transition-colors">
+              GitHub ↗
+            </a>
+          </div>
         </footer>
       </body>
     </html>

frontend/src/app/page.tsx

@@ -1,77 +1,113 @@
 'use client'
 
-import { useState, useRef, useCallback, DragEvent, ChangeEvent } from 'react'
+import { useState, useRef, useCallback, useEffect, DragEvent } from 'react'
 import { useRouter } from 'next/navigation'
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000'
 
-const VOC_COLORS: Record<string, string> = {
-  background:    '#000000', aeroplane:   '#87CEEB', bicycle:     '#FFA500',
-  bird:          '#FFD700', boat:        '#00BFFF', bottle:      '#9400D3',
-  bus:           '#FF1493', car:         '#DC143C', cat:         '#FF8C00',
-  chair:         '#8B4513', cow:         '#FFFF00', diningtable: '#D2691E',
-  dog:           '#BA55D3', horse:       '#FF69B4', motorbike:   '#00FF7F',
-  person:        '#FF4500', 'potted plant': '#228B22', sheep:   '#F0E68C',
-  sofa:          '#00CED1', train:       '#0000FF', 'tv/monitor': '#7FFFD4',
-}
+const VOC_CLASSES = [
+  { name: 'aeroplane', color: '#87CEEB' }, { name: 'bicycle', color: '#FFA500' },
+  { name: 'bird', color: '#FFD700' },      { name: 'boat', color: '#00BFFF' },
+  { name: 'bottle', color: '#9400D3' },    { name: 'bus', color: '#FF1493' },
+  { name: 'car', color: '#DC143C' },       { name: 'cat', color: '#FF8C00' },
+  { name: 'chair', color: '#8B4513' },     { name: 'cow', color: '#D4A017' },
+  { name: 'diningtable', color: '#D2691E' },{ name: 'dog', color: '#BA55D3' },
+  { name: 'horse', color: '#FF69B4' },     { name: 'motorbike', color: '#22c55e' },
+  { name: 'person', color: '#FF4500' },    { name: 'potted plant', color: '#228B22' },
+  { name: 'sheep', color: '#B8A40A' },     { name: 'sofa', color: '#00CED1' },
+  { name: 'train', color: '#3b82f6' },     { name: 'tv/monitor', color: '#0D9488' },
+]
+
+const STEPS = [
+  { num: '01', title: 'Upload', desc: 'Drag & drop or select your video file' },
+  { num: '02', title: 'Process', desc: 'AI segments every frame with DeepLabV3' },
+  { num: '03', title: 'Download', desc: 'Get H.264 side-by-side comparison MP4' },
+]
+
+const FEATURES = [
+  {
+    icon: '🎯',
+    title: '21 Object Classes',
+    desc: 'Identifies people, cars, animals, furniture & more using PASCAL VOC labels.',
+    tag: 'PASCAL VOC'
+  },
+  {
+    icon: '⚡',
+    title: 'GPU Accelerated',
+    desc: 'CUDA-powered inference for real-time frame-by-frame segmentation.',
+    tag: 'PyTorch'
+  },
+  {
+    icon: '🎬',
+    title: 'Side-by-Side Output',
+    desc: 'Original and segmented frames combined into one comparison video.',
+    tag: 'H.264 MP4'
+  },
+  {
+    icon: '📡',
+    title: 'Live Progress',
+    desc: 'Real-time WebSocket updates showing segmentation progress as it runs.',
+    tag: 'WebSocket'
+  },
+]
+
+const formatBytes = (b: number) => b < 1024*1024
+  ? `${(b/1024).toFixed(1)} KB`
+  : `${(b/(1024*1024)).toFixed(1)} MB`
 
-const formatBytes = (bytes: number) => {
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+/* ── Scroll animation hook ──────────────────────────────────────────────────── */
+function useScrollReveal() {
+  useEffect(() => {
+    const targets = document.querySelectorAll('.scroll-hidden, .scroll-left, .scroll-right, .scroll-scale')
+    const observer = new IntersectionObserver(
+      (entries) => entries.forEach(e => {
+        if (e.isIntersecting) {
+          e.target.classList.add('scroll-visible')
+          observer.unobserve(e.target)
+        }
+      }),
+      { threshold: 0.12 }
+    )
+    targets.forEach(t => observer.observe(t))
+    return () => observer.disconnect()
+  }, [])
 }
 
 export default function HomePage() {
-  const router = useRouter()
+  const router   = useRouter()
   const fileInputRef = useRef<HTMLInputElement>(null)
-  const [dragging, setDragging] = useState(false)
-  const [file, setFile] = useState<File | null>(null)
-  const [preview, setPreview] = useState<string | null>(null)
+
+  const [dragging,  setDragging]  = useState(false)
+  const [file,      setFile]      = useState<File | null>(null)
+  const [preview,   setPreview]   = useState<string | null>(null)
   const [uploading, setUploading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  const validate = (f: File): string | null => {
-    const allowed = ['video/mp4', 'video/quicktime', 'video/x-msvideo', 'video/webm', 'video/x-matroska']
-    if (!allowed.includes(f.type) && !f.name.match(/\.(mp4|mov|avi|webm|mkv)$/i))
-      return 'Only MP4, MOV, AVI, WebM, MKV files are supported.'
-    if (f.size > 200 * 1024 * 1024)
-      return 'File too large. Maximum size is 200 MB.'
+  const [error,     setError]     = useState<string | null>(null)
+
+  useScrollReveal()
+
+  const validate = (f: File) => {
+    if (!f.name.match(/\.(mp4|mov|avi|webm|mkv)$/i)) return 'Only MP4, MOV, AVI, WebM, MKV supported.'
+    if (f.size > 200 * 1024 * 1024) return 'File too large. Max 200 MB.'
     return null
   }
 
   const selectFile = useCallback((f: File) => {
-    const err = validate(f)
-    if (err) { setError(err); return }
-    setError(null)
-    setFile(f)
-    // Create video preview thumbnail
-    const url = URL.createObjectURL(f)
-    setPreview(url)
+    const err = validate(f); if (err) { setError(err); return }
+    setError(null); setFile(f); setPreview(URL.createObjectURL(f))
   }, [])
 
   const onDrop = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault()
-    setDragging(false)
-    const f = e.dataTransfer.files[0]
-    if (f) selectFile(f)
+    e.preventDefault(); setDragging(false)
+    const f = e.dataTransfer.files[0]; if (f) selectFile(f)
   }, [selectFile])
 
-  const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const f = e.target.files?.[0]
-    if (f) selectFile(f)
-  }
-
   const handleUpload = async () => {
     if (!file) return
-    setUploading(true)
-    setError(null)
+    setUploading(true); setError(null)
     try {
-      const form = new FormData()
-      form.append('file', file)
+      const form = new FormData(); form.append('file', file)
       const res = await fetch(`${API_BASE}/api/upload`, { method: 'POST', body: form })
-      if (!res.ok) {
-        const data = await res.json()
-        throw new Error(data.detail ?? 'Upload failed')
-      }
+      if (!res.ok) { const d = await res.json(); throw new Error(d.detail ?? 'Upload failed') }
       const data = await res.json()
       router.push(`/processing/${data.job_id}`)
     } catch (e: any) {
@@ -81,153 +117,216 @@ export default function HomePage() {
   }
 
   return (
-    <div className="max-w-4xl mx-auto px-4 py-16">
+    <div className="bg-white">
 
-      {/* Hero */}
-      <div className="text-center mb-14 animate-fade-in">
-        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium bg-brand-500/10 border border-brand-500/20 text-brand-400 mb-6">
-          <span className="w-1.5 h-1.5 rounded-full bg-brand-400 animate-pulse"></span>
-          Powered by DeepLabV3 · ResNet-50 · PASCAL VOC
+      {/* ── Hero ───────────────────────────────────────────────────────────────── */}
+      <section className="max-w-5xl mx-auto px-5 pt-24 pb-16 text-center">
+        {/* Badge — animates immediately */}
+        <div
+          className="badge mx-auto mb-8 w-fit"
+          style={{ animation: 'word-in 0.5s ease forwards' }}
+        >
+          <span className="w-2 h-2 rounded-full bg-orange-400 animate-pulse inline-block" />
+          DeepLabV3 · ResNet-50 · PASCAL VOC 21 Classes
         </div>
-        <h1 className="text-5xl sm:text-6xl font-extrabold tracking-tight mb-5 leading-tight">
-          AI Video
-          <span className="block bg-gradient-to-r from-brand-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
-            Segmentation
-          </span>
+
+        {/* Headline */}
+        <h1 className="text-5xl sm:text-7xl font-black tracking-tight leading-[1.05] mb-6">
+          {'AI Video'.split('').map((c,i) => (
+            <span key={i} className="word-animate inline-block" style={{ animationDelay: `${i * 0.04}s` }}>
+              {c === ' ' ? '\u00a0' : c}
+            </span>
+          ))}
+          <br />
+          <span className="text-gradient">Segmentation</span>
         </h1>
-        <p className="text-lg text-gray-400 max-w-xl mx-auto leading-relaxed">
-          Upload any video and watch AI detect and colour every object in real-time.
-          Get a side-by-side comparison instantly.
+
+        <p
+          className="text-lg text-slate-500 max-w-xl mx-auto leading-relaxed mb-10"
+          style={{ animation: 'word-in 0.6s 0.4s ease forwards', opacity: 0 }}
+        >
+          Upload any video and watch AI identify, colour, and label
+          every object in real-time — delivered as a stunning side-by-side comparison.
         </p>
-      </div>
-
-      {/* Upload Card */}
-      <div className="glass rounded-2xl p-8 shadow-2xl animate-slide-up">
-
-        {!file ? (
-          /* Drop Zone */
-          <div
-            className={`drop-zone rounded-xl p-12 flex flex-col items-center justify-center cursor-pointer min-h-[280px] ${dragging ? 'drag-over' : ''}`}
-            onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
-            onDragLeave={() => setDragging(false)}
-            onDrop={onDrop}
-            onClick={() => fileInputRef.current?.click()}
+
+        {/* CTA scroll hint */}
+        <div style={{ animation: 'word-in 0.5s 0.7s ease forwards', opacity: 0 }}>
+          <a
+            href="#upload"
+            className="btn-primary inline-flex items-center gap-2 px-7 py-3.5 text-sm"
+            onClick={e => { e.preventDefault(); document.getElementById('upload')?.scrollIntoView({ behavior:'smooth' }) }}
           >
-            <div className={`w-20 h-20 rounded-2xl flex items-center justify-center mb-5 transition-all duration-300 ${dragging ? 'bg-brand-500/20 scale-110' : 'bg-brand-500/10'}`}>
-              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke={dragging ? '#818cf8' : '#6366f1'} strokeWidth="1.5">
-                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-                <polyline points="17 8 12 3 7 8"/>
-                <line x1="12" y1="3" x2="12" y2="15"/>
-              </svg>
-            </div>
-            <p className="text-xl font-semibold text-white mb-2">
-              {dragging ? 'Drop it here!' : 'Drop your video here'}
-            </p>
-            <p className="text-gray-400 text-sm mb-5">or click to browse your files</p>
-            <div className="flex items-center gap-2 text-xs text-gray-500">
-              <span className="px-2 py-0.5 rounded bg-white/5 border border-white/10">MP4</span>
-              <span className="px-2 py-0.5 rounded bg-white/5 border border-white/10">MOV</span>
-              <span className="px-2 py-0.5 rounded bg-white/5 border border-white/10">AVI</span>
-              <span className="px-2 py-0.5 rounded bg-white/5 border border-white/10">WebM</span>
-              <span className="text-gray-600">· Max 200 MB</span>
-            </div>
-          </div>
-        ) : (
-          /* File Preview */
-          <div className="animate-fade-in">
-            <div className="video-wrapper mb-5 max-h-64">
-              <video src={preview!} muted className="w-full max-h-64" controls />
+            Start Segmenting
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+              <line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/>
+            </svg>
+          </a>
+        </div>
+      </section>
+
+      {/* ── How it Works ──────────────────────────────────────────────────────── */}
+      <section className="max-w-5xl mx-auto px-5 py-16">
+        <div className="divider mb-16" />
+        <h2 className="text-2xl font-bold text-center text-slate-900 mb-12 scroll-hidden">
+          How it works
+        </h2>
+
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-px bg-slate-100 rounded-2xl overflow-hidden border border-slate-100">
+          {STEPS.map((step, i) => (
+            <div
+              key={i}
+              className={`bg-white p-8 scroll-hidden delay-${i+1} hover:bg-orange-50 transition-colors duration-300`}
+            >
+              <div className="text-4xl font-black text-gradient mb-4">{step.num}</div>
+              <h3 className="text-base font-bold text-slate-900 mb-2">{step.title}</h3>
+              <p className="text-sm text-slate-500 leading-relaxed">{step.desc}</p>
             </div>
-            <div className="flex items-center justify-between p-4 rounded-xl bg-white/5 border border-white/10 mb-5">
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-lg bg-brand-500/15 flex items-center justify-center">
-                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2">
-                    <polygon points="5 3 19 12 5 21 5 3"/>
+          ))}
+        </div>
+      </section>
+
+      {/* ── Upload Card ───────────────────────────────────────────────────────── */}
+      <section id="upload" className="max-w-2xl mx-auto px-5 py-8">
+        <h2 className="text-xl font-bold text-slate-900 text-center mb-8 scroll-hidden">
+          Upload your video
+        </h2>
+
+        {/* Moving border card — clean white */}
+        <div className="moving-border-card p-1 scroll-scale">
+          <div className="bg-white rounded-[15px] p-6">
+
+            {!file ? (
+              <div
+                className={`drop-zone p-12 flex flex-col items-center ${dragging ? 'drag-over' : ''}`}
+                onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
+                onDragLeave={() => setDragging(false)}
+                onDrop={onDrop}
+                onClick={() => fileInputRef.current?.click()}
+              >
+                {/* Upload icon */}
+                <div className={`w-16 h-16 rounded-2xl border-2 ${dragging ? 'border-orange-400 bg-orange-50' : 'border-slate-200 bg-slate-50'} flex items-center justify-center mb-5 transition-all duration-300 ${dragging ? 'scale-110' : ''}`}>
+                  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={dragging ? '#f97316' : '#94a3b8'} strokeWidth="2" strokeLinecap="round">
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                    <polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
                   </svg>
                 </div>
-                <div>
-                  <p className="font-medium text-white text-sm truncate max-w-[200px] sm:max-w-sm">{file.name}</p>
-                  <p className="text-xs text-gray-400">{formatBytes(file.size)}</p>
+
+                <p className="text-base font-semibold text-slate-800 mb-1">
+                  {dragging ? 'Drop to upload' : 'Drop video here'}
+                </p>
+                <p className="text-sm text-slate-400 mb-5">or click to browse · Max 200 MB</p>
+
+                <div className="flex flex-wrap justify-center gap-2">
+                  {['MP4', 'MOV', 'AVI', 'WebM', 'MKV'].map(f => (
+                    <span key={f} className="px-2.5 py-1 rounded-lg bg-slate-100 text-slate-500 text-xs font-mono border border-slate-200">
+                      {f}
+                    </span>
+                  ))}
                 </div>
               </div>
-              <button
-                onClick={() => { setFile(null); setPreview(null); setError(null) }}
-                className="text-gray-400 hover:text-red-400 transition-colors p-1.5 rounded-lg hover:bg-red-500/10"
-              >
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+            ) : (
+              <div>
+                <div className="rounded-xl overflow-hidden border border-slate-200 mb-4 max-h-60 bg-black">
+                  <video src={preview!} muted controls className="w-full max-h-60" />
+                </div>
+                <div className="flex items-center justify-between p-3.5 rounded-xl bg-slate-50 border border-slate-200">
+                  <div className="flex items-center gap-3">
+                    <div className="w-9 h-9 rounded-xl border border-slate-200 bg-white flex items-center justify-center">
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f97316" strokeWidth="2">
+                        <polygon points="5 3 19 12 5 21 5 3"/>
+                      </svg>
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-slate-800 truncate max-w-[200px] sm:max-w-xs">{file.name}</p>
+                      <p className="text-xs text-slate-400">{formatBytes(file.size)}</p>
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => { setFile(null); setPreview(null); setError(null) }}
+                    className="w-8 h-8 rounded-lg border border-slate-200 hover:border-red-200 hover:bg-red-50 flex items-center justify-center text-slate-400 hover:text-red-500 transition-all"
+                  >
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            )}
+
+            <input ref={fileInputRef} type="file" accept="video/*" className="hidden"
+              onChange={e => { const f = e.target.files?.[0]; if (f) selectFile(f) }} />
+
+            {error && (
+              <div className="mt-4 p-3.5 rounded-xl bg-red-50 border border-red-200 text-red-600 text-sm flex items-center gap-2">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="flex-shrink-0">
+                  <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><circle cx="12" cy="16" r="0.5" fill="currentColor"/>
                 </svg>
-              </button>
-            </div>
+                {error}
+              </div>
+            )}
+
+            <button
+              onClick={handleUpload}
+              disabled={!file || uploading}
+              className="btn-primary mt-4 w-full py-3.5 text-sm flex items-center justify-center gap-2"
+            >
+              {uploading ? (
+                <>
+                  <svg className="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5">
+                    <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+                  </svg>
+                  Uploading & queuing…
+                </>
+              ) : (
+                <>
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5">
+                    <polygon points="5 3 19 12 5 21 5 3"/>
+                  </svg>
+                  Segment This Video
+                </>
+              )}
+            </button>
           </div>
-        )}
+        </div>
+      </section>
 
-        <input ref={fileInputRef} type="file" accept="video/*" className="hidden" onChange={onFileChange} />
+      {/* ── Feature Cards ─────────────────────────────────────────────────────── */}
+      <section className="max-w-5xl mx-auto px-5 py-16">
+        <div className="divider mb-16" />
+        <div className="flex items-center justify-between mb-10">
+          <h2 className="text-2xl font-bold text-slate-900 scroll-left">Features</h2>
+          <span className="badge scroll-right">PyTorch · FastAPI · Next.js</span>
+        </div>
 
-        {error && (
-          <div className="mt-4 p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-sm flex items-center gap-2">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
-            </svg>
-            {error}
-          </div>
-        )}
-
-        <button
-          onClick={handleUpload}
-          disabled={!file || uploading}
-          className="mt-6 w-full py-4 rounded-xl font-semibold text-white text-base transition-all duration-200
-            bg-gradient-to-r from-brand-600 to-purple-600
-            hover:from-brand-500 hover:to-purple-500
-            disabled:opacity-40 disabled:cursor-not-allowed
-            hover:shadow-lg hover:shadow-brand-500/25 hover:-translate-y-0.5
-            active:translate-y-0 flex items-center justify-center gap-3"
-        >
-          {uploading ? (
-            <>
-              <svg className="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
-                <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
-              </svg>
-              Uploading …
-            </>
-          ) : (
-            <>
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
-                <polygon points="5 3 19 12 5 21 5 3"/>
-              </svg>
-              Segment Video
-            </>
-          )}
-        </button>
-      </div>
-
-      {/* Feature Cards */}
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-10 animate-fade-in">
-        {[
-          { icon: '🎯', title: '21 Object Classes', desc: 'People, cars, animals, furniture & more from PASCAL VOC' },
-          { icon: '⚡', title: 'GPU Accelerated', desc: 'CUDA inference for fast frame-by-frame processing' },
-          { icon: '🎬', title: 'Side-by-Side View', desc: 'Original vs segmented video with downloadable output' },
-        ].map((f) => (
-          <div key={f.title} className="stat-card">
-            <div className="text-2xl mb-2">{f.icon}</div>
-            <h3 className="font-semibold text-white text-sm mb-1">{f.title}</h3>
-            <p className="text-xs text-gray-400 leading-relaxed">{f.desc}</p>
-          </div>
-        ))}
-      </div>
-
-      {/* Class palette preview */}
-      <div className="mt-10 glass rounded-xl p-6 animate-fade-in">
-        <h2 className="text-sm font-semibold text-gray-300 mb-4">Detectable Classes</h2>
-        <div className="flex flex-wrap gap-2">
-          {Object.entries(VOC_COLORS).filter(([k]) => k !== 'background').map(([cls, hex]) => (
-            <span key={cls} className="class-pill">
-              <span className="w-3 h-3 rounded-full flex-shrink-0" style={{ backgroundColor: hex }} />
-              {cls}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {FEATURES.map((f, i) => (
+            <div key={f.title} className={`stat-card scroll-hidden delay-${i+1}`}>
+              <div className="text-2xl mb-3">{f.icon}</div>
+              <div className="text-[10px] font-bold text-orange-500 uppercase tracking-widest mb-2">{f.tag}</div>
+              <h3 className="text-sm font-bold text-slate-800 mb-2">{f.title}</h3>
+              <p className="text-xs text-slate-500 leading-relaxed">{f.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ── Class Palette ─────────────────────────────────────────────────────── */}
+      <section className="max-w-5xl mx-auto px-5 pb-20">
+        <div className="divider mb-16" />
+        <div className="flex items-center justify-between mb-6 scroll-hidden">
+          <h2 className="text-2xl font-bold text-slate-900">Detectable Objects</h2>
+          <span className="text-sm text-slate-400 font-mono">{VOC_CLASSES.length} classes</span>
+        </div>
+        <div className="flex flex-wrap gap-2 scroll-hidden delay-1">
+          {VOC_CLASSES.map((c) => (
+            <span key={c.name} className="class-pill">
+              <span className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: c.color }} />
+              {c.name}
             </span>
           ))}
         </div>
-      </div>
+      </section>
+
     </div>
   )
 }

frontend/src/app/processing/[id]/page.tsx

@@ -6,48 +6,41 @@ import { useRouter, useParams } from 'next/navigation'
 const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000'
 
 const VOC_COLORS: Record<string, string> = {
-  aeroplane: '#87CEEB', bicycle: '#FFA500', bird: '#FFD700',
-  boat: '#00BFFF', bottle: '#9400D3', bus: '#FF1493',
-  car: '#DC143C', cat: '#FF8C00', chair: '#8B4513',
-  cow: '#FFFF00', diningtable: '#D2691E', dog: '#BA55D3',
-  horse: '#FF69B4', motorbike: '#00FF7F', person: '#FF4500',
-  'potted plant': '#228B22', sheep: '#F0E68C', sofa: '#00CED1',
-  train: '#0000FF', 'tv/monitor': '#7FFFD4',
+  aeroplane:'#87CEEB', bicycle:'#FFA500', bird:'#FFD700', boat:'#00BFFF',
+  bottle:'#9400D3', bus:'#FF1493', car:'#DC143C', cat:'#FF8C00',
+  chair:'#8B4513', cow:'#D4A017', diningtable:'#D2691E', dog:'#BA55D3',
+  horse:'#FF69B4', motorbike:'#22c55e', person:'#FF4500',
+  'potted plant':'#228B22', sheep:'#B8A40A', sofa:'#00CED1',
+  train:'#3b82f6', 'tv/monitor':'#0D9488',
 }
 
-const STATUS_LABELS: Record<string, string> = {
-  queued: 'Queued',
-  processing: 'Segmenting frames …',
-  done: 'Complete!',
-  error: 'Error',
-}
+const STEPS = ['Queued', 'Inferring Frames', 'Encoding H.264', 'Complete']
 
 export default function ProcessingPage() {
-  const router = useRouter()
-  const params = useParams()
-  const jobId = params?.id as string
+  const router  = useRouter()
+  const params  = useParams()
+  const jobId   = params?.id as string
+  const cardRef = useRef<HTMLDivElement>(null)
 
-  const [pct, setPct] = useState(0)
-  const [status, setStatus] = useState<string>('queued')
+  const [pct,      setPct]      = useState(0)
+  const [status,   setStatus]   = useState('queued')
   const [detected, setDetected] = useState<string[]>([])
-  const [error, setError] = useState<string | null>(null)
-  const [elapsed, setElapsed] = useState(0)
-  const wsRef = useRef<WebSocket | null>(null)
+  const [error,    setError]    = useState<string | null>(null)
+  const [elapsed,  setElapsed]  = useState(0)
   const timerRef = useRef<NodeJS.Timeout | null>(null)
 
   useEffect(() => {
-    if (!jobId) return
+    // Animate card in
+    setTimeout(() => cardRef.current?.classList.add('scroll-visible'), 50)
+  }, [])
 
-    // Start elapsed timer
-    const startTime = Date.now()
-    timerRef.current = setInterval(() => {
-      setElapsed(Math.floor((Date.now() - startTime) / 1000))
-    }, 1000)
+  useEffect(() => {
+    if (!jobId) return
+    const start = Date.now()
+    timerRef.current = setInterval(() => setElapsed(Math.floor((Date.now()-start)/1000)), 1000)
 
-    // Open WebSocket
-    const wsUrl = `${API_BASE.replace('http', 'ws')}/ws/${jobId}`
+    const wsUrl = `${API_BASE.replace('https','wss').replace('http','ws')}/ws/${jobId}`
     const ws = new WebSocket(wsUrl)
-    wsRef.current = ws
 
     ws.onmessage = (evt) => {
       const data = JSON.parse(evt.data)
@@ -55,164 +48,173 @@ export default function ProcessingPage() {
       if (data.pct !== undefined) setPct(data.pct)
       if (data.detected) setDetected(data.detected)
       if (data.status === 'done') {
-        setPct(100)
-        clearInterval(timerRef.current!)
+        setPct(100); clearInterval(timerRef.current!)
         setTimeout(() => router.push(`/result/${jobId}`), 1200)
       }
-      if (data.status === 'error') {
-        setError(data.error ?? 'Segmentation failed.')
-        clearInterval(timerRef.current!)
-      }
-    }
-
-    ws.onerror = () => {
-      // Fallback: poll via HTTP if WS fails
-      pollStatus()
-    }
-
-    return () => {
-      ws.close()
-      clearInterval(timerRef.current!)
+      if (data.status === 'error') { setError(data.error ?? 'Failed'); clearInterval(timerRef.current!) }
     }
+    ws.onerror = () => pollFallback()
+    return () => { ws.close(); clearInterval(timerRef.current!) }
   }, [jobId])
 
-  const pollStatus = async () => {
-    const interval = setInterval(async () => {
+  const pollFallback = () => {
+    const iv = setInterval(async () => {
       try {
-        const res = await fetch(`${API_BASE}/api/status/${jobId}`)
-        const data = await res.json()
-        setStatus(data.status)
-        if (data.pct !== undefined) setPct(data.pct)
-        if (data.detected) setDetected(data.detected)
-        if (data.status === 'done') {
-          clearInterval(interval)
-          clearInterval(timerRef.current!)
+        const d = await fetch(`${API_BASE}/api/status/${jobId}`).then(r=>r.json())
+        setStatus(d.status)
+        if (d.pct !== undefined) setPct(d.pct)
+        if (d.detected) setDetected(d.detected)
+        if (d.status === 'done') {
+          clearInterval(iv); clearInterval(timerRef.current!)
           setTimeout(() => router.push(`/result/${jobId}`), 1200)
         }
-        if (data.status === 'error') {
-          setError(data.error)
-          clearInterval(interval)
-        }
-      } catch (e) {
-        // ignore transient errors
-      }
-    }, 1000)
+        if (d.status === 'error') { setError(d.error); clearInterval(iv) }
+      } catch {}
+    }, 1200)
   }
 
-  const formatTime = (s: number) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`
+  const fmtTime = (s: number) => `${Math.floor(s/60)}:${String(s%60).padStart(2,'0')}`
+  const currentStep = status==='queued' ? 0 : status==='processing' ? 1 : status==='done' ? 3 : 2
 
   return (
-    <div className="max-w-2xl mx-auto px-4 py-20">
-      <div className="glass rounded-2xl p-10 shadow-2xl animate-fade-in">
-
-        {/* Status header */}
-        <div className="text-center mb-10">
+    <div className="max-w-xl mx-auto px-5 py-20">
+      <div
+        ref={cardRef}
+        className="scroll-hidden card p-8 border border-slate-200 shadow-sm"
+        style={{ borderRadius: '20px' }}
+      >
+        {/* Head */}
+        <div className="text-center mb-8">
+          {/* Icon */}
           <div className={`w-20 h-20 rounded-2xl mx-auto mb-5 flex items-center justify-center
-            ${status === 'done' ? 'bg-green-500/15' : status === 'error' ? 'bg-red-500/15' : 'bg-brand-500/15'}`}>
-            {status === 'done' ? (
-              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2.5">
-                <polyline points="20 6 9 17 4 12"/>
-              </svg>
-            ) : status === 'error' ? (
-              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2.5">
-                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+            ${status==='done'  ? 'bg-green-50 border border-green-200'
+            : status==='error' ? 'bg-red-50 border border-red-200'
+            : 'bg-orange-50 border border-orange-200'}`}>
+            {status==='done' ? (
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+            ) : status==='error' ? (
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2">
+                <circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
               </svg>
             ) : (
-              <svg className="animate-spin" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2">
-                <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+              <svg className="animate-spin" width="30" height="30" viewBox="0 0 24 24" fill="none" strokeWidth="2">
+                <defs>
+                  <linearGradient id="spin-g" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" stopColor="#f97316"/>
+                    <stop offset="100%" stopColor="#fbbf24"/>
+                  </linearGradient>
+                </defs>
+                <path d="M21 12a9 9 0 1 1-6.219-8.56" stroke="url(#spin-g)"/>
               </svg>
             )}
           </div>
 
-          <h1 className="text-2xl font-bold text-white mb-1">
-            {STATUS_LABELS[status] ?? status}
+          <h1 className="text-xl font-bold text-slate-900 mb-1">
+            {status==='queued'     ? 'In Queue'
+           : status==='processing' ? 'Segmenting…'
+           : status==='done'       ? 'Complete!'
+           : status==='error'      ? 'Failed' : status}
           </h1>
-          <p className="text-gray-400 text-sm">
-            Job ID: <code className="text-brand-400 font-mono">{jobId?.slice(0, 8)}…</code>
-            {status === 'processing' && (
-              <span className="ml-3 text-gray-500">⏱ {formatTime(elapsed)}</span>
-            )}
+          <p className="text-sm text-slate-400">
+            Job <code className="text-orange-500 font-mono text-xs">{jobId?.slice(0,8)}…</code>
+            {status==='processing' && <span className="ml-2 text-slate-400">· {fmtTime(elapsed)}</span>}
           </p>
         </div>
 
-        {/* Progress Bar */}
+        {/* Progress */}
         {status !== 'error' && (
-          <div className="mb-8">
-            <div className="flex justify-between text-sm font-medium mb-2.5">
-              <span className="text-gray-300">Progress</span>
-              <span className={`${pct >= 100 ? 'text-green-400' : 'text-brand-400'}`}>{pct.toFixed(1)}%</span>
+          <div className="mb-7">
+            <div className="flex justify-between text-xs font-medium text-slate-500 mb-2">
+              <span>Progress</span>
+              <span className={pct>=100 ? 'text-green-600' : 'text-orange-500'}>{pct.toFixed(1)}%</span>
             </div>
-            <div className="progress-track h-3">
-              <div className="progress-fill h-full" style={{ width: `${pct}%` }} />
+            <div className="progress-track h-2">
+              <div className="progress-fill h-full" style={{ width:`${pct}%` }} />
+            </div>
+          </div>
+        )}
+
+        {/* Steps */}
+        {status !== 'error' && (
+          <div className="mb-7">
+            <div className="flex items-center gap-0">
+              {STEPS.map((s, i) => (
+                <div key={i} className="flex items-center flex-1">
+                  <div className="flex flex-col items-center gap-1">
+                    <div className={`step-dot ${i < currentStep ? 'done' : i === currentStep ? 'active' : 'pending'}`}>
+                      {i < currentStep
+                        ? <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#15803d" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
+                        : i+1}
+                    </div>
+                    <p className={`text-[9px] font-semibold uppercase tracking-wider whitespace-nowrap
+                      ${i===currentStep ? 'text-orange-500' : i<currentStep ? 'text-green-600' : 'text-slate-300'}`}>
+                      {s}
+                    </p>
+                  </div>
+                  {i < STEPS.length-1 && (
+                    <div className={`h-px flex-1 mx-1 mb-4 ${i < currentStep ? 'bg-green-300' : 'bg-slate-200'}`} />
+                  )}
+                </div>
+              ))}
             </div>
           </div>
         )}
 
         {/* Error */}
         {error && (
-          <div className="p-4 rounded-xl bg-red-500/10 border border-red-500/30 text-red-400 text-sm mb-6">
+          <div className="p-4 rounded-xl bg-red-50 border border-red-200 text-red-600 text-sm mb-6">
             <strong>Error:</strong> {error}
           </div>
         )}
 
-        {/* Detected classes */}
-        {detected.length > 0 && (
-          <div>
-            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
-              Detected Objects ({detected.length})
-            </p>
-            <div className="flex flex-wrap gap-2">
-              {detected.map((cls) => (
-                <span key={cls} className="class-pill">
-                  <span
-                    className="w-3 h-3 rounded-full flex-shrink-0"
-                    style={{ backgroundColor: VOC_COLORS[cls] ?? '#888' }}
-                  />
-                  {cls}
-                </span>
-              ))}
-            </div>
+        {/* Stats */}
+        {status === 'processing' && (
+          <div className="grid grid-cols-3 gap-3 mb-7">
+            {[
+              { label:'Progress', val:`${pct.toFixed(0)}%`, color:'text-orange-500' },
+              { label:'Objects',  val:`${detected.length}`, color:'text-slate-800'  },
+              { label:'Elapsed',  val:fmtTime(elapsed),     color:'text-slate-800'  },
+            ].map(s => (
+              <div key={s.label} className="text-center p-4 rounded-xl bg-slate-50 border border-slate-100">
+                <p className="text-[10px] text-slate-400 uppercase tracking-widest mb-1">{s.label}</p>
+                <p className={`text-lg font-bold ${s.color}`} style={{fontVariantNumeric:'tabular-nums'}}>{s.val}</p>
+              </div>
+            ))}
           </div>
         )}
 
-        {/* Queue state placeholder */}
+        {/* Queue dots */}
         {status === 'queued' && (
-          <div className="flex items-center gap-3 p-4 rounded-xl bg-white/5 border border-white/10">
-            <div className="flex gap-1">
-              {[0, 1, 2].map((i) => (
-                <span
-                  key={i}
-                  className="w-2.5 h-2.5 bg-brand-400 rounded-full animate-bounce"
-                  style={{ animationDelay: `${i * 0.15}s` }}
-                />
-              ))}
+          <div className="flex items-center gap-3 p-4 rounded-xl bg-orange-50 border border-orange-100 mb-6">
+            <div className="flex gap-1.5">
+              <span className="bounce-dot bg-orange-400" />
+              <span className="bounce-dot bg-amber-400"  />
+              <span className="bounce-dot bg-yellow-400" />
             </div>
-            <p className="text-gray-400 text-sm">Waiting for a worker to pick up this job …</p>
+            <p className="text-sm text-orange-700">Waiting for a worker to pick up this job…</p>
           </div>
         )}
 
-        {/* Shimmer stats while processing */}
-        {status === 'processing' && (
-          <div className="mt-6 grid grid-cols-3 gap-3">
-            {['Frames Processed', 'Objects Found', 'Time Elapsed'].map((label, i) => (
-              <div key={label} className="stat-card text-center">
-                <p className="text-xs text-gray-500 mb-1">{label}</p>
-                <p className="font-bold text-white">
-                  {i === 0 ? `${pct.toFixed(0)}%` : i === 1 ? detected.length : formatTime(elapsed)}
-                </p>
-              </div>
-            ))}
+        {/* Detected classes */}
+        {detected.length > 0 && (
+          <div className="pt-4 border-t border-slate-100">
+            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3">
+              Detected Objects · {detected.length}
+            </p>
+            <div className="flex flex-wrap gap-1.5">
+              {detected.map(cls => (
+                <span key={cls} className="class-pill">
+                  <span className="w-2 h-2 rounded-full" style={{ backgroundColor: VOC_COLORS[cls]??'#888' }} />
+                  {cls}
+                </span>
+              ))}
+            </div>
           </div>
         )}
 
-        {/* Back button */}
-        <a
-          href="/"
-          className="mt-8 flex items-center justify-center gap-2 text-sm text-gray-400 hover:text-white transition-colors"
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <polyline points="15 18 9 12 15 6"/>
-          </svg>
+        {/* Back link */}
+        <a href="/" className="mt-8 flex items-center justify-center gap-1.5 text-xs text-slate-400 hover:text-slate-600 transition-colors">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 18 9 12 15 6"/></svg>
           Back to upload
         </a>
       </div>

frontend/src/app/result/[id]/page.tsx

@@ -6,259 +6,268 @@ import { useParams } from 'next/navigation'
 const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000'
 
 const VOC_COLORS: Record<string, string> = {
-  aeroplane: '#87CEEB', bicycle: '#FFA500', bird: '#FFD700',
-  boat: '#00BFFF', bottle: '#9400D3', bus: '#FF1493',
-  car: '#DC143C', cat: '#FF8C00', chair: '#8B4513',
-  cow: '#FFFF00', diningtable: '#D2691E', dog: '#BA55D3',
-  horse: '#FF69B4', motorbike: '#00FF7F', person: '#FF4500',
-  'potted plant': '#228B22', sheep: '#F0E68C', sofa: '#00CED1',
-  train: '#0000FF', 'tv/monitor': '#7FFFD4',
+  aeroplane:'#87CEEB', bicycle:'#FFA500', bird:'#FFD700', boat:'#00BFFF',
+  bottle:'#9400D3', bus:'#FF1493', car:'#DC143C', cat:'#FF8C00',
+  chair:'#8B4513', cow:'#D4A017', diningtable:'#D2691E', dog:'#BA55D3',
+  horse:'#FF69B4', motorbike:'#22c55e', person:'#FF4500',
+  'potted plant':'#228B22', sheep:'#B8A40A', sofa:'#00CED1',
+  train:'#3b82f6', 'tv/monitor':'#0D9488',
+}
+
+function useScrollReveal(status: string) {
+  useEffect(() => {
+    if (status !== 'ready') return
+    // Small delay to ensure the DOM has fully updated
+    const timer = setTimeout(() => {
+      const targets = document.querySelectorAll('.scroll-hidden, .scroll-left, .scroll-right, .scroll-scale')
+      const obs = new IntersectionObserver(
+        entries => entries.forEach(e => {
+          if (e.isIntersecting) {
+            e.target.classList.add('scroll-visible')
+            obs.unobserve(e.target)
+          }
+        }),
+        { threshold: 0.05 }
+      )
+      targets.forEach(t => obs.observe(t))
+    }, 100)
+    return () => clearTimeout(timer)
+  }, [status])
 }
 
 export default function ResultPage() {
-  const params = useParams()
-  const jobId = params?.id as string
+  const params   = useParams()
+  const jobId    = params?.id as string
   const videoRef = useRef<HTMLVideoElement>(null)
-  const [status, setStatus] = useState<'loading' | 'ready' | 'error'>('loading')
-  const [detected, setDetected] = useState<string[]>([])
-  const [isPlaying, setIsPlaying] = useState(false)
+
+  // 'loading' → 'ready' or 'error'
+  const [status,      setStatus]      = useState<'loading'|'ready'|'error'>('loading')
+  const [detected,    setDetected]    = useState<string[]>([])
+  const [videoReady,  setVideoReady]  = useState(false)   // video URL responded 200
+  const [isPlaying,   setIsPlaying]   = useState(false)
   const [currentTime, setCurrentTime] = useState(0)
-  const [duration, setDuration] = useState(0)
-  const [volume, setVolume] = useState(1)
+  const [duration,    setDuration]    = useState(0)
+  const [volume,      setVolume]      = useState(1)
+  const [copied,      setCopied]      = useState(false)
+  const [retries,     setRetries]     = useState(0)
 
   const videoUrl = `${API_BASE}/api/video/${jobId}`
-  const downloadUrl = videoUrl
+
+  useScrollReveal(status)
 
   useEffect(() => {
     if (!jobId) return
-    fetch(`${API_BASE}/api/status/${jobId}`)
-      .then(r => r.json())
-      .then(data => {
+
+    const fetchStatus = async () => {
+      try {
+        const res  = await fetch(`${API_BASE}/api/status/${jobId}`)
+        if (!res.ok) throw new Error()
+        const data = await res.json()
+
         if (data.status === 'done') {
-          setDetected(data.detected || [])
+          setDetected(data.detected ?? [])
+          setStatus('ready')
+          return
+        }
+        await probeVideo()
+      } catch {
+        await probeVideo()
+      }
+    }
+
+    const probeVideo = async () => {
+      try {
+        // Explicitly use HEAD; backend now supports this
+        const res = await fetch(videoUrl, { method: 'HEAD' })
+        if (res.ok) {
           setStatus('ready')
-        } else if (data.status === 'error') {
+        } else if (retries < 6) {
+          setTimeout(() => setRetries(r => r + 1), 1500)
+        } else {
           setStatus('error')
         }
-      })
-      .catch(() => setStatus('error'))
-  }, [jobId])
+      } catch {
+        setStatus('error')
+      }
+    }
+
+    fetchStatus()
+  }, [jobId, retries, videoUrl])
 
   const togglePlay = () => {
-    const v = videoRef.current
-    if (!v) return
+    const v = videoRef.current; if (!v) return
     if (v.paused) { v.play(); setIsPlaying(true) }
-    else { v.pause(); setIsPlaying(false) }
-  }
-
-  const onTimeUpdate = () => {
-    if (videoRef.current) setCurrentTime(videoRef.current.currentTime)
-  }
-
-  const onLoadedMetadata = () => {
-    if (videoRef.current) setDuration(videoRef.current.duration)
+    else          { v.pause(); setIsPlaying(false) }
   }
 
-  const seek = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const t = parseFloat(e.target.value)
-    if (videoRef.current) { videoRef.current.currentTime = t; setCurrentTime(t) }
-  }
-
-  const changeVolume = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const v = parseFloat(e.target.value)
-    if (videoRef.current) videoRef.current.volume = v
-    setVolume(v)
-  }
+  const fmtTime = (s: number) =>
+    `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`
 
-  const formatTime = (s: number) => {
-    const m = Math.floor(s / 60)
-    const sec = Math.floor(s % 60)
-    return `${m}:${String(sec).padStart(2, '0')}`
+  const copyLink = async () => {
+    await navigator.clipboard.writeText(window.location.href)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
   }
 
-  if (status === 'loading') {
-    return (
-      <div className="max-w-4xl mx-auto px-4 py-20 text-center animate-fade-in">
-        <div className="glass rounded-2xl p-16 shadow-2xl">
-          <div className="w-16 h-16 rounded-2xl bg-brand-500/15 flex items-center justify-center mx-auto mb-5">
-            <svg className="animate-spin" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2">
-              <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
-            </svg>
-          </div>
-          <p className="text-gray-300 text-lg">Loading your result …</p>
-        </div>
+  if (status === 'loading') return (
+    <div className="max-w-4xl mx-auto px-5 py-32 text-center">
+      <div className="w-16 h-16 rounded-2xl bg-orange-50 border border-orange-200 flex items-center justify-center mx-auto mb-5">
+        <svg className="animate-spin" width="24" height="24" viewBox="0 0 24 24" fill="none" strokeWidth="2">
+          <defs>
+            <linearGradient id="sg-spin" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#f97316"/>
+              <stop offset="100%" stopColor="#fbbf24"/>
+            </linearGradient>
+          </defs>
+          <path d="M21 12a9 9 0 1 1-6.219-8.56" stroke="url(#sg-spin)"/>
+        </svg>
       </div>
-    )
-  }
+      <p className="text-sm font-medium text-slate-600">Loading your result…</p>
+      {retries > 0 && (
+        <p className="text-xs text-slate-400 mt-2">Connecting… (Attempt {retries})</p>
+      )}
+    </div>
+  )
 
-  if (status === 'error') {
-    return (
-      <div className="max-w-4xl mx-auto px-4 py-20 text-center animate-fade-in">
-        <div className="glass rounded-2xl p-16 shadow-2xl">
-          <div className="w-16 h-16 rounded-2xl bg-red-500/15 flex items-center justify-center mx-auto mb-5">
-            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2">
-              <circle cx="12" cy="12" r="10"/>
-              <line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
-            </svg>
-          </div>
-          <p className="text-gray-300 text-lg mb-2">Result not available</p>
-          <p className="text-gray-500 text-sm mb-6">The job may have failed or the result has expired.</p>
-          <a href="/" className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-medium text-sm transition-colors">
-            Try again
-          </a>
-        </div>
+  if (status === 'error') return (
+    <div className="max-w-4xl mx-auto px-5 py-32 text-center">
+      <div className="w-16 h-16 rounded-2xl bg-red-50 border border-red-200 flex items-center justify-center mx-auto mb-5">
+        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2">
+          <circle cx="12" cy="12" r="10"/>
+          <line x1="15" y1="9" x2="9" y2="15"/>
+          <line x1="9" y1="9" x1="15" y2="15"/>
+        </svg>
       </div>
-    )
-  }
+      <p className="font-semibold text-slate-800 mb-1">Result not available</p>
+      <p className="text-sm text-slate-500 mb-6">The job might still be processing or the file has expired.</p>
+      <div className="flex items-center justify-center gap-3">
+        <button onClick={() => { setStatus('loading'); setRetries(0) }} className="btn-outline px-5 py-2.5 text-sm">Retry</button>
+        <a href="/" className="btn-primary px-5 py-2.5 text-sm">New Upload</a>
+      </div>
+    </div>
+  )
 
   return (
-    <div className="max-w-5xl mx-auto px-4 py-12 animate-fade-in">
-
-      {/* Success Banner */}
-      <div className="flex items-center justify-between mb-8 flex-wrap gap-4">
+    <div className="bg-white max-w-5xl mx-auto px-5 py-12">
+      {/* Header — No animation for immediate layout stability */}
+      <div className="flex items-start justify-between mb-10 flex-wrap gap-4">
         <div>
-          <div className="flex items-center gap-2 mb-1">
-            <span className="w-2 h-2 rounded-full bg-green-400"></span>
-            <span className="text-xs font-semibold text-green-400 uppercase tracking-wider">Segmentation Complete</span>
+          <div className="flex items-center gap-2 mb-2">
+            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+            <span className="text-xs font-bold text-green-600 uppercase tracking-widest">Segmentation Finished</span>
           </div>
-          <h1 className="text-3xl font-bold text-white">Your Segmented Video</h1>
-          <p className="text-gray-400 text-sm mt-1">
-            Job: <code className="font-mono text-brand-400">{jobId?.slice(0, 8)}…</code>
-            {detected.length > 0 && ` · ${detected.length} object class${detected.length > 1 ? 'es' : ''} detected`}
+          <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Your AI Result</h1>
+          <p className="text-sm text-slate-500 mt-1">
+            Job ID: <code className="text-orange-500 font-mono">{jobId?.slice(0, 12)}</code>
           </p>
         </div>
-        <a
-          href={downloadUrl}
-          download={`segmented_${jobId?.slice(0, 8)}.mp4`}
-          className="flex items-center gap-2 px-5 py-2.5 rounded-xl
-            bg-gradient-to-r from-brand-600 to-purple-600
-            hover:from-brand-500 hover:to-purple-500
-            text-white font-semibold text-sm transition-all
-            hover:shadow-lg hover:shadow-brand-500/25 hover:-translate-y-0.5"
-        >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-            <polyline points="7 10 12 15 17 10"/>
-            <line x1="12" y1="15" x2="12" y2="3"/>
-          </svg>
-          Download MP4
-        </a>
+
+        <div className="flex gap-2">
+          <button onClick={copyLink} className="btn-outline px-4 py-2.5 text-sm flex items-center gap-2">
+            {copied ? 'Link Copied!' : 'Copy Result Link'}
+          </button>
+          <a href={videoUrl} download className="btn-primary px-5 py-2.5 text-sm flex items-center gap-2">
+            Download MP4
+          </a>
+        </div>
       </div>
 
-      {/* Video Player */}
-      <div className="glass rounded-2xl overflow-hidden shadow-2xl mb-6">
-        {/* Labels */}
-        <div className="flex text-xs font-semibold text-gray-400 uppercase tracking-wider px-5 pt-4 pb-2 border-b border-white/5">
-          <span className="w-1/2 text-center">Original</span>
-          <span className="w-1/2 text-center text-brand-400">Segmented Overlay</span>
+      {/* Video Player Card */}
+      <div className="card border border-slate-200 overflow-hidden mb-8 scroll-scale">
+        <div className="flex border-b border-slate-100 bg-slate-50/50">
+          <div className="flex-1 py-3 text-center text-[10px] font-bold text-slate-400 uppercase tracking-widest border-r border-slate-100">Original</div>
+          <div className="flex-1 py-3 text-center text-[10px] font-bold text-orange-500 uppercase tracking-widest">Segmented Overlay</div>
         </div>
 
-        {/* Video */}
-        <div className="bg-black relative">
+        <div className="bg-black relative aspect-video">
           <video
             ref={videoRef}
             src={videoUrl}
-            className="w-full max-h-[480px] object-contain"
-            onTimeUpdate={onTimeUpdate}
-            onLoadedMetadata={onLoadedMetadata}
+            className="w-full h-full"
+            playsInline
+            preload="auto"
+            onTimeUpdate={() => videoRef.current && setCurrentTime(videoRef.current.currentTime)}
+            onLoadedMetadata={() => {
+              if (videoRef.current) {
+                setDuration(videoRef.current.duration)
+                setVideoReady(true)
+              }
+            }}
             onEnded={() => setIsPlaying(false)}
+            onError={() => setTimeout(() => setRetries(r => r + 1), 2000)}
           />
+          {!videoReady && (
+            <div className="absolute inset-0 flex items-center justify-center bg-slate-900/40 backdrop-blur-sm">
+              <div className="w-8 h-8 border-2 border-white/20 border-t-white rounded-full animate-spin" />
+            </div>
+          )}
         </div>
 
-        {/* Custom Controls */}
-        <div className="px-5 py-4 bg-surface-card/60 backdrop-blur-sm space-y-3">
-          {/* Seek bar */}
-          <div className="flex items-center gap-3">
-            <span className="text-xs text-gray-400 font-mono w-10">{formatTime(currentTime)}</span>
-            <input
-              type="range" min={0} max={duration || 1} step={0.1} value={currentTime}
-              onChange={seek}
-              className="flex-1 h-1.5 bg-white/10 rounded-full appearance-none cursor-pointer accent-brand-500"
-            />
-            <span className="text-xs text-gray-400 font-mono w-10 text-right">{formatTime(duration)}</span>
-          </div>
-
-          {/* Buttons row */}
-          <div className="flex items-center gap-4">
-            <button
-              onClick={togglePlay}
-              className="w-10 h-10 rounded-xl bg-brand-500/15 hover:bg-brand-500/25 flex items-center justify-center transition-colors"
-            >
-              {isPlaying ? (
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="#6366f1">
-                  <rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>
-                </svg>
-              ) : (
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="#6366f1">
-                  <polygon points="5 3 19 12 5 21 5 3"/>
-                </svg>
-              )}
-            </button>
-
-            {/* Volume */}
-            <div className="flex items-center gap-2 flex-1">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2">
-                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
-                {volume > 0 && <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>}
-                {volume > 0.5 && <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>}
-              </svg>
+        <div className="px-6 py-5 bg-slate-50 border-t border-slate-100">
+          <div className="flex items-center gap-4 mb-4">
+            <span className="text-xs text-slate-400 font-mono w-10">{fmtTime(currentTime)}</span>
+            <div className="flex-1 h-1.5 rounded-full bg-slate-200 relative group cursor-pointer">
+              <div className="h-full rounded-full bg-gradient-to-r from-orange-500 to-amber-400" style={{ width: `${(currentTime/duration)*100}%` }} />
               <input
-                type="range" min={0} max={1} step={0.05} value={volume}
-                onChange={changeVolume}
-                className="w-20 h-1.5 bg-white/10 rounded-full appearance-none cursor-pointer accent-brand-500"
+                type="range" min={0} max={duration || 1} step={0.1} value={currentTime}
+                onChange={e => {
+                  const t = +e.target.value
+                  if (videoRef.current) { videoRef.current.currentTime = t; setCurrentTime(t) }
+                }}
+                className="absolute inset-0 w-full opacity-0 cursor-pointer"
               />
             </div>
+            <span className="text-xs text-slate-400 font-mono w-10 text-right">{fmtTime(duration)}</span>
+          </div>
 
-            <span className="text-xs text-gray-500">
-              Side-by-side: Original | Segmented
-            </span>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <button onClick={togglePlay} className="w-12 h-12 rounded-2xl bg-slate-900 flex items-center justify-center hover:bg-slate-800 transition-all active:scale-95 shadow-lg">
+                {isPlaying ? <svg width="18" height="18" viewBox="0 0 24 24" fill="white"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> : <svg width="18" height="18" viewBox="0 0 24 24" fill="white"><polygon points="5 3 19 12 5 21 5 3"/></svg>}
+              </button>
+              <div className="flex items-center gap-2 group">
+                <div className="w-8 h-8 rounded-lg bg-orange-100 flex items-center justify-center">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#f97316" strokeWidth="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
+                </div>
+                <input
+                  type="range" min={0} max={1} step={0.05} value={volume}
+                  onChange={e => {
+                    const v = +e.target.value
+                    if (videoRef.current) videoRef.current.volume = v
+                    setVolume(v)
+                  }}
+                  className="w-24 h-1.5"
+                />
+              </div>
+            </div>
+            <div className="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">H.264 High Profile · 30 FPS</div>
           </div>
         </div>
       </div>
 
-      {/* Detected Objects */}
-      {detected.length > 0 && (
-        <div className="glass rounded-2xl p-6 mb-6 shadow-xl">
-          <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">
-            🎯 Detected Object Classes ({detected.length})
-          </h2>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="md:col-span-2 card p-8 scroll-hidden">
+          <div className="flex items-center justify-between mb-6">
+            <h3 className="text-sm font-bold text-slate-800 uppercase tracking-widest">AI Detections</h3>
+            <span className="badge">{detected.length} Objects</span>
+          </div>
           <div className="flex flex-wrap gap-2">
-            {detected.map((cls) => (
-              <span key={cls} className="class-pill text-sm px-3 py-1">
-                <span
-                  className="w-3.5 h-3.5 rounded-full flex-shrink-0"
-                  style={{ backgroundColor: VOC_COLORS[cls] ?? '#888' }}
-                />
+            {detected.length > 0 ? detected.map(cls => (
+              <span key={cls} className="class-pill">
+                <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: VOC_COLORS[cls] ?? '#888' }} />
                 {cls}
               </span>
-            ))}
+            )) : <span className="text-sm text-slate-400">Processing detailed labels...</span>}
           </div>
         </div>
-      )}
 
-      {/* Action Buttons */}
-      <div className="flex flex-wrap gap-3">
-        <a
-          href="/"
-          className="flex items-center gap-2 px-5 py-2.5 rounded-xl border border-white/10 hover:border-white/20 hover:bg-white/5 text-gray-300 hover:text-white font-medium text-sm transition-all"
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <polyline points="15 18 9 12 15 6"/>
-          </svg>
-          Segment Another Video
-        </a>
-        <a
-          href={downloadUrl}
-          download
-          className="flex items-center gap-2 px-5 py-2.5 rounded-xl border border-brand-500/30 hover:border-brand-500/60 hover:bg-brand-500/5 text-brand-400 font-medium text-sm transition-all"
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-            <polyline points="7 10 12 15 17 10"/>
-            <line x1="12" y1="15" x2="12" y2="3"/>
-          </svg>
-          Download Result
-        </a>
+        <div className="card p-8 bg-slate-900 border-slate-800 text-white scroll-hidden">
+          <h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Quick Actions</h3>
+          <div className="space-y-3">
+            <a href="/" className="flex items-center justify-center gap-2 w-full py-3 rounded-xl bg-white/10 hover:bg-white/20 text-sm font-medium transition-all">New Segmentation</a>
+            <a href={videoUrl} download className="flex items-center justify-center gap-2 w-full py-3 rounded-xl bg-orange-500 hover:bg-orange-600 text-sm font-bold transition-all shadow-lg shadow-orange-500/20">Save Result</a>
+          </div>
+        </div>
       </div>
     </div>
   )

nginx.conf

@@ -0,0 +1,41 @@
+events { worker_processes 1; }
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+    sendfile      on;
+
+    # Increase timeouts for large video uploads
+    client_max_body_size  250m;
+    proxy_read_timeout    300s;
+    proxy_send_timeout    300s;
+    proxy_connect_timeout 30s;
+
+    server {
+        listen 7860;
+
+        # ── API & WebSocket → FastAPI :8000 ──────────────────────────────
+        location /api/ {
+            proxy_pass         http://127.0.0.1:8000;
+            proxy_set_header   Host $host;
+            proxy_set_header   X-Real-IP $remote_addr;
+            proxy_read_timeout 300s;
+        }
+
+        location /ws/ {
+            proxy_pass         http://127.0.0.1:8000;
+            proxy_http_version 1.1;
+            proxy_set_header   Upgrade $http_upgrade;
+            proxy_set_header   Connection "Upgrade";
+            proxy_set_header   Host $host;
+            proxy_read_timeout 120s;
+        }
+
+        # ── Everything else → Next.js :3000 ─────────────────────────────
+        location / {
+            proxy_pass         http://127.0.0.1:3000;
+            proxy_set_header   Host $host;
+            proxy_set_header   X-Real-IP $remote_addr;
+        }
+    }
+}

requirements_hf.txt

@@ -0,0 +1,11 @@
+fastapi>=0.110.0
+uvicorn[standard]>=0.29.0
+python-multipart>=0.0.9
+aiofiles>=23.0.0
+torch>=2.1.0
+torchvision>=0.16.0
+opencv-python-headless>=4.9.0
+Pillow>=10.0.0
+numpy>=1.24.0
+imageio>=2.33.0
+imageio-ffmpeg>=0.4.9

supervisord.conf

@@ -0,0 +1,40 @@
+[unix_http_server]
+file=/tmp/supervisor.sock
+
+[supervisord]
+nodaemon=true
+logfile=/var/log/supervisor/supervisord.log
+pidfile=/tmp/supervisord.pid
+
+[rpcinterface:supervisor]
+supervisor.rpcinterface_factory = supervisor.rpcinterface:make_main_rpcinterface
+
+[supervisorctl]
+serverurl=unix:///tmp/supervisor.sock
+
+# ── FastAPI backend ──────────────────────────────────────────────────────────
+[program:fastapi]
+command=uvicorn backend.app_hf:app --host 127.0.0.1 --port 8000 --workers 1 --timeout-keep-alive 120
+directory=/app
+autostart=true
+autorestart=true
+stdout_logfile=/var/log/supervisor/fastapi.log
+stderr_logfile=/var/log/supervisor/fastapi.log
+
+# ── Next.js standalone server ────────────────────────────────────────────────
+[program:nextjs]
+command=node /app/frontend/server.js
+directory=/app/frontend
+environment=PORT="3000",NODE_ENV="production",NEXT_PUBLIC_API_URL=""
+autostart=true
+autorestart=true
+stdout_logfile=/var/log/supervisor/nextjs.log
+stderr_logfile=/var/log/supervisor/nextjs.log
+
+# ── nginx reverse proxy ──────────────────────────────────────────────────────
+[program:nginx]
+command=nginx -g "daemon off;"
+autostart=true
+autorestart=true
+stdout_logfile=/var/log/supervisor/nginx.log
+stderr_logfile=/var/log/supervisor/nginx.log