feat(ui): add React app for form analysis

app.py

@@ -1,17 +1,31 @@
 from __future__ import annotations
 
 import json
+import shutil
 import sys
+import tempfile
 from pathlib import Path
 from typing import Any
 
 import gradio as gr
+from fastapi import File, Form, HTTPException, UploadFile
+from fastapi.responses import FileResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
 
 sys.path.insert(0, str(Path(__file__).parent / "src"))
 
 from pozify.exercise_catalog import USER_SELECTABLE_EXERCISES
 from pozify.pipeline import run_pipeline
 
+BASE_DIR = Path(__file__).parent
+WEB_DIR = BASE_DIR / "web"
+RUNS_ROOT = BASE_DIR / "runs"
+
+APP_DESCRIPTION = (
+    "Upload a short workout clip, tune the athlete context, and generate an annotated "
+    "form-review report with structured artifacts."
+)
+
 
 QUALITY_GUIDANCE = {
     "too_short": "Record at least 10 seconds so the set contains enough movement context.",
@@ -39,7 +53,7 @@ def _quality_markdown(video_manifest: dict[str, Any]) -> str:
         if not video_manifest["analysis_allowed"]
         else "Analysis completed, but capture quality may affect downstream feedback."
     )
-    return f"""## Video Quality
+    return f"""## Capture Quality
 
 {status}
 
