Lift landing to raeth.ai quality + 11 interactive Plotly figures

Sticky frosted nav, full-viewport hero on the Blog.md hook, six numbered raeth-style sections, IntersectionObserver scroll reveal + halo parallax + tab-jump anchors, equity_curves Plotly mirror, all blog figures embedded interactive.

.dockerignore

@@ -11,8 +11,14 @@ __pycache__/
 .ruff_cache/
 .coverage
 htmlcov/
-artifacts/
-datasets/
+# Ship just what the landing's interactive Plotly figures need:
+# - artifacts/runs/ → load_model_iters, replay_reward_components
+# - datasets/catalog/sample-v2/daily_bars/part-000.parquet → equal_weight_bnh_series
+# Excluding datasets/real-data/: the runtime env code falls back to package-bundled
+# data when datasets/real-data/ is absent. Including it triggers a different code
+# path (_resolve_real_data_dir) that expects a stricter on-disk layout and 500s on
+# /reset; the package fallback is what the prior deployment used.
+datasets/real-data/
 .idea/
 .vscode/
 .cursor/

.gitattributes

@@ -66,3 +66,5 @@ docs/figures/reward_components_baseline_vs_final.png filter=lfs diff=lfs merge=l
 docs/figures/reward_components_baseline_vs_final_glm.png filter=lfs diff=lfs merge=lfs -text
 docs/figures/reward_evolution.png filter=lfs diff=lfs merge=lfs -text
 docs/figures/reward_roi_combined_glm.png filter=lfs diff=lfs merge=lfs -text
+docs/figures/equity_curves_all_iters.png filter=lfs diff=lfs merge=lfs -text
+docs/figures/equity_curves_all_iters_glm.png filter=lfs diff=lfs merge=lfs -text

scripts/visualize/render_all.py

@@ -14,6 +14,7 @@ from scripts.visualize import (
     viz_d_bar_alpha,
     viz_e_action_mix,
     viz_f_reward_components,
+    viz_g_equity_curves_all,
 )
 from scripts.visualize.data_loader import PROJECT_ROOT
 
@@ -38,6 +39,11 @@ def main() -> int:
         viz_d_bar_alpha.render(OUT_DIR / f"bar_alpha_vs_bnh{suffix}.png", model_id=model_id)
         print(f"  OK  bar_alpha_vs_bnh{suffix}.png")
 
+        viz_g_equity_curves_all.render(
+            OUT_DIR / f"equity_curves_all_iters{suffix}.png", model_id=model_id,
+        )
+        print(f"  OK  equity_curves_all_iters{suffix}.png")
+
         viz_e_action_mix.render(OUT_DIR / f"action_mix_evolution{suffix}.png", model_id=model_id)
         print(f"  OK  action_mix_evolution{suffix}.png")
 

scripts/visualize/viz_g_equity_curves_all.py

@@ -0,0 +1,207 @@
+"""Viz G - all-iter equity curves vs equal-weight buy-and-hold.
+
+Plots portfolio equity for every completed reflection iteration plus a B&H
+reference on a single axes. Sequential color ramp (red baseline -> dark
+green final iter) so the reader sees the climb across iterations at a
+glance. Designed to be the headline chart at the top of the writeup.
+"""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+import matplotlib.pyplot as plt
+import numpy as np
+
+from scripts.visualize.data_loader import (
+    MODEL_LABELS,
+    PROJECT_ROOT,
+    equal_weight_bnh_series,
+    load_advance_day_rows,
+    load_model_iters,
+)
+
+
+def _equity_series(run_dir: Path) -> tuple[list[int], list[float], list[str]]:
+    rows = load_advance_day_rows(run_dir)
+    if not rows:
+        return [], [], []
+    values = [float(r["portfolio_value"]) for r in rows]
+    dates = [r["current_date"] for r in rows]
+    return list(range(len(rows))), values, dates
+
+
+# Sequential palette: warm red baseline -> cool dark green final iter.
+_PALETTE_FULL = [
+    "#c62828",  # red
+    "#ef6c00",  # orange
+    "#f9a825",  # amber
+    "#689f38",  # light green
+    "#388e3c",  # green
+    "#1b5e20",  # dark green
+]
+
+
+def _palette_for(n: int) -> list[str]:
+    """Sample n colors evenly from the warm-to-cool palette."""
+
+    if n <= len(_PALETTE_FULL):
+        idx = np.linspace(0, len(_PALETTE_FULL) - 1, n).round().astype(int)
+        return [_PALETTE_FULL[int(i)] for i in idx]
+    return _PALETTE_FULL
+
+
+def render(out: Path, model_id: str = "qwen-qwen3-32b-groq") -> None:
+    rows = [r for r in load_model_iters(model_id) if r.status == "complete"]
+    if len(rows) < 2:
+        raise RuntimeError(f"Need >= 2 completed iterations, got {len(rows)}")
+
+    palette = _palette_for(len(rows))
+
+    # B&H reference is computed from the longest-running iter's dates.
+    longest = max(rows, key=lambda r: len(load_advance_day_rows(r.run_dir)))
+    _, _, ref_dates = _equity_series(longest.run_dir)
+    bnh = equal_weight_bnh_series(ref_dates) if ref_dates else []
+
+    fig, ax = plt.subplots(figsize=(14.5, 6.8))
+
+    # B&H curve.
+    if bnh:
+        ax.plot(
+            range(len(bnh)),
+            bnh,
+            color="#0d47a1",
+            linewidth=2.2,
+            linestyle="--",
+            alpha=0.9,
+            zorder=10,
+            label=f"equal-weight buy-and-hold  ·  {(bnh[-1]/bnh[0]-1)*100:+.2f}%",
+        )
+
+    # Iteration curves: baseline dashed, intermediate iters thinner & semi-
+    # transparent, final iter thick & on top so the reader's eye lands there.
+    n_rows = len(rows)
+    for i, row in enumerate(rows):
+        x, y, _ = _equity_series(row.run_dir)
+        if not y:
+            continue
+        is_final = i == n_rows - 1
+        is_baseline = i == 0
+        color = palette[i]
+
+        if is_final:
+            linewidth = 3.0
+            linestyle = "-"
+            alpha = 1.0
+            zorder = 14
+        elif is_baseline:
+            linewidth = 2.0
+            linestyle = "--"
+            alpha = 0.95
+            zorder = 8
+        else:
+            linewidth = 1.6
+            linestyle = "-"
+            alpha = 0.85
+            zorder = 5
+
+        label = (
+            f"baseline (iter 0)  ·  {row.roi_pct:+.2f}%"
+            if is_baseline
+            else f"iter {row.iter}{'  ★' if is_final else '       '}  ·  {row.roi_pct:+.2f}%"
+        )
+        ax.plot(
+            x,
+            y,
+            color=color,
+            linewidth=linewidth,
+            linestyle=linestyle,
+            alpha=alpha,
+            zorder=zorder,
+            label=label,
+        )
+
+    # Soft starting-cash reference line.
+    ax.axhline(100_000, color="#9ca3af", linestyle=":", linewidth=1.1, alpha=0.7, zorder=2)
+
+    # Axis cosmetics.
+    ax.set_xlabel("bar index   (0 = first trading day, 119 = last)", fontsize=11)
+    ax.set_ylabel("portfolio equity", fontsize=11)
+    ax.yaxis.set_major_formatter(plt.FuncFormatter(lambda x, _: f"${x/1000:,.1f}k"))
+    ax.grid(True, axis="both", alpha=0.22)
+    for spine in ("top", "right"):
+        ax.spines[spine].set_visible(False)
+    ax.spines["left"].set_color("#bbb")
+    ax.spines["bottom"].set_color("#bbb")
+    ax.tick_params(colors="#555", labelsize=10)
+
+    # X-axis padding so the right edge has room for the legend annotations.
+    longest_n = max(len(_equity_series(r.run_dir)[1]) for r in rows)
+    ax.set_xlim(-2, longest_n + 4)
+
+    # Title with two-line story.
+    final = rows[-1]
+    final_roi_str = f"{final.roi_pct:+.2f}%"
+    base_roi_str = f"{rows[0].roi_pct:+.2f}%"
+    bnh_str = f"{(bnh[-1]/bnh[0]-1)*100:+.2f}%" if bnh else "n/a"
+    ax.set_title(
+        f"Equity curves across reflection iterations  ·  {MODEL_LABELS[model_id]}\n"
+        f"Baseline {base_roi_str}   →   iter {final.iter} {final_roi_str}   "
+        f"(equal-weight B&H reference: {bnh_str})",
+        fontsize=13.0,
+        weight="bold",
+        pad=16,
+        loc="left",
+    )
+
+    # Legend outside-right, ordered baseline -> final iter, B&H reference
+    # last so the warm-to-cool color ramp inside the box reads as a
+    # progression. Placed outside the data area so curves are never crowded.
+    handles, labels = ax.get_legend_handles_labels()
+    if handles:
+        bnh_idx = next((i for i, lab in enumerate(labels) if "buy-and-hold" in lab), None)
+        if bnh_idx is not None:
+            order = [i for i in range(len(handles)) if i != bnh_idx] + [bnh_idx]
+            handles = [handles[i] for i in order]
+            labels = [labels[i] for i in order]
+        leg = ax.legend(
+            handles,
+            labels,
+            loc="upper left",
+            bbox_to_anchor=(1.01, 1.0),
+            framealpha=0.0,
+            fontsize=10,
+            edgecolor="none",
+            handlelength=2.6,
+            borderpad=0.8,
+            labelspacing=0.55,
+        )
+        for text in leg.get_texts():
+            text.set_color("#222")
+
+    # Subtle "$100k start" annotation in the lower-left corner, off-curve.
+    ax.annotate(
+        "$100k start",
+        xy=(0, 100_000),
+        xytext=(2, 100_300),
+        fontsize=9,
+        color="#888",
+        va="bottom",
+        ha="left",
+        zorder=3,
+    )
+
+    fig.tight_layout()
+    fig.savefig(out, dpi=170, bbox_inches="tight", facecolor="white")
+    plt.close(fig)
+
+
+if __name__ == "__main__":
+    import sys
+
+    model_id = sys.argv[1] if len(sys.argv) > 1 else "qwen-qwen3-32b-groq"
+    suffix = "" if model_id == "qwen-qwen3-32b-groq" else "_glm"
+    out = PROJECT_ROOT / "docs" / "figures" / f"equity_curves_all_iters{suffix}.png"
+    out.parent.mkdir(parents=True, exist_ok=True)
+    render(out, model_id=model_id)
+    print("wrote", out)

server/app.py

@@ -12,6 +12,7 @@ Endpoints (provided by ``openenv.core.env_server.http_server.create_app``):
 from __future__ import annotations
 
 import logging
+from pathlib import Path
 
 try:
     from openenv.core.env_server.http_server import create_app
@@ -38,6 +39,47 @@ app = create_app(
 )
 
 
+# Mount the canonical PNG figures from docs/figures/ at /figures so the
+# Gradio HTML cards can <img src="/figures/foo.png">. Registered before the
+# Gradio catch-all at "/" so the explicit mount wins.
+def _mount_figures(app):  # noqa: ANN001
+    from fastapi.staticfiles import StaticFiles
+
+    candidates = [
+        Path(__file__).resolve().parent.parent / "docs" / "figures",  # repo layout
+        Path("/app/env/docs/figures"),  # baked path inside the HF Space image
+        Path("/app/docs/figures"),
+    ]
+    for path in candidates:
+        if path.is_dir():
+            app.mount("/figures", StaticFiles(directory=str(path)), name="figures")
+            logger.info("Mounted /figures from %s", path)
+            return
+    logger.warning("No docs/figures directory found; figure embeds will 404")
+
+
+# Mount the UI's loose static assets (motion.js etc.) at /ui-static. Gradio
+# inlines our CSS via the theme's NEON_CSS string but won't serve sibling JS,
+# so the landing's reveal/parallax script needs an explicit static mount.
+def _mount_ui_static(app):  # noqa: ANN001
+    from fastapi.staticfiles import StaticFiles
+
+    candidates = [
+        Path(__file__).resolve().parent / "ui" / "static",  # repo layout
+        Path("/app/env/server/ui/static"),  # baked path inside the HF Space image
+    ]
+    for path in candidates:
+        if path.is_dir():
+            app.mount("/ui-static", StaticFiles(directory=str(path)), name="ui_static")
+            logger.info("Mounted /ui-static from %s", path)
+            return
+    logger.warning("No server/ui/static directory found; landing motion.js will 404")
+
+
+_mount_figures(app)
+_mount_ui_static(app)
+
+
 # Backwards compatibility: the previous deployment served the UI at /web.
 # Register this BEFORE the Gradio mount at / so the explicit handler wins
 # over the catch-all mount.

server/ui/build_ui.py

@@ -1,7 +1,10 @@
 """Top-level Gradio Blocks app for TradeBench.
 
-Tab spine: trajectory · environment · reward · defenses · reflection-loop ·
-demo · baselines · docs.
+Editorial layout: sticky frosted nav at top, full-viewport landing scroll on the
+Trajectory tab (raeth.ai-style), then deep-dive tabs preserved beneath.
+
+The landing's reveal/parallax script lives at ``/ui-static/motion.js`` (mounted
+by ``server.app._mount_ui_static``). All CSS is inlined via ``theme.NEON_CSS``.
 """
 
 from __future__ import annotations
@@ -20,29 +23,52 @@ from .tabs import (
 )
 from .theme import DARK_THEME, NEON_CSS
 
-# Editorial header: paired with .tb-header CSS in components.css.
-_HEADER_HTML = """
-<div class="tb-header">
-    <div class="tb-header-rule"></div>
-    <div class="tb-header-meta">
-        <span class="tb-header-tag">openenv</span>
-        <span class="tb-header-dot">·</span>
-        <span class="tb-header-tag">theme 2 · long-horizon planning</span>
-        <span class="tb-header-dot">·</span>
-        <span class="tb-header-tag">7-component composite reward</span>
-        <span class="tb-header-dot">·</span>
-        <span class="tb-header-tag">6 anti-leak layers</span>
+# Sticky frosted nav. Lockup (left) + numbered anchors (center, ≥980px) +
+# cyan ghost CTA (right). Anchors point to numbered sections inside the
+# Trajectory tab; motion.js handles smooth-scroll. The "Get the code" CTA
+# is a real external link to the GitHub repo.
+_NAV_HTML = """
+<div class="tb-nav">
+    <div class="tb-nav-row">
+        <a class="tb-nav-lockup" href="#tb-section-hero" data-tb-tab="Trajectory">
+            TradeBench
+            <span class="tb-nav-lockup-mute">/ OpenEnv Theme 2</span>
+        </a>
+        <nav class="tb-nav-anchors" aria-label="Sections">
+            <a class="tb-nav-anchor" href="#tb-section-01" data-tb-tab="Trajectory">
+                <span class="tb-nav-anchor-num">01</span>Problem
+            </a>
+            <a class="tb-nav-anchor" href="#tb-section-02" data-tb-tab="Trajectory">
+                <span class="tb-nav-anchor-num">02</span>Environment
+            </a>
+            <a class="tb-nav-anchor" href="#tb-section-03" data-tb-tab="Trajectory">
+                <span class="tb-nav-anchor-num">03</span>Reward
+            </a>
+            <a class="tb-nav-anchor" href="#tb-section-04" data-tb-tab="Trajectory">
+                <span class="tb-nav-anchor-num">04</span>Defenses
+            </a>
+            <a class="tb-nav-anchor" href="#tb-section-05" data-tb-tab="Trajectory">
+                <span class="tb-nav-anchor-num">05</span>Results
+            </a>
+            <a class="tb-nav-anchor" href="#tb-section-06" data-tb-tab="Trajectory">
+                <span class="tb-nav-anchor-num">06</span>Run&nbsp;it
+            </a>
+        </nav>
+        <a class="tb-nav-cta"
+           href="https://github.com/PrathamSingla15/openenv_raethx_finals"
+           target="_blank" rel="noreferrer">
+            Get&nbsp;the&nbsp;code&nbsp;<span aria-hidden="true">&rarr;</span>
+        </a>
     </div>
