Spaces:

CamoAiLab
/

InferenceNet-Leaderboard

Running

App Files Files Community

YICHEN013 commited on Sep 20

Commit

e3521a3

verified ·

1 Parent(s): 50f656f

Align leaderboard with the InferenceNet Challenge website

Browse files

Bring results into the first screen with the Challenge website’s light/dark styling, a five-metric table and the shared mountain visualization. Add an all-results view while preserving paired-only comparisons, DSH provenance and expandable scoring evidence.

Validated all 13 runs, five sorting metrics, 6 baseline / 7 harness / 6 paired views, search, Chinese/English, light/dark themes and narrow layouts. Published data, scoring and result archives are unchanged.

Files changed (5) hide show

index.html +40 -22
leaderboard.css +17 -7
leaderboard.js +110 -29
mountain.css +145 -0
mountain.js +499 -0

index.html CHANGED Viewed

@@ -4,30 +4,33 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="InferenceNet research leaderboard: single-pass generation, DeepAgents and an independent DeepSeek Harness result on 1,000 econometric replication tasks.">
-  <meta name="color-scheme" content="dark">
-  <title>InferenceNet · Agent & Harness Leaderboard</title>
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230c1219'/%3E%3Ctext x='5' y='23' font-family='sans-serif' font-size='21' fill='%2378dbc0'%3EiN%3C/text%3E%3C/svg%3E">
   <link rel="stylesheet" href="./leaderboard.css">
-  <script src="./leaderboard.js" defer></script>
 </head>
 <body>
   <a class="skip" href="#rankings">Skip to rankings</a>
   <main class="page">
     <nav class="topbar" aria-label="Main navigation">
-      <a class="brand" href="https://easonai-5589.github.io/inferencenet-challenge/" target="_blank" rel="noopener noreferrer"><span class="brand-mark" aria-hidden="true">iN</span>InferenceNet</a>
       <div class="nav-links">
         <a href="https://huggingface.co/datasets/CamoAiLab/InferenceNet" target="_blank" rel="noopener noreferrer" data-i18n="dataset">Dataset ↗</a>
         <a href="https://huggingface.co/spaces/CamoAiLab/InferenceNet-Leaderboard/tree/main/results" target="_blank" rel="noopener noreferrer" data-i18n="archive">Results archive ↗</a>
         <button id="language" type="button" aria-label="Switch to Chinese">中文</button>
       </div>
     </nav>
     <header class="hero">
-      <p class="eyebrow"><span class="dot" aria-hidden="true"></span><span data-i18n="edition">RESEARCH LEADERBOARD · SEPTEMBER 2026</span></p>
-      <h1 data-i18n="title">Models and harnesses.<br><span>Real research, reproduced.</span></h1>
-      <p class="intro" data-i18n="intro">Explore single-pass agents, DeepAgents and a separate DeepSeek Harness result on real econometric replication tasks.</p>
       <div class="facts" aria-label="Dataset coverage">
-        <span><strong id="model-count">—</strong><span data-i18n="models">requested model aliases</span></span>
         <span><strong id="group-count">—</strong><span data-i18n="groups">experiment groups</span></span>
         <span><strong id="task-count">—</strong><span data-i18n="tasks">tasks per group</span></span>
         <span><strong id="record-count">—</strong><span data-i18n="records">task records</span></span>
@@ -35,27 +38,23 @@
       </div>
     </header>
-    <section class="protocols" aria-label="Experimental settings">
-      <div><p class="protocol-tag baseline"><span aria-hidden="true">A</span><strong data-i18n="single">Single-pass Agent</strong></p><p data-i18n="singleDesc">One code-generation call, followed by execution. No iterative agent loop.</p></div>
-      <div><p class="protocol-tag harness"><span aria-hidden="true">B</span><strong data-i18n="deepagents">DeepAgents</strong></p><p data-i18n="harnessDesc">DeepAgents plans, uses tools and revises code. Up to 6 model calls, plus final execution.</p></div>
-      <div><p class="protocol-tag independent"><span aria-hidden="true">C</span><strong data-i18n="dsh">DeepSeek Harness · separate run</strong></p><p data-i18n="dshDesc">Official DSH SDK, requested v4-pro API alias. A fixed technical recovery selection; underlying model weights are unverified.</p></div>
-    </section>
     <section id="rankings" aria-labelledby="rankings-title">
-      <div class="section-head"><div><p class="eyebrow" data-i18n="resultsLabel">01 / RESULTS</p><h2 id="rankings-title" data-i18n="rankings">Agent & Harness leaderboard</h2></div><span class="badge" data-i18n="research">Research results · provisional</span></div>
-      <p class="scope-note" data-i18n="scope">Locally scored, archived results. Official scorer parity is not yet verified. Different budgets and run protocols mean the lift is descriptive, not an equal-cost comparison.</p>
-      <aside id="independent-notice" class="independent-notice" hidden><strong data-i18n="dshNoticeTitle">DSH is an independent result.</strong><p data-i18n="dshNotice">The request used deepseek-v4-pro; the underlying model weights were not verified. The fixed 1,000-task selection includes 87 technical replacement attempts (27 with changed input-schema prompts), with 30 task outcomes still unknown. It is excluded from the paired DeepAgents lift.</p><a id="dsh-protocol" data-i18n="dshProtocol" target="_blank" rel="noopener noreferrer">Read run protocol & evidence ↗</a></aside>
       <div class="toolbar">
         <div class="view-switch" role="group" aria-label="Leaderboard view">
           <button type="button" data-view="compare" aria-pressed="false" data-i18n="compare">Baseline / DeepAgents pairs</button>
           <button type="button" data-view="baseline" aria-pressed="false" data-i18n="single">Single-pass Agent</button>
-          <button type="button" data-view="harness" aria-pressed="true" data-i18n="harness">All harness runs</button>
         </div>
         <a class="download" href="./leaderboard.csv" download data-i18n="download">Download CSV ↓</a>
       </div>
       <div class="filters">
-        <label class="metric-control"><span data-i18n="metric">Metric</span><select id="metric">
           <optgroup label="Local paper profile" data-group="local">
             <option value="perfect" data-i18n="perfect">Full replication · local</option>
           </optgroup>
@@ -69,7 +68,15 @@
         <label id="sort-control"><span data-i18n="sort">Sort by</span><select id="sort"><option value="deepagents" data-i18n="harnessScore">DeepAgents score</option><option value="baseline" data-i18n="singleScore">Single-pass score</option><option value="gain" data-i18n="lift">Lift</option></select></label>
         <label class="search-control"><span data-i18n="search">Find a model</span><input id="search" type="search" placeholder="Search models…" autocomplete="off"></label>
       </div>
-      <p id="metric-description" class="metric-description"></p>
       <p id="load-state" role="status" class="load-state">Loading archived results…</p>
       <div id="error" class="error" role="alert" hidden><p data-i18n="error">Results could not be loaded. Please retry or open the results archive.</p><button type="button" id="retry" data-i18n="retry">Retry</button></div>
       <div id="table-wrap" class="table-wrap" tabindex="0" aria-label="Scrollable leaderboard" hidden>
@@ -77,22 +84,33 @@
       </div>
       <p id="empty" class="load-state" hidden data-i18n="empty">No matching models.</p>
       <div class="table-foot"><span id="result-count" aria-live="polite"></span><span data-i18n="denominator">Every score uses all 1,000 tasks. Unknown and invalid outcomes earn no successes.</span></div>
     </section>
-    <section class="method" aria-labelledby="method-title">
-      <div class="section-head"><div><p class="eyebrow" data-i18n="methodLabel">02 / HOW TO READ THIS</p><h2 id="method-title" data-i18n="methodTitle">A comparison you can inspect.</h2></div><a href="./legacy.html" data-i18n="historical">Historical leaderboard ↗</a></div>
       <div class="method-grid">
         <article><h3 data-i18n="fixedTasks">Fixed task set</h3><p data-i18n="fixedDesc">The same Selected_1000 task IDs and dataset revision are used for every group. Each score is successes ÷ 1,000; failed or unknown tasks stay in the denominator.</p></article>
         <article><h3 data-i18n="separateMetrics">Two scoring profiles</h3><p data-i18n="profilesDesc">Full replication is the local paper metric. The four HF-style metrics reproduce the published descriptions locally; they are not yet verified against the official scorer.</p></article>
         <article><h3 data-i18n="budgetTitle">Read lift with the budgets</h3><p data-i18n="budgetDesc">Baseline: 1 model call. DeepAgents and DSH: up to 6 model calls and 4 trial tool calls per attempt. DSH adds 87 recovery attempts; full environment and reasoning parity is unverified. DSH has no paired lift; these are not equal-cost causal estimates.</p></article>
       </div>
-      <details class="evidence"><summary data-i18n="evidence">Evidence status & metric definitions</summary>
         <p data-i18n="unknownDesc">“Metric unknown” means the selected metric cannot be assessed, including failed execution or unavailable outputs. It is different from a task whose final status is unknown. Neither is dropped or counted as a success.</p>
         <ul id="definitions"></ul>
         <div class="evidence-table-wrap"><table class="evidence-table"><caption data-i18n="evidenceCaption">Status from each accepted archive</caption><thead><tr><th data-i18n="model">Model / API alias</th><th data-i18n="protocol">Protocol</th><th data-i18n="evidenceCol">Evidence</th></tr></thead><tbody id="evidence-body"></tbody></table></div>
         <p data-i18n="verification">HF-style counts are checked against archived task flags. Full-replication counts for Sol and Opus come from accepted summaries; all other displayed runs, including DSH, have per-task local flags. This refresh does not rerun or rescore any experiment.</p>
         <p data-i18n="archiveNote">Per-run archive files remain frozen, including their original publication metadata. This page is a new display derived from those archives. GPT-5.5 and unarchived experiments are not included in this edition.</p>
       </details>
     </section>
     <footer><span>InferenceNet <span class="muted">/</span> <span data-i18n="footer">Econometric replication, measured.</span></span><div><a id="revision-link" href="https://huggingface.co/spaces/CamoAiLab/InferenceNet-Leaderboard/tree/main/results" target="_blank" rel="noopener noreferrer" data-i18n="source">Source snapshot ↗</a><a href="./leaderboard-data.json" data-i18n="json">Data JSON ↗</a><a href="https://easonai-5589.github.io/inferencenet-challenge/" target="_blank" rel="noopener noreferrer" data-i18n="project">Project ↗</a></div></footer>
   </main>

   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="InferenceNet research leaderboard: single-pass generation, DeepAgents and an independent DeepSeek Harness result on 1,000 econometric replication tasks.">
+  <meta name="color-scheme" content="light dark">
+  <title>Leaderboard — InferenceNet Challenge</title>
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230c1219'/%3E%3Ctext x='5' y='23' font-family='sans-serif' font-size='21' fill='%2378dbc0'%3EiN%3C/text%3E%3C/svg%3E">
   <link rel="stylesheet" href="./leaderboard.css">
+  <link rel="stylesheet" href="./mountain.css">
+  <script type="module" src="./leaderboard.js"></script>
 </head>
 <body>
   <a class="skip" href="#rankings">Skip to rankings</a>
   <main class="page">
     <nav class="topbar" aria-label="Main navigation">
+      <a class="brand" href="https://easonai-5589.github.io/inferencenet-challenge/" target="_blank" rel="noopener noreferrer">InferenceNet <small>CHALLENGE</small></a>
       <div class="nav-links">
+        <a href="https://easonai-5589.github.io/inferencenet-challenge/" target="_blank" rel="noopener noreferrer" data-i18n="website">Project website ↗</a>
         <a href="https://huggingface.co/datasets/CamoAiLab/InferenceNet" target="_blank" rel="noopener noreferrer" data-i18n="dataset">Dataset ↗</a>
         <a href="https://huggingface.co/spaces/CamoAiLab/InferenceNet-Leaderboard/tree/main/results" target="_blank" rel="noopener noreferrer" data-i18n="archive">Results archive ↗</a>
         <button id="language" type="button" aria-label="Switch to Chinese">中文</button>
+        <button id="theme" type="button" aria-pressed="false"><span class="theme-icon" aria-hidden="true"></span><span id="theme-label">Light</span></button>
       </div>
     </nav>
     <header class="hero">
+      <p class="eyebrow"><span data-i18n="edition">LEADERBOARD · SEPTEMBER 2026</span></p>
+      <h1 data-i18n="title">InferenceNet Challenge Leaderboard</h1>
+      <p class="intro" data-i18n="intro">Models and harnesses on 1,000 econometric replication tasks.</p>
       <div class="facts" aria-label="Dataset coverage">
+        <span><strong id="model-count">—</strong><span data-i18n="models">model aliases</span></span>
         <span><strong id="group-count">—</strong><span data-i18n="groups">experiment groups</span></span>
         <span><strong id="task-count">—</strong><span data-i18n="tasks">tasks per group</span></span>
         <span><strong id="record-count">—</strong><span data-i18n="records">task records</span></span>
       </div>
     </header>
     <section id="rankings" aria-labelledby="rankings-title">
+      <div class="section-head"><div><p class="eyebrow" data-i18n="resultsLabel">01 / RESULTS</p><h2 id="rankings-title" class="sr-only" data-i18n="rankings">Agent & Harness leaderboard</h2></div><span class="badge" data-i18n="research">Research results · provisional</span></div>
       <div class="toolbar">
         <div class="view-switch" role="group" aria-label="Leaderboard view">
+          <button type="button" data-view="all" aria-pressed="true" data-i18n="all">All results</button>
           <button type="button" data-view="compare" aria-pressed="false" data-i18n="compare">Baseline / DeepAgents pairs</button>
           <button type="button" data-view="baseline" aria-pressed="false" data-i18n="single">Single-pass Agent</button>
+          <button type="button" data-view="harness" aria-pressed="false" data-i18n="harness">All harness runs</button>
         </div>
         <a class="download" href="./leaderboard.csv" download data-i18n="download">Download CSV ↓</a>
       </div>
       <div class="filters">
