Refresh: full UI redesign + metrics explainer + AGENTS.md + mobile fixes

.gitignore

@@ -25,3 +25,7 @@ SUPABASE_MIGRATION.md
 builddemo.md
 bdemo2.md
 notes:.md.md
+
+# playwright MCP screenshot artifacts
+.playwright-mcp/
+_*.png

AGENTS.md

@@ -0,0 +1,58 @@
+# AGENTS.md — MO§ES SigRank
+
+Guidance for AI coding agents (and humans) working in this repo. Read this before editing.
+
+## What this is
+**SIGRANK** (powered by MO§ES™) is a Gradio Space that ranks AI coding operators by
+**architecture, not volume**. The core metric is **Υ = (Cache · Output) / Input²** — squaring
+input punishes wasteful prompting while rewarding cache reuse and real output. Volume can't buy rank.
+
+Live Space: `huggingface.co/spaces/burnmydays/sigrank`
+
+## Run it
+```bash
+pip install -r requirements.txt
+python app.py                      # launches the Gradio UI on :7860
+python sigrank.py --help           # local-first CLI importer (reads your own ccusage usage)
+python metrics.py                  # prints the SEED corpus metrics (sanity check)
+python -m pytest test_metrics.py   # metric invariant tests
+```
+
+## Architecture (one job per file)
+- `metrics.py` — the metric engine. `compute(i, o, cw, cr)` → full ledger (Υ, SNR, leverage,
+  velocity, 10x DEV, $/1M). Also holds the `SEED` corpus (MO§ES + wild operators from tokscale.ai).
+- `ingest.py` — parsers. ccusage (Claude) and Codex JSON shapes → four token pillars. Codex input
+  is *estimated* (no native input field); see `_codex_input_estimate`.
+- `app.py` — the Gradio UI. Tabs: **Home / Create / Leaders / VS / Reports**. Board rendering
+  (`board_html`), operator cards (`card_html`), compare (`compare_html`), insights (`insights_html`),
+  Home landing (`metric_features_html`, `home_html`).
+- `theme.py` — all custom CSS (dark/gold). Mobile rules live in `@media (max-width: 700px)` blocks.
+- `db.py` — optional Supabase persistence; falls back to `metrics.SEED` when unconfigured (works offline).
+- `narrate.py` — optional MiniCPM-0.5B prose "operator reads" via `@spaces.GPU`; degrades to a
+  template when no GPU/torch (so the app runs fine on CPU).
+- `sigrank.py` / `sigrank` — local-first CLI: reads your real ccusage usage on your machine, prints
+  your operator read, optional `--submit` to the board.
+
+## Frozen invariants — DO NOT CHANGE without explicit instruction
+- **`metrics.py` `SEED` numbers** — the canonical corpus. MO§ES row = `(1_251_211, 11_296_121,
+  128_196_310, 2_555_179_769)`. Changing these breaks the published leaderboard + tests.
+- **The Υ formula** `(cache_read · output) / input²` and the telescoping identity
+  (10x DEV = log₁₀(leverage), Υ = leverage × velocity). `test_metrics.py` locks these.
+- MO§ES Υ must print **18436.98**.
+
+## Conventions
+- **No secrets in the repo.** Keys live only in `SECRETS.local.md` (gitignored) and HF Space
+  Secrets. Never commit tokens/keys.
+- **Supabase: new tables only.** Do not alter existing tables; SigRank uses its own.
+- **Claude and Codex are measured separately** — never combine providers in one reading.
+- **Deploy** by pushing to the Space git remote; the HF Space is the live deliverable. CI/tests
+  should stay green (`pytest`, `python -c "import app; app._build_demo()"`).
+- Match the surrounding code style; keep changes minimal and verifiable.
+
+## Metric definitions (match `metrics.compute` exactly)
+- **Υ yield** = (cache_read · output) / input² — the rank metric.
+- **SNR** = output / (input + output) — signal vs. noise.
+- **leverage** = cache_read / input — cache reuse amplification.
+- **velocity** = output / input — throughput.
+- **10x DEV** = log₁₀(transmission × commitment × reuse) = log₁₀(leverage).
+- **$/1M** = blended cost per million tokens across all states.

README.md

@@ -39,7 +39,7 @@ tags:
 
 A leaderboard that judges AI coding operators by **architecture, not budget**.
 Paste your token usage; get an operator profile with a tiny-model narration and
-your rank. The ranking metric **Υ = (Cache·Output)/Input²** penalizes raw-input
+your rank. The ranking metric **Υ = (cache_read · output) / input²** (here "Cache" = `cache_read`) penalizes raw-input
 padding quadratically — volume can't buy rank — but Υ is only the headline of a
 larger metric system whose mathematical thesis is the **cascade decomposition**.
 
@@ -174,7 +174,7 @@ MO§ES occupies the **empty quadrant** — low scale, high amplification. The cl
 | Leverage | C/I | cache reads per human token |
 | Efficiency | (C+O)/I ÷ 4.0 | vs AA baseline |
 | Avg $/1M | blended cost ÷ total | efficient architecture is also cheapest |
-| **Υ (Yield)** | (C·O)/I² | **un-gameable ranking metric** |
+| **Υ (Yield)** | (Cr·O)/I² | **un-gameable ranking metric** (Cr = cache_read) |
 
 ## Benchmark convergence — two independent instruments
 

app.py

@@ -34,11 +34,18 @@ def _fmt_int(n):
         if abs(n)>=d: return f"{n/d:.2f}{u}"
     return str(int(n))
 
+def _fmt_cost(c):
+    """Adaptive $/1M: keep sub-cent values legible instead of rounding to $0.00.
+    e.g. $0.000195 -> $0.0002 (2 sig figs) rather than $0.00."""
+    if c >= 1:    return f"{c:,.2f}"
+    if c >= 0.01: return f"{c:.3f}"
+    return f"{c:.2g}"
+
 def _cost_str(m):
     c = m.get("avg_cost_1m")
     if not c: return "\u2014"
     mark = "~" if m.get("cost_estimated") else ""
-    return f"{mark}${c:.2f}"
+    return f"{mark}${_fmt_cost(c)}"
 
 # ---------- leaderboard (HTML hero, log-scaled Υ, cost column) ----------
 # column label -> metrics key, used by the "Rank by" control on the board
@@ -111,7 +118,8 @@ def board_html(extra=None, sort_key="yield"):
                '<span class="mb-num">SNR</span><span class="mb-num">10x DEV</span>'
                '<span class="mb-num">velocity</span><span class="mb-num">leverage</span>'
                '<span class="mb-num">$/1M</span>'
-               '<span class="mb-y">\u03a5 yield</span></div>')
+               '<span class="mb-y">\u03a5 yield</span>'
+               '<span class="mb-ledger">ledger \u00b7 R\u00b7C\u00b7I\u00b7O</span></div>')
     for i,(n,m) in enumerate(rows,1):
         y=m["yield"]; you = extra and n==extra[0]
         orders=_math.log10(ymax/y) if y>0 else 99
@@ -129,7 +137,7 @@ def board_html(extra=None, sort_key="yield"):
         est_mark = " <span class='mb-est' title='* structural estimation'>*</span>" if m.get("cost_estimated") else ""
         out.append(f'<div class="{cls}">'
             f'<span class="mb-rank {rank_cls}">{i}</span>'
-            f'<span class="mb-op"><b>{ne}{est_mark}</b><br><span class="mb-raw">R {_fmt_int(m["raw"]["cache_read"])} \u00b7 C {_fmt_int(m["raw"]["cache_create"])} \u00b7 I {_fmt_int(m["raw"]["input"])} \u00b7 O {_fmt_int(m["raw"]["output"])}</span></span>'
+            f'<span class="mb-op"><b>{ne}{est_mark}</b></span>'
             f'<span class="mb-num">{m["snr"]:.3f}</span>'
             f'<span class="mb-num">{d}</span>'
             f'<span class="mb-num">{m["velocity"]:.2f}</span>'
@@ -137,6 +145,7 @@ def board_html(extra=None, sort_key="yield"):
             f'<span class="mb-num">{_cost_str(m)}</span>'
             f'<span class="mb-y"><span class="mb-bar" style="width:{barpct:.0f}%"></span>'
             f'<span class="mb-yval">{y:,.0f}</span></span>'
+            f'<span class="mb-ledger">R {_fmt_int(m["raw"]["cache_read"])} \u00b7 C {_fmt_int(m["raw"]["cache_create"])} \u00b7 I {_fmt_int(m["raw"]["input"])} \u00b7 O {_fmt_int(m["raw"]["output"])}</span>'
             f'</div>')
     out.append('</div>')
     out.append('<div class="mb-foot">\u03a5 bar is log-scaled \u00b7 MO\u00a7ES leads the field by ~4 orders of magnitude \u00b7 $/1M blended cost (~ = list-price estimate) \u00b7 * = structural estimation \u00b7 volume can\'t buy rank</div>')
