Redesign Space UI to match the Quest paper microsite

Replaces the blue-heavy Gradio theme with the Quest palette from the
OSU-NLP microsite: soft off-white page, paper-white cards with low-
opacity borders/shadows, terracotta accent, Manrope + Source Serif 4
typography. Swaps the centered-logo banner for a dark hero cover with
kicker panels, reworks section headings into the paper's kicker +
serif-display pattern, restyles icon links as pill badges, and adds a
footer block echoing the paper's site footer.

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

app.py

@@ -4,7 +4,6 @@ import re
 import time
 from dataclasses import dataclass, field
 from datetime import date
-from pathlib import Path
 from typing import Any, Dict, List, Optional, Set, Tuple, Union
 
 import gradio as gr
@@ -89,19 +88,15 @@ TOOL_RESPONSE_TEMPLATE = """<tool_response>
 
 SEARCH_CACHE: Dict[str, Dict[str, Any]] = {}
 VISIT_CACHE: Dict[str, Dict[str, Any]] = {}
-ASSETS_DIR = Path(__file__).resolve().parent / "assets"
-LOGO_PATH = str(ASSETS_DIR / "quest-logo.png")
-OSU_NLP_LOGO_PATH = str(ASSETS_DIR / "osu-nlp-logo.png")
-OSU_NLP_URL = "https://nlp.osu.edu/"
-
-# Gradio 5 default themes pull greys from the neutral palette; Base + explicit overrides keep
-# the whole UI on a strict blue/white scheme without unwanted slate panels.
+# Quest paper palette. The Gradio shell is themed to match the OSU-NLP Quest
+# microsite: soft off-white page, paper-white cards, terracotta accent, mint
+# secondary, Manrope for UI type and Source Serif 4 for display headings.
 APP_THEME = gr.themes.Base(
-    primary_hue=gr.themes.colors.blue,
-    secondary_hue=gr.themes.colors.sky,
-    neutral_hue=gr.themes.colors.blue,
+    primary_hue=gr.themes.colors.orange,
+    secondary_hue=gr.themes.colors.teal,
+    neutral_hue=gr.themes.colors.slate,
     font=[
-        gr.themes.GoogleFont("Plus Jakarta Sans"),
+        gr.themes.GoogleFont("Manrope"),
         "ui-sans-serif",
         "system-ui",
         "sans-serif",
@@ -112,69 +107,91 @@ APP_THEME = gr.themes.Base(
         "monospace",
     ],
 ).set(
-    body_background_fill="#f5f9ff",
-    body_text_color="#0f2744",
-    body_text_color_subdued="#4a6a8c",
-    color_accent="*primary_600",
-    color_accent_soft="#dbeafe",
-    background_fill_primary="#ffffff",
-    background_fill_secondary="#f0f6ff",
-    border_color_primary="#dbeafe",
-    border_color_accent="*primary_500",
-    block_background_fill="#ffffff",
-    block_border_width="0px",
-    block_border_color="transparent",
-    block_shadow="0 1px 2px rgba(15,39,68,0.04), 0 10px 30px rgba(37,99,235,0.06)",
-    block_radius="18px",
+    body_background_fill="#F2F4F8",
+    body_text_color="#0D1117",
+    body_text_color_subdued="#64748B",
+    color_accent="#BE5B2B",
+    color_accent_soft="rgba(190,91,43,0.09)",
+    background_fill_primary="#FFFFFF",
+    background_fill_secondary="#EEF1F7",
+    border_color_primary="rgba(10,15,40,0.08)",
+    border_color_accent="#BE5B2B",
+    block_background_fill="#FFFFFF",
+    block_border_width="1px",
+    block_border_color="rgba(10,15,40,0.08)",
+    block_shadow="0 1px 2px rgba(10,15,40,0.05), 0 2px 10px rgba(10,15,40,0.06)",
+    block_radius="16px",
     block_label_background_fill="transparent",
     block_label_border_width="0px",
-    block_label_text_color="#3b5b7a",
-    block_label_text_weight="600",
-    block_title_text_color="#0f2744",
+    block_label_text_color="#64748B",
+    block_label_text_weight="700",
+    block_title_text_color="#0D1117",
     block_title_text_weight="700",
     block_title_border_width="0px",
     panel_background_fill="transparent",
     panel_border_width="0px",
     panel_border_color="transparent",
-    input_background_fill="#ffffff",
-    input_background_fill_focus="#ffffff",
-    input_border_color="#bfdbfe",
-    input_border_color_focus="*primary_500",
+    input_background_fill="#FFFFFF",
+    input_background_fill_focus="#FFFFFF",
+    input_border_color="rgba(10,15,40,0.12)",
+    input_border_color_focus="#BE5B2B",
     input_border_width="1px",
-    input_radius="14px",
+    input_radius="12px",
     input_shadow="none",
-    input_shadow_focus="0 0 0 3px rgba(59,130,246,0.18)",
-    code_background_fill="#f0f7ff",
-    slider_color="*primary_500",
-    button_primary_background_fill="linear-gradient(135deg,#1d4ed8 0%,#3b82f6 100%)",
-    button_primary_background_fill_hover="linear-gradient(135deg,#1e40af 0%,#2563eb 100%)",
-    button_primary_text_color="#ffffff",
+    input_shadow_focus="0 0 0 3px rgba(190,91,43,0.15)",
+    code_background_fill="#EEF1F7",
+    slider_color="#BE5B2B",
+    button_primary_background_fill="#0D1117",
+    button_primary_background_fill_hover="#1F2A37",
+    button_primary_text_color="#FFFFFF",
     button_primary_border_color="transparent",
-    button_primary_shadow="0 8px 22px rgba(37,99,235,0.28)",
-    button_secondary_background_fill="#ffffff",
-    button_secondary_background_fill_hover="#eff6ff",
-    button_secondary_text_color="*primary_700",
-    button_secondary_border_color="#bfdbfe",
-    button_cancel_background_fill="#ffffff",
-    button_cancel_background_fill_hover="#eff6ff",
-    button_cancel_text_color="*primary_700",
-    button_cancel_border_color="#bfdbfe",
-    table_border_color="#dbeafe",
-    table_even_background_fill="#fafdff",
-    table_odd_background_fill="#ffffff",
+    button_primary_shadow="0 1px 2px rgba(10,15,40,0.08), 0 6px 18px rgba(10,15,40,0.12)",
+    button_secondary_background_fill="#FFFFFF",
+    button_secondary_background_fill_hover="rgba(190,91,43,0.09)",
+    button_secondary_text_color="#BE5B2B",
+    button_secondary_border_color="rgba(10,15,40,0.16)",
+    button_cancel_background_fill="#FFFFFF",
+    button_cancel_background_fill_hover="#FEE2E2",
+    button_cancel_text_color="#DC2626",
+    button_cancel_border_color="#FCA5A5",
+    table_border_color="rgba(10,15,40,0.08)",
+    table_even_background_fill="#FAFBFD",
+    table_odd_background_fill="#FFFFFF",
 )
 
 CUSTOM_CSS = """