+        <label class="metric-control"><span data-i18n="metric">Rank by</span><select id="metric">
           <optgroup label="Local paper profile" data-group="local">
             <option value="perfect" data-i18n="perfect">Full replication · local</option>
           </optgroup>
         <label id="sort-control"><span data-i18n="sort">Sort by</span><select id="sort"><option value="deepagents" data-i18n="harnessScore">DeepAgents score</option><option value="baseline" data-i18n="singleScore">Single-pass score</option><option value="gain" data-i18n="lift">Lift</option></select></label>
         <label class="search-control"><span data-i18n="search">Find a model</span><input id="search" type="search" placeholder="Search models…" autocomplete="off"></label>
       </div>
+      <div class="display-tools">
+        <p id="metric-description" class="metric-description"></p>
+        <div class="display-switch" role="group" aria-label="Display format">
+          <button type="button" data-display="table" aria-pressed="true" data-i18n="tableView">Table</button>
+          <button type="button" data-display="mountain" aria-pressed="false" data-i18n="mountainView">Mountain view</button>
+        </div>
+      </div>
+      <p id="independent-summary" class="independent-summary" hidden><span class="independent-dot" aria-hidden="true"></span><span data-i18n="dshShort">DSH is an independent run with technical recovery, not a paired lift.</span> <a href="#protocol-details" id="show-protocol" data-i18n="detailsLink">Details ↗</a></p>
+      <figure id="ranking-mountain" class="mountain" hidden></figure>
       <p id="load-state" role="status" class="load-state">Loading archived results…</p>
       <div id="error" class="error" role="alert" hidden><p data-i18n="error">Results could not be loaded. Please retry or open the results archive.</p><button type="button" id="retry" data-i18n="retry">Retry</button></div>
       <div id="table-wrap" class="table-wrap" tabindex="0" aria-label="Scrollable leaderboard" hidden>
       </div>
       <p id="empty" class="load-state" hidden data-i18n="empty">No matching models.</p>
       <div class="table-foot"><span id="result-count" aria-live="polite"></span><span data-i18n="denominator">Every score uses all 1,000 tasks. Unknown and invalid outcomes earn no successes.</span></div>
+      <p class="publication-note" data-i18n="publicationNote">Research snapshot · local scoring; official scorer parity unverified. Run budgets differ.</p>
     </section>
+    <section class="method" aria-label="Evaluation details">
+      <details id="protocol-details" class="evidence">
+        <summary data-i18n="evaluationDetails">Evaluation protocol, definitions & evidence</summary>
+      <p class="scope-note" data-i18n="scope">Locally scored, archived results. Official scorer parity is not yet verified. Different budgets and run protocols mean the lift is descriptive, not an equal-cost comparison.</p>
+    <section class="protocols" aria-label="Experimental settings">
+      <div><p class="protocol-tag baseline"><span aria-hidden="true">A</span><strong data-i18n="single">Single-pass Agent</strong></p><p data-i18n="singleDesc">One code-generation call, followed by execution. No iterative agent loop.</p></div>
+      <div><p class="protocol-tag harness"><span aria-hidden="true">B</span><strong data-i18n="deepagents">DeepAgents</strong></p><p data-i18n="harnessDesc">DeepAgents plans, uses tools and revises code. Up to 6 model calls, plus final execution.</p></div>
+      <div><p class="protocol-tag independent"><span aria-hidden="true">C</span><strong data-i18n="dsh">DeepSeek Harness · separate run</strong></p><p data-i18n="dshDesc">Official DSH SDK, requested v4-pro API alias. A fixed technical recovery selection; underlying model weights are unverified.</p></div>
+    </section>
+      <aside id="independent-notice" class="independent-notice" hidden><strong data-i18n="dshNoticeTitle">DSH is an independent result.</strong><p data-i18n="dshNotice">The request used deepseek-v4-pro; the underlying model weights were not verified. The fixed 1,000-task selection includes 87 technical replacement attempts (27 with changed input-schema prompts), with 30 task outcomes still unknown. It is excluded from the paired DeepAgents lift.</p><a id="dsh-protocol" data-i18n="dshProtocol" target="_blank" rel="noopener noreferrer">Read run protocol & evidence ↗</a></aside>
       <div class="method-grid">
         <article><h3 data-i18n="fixedTasks">Fixed task set</h3><p data-i18n="fixedDesc">The same Selected_1000 task IDs and dataset revision are used for every group. Each score is successes ÷ 1,000; failed or unknown tasks stay in the denominator.</p></article>
         <article><h3 data-i18n="separateMetrics">Two scoring profiles</h3><p data-i18n="profilesDesc">Full replication is the local paper metric. The four HF-style metrics reproduce the published descriptions locally; they are not yet verified against the official scorer.</p></article>
         <article><h3 data-i18n="budgetTitle">Read lift with the budgets</h3><p data-i18n="budgetDesc">Baseline: 1 model call. DeepAgents and DSH: up to 6 model calls and 4 trial tool calls per attempt. DSH adds 87 recovery attempts; full environment and reasoning parity is unverified. DSH has no paired lift; these are not equal-cost causal estimates.</p></article>
       </div>
+<h3 class="evidence-heading" data-i18n="evidence">Evidence status & metric definitions</h3>
         <p data-i18n="unknownDesc">“Metric unknown” means the selected metric cannot be assessed, including failed execution or unavailable outputs. It is different from a task whose final status is unknown. Neither is dropped or counted as a success.</p>
         <ul id="definitions"></ul>
         <div class="evidence-table-wrap"><table class="evidence-table"><caption data-i18n="evidenceCaption">Status from each accepted archive</caption><thead><tr><th data-i18n="model">Model / API alias</th><th data-i18n="protocol">Protocol</th><th data-i18n="evidenceCol">Evidence</th></tr></thead><tbody id="evidence-body"></tbody></table></div>
         <p data-i18n="verification">HF-style counts are checked against archived task flags. Full-replication counts for Sol and Opus come from accepted summaries; all other displayed runs, including DSH, have per-task local flags. This refresh does not rerun or rescore any experiment.</p>
         <p data-i18n="archiveNote">Per-run archive files remain frozen, including their original publication metadata. This page is a new display derived from those archives. GPT-5.5 and unarchived experiments are not included in this edition.</p>
       </details>
+      <a class="historical" href="./legacy.html" data-i18n="historical">Historical leaderboard ↗</a>
     </section>
     <footer><span>InferenceNet <span class="muted">/</span> <span data-i18n="footer">Econometric replication, measured.</span></span><div><a id="revision-link" href="https://huggingface.co/spaces/CamoAiLab/InferenceNet-Leaderboard/tree/main/results" target="_blank" rel="noopener noreferrer" data-i18n="source">Source snapshot ↗</a><a href="./leaderboard-data.json" data-i18n="json">Data JSON ↗</a><a href="https://easonai-5589.github.io/inferencenet-challenge/" target="_blank" rel="noopener noreferrer" data-i18n="project">Project ↗</a></div></footer>
   </main>

leaderboard.css CHANGED Viewed