-    <h1 class="tb-header-title">Trade<span class="tb-accent">Bench</span></h1>
-    <p class="tb-lead">
-        A long-horizon, non-stationary, reward-hack-resistant equities-trading RL
-        environment for LLM agents. Reward in <code>[0, 1]</code>. Real OHLCV
-        behind a four-layer anti-memorization stack. Designed for actual
-        training, not just evaluation.
-    </p>
 </div>
 """
 
+# Landing motion.js loads from the FastAPI /ui-static mount. Defer keeps the
+# script non-blocking; the script is self-init via DOMContentLoaded.
+_MOTION_SCRIPT = """
+<script src="/ui-static/motion.js" defer></script>
+"""
+
 
 def build_ui() -> gr.Blocks:
     """Construct and return the multi-tab TradeBench Gradio app."""
@@ -58,23 +84,24 @@ def build_ui() -> gr.Blocks:
         blocks_kwargs["css"] = NEON_CSS
 
     with gr.Blocks(**blocks_kwargs) as app:
-        gr.HTML(_HEADER_HTML)
+        gr.HTML(_NAV_HTML)
+        gr.HTML(_MOTION_SCRIPT)
 
         with gr.Tabs():
             with gr.Tab("Trajectory", id="trajectory"):
                 overview.render()
-            with gr.Tab("Environment", id="environment"):
-                environment.render()
+            with gr.Tab("Reflection Loop", id="reflection_loop"):
+                results.render()
             with gr.Tab("Reward", id="reward"):
                 rewards.render()
+            with gr.Tab("Environment", id="environment"):
+                environment.render()
             with gr.Tab("Defenses", id="defenses"):
                 walk_forward.render()
-            with gr.Tab("Reflection Loop", id="reflection_loop"):
-                results.render()
-            with gr.Tab("Run", id="demo"):
-                demo.render()
             with gr.Tab("Baselines", id="baselines"):
                 baselines.render()
+            with gr.Tab("Run", id="demo"):
+                demo.render()
             with gr.Tab("Docs", id="docs"):
                 docs.render()
 

server/ui/figures.py

@@ -0,0 +1,54 @@
+"""Helpers for embedding the canonical PNG figures from ``docs/figures/``.
+
+The figures are mounted at ``/figures`` by ``server/app.py``; these helpers
+render them inside the editorial ``.tb-figure`` card so headline / caption /
+provenance live alongside the chart.
+"""
+
+from __future__ import annotations
+
+
+def figure_card(
+    *,
+    src: str,
+    title: str,
+    meta: str = "",
+    caption: str = "",
+    dark: bool = False,
+    alt: str = "",
+) -> str:
+    """Return the HTML for one ``.tb-figure`` card.
+
+    Args:
+        src: filename under /figures (e.g. ``reward_evolution.png``)
+        title: small uppercase mono caption shown in the head row
+        meta: right-aligned mono-uppercase provenance tag (model, iter, etc.)
+        caption: prose caption shown in the foot of the card
+        dark: render the image on the dark elevation surface instead of white
+              (use this for figures that already have a transparent / dark bg)
+        alt: alt text for the ``<img>`` tag; defaults to ``title``
+    """
+
+    body_class = "tb-figure-body is-dark" if dark else "tb-figure-body"
+    img_alt = alt or title
+    head = f"""
+    <div class="tb-figure-head">
+        <div class="tb-figure-title">{title}</div>
+        <div class="tb-figure-meta">{meta}</div>
+    </div>
+    """ if (title or meta) else ""
+    foot = f"""
+    <div class="tb-figure-caption">{caption}</div>
+    """ if caption else ""
+    return f"""
+<figure class="tb-figure">
+    {head}
+    <div class="{body_class}">
+        <img src="/figures/{src}" alt="{img_alt}" loading="lazy" />
+    </div>
+    {foot}
+</figure>
+"""
+
+
+__all__ = ["figure_card"]

server/ui/plots.py

@@ -19,6 +19,7 @@ from scripts.visualize.data_loader import (
     MODEL_RUNS,
     PROJECT_ROOT,
     IterRow,
+    equal_weight_bnh_series,
     load_action_counts,
     load_advance_day_rows,
     load_model_iters,
@@ -551,6 +552,133 @@ def reward_recipe() -> go.Figure:
     return fig
 
 
+# ---------- Plot 7: per-iter equity curves vs B&H ----------
+
+
+# Sequential warm-to-cool palette mirroring viz_g_equity_curves_all.
+_EQUITY_PALETTE = [
+    "#c62828",  # red, baseline
+    "#ef6c00",  # orange
+    "#f9a825",  # amber
+    "#689f38",  # light green
+    "#388e3c",  # green
+    "#1b5e20",  # dark green, final
+]
+
+
+def _equity_palette_for(n: int) -> list[str]:
+    """Sample n colors evenly from the warm-to-cool palette."""
+    if n <= 1:
+        return [_EQUITY_PALETTE[0]]
+    if n >= len(_EQUITY_PALETTE):
+        return _EQUITY_PALETTE[: n] if n <= len(_EQUITY_PALETTE) else _EQUITY_PALETTE
+    step = (len(_EQUITY_PALETTE) - 1) / (n - 1)
+    return [_EQUITY_PALETTE[round(i * step)] for i in range(n)]
+
+
+def _equity_series(run_dir):  # noqa: ANN001
+    rows = load_advance_day_rows(run_dir)
+    if not rows:
+        return [], [], []
+    values = [float(r["portfolio_value"]) for r in rows]
+    dates = [r["current_date"] for r in rows]
+    return list(range(len(rows))), values, dates
+
+
+def equity_curves(model_id: str = QWEN_ID) -> go.Figure:
+    """Per-iteration portfolio equity vs equal-weight B&H reference.
+
+    Mirrors the static ``equity_curves_all_iters[*].png`` from
+    ``scripts/visualize/viz_g_equity_curves_all.py`` but interactive: hover
+    surfaces date + value + iter ROI per bar.
+    """
+    rows = _completed(load_model_iters(model_id))
+    if len(rows) < 2:
+        return go.Figure()
+
+    palette = _equity_palette_for(len(rows))
+
+    # B&H reference is computed from the longest-running iter's dates.
+    longest = max(rows, key=lambda r: len(load_advance_day_rows(r.run_dir)))
+    _, _, ref_dates = _equity_series(longest.run_dir)
+    try:
+        bnh = equal_weight_bnh_series(ref_dates) if ref_dates else []
+    except Exception:
+        bnh = []
+
+    fig = go.Figure()
+
+    if bnh:
+        bnh_pct = [(v / bnh[0] - 1) * 100 for v in bnh]
+        fig.add_trace(
+            go.Scatter(
+                x=list(range(len(bnh))),
+                y=bnh,
+                customdata=list(zip(ref_dates, bnh_pct)),
+                mode="lines",
+                name=f"equal-weight B&H · {bnh_pct[-1]:+.2f}%",
+                line=dict(color="#0d47a1", width=2.4, dash="dash"),
+                hovertemplate=(
+                    "<b>equal-weight B&H</b><br>"
+                    "bar %{x} · %{customdata[0]}<br>"
+                    "value: <b>%{y:,.0f}</b><br>"
+                    "return: <b>%{customdata[1]:+.2f}%%</b><extra></extra>"
+                ),
+            )
+        )
+
+    n_rows = len(rows)
+    for i, row in enumerate(rows):
+        x, y, dates = _equity_series(row.run_dir)
+        if not y:
+            continue
+        is_final = i == n_rows - 1
+        is_baseline = i == 0
+        color = palette[i]
+        width = 3.2 if is_final else (2.2 if is_baseline else 1.8)
+        dash = "dash" if is_baseline else "solid"
+        opacity = 1.0 if (is_final or is_baseline) else 0.85
+
+        if is_baseline:
+            label = f"baseline (iter 0) · {row.roi_pct:+.2f}%"
+        elif is_final:
+            label = f"iter {row.iter} ★ · {row.roi_pct:+.2f}%"
+        else:
+            label = f"iter {row.iter} · {row.roi_pct:+.2f}%"
+
+        pct = [(v / y[0] - 1) * 100 for v in y]
+        fig.add_trace(
+            go.Scatter(
+                x=x,
+                y=y,
+                customdata=list(zip(dates, pct)),
+                mode="lines",
+                name=label,
+                line=dict(color=color, width=width, dash=dash),
+                opacity=opacity,
+                hovertemplate=(
+                    f"<b>iter {row.iter}{' ★' if is_final else ''}</b><br>"
+                    "bar %{x} · %{customdata[0]}<br>"
+                    "value: <b>%{y:,.0f}</b><br>"
+                    "return: <b>%{customdata[1]:+.2f}%%</b><extra></extra>"
+                ),
+            )
+        )
+
+    layout = _base_layout(
+        title=(
+            f"Equity curves across all iterations  ·  {MODEL_LABELS[model_id]}"
+        ),
+        height=460,
+    )
+    layout["xaxis"]["title"]["text"] = "bar (test episode)"
+    layout["yaxis"]["title"]["text"] = "portfolio value"
+    layout["yaxis"]["tickformat"] = ",.0f"
+    layout["hovermode"] = "x unified"
+    fig.update_layout(**layout)
+    return fig
+
+
 __all__ = [
     "reward_trajectory",
     "roi_score_combined",
@@ -558,6 +686,7 @@ __all__ = [
     "action_mix",
     "reward_components",
     "reward_recipe",
+    "equity_curves",
     "QWEN_ID",
     "GLM_ID",
 ]

server/ui/static/components.css

@@ -1,5 +1,6 @@
-/* TradeBench components — see docs/UI_DESIGN_PROPOSAL.md §5.
-   All components rendered as inline HTML via gr.HTML(); no framework runtime. */
+/* TradeBench components — editorial, RAETH-style.
+   Pure-black canvas, generous whitespace, faded-into-white display type,
+   hairline structure, monospace metadata with wide tracking. */
 
 /* ── Global canvas ──────────────────────────────────────────── */
 .gradio-container {
@@ -12,150 +13,197 @@
     color: var(--ink);
     font-feature-settings: "ss01", "ss02", "cv11";
     background-image:
-        radial-gradient(circle at 18% -10%, var(--accent-glow), transparent 50%),
-        radial-gradient(circle at 90% 110%, rgba(91, 201, 125, 0.05), transparent 55%);
+        radial-gradient(ellipse 80% 50% at 50% -10%, var(--accent-glow), transparent 60%),
+        radial-gradient(ellipse 60% 40% at 80% 110%, rgba(132, 204, 22, 0.04), transparent 60%);
+    background-attachment: fixed;
+}
+
+/* Subtle vignette/grain overlay */
+.gradio-container::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
+    opacity: 0.06;
+    mix-blend-mode: overlay;
 }
 
 .main, .contain {
-    max-width: 1180px !important;
+    max-width: 1280px !important;
     margin: 0 auto !important;
-    padding: 0 var(--space-5) var(--space-6) !important;
+    padding: 0 var(--space-4) var(--space-7) !important;
     width: 100% !important;
     box-sizing: border-box !important;
+    position: relative;
+    z-index: 1;
 }
 
 footer { display: none !important; }
 
-/* ── Page header ────────────────────────────────────────────── */
+/* ── Page header (editorial centered hero) ──────────────────── */
 .tb-header {
-    padding: var(--space-6) var(--space-3) var(--space-5);
+    padding: var(--space-7) 0 var(--space-6);
+    text-align: center;
     border-bottom: 1px solid var(--rule);
-    margin-bottom: var(--space-5);
+    margin-bottom: var(--space-6);
     position: relative;
 }
-.tb-header::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background-image:
-        linear-gradient(var(--grid) 1px, transparent 1px),
-        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
-    background-size: 32px 32px;
-    pointer-events: none;
-    mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 80%);
-}
-.tb-header-rule {
-    width: 96px;
-    height: 2px;
-    background: linear-gradient(90deg, var(--accent), transparent);
-    margin-bottom: var(--space-4);
-}
 .tb-header-meta {
     font-family: var(--type-mono);
-    font-size: 0.74em;
-    color: var(--ink-mute);
-    letter-spacing: 0.18em;
+    font-size: 11px;
+    color: var(--ink-faint);
+    letter-spacing: 0.32em;
     text-transform: uppercase;
-    margin-bottom: var(--space-3);
+    margin-bottom: var(--space-5);
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
     align-items: center;
-    gap: var(--space-2);
+    gap: 12px;
+}
+.tb-header-tag { color: var(--ink-mute); }
+.tb-header-tag.is-accent { color: var(--accent); }
+.tb-header-dot {
+    color: var(--ink-faint);
+    user-select: none;
 }
-.tb-header-tag { color: var(--accent); }
-.tb-header-tag:nth-child(3),
-.tb-header-tag:nth-child(5),
-.tb-header-tag:nth-child(7) { color: var(--ink-mute); }
-.tb-header-dot { color: var(--ink-faint); }
+
 .tb-header-title,
 .tb-header h1 {
     font-family: var(--type-display);
-    font-weight: 600;
-    font-size: clamp(2.6em, 5vw, 4.4em);
+    font-weight: 500;
+    font-size: clamp(2.6rem, 7vw, 5.8rem);
     line-height: 0.96;
-    letter-spacing: -0.02em;
+    letter-spacing: -0.025em;
     color: var(--ink);
-    margin: 0;
+    margin: 0 auto;
+    max-width: 22ch;
     font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
 }
-.tb-header-title .tb-accent,
-.tb-header h1 .tb-accent {
+.tb-header-title .tb-faded { color: var(--ink-ghost); font-weight: 500; }
+.tb-header-title .tb-accent {
     color: var(--accent);
     font-style: italic;
+    font-weight: 500;
 }
+
 .tb-header .tb-lead {
     font-family: var(--type-body);
-    font-size: 1.06em;
+    font-size: 1.05em;
     color: var(--ink-mute);
-    margin: var(--space-3) 0 0;
-    max-width: 64ch;
-    line-height: 1.6;
+    margin: var(--space-5) auto 0;
+    max-width: 60ch;
+    line-height: 1.7;
 }
 .tb-header .tb-lead code {
     color: var(--accent-hi);
-    background: rgba(34, 211, 238, 0.10) !important;
-    border-color: var(--accent-lo) !important;
+    background: rgba(34, 211, 238, 0.08) !important;
+    border: 1px solid var(--accent-lo) !important;
+    padding: 1px 6px !important;
+}
+
+/* ── Eyebrow / section headings ─────────────────────────────── */
+.tb-section-eyebrow {
+    font-family: var(--type-mono);
+    font-size: 11px;
+    color: var(--ink-faint);
+    text-transform: uppercase;
+    letter-spacing: 0.28em;
+    margin-bottom: var(--space-4);
+    margin-top: var(--space-7);
+}
+.tb-section-eyebrow:first-child { margin-top: var(--space-5); }
+
+.tb-section-title {
+    font-family: var(--type-display);
+    font-weight: 500;
+    font-size: clamp(1.8em, 3.4vw, 2.8em);
+    line-height: 1.08;
+    letter-spacing: -0.02em;
+    color: var(--ink);
+    margin: 0 0 var(--space-4);
+    max-width: 22ch;
+    font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 1;
+}
+.tb-section-title .tb-faded { color: var(--ink-ghost); }
+.tb-section-title .tb-accent {
+    color: var(--accent);
+    font-style: italic;
+}
+.tb-section-lead {
+    font-family: var(--type-body);
+    font-size: 1.0em;
+    line-height: 1.7;
+    color: var(--ink);
+    max-width: 64ch;
+    margin: 0 0 var(--space-3);
+}
+.tb-section-lead-mute { color: var(--ink-mute); }
+.tb-section-lead .tb-num {
+    color: var(--ink);
+    font-family: var(--type-mono);
+    font-feature-settings: "tnum";
 }
 
 /* ── Hero (Trajectory tab) ──────────────────────────────────── */
 .tb-hero {
     display: grid;
-    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
-    gap: var(--space-5);
+    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
+    gap: var(--space-6);
     align-items: start;
-    margin: var(--space-5) 0 var(--space-4);
+    margin: 0 0 var(--space-6);
 }
 .tb-hero-stack { min-width: 0; }
 .tb-hero-title {
     font-family: var(--type-display);
     font-weight: 500;
-    font-size: clamp(1.8em, 3.2vw, 2.6em);
-    line-height: 1.18;
+    font-size: clamp(1.9em, 3.6vw, 3em);
+    line-height: 1.1;
     color: var(--ink);
-    letter-spacing: -0.01em;
-    margin: 0 0 var(--space-3);
+    letter-spacing: -0.018em;
+    margin: 0 0 var(--space-4);
+    max-width: 22ch;
     font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 1;
 }
+.tb-hero-title .tb-faded { color: var(--ink-ghost); }
 .tb-hero-title .tb-accent {
     color: var(--accent);
     font-style: italic;
-    font-weight: 600;
 }
 .tb-hero-lead {
     font-family: var(--type-body);
     font-size: 1.0em;
     color: var(--ink-mute);
-    line-height: 1.7;
+    line-height: 1.75;
     margin: 0;
-    max-width: 64ch;
+    max-width: 60ch;
 }
+.tb-hero-lead em { color: var(--ink); font-style: italic; }
 .tb-hero-stats {
     display: flex;
     flex-direction: column;
     gap: var(--space-3);
 }
 .tb-statcard {
-    background: var(--bg-elev-1);
+    background: transparent;
     border: 1px solid var(--rule);
-    border-radius: var(--r-md);
     padding: var(--space-4);
-    box-shadow: var(--shadow-card);
     position: relative;
-    overflow: hidden;
+    transition: border-color var(--dur-fast) var(--ease-out),
+                background-color var(--dur-fast) var(--ease-out);
 }
-.tb-statcard::before {
-    content: "";
-    position: absolute;
-    left: 0; top: 0; bottom: 0;
-    width: 3px;
-    background: linear-gradient(180deg, var(--accent), var(--accent-lo));
+.tb-statcard:hover {
+    border-color: var(--rule-strong);
+    background: rgba(255, 255, 255, 0.015);
 }
 .tb-statcard-eyebrow {
     font-family: var(--type-mono);
-    font-size: 0.72em;
+    font-size: 10px;
     color: var(--accent);
     text-transform: uppercase;
-    letter-spacing: 0.12em;
+    letter-spacing: 0.22em;
     margin-bottom: var(--space-3);
 }
 .tb-statcard-row {
@@ -168,38 +216,82 @@ footer { display: none !important; }
 .tb-statcard-row:last-of-type { border-bottom: none; }
 .tb-statcard-key {
     font-family: var(--type-mono);
-    font-size: 0.82em;
+    font-size: 0.78em;
     color: var(--ink-mute);
+    letter-spacing: 0.02em;
 }
 .tb-statcard-arrow {
     font-family: var(--type-mono);
     font-feature-settings: "tnum";
     font-size: 0.92em;
-    color: var(--ink);
+    color: var(--ink-mute);
 }
 .tb-statcard-arrow strong {
-    color: var(--accent-hi);
+    color: var(--ink);
     font-weight: 500;
 }
 .tb-statcard-foot {
     font-family: var(--type-mono);
-    font-size: 0.7em;
-    color: var(--ink-mute);
+    font-size: 10px;
+    color: var(--ink-faint);
     text-transform: uppercase;
-    letter-spacing: 0.1em;
+    letter-spacing: 0.22em;
     margin-top: var(--space-3);
-    padding-top: var(--space-2);
+    padding-top: var(--space-3);
     border-top: 1px solid var(--rule);
 }
 
+/* ── Hairline stat grid (4-up) ──────────────────────────────── */
+.tb-stat-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1px;
+    background: var(--rule);
+    margin: var(--space-5) 0 var(--space-6);
+}
+@media (min-width: 760px) {
+    .tb-stat-grid { grid-template-columns: repeat(4, 1fr); }
+}
+.tb-stat-cell {
+    background: var(--bg);
+    padding: var(--space-5) var(--space-4);
+    transition: background-color var(--dur-fast) var(--ease-out);
+}
+.tb-stat-cell:hover {
+    background: rgba(255, 255, 255, 0.02);
+}
+.tb-stat-cell-eyebrow {
+    font-family: var(--type-mono);
+    font-size: 10px;
+    color: var(--ink-faint);
+    text-transform: uppercase;
+    letter-spacing: 0.24em;
+    margin-bottom: var(--space-3);
+}
+.tb-stat-cell-value {
+    font-family: var(--type-display);
+    font-weight: 500;
+    font-feature-settings: "tnum";
+    font-size: clamp(2em, 3.6vw, 3em);
+    line-height: 1;
+    letter-spacing: -0.02em;
+    color: var(--ink);
+    margin-bottom: var(--space-2);
+    font-variation-settings: "opsz" 96;
+}
+.tb-stat-cell-foot {
+    font-family: var(--type-mono);
+    font-size: 11px;
+    color: var(--ink-faint);
+    letter-spacing: 0.04em;
+}
+
 /* ── Reward formula block ───────────────────────────────────── */
 .tb-formula {
     background: var(--bg-elev-1);
     border: 1px solid var(--rule);
-    border-radius: var(--r-md);
-    padding: var(--space-4);
+    padding: var(--space-5);
     margin: var(--space-4) 0 var(--space-5);
-    box-shadow: var(--shadow-card);
     position: relative;
     overflow: hidden;
 }
@@ -210,179 +302,184 @@ footer { display: none !important; }
     background: var(--bg);
     color: var(--accent);
     font-family: var(--type-mono);
-    font-size: 0.7em;
-    letter-spacing: 0.1em;
-    padding: 2px var(--space-2);
-    border: 1px solid var(--rule);
-    border-top: none;
-    border-radius: 0 0 var(--r-sm) var(--r-sm);
+    font-size: 10px;
+    letter-spacing: 0.22em;
+    padding: 4px var(--space-2);
+    border-left: 1px solid var(--rule);
+    border-right: 1px solid var(--rule);
+    border-bottom: 1px solid var(--rule);
     text-transform: uppercase;
 }
 .tb-formula pre {
     background: transparent !important;
     border: none !important;
     color: var(--ink) !important;
-    font-family: var(--type-mono);
+    font-family: var(--type-mono) !important;
     font-size: 0.84em;
-    line-height: 1.7;
-    margin: 0;
+    line-height: 1.75;
+    margin: 0 !important;
     padding: var(--space-3) 0 0 !important;
     overflow-x: auto;
 }
 
-/* ── Three-up card grid (design notes / observations) ───────── */
+/* ── Three-up card grid ─────────────────────────────────────── */
 .tb-three-up {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: var(--space-3);
-    margin: var(--space-3) 0 var(--space-5);
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 1px;
+    background: var(--rule);
+    margin: var(--space-4) 0 var(--space-6);
+    border: 1px solid var(--rule);
 }
 .tb-card {
-    background: var(--bg-elev-1);
-    border: 1px solid var(--rule);
-    border-radius: var(--r-md);
-    padding: var(--space-4);
-    transition: transform var(--dur-fast) var(--ease-out),
-                border-color var(--dur-fast) var(--ease-out);
+    background: var(--bg);
+    padding: var(--space-5);
+    transition: background-color var(--dur-fast) var(--ease-out);
     position: relative;
 }
 .tb-card:hover {
-    transform: translateY(-2px);
-    border-color: var(--accent-lo);
+    background: rgba(255, 255, 255, 0.02);
 }
 .tb-card-num {
     font-family: var(--type-mono);
-    font-size: 0.74em;
+    font-size: 10px;
     color: var(--accent);
-    letter-spacing: 0.16em;
-    margin-bottom: var(--space-2);
+    letter-spacing: 0.24em;
+    text-transform: uppercase;
+    margin-bottom: var(--space-4);
 }
 .tb-card-title {
     font-family: var(--type-display);
     font-weight: 500;
-    font-size: 1.08em;
+    font-size: 1.4em;
     color: var(--ink);
-    line-height: 1.3;
-    margin-bottom: var(--space-2);
+    line-height: 1.2;
+    margin-bottom: var(--space-3);
+    letter-spacing: -0.01em;
     font-variation-settings: "opsz" 72;
 }
 .tb-card-body {
     font-family: var(--type-body);
     font-size: 0.92em;
     color: var(--ink-mute);
-    line-height: 1.6;
+    line-height: 1.65;
 }
 .tb-card-body code {
     color: var(--accent-hi);
+    background: rgba(34, 211, 238, 0.06) !important;
+    padding: 1px 4px !important;
+    border: 1px solid var(--accent-lo) !important;
+    font-size: 0.92em;
 }
 
-/* ── Layer stack (6 defense layers) ─────────────────────────── */
+/* ── Layer stack ────────────────────────────────────────────── */
 .tb-layer-stack {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: var(--space-3);
-    margin: var(--space-4) 0 var(--space-5);
+    gap: 1px;
+    background: var(--rule);
+    border: 1px solid var(--rule);
+    margin: var(--space-4) 0 var(--space-6);
 }
 .tb-layer {
-    background: var(--bg-elev-1);
-    border: 1px solid var(--rule);
-    border-radius: var(--r-md);
-    padding: var(--space-4);
+    background: var(--bg);
+    padding: var(--space-5);
     display: flex;
     gap: var(--space-3);
     align-items: flex-start;
-    transition: border-color var(--dur-fast) var(--ease-out);
+    transition: background-color var(--dur-fast) var(--ease-out);
 }
-.tb-layer:hover { border-color: var(--accent-lo); }
+.tb-layer:hover { background: rgba(255, 255, 255, 0.02); }
 .tb-layer-num {
     font-family: var(--type-display);
     font-feature-settings: "tnum";
-    font-size: 1.5em;
-    font-weight: 600;
-    color: var(--accent);
+    font-size: 1.6em;
+    font-weight: 500;
+    color: var(--ink-ghost);
     letter-spacing: -0.02em;
     line-height: 1;
     flex-shrink: 0;
-    width: 36px;
+    width: 40px;
     text-align: right;
 }
 .tb-layer-content { min-width: 0; }
 .tb-layer-title {
     font-family: var(--type-body);
     font-weight: 500;
-    font-size: 0.98em;
+    font-size: 1em;
     color: var(--ink);
-    margin-bottom: var(--space-1);
+    margin-bottom: var(--space-2);
 }
 .tb-layer-body {
     font-family: var(--type-body);
     font-size: 0.9em;
     color: var(--ink-mute);
-    line-height: 1.55;
+    line-height: 1.6;
+}
+.tb-layer-body code {
+    color: var(--accent-hi);
+    background: rgba(34, 211, 238, 0.06) !important;
+    padding: 1px 4px !important;
 }
-.tb-layer-body code { color: var(--accent-hi); }
 
 /* ── Editorial blockquote (Opus diagnosis) ──────────────────── */
 .tb-quote {
     font-family: var(--type-display);
     font-style: italic;
-    font-size: 1.06em;
-    line-height: 1.55;
+    font-size: 1.32em;
+    line-height: 1.45;
     color: var(--ink);
     background: var(--bg-elev-1);
-    border-left: 3px solid var(--accent);
+    border-left: 2px solid var(--accent);
     border-top: 1px solid var(--rule);
     border-right: 1px solid var(--rule);
     border-bottom: 1px solid var(--rule);
-    border-radius: 0 var(--r-md) var(--r-md) 0;
-    padding: var(--space-4) var(--space-5);
+    padding: var(--space-5) var(--space-6);
     margin: var(--space-3) 0;
     max-width: 78ch;
     font-variation-settings: "opsz" 96, "WONK" 1;
 }
 .tb-quote::before {
-    content: "“";
+    content: "\201C";
     color: var(--accent);
     font-family: var(--type-display);
-    font-size: 2.4em;
+    font-size: 2.2em;
     line-height: 0;
     vertical-align: -0.4em;
-    margin-right: 0.1em;
+    margin-right: 0.06em;
 }
 
-/* ── Link grid (Docs tab) ───────────────────────────────────── */
+/* ── Link grid ──────────────────────────────────────────────── */
 .tb-link-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-    gap: var(--space-3);
-    margin: var(--space-4) 0;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1px;
+    background: var(--rule);
+    border: 1px solid var(--rule);
+    margin: var(--space-4) 0 var(--space-6);
 }
 .tb-link-card {
     display: block;
-    background: var(--bg-elev-1);
-    border: 1px solid var(--rule);
-    border-radius: var(--r-md);
-    padding: var(--space-4);
+    background: var(--bg);
+    padding: var(--space-5);
     text-decoration: none;
-    transition: border-color var(--dur-fast) var(--ease-out),
-                transform var(--dur-fast) var(--ease-out);
+    transition: background-color var(--dur-fast) var(--ease-out);
     position: relative;
     overflow: hidden;
 }
 .tb-link-card::after {
-    content: "→";
+    content: "\2192";
     position: absolute;
-    top: var(--space-3);
-    right: var(--space-3);
+    top: var(--space-4);
+    right: var(--space-4);
     color: var(--ink-faint);
     font-family: var(--type-mono);
-    font-size: 1.2em;
+    font-size: 1.1em;
     transition: color var(--dur-fast) var(--ease-out),
                 transform var(--dur-fast) var(--ease-out);
 }
 .tb-link-card:hover {
-    border-color: var(--accent);
-    transform: translateY(-2px);
+    background: rgba(255, 255, 255, 0.02);
 }
 .tb-link-card:hover::after {
     color: var(--accent);
@@ -390,47 +487,111 @@ footer { display: none !important; }
 }
 .tb-link-eyebrow {
     font-family: var(--type-mono);
-    font-size: 0.7em;
+    font-size: 10px;
     color: var(--accent);
-    letter-spacing: 0.12em;
+    letter-spacing: 0.22em;
     text-transform: uppercase;
-    margin-bottom: var(--space-2);
+    margin-bottom: var(--space-3);
 }
 .tb-link-title {
     font-family: var(--type-display);
     font-weight: 500;
-    font-size: 1.06em;
+    font-size: 1.2em;
     color: var(--ink);
-    margin-bottom: var(--space-1);
+    margin-bottom: var(--space-2);
     line-height: 1.25;
-    padding-right: var(--space-4);
+    padding-right: var(--space-5);
+    letter-spacing: -0.01em;
 }
 .tb-link-sub {
     font-family: var(--type-mono);
-    font-size: 0.78em;
+    font-size: 11px;
     color: var(--ink-mute);
     letter-spacing: 0.04em;
 }
 
-/* ── Plot panel (gr.Plot wrapper) ───────────────────────────── */
+/* ── Figure cards (static PNG embeds) ───────────────────────── */
+.tb-figure {
+    margin: var(--space-4) 0 var(--space-5);
+    border: 1px solid var(--rule);
+    background: var(--bg-elev-1);
+    overflow: hidden;
+    transition: border-color var(--dur-fast) var(--ease-out);
+}
+.tb-figure:hover { border-color: var(--rule-strong); }
+.tb-figure-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--rule);
+    background: var(--bg);
+}
+.tb-figure-title {
+    font-family: var(--type-mono);
+    font-size: 11px;
+    color: var(--ink-mute);
+    text-transform: uppercase;
+    letter-spacing: 0.22em;
+}
+.tb-figure-meta {
+    font-family: var(--type-mono);
+    font-size: 10px;
+    color: var(--ink-faint);
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+}
+.tb-figure-body {
+    padding: var(--space-3);
+    background: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.tb-figure-body.is-dark { background: var(--bg-elev-1); }
+.tb-figure-body img {
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+    display: block;
+}
+.tb-figure-caption {
+    padding: var(--space-3) var(--space-4);
+    border-top: 1px solid var(--rule);
+    font-family: var(--type-body);
+    font-size: 0.88em;
+    color: var(--ink-mute);
+    line-height: 1.55;
+    background: var(--bg);
+}
+.tb-figure-caption strong { color: var(--ink); font-weight: 500; }
+
+/* Grid of two figures side-by-side at wide viewports */
+.tb-figure-row {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-4);
+    margin: var(--space-4) 0;
+}
+@media (min-width: 980px) {
+    .tb-figure-row { grid-template-columns: 1fr 1fr; }
+}
+
+/* ── Plot panel (gr.Plot wrapper) — kept for any remaining Plotly */
 .gradio-container .plot-container,
 .gradio-container [data-testid="plot"] {
     background: var(--bg-elev-1) !important;
     border: 1px solid var(--rule) !important;
-    border-radius: var(--r-md) !important;
+    border-radius: 0 !important;
     padding: 4px !important;
     margin: var(--space-3) 0 !important;
-    box-shadow: var(--shadow-card) !important;
     transition: border-color var(--dur-fast) var(--ease-out) !important;
 }
 .gradio-container .plot-container:hover,
 .gradio-container [data-testid="plot"]:hover {
     border-color: var(--rule-strong) !important;
 }
-/* Plotly mode-bar (toolbar) styling */
-.gradio-container .modebar {
-    background: transparent !important;
-}
+.gradio-container .modebar { background: transparent !important; }
 .gradio-container .modebar-btn path {
     fill: var(--ink-mute) !important;
     transition: fill var(--dur-fast) var(--ease-out);
@@ -440,43 +601,41 @@ footer { display: none !important; }
     fill: var(--accent) !important;
 }
 
-/* ── Tabs ───────────────────────────────────────────────────── */
+/* ── Tabs — RAETH-style mono uppercase nav ──────────────────── */
 .gradio-container .tab-nav {
     border-bottom: 1px solid var(--rule) !important;
     gap: 0 !important;
     padding: 0 !important;
-    margin-bottom: var(--space-5) !important;
+    margin-bottom: var(--space-6) !important;
+    overflow-x: auto;
 }
 .gradio-container .tab-nav button {
     background: transparent !important;
-    color: var(--ink-mute) !important;
+    color: var(--ink-faint) !important;
     border: none !important;
-    border-bottom: 2px solid transparent !important;
+    border-bottom: 1px solid transparent !important;
     padding: var(--space-3) var(--space-4) !important;
-    font-family: var(--type-body) !important;
-    font-weight: 500 !important;
-    font-size: 0.95em !important;
-    letter-spacing: 0.01em !important;
+    font-family: var(--type-mono) !important;
+    font-weight: 400 !important;
+    font-size: 11px !important;
+    letter-spacing: 0.22em !important;
+    text-transform: uppercase !important;
     transition: color var(--dur-fast) var(--ease-out),
                 border-color var(--dur-fast) var(--ease-out) !important;
+    white-space: nowrap !important;
 }
-.gradio-container .tab-nav button:hover {
-    color: var(--ink) !important;
-}
+.gradio-container .tab-nav button:hover { color: var(--ink) !important; }
 .gradio-container .tab-nav button.selected {
     color: var(--ink) !important;
     border-bottom-color: var(--accent) !important;
 }
 
 /* ── Tab content reveal cascade ──────────���──────────────────── */
-/* Use a visible-by-default starting state; the animation does an
-   additive 3px slide-in. Even if the cascade never fires (DOM class
-   mismatch under Gradio version drift), content stays readable. */
 .tabitem > *,
 [class*="tab-content"] > *,
 [class*="tabs"] [class*="tabitem"] > * {
     animation: tb-reveal var(--dur-med) var(--ease-out) both;
-    animation-delay: calc(var(--i, 0) * 30ms);
+    animation-delay: calc(var(--i, 0) * 40ms);
 }
 .tabitem > *:nth-child(1)  { --i: 1;  }
 .tabitem > *:nth-child(2)  { --i: 2;  }
@@ -488,7 +647,7 @@ footer { display: none !important; }
 .tabitem > *:nth-child(8)  { --i: 8;  }
 .tabitem > *:nth-child(n+9) { --i: 9; }
 @keyframes tb-reveal {
-    from { opacity: 0; transform: translateY(3px); }
+    from { opacity: 0; transform: translateY(6px); }
     to   { opacity: 1; transform: translateY(0); }
 }
 
@@ -496,38 +655,33 @@ footer { display: none !important; }
 .tb-metric-row {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: var(--space-4);
+    gap: 1px;
+    background: var(--rule);
+    border: 1px solid var(--rule);
     margin: var(--space-5) 0;
 }
 .tb-metric {
-    background: var(--bg-elev-1);
-    border: 1px solid var(--rule);
-    border-radius: var(--r-md);
-    padding: var(--space-4) var(--space-4);
-    transition: transform var(--dur-fast) var(--ease-out),
-                border-color var(--dur-fast) var(--ease-out),
-                box-shadow var(--dur-fast) var(--ease-out);
-}
-.tb-metric:hover {
-    transform: translateY(-2px);
-    border-color: var(--accent-lo);
-    box-shadow: 0 0 0 1px var(--accent-glow);
+    background: var(--bg);
+    padding: var(--space-5) var(--space-4);
+    transition: background-color var(--dur-fast) var(--ease-out);
 }
+.tb-metric:hover { background: rgba(255, 255, 255, 0.02); }
 .tb-metric .tb-metric-label {
     font-family: var(--type-mono);
-    font-size: 0.72em;
-    color: var(--ink-mute);
+    font-size: 10px;
+    color: var(--ink-faint);
     text-transform: uppercase;
-    letter-spacing: 0.08em;
-    margin-bottom: var(--space-2);
+    letter-spacing: 0.24em;
+    margin-bottom: var(--space-3);
 }
 .tb-metric .tb-metric-value {
-    font-family: var(--type-mono);
+    font-family: var(--type-display);
     font-feature-settings: "tnum";
-    font-size: 1.85em;
+    font-size: 2.4em;
     font-weight: 500;
     color: var(--ink);
-    letter-spacing: -0.01em;
+    letter-spacing: -0.02em;
+    line-height: 1;
 }
 .tb-metric .tb-metric-delta {
     font-family: var(--type-mono);
@@ -546,15 +700,12 @@ footer { display: none !important; }
 }
 
 /* ── TimelineRail ───────────────────────────────────────────── */
-.tb-timeline {
-    margin: var(--space-5) 0 var(--space-6);
-}
+.tb-timeline { margin: var(--space-5) 0 var(--space-6); }
 .tb-timeline-rail {
     display: grid;
     grid-template-columns: 60fr 12fr 120fr 12fr 252fr;
-    gap: 6px;
-    height: 32px;
-    border-radius: var(--r-sm);
+    gap: 4px;
+    height: 36px;
     overflow: hidden;
     border: 1px solid var(--rule);
 }
@@ -563,39 +714,35 @@ footer { display: none !important; }
     align-items: center;
     justify-content: center;
     font-family: var(--type-mono);
-    font-size: 0.72em;
-    letter-spacing: 0.06em;
+    font-size: 10px;
+    letter-spacing: 0.18em;
     text-transform: uppercase;
 }
-.tb-timeline-seg.t1 { background: rgba(34, 211, 238, 0.30); color: var(--ink); }
-.tb-timeline-seg.t2 { background: rgba(34, 211, 238, 0.50); color: var(--bg); }
+.tb-timeline-seg.t1 { background: rgba(34, 211, 238, 0.20); color: var(--ink); }
+.tb-timeline-seg.t2 { background: rgba(34, 211, 238, 0.40); color: var(--bg); }
 .tb-timeline-seg.t3 { background: var(--accent); color: var(--bg); }
 .tb-timeline-seg.embargo {
     background: repeating-linear-gradient(
-        45deg,
-        var(--bg-elev-2),
-        var(--bg-elev-2) 4px,
-        var(--rule) 4px,
-        var(--rule) 8px
-    );
+        45deg, var(--bg-elev-2), var(--bg-elev-2) 4px,
+        var(--rule) 4px, var(--rule) 8px);
     color: var(--ink-mute);
 }
 .tb-timeline-axis {
     display: grid;
     grid-template-columns: 60fr 12fr 120fr 12fr 252fr;
-    gap: 6px;
+    gap: 4px;
     margin-top: var(--space-2);
     font-family: var(--type-mono);
-    font-size: 0.72em;
-    color: var(--ink-mute);
+    font-size: 10px;
+    color: var(--ink-faint);
+    letter-spacing: 0.04em;
 }
 .tb-timeline-axis div { text-align: center; }
 
-/* ── RewardBar ──────────────────────────────────────────────── */
+/* ── RewardBar (live demo) ──────────────────────────────────── */
 .tb-reward-table {
     background: var(--bg-elev-1);
     border: 1px solid var(--rule);
-    border-radius: var(--r-md);
     padding: var(--space-4);
     margin: var(--space-4) 0;
 }
@@ -610,13 +757,12 @@ footer { display: none !important; }
 .tb-reward-row:last-child { border-bottom: none; }
 .tb-reward-name {
     font-family: var(--type-mono);
-    font-size: 0.88em;
+    font-size: 0.86em;
     color: var(--ink);
 }
 .tb-reward-bar-track {
     background: var(--bg-elev-2);
-    border-radius: 2px;
-    height: 8px;
+    height: 6px;
     position: relative;
     overflow: hidden;
 }
@@ -629,10 +775,7 @@ footer { display: none !important; }
     animation-delay: 200ms;
     transform-origin: left center;
 }
-.tb-reward-bar-fill.neg {
-    background: var(--short);
-    transform-origin: right center;
-}
+.tb-reward-bar-fill.neg { background: var(--short); transform-origin: right center; }
 .tb-reward-bar-fill.pos { background: var(--long); }
 .tb-reward-bar-fill.accent { background: var(--accent); }
 @keyframes tb-bar-grow {
@@ -642,22 +785,21 @@ footer { display: none !important; }
 .tb-reward-value {
     font-family: var(--type-mono);
     font-feature-settings: "tnum";
-    font-size: 0.92em;
+    font-size: 0.9em;
     text-align: right;
     color: var(--ink);
 }
 .tb-reward-bound {
     font-family: var(--type-mono);
-    font-size: 0.78em;
-    color: var(--ink-mute);
+    font-size: 0.76em;
+    color: var(--ink-faint);
     text-align: right;
 }
 
-/* ── SchemaBlock ────────────────────────────────────────────── */
+/* ── SchemaBlock (collapsible) ──────────────────────────────── */
 .tb-schema {
     background: var(--bg-elev-1);
     border: 1px solid var(--rule);
-    border-radius: var(--r-md);
     margin: var(--space-3) 0;
 }
 .tb-schema summary {
@@ -665,140 +807,98 @@ footer { display: none !important; }
     cursor: pointer;
     padding: var(--space-3) var(--space-4);
     font-family: var(--type-mono);
-    font-size: 0.92em;
+    font-size: 0.88em;
     color: var(--ink);
-    border-radius: var(--r-md);
     user-select: none;
+    letter-spacing: 0.02em;
 }
 .tb-schema summary::-webkit-details-marker { display: none; }
 .tb-schema summary::before {
-    content: "▸  ";
+    content: "\25B8  ";
     color: var(--accent);
     transition: transform var(--dur-fast) var(--ease-out);
     display: inline-block;
 }
-.tb-schema[open] summary::before {
-    content: "▾  ";
-}
-.tb-schema summary:hover { background: var(--bg-elev-2); }
+.tb-schema[open] summary::before { content: "\25BE  "; }
+.tb-schema summary:hover { background: rgba(255, 255, 255, 0.02); }
 .tb-schema pre {
     margin: 0;
-    padding: var(--space-4);
-    background: var(--bg);
+    padding: var(--space-4) !important;
+    background: var(--bg) !important;
     border-top: 1px solid var(--rule);
     overflow-x: auto;
-    font-family: var(--type-mono);
-    font-size: 0.82em;
+    font-family: var(--type-mono) !important;
+    font-size: 0.8em;
     color: var(--ink);
-    line-height: 1.55;
+    line-height: 1.6;
 }
 
 /* ── ActionPad (Demo) ───────────────────────────────────────── */
 .tb-action-pad {
     background: var(--bg-elev-1);
     border: 1px solid var(--rule);
-    border-radius: var(--r-md);
     padding: var(--space-4);
     margin: var(--space-3) 0;
 }
 .tb-action-pad h4 {
     font-family: var(--type-display);
     font-weight: 500;
-    font-size: 1.1em;
+    font-size: 1.2em;
     margin: 0 0 var(--space-3);
     color: var(--ink);
 }
 
-/* ── BaselineRibbon ─────────────────────────────────────────── */
-.tb-ribbon {
-    background: var(--bg-elev-1);
-    border: 1px solid var(--rule);
-    border-radius: var(--r-md);
-    padding: var(--space-5);
-    margin: var(--space-4) 0;
-}
-.tb-ribbon svg {
-    width: 100%;
-    height: 280px;
-}
-.tb-ribbon .tb-curve {
-    fill: none;
-    stroke-width: 2;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-.tb-ribbon .tb-curve.cash         { stroke: var(--ink-mute); stroke-dasharray: 4 4; }
-.tb-ribbon .tb-curve.equal_weight { stroke: var(--accent); }
-.tb-ribbon .tb-curve.kelly        { stroke: var(--long); }
-.tb-ribbon .tb-curve.trained      { stroke: var(--accent-hi); stroke-width: 3; }
-.tb-ribbon .tb-axis {
-    stroke: var(--rule);
-    stroke-width: 1;
-}
-.tb-ribbon .tb-axis-label {
-    font-family: var(--type-mono);
-    font-size: 11px;
-    fill: var(--ink-mute);
-}
-
-/* ── Editorial blocks ───────────────────────────────────────── */
-.tb-section-eyebrow {
-    font-family: var(--type-mono);
-    font-size: 0.72em;
-    color: var(--accent);
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
-    margin-bottom: var(--space-2);
-    margin-top: var(--space-6);
-}
-.tb-section-title {
-    font-family: var(--type-display);
-    font-weight: 500;
-    font-size: clamp(1.6em, 2.5vw, 2.0em);
-    line-height: 1.15;
-    color: var(--ink);
-    letter-spacing: -0.01em;
-    margin: 0 0 var(--space-3);
-    font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 1;
-}
-.tb-section-lead {
-    font-family: var(--type-body);
-    font-size: 1.02em;
-    line-height: 1.65;
-    color: var(--ink);
-    max-width: 62ch;
-    margin: 0 0 var(--space-3);
+/* ── Editorial section heading ──────────────────────────────── */
+.tb-section-head {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-3);
+    margin: var(--space-7) 0 var(--space-4);
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--rule);
 }
-.tb-section-lead-mute {
-    color: var(--ink-mute);
+@media (min-width: 760px) {
+    .tb-section-head { grid-template-columns: 1fr 1fr; }
 }
+.tb-section-head .tb-section-eyebrow { margin: 0; }
 
 /* ── Tables ─────────────────────────────────────────────────── */
 .tb-table {
     width: 100%;
     border-collapse: collapse;
-    margin: var(--space-3) 0;
+    margin: var(--space-3) 0 var(--space-5);
     font-family: var(--type-body);
     font-size: 0.92em;
+    border: 1px solid var(--rule);
 }
 .tb-table th, .tb-table td {
-    padding: var(--space-2) var(--space-3);
+    padding: var(--space-3) var(--space-4);
     text-align: left;
     border-bottom: 1px solid var(--rule);
     vertical-align: top;
 }
+.tb-table tr:last-child td { border-bottom: none; }
 .tb-table th {
     font-family: var(--type-mono);
-    font-size: 0.78em;
-    color: var(--ink-mute);
+    font-size: 10px;
+    color: var(--ink-faint);
     text-transform: uppercase;
-    letter-spacing: 0.06em;
+    letter-spacing: 0.22em;
     font-weight: 500;
+    background: var(--bg-elev-1);
 }
+.tb-table tr:hover td { background: rgba(255, 255, 255, 0.02); }
 .tb-table td.mono, .tb-table th.mono {
     font-family: var(--type-mono);
     font-feature-settings: "tnum";
 }
+.tb-table td code {
+    background: rgba(255, 255, 255, 0.04) !important;
+    border: 1px solid var(--rule) !important;
+    color: var(--ink) !important;
+    padding: 1px 5px !important;
+    font-size: 0.92em;
+}
 
 /* ── Verifier strip ─────────────────────────────────────────── */
 .tb-verifier-strip {
@@ -807,18 +907,17 @@ footer { display: none !important; }
     gap: var(--space-2);
     background: var(--bg-elev-1);
     border: 1px solid var(--rule);
-    border-radius: var(--r-md);
     padding: var(--space-3) var(--space-4);
     margin: var(--space-4) 0;
     font-family: var(--type-mono);
-    font-size: 0.85em;
+    font-size: 0.82em;
 }
 .tb-verifier-strip .tb-vcheck {
-    padding: 2px var(--space-2);
-    border-radius: 2px;
-    background: var(--bg-elev-2);
+    padding: 4px var(--space-2);
+    background: var(--bg);
     color: var(--long);
-    border: 1px solid var(--long-mute);
+    border: 1px solid rgba(132, 204, 22, 0.30);
+    letter-spacing: 0.02em;
 }
 .tb-verifier-strip .tb-vcheck.fail {
     color: var(--short);
@@ -836,11 +935,10 @@ footer { display: none !important; }
     font-family: var(--type-mono) !important;
     font-feature-settings: "tnum";
     border: 1px solid var(--rule);
-    border-radius: var(--r-sm);
 }
 .gradio-container pre {
     padding: var(--space-3) var(--space-4) !important;
-    line-height: 1.6;
+    line-height: 1.65;
 }
 .gradio-container :not(pre) > code {
     padding: 1px 5px !important;
@@ -853,20 +951,27 @@ footer { display: none !important; }
 .gradio-container .md {
     color: var(--ink);
     font-family: var(--type-body);
+    line-height: 1.7;
 }
+.gradio-container .prose p,
+.gradio-container .markdown p { color: var(--ink-mute); }
 .gradio-container h2 {
     font-family: var(--type-display) !important;
     font-weight: 500;
     font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 1;
     color: var(--ink);
-    letter-spacing: -0.005em;
+    letter-spacing: -0.015em;
     margin: var(--space-6) 0 var(--space-3);
+    font-size: clamp(1.6em, 2.5vw, 2.2em);
+    line-height: 1.15;
 }
 .gradio-container h3 {
     font-family: var(--type-display) !important;
     font-weight: 500;
     color: var(--ink);
     margin: var(--space-5) 0 var(--space-2);
+    letter-spacing: -0.01em;
+    font-size: 1.3em;
 }
 .gradio-container blockquote {
     border-left: 2px solid var(--accent);
@@ -878,39 +983,74 @@ footer { display: none !important; }
     font-family: var(--type-display);
 }
 
-/* ── Buttons (Gradio overrides) ─────────────────────────────── */
+/* ── Buttons ────────────────────────────────────────────────── */
 .gradio-container button.primary,
 .gradio-container button[data-testid].primary {
-    background: var(--accent) !important;
+    background: var(--ink) !important;
     color: var(--bg) !important;
-    border: none !important;
+    border: 1px solid var(--ink) !important;
     font-family: var(--type-mono) !important;
-    font-size: 0.86em !important;
-    letter-spacing: 0.04em !important;
+    font-size: 11px !important;
+    letter-spacing: 0.22em !important;
     text-transform: uppercase !important;
-    border-radius: var(--r-sm) !important;
-    transition: background var(--dur-fast) var(--ease-out) !important;
+    border-radius: 0 !important;
+    padding: var(--space-3) var(--space-4) !important;
+    transition: background var(--dur-fast) var(--ease-out),
+                color var(--dur-fast) var(--ease-out) !important;
 }
 .gradio-container button.primary:hover,
 .gradio-container button[data-testid].primary:hover {
-    background: var(--accent-hi) !important;
+    background: var(--accent) !important;
+    border-color: var(--accent) !important;
 }
 .gradio-container button.secondary,
 .gradio-container button[data-testid].secondary {
-    background: var(--bg-elev-2) !important;
+    background: transparent !important;
     color: var(--ink) !important;
     border: 1px solid var(--rule-strong) !important;
     font-family: var(--type-mono) !important;
-    font-size: 0.86em !important;
-    letter-spacing: 0.04em !important;
-    border-radius: var(--r-sm) !important;
+    font-size: 11px !important;
+    letter-spacing: 0.22em !important;
+    text-transform: uppercase !important;
+    border-radius: 0 !important;
+    padding: var(--space-3) var(--space-4) !important;
+}
+.gradio-container button.secondary:hover {
+    border-color: var(--ink) !important;
+    background: rgba(255, 255, 255, 0.04) !important;
+}
+
+/* ── Inputs ─────────────────────────────────────────────────── */
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select {
+    background: var(--bg-elev-1) !important;
+    color: var(--ink) !important;
+    border: 1px solid var(--rule) !important;
+    border-radius: 0 !important;
+    font-family: var(--type-mono) !important;
+}
+.gradio-container input:focus,
+.gradio-container textarea:focus {
+    border-color: var(--accent) !important;
+    outline: none !important;
+}
+.gradio-container label,
+.gradio-container .label {
+    color: var(--ink-mute) !important;
+    font-family: var(--type-mono) !important;
+    font-size: 10px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.22em !important;
 }
 
 /* ── Mobile (390 wide) ──────────────────────────────────────── */
 @media (max-width: 600px) {
-    .main, .contain { padding: 0 var(--space-3) var(--space-5) !important; }
-    .tb-header h1 { font-size: 2.2em; }
-    .tb-header { padding: var(--space-5) var(--space-2) var(--space-4); }
+    .main, .contain { padding: 0 var(--space-3) var(--space-6) !important; }
+    .tb-header { padding: var(--space-6) 0 var(--space-5); }
+    .tb-header h1 { font-size: 2.4rem; }
+    .tb-header-meta { gap: 8px; font-size: 10px; letter-spacing: 0.22em; }
+    .tb-hero { grid-template-columns: 1fr; gap: var(--space-4); }
     .tb-reward-row {
         grid-template-columns: 1fr 1fr;
         grid-template-areas:
@@ -926,3 +1066,561 @@ footer { display: none !important; }
         grid-template-columns: 60fr 0 120fr 0 252fr;
     }
 }
+
+
+/* ============================================================
+   Landing surface (raeth-style cinematic scroll)
+   Sticky nav + hero + numbered sections + final CTA + reveal motion.
+   ============================================================ */
+
+/* ── Sticky frosted nav ─────────────────────────────────────── */
+.tb-nav {
+    position: sticky;
+    top: 0;
+    z-index: 60;
+    background: rgba(0, 0, 0, 0.62);
+    -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(160%);
+    backdrop-filter: blur(var(--blur-glass)) saturate(160%);
+    border-bottom: 1px solid var(--rule);
+    padding: 14px var(--space-4);
+    margin: 0 calc(var(--space-4) * -1) var(--space-5);
+}
+.tb-nav-row {
+    max-width: 1280px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: var(--space-5);
+}
+.tb-nav-lockup {
+    font-family: var(--type-mono);
+    font-size: 11px;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--ink);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+}
+.tb-nav-lockup::before {
+    content: "";
+    width: 8px;
+    height: 8px;
+    background: var(--accent);
+    box-shadow: 0 0 12px var(--accent-lo);
+    flex-shrink: 0;
+}
+.tb-nav-lockup .tb-nav-lockup-mute {
+    color: var(--ink-faint);
+    margin-left: 6px;
+}
+.tb-nav-anchors {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    gap: var(--space-4);
+    min-width: 0;
+}
+@media (min-width: 980px) {
+    .tb-nav-anchors { display: flex; }
+}
+.tb-nav-anchor {
+    font-family: var(--type-mono);
+    font-size: 11px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--ink-mute);
+    text-decoration: none;
+    transition: color var(--dur-fast) var(--ease-out);
+    white-space: nowrap;
+}
+.tb-nav-anchor .tb-nav-anchor-num {
+    color: var(--ink-faint);
+    margin-right: 6px;
+    transition: color var(--dur-fast) var(--ease-out);
+}
+.tb-nav-anchor:hover { color: var(--ink); }
+.tb-nav-anchor:hover .tb-nav-anchor-num { color: var(--accent); }
+.tb-nav-cta {
+    font-family: var(--type-mono);
+    font-size: 11px;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--accent);
+    border: 1px solid var(--accent-lo);
+    padding: 8px 14px;
+    text-decoration: none;
+    transition: background var(--dur-fast) var(--ease-out),
+                color var(--dur-fast) var(--ease-out),
+                border-color var(--dur-fast) var(--ease-out);
+    white-space: nowrap;
+}
+.tb-nav-cta:hover {
+    color: var(--bg);
+    background: var(--accent);
+    border-color: var(--accent);
+}
+
+/* ── Landing hero ───────────────────────────────────────────── */
+.tb-landing {
+    min-height: 88vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: var(--space-7) 0 var(--space-6);
+    position: relative;
+    isolation: isolate;
+}
+.tb-landing-eyebrow {
+    font-family: var(--type-mono);
+    font-size: 11px;
+    color: var(--ink-faint);
+    text-transform: uppercase;
+    letter-spacing: 0.32em;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    align-items: center;
+    margin-bottom: var(--space-5);
+}
+.tb-landing-eyebrow .is-accent { color: var(--accent); }
+.tb-landing-eyebrow .tb-dot {
+    color: var(--ink-ghost);
+    user-select: none;
+}
+.tb-landing-title {
+    font-family: var(--type-display);
+    font-weight: 500;
+    font-size: clamp(3.2rem, 9vw, 7.2rem);
+    line-height: 0.94;
+    letter-spacing: -0.035em;
+    color: var(--ink);
+    margin: 0;
+    max-width: 16ch;
+    font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
+}
+.tb-landing-title .tb-faded { color: var(--ink-ghost); font-weight: 500; }
+.tb-landing-title .tb-accent {
+    color: var(--accent);
+    font-style: italic;
+    font-weight: 500;
+}
+.tb-landing-sub {
+    font-family: var(--type-body);
+    font-size: clamp(1rem, 1.4vw, 1.18em);
+    line-height: 1.55;
+    color: var(--ink-mute);
+    max-width: 60ch;
+    margin: var(--space-5) 0 0;
+}
+.tb-landing-sub em { color: var(--ink); font-style: italic; }
+.tb-landing-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-3);
+    margin-top: var(--space-5);
+}
+.tb-cta {
+    font-family: var(--type-mono);
+    font-size: 11px;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    padding: 14px 22px;
+    text-decoration: none;
+    transition: background var(--dur-fast) var(--ease-out),
+                color var(--dur-fast) var(--ease-out),
+                border-color var(--dur-fast) var(--ease-out),
+                transform var(--dur-fast) var(--ease-out);
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+}
+.tb-cta-primary {
+    background: var(--ink);
+    color: var(--bg);
+    border: 1px solid var(--ink);
+}
+.tb-cta-primary:hover {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: var(--bg);
+}
+.tb-cta-ghost {
+    background: transparent;
+    color: var(--ink);
+    border: 1px solid var(--rule-strong);
+}
+.tb-cta-ghost:hover {
+    border-color: var(--ink);
+    background: rgba(255, 255, 255, 0.04);
+}
+.tb-cta .tb-cta-arrow {
+    font-family: var(--type-mono);
+    transition: transform var(--dur-fast) var(--ease-out);
+}
+.tb-cta:hover .tb-cta-arrow { transform: translateX(3px); }
+
+/* ── Live metrics strip (hero footer) ───────────────────────── */
+.tb-metrics-strip {
+    margin-top: var(--space-7);
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--rule);
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1px;
+    background: var(--rule);
+}
+@media (min-width: 720px) {
+    .tb-metrics-strip { grid-template-columns: repeat(3, 1fr); }
+}
+@media (min-width: 1080px) {
+    .tb-metrics-strip { grid-template-columns: repeat(6, 1fr); }
+}
+.tb-metrics-cell {
+    background: var(--bg);
+    padding: var(--space-4) var(--space-3);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.tb-metrics-key {
+    font-family: var(--type-mono);
+    font-size: 10px;
+    color: var(--ink-faint);
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+}
+.tb-metrics-val {
+    font-family: var(--type-display);
+    font-feature-settings: "tnum";
+    font-weight: 500;
+    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
+    color: var(--ink);
+    letter-spacing: -0.02em;
+    line-height: 1;
+    font-variation-settings: "opsz" 96;
+}
+.tb-metrics-val.is-accent { color: var(--accent); }
+.tb-metrics-foot {
+    font-family: var(--type-mono);
+    font-size: 10px;
+    color: var(--ink-mute);
+    letter-spacing: 0.04em;
+}
+
+/* ── Numbered section (raeth pattern) ───────────────────────── */
+.tb-numbered-section {
+    border-top: 1px solid var(--rule);
+    padding: var(--space-7) 0;
+    scroll-margin-top: 96px;
+    position: relative;
+}
+.tb-numbered-head {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-3);
+    margin-bottom: var(--space-5);
+}
+@media (min-width: 760px) {
+    .tb-numbered-head {
+        grid-template-columns: 96px 1fr;
+        gap: var(--space-5);
+        align-items: baseline;
+    }
+}
+.tb-numbered-tag {
+    font-family: var(--type-mono);
+    font-size: 11px;
+    color: var(--ink-faint);
+    letter-spacing: 0.28em;
+    text-transform: uppercase;
+}
+.tb-numbered-tag .is-accent { color: var(--accent); }
+.tb-numbered-title {
+    font-family: var(--type-display);
+    font-weight: 500;
+    font-size: clamp(2rem, 4.6vw, 3.4rem);
+    line-height: 1.04;
+    letter-spacing: -0.028em;
+    color: var(--ink);
+    margin: 0;
+    max-width: 24ch;
+    font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 1;
+}
+.tb-numbered-title .tb-faded { color: var(--ink-ghost); }
+.tb-numbered-title .tb-accent {
+    color: var(--accent);
+    font-style: italic;
+}
+.tb-numbered-sub {
+    font-family: var(--type-body);
+    font-size: 1.05em;
+    line-height: 1.7;
+    color: var(--ink-mute);
+    margin: var(--space-3) 0 0;
+    max-width: 60ch;
+}
+.tb-numbered-sub em { color: var(--ink); font-style: italic; }
+.tb-numbered-sub code {
+    color: var(--accent-hi);
+    background: rgba(34, 211, 238, 0.06) !important;
+    padding: 1px 5px !important;
+    border: 1px solid var(--accent-lo) !important;
+    font-size: 0.94em;
+}
+
+/* Two-column body (label rail + prose) inside a numbered section */
+.tb-numbered-body {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-5);
+}
+@media (min-width: 880px) {
+    .tb-numbered-body {
+        grid-template-columns: 96px 1fr;
+        gap: var(--space-5);
+    }
+}
+.tb-numbered-rail {
+    font-family: var(--type-mono);
+    font-size: 10px;
+    color: var(--ink-faint);
+    letter-spacing: 0.24em;
+    text-transform: uppercase;
+}
+.tb-numbered-rail .is-accent { color: var(--accent); }
+
+/* ── Defense list (single-row hairline rows) ────────────────── */
+.tb-defense-list {
+    margin: var(--space-3) 0 0;
+    border-top: 1px solid var(--rule);
+}
+.tb-defense-row {
+    display: grid;
+    grid-template-columns: 64px 1fr;
+    gap: var(--space-4);
+    align-items: baseline;
+    padding: var(--space-4) 0;
+    border-bottom: 1px solid var(--rule);
+    transition: background var(--dur-fast) var(--ease-out);
+}
+.tb-defense-row:hover { background: rgba(255, 255, 255, 0.012); }
+.tb-defense-num {
+    font-family: var(--type-mono);
+    font-size: 11px;
+    color: var(--accent);
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+}
+.tb-defense-text {
+    font-family: var(--type-body);
+    font-size: 1.0em;
+    color: var(--ink);
+    line-height: 1.6;
+}
+.tb-defense-text strong {
+    color: var(--ink);
+    font-weight: 500;
+}
+.tb-defense-text .tb-defense-body {
+    color: var(--ink-mute);
+    font-size: 0.94em;
+    margin-top: 4px;
+    line-height: 1.55;
+    display: block;
+}
+.tb-defense-text code {
+    color: var(--accent-hi);
+    background: rgba(34, 211, 238, 0.06) !important;
+    padding: 1px 5px !important;
+    border: 1px solid var(--accent-lo) !important;
+    font-size: 0.92em;
+}
+
+/* ── Final CTA ──────────────────────────────────────────────── */
+.tb-final-cta {
+    border-top: 1px solid var(--rule);
+    padding: var(--space-8) 0 var(--space-7);
+    text-align: center;
+    margin-top: var(--space-6);
+}
+.tb-final-cta-title {
+    font-family: var(--type-display);
+    font-weight: 500;
+    font-size: clamp(2rem, 5.6vw, 4.2rem);
+    line-height: 1.05;
+    letter-spacing: -0.028em;
+    color: var(--ink);
+    margin: 0 auto;
+    max-width: 22ch;
+    font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
+}
+.tb-final-cta-title .tb-faded { color: var(--ink-ghost); }
+.tb-final-cta-title .tb-accent {
+    color: var(--accent);
+    font-style: italic;
+}
+.tb-final-cta-links {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-5);
+    margin-top: var(--space-5);
+}
+.tb-final-cta-link {
+    font-family: var(--type-mono);
+    font-size: 11px;
+    color: var(--ink-mute);
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    text-decoration: none;
+    transition: color var(--dur-fast) var(--ease-out);
+    border-bottom: 1px solid var(--rule);
+    padding-bottom: 4px;
+}
+.tb-final-cta-link:hover {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+
+/* ── Inline reward formula card variation (numbered teaser) ─── */
+.tb-formula-row {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-4);
+    align-items: start;
+}
+@media (min-width: 980px) {
+    .tb-formula-row { grid-template-columns: 1.4fr 1fr; }
+}
+
+/* ── Run-it block (curl reference) ──────────────────────────── */
+.tb-curl {
+    background: var(--bg-elev-1);
+    border: 1px solid var(--rule);
+    padding: var(--space-3) var(--space-4);
+    margin: var(--space-4) 0;
+    font-family: var(--type-mono);
+    font-size: 0.85em;
+    line-height: 1.7;
+    color: var(--ink);
+    overflow-x: auto;
+    position: relative;
+}
+.tb-curl::before {
+    content: "$ curl";
+    position: absolute;
+    top: 0;
+    right: var(--space-4);
+    background: var(--bg);
+    color: var(--accent);
+    font-family: var(--type-mono);
+    font-size: 10px;
+    letter-spacing: 0.22em;
+    padding: 4px var(--space-2);
+    border-left: 1px solid var(--rule);
+    border-right: 1px solid var(--rule);
+    border-bottom: 1px solid var(--rule);
+    text-transform: uppercase;
+}
+.tb-curl pre {
+    background: transparent !important;
+    border: none !important;
+    margin: 0 !important;
+    padding: var(--space-3) 0 0 !important;
+    color: var(--ink) !important;
+    font-family: var(--type-mono) !important;
+    line-height: 1.7;
+    overflow-x: auto;
+}
+.tb-curl .tb-curl-cmt { color: var(--ink-faint); }
+.tb-curl .tb-curl-flag { color: var(--accent-hi); }
+
+/* ── Reveal motion (IntersectionObserver-driven) ────────────── */
+.tb-reveal {
+    opacity: 0;
+    transform: translateY(28px);
+    filter: blur(8px);
+    transition:
+        opacity 720ms var(--motion-reveal),
+        transform 720ms var(--motion-reveal),
+        filter 720ms var(--motion-reveal);
+    transition-delay: var(--tb-reveal-delay, 0ms);
+    will-change: opacity, transform, filter;
+}
+.tb-reveal.is-in {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0);
+}
+
+/* ── Hero parallax target (the ambient halo) ────────────────── */
+.tb-landing-halo {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: -1;
+    background:
+        radial-gradient(ellipse 60% 40% at 50% 30%,
+            rgba(34, 211, 238, 0.10),
+            transparent 70%),
+        radial-gradient(ellipse 40% 30% at 80% 70%,
+            rgba(132, 204, 22, 0.045),
+            transparent 70%);
+    will-change: transform;
+}
+
+/* ── Numbered-section subnav link (jump to deep-dive tab) ───── */
+.tb-deepdive-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: var(--space-4);
+    font-family: var(--type-mono);
+    font-size: 11px;
+    color: var(--ink-mute);
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    text-decoration: none;
+    border-bottom: 1px solid var(--rule);
+    padding-bottom: 4px;
+    transition: color var(--dur-fast) var(--ease-out),
+                border-color var(--dur-fast) var(--ease-out);
+    cursor: pointer;
+}
+.tb-deepdive-link:hover {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+.tb-deepdive-link .tb-deepdive-arrow {
+    transition: transform var(--dur-fast) var(--ease-out);
+}
+.tb-deepdive-link:hover .tb-deepdive-arrow { transform: translate(3px, -3px); }
+
+/* ── Reduced-motion: disable all reveals + parallax ─────────── */
+@media (prefers-reduced-motion: reduce) {
+    .tb-reveal {
+        opacity: 1 !important;
+        transform: none !important;
+        filter: none !important;
+        transition: none !important;
+    }
+    .tb-landing-halo { transform: none !important; }
+}
+
+/* ── Mobile fine-tune (landing surface) ─────────────────────── */
+@media (max-width: 600px) {
+    .tb-nav { padding: 12px var(--space-3); margin: 0 calc(var(--space-3) * -1) var(--space-4); }
+    .tb-nav-row { gap: var(--space-3); }
+    .tb-landing { min-height: 78vh; padding: var(--space-6) 0 var(--space-5); }
+    .tb-landing-eyebrow { gap: 8px; font-size: 10px; letter-spacing: 0.24em; }
+    .tb-landing-title { font-size: clamp(2.4rem, 12vw, 3.6rem); }
+    .tb-landing-actions .tb-cta { padding: 12px 18px; font-size: 10px; }
+    .tb-metrics-strip { margin-top: var(--space-5); }
+    .tb-numbered-section { padding: var(--space-6) 0; }
+    .tb-numbered-title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
+    .tb-final-cta { padding: var(--space-6) 0 var(--space-5); }
+    .tb-defense-row { grid-template-columns: 48px 1fr; gap: var(--space-3); }
+}

server/ui/static/motion.js

@@ -0,0 +1,129 @@
+/* TradeBench landing motion.
+   Scroll-reveal (IntersectionObserver), hero halo parallax (rAF-throttled),
+   and anchor-to-tab navigation. ~2.5 KB unminified. No deps. */
+
+(() => {
+    const REVEAL_SEL = '.tb-reveal';
+    const HALO_SEL = '.tb-landing-halo';
+    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    // ── Scroll reveal ────────────────────────────────────────
+    let io = null;
+    if ('IntersectionObserver' in window) {
+        io = new IntersectionObserver((entries) => {
+            for (const e of entries) {
+                if (!e.isIntersecting) continue;
+                e.target.classList.add('is-in');
+                io.unobserve(e.target);
+            }
+        }, { threshold: 0.12, rootMargin: '0px 0px -6% 0px' });
+    }
+
+    function observeWithin(root) {
+        if (!io || !root || !root.querySelectorAll) return;
+        if (root.matches && root.matches(REVEAL_SEL) && !root.classList.contains('is-in')) {
+            io.observe(root);
+        }
+        for (const el of root.querySelectorAll(REVEAL_SEL)) {
+            if (!el.classList.contains('is-in')) io.observe(el);
+        }
+    }
+
+    // ── Hero halo parallax ───────────────────────────────────
+    function initParallax() {
+        if (reduceMotion) return;
+        const halo = document.querySelector(HALO_SEL);
+        if (!halo) return;
+        let raf = 0;
+        const tick = () => {
+            raf = 0;
+            const y = window.scrollY || window.pageYOffset || 0;
+            // Only commit transform while hero region is plausibly in view.
+            if (y > window.innerHeight * 1.4) return;
+            halo.style.transform = 'translate3d(0,' + (-y * 0.35).toFixed(2) + 'px,0)';
+        };
+        window.addEventListener('scroll', () => {
+            if (!raf) raf = requestAnimationFrame(tick);
+        }, { passive: true });
+        tick();
+    }
+
+    // ── Tab-jump (anchor with data-tb-tab="<label>") ─────────
+    function findTabButton(label) {
+        if (!label) return null;
+        const target = label.trim().toLowerCase();
+        const buttons = document.querySelectorAll(
+            '.tab-nav button, [role="tablist"] button, button[role="tab"]'
+        );
+        for (const b of buttons) {
+            const txt = (b.innerText || b.textContent || '').trim().toLowerCase();
+            if (txt === target) return b;
+        }
+        return null;
+    }
+
+    function smoothScrollTo(id) {
+        if (!id) return false;
+        const el = document.getElementById(id);
+        if (!el) return false;
+        el.scrollIntoView({
+            behavior: reduceMotion ? 'auto' : 'smooth',
+            block: 'start'
+        });
+        return true;
+    }
+
+    function attachClickHandlers() {
+        document.body.addEventListener('click', (ev) => {
+            const link = ev.target.closest('[data-tb-tab], a[href^="#"]');
+            if (!link) return;
+
+            const tab = link.getAttribute && link.getAttribute('data-tb-tab');
+            const href = link.getAttribute('href') || '';
+            const hashId = href.startsWith('#') ? href.slice(1) : '';
+
+            if (tab) {
+                ev.preventDefault();
+                const btn = findTabButton(tab);
+                if (btn && !btn.classList.contains('selected')) {
+                    btn.click();
+                }
+                if (hashId) {
+                    // Wait two frames for Gradio to mount the panel.
+                    requestAnimationFrame(() => {
+                        requestAnimationFrame(() => smoothScrollTo(hashId));
+                    });
+                }
+                return;
+            }
+
+            if (hashId) {
+                if (smoothScrollTo(hashId)) ev.preventDefault();
+            }
+        });
+    }
+
+    // ── Init ─────────────────────────────────────────────────
+    function init() {
+        observeWithin(document);
+        initParallax();
+        attachClickHandlers();
+
+        if ('MutationObserver' in window && io) {
+            const mo = new MutationObserver((muts) => {
+                for (const m of muts) {
+                    for (const n of m.addedNodes) {
+                        if (n.nodeType === 1) observeWithin(n);
+                    }
+                }
+            });
+            mo.observe(document.body, { childList: true, subtree: true });
+        }
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init, { once: true });
+    } else {
+        init();
+    }
+})();

server/ui/static/tokens.css

@@ -1,70 +1,78 @@
 /* TradeBench design tokens.
-   Charcoal canvas, electric-cyan protagonist, lime/amber as before/after pair. */
+   Pure-black editorial canvas. Mostly monochrome, with cyan as the lone
+   protagonist used very sparingly. Lime/amber as the before/after pair. */
 
 :root {
-    /* Surface */
-    --bg: #0A0E13;
-    --bg-elev-1: #11161D;
-    --bg-elev-2: #1A2029;
-    --bg-glass: rgba(17, 22, 29, 0.72);
+    /* Surface — pure black with two near-black elevations */
+    --bg: #000000;
+    --bg-elev-1: #0A0A0B;
+    --bg-elev-2: #131316;
+    --bg-glass: rgba(10, 10, 11, 0.55);
 
-    /* Type */
-    --ink: #E6E8EB;
-    --ink-mute: #7A8693;
-    --ink-faint: #4F5763;
+    /* Type — full white as protagonist; opacity ramp for hierarchy */
+    --ink: #FFFFFF;
+    --ink-mute: rgba(255, 255, 255, 0.66);
+    --ink-faint: rgba(255, 255, 255, 0.40);
+    --ink-ghost: rgba(255, 255, 255, 0.18);
 
-    /* Accent. Cyan is the protagonist used sparingly. */
+    /* Accent — cyan, used for italic accents and live indicators only */
     --accent: #22D3EE;
     --accent-hi: #67E8F9;
-    --accent-lo: #0E7490;
-    --accent-glow: rgba(34, 211, 238, 0.18);
+    --accent-lo: rgba(34, 211, 238, 0.20);
+    --accent-glow: rgba(34, 211, 238, 0.08);
 
-    /* "Before" / "After" pair used in plots and cards. */
-    --before: #F59E0B;        /* amber: baseline / pre-reflection */
+    /* Before / after pair (used in plots only) */
+    --before: #F59E0B;
     --before-soft: rgba(245, 158, 11, 0.14);
-    --after: #84CC16;         /* lime: converged / post-reflection */
+    --after: #84CC16;
     --after-soft: rgba(132, 204, 22, 0.14);
-    --warn: #E11D48;          /* crimson: trough / regression */
+    --warn: #E11D48;
 
     /* PnL semantics, used only on numeric pills. */
-    --long: #5BC97D;
-    --long-mute: #3F8B58;
-    --short: #E37D78;
-    --short-mute: #9F4F4B;
+    --long: #84CC16;
+    --long-mute: #5F8A1F;
+    --short: #F87171;
+    --short-mute: #B14848;
 
-    /* Structure */
-    --rule: #1F2731;
-    --rule-strong: #2A3340;
-    --grid: rgba(34, 211, 238, 0.04);
+    /* Structure — hairlines, all white-with-alpha */
+    --rule: rgba(255, 255, 255, 0.10);
+    --rule-strong: rgba(255, 255, 255, 0.20);
+    --rule-soft: rgba(255, 255, 255, 0.06);
+    --grid: rgba(255, 255, 255, 0.025);
 
     /* Type ramp */
-    --type-display: "Fraunces", "EB Garamond", Georgia, serif;
-    --type-body: "IBM Plex Sans", "Plex Sans", system-ui, sans-serif;
-    --type-mono: "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace;
+    --type-display: "Fraunces", "Cormorant Garamond", "EB Garamond", Georgia, serif;
+    --type-body: "DM Sans", "IBM Plex Sans", "Plex Sans", system-ui, sans-serif;
+    --type-mono: "IBM Plex Mono", "JetBrains Mono", "SF Mono", "Menlo", monospace;
 
-    /* Spacing scale */
+    /* Spacing scale — more generous than terminal scale */
     --space-1: 4px;
     --space-2: 8px;
-    --space-3: 12px;
-    --space-4: 18px;
-    --space-5: 28px;
-    --space-6: 44px;
-    --space-7: 72px;
+    --space-3: 16px;
+    --space-4: 24px;
+    --space-5: 40px;
+    --space-6: 64px;
+    --space-7: 96px;
+    --space-8: 144px;
 
-    /* Radii */
-    --r-sm: 4px;
-    --r-md: 8px;
-    --r-lg: 14px;
+    /* Radii — sharp by default; slight round on cards */
+    --r-sm: 0;
+    --r-md: 0;
+    --r-lg: 0;
 
     /* Motion */
     --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-    --dur-fast: 150ms;
-    --dur-med: 240ms;
-    --dur-slow: 600ms;
+    --dur-fast: 200ms;
+    --dur-med: 500ms;
+    --dur-slow: 800ms;
 
     /* Shadows */
-    --shadow-card: 0 10px 30px -16px rgba(0, 0, 0, 0.65),
-                   0 1px 0 0 rgba(255, 255, 255, 0.02) inset;
-    --shadow-deep: 0 16px 60px -28px rgba(0, 0, 0, 0.85),
-                   0 2px 0 0 rgba(34, 211, 238, 0.06) inset;
+    --shadow-card: 0 12px 40px -20px rgba(0, 0, 0, 0.85);
+    --shadow-deep: 0 24px 80px -32px rgba(0, 0, 0, 0.9),
+                   0 1px 0 0 rgba(255, 255, 255, 0.04) inset;
+
+    /* Glass + reveal motion (landing) */
+    --blur-glass: 18px;
+    --motion-reveal: cubic-bezier(0.16, 1, 0.3, 1);
+    --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 }

server/ui/tabs/baselines.py

@@ -8,9 +8,10 @@ import gradio as gr
 
 _INTRO_HTML = """
 <div class="tb-section-eyebrow">three reference strategies</div>