-/* Gradio 5 uses versioned root classes (gradio-container-5-29-0). Match all of them and
-   replace every neutral grey surface with white / soft-blue tints. */
+/* === Quest paper palette applied to the Gradio shell ==================== */
+/* Brings the OSU-NLP Quest microsite aesthetic into the live Space: soft
+   off-white background, paper-white cards with subtle 1px borders and
+   low-opacity shadows, terracotta accent, Source Serif 4 for display
+   headings, Manrope for everything else. */
+
+:root {
+  --q-bg: #F2F4F8;
+  --q-paper: #FFFFFF;
+  --q-surface-alt: #EEF1F7;
+  --q-line: rgba(10, 15, 40, 0.08);
+  --q-line-strong: rgba(10, 15, 40, 0.16);
+  --q-text: #0D1117;
+  --q-muted: #64748B;
+  --q-accent: #BE5B2B;
+  --q-accent-soft: rgba(190, 91, 43, 0.09);
+  --q-accent-line: rgba(190, 91, 43, 0.55);
+  --q-mint: #0B9E8A;
+  --q-mint-deep: #0A8070;
+  --q-cover-bg: #0D1117;
+  --q-shadow: 0 1px 3px rgba(10,15,40,0.04), 0 8px 32px rgba(10,15,40,0.08);
+  --q-shadow-card: 0 1px 2px rgba(10,15,40,0.05), 0 2px 10px rgba(10,15,40,0.06);
+  --q-radius-xl: 20px;
+  --q-radius-lg: 16px;
+  --q-radius-md: 12px;
+}
 
 html, body, gradio-app, [class*="gradio-container"] {
-  background: #f5f9ff !important;
+  background: var(--q-bg) !important;
 }
 