@@ -1,7 +1,17 @@
-:root{color-scheme:dark;--bg:#0c1219;--surface:#111c26;--line:#27343f;--text:#eef4f5;--muted:#a3b3c0;--base:#92b7e6;--accent:#78dbc0;--amber:#e9c078;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",sans-serif;font-synthesis:none}
-*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:15px;line-height:1.6}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:4px}button,input,select{font:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button,input,select{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:6px}button{padding:8px 14px}p,h1,h2,h3{margin:0}h1,h2,h3{line-height:1.2;font-weight:600}h2{font-size:26px;letter-spacing:-.6px}h3{font-size:16px}strong{font-weight:600}.page{max-width:1200px;margin:auto;padding:0 36px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:88px;border-bottom:1px solid var(--line)}.brand{font-size:20px;font-weight:650;letter-spacing:-.6px;display:flex;align-items:center;gap:11px}.brand-mark{font-size:15px;letter-spacing:-1.5px;border:1px solid #497364;border-radius:8px;width:32px;height:32px;display:grid;place-items:center;color:var(--accent)}.nav-links{display:flex;align-items:center;gap:26px;font-size:13px;color:var(--muted)}#language{padding:5px 12px;font-size:12px;background:transparent}.hero{padding:52px 0 0}.eyebrow{font-size:11px;letter-spacing:1.7px;color:var(--muted);font-weight:650}.hero>.eyebrow{display:flex;align-items:center;gap:8px;color:var(--accent)}.dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}h1{font-size:clamp(34px,4.8vw,54px);letter-spacing:-2px;margin:18px 0 16px}h1 span{color:var(--accent)}.intro{max-width:660px;color:var(--muted);font-size:17px;line-height:1.7}.facts{display:flex;gap:32px;align-items:center;flex-wrap:wrap;padding:24px 0;margin-top:14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.facts>span{display:flex;align-items:baseline;gap:8px}.facts strong{color:var(--text);font-size:23px;font-variant-numeric:tabular-nums;letter-spacing:-.7px}.facts .update{margin-left:auto}.protocols{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);gap:40px;padding:24px 0}.protocols>div+div{border-left:1px solid var(--line);padding-left:36px}.protocol-tag{display:flex;align-items:center;gap:10px;font-size:14px}.protocol-tag>span{display:grid;place-items:center;border:1px solid currentColor;width:22px;height:22px;border-radius:5px;font-size:10px}.baseline{color:var(--base)}.harness{color:var(--accent)}.protocols p+p{font-size:13px;color:var(--muted);margin-top:8px;max-width:450px}#rankings{padding-top:40px;scroll-margin-top:20px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.section-head .eyebrow{margin-bottom:10px}.badge{color:var(--amber);background:#272419;border:1px solid #4b422e;border-radius:4px;padding:5px 9px;font-size:11px;white-space:nowrap}.scope-note{color:var(--muted);font-size:12px;max-width:840px;margin-top:14px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding-bottom:16px;border-bottom:1px solid var(--line)}.view-switch{display:flex;gap:4px;flex-wrap:wrap;background:#101922;border:1px solid var(--line);padding:4px;border-radius:8px}.view-switch button{background:transparent;border-color:transparent;color:var(--muted);font-size:13px;padding:7px 15px}.view-switch button[aria-pressed=true]{background:#273b3a;border-color:#49665c;color:var(--text)}.view-switch button:hover{color:var(--text)}.download{font-size:12px;color:var(--accent);white-space:nowrap}.filters{display:flex;align-items:flex-end;gap:16px;padding:18px 0 10px}.filters label{display:flex;flex-direction:column;gap:6px;min-width:0}.filters label>span{font-size:11px;color:var(--muted)}input,select{height:39px;padding:6px 10px;font-size:12px;max-width:100%}.metric-control{min-width:270px!important}.search-control{margin-left:auto;width:210px}input::placeholder{color:#8b9aa8}.metric-description{min-height:36px;color:var(--muted);font-size:12px;padding:4px 0 14px}.profile{font-family:ui-monospace,monospace;color:var(--accent);font-size:11px;margin-right:8px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:8px;background:#0e1821}table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;text-align:left;white-space:nowrap}th{font-weight:500;background:#15212b;color:var(--muted);padding:14px 18px;font-size:11px;border-bottom:1px solid var(--line)}td{padding:20px 18px;border-bottom:1px solid #23313b;font-size:13px}tbody tr:last-child td{border-bottom:none}tbody tr:hover{background:#15242c}.rank{width:45px;color:var(--muted);font-size:12px}.model-cell{min-width:225px}.model-name{font-size:14px;font-weight:550}.model-meta{display:flex;gap:7px;align-items:center;margin-top:5px;color:var(--muted);font-size:10px}.tag{display:inline-block;font-size:9px;color:var(--amber);border:1px solid #4d442e;padding:0 4px;border-radius:3px}.score-cell{min-width:155px;width:21%}.score{font-size:19px;letter-spacing:-.3px;font-weight:550}.score small{font-size:11px;font-weight:400;margin-left:2px}.track{height:4px;background:#283643;border-radius:2px;margin:7px 0 5px;max-width:150px}.fill{height:100%;border-radius:2px;background:var(--base)}.harness .fill{background:var(--accent)}.counts{font-size:10px;color:var(--muted)}.unknown{display:block;font-size:10px;color:#96a8b4;margin-top:2px}.gain{color:var(--accent);font-size:16px}.gain.negative{color:#f59d9d}.gain small{font-size:10px;margin-left:3px}.source-cell{font-size:11px;color:var(--muted)}.source-cell a{display:block;margin:3px 0}.table-foot{display:flex;justify-content:space-between;gap:24px;color:var(--muted);font-size:10px;margin-top:12px}.table-foot>span:last-child{text-align:right;max-width:620px}.load-state{padding:32px;text-align:center;color:var(--muted)}.error{padding:24px;border:1px solid #a65f5f;border-radius:8px;color:#f6b4b4}.error button{margin-top:12px}.method{padding-top:48px}.method .section-head>a{font-size:12px;color:var(--muted)}.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin:24px 0 26px}.method p{font-size:12px;color:var(--muted);margin-top:11px;line-height:1.8}.evidence{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}.evidence summary{font-size:13px;cursor:pointer;color:var(--text)}.evidence li{font-size:12px;color:var(--muted);margin:7px 0}.evidence-table-wrap{overflow:auto;margin-top:22px}.evidence-table th,.evidence-table td{font-size:11px;padding:12px}.evidence-table caption{text-align:left;margin:12px 0;font-size:12px;color:var(--muted)}.evidence-table td span{display:block;font-size:10px;color:var(--muted)}footer{display:flex;justify-content:space-between;gap:20px;padding:28px 0 36px;font-size:11px;color:var(--muted)}footer>div{display:flex;gap:20px}.muted{color:#526271;margin:0 5px}[hidden]{display:none!important}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip:focus{display:block;padding:10px}noscript{padding:30px;display:block}
-@media(max-width:760px){.page{padding:0 20px}.topbar{min-height:76px}.nav-links{gap:12px}.nav-links a{font-size:11px}.brand{font-size:18px}.brand-mark{display:none}.hero{padding-top:34px}h1{letter-spacing:-1.3px}.intro{font-size:15px}.facts{gap:18px}.facts .update{width:100%;margin-left:0}.protocols{gap:18px}.protocols>div+div{padding-left:18px}.protocols p+p{font-size:12px}.protocol-tag{font-size:12px}h2{font-size:22px}.section-head{align-items:flex-start;flex-direction:column;gap:12px}.toolbar{align-items:flex-start;flex-direction:column}.view-switch{width:100%}.view-switch button{flex:1;font-size:11px;padding:8px}.filters{flex-wrap:wrap;gap:12px}.metric-control{width:100%;min-width:0!important}.filters label:not(.metric-control){flex:1}.search-control{margin-left:0;width:auto}.metric-description{padding-bottom:16px}.method-grid{grid-template-columns:1fr;gap:20px}.method{padding-top:36px}.table-foot{flex-direction:column;gap:5px}.table-foot>span:last-child{text-align:left}.table-wrap td{padding:17px 14px}.method .section-head{gap:14px}footer{flex-direction:column;gap:12px}}
-tbody th[scope=row]{background:transparent;color:var(--text);border-bottom-color:#23313b}tbody tr:last-child th{border-bottom:none}
-@media(prefers-reduced-motion:no-preference){button,a{transition:background .12s,color .12s}}
-.protocols{grid-template-columns:repeat(3,1fr);gap:24px}.protocols>div+div{padding-left:24px}.independent{color:var(--amber)}.independent .fill{background:var(--amber)}.independent-notice{margin-top:18px;padding:16px 20px;border:1px solid #4b422e;border-left:3px solid var(--amber);border-radius:6px;background:#1c1e1b;font-size:12px;color:var(--muted)}.independent-notice strong{color:var(--amber)}.independent-notice p{margin:5px 0 7px;max-width:960px}.independent-notice a{color:var(--amber)}.run-protocol{display:block;font-size:10px;margin-top:5px}.model-name{white-space:normal;max-width:355px}.model-meta{flex-wrap:wrap}.facts{gap:24px}.facts .update{font-size:11px}
-@media(max-width:760px){.protocols{grid-template-columns:1fr;gap:18px}.protocols>div+div{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}.facts{gap:14px 24px}.independent-notice{padding:14px}.view-switch button{flex-basis:100%}.model-cell{min-width:225px}.model-name{max-width:275px}}

+/* InferenceNet Challenge design tokens, shared with the project website. */
+:root{color-scheme:light;--paper:#fff;--surface:#fff;--ink:#191919;--soft:#555;--muted:#666;--line:#dedede;--strong-line:#bbb;--tint:#f5f5f5;--selected:#f1f2fa;--independent:#79590d;--independent-bg:#faf6ea;--sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
+html[data-theme=dark]{color-scheme:dark;--paper:#111;--surface:#181818;--ink:#eee;--soft:#bdbdbd;--muted:#aaa;--line:#363636;--strong-line:#666;--tint:#222;--selected:#252736;--independent:#e6c772;--independent-bg:#28251c}
+*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px;-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:4px}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}[hidden]{display:none!important}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}h1,h2,h3,p,figure{margin:0}button{background:var(--paper);border:1px solid var(--line);border-radius:3px}button:hover{background:var(--tint)}.page{width:min(1320px,calc(100% - 80px));margin:auto}.skip{position:fixed;top:-100px;left:16px;padding:12px;background:var(--ink);color:var(--paper);z-index:10}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:82px;border-bottom:1px solid var(--line)}.brand{font-size:24px;font-weight:650;letter-spacing:-1px;white-space:nowrap}.brand small{font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:1px;margin-left:10px;vertical-align:middle}.nav-links{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--soft)}.nav-links button{min-height:38px;padding:7px 12px;color:var(--ink)}#theme{display:flex;gap:8px;align-items:center}.theme-icon{width:14px;height:14px;border:1.5px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
+.hero{padding:37px 0 27px;border-bottom:1px solid var(--line)}.eyebrow{font-size:10px;font-weight:600;letter-spacing:.09em;color:var(--muted);text-transform:uppercase}.hero h1{font-size:clamp(28px,3.3vw,42px);font-weight:650;letter-spacing:-.035em;line-height:1.2;margin-top:13px}.intro{font-size:16px;color:var(--soft);margin-top:12px}.facts{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 25px;margin-top:22px;font-size:12px;color:var(--muted)}.facts>span{display:flex;gap:6px;align-items:baseline}.facts strong{font-weight:650;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}.facts .update{margin-left:auto;font-size:11px}
+#rankings{padding-top:25px}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.badge{font-size:10px;color:var(--muted);padding:3px 7px;border:1px solid var(--line);border-radius:3px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px}.view-switch{display:flex;gap:20px;flex-wrap:wrap}.view-switch button{font-size:13px;padding:9px 0;border:0;border-radius:0;border-bottom:2px solid transparent;color:var(--soft);background:none}.view-switch button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink);font-weight:650}.download{font-size:12px;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}.filters{display:flex;align-items:end;gap:16px;margin-top:19px}.filters label{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--soft)}select,input{border:1px solid var(--strong-line);background:var(--paper);min-height:38px;border-radius:3px;padding:6px 10px;font-size:12px;max-width:100%}.search-control{margin-left:auto}.search-control input{width:180px}.display-tools{display:flex;gap:24px;justify-content:space-between;align-items:center;margin:14px 0 8px}.metric-description{font-size:11px;color:var(--muted);max-width:850px}.display-switch{display:flex;flex-shrink:0}.display-switch button{font-size:11px;padding:5px 11px;border-radius:0}.display-switch button:first-child{border-radius:3px 0 0 3px}.display-switch button:last-child{border-radius:0 3px 3px 0;border-left:0}.display-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.independent-summary{font-size:11px;color:var(--soft);margin:8px 0 15px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}.independent-summary>a{color:var(--independent);text-decoration:underline;text-underline-offset:3px}.independent-dot{width:5px;height:5px;border-radius:50%;background:var(--independent);align-self:center}.load-state,.error{padding:35px 0;color:var(--muted)}.error button{padding:6px 15px;margin-top:10px}
+.table-wrap{overflow:auto;border-block:1px solid var(--line);overscroll-behavior-x:contain;max-width:100%;margin-top:12px}table{width:100%;border-collapse:separate;border-spacing:0;text-align:left;font-size:13px;font-variant-numeric:tabular-nums}th,td{padding:17px 12px;border-bottom:1px solid var(--line);vertical-align:middle}thead th{color:var(--soft);font-size:11px;font-weight:550;background:var(--paper);line-height:1.5}thead button{border:0;padding:0;text-align:inherit;font-size:inherit;background:transparent!important;white-space:normal}tbody tr:last-child>*{border-bottom:0}.table-wrap table{min-width:1080px}.rank{width:45px;text-align:center;color:var(--muted)}.rank-number{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;font-size:12px}.rank-1{background:#eadcaa;color:#4d3c08;font-weight:650}.rank-2{background:#e7e8eb;color:#454850;font-weight:650}.rank-3{background:#eedecf;color:#6a4933;font-weight:650}.model-cell{font-size:13px;font-weight:600;white-space:nowrap;min-width:175px;letter-spacing:-.02em}.model-heading{min-width:175px}.numeric{text-align:right;min-width:120px}.selected-metric{background:var(--selected);font-weight:650}.metric-value{position:relative;display:inline-block;cursor:help}.numeric small{font-size:10px;margin-left:2px}.metric-tooltip{display:none;position:absolute;z-index:5;bottom:calc(100% + 8px);right:-10px;min-width:170px;max-width:220px;white-space:normal;padding:7px 10px;border:1px solid var(--strong-line);border-radius:4px;color:var(--ink);background:var(--surface);font-size:11px;font-weight:400;text-align:left;box-shadow:0 3px 10px #0001}.metric-value:hover .metric-tooltip,.metric-value:focus .metric-tooltip{display:block}.protocol-cell{min-width:120px}.protocol-label{font-size:11px;display:inline-block;border:1px solid var(--line);border-radius:3px;padding:2px 7px;white-space:nowrap;background:var(--surface)}.no-harness{color:var(--muted);border-color:transparent;background:none;padding-left:0}.independent-tag{display:block;font-size:9px;color:var(--independent);margin-top:3px;white-space:nowrap}.source-cell{font-size:10px;white-space:nowrap;color:var(--muted)}.source-cell a{display:block}.evidence-col{min-width:80px}tbody tr:hover>td:not(.selected-metric),tbody tr:hover>th{background:var(--tint)}.table-foot{display:flex;justify-content:space-between;gap:18px;font-size:11px;color:var(--muted);padding:13px 0}.table-foot #result-count{white-space:nowrap}.score-cell{text-align:right;min-width:150px}.score{font-size:17px;font-weight:600}.counts,.unknown{display:block;font-size:10px;color:var(--muted);font-weight:400}.track{display:none}.gain{font-size:17px;color:#2e6b50}.gain small{display:block;font-size:10px;color:var(--muted)}.negative{color:#9c3e35}
+#ranking-mountain{margin-top:14px}.mountain-head{display:none!important}.mountain-caption .mountain-legend{display:none}.mountain-pill{font-size:11px!important}.mountain-pill-label{max-width:235px}.method{margin-top:30px;border-top:1px solid var(--line);padding-top:18px}.evidence summary{font-size:13px;cursor:pointer;font-weight:550;list-style-position:inside;padding:7px 0}.evidence p{font-size:12px;color:var(--soft);margin:12px 0;line-height:1.8}.scope-note{max-width:1050px}.protocols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:22px}.protocol-tag{display:flex;gap:10px;align-items:center;color:var(--ink)!important}.protocol-tag>span{font-family:var(--mono);font-size:10px;border:1px solid var(--line);padding:0 5px}.protocol-tag strong{font-weight:600}.independent-notice{padding:15px 20px;margin:24px 0;border-left:2px solid var(--independent);background:var(--independent-bg);font-size:12px}.independent-notice p{margin:7px 0}.independent-notice a{text-decoration:underline;text-underline-offset:3px}.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:24px}.method-grid h3,.evidence-heading{font-size:13px;font-weight:600}.evidence-heading{margin-top:25px}.evidence ul{font-size:12px;color:var(--soft);padding-left:18px;line-height:1.8}.evidence li{margin:8px 0}.evidence-table-wrap{overflow:auto;margin:20px 0}.evidence-table{font-size:11px;min-width:650px}.evidence-table caption{text-align:left;color:var(--muted);padding-bottom:10px}.evidence-table td span{display:block;font-size:10px;color:var(--muted)}.evidence-table th,.evidence-table td{padding:10px}.historical{display:inline-block;font-size:11px;color:var(--muted);margin-top:14px}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:25px 0;margin-top:30px;font-size:11px;color:var(--muted)}footer>div{display:flex;gap:20px}.muted{margin:0 5px}noscript{padding:20px}
+@media(min-width:1800px){.page{width:min(1440px,calc(100% - 120px))}.hero{padding-top:45px}.hero h1{font-size:46px}th,td{padding-block:19px}}
+@media(max-width:1000px){.page{width:calc(100% - 48px)}.nav-links{gap:14px}.brand small{display:none}.filters{flex-wrap:wrap}.search-control{margin-left:auto}.filters label{flex-direction:column;align-items:stretch;gap:4px}.metric-control{flex:1}.table-foot{flex-direction:column;gap:4px}.protocols,.method-grid{grid-template-columns:1fr}.protocols{gap:5px}.method-grid{gap:12px}.nav-links>a:nth-child(3){display:none}}
+@media(max-width:620px){.page{width:calc(100% - 32px)}.topbar{flex-wrap:wrap;gap:12px;padding:18px 0;min-height:76px}.brand{font-size:21px}.nav-links{gap:8px;font-size:11px;flex-wrap:wrap;width:100%}.nav-links button{padding:5px 9px;min-height:34px}#language{margin-left:auto}.hero{padding-top:28px}.hero h1{font-size:29px}.intro{font-size:14px}.facts{gap:8px 15px;margin-top:18px}.facts .update{margin-left:0;width:100%}.toolbar{align-items:flex-start;flex-direction:column;gap:12px}.view-switch{gap:18px}.view-switch button{font-size:12px;padding:6px 0}.download{align-self:flex-end;margin-top:-3px}.filters{gap:12px}.filters label{font-size:11px}.search-control{width:100%;margin:0}.search-control input{width:100%}.display-tools{align-items:flex-start;gap:12px}.display-switch{align-self:center}.metric-description{font-size:10px}.section-head{margin-bottom:10px}.independent-summary{font-size:10px}.table-wrap table{min-width:1000px}.model-cell{min-width:160px}.numeric{min-width:108px}.table-wrap th,.table-wrap td{padding:14px 10px}footer{flex-direction:column;gap:12px}footer>div{flex-wrap:wrap;gap:14px}.mountain-pill-label{max-width:none}.mountain-caption{font-size:10px!important}}
+@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
+.publication-note{font-size:11px;color:var(--muted);margin-top:2px}
+.evidence-gap{display:block;font-size:9px;color:var(--independent);margin-top:3px}

leaderboard.js CHANGED Viewed

@@ -1,3 +1,4 @@
 'use strict';
 const $ = id => document.getElementById(id);
 const metricKeys = ['perfect', 'partial_replication', 'compilation_success', 'coefficient_direction', 'significance_level'];
@@ -21,9 +22,9 @@ Object.assign(en, {
 });
 const zh = {
   dataset: '数据集 ↗', archive: '结果存档 ↗', edition: '研究榜单 · 2026 年 9 月',
-  title: '模型与 Harness，<br><span>复现真实研究。</span>',
-  intro: '查看单次 Agent、DeepAgents 和独立 DeepSeek Harness 实验在真实计量经济学复现任务上的表现。',
-  models: '种请求模型别名', groups: '组实验', tasks: '题 / 组', records: '条任务记录', published: '发布于 {date}',
   single: '单次 Agent', harness: '全部 Harness 实验', deepagents: 'DeepAgents',
   dsh: 'DeepSeek Harness · 独立实验',
   dshDesc: '使用官方 DSH SDK，请求 v4-pro API 别名。按固定规则纳入技术补测，底层模型权重未经核实。',
@@ -66,13 +67,50 @@ const zh = {
 let language = 'en';
 try { language = localStorage.getItem('inferencenet-language') === 'zh' ? 'zh' : 'en'; } catch (_) {}
 let data = null;
-let view = 'harness';
 let sortBy = 'deepagents';
 const t = key => (language === 'zh' ? zh[key] : en[key]) ?? en[key] ?? key;
 const esc = value => String(value).replace(/[&<>"']/g, char => ({'&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;'}[char]));
 const sourceURL = (path, tree = false) => `https://huggingface.co/spaces/CamoAiLab/InferenceNet-Leaderboard/${tree ? 'tree' : 'blob'}/${data.source_revision}/${path}`;
 const external = (url, label) => `<a href="${esc(url)}" target="_blank" rel="noopener noreferrer">${esc(label)} ↗</a>`;
 function applyLanguage() {
   document.documentElement.lang = language === 'zh' ? 'zh-CN' : 'en';
   document.querySelectorAll('[data-i18n]').forEach(el => { el.innerHTML = t(el.dataset.i18n); });
@@ -83,6 +121,7 @@ function applyLanguage() {
   document.querySelector('[data-group=local]').label = t('groupLocal');
   document.querySelector('[data-group=hf]').label = t('groupHF');
   $('definitions').innerHTML = metricKeys.map(key => `<li><strong>${esc(t(key))}:</strong> ${esc(t(key + 'Desc'))}</li>`).join('');
   render();
 }
@@ -113,12 +152,36 @@ function validate(candidate) {
 // Pairing is intentionally limited to the two historical arms. Independent
 // harness entries have their own rank and can never enter a paired lift.
 function rankedEntries(snapshot, selectedView, key, selectedSort, query) {
-  const entries = selectedView === 'harness'
-    ? snapshot.models.flatMap(model => Object.entries(model.arms).filter(([id]) => id !== 'baseline').map(([armId, arm]) => ({model, armId, arm, name: arm.display_name || model.name, value: arm.metrics[key].count})))
-    : snapshot.models.map(model => ({model, armId: selectedView === 'compare' ? null : 'baseline', arm: model.arms.baseline, name: model.name,
-      value: selectedView === 'baseline' ? model.arms.baseline.metrics[key].count : selectedSort === 'gain' ? model.arms.deepagents.metrics[key].count - model.arms.baseline.metrics[key].count : model.arms[selectedSort].metrics[key].count}));
   const search = query.toLowerCase().trim();
-  return {total: entries.length, entries: entries.filter(entry => `${entry.name} ${entry.model.id} ${entry.armId || ''}`.toLowerCase().includes(search)).sort((a, b) => b.value - a.value || a.name.localeCompare(b.name))};
 }
 function scoreCell(arm, key, style) {
@@ -135,45 +198,42 @@ function evidenceState(arm) {
 function render() {
   const key = $('metric').value;
-  $('metric-description').innerHTML = `<span class="profile">${esc(t(key === 'perfect' ? 'localProfile' : 'hfProfile'))}</span>${esc(t(key + 'Desc'))}`;
   if (!data) return;
-  const count = (m, arm) => m.arms[arm].metrics[key].count;
   const {total, entries} = rankedEntries(data, view, key, sortBy, $('search').value);
   $('published-date').textContent = t('published').replace('{date}', data.published_date);
   $('sort-control').hidden = view !== 'compare';
-  $('table-wrap').hidden = entries.length === 0;
   $('empty').hidden = entries.length !== 0;
   $('result-count').textContent = t(view === 'compare' ? 'matched' : 'matchedRuns').replace('{n}', entries.length).replace('{total}', total);
-  $('caption').textContent = `${t(view === 'compare' ? 'compare' : view === 'baseline' ? 'single' : 'harness')} — ${t(key)}`;
   const th = (text, cls = '') => `<th scope="col" class="${cls}">${esc(text)}</th>`;
-  $('table-head').innerHTML = '<tr>' + th(t('rank'), 'rank') + th(t('model')) + (view === 'compare' ? th(t('single'), 'baseline') + th(t('deepagents'), 'harness') + th(t('lift')) : th(t('score'), view === 'baseline' ? 'baseline' : 'harness')) + th(t('evidenceCol')) + '</tr>';
-  let lastValue = null, rank = 0;
-  $('table-body').innerHTML = entries.map((entry, index) => {
-    const {model, arm, armId, name, value: currentValue} = entry;
-    if (currentValue !== lastValue) rank = index + 1;
-    lastValue = currentValue;
     const arms = model.arms;
-    const gap = view === 'compare' ? !arms.baseline.complete || !arms.deepagents.complete : !arm.complete;
-    const badge = gap ? `<span class="tag">${esc(t('review'))}</span>` : '';
-    const independent = armId === 'dsh';
-    const protocol = view === 'harness' ? `<span class="run-protocol ${independent ? 'independent' : 'harness'}">${esc(independent ? t('independentRun') : 'DeepAgents')}</span>` : '';
-    const identity = `<td class="rank">${String(rank).padStart(2, '0')}</td><th scope="row" class="model-cell"><div class="model-name">${esc(name)}</div>${protocol}<div class="model-meta">1,000 ${language === 'zh' ? '题 / 组' : 'tasks / group'} ${badge}</div></th>`;
     let scores = '', sources = '';
     if (view === 'compare') {
-      const gain = (count(model, 'deepagents') - count(model, 'baseline')) / 10;
-      scores = scoreCell(arms.baseline, key, 'baseline') + scoreCell(arms.deepagents, key, 'harness') + `<td class="gain ${gain < 0 ? 'negative' : ''}">${gain > 0 ? '+' : ''}${gain.toFixed(1)}<small>${esc(t('pp'))}</small></td>`;
       sources = external(sourceURL(arms.baseline.path, true), 'A') + external(sourceURL(arms.deepagents.path, true), 'B');
     } else {
-      scores = scoreCell(arm, key, view === 'baseline' ? 'baseline' : independent ? 'independent' : 'harness');
-      sources = external(sourceURL(arm.path + '/results.jsonl'), t('recordsLink')) + external(sourceURL(arm.path + '/config.json'), t('config'));
-      if (independent) sources += external(sourceURL(arm.protocol_url), t('protocol'));
     }
     return `<tr data-model="${esc(model.id)}" data-arm="${esc(armId || 'paired')}">${identity}${scores}<td class="source-cell">${sources}</td></tr>`;
   }).join('');
   $('evidence-body').innerHTML = data.models.flatMap(m => Object.entries(m.arms).map(([id, arm]) => `<tr><th scope="row">${esc(arm.display_name || m.name)}</th><td>${esc(id === 'baseline' ? t('single') : id === 'dsh' ? t('dsh') : 'DeepAgents')}</td>${evidenceState(arm)}</tr>`)).join('');
   const dsh = data.models.find(m => m.id === 'deepseek-v4-pro')?.arms.dsh;
   $('independent-notice').hidden = !dsh;
   if (dsh) $('dsh-protocol').href = sourceURL(dsh.protocol_url);
 }
 async function loadData() {
@@ -182,6 +242,8 @@ async function loadData() {
   $('error').hidden = true;
   $('load-state').hidden = false;
   $('table-wrap').hidden = true;
   $('empty').hidden = true;
   $('result-count').textContent = '';
   $('evidence-body').replaceChildren();
@@ -208,6 +270,7 @@ async function loadData() {
 document.querySelectorAll('[data-view]').forEach(button => button.addEventListener('click', () => {
   view = button.dataset.view;
   document.querySelectorAll('[data-view]').forEach(el => el.setAttribute('aria-pressed', String(el === button)));
   render();
 }));
@@ -220,5 +283,23 @@ $('language').addEventListener('click', () => {
   try { localStorage.setItem('inferencenet-language', language); } catch (_) {}
   applyLanguage();
 });
 applyLanguage();
 loadData();

+import { mountain } from './mountain.js';
 'use strict';
 const $ = id => document.getElementById(id);
 const metricKeys = ['perfect', 'partial_replication', 'compilation_success', 'coefficient_direction', 'significance_level'];
 });
 const zh = {
   dataset: '数据集 ↗', archive: '结果存档 ↗', edition: '研究榜单 · 2026 年 9 月',
+  title: 'InferenceNet 挑战赛排行榜',
+  intro: '模型与 Harness 在 1,000 道计量经济学复现任务上的表现。',
+  models: '种模型别名', groups: '组实验', tasks: '题 / 组', records: '条任务记录', published: '发布于 {date}',
   single: '单次 Agent', harness: '全部 Harness 实验', deepagents: 'DeepAgents',
   dsh: 'DeepSeek Harness · 独立实验',
   dshDesc: '使用官方 DSH SDK，请求 v4-pro API 别名。按固定规则纳入技术补测，底层模型权重未经核实。',
 let language = 'en';
 try { language = localStorage.getItem('inferencenet-language') === 'zh' ? 'zh' : 'en'; } catch (_) {}
 let data = null;
+let view = 'all';
+let display = 'table';
+let theme = 'light';
+try { theme = localStorage.getItem('inferencenet-theme') === 'dark' ? 'dark' : 'light'; } catch (_) {}
 let sortBy = 'deepagents';
 const t = key => (language === 'zh' ? zh[key] : en[key]) ?? en[key] ?? key;
 const esc = value => String(value).replace(/[&<>"']/g, char => ({'&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;'}[char]));
 const sourceURL = (path, tree = false) => `https://huggingface.co/spaces/CamoAiLab/InferenceNet-Leaderboard/${tree ? 'tree' : 'blob'}/${data.source_revision}/${path}`;
 const external = (url, label) => `<a href="${esc(url)}" target="_blank" rel="noopener noreferrer">${esc(label)} ↗</a>`;
+Object.assign(en, {
+  publicationNote: 'Research snapshot · local scoring; official scorer parity unverified. Run budgets differ.',
+  all: 'All results', website: 'Project website ↗', tableView: 'Table', mountainView: 'Mountain view',
+  evaluationDetails: 'Evaluation protocol, definitions & evidence', detailsLink: 'Details ↗',
+  dshShort: 'DSH: model weights unverified; 87 technical replacements, 30 unknown task outcomes. Excluded from paired lift.',
+  harnessColumn: 'Harness', noHarness: 'None', independentLabel: 'Independent',
+  light: 'Light', dark: 'Dark', fullShort: 'Full replication', partialShort: 'Partial replication',
+  executionShort: 'Execution success', directionShort: 'Coefficient direction', significanceShort: 'Significance level',
+  mountainTitle: 'The climb to full replication', summit: '100% · every task succeeds',
+  mountainNote: 'Height represents the selected score. Run protocols and budgets differ.',
+  scoreDetails: 'Successes / tasks; metric unknown', comparisonNote: 'Paired view includes baseline and DeepAgents only. DSH remains a separate result.',
+});
+Object.assign(zh, {
+  publicationNote: '研究快照 · 本地评分，尚未验证与官方评分器一致；各组运行预算存在差异。',
+  all: '全部结果', website: '项目官网 ↗', tableView: '成绩表', mountainView: '登山图',
+  evaluationDetails: '评测协议、指标定义与证据', detailsLink: '查看详情 ↗',
+  dshShort: 'DSH：模型权重未核实，含 87 次技术补测替换、30 题状态未知；不纳入配对提升。',
+  harnessColumn: 'Harness', noHarness: '无', independentLabel: '独立实验',
+  light: '浅色', dark: '深色', fullShort: '完整复现率', partialShort: '部分复现率',
+  executionShort: '执行成功率', directionShort: '系数方向', significanceShort: '显著性水平',
+  mountainTitle: '向完整复现迈进', summit: '100% · 每道任务均成功',
+  mountainNote: '高度表示所选指标得分。各组运行协议与预算存在差异。',
+  scoreDetails: '成功数 / 题数；指标未知', comparisonNote: '配对视图仅比较单次组与 DeepAgents；DSH 单独展示。',
+  metric: '排名指标', single: '单次生成', harness: '模型 + Harness', compare: '配对提升',
+});
+const shortKeys = ['fullShort', 'partialShort', 'executionShort', 'directionShort', 'significanceShort'];
+function applyTheme() {
+  document.documentElement.dataset.theme = theme;
+  $('theme').setAttribute('aria-pressed', String(theme === 'dark'));
+  $('theme-label').textContent = t(theme);
+  $('theme').setAttribute('aria-label', language === 'zh' ? `切换到${theme === 'light' ? '深色' : '浅色'}主题` : `Switch to ${theme === 'light' ? 'dark' : 'light'} theme`);
+}
 function applyLanguage() {
   document.documentElement.lang = language === 'zh' ? 'zh-CN' : 'en';
   document.querySelectorAll('[data-i18n]').forEach(el => { el.innerHTML = t(el.dataset.i18n); });
   document.querySelector('[data-group=local]').label = t('groupLocal');
   document.querySelector('[data-group=hf]').label = t('groupHF');
   $('definitions').innerHTML = metricKeys.map(key => `<li><strong>${esc(t(key))}:</strong> ${esc(t(key + 'Desc'))}</li>`).join('');
+  applyTheme();
   render();
 }
 // Pairing is intentionally limited to the two historical arms. Independent
 // harness entries have their own rank and can never enter a paired lift.
 function rankedEntries(snapshot, selectedView, key, selectedSort, query) {
+  const entries = selectedView === 'compare'
+    ? snapshot.models.map(model => ({model, armId: null, arm: model.arms.baseline, name: model.name,
+        value: selectedSort === 'gain' ? model.arms.deepagents.metrics[key].count - model.arms.baseline.metrics[key].count : model.arms[selectedSort].metrics[key].count}))
+    : snapshot.models.flatMap(model => Object.entries(model.arms)
+        .filter(([id]) => selectedView === 'all' || (selectedView === 'baseline' ? id === 'baseline' : id !== 'baseline'))
+        .map(([armId, arm]) => ({model, armId, arm, name: armId === 'dsh' ? 'DeepSeek API · v4-pro alias' : model.name, value: arm.metrics[key].count})));
   const search = query.toLowerCase().trim();
+  const filtered = entries.filter(entry => `${entry.name} ${entry.model.id} ${entry.armId || ''} ${entry.arm.display_name || ''}`.toLowerCase().includes(search))
+    .sort((a, b) => b.value - a.value || a.name.localeCompare(b.name) || String(a.armId).localeCompare(String(b.armId)));
+  let last = null, rank = 0;
+  filtered.forEach((entry, i) => { if (entry.value !== last) rank = i + 1; last = entry.value; entry.rank = rank; });
+  return {total: entries.length, entries: filtered};
+}
+function protocolName(armId) { return armId === 'baseline' ? t('noHarness') : armId === 'dsh' ? 'DSH' : 'DeepAgents'; }
+function compactScore(arm, key, active) {
+  const m = arm.metrics[key];
+  const description = `${m.count} / 1,000 ${t('passed')}; ${t('metricUnknown')}: ${m.unknown}`;
+  return `<td class="numeric ${active ? 'selected-metric' : ''}"><span tabindex="0" class="metric-value" aria-label="${esc(m.score.toFixed(1) + '%; ' + description)}">${m.score.toFixed(1)}<small>%</small><span class="metric-tooltip" role="tooltip">${esc(description)}</span></span></td>`;
+}
+function renderMountain(entries, key) {
+  const el = $('ranking-mountain');
+  el.hidden = display !== 'mountain' || entries.length === 0 || view === 'compare';
+  if (el.hidden) return;
+  // Mountain markers use unique ordinal IDs, with tied scores at the same altitude.
+  mountain(el, {
+    title: t('mountainTitle'), metric: t(shortKeys[metricKeys.indexOf(key)]), unit: '%', max: 100,
+    peakLabel: t('summit'), caption: t('mountainNote'),
+    items: entries.map((entry, i) => ({rank: i + 1, label: `${entry.name} · ${protocolName(entry.armId)}${entry.armId === 'dsh' ? ' *' : ''}`, value: entry.arm.metrics[key].score, kind: 'internal'})),
+    locale: language,
+  }, {table: false, aspect: 0.44, compactAspect: 0.75});
 }
 function scoreCell(arm, key, style) {
 function render() {
   const key = $('metric').value;
+  $('metric-description').textContent = t(key + 'Desc');
   if (!data) return;
   const {total, entries} = rankedEntries(data, view, key, sortBy, $('search').value);
   $('published-date').textContent = t('published').replace('{date}', data.published_date);
   $('sort-control').hidden = view !== 'compare';
+  $('table-wrap').hidden = entries.length === 0 || (display === 'mountain' && view !== 'compare');
   $('empty').hidden = entries.length !== 0;
   $('result-count').textContent = t(view === 'compare' ? 'matched' : 'matchedRuns').replace('{n}', entries.length).replace('{total}', total);
+  $('caption').textContent = `${t(view === 'compare' ? 'compare' : view === 'all' ? 'all' : view === 'baseline' ? 'single' : 'harness')} — ${t(key)}`;
   const th = (text, cls = '') => `<th scope="col" class="${cls}">${esc(text)}</th>`;
+  $('table-head').innerHTML = '<tr>' + th(t('rank'), 'rank') + th(t('model'), 'model-heading') + (view === 'compare'
+    ? th(t('single'), 'numeric') + th('DeepAgents', 'numeric') + th(t('lift'), 'numeric')
+    : th(t('harnessColumn')) + metricKeys.map((metric, i) => `<th scope="col" class="numeric ${metric === key ? 'selected-metric' : ''}" aria-sort="${metric === key ? 'descending' : 'none'}"><button type="button" data-metric="${metric}" title="${esc(t(metric + 'Desc'))}">${esc(t(shortKeys[i]))}${metric === key ? ' ↓' : ''}</button></th>`).join('')) + th(t('evidenceCol'), 'evidence-col') + '</tr>';
+  $('table-body').innerHTML = entries.map(entry => {
+    const {model, arm, armId, name, rank} = entry;
     const arms = model.arms;
+    const identity = `<td class="rank"><span class="rank-number rank-${rank}">${rank}</span></td><th scope="row" class="model-cell">${esc(name)}</th>`;
     let scores = '', sources = '';
     if (view === 'compare') {
+      const gain = (arms.deepagents.metrics[key].count - arms.baseline.metrics[key].count) / 10;
+      scores = scoreCell(arms.baseline, key, 'baseline') + scoreCell(arms.deepagents, key, 'harness') + `<td class="gain numeric ${gain < 0 ? 'negative' : ''}">${gain > 0 ? '+' : ''}${gain.toFixed(1)}<small>${esc(t('pp'))}</small></td>`;
       sources = external(sourceURL(arms.baseline.path, true), 'A') + external(sourceURL(arms.deepagents.path, true), 'B');
     } else {
+      const badge = armId === 'dsh' ? `<a class="independent-tag" href="#protocol-details">${esc(t('independentLabel'))} ↗</a>` : '';
+      scores = `<td class="protocol-cell"><span class="protocol-label ${armId === 'baseline' ? 'no-harness' : ''}">${esc(protocolName(armId))}</span>${badge}</td>` + metricKeys.map(metric => compactScore(arm, metric, metric === key)).join('');
+      sources = external(sourceURL(arm.path + '/results.jsonl'), t('recordsLink')) + (!arm.complete ? `<span class="evidence-gap">${esc(t('review'))}</span>` : '');
     }
     return `<tr data-model="${esc(model.id)}" data-arm="${esc(armId || 'paired')}">${identity}${scores}<td class="source-cell">${sources}</td></tr>`;
   }).join('');
   $('evidence-body').innerHTML = data.models.flatMap(m => Object.entries(m.arms).map(([id, arm]) => `<tr><th scope="row">${esc(arm.display_name || m.name)}</th><td>${esc(id === 'baseline' ? t('single') : id === 'dsh' ? t('dsh') : 'DeepAgents')}</td>${evidenceState(arm)}</tr>`)).join('');
   const dsh = data.models.find(m => m.id === 'deepseek-v4-pro')?.arms.dsh;
   $('independent-notice').hidden = !dsh;
+  $('independent-summary').hidden = !dsh || view === 'baseline' || view === 'compare';
   if (dsh) $('dsh-protocol').href = sourceURL(dsh.protocol_url);
+  document.querySelector('[data-display="mountain"]').disabled = view === 'compare';
+  renderMountain(entries, key);
 }
 async function loadData() {
   $('error').hidden = true;
   $('load-state').hidden = false;
   $('table-wrap').hidden = true;
+  $('ranking-mountain').hidden = true;
+  $('independent-summary').hidden = true;
   $('empty').hidden = true;
   $('result-count').textContent = '';
   $('evidence-body').replaceChildren();
 document.querySelectorAll('[data-view]').forEach(button => button.addEventListener('click', () => {
   view = button.dataset.view;
+  if (view === 'compare') setDisplay('table');
   document.querySelectorAll('[data-view]').forEach(el => el.setAttribute('aria-pressed', String(el === button)));
   render();
 }));
   try { localStorage.setItem('inferencenet-language', language); } catch (_) {}
   applyLanguage();
 });
+function setDisplay(next) {
+  display = next;
+  document.querySelectorAll('[data-display]').forEach(el => el.setAttribute('aria-pressed', String(el.dataset.display === next)));
+  render();
+}
+document.querySelectorAll('[data-display]').forEach(button => button.addEventListener('click', () => setDisplay(button.dataset.display)));
+$('table-head').addEventListener('click', event => {
+  const button = event.target.closest('[data-metric]');
+  if (button) { $('metric').value = button.dataset.metric; render(); }
+});
+document.addEventListener('click', event => {
+  if (event.target.closest('a[href="#protocol-details"]')) $('protocol-details').open = true;
+});
+$('theme').addEventListener('click', () => {
+  theme = theme === 'light' ? 'dark' : 'light';
+  try { localStorage.setItem('inferencenet-theme', theme); } catch (_) {}
+  applyTheme();
+});
 applyLanguage();
 loadData();

mountain.css ADDED Viewed

	@@ -0,0 +1,145 @@

+/* Mountain-climb leaderboard. Companion to mountain.js. Uses the site tokens from
+ * styles.css (--paper, --surface, --ink, --soft, --muted, --line, --strong-line, --tint, --sans, --mono)
+ * and defines every colour the drawing needs on the component itself, for light and dark. */
+.mountain{
+  --mtn-sky:#e9eef5;--mtn-sky-low:#ffffff;
+  --mtn-far:#e3e8ef;--mtn-mid:#d2dae4;--mtn-near:#b9c4d1;--mtn-shade:#6f7f93;--mtn-foot:#a2aebd;
+  --mtn-snow:#ffffff;--mtn-cap:#ffffff;--mtn-outline:#4b5665;--mtn-haze:#ffffff;
+  --mtn-line:#7d8794;--mtn-route:#2f3742;--mtn-flag:#d6382a;--mtn-pole:#262a30;
+  --mtn-gold:#e8b421;--mtn-silver:#c9d0da;--mtn-bronze:#c98a52;--mtn-on-gold:#1a1a1a;
+  --mtn-marker:#28313c;--mtn-marker-text:#ffffff;--mtn-marker-ring:#ffffff;--mtn-focus:#191919;
+  --mtn-pill:#20272f;--mtn-pill-text:#ffffff;--mtn-pill-edge:rgba(255,255,255,.55);--mtn-badge:rgba(255,255,255,.16);
+  --mtn-text:#191919;--mtn-muted:#5d6672;--mtn-halo:rgba(255,255,255,.9);--mtn-trail:#1f262e;
+  display:block;margin:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);overflow:hidden;font-family:var(--sans,Inter,Arial,sans-serif)}
+html[data-theme="dark"] .mountain{
+  --mtn-sky:#0d121a;--mtn-sky-low:#171b22;
+  --mtn-far:#1e2632;--mtn-mid:#293340;--mtn-near:#38434f;--mtn-shade:#141a22;--mtn-foot:#28313c;
+  --mtn-snow:#d5dde7;--mtn-cap:#c9d2dd;--mtn-outline:#8892a0;--mtn-haze:#171b22;
+  --mtn-line:#6c7684;--mtn-route:#dfe5ec;--mtn-flag:#e4493a;--mtn-pole:#e8e8e8;
+  --mtn-gold:#f2c13d;--mtn-silver:#aeb7c3;--mtn-bronze:#cf925c;--mtn-on-gold:#1a1a1a;
+  --mtn-marker:#e9edf2;--mtn-marker-text:#151515;--mtn-marker-ring:#111111;--mtn-focus:#eeeeee;
+  --mtn-pill:#e9ebee;--mtn-pill-text:#151515;--mtn-pill-edge:rgba(0,0,0,.55);--mtn-badge:rgba(0,0,0,.12);
+  --mtn-text:#eeeeee;--mtn-muted:#a5adb8;--mtn-halo:rgba(17,17,17,.9);--mtn-trail:#e6eaef}
+.mountain>script{display:none}
+.mountain-canvas{display:block}
+/* Header and caption. */
+.mountain-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 22px 14px;border-bottom:1px solid var(--line)}
+.mountain-title{margin:0;font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--ink)}
+.mountain-subtitle{margin:4px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
+.mountain-stamp{margin:0;font-family:var(--mono,ui-monospace,monospace);font-size:12px;line-height:1.6;color:var(--muted);white-space:nowrap}
+.mountain-caption{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px;padding:12px 22px 14px;border-top:1px solid var(--line);font-size:12px;line-height:1.6;color:var(--muted)}
+.mountain-note{margin:0}
+.mountain-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
+.mountain-legend li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
+.mtn-key{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--mtn-marker);border:2px solid var(--mtn-marker-ring);box-sizing:content-box}
+.mtn-key--gold{background:var(--mtn-gold)}
+.mtn-key--internal{border:1.5px dashed var(--mtn-marker);background:transparent;width:10px;height:10px}
+.mtn-key--trail{width:20px;height:0;border:0;border-top:2px dashed var(--mtn-trail);border-radius:0;background:transparent}
+/* Stage: the drawing plus the pill overlay. */
+.mountain-stage{position:relative;display:block;width:100%;line-height:0}
+.mountain-svg{display:block;width:100%;height:auto;font-family:inherit;font-variant-numeric:tabular-nums}
+.mountain-svg text{font-family:inherit;line-height:1}
+/* Terrain. */
+.mtn-sky-top{stop-color:var(--mtn-sky)}
+.mtn-sky-low{stop-color:var(--mtn-sky-low)}
+.mtn-haze-top{stop-color:var(--mtn-haze);stop-opacity:0}
+.mtn-haze-low{stop-color:var(--mtn-haze);stop-opacity:.55}
+.mtn-far{fill:var(--mtn-far)}
+.mtn-mid{fill:var(--mtn-mid)}
+.mtn-cap{fill:var(--mtn-cap);opacity:.85}
+.mtn-near{fill:var(--mtn-near)}
+.mtn-snow{fill:var(--mtn-snow)}
+.mtn-shade{fill:var(--mtn-shade);opacity:.28}
+.mtn-stria{fill:none;stroke:var(--mtn-outline);stroke-width:1;opacity:.14;stroke-linejoin:round}
+.mtn-foot{fill:var(--mtn-foot)}
+.mtn-outline{fill:none;stroke:var(--mtn-outline);stroke-width:1;stroke-linejoin:round;opacity:.42}
+.mtn-outline--foot{opacity:.22}
+.mtn-contour{stroke:var(--mtn-line);stroke-width:1;stroke-dasharray:2 7;stroke-linecap:round;opacity:.38}
+.mtn-contour-label{fill:var(--mtn-muted);font-size:12px;paint-order:stroke;stroke:var(--mtn-halo);stroke-width:3px;stroke-linejoin:round}
+.mtn-base{stroke:var(--mtn-line);stroke-width:1}
+.mtn-route{stroke:var(--mtn-route);stroke-width:2.2;stroke-dasharray:0 7;stroke-linecap:round;opacity:.72}
+.mtn-pole{stroke:var(--mtn-pole);stroke-width:2;stroke-linecap:round}
+.mtn-flag{fill:var(--mtn-flag)}
+.mtn-peak-label{fill:var(--mtn-text);font-size:12px;font-weight:500;paint-order:stroke;stroke:var(--mtn-halo);stroke-width:3px;stroke-linejoin:round}
+.mtn-stamp{fill:var(--mtn-muted);font-family:var(--mono,ui-monospace,monospace);font-size:12px}
+/* Connectors, trails. */
+.mtn-connector{stroke:var(--mtn-line);stroke-width:1;opacity:.5;transition:opacity .15s,stroke-width .15s}
+.mtn-connector.is-active{stroke:var(--mtn-focus);stroke-width:1.5;opacity:1}
+.mtn-trail-path{stroke:var(--mtn-trail);stroke-width:1.75;stroke-dasharray:6 5;stroke-linecap:round}
+.mtn-trail-head{fill:var(--mtn-trail)}
+.mtn-trail-label{fill:var(--mtn-text);font-size:12px;font-weight:600;paint-order:stroke;stroke:var(--mtn-halo);stroke-width:4px;stroke-linejoin:round}
+/* Markers. */
+.mtn-marker{cursor:default}
+.mtn-marker-dot{fill:var(--mtn-marker);stroke:var(--mtn-marker-ring);stroke-width:2;transition:stroke-width .15s}
+.mtn-marker--leader .mtn-marker-dot{fill:var(--mtn-gold);stroke-width:2.5}
+.mtn-marker--silver .mtn-marker-dot{stroke:var(--mtn-silver);stroke-width:3.5}
+.mtn-marker--bronze .mtn-marker-dot{stroke:var(--mtn-bronze);stroke-width:3.5}
+.mtn-marker--waypoint .mtn-marker-dot{fill:var(--mtn-sky-low);stroke:var(--mtn-marker);stroke-width:1.5}
+.mtn-marker-num{fill:var(--mtn-marker-text);font-size:12px;font-weight:700;pointer-events:none}
+.mtn-marker--leader .mtn-marker-num{fill:var(--mtn-on-gold);font-size:14px}
+.mtn-marker-halo{fill:none;stroke:var(--mtn-focus);stroke-width:2;opacity:0;transition:opacity .15s}
+.mtn-marker--leader .mtn-marker-halo{stroke:var(--mtn-gold);stroke-width:1.5;opacity:.55}
+.mtn-marker.is-active .mtn-marker-halo{stroke:var(--mtn-focus);stroke-width:2;opacity:1}
+.mtn-marker-ring{fill:none;stroke:var(--mtn-marker);stroke-width:1.25;stroke-dasharray:3 3}
+.mtn-marker-val{fill:var(--mtn-text);font-size:12px;font-weight:600;paint-order:stroke;stroke:var(--mtn-halo);stroke-width:4px;stroke-linejoin:round;opacity:0;transition:opacity .15s;pointer-events:none}
+.mtn-marker.is-active .mtn-marker-val{opacity:1}
+/* Pills: absolute overlay in the wide layout, ranks stacked left (even) and right (odd). */
+.mountain-pills{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none;line-height:1}
+.mountain-pill{position:absolute;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 11px 0 4px;border-radius:14px;background:var(--mtn-pill);color:var(--mtn-pill-text);border:1px solid var(--mtn-pill-edge);font-size:13px;font-weight:600;white-space:nowrap;pointer-events:auto;cursor:default;box-sizing:border-box;transition:transform .15s,border-color .15s}
+.mountain-pill--right{flex-direction:row-reverse;padding:0 4px 0 11px}
+.mountain-pill:hover,.mountain-pill.is-active{border-color:var(--mtn-focus);transform:translateY(-1px)}
+.mountain-pill:focus{outline:none}
+.mountain-pill:focus-visible{outline:2px solid var(--mtn-focus);outline-offset:3px}
+.mountain-pill--internal .mountain-badge{box-shadow:inset 0 0 0 1.5px var(--mtn-pill-edge)}
+.mountain-badge{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--mtn-badge);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
+.mountain-badge--gold{background:var(--mtn-gold);color:var(--mtn-on-gold)}
+.mountain-badge--silver{background:var(--mtn-silver);color:var(--mtn-on-gold)}
+.mountain-badge--bronze{background:var(--mtn-bronze);color:var(--mtn-on-gold)}
+.mountain-pill-value{display:none}
+/* Narrow desktop (700–1000px container): smaller pills leave the drawing more width. */
+.mountain--narrow .mountain-pill{font-size:12px;padding:0 9px 0 4px}
+.mountain--narrow .mountain-pill--right{padding:0 4px 0 9px}
+.mountain-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
+/* Compact layout (container narrower than the breakpoint): 4:3 drawing, pills listed below. */
+.mountain--compact .mountain-head{flex-direction:column;gap:2px;padding:16px 16px 12px}
+.mountain--compact .mountain-stamp{white-space:normal;margin-top:6px}
+.mountain--compact .mountain-caption{padding:12px 16px}
+.mountain--compact .mountain-pills{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px 16px 4px;pointer-events:auto;border-top:1px solid var(--line)}
+.mountain--compact .mountain-pill{position:static;display:flex;flex-direction:row;height:auto;min-height:32px;padding:5px 10px 5px 5px;border-radius:16px;white-space:normal;font-size:12px;line-height:1.3;gap:7px}
+.mountain--compact .mountain-pill-label{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
+.mountain--compact .mountain-pill-value{display:inline;font-variant-numeric:tabular-nums;font-weight:500;opacity:.8;flex:none}
+.mountain--compact .mountain-pill:hover,.mountain--compact .mountain-pill.is-active{transform:none}
+@media(max-width:420px){.mountain--compact .mountain-pills{grid-template-columns:1fr}} /* one column on phones: labels stay on one or two lines */
+/* Ranked table (no-JS fallback and screen readers). An authored table with more than
+ * three columns goes inside <div class="mountain-table-wrap"> so it scrolls sideways on phones. */
+.mountain-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
+.mountain-details{border-top:1px solid var(--line);font-size:13px}
+.mountain-details summary{padding:12px 22px;cursor:pointer;color:var(--soft);font-weight:500}
+.mountain-details summary:hover{background:var(--tint)}
+.mountain-details summary:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
+.mountain-table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums;text-align:left}
+.mountain-table caption{padding:0 22px 8px;text-align:left;font-size:12px;color:var(--muted)}
+.mountain-table th,.mountain-table td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top}
+.mountain-table thead th{font-size:12px;font-weight:600;color:var(--soft);background:var(--tint)}
+.mountain-table tbody th{font-weight:500}
+.mountain-table tr>*:first-child{padding-left:22px;width:44px;color:var(--muted)}
+.mountain-table tr>*:last-child{padding-right:22px;text-align:right}
+.mountain:not(.mountain--ready) .mountain-canvas{display:none}
+.mountain:not(.mountain--ready):not(.mountain--error):not(:has(.mountain-table)){display:none}
+.mountain:not(.mountain--ready) .mountain-table caption{padding-top:12px}
+.mountain--error .mountain-canvas::before{content:"Leaderboard data could not be read.";display:block;padding:18px 22px;font-size:13px;color:var(--muted)}
+@media(prefers-reduced-motion:reduce){.mountain *{transition:none!important}}
+@media(forced-colors:active){
+  .mountain-pill{border-color:ButtonText;forced-color-adjust:none;background:ButtonFace;color:ButtonText}
+  .mtn-marker-dot{stroke:CanvasText}
+}

mountain.js ADDED Viewed

	@@ -0,0 +1,499 @@

+// Reused from the InferenceNet Challenge website; local adaptation adds Chinese labels.
+/* Mountain-climb leaderboard: every entry is a climber whose altitude is its score,
+ * the flag marks the unconquered summit (score = max). ES module, zero dependencies.
+ *
+ * Markup:
+ *   <figure class="mountain" data-mountain>
+ *     <script type="application/json">{ "title": "…", "items": [ … ] }</script>
+ *     <div class="mountain-canvas"></div>
+ *   </figure>
+ *   <script type="module" src="mountain.js"></script>
+ *
+ * The module mounts every [data-mountain] element once the DOM is ready; calling
+ * mountMountains() again (or mountain(el, data) twice) re-renders in place. */
+const NS = "http://www.w3.org/2000/svg";
+const DEFAULTS = {
+  compactBreakpoint: 700, // px; below this the pills move under the drawing
+  headingLevel: 3,
+  table: true,            // emit a ranked <table class="mountain-table"> when the page has none
+  minGap: 28,             // px; minimum centre distance between two markers
+  markerRadius: 11,
+  leaderRadius: 15,
+  aspect: 0.6,            // drawing height / width (1200 × 720)
+  compactAspect: 0.75     // 4:3 on small screens
+};
+/* Terrain in unit coordinates: [x / width, altitude above the base line, 0..1 = summit]. */
+const PEAK = [[-0.06, 0], [0.02, 0.06], [0.07, 0.17], [0.11, 0.14], [0.17, 0.29], [0.21, 0.26], [0.26, 0.42], [0.30, 0.39], [0.345, 0.55], [0.375, 0.53], [0.42, 0.73], [0.445, 0.71], [0.475, 0.88], [0.5, 1], [0.525, 0.87], [0.555, 0.84], [0.59, 0.72], [0.62, 0.69], [0.665, 0.52], [0.70, 0.47], [0.75, 0.34], [0.79, 0.30], [0.84, 0.18], [0.885, 0.15], [0.94, 0.06], [1.06, 0]];
+const SNOW = [[0.42, 0.73], [0.445, 0.71], [0.475, 0.88], [0.5, 1], [0.525, 0.87], [0.555, 0.84], [0.59, 0.72], [0.60, 0.69], [0.592, 0.63], [0.578, 0.66], [0.567, 0.585], [0.552, 0.63], [0.541, 0.555], [0.531, 0.60], [0.52, 0.505], [0.506, 0.57], [0.495, 0.495], [0.484, 0.56], [0.471, 0.525], [0.461, 0.60], [0.451, 0.565], [0.441, 0.63], [0.431, 0.61], [0.425, 0.68]];
+const SNOW_TONGUES = [
+  [[0.462, 0.605], [0.482, 0.575], [0.478, 0.46], [0.470, 0.43], [0.464, 0.47]],
+  [[0.512, 0.545], [0.531, 0.565], [0.535, 0.43], [0.526, 0.37], [0.519, 0.44]],
+  [[0.556, 0.61], [0.573, 0.585], [0.592, 0.50], [0.585, 0.465], [0.571, 0.53]],
+  [[0.388, 0.52], [0.404, 0.565], [0.416, 0.535], [0.412, 0.485], [0.398, 0.475]],
+  [[0.628, 0.60], [0.646, 0.585], [0.662, 0.525], [0.652, 0.50], [0.636, 0.535]]
+];
+const SHADE = [[0.5, 1], [0.515, 0.80], [0.53, 0.62], [0.56, 0.45], [0.585, 0.28], [0.62, 0.12], [0.66, 0], [1.06, 0], [0.94, 0.06], [0.885, 0.15], [0.84, 0.18], [0.79, 0.30], [0.75, 0.34], [0.70, 0.47], [0.665, 0.52], [0.62, 0.69], [0.59, 0.72], [0.555, 0.84], [0.525, 0.87]];
+const STRIAE = [
+  [[0.36, 0.53], [0.33, 0.40], [0.29, 0.30], [0.23, 0.16]],
+  [[0.41, 0.66], [0.39, 0.50], [0.35, 0.36], [0.31, 0.20]],
+  [[0.66, 0.50], [0.69, 0.36], [0.74, 0.22], [0.80, 0.10]],
+  [[0.60, 0.66], [0.64, 0.48], [0.68, 0.30], [0.71, 0.14]]
+];
+const FAR = [[-0.06, 0], [0.0, 0.22], [0.05, 0.18], [0.10, 0.36], [0.15, 0.30], [0.20, 0.44], [0.25, 0.40], [0.31, 0.52], [0.36, 0.48], [0.42, 0.56], [0.5, 0.6], [0.58, 0.55], [0.64, 0.58], [0.70, 0.48], [0.75, 0.52], [0.80, 0.40], [0.86, 0.44], [0.92, 0.28], [0.97, 0.32], [1.06, 0.16], [1.06, 0]];
+const MID = [[-0.06, 0], [0.0, 0.10], [0.06, 0.20], [0.10, 0.18], [0.16, 0.36], [0.20, 0.30], [0.24, 0.33], [0.29, 0.24], [0.34, 0.28], [0.38, 0.18], [0.42, 0.24], [0.47, 0.12], [0.53, 0.14], [0.58, 0.08], [0.63, 0.16], [0.68, 0.22], [0.72, 0.20], [0.77, 0.34], [0.82, 0.42], [0.86, 0.32], [0.90, 0.36], [0.95, 0.22], [1.0, 0.28], [1.06, 0.12], [1.06, 0]];
+const MID_CAPS = [
+  [[0.135, 0.29], [0.16, 0.36], [0.185, 0.31], [0.175, 0.30], [0.16, 0.32], [0.148, 0.30]],
+  [[0.795, 0.37], [0.82, 0.42], [0.845, 0.36], [0.835, 0.35], [0.82, 0.37], [0.807, 0.355]]
+];
+const FOOT = [[-0.06, 0], [0.04, 0.05], [0.12, 0.03], [0.20, 0.075], [0.28, 0.04], [0.36, 0.06], [0.45, 0.02], [0.55, 0.05], [0.64, 0.03], [0.73, 0.08], [0.82, 0.045], [0.9, 0.07], [1.06, 0.03], [1.06, 0]];
+const ROUTE = [[0.34, 0], [0.30, 0.10], [0.39, 0.20], [0.33, 0.33], [0.43, 0.44], [0.40, 0.56], [0.47, 0.68], [0.455, 0.80], [0.49, 0.92], [0.5, 1]];
+/* Horizontal spread sequence for markers of one side, indexed by order within that side. */
+const SPREAD = [0.45, 0.78, 0.22, 0.6, 0.92, 0.35, 0.7, 0.12, 0.52, 0.85, 0.3, 0.65];
+let counter = 0;
+const instances = new WeakMap();
+/* ---------- small helpers ---------- */
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const num = (v) => (Math.round(v * 10) / 10).toFixed(1).replace(/\.0$/, "");
+const fmt = (v, unit) => {
+  const s = num(Number(v) || 0);
+  return unit === "%" ? `${s}%` : unit ? `${s} ${unit}` : s;
+};
+function h(tag, attrs, parent, text) {
+  const n = document.createElement(tag);
+  for (const k in attrs) if (attrs[k] != null) n.setAttribute(k, attrs[k]);
+  if (text != null) n.textContent = text;
+  if (parent) parent.appendChild(n);
+  return n;
+}
+function s(tag, attrs, parent, text) {
+  const n = document.createElementNS(NS, tag);
+  for (const k in attrs) if (attrs[k] != null) n.setAttribute(k, attrs[k]);
+  if (text != null) n.textContent = text;
+  if (parent) parent.appendChild(n);
+  return n;
+}
+const px = (v) => (Math.round(v * 10) / 10).toString();
+function frame(W, compact, o) {
+  const aspect = compact ? o.compactAspect : W < 1000 ? Math.max(o.aspect, 0.7) : o.aspect;
+  const H = Math.round(W * aspect);
+  const base = H - (compact ? 26 : 30);
+  const summit = Math.round(H * (compact ? 0.27 : 0.13));
+  return { W, H, base, summit, range: base - summit, cx: W / 2, compact };
+}
+const pt = (f, p) => [p[0] * f.W, f.base - p[1] * f.range];
+const pts = (f, list) => list.map((p) => pt(f, p).map(px).join(",")).join(" ");
+/* Catmull-Rom spline through the points, as a cubic path. */
+function smoothPath(list) {
+  let d = `M${px(list[0][0])},${px(list[0][1])}`;
+  for (let i = 0; i < list.length - 1; i++) {
+    const p0 = list[i - 1] || list[i], p1 = list[i], p2 = list[i + 1], p3 = list[i + 2] || p2;
+    const c1 = [p1[0] + (p2[0] - p0[0]) / 6, p1[1] + (p2[1] - p0[1]) / 6];
+    const c2 = [p2[0] - (p3[0] - p1[0]) / 6, p2[1] - (p3[1] - p1[1]) / 6];
+    d += ` C${px(c1[0])},${px(c1[1])} ${px(c2[0])},${px(c2[1])} ${px(p2[0])},${px(p2[1])}`;
+  }
+  return d;
+}
+/* Horizontal extent of a closed polygon (pixel coordinates) along the line y. */
+function extentAt(poly, y) {
+  let lo = Infinity, hi = -Infinity;
+  for (let i = 0; i < poly.length; i++) {
+    const a = poly[i], b = poly[(i + 1) % poly.length];
+    if ((a[1] <= y && b[1] > y) || (b[1] <= y && a[1] > y)) {
+      const x = a[0] + ((y - a[1]) * (b[0] - a[0])) / (b[1] - a[1]);
+      lo = Math.min(lo, x); hi = Math.max(hi, x);
+    }
+  }
+  return lo <= hi ? [lo, hi] : null;
+}
+/* Deterministic collision resolution: sweep x outward in 6px steps inside [lo, hi],
+ * then allow small vertical nudges; never places two markers closer than gap. */
+function resolve(x, y, lo, hi, placed, gap) {
+  const free = (X, Y) => placed.every((p) => Math.hypot(p.x - X, p.y - Y) >= gap);
+  const dys = [0, -3, 3, -6, 6, -9, 9, -12, 12];
+  for (const dy of dys) {
+    for (let d = 0; d <= Math.max(hi - lo, 1) + 6; d += 6) {
+      for (const X of d === 0 ? [x] : [x + d, x - d]) {
+        if (X < lo - 0.5 || X > hi + 0.5) continue;
+        if (free(X, y + dy)) return { x: X, y: y + dy };
+      }
+    }
+  }
+  let best = { x, y }, score = -1; // last resort: the least crowded spot
+  for (let X = lo; X <= hi; X += 4) {
+    const m = Math.min(...placed.map((p) => Math.hypot(p.x - X, p.y - y)), Infinity);
+    if (m > score) { score = m; best = { x: X, y }; }
+  }
+  return best;
+}
+function normalise(data) {
+  const d = Object.assign({ unit: "", max: 100, items: [], trails: [] }, data || {});
+  const max = Number(d.max) > 0 ? Number(d.max) : 100;
+  const items = (d.items || []).map((it) => ({
+    label: String(it.label ?? it.name ?? ""), value: Number(it.value) || 0,
+    group: it.group ?? "", kind: it.kind || "public", rank: it.rank
+  }));
+  items.sort((a, b) => (b.value - a.value) || String(a.label).localeCompare(String(b.label)));
+  items.forEach((it, i) => { if (!Number.isFinite(Number(it.rank))) it.rank = i + 1; });
+  items.sort((a, b) => a.rank - b.rank);
+  return { ...d, max, items, trails: Array.isArray(d.trails) ? d.trails : [] };
+}
+/* ---------- component ---------- */
+export function mountain(el, data, options = {}) {
+  let inst = instances.get(el);
+  if (inst) { inst.update(data, options); return inst; }
+  const o = Object.assign({}, DEFAULTS, options);
+  const id = el.id || `mountain-${++counter}`;
+  let d = normalise(data);
+  let canvas = el.querySelector(":scope > .mountain-canvas") || h("div", { class: "mountain-canvas" }, el);
+  let lastWidth = -1, raf = 0, ro = null;
+  el.classList.add("mountain");
+  function render() {
+    el.classList.add("mountain--ready"); // reveals the canvas before it is measured
+    const width = canvas.clientWidth;
+    if (!width) return; // hidden (closed tab, display:none): the ResizeObserver re-schedules when visible
+    lastWidth = width;
+    const compact = width < o.compactBreakpoint;
+    el.classList.toggle("mountain--compact", compact);
+    el.classList.toggle("mountain--narrow", !compact && width < 1000); // shorter pills keep the drawing wide
+    canvas.replaceChildren();
+    /* Header */
+    const head = h("div", { class: "mountain-head" }, canvas);
+    const headText = h("div", { class: "mountain-head-text" }, head);
+    if (d.title) h(`h${o.headingLevel}`, { class: "mountain-title" }, headText, d.title);
+    if (d.subtitle) h("p", { class: "mountain-subtitle" }, headText, d.subtitle);
+    if (compact && d.date) h("p", { class: "mountain-stamp" }, head, d.date);
+    /* Stage: drawing + pills */
+    const stage = h("div", { class: "mountain-stage" }, canvas);
+    /* Trails need vertical room on phones: a taller compact drawing keeps labels off the markers. */
+    const f = frame(width, compact, d.trails.length ? { ...o, compactAspect: Math.max(o.compactAspect, 0.9) } : o);
+    const svg = s("svg", {
+      class: "mountain-svg", viewBox: `0 0 ${f.W} ${f.H}`, width: f.W, height: f.H,
+      role: "img", "aria-labelledby": `${id}-title ${id}-desc`, focusable: "false"
+    }, stage);
+    const leader = d.items[0];
+    const isZh = d.locale === "zh";
+    const n = d.items.length;
+    s("title", { id: `${id}-title` }, svg, `${d.title || "Leaderboard"}: ${n} entries climbing by ${d.metric || "score"}.`);
+    s("desc", { id: `${id}-desc` }, svg, leader
+      ? `Altitude is ${d.metric || "score"}; the summit flag marks ${fmt(d.max, d.unit)}. Leader: ${leader.label} at ${fmt(leader.value, d.unit)}. Full ranking in the table below.`
+      : "No entries yet.");
+    svg.setAttribute("aria-label", `${d.title || "Leaderboard"}: ${n} entries climbing by ${d.metric || "score"}${leader ? `; leader ${leader.label} at ${fmt(leader.value, d.unit)}` : ""}.`);
+    const pills = h("ol", { class: "mountain-pills", "aria-label": `Ranked entries by ${d.metric || "score"}` }, stage);
+    const pillOf = new Map();
+    d.items.forEach((it) => {
+      const right = it.rank % 2 === 1;
+      const li = h("li", {
+        class: `mountain-pill mountain-pill--${right ? "right" : "left"}${it.kind === "internal" ? " mountain-pill--internal" : ""}`,
+        "data-rank": it.rank, "aria-describedby": `${id}-d${it.rank}`
+      }, pills);
+      const badge = h("span", { class: `mountain-badge${it.rank <= 3 ? ` mountain-badge--${["gold", "silver", "bronze"][it.rank - 1]}` : ""}`, "aria-hidden": "true" }, li, String(it.rank));
+      badge.dataset.rank = it.rank;
+      h("span", { class: "mountain-vh" }, li, `Rank ${it.rank}: `);
+      h("span", { class: "mountain-pill-label" }, li, it.label);
+      h("span", { class: "mountain-pill-value" }, li, fmt(it.value, d.unit));
+      pillOf.set(it.rank, li);
+    });
+    /* Column geometry from the measured pills (desktop only). */
+    const gutter = 16;
+    let leftEdge = 0, rightEdge = f.W, maxL = 0, maxR = 0, nL = 0, nR = 0;
+    if (!compact) {
+      pillOf.forEach((li, rank) => {
+        const w = li.offsetWidth;
+        if (rank % 2 === 1) { maxR = Math.max(maxR, w); nR++; } else { maxL = Math.max(maxL, w); nL++; }
+      });
+      leftEdge = gutter + maxL; rightEdge = f.W - gutter - maxR;
+    }
+    /* Marker placement. */
+    const peakPx = PEAK.map((p) => pt(f, p));
+    const r0 = compact ? Math.max(9, o.markerRadius - 2) : o.markerRadius;
+    const rLead = compact ? Math.max(12, o.leaderRadius - 2) : o.leaderRadius;
+    const placed = [];
+    const byLabel = new Map();
+    const trailTo = new Map(d.trails.map((t) => [t.from, t.to]));
+    const sideCount = { 1: 0, "-1": 0 };
+    d.items.forEach((it) => {
+      const side = it.rank % 2 === 1 ? 1 : -1;
+      const k = sideCount[side]++;
+      const r = it.rank === 1 ? rLead : r0;
+      const y = Math.max(f.summit + 1, f.base - clamp(it.value / d.max, 0, 1) * f.range);
+      const ext = extentAt(peakPx, y) || [f.cx - r, f.cx + r];
+      let lo, hi;
+      if (side > 0) { lo = Math.max(f.cx + 0.03 * f.W, ext[0] + r + 4); hi = Math.min(ext[1] - r - 4, rightEdge - r - 14, f.W - r - 6); }
+      else { hi = Math.min(f.cx - 0.03 * f.W, ext[1] - r - 4); lo = Math.max(ext[0] + r + 4, leftEdge + r + 14, r + 6); }
+      if (lo > hi) { const m = clamp((lo + hi) / 2, leftEdge + r + 14, rightEdge - r - 14); lo = hi = m; }
+      let x = lo + SPREAD[k % SPREAD.length] * (hi - lo);
+      const to = trailTo.get(it.label);
+      if (to && byLabel.has(to)) x = clamp(byLabel.get(to).x + side * 0.07 * f.W, lo, hi);
+      const p = resolve(x, y, lo, hi, placed, o.minGap);
+      const m = { ...p, r, item: it, side };
+      placed.push(m); byLabel.set(it.label, m);
+    });
+    /* Trail endpoints that are not ranked entries become unlabeled waypoints. */
+    d.trails.forEach((t) => {
+      [["from", t.fromValue], ["to", t.toValue]].forEach(([key, v]) => {
+        const label = t[key];
+        if (byLabel.has(label) || !Number.isFinite(Number(v))) return;
+        const other = byLabel.get(t[key === "from" ? "to" : "from"]);
+        const side = other ? other.side : 1;
+        const y = Math.max(f.summit + 1, f.base - clamp(Number(v) / d.max, 0, 1) * f.range);
+        const ext = extentAt(peakPx, y) || [f.cx - r0, f.cx + r0];
+        const lo = Math.max(ext[0] + r0 + 4, leftEdge + r0 + 14), hi = Math.min(ext[1] - r0 - 4, rightEdge - r0 - 14);
+        const x0 = other ? clamp(other.x + side * 0.08 * f.W, lo, hi) : f.cx;
+        const p = resolve(x0, y, Math.min(lo, hi), Math.max(lo, hi), placed, o.minGap);
+        const m = { ...p, r: r0 - 2, item: { label, value: Number(v), kind: t.kind || "internal", rank: null }, side, synthetic: true };
+        placed.push(m); byLabel.set(label, m);
+      });
+    });
+    /* Pill positions: bottom-aligned stacks on both sides, ranks ascending downwards. */
+    const pillH = 28;
+    const cols = { 1: [], "-1": [] };
+    if (!compact) {
+      const nSide = Math.max(nL, nR, 1);
+      const bottom = f.base - 6;
+      const pitch = clamp(Math.floor((bottom - f.H * 0.38) / nSide), 30, 34);
+      const top = bottom - nSide * pitch;
+      const idx = { 1: 0, "-1": 0 };
+      d.items.forEach((it) => {
+        const side = it.rank % 2 === 1 ? 1 : -1;
+        const li = pillOf.get(it.rank);
+        const w = li.offsetWidth;
+        const yTop = top + idx[side]++ * pitch + (pitch - pillH) / 2;
+        li.style.top = `${px(yTop)}px`;
+        li.style.left = side > 0 ? `${px(f.W - gutter - w)}px` : `${px(gutter)}px`;
+        cols[side].push({ rank: it.rank, cy: yTop + pillH / 2, inner: side > 0 ? f.W - gutter - w - 3 : gutter + w + 3, top: yTop, bottom: yTop + pillH });
+      });
+    }
+    /* ---------- drawing ---------- */
+    const defs = s("defs", {}, svg);
+    const sky = s("linearGradient", { id: `${id}-sky`, x1: "0", y1: "0", x2: "0", y2: "1" }, defs);
+    s("stop", { offset: "0", class: "mtn-sky-top" }, sky);
+    s("stop", { offset: "1", class: "mtn-sky-low" }, sky);
+    const haze = s("linearGradient", { id: `${id}-haze`, x1: "0", y1: "0", x2: "0", y2: "1" }, defs);
+    s("stop", { offset: "0", class: "mtn-haze-top" }, haze);
+    s("stop", { offset: "1", class: "mtn-haze-low" }, haze);
+    s("rect", { class: "mtn-sky", x: 0, y: 0, width: f.W, height: f.base, fill: `url(#${id}-sky)` }, svg);
+    const scene = s("g", { class: "mtn-scene", "aria-hidden": "true" }, svg);
+    s("polygon", { class: "mtn-far", points: pts(f, FAR) }, scene);
+    s("polygon", { class: "mtn-mid", points: pts(f, MID) }, scene);
+    MID_CAPS.forEach((c) => s("polygon", { class: "mtn-cap", points: pts(f, c) }, scene));
+    s("rect", { class: "mtn-haze", x: 0, y: f.base - f.range * 0.42, width: f.W, height: f.range * 0.42 + 1, fill: `url(#${id}-haze)` }, scene);
+    s("polygon", { class: "mtn-near", points: pts(f, PEAK) }, scene);
+    s("polygon", { class: "mtn-snow", points: pts(f, SNOW) }, scene);
+    SNOW_TONGUES.forEach((t) => s("polygon", { class: "mtn-snow", points: pts(f, t) }, scene));
+    s("polygon", { class: "mtn-shade", points: pts(f, SHADE) }, scene);
+    STRIAE.forEach((l) => s("polyline", { class: "mtn-stria", points: pts(f, l) }, scene));
+    s("polygon", { class: "mtn-foot", points: pts(f, FOOT) }, scene);
+    s("polygon", { class: "mtn-outline", points: pts(f, PEAK) }, scene);
+    s("polygon", { class: "mtn-outline mtn-outline--foot", points: pts(f, FOOT) }, scene);
+    /* Contour lines every 25 % with a label where the pill columns leave room. */
+    const contours = s("g", { class: "mtn-contours" }, scene);
+    const labelFont = 12;
+    [0.25, 0.5, 0.75].forEach((a) => {
+      const y = f.base - a * f.range;
+      s("line", { class: "mtn-contour", x1: 0, y1: px(y), x2: f.W, y2: px(y) }, contours);
+      const text = `${num(a * d.max)}${d.unit === "%" ? "%" : ""}`;
+      const collides = (col) => col.some((c) => y - labelFont - 4 < c.bottom && y + 2 > c.top - 4);
+      if (!collides(cols[1])) s("text", { class: "mtn-contour-label", x: f.W - 10, y: px(y - 5), "text-anchor": "end" }, contours, text);
+      else if (!collides(cols["-1"])) s("text", { class: "mtn-contour-label", x: 10, y: px(y - 5) }, contours, text);
+    });
+    s("line", { class: "mtn-base", x1: 0, y1: f.base + 0.5, x2: f.W, y2: f.base + 0.5 }, scene);
+    s("text", { class: "mtn-contour-label", x: f.W - 10, y: f.base + 16, "text-anchor": "end" }, scene, `0${d.unit === "%" ? "%" : ""} · ${isZh ? "起点" : "base camp"}`);
+    /* Route and flag. */
+    s("path", { class: "mtn-route", d: smoothPath(ROUTE.map((p) => pt(f, p))), fill: "none" }, scene);
+    const top = pt(f, [0.5, 1]);
+    const poleH = compact ? Math.min(34, Math.max(26, f.summit - 30)) : Math.max(34, f.H * 0.075);
+    s("line", { class: "mtn-pole", x1: px(top[0]), y1: px(top[1]), x2: px(top[0]), y2: px(top[1] - poleH) }, scene);
+    const fw = Math.max(22, f.W * 0.028), fh = fw * 0.62, fx = top[0] + 1, fy = top[1] - poleH;
+    s("path", { class: "mtn-flag", d: `M${px(fx)},${px(fy)} Q${px(fx + fw * 0.55)},${px(fy + fh * 0.2)} ${px(fx + fw)},${px(fy + fh * 0.5)} Q${px(fx + fw * 0.55)},${px(fy + fh * 0.8)} ${px(fx)},${px(fy + fh)} Z` }, scene);
+    if (d.peakLabel) {
+      if (compact) s("text", { class: "mtn-peak-label", x: px(f.cx), y: 18, "text-anchor": "middle" }, scene, d.peakLabel);
+      else s("text", { class: "mtn-peak-label", x: px(fx + fw + 10), y: px(fy + 12) }, scene, d.peakLabel);
+    }
+    if (!compact && d.date) s("text", { class: "mtn-stamp", x: f.W - 16, y: 26, "text-anchor": "end" }, scene, d.date);
+    /* Connectors (pill → marker); straight, from the pill's inner edge, so they never cross a pill. */
+    const connectors = s("g", { class: "mtn-connectors" }, scene);
+    const connOf = new Map();
+    if (!compact) {
+      [1, -1].forEach((side) => cols[side].forEach((c) => {
+        const m = placed.find((p) => p.item.rank === c.rank);
+        if (!m) return;
+        const dx = m.x - c.inner, dy = m.y - c.cy, len = Math.hypot(dx, dy) || 1;
+        const ex = m.x - (dx / len) * (m.r + 3), ey = m.y - (dy / len) * (m.r + 3);
+        connOf.set(c.rank, s("line", { class: "mtn-connector", x1: px(c.inner), y1: px(c.cy), x2: px(ex), y2: px(ey) }, connectors));
+      }));
+    }
+    /* Trails: dashed climbing arrow from the baseline marker to the improved one. */
+    const trails = s("g", { class: "mtn-trails" }, scene);
+    d.trails.forEach((t) => {
+      const a = byLabel.get(t.from), b = byLabel.get(t.to);
+      if (!a || !b) return;
+      const dx = b.x - a.x, dy = b.y - a.y, len = Math.hypot(dx, dy) || 1;
+      let nx = -dy / len, ny = dx / len;
+      const mid = [(a.x + b.x) / 2, (a.y + b.y) / 2];
+      const bow = Math.min(0.22 * len, 60);
+      /* Bow (and label) on the outer side of the trail: for a steep trail that is the side away from the summit line. */
+      const side = a.side || 1;
+      const inward = Math.abs(nx) >= 0.45 ? nx * side < 0 : ((mid[0] + nx * bow) - f.cx) * side < 0;
+      if (inward) { nx = -nx; ny = -ny; }
+      const c = [mid[0] + nx * bow, mid[1] + ny * bow];
+      const sa = [c[0] - a.x, c[1] - a.y], la = Math.hypot(...sa) || 1;
+      const sb = [c[0] - b.x, c[1] - b.y], lb = Math.hypot(...sb) || 1;
+      const p0 = [a.x + (sa[0] / la) * (a.r + 5), a.y + (sa[1] / la) * (a.r + 5)];
+      const p1 = [b.x + (sb[0] / lb) * (b.r + 3.5), b.y + (sb[1] / lb) * (b.r + 3.5)]; // arrowhead touches the ring
+      const g = s("g", { class: "mtn-trail" }, trails);
+      s("path", { class: "mtn-trail-path", d: `M${px(p0[0])},${px(p0[1])} Q${px(c[0])},${px(c[1])} ${px(p1[0])},${px(p1[1])}`, fill: "none" }, g);
+      const tx = p1[0] - c[0], ty = p1[1] - c[1], tl = Math.hypot(tx, ty) || 1, ux = tx / tl, uy = ty / tl;
+      const tip = p1, back = [tip[0] - ux * 9, tip[1] - uy * 9];
+      s("polygon", { class: "mtn-trail-head", points: `${px(tip[0])},${px(tip[1])} ${px(back[0] - uy * 4)},${px(back[1] + ux * 4)} ${px(back[0] + uy * 4)},${px(back[1] - ux * 4)}` }, g);
+      if (t.label) {
+        const q = [0.25 * p0[0] + 0.5 * c[0] + 0.25 * p1[0], 0.25 * p0[1] + 0.5 * c[1] + 0.25 * p1[1]];
+        /* On a steep trail the label hangs off its outer side (anchored at the inner edge) so it never crosses back over the trail or the markers. */
+        const steep = Math.abs(nx) >= 0.45, off = steep ? 9 : 14;
+        s("text", { class: "mtn-trail-label", x: px(q[0] + nx * off), y: px(q[1] + ny * off + 4), "text-anchor": steep ? (nx > 0 ? "start" : "end") : "middle" }, g, t.label);
+      }
+    });
+    /* Markers. Drawn last so they sit above route, trails and snow. */
+    const markers = s("g", { class: "mtn-markers" }, svg);
+    const markerOf = new Map();
+    placed.forEach((m) => {
+      const it = m.item;
+      const cls = ["mtn-marker"];
+      if (it.rank === 1) cls.push("mtn-marker--leader");
+      if (it.rank === 2) cls.push("mtn-marker--silver");
+      if (it.rank === 3) cls.push("mtn-marker--bronze");
+      if (it.kind === "internal") cls.push("mtn-marker--internal");
+      if (m.synthetic) cls.push("mtn-marker--waypoint");
+      const g = s("g", { class: cls.join(" "), transform: `translate(${px(m.x)} ${px(m.y)})` }, markers);
+      s("circle", { class: "mtn-marker-halo", r: m.r + 6 }, g);
+      if (it.kind === "internal") s("circle", { class: "mtn-marker-ring", r: m.r + 4.5 }, g);
+      s("circle", { class: "mtn-marker-dot", r: m.r }, g);
+      if (!m.synthetic) {
+        s("text", { class: "mtn-marker-num", "text-anchor": "middle", dy: "0.36em" }, g, String(it.rank));
+        s("text", { class: "mtn-marker-val", "text-anchor": "middle", y: -(m.r + 8) }, g, fmt(it.value, d.unit));
+        s("desc", { id: `${id}-d${it.rank}` }, g, `${fmt(it.value, d.unit)} ${d.metric || ""}; rank ${it.rank} of ${n}${it.group ? `; ${it.group}` : ""}${it.kind === "internal" ? "; internal study" : ""}.`);
+        markerOf.set(it.rank, g);
+      } else {
+        s("title", {}, g, `${it.label}: ${fmt(it.value, d.unit)}`);
+      }
+    });
+    /* Hover / focus linking between pills and markers. */
+    pillOf.forEach((li, rank) => {
+      const g = markerOf.get(rank), line = connOf.get(rank);
+      const set = (on) => { li.classList.toggle("is-active", on); g && g.classList.toggle("is-active", on); line && line.classList.toggle("is-active", on); };
+      li.addEventListener("mouseenter", () => set(true));
+      li.addEventListener("mouseleave", () => set(false));
+      if (g) { g.addEventListener("mouseenter", () => set(true)); g.addEventListener("mouseleave", () => set(false)); }
+    });
+    /* Caption + legend. */
+    const caption = h("div", { class: "mountain-caption" }, canvas);
+    const noteParts = [];
+    if (d.metric) noteParts.push(isZh ? `高度 = ${d.metric}${d.unit ? `（${d.unit}）` : ""}；顶峰 = ${fmt(d.max, d.unit)}` : `Altitude = ${d.metric}${d.unit ? ` (${d.unit})` : ""}; summit = ${fmt(d.max, d.unit)}`);
+    if (d.date) noteParts.push(d.date);
+    if (d.caption) noteParts.push(d.caption);
+    h("p", { class: "mountain-note" }, caption, noteParts.join(" · "));
+    const legend = h("ul", { class: "mountain-legend", "aria-label": "Legend" }, caption);
+    const key = (cls, text) => { const li = h("li", {}, legend); h("i", { class: `mtn-key ${cls}`, "aria-hidden": "true" }, li); li.appendChild(document.createTextNode(text)); };
+    if (n) key("mtn-key--gold", "rank 1");
+    if (d.items.some((i) => i.kind !== "internal")) key("mtn-key--public", "public result");
+    if (d.items.some((i) => i.kind === "internal") || d.trails.length) key("mtn-key--internal", "internal study");
+    if (d.trails.length) key("mtn-key--trail", d.trailLegend || "gain with harness");
+    /* Ranked table for no-JS and screen readers: keep the page's own, or emit one. */
+    let table = el.querySelector(":scope > .mountain-table, :scope > .mountain-details .mountain-table, :scope > .mountain-table-wrap .mountain-table");
+    if (!table && o.table) {
+      table = h("table", { class: "mountain-table" });
+      h("caption", {}, table, `${d.title || "Leaderboard"} — ranked by ${d.metric || "score"}${d.date ? ` (${d.date})` : ""}.`);
+      const tr = h("tr", {}, h("thead", {}, table));
+      h("th", { scope: "col" }, tr, "#");
+      h("th", { scope: "col" }, tr, "Entry");
+      if (d.items.some((i) => i.group)) h("th", { scope: "col" }, tr, "Group");
+      h("th", { scope: "col" }, tr, d.metric || "Score");
+      const tb = h("tbody", {}, table);
+      d.items.forEach((it) => {
+        const row = h("tr", {}, tb);
+        h("td", {}, row, String(it.rank));
+        h("th", { scope: "row" }, row, it.label + (it.kind === "internal" ? " (internal study)" : ""));
+        if (d.items.some((i) => i.group)) h("td", {}, row, it.group);
+        h("td", {}, row, fmt(it.value, d.unit));
+      });
+      el.appendChild(table);
+    }
+    if (table && !table.closest(".mountain-details")) {
+      const details = h("details", { class: "mountain-details" });
+      h("summary", {}, details, `Ranked list · ${n} ${n === 1 ? "entry" : "entries"}`);
+      table.replaceWith(details);
+      details.appendChild(table);
+    }
+  }
+  function schedule() {
+    cancelAnimationFrame(raf);
+    raf = requestAnimationFrame(() => { if (canvas.clientWidth !== lastWidth) render(); });
+  }
+  inst = {
+    el, render,
+    update(next, opts) {
+      if (next) d = normalise(next);
+      if (opts) Object.assign(o, opts);
+      lastWidth = -1; render();
+    },
+    destroy() {
+      ro && ro.disconnect(); cancelAnimationFrame(raf);
+      instances.delete(el); el.classList.remove("mountain--ready", "mountain--compact", "mountain--narrow");
+    }
+  };
+  instances.set(el, inst);
+  render();
+  if (typeof ResizeObserver === "function") { ro = new ResizeObserver(schedule); ro.observe(canvas); }
+  else window.addEventListener("resize", schedule);
+  if (document.fonts && document.fonts.ready) document.fonts.ready.then(() => { lastWidth = -1; schedule(); }).catch(() => {});
+  return inst;
+}
+export function mountMountains(root = document) {
+  const out = [];
+  root.querySelectorAll("[data-mountain]").forEach((el) => {
+    const script = el.querySelector(':scope > script[type="application/json"]');
+    let data = null;
+    try { data = script ? JSON.parse(script.textContent) : null; }
+    catch (err) { el.classList.add("mountain--error"); return; }
+    if (!data) return;
+    const opts = {};
+    if (el.dataset.headingLevel) opts.headingLevel = Number(el.dataset.headingLevel);
+    if (el.dataset.compactBreakpoint) opts.compactBreakpoint = Number(el.dataset.compactBreakpoint);
+    out.push(mountain(el, data, opts));
+  });
+  return out;
+}
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", () => mountMountains(), { once: true });
+  else mountMountains();
+}