Update app.py

app.py

@@ -553,7 +553,7 @@ def status_html(state, title, step=0, note=""):
         for i, name in enumerate(STEPS, start=1)
     )
     stepper = f'<div class="dr-stepper">{dots}</div>' if state in ("working", "done") else ""
-    icon = {"idle": "◌", "working": '<span class="dr-spin"></span>', "done": "✓", "error": "!"}[state]
+    icon = {"idle": "", "working": '<span class="dr-spin"></span>', "done": "✓", "error": "!"}[state]
     note_html = f'<div class="dr-status-note">{note}</div>' if note else ""
     return (f'<div class="dr-status dr-status-{state}">'
             f'<div class="dr-status-head"><span class="dr-status-icon">{icon}</span>'
@@ -629,7 +629,7 @@ def run(video, mood, excited, angry, profile: gr.OAuthProfile | None):
         result = watermark(raw, workdir, ctx)
         report(ctx, "SUCCESS")
         yield result, status_html("done", f"Done in {ctx.elapsed()}", 5,
-                                  f"{settings_chips(drama)}<br>Use the download button on the video to save it.")
+                                  settings_chips(drama))
 
     except DemoError as e:
         if counted and e.category != "LIMIT":
@@ -660,14 +660,14 @@ except ImportError:
     log.warning("[startup] brand_assets.py not found; using a text logo")
 
 PRESETS = {  # name: (smile −1 sad … +1 big smile, excitement, anger)
-    "🙂 Subtle smile": (0.35, 0.0, 0.0),
-    "😊 Big smile": (0.9, 0.3, 0.0),
-    "😢 Sad": (-0.8, 0.0, 0.0),
-    "🤩 Excited": (0.4, 0.9, 0.0),
-    "😠 Angry": (0.0, 0.3, 0.9),
-    "🎛️ Custom": None,
+    "Subtle smile": (0.35, 0.0, 0.0),
+    "Big smile": (0.9, 0.3, 0.0),
+    "Sad": (-0.8, 0.0, 0.0),
+    "Excited": (0.4, 0.9, 0.0),
+    "Angry": (0.0, 0.3, 0.9),
+    "Custom": None,
 }
-DEFAULT_PRESET = "😊 Big smile"
+DEFAULT_PRESET = "Big smile"
 
 
 def apply_preset(name):