-<h2 class="tb-section-title">Baselines establish the floor for the
-trained-vs-untrained comparison every result on the Reflection-Loop tab
-is implicitly measured against.</h2>
+<h2 class="tb-section-title">
+    <span class="tb-faded">Baselines establish the floor</span>
+    every reflection-loop result is implicitly measured against.
+</h2>
 
 <p class="tb-section-lead">
 All three are deterministic, async coroutines under
@@ -25,9 +26,9 @@ parses either output identically.
         <tr><th>Baseline</th><th>Exposure</th><th>Allocation</th><th>Rebalance</th></tr>
     </thead>
     <tbody>
-        <tr><td><code>cash</code></td><td class="mono">0%</td><td>—</td><td>—</td></tr>
+        <tr><td><code>cash</code></td><td class="mono">0%</td><td>&mdash;</td><td>&mdash;</td></tr>
         <tr><td><code>equal_weight</code></td><td class="mono">90%</td><td>1/N across the visible universe</td><td>One-shot at episode start</td></tr>
-        <tr><td><code>kelly</code></td><td class="mono">50%</td><td>1/N × half-Kelly fraction</td><td>One-shot at episode start</td></tr>
+        <tr><td><code>kelly</code></td><td class="mono">50%</td><td>1/N &times; half-Kelly fraction</td><td>One-shot at episode start</td></tr>
     </tbody>
 </table>
 """
@@ -35,22 +36,24 @@ parses either output identically.
 
 _REFERENCE_HTML = """
 <div class="tb-section-eyebrow">benchmark reference</div>