@@ -104,13 +118,15 @@ def analyze_video(
 
     markdown = f"""## Scan Summary
 
-- **Exercise router output:** {report["exercise"]["exercise"]} (mock confidence placeholder: {report["exercise"]["confidence"]:.0%})
-- **Variation label:** {report["variation"]["detected_variation"]} (mock confidence placeholder: {report["variation"]["variation_confidence"]:.0%})
-- **Reps:** {len(report["reps"]["reps"])}
-- **Analysis mode:** {report["artifacts"].get("analysis_mode", "unknown")}
-- **Pose source:** {report["artifacts"].get("pose_source", "unknown")}
-- **Mock finding:** {summary["main_findings"][0] if summary["main_findings"] else "No mock finding emitted"}
-- **Run ID:** `{report["run_id"]}`
+| Signal | Result |
+| --- | --- |
+| Exercise router | {report["exercise"]["exercise"]} ({report["exercise"]["confidence"]:.0%}) |
+| Variation | {report["variation"]["detected_variation"]} ({report["variation"]["variation_confidence"]:.0%}) |
+| Reps | {len(report["reps"]["reps"])} |
+| Analysis mode | {report["artifacts"].get("analysis_mode", "unknown")} |
+| Pose source | {report["artifacts"].get("pose_source", "unknown")} |
+| Primary finding | {summary["main_findings"][0] if summary["main_findings"] else "No finding emitted"} |
+| Run ID | `{report["run_id"]}` |
 
 {mock_status}
 
@@ -139,72 +155,107 @@ def analyze_video(
     )
 
 
-with gr.Blocks(title="Pozify") as demo:
-    gr.Markdown("# Pozify")
-    gr.Markdown(
-        "Upload a short workout video and run the full mocked review pipeline. "
-        "All steps produce structured JSON artifacts that can be replaced with real models later."
-    )
+server = gr.Server(
+    title="Pozify",
+    summary="Video-based workout form review API",
+    description=APP_DESCRIPTION,
+)
+server.mount("/static", StaticFiles(directory=WEB_DIR), name="static")
+
+
+@server.get("/healthz", include_in_schema=False)
+def healthz() -> dict[str, str]:
+    return {"status": "ok", "service": "pozify"}
+
+
+@server.get("/", response_class=HTMLResponse, include_in_schema=False)
+def index() -> FileResponse:
+    return FileResponse(WEB_DIR / "index.html")
+
+
+@server.get("/api/config")
+def config() -> dict[str, Any]:
+    return {
+        "description": APP_DESCRIPTION,
+        "goals": ["strength", "hypertrophy", "endurance", "mobility", "beginner_practice"],
+        "experience_levels": ["beginner", "intermediate"],
+        "exercises": ["auto", *USER_SELECTABLE_EXERCISES],
+        "limitations": ["wrist_discomfort", "knee_discomfort", "shoulder_discomfort"],
+        "equipment": ["bodyweight", "dumbbell", "barbell", "unknown"],
+    }
+
+
+@server.get("/api/artifacts/{run_id}/{filename}", include_in_schema=False)
+def artifact(run_id: str, filename: str) -> FileResponse:
+    artifact_path = (RUNS_ROOT / run_id / filename).resolve()
+    runs_root = RUNS_ROOT.resolve()
+    if runs_root not in artifact_path.parents or not artifact_path.is_file():
+        raise HTTPException(status_code=404, detail="Artifact not found.")
+    return FileResponse(artifact_path)
+
+
+def _artifact_url(run_id: str, path: str | None) -> str | None:
+    if not path:
+        return None
+
+    artifact_path = Path(path).resolve()
+    run_root = (RUNS_ROOT / run_id).resolve()
+    if run_root not in artifact_path.parents or not artifact_path.is_file():
+        return None
+    return f"/api/artifacts/{run_id}/{artifact_path.name}"
+
+
+@server.post("/api/analyze")
+async def analyze_api(
+    video: UploadFile | None = File(default=None),
+    goal: str = Form(default="beginner_practice"),
+    experience_level: str = Form(default="beginner"),
+    intended_exercise: str = Form(default="auto"),
+    intended_variation: str = Form(default=""),
+    limitations: str = Form(default="[]"),
+    equipment: str = Form(default="bodyweight"),
+) -> dict[str, Any]:
+    try:
+        parsed_limitations = json.loads(limitations)
+    except json.JSONDecodeError as exc:
+        raise HTTPException(status_code=400, detail="Limitations must be valid JSON.") from exc
+
+    if not isinstance(parsed_limitations, list) or not all(
+        isinstance(item, str) for item in parsed_limitations
+    ):
+        raise HTTPException(status_code=400, detail="Limitations must be a JSON list of strings.")
+
+    video_path: str | None = None
+    if video is not None and video.filename:
+        suffix = Path(video.filename).suffix or ".mp4"
+        with tempfile.NamedTemporaryFile(delete=False, suffix=suffix) as temp_video:
+            shutil.copyfileobj(video.file, temp_video)
+            video_path = temp_video.name
+
+    try:
+        result = run_pipeline(
+            video_path=video_path,
+            profile_input={
+                "goal": goal,
+                "experience_level": experience_level,
+                "intended_exercise": intended_exercise,
+                "intended_variation": intended_variation or None,
+                "known_limitations": parsed_limitations,
+                "equipment": equipment,
+            },
+        )
+    finally:
+        if video_path is not None:
+            Path(video_path).unlink(missing_ok=True)
 
-    with gr.Row():
-        with gr.Column(scale=1):
-            video = gr.Video(label="Workout video", sources=["upload", "webcam"])
-            goal = gr.Dropdown(
-                label="Goal",
-                choices=["strength", "hypertrophy", "endurance", "mobility", "beginner_practice"],
-                value="beginner_practice",
-            )
-            experience_level = gr.Dropdown(
-                label="Experience level",
-                choices=["beginner", "intermediate"],
-                value="beginner",
-            )
-            intended_exercise = gr.Dropdown(
-                label="Intended exercise",
-                choices=["auto", *USER_SELECTABLE_EXERCISES],
-                value="auto",
-            )
-            intended_variation = gr.Textbox(
-                label="Intended variation",
-                placeholder="Optional, e.g. wide_grip_push_up",
-            )
-            limitations = gr.CheckboxGroup(
-                label="Known limitations",
-                choices=["wrist_discomfort", "knee_discomfort", "shoulder_discomfort"],
-                value=[],
-            )
-            equipment = gr.Dropdown(
-                label="Equipment",
-                choices=["bodyweight", "dumbbell", "barbell", "unknown"],
-                value="bodyweight",
-            )
-            run_button = gr.Button("Analyze", variant="primary")
-
-        with gr.Column(scale=1):
-            annotated_video = gr.Video(label="Annotated video")
-
-    summary_md = gr.Markdown(label="Summary")
-
-    with gr.Tab("Final Report JSON"):
-        report_json = gr.Code(label="final_report.json", language="json", lines=28)
-
-    with gr.Tab("Artifact Path"):
-        artifact_path = gr.Textbox(label="Saved report")
-
-    run_button.click(
-        fn=analyze_video,
-        inputs=[
-            video,
-            goal,
-            experience_level,
-            intended_exercise,
-            intended_variation,
-            limitations,
-            equipment,
-        ],
-        outputs=[annotated_video, summary_md, report_json, artifact_path],
-    )
+    return {
+        "run_id": result["run_id"],
+        "run_dir": result["run_dir"],
+        "annotated_video_url": _artifact_url(result["run_id"], result["annotated_video_path"]),
+        "final_report_url": f"/api/artifacts/{result['run_id']}/final_report.json",
+        "report": result["final_report"],
+    }
 
 
 if __name__ == "__main__":
-    demo.launch()
+    server.launch(_frontend=False)

web/app.js

@@ -0,0 +1,330 @@
+import React, { useEffect, useMemo, useState } from "https://esm.sh/react@18.2.0";
+import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
+
+const h = React.createElement;
+
+const defaults = {
+  description:
+    "Upload a short workout clip, tune the athlete context, and generate an annotated form-review report with structured artifacts.",
+  goals: ["strength", "hypertrophy", "endurance", "mobility", "beginner_practice"],
+  experience_levels: ["beginner", "intermediate"],
+  exercises: ["auto"],
+  limitations: ["wrist_discomfort", "knee_discomfort", "shoulder_discomfort"],
+  equipment: ["bodyweight", "dumbbell", "barbell", "unknown"],
+};
+
+function label(value) {
+  return value.replaceAll("_", " ");
+}
+
+function Field({ labelText, children, full = false }) {
+  return h(
+    "label",
+    { className: `field${full ? " full" : ""}` },
+    h("span", { className: "label" }, labelText),
+    children,
+  );
+}
+
+function SelectField({ labelText, value, onChange, options }) {
+  return h(
+    Field,
+    { labelText },
+    h(
+      "select",
+      { value, onChange: (event) => onChange(event.target.value) },
+      options.map((option) => h("option", { key: option, value: option }, label(option))),
+    ),
+  );
+}
+
+function Summary({ result }) {
+  if (!result) {
+    return h(
+      "section",
+      { className: "summary" },
+      h("h2", null, "Ready for review"),
+      h("p", null, "Choose the movement context and start the analyzer."),
+    );
+  }
+
+  const report = result.report;
+  const summary = report.coach_summary;
+  const warnings = report.video_manifest.quality_warnings || [];
+  const stats = [
+    ["Exercise", report.exercise.exercise],
+    ["Variation", report.variation.detected_variation],
+    ["Reps", String(report.reps.reps.length)],
+    ["Mode", report.artifacts.analysis_mode],
+  ];
+
+  return h(
+    "section",
+    { className: "summary" },
+    h("h2", null, "Scan summary"),
+    h("p", null, summary.summary),
+    h(
+      "div",
+      { className: "stat-grid" },
+      stats.map(([name, value]) =>
+        h("div", { className: "stat", key: name }, h("span", null, name), h("strong", null, value)),
+      ),
+    ),
+    h(
+      "div",
+      { className: "note-grid" },
+      h(NoteList, { title: "What went well", items: summary.what_went_well }),
+      h(NoteList, { title: "Top fixes", items: summary.top_fixes }),
+      h(NoteList, { title: "Next session", items: summary.next_session_plan }),
+    ),
+    warnings.length
+      ? h(
+          "div",
+          { className: "quality-list" },
+          warnings.map((warning) => h("span", { key: warning }, label(warning))),
+        )
+      : h("div", { className: "quality-list" }, h("span", null, "No quality warnings")),
+  );
+}
+
+function NoteList({ title, items }) {
+  return h(
+    "article",
+    { className: "note" },
+    h("h3", null, title),
+    h("ul", null, items.map((item) => h("li", { key: item }, item))),
+  );
+}
+
+function App() {
+  const [config, setConfig] = useState(defaults);
+  const [file, setFile] = useState(null);
+  const [goal, setGoal] = useState("beginner_practice");
+  const [experience, setExperience] = useState("beginner");
+  const [exercise, setExercise] = useState("auto");
+  const [variation, setVariation] = useState("");
+  const [equipment, setEquipment] = useState("bodyweight");
+  const [limitations, setLimitations] = useState([]);
+  const [result, setResult] = useState(null);
+  const [activeTab, setActiveTab] = useState("json");
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState("");
+
+  const previewUrl = useMemo(() => (file ? URL.createObjectURL(file) : ""), [file]);
+
+  useEffect(() => {
+    fetch("/api/config")
+      .then((response) => response.json())
+      .then(setConfig)
+      .catch(() => setConfig(defaults));
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl) URL.revokeObjectURL(previewUrl);
+    };
+  }, [previewUrl]);
+
+  function toggleLimitation(value) {
+    setLimitations((current) =>
+      current.includes(value) ? current.filter((item) => item !== value) : [...current, value],
+    );
+  }
+
+  async function analyze(event) {
+    event.preventDefault();
+    setError("");
+    setStatus("running");
+    setResult(null);
+
+    const payload = new FormData();
+    if (file) payload.append("video", file);
+    payload.append("goal", goal);
+    payload.append("experience_level", experience);
+    payload.append("intended_exercise", exercise);
+    payload.append("intended_variation", variation);
+    payload.append("limitations", JSON.stringify(limitations));
+    payload.append("equipment", equipment);
+
+    try {
+      const response = await fetch("/api/analyze", { method: "POST", body: payload });
+      const body = await response.json();
+      if (!response.ok) throw new Error(body.detail || "Analysis failed.");
+      setResult(body);
+      setStatus("complete");
+    } catch (caught) {
+      setError(caught.message || "Analysis failed.");
+      setStatus("idle");
+    }
+  }
+
+  return h(
+    "main",
+    { className: "app" },
+    h(
+      "section",
+      { className: "hero" },
+      h(
+        "div",
+        { className: "hero-content" },
+        h("p", { className: "eyebrow" }, "Pose intelligence for coached training"),
+        h("h1", null, "Pozify"),
+        h("p", null, config.description),
+      ),
+      h(
+        "div",
+        { className: "hero-metrics", "aria-label": "Pipeline highlights" },
+        h("div", { className: "metric" }, h("strong", null, "33"), h("span", null, "pose landmarks")),
+        h("div", { className: "metric" }, h("strong", null, "60s"), h("span", null, "clip ceiling")),
+        h("div", { className: "metric" }, h("strong", null, "JSON"), h("span", null, "audit trail")),
+      ),
+    ),
+    h(
+      "form",
+      { className: "workspace", onSubmit: analyze },
+      h(
+        "section",
+        { className: "panel" },
+        h(
+          "div",
+          { className: "panel-head" },
+          h("div", null, h("h2", null, "Session setup"), h("p", null, "Movement context")),
+          h("span", { className: "status-pill" }, status === "running" ? "Analyzing" : "Ready"),
+        ),
+        h(
+          "label",
+          { className: "dropzone" },
+          h("input", {
+            type: "file",
+            accept: "video/*",
+            onChange: (event) => setFile(event.target.files?.[0] || null),
+          }),
+          previewUrl
+            ? h("video", { className: "dropzone-preview", src: previewUrl, controls: true })
+            : h(
+                "span",
+                { className: "dropzone-empty" },
+                h("span", { className: "upload-icon" }, "↑"),
+                h("strong", null, "Drop video here"),
+                h("span", null, "or click to upload"),
+              ),
+        ),
+        h(
+          "div",
+          { className: "form-grid" },
+          h(SelectField, { labelText: "Goal", value: goal, onChange: setGoal, options: config.goals }),
+          h(SelectField, {
+            labelText: "Experience",
+            value: experience,
+            onChange: setExperience,
+            options: config.experience_levels,
+          }),
+          h(SelectField, {
+            labelText: "Exercise",
+            value: exercise,
+            onChange: setExercise,
+            options: config.exercises,
+          }),
+          h(SelectField, {
+            labelText: "Equipment",
+            value: equipment,
+            onChange: setEquipment,
+            options: config.equipment,
+          }),
+          h(
+            Field,
+            { labelText: "Variation", full: true },
+            h("input", {
+              type: "text",
+              value: variation,
+              placeholder: "Optional, e.g. wide_grip_push_up",
+              onChange: (event) => setVariation(event.target.value),
+            }),
+          ),
+          h(
+            "div",
+            { className: "field full" },
+            h("span", { className: "label" }, "Known limitations"),
+            h(
+              "div",
+              { className: "check-grid" },
+              config.limitations.map((item) =>
+                h(
+                  "label",
+                  { className: "check-chip", key: item },
+                  h("input", {
+                    type: "checkbox",
+                    checked: limitations.includes(item),
+                    onChange: () => toggleLimitation(item),
+                  }),
+                  h("span", null, label(item)),
+                ),
+              ),
+            ),
+          ),
+        ),
+        h("button", { className: "primary", disabled: status === "running" }, status === "running" ? "Analyzing..." : "Analyze Form"),
+        error ? h("div", { className: "error" }, error) : null,
+      ),
+      h(
+        "section",
+        { className: "panel" },
+        h(
+          "div",
+          { className: "panel-head" },
+          h("div", null, h("h2", null, "Review output"), h("p", null, "Annotated movement")),
+          result ? h("span", { className: "status-pill" }, result.run_id) : null,
+        ),
+        h(
+          "div",
+          { className: "result-stage" },
+          result?.annotated_video_url
+            ? h("video", { className: "result-video", src: result.annotated_video_url, controls: true })
+            : h(
+                "div",
+                { className: "result-empty" },
+                h("strong", null, "Awaiting scan"),
+                h("span", null, "The annotated video appears after analysis."),
+              ),
+        ),
+      ),
+    ),
+    h(Summary, { result }),
+    h(
+      "div",
+      { className: "tabs", role: "tablist", "aria-label": "Artifacts" },
+      ["json", "artifacts"].map((tab) =>
+        h(
+          "button",
+          {
+            className: `tab${activeTab === tab ? " active" : ""}`,
+            key: tab,
+            onClick: () => setActiveTab(tab),
+            type: "button",
+          },
+          tab === "json" ? "Final report JSON" : "Artifact links",
+        ),
+      ),
+    ),
+    h(
+      "section",
+      { className: "artifact-panel" },
+      activeTab === "json"
+        ? h("pre", { className: "json-block" }, result ? JSON.stringify(result.report, null, 2) : "{}")
+        : h(
+            "div",
+            { className: "artifact-links" },
+            result
+              ? [
+                  h("a", { className: "artifact-link", key: "report", href: result.final_report_url }, "final_report.json", h("span", null, "open")),
+                  result.annotated_video_url
+                    ? h("a", { className: "artifact-link", key: "video", href: result.annotated_video_url }, "annotated_video.mp4", h("span", null, "open"))
+                    : null,
+                ]
+              : h("p", null, "Artifacts appear after analysis."),
+          ),
+    ),
+  );
+}
+
+createRoot(document.getElementById("root")).render(h(App));

web/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#214f3a" />
+    <title>Pozify</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/static/styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/static/app.js"></script>
+  </body>
+</html>

web/styles.css

@@ -0,0 +1,535 @@
+:root {
+  color-scheme: light;
+  --ink: #202016;
+  --muted: #6b6d5b;
+  --paper: #fff9ec;
+  --panel: rgba(255, 252, 243, 0.78);
+  --forest: #214f3a;
+  --forest-deep: #132f22;
+  --clay: #be684b;
+  --blue: #314b63;
+  --line: rgba(37, 44, 31, 0.14);
+  --shadow: 0 20px 58px rgba(32, 32, 22, 0.12);
+  font-family: "IBM Plex Sans", ui-sans-serif, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-width: 320px;
+  margin: 0;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at 8% 4%, rgba(190, 104, 75, 0.18), transparent 28rem),
+    radial-gradient(circle at 94% 18%, rgba(49, 75, 99, 0.18), transparent 34rem),
+    linear-gradient(135deg, #f4efe3 0%, #edf3e4 48%, #f8f2e6 100%);
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+.app {
+  width: min(1480px, 100%);
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 22px clamp(12px, 3vw, 36px) 38px;
+}
+
+.hero {
+  position: relative;
+  min-height: 260px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.36);
+  border-radius: 8px;
+  padding: clamp(26px, 5vw, 58px);
+  color: var(--paper);
+  background:
+    linear-gradient(110deg, rgba(20, 44, 33, 0.94), rgba(30, 63, 47, 0.82) 54%, rgba(190, 104, 75, 0.74)),
+    url("https://images.unsplash.com/photo-1518611012118-696072aa579a?auto=format&fit=crop&w=1800&q=80");
+  background-position: center;
+  background-size: cover;
+  box-shadow: 0 26px 80px rgba(32, 32, 22, 0.18);
+}
+
+.hero::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 44%;
+  background: linear-gradient(0deg, rgba(13, 26, 20, 0.56), transparent);
+  pointer-events: none;
+}
+
+.hero-content,
+.hero-metrics {
+  position: relative;
+  z-index: 1;
+}
+
+.eyebrow,
+.metric span,
+.status-pill,
+.label,
+.tab,
+.artifact-link,
+.json-block {
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+}
+
+.eyebrow {
+  margin: 0 0 14px;
+  color: #dfead3;
+  font-size: 0.78rem;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.hero h1 {
+  margin: 0;
+  color: var(--paper);
+  font-size: clamp(2.7rem, 8vw, 6.7rem);
+  line-height: 0.9;
+  letter-spacing: 0;
+}
+
+.hero p {
+  max-width: 660px;
+  margin: 22px 0 0;
+  color: rgba(255, 249, 236, 0.86);
+  font-size: clamp(1rem, 1.7vw, 1.22rem);
+  line-height: 1.55;
+}
+
+.hero-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1px;
+  max-width: 620px;
+  margin-top: clamp(26px, 4vw, 46px);
+  overflow: hidden;
+  border: 1px solid rgba(255, 249, 236, 0.22);
+  border-radius: 8px;
+  background: rgba(255, 249, 236, 0.16);
+  backdrop-filter: blur(18px);
+}
+
+.metric {
+  padding: 18px;
+  background: rgba(10, 22, 16, 0.32);
+}
+
+.metric strong {
+  display: block;
+  color: var(--paper);
+  font-size: clamp(1.35rem, 2.6vw, 2rem);
+  line-height: 1;
+}
+
+.metric span {
+  display: block;
+  margin-top: 7px;
+  color: rgba(255, 249, 236, 0.72);
+  font-size: 0.72rem;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.workspace {
+  display: grid;
+  grid-template-columns: minmax(360px, 0.84fr) minmax(440px, 1.16fr);
+  gap: 18px;
+  margin-top: 18px;
+  align-items: stretch;
+}
+
+.panel,
+.summary,
+.artifact-panel {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px);
+}
+
+.panel {
+  padding: 16px;
+}
+
+.panel-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+  align-items: flex-start;
+  margin-bottom: 14px;
+}
+
+.panel h2,
+.summary h2 {
+  margin: 0;
+  color: var(--forest);
+  font-size: 1.12rem;
+  line-height: 1.2;
+}
+
+.panel p,
+.summary p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  line-height: 1.45;
+}
+
+.status-pill {
+  flex: 0 0 auto;
+  border: 1px solid rgba(33, 79, 58, 0.18);
+  border-radius: 999px;
+  padding: 7px 10px;
+  color: var(--forest);
+  background: rgba(33, 79, 58, 0.08);
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.dropzone {
+  display: grid;
+  min-height: 346px;
+  overflow: hidden;
+  border: 1px dashed rgba(33, 79, 58, 0.28);
+  border-radius: 8px;
+  background: #171815;
+  color: var(--paper);
+  place-items: center;
+}
+
+.dropzone input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.dropzone-preview,
+.result-video {
+  width: 100%;
+  height: 100%;
+  min-height: 346px;
+  object-fit: contain;
+  background: #171815;
+}
+
+.dropzone-empty {
+  display: grid;
+  gap: 10px;
+  justify-items: center;
+  padding: 28px;
+  text-align: center;
+}
+
+.upload-icon {
+  display: grid;
+  width: 52px;
+  height: 52px;
+  border: 1px solid rgba(255, 249, 236, 0.24);
+  border-radius: 999px;
+  color: #dce9d3;
+  place-items: center;
+}
+
+.dropzone-empty strong {
+  font-size: 1.06rem;
+}
+
+.dropzone-empty span {
+  color: rgba(255, 249, 236, 0.62);
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  margin-top: 16px;
+}
+
+.field {
+  display: grid;
+  gap: 7px;
+}
+
+.field.full {
+  grid-column: 1 / -1;
+}
+
+.label {
+  color: #4d5244;
+  font-size: 0.76rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+select,
+input[type="text"] {
+  width: 100%;
+  min-height: 44px;
+  border: 1px solid rgba(37, 44, 31, 0.16);
+  border-radius: 8px;
+  padding: 0 12px;
+  color: var(--ink);
+  background: rgba(255, 253, 247, 0.92);
+}
+
+select:focus,
+input[type="text"]:focus,
+.tab:focus,
+.primary:focus {
+  outline: 3px solid rgba(33, 79, 58, 0.24);
+  outline-offset: 2px;
+}
+
+.check-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.check-chip {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 40px;
+  border: 1px solid rgba(37, 44, 31, 0.13);
+  border-radius: 8px;
+  padding: 0 12px;
+  background: rgba(255, 253, 247, 0.74);
+}
+
+.check-chip input {
+  accent-color: var(--forest);
+}
+
+.primary {
+  width: 100%;
+  min-height: 52px;
+  margin-top: 16px;
+  border: 0;
+  border-radius: 8px;
+  color: var(--paper);
+  background: var(--forest);
+  box-shadow: 0 12px 26px rgba(33, 79, 58, 0.22);
+  font-weight: 700;
+}
+
+.primary:hover {
+  background: var(--forest-deep);
+}
+
+.primary:disabled {
+  cursor: wait;
+  opacity: 0.72;
+}
+
+.result-stage {
+  display: grid;
+  min-height: 470px;
+  overflow: hidden;
+  border-radius: 8px;
+  background: #171815;
+  color: var(--paper);
+  place-items: center;
+}
+
+.result-empty {
+  max-width: 360px;
+  padding: 24px;
+  text-align: center;
+}
+
+.result-empty strong {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 1.08rem;
+}
+
+.result-empty span {
+  color: rgba(255, 249, 236, 0.62);
+  line-height: 1.45;
+}
+
+.summary {
+  margin-top: 18px;
+  padding: clamp(16px, 2vw, 24px);
+}
+
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  margin: 16px 0;
+}
+
+.stat {
+  border: 1px solid rgba(37, 44, 31, 0.12);
+  border-radius: 8px;
+  padding: 14px;
+  background: rgba(255, 253, 247, 0.66);
+}
+
+.stat span {
+  display: block;
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.stat strong {
+  display: block;
+  margin-top: 5px;
+  color: var(--forest);
+  font-size: 1.12rem;
+}
+
+.note-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.note {
+  border: 1px solid rgba(37, 44, 31, 0.12);
+  border-radius: 8px;
+  padding: 14px;
+  background: rgba(255, 253, 247, 0.58);
+}
+
+.note h3 {
+  margin: 0 0 10px;
+  color: var(--forest);
+  font-size: 0.96rem;
+}
+
+.note ul {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding-left: 18px;
+  color: #3e4438;
+}
+
+.quality-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.quality-list span {
+  border-radius: 999px;
+  padding: 7px 10px;
+  color: #5a2d20;
+  background: rgba(190, 104, 75, 0.12);
+  font-size: 0.84rem;
+}
+
+.tabs {
+  display: flex;
+  gap: 8px;
+  margin-top: 18px;
+}
+
+.tab {
+  border: 0;
+  border-bottom: 2px solid transparent;
+  padding: 11px 14px;
+  color: var(--muted);
+  background: transparent;
+  font-size: 0.78rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.tab.active {
+  border-color: var(--forest);
+  color: var(--forest);
+}
+
+.artifact-panel {
+  overflow: hidden;
+}
+
+.json-block {
+  min-height: 360px;
+  max-height: 620px;
+  margin: 0;
+  overflow: auto;
+  padding: 18px;
+  color: #f4efe3;
+  background: #171815;
+  font-size: 0.82rem;
+  line-height: 1.55;
+}
+
+.artifact-links {
+  display: grid;
+  gap: 12px;
+  padding: 18px;
+}
+
+.artifact-link {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  border: 1px solid rgba(37, 44, 31, 0.12);
+  border-radius: 8px;
+  padding: 14px;
+  color: var(--forest);
+  background: rgba(255, 253, 247, 0.72);
+  text-decoration: none;
+}
+
+.error {
+  border: 1px solid rgba(190, 104, 75, 0.28);
+  border-radius: 8px;
+  margin-top: 14px;
+  padding: 12px;
+  color: #6d2f20;
+  background: rgba(190, 104, 75, 0.12);
+}
+
+@media (max-width: 980px) {
+  .workspace,
+  .note-grid,
+  .stat-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .app {
+    padding: 12px 10px 28px;
+  }
+
+  .hero {
+    min-height: 380px;
+    padding: 26px 20px;
+  }
+
+  .hero-metrics,
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .panel-head {
+    display: grid;
+  }
+}