@@ -184,6 +193,77 @@ def metrics_key_html():
         f'{rows}</div></details>'
     )
 
+_STANDARD_METRICS = [
+    ("Total Tokens", "Input + Output", "Raw count of everything processed. Higher = more usage."),
+    ("Input Tokens", "prompt / context", "How much you feed in \u2014 often the biggest cost driver."),
+    ("Output Tokens", "model generation", "How much the model writes. Longer answers cost more."),
+    ("Tokens/sec \u00b7 Latency", "speed", "How fast it runs \u2014 nothing about how well."),
+    ("Cost ($)", "$ per 1M tokens", "Dollars from token pricing. Counts spend, not skill."),
+]
+_SIGRANK_METRICS = [
+    ("\u03a5 \u2014 Upsilon", "(Cache \u00d7 Output) / Input\u00b2",
+     "Standard just adds Input + Output. \u03a5 squares input to punish waste while rewarding reuse (cache) and real output.",
+     "Encourages tight, smart prompts instead of long ones."),
+    ("Signal-to-Noise (SNR)", "Out / (In + Out)",
+     "Standard counts every output token equally. SNR separates useful signal from repetitive fluff.",
+     "Rewards quality, not length."),
+    ("Cache Leverage", "Cache-read / Input",
+     "Standard ignores reuse \u2014 every call is fresh. This measures the \u2018free\u2019 work you get from remembering prior results.",
+     "Big win for systems that avoid repeating work."),
+    ("Cascade Velocity", "10 \u00d7 10 \u00d7 20",
+     "Standard might just time the whole run. This tracks smooth chaining of steps (10 focused ops \u2192 10 more \u2192 20\u00d7 leverage).",
+     "Rewards well-designed pipelines over messy long chains."),
+]
+_COMPARE_ROWS = [
+    ("Focus", "How much you use", "How well you use it"),
+    ("Penalizes", "Nothing \u2014 bigger is often \u2018better\u2019", "Wasteful inputs, fluff, poor reuse"),
+    ("Rewards", "Volume &amp; speed", "Efficiency, quality, smart architecture"),
+    ("Easy to game?", "Very \u2014 just inflate prompts", "Hard \u2014 square penalty + quality checks"),
+    ("Best for", "Billing &amp; raw scale", "Hackathons, governance, Build Small"),
+]
+
+def metrics_explainer_html():
+    """The full 'what the metrics mean' education: SigRank vs standard token metrics,
+    the thermodynamic grounding, and a side-by-side comparison."""
+    std = "".join(
+        f'<div class="mx-item"><div class="mx-item-head"><span class="mx-name">{n}</span>'
+        f'<span class="mx-form">{f}</span></div><div class="mx-desc">{d}</div></div>'
+        for n, f, d in _STANDARD_METRICS)
+    sig = "".join(
+        f'<div class="mx-item"><div class="mx-item-head"><span class="mx-name">{n}</span>'
+        f'<span class="mx-form">{f}</span></div>'
+        f'<div class="mx-vs"><b>vs standard:</b> {v}</div>'
+        f'<div class="mx-result">\u2192 {r}</div></div>'
+        for n, f, v, r in _SIGRANK_METRICS)
+    comp = "".join(
+        f'<tr><th class="mx-aspect">{a}</th><td>{s}</td><td class="mx-win">{g}</td></tr>'
+        for a, s, g in _COMPARE_ROWS)
+    return (
+        '<div class="mx-wrap">'
+        '<div class="mx-analogy">Standard token metrics are an <b>odometer</b> \u2014 they count '
+        'distance (tokens used). <span class="mx-gold">SigRank is a fuel-efficiency + '
+        'smart-driving score</span> \u2014 it judges how intelligently you drive.</div>'
+        '<div class="mx-cols">'
+        '<div class="mx-col mx-col-std"><div class="mx-col-head">Standard Token Metrics</div>'
+        f'{std}<div class="mx-foot">Rewards <b>volume &amp; scale</b> \u2014 easy to track, easy to game '
+        '(this is \u201ctokenmaxxing\u201d).</div></div>'
+        '<div class="mx-col mx-col-sig"><div class="mx-col-head">SigRank Metrics</div>'
+        f'{sig}<div class="mx-foot">Rewards <b>efficiency, quality &amp; architecture</b> \u2014 the same '
+        'numbers, turned into judgment.</div></div>'
+        '</div>'
+        '<table class="mx-table"><thead><tr><th>Aspect</th><th>Standard</th>'
+        '<th class="mx-win">SigRank</th></tr></thead><tbody>' + comp + '</tbody></table>'
+        '<div class="mx-thermo"><div class="mx-thermo-h">\u25c6 Why square the input? \u2014 the thermodynamic floor</div>'
+        'The metrics are grounded in <b>Landauer\u2019s principle</b>: processing or erasing information '
+        'carries a real, physical energy cost (on the order of kT\u00b7ln2 per bit). Tokens aren\u2019t free \u2014 '
+        'every input bit you push through has a price. SigRank takes that seriously: it rewards '
+        '<b>reusing</b> what you already computed (cache) and <b>minimizing fresh input</b>, the way an '
+        'efficient engine minimizes wasted heat. Squaring input in \u03a5 is that penalty made concrete.</div>'
+        '<div class="mx-bottom">Bottom line: standard metrics are great for paying the bill. '
+        'SigRank adds judgment \u2014 it ranks by <span class="mx-gold">cleverness, not consumption.</span> '
+        'That\u2019s \u201cown your loop.\u201d</div>'
+        '</div>')
+
 # ---------- profile ----------
 def classify(m):
     if m["non_compounding"]: return "Non-Compounding \u00b7 stateless pipe"
@@ -309,7 +389,7 @@ ranked **#{rank}** of {total_ops} by \u03a5{cav_line}{mode_line}
 | Velocity | {m['velocity']:.3f}\u00d7 | output per input |
 | Leverage | {m['leverage']:,.1f}\u00d7 | reads per human token |
 | Efficiency | {m['efficiency']:,.1f}\u00d7 | vs AA baseline |
-| Avg $/1M | ${m['avg_cost_1m']:.3f} |{cost_note} |
+| Avg $/1M | ${_fmt_cost(m['avg_cost_1m'])} |{cost_note} |
 | **\u03a5 Yield** | **{m['yield']:,.2f}** | un-gameable rank |
 
 **cascade** \u2014 {m['cascade_str']} (transmission \u00d7 commitment \u00d7 reuse)
@@ -362,9 +442,9 @@ def run_ingest(blob, name, request: gr.Request):
                 "`ccusage codex --json` output, or `ccusage --json` "
                 "for all providers. You can also paste four numbers: "
                 "input output cache_create cache_read.\n\n"
-                f"_parser said: {e}_"), "", "", "", board_html()
+                f"_parser said: {e}_"), "", "", ""
     if i+o+cw+cr==0:
-        return "Got zeros \u2014 check your paste.", "", "", "", board_html()
+        return "Got zeros \u2014 check your paste.", "", "", ""
     m=compute(i,o,cw,cr, cost_usd=meta.get("cost"))
     if meta.get("estimated"):
         m["_caveat"]=meta.get("caveat")