@@ -713,6 +713,10 @@ HEAD = f"""
 """
 
 FAQ = [
+    ("How do I change a facial expression in a video?",
+     "Upload a short clip with one clear face, pick an expression and how strong it should be, "
+     "then click <b>Change expression</b>. DRAMA finds the face scene by scene, re-performs it, "
+     "and gives you an MP4 to download. It takes about a minute."),
     ("How do I add a smile to a video with AI?",
      "Upload a short clip, choose <b>Subtle smile</b> or <b>Big smile</b>, and click <b>Change "
      "expression</b>. DRAMA re-performs the face with a natural smile while keeping the person's "
@@ -743,31 +747,25 @@ FAQ = [
 ]
 
 FEATURES = [
-    ("😊", "AI smile generator",
+    ("AI smile generator",
      "Add a natural smile to a neutral face, or fix a smile that looks forced. Go from a subtle, "
      "neutral smile to a big grin."),
-    ("🎬", "Change the mood of a scene",
+    ("Change the mood of a scene",
      "An AI video mood changer for performances: make a take sadder, angrier or more excited "
      "without a reshoot."),
-    ("🎚️", "Control the intensity",
+    ("Control the intensity",
      "Every expression has an intensity dial, and you can blend emotions for more nuanced "
      "performances."),
-    ("👥", "Edit one face in a group",
+    ("Edit one face in a group",
      "In DRAMA Studio and the API, pick which person to edit in a multi-face shot. Everyone else "
      "stays untouched."),
-    ("🖼️", "Original quality kept",
+    ("Original quality kept",
      "Only the expression changes. Resolution, lighting and background stay exactly as they were."),
-    ("📸", "Photos too",
+    ("Photos too",
      "DRAMA Studio is also an expression editor for photos: add a smile to a photo or change its "
      "mood in the same way."),
 ]
 
-STEPS_HOW = [
-    ("Upload", "Add a short video with one clear face. DRAMA finds the face, scene by scene."),
-    ("Choose", "Pick an expression and its intensity, or blend a few for a custom performance."),
-    ("Generate & export", "DRAMA re-performs the face. Preview the result and download the MP4."),
-]
-
 
 def logo_html(size="lg"):
     if LOGO_MARK_PNG and LOGO_WORDMARK_WEBP:
@@ -801,10 +799,10 @@ THEME = gr.themes.Base(
     border_color_primary="#25252d", border_color_primary_dark="#25252d",
     input_background_fill="#1b1b21", input_background_fill_dark="#1b1b21",
     slider_color="#f01e1e", slider_color_dark="#f01e1e",
-    button_primary_background_fill="linear-gradient(180deg,#ff2b2b,#d40f0f)",
-    button_primary_background_fill_dark="linear-gradient(180deg,#ff2b2b,#d40f0f)",
-    button_primary_background_fill_hover="linear-gradient(180deg,#ff4545,#e31717)",
-    button_primary_background_fill_hover_dark="linear-gradient(180deg,#ff4545,#e31717)",
+    button_primary_background_fill="#e3141c",
+    button_primary_background_fill_dark="#e3141c",
+    button_primary_background_fill_hover="#f02a31",
+    button_primary_background_fill_hover_dark="#f02a31",
     button_primary_text_color="#ffffff", button_primary_text_color_dark="#ffffff",
     button_secondary_background_fill="#1b1b21", button_secondary_background_fill_dark="#1b1b21",
     button_secondary_text_color="#ededf0", button_secondary_text_color_dark="#ededf0",
@@ -815,158 +813,173 @@ THEME = gr.themes.Base(
 # Every text rule is scoped under .gradio-container with !important where Gradio's own
 # "prose" styles would otherwise win (they load after this sheet when SSR is on).
 CSS = """
-.gradio-container { max-width: 1160px !important; margin: 0 auto !important; padding: 0 24px 40px !important; }
+:root { --dr-red: #e3141c; --dr-red-soft: rgba(227,20,28,.12); --dr-line: #2a2a32; --dr-card: #121216;
+  --dr-text: #ededf0; --dr-muted: #9a9aa6; --dr-faint: #6b6b76; }
+.gradio-container { max-width: 1120px !important; margin: 0 auto !important; padding: 0 24px 48px !important; }
 .gradio-container .main.app { padding: 8px 0 !important; }
 .gradio-container .html-container { padding: 0 !important; }
 .gradio-container .prose { max-width: none !important; }
-.dr-glow { position: fixed; inset: -25vh -10vw auto; height: 75vh; pointer-events: none; z-index: 0;
-  background: radial-gradient(55% 55% at 50% 15%, rgba(240,30,30,.18), transparent 70%); }
+.gradio-container .dr-glow { position: fixed; inset: -30vh 0 auto; height: 70vh; pointer-events: none; z-index: 0;
+  background: radial-gradient(45% 50% at 50% 0%, rgba(227,20,28,.10), transparent 70%); }
 
 /* header */
-#dr-top { align-items: center !important; padding: 18px 0 0; position: relative; z-index: 1;
+#dr-top { align-items: center !important; padding: 20px 0 0; position: relative; z-index: 1;
   flex-wrap: nowrap !important; gap: 12px; }
 #dr-top > * { min-width: 0 !important; }
 .gradio-container a.dr-brand { display: inline-flex !important; align-items: center; gap: 10px;
   text-decoration: none !important; }
-.dr-mark { height: 36px !important; width: auto !important; margin: 0 !important;
-  filter: drop-shadow(0 6px 18px rgba(240,30,30,.45)); }
-.dr-word { height: 22px !important; width: auto !important; margin: 0 !important; }
+.gradio-container .dr-mark { height: 32px !important; width: auto !important; margin: 0 !important; }
+.gradio-container .dr-word { height: 20px !important; width: auto !important; margin: 0 !important; }
 #dr-login { max-width: 240px; margin-left: auto; flex: none !important; width: auto !important; }
-#dr-login button { border-radius: 999px !important; font-size: 13px !important; padding: 8px 16px !important; }
+#dr-login button { border-radius: 8px !important; font-size: 13px !important; padding: 7px 14px !important;
+  background: transparent !important; border: 1px solid #2c2c35 !important; }
 
 /* hero */
-.gradio-container .dr-hero { text-align: center !important; padding: 40px 0 30px; position: relative; z-index: 1; }
-.gradio-container .dr-eyebrow { display: inline-flex; gap: 8px; align-items: center; font-size: 13px !important;
-  color: #ffadad !important; background: rgba(240,30,30,.10); border: 1px solid rgba(240,30,30,.30);
-  padding: 6px 14px; border-radius: 999px; }
-.gradio-container .dr-hero h1 { font-size: clamp(34px, 5.4vw, 60px) !important; line-height: 1.04 !important;
-  font-weight: 800 !important; margin: 20px auto 16px !important; letter-spacing: -0.035em !important;
+.gradio-container .dr-hero { text-align: center !important; padding: 64px 0 44px; position: relative; z-index: 1; }
+.gradio-container .dr-kicker { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .12em !important;
+  text-transform: uppercase; color: #ff6b6b !important; margin: 0 0 14px !important; }
+.gradio-container .dr-hero h1 { font-size: clamp(36px, 5.6vw, 64px) !important; line-height: 1.02 !important;
+  font-weight: 750 !important; margin: 0 auto 18px !important; letter-spacing: -0.04em !important;
   color: #ffffff !important; text-align: center !important; max-width: 900px; }
-.gradio-container .dr-hero h1 .dr-grad { background: linear-gradient(90deg,#ff5a5a,#f01e1e 60%,#ff7a3d);
-  -webkit-background-clip: text !important; background-clip: text !important;
-  -webkit-text-fill-color: transparent !important; color: transparent !important; }
-.gradio-container .dr-hero .dr-sub { font-size: 18px !important; color: #b4b4be !important; max-width: 660px;
+.gradio-container .dr-hero h1 .dr-accent { color: var(--dr-red) !important; }
+.gradio-container .dr-hero .dr-sub { font-size: 18px !important; color: #a8a8b3 !important; max-width: 600px;
   margin: 0 auto !important; line-height: 1.55 !important; text-align: center !important; }
-.dr-facts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
-.gradio-container .dr-facts span { font-size: 13px !important; color: #c9c9d1 !important; background: #141418;
-  border: 1px solid #25252d; padding: 6px 12px; border-radius: 999px; }
+.gradio-container .dr-meta { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
+.gradio-container .dr-meta span { font-size: 13px !important; color: var(--dr-faint) !important; }
+.gradio-container .dr-meta span + span::before { content: "·"; margin: 0 10px; color: #3a3a44; }
 
 /* cards */
-#dr-main { gap: 20px !important; position: relative; z-index: 1; align-items: stretch !important; }
-.dr-card { background: linear-gradient(180deg,#141418,#111115) !important; border: 1px solid #25252d !important;
-  border-radius: 20px !important; padding: 20px !important; box-shadow: 0 24px 60px rgba(0,0,0,.4);
-  gap: 12px !important; justify-content: flex-start !important; }
-.dr-card > * { flex-grow: 0 !important; }
-.gradio-container .dr-label { display: flex !important; align-items: center; gap: 10px; font-weight: 650 !important;
-  font-size: 15px !important; color: #ededf0 !important; margin: 0 !important; }
-.gradio-container .dr-label b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
-  font-size: 12px !important; background: rgba(240,30,30,.15); color: #ff7f7f !important;
-  border: 1px solid rgba(240,30,30,.4); flex: none; }
-.gradio-container .dr-hint { font-size: 13px !important; color: #8b8b97 !important; margin: 4px 0 0 34px !important; }
-.dr-media video, .dr-media .wrap { border-radius: 14px !important; }
+#dr-main { gap: 16px !important; position: relative; z-index: 1; align-items: stretch !important; }
+.gradio-container .dr-card { background: var(--dr-card) !important; border: 1px solid var(--dr-line) !important;
+  border-radius: 16px !important; padding: 20px !important; gap: 12px !important;
+  justify-content: flex-start !important; }
+.gradio-container .dr-card > * { flex-grow: 0 !important; }
+.gradio-container .dr-label { display: flex !important; align-items: baseline; gap: 10px; font-weight: 600 !important;
+  font-size: 15px !important; color: var(--dr-text) !important; margin: 0 !important; }
+.gradio-container .dr-label b { font: 600 12px/1 ui-monospace, "SF Mono", Menlo, monospace !important;
+  color: var(--dr-faint) !important; }
+.gradio-container .dr-hint { font-size: 13px !important; color: var(--dr-faint) !important; margin: 4px 0 0 !important; }
+.gradio-container .dr-media video, .gradio-container .dr-media .wrap { border-radius: 10px !important; }
 
 /* presets */
 #dr-presets { background: transparent !important; border: 0 !important; padding: 0 !important; }
-#dr-presets .wrap { gap: 8px !important; }
-#dr-presets label { border-radius: 999px !important; border: 1px solid #2c2c35 !important; background: #1b1b21 !important;
-  padding: 8px 14px !important; transition: all .15s ease; cursor: pointer; margin: 0 !important; }
-#dr-presets label:hover { border-color: #ff4d4d !important; }
-#dr-presets label.selected { background: rgba(240,30,30,.16) !important; border-color: #f01e1e !important;
-  color: #fff !important; box-shadow: 0 0 0 3px rgba(240,30,30,.14); }
+#dr-presets .wrap { gap: 6px !important; }
+#dr-presets label { border-radius: 8px !important; border: 1px solid #2a2a33 !important; background: transparent !important;
+  padding: 7px 13px !important; transition: border-color .15s ease, color .15s ease; cursor: pointer; margin: 0 !important;
+  color: #b4b4be !important; font-size: 14px !important; }
+#dr-presets label:hover { border-color: #4a4a55 !important; color: #fff !important; }
+#dr-presets label.selected { background: var(--dr-red-soft) !important; border-color: var(--dr-red) !important;
+  color: #fff !important; }
 #dr-presets input[type=radio] { display: none !important; }
 
 /* generate */
-#dr-go { height: 54px; font-size: 17px !important; font-weight: 700 !important; border-radius: 14px !important;
-  box-shadow: 0 10px 30px rgba(240,30,30,.32); transition: transform .12s ease, box-shadow .12s ease; }
-#dr-go:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(240,30,30,.45); }
-.gradio-container .dr-fine { font-size: 12px !important; color: #6f6f7b !important; text-align: center !important; margin: 0 !important; }
+#dr-go { height: 50px; font-size: 16px !important; font-weight: 600 !important; border-radius: 10px !important;
+  box-shadow: none !important; transition: background .15s ease; }
+.gradio-container .dr-fine { font-size: 12px !important; color: var(--dr-faint) !important; text-align: center !important; margin: 0 !important; }
 
 /* status */
-.dr-status { border-radius: 14px; padding: 14px 16px; border: 1px solid #25252d; background: #111115; }
+.gradio-container .dr-status { border-radius: 10px; padding: 14px 16px; border: 1px solid var(--dr-line); background: #0e0e11; }
 .gradio-container .dr-status-head { display: flex; align-items: center; gap: 10px; font-weight: 600 !important;
-  font-size: 15px !important; color: #ededf0 !important; }
-.dr-status-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px;
-  background: #1b1b21; color: #9a9aa6; flex: none; }
-.gradio-container .dr-status-note { color: #9a9aa6 !important; font-size: 13px !important; margin-top: 8px; line-height: 1.6 !important; }
-.dr-status-done { border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.06); }
-.dr-status-done .dr-status-icon { background: #34d399; color: #062b1e; }
-.dr-status-error { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.07); }
-.dr-status-error .dr-status-icon { background: #f87171; color: #2b0909; font-weight: 800; }
-.dr-status-working { border-color: rgba(240,30,30,.4); }
-.dr-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(240,30,30,.25);
-  border-top-color: #f01e1e; animation: dr-spin .8s linear infinite; display: inline-block; }
+  font-size: 14px !important; color: var(--dr-text) !important; }
+.gradio-container .dr-status-icon { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; flex: none; }
+.gradio-container .dr-status-idle .dr-status-icon { width: 8px; height: 8px; background: #3a3a44; }
+.gradio-container .dr-status-note { color: var(--dr-muted) !important; font-size: 13px !important; margin-top: 8px; line-height: 1.6 !important; }
+.gradio-container .dr-status-done .dr-status-icon { background: #22c55e; color: #04210f; font-weight: 700; }
+.gradio-container .dr-status-error { border-color: rgba(239,68,68,.35); }
+.gradio-container .dr-status-error .dr-status-icon { background: #ef4444; color: #fff; font-weight: 700; }
+.gradio-container .dr-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #2c2c35;
+  border-top-color: var(--dr-red); animation: dr-spin .8s linear infinite; display: inline-block; }
 @keyframes dr-spin { to { transform: rotate(360deg); } }
-.dr-stepper { display: flex; gap: 6px; margin-top: 12px; }
-.gradio-container .dr-step { flex: 1; font-size: 12px !important; color: #6f6f7b !important; display: flex;
+.gradio-container .dr-stepper { display: flex; gap: 6px; margin-top: 12px; }
+.gradio-container .dr-step { flex: 1; font-size: 12px !important; color: var(--dr-faint) !important; display: flex;
   flex-direction: column; gap: 6px; }
-.dr-dot { height: 4px; border-radius: 4px; background: #25252d; display: block; }
-.gradio-container .dr-step.is-done { color: #c9c9d1 !important; } .dr-step.is-done .dr-dot { background: #f01e1e; }
-.gradio-container .dr-step.is-now { color: #fff !important; font-weight: 600 !important; }
-.dr-step.is-now .dr-dot { background: linear-gradient(90deg,#f01e1e,#ffadad,#ff7a3d,#f01e1e);
-  background-size: 300% 100%; animation: dr-load 1.6s linear infinite; }
-@keyframes dr-load { 0% { background-position: 0% 0; } 100% { background-position: 300% 0; } }
-.gradio-container .dr-chip { display: inline-block; font-size: 12px !important; padding: 3px 10px; border-radius: 999px;
-  margin: 2px 4px 2px 0; background: rgba(240,30,30,.12); border: 1px solid rgba(240,30,30,.3); color: #ffadad !important; }
+.gradio-container .dr-dot { height: 3px; border-radius: 3px; background: #26262e; display: block; }
+.gradio-container .dr-step.is-done { color: #b4b4be !important; } .dr-step.is-done .dr-dot { background: var(--dr-red); }
+.gradio-container .dr-step.is-now { color: #fff !important; }
+.gradio-container .dr-step.is-now .dr-dot { background: linear-gradient(90deg, #26262e 0%, var(--dr-red) 50%, #26262e 100%);
+  background-size: 200% 100%; animation: dr-load 1.4s linear infinite; }
+@keyframes dr-load { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
+.gradio-container .dr-chip { display: inline-block; font: 500 12px/1.4 ui-monospace, "SF Mono", Menlo, monospace !important;
+  padding: 3px 8px; border-radius: 6px; margin: 2px 4px 2px 0; background: #1b1b21;
+  border: 1px solid #2a2a33; color: #c9c9d1 !important; }
 
 /* CTA */
-.dr-cta { padding: 16px; border-radius: 14px; border: 1px dashed #34343e !important; display: flex; gap: 14px;
-  align-items: center; justify-content: space-between; flex-wrap: wrap; background: rgba(255,255,255,.015); }
-.gradio-container .dr-cta-text { font-size: 14px !important; color: #b4b4be !important; line-height: 1.5 !important; flex: 1 1 240px; }
-.gradio-container .dr-cta-text b { color: #fff !important; display: block; margin-bottom: 2px; }
-.dr-cta-btns { display: flex; gap: 8px; }
-.gradio-container a.dr-btn { font-size: 14px !important; font-weight: 600 !important; color: #fff !important;
-  text-decoration: none !important; padding: 9px 14px; border-radius: 10px; background: #1b1b21;
-  border: 1px solid #2c2c35; white-space: nowrap; }
-.gradio-container a.dr-btn-primary { background: linear-gradient(180deg,#ff2b2b,#d40f0f); border: 0; }
-
-/* sections */
-.gradio-container .dr-section { margin: 0 !important; padding-top: 72px !important; position: relative; z-index: 1; }
-.gradio-container .dr-section h2 { font-size: clamp(24px, 3vw, 32px) !important; font-weight: 750 !important;
-  letter-spacing: -0.02em !important; color: #fff !important; text-align: center !important; margin: 0 0 8px !important; }
-.gradio-container .dr-section .dr-section-sub { text-align: center !important; color: #9a9aa6 !important;
-  font-size: 15px !important; margin: 0 auto 24px !important; max-width: 620px; }
-.dr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
-.dr-tile { background: #111115; border: 1px solid #222229; border-radius: 16px; padding: 20px; }
-.gradio-container .dr-tile i { font-style: normal; font-size: 22px; display: block; margin-bottom: 10px; }
-.gradio-container .dr-tile h3 { font-size: 16px !important; font-weight: 650 !important; color: #fff !important;
+.gradio-container .dr-cta { padding: 16px 18px; border-radius: 10px; border: 1px solid var(--dr-line); display: flex; gap: 14px;
+  align-items: center; justify-content: space-between; flex-wrap: wrap; }
+.gradio-container .dr-cta-text { font-size: 13px !important; color: var(--dr-muted) !important; line-height: 1.55 !important; flex: 1 1 240px; }
+.gradio-container .dr-cta-text b { color: #fff !important; display: block; margin-bottom: 2px; font-size: 14px; }
+.gradio-container .dr-cta-btns { display: flex; gap: 8px; }
+.gradio-container a.dr-btn { font-size: 13px !important; font-weight: 600 !important; color: #fff !important;
+  text-decoration: none !important; padding: 8px 14px; border-radius: 8px; border: 1px solid #2c2c35; white-space: nowrap; }
+.gradio-container a.dr-btn:hover { border-color: #4a4a55; }
+.gradio-container a.dr-btn-primary { background: var(--dr-red); border-color: var(--dr-red); }
+.gradio-container a.dr-btn-primary:hover { background: #f02a31; border-color: #f02a31; }
+
+/* editorial sections */
+.gradio-container .dr-section { margin: 0 !important; padding-top: 96px !important; position: relative; z-index: 1; }
+.gradio-container .dr-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
+.gradio-container .dr-split-head { position: sticky; top: 24px; }
+.gradio-container .dr-section h2 { font-size: clamp(26px, 3vw, 34px) !important; font-weight: 700 !important;
+  letter-spacing: -0.025em !important; line-height: 1.15 !important; color: #fff !important; margin: 0 0 12px !important;
+  text-align: left !important; }
+.gradio-container .dr-section .dr-section-sub { color: var(--dr-muted) !important; font-size: 15px !important;
+  line-height: 1.6 !important; margin: 0 !important; text-align: left !important; }
+.gradio-container .dr-section-sub a { color: #fff !important; text-decoration: underline !important;
+  padding: 0 !important; margin: 0 !important; background: none !important;
+  text-underline-offset: 3px; text-decoration-color: #4a4a55 !important; }
+.gradio-container .dr-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
+.gradio-container .dr-item { border-top: 1px solid var(--dr-line); padding: 18px 0 24px; }
+.gradio-container .dr-item h3 { font-size: 15px !important; font-weight: 600 !important; color: #fff !important;
   margin: 0 0 6px !important; }
-.gradio-container .dr-tile span { font-size: 14px !important; color: #9a9aa6 !important; line-height: 1.55 !important; }
-.gradio-container .dr-num { display: inline-grid !important; place-items: center; width: 28px; height: 28px; border-radius: 8px;
-  font-weight: 700 !important; font-size: 13px !important; color: #fff !important; margin-bottom: 12px;
-  background: linear-gradient(180deg,#ff2b2b,#d40f0f); }
+.gradio-container .dr-item span { font-size: 14px !important; color: var(--dr-muted) !important; line-height: 1.55 !important; }
 
 /* FAQ */
-.dr-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
-.gradio-container .dr-faq details { background: #111115; border: 1px solid #222229; border-radius: 14px; padding: 0 !important; }
-.gradio-container .dr-faq summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px !important;
-  font-size: 15px !important; font-weight: 600 !important; color: #ededf0 !important; position: relative; }
-.dr-faq summary::-webkit-details-marker { display: none; }
-.dr-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
-  font-size: 20px; color: #ff7f7f; transition: transform .2s; }
-.dr-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
-.gradio-container .dr-faq .dr-ans { padding: 0 18px 16px !important; color: #a8a8b3 !important; font-size: 14px !important;
-  line-height: 1.6 !important; margin: 0 !important; }
-.gradio-container .dr-faq a, .gradio-container .dr-foot a { color: #ff9a9a !important; text-decoration: none !important; }
+.gradio-container .dr-faq { display: grid; border-top: 1px solid var(--dr-line); }
+.gradio-container .dr-faq details { border-bottom: 1px solid var(--dr-line); padding: 0 !important; margin: 0 !important;
+  background: transparent !important; }
+.gradio-container .dr-faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0 !important;
+  font-size: 15px !important; font-weight: 500 !important; color: var(--dr-text) !important; position: relative; }
+.gradio-container .dr-faq summary::-webkit-details-marker { display: none; }
+.gradio-container .dr-faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px;
+  border-right: 1.5px solid #8b8b97; border-bottom: 1.5px solid #8b8b97; transform: translateY(-75%) rotate(45deg);
+  transition: transform .15s; }
+.gradio-container .dr-faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
+.gradio-container .dr-faq summary:hover { color: #fff !important; }
+.gradio-container .dr-faq .dr-ans { padding: 0 40px 20px 0 !important; color: var(--dr-muted) !important;
+  font-size: 14px !important; line-height: 1.65 !important; margin: 0 !important; }
+.gradio-container .dr-faq a { color: #fff !important; text-decoration: underline !important;
+  padding: 0 !important; margin: 0 !important; background: none !important;
+  text-underline-offset: 3px; text-decoration-color: #4a4a55 !important; }
+.gradio-container .dr-faq b { color: #d4d4da !important; font-weight: 600 !important; }
 
 /* footer */
-.gradio-container .dr-foot { text-align: center !important; color: #6f6f7b !important; font-size: 13px !important;
-  padding: 48px 0 0; line-height: 1.8 !important; position: relative; z-index: 1; }
-.dr-foot .dr-brand { margin-bottom: 10px; }
-.dr-foot .dr-mark { height: 28px !important; } .dr-foot .dr-word { height: 17px !important; }
-.gradio-container .dr-foot nav a { color: #b4b4be !important; margin: 0 9px; }
+.gradio-container .dr-foot { color: var(--dr-faint) !important; font-size: 13px !important; margin-top: 96px;
+  padding: 28px 0 0; border-top: 1px solid var(--dr-line); line-height: 1.8 !important; position: relative; z-index: 1;
+  display: grid; grid-template-columns: auto 1fr; gap: 6px 32px; align-items: center; }
+.gradio-container .dr-foot .dr-mark { height: 24px !important; } .dr-foot .dr-word { height: 15px !important; }
+.gradio-container .dr-foot nav { justify-self: end; }
+.gradio-container .dr-foot nav a { color: var(--dr-muted) !important; margin-left: 20px; text-decoration: none !important; }
 .gradio-container .dr-foot nav a:hover { color: #fff !important; }
+.gradio-container .dr-foot .dr-foot-copy { grid-column: 1 / -1; }
 
-@media (max-width: 860px) { .dr-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 900px) {
+  .gradio-container .dr-split { grid-template-columns: 1fr; gap: 24px; }
+  .gradio-container .dr-split-head { position: static; }
+}
 @media (max-width: 640px) {
   .gradio-container { padding: 0 16px 32px !important; }
-  .dr-grid { grid-template-columns: 1fr; }
-  .gradio-container .dr-hero { padding: 26px 0 20px; }
+  .gradio-container .dr-list { grid-template-columns: 1fr; }
+  .gradio-container .dr-hero { padding: 40px 0 28px; }
   .gradio-container .dr-hero .dr-sub { font-size: 16px !important; }
-  .dr-card { padding: 16px !important; border-radius: 16px !important; }
-  .dr-mark { height: 30px !important; } .dr-word { height: 18px !important; }
-  #dr-login button { font-size: 12px !important; padding: 6px 12px !important; }
-  .dr-cta-btns { width: 100%; } .gradio-container a.dr-btn { flex: 1; text-align: center; }
-  .gradio-container .dr-section { padding-top: 52px !important; }
+  .gradio-container .dr-meta { gap: 4px 14px; }
+  .gradio-container .dr-meta span + span::before { content: none; }
+  .gradio-container .dr-card { padding: 16px !important; }
+  .gradio-container .dr-mark { height: 28px !important; } .dr-word { height: 17px !important; }
+  #dr-login button { font-size: 12px !important; padding: 6px 10px !important; }
+  .gradio-container .dr-cta-btns { width: 100%; } .gradio-container a.dr-btn { flex: 1; text-align: center; }
+  .gradio-container .dr-section { padding-top: 64px !important; }
+  .gradio-container .dr-foot { grid-template-columns: 1fr; margin-top: 64px; }
+  .gradio-container .dr-foot nav { justify-self: start; } .gradio-container .dr-foot nav a { margin: 0 16px 0 0; }
 }
 """
 
@@ -982,24 +995,24 @@ with gr.Blocks(title=PAGE_TITLE) as demo:
 
     gr.HTML(f"""
     <header class="dr-hero">
-      <div class="dr-eyebrow">🎭 AI facial expression editor · free online demo</div>
-      <h1>Change facial expressions<br><span class="dr-grad">with one click.</span></h1>
+      <div class="dr-kicker">AI facial expression editor</div>
+      <h1>Change facial expressions<br><span class="dr-accent">with one click.</span></h1>
       <div class="dr-sub">DRAMA is an AI facial expression changer for video. Add a natural smile,
         or make a scene sadder, angrier or more excited, and keep the original take. No reshoot needed.</div>
-      <div class="dr-facts"><span>⏱ Clips up to {int(MAX_SECONDS)} s</span>
-        <span>🎁 {PER_USER_DAILY} free runs a day</span><span>✨ Original quality kept</span></div>
+      <div class="dr-meta"><span>Free to try</span><span>Clips up to {int(MAX_SECONDS)} seconds</span>
+        <span>{PER_USER_DAILY} runs a day</span><span>Original quality kept</span></div>
     </header>""")
 
     with gr.Row(elem_id="dr-main", equal_height=True):
         with gr.Column(scale=1, elem_classes="dr-card"):
-            gr.HTML('<div class="dr-label"><b>1</b>Upload a clip</div>'
+            gr.HTML('<div class="dr-label"><b>01</b>Upload a clip</div>'
                     '<div class="dr-hint">One person, face clearly visible, front-on. .mp4 or .mov.</div>')
             video_in = gr.Video(show_label=False, sources=["upload"], height=320, elem_classes="dr-media")
             samples = [[p] for p in sorted(glob.glob("examples/*.mp4"))]
             if samples:
                 gr.Examples(samples, inputs=[video_in], label="No clip handy? Try one of these")
 
-            gr.HTML('<div class="dr-label"><b>2</b>Pick an expression</div>')
+            gr.HTML('<div class="dr-label"><b>02</b>Pick an expression</div>')
             preset = gr.Radio(list(PRESETS), value=DEFAULT_PRESET, show_label=False,
                               container=False, elem_id="dr-presets")
             d_mood, d_exc, d_ang = PRESETS[DEFAULT_PRESET]
@@ -1008,13 +1021,13 @@ with gr.Blocks(title=PAGE_TITLE) as demo:
                                  info="−1 very sad · 0 neutral · +1 big smile")
                 excited = gr.Slider(0, 1, value=d_exc, step=0.05, label="Excitement")
                 angry = gr.Slider(0, 1, value=d_ang, step=0.05, label="Anger")
-            go = gr.Button("✨  Change expression", variant="primary", elem_id="dr-go")
+            go = gr.Button("Change expression", variant="primary", elem_id="dr-go")
             gr.HTML('<div class="dr-fine">Only upload footage you have the right to use. '
                     'Demo results are watermarked.</div>')
 
         with gr.Column(scale=1, elem_classes="dr-card"):
-            gr.HTML('<div class="dr-label"><b>3</b>Your result</div>'
-                    '<div class="dr-hint">Download the finished MP4 from the video\'s menu.</div>')
+            gr.HTML('<div class="dr-label"><b>03</b>Your result</div>'
+                    '<div class="dr-hint">Your edited MP4 appears here, ready to download.</div>')
             video_out = gr.Video(show_label=False, interactive=False, height=320, elem_classes="dr-media")
             status_out = gr.HTML(IDLE)
             gr.HTML(f"""
@@ -1022,47 +1035,40 @@ with gr.Blocks(title=PAGE_TITLE) as demo:
               DRAMA Studio does full-length video up to 4K, photos, and multi-face control.
               The free plan includes 60 credits.</div>
               <div class="dr-cta-btns"><a class="dr-btn" href="{DOCS}" target="_blank">API docs</a>
-              <a class="dr-btn dr-btn-primary" href="{SITE}" target="_blank">Try DRAMA free →</a></div></div>""")
-
-    features = "".join(f'<div class="dr-tile"><i>{icon}</i><h3>{title}</h3><span>{text}</span></div>'
-                       for icon, title, text in FEATURES)
-    gr.HTML(f"""
-    <section class="dr-section">
-      <h2>An AI face expression changer for real footage</h2>
-      <div class="dr-section-sub">From a subtle smile to a full mood change, DRAMA edits the performance
-        and leaves everything else in the shot alone.</div>
-      <div class="dr-grid">{features}</div>
-    </section>""")
+              <a class="dr-btn dr-btn-primary" href="{SITE}" target="_blank">Try DRAMA Studio</a></div></div>""")
 
-    steps = "".join(f'<div class="dr-tile"><span class="dr-num">{i}</span><h3>{t}</h3><span>{d}</span></div>'
-                    for i, (t, d) in enumerate(STEPS_HOW, start=1))
+    features = "".join(f'<div class="dr-item"><h3>{title}</h3><span>{text}</span></div>'
+                       for title, text in FEATURES)
     gr.HTML(f"""
-    <section class="dr-section">
-      <h2>How to change a facial expression in a video</h2>
-      <div class="dr-section-sub">Three steps, about a minute.</div>
-      <div class="dr-grid">{steps}</div>
+    <section class="dr-section dr-split">
+      <div class="dr-split-head"><div class="dr-kicker">What it does</div>
+        <h2>An AI face expression changer for real footage</h2>
+        <div class="dr-section-sub">From a subtle smile to a full mood change, DRAMA edits the
+          performance and leaves everything else in the shot alone.</div></div>
+      <div class="dr-list">{features}</div>
     </section>""")
 
     faq = "".join(f'<details><summary>{q}</summary><div class="dr-ans">{a}</div></details>' for q, a in FAQ)
     gr.HTML(f"""
-    <section class="dr-section">
-      <h2>Frequently asked questions</h2>
-      <div class="dr-section-sub">About DRAMA, the AI expression editor.</div>
+    <section class="dr-section dr-split">
+      <div class="dr-split-head"><div class="dr-kicker">FAQ</div>
+        <h2>Frequently asked questions</h2>
+        <div class="dr-section-sub">About DRAMA, the AI expression editor. Something else?
+          <a href="https://trydrama.io/gethelp/" target="_blank">Contact us</a>.</div></div>
       <div class="dr-faq">{faq}</div>
     </section>""")
 
     gr.HTML(f"""
     <footer class="dr-foot">{logo_html("sm")}
       <nav><a href="{CARD}" target="_blank">Model card</a><a href="{DOCS}" target="_blank">API docs</a><a href="{PRICING}" target="_blank">Pricing</a><a href="https://trydrama.io/privacypolicy/" target="_blank">Privacy</a><a href="https://trydrama.io/termsofuses/" target="_blank">Terms</a></nav>
-      <div>DRAMA by SyncMonster is an AI facial expression editor for changing emotion, mood and
-        performance without reshoots.</div>
-      <div>© 2026 SyncMonster · NeuralGarage Pvt. Ltd., Bengaluru</div>
+      <div class="dr-foot-copy">DRAMA by SyncMonster is an AI facial expression editor for changing emotion,
+        mood and performance without reshoots.<br>© 2026 SyncMonster · NeuralGarage Pvt. Ltd., Bengaluru</div>
     </footer>""")
 
     preset.change(apply_preset, inputs=[preset], outputs=[mood, excited, angry],
                   api_visibility="private", show_progress="hidden")
     for slider in (mood, excited, angry):
-        slider.release(lambda: "🎛️ Custom", outputs=[preset],
+        slider.release(lambda: "Custom", outputs=[preset],
                        api_visibility="private", show_progress="hidden")
     video_in.upload(prepare_upload, inputs=[video_in], outputs=[video_in], api_visibility="private")
     video_in.clear(lambda: (None, IDLE), outputs=[video_out, status_out], api_visibility="private")
@@ -1088,4 +1094,4 @@ def favicon_file():
 
 startup_check()
 demo.queue(max_size=20).launch(theme=THEME, css=CSS, js=FORCE_DARK, head=HEAD,
-                               favicon_path=favicon_file(), footer_links=[])
+                               favicon_path=favicon_file(), footer_links=[])