-<h2 class="tb-section-title">Equal-weight buy-and-hold sets the bar.</h2>
+<h2 class="tb-section-title">
+    Equal-weight buy-and-hold <span class="tb-faded">sets the bar.</span>
+</h2>
 
 <p class="tb-section-lead">
 On the same 119-bar test episode the reflection-trained Qwen3-32B reaches
 <code>+9.89%</code> ROI; equal-weight buy-and-hold over the same 10 assets
-returns <code>+15.96%</code>. The trained agent still trails B&H, but the
-gap closed from roughly <code>−13 log-points</code> at baseline to
-<code>−5 log-points</code> at iter 5 — the single most informative chart
-on the Reflection-Loop tab.
+returns <code>+15.96%</code>. The trained agent still trails B&amp;H, but the
+gap closed from roughly <code>&minus;13 log-points</code> at baseline to
+<code>&minus;5 log-points</code> at iter 5 &mdash; the single most informative
+chart on the Reflection-Loop tab.
 </p>
 
 <p class="tb-section-lead tb-section-lead-mute">
 The honest read: prompt-only optimization can install execution discipline
 that the base model already has the knowledge to use, but it cannot
 manufacture alpha that exceeds what a static do-nothing portfolio captures
-in a positive-drift regime. To beat B&H you likely need a stronger base
+in a positive-drift regime. To beat B&amp;H you likely need a stronger base
 model or actual gradient-based RL. Reflection gets you a much better
 starting point; it does not replace gradient signal forever.
 </p>
@@ -59,23 +62,36 @@ starting point; it does not replace gradient signal forever.
 
 _NEXT_HTML = """
 <div class="tb-section-eyebrow">natural follow-ons</div>
-<h2 class="tb-section-title">Reflection as warm-start, RL as long-horizon refinement.</h2>
+<h2 class="tb-section-title">
+    Reflection as <span class="tb-faded">warm-start,</span>
+    RL as long-horizon refinement.
+</h2>
 
-<ul style="line-height: 1.8; max-width: 64ch;">
-    <li><strong>Reflection-as-init.</strong> Use the iter-5 prompt as the
-        starting policy for an actual GRPO/PPO run. The training loop reads
-        a calibrated executor instead of a cold one, which collapses the
-        exploration phase and recovers the gradient signal earlier.</li>
-    <li><strong>Multi-window cross-validation.</strong> Currently every
-        result is from one 119-bar window. Re-running across multiple
-        randomly drawn source windows lets the claim be "generalization"
-        rather than "fit on one regime".</li>
-    <li><strong>Stronger reflector, weaker base.</strong> Sweep the
-        (reflector, agent) combinations to characterize how reflection
-        scales with reflector capability and base-model instruction-
-        following. Today's run uses Opus 4.7 for the reflector against
-        Qwen3-32B and GLM-5.1 for the agents.</li>
-</ul>
+<div class="tb-three-up">
+    <div class="tb-card">
+        <div class="tb-card-num">01 / 03</div>
+        <div class="tb-card-title">Reflection-as-init</div>
+        <div class="tb-card-body">Use the iter-5 prompt as the starting policy
+            for an actual GRPO/PPO run. The training loop reads a calibrated
+            executor instead of a cold one, which collapses the exploration
+            phase and recovers the gradient signal earlier.</div>
+    </div>
+    <div class="tb-card">
+        <div class="tb-card-num">02 / 03</div>
+        <div class="tb-card-title">Multi-window cross-validation</div>
+        <div class="tb-card-body">Currently every result is from one 119-bar
+            window. Re-running across multiple randomly drawn source windows
+            lets the claim be "generalization" rather than "fit on one regime".</div>
+    </div>
+    <div class="tb-card">
+        <div class="tb-card-num">03 / 03</div>
+        <div class="tb-card-title">Stronger reflector, weaker base</div>
+        <div class="tb-card-body">Sweep the (reflector, agent) combinations to
+            characterize how reflection scales with reflector capability and
+            base-model instruction-following. Today's run uses Opus 4.7 against
+            Qwen3-32B and GLM-5.1.</div>
+    </div>
+</div>
 """
 
 

server/ui/tabs/docs.py

@@ -6,9 +6,11 @@ import gradio as gr
 
 
 _LINKS_HTML = """
-<div class="tb-section-eyebrow">deployment · code · companion docs</div>
-<h2 class="tb-section-title">Everything a reviewer needs to inspect the env,
-re-run it, or cite it.</h2>
+<div class="tb-section-eyebrow">deployment &middot; code &middot; companion docs</div>
+<h2 class="tb-section-title">
+    <span class="tb-faded">Everything a reviewer needs to inspect the env,</span>
+    re-run it, or cite it.
+</h2>
 
 <div class="tb-link-grid">
     <a class="tb-link-card" href="https://huggingface.co/spaces/yobro4619/tradebench" target="_blank">
@@ -51,7 +53,11 @@ re-run it, or cite it.</h2>
 
 
 _REPO_HTML = """
-<div class="tb-section-eyebrow">repository · what's where</div>
+<div class="tb-section-eyebrow">repository &middot; what's where</div>
+<h2 class="tb-section-title">
+    <span class="tb-faded">The map of the repo</span>
+    that produced everything above.
+</h2>
 
 <table class="tb-table">
     <thead>
@@ -82,7 +88,10 @@ _REPO_HTML = """
 
 _CITATION_HTML = """
 <div class="tb-section-eyebrow">citation</div>
-<h2 class="tb-section-title">If TradeBench is useful in your work, cite as:</h2>
+<h2 class="tb-section-title">
+    <span class="tb-faded">If TradeBench is useful in your work,</span>
+    cite as:
+</h2>
 
 <details class="tb-schema" open>
     <summary>BibTeX</summary>

server/ui/tabs/environment.py

@@ -14,9 +14,10 @@ except (ImportError, ValueError):  # pragma: no cover - dev fallback
 
 _SPLIT_HTML = """
 <div class="tb-section-eyebrow">train / test split</div>
-<h2 class="tb-section-title">A single-task environment with two splits.
-<code>train</code> is in-context study; <code>test</code> is the held-out
-walked-bar-by-bar evaluation that produces the score.</h2>
+<h2 class="tb-section-title">
+    <span class="tb-faded">A single-task environment with two splits.</span>
+    <code>train</code> studies, <code>test</code> scores.
+</h2>
 
 <table class="tb-table">
     <thead>
@@ -62,82 +63,91 @@ ruin boolean from the ledger event log. Fully reproducible, no LLM judge.
 <strong>Real-derived, aliased, date-shifted data.</strong> Test bars come from real
 OHLCV (mega-cap US tickers via yfinance) baked once by
 <code>scripts/build_real_dataset.py</code>. Four anti-memorization layers stack on
-top: <em>(1)</em> every asset is exposed only as <code>tier_a01</code> ...
-<code>tier_a10</code> aliases — real ticker symbols never appear in any tool
+top: <em>(1)</em> every asset is exposed only as <code>tier_a01</code> &hellip;
+<code>tier_a10</code> aliases &mdash; real ticker symbols never appear in any tool
 output or sandbox file; <em>(2)</em> the source window is a randomly drawn period
 from <code>[2018, today]</code>, committed once at build time and never the same
 across re-builds; <em>(3)</em> the alias-to-ticker mapping is permuted per build,
 so even recognizing "this looks like 2022-Q3" does not reveal which alias is
-AAPL; <em>(4)</em> a σ=0.0005 zero-mean Gaussian return-noise overlay prevents
+AAPL; <em>(4)</em> a &sigma;=0.0005 zero-mean Gaussian return-noise overlay prevents
 exact-price recall.
 </p>
 """
 
 