-/* HF Space iframe wraps Gradio in <gradio-app>. Force every wrapper to stretch to
-   the full viewport from the FIRST paint so the page doesn't visibly grow after
-   the first answer arrives. */
+/* Full-height shell ------------------------------------------------------- */
 html, body { width: 100% !important; min-height: 100vh !important; margin: 0 !important; }
 gradio-app {
   display: block !important;
@@ -192,41 +209,30 @@ gradio-app > div {
 }
 
 [class*="gradio-container"] {
-  max-width: 1480px !important;
+  max-width: 1400px !important;
   width: 100% !important;
   min-width: 320px !important;
   margin-left: auto !important;
   margin-right: auto !important;
-  padding-left: 28px !important;
-  padding-right: 28px !important;
-  color: #0f2744;
+  padding: 24px 28px 64px !important;
+  color: var(--q-text);
   box-sizing: border-box !important;
+  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
 }
 
-/* Lock the inner two-column row so the right panel doesn't shrink before content
-   arrives, then snap back when results appear. */
-[class*="gradio-container"] .layout-gap {
-  width: 100% !important;
-}
+[class*="gradio-container"] *::selection { background: rgba(190,91,43,0.18); }
+
+/* Prevent inner wrappers from collapsing when streaming content first arrives. */
+[class*="gradio-container"] .layout-gap { width: 100% !important; }
 [class*="gradio-container"] .layout-gap > .gr-column,
-[class*="gradio-container"] .layout-gap > div {
-  min-width: 0 !important;
-}
+[class*="gradio-container"] .layout-gap > div { min-width: 0 !important; }
 
-/* Reserve vertical space for the Result/Record area so the first answer doesn't
-   trigger a visible vertical jump either. */
 [class*="gradio-container"] .gradio-markdown,
-[class*="gradio-container"] [data-testid="markdown"] {
-  min-height: 220px !important;
-}
+[class*="gradio-container"] [data-testid="markdown"] { min-height: 220px !important; }
 [class*="gradio-container"] .codemirror-wrapper,
-[class*="gradio-container"] .cm-editor {
-  min-height: 220px !important;
-}
+[class*="gradio-container"] .cm-editor { min-height: 220px !important; }
 
-/* Prevent Code / Markdown / Tabs from pushing the page wider than the container.
-   Every wrapper in the chain is locked to max-width: 100%; only the innermost
-   .cm-scroller scrolls horizontally. */
+/* Long code / markdown cannot push the layout sideways. */
 [class*="gradio-container"] .gradio-code,
 [class*="gradio-container"] .gradio-markdown,
 [class*="gradio-container"] .prose,
@@ -243,22 +249,11 @@ gradio-app > div {
 }
 [class*="gradio-container"] .codemirror-wrapper {
   max-width: 100% !important;
-  width: 100% !important;
-  min-width: 0 !important;
   border-radius: 14px !important;
   overflow: hidden !important;
 }
-[class*="gradio-container"] .cm-editor {
-  max-width: 100% !important;
-  width: 100% !important;
-  min-width: 0 !important;
-  overflow: hidden !important;
-}
-[class*="gradio-container"] .cm-scroller {
-  max-width: 100% !important;
-  width: 100% !important;
-  overflow-x: auto !important;
-}
+[class*="gradio-container"] .cm-editor { max-width: 100% !important; overflow: hidden !important; }
+[class*="gradio-container"] .cm-scroller { max-width: 100% !important; overflow-x: auto !important; }
 [class*="gradio-container"] .cm-content,
 [class*="gradio-container"] .cm-line {
   max-width: 100% !important;
@@ -272,118 +267,114 @@ gradio-app > div {
   white-space: pre-wrap !important;
 }
 
-/* Some Gradio builds wrap the app in `.main` or `.app`; center those too. */
-[class*="gradio-container"] .main,
-[class*="gradio-container"] .app,
-[class*="gradio-container"] .contain {
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-
-[class*="gradio-container"] *::selection { background: rgba(37,99,235,0.18); }
-
-/* --- TOP BANNER --- */
-.top-banner {
-  align-items: center !important;
-  padding: 28px 0 16px 0;
-  margin-bottom: 8px;
-  gap: 0 !important;
+/* === Quest-style hero cover ============================================== */
+.quest-cover {
+  position: relative;
+  border: 1px solid var(--q-line);
+  border-radius: var(--q-radius-xl);
+  background: var(--q-cover-bg);
+  box-shadow: var(--q-shadow);
+  padding: 14px;
+  margin: 8px 0 24px;
+  color: #F1F5F9;
+  overflow: hidden;
 }
-.top-banner .banner-side { min-width: 0; }
-.top-banner .banner-center {
-  display: flex !important;
-  flex-direction: column !important;
-  align-items: center !important;
-  gap: 10px !important;
-}
-.banner-subtitle {
-  color: #4a6a8c;
-  font-size: 15px;
-  font-weight: 500;
-  letter-spacing: 0.01em;
-  text-align: center;
-  margin: 0;
-}
-
-/* Shared logo chrome: both Quest and OSU NLP get the same rounded frame so they
-   look like a pair. Height is fixed so their visual weight matches. */
-.banner-quest-logo,
-.banner-quest-logo .image-container,
-.banner-quest-logo .image-frame,
-.banner-quest-logo > div,
-.banner-quest-logo button,
-.osu-nlp-logo,
-.osu-nlp-logo .image-container,
-.osu-nlp-logo .image-frame,
-.osu-nlp-logo > div,
-.osu-nlp-logo button {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
+.quest-cover-inner {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+.quest-cover-panel {
+  padding: 18px 20px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.04);
+  min-height: 110px;
+}
+.quest-cover-panel.wide {
+  grid-column: span 3;
+  min-height: 220px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background:
+    radial-gradient(ellipse at top right, rgba(190, 91, 43, 0.22), transparent 48%),
+    radial-gradient(ellipse at bottom left, rgba(11, 158, 138, 0.18), transparent 48%),
+    rgba(255, 255, 255, 0.04);
+}
+.quest-cover-kicker {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
 }
-.banner-quest-logo .icon-button-wrapper,
-.banner-quest-logo [aria-label*="hare" i],
-.banner-quest-logo [aria-label*="ownload" i],
-.banner-quest-logo [aria-label*="ullscreen" i],
-.osu-nlp-logo .icon-button-wrapper,
-.osu-nlp-logo [aria-label*="hare" i],
-.osu-nlp-logo [aria-label*="ownload" i],
-.osu-nlp-logo [aria-label*="ullscreen" i] {
-  display: none !important;
-}
-/* Both logos share the same fixed height so they visually line up. Width is
-   auto so each logo keeps its natural aspect ratio. */
-.banner-quest-logo img,
-.osu-nlp-logo img {
-  height: 140px !important;
-  width: auto !important;
-  max-width: 100% !important;
-  object-fit: contain !important;
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  border-radius: 0 !important;
-  padding: 0 !important;
-  margin: 0 auto !important;
-  display: block !important;
+.quest-cover-kicker .dot {
+  width: 8px; height: 8px; border-radius: 999px;
+  background: var(--q-accent);
+  box-shadow: 0 0 0 3px rgba(190, 91, 43, 0.22);
 }
-.banner-right {
-  display: flex !important;
-  justify-content: flex-end !important;
-  align-items: center !important;
+.quest-cover-title {
+  font-family: "Source Serif 4", "Source Serif Pro", ui-serif, Georgia, serif;
+  font-weight: 600;
+  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
+  line-height: 1.05;
+  letter-spacing: -0.02em;
+  color: #FFFFFF;
+  margin: 14px 0 8px;
+  max-width: 26ch;
+}
+.quest-cover-subtitle {
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 1rem;
+  line-height: 1.6;
+  max-width: 48ch;
+}
+.quest-cover-panel span.label {
+  display: block;
+  margin-bottom: 8px;
+  color: rgba(255, 255, 255, 0.45);
+  font-size: 0.66rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
 }
-.osu-nlp-logo img { margin-left: auto !important; }
-.osu-nlp-logo {
-  cursor: pointer;
-  transition: transform .15s ease;
+.quest-cover-panel strong.headline {
+  display: block;
+  font-family: "Source Serif 4", "Source Serif Pro", ui-serif, Georgia, serif;
+  font-weight: 600;
+  font-size: 1.15rem;
+  line-height: 1.15;
+  color: #FFFFFF;
+  max-width: 20ch;
 }
-.osu-nlp-logo:hover img { transform: translateY(-1px); }
-
-/* --- LEFT/RIGHT layout --- */
-.layout-gap { gap: 24px !important; align-items: flex-start; }
-.right-stack > * { margin-bottom: 12px; }
-.action-row { gap: 10px !important; margin-top: 12px; }
-.action-row button { min-width: 0; flex: 1; }
-
-.hero-heading {
-  font-size: 1.1rem !important;
-  font-weight: 700 !important;
-  letter-spacing: 0.005em !important;
-  text-transform: none !important;
-  color: #0f2744 !important;
-  margin-bottom: 14px !important;
+.quest-cover-byline {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 999px;
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-decoration: none;
+  width: fit-content;
 }
+.quest-cover-byline:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
 
-/* --- SECTION CARDS --- */
-/* `section-card` becomes a real white rounded card with soft blue shadow, no grey. */
+/* === Cards (section-card) =============================================== */
 .section-card {
-  background: #ffffff !important;
-  border: 1px solid rgba(191,219,254,0.55) !important;
-  border-radius: 20px !important;
-  box-shadow: 0 1px 2px rgba(15,39,68,0.03), 0 16px 40px rgba(37,99,235,0.07) !important;
-  padding: 18px !important;
+  background: var(--q-paper) !important;
+  border: 1px solid var(--q-line) !important;
+  border-radius: var(--q-radius-xl) !important;
+  box-shadow: var(--q-shadow-card) !important;
+  padding: 22px !important;
 }
-/* `no-frame` opts a card out of all chrome (used for logo + icon grid). */
 .no-frame {
   background: transparent !important;
   border: none !important;
@@ -391,78 +382,111 @@ gradio-app > div {
   padding: 0 !important;
 }
 
+/* Section kicker + hero heading follow the paper treatment. */
 .section-heading {
-  font-size: 0.72rem;
-  font-weight: 700;
-  letter-spacing: 0.1em;
+  font-size: 0.7rem;
+  font-weight: 800;
+  letter-spacing: 0.14em;
   text-transform: uppercase;
-  color: #2563eb;
-  margin: 0 0 12px 0;
+  color: var(--q-accent);
+  margin: 0 0 14px 0;
 }
+.hero-heading {
+  font-family: "Source Serif 4", "Source Serif Pro", ui-serif, Georgia, serif !important;
+  font-weight: 600 !important;
+  font-size: 1.6rem !important;
+  letter-spacing: -0.01em !important;
+  text-transform: none !important;
+  color: var(--q-text) !important;
+  margin: 4px 0 14px 0 !important;
+}
+.hero-subtitle {
+  color: var(--q-muted);
+  font-size: 0.95rem;
+  line-height: 1.6;
+  margin: -6px 0 16px 0;
+}
+
+/* Layout gap: mirror the paper's column rhythm. */
+.layout-gap { gap: 24px !important; align-items: flex-start; }
+.right-stack > * { margin-bottom: 14px; }
+.action-row { gap: 10px !important; margin-top: 14px; }
+.action-row button { min-width: 0; flex: 1; }
 
-/* --- ICON GRID (Paper / Code / Dataset / Model) --- */
+/* === Icon grid (Paper / Code / Dataset / Model) ========================= */
 .icon-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
+  gap: 10px;
   width: 100%;
-  margin: 0;
-  box-sizing: border-box;
 }
 .icon-link {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  padding: 14px 10px;
-  border-radius: 16px;
+  padding: 11px 14px;
+  border-radius: 999px;
   text-decoration: none !important;
-  color: #1d4ed8 !important;
-  background: #ffffff;
+  color: var(--q-text) !important;
+  background: var(--q-paper);
   font-weight: 600;
-  font-size: 15px;
+  font-size: 0.88rem;
   white-space: nowrap;
-  border: 1px solid rgba(191,219,254,0.7);
-  box-shadow: 0 1px 2px rgba(15,39,68,0.03), 0 10px 28px rgba(37,99,235,0.07);
-  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
+  border: 1px solid var(--q-line-strong);
+  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
 }
 .icon-link:hover {
+  background: var(--q-accent-soft);
+  border-color: var(--q-accent-line);
+  color: var(--q-accent) !important;
   transform: translateY(-1px);
-  border-color: #93c5fd;
-  box-shadow: 0 4px 18px rgba(37,99,235,0.14);
 }
 
-/* --- BUTTONS --- */
+/* === Buttons ============================================================ */
 [class*="gradio-container"] button.primary,
 [class*="gradio-container"] .gr-button-primary {
-  background: linear-gradient(135deg,#1d4ed8 0%,#3b82f6 100%) !important;
+  background: var(--q-text) !important;
   color: #ffffff !important;
-  border: none !important;
-  box-shadow: 0 8px 22px rgba(37,99,235,0.28) !important;
+  border: 1px solid var(--q-text) !important;
+  box-shadow: 0 1px 2px rgba(10,15,40,0.08), 0 6px 18px rgba(10,15,40,0.12) !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.01em !important;
 }
 [class*="gradio-container"] button.primary:hover,
 [class*="gradio-container"] .gr-button-primary:hover {
-  background: linear-gradient(135deg,#1e40af 0%,#2563eb 100%) !important;
-  box-shadow: 0 10px 26px rgba(37,99,235,0.34) !important;
+  background: #1F2A37 !important;
+  border-color: #1F2A37 !important;
 }
 [class*="gradio-container"] button.secondary,
+[class*="gradio-container"] .gr-button-secondary {
+  background: var(--q-paper) !important;
+  color: var(--q-text) !important;
+  border: 1px solid var(--q-line-strong) !important;
+  box-shadow: none !important;
+  font-weight: 600 !important;
+}
+[class*="gradio-container"] button.secondary:hover,
+[class*="gradio-container"] .gr-button-secondary:hover {
+  background: var(--q-accent-soft) !important;
+  border-color: var(--q-accent-line) !important;
+  color: var(--q-accent) !important;
+}
 [class*="gradio-container"] button.stop,
-[class*="gradio-container"] .gr-button-secondary,
 [class*="gradio-container"] .gr-button-stop {
-  background: #ffffff !important;
-  color: #1d4ed8 !important;
-  border: 1px solid #bfdbfe !important;
-  box-shadow: 0 1px 2px rgba(15,39,68,0.04) !important;
+  background: var(--q-paper) !important;
+  color: #DC2626 !important;
+  border: 1px solid #FCA5A5 !important;
+  box-shadow: none !important;
+  font-weight: 600 !important;
 }
-[class*="gradio-container"] button.secondary:hover,
 [class*="gradio-container"] button.stop:hover,
-[class*="gradio-container"] .gr-button-secondary:hover,
 [class*="gradio-container"] .gr-button-stop:hover {
-  background: #eff6ff !important;
-  border-color: #93c5fd !important;
+  background: #FEE2E2 !important;
+  color: #B91C1C !important;
 }
 
-/* --- KILL DEFAULT GREY BLOCKS / FORMS / PANELS --- */
+/* Flatten every grey block Gradio drops inside our cards. */
 [class*="gradio-container"] .gr-group,
 [class*="gradio-container"] fieldset,
 [class*="gradio-container"] .gr-box,
@@ -472,11 +496,6 @@ gradio-app > div {
 [class*="gradio-container"] .container {
   background: transparent !important;
 }
-
-/* Inside our white section-cards, every nested Gradio wrapper must be FLAT
-   (no border / shadow / background), otherwise the auto-form Gradio inserts
-   around consecutive Dropdown+Slider components shows up as a "card inside card".
-   We override the relevant CSS variables locally + add explicit overrides. */
 .section-card {
   --block-shadow: none;
   --block-shadow-dark: none;
@@ -486,17 +505,9 @@ gradio-app > div {
   --panel-background-fill: transparent;
   --panel-border-width: 0px;
   --background-fill-secondary: transparent;
-  /* Gradio 5's auto-form uses `background: var(--border-color-primary)`; making
-     that transparent inside a section-card eliminates the inner blue rectangle
-     around Dropdown + Slider groups. Inputs use --input-border-color instead,
-     so they keep their blue border. */
   --border-color-primary: transparent;
-  /* Allow dropdown popups / overflowing content to escape the card. */
   overflow: visible !important;
 }
-/* Catch the auto-form and its immediate wrappers regardless of svelte hash:
-   they are direct descendant divs of a section-card that have `display:flex`
-   from Gradio defaults. Strip all visual chrome, but keep spacing. */
 .section-card > div,
 .section-card > div > div,
 .section-card > div > div > div {
@@ -521,16 +532,12 @@ gradio-app > div {
   box-shadow: none !important;
   overflow: visible !important;
 }
-
-/* Auto-form (consecutive form components) needs to lay its kids out vertically. */
 .section-card .form,
 .section-card .gr-form {
   display: flex !important;
   flex-direction: column !important;
   gap: 14px !important;
 }
-
-/* gr.Row must STAY horizontal even inside a section-card (Run / Stop / Clear). */
 [class*="gradio-container"] .section-card .row,
 [class*="gradio-container"] .section-card [class*="row"] {
   display: flex !important;
@@ -542,39 +549,35 @@ gradio-app > div {
   display: flex !important;
   flex-direction: row !important;
   gap: 10px !important;
-  margin-top: 12px;
+  margin-top: 14px;
 }
 .action-row > * { flex: 1 1 0; min-width: 0; }
-
-/* Direct children of a card get vertical rhythm without extra chrome. */
 .section-card > * + * { margin-top: 14px; }
 
-/* --- INPUTS / TEXTAREA --- */
+/* === Inputs ============================================================= */
 [class*="gradio-container"] textarea,
 [class*="gradio-container"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
-  background: #ffffff !important;
-  border: 1px solid #bfdbfe !important;
+  background: var(--q-paper) !important;
+  border: 1px solid var(--q-line-strong) !important;
   box-shadow: none !important;
-  border-radius: 14px !important;
-  color: #0f2744 !important;
+  border-radius: var(--q-radius-md) !important;
+  color: var(--q-text) !important;
+  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
 }
 [class*="gradio-container"] textarea::placeholder,
-[class*="gradio-container"] input::placeholder { color: #7591b3 !important; }
+[class*="gradio-container"] input::placeholder { color: #94A3B8 !important; }
 [class*="gradio-container"] textarea:focus,
 [class*="gradio-container"] input:focus {
-  border-color: #3b82f6 !important;
-  box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
+  border-color: var(--q-accent) !important;
+  box-shadow: 0 0 0 3px rgba(190,91,43,0.15) !important;
   outline: none !important;
 }
 
-/* --- DROPDOWN --- */
-/* The visible "Model" pill is the [data-testid="dropdown"] wrap; it's the only
-   thing that should carry the blue border. The <input> inside it must be
-   transparent/borderless or we get "border inside border" nesting. */
+/* === Dropdown =========================================================== */
 [class*="gradio-container"] [data-testid="dropdown"] {
-  background: #ffffff !important;
-  border: 1px solid #bfdbfe !important;
-  border-radius: 14px !important;
+  background: var(--q-paper) !important;
+  border: 1px solid var(--q-line-strong) !important;
+  border-radius: var(--q-radius-md) !important;
   box-shadow: none !important;
   padding: 2px 4px !important;
 }
@@ -587,37 +590,37 @@ gradio-app > div {
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
-  border-radius: 12px !important;
+  border-radius: 10px !important;
 }
 [class*="gradio-container"] .options ul,
 [class*="gradio-container"] .options {
-  background: #ffffff !important;
-  border: 1px solid #bfdbfe !important;
-  border-radius: 12px !important;
-  box-shadow: 0 12px 30px rgba(37,99,235,0.12) !important;
+  background: var(--q-paper) !important;
+  border: 1px solid var(--q-line) !important;
+  border-radius: var(--q-radius-md) !important;
+  box-shadow: 0 10px 30px rgba(10,15,40,0.12) !important;
 }
 [class*="gradio-container"] .options li[aria-selected="true"],
 [class*="gradio-container"] .options li:hover {
-  background: #eff6ff !important;
-  color: #1d4ed8 !important;
+  background: var(--q-accent-soft) !important;
+  color: var(--q-accent) !important;
 }
 
-/* Small "info / help" labels under inputs */
+/* Info hint text under inputs */
 [class*="gradio-container"] .info,
 [class*="gradio-container"] [data-testid*="info"],
 [class*="gradio-container"] .gr-info {
-  color: #6b86a6 !important;
+  color: var(--q-muted) !important;
   background: transparent !important;
   font-size: 12px !important;
 }
 
-/* --- SLIDERS (Gradio uses native input[type=range], not noUi) --- */
+/* === Sliders ============================================================ */
 [class*="gradio-container"] input[type="range"] {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   height: 6px;
-  background: #dbeafe;
+  background: var(--q-surface-alt);
   border-radius: 999px;
   outline: none;
   box-shadow: none !important;
@@ -625,7 +628,7 @@ gradio-app > div {
 }
 [class*="gradio-container"] input[type="range"]::-webkit-slider-runnable-track {
   height: 6px;
-  background: linear-gradient(90deg,#2563eb var(--val,50%), #dbeafe var(--val,50%));
+  background: linear-gradient(90deg,var(--q-accent) var(--val,50%), var(--q-surface-alt) var(--val,50%));
   border-radius: 999px;
 }
 [class*="gradio-container"] input[type="range"]::-webkit-slider-thumb {
@@ -635,19 +638,19 @@ gradio-app > div {
   height: 18px;
   border-radius: 50%;
   background: #ffffff;
-  border: 2px solid #2563eb;
-  box-shadow: 0 2px 6px rgba(37,99,235,0.25);
+  border: 2px solid var(--q-accent);
+  box-shadow: 0 2px 6px rgba(190,91,43,0.25);
   margin-top: -6px;
   cursor: pointer;
 }
 [class*="gradio-container"] input[type="range"]::-moz-range-track {
   height: 6px;
-  background: #dbeafe;
+  background: var(--q-surface-alt);
   border-radius: 999px;
 }
 [class*="gradio-container"] input[type="range"]::-moz-range-progress {
   height: 6px;
-  background: #2563eb;
+  background: var(--q-accent);
   border-radius: 999px;
 }
 [class*="gradio-container"] input[type="range"]::-moz-range-thumb {
@@ -655,57 +658,86 @@ gradio-app > div {
   height: 16px;
   border-radius: 50%;
   background: #ffffff;
-  border: 2px solid #2563eb;
-  box-shadow: 0 2px 6px rgba(37,99,235,0.25);
+  border: 2px solid var(--q-accent);
+  box-shadow: 0 2px 6px rgba(190,91,43,0.25);
 }
-/* The legacy noUi slider, kept just in case */
-[class*="gradio-container"] .noUi-target { background: #dbeafe !important; border: none !important; box-shadow: none !important; }
-[class*="gradio-container"] .noUi-connect { background: #2563eb !important; }
-[class*="gradio-container"] .noUi-handle  { background: #ffffff !important; border: 2px solid #2563eb !important; box-shadow: 0 2px 8px rgba(37,99,235,0.2) !important; }
 
-/* --- TABS --- */
+/* === Tabs =============================================================== */
 [class*="gradio-container"] .tabs,
 [class*="gradio-container"] .tab-container,
-[class*="gradio-container"] .tab-wrapper {
-  background: transparent !important;
-}
-[class*="gradio-container"] .tab-container::after {
-  background: rgba(37,99,235,0.18) !important;
-}
+[class*="gradio-container"] .tab-wrapper { background: transparent !important; }
+[class*="gradio-container"] .tab-container::after { background: var(--q-line) !important; }
 [class*="gradio-container"] .tab-wrapper button {
-  color: #4a6a8c !important;
-  font-weight: 600 !important;
-}
-[class*="gradio-container"] .tab-wrapper button.selected {
-  color: #1d4ed8 !important;
-}
-[class*="gradio-container"] .tab-wrapper button.selected::after {
-  background: #2563eb !important;
+  color: var(--q-muted) !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.04em !important;
+  text-transform: uppercase !important;
+  font-size: 0.78rem !important;
+}
+[class*="gradio-container"] .tab-wrapper button.selected { color: var(--q-accent) !important; }
+[class*="gradio-container"] .tab-wrapper button.selected::after { background: var(--q-accent) !important; }
+
+/* Block labels above components */
+[class*="gradio-container"] .gr-block label,
+[class*="gradio-container"] .gradio-slider label,
+[class*="gradio-container"] .gradio-dropdown label,
+[class*="gradio-container"] .gradio-textbox label {
+  color: var(--q-muted) !important;
+  font-weight: 700 !important;
+  font-size: 0.74rem !important;
+  letter-spacing: 0.08em !important;
+  text-transform: uppercase !important;
 }
 
-/* --- MARKDOWN / PROSE --- */
+/* === Markdown / prose =================================================== */
 [class*="gradio-container"] .gr-markdown,
 [class*="gradio-container"] .prose,
-[class*="gradio-container"] .markdown { color: #0f2744 !important; }
+[class*="gradio-container"] .markdown {
+  color: var(--q-text) !important;
+  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
+  line-height: 1.75;
+}
 [class*="gradio-container"] .gr-markdown a,
-[class*="gradio-container"] .prose a { color: #1d4ed8 !important; }
+[class*="gradio-container"] .prose a { color: var(--q-accent) !important; text-decoration: underline; text-decoration-color: rgba(190,91,43,0.35); }
+[class*="gradio-container"] .gr-markdown a:hover,
+[class*="gradio-container"] .prose a:hover { text-decoration-color: var(--q-accent); }
+[class*="gradio-container"] .gr-markdown h1,
+[class*="gradio-container"] .gr-markdown h2,
+[class*="gradio-container"] .gr-markdown h3,
+[class*="gradio-container"] .prose h1,
+[class*="gradio-container"] .prose h2,
+[class*="gradio-container"] .prose h3 {
+  font-family: "Source Serif 4", "Source Serif Pro", ui-serif, Georgia, serif !important;
+  font-weight: 600 !important;
+  letter-spacing: -0.01em !important;
+  color: var(--q-text) !important;
+}
+[class*="gradio-container"] .gr-markdown code,
+[class*="gradio-container"] .prose code {
+  background: var(--q-surface-alt);
+  border: 1px solid var(--q-line);
+  padding: 1px 6px;
+  border-radius: 6px;
+  font-size: 0.9em;
+}
 
-/* --- CODE BLOCK (Trace tab) --- */
+/* === Code block (Record tab) ============================================ */
 [class*="gradio-container"] .codemirror-wrapper,
 [class*="gradio-container"] .cm-editor,
 [class*="gradio-container"] .cm-scroller,
 [class*="gradio-container"] .cm-gutters,
 [class*="gradio-container"] .cm-content {
-  background: #f3f8ff !important;
-  color: #0f2744 !important;
+  background: var(--q-surface-alt) !important;
+  color: var(--q-text) !important;
   border: none !important;
+  font-family: "JetBrains Mono", ui-monospace, monospace !important;
 }
 [class*="gradio-container"] .cm-gutters {
-  border-right: 1px solid #dbeafe !important;
-  color: #6b86a6 !important;
+  border-right: 1px solid var(--q-line) !important;
+  color: var(--q-muted) !important;
 }
 
-/* --- GLOBAL ROUNDED CORNERS: kill any leftover right-angle frames --- */
+/* === Rounded corners on everything ====================================== */
 [class*="gradio-container"] .block,
 [class*="gradio-container"] .form,
 [class*="gradio-container"] .gr-box,
@@ -716,28 +748,13 @@ gradio-app > div {
 [class*="gradio-container"] .tabitem,
 [class*="gradio-container"] .tab-content,
 [class*="gradio-container"] .gradio-markdown,
-[class*="gradio-container"] .gradio-code {
-  border-radius: 16px !important;
-}
-[class*="gradio-container"] button {
-  border-radius: 12px !important;
-}
+[class*="gradio-container"] .gradio-code { border-radius: var(--q-radius-md) !important; }
+[class*="gradio-container"] button { border-radius: 999px !important; }
 
-/* --- "Try Examples" preset buttons --- */
-.inline-example-title {
-  font-size: 0.72rem;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: #2563eb;
-  margin: 0 0 4px 0;
-}
-.example-note { color: #4a6a8c; font-size: 12px; margin: 0 0 10px 0; }
+/* === Example buttons ==================================================== */
+.example-note { color: var(--q-muted); font-size: 13px; margin: 0 0 12px 0; line-height: 1.5; }
 .example-buttons { display: grid; gap: 10px; margin-top: 4px; }
 
-/* Each Example button shows "<emoji>  <Category> — <query text>". Left-align the
-   label so multi-line examples read like cards, and tint the category prefix in
-   blue via a CSS gradient (more robust across Gradio versions than inline HTML). */
 [class*="gradio-container"] .example-btn {
   text-align: left !important;
   justify-content: flex-start !important;
@@ -745,16 +762,19 @@ gradio-app > div {
   line-height: 1.5 !important;
   padding: 14px 16px !important;
   font-size: 14px !important;
-  color: #0f2744 !important;
-  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
-  border: 1px solid #bfdbfe !important;
-  border-radius: 14px !important;
-  box-shadow: 0 1px 2px rgba(15,39,68,0.03) !important;
+  color: var(--q-text) !important;
+  background: var(--q-paper) !important;
+  border: 1px solid var(--q-line) !important;
+  border-radius: var(--q-radius-md) !important;
+  box-shadow: none !important;
+  font-weight: 500 !important;
+  letter-spacing: normal !important;
+  text-transform: none !important;
 }
 [class*="gradio-container"] .example-btn:hover {
-  background: #eff6ff !important;
-  border-color: #93c5fd !important;
-  box-shadow: 0 4px 14px rgba(37,99,235,0.12) !important;
+  background: var(--q-accent-soft) !important;
+  border-color: var(--q-accent-line) !important;
+  color: var(--q-accent) !important;
 }
 [class*="gradio-container"] .example-btn > * {
   color: inherit !important;
@@ -762,37 +782,38 @@ gradio-app > div {
   display: inline !important;
 }
 
-/* --- gr.Examples component (currently unused but defensively styled) --- */
-[class*="gradio-container"] [data-testid="block-examples"] {
-  background: #f0f6ff !important;
-  border: 1px solid #dbeafe !important;
-  border-radius: 16px !important;
-  padding: 12px !important;
-  box-shadow: none !important;
-}
-[class*="gradio-container"] [data-testid="block-examples"] table,
-[class*="gradio-container"] [data-testid="block-examples"] thead,
-[class*="gradio-container"] [data-testid="block-examples"] tbody,
-[class*="gradio-container"] [data-testid="block-examples"] tr,
-[class*="gradio-container"] [data-testid="block-examples"] td {
-  border: none !important;
-  background: transparent !important;
-}
-[class*="gradio-container"] [data-testid="block-examples"] button {
-  background: #ffffff !important;
-  color: #1d4ed8 !important;
-  border: 1px solid #bfdbfe !important;
-  border-radius: 12px !important;
-  box-shadow: none !important;
-  font-size: 13px !important;
-}
-[class*="gradio-container"] [data-testid="block-examples"] button:hover {
-  background: #eff6ff !important;
-  border-color: #93c5fd !important;
+/* Footer tagline block */
+.quest-footer {
+  margin-top: 28px;
+  padding: 18px 24px;
+  border: 1px solid var(--q-line);
+  border-radius: var(--q-radius-xl);
+  background: var(--q-paper);
+  box-shadow: var(--q-shadow-card);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  color: var(--q-muted);
+  font-size: 0.86rem;
+  line-height: 1.65;
 }
+.quest-footer a { color: var(--q-muted); text-decoration: none; }
+.quest-footer a:hover { color: var(--q-text); }
+.quest-footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
 
-/* Hide the small "footer" branding so nothing grey leaks in below the app */
+/* Tiny mark that replaces the HF watermark block. */
 footer { display: none !important; }
+
+/* === Responsive ========================================================= */
+@media (max-width: 1100px) {
+  .quest-cover-inner { grid-template-columns: 1fr; }
+  .quest-cover-panel.wide { grid-column: auto; min-height: 180px; }
+}
+@media (max-width: 760px) {
+  [class*="gradio-container"] { padding: 16px !important; }
+  .quest-footer { flex-direction: column; align-items: flex-start; }
+}
 """
 
 
@@ -1587,38 +1608,55 @@ with gr.Blocks(
     css=CUSTOM_CSS,
     fill_width=True,
 ) as demo:
-    # --- Top banner with the Quest logo centered and the OSU NLP mark on the right ---
-    with gr.Row(elem_classes="top-banner"):
-        with gr.Column(scale=1, elem_classes="banner-side"):
-            pass
-        with gr.Column(scale=4, elem_classes="banner-center"):
-            gr.Image(
-                value=LOGO_PATH,
-                show_label=False,
-                container=False,
-                interactive=False,
-                show_download_button=False,
-                show_fullscreen_button=False,
-                show_share_button=False,
-                elem_classes="banner-quest-logo",
-            )
-        with gr.Column(scale=1, elem_classes="banner-side banner-right"):
-            gr.Image(
-                value=OSU_NLP_LOGO_PATH,
-                show_label=False,
-                container=False,
-                interactive=False,
-                show_download_button=False,
-                show_fullscreen_button=False,
-                show_share_button=False,
-                elem_classes="osu-nlp-logo",
-            )
+    # --- Quest-style hero cover (mirrors the Quest paper microsite cover) ---
+    gr.HTML(
+        """
+<section class="quest-cover" aria-label="Quest hero">
+  <div class="quest-cover-inner">
+    <div class="quest-cover-panel wide">
+      <div class="quest-cover-kicker">
+        <span class="dot" aria-hidden="true"></span>
+        <span>Quest &nbsp;·&nbsp; OSU NLP Group</span>
+      </div>
+      <div>
+        <h1 class="quest-cover-title">Deep Research Agent, live in your browser.</h1>
+        <p class="quest-cover-subtitle">
+          A fully open recipe for training deep research agents &mdash; now
+          hosted as an interactive Space. Ask a question, watch the agent
+          search, read, and reason across sources, then return a grounded
+          answer.
+        </p>
+      </div>
+      <a class="quest-cover-byline" href="https://nlp.osu.edu/" target="_blank" rel="noopener noreferrer">
+        <span>Built by OSU NLP &rarr;</span>
+      </a>
+    </div>
+    <div class="quest-cover-panel">
+      <span class="label">Data synthesis</span>
+      <strong class="headline">Objective and open-ended tasks</strong>
+    </div>
+    <div class="quest-cover-panel">
+      <span class="label">Memory management</span>
+      <strong class="headline">Structured long-horizon reasoning</strong>
+    </div>
+    <div class="quest-cover-panel">
+      <span class="label">Training recipe</span>
+      <strong class="headline">Mid-training, SFT, and RL</strong>
+    </div>
+  </div>
+</section>
+"""
+    )
 
     # --- Main two-column layout ---
     with gr.Row(elem_classes="layout-gap"):
         with gr.Column(scale=6, min_width=420):
             with gr.Group(elem_classes="section-card"):
-                gr.HTML('<div class="section-heading hero-heading">What can I search for you?</div>')
+                gr.HTML(
+                    '<div class="section-heading">Ask the agent</div>'
+                    '<div class="hero-heading">What can I research for you?</div>'
+                    '<p class="hero-subtitle">Describe a question, claim, or open-ended prompt. The agent will search the web, visit sources, and synthesize a grounded answer.</p>'
+                )
                 question = gr.Textbox(
                     show_label=False,
                     placeholder="Ask anything you want to research in depth...",
@@ -1630,9 +1668,9 @@ with gr.Blocks(
                     clear_btn = gr.Button("Clear", variant="secondary", size="lg")
 
             with gr.Group(elem_classes="section-card"):
-                gr.HTML('<div class="section-heading">Try Examples</div>')
                 gr.HTML(
-                    '<div class="example-note">Each example shows the kind of query it represents. Click one to auto-fill.</div>'
+                    '<div class="section-heading">Section 02 · Try examples</div>'
+                    '<div class="example-note">Each prompt shows the kind of query it represents. Click one to auto-fill.</div>'
                 )
                 with gr.Column(elem_classes="example-buttons"):
                     example_buttons = [
@@ -1641,6 +1679,7 @@ with gr.Blocks(
                     ]
 
             with gr.Group(elem_classes="section-card"):
+                gr.HTML('<div class="section-heading">Section 03 · Output</div>')
                 with gr.Tabs():
                     with gr.TabItem("Result"):
                         answer = gr.Markdown(label="Final Answer")
@@ -1648,14 +1687,16 @@ with gr.Blocks(
                         trace = gr.Code(label="Execution Trace (JSON)", language="json")
 
         with gr.Column(scale=4, min_width=340, elem_classes="right-stack"):
-            with gr.Group(elem_classes=["section-card", "no-frame"]):
+            with gr.Group(elem_classes="section-card"):
                 gr.HTML(
                     f"""
+<div class="section-heading">Open release</div>
+<div class="hero-heading" style="font-size:1.2rem;margin-bottom:12px;">Data, code, and weights &mdash; all public.</div>
 <div class="icon-grid">
-  <a class="icon-link" href="{PAPER_URL}" target="_blank" rel="noopener noreferrer">📄 Paper</a>
-  <a class="icon-link" href="{CODE_URL}" target="_blank" rel="noopener noreferrer">💻 Code</a>
-  <a class="icon-link" href="{DATASET_URL}" target="_blank" rel="noopener noreferrer">🗂️ Dataset</a>
-  <a class="icon-link" href="{MODEL_URL}" target="_blank" rel="noopener noreferrer">🧠 Model</a>
+  <a class="icon-link" href="{PAPER_URL}" target="_blank" rel="noopener noreferrer">Paper</a>
+  <a class="icon-link" href="{CODE_URL}" target="_blank" rel="noopener noreferrer">Code</a>
+  <a class="icon-link" href="{DATASET_URL}" target="_blank" rel="noopener noreferrer">Dataset</a>
+  <a class="icon-link" href="{MODEL_URL}" target="_blank" rel="noopener noreferrer">Model</a>
 </div>
 """
                 )
@@ -1690,6 +1731,18 @@ with gr.Blocks(
                     step=0.1,
                 )
 
+    gr.HTML(
+        """
+<footer class="quest-footer">
+  <p>Quest is a fully open recipe for training deep research agents from scratch &mdash; covering data synthesis, memory management, infrastructure, and long-horizon training.</p>
+  <div class="quest-footer-links">
+    <a href="https://nlp.osu.edu/" target="_blank" rel="noopener noreferrer">OSU NLP</a>
+    <a href="https://huggingface.co/osunlp" target="_blank" rel="noopener noreferrer">Hugging Face</a>
+  </div>
+</footer>
+"""
+    )
+
     run_event = run_btn.click(
         fn=run_ui,
         inputs=[question, model, max_turns, max_search_results, temperature],