@@ -396,8 +476,7 @@ def run_ingest(blob, name, request: gr.Request):
     return (profile,
             comp_bar_html(m["composition"]),
             card_html(name,m,rank,len(rows),read),
-            hits_html,
-            board_html_slim((name,m)))
+            hits_html)
 
 # ---------- interactive leaderboard helpers ----------
 def resort_board(label):
@@ -405,16 +484,228 @@ def resort_board(label):
     return board_html(sort_key=SORT_LABELS.get(label, "yield"))
 
 def view_operator(name):
-    """Render a corpus operator's full profile + share card (the 'open a profile' picker)."""
+    """Render a corpus operator's full profile + share card + learn-from insights."""
     ops = operators()
     if not name or name not in ops:
-        return "", ""
+        return "", "", ""
     m = compute(*ops[name])
     rows = sorted(((n, compute(*v)) for n, v in ops.items()),
                   key=lambda r: r[1]["yield"], reverse=True)
     rank = next(i for i, (n, _) in enumerate(rows, 1) if n == name)
     read = narrate(name, m, classify(m))
-    return profile_md(name, m, rank, len(rows), read), card_html(name, m, rank, len(rows), read)
+    return (profile_md(name, m, rank, len(rows), read),
+            card_html(name, m, rank, len(rows), read),
+            insights_html(name, m))
+
+def insights_html(name, m):
+    """Reader takeaways: what this operator does well + what to avoid."""
+    good, avoid = [], []
+    lev, snr, vel = m["leverage"], m["snr"], m["velocity"]
+    if lev >= 100:   good.append("Exceptional cache reuse — context is re-read, not rebuilt each turn.")
+    elif lev >= 10:  good.append("Solid cache leverage — compounding on prior work.")
+    else:            avoid.append("Low cache leverage — mostly fresh input each turn (recompute waste).")
+    if snr >= 0.5:   good.append("High signal — most tokens are model output, not prompt bloat.")
+    else:            avoid.append("Low signal-to-noise — large input vs. output; tighten prompts.")
+    if m["non_compounding"]: avoid.append("No cache-create — stateless pipe, no architectural compounding.")
+    else:            good.append("Compounding architecture — building reusable context, not one-shotting.")
+    if vel >= 1:     good.append("Strong throughput — produces more than it consumes.")
+    elif vel < 0.3:  avoid.append("Low velocity — heavy input for little output.")
+    g = "".join(f"<li>{x}</li>" for x in good) or "<li>—</li>"
+    a = "".join(f"<li>{x}</li>" for x in avoid) or "<li>Nothing major — clean architecture.</li>"
+    return (f'<div class="ins-wrap">'
+            f'<div class="ins-block ins-good"><div class="ins-h">✓ Doing well</div><ul>{g}</ul></div>'
+            f'<div class="ins-block ins-avoid"><div class="ins-h">✕ Watch out</div><ul>{a}</ul></div></div>')
+
+def operator_segments():
+    """Live counts: burners (spend, no reuse), builders (compounding), 10×ers (elite reuse)."""
+    burn = build = tenx = 0
+    for v in operators().values():
+        lev = compute(*v)["leverage"]
+        if lev < 2:        burn += 1
+        elif lev >= 1000:  tenx += 1
+        else:              build += 1
+    return burn, build, tenx, burn + build + tenx
+
+# ---------- VS / compare ----------
+# (label, metrics key, winner = max|min, value formatter)
+_CMP_ROWS = [
+    ("Υ yield",  "yield",       "max", lambda v: f"{v:,.0f}"),
+    ("SNR",      "snr",         "max", lambda v: f"{v:.3f}"),
+    ("leverage", "leverage",    "max", lambda v: f"{v:,.0f}×"),
+    ("velocity", "velocity",    "max", lambda v: f"{v:.2f}×"),
+    ("10x DEV",  "dev10x",      "max", lambda v: f"{v:.2f}"),
+    ("$/1M",     "avg_cost_1m", "min", lambda v: f"${_fmt_cost(v)}"),
+]
+
+def compare_html(names):
+    """Head-to-head table for 2–3 operators; best value per row gets the gold cell."""
+    ops = operators()
+    names = [n for n in (names or []) if n in ops][:3]
+    if len(names) < 2:
+        return ('<div class="cmp-empty">Pick <b>2–3 operators</b> above to put them '
+                'head-to-head. Winner takes each row.</div>')
+    ms = [(n, compute(*ops[n])) for n in names]
+    head = "".join(f'<th class="cmp-op">{_html.escape(n)}</th>' for n, _ in ms)
+    body = []
+    for label, key, mode, fmt in _CMP_ROWS:
+        vals = [m.get(key) for _, m in ms]
+        nums = [v for v in vals if v is not None]
+        best = (max if mode == "max" else min)(nums) if nums else None
+        cells = []
+        for v in vals:
+            win = v is not None and best is not None and v == best and len(nums) > 1
+            cells.append(f'<td class="{"cmp-win" if win else ""}">'
+                         f'{fmt(v) if v is not None else "—"}</td>')
+        body.append(f'<tr><th class="cmp-rowlabel">{label}</th>{"".join(cells)}</tr>')
+    return (f'<table class="cmp-table"><thead><tr><th></th>{head}</tr></thead>'
+            f'<tbody>{"".join(body)}</tbody></table>'
+            '<div class="cmp-note">Gold = leads that metric · $/1M: lower wins · '
+            'Υ is the overall rank metric.</div>')
+
+# ---------- Home / landing ----------
+def profile_marquee_html():
+    """Auto-scrolling band of operator chips (rank · name · Υ · leverage). Pure CSS loop."""
+    ops = operators()
+    rows = sorted(((n, compute(*v)) for n, v in ops.items()),
+                  key=lambda r: r[1]["yield"], reverse=True)
+    def chip(rank, n, m):
+        rk = rarity_class(m)[0]
+        return (f'<div class="pm-chip species-{rk}">'
+                f'<span class="pm-rank">#{rank}</span>'
+                f'<span class="pm-name">{_html.escape(n)}</span>'
+                f'<span class="pm-stat">Υ {m["yield"]:,.0f}</span>'
+                f'<span class="pm-lev">{m["leverage"]:,.0f}× lev</span></div>')
+    chips = "".join(chip(i, n, m) for i, (n, m) in enumerate(rows, 1))
+    # chips duplicated so the translateX(-50%) loop is seamless
+    return f'<div class="pm-wrap"><div class="pm-track">{chips}{chips}</div></div>'
+
+# ---- the metric standard (green feature row) ----
+# (symbol, metrics key, equation, value-format, hover description)
+_FEATURE_METRICS = [
+    ("Υ", "yield", "(Cache·Output) / Input²", "{v:,.0f}",
+     "The efficiency score. Reused context (cache) × produced output, measured against "
+     "fresh input squared — squaring input is why raw volume can't buy rank."),
+    ("SNR", "snr", "Out / (In+Out)", "{v:.2f}",
+     "Signal-to-noise. Share of the exchange that's model output vs. prompt/input. "
+     "Higher = focused, less bloat."),
+    ("10x", "dev10x", "log₁₀(cascade)", "{v:.2f}",
+     "The cascade in orders of magnitude (log₁₀ of leverage) — the 10× developer multiplier."),
+    ("$/1M", "avg_cost_1m", "blended cost / 1M", "${v}",
+     "Blended cost per million tokens across all states. Efficient architecture is also "
+     "the cheapest — so cost falls out of good design."),
+]
+
+def _corpus_metric_values(key):
+    vals = [compute(*v).get(key) for v in operators().values()]
+    return sorted(x for x in vals if x is not None)
+
+def _median(vals):
+    n = len(vals)
+    if not n: return 0
+    return vals[n // 2] if n % 2 else (vals[n // 2 - 1] + vals[n // 2]) / 2
+
+def _status_box_html():
+    """Live system status + segment counters — rendered as a metric box."""
+    burn, build, tenx, tot = operator_segments()
+    return (
+        '<div class="mf-box mf-status">'
+        '<div class="ms-title"><span class="ms-dot">●</span> ONLINE</div>'
+        '<div class="ms-grid">'
+        f'<span>BURNERS</span><span class="hs-burn">{burn:03d}</span>'
+        f'<span>BUILDERS</span><span class="hs-build">{build:03d}</span>'
+        f'<span>10×ERS</span><span class="hs-tenx">{tenx:03d}</span>'
+        f'<span>SIGNALS</span><span class="ms-tot">{tot:03d}</span>'
+        '</div></div>')
+
+def metric_features_html():
+    boxes = []
+    for sym, key, form, fmt, desc in _FEATURE_METRICS:
+        vals = _corpus_metric_values(key)
+        avg = sum(vals) / len(vals) if vals else 0
+        big = f"${_fmt_cost(avg)}" if key == "avg_cost_1m" else fmt.format(v=avg)
+        boxes.append(
+            f'<div class="mf-box" tabindex="0"><div class="mf-sym">{sym}</div>'
+            f'<div class="mf-big">{big}</div>'
+            f'<div class="mf-form">{form}</div>'
+            f'<div class="mf-tip">{desc}</div></div>')
+    boxes.insert(2, _status_box_html())   # between SNR and 10x
+    return ('<div class="mf-head">Introducing the new standard in '
+            '<span>AI metrics &amp; benchmarks</span></div>'
+            f'<div class="mf-grid">{"".join(boxes)}</div>'
+            '<div class="mf-sub">field average · live counts · hover any metric for what it means</div>')
+
+# ---- real mini renders of each page (live HTML, scaled into a framed thumbnail) ----
+def _top_rows(n):
+    return sorted(((k, compute(*v)) for k, v in operators().items()),
+                  key=lambda r: r[1]["yield"], reverse=True)[:n]
+
+def _mini(cap, inner, accent):
+    """Frame real page HTML as a browser-chrome thumbnail; CSS scales it down."""
+    return (f'<div class="mini mini-{accent}">'
+            f'<div class="mini-chrome"><span></span><span></span><span></span>'
+            f'<div class="mini-cap">{cap}</div></div>'
+            f'<div class="mini-view"><div class="mini-scale">{inner}</div></div></div>')
+
+def _mini_leaders():
+    return _mini("sigrank · leaders", board_html(), "gold")
+
+def _mini_reports():
+    k, m = _top_rows(1)[0]
+    read = narrate(k, m, classify(m))
+    return _mini("sigrank · reports",
+                 card_html(k, m, 1, len(operators()), read), "purple")
+
+def _mini_vs():
+    return _mini("sigrank · vs", compare_html([k for k, _ in _top_rows(3)]), "blue")
+
+def _mini_create():
+    inner = (
+        '<div class="cr-mock">'
+        '<div class="cr-code">$ ./sigrank --submit</div>'
+        '<div class="cr-box">paste ccusage JSON — or four numbers:<br>'
+        '<b>1251211 11296121 128196310 2555179769</b></div>'
+        '<div class="cr-btn">⬡ Clock My Signal</div>'
+        '<div class="cr-res">Υ 18,437 · CASCADE MATRIX</div></div>')
+    return _mini("sigrank · create", inner, "green")
+
+_HOME_SECTIONS = [
+    ("Leaders", "Prove your signal",
+     "The burn-vs-build board — who wins on architecture, not spend.", _mini_leaders, "gold"),
+    ("Reports", "Study the field",
+     "Pull any operator's full read. R&D — improve yourself.", _mini_reports, "purple"),
+    ("VS", "Head-to-head",
+     "Who's actually 10×? Who's amplifying signal — and at what cost?", _mini_vs, "blue"),
+    ("Create", "Clock your signal",
+     "Drop your ledger, get scored, claim your operator card.", _mini_create, "green"),
+]
+
+def home_html():
+    boxes = "".join(
+        f'<div class="hm-box hm-{accent}">{mini()}'
+        f'<div class="hm-title">◢ {t}</div>'
+        f'<div class="hm-sub">{s}</div><div class="hm-desc">{d}</div>'
+        f'<div class="hm-cta">open the {t} tab →</div></div>'
+        for t, s, d, mini, accent in _HOME_SECTIONS
+    )
+    return f'<div class="hm-grid">{boxes}</div>'
+
+def home_footer_html():
+    loom = "https://www.loom.com/share/edc345e2e5164e20aed3acb6436a08c3"
+    return (
+        '<div class="hm-foot">'
+        '<div class="hf-col"><div class="hf-h">Watch the demo</div>'
+        f'<a class="hf-btn" href="{loom}" target="_blank" rel="noopener">▶ Play demo video</a></div>'
+        '<div class="hf-col"><div class="hf-h">Get ranked in 3 steps</div>'
+        '<ol class="hf-steps">'
+        '<li>Run <code>npx ccusage@latest claude --json</code></li>'
+        '<li>Open <b>Create</b>, paste it (or four numbers)</li>'
+        '<li>Get your Υ score + operator card</li></ol></div>'
+        '<div class="hf-col"><div class="hf-h">More</div>'
+        '<a class="hf-link" href="https://mos2es.com" target="_blank" rel="noopener">mos2es.com</a>'
+        '<a class="hf-link" href="https://mos2es.com/benchmarks" target="_blank" rel="noopener">benchmarks</a>'
+        '<a class="hf-link" href="https://x.com/burnmydays/status/2066666214143758576" target="_blank" rel="noopener">@burnmydays on X</a>'
+        '</div></div>'
+    )
 
 # ---------- UI ----------
 import os as _os
@@ -440,62 +731,32 @@ def _build_demo():
     _names = list(_ops_now.keys())
     _ys = sorted((compute(*v)["yield"] for v in _ops_now.values()), reverse=True)
     _lead = (_ys[0] / _ys[1]) if len(_ys) > 1 and _ys[1] > 0 else 0.0
+    _burn, _build, _tenx, _tot = operator_segments()
     with _b:
         with gr.Column(elem_id="moses-hero"):
             gr.HTML(
-                "<div style='display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #C4923A; padding-bottom: 12px; margin-bottom: 16px;'>"
-                "  <div>"
-                "    <h1 style='color: #C4923A !important; font-size: 36px !important; font-weight: 800 !important; letter-spacing: 0.2em !important; margin: 0 !important; line-height: 1.1;'>MO\u00a7ES<span style='font-size: 16px; vertical-align: super; font-weight: 400; letter-spacing: normal;'>\u2122</span> <span style='color: #E8E0CF; font-weight: 300;'>SIGRANK</span></h1>"
-                "    <p style='color: #8a7f68 !important; font-size: 11px !important; letter-spacing: 0.05em !important; margin: 6px 0 0 0 !important; text-transform: uppercase;'>Diagnostic X-Ray of the Token Economy // Continuous Architectural Profiling</p>"
+                "<div style='display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; border-bottom: 2px solid #C4923A; padding: 4px 0 12px; margin-bottom: 10px;'>"
+                "  <div style='text-align: left; flex: none;'>"
+                "    <div style='color: #8a7f68; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 2px;'>Powered by MO\u00a7ES\u2122</div>"
+                "    <h1 style='margin: 0 !important; line-height: 0.9; text-shadow: 0 0 24px rgba(196,146,58,0.25);'>SIGRANK</h1>"
                 "  </div>"
-                "  <div style='text-align: right; font-size: 10px; color: #8a7f68; letter-spacing: 0.1em; line-height: 1.4; font-weight: bold;'>"
-                "    SYSTEM STATUS: <span style='color: #22c55e;'>ONLINE</span><br>"
-                "    METRIC VECTOR: <span style='color: #C4923A;'>\u03a5 = (C\u00b7O)/I\u00b2</span>"
+                "  <div style='text-align: right; color: #E8E0CF; font-size: 14px; font-weight: 600; line-height: 1.5; max-width: 440px; padding-top: 34px;'>"
+                "    Ranking AI operators on performance, production, architecture &amp; cost efficiency. "
+                "    <span style='color:#C4923A;'>Identifying Burners, Builders, and 10\u00d7ers.</span>"
                 "  </div>"
                 "</div>"
             )
-            gr.HTML(
-                f'<div id="moses-stat-strip" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: #1E1B15; border: 1px solid #3A3324; padding: 12px 18px; border-radius: 6px; margin-bottom: 24px;">'
-                f'  <div style="border-right: 1px solid #3A3324; padding-right: 10px;">'
-                f'    <div style="font-size: 9px; color: #8a7f68; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px;">Operators Profiled</div>'
-                f'    <div style="font-size: 20px; color: #E8E0CF; font-weight: 700;">{len(_ops_now)} <span style="font-size: 11px; color: #8a7f68; font-weight: normal;">nodes</span></div>'
-                f'  </div>'
-                f'  <div style="border-right: 1px solid #3A3324; padding-right: 10px; padding-left: 10px;">'
-                f'    <div style="font-size: 9px; color: #8a7f68; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px;">Empirical Delta</div>'
-                f'    <div style="font-size: 20px; color: #C4923A; font-weight: 700;">{_lead:,.0f}\u00d7 <span style="font-size: 11px; color: #8a7f68; font-weight: normal;">max \u03a5</span></div>'
-                f'  </div>'
-                f'  <div style="border-right: 1px solid #3A3324; padding-right: 10px; padding-left: 10px;">'
-                f'    <div style="font-size: 9px; color: #8a7f68; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px;">Evaluation Strategy</div>'
-                f'    <div style="font-size: 14px; color: #E8E0CF; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.02em;">Compounding Loops</div>'
-                f'  </div>'
-                f'  <div style="padding-left: 10px;">'
-                f'    <div style="font-size: 9px; color: #8a7f68; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px;">Core Constraint</div>'
-                f'    <div style="font-size: 14px; color: #8a7f68; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.02em;"><span style="color: #E8E0CF;">Architecture</span> &gt; Budget</div>'
-                f'  </div>'
-                f'</div>'
-            )
+            # full-width live leaderboard scroller (replaces the old static stat strip)
+            gr.HTML(profile_marquee_html())
 
-        # ---- TAB 1: Leaderboard (board + sticky profile inspector) ----
-        with gr.Tab("Leaderboard"):
-            gr.Markdown("Ranked by **\u03a5 = (Cache\u00b7Output)/Input\u00b2**. Raw Read\u00b7Create\u00b7In\u00b7Out stacked under each operator. $/1M is blended cost \u2014 efficient architecture is also the cheapest.")
-            with gr.Row():
-                with gr.Column(scale=7):
-                    rank_by = gr.Radio(list(SORT_LABELS.keys()), value="\u03a5 yield",
-                                       label="Rank by", elem_id="rank-by")
-                    lb = gr.HTML(board_html())
-                    rank_by.change(resort_board, rank_by, lb)
-                    gr.HTML(metrics_key_html())
-                    gr.Markdown("*Curated corpus \u00b7 pasting scores you live but isn't persisted unless you sign in \u00b7 $/1M is a list-price recompute (~) \u00b7 \\* = structural estimation.*", elem_id="moses-foot")
-                with gr.Column(scale=5):
-                    gr.Markdown("### Operator profile inspector")
-                    op_pick = gr.Dropdown(_names, label="Select an operator to pull their card",
-                                          value=None, elem_id="op-pick")
-                    op_card = gr.HTML(CARD_PLACEHOLDER)
-                    op_prof = gr.Markdown(elem_id="moses-profile")
-                    op_pick.change(view_operator, op_pick, [op_prof, op_card])
+        # ---- TAB: Home (landing — metric standard + section minis + links) ----
+        with gr.Tab("Home"):
+            gr.HTML(metric_features_html())
+            gr.HTML(home_html())
+            gr.HTML(home_footer_html())
 
-        # ---- TAB 2: Clock Your Signal (primary importer up top, then ingest + card) ----
-        with gr.Tab("Clock Your Signal"):
+        # ---- TAB: Create (clock your signal \u2014 the importer) ----
+        with gr.Tab("Create"):
             gr.Markdown("### Primary path \u2014 run the local importer")
             gr.Markdown("Reads your usage on your own machine. **Nothing leaves your computer.** Clone it once, then run:")
             gr.Code(value="git clone https://github.com/Burnmydays/hf-\ncd hf-\n./sigrank",
@@ -525,8 +786,6 @@ npx ccusage@latest codex --json
                     blob = gr.Textbox(label="ccusage JSON \u2014or\u2014 four numbers (I O C R)", lines=5,
                                       placeholder='Paste ccusage JSON here\n\nor four numbers: input output cache_create cache_read\n\nExample: 1251211 11296121 128196310 2555179769')
                     go = gr.Button("Clock My Signal", variant="primary", elem_id="compute-btn")
-                    gr.Markdown("### Your live board placement")
-                    ob = gr.HTML(board_html_slim())
                     gr.Markdown("### Greatest hits")
                     hits = gr.HTML()
                 with gr.Column(scale=6):
@@ -535,7 +794,7 @@ npx ccusage@latest codex --json
                     gr.Markdown("*Right-click \u2192 Save image to share your architectural footprint.*", elem_id="moses-foot")
                     prof_bar = gr.HTML()
                     prof = gr.Markdown(elem_id="moses-profile")
-            go.click(run_ingest, [blob, nm], [prof, prof_bar, card, hits, ob])
+            go.click(run_ingest, [blob, nm], [prof, prof_bar, card, hits])
             gr.Examples(
                 examples=[
                     ['{"totals":{"inputTokens":1251211,"outputTokens":11296121,"cacheCreationTokens":128196310,"cacheReadTokens":2555179769}}','MO\u00a7ES'],
@@ -543,6 +802,38 @@ npx ccusage@latest codex --json
                     ['1251211 11296121 128196310 2555179769', 'manual-paste'],
                 ],
                 inputs=[blob, nm])
+            gr.Markdown("### What the metrics mean")
+            gr.HTML(metrics_explainer_html())
+
+        # ---- TAB: Leaders (the board) ----
+        with gr.Tab("Leaders"):
+            gr.Markdown("**The ledger doesn't care what you claim.** Ranked by **\u03a5 = (Cache\u00b7Output)/Input\u00b2** \u2014 raw Read\u00b7Create\u00b7In\u00b7Out stacked under each operator. $/1M is blended cost; efficient architecture is also the cheapest.")
+            rank_by = gr.Radio(list(SORT_LABELS.keys()), value="\u03a5 yield",
+                               label="Rank by", elem_id="rank-by")
+            lb = gr.HTML(board_html())
+            rank_by.change(resort_board, rank_by, lb)
+            gr.HTML(metrics_key_html())
+            gr.Markdown("*Curated corpus \u00b7 pasting scores you live but isn't persisted unless you sign in \u00b7 $/1M is a list-price recompute (~) \u00b7 \\* = structural estimation.*", elem_id="moses-foot")
+
+        # ---- TAB: VS (head-to-head compare) ----
+        with gr.Tab("VS"):
+            gr.Markdown("### Put operators head-to-head\nSelect 2\u20133 operators. Gold cell wins each metric. **This is where architecture beats budget in plain sight.**")
+            cmp_pick = gr.Dropdown(_names, label="Operators (pick 2\u20133)", value=None,
+                                   multiselect=True, max_choices=3, elem_id="cmp-pick")
+            cmp_out = gr.HTML(compare_html(None))
+            cmp_pick.change(compare_html, cmp_pick, cmp_out)
+
+        # ---- TAB: Reports (operator profile inspector) ----
+        with gr.Tab("Reports"):
+            gr.Markdown("### Full architectural read on any operator\nPick a name to pull their complete profile, a shareable card, and **what to learn from them**.")
+            with gr.Row():
+                with gr.Column(scale=5):
+                    op_pick = gr.Dropdown(_names, label="Operator", value=None, elem_id="op-pick")
+                    op_card = gr.HTML(CARD_PLACEHOLDER)
+                with gr.Column(scale=6):
+                    op_prof = gr.Markdown(elem_id="moses-profile")
+                    op_insights = gr.HTML()
+            op_pick.change(view_operator, op_pick, [op_prof, op_card, op_insights])
 
         gr.Markdown(elem_id="moses-foot", value="""Four integers in, full ledger out. Architecture is the only variable that matters.
 Wild corpus: tokscale.ai footprints \u00b7 MO\u00a7ES row verified ccusage \u00b7 * = structural estimation.""")

theme.py

@@ -14,20 +14,23 @@ CSS = """
   --species-cascade: #C4923A;
 }
 .gradio-container, .gradio-container * { font-family: ui-monospace, "SF Mono", Menlo, monospace !important; }
-.gradio-container { background: var(--moses-bg) !important; max-width: 1100px !important; margin: 0 auto !important; }
+.gradio-container { background: var(--moses-bg) !important; max-width: 1100px !important; margin: 0 auto !important; overflow-x: hidden !important; }
 .dark .gradio-container, body { background: var(--moses-bg) !important; }
 
 #moses-hero {
   border-bottom: 1px solid var(--moses-gold);
-  padding: 16px 0 20px;
-  margin-bottom: 12px;
+  padding: 10px 0 4px;
+  margin-bottom: 0;
   position: relative;
 }
+/* kill the dead space: Blocks root column adds a 16px gap between hero and tabs */
+.column:has(> #moses-hero) { gap: 4px !important; }
+.tab-wrapper { margin: 0 0 2px 0 !important; padding: 0 !important; }
 #moses-hero h1 {
   color: var(--moses-gold) !important;
-  font-size: 32px !important;
-  letter-spacing: 0.16em !important;
-  font-weight: 700 !important;
+  font-size: 66px !important;
+  letter-spacing: 0.14em !important;
+  font-weight: 800 !important;
   margin: 0 !important;
 }
 #moses-hero p { color: var(--moses-dim) !important; font-size: 12px !important; margin: 6px 0 0 !important; }
@@ -44,11 +47,14 @@ CSS = """
 .tabitem {
   background: transparent !important;
   border: none !important;
-  padding: 16px 0px !important;
+  padding: 2px 0px !important;
 }
-.tabitem > div { gap: 20px !important; }
+.tabitem > div { gap: 10px !important; }
 button.selected { color: var(--moses-gold) !important; border-bottom: 2px solid var(--moses-gold) !important; }
-.tab-nav button { color: var(--moses-dim) !important; font-size: 13px !important; letter-spacing: 0.06em; }
+/* centered nav links (Gradio 6.x uses .tab-container, not .tab-nav) */
+.tab-nav, .tab-container { justify-content: center !important; gap: 6px; }
+.tab-nav button, .tab-container > button { color: var(--moses-dim) !important; font-size: 14px !important;
+  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700 !important; padding: 8px 16px !important; }
 
 .dataframe, table { background: var(--moses-card) !important; color: var(--moses-ink) !important;
   border: 1px solid var(--moses-line) !important; font-size: 12px !important; width: 100% !important; }
@@ -84,8 +90,14 @@ button.primary:hover, #compute-btn:hover { background: #d8a449 !important; }
 
 /* Structural Board Alignment Layout */
 .moses-board { font-family: ui-monospace, monospace; margin-top: 6px; width: 100% !important; box-sizing: border-box !important; }
-.mb-head, .mb-row { display: grid; grid-template-columns: 32px 1.8fr 0.6fr 0.7fr 0.7fr 0.75fr 0.7fr 1.5fr;
-  align-items: center; gap: 12px; padding: 10px 12px; width: 100%; box-sizing: border-box; }
+.mb-head, .mb-row { display: grid; grid-template-columns: 26px 0.95fr 0.5fr 0.55fr 0.5fr 0.55fr 0.5fr 0.9fr 1.5fr;
+  align-items: center; gap: 8px; padding: 7px 12px; width: 100%; box-sizing: border-box; }
+.mb-ledger { color: #7a7060; font-size: 10px; font-family: ui-monospace, monospace; text-align: right;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 1px solid #2c2718; padding-left: 8px; }
+.mb-head .mb-ledger { color: #C4923A; }
+/* sharp tabular separators between numeric columns */
+.mb-head .mb-num, .mb-row .mb-num, .mb-head .mb-y, .mb-row .mb-y {
+  border-left: 1px solid #2c2718; padding-left: 8px; }
 .mb-head { color: #C4923A; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
   border-bottom: 1px solid #C4923A; }
 .mb-row { border-bottom: 1px solid #3A3324; color: #8a7f68; font-size: 12px; }
@@ -114,6 +126,228 @@ button.primary:hover, #compute-btn:hover { background: #d8a449 !important; }
   background: linear-gradient(90deg, rgba(196,146,58,0.28), rgba(196,146,58,0.72)); border-radius: 2px; }
 .mb-row.you .mb-bar { background: linear-gradient(90deg, rgba(196,146,58,0.4), #C4923A); }
 .mb-yval { position: relative; z-index: 2; color: #E8E0CF; font-weight: 700; font-size: 12px; padding-right: 4px; }
+/* warmer, more inviting rows: subtle gold wash on hover, breathing room for the ledger line */
+.mb-row { transition: background 0.12s ease; }
+.mb-row:hover { background: rgba(196,146,58,0.07); }
+.mb-raw { display: inline-block; margin-top: 3px; letter-spacing: 0.02em; opacity: 0.82; }
+/* warm focus ring on the operator pickers */
+#op-pick input:focus, #cmp-pick input:focus { box-shadow: 0 0 0 1px var(--moses-gold) !important; }
+
+/* ---------- VS / compare table ---------- */
+.cmp-table { width: 100%; border-collapse: collapse; background: var(--moses-card);
+  border: 1px solid var(--moses-line); border-radius: 6px; overflow: hidden; margin-top: 6px; }
+.cmp-table th, .cmp-table td { padding: 10px 12px; text-align: right; font-size: 13px;
+  border-bottom: 1px solid var(--moses-line); }
+.cmp-table thead th { color: var(--moses-gold); text-transform: uppercase; font-size: 11px;
+  letter-spacing: 0.05em; border-bottom: 1px solid var(--moses-gold); }
+.cmp-table th.cmp-op { color: var(--moses-ink); font-weight: 700; }
+.cmp-rowlabel { text-align: left !important; color: var(--moses-dim); text-transform: uppercase;
+  font-size: 10px; letter-spacing: 0.05em; }
+.cmp-win { color: var(--moses-bg) !important; background: var(--moses-gold) !important;
+  font-weight: 700; }
+.cmp-empty { padding: 26px; text-align: center; color: var(--moses-dim);
+  border: 1px dashed var(--moses-line); border-radius: 6px; background: rgba(196,146,58,0.03); }
+.cmp-note { color: var(--moses-dim); font-size: 10px; margin-top: 8px; }
+@media (max-width: 700px) { .cmp-table th, .cmp-table td { padding: 7px 6px; font-size: 11px; } }
+
+/* ---------- Home / landing ---------- */
+.hm-lead { color: var(--moses-dim); font-size: 11px; letter-spacing: 0.04em;
+  text-transform: uppercase; margin: 2px 2px 6px; }
+.pm-wrap { overflow: hidden; border: 1px solid var(--moses-line); border-radius: 6px;
+  background: var(--moses-card); padding: 8px 0; margin-bottom: 14px; }
+.pm-track { display: flex; gap: 10px; width: max-content; animation: pm-scroll 70s linear infinite; }
+.pm-wrap:hover .pm-track { animation-play-state: paused; }
+@keyframes pm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+.pm-chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px; white-space: nowrap;
+  border-left: 3px solid var(--moses-line); background: rgba(196,146,58,0.04); border-radius: 4px; }
+.pm-chip.species-throughput { border-left-color: var(--species-throughput); }
+.pm-chip.species-converter  { border-left-color: var(--species-converter); }
+.pm-chip.species-architect  { border-left-color: var(--species-architect); }
+.pm-chip.species-cascade    { border-left-color: var(--species-cascade); }
+.pm-rank { color: var(--moses-dim); font-size: 10px; font-weight: 700; }
+.pm-name { color: var(--moses-ink); font-size: 12px; font-weight: 700; }
+.pm-stat { color: var(--moses-gold); font-size: 11px; font-weight: 700; }
+.pm-lev  { color: var(--moses-dim); font-size: 10px; }
+
+.hm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.hm-box { border: 1px solid var(--moses-line); border-radius: 6px; background: var(--moses-card);
+  padding: 16px 18px; transition: border-color 0.12s ease, background 0.12s ease; }
+.hm-box:hover { border-color: var(--moses-gold); background: rgba(196,146,58,0.06); }
+.hm-title { color: var(--moses-gold); font-size: 15px; font-weight: 800; letter-spacing: 0.04em; }
+.hm-sub { color: var(--moses-ink); font-size: 12px; font-weight: 600; margin-top: 3px; }
+.hm-desc { color: var(--moses-dim); font-size: 11px; margin-top: 6px; line-height: 1.45; }
+.hm-cta { color: var(--moses-gold); font-size: 10px; text-transform: uppercase;
+  letter-spacing: 0.06em; margin-top: 12px; }
+@media (max-width: 700px) { .hm-grid { grid-template-columns: 1fr; } }
+
+/* metric standard (feature row) */
+.mf-head { text-align: center; color: var(--moses-ink); font-size: 26px; font-weight: 800;
+  letter-spacing: 0.01em; margin: 0 0 14px; line-height: 1.2; }
+.mf-head span { color: var(--moses-gold); text-shadow: 0 0 18px rgba(196,146,58,0.35); }
+@media (max-width: 700px) { .mf-head { font-size: 20px; } }
+.mf-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
+/* live-status box (sits between SNR and 10x) */
+.mf-status { text-align: left; }
+.ms-title { color: #4ade80; font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
+  text-transform: uppercase; margin-bottom: 8px; }
+.ms-dot { color: #22c55e; }
+.ms-grid { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; font-size: 11px; align-items: baseline; }
+.ms-grid > span:nth-child(odd) { color: var(--moses-dim); text-transform: uppercase; letter-spacing: 0.03em; }
+.ms-grid > span:nth-child(even) { text-align: right; font-weight: 800; }
+.ms-tot { color: var(--moses-ink); }
+.mf-box { border: 1px solid var(--moses-gold); border-radius: 6px; background: rgba(196,146,58,0.06);
+  padding: 12px; text-align: center; }
+.mf-sym { color: var(--moses-dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
+.mf-big { color: var(--moses-gold); font-size: 32px; font-weight: 800; line-height: 1.05; margin: 4px 0 2px;
+  text-shadow: 0 0 16px rgba(196,146,58,0.3); }
+.mf-form { color: var(--moses-dim); font-size: 9.5px; font-family: ui-monospace, monospace; }
+.mf-tag { color: var(--moses-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
+@media (max-width: 700px) { .mf-grid { grid-template-columns: 1fr 1fr; } }
+
+/* mini samples inside section boxes */
+.hm-sample { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--moses-line);
+  border-radius: 4px; background: var(--moses-bg); font-size: 11px; }
+.sm-row { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
+.sm-rk { color: var(--moses-dim); font-size: 10px; width: 22px; }
+.sm-nm { color: var(--moses-ink); font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sm-y { color: var(--moses-gold); font-weight: 700; }
+.sm-y2 { color: var(--moses-dim); font-weight: 700; }
+.sm-card .sm-nm { font-size: 12px; }
+.sm-kv { color: var(--moses-dim); font-size: 10px; margin-top: 3px; }
+.sm-vs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+.sm-vsx { color: var(--moses-gold); font-size: 10px; text-transform: uppercase; }
+.sm-create { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+.sm-create code { color: var(--moses-dim); font-size: 10px; }
+.sm-arrow { color: var(--moses-gold); }
+
+/* home footer: demo video + steps + links */
+.hm-foot { display: grid; grid-template-columns: 1fr 1.4fr 0.8fr; gap: 16px; margin-top: 14px;
+  padding-top: 14px; border-top: 1px solid var(--moses-line); }
+.hf-h { color: var(--moses-gold); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
+.hf-btn { display: inline-block; background: var(--moses-gold); color: var(--moses-bg) !important;
+  padding: 8px 14px; border-radius: 5px; font-weight: 700; font-size: 12px; text-decoration: none; }
+.hf-steps { margin: 0; padding-left: 18px; color: var(--moses-dim); font-size: 11px; line-height: 1.7; }
+.hf-steps code { color: var(--moses-ink); font-size: 10px; }
+.hf-steps b { color: var(--moses-gold); }
+.hf-link { display: block; color: var(--moses-gold) !important; font-size: 12px; margin-bottom: 6px; text-decoration: none; }
+.hf-link:hover { text-decoration: underline; }
+@media (max-width: 700px) { .hm-foot { grid-template-columns: 1fr; } }
+
+/* ---------- mini page thumbnails (real HTML scaled down) ---------- */
+.mini { border-radius: 8px; overflow: hidden; background: var(--moses-card);
+  border: 1px solid var(--moses-line); box-shadow: 0 6px 20px rgba(0,0,0,0.5); margin-bottom: 12px; }
+.mini-chrome { display: flex; align-items: center; gap: 5px; padding: 6px 9px;
+  border-bottom: 1px solid var(--moses-line); background: linear-gradient(90deg,#241f17,#15130f); }
+.mini-chrome span { width: 7px; height: 7px; border-radius: 50%; background: #3A3324; flex: none; }
+.mini-cap { margin-left: auto; font-size: 8.5px; text-transform: uppercase;
+  letter-spacing: 0.08em; color: var(--moses-dim); }
+.mini-view { position: relative; height: 190px; overflow: hidden; background: var(--moses-bg); }
+.mini-scale { position: absolute; top: 0; left: 0; width: 323%;
+  transform: scale(0.31); transform-origin: top left; pointer-events: none; }
+/* per-section accent on the chrome dot + frame + glow */
+.mini-gold   { border-color: rgba(196,146,58,0.55); }  .mini-gold   .mini-chrome span:first-child { background: #C4923A; }
+.mini-purple { border-color: rgba(139,92,246,0.55); }  .mini-purple .mini-chrome span:first-child { background: #8b5cf6; }
+.mini-blue   { border-color: rgba(59,130,246,0.55); }  .mini-blue   .mini-chrome span:first-child { background: #3b82f6; }
+.mini-green  { border-color: rgba(34,197,94,0.55); }   .mini-green  .mini-chrome span:first-child { background: #22c55e; }
+
+/* colorful section accents */
+.hm-gold   { border-top: 3px solid #C4923A; }  .hm-gold   .hm-title { color: #C4923A; }
+.hm-purple { border-top: 3px solid #8b5cf6; }  .hm-purple .hm-title { color: #a78bfa; }
+.hm-blue   { border-top: 3px solid #3b82f6; }  .hm-blue   .hm-title { color: #60a5fa; }
+.hm-green  { border-top: 3px solid #22c55e; }  .hm-green  .hm-title { color: #4ade80; }
+.hm-gold:hover   { box-shadow: 0 0 0 1px #C4923A, 0 10px 26px rgba(196,146,58,0.18); border-color: #C4923A; }
+.hm-purple:hover { box-shadow: 0 0 0 1px #8b5cf6, 0 10px 26px rgba(139,92,246,0.18); border-color: #8b5cf6; }
+.hm-blue:hover   { box-shadow: 0 0 0 1px #3b82f6, 0 10px 26px rgba(59,130,246,0.18); border-color: #3b82f6; }
+.hm-green:hover  { box-shadow: 0 0 0 1px #22c55e, 0 10px 26px rgba(34,197,94,0.18); border-color: #22c55e; }
+
+/* create-tab mock (rendered inside its thumbnail) */
+.cr-mock { padding: 16px; font-size: 14px; }
+.cr-code { color: #4ade80; background: #0f0d0a; padding: 10px 12px; border-radius: 5px;
+  font-family: ui-monospace, monospace; }
+.cr-box { color: var(--moses-dim); border: 1px dashed var(--moses-line); padding: 12px;
+  margin: 10px 0; border-radius: 5px; }
+.cr-box b { color: var(--moses-ink); }
+.cr-btn { background: var(--moses-gold); color: var(--moses-bg); text-align: center;
+  padding: 10px; border-radius: 5px; font-weight: 800; }
+.cr-res { color: var(--moses-gold); margin-top: 10px; font-weight: 800; text-align: center; }
+
+/* ---------- metrics explainer (SigRank vs standard) ---------- */
+.mx-wrap { margin-top: 8px; }
+.mx-analogy { color: var(--moses-ink); font-size: 14px; line-height: 1.55; text-align: center;
+  max-width: 760px; margin: 0 auto 18px; }
+.mx-analogy .mx-gold, .mx-bottom .mx-gold { color: var(--moses-gold); font-weight: 700; }
+.mx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+.mx-col { border: 1px solid var(--moses-line); border-radius: 8px; padding: 14px 16px; background: var(--moses-card); }
+.mx-col-sig { border-color: rgba(196,146,58,0.5); background: rgba(196,146,58,0.05); }
+.mx-col-head { font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
+  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--moses-line); }
+.mx-col-std .mx-col-head { color: var(--moses-dim); }
+.mx-col-sig .mx-col-head { color: var(--moses-gold); }
+.mx-item { padding: 9px 0; border-bottom: 1px solid #2c2718; }
+.mx-item:last-of-type { border-bottom: 0; }
+.mx-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
+.mx-name { color: var(--moses-ink); font-weight: 700; font-size: 12.5px; }
+.mx-form { color: var(--moses-gold); font-family: ui-monospace, monospace; font-size: 11px; }
+.mx-desc { color: var(--moses-dim); font-size: 11.5px; line-height: 1.45; margin-top: 3px; }
+.mx-vs { color: #a89e85; font-size: 11.5px; line-height: 1.45; margin-top: 4px; }
+.mx-vs b { color: var(--moses-dim); }
+.mx-result { color: var(--moses-gold); font-size: 11.5px; margin-top: 3px; font-weight: 600; }
+.mx-foot { color: var(--moses-dim); font-size: 11px; margin-top: 12px; padding-top: 10px;
+  border-top: 1px dashed var(--moses-line); }
+.mx-foot b { color: var(--moses-ink); }
+.mx-table { width: 100%; border-collapse: collapse; margin: 18px 0; background: var(--moses-card);
+  border: 1px solid var(--moses-line); border-radius: 8px; overflow: hidden; }
+.mx-table th, .mx-table td { padding: 10px 12px; text-align: left; font-size: 12px;
+  border-bottom: 1px solid var(--moses-line); }
+.mx-table thead th { color: var(--moses-gold); text-transform: uppercase; font-size: 10.5px;
+  letter-spacing: 0.05em; border-bottom: 1px solid var(--moses-gold); }
+.mx-table .mx-aspect { color: var(--moses-dim); font-weight: 700; text-transform: uppercase;
+  font-size: 10px; letter-spacing: 0.04em; }
+.mx-table td { color: #a89e85; }
+.mx-table .mx-win { color: var(--moses-ink); font-weight: 600; background: rgba(196,146,58,0.06); }
+.mx-thermo { border-left: 3px solid var(--moses-gold); background: rgba(196,146,58,0.05);
+  border-radius: 0 6px 6px 0; padding: 12px 16px; margin: 16px 0; color: #a89e85; font-size: 12px; line-height: 1.6; }
+.mx-thermo b { color: var(--moses-ink); }
+.mx-thermo-h { color: var(--moses-gold); font-weight: 800; font-size: 12px; letter-spacing: 0.03em; margin-bottom: 6px; }
+.mx-bottom { text-align: center; color: var(--moses-ink); font-size: 13px; line-height: 1.55;
+  max-width: 760px; margin: 16px auto 0; }
+@media (max-width: 700px) { .mx-cols { grid-template-columns: 1fr; } .mx-analogy { font-size: 13px; } }
+
+/* ---------- middle nav link (Leaders) emphasized ---------- */
+.tab-container > button:nth-child(3), .tab-nav > button:nth-child(3) {
+  color: var(--moses-gold) !important; font-size: 17px !important; font-weight: 800 !important;
+  text-shadow: 0 0 14px rgba(196,146,58,0.4); }
+
+/* ---------- hero status + live counters (top-right) ---------- */
+.hero-stat { text-align: right; font-size: 10px; letter-spacing: 0.06em; line-height: 1.65;
+  font-weight: 700; color: var(--moses-dim); white-space: nowrap; min-width: 196px;
+  margin-top: 34px; }  /* clear the HF Space pill (burnmydays/sigrank ♡) in embedded view */
+.hs-row { display: flex; justify-content: space-between; gap: 16px; }
+.hs-div { height: 1px; background: var(--moses-line); margin: 5px 0; }
+.hs-burn { color: #ef6b6b; } .hs-build { color: #4ade80; } .hs-tenx { color: var(--moses-gold); }
+@media (max-width: 700px) { .hero-stat { display: none; } }
+
+/* ---------- equation boxes: median/avg + hover description ---------- */
+.mf-box { position: relative; cursor: help; }
+.mf-stat { color: var(--moses-dim); font-size: 9.5px; margin-top: 5px; letter-spacing: 0.02em; }
+.mf-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
+  width: 220px; max-width: 70vw; background: #0f0d0a; color: var(--moses-ink);
+  border: 1px solid var(--moses-gold); border-radius: 6px; padding: 10px 12px; font-size: 11px;
+  line-height: 1.45; text-align: left; opacity: 0; visibility: hidden; transition: opacity 0.15s ease;
+  z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,0.6); }
+.mf-box:hover .mf-tip, .mf-box:focus .mf-tip { opacity: 1; visibility: visible; }
+.mf-sub { text-align: center; color: var(--moses-dim); font-size: 10px; margin: -4px 0 14px; }
+
+/* ---------- reports: learn-from insights ---------- */
+.ins-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
+.ins-block { border: 1px solid var(--moses-line); border-radius: 6px; padding: 12px 14px; }
+.ins-good { border-left: 3px solid #4ade80; background: rgba(34,197,94,0.05); }
+.ins-avoid { border-left: 3px solid #ef6b6b; background: rgba(239,107,107,0.05); }
+.ins-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; margin-bottom: 6px; }
+.ins-good .ins-h { color: #4ade80; } .ins-avoid .ins-h { color: #ef6b6b; }
+.ins-block ul { margin: 0; padding-left: 16px; }
+.ins-block li { color: var(--moses-dim); font-size: 11.5px; line-height: 1.5; margin-bottom: 4px; }
+@media (max-width: 700px) { .ins-wrap { grid-template-columns: 1fr; } }
 .mb-foot { color: #5f573f; font-size: 10.5px; padding: 10px 8px 0; line-height: 1.6; }
 
 /* composition bar */
@@ -275,6 +509,24 @@ footer { display: none !important; }
   .mb-row span:nth-child(3), .mb-row span:nth-child(4) { display: none !important; }
   .mb-op { min-width: 0; overflow-wrap: anywhere; }
   .mb-raw { font-size: 9px; line-height: 1.35; }
+  .mb-ledger { display: none !important; }
   .mb-y, .mb-yval { font-size: 11px !important; }
 }
+
+@media (max-width: 700px) {
+  /* Mobile overflow fix. Two real causes (found via live DOM inspection):
+     1) Gradio's fillable container + flex children (default min-width:auto) refuse
+        to shrink below content, pinning the page at ~1100px and scrolling sideways.
+     2) the marquee track is ~5000px wide; its wrapper must hard-clip.
+     min-width:0 lets the flex children collapse to the viewport. */
+  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
+  .gradio-container, .main, .wrap, .contain, .column, .block {
+    max-width: 100% !important; min-width: 0 !important; }
+  .pm-wrap { max-width: 100% !important; overflow: hidden !important; }
+  .gradio-container { padding-left: 8px !important; padding-right: 8px !important; }
+  #moses-hero h1 { font-size: 34px !important; letter-spacing: 0.08em !important; }
+  #moses-hero { padding-top: 26px; }       /* clear the HF Space pill on phones */
+  #moses-hero p { font-size: 12px !important; }
+  #rank-by, #rank-by .wrap { flex-wrap: wrap !important; }   /* Rank-by chips wrap, not overflow */
+}
 """