+# Daily loop SVG. Pure-black panel with white-with-alpha hairlines and cyan
+# only on the active step's accent. Matches the editorial palette.
 _LOOP_HTML = """
 <div class="tb-section-eyebrow">the daily loop</div>
-<h2 class="tb-section-title">observe → model → size → place orders → advance.
-Only <em>advance_day</em> moves the clock.</h2>
-
-<svg viewBox="0 0 880 160" style="width: 100%; height: auto; margin-top: 18px;" role="img" aria-label="Five-step daily loop diagram">
-    <defs>
-        <linearGradient id="loopGrad" x1="0" y1="0" x2="1" y2="0">
-            <stop offset="0%" stop-color="#22D3EE"/>
-            <stop offset="100%" stop-color="#0E7490"/>
-        </linearGradient>
-        <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
-            <path d="M0,0 L10,5 L0,10 z" fill="#22D3EE"/>
-        </marker>
-    </defs>
-
-    <g font-family="JetBrains Mono, monospace" font-size="13" fill="#E6E8EB">
-        <rect x="20"  y="40" width="140" height="80" rx="6" fill="#11161D" stroke="#1F2731"/>
-        <text x="90"  y="68" text-anchor="middle" fill="#22D3EE" font-size="11" letter-spacing="1.4">OBSERVE</text>
-        <text x="90"  y="92" text-anchor="middle" fill="#7A8693" font-size="11">view_*  (×6)</text>
-        <text x="90"  y="108" text-anchor="middle" fill="#7A8693" font-size="11">free, read-only</text>
-
-        <rect x="180" y="40" width="140" height="80" rx="6" fill="#11161D" stroke="#1F2731"/>
-        <text x="250" y="68" text-anchor="middle" fill="#22D3EE" font-size="11" letter-spacing="1.4">MODEL</text>
-        <text x="250" y="92" text-anchor="middle" fill="#7A8693" font-size="11">sandbox_exec</text>
-        <text x="250" y="108" text-anchor="middle" fill="#7A8693" font-size="11">no net, seccomp</text>
-
-        <rect x="340" y="40" width="140" height="80" rx="6" fill="#1A2029" stroke="#22D3EE" stroke-width="1.5"/>
-        <text x="410" y="68" text-anchor="middle" fill="#22D3EE" font-size="11" letter-spacing="1.4">SIZE</text>
-        <text x="410" y="92" text-anchor="middle" fill="#E6E8EB" font-size="11">record_decision</text>
-        <text x="410" y="108" text-anchor="middle" fill="#E6E8EB" font-size="11">required per bar</text>
-
-        <rect x="500" y="40" width="140" height="80" rx="6" fill="#11161D" stroke="#1F2731"/>
-        <text x="570" y="68" text-anchor="middle" fill="#22D3EE" font-size="11" letter-spacing="1.4">ORDERS</text>
-        <text x="570" y="92" text-anchor="middle" fill="#7A8693" font-size="11">place_order</text>
-        <text x="570" y="108" text-anchor="middle" fill="#7A8693" font-size="11">queue, no same-bar</text>
-
-        <rect x="660" y="40" width="200" height="80" rx="6" fill="#1A2029" stroke="#22D3EE" stroke-width="1.5"/>
-        <text x="760" y="68" text-anchor="middle" fill="#22D3EE" font-size="11" letter-spacing="1.4">ADVANCE</text>
-        <text x="760" y="92" text-anchor="middle" fill="#E6E8EB" font-size="11">next-open fills · settle</text>
-        <text x="760" y="108" text-anchor="middle" fill="#E6E8EB" font-size="11">composite reward emitted</text>
-    </g>
-
-    <g stroke="#22D3EE" stroke-width="1.4" fill="none" marker-end="url(#arr)">
-        <line x1="160" y1="80" x2="180" y2="80"/>
-        <line x1="320" y1="80" x2="340" y2="80"/>
-        <line x1="480" y1="80" x2="500" y2="80"/>
-        <line x1="640" y1="80" x2="660" y2="80"/>
-    </g>
-
-    <text x="440" y="150" text-anchor="middle" font-family="JetBrains Mono, monospace"
-          font-size="10" fill="#7A8693" letter-spacing="1.4">
-        only ADVANCE_DAY moves t → t+1.   every other tool is free-cost, read-only or queue-only.
-    </text>
-</svg>
+<h2 class="tb-section-title">
+    observe &rarr; model &rarr; size &rarr; place orders &rarr; advance.
+    <span class="tb-faded">Only</span> <code>advance_day</code>
+    <span class="tb-faded">moves the clock.</span>
+</h2>
+
+<figure class="tb-figure">
+    <div class="tb-figure-head">
+        <div class="tb-figure-title">daily loop &middot; 5 phases</div>
+        <div class="tb-figure-meta">advance_day = 1 phase, 4 free</div>
+    </div>
+    <div class="tb-figure-body is-dark" style="padding: 32px 24px;">
+        <svg viewBox="0 0 880 180" style="width: 100%; height: auto;" role="img" aria-label="Five-step daily loop">
+            <defs>
+                <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
+                    <path d="M0,0 L10,5 L0,10 z" fill="rgba(255,255,255,0.40)"/>
+                </marker>
+            </defs>
+
+            <g font-family="IBM Plex Mono, monospace" font-size="11" fill="#FFFFFF">
+                <rect x="20"  y="40" width="140" height="80" fill="transparent" stroke="rgba(255,255,255,0.20)"/>
+                <text x="90"  y="68" text-anchor="middle" fill="#22D3EE" font-size="10" letter-spacing="2.4">OBSERVE</text>
+                <text x="90"  y="92" text-anchor="middle" fill="rgba(255,255,255,0.66)" font-size="11">view_*  (x6)</text>
+                <text x="90"  y="108" text-anchor="middle" fill="rgba(255,255,255,0.40)" font-size="10">free, read-only</text>
+
+                <rect x="180" y="40" width="140" height="80" fill="transparent" stroke="rgba(255,255,255,0.20)"/>
+                <text x="250" y="68" text-anchor="middle" fill="#22D3EE" font-size="10" letter-spacing="2.4">MODEL</text>
+                <text x="250" y="92" text-anchor="middle" fill="rgba(255,255,255,0.66)" font-size="11">sandbox_exec</text>
+                <text x="250" y="108" text-anchor="middle" fill="rgba(255,255,255,0.40)" font-size="10">no net, seccomp</text>
+
+                <rect x="340" y="40" width="140" height="80" fill="rgba(34,211,238,0.08)" stroke="#22D3EE" stroke-width="1"/>
+                <text x="410" y="68" text-anchor="middle" fill="#22D3EE" font-size="10" letter-spacing="2.4">SIZE</text>
+                <text x="410" y="92" text-anchor="middle" fill="#FFFFFF" font-size="11">record_decision</text>
+                <text x="410" y="108" text-anchor="middle" fill="#FFFFFF" font-size="10">required per bar</text>
+
+                <rect x="500" y="40" width="140" height="80" fill="transparent" stroke="rgba(255,255,255,0.20)"/>
+                <text x="570" y="68" text-anchor="middle" fill="#22D3EE" font-size="10" letter-spacing="2.4">ORDERS</text>
+                <text x="570" y="92" text-anchor="middle" fill="rgba(255,255,255,0.66)" font-size="11">place_order</text>
+                <text x="570" y="108" text-anchor="middle" fill="rgba(255,255,255,0.40)" font-size="10">queue, no same-bar</text>
+
+                <rect x="660" y="40" width="200" height="80" fill="rgba(34,211,238,0.08)" stroke="#22D3EE" stroke-width="1"/>
+                <text x="760" y="68" text-anchor="middle" fill="#22D3EE" font-size="10" letter-spacing="2.4">ADVANCE</text>
+                <text x="760" y="92" text-anchor="middle" fill="#FFFFFF" font-size="11">next-open fills &middot; settle</text>
+                <text x="760" y="108" text-anchor="middle" fill="#FFFFFF" font-size="10">composite reward emitted</text>
+            </g>
+
+            <g stroke="rgba(255,255,255,0.40)" stroke-width="1" fill="none" marker-end="url(#arr)">
+                <line x1="160" y1="80" x2="180" y2="80"/>
+                <line x1="320" y1="80" x2="340" y2="80"/>
+                <line x1="480" y1="80" x2="500" y2="80"/>
+                <line x1="640" y1="80" x2="660" y2="80"/>
+            </g>
+
+            <text x="440" y="160" text-anchor="middle" font-family="IBM Plex Mono, monospace"
+                  font-size="10" fill="rgba(255,255,255,0.40)" letter-spacing="2">
+                only ADVANCE_DAY moves t &rarr; t+1.   every other tool is free-cost, read-only or queue-only.
+            </text>
+        </svg>
+    </div>
+</figure>
 """
 
 
 _TOOLS_HTML = """
-<div class="tb-section-eyebrow">tool surface · 11 tools</div>
-<h2 class="tb-section-title">Six read-only views, three order-book ops,
-one time-advancer, one sandboxed Python — plus an optional
-<code>reasoning</code> field on <code>record_decision</code> for the
-rules-clause scanner.</h2>
+<div class="tb-section-eyebrow">tool surface &middot; 11 tools</div>
+<h2 class="tb-section-title">
+    <span class="tb-faded">Six read-only views, three order ops, one
+    time-advancer, one sandboxed Python.</span>
+</h2>
 
 <table class="tb-table">
     <thead>
@@ -176,9 +186,10 @@ def render() -> None:
     gr.HTML(_TOOLS_HTML)
     gr.HTML(
         '<div class="tb-section-eyebrow">pydantic schemas</div>'
-        '<h2 class="tb-section-title">Wire-level contracts. Auto-rendered from '
-        '<code>models.py</code> via <code>model_json_schema()</code>.</h2>'
-        + _schema_block("TradeAction · action envelope", TradeAction)
-        + _schema_block("TradeObservation · per-step response", TradeObservation)
-        + _schema_block("TradeState · episode metadata (read via /state)", TradeState),
+        '<h2 class="tb-section-title">'
+        '<span class="tb-faded">Wire-level contracts.</span> '
+        'Auto-rendered from <code>models.py</code>.</h2>'
+        + _schema_block("TradeAction &middot; action envelope", TradeAction)
+        + _schema_block("TradeObservation &middot; per-step response", TradeObservation)
+        + _schema_block("TradeState &middot; episode metadata (read via /state)", TradeState),
     )

server/ui/tabs/overview.py

@@ -1,101 +1,863 @@
-"""Overview tab: headline-results-first hero with the trajectory chart."""
+"""Trajectory tab — full landing-page scroll.
+
+A raeth.ai-style cinematic experience: full-viewport hero with the Blog.md
+hook, six numbered sections (Problem / Environment / Reward / Defenses /
+Results / Run it) lifted verbatim from Blog.md and README.md, and a closing
+CTA strip. Section 05 embeds every figure that appears in Blog.md as an
+interactive Plotly chart (equity curves, reward trajectory, ROI/score, bar
+alpha, action mix, reward components) with the prompt-evolution diagrams as
+static PNGs (they're presentation graphics, not plots). Deep-dive sub-links
+route into the other tabs via ``data-tb-tab`` attributes that
+``static/motion.js`` resolves to a tab button click.
+"""
 
 from __future__ import annotations
 
+import logging
+
 import gradio as gr
 
-from .. import plots
+from ..figures import figure_card
 
+logger = logging.getLogger(__name__)
 
+
+# ── Hero (full viewport) ────────────────────────────────────────
 _HERO_HTML = """
-<div class="tb-hero">
-    <div class="tb-hero-stack">
-        <div class="tb-section-eyebrow">5 reflections · 0 gradient updates · 119-bar test episode</div>
-        <h2 class="tb-hero-title">
-            Frozen <span class="tb-accent">Qwen3-32B</span> climbed
-            <span class="tb-accent">+4.3 pp</span> on score and
-            <span class="tb-accent">3.6×</span> on ROI by
-            <span class="tb-accent">rewriting its own prompt</span>.
-        </h2>
-        <p class="tb-hero-lead">
-            TradeBench is a long-horizon equities-trading environment built so an LLM agent
-            can actually <em>learn</em> on it. The reward is a 7-component convex composite
-            in [0, 1] gated by a binary compliance check; the data is real OHLCV behind a
-            four-layer anti-memorization stack; and a single 119-bar test rollout produces
-            300-500 LLM calls, dense per-bar reward, and a deterministic grader.
-            We took two open-weights base models, ran a GEPA-style reflection loop that
-            never touches a weight, and got monotone score climbs on both.
-        </p>
+<section id="tb-section-hero" class="tb-landing tb-reveal">
+    <div class="tb-landing-halo" aria-hidden="true"></div>
+
+    <div class="tb-landing-eyebrow">
+        <span class="is-accent">OpenEnv Hackathon</span>
+        <span class="tb-dot">/</span>
+        <span>Theme 2 &middot; Long-horizon planning</span>
+        <span class="tb-dot">/</span>
+        <span>India 2026 finals</span>
+    </div>
+
+    <h1 class="tb-landing-title">
+        If AI models are <span class="tb-accent">so smart</span>, why aren't they rich?
+    </h1>
+
+    <p class="tb-landing-sub">
+        <em>TradeBench:</em> a trading RL environment to test and improve a model's
+        ability for capital allocation under incomplete and noisy information. Real
+        OHLCV behind a four-layer anti-memorization stack. Reward in <code>[0, 1]</code>
+        by construction, gated by a binary compliance check. A single 119-bar test
+        rollout produces 300&ndash;500 LLM calls, dense per-bar reward, and a
+        deterministic grader.
+    </p>
+
+    <div class="tb-landing-actions">
+        <a class="tb-cta tb-cta-primary"
+           href="https://github.com/PrathamSingla15/openenv_raethx_finals/blob/main/Blog.md"
+           target="_blank" rel="noreferrer">
+            Read the writeup
+            <span class="tb-cta-arrow" aria-hidden="true">&#x2197;</span>
+        </a>
+        <a class="tb-cta tb-cta-ghost" href="#" data-tb-tab="Run">
+            Run the demo
+            <span class="tb-cta-arrow" aria-hidden="true">&rarr;</span>
+        </a>
+    </div>
+
+    <div class="tb-metrics-strip">
+        <div class="tb-metrics-cell">
+            <div class="tb-metrics-key">Best score</div>
+            <div class="tb-metrics-val">0.6584</div>
+            <div class="tb-metrics-foot">qwen3-32b &middot; iter 5</div>
+        </div>
+        <div class="tb-metrics-cell">
+            <div class="tb-metrics-key">ROI climb</div>
+            <div class="tb-metrics-val is-accent">3.6&times;</div>
+            <div class="tb-metrics-foot">+2.78% &rarr; +9.89%</div>
+        </div>
+        <div class="tb-metrics-cell">
+            <div class="tb-metrics-key">Reflections</div>
+            <div class="tb-metrics-val">5</div>
+            <div class="tb-metrics-foot">monotone every iteration</div>
+        </div>
+        <div class="tb-metrics-cell">
+            <div class="tb-metrics-key">Gradient updates</div>
+            <div class="tb-metrics-val">0</div>
+            <div class="tb-metrics-foot">prompt evolution only</div>
+        </div>
+        <div class="tb-metrics-cell">
+            <div class="tb-metrics-key">Inference spend</div>
+            <div class="tb-metrics-val">$3</div>
+            <div class="tb-metrics-foot">openrouter, end-to-end</div>
+        </div>
+        <div class="tb-metrics-cell">
+            <div class="tb-metrics-key">Wall-clock</div>
+            <div class="tb-metrics-val">~2.5h</div>
+            <div class="tb-metrics-foot">budget was 36</div>
+        </div>
+    </div>
+</section>
+"""
+
+
+# ── 01 / Problem ────────────────────────────────────────────────
+_SECTION_01_HTML = """
+<section id="tb-section-01" class="tb-numbered-section tb-reveal">
+    <div class="tb-numbered-head">
+        <div class="tb-numbered-tag">
+            <span class="is-accent">01</span> / 06 &middot; The bet
+        </div>
+        <div>
+            <h2 class="tb-numbered-title">
+                <span class="tb-faded">What was once left to individual judgement can</span>
+                become an optimizable system.
+            </h2>
+            <p class="tb-numbered-sub">
+                Capital allocation drives the economy. It decides which drugs get developed,
+                which technologies get built, and which ideas survive long enough to matter.
+                And yet, for something so central, it still runs on a fragile foundation: human
+                judgment, plus a thin and badly instrumented layer of agentic systems that
+                pretend to know what they are doing. Frontier LLMs can reason about a single
+                trade in isolation, but break down across hundreds of sequential decisions where
+                past actions reshape the future state distribution.
+            </p>
+            <p class="tb-numbered-sub">
+                The skill that fails is not analytical depth. It is execution discipline:
+                <em>when to act, when to abstain, how to size against existing positions, how to
+                keep from drifting into a regime the agent did not intend.</em> TradeBench turns
+                long-horizon equities trading into an environment where execution discipline is
+                a measurable, decomposable, gradient-friendly target.
+            </p>
+        </div>
+    </div>
+
+    <blockquote class="tb-quote">
+        The model didn't get smarter. It got more disciplined.
+    </blockquote>
+</section>
+"""
+
+
+# ── 02 / Environment ────────────────────────────────────────────
+_SECTION_02_HTML = """
+<section id="tb-section-02" class="tb-numbered-section tb-reveal">
+    <div class="tb-numbered-head">
+        <div class="tb-numbered-tag">
+            <span class="is-accent">02</span> / 06 &middot; The env
+        </div>
+        <div>
+            <h2 class="tb-numbered-title">
+                Long-horizon execution discipline as an
+                <span class="tb-accent">optimizable</span> surface.
+            </h2>
+            <p class="tb-numbered-sub">
+                A per-bar reward in <code>[0, 1]</code> decomposed across seven trader-recognizable
+                components, server-enforced sequential structure that makes <em>abstain</em> a
+                first-class action, and a deterministic grader that produces final cumulative
+                log-wealth, max drawdown, Sharpe, Sortino, and an avoided-ruin boolean from the
+                ledger event log. Fully reproducible, no LLM judge.
+            </p>
+        </div>
+    </div>
+
+    <div class="tb-three-up">
+        <div class="tb-card">
+            <div class="tb-card-num">01 / 03 &middot; Five-step daily loop</div>
+            <div class="tb-card-title">Observe. Model. Commit. Order. Advance.</div>
+            <div class="tb-card-body">
+                Eleven tools, hardened Docker sandbox for analysis (pandas / numpy / time-gated
+                parquet, no internet), and a single call &mdash; <code>advance_day</code> &mdash;
+                that moves the clock. Orders queue and fill at the next-open print with
+                deterministic slippage and cost models.
+            </div>
+        </div>
+        <div class="tb-card">
+            <div class="tb-card-num">02 / 03 &middot; Long-horizon spine</div>
+            <div class="tb-card-title">A thesis on the record before the clock ticks.</div>
+            <div class="tb-card-body">
+                The session enforces <code>record_decision</code> before every
+                <code>advance_day</code>: regime label, edge summary, intended exposure, top
+                convictions, uncertainty. The agent literally cannot tick the clock without
+                committing a thesis on the record. Every advance leaves a paper trail the
+                reward function can audit.
+            </div>
+        </div>
+        <div class="tb-card">
+            <div class="tb-card-num">03 / 03 &middot; Anti-memorization stack</div>
+            <div class="tb-card-title">Six layers, redundant by design.</div>
+            <div class="tb-card-body">
+                Aliased tickers (<code>tier_a01</code>&hellip;<code>tier_a10</code>), randomly
+                drawn source window from the broad <code>[2018, today]</code> pool, per-build
+                alias-to-ticker permutation, &sigma;=0.0005 return-noise overlay, time-gated
+                filesystem, and a rules-clause regex scanner. The agent has to derive strategy
+                from data it can see, not retrieve it from weight memory.
+            </div>
+        </div>
+    </div>
+
+    <a class="tb-deepdive-link" href="#" data-tb-tab="Environment">
+        Open the environment audit
+        <span class="tb-deepdive-arrow" aria-hidden="true">&#x2197;</span>
+    </a>
+</section>
+"""
+
+
+# ── 03 / Reward ─────────────────────────────────────────────────
+_SECTION_03_HTML = """
+<section id="tb-section-03" class="tb-numbered-section tb-reveal">
+    <div class="tb-numbered-head">
+        <div class="tb-numbered-tag">
+            <span class="is-accent">03</span> / 06 &middot; The signal
+        </div>
+        <div>
+            <h2 class="tb-numbered-title">
+                Reward in <span class="tb-accent">[0, 1]</span> by construction. Gated by a binary
+                compliance check.
+            </h2>
+            <p class="tb-numbered-sub">
+                A convex combination of seven trader-recognizable components, each in
+                <code>[0, 1]</code>, with weights that sum to <code>1.0</code>, multiplied by a
+                <code>{0, 1}</code> compliance gate. The episode score is the mean per-bar
+                reward, also in <code>[0, 1]</code>. No unbounded log-wealth head. No way for
+                a great Sharpe to earn back a rules-clause hit.
+            </p>
+        </div>
+    </div>
+
+    <div class="tb-formula-row">
+        <div class="tb-formula">
+<pre>r_t = (&Sigma;&#x1D62; w&#x1D62; &middot; c&#x1D62;_t)  *  g_compliance_t                 # in [0, 1]
+
+components (each in [0, 1]):
+  c_alpha       sigmoid(8 &middot; cumulative_log_alpha_vs_bench)   w = 0.40
+  c_return      sigmoid(5 &middot; cumulative_log_return)           w = 0.15
+  c_drawdown    1 &minus; 2 &middot; min(dd, 0.5)                         w = 0.10
+  c_solvency    sigmoid(6 &middot; (V &minus; 0.5&middot;V&#x2080;) / (0.5&middot;V&#x2080;))         w = 0.10
+  c_efficiency  exp(&minus;2 &middot; max(0, turnover &minus; 0.10))            w = 0.10
+  c_diversity   1 &minus; clip((HHI &minus; 0.10) / 0.90, 0, 1)          w = 0.05
+  c_consistency win &middot; stability + (1 &minus; win) &middot; 0.5            w = 0.10
+
+compliance gate (multiplicative, not additive):
+  g_compliance = (1 &minus; viol_rules) &middot; (1 &minus; viol_hack) &middot; (1 &minus; lev_breach)
+  with lev_breach = 1{gross_leverage &gt; 1.0}.  Any single violation zeros the bar.
+
+episode score:
+  score_normalized = mean over bars of r_t                  in [0, 1]</pre>
+        </div>
+
+        <div>
+            <div class="tb-section-eyebrow" style="margin-top:0">Three choices that matter</div>
+            <ul class="tb-defense-list" style="border-top:1px solid var(--rule); list-style:none; padding:0">
+                <li class="tb-defense-row">
+                    <span class="tb-defense-num">01</span>
+                    <span class="tb-defense-text">
+                        <strong><code>c_alpha</code> is dominant by design (0.40 weight).</strong>
+                        <span class="tb-defense-body">A lucky cash-only agent should not beat a
+                        thoughtful one in a year when markets happen to fall.</span>
+                    </span>
+                </li>
+                <li class="tb-defense-row">
+                    <span class="tb-defense-num">02</span>
+                    <span class="tb-defense-text">
+                        <strong><code>c_consistency</code> is gated.</strong>
+                        <span class="tb-defense-body">Above-benchmark agents earn it via low
+                        downside-alpha-volatility; sub-benchmark agents fall back to 0.5 instead
+                        of 0. Kills the &ldquo;flatline gets free Sharpe&rdquo; exploit.</span>
+                    </span>
+                </li>
+                <li class="tb-defense-row">
+                    <span class="tb-defense-num">03</span>
+                    <span class="tb-defense-text">
+                        <strong>The compliance gate is multiplicative.</strong>
+                        <span class="tb-defense-body">Cheating zeros the bar's reward outright;
+                        no Sharpe can earn back a rules-clause hit.</span>
+                    </span>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <a class="tb-deepdive-link" href="#" data-tb-tab="Reward">
+        Open the reward decomposition
+        <span class="tb-deepdive-arrow" aria-hidden="true">&#x2197;</span>
+    </a>
+</section>
+"""
+
+
+# ── 04 / Defenses ───────────────────────────────────────────────
+_SECTION_04_HTML = """
+<section id="tb-section-04" class="tb-numbered-section tb-reveal">
+    <div class="tb-numbered-head">
+        <div class="tb-numbered-tag">
+            <span class="is-accent">04</span> / 06 &middot; The leak controls
+        </div>
+        <div>
+            <h2 class="tb-numbered-title">
+                Six layers, redundant <span class="tb-faded">by design.</span>
+            </h2>
+            <p class="tb-numbered-sub">
+                LLM weights post-date the backtest window, so a single defense is never enough.
+                The agent has to derive strategy from what it sees, not retrieve it from
+                training memory. Across 10 rollouts on two base models the rules clause was
+                never tripped, no forbidden global was trafficked, and no bar was zeroed by
+                the compliance gate.
+            </p>
+        </div>
+    </div>
+
+    <ol class="tb-defense-list" style="list-style:none; padding:0; margin:0">
+        <li class="tb-defense-row">
+            <span class="tb-defense-num">01</span>
+            <span class="tb-defense-text">
+                <strong>Aliased tickers.</strong>
+                <span class="tb-defense-body">The agent sees <code>tier_a01</code> through
+                <code>tier_a10</code>, never the real symbols, so it cannot pattern-match on AAPL
+                or MSFT in its own head.</span>
+            </span>
+        </li>
+        <li class="tb-defense-row">
+            <span class="tb-defense-num">02</span>
+            <span class="tb-defense-text">
+                <strong>Randomized window.</strong>
+                <span class="tb-defense-body">The source window is a randomly drawn period from
+                the broad pool <code>[2018, today]</code>, committed once at build time and
+                never the same across rebuilds.</span>
+            </span>
+        </li>
+        <li class="tb-defense-row">
+            <span class="tb-defense-num">03</span>
+            <span class="tb-defense-text">
+                <strong>Alias permutation.</strong>
+                <span class="tb-defense-body">Within a build the alias-to-ticker mapping is
+                permuted, so even if the agent recognizes &ldquo;this looks like the 2022-Q3
+                selloff&rdquo; it still does not learn which alias is AAPL.</span>
+            </span>
+        </li>
+        <li class="tb-defense-row">
+            <span class="tb-defense-num">04</span>
+            <span class="tb-defense-text">
+                <strong>Return-noise overlay.</strong>
+                <span class="tb-defense-body">A &sigma;=0.0005 zero-mean Gaussian return-noise
+                overlay prevents exact-price recall.</span>
+            </span>
+        </li>
+        <li class="tb-defense-row">
+            <span class="tb-defense-num">05</span>
+            <span class="tb-defense-text">
+                <strong>Time-gated filesystem.</strong>
+                <span class="tb-defense-body">The progressive filesystem in the sandbox only
+                ever exposes parquet files dated strictly earlier than the current bar; the same
+                date gate is enforced again at the tool layer and at the SQL query layer for
+                redundancy.</span>
+            </span>
+        </li>
+        <li class="tb-defense-row">
+            <span class="tb-defense-num">06</span>
+            <span class="tb-defense-text">
+                <strong>Rules-clause regex scan.</strong>
+                <span class="tb-defense-body">The rules clause in the system prompt is
+                regex-scanned at every step to confirm the agent has not been re-prompted to
+                recognize the underlying assets.</span>
+            </span>
+        </li>
+    </ol>
+
+    <a class="tb-deepdive-link" href="#" data-tb-tab="Defenses">
+        Open the leakage audit
+        <span class="tb-deepdive-arrow" aria-hidden="true">&#x2197;</span>
+    </a>
+</section>
+"""
+
+
+# ── 05 / Results ────────────────────────────────────────────────
+_SECTION_05_INTRO_HTML = """
+<section id="tb-section-05" class="tb-numbered-section tb-reveal">
+    <div class="tb-numbered-head">
+        <div class="tb-numbered-tag">
+            <span class="is-accent">05</span> / 06 &middot; The result
+        </div>
+        <div>
+            <h2 class="tb-numbered-title">
+                Five iterations. Zero gradient updates.
+                <span class="tb-accent">3.6&times;</span> ROI.
+            </h2>
+            <p class="tb-numbered-sub">
+                We froze Qwen3-32B and ran a GEPA-style reflection loop: each iteration, Claude
+                Opus&nbsp;4.7 read the prior trajectory, identified the single most-costly
+                failure mode, and proposed a surgical edit to the system prompt. The model
+                weights never moved. Every iteration improved on the last. The climb was
+                monotone.
+            </p>
+        </div>
     </div>
 
-    <div class="tb-hero-stats">
-        <div class="tb-statcard">
-            <div class="tb-statcard-eyebrow">Qwen3-32B · Groq</div>
+    <div class="tb-hero-stats" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:var(--space-5)">
+        <div class="tb-statcard" style="border:none">
+            <div class="tb-statcard-eyebrow">Qwen3-32B &middot; Groq</div>
             <div class="tb-statcard-row">
                 <div class="tb-statcard-key">score_normalized</div>
-                <div class="tb-statcard-arrow">0.6155 → <strong>0.6584</strong></div>
+                <div class="tb-statcard-arrow">0.6155 &rarr; <strong>0.6584</strong></div>
             </div>
             <div class="tb-statcard-row">
                 <div class="tb-statcard-key">ROI</div>
-                <div class="tb-statcard-arrow">+2.78% → <strong>+9.89%</strong></div>
+                <div class="tb-statcard-arrow">+2.78% &rarr; <strong>+9.89%</strong></div>
             </div>
             <div class="tb-statcard-row">
                 <div class="tb-statcard-key">place_order</div>
-                <div class="tb-statcard-arrow">4 → <strong>12</strong></div>
+                <div class="tb-statcard-arrow">4 &rarr; <strong>12</strong></div>
             </div>
-            <div class="tb-statcard-foot">5 iterations · monotone</div>
+            <div class="tb-statcard-foot">5 iterations &middot; monotone</div>
         </div>
-        <div class="tb-statcard">
-            <div class="tb-statcard-eyebrow">GLM-5.1 · Together</div>
+        <div class="tb-statcard" style="border:none">
+            <div class="tb-statcard-eyebrow">GLM-5.1 &middot; Together</div>
             <div class="tb-statcard-row">
                 <div class="tb-statcard-key">score_normalized</div>
-                <div class="tb-statcard-arrow">0.6243 → <strong>0.6453</strong></div>
+                <div class="tb-statcard-arrow">0.6243 &rarr; <strong>0.6453</strong></div>
             </div>
             <div class="tb-statcard-row">
                 <div class="tb-statcard-key">ROI</div>
-                <div class="tb-statcard-arrow">+2.83% → <strong>+4.69%</strong></div>
+                <div class="tb-statcard-arrow">+2.83% &rarr; <strong>+4.69%</strong></div>
             </div>
             <div class="tb-statcard-row">
                 <div class="tb-statcard-key">place_order</div>
-                <div class="tb-statcard-arrow">2 → <strong>6</strong></div>
+                <div class="tb-statcard-arrow">2 &rarr; <strong>6</strong></div>
             </div>
-            <div class="tb-statcard-foot">3 iterations · climb · dip · recover</div>
+            <div class="tb-statcard-foot">3 iterations &middot; climb &middot; dip &middot; recover</div>
         </div>
     </div>
+</section>
+"""
+
+
+_QWEN_TABLE_HTML = """
+<div class="tb-reveal" style="margin-bottom:var(--space-5)">
+    <div class="tb-section-eyebrow">Qwen3-32B per-iter detail</div>
+    <table class="tb-table">
+        <thead>
+            <tr>
+                <th class="mono">Iter</th>
+                <th class="mono">score_normalized</th>
+                <th class="mono">ROI</th>
+                <th class="mono">place_order</th>
+                <th class="mono">sandbox_exec</th>
+                <th class="mono">view_*</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr><td class="mono">0 (baseline)</td><td class="mono">0.6155</td><td class="mono">+2.78%</td><td class="mono">4</td><td class="mono">22</td><td class="mono">6</td></tr>
+            <tr><td class="mono">1</td><td class="mono">0.6214</td><td class="mono">+4.72%</td><td class="mono">6</td><td class="mono">29</td><td class="mono">23</td></tr>
+            <tr><td class="mono">2</td><td class="mono">0.6306</td><td class="mono">+3.88%</td><td class="mono">10</td><td class="mono">6</td><td class="mono">17</td></tr>
+            <tr><td class="mono">3</td><td class="mono">0.6381</td><td class="mono">+6.31%</td><td class="mono">11</td><td class="mono">1</td><td class="mono">32</td></tr>
+            <tr><td class="mono">4</td><td class="mono">0.6476</td><td class="mono">+6.96%</td><td class="mono">14</td><td class="mono">6</td><td class="mono">32</td></tr>
+            <tr><td class="mono"><strong>5</strong></td><td class="mono"><strong>0.6584</strong></td><td class="mono"><strong>+9.89%</strong></td><td class="mono"><strong>12</strong></td><td class="mono"><strong>10</strong></td><td class="mono"><strong>31</strong></td></tr>
+        </tbody>
+    </table>
+</div>
+"""
+
+
+_GLM_TABLE_HTML = """
+<div class="tb-reveal" style="margin-bottom:var(--space-5)">
+    <div class="tb-section-eyebrow">GLM-5.1 per-iter detail</div>
+    <table class="tb-table">
+        <thead>
+            <tr>
+                <th class="mono">Iter</th>
+                <th class="mono">score_normalized</th>
+                <th class="mono">ROI</th>
+                <th class="mono">place_order</th>
+                <th class="mono">sandbox_exec</th>
+                <th class="mono">view_*</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr><td class="mono">0 (baseline)</td><td class="mono">0.6243</td><td class="mono">+2.83%</td><td class="mono">2</td><td class="mono">81</td><td class="mono">88</td></tr>
+            <tr><td class="mono">1</td><td class="mono">0.6432</td><td class="mono">+4.39%</td><td class="mono">6</td><td class="mono">44</td><td class="mono">110</td></tr>
+            <tr><td class="mono">2</td><td class="mono">0.6382</td><td class="mono">+3.72%</td><td class="mono">6</td><td class="mono">19</td><td class="mono">182</td></tr>
+            <tr><td class="mono"><strong>3</strong></td><td class="mono"><strong>0.6453</strong></td><td class="mono"><strong>+4.69%</strong></td><td class="mono"><strong>6</strong></td><td class="mono"><strong>41</strong></td><td class="mono"><strong>148</strong></td></tr>
+        </tbody>
+    </table>
+</div>
+"""
+
+
+def _plot_caption(eyebrow: str, title: str, body: str) -> str:
+    """Editorial caption block above an interactive Plotly figure."""
+    return f"""
+<div class="tb-reveal" style="margin:var(--space-5) 0 var(--space-3)">
+    <div class="tb-section-eyebrow" style="margin-top:0">{eyebrow}</div>
+    <h3 style="font-family:var(--type-display);font-weight:500;font-size:clamp(1.4em,2.4vw,1.8em);
+        line-height:1.15;letter-spacing:-0.018em;color:var(--ink);margin:0;
+        font-variation-settings:'opsz' 96,'WONK' 1;max-width:60ch">{title}</h3>
+    <p style="font-family:var(--type-body);font-size:0.96em;line-height:1.65;color:var(--ink-mute);
+        max-width:64ch;margin:8px 0 0">{body}</p>
+</div>
+"""
+
+
+# Section banner introducing a per-model figure cluster.
+def _model_banner(model: str, sub: str) -> str:
+    return f"""
+<div class="tb-reveal" style="margin:var(--space-7) 0 var(--space-4);
+    padding-top:var(--space-5);border-top:1px solid var(--rule)">
+    <div class="tb-section-eyebrow" style="margin-top:0;color:var(--accent)">All figures &middot; {model}</div>
+    <p class="tb-numbered-sub" style="margin-top:var(--space-2)">{sub}</p>
 </div>
 """
 
 
-_PILLARS_MD = """
-<div class="tb-section-eyebrow">design pillars</div>
-
-## Three commitments that distinguish this environment.
-
-### 1. Per-bar reward in [0, 1] by construction
-A convex combination of seven trader-recognizable components (alpha vs equal-weight
-buy-and-hold at 0.40 weight, cumulative return, drawdown, solvency, turnover
-efficiency, concentration, downside-volatility-of-bar-alpha) multiplied by a
-{0, 1} compliance gate. The episode score is the mean per-bar reward, also in
-[0, 1]. No unbounded log-wealth head, no flatline-gets-free-Sharpe exploit, no
-additive penalty that a great quarter could earn back.
-
-### 2. Long-horizon planning spine, server-enforced
-A `record_decision` (regime label, edge summary, intended exposure, top
-convictions, uncertainty) is mandatory before every `advance_day`. The agent
-literally cannot tick the clock without committing a thesis on the record.
-Every advance leaves a paper trail the reward function can audit.
-
-### 3. Anti-memorization is structural, not aspirational
-Aliased universe (`tier_a01` ... `tier_a10`, real ticker symbols never appear
-in any tool output) layered with a randomly drawn source window from the broad
-[2018, today] pool, per-build alias-to-ticker permutation, and σ=0.0005
-return-noise overlay. Plus the standard SQL/tool/FS/rules-clause stack so the
-agent has to derive strategy from data it can see, not retrieve it from
-weight memory.
+# Static prompt-evolution figure cards (these are presentation diagrams,
+# not plots, so they stay as PNG embeds).
+_PROMPT_EVO_QWEN_HTML = figure_card(
+    src="prompt_evolution.png",
+    title="prompt evolution",
+    meta="qwen3-32b · baseline → iter 5",
+    caption=(
+        "Across 5 reflections under the 1.10x length cap, only three regions of "
+        "the prompt moved. The reflector left the anti-memorization rules-clause, "
+        "the worked-example shape, the tool surface, the tier definitions, the "
+        "output contract, and the sandbox spec as written. <strong>That conservatism "
+        "is why the optimization curve stayed monotone.</strong>"
+    ),
+)
+
+
+_PROMPT_EVO_GLM_HTML = figure_card(
+    src="prompt_evolution_glm.png",
+    title="prompt evolution",
+    meta="glm-5.1 · baseline → iter 3",
+    caption=(
+        "GLM-5.1 prompt evolution across the comparative 3-iter run. Same "
+        "1.10x length cap; same surgical-edit constraint. Section diffs differ "
+        "because GLM's baseline failure mode was the opposite of Qwen's: extreme "
+        "under-execution (2 orders, 81 sandbox calls)."
+    ),
+)
+
+
+# ── 06 / Run it ─────────────────────────────────────────────────
+_SECTION_06_HTML = """
+<section id="tb-section-06" class="tb-numbered-section tb-reveal">
+    <div class="tb-numbered-head">
+        <div class="tb-numbered-tag">
+            <span class="is-accent">06</span> / 06 &middot; Try it
+        </div>
+        <div>
+            <h2 class="tb-numbered-title">
+                OpenEnv-compliant. Drop into any
+                <span class="tb-accent">TRL</span> training loop.
+            </h2>
+            <p class="tb-numbered-sub">
+                The deployed env at <code>yobro4619/tradebench</code> exposes the standard
+                OpenEnv surface: <code>/reset</code>, <code>/step</code>, <code>/state</code>,
+                <code>/schema</code>, plus a WebSocket session at <code>/ws</code>. Every
+                iteration's prompt, trajectory, and reflector response is committed under
+                <code>artifacts/</code>; the run is auditable and replayable end to end.
+            </p>
+        </div>
+    </div>
+
+    <div class="tb-link-grid">
+        <a class="tb-link-card"
+           href="https://huggingface.co/spaces/yobro4619/tradebench"
+           target="_blank" rel="noreferrer">
+            <div class="tb-link-eyebrow">LIVE &middot; HF Space</div>
+            <div class="tb-link-title">yobro4619 / tradebench</div>
+            <div class="tb-link-sub">FastAPI + Gradio &middot; Docker &middot; OpenEnv routes</div>
+        </a>
+        <a class="tb-link-card"
+           href="https://github.com/PrathamSingla15/openenv_raethx_finals"
+           target="_blank" rel="noreferrer">
+            <div class="tb-link-eyebrow">CODE &middot; GitHub</div>
+            <div class="tb-link-title">openenv_raethx_finals</div>
+            <div class="tb-link-sub">env, reward, sandbox, reflector, verifier &middot; MIT</div>
+        </a>
+        <a class="tb-link-card"
+           href="https://colab.research.google.com/github/PrathamSingla15/openenv_raethx_finals/blob/main/notebooks/training.ipynb"
+           target="_blank" rel="noreferrer">
+            <div class="tb-link-eyebrow">TRAIN &middot; Colab</div>
+            <div class="tb-link-title">notebooks/training.ipynb</div>
+            <div class="tb-link-sub">end-to-end reflection loop against the deployed env</div>
+        </a>
+    </div>
+
+    <div class="tb-curl">
+<pre><span class="tb-curl-cmt"># reset the env on the test tier</span>
+curl <span class="tb-curl-flag">-X</span> POST https://yobro4619-tradebench.hf.space/reset \\
+     <span class="tb-curl-flag">-H</span> 'Content-Type: application/json' \\
+     <span class="tb-curl-flag">-d</span> '{"task_tier":"test","seed":42}'</pre>
+    </div>
+
+    <a class="tb-deepdive-link" href="#" data-tb-tab="Run">
+        Run a single step from the demo tab
+        <span class="tb-deepdive-arrow" aria-hidden="true">&#x2197;</span>
+    </a>
+</section>
+"""
+
+
+# ── Final CTA ───────────────────────────────────────────────────
+_FINAL_CTA_HTML = """
+<section class="tb-final-cta tb-reveal">
+    <h2 class="tb-final-cta-title">
+        <span class="tb-faded">Run the env.</span>
+        <span class="tb-faded">Read the writeup.</span>
+        Train an agent on it.
+    </h2>
+    <div class="tb-final-cta-links">
+        <a class="tb-final-cta-link"
+           href="https://huggingface.co/spaces/yobro4619/tradebench"
+           target="_blank" rel="noreferrer">HF Space &rarr;</a>
+        <a class="tb-final-cta-link"
+           href="https://github.com/PrathamSingla15/openenv_raethx_finals"
+           target="_blank" rel="noreferrer">GitHub &rarr;</a>
+        <a class="tb-final-cta-link"
+           href="https://github.com/PrathamSingla15/openenv_raethx_finals/blob/main/Blog.md"
+           target="_blank" rel="noreferrer">Writeup &rarr;</a>
+    </div>
+</section>
 """
 
 
+# ── Headline figure caption blocks (lifted from Blog § 7) ───────
+_CAP_REWARD_TRAJ = _plot_caption(
+    eyebrow="Headline · Both models",
+    title="Reward trajectory across reflection iterations.",
+    body=(
+        "<strong>Both models climbed.</strong> Qwen converged smoothly across 5 iterations "
+        "with no regressions. GLM showed a sharp jump at iter 1, a small dip at iter 2, "
+        "then recovered to a new best at iter 3. The y-axis is mean per-bar composite "
+        "reward on the held-out 119-bar test episode."
+    ),
+)
+
+
+# ── Caption blocks (Qwen) ───────────────────────────────────────
+_CAP_QWEN_EQUITY = _plot_caption(
+    eyebrow="Figure 1 · Qwen3-32B",
+    title="Equity curves across all six iterations vs equal-weight buy-and-hold.",
+    body=(
+        "Every iteration's prompt produces a higher-equity trajectory than the prior. "
+        "Baseline (red dashed) ends at +2.78%; iter 5 (dark green, thick) ends at +9.89%, "
+        "the closest any iteration gets to the equal-weight buy-and-hold reference (blue "
+        "dashed, +15.96%). All six runs share the same prices, the same available actions, "
+        "and the same scaffold; only the system prompt changed between them."
+    ),
+)
+
+
+_CAP_QWEN_ROI = _plot_caption(
+    eyebrow="Figure 4 · Qwen3-32B",
+    title="ROI bars and score per iteration.",
+    body=(
+        "ROI and score_normalized track together but not identically. Score combines seven "
+        "components; ROI is only one input. The two-axis view shows the agent improving on "
+        "the composite signal even when realized ROI is noisy across iterations."
+    ),
+)
+
+
+_CAP_QWEN_ALPHA = _plot_caption(
+    eyebrow="Per-bar · Qwen3-32B",
+    title="Cumulative log-alpha vs equal-weight B&H.",
+    body=(
+        "Baseline (red dashed) bled alpha to B&H all the way to roughly &minus;13 log-points "
+        "by bar 119. Iter 5 (green) cut that gap to roughly &minus;5 log-points and held "
+        "flat across the back half of the episode."
+    ),
+)
+
+
+_CAP_QWEN_ACTION = _plot_caption(
+    eyebrow="Figure 5 · Qwen3-32B",
+    title="Action mix evolution.",
+    body=(
+        "<code>place_order</code> tripled (4 &rarr; 12); the agent learned to act on its "
+        "convictions rather than record an intent and never file it. <code>view_*</code> "
+        "went from 6 to 31 calls. <code>sandbox_exec</code> dropped 22&times; from baseline "
+        "in a single iteration window once the reflector steered the agent toward acting on "
+        "existing analysis."
+    ),
+)
+
+
+_CAP_QWEN_COMPONENTS = _plot_caption(
+    eyebrow="Figure 6 · Qwen3-32B",
+    title="Reward components, baseline vs iter 5.",
+    body=(
+        "<code>c_alpha</code> gained +0.033, <code>c_return</code> +0.023, "
+        "<code>c_consistency</code> +0.035 mean per-bar &mdash; the three components that "
+        "move when the agent trades into positions and holds them. <code>c_drawdown</code> "
+        "dropped slightly: more positions means more interim mark-to-market noise. The reward "
+        "isn't being gamed; the policy is improving along the axes the reward measures."
+    ),
+)
+
+
+# ── Caption blocks (GLM) ────────────────────────────────────────
+_CAP_GLM_EQUITY = _plot_caption(
+    eyebrow="Figure 8 · GLM-5.1",
+    title="Equity curves across four iterations vs B&H.",
+    body=(
+        "Baseline (red dashed) ends at +2.83%; iter 3 (dark green, thick) ends at +4.69%, "
+        "the best of any GLM iteration. Same prices, same actions, same scaffold; only the "
+        "prompt changed. Annualized Sharpe at iter 3 is +2.32, beating equal-weight B&H's "
+        "+1.79 on the same window."
+    ),
+)
+
+
+_CAP_GLM_ROI = _plot_caption(
+    eyebrow="Figure 7 · GLM-5.1",
+    title="ROI bars and score per iteration.",
+    body=(
+        "GLM's trajectory was non-monotone: it dipped at iter 2 then recovered at iter 3 "
+        "where Qwen climbed cleanly. Same loop, different base model, qualitatively "
+        "different optimization curve."
+    ),
+)
+
+
+_CAP_GLM_ALPHA = _plot_caption(
+    eyebrow="Per-bar · GLM-5.1",
+    title="Cumulative log-alpha vs B&H.",
+    body=(
+        "GLM-5.1 baseline-to-final cumulative alpha gap. The recovery is less pronounced "
+        "than Qwen's iter 5 because GLM had three iterations rather than five, but the "
+        "direction is the same."
+    ),
+)
+
+
+_CAP_GLM_ACTION = _plot_caption(
+    eyebrow="Action mix · GLM-5.1",
+    title="Behavioral action mix per iteration.",
+    body=(
+        "GLM's baseline was a more extreme under-trader than Qwen's: 2 orders versus 4, "
+        "88 <code>view_*</code> versus 6, 81 <code>sandbox_exec</code> versus 22. So the "
+        "reflector had a bigger initial signal, and the first iteration produced a "
+        "correspondingly larger jump (about 3&times; Qwen's iter-1 gain)."
+    ),
+)
+
+
+_CAP_GLM_COMPONENTS = _plot_caption(
+    eyebrow="Reward components · GLM-5.1",
+    title="Mean per-bar contribution, baseline vs iter 3.",
+    body=(
+        "Same component decomposition pattern as Qwen, smaller magnitudes. The bounded-"
+        "component reward + multiplicative compliance gate held across both models for the "
+        "full 9 reflection iterations: zero rules-clause hits, zero forbidden-global hits, "
+        "zero compliance-gate zeros."
+    ),
+)
+
+
+_QWEN_BANNER = _model_banner(
+    "Qwen3-32B (Groq)",
+    (
+        "Five reflection iterations on the canonical TradeBench harness. Score lifted "
+        "0.6155 &rarr; 0.6584 monotonically; ROI grew +2.78% &rarr; +9.89% (3.6&times; "
+        "absolute). Every figure is interactive &mdash; hover for per-bar values."
+    ),
+)
+
+
+_GLM_BANNER = _model_banner(
+    "GLM-5.1 (Together)",
+    (
+        "Three reflection iterations as a comparative trajectory. Score moved 0.6243 "
+        "&rarr; 0.6453 (best at iter 3, with a small dip-then-recover shape). ROI grew "
+        "+2.83% &rarr; +4.69%. Different base model, qualitatively different optimization "
+        "curve, same converged operating point."
+    ),
+)
+
+
 def render() -> None:
+    """Render the complete landing scroll for the Trajectory tab."""
+    # Lazy import so a Plotly / data_loader hiccup doesn't crash the module.
+    try:
+        from .. import plots
+        plots_ok = True
+    except Exception as exc:  # pragma: no cover - defensive fallback
+        logger.warning("Plotly figures disabled: %s", exc)
+        plots_ok = False
+
     gr.HTML(_HERO_HTML)
-    gr.Plot(value=plots.reward_trajectory(), show_label=False)
-    gr.Markdown(_PILLARS_MD)
+    gr.HTML(_SECTION_01_HTML)
+    gr.HTML(_SECTION_02_HTML)
+    gr.HTML(_SECTION_03_HTML)
+    gr.HTML(_SECTION_04_HTML)
+
+    gr.HTML(_SECTION_05_INTRO_HTML)
+
+    # Headline interactive figure (replaces the static reward_evolution.png).
+    if plots_ok:
+        gr.HTML(_CAP_REWARD_TRAJ)
+        gr.Plot(plots.reward_trajectory(), show_label=False)
+    else:
+        gr.HTML(figure_card(
+            src="reward_evolution.png",
+            title="reward trajectory",
+            meta="qwen3-32b vs glm-5.1",
+            caption=(
+                "Both models climbed. Qwen converged smoothly across 5 iterations; "
+                "GLM had a small dip-then-recover at iter 2&ndash;3."
+            ),
+        ))
+
+    # ── Qwen3-32B all-figures cluster ──
+    gr.HTML(_QWEN_BANNER)
+    gr.HTML(_QWEN_TABLE_HTML)
+
+    if plots_ok:
+        gr.HTML(_CAP_QWEN_EQUITY)
+        gr.Plot(plots.equity_curves(plots.QWEN_ID), show_label=False)
+
+        gr.HTML(_CAP_QWEN_ROI)
+        gr.Plot(plots.roi_score_combined(plots.QWEN_ID), show_label=False)
+
+        gr.HTML(_CAP_QWEN_ALPHA)
+        gr.Plot(plots.bar_alpha_vs_bnh(plots.QWEN_ID), show_label=False)
+
+        gr.HTML(_CAP_QWEN_ACTION)
+        gr.Plot(plots.action_mix(plots.QWEN_ID), show_label=False)
+
+        gr.HTML(_CAP_QWEN_COMPONENTS)
+        gr.Plot(plots.reward_components(plots.QWEN_ID), show_label=False)
+
+    gr.HTML(_PROMPT_EVO_QWEN_HTML)
+
+    # ── GLM-5.1 mirror ──
+    gr.HTML(_GLM_BANNER)
+    gr.HTML(_GLM_TABLE_HTML)
+
+    if plots_ok:
+        gr.HTML(_CAP_GLM_EQUITY)
+        gr.Plot(plots.equity_curves(plots.GLM_ID), show_label=False)
+
+        gr.HTML(_CAP_GLM_ROI)
+        gr.Plot(plots.roi_score_combined(plots.GLM_ID), show_label=False)
+
+        gr.HTML(_CAP_GLM_ALPHA)
+        gr.Plot(plots.bar_alpha_vs_bnh(plots.GLM_ID), show_label=False)
+
+        gr.HTML(_CAP_GLM_ACTION)
+        gr.Plot(plots.action_mix(plots.GLM_ID), show_label=False)
+
+        gr.HTML(_CAP_GLM_COMPONENTS)
+        gr.Plot(plots.reward_components(plots.GLM_ID), show_label=False)
+
+    gr.HTML(_PROMPT_EVO_GLM_HTML)
+
+    # Deep-dive link out of section 05.
+    gr.HTML(
+        '<a class="tb-deepdive-link tb-reveal" href="#" data-tb-tab="Reflection Loop">'
+        'Open the full reflection loop deep-dive'
+        '<span class="tb-deepdive-arrow" aria-hidden="true">&#x2197;</span>'
+        '</a>'
+    )
+
+    gr.HTML(_SECTION_06_HTML)
+    gr.HTML(_FINAL_CTA_HTML)

server/ui/tabs/results.py

@@ -1,34 +1,62 @@
-"""Reflection-Loop tab: the headline results, both models, all interactive."""
+"""Reflection-Loop tab — the headline results, both models, embedded as the
+canonical PNG figures from ``docs/figures/``."""
 
 from __future__ import annotations
 
 import gradio as gr
 
-from .. import plots
+from ..figures import figure_card
 
 
 _INTRO_HTML = """
-<div class="tb-section-eyebrow">reflection-loop · 5 iterations Qwen · 3 iterations GLM</div>
-<h2 class="tb-section-title">Each iteration: Claude Opus 4.7 reads the prior
-trajectory, names the single most-costly failure mode, and proposes a surgical
-edit (≤ 1.10× length cap). The model weights are never touched.</h2>
+<div class="tb-section-eyebrow">reflection-loop &middot; 5 iters qwen &middot; 3 iters glm</div>
+<h2 class="tb-section-title">
+    Each iteration: <span class="tb-accent">Claude Opus 4.7</span> reads the prior
+    trajectory, names the single most-costly failure mode, and proposes a surgical
+    edit. <span class="tb-faded">The model weights are never touched.</span>
+</h2>
 
-<p class="tb-section-lead">
+<p class="tb-section-lead tb-section-lead-mute">
     Two open-weights base models, identical reflection harness, identical evaluation.
-    Charts are interactive: hover for per-iter detail; toggle traces in the legend;
-    drag to zoom on the per-bar alpha plot.
+    Length budget capped at 1.10x the previous iteration's prompt. Five iterations
+    on Qwen3-32B (Groq), three on GLM-5.1 (Together).
 </p>
-"""
+""" + figure_card(
+    src="reward_evolution.png",
+    title="reward evolution",
+    meta="qwen3-32b vs glm-5.1",
+    caption="Both curves climb. Qwen converges smoothly across 5 iterations with no "
+            "regressions; GLM dips on iter 2 before recovering on iter 3. The y-axis "
+            "is mean per-bar composite reward on the held-out 119-bar test episode.",
+)
+
+
+_PROMPT_FIGURE_HTML = figure_card(
+    src="prompt_evolution.png",
+    title="system prompt evolution",
+    meta="baseline &rarr; iter 5 &middot; qwen3-32b",
+    caption="Three sections changed across 5 reflections; the rest of the prompt was "
+            "preserved. The 1.10x length cap was respected on every iteration.",
+)
 
 
 _QWEN_HEADER = """
-<div class="tb-section-eyebrow">Qwen3-32B  ·  Groq  ·  5 iterations</div>
-<h2 class="tb-section-title">Score climbed monotonically from 0.6155 to 0.6584
-(+4.3 pp); ROI grew from +2.78% to +9.89% (3.6× absolute).</h2>
+<div class="tb-section-head">
+    <div>
+        <div class="tb-section-eyebrow">model 01 / 02 &middot; qwen3-32b &middot; groq</div>
+        <h2 class="tb-section-title">
+            Score climbed monotonically from <span class="tb-num">0.6155</span>
+            to <span class="tb-num">0.6584</span>
+            <span class="tb-faded">(+4.3 pp);</span>
+            ROI grew <span class="tb-num">3.6&times;</span>.
+        </h2>
+    </div>
+    <div></div>
+</div>
 
-<table class="tb-table" style="margin-bottom: 0;">
+<table class="tb-table">
     <thead>
-        <tr><th>Iter</th><th>Score</th><th>ROI</th><th>place_order</th><th>sandbox_exec</th><th>view_*</th></tr>
+        <tr><th>Iter</th><th class="mono">Score</th><th class="mono">ROI</th><th class="mono">place_order</th><th class="mono">sandbox_exec</th><th class="mono">view_*</th></tr>
     </thead>
     <tbody>
         <tr><td><strong>0 baseline</strong></td><td class="mono">0.6155</td><td class="mono">+2.78%</td><td class="mono">4</td><td class="mono">22</td><td class="mono">6</td></tr>
@@ -41,33 +69,74 @@ _QWEN_HEADER = """
 </table>
 """
 
+_QWEN_FIGURES_HTML = (
+    figure_card(
+        src="reward_roi_combined.png",
+        title="roi + score per iteration",
+        meta="qwen3-32b &middot; 5 iters",
+        caption="Twin-axis: ROI bars on the left axis grow from +2.78% to +9.89%; "
+                "score line on the right axis rises monotonically from 0.6155 to 0.6584.",
+    )
+    + figure_card(
+        src="bar_alpha_vs_bnh.png",
+        title="per-bar alpha vs equal-weight b&amp;h",
+        meta="baseline vs iter 5 &middot; qwen3-32b",
+        caption="<strong>The alpha gap closed from -0.136 log-points to -0.061</strong>. "
+                "Reflection cut the bar-by-bar tracking error against the equal-weight "
+                "buy-and-hold baseline by more than half.",
+    )
+    + figure_card(
+        src="action_mix_evolution.png",
+        title="action mix per iteration",
+        meta="qwen3-32b &middot; 5 iters",
+        caption="Reflection drove more <code>place_order</code> calls (4 &rarr; 12), "
+                "more selective <code>sandbox_exec</code> usage, and dramatically more "
+                "state inspection via <code>view_*</code>.",
+    )
+    + figure_card(
+        src="reward_components_baseline_vs_final.png",
+        title="reward components &middot; baseline vs final",
+        meta="qwen3-32b &middot; sorted by |&Delta;|",
+        caption="Mean per-bar contribution per component, baseline vs iter 5. "
+                "<strong>c_alpha is the dominant gainer</strong> &mdash; exactly what "
+                "we'd expect from a policy that learned to actually trade.",
+    )
+)
+
 
 _QWEN_DIAGNOSIS = """
-<div class="tb-section-eyebrow">iter 5 · opus diagnosis</div>
+<div class="tb-section-eyebrow">iter 5 &middot; opus diagnosis</div>
 <blockquote class="tb-quote">
-    "After the initial build on bar 1 the agent essentially never re-checks the
+    After the initial build on bar 1 the agent essentially never re-checks the
     gap between its recorded 0.60 intended_exposure and its actual ~0.20 gross
-    — it records new decisions and advances for 100+ bars without ever firing
-    the remaining build legs, yielding only 14 place_orders over 119 bars."
+    &mdash; it records new decisions and advances for 100+ bars without ever firing
+    the remaining build legs, yielding only 14 place_orders over 119 bars.
 </blockquote>
 <p class="tb-section-lead tb-section-lead-mute">
-    <strong>Surgical edit:</strong> §5 step-4 strengthened to also cover bars
-    2-3 when the initial build is incomplete; §7.5 named the exact failure
+    <strong>Surgical edit:</strong> &sect;5 step-4 strengthened to also cover bars
+    2-3 when the initial build is incomplete; &sect;7.5 named the exact failure
     pattern ("two legs filled out of five committed") so the agent could
     recognize itself doing it. After the edit landed, place_order count rose
-    14 → 12 (selective, not just busy) and ROI rose +6.96% → +9.89%.
+    14 &rarr; 12 (selective, not just busy) and ROI rose +6.96% &rarr; +9.89%.
 </p>
 """
 
 
 _GLM_HEADER = """
-<div class="tb-section-eyebrow">GLM-5.1  ·  Together  ·  3 iterations</div>
-<h2 class="tb-section-title">A different starting pathology, the same converged
-behavior: more orders, more selective sandbox use, more state inspection.</h2>
+<div class="tb-section-head">
+    <div>
+        <div class="tb-section-eyebrow">model 02 / 02 &middot; glm-5.1 &middot; together</div>
+        <h2 class="tb-section-title">
+            <span class="tb-faded">A different starting pathology,</span>
+            the same converged behavior.
+        </h2>
+    </div>
+    <div></div>
+</div>
 
-<table class="tb-table" style="margin-bottom: 0;">
+<table class="tb-table">
     <thead>
-        <tr><th>Iter</th><th>Score</th><th>ROI</th><th>place_order</th><th>sandbox_exec</th><th>view_*</th></tr>
+        <tr><th>Iter</th><th class="mono">Score</th><th class="mono">ROI</th><th class="mono">place_order</th><th class="mono">sandbox_exec</th><th class="mono">view_*</th></tr>
     </thead>
     <tbody>
         <tr><td><strong>0 baseline</strong></td><td class="mono">0.6243</td><td class="mono">+2.83%</td><td class="mono">2</td><td class="mono">81</td><td class="mono">88</td></tr>
@@ -87,29 +156,65 @@ conditions, not patching one model's idiosyncratic quirks.
 </p>
 """
 
+_GLM_FIGURES_HTML = (
+    figure_card(
+        src="reward_roi_combined_glm.png",
+        title="roi + score per iteration",
+        meta="glm-5.1 &middot; 3 iters",
+        caption="Score climbs from 0.6243 to 0.6453 with a small dip on iter 2 "
+                "before recovering. ROI grows from +2.83% to +4.69%.",
+    )
+    + figure_card(
+        src="bar_alpha_vs_bnh_glm.png",
+        title="per-bar alpha vs equal-weight b&amp;h",
+        meta="baseline vs iter 3 &middot; glm-5.1",
+        caption="GLM's alpha gap also closed across reflection &mdash; same direction "
+                "as Qwen, smaller magnitude given the shorter loop.",
+    )
+    + figure_card(
+        src="action_mix_evolution_glm.png",
+        title="action mix per iteration",
+        meta="glm-5.1 &middot; 3 iters",
+        caption="GLM moved from <em>think-first-act-rarely</em> toward more orders "
+                "and more selective <code>sandbox_exec</code> usage &mdash; the same "
+                "operating point Qwen converged to from the opposite direction.",
+    )
+    + figure_card(
+        src="reward_components_baseline_vs_final_glm.png",
+        title="reward components &middot; baseline vs final",
+        meta="glm-5.1 &middot; sorted by |&Delta;|",
+        caption="Same component decomposition as Qwen, computed against GLM's own "
+                "baseline.",
+    )
+)
+
 
 _INSIGHT_HTML = """
 <div class="tb-section-eyebrow">three observations from the head-to-head</div>
+<h2 class="tb-section-title">
+    <span class="tb-faded">What we learned by running</span>
+    the same loop on two different models.
+</h2>
 
 <div class="tb-three-up">
     <div class="tb-card">
-        <div class="tb-card-num">i.</div>
+        <div class="tb-card-num">01 / 03</div>
         <div class="tb-card-title">Same loop, different curves</div>
         <div class="tb-card-body">Qwen converged smoothly across 5 iterations
-            with no regressions. GLM had a small iter-1 → iter-2 dip before
+            with no regressions. GLM had a small iter-1 to iter-2 dip before
             recovering. Stronger instruction-following lets the loop convert
             each reflector edit into a behavioral improvement more reliably.</div>
     </div>
     <div class="tb-card">
-        <div class="tb-card-num">ii.</div>
+        <div class="tb-card-num">02 / 03</div>
         <div class="tb-card-title">Bigger pathology, bigger first jump</div>
         <div class="tb-card-body">GLM's iter-1 score gain (+0.019) was about
-            <strong>3×</strong> Qwen's (+0.006). GLM had a more egregious
+            <strong>3&times;</strong> Qwen's (+0.006). GLM had a more egregious
             starting policy (2 orders, 88 view_*) for the reflector to call
             out. The first edit always lands hardest.</div>
     </div>
     <div class="tb-card">
-        <div class="tb-card-num">iii.</div>
+        <div class="tb-card-num">03 / 03</div>
         <div class="tb-card-title">Opposite starts, convergent ends</div>
         <div class="tb-card-body">Both models drifted toward more orders, more
             selective sandbox usage, and dramatically more state inspection.
@@ -123,27 +228,10 @@ _INSIGHT_HTML = """
 
 def render() -> None:
     gr.HTML(_INTRO_HTML)
-    gr.Plot(value=plots.reward_trajectory(), show_label=False)
-
+    gr.HTML(_PROMPT_FIGURE_HTML)
     gr.HTML(_QWEN_HEADER)
-    with gr.Row():
-        gr.Plot(value=plots.roi_score_combined(plots.QWEN_ID), show_label=False)
-    with gr.Row():
-        gr.Plot(value=plots.bar_alpha_vs_bnh(plots.QWEN_ID), show_label=False)
-    with gr.Row():
-        gr.Plot(value=plots.action_mix(plots.QWEN_ID), show_label=False)
-    with gr.Row():
-        gr.Plot(value=plots.reward_components(plots.QWEN_ID), show_label=False)
+    gr.HTML(_QWEN_FIGURES_HTML)
     gr.HTML(_QWEN_DIAGNOSIS)
-
     gr.HTML(_GLM_HEADER)
-    with gr.Row():
-        gr.Plot(value=plots.roi_score_combined(plots.GLM_ID), show_label=False)
-    with gr.Row():
-        gr.Plot(value=plots.bar_alpha_vs_bnh(plots.GLM_ID), show_label=False)
-    with gr.Row():
-        gr.Plot(value=plots.action_mix(plots.GLM_ID), show_label=False)
-    with gr.Row():
-        gr.Plot(value=plots.reward_components(plots.GLM_ID), show_label=False)
-
+    gr.HTML(_GLM_FIGURES_HTML)
     gr.HTML(_INSIGHT_HTML)

server/ui/tabs/rewards.py

@@ -1,17 +1,18 @@
-"""Reward tab: the 7-component convex composite formula, weights chart,
+"""Reward tab — the 7-component convex composite formula, weights chart,
 exploit register, and the live RewardBreakdown dataclass."""
 
 from __future__ import annotations
 
 import gradio as gr
 
-from .. import plots
-
 
 _INTRO_HTML = r"""
-<div class="tb-section-eyebrow">composite reward · 7 components in [0, 1]</div>
-<h2 class="tb-section-title">Per-bar reward is in [0, 1] by construction. Episode
-score is the mean per-bar reward, also in [0, 1].</h2>
+<div class="tb-section-eyebrow">composite reward &middot; 7 components in [0, 1]</div>
+<h2 class="tb-section-title">
+    Per-bar reward is in <span class="tb-num">[0, 1]</span>
+    <span class="tb-faded">by construction. Episode score is the mean per-bar
+    reward, also in</span> <span class="tb-num">[0, 1]</span>.
+</h2>
 
 <p class="tb-section-lead">
     The seven components are each in [0, 1], the seven weights sum to 1.0, and
@@ -20,20 +21,20 @@ score is the mean per-bar reward, also in [0, 1].</h2>
 </p>
 
 <div class="tb-formula">
-<pre>r_t = (Σᵢ wᵢ · cᵢ_t) · g_compliance_t                    # in [0, 1]
+<pre>r_t = (&Sigma;<sub>i</sub> w<sub>i</sub> &middot; c<sub>i,t</sub>) &middot; g_compliance<sub>t</sub>                    # in [0, 1]
 
 components (each in [0, 1]):
-  c_alpha       sigmoid(8 · cumulative_log_alpha_vs_bench)        w = 0.40
-  c_return      sigmoid(5 · cumulative_log_return)                w = 0.15
-  c_drawdown    1 − 2 · min(dd, 0.5)                              w = 0.10
-  c_solvency    sigmoid(6 · (V − 0.5·V₀) / (0.5·V₀))              w = 0.10
-  c_efficiency  exp(−2 · max(0, turnover − 0.10))                 w = 0.10
-  c_diversity   1 − clip((HHI − 0.10) / 0.90, 0, 1)               w = 0.05
-  c_consistency win · stability + (1 − win) · 0.5                 w = 0.10
+  c_alpha       sigmoid(8 &middot; cumulative_log_alpha_vs_bench)        w = 0.40
+  c_return      sigmoid(5 &middot; cumulative_log_return)                w = 0.15
+  c_drawdown    1 &minus; 2 &middot; min(dd, 0.5)                              w = 0.10
+  c_solvency    sigmoid(6 &middot; (V &minus; 0.5&middot;V<sub>0</sub>) / (0.5&middot;V<sub>0</sub>))              w = 0.10
+  c_efficiency  exp(&minus;2 &middot; max(0, turnover &minus; 0.10))                 w = 0.10
+  c_diversity   1 &minus; clip((HHI &minus; 0.10) / 0.90, 0, 1)               w = 0.05
+  c_consistency win &middot; stability + (1 &minus; win) &middot; 0.5                 w = 0.10
 
 compliance gate (multiplicative, not additive):
-  g_compliance = (1 − viol_rules) · (1 − viol_hack) · (1 − lev_breach)
-  with lev_breach = 1{gross_leverage > 1.0}.   Any single violation zeros the bar.
+  g_compliance = (1 &minus; viol_rules) &middot; (1 &minus; viol_hack) &middot; (1 &minus; lev_breach)
+  with lev_breach = 1{gross_leverage &gt; 1.0}.   Any single violation zeros the bar.
 
 episode score:
   score_normalized = mean over bars of r_t                        in [0, 1]</pre>
@@ -41,19 +42,85 @@ episode score:
 """
 
 
+# Inline SVG bar chart for the convex composite weights. Pure-black canvas,
+# matches the editorial palette without Plotly overhead.
+_RECIPE_SVG_HTML = """
+<figure class="tb-figure">
+    <div class="tb-figure-head">
+        <div class="tb-figure-title">convex composite weights</div>
+        <div class="tb-figure-meta">7 components &middot; sum = 1.00</div>
+    </div>
+    <div class="tb-figure-body is-dark" style="padding: 32px 24px;">
+        <svg viewBox="0 0 880 320" style="width: 100%; height: auto;" role="img" aria-label="Convex composite weights">
+            <defs>
+                <linearGradient id="rwGrad" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stop-color="#67E8F9"/>
+                    <stop offset="100%" stop-color="#0E7490"/>
+                </linearGradient>
+            </defs>
+            <g font-family="IBM Plex Mono, monospace" font-size="11" fill="rgba(255,255,255,0.40)">
+                <line x1="60" y1="40" x2="60" y2="240" stroke="rgba(255,255,255,0.10)" stroke-width="1"/>
+                <line x1="60" y1="240" x2="860" y2="240" stroke="rgba(255,255,255,0.10)" stroke-width="1"/>
+                <text x="48" y="44" text-anchor="end">0.40</text>
+                <text x="48" y="124" text-anchor="end">0.20</text>
+                <text x="48" y="204" text-anchor="end">0.10</text>
+                <text x="48" y="244" text-anchor="end">0.00</text>
+            </g>
+            <!-- 7 bars: c_alpha=.40, c_return=.15, c_drawdown=.10, c_solvency=.10, c_efficiency=.10, c_diversity=.05, c_consistency=.10 -->
+            <g>
+                <rect x="100" y="80"  width="80" height="160" fill="url(#rwGrad)"/>
+                <text x="140" y="68" text-anchor="middle" font-family="IBM Plex Mono, monospace" font-size="13" fill="#FFFFFF" font-weight="500">0.40</text>
+                <text x="140" y="262" text-anchor="middle" font-family="IBM Plex Mono, monospace" font-size="11" fill="rgba(255,255,255,0.66)">c_alpha</text>
+
+                <rect x="200" y="180" width="80" height="60" fill="rgba(34,211,238,0.50)"/>
+                <text x="240" y="168" text-anchor="middle" font-family="IBM Plex Mono, monospace" font-size="13" fill="#FFFFFF" font-weight="500">0.15</text>
+                <text x="240" y="262" text-anchor="middle" font-family="IBM Plex Mono, monospace" font-size="11" fill="rgba(255,255,255,0.66)">c_return</text>
+
+                <rect x="300" y="200" width="80" height="40" fill="rgba(34,211,238,0.40)"/>
+                <text x="340" y="188" text-anchor="middle" font-family="IBM Plex Mono, monospace" font-size="13" fill="#FFFFFF" font-weight="500">0.10</text>
+                <text x="340" y="262" text-anchor="middle" font-family="IBM Plex Mono, monospace" font-size="11" fill="rgba(255,255,255,0.66)">c_drawdown</text>
+
+                <rect x="400" y="200" width="80" height="40" fill="rgba(34,211,238,0.40)"/>
+                <text x="440" y="188" text-anchor="middle" font-family="IBM Plex Mono, monospace" font-size="13" fill="#FFFFFF" font-weight="500">0.10</text>
+                <text x="440" y="262" text-anchor="middle" font-family="IBM Plex Mono, monospace" font-size="11" fill="rgba(255,255,255,0.66)">c_solvency</text>
+
+                <rect x="500" y="200" width="80" height="40" fill="rgba(34,211,238,0.40)"/>
+                <text x="540" y="188" text-anchor="middle" font-family="IBM Plex Mono, monospace" font-size="13" fill="#FFFFFF" font-weight="500">0.10</text>
+                <text x="540" y="262" text-anchor="middle" font-family="IBM Plex Mono, monospace" font-size="11" fill="rgba(255,255,255,0.66)">c_efficiency</text>
+
+                <rect x="600" y="220" width="80" height="20" fill="rgba(34,211,238,0.30)"/>
+                <text x="640" y="208" text-anchor="middle" font-family="IBM Plex Mono, monospace" font-size="13" fill="#FFFFFF" font-weight="500">0.05</text>
+                <text x="640" y="262" text-anchor="middle" font-family="IBM Plex Mono, monospace" font-size="11" fill="rgba(255,255,255,0.66)">c_diversity</text>
+
+                <rect x="700" y="200" width="80" height="40" fill="rgba(34,211,238,0.40)"/>
+                <text x="740" y="188" text-anchor="middle" font-family="IBM Plex Mono, monospace" font-size="13" fill="#FFFFFF" font-weight="500">0.10</text>
+                <text x="740" y="262" text-anchor="middle" font-family="IBM Plex Mono, monospace" font-size="11" fill="rgba(255,255,255,0.66)">c_consistency</text>
+            </g>
+            <text x="440" y="300" text-anchor="middle" font-family="IBM Plex Mono, monospace" font-size="11" fill="rgba(255,255,255,0.40)" letter-spacing="2">
+                weights sum to 1.00 &middot; multiplied by {0,1} compliance gate
+            </text>
+        </svg>
+    </div>
+</figure>
+"""
+
+
 _DESIGN_NOTES_HTML = """
 <div class="tb-section-eyebrow">three design choices that matter</div>
+<h2 class="tb-section-title">
+    <span class="tb-faded">Why this reward, and not the obvious one.</span>
+</h2>
 
 <div class="tb-three-up">
     <div class="tb-card">
-        <div class="tb-card-num">01</div>
+        <div class="tb-card-num">01 / 03</div>
         <div class="tb-card-title">c_alpha is dominant on purpose</div>
         <div class="tb-card-body">A lucky cash-only agent should not beat a thoughtful
-            one in a year when markets happen to fall. Weighting alpha-vs-equal-weight-B&H
+            one in a year when markets happen to fall. Weighting alpha-vs-equal-weight-B&amp;H
             at 0.40 forces the policy to actually generate edge, not just survive.</div>
     </div>
     <div class="tb-card">
-        <div class="tb-card-num">02</div>
+        <div class="tb-card-num">02 / 03</div>
         <div class="tb-card-title">c_consistency is gated</div>
         <div class="tb-card-body">Above-benchmark agents earn it for low downside-alpha
             volatility; sub-benchmark agents fall back to <code>0.5</code> instead of
@@ -61,7 +128,7 @@ _DESIGN_NOTES_HTML = """
             that killed our first reward design.</div>
     </div>
     <div class="tb-card">
-        <div class="tb-card-num">03</div>
+        <div class="tb-card-num">03 / 03</div>
         <div class="tb-card-title">Compliance gate is multiplicative</div>
         <div class="tb-card-body">Cheating zeros the bar's reward outright; there is
             no way for a great Sharpe to earn back a rules-clause hit. Bounded
@@ -72,26 +139,28 @@ _DESIGN_NOTES_HTML = """
 
 
 _EXPLOIT_REGISTER_HTML = """
-<div class="tb-section-eyebrow">exploit register · attack classes mapped to defenses</div>
-<h2 class="tb-section-title">Every plausible reward-hacking strategy mapped to its
-structural defense and the verifier check that proves it.</h2>
+<div class="tb-section-eyebrow">exploit register &middot; attack classes mapped to defenses</div>
+<h2 class="tb-section-title">
+    Every plausible <span class="tb-faded">reward-hacking strategy</span>
+    mapped to its structural defense.
+</h2>
 
 <table class="tb-table">
     <thead>
         <tr><th>#</th><th>Exploit</th><th>Structural defense</th><th>Verifier check</th></tr>
     </thead>
     <tbody>
-        <tr><td class="mono">1</td><td>Penny-order churn</td><td>c_efficiency = exp(−2·max(0, turn−0.10)); per-bar 25-trade cap; record_decision required</td><td>replay reward; flag if mean(turnover) ≫ cap with c_efficiency ≈ 1</td></tr>
+        <tr><td class="mono">1</td><td>Penny-order churn</td><td>c_efficiency = exp(&minus;2&middot;max(0, turn&minus;0.10)); per-bar 25-trade cap; record_decision required</td><td>replay reward; flag if mean(turnover) &gt;&gt; cap with c_efficiency &asymp; 1</td></tr>
         <tr><td class="mono">2</td><td>Buy-and-hold one stock forever</td><td>c_alpha rewards alpha-vs-EW-B&amp;H, not absolute return; c_diversity penalizes HHI spike</td><td>compare on test (regime flip) vs equal-weight baseline</td></tr>
         <tr><td class="mono">3</td><td>Filesystem ls of future partitions</td><td>Progressive FS materialization on advance_day</td><td>leak.fs after every step</td></tr>
-        <tr><td class="mono">4</td><td>Future <code>as_of_date</code> in view tools</td><td>Tool-level date gate; LookaheadViolation → structured error</td><td>conformance.action_rejection</td></tr>
-        <tr><td class="mono">5</td><td>Inflate Sharpe with tiny positions</td><td>c_consistency falls back to 0.5 below B&amp;H; c_alpha still dominates</td><td>flag if mean_position_notional &lt; $100 AND c_consistency → 1</td></tr>
-        <tr><td class="mono">6</td><td>Spread to junk tickers to game HHI</td><td>Curated universe; c_diversity bounded; c_alpha punishes bad allocation</td><td>replay; check ¬(c_diversity ≈ 1 ∧ c_alpha drops)</td></tr>
-        <tr><td class="mono">7</td><td>End-of-episode Sharpe spike</td><td>No terminal bonus; mean per-bar reward is the score</td><td>argmax(c_consistency_t) ≈ uniform across episode</td></tr>
+        <tr><td class="mono">4</td><td>Future <code>as_of_date</code> in view tools</td><td>Tool-level date gate; LookaheadViolation &rarr; structured error</td><td>conformance.action_rejection</td></tr>
+        <tr><td class="mono">5</td><td>Inflate Sharpe with tiny positions</td><td>c_consistency falls back to 0.5 below B&amp;H; c_alpha still dominates</td><td>flag if mean_position_notional &lt; $100 AND c_consistency &rarr; 1</td></tr>
+        <tr><td class="mono">6</td><td>Spread to junk tickers to game HHI</td><td>Curated universe; c_diversity bounded; c_alpha punishes bad allocation</td><td>replay; check &not;(c_diversity &asymp; 1 &and; c_alpha drops)</td></tr>
+        <tr><td class="mono">7</td><td>End-of-episode Sharpe spike</td><td>No terminal bonus; mean per-bar reward is the score</td><td>argmax(c_consistency_t) &asymp; uniform across episode</td></tr>
         <tr><td class="mono">8</td><td>Reflective ledger mutation in sandbox</td><td>Ledger lives in env process; sandbox is read-only data + writable work</td><td>scan_forbidden_globals catches private-attr mutation patterns</td></tr>
         <tr><td class="mono">9</td><td>Subprocess / socket sandbox escape</td><td>Docker network_disabled + seccomp + no-new-privileges + non-root + read-only root</td><td>scan_forbidden_globals catches subprocess. / socket.</td></tr>
         <tr><td class="mono">10</td><td>eval / exec / __import__ for env access</td><td>Pattern-match on the obvious dynamic-execution surface</td><td>tests/rewards/test_anti_hack.py covers all 12 patterns</td></tr>
-        <tr><td class="mono">11</td><td>Memorized recall ("AAPL crashed in March 2020")</td><td>Rules clause + regex over reasoning + edge_summary; viol_rules → gate = 0</td><td>tests/rewards/test_anti_hack.py rules-clause cases</td></tr>
+        <tr><td class="mono">11</td><td>Memorized recall ("AAPL crashed in March 2020")</td><td>Rules clause + regex over reasoning + edge_summary; viol_rules &rarr; gate = 0</td><td>tests/rewards/test_anti_hack.py rules-clause cases</td></tr>
         <tr><td class="mono">12</td><td>Game cumulative score by tripping early termination</td><td>Termination-on-violation does not improve cumulative reward</td><td>replay; viol-zeroed episodes total worse than honest completions</td></tr>
     </tbody>
 </table>
@@ -99,20 +168,22 @@ structural defense and the verifier check that proves it.</h2>
 
 
 _DATACLASS_HTML = """
-<div class="tb-section-eyebrow">surface · RewardBreakdown</div>
-<h2 class="tb-section-title">The dataclass the training loop actually sees.</h2>
+<div class="tb-section-eyebrow">surface &middot; RewardBreakdown</div>
+<h2 class="tb-section-title">
+    <span class="tb-faded">The dataclass the training loop</span> actually sees.
+</h2>
 
 <details class="tb-schema" open>
     <summary>src/tradebench/rewards/composite.py</summary>
 <pre>@dataclass(frozen=True)
 class RewardBreakdown:
-    c_alpha:       float    # [0, 1]  sigmoid(8 · cum_log_alpha_vs_bench)
-    c_return:      float    # [0, 1]  sigmoid(5 · cum_log_return)
-    c_drawdown:    float    # [0, 1]  1 − 2 · min(dd, 0.5)
-    c_solvency:    float    # [0, 1]  sigmoid(6 · (V − 0.5·V0) / (0.5·V0))
-    c_efficiency:  float    # [0, 1]  exp(−2 · max(0, turnover − 0.10))
-    c_diversity:   float    # [0, 1]  1 − clip((HHI − 0.10) / 0.90, 0, 1)
-    c_consistency: float    # [0, 1]  win · stability + (1 − win) · 0.5
+    c_alpha:       float    # [0, 1]  sigmoid(8 &middot; cum_log_alpha_vs_bench)
+    c_return:      float    # [0, 1]  sigmoid(5 &middot; cum_log_return)
+    c_drawdown:    float    # [0, 1]  1 &minus; 2 &middot; min(dd, 0.5)
+    c_solvency:    float    # [0, 1]  sigmoid(6 &middot; (V &minus; 0.5&middot;V0) / (0.5&middot;V0))
+    c_efficiency:  float    # [0, 1]  exp(&minus;2 &middot; max(0, turnover &minus; 0.10))
+    c_diversity:   float    # [0, 1]  1 &minus; clip((HHI &minus; 0.10) / 0.90, 0, 1)
+    c_consistency: float    # [0, 1]  win &middot; stability + (1 &minus; win) &middot; 0.5
     g_compliance:  int      # {0, 1}  zeros the bar on any violation
 
     weights: ClassVar[Mapping[str, float]] = {
@@ -134,7 +205,7 @@ class RewardBreakdown:
 
 def render() -> None:
     gr.HTML(_INTRO_HTML)
-    gr.Plot(value=plots.reward_recipe(), show_label=False)
+    gr.HTML(_RECIPE_SVG_HTML)
     gr.HTML(_DESIGN_NOTES_HTML)
     gr.HTML(_EXPLOIT_REGISTER_HTML)
     gr.HTML(_DATACLASS_HTML)

server/ui/tabs/walk_forward.py

@@ -7,80 +7,91 @@ import gradio as gr
 
 _TEMPORAL_HTML = """
 <div class="tb-section-eyebrow">the temporal contract</div>
-<h2 class="tb-section-title">Observation at <em>t</em> sees only data with
-<code>available_at ≤ t</code>; reward at <em>t→t+1</em> is computed from
-the events ledger up to that boundary, nothing further.</h2>
-
-<svg viewBox="0 0 880 220" style="width: 100%; height: auto; margin-top: 16px;" role="img" aria-label="Temporal contract diagram">
-    <defs>
-        <marker id="arr2" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
-            <path d="M0,0 L10,5 L0,10 z" fill="#22D3EE"/>
-        </marker>
-    </defs>
-
-    <line x1="40" y1="180" x2="840" y2="180" stroke="#1F2731" stroke-width="1"/>
-    <line x1="40" y1="180" x2="840" y2="180" stroke="#22D3EE" stroke-width="1.5" stroke-dasharray="2 6" opacity="0.45"/>
-    <text x="40" y="205" font-family="JetBrains Mono, monospace" font-size="11" fill="#7A8693">t (decision)</text>
-    <text x="840" y="205" font-family="JetBrains Mono, monospace" font-size="11" fill="#7A8693" text-anchor="end">t+1 (next session)</text>
-
-    <g font-family="JetBrains Mono, monospace" font-size="11">
-        <rect x="60"  y="40" width="120" height="60" rx="4" fill="#11161D" stroke="#22D3EE" stroke-width="1"/>
-        <text x="120" y="62" text-anchor="middle" fill="#22D3EE" font-size="10" letter-spacing="1.4">OBSERVE</text>
-        <text x="120" y="80" text-anchor="middle" fill="#7A8693" font-size="10">data ≤ t</text>
-        <text x="120" y="94" text-anchor="middle" fill="#7A8693" font-size="10">read-only</text>
-
-        <rect x="220" y="40" width="120" height="60" rx="4" fill="#11161D" stroke="#22D3EE" stroke-width="1"/>
-        <text x="280" y="62" text-anchor="middle" fill="#22D3EE" font-size="10" letter-spacing="1.4">DECIDE</text>
-        <text x="280" y="80" text-anchor="middle" fill="#7A8693" font-size="10">record_decision</text>
-        <text x="280" y="94" text-anchor="middle" fill="#7A8693" font-size="10">+ rules scan</text>
-
-        <rect x="380" y="40" width="120" height="60" rx="4" fill="#1A2029" stroke="#22D3EE" stroke-width="1.5"/>
-        <text x="440" y="62" text-anchor="middle" fill="#22D3EE" font-size="10" letter-spacing="1.4">SETTLE</text>
-        <text x="440" y="80" text-anchor="middle" fill="#E6E8EB" font-size="10">next-open fills</text>
-        <text x="440" y="94" text-anchor="middle" fill="#E6E8EB" font-size="10">corp actions</text>
-
-        <rect x="540" y="40" width="120" height="60" rx="4" fill="#1A2029" stroke="#22D3EE" stroke-width="1.5"/>
-        <text x="600" y="62" text-anchor="middle" fill="#22D3EE" font-size="10" letter-spacing="1.4">REWARD</text>
-        <text x="600" y="80" text-anchor="middle" fill="#E6E8EB" font-size="10">composite breakdown</text>
-        <text x="600" y="94" text-anchor="middle" fill="#E6E8EB" font-size="10">7 components × gate</text>
-
-        <rect x="700" y="40" width="120" height="60" rx="4" fill="#11161D" stroke="#22D3EE" stroke-width="1"/>
-        <text x="760" y="62" text-anchor="middle" fill="#22D3EE" font-size="10" letter-spacing="1.4">OBSERVE'</text>
-        <text x="760" y="80" text-anchor="middle" fill="#7A8693" font-size="10">data ≤ t+1</text>
-        <text x="760" y="94" text-anchor="middle" fill="#7A8693" font-size="10">FS refreshed</text>
-    </g>
-
-    <g stroke="#22D3EE" stroke-width="1.4" fill="none" marker-end="url(#arr2)">
-        <line x1="180" y1="70" x2="220" y2="70"/>
-        <line x1="340" y1="70" x2="380" y2="70"/>
-        <line x1="500" y1="70" x2="540" y2="70"/>
-        <line x1="660" y1="70" x2="700" y2="70"/>
-    </g>
-
-    <g font-family="JetBrains Mono, monospace" font-size="10" fill="#7A8693">
-        <text x="120" y="135" text-anchor="middle">SQL PIT, date gate</text>
-        <text x="120" y="150" text-anchor="middle">progressive FS</text>
-
-        <text x="280" y="135" text-anchor="middle">rules-clause regex</text>
-        <text x="280" y="150" text-anchor="middle">decision required</text>
-
-        <text x="440" y="135" text-anchor="middle">slippage cap</text>
-        <text x="440" y="150" text-anchor="middle">deterministic order</text>
-
-        <text x="600" y="135" text-anchor="middle">scanners drained</text>
-        <text x="600" y="150" text-anchor="middle">violations zero gate</text>
-
-        <text x="760" y="135" text-anchor="middle">refresh_allowed_files</text>
-        <text x="760" y="150" text-anchor="middle">advance_day +1</text>
-    </g>
-</svg>
+<h2 class="tb-section-title">
+    <span class="tb-faded">Observation at <em>t</em> sees only data with</span>
+    <code>available_at &le; t</code>.
+</h2>
+
+<figure class="tb-figure">
+    <div class="tb-figure-head">
+        <div class="tb-figure-title">temporal contract &middot; t &rarr; t+1</div>
+        <div class="tb-figure-meta">5 phases &middot; 5 gates</div>
+    </div>
+    <div class="tb-figure-body is-dark" style="padding: 32px 24px;">
+        <svg viewBox="0 0 880 220" style="width: 100%; height: auto;" role="img" aria-label="Temporal contract diagram">
+            <defs>
+                <marker id="arr2" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
+                    <path d="M0,0 L10,5 L0,10 z" fill="rgba(255,255,255,0.40)"/>
+                </marker>
+            </defs>
+
+            <line x1="40" y1="180" x2="840" y2="180" stroke="rgba(255,255,255,0.10)" stroke-width="1"/>
+            <line x1="40" y1="180" x2="840" y2="180" stroke="#22D3EE" stroke-width="1" stroke-dasharray="2 6" opacity="0.45"/>
+            <text x="40" y="205" font-family="IBM Plex Mono, monospace" font-size="11" fill="rgba(255,255,255,0.40)">t (decision)</text>
+            <text x="840" y="205" font-family="IBM Plex Mono, monospace" font-size="11" fill="rgba(255,255,255,0.40)" text-anchor="end">t+1 (next session)</text>
+
+            <g font-family="IBM Plex Mono, monospace" font-size="11">
+                <rect x="60"  y="40" width="120" height="60" fill="transparent" stroke="rgba(255,255,255,0.20)"/>
+                <text x="120" y="62" text-anchor="middle" fill="#22D3EE" font-size="10" letter-spacing="2">OBSERVE</text>
+                <text x="120" y="80" text-anchor="middle" fill="rgba(255,255,255,0.66)" font-size="10">data &le; t</text>
+                <text x="120" y="94" text-anchor="middle" fill="rgba(255,255,255,0.40)" font-size="10">read-only</text>
+
+                <rect x="220" y="40" width="120" height="60" fill="transparent" stroke="rgba(255,255,255,0.20)"/>
+                <text x="280" y="62" text-anchor="middle" fill="#22D3EE" font-size="10" letter-spacing="2">DECIDE</text>
+                <text x="280" y="80" text-anchor="middle" fill="rgba(255,255,255,0.66)" font-size="10">record_decision</text>
+                <text x="280" y="94" text-anchor="middle" fill="rgba(255,255,255,0.40)" font-size="10">+ rules scan</text>
+
+                <rect x="380" y="40" width="120" height="60" fill="rgba(34,211,238,0.08)" stroke="#22D3EE" stroke-width="1"/>
+                <text x="440" y="62" text-anchor="middle" fill="#22D3EE" font-size="10" letter-spacing="2">SETTLE</text>
+                <text x="440" y="80" text-anchor="middle" fill="#FFFFFF" font-size="10">next-open fills</text>
+                <text x="440" y="94" text-anchor="middle" fill="#FFFFFF" font-size="10">corp actions</text>
+
+                <rect x="540" y="40" width="120" height="60" fill="rgba(34,211,238,0.08)" stroke="#22D3EE" stroke-width="1"/>
+                <text x="600" y="62" text-anchor="middle" fill="#22D3EE" font-size="10" letter-spacing="2">REWARD</text>
+                <text x="600" y="80" text-anchor="middle" fill="#FFFFFF" font-size="10">composite breakdown</text>
+                <text x="600" y="94" text-anchor="middle" fill="#FFFFFF" font-size="10">7 components &times; gate</text>
+
+                <rect x="700" y="40" width="120" height="60" fill="transparent" stroke="rgba(255,255,255,0.20)"/>
+                <text x="760" y="62" text-anchor="middle" fill="#22D3EE" font-size="10" letter-spacing="2">OBSERVE'</text>
+                <text x="760" y="80" text-anchor="middle" fill="rgba(255,255,255,0.66)" font-size="10">data &le; t+1</text>
+                <text x="760" y="94" text-anchor="middle" fill="rgba(255,255,255,0.40)" font-size="10">FS refreshed</text>
+            </g>
+
+            <g stroke="rgba(255,255,255,0.40)" stroke-width="1" fill="none" marker-end="url(#arr2)">
+                <line x1="180" y1="70" x2="220" y2="70"/>
+                <line x1="340" y1="70" x2="380" y2="70"/>
+                <line x1="500" y1="70" x2="540" y2="70"/>
+                <line x1="660" y1="70" x2="700" y2="70"/>
+            </g>
+
+            <g font-family="IBM Plex Mono, monospace" font-size="10" fill="rgba(255,255,255,0.40)">
+                <text x="120" y="135" text-anchor="middle">SQL PIT, date gate</text>
+                <text x="120" y="150" text-anchor="middle">progressive FS</text>
+
+                <text x="280" y="135" text-anchor="middle">rules-clause regex</text>
+                <text x="280" y="150" text-anchor="middle">decision required</text>
+
+                <text x="440" y="135" text-anchor="middle">slippage cap</text>
+                <text x="440" y="150" text-anchor="middle">deterministic order</text>
+
+                <text x="600" y="135" text-anchor="middle">scanners drained</text>
+                <text x="600" y="150" text-anchor="middle">violations zero gate</text>
+
+                <text x="760" y="135" text-anchor="middle">refresh_allowed_files</text>
+                <text x="760" y="150" text-anchor="middle">advance_day +1</text>
+            </g>
+        </svg>
+    </div>
+</figure>
 """
 
 
 _LAYERS_HTML = """
 <div class="tb-section-eyebrow">six look-ahead defense layers</div>
-<h2 class="tb-section-title">LLM weights post-date the backtest window. A single
-defense is never enough.</h2>
+<h2 class="tb-section-title">
+    <span class="tb-faded">LLM weights post-date the backtest window. </span>
+    A single defense is never enough.
+</h2>
 
 <div class="tb-layer-stack">
     <div class="tb-layer">
@@ -88,7 +99,7 @@ defense is never enough.</h2>
         <div class="tb-layer-content">
             <div class="tb-layer-title">SQL-level PIT filter</div>
             <div class="tb-layer-body">Every DuckDB query filters
-                <code>available_at ≤ current_date</code>. The data layer never
+                <code>available_at &le; current_date</code>. The data layer never
                 returns a row dated past the agent's clock.</div>
         </div>
     </div>
@@ -107,7 +118,7 @@ defense is never enough.</h2>
         <div class="tb-layer-content">
             <div class="tb-layer-title">Progressive filesystem view</div>
             <div class="tb-layer-body">Only files with
-                <code>available_at ≤ current_date</code> are materialized into the
+                <code>available_at &le; current_date</code> are materialized into the
                 sandbox read-only mount. Copy-on-reset, refresh-on-advance.</div>
         </div>
     </div>
@@ -134,9 +145,9 @@ defense is never enough.</h2>
         <div class="tb-layer-num">06</div>
         <div class="tb-layer-content">
             <div class="tb-layer-title">Aliased + date-shifted data</div>
-            <div class="tb-layer-body">Agents see opaque <code>tier_a01</code> ...
+            <div class="tb-layer-body">Agents see opaque <code>tier_a01</code> &hellip;
                 <code>tier_a10</code> IDs against a randomly drawn source window.
-                Per-build alias-to-ticker permutation + σ=0.0005 return-noise
+                Per-build alias-to-ticker permutation + &sigma;=0.0005 return-noise
                 overlay. The underlying real series is never identifiable.</div>
         </div>
     </div>
@@ -151,23 +162,25 @@ That is the whole point of a layered defense.
 
 _AUDIT_HTML = """
 <div class="tb-section-eyebrow">per-data-source leakage audit</div>
-<h2 class="tb-section-title">Every channel through which future data could
-reach the agent — and the gate that closes it.</h2>
+<h2 class="tb-section-title">
+    <span class="tb-faded">Every channel through which future data could
+    reach the agent</span> &mdash; and the gate that closes it.
+</h2>
 
 <table class="tb-table">
     <thead>
         <tr><th>Source</th><th>Path</th><th>Gate</th></tr>
     </thead>
     <tbody>
-        <tr><td>Daily OHLCV</td><td class="mono">data/query.py:get_bars</td><td>SQL <code>available_at ≤ ?</code> + tool-level <code>as_of_date</code> gate</td></tr>
+        <tr><td>Daily OHLCV</td><td class="mono">data/query.py:get_bars</td><td>SQL <code>available_at &le; ?</code> + tool-level <code>as_of_date</code> gate</td></tr>
         <tr><td>Universe membership</td><td class="mono">data/query.py:load_universe</td><td>SQL + tool-level gate</td></tr>
-        <tr><td>Symbol ↔ asset map</td><td class="mono">data/query.py:get_symbol_to_asset_id</td><td>SQL + tool-level gate</td></tr>
+        <tr><td>Symbol &harr; asset map</td><td class="mono">data/query.py:get_symbol_to_asset_id</td><td>SQL + tool-level gate</td></tr>
         <tr><td>Calendar / sessions</td><td class="mono">data/query.py:next_session_after</td><td>Strict next; never future</td></tr>
         <tr><td>Corporate actions</td><td class="mono">execution/corporate_actions.py</td><td>Applied at <em>t+1</em>; never visible at decision</td></tr>
         <tr><td><strong>Sandbox filesystem</strong></td><td class="mono">sandbox/workspace.py</td><td><strong>progressive_fs.materialize_allowed_files</strong> on reset; <strong>refresh_allowed_files</strong> on advance_day</td></tr>
         <tr><td>System prompt</td><td class="mono">environment/prompt.py</td><td>Audit: no manifest field carries future data</td></tr>
         <tr><td>Reward inputs</td><td class="mono">rewards/composite.py</td><td>Verifier asserts <code>events_so_far</code> only</td></tr>
-        <tr><td>RNG</td><td class="mono">session.py:_rng</td><td>Seeded from manifest digest or <code>reset(seed=…)</code></td></tr>
+        <tr><td>RNG</td><td class="mono">session.py:_rng</td><td>Seeded from manifest digest or <code>reset(seed=&hellip;)</code></td></tr>
     </tbody>
 </table>
 """
@@ -175,21 +188,23 @@ reach the agent — and the gate that closes it.</h2>
 
 _REWARD_HACK_HTML = """
 <div class="tb-section-eyebrow">reward-hacking layer</div>
-<h2 class="tb-section-title">A composite reward with a sandboxed code tool gives
-the agent multiple knobs to game. Defenses are scoped to the failure mode.</h2>
+<h2 class="tb-section-title">
+    <span class="tb-faded">Composite reward + sandboxed code = many knobs to game.</span>
+    Defenses are scoped to the failure mode.
+</h2>
 
-<ul style="line-height: 1.8; max-width: 64ch;">
-    <li><code>scan_forbidden_globals</code> — regex scanner over every
+<ul style="line-height: 1.8; max-width: 64ch; color: var(--ink-mute); padding-left: 24px;">
+    <li><code>scan_forbidden_globals</code> &mdash; regex scanner over every
         <code>sandbox_exec</code> stdout/stderr; 12 patterns including
         <code>eval(</code>, <code>__import__</code>, <code>subprocess.</code>,
-        <code>socket.</code>, ledger private-attr writes. Hit →
+        <code>socket.</code>, ledger private-attr writes. Hit &rarr;
         <code>viol_hack = 1</code>, gate = 0 on the next <code>advance_day</code>.</li>
-    <li><code>check_rules_clause</code> — regex scanner over the agent's
+    <li><code>check_rules_clause</code> &mdash; regex scanner over the agent's
         <code>reasoning</code> + <code>edge_summary</code> in
         <code>record_decision</code>. Catches first-person memorized recalls
         ("I recall AAPL crashed in 2020"), ticker-outcome pairs, named regimes.
-        Hit → <code>viol_rules = 1</code>, gate = 0.</li>
-    <li><strong>Bounded components.</strong> Every <code>cᵢ</code> ∈ [0, 1] by
+        Hit &rarr; <code>viol_rules = 1</code>, gate = 0.</li>
+    <li><strong>Bounded components.</strong> Every <code>c<sub>i</sub></code> &isin; [0, 1] by
         construction; no single component can dominate. There is no unbounded
         log-wealth head an agent can chase at the expense of compliance.</li>
     <li><strong>Hard compliance gate.</strong> Multiplicative {0, 1}; rules /
@@ -203,28 +218,30 @@ the agent multiple knobs to game. Defenses are scoped to the failure mode.</h2>
 
 
 _VERIFIER_HTML = """
-<div class="tb-section-eyebrow">verifier · run after every change</div>
-<h2 class="tb-section-title">Six checks. Exit 0 iff every check is PASS or
-WARN. Run on each tier as part of CI and at submission.</h2>
+<div class="tb-section-eyebrow">verifier &middot; run after every change</div>
+<h2 class="tb-section-title">
+    Six checks. <span class="tb-faded">Exit 0 iff every check is</span>
+    PASS <span class="tb-faded">or</span> WARN.
+</h2>
 
 <div class="tb-verifier-strip">
-    <span class="tb-vcheck">PASS · conformance.observation</span>
-    <span class="tb-vcheck">PASS · conformance.action_rejection</span>
-    <span class="tb-vcheck">PASS · leak.fs</span>
-    <span class="tb-vcheck">PASS · leak.no_future_fit</span>
-    <span class="tb-vcheck">PASS · replay</span>
-    <span class="tb-vcheck">PASS · determinism</span>
+    <span class="tb-vcheck">PASS &middot; conformance.observation</span>
+    <span class="tb-vcheck">PASS &middot; conformance.action_rejection</span>
+    <span class="tb-vcheck">PASS &middot; leak.fs</span>
+    <span class="tb-vcheck">PASS &middot; leak.no_future_fit</span>
+    <span class="tb-vcheck">PASS &middot; replay</span>
+    <span class="tb-vcheck">PASS &middot; determinism</span>
 </div>
 
 <details class="tb-schema">
     <summary>$ python -m tradebench.verifier --tier test --seed 42 --max-bars 5</summary>
-<pre>TradeBench verifier — tier=test seed=42
+<pre>TradeBench verifier &mdash; tier=test seed=42
   PASS  conformance.observation       all 10 observations valid
   PASS  conformance.action_rejection  malformed actions rejected with structured errors
   PASS  leak.fs[step=10]              inspected 9 files, no future partitions
-  PASS  leak.no_future_fit            no preprocessors with fit_through_date > current_date
+  PASS  leak.no_future_fit            no preprocessors with fit_through_date &gt; current_date
   PASS  replay                        all components match across 5 steps; max c_alpha delta=0.000e+00
-  PASS  determinism                   |ΔV| = 0.000e+00 < 1e-06; 11 events; 10 actions
+  PASS  determinism                   |&Delta;V| = 0.000e+00 &lt; 1e-06; 11 events; 10 actions
 RESULT: PASS</pre>
 </details>
 """

server/ui/theme.py

@@ -1,9 +1,9 @@
-"""Editorial quant-terminal theme for the TradeBench Gradio UI.
+"""Editorial pure-black theme for the TradeBench Gradio UI.
 
 Exports:
 
-- ``DARK_THEME`` — Gradio Base theme with the charcoal/cyan palette and
-  the Fraunces / IBM Plex Sans / JetBrains Mono font stack.
+- ``DARK_THEME`` — Gradio Base theme with the pure-black palette and
+  the Fraunces / DM Sans / IBM Plex Mono font stack.
 - ``NEON_CSS`` — inlined design tokens (``static/tokens.css``) and
   component primitives (``static/components.css``).
 """
@@ -26,20 +26,20 @@ def _read_static(name: str) -> str:
 
 
 # Palette values mirror static/tokens.css so Gradio component theming and
-# our component CSS land on the same colors.
-_CHARCOAL = colors.Color(
-    c50="#F8FAFC",
-    c100="#E6E8EB",
-    c200="#B6BDC7",
-    c300="#7A8693",
-    c400="#4F5763",
-    c500="#3A424E",
-    c600="#2A3340",
-    c700="#1F2731",
-    c800="#1A2029",
-    c900="#11161D",
-    c950="#0A0E13",
-    name="charcoal",
+# our component CSS land on the same colors. Pure black canvas.
+_NEUTRAL = colors.Color(
+    c50="#FFFFFF",
+    c100="#F5F5F5",
+    c200="#E5E5E5",
+    c300="#A3A3A3",
+    c400="#737373",
+    c500="#525252",
+    c600="#404040",
+    c700="#262626",
+    c800="#171717",
+    c900="#0A0A0B",
+    c950="#000000",
+    name="ink",
 )
 
 _CYAN = colors.Color(
@@ -61,67 +61,70 @@ _CYAN = colors.Color(
 DARK_THEME = gr.themes.Base(
     primary_hue=_CYAN,
     secondary_hue=_CYAN,
-    neutral_hue=_CHARCOAL,
+    neutral_hue=_NEUTRAL,
     font=[
+        fonts.GoogleFont("DM Sans"),
         fonts.GoogleFont("IBM Plex Sans"),
         "ui-sans-serif",
         "system-ui",
         "sans-serif",
     ],
     font_mono=[
+        fonts.GoogleFont("IBM Plex Mono"),
         fonts.GoogleFont("JetBrains Mono"),
         "SF Mono",
         "Menlo",
         "Consolas",
         "monospace",
     ],
-    radius_size=sizes.radius_sm,
+    radius_size=sizes.radius_none,
 ).set(
-    body_background_fill="#0A0E13",
-    body_background_fill_dark="#0A0E13",
-    body_text_color="#E6E8EB",
-    body_text_color_dark="#E6E8EB",
-    body_text_color_subdued="#7A8693",
-    body_text_color_subdued_dark="#7A8693",
-    block_background_fill="#11161D",
-    block_background_fill_dark="#11161D",
-    block_border_color="#1F2731",
-    block_border_color_dark="#1F2731",
-    block_label_text_color="#E6E8EB",
-    block_label_text_color_dark="#E6E8EB",
-    block_title_text_color="#E6E8EB",
-    block_title_text_color_dark="#E6E8EB",
-    panel_background_fill="#0A0E13",
-    panel_background_fill_dark="#0A0E13",
-    panel_border_color="#1F2731",
-    panel_border_color_dark="#1F2731",
-    input_background_fill="#1A2029",
-    input_background_fill_dark="#1A2029",
-    input_border_color="#1F2731",
-    input_border_color_dark="#1F2731",
-    button_primary_background_fill="#22D3EE",
-    button_primary_background_fill_dark="#22D3EE",
-    button_primary_background_fill_hover="#67E8F9",
-    button_primary_background_fill_hover_dark="#67E8F9",
-    button_primary_text_color="#0A0E13",
-    button_primary_text_color_dark="#0A0E13",
-    button_secondary_background_fill="#1A2029",
-    button_secondary_background_fill_dark="#1A2029",
-    button_secondary_background_fill_hover="#1F2731",
-    button_secondary_background_fill_hover_dark="#1F2731",
-    button_secondary_text_color="#E6E8EB",
-    button_secondary_text_color_dark="#E6E8EB",
-    border_color_primary="#1F2731",
-    border_color_primary_dark="#1F2731",
-    color_accent_soft="#0E7490",
-    color_accent_soft_dark="#0E7490",
+    body_background_fill="#000000",
+    body_background_fill_dark="#000000",
+    body_text_color="#FFFFFF",
+    body_text_color_dark="#FFFFFF",
+    body_text_color_subdued="rgba(255,255,255,0.66)",
+    body_text_color_subdued_dark="rgba(255,255,255,0.66)",
+    block_background_fill="#0A0A0B",
+    block_background_fill_dark="#0A0A0B",
+    block_border_color="rgba(255,255,255,0.10)",
+    block_border_color_dark="rgba(255,255,255,0.10)",
+    block_label_text_color="#FFFFFF",
+    block_label_text_color_dark="#FFFFFF",
+    block_title_text_color="#FFFFFF",
+    block_title_text_color_dark="#FFFFFF",
+    panel_background_fill="#000000",
+    panel_background_fill_dark="#000000",
+    panel_border_color="rgba(255,255,255,0.10)",
+    panel_border_color_dark="rgba(255,255,255,0.10)",
+    input_background_fill="#0A0A0B",
+    input_background_fill_dark="#0A0A0B",
+    input_border_color="rgba(255,255,255,0.10)",
+    input_border_color_dark="rgba(255,255,255,0.10)",
+    button_primary_background_fill="#FFFFFF",
+    button_primary_background_fill_dark="#FFFFFF",
+    button_primary_background_fill_hover="#22D3EE",
+    button_primary_background_fill_hover_dark="#22D3EE",
+    button_primary_text_color="#000000",
+    button_primary_text_color_dark="#000000",
+    button_secondary_background_fill="transparent",
+    button_secondary_background_fill_dark="transparent",
+    button_secondary_background_fill_hover="rgba(255,255,255,0.04)",
+    button_secondary_background_fill_hover_dark="rgba(255,255,255,0.04)",
+    button_secondary_text_color="#FFFFFF",
+    button_secondary_text_color_dark="#FFFFFF",
+    border_color_primary="rgba(255,255,255,0.10)",
+    border_color_primary_dark="rgba(255,255,255,0.10)",
+    color_accent_soft="rgba(34,211,238,0.20)",
+    color_accent_soft_dark="rgba(34,211,238,0.20)",
 )
 
 
-# Fraunces is the one typeface not in Gradio's default font slots; pull it
-# explicitly so the editorial headlines render with the variable serif.
+# Pull serif + body + mono explicitly. RAETH-style stack: Fraunces (display),
+# DM Sans (body), IBM Plex Mono (labels). Cormorant Garamond is a softer
+# fallback if Fraunces fails.
 _FONT_IMPORT = """
-@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
 """
 
 NEON_CSS = "\n".join(