Refresh to final: hero centerpiece logo, board C:I:O ratio, all polish

app.py

@@ -34,6 +34,12 @@ def _fmt_int(n):
         if abs(n)>=d: return f"{n/d:.2f}{u}"
     return str(int(n))
 
+def _fmt_whole(n):
+    """One-decimal K/M/B/T — for the ledger column."""
+    for u,d in (("T",1e12),("B",1e9),("M",1e6),("K",1e3)):
+        if abs(n)>=d: return f"{n/d:.1f}{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."""
@@ -119,7 +125,7 @@ def board_html(extra=None, sort_key="yield"):
                '<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>'
-               '<span class="mb-ledger">ledger \u00b7 R\u00b7C\u00b7I\u00b7O</span></div>')
+               '<span class="mb-ledger">ratio \u00b7 C:I:O</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
@@ -145,7 +151,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'<span class="mb-ledger">{round((m["raw"]["cache_create"]+m["raw"]["cache_read"])/max(m["raw"]["input"],1))}:1:{round(m["raw"]["output"]/max(m["raw"]["input"],1))}</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>')
@@ -681,7 +687,7 @@ _HOME_SECTIONS = [
 
 def home_html():
     boxes = "".join(
-        f'<div class="hm-box hm-{accent}">{mini()}'
+        f'<div class="hm-box hm-{accent}" data-tab="{t}" role="button" tabindex="0">{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>'
@@ -689,6 +695,18 @@ def home_html():
     )
     return f'<div class="hm-grid">{boxes}</div>'
 
+# Delegated click: clicking a Home mini switches to that tab (Gradio tabs are buttons).
+_TAB_CLICK_JS = """() => {
+  document.addEventListener('click', (e) => {
+    const box = e.target.closest('.hm-box[data-tab]');
+    if (!box) return;
+    const name = (box.getAttribute('data-tab') || '').trim().toUpperCase();
+    const btn = [...document.querySelectorAll('.tab-container button, .tab-nav button')]
+      .find(b => b.textContent.trim().toUpperCase() === name);
+    if (btn) btn.click();
+  });
+}"""
+
 def home_footer_html():
     loom = "https://www.loom.com/share/edc345e2e5164e20aed3acb6436a08c3"
     return (
@@ -709,8 +727,22 @@ def home_footer_html():
 
 # ---------- UI ----------
 import os as _os
+import base64 as _base64
 _ON_SPACE = bool(_os.environ.get("SPACE_ID"))
 
+# MO§ES logo (gold § in concentric rings on a dark disc), as a base64 data-URI <img>
+# so it survives Gradio's HTML sanitizer (which strips inline <svg>).
+_LOGO_SVG = (
+    "<svg xmlns='http://www.w3.org/2000/svg' width='66' height='66' viewBox='0 0 100 100'>"
+    "<circle cx='50' cy='50' r='48' fill='#0F0D0A'/>"
+    "<circle cx='50' cy='50' r='44' fill='none' stroke='#C4923A' stroke-width='2'/>"
+    "<circle cx='50' cy='50' r='36' fill='none' stroke='#C4923A' stroke-width='1' opacity='0.4'/>"
+    "<text x='50' y='54' text-anchor='middle' dominant-baseline='central' "
+    "font-family='Georgia, serif' font-size='56' font-weight='700' fill='#C4923A'>§</text>"
+    "</svg>"
+)
+_LOGO_DATA_URI = "data:image/svg+xml;base64," + _base64.b64encode(_LOGO_SVG.encode("utf-8")).decode("ascii")
+
 # Ghost/"unminted" card so the right column is never an empty void on first load.
 CARD_PLACEHOLDER = (
     '<div class="sig-card species-throughput" id="ghost-card">'
@@ -735,16 +767,15 @@ def _build_demo():
     with _b:
         with gr.Column(elem_id="moses-hero"):
             gr.HTML(
-                "<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='position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; padding: 8px 0 12px; border-bottom: 2px solid #C4923A; margin-bottom: 8px;'>"
                 "  <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; 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 style='position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);'><div class='moses-logo'><span class='ml-s'>§</span></div></div>"
+                "  <div style='text-align: right; max-width: 400px; color:#E8E0CF; font-size: 15px; font-weight: 600; line-height: 1.4;'>Ranking AI operators on performance, production, architecture &amp; cost efficiency.</div>"
                 "</div>"
+                "<div style='text-align: center; color:#C4923A; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; margin: 4px 0 10px;'>Identifying Burners, Builders, and 10×ers.</div>"
             )
             # full-width live leaderboard scroller (replaces the old static stat strip)
             gr.HTML(profile_marquee_html())
@@ -807,11 +838,11 @@ npx ccusage@latest codex --json
 
         # ---- 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")
+                               show_label=False, elem_id="rank-by")
             lb = gr.HTML(board_html())
             rank_by.change(resort_board, rank_by, lb)
+            gr.Markdown("**The ledger doesn't care what you claim.** Ranked by **\u03a5 = (Cache\u00b7Output)/Input\u00b2**. The ratio column is cache:input:output (input = 1). $/1M is blended cost \u2014 efficient architecture is also the cheapest.")
             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")
 
@@ -837,6 +868,7 @@ npx ccusage@latest codex --json
 
         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.""")
+        _b.load(None, None, None, js=_TAB_CLICK_JS)   # make Home minis clickable \u2192 tab switch
     return _b
 
 demo = _build_demo()

theme.py

@@ -89,9 +89,13 @@ button.primary:hover, #compute-btn:hover { background: #d8a449 !important; }
 #moses-foot { border-top: 1px solid var(--moses-line); padding-top: 10px; margin-top: 16px; line-height: 1.7; }
 
 /* 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: 26px 0.95fr 0.5fr 0.55fr 0.5fr 0.55fr 0.5fr 0.9fr 1.5fr;
+.moses-board { font-family: ui-monospace, monospace; margin-top: 6px; width: 100% !important; box-sizing: border-box !important;
+  border: 1px solid var(--moses-line); border-radius: 8px; overflow: hidden; }
+.mb-head, .mb-row { display: grid; grid-template-columns: 26px 1.5fr 0.5fr 0.55fr 0.5fr 0.55fr 0.5fr 0.6fr 0.85fr;
   align-items: center; gap: 8px; padding: 7px 12px; width: 100%; box-sizing: border-box; }
+.mb-head > span, .mb-row > span { min-width: 0; }   /* let cells shrink so nothing overflows */
+.mb-row b { font-size: 12px !important; }
+.mb-op b { white-space: nowrap; }
 .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; }
@@ -121,7 +125,8 @@ button.primary:hover, #compute-btn:hover { background: #d8a449 !important; }
 .mb-row b { color: #E8E0CF; font-family: var(--font-sans, sans-serif); font-size: 13px; }
 .mb-raw { color: #7a7060; font-size: 9.5px; }
 .mb-num { text-align: right; }
-.mb-y { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 20px; }
+.mb-y { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 6px;
+  min-height: 20px; overflow: hidden; border-radius: 3px; }
 .mb-bar { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 14px;
   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); }
@@ -170,7 +175,7 @@ button.primary:hover, #compute-btn:hover { background: #d8a449 !important; }
 .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);
+.hm-box { cursor: pointer; 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; }
@@ -313,6 +318,15 @@ button.primary:hover, #compute-btn:hover { background: #d8a449 !important; }
   max-width: 760px; margin: 16px auto 0; }
 @media (max-width: 700px) { .mx-cols { grid-template-columns: 1fr; } .mx-analogy { font-size: 13px; } }
 
+/* ---------- MO§ES logo (CSS-drawn: gold § in concentric rings on a dark disc) ---------- */
+.moses-logo { position: relative; width: 82px; height: 82px; border-radius: 50%;
+  background: #0F0D0A; border: 2px solid var(--moses-gold); display: flex;
+  align-items: center; justify-content: center; box-shadow: 0 0 18px rgba(196,146,58,0.45); }
+.moses-logo::before { content: ''; position: absolute; inset: 6px; border-radius: 50%;
+  border: 1px solid rgba(196,146,58,0.4); }
+.ml-s { color: var(--moses-gold); font-family: Georgia, "Times New Roman", serif;
+  font-size: 48px; font-weight: 700; line-height: 1; }
+
 /* ---------- 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;
@@ -447,10 +461,11 @@ button.primary:hover, #compute-btn:hover { background: #d8a449 !important; }
 
 /* "Rank by" radio -> horizontal pill / segmented control (not a gray form) */
 #rank-by { border: none !important; background: transparent !important; padding: 0 !important; }
-#rank-by .wrap { display: flex !important; flex-wrap: wrap; gap: 6px; }
+#rank-by .wrap { display: flex !important; flex-wrap: wrap; gap: 6px; justify-content: center !important; }
 #rank-by .wrap label {
+  flex: 1 1 0; max-width: 150px; text-align: center;
   background: var(--moses-card); border: 1px solid var(--moses-line);
-  border-radius: 16px; padding: 4px 12px; color: var(--moses-dim);
+  border-radius: 16px; padding: 5px 12px; color: var(--moses-dim);
   font-size: 11px; cursor: pointer; margin: 0 !important; }
 #rank-by .wrap label.selected, #rank-by .wrap label:has(input:checked) {
   border-color: var(--moses-gold) !important; color: var(--moses-gold) !important;