Spaces:

Pleuron
/

ToolTree

Running

App Files Files Community

Pleuron commited on 4 days ago

Commit

a6927da

verified ·

1 Parent(s): cd03d0d

Upload folder using huggingface_hub

Browse files

Files changed (12) hide show

.gitattributes +7 -0
demo.html +384 -0
index.html +380 -18
static/demo_data.js +1 -0
static/paper/ablation_pruning.png +3 -0
static/paper/architecture.png +3 -0
static/paper/case_study.png +3 -0
static/paper/case_study_medical.png +3 -0
static/paper/case_study_reasoning.png +3 -0
static/paper/comparison.png +3 -0
static/paper/efficiency.png +3 -0
static/style.css +746 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,10 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/paper/ablation_pruning.png filter=lfs diff=lfs merge=lfs -text
+static/paper/architecture.png filter=lfs diff=lfs merge=lfs -text
+static/paper/case_study.png filter=lfs diff=lfs merge=lfs -text
+static/paper/case_study_medical.png filter=lfs diff=lfs merge=lfs -text
+static/paper/case_study_reasoning.png filter=lfs diff=lfs merge=lfs -text
+static/paper/comparison.png filter=lfs diff=lfs merge=lfs -text
+static/paper/efficiency.png filter=lfs diff=lfs merge=lfs -text

demo.html ADDED Viewed

	@@ -0,0 +1,384 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>ToolTree — Interactive Case Walkthrough</title>
+<meta name="description" content="Step through real ToolTree search traces on two GTA tasks: candidate drafts, pre/post evaluation, bidirectional pruning, real tool outputs, and Q/N backpropagation.">
+<link rel="icon" href="data:,">
+<style>
+  :root {
+    --ink: #1c2430;
+    --muted: #5b6a7c;
+    --line: #dde4ec;
+    --bg: #f6f8fa;
+    --card: #ffffff;
+    --accent: #1f5fbf;
+    --ok: #1e8a4c;
+    --bad: #b3402f;
+    --warn: #8a6d1e;
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    background: var(--bg);
+    color: var(--ink);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+    font-size: 15px;
+    line-height: 1.5;
+  }
+  a { color: var(--accent); text-decoration: none; }
+  a:hover { text-decoration: underline; }
+  code { background: #eef2f7; border-radius: 4px; padding: 0 4px; font-size: .86em; }
+  .wrap { max-width: 980px; margin: 0 auto; padding: 20px 18px 60px; }
+  header h1 { font-size: 1.45rem; margin: 8px 0 4px; }
+  header .sub { color: var(--muted); font-size: .92rem; }
+  .navlinks { font-size: .9rem; margin-top: 6px; }
+  .navlinks a + a { margin-left: 14px; }
+  .banner {
+    margin: 14px 0 18px;
+    padding: 10px 14px;
+    background: #fff7e8;
+    border: 1px solid #ecd9ac;
+    border-radius: 8px;
+    font-size: .88rem;
+    color: #6a5320;
+  }
+  .card {
+    background: var(--card);
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    padding: 16px 18px;
+    margin-bottom: 16px;
+  }
+  /* case tabs */
+  .tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
+  .tabs button {
+    font: inherit;
+    padding: 8px 14px;
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    background: #fff;
+    color: var(--ink);
+    cursor: pointer;
+    text-align: left;
+  }
+  .tabs button:hover { border-color: var(--accent); color: var(--accent); }
+  .tabs button.active { border-color: var(--accent); background: #eaf1fb; font-weight: 600; }
+  .query {
+    border-left: 3px solid var(--accent);
+    background: #f2f6fc;
+    padding: 8px 12px;
+    margin: 0 0 4px;
+    font-size: .92rem;
+    border-radius: 0 6px 6px 0;
+  }
+  .query .who { font-weight: 700; font-size: .78rem; color: var(--accent); display: block; }
+  /* controls */
+  .controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+  .controls button {
+    font: inherit;
+    padding: 5px 14px;
+    border: 1px solid var(--line);
+    border-radius: 7px;
+    background: #fff;
+    color: var(--ink);
+    cursor: pointer;
+  }
+  .controls button:hover { border-color: var(--accent); color: var(--accent); }
+  .controls input[type=range] { flex: 1; min-width: 180px; accent-color: var(--accent); }
+  .controls .steplabel { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 96px; }
+  .hint { color: var(--muted); font-size: .8rem; margin-top: 6px; }
+  /* step panel */
+  .stephead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
+  .stephead .sid { font-weight: 700; font-size: 1.05rem; }
+  .badge {
+    display: inline-block;
+    padding: 1px 10px;
+    border-radius: 6px;
+    font-size: .76rem;
+    font-weight: 700;
+    letter-spacing: .03em;
+    white-space: nowrap;
+  }
+  .badge.ok   { background: #e2f3e8; color: var(--ok);  border: 1px solid #bcdfc9; }
+  .badge.bad  { background: #f7e8e5; color: var(--bad); border: 1px solid #e6c5be; }
+  .badge.gray { background: #eef1f5; color: var(--muted); border: 1px solid #d8dfe7; }
+  .secline { margin: 8px 0; font-size: .92rem; }
+  .seclabel { font-weight: 700; font-size: .78rem; color: var(--accent); letter-spacing: .04em; display: block; margin: 12px 0 4px; }
+  table.cands { width: 100%; border-collapse: collapse; font-size: .88rem; }
+  table.cands th, table.cands td {
+    text-align: left;
+    padding: 5px 8px;
+    border-bottom: 1px solid var(--line);
+    vertical-align: top;
+  }
+  table.cands th { color: var(--muted); font-weight: 600; font-size: .8rem; }
+  table.cands td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
+  pre.out {
+    background: #0f1720;
+    color: #cfd8e3;
+    border-radius: 8px;
+    padding: 12px 14px;
+    overflow-x: auto;
+    font-size: .8rem;
+    line-height: 1.45;
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin: 6px 0;
+  }
+  pre.out.err { color: #f0a89c; }
+  .trunc { color: var(--warn); font-size: .78rem; }
+  ul.plain { margin: 4px 0; padding-left: 20px; font-size: .9rem; }
+  .answerbox {
+    border-left: 3px solid var(--ok);
+    background: #f0f9f3;
+    padding: 10px 14px;
+    border-radius: 0 6px 6px 0;
+    margin: 8px 0;
+    font-size: .95rem;
+  }
+  .stats { display: flex; gap: 22px; flex-wrap: wrap; font-size: .9rem; margin: 6px 0 2px; }
+  .stats .k { color: var(--muted); }
+  .stats .v { font-weight: 600; font-variant-numeric: tabular-nums; }
+  #error {
+    display: none;
+    background: #f7e8e5;
+    border: 1px solid #e6c5be;
+    color: var(--bad);
+    padding: 14px 16px;
+    border-radius: 8px;
+    margin-top: 14px;
+  }
+  footer { color: var(--muted); font-size: .8rem; margin-top: 26px; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <header>
+    <h1>ToolTree — Interactive Case Walkthrough</h1>
+    <div class="sub">Real execution traces from this repository (real tool-execution mode) on two GTA tasks:
+      step through each rollout — candidate drafts, pre-evaluation, execution with real tool outputs,
+      post-evaluation, pruning, and Q/N backpropagation.</div>
+    <div class="navlinks">
+      <a href="index.html">&larr; Project page</a>
+      <a href="https://github.com/SYang2000/ICLR_2026_ToolTree" target="_blank" rel="noopener">GitHub repo</a>
+      <a href="https://openreview.net/forum?id=Ef5O9gNNLE" target="_blank" rel="noopener">Paper (ICLR 2026)</a>
+    </div>
+    <div class="banner">
+      <b>Provenance:</b> every candidate draft, score (r_pre / r_post), Q/N value, tool output, and final
+      answer below is taken verbatim from a logged run of this repository on 5 GTA tasks with
+      <code>tool_execution: real</code> (seed 42, &tau;<sub>pre</sub> 0.3, &tau;<sub>post</sub> 0.4,
+      c 1.4, max 40 rollouts). Long OCR outputs are truncated to 300 characters and flagged. Failed tool
+      calls (e.g. a tool without a real backend) are shown verbatim — post-evaluation prunes those
+      branches. Task images are referenced by their dataset-relative paths and are not embedded here.
+    </div>
+  </header>
+  <div id="error">
+    Walkthrough data failed to load. This page needs <code>static/demo_data.js</code> next to it
+    (shipped in the repo under <code>docs/static/</code>). If you are viewing a copy of this file alone,
+    grab the full <code>docs/</code> directory from the
+    <a href="https://github.com/SYang2000/ICLR_2026_ToolTree" target="_blank" rel="noopener">GitHub repo</a>.
+  </div>
+  <noscript><p style="max-width:720px;margin:24px auto;padding:12px 16px;background:#fef3c7;border:1px solid #d97706;border-radius:8px;font-size:14px">This interactive walkthrough requires JavaScript. The search mechanism it illustrates is documented on the <a href="index.html">project page</a> and in the <a href="https://github.com/SYang2000/ICLR_2026_ToolTree">repository README</a>.</p></noscript>
+  <div id="app" style="display:none">
+    <div class="tabs" id="tabs"></div>
+    <div class="card">
+      <div class="query"><span class="who">USER QUERY</span><span id="query"></span></div>
+    </div>
+    <div class="card">
+      <div class="controls">
+        <button id="btnPrev" title="previous step (&larr;)">&#9664; Prev</button>
+        <button id="btnNext" title="next step (&rarr;)">Next &#9654;</button>
+        <input type="range" id="slider" min="0" max="1" value="0" step="1">
+        <span class="steplabel" id="stepLabel"></span>
+      </div>
+      <div class="hint">Keyboard: &larr; / &rarr; step through the search.</div>
+    </div>
+    <div class="card" id="stepPanel"></div>
+    <footer>
+      Data source: <code>static/demo_data.js</code>, generated from the audit log of a real-execution
+      validation run of this codebase (per-rollout AUDIT events, LLM traffic, and final results).
+      &middot; <a href="index.html">Project page</a>
+      &middot; <a href="https://github.com/SYang2000/ICLR_2026_ToolTree" target="_blank" rel="noopener">GitHub repo</a>
+    </footer>
+  </div>
+</div>
+<script src="static/demo_data.js"></script>
+<script>
+(function () {
+  "use strict";
+  var D = window.DEMO_DATA;
+  if (!D || !D.cases || !D.cases.length) {
+    document.getElementById("error").style.display = "block";
+    return;
+  }
+  document.getElementById("app").style.display = "block";
+  var caseIdx = 0;
+  var stepIdx = 0;
+  var slider = document.getElementById("slider");
+  function esc(s) {
+    return String(s == null ? "" : s)
+      .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+  function num(x) { return esc(String(x)); }
+  function args(a) { return "<code>" + esc(JSON.stringify(a)) + "</code>"; }
+  // ---------- tabs ----------
+  var tabsEl = document.getElementById("tabs");
+  D.cases.forEach(function (c, i) {
+    var b = document.createElement("button");
+    b.textContent = c.title;
+    b.addEventListener("click", function () { caseIdx = i; stepIdx = 0; render(); });
+    tabsEl.appendChild(b);
+  });
+  // ---------- step rendering ----------
+  function statusBadge(st) {
+    if (st === "kept") return "<span class='badge ok'>kept</span>";
+    if (st === "pre_pruned") return "<span class='badge bad'>pre-pruned</span>";
+    return "<span class='badge gray'>dedup &middot; duplicate action</span>";
+  }
+  function renderRollout(s, total) {
+    var h = "<div class='stephead'><span class='sid'>Rollout " + s.rollout + " of " +
+      total + "</span>";
+    if (s.post_pruned) h += "<span class='badge bad'>branch post-pruned</span>";
+    h += "</div>";
+    var sel = s.selected;
+    h += "<div class='secline'><b>Selection:</b> leaf <code>" + esc(sel.action) + "</code> " +
+      "(Q=" + num(sel.Q) + ", N=" + sel.N + ", r_pre=" + num(sel.r_pre) + ")";
+    if (s.realize) {
+      h += " &mdash; unvisited candidate; its stored argument draft is executed (<code>realize_leaf</code>)";
+    }
+    h += "</div>";
+    if (s.candidates.length) {
+      h += "<span class='seclabel'>EXPANSION &mdash; CANDIDATES &amp; PRE-EVALUATION (&tau;<sub>pre</sub> = " +
+        num(D.meta.tau_pre) + ")</span>";
+      h += "<table class='cands'><tr><th>tool</th><th>argument draft</th><th>r_pre</th><th>outcome</th></tr>";
+      s.candidates.forEach(function (c) {
+        h += "<tr><td><code>" + esc(c.tool) + "</code></td><td>" +
+          (c.args ? args(c.args) : "&mdash;") + "</td><td class='num'>" +
+          (c.r_pre == null ? "&mdash;" : num(c.r_pre)) + "</td><td>" +
+          statusBadge(c.status) + "</td></tr>";
+      });
+      h += "</table>";
+    }
+    if (s.executed) {
+      var ex = s.executed;
+      h += "<span class='seclabel'>EXECUTION &mdash; REAL TOOL OUTPUT</span>";
+      h += "<div class='secline'><b>" + esc(ex.tool) + "</b> " + args(ex.args) + "</div>";
+      h += "<pre class='out" + (ex.error ? " err" : "") + "'>" + esc(ex.output) + "</pre>";
+      if (ex.truncated) {
+        h += "<div class='trunc'>output truncated to " + D.meta.trunc_chars +
+          " characters for display; the full text is in the run artifacts</div>";
+      }
+      h += "<span class='seclabel'>POST-EVALUATION (&tau;<sub>post</sub> = " + num(s.tau_post) + ")</span>";
+      h += "<div class='secline'>r_post = <b>" + num(s.r_post) + "</b> &rarr; " +
+        (s.post_pruned ? "<span class='badge bad'>post-pruned</span>" : "<span class='badge ok'>kept</span>") +
+        "</div>";
+    }
+    if (s.backprop.length) {
+      h += "<span class='seclabel'>BACKPROPAGATION (reward " + num(s.backprop[0].reward) + ")</span>";
+      h += "<ul class='plain'>";
+      s.backprop.forEach(function (b) {
+        h += "<li><code>" + esc(b.node) + "</code> &rarr; Q=" + num(b.Q) + ", N=" + b.N + "</li>";
+      });
+      h += "</ul>";
+      h += "<div class='secline'><span class='badge gray'>best Q after rollout: " + num(s.best_q) + "</span></div>";
+    }
+    return h;
+  }
+  function renderTerminal(s) {
+    var h = "<div class='stephead'><span class='sid'>Search terminated</span>" +
+      "<span class='badge gray'>search_exhausted &middot; rollouts_used=" + s.rollouts_used + "</span></div>";
+    if (s.dedups.length) {
+      h += "<div class='secline'>Further expansion only produced duplicates of actions already on the path:</div><ul class='plain'>";
+      s.dedups.forEach(function (d) {
+        h += "<li><code>" + esc(d.tool) + "</code>" + (d.args ? " " + args(d.args) : "") +
+          " <span class='badge gray'>dedup</span></li>";
+      });
+      h += "</ul>";
+    } else {
+      h += "<div class='secline'>Every remaining candidate was pre-pruned, post-pruned, or a duplicate of an action already on the path.</div>";
+    }
+    h += "<div class='secline'>Nodes marked exhausted:</div><ul class='plain'>";
+    s.exhausted.forEach(function (e) {
+      h += "<li><code>" + esc(e.node) + "</code> (depth " + e.depth + ")</li>";
+    });
+    h += "</ul><div class='secline'>With no expandable leaf left, the search stops early &mdash; well under the budget of " +
+      D.meta.max_rollouts + " rollouts.</div>";
+    return h;
+  }
+  function renderFinal(s) {
+    var h = "<div class='stephead'><span class='sid'>Final trajectory &amp; answer</span>" +
+      "<span class='badge ok'>highest-reward path</span></div>";
+    h += "<span class='seclabel'>FINAL PLAN</span><ul class='plain'>";
+    s.plan.forEach(function (p, i) {
+      h += "<li>" + (i + 1) + ". <code>" + esc(p.tool) + "</code> " + args(p.args) + "</li>";
+    });
+    h += "</ul>";
+    h += "<span class='seclabel'>FINAL ANSWER</span>";
+    h += "<div class='answerbox'>" + esc(s.answer) + "</div>";
+    h += "<div class='stats'>" +
+      "<span><span class='k'>final reward&nbsp;</span><span class='v'>" + num(s.reward) + "</span></span>" +
+      "<span><span class='k'>rollouts used&nbsp;</span><span class='v'>" + s.rollouts_used + "</span></span>" +
+      "</div>";
+    return h;
+  }
+  function render() {
+    var c = D.cases[caseIdx];
+    var steps = c.steps;
+    stepIdx = Math.max(0, Math.min(steps.length - 1, stepIdx));
+    Array.prototype.forEach.call(tabsEl.children, function (b, i) {
+      b.className = i === caseIdx ? "active" : "";
+    });
+    document.getElementById("query").textContent = c.query;
+    slider.max = steps.length - 1;
+    slider.value = stepIdx;
+    document.getElementById("stepLabel").textContent = "step " + (stepIdx + 1) + " / " + steps.length;
+    var s = steps[stepIdx];
+    var totalRollouts = steps.filter(function (x) { return x.type === "rollout"; }).length;
+    var html;
+    if (s.type === "rollout") html = renderRollout(s, totalRollouts);
+    else if (s.type === "terminal") html = renderTerminal(s);
+    else html = renderFinal(s);
+    document.getElementById("stepPanel").innerHTML = html;
+  }
+  function goto(i) { stepIdx = i; render(); }
+  document.getElementById("btnPrev").addEventListener("click", function () { goto(stepIdx - 1); });
+  document.getElementById("btnNext").addEventListener("click", function () { goto(stepIdx + 1); });
+  slider.addEventListener("input", function () { goto(parseInt(slider.value, 10)); });
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "ArrowLeft") { goto(stepIdx - 1); e.preventDefault(); }
+    else if (e.key === "ArrowRight") { goto(stepIdx + 1); e.preventDefault(); }
+  });
+  render();
+})();
+</script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -1,19 +1,381 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>ToolTree: Efficient LLM Agent Tool Planning via Dual-Feedback Monte Carlo Tree Search and Bidirectional Pruning</title>
+<meta name="description" content="ToolTree plans LLM agent tool use via dual-feedback Monte Carlo tree search with bidirectional pruning — state-of-the-art across 4 benchmarks with an average gain of ~10% over existing methods.">
+<link rel="icon" href="data:,">
+<link rel="stylesheet" href="static/style.css">
+<script>document.documentElement.classList.add('js');</script>
+</head>
+<body>
+<!-- ================= Sticky section nav (shown after scrolling past the hero) ================= -->
+<nav class="topnav" id="topnav" aria-label="Page sections">
+  <div class="topnav-inner">
+    <a class="topnav-brand" href="#top">ToolTree</a>
+    <div class="topnav-links">
+      <a href="#overview">Overview</a>
+      <a href="#efficiency">Efficiency</a>
+      <a href="#method">Method</a>
+      <a href="#case-study">Case Study</a>
+      <a href="#results">Results</a>
+      <a href="#ablation">Ablation</a>
+      <a href="demo.html">Demo</a>
+      <a href="#bibtex">BibTeX</a>
+    </div>
+  </div>
+</nav>
+<!-- ================= Hero ================= -->
+<header class="hero" id="top">
+  <div class="container">
+    <h1><span class="hero-name">ToolTree</span>: Efficient LLM Agent Tool Planning via Dual-Feedback Monte Carlo Tree Search and Bidirectional Pruning</h1>
+    <p class="authors">
+      Shuo Yang, Caren Han, Yihao Ding, Shuhe Wang, Eduard Hovy
+    </p>
+    <p class="affiliation">The University of Melbourne &#183; The University of Western Australia</p>
+    <p class="venue"><span class="venue-chip">ICLR 2026</span></p>
+    <nav class="button-row" aria-label="Paper links">
+      <a class="btn" href="https://openreview.net/forum?id=Ef5O9gNNLE" target="_blank" rel="noopener"><svg class="btn-ico" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Paper</a>
+      <a class="btn" href="https://openreview.net/pdf?id=Ef5O9gNNLE" target="_blank" rel="noopener"><svg class="btn-ico" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>PDF</a>
+      <a class="btn" href="https://github.com/SYang2000/ICLR_2026_ToolTree" target="_blank" rel="noopener"><svg class="btn-ico" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>Code</a>
+      <a class="btn" href="demo.html"><svg class="btn-ico" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" stroke="none"><polygon points="7 4 20 12 7 20 7 4"/></svg>Demo</a>
+      <a class="btn btn-ghost" href="#bibtex"><svg class="btn-ico" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>BibTeX</a>
+    </nav>
+  </div>
+</header>
+<main>
+<!-- ================= Metric callouts ================= -->
+<section class="metrics">
+  <div class="container">
+    <div class="metric-grid reveal stagger">
+      <div class="metric-card">
+        <div class="metric-value">~10%</div>
+        <div class="metric-label">Average gain over existing methods</div>
+        <div class="metric-sub">Across both closed-set and open-set tool planning scenarios</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-value">SOTA</div>
+        <div class="metric-label">State-of-the-art across all 4 benchmarks</div>
+        <div class="metric-sub">GTA &#183; m&amp;m &#183; ToolBench &#183; RestBench</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-value">#1</div>
+        <div class="metric-label">Highest efficiency (performance gain per second)</div>
+        <div class="metric-sub">Compared with all baselines across step limits</div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- ================= Overview ================= -->
+<section id="overview">
+  <div class="container">
+    <h2>Overview</h2>
+    <div class="abstract-card reveal">
+      <p class="abstract-text">
+          <strong>ToolTree</strong> is a novel Monte Carlo tree search-inspired planning paradigm for
+          LLM agent tool planning. It explores possible tool usage trajectories using a
+          <strong>dual-stage LLM evaluation</strong> and <strong>bidirectional pruning</strong> mechanism
+          that enables the agent to make informed, adaptive decisions over extended tool-use sequences
+          while pruning less promising branches before and after the tool execution.
+      </p>
+    </div>
+  </div>
+</section>
+<!-- ================= Efficiency (Figure 3) ================= -->
+<section class="fig3-band section-alt" id="efficiency" aria-label="Progressive efficiency analysis">
+  <div class="container">
+    <h2>Efficiency</h2>
+    <figure class="paper-figure reveal">
+      <img src="static/paper/efficiency.png" alt="Three line charts across step limits comparing ReAct, Best-first, ToT, LATS, and ToolTree: performance versus step limit, running time versus step limit, and efficiency (performance gain per second) versus step limit — ToolTree sits highest on the performance and efficiency panels at every step limit.">
+      <figcaption><span class="fig-tag">Figure 3:</span> Progressive efficiency analysis across step limits.
+        ToolTree achieves the highest efficiency (performance gain per second) compared with all baselines.</figcaption>
+    </figure>
+  </div>
+</section>
+<!-- ================= Method ================= -->
+<section id="method">
+  <div class="container">
+    <h2>Method</h2>
+    <figure class="paper-figure reveal">
+      <img src="static/paper/architecture.png" alt="ToolTree pipeline: an input query enters a repeated loop over the tool tree — selection, pre-evaluation of a candidate tool against a threshold before execution, expansion, execution, post-evaluation of the observed output, and backward-propagation — after which the answer predictor produces the final answer.">
+      <figcaption>Architecture overview of ToolTree. An input query is processed sequentially via iterative
+        dual evaluation-guided Monte Carlo Tree Search, including selection, pre-evaluation, expansion,
+        execution, post-evaluation and backward-propagation.</figcaption>
+    </figure>
+    <div class="mech-grid mech-grid-4 reveal stagger">
+      <div class="mech-card">
+        <span class="mech-num">1</span>
+        <h3>Pre-Evaluation</h3>
+        <p>
+          A fast predictive signal that estimates the utility of a tool <em>before</em> execution,
+          filtering schema- or slot-incompatible calls before expansion.
+        </p>
+      </div>
+      <div class="mech-card">
+        <span class="mech-num">2</span>
+        <h3>Post-Evaluation</h3>
+        <p>
+          Assesses the actual contribution of a tool <em>after</em> execution based on observed
+          outcomes, pruning unproductive branches using real feedback.
+        </p>
+      </div>
+      <div class="mech-card">
+        <span class="mech-num">3</span>
+        <h3>Bidirectional Pruning</h3>
+        <p>
+          Combines pre- and post-evaluation to eliminate unpromising branches, concentrating
+          computational budget on promising tool chains.
+        </p>
+      </div>
+      <div class="mech-card">
+        <span class="mech-num">4</span>
+        <h3>Answer Predictor</h3>
+        <p>
+          Incorporates the tool trajectories with the highest reward found by the MCTS to produce
+          the final prediction.
+        </p>
+      </div>
+    </div>
+    <figure class="paper-figure reveal">
+      <img src="static/paper/comparison.png" alt="Concept comparison on a street photo asking how many wheels are in total: greedy-based planning commits to a single tool chain and answers incorrectly; search-based planning explores more tool branches but still returns a wrong count; ToolTree prunes branches before (pre-pruning) and after (post-pruning) execution and answers correctly.">
+      <figcaption>Comparison of ToolTree with greedy search and search-based tool planning. ToolTree chooses
+        the optimal tool trajectory and answers correctly with bidirectional pruning.</figcaption>
+    </figure>
+  </div>
+</section>
+<!-- ================= Case study ================= -->
+<section id="case-study" class="section-alt">
+  <div class="container">
+    <h2>Case Study</h2>
+    <span class="band-label">Qualitative case studies from the paper</span>
+    <div class="case-figure reveal">
+      <img src="static/paper/case_study.png" alt="Iterative inferencing on a road-sign query asking for the distance in miles: early iterations read the kilometre figure off the sign and return it unchanged for a low post-evaluation reward; later iterations add retrieval and unit-conversion tools, the reward rises, and the final iteration answers in miles.">
+    </div>
+    <p class="case-text reveal">
+      The query asks how many <em>miles</em> the journey is, while the road sign in the image gives the
+      distance in kilometres. In early iterations the agent simply reads the kilometre figure off the
+      sign and returns it unchanged, earning a low post-evaluation reward. Across later iterations the
+      search brings in retrieval and unit-conversion tools, the post-evaluation reward rises, and the
+      final trajectory converts the distance and answers in miles.
+    </p>
+    <figure class="paper-figure reveal">
+      <div class="figure-stack">
+        <img src="static/paper/case_study_medical.png" alt="Case study (a): a radiology image question about lung cancer risk — greedy search relies on generic image captioning and heuristic search on shallow heuristics, both missing the finding, while the MCTS-planned trajectory orchestrates domain-specific imaging tools and detects the risk.">
+        <img src="static/paper/case_study_reasoning.png" alt="Case study (b): a multi-hop knowledge reasoning question about the building seen behind an amusement area — greedy search and heuristic search answer from broad scene cues and the most prominent text, while the MCTS-planned trajectory chains recognition and search tools to identify the building correctly.">
+      </div>
+      <figcaption>Two qualitative case studies showcasing ToolTree&#8217;s iterative tool orchestration on
+        (a) a radiology image question and (b) a multi-hop knowledge reasoning task.</figcaption>
+    </figure>
+  </div>
+</section>
+<!-- ================= Results ================= -->
+<section id="results">
+  <div class="container">
+    <h2>Results</h2>
+    <p>
+      ToolTree achieves state-of-the-art performance across 4 benchmarks spanning both closed-set and
+      open-set tool planning scenarios, with an average gain of ~10% over existing methods.
+    </p>
+    <div class="table-wrap reveal">
+      <table class="results">
+        <thead>
+          <tr><th>Benchmark</th><th>Setting</th><th>Tasks &amp; Tools</th><th>Official source</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>GTA</td><td>Closed-set</td><td>229 real-world tasks, 14 executable tools</td><td><a href="https://github.com/open-compass/GTA" target="_blank" rel="noopener">open-compass/GTA</a> &#183; <a href="https://huggingface.co/datasets/Jize1/GTA" target="_blank" rel="noopener">HF dataset</a></td></tr>
+          <tr><td>m&amp;m</td><td>Closed-set</td><td>882 human-verified multi-step multimodal tasks, 33 tools</td><td><a href="https://github.com/RAIVNLab/mnms" target="_blank" rel="noopener">RAIVNLab/mnms</a> &#183; <a href="https://huggingface.co/datasets/zixianma/mnms" target="_blank" rel="noopener">HF dataset</a></td></tr>
+          <tr><td>ToolBench</td><td>Open-set</td><td>16,464 real-world REST APIs (RapidAPI)</td><td><a href="https://github.com/OpenBMB/ToolBench" target="_blank" rel="noopener">OpenBMB/ToolBench</a></td></tr>
+          <tr><td>RestBench</td><td>Open-set</td><td>TMDB &amp; Spotify REST scenarios</td><td><a href="https://github.com/Yifan-Song793/RestGPT" target="_blank" rel="noopener">Yifan-Song793/RestGPT</a></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <p class="table-note reveal">
+      This repository ships no benchmark data; each benchmark is downloaded from its official source.
+    </p>
+  </div>
+</section>
+<!-- ================= Ablation ================= -->
+<section id="ablation" class="section-alt">
+  <div class="container">
+    <h2>Pruning Ablation</h2>
+    <div class="ablation-block reveal">
+      <figure class="paper-figure figure-medium">
+        <img src="static/paper/ablation_pruning.png" alt="Two box plots comparing ToolTree against variants without pre-pruning, without post-pruning, and without both: the number of rollouts and the number of expanded nodes are lowest for full ToolTree and grow as pruning stages are disabled.">
+      </figure>
+      <p class="takeaway">Disabling pre-pruning, post-pruning, or both consistently increases the number of
+        rollouts and expanded nodes, confirming that bidirectional pruning concentrates the computational
+        budget on promising tool chains.</p>
+    </div>
+  </div>
+</section>
+<!-- ================= BibTeX ================= -->
+<section id="bibtex">
+  <div class="container">
+    <h2>BibTeX</h2>
+    <div class="bibtex-box reveal">
+      <button class="copy-btn" id="copy-btn" type="button">Copy</button>
+      <pre id="bibtex-text">@inproceedings{yang2026tooltree,
+title={ToolTree: Efficient {LLM} Tool Planning via Dual-Feedback Monte Carlo Tree Search and Bidirectional Pruning},
+author={Shuo Yang and Caren Han and Yihao Ding and Shuhe Wang and Eduard Hovy},
+booktitle={The Fourteenth International Conference on Learning Representations},
+year={2026},
+url={https://openreview.net/forum?id=Ef5O9gNNLE}
+}</pre>
+    </div>
+  </div>
+</section>
+</main>
+<footer>
+  <div class="container">
+    &#169; 2026 the authors &#183; The University of Melbourne &#183; The University of Western Australia &#183; Code released under the MIT License.
+  </div>
+</footer>
+<script>
+/* Sticky section nav: slides in once the hero has scrolled out of view. */
+(function () {
+  var hero = document.getElementById('top');
+  var nav = document.getElementById('topnav');
+  if (!hero || !nav || !('IntersectionObserver' in window)) return;
+  var io = new IntersectionObserver(function (entries) {
+    nav.classList.toggle('visible', !entries[0].isIntersecting);
+  }, { rootMargin: '-56px 0px 0px 0px' });
+  io.observe(hero);
+})();
+/* Scroll-reveal: fade/lift sections in as they enter the viewport.
+   Elements are only hidden when <html> carries the .js class (added in <head>),
+   so content stays visible with JS disabled; reduced-motion is handled in CSS. */
+(function () {
+  var els = document.querySelectorAll('.reveal');
+  var i;
+  if (!('IntersectionObserver' in window)) {
+    for (i = 0; i < els.length; i++) els[i].classList.add('revealed');
+    return;
+  }
+  var io = new IntersectionObserver(function (entries) {
+    entries.forEach(function (en) {
+      if (en.isIntersecting) {
+        en.target.classList.add('revealed');
+        io.unobserve(en.target);
+      }
+    });
+  }, { threshold: 0.08, rootMargin: '0px 0px -8% 0px' });
+  for (i = 0; i < els.length; i++) io.observe(els[i]);
+})();
+/* Lightbox: click (or Enter/Space) on a paper figure opens it enlarged; ESC / click closes. */
+(function () {
+  var imgs = document.querySelectorAll('figure.paper-figure img, .case-figure img');
+  if (!imgs.length) return;
+  var overlay = null, big = null, lastFocus = null;
+  function build() {
+    overlay = document.createElement('div');
+    overlay.className = 'lightbox';
+    overlay.setAttribute('role', 'dialog');
+    overlay.setAttribute('aria-modal', 'true');
+    overlay.setAttribute('aria-label', 'Enlarged figure');
+    big = document.createElement('img');
+    var closeBtn = document.createElement('button');
+    closeBtn.className = 'lightbox-close';
+    closeBtn.type = 'button';
+    closeBtn.setAttribute('aria-label', 'Close enlarged figure');
+    closeBtn.innerHTML = '&#215;';
+    overlay.appendChild(big);
+    overlay.appendChild(closeBtn);
+    overlay.addEventListener('click', close);
+    document.body.appendChild(overlay);
+  }
+  function open(img) {
+    if (!overlay) build();
+    lastFocus = img;
+    big.src = img.currentSrc || img.src;
+    big.alt = img.alt || '';
+    overlay.classList.add('open');
+    document.body.classList.add('no-scroll');
+    overlay.querySelector('.lightbox-close').focus();
+  }
+  function close() {
+    if (!overlay || !overlay.classList.contains('open')) return;
+    overlay.classList.remove('open');
+    document.body.classList.remove('no-scroll');
+    if (lastFocus && lastFocus.focus) lastFocus.focus();
+  }
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' || e.key === 'Esc') close();
+  });
+  Array.prototype.forEach.call(imgs, function (img) {
+    img.setAttribute('tabindex', '0');
+    img.setAttribute('role', 'button');
+    img.addEventListener('click', function () { open(img); });
+    img.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
+        e.preventDefault();
+        open(img);
+      }
+    });
+  });
+})();
+/* BibTeX copy button. */
+(function () {
+  var btn = document.getElementById('copy-btn');
+  var pre = document.getElementById('bibtex-text');
+  if (!btn || !pre) return;
+  function flash(ok) {
+    btn.textContent = ok ? 'Copied!' : 'Copy failed — select the text manually';
+    setTimeout(function () { btn.textContent = 'Copy'; }, 2000);
+  }
+  function fallbackCopy(text) {
+    var ta = document.createElement('textarea');
+    ta.value = text;
+    ta.setAttribute('readonly', '');
+    ta.style.position = 'fixed';
+    ta.style.left = '-9999px';
+    document.body.appendChild(ta);
+    ta.select();
+    var ok = false;
+    try { ok = document.execCommand('copy'); } catch (e) { ok = false; }
+    document.body.removeChild(ta);
+    flash(ok);
+  }
+  btn.addEventListener('click', function () {
+    var text = pre.textContent;
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text).then(
+        function () { flash(true); },
+        function () { fallbackCopy(text); }
+      );
+    } else {
+      fallbackCopy(text);
+    }
+  });
+})();
+</script>
+</body>
 </html>

static/demo_data.js ADDED Viewed

	@@ -0,0 +1 @@

+ window.DEMO_DATA = {"meta":{"benchmark":"GTA","tool_execution":"real","seed":42,"tau_pre":0.3,"tau_post":0.4,"exploration_constant":1.4,"max_rollouts":40,"trunc_chars":300},"cases":[{"title":"Case 1 \u2014 Wholesale catalogue: total price (OCR \u2192 Calculator)","query":"I want to buy all the items in the picture, how much should it cost?","steps":[{"type":"rollout","candidates":[{"tool":"OCR","r_pre":0.8,"status":"kept","args":{"image":"image/image_407.jpg"}},{"tool":"Calculator","r_pre":0.3,"status":"kept","args":{"expression":"sum(float(item) for item in ocr_results.split())"}}],"backprop":[{"node":"OCR","reward":0.7,"Q":0.7,"N":1},{"node":"root","reward":0.7,"Q":0.7,"N":1}],"selected":{"action":"root","Q":0.0,"N":0,"r_pre":0.0},"executed":{"tool":"OCR","args":{"image":"image/image_407.jpg"},"output":"(204, 66, 398, 98) C 0 MPANY\n(691, 42, 1186, 120) VARIOUS ITEMS\n(1193, 32, 1231, 177) L\n(242, 92, 400, 146) LOGO\n(913, 137, 1184, 170) Summer 2020 Collection\n(364, 256, 574, 280) DUMMY PRODUCT #1\n(954, 256, 1166, 280) DUMMY PRODUCT #2\n(362, 286, 480, 310) ID : 202256\n(954, 286, 1070, 310) ID: 202250","error":false,"truncated":true},"r_post":0.7,"tau_post":0.4,"post_pruned":false,"rollout":1,"best_q":0.7},{"type":"rollout","candidates":[],"backprop":[{"node":"Calculator","reward":0.0,"Q":0.0,"N":1},{"node":"root","reward":0.0,"Q":0.35,"N":2}],"selected":{"action":"Calculator","Q":0.0,"N":0,"r_pre":0.3},"realize":"Calculator","executed":{"tool":"Calculator","args":{"expression":"sum(float(item) for item in ocr_results.split())"},"output":"invocation_failed: Sympify of expression 'could not parse 'sum(float(item) for item in ocr_results.split())'' failed, because of exception being raised:\nSyntaxError: cannot assign to function call (<string>, line 1)","error":true,"truncated":false},"r_post":0.0,"tau_post":0.4,"post_pruned":true,"rollout":2,"best_q":0.7},{"type":"rollout","candidates":[{"tool":"OCR","r_pre":null,"status":"dedup","args":{"image":"image/image_407.jpg"}},{"tool":"Calculator","r_pre":0.9,"status":"kept","args":{"expression":"45.99 + 32.99 + 869.99 + 29.99 + 125.99 + 4.99 + 12.99 + 22.99"}}],"backprop":[{"node":"Calculator","reward":0.9,"Q":0.9,"N":1},{"node":"OCR","reward":0.9,"Q":0.8,"N":2},{"node":"root","reward":0.9,"Q":0.533333,"N":3}],"selected":{"action":"OCR","Q":0.7,"N":1,"r_pre":0.8},"executed":{"tool":"Calculator","args":{"expression":"45.99 + 32.99 + 869.99 + 29.99 + 125.99 + 4.99 + 12.99 + 22.99"},"output":"1145.92","error":false,"truncated":false},"r_post":0.9,"tau_post":0.4,"post_pruned":false,"rollout":3,"best_q":0.8},{"type":"terminal","event":"search_exhausted","rollouts_used":3,"exhausted":[{"node":"Calculator","depth":2},{"node":"OCR","depth":1},{"node":"root","depth":0}],"dedups":[{"tool":"Calculator","args":{"expression":"45.99 + 32.99 + 869.99 + 29.99 + 125.99 + 4.99 + 12.99 + 22.99"}},{"tool":"OCR","args":{"image":"image/image_407.jpg"}}]},{"type":"final","plan":[{"tool":"OCR","args":{"image":"image/image_407.jpg"}},{"tool":"Calculator","args":{"expression":"45.99 + 32.99 + 869.99 + 29.99 + 125.99 + 4.99 + 12.99 + 22.99"}}],"answer":"The total cost for all the items in the picture is $1,145.92.","reward":0.9,"rollouts_used":3}]},{"title":"Case 2 \u2014 Counting sheep: equal numbers? (CountGivenObject \u00d7 2)","query":"Are there equal numbers of small and big sheep?","steps":[{"type":"rollout","candidates":[{"tool":"Calculator","r_pre":0.0,"status":"pre_pruned","args":{"expression":"len([1, 2]) == len([3, 4])"}},{"tool":"TextToBbox","r_pre":0.8,"status":"kept","args":{"image":"image/image_260.jpg","text":"sheep","top1":false}},{"tool":"CountGivenObject","r_pre":0.5,"status":"kept","args":{"image":"image/image_260.jpg","text":"small sheep"}}],"backprop":[{"node":"TextToBbox","reward":0.0,"Q":0.0,"N":1},{"node":"root","reward":0.0,"Q":0.0,"N":1}],"selected":{"action":"root","Q":0.0,"N":0,"r_pre":0.0},"executed":{"tool":"TextToBbox","args":{"image":"image/image_260.jpg","text":"sheep","top1":false},"output":"invocation_failed: No real backend for tool: TextToBbox","error":true,"truncated":false},"r_post":0.0,"tau_post":0.4,"post_pruned":true,"rollout":1,"best_q":0.0},{"type":"rollout","candidates":[],"backprop":[{"node":"CountGivenObject","reward":0.5,"Q":0.5,"N":1},{"node":"root","reward":0.5,"Q":0.25,"N":2}],"selected":{"action":"CountGivenObject","Q":0.0,"N":0,"r_pre":0.5},"realize":"CountGivenObject","executed":{"tool":"CountGivenObject","args":{"image":"image/image_260.jpg","text":"small sheep"},"output":4,"error":false,"truncated":false},"r_post":0.5,"tau_post":0.4,"post_pruned":false,"rollout":2,"best_q":0.5},{"type":"rollout","candidates":[{"tool":"Calculator","r_pre":0.0,"status":"pre_pruned","args":{"expression":"4 == 4"}},{"tool":"CountGivenObject","r_pre":0.9,"status":"kept","args":{"image":"image/image_260.jpg","text":"big sheep"}},{"tool":"TextToBbox","r_pre":0.7,"status":"kept","args":{"image":"image/image_260.jpg","text":"big sheep"}}],"backprop":[{"node":"CountGivenObject","reward":1.0,"Q":1.0,"N":1},{"node":"CountGivenObject","reward":1.0,"Q":0.75,"N":2},{"node":"root","reward":1.0,"Q":0.5,"N":3}],"selected":{"action":"CountGivenObject","Q":0.5,"N":1,"r_pre":0.5},"executed":{"tool":"CountGivenObject","args":{"image":"image/image_260.jpg","text":"big sheep"},"output":4,"error":false,"truncated":false},"r_post":1.0,"tau_post":0.4,"post_pruned":false,"rollout":3,"best_q":0.75},{"type":"rollout","candidates":[],"backprop":[{"node":"TextToBbox","reward":0.0,"Q":0.0,"N":1},{"node":"CountGivenObject","reward":0.0,"Q":0.5,"N":3},{"node":"root","reward":0.0,"Q":0.375,"N":4}],"selected":{"action":"TextToBbox","Q":0.0,"N":0,"r_pre":0.7},"realize":"TextToBbox","executed":{"tool":"TextToBbox","args":{"image":"image/image_260.jpg","text":"big sheep"},"output":"invocation_failed: No real backend for tool: TextToBbox","error":true,"truncated":false},"r_post":0.0,"tau_post":0.4,"post_pruned":true,"rollout":4,"best_q":0.5},{"type":"rollout","candidates":[{"tool":"Calculator","r_pre":0.0,"status":"pre_pruned","args":{"expression":"4 == 4"}},{"tool":"CountGivenObject","r_pre":0.2,"status":"pre_pruned","args":{"image":"image/image_260.jpg","text":"small sheep","bbox":"(0, 0, 100, 100)"}},{"tool":"TextToBbox","r_pre":0.3,"status":"kept","args":{"image":"image/image_260.jpg","text":"small sheep and big sheep","top1":false}}],"backprop":[{"node":"TextToBbox","reward":0.0,"Q":0.0,"N":1},{"node":"CountGivenObject","reward":0.0,"Q":0.5,"N":2},{"node":"CountGivenObject","reward":0.0,"Q":0.375,"N":4},{"node":"root","reward":0.0,"Q":0.3,"N":5}],"selected":{"action":"CountGivenObject","Q":1.0,"N":1,"r_pre":0.9},"executed":{"tool":"TextToBbox","args":{"image":"image/image_260.jpg","text":"small sheep and big sheep","top1":false},"output":"invocation_failed: No real backend for tool: TextToBbox","error":true,"truncated":false},"r_post":0.0,"tau_post":0.4,"post_pruned":true,"rollout":5,"best_q":0.375},{"type":"terminal","event":"search_exhausted","rollouts_used":5,"exhausted":[{"node":"CountGivenObject","depth":2},{"node":"CountGivenObject","depth":1},{"node":"root","depth":0}],"dedups":[]},{"type":"final","plan":[{"tool":"CountGivenObject","args":{"image":"image/image_260.jpg","text":"small sheep"}},{"tool":"CountGivenObject","args":{"image":"image/image_260.jpg","text":"big sheep"}}],"answer":"Based on the tool outputs, there are equal numbers of small and big sheep, with 4 small sheep and 4 big sheep.","reward":0.5,"rollouts_used":5}]}]};

static/paper/ablation_pruning.png ADDED Viewed

Git LFS Details

SHA256: 60a564a65fbc718511079a7ab2a045b0be93a3b533886aec6f50702a56480926
Pointer size: 131 Bytes
Size of remote file: 728 kB

static/paper/architecture.png ADDED Viewed

Git LFS Details

SHA256: 3ddf1247620532c40411453e682b2fefac82f3ef444dda678cf47e4cbced6b28
Pointer size: 131 Bytes
Size of remote file: 504 kB

static/paper/case_study.png ADDED Viewed

Git LFS Details

SHA256: da095a0b5c1938255ea83db072242bc836af96a6b2b47a6c5c788876c56d3250
Pointer size: 131 Bytes
Size of remote file: 228 kB

static/paper/case_study_medical.png ADDED Viewed

Git LFS Details

SHA256: e46a006f830bc5cecb0e58210a0f01ca35c0dfdcdef4a1704d5bf655e9079c5f
Pointer size: 131 Bytes
Size of remote file: 397 kB

static/paper/case_study_reasoning.png ADDED Viewed

Git LFS Details

SHA256: e2db1fbf1e0a4d2ecc165416c0128721b80e61f2ab69403812171b7578eaa646
Pointer size: 131 Bytes
Size of remote file: 485 kB

static/paper/comparison.png ADDED Viewed

Git LFS Details

SHA256: afc7116bbea94b44f6fea348910a3af54da3b2cf3303de5be1b44b0a0be93d60
Pointer size: 131 Bytes
Size of remote file: 765 kB

static/paper/efficiency.png ADDED Viewed

Git LFS Details

SHA256: db11916216ea371900022e22cfbb52a4684dd6f35dd3aec14fb4484fa4a0a1bd
Pointer size: 131 Bytes
Size of remote file: 127 kB

static/style.css ADDED Viewed

	@@ -0,0 +1,746 @@

+/* ToolTree project page — hand-written, zero external dependencies. */
+:root {
+  --ink: #1e293b;
+  --ink-strong: #0f172a;
+  --muted: #64748b;
+  --accent: #6d28d9;
+  --accent-dark: #5b21b6;
+  --accent-soft: #ede9fe;
+  --accent-faint: #f5f3ff;
+  --border: #e2e8f0;
+  --bg-alt: #f8fafc;
+  --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.06);
+  --card-shadow-lift: 0 2px 4px rgba(15, 23, 42, 0.06), 0 10px 28px rgba(15, 23, 42, 0.12);
+  --nav-h: 52px;
+}
+* { box-sizing: border-box; }
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: calc(var(--nav-h) + 12px);
+}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-size: 17px;
+  line-height: 1.65;
+  color: var(--ink);
+  background: #ffffff;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+body.no-scroll { overflow: hidden; }
+.container {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+section { padding: 56px 0; }
+section.section-alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+h2 {
+  font-size: 1.75rem;
+  line-height: 1.25;
+  margin: 0 0 20px;
+  color: var(--ink-strong);
+  letter-spacing: -0.01em;
+  text-align: center;
+}
+h3 {
+  font-size: 1.15rem;
+  margin: 32px 0 10px;
+  color: var(--ink-strong);
+}
+p { margin: 0 0 16px; }
+a { color: var(--accent); }
+a:hover { color: var(--accent-dark); }
+/* ---------- Sticky section nav ---------- */
+.topnav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 60;
+  display: none;
+  transform: translateY(-100%);
+  background: rgba(255, 255, 255, 0.92);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--border);
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+html.js .topnav { display: block; }
+.topnav.visible {
+  transform: translateY(0);
+  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
+}
+.topnav-inner {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 24px;
+  height: var(--nav-h);
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+.topnav-brand {
+  font-weight: 800;
+  font-size: 1.02rem;
+  letter-spacing: -0.01em;
+  color: var(--accent-dark);
+  text-decoration: none;
+  flex: none;
+}
+.topnav-brand:hover { color: var(--accent); }
+.topnav-links {
+  display: flex;
+  gap: 2px;
+  margin-left: auto;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.topnav-links::-webkit-scrollbar { display: none; }
+.topnav-links a {
+  color: var(--muted);
+  text-decoration: none;
+  font-size: 0.88rem;
+  font-weight: 500;
+  padding: 6px 10px;
+  border-radius: 8px;
+  white-space: nowrap;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+.topnav-links a:hover {
+  color: var(--accent-dark);
+  background: var(--accent-faint);
+}
+/* ---------- Hero ---------- */
+.hero {
+  position: relative;
+  overflow: hidden;
+  padding: 84px 0 60px;
+  text-align: center;
+  background:
+    radial-gradient(1100px 480px at 50% -140px, var(--accent-faint), rgba(255, 255, 255, 0) 72%),
+    radial-gradient(700px 340px at 88% -160px, #eef2ff, rgba(255, 255, 255, 0) 70%),
+    #ffffff;
+}
+/* Faint dot-grid, fading out below the fold — pure CSS, no assets. */
+.hero::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(to right, rgba(15, 23, 42, 0.045) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
+  background-size: 34px 34px;
+  -webkit-mask-image: radial-gradient(820px 460px at 50% -60px, rgba(0, 0, 0, 0.85), transparent 78%);
+  mask-image: radial-gradient(820px 460px at 50% -60px, rgba(0, 0, 0, 0.85), transparent 78%);
+  pointer-events: none;
+}
+.hero .container { position: relative; }
+.hero h1 {
+  font-size: clamp(1.7rem, 4vw, 2.6rem);
+  line-height: 1.18;
+  letter-spacing: -0.022em;
+  font-weight: 800;
+  margin: 0 auto 28px;
+  max-width: 880px;
+  color: var(--ink-strong);
+  text-wrap: balance;
+}
+.hero h1 .hero-name { color: var(--accent); }
+@supports ((-webkit-background-clip: text) or (background-clip: text)) {
+  .hero h1 .hero-name {
+    background: linear-gradient(115deg, #7c3aed 20%, #4f46e5 80%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+.authors {
+  font-size: 1.08rem;
+  font-weight: 500;
+  margin: 0 auto 6px;
+  max-width: 820px;
+  color: var(--ink);
+}
+.affiliation {
+  font-size: 0.97rem;
+  color: var(--muted);
+  margin-bottom: 0;
+}
+.venue { margin: 18px 0 30px; }
+.venue-chip {
+  display: inline-block;
+  font-size: 0.85rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--accent-dark);
+  background: var(--accent-soft);
+  border: 1px solid #ddd6fe;
+  border-radius: 999px;
+  padding: 5px 16px;
+}
+.button-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+}
+/* ---------- Buttons ---------- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 22px;
+  border-radius: 999px;
+  background: var(--ink-strong);
+  color: #ffffff;
+  text-decoration: none;
+  font-size: 0.96rem;
+  font-weight: 600;
+  border: 1px solid var(--ink-strong);
+  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease,
+    transform 0.18s ease, box-shadow 0.18s ease;
+}
+.btn:hover {
+  background: #334155;
+  border-color: #334155;
+  color: #ffffff;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
+}
+.btn:active { transform: translateY(0); box-shadow: none; }
+.btn:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
+.btn .btn-ico { width: 15px; height: 15px; flex: none; opacity: 0.9; }
+.btn-accent { background: var(--accent); border-color: var(--accent); }
+.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
+.btn-outline {
+  background: #ffffff;
+  color: var(--accent-dark);
+  border-color: #c4b5fd;
+}
+.btn-outline:hover {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #ffffff;
+  box-shadow: 0 6px 16px rgba(109, 40, 217, 0.25);
+}
+.btn-ghost {
+  background: rgba(255, 255, 255, 0.7);
+  color: var(--ink);
+  border-color: var(--border);
+}
+.btn-ghost:hover {
+  background: #ffffff;
+  border-color: #cbd5e1;
+  color: var(--ink-strong);
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
+}
+/* ---------- Scroll-reveal (JS adds .js to <html>; no JS = always visible) ---------- */
+html.js .reveal {
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 0.55s ease, transform 0.55s ease;
+}
+html.js .reveal.revealed {
+  opacity: 1;
+  transform: none;
+}
+/* Staggered grids: the container fades, children lift in one after another. */
+html.js .reveal.stagger { transform: none; }
+html.js .reveal.stagger > * {
+  opacity: 0;
+  transform: translateY(14px);
+  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+html.js .reveal.stagger.revealed > * { opacity: 1; transform: none; }
+html.js .reveal.stagger.revealed > :nth-child(2) {
+  transition: opacity 0.5s ease 0.12s, transform 0.5s ease 0.12s, box-shadow 0.2s ease 0s, border-color 0.2s ease 0s;
+}
+html.js .reveal.stagger.revealed > :nth-child(3) {
+  transition: opacity 0.5s ease 0.24s, transform 0.5s ease 0.24s, box-shadow 0.2s ease 0s, border-color 0.2s ease 0s;
+}
+/* ---------- Metric callout cards ---------- */
+.metrics { padding: 8px 0 48px; }
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+.metric-card {
+  background: #ffffff;
+  border: 1px solid var(--border);
+  border-top: 3px solid var(--accent);
+  border-radius: 14px;
+  padding: 26px 22px 22px;
+  text-align: center;
+  box-shadow: var(--card-shadow);
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.metric-card:hover { box-shadow: var(--card-shadow-lift); border-color: #cbd5e1; border-top-color: var(--accent); }
+.metric-value {
+  font-size: 2.6rem;
+  font-weight: 700;
+  line-height: 1.1;
+  color: var(--accent);
+  letter-spacing: -0.02em;
+}
+.metric-label {
+  margin-top: 10px;
+  font-size: 0.96rem;
+  color: var(--ink);
+}
+.metric-sub {
+  margin-top: 6px;
+  font-size: 0.86rem;
+  color: var(--muted);
+}
+/* ---------- Showcase (the architecture figure inside Method) ---------- */
+/* Breaks out of the 960px column, centered on the viewport — width/margin only,
+   no transform (transform belongs to the .reveal animation). */
+figure.paper-figure.figure-hero {
+  width: min(1160px, calc(100vw - 48px));
+  margin-left: calc((100% - min(1160px, calc(100vw - 48px))) / 2);
+}
+figure.paper-figure.figure-hero img {
+  max-width: 100%;
+  padding: 14px;
+  border-radius: 18px;
+  border-color: #e2e8f0;
+  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.06);
+}
+figure.paper-figure.figure-hero img:hover {
+  box-shadow: 0 14px 40px rgba(109, 40, 217, 0.16), 0 3px 10px rgba(15, 23, 42, 0.08);
+  border-color: #c4b5fd;
+}
+figure.paper-figure.figure-hero figcaption { max-width: 900px; }
+/* ---------- Figure 3 band (between abstract and method) ---------- */
+.fig3-band { padding: 40px 0; }
+.fig3-band figure.paper-figure { margin-top: 0; }
+/* ---------- Figure 1 beside the abstract (unused fallback) ---------- */
+.abstract-grid {
+  display: grid;
+  grid-template-columns: 1.15fr 0.62fr;
+  gap: 30px;
+  align-items: center;
+}
+.abstract-grid .abstract-card { max-width: none; margin: 0; }
+figure.paper-figure.figure-side { margin: 0; }
+figure.paper-figure.figure-side img { max-width: 100%; padding: 8px; }
+figure.paper-figure.figure-side figcaption { font-size: 0.8rem; margin-top: 10px; }
+@media (max-width: 880px) {
+  .abstract-grid { grid-template-columns: 1fr; }
+  figure.paper-figure.figure-side img { max-width: 420px; }
+}
+/* ---------- Abstract ---------- */
+.abstract-card {
+  max-width: 800px;
+  margin: 0 auto;
+  background: var(--bg-alt, #f8fafc);
+  border: 1px solid var(--border);
+  border-left: 4px solid #6d28d9;
+  border-radius: 14px;
+  padding: 26px 32px;
+}
+.abstract-text {
+  margin: 0;
+  text-align: justify;
+  hyphens: auto;
+  line-height: 1.72;
+}
+@media (max-width: 640px) {
+  .abstract-card { padding: 18px 18px; }
+  .abstract-text { text-align: left; }
+}
+/* ---------- Paper figures ---------- */
+figure.paper-figure {
+  margin: 26px auto 10px;
+  text-align: center;
+}
+figure.paper-figure img {
+  width: 100%;
+  max-width: 960px;
+  height: auto;
+  display: block;
+  margin: 0 auto;
+  background: #ffffff;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 10px;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+figure.paper-figure img:hover { box-shadow: var(--card-shadow-lift); border-color: #cbd5e1; }
+html.js figure.paper-figure img,
+html.js .case-figure img { cursor: zoom-in; }
+figure.paper-figure.figure-narrow img { max-width: 560px; }
+figure.paper-figure.figure-medium img { max-width: 680px; }
+figure.paper-figure .figure-stack img + img { margin-top: 14px; }
+figure.paper-figure figcaption {
+  font-size: 0.88rem;
+  color: var(--muted);
+  text-align: center;
+  max-width: 820px;
+  margin: 12px auto 0;
+}
+figure.paper-figure figcaption .fig-tag {
+  font-weight: 600;
+  color: var(--ink);
+}
+.mech-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-top: 34px;
+}
+.mech-card {
+  background: #ffffff;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 22px;
+  box-shadow: var(--card-shadow);
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.mech-card:hover { box-shadow: var(--card-shadow-lift); border-color: #cbd5e1; }
+.mech-card h3 {
+  margin: 0 0 10px;
+  font-size: 1.04rem;
+  color: var(--accent-dark);
+}
+.mech-card p { margin: 0; font-size: 0.94rem; color: var(--ink); }
+.mech-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  margin-bottom: 12px;
+  border-radius: 50%;
+  background: var(--accent-soft);
+  color: var(--accent-dark);
+  font-weight: 700;
+  font-size: 0.9rem;
+}
+.gradient-free {
+  margin: 30px auto 0;
+  max-width: 820px;
+  text-align: center;
+  font-size: 0.98rem;
+  background: var(--accent-faint);
+  border: 1px solid var(--accent-soft);
+  border-radius: 10px;
+  padding: 12px 18px;
+  color: var(--ink);
+}
+/* ---------- Tables ---------- */
+.table-wrap { overflow-x: auto; margin: 20px 0 6px; }
+table.results {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.94rem;
+  background: #ffffff;
+}
+table.results caption {
+  caption-side: top;
+  text-align: left;
+  font-weight: 600;
+  font-size: 1.02rem;
+  color: var(--ink-strong);
+  padding: 0 0 10px;
+}
+table.results th, table.results td {
+  padding: 8px 12px;
+  text-align: right;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+table.results th:first-child, table.results td:first-child { text-align: left; }
+table.results thead th {
+  border-bottom: 2px solid var(--ink-strong);
+  color: var(--ink-strong);
+  font-weight: 600;
+}
+table.results tbody tr { transition: background-color 0.15s ease; }
+table.results tbody tr:hover td { background: var(--bg-alt); }
+table.results tr.ours td {
+  background: var(--accent-soft);
+  font-weight: 700;
+  color: var(--accent-dark);
+}
+table.results tr.ours:hover td { background: var(--accent-soft); }
+table.results tr.ours td:first-child { border-left: 3px solid var(--accent); }
+.table-note {
+  font-size: 0.86rem;
+  color: var(--muted);
+  margin: 8px 0 28px;
+}
+.takeaway {
+  font-size: 0.95rem;
+  margin: 10px 0 30px;
+  padding: 10px 16px;
+  background: var(--accent-faint);
+  border-left: 3px solid var(--accent);
+  border-radius: 0 8px 8px 0;
+}
+.ablation-block { margin-bottom: 8px; }
+.block-title {
+  text-align: center;
+  margin-top: 44px;
+  font-size: 1.25rem;
+}
+.block-intro {
+  max-width: 820px;
+  margin: 0 auto 4px;
+}
+/* ---------- Efficiency & transfer ---------- */
+.info-card {
+  background: #ffffff;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 24px;
+  box-shadow: var(--card-shadow);
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.info-card:hover { box-shadow: var(--card-shadow-lift); border-color: #cbd5e1; }
+.info-card h3 { margin: 0 0 10px; font-size: 1.08rem; }
+.info-card p { margin: 0 0 10px; font-size: 0.96rem; }
+.info-card p:last-child { margin-bottom: 0; }
+.info-card-solo { max-width: 820px; margin: 18px auto 34px; }
+/* ---------- Case study band ---------- */
+.band-label {
+  display: inline-block;
+  font-size: 0.84rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #92400e;
+  background: #fef3c7;
+  border: 1px solid #fde68a;
+  border-radius: 999px;
+  padding: 5px 14px;
+  margin-bottom: 18px;
+}
+.case-figure { margin: 18px 0; text-align: center; }
+.case-figure img {
+  width: 100%;
+  max-width: 860px;
+  height: auto;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: #ffffff;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.case-figure img:hover { box-shadow: var(--card-shadow-lift); border-color: #cbd5e1; }
+.case-text { max-width: 820px; margin: 0 auto 22px; }
+.case-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 18px;
+}
+.case-actions .aux-link { font-size: 0.95rem; }
+#case-study { text-align: center; }
+#case-study .case-text { text-align: left; }
+/* ---------- Lightbox (created by JS on demand) ---------- */
+.lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30px;
+  background: rgba(15, 23, 42, 0.84);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  cursor: zoom-out;
+}
+.lightbox.open { opacity: 1; visibility: visible; }
+.lightbox img {
+  max-width: min(1200px, 100%);
+  max-height: 92vh;
+  width: auto;
+  height: auto;
+  background: #ffffff;
+  border-radius: 10px;
+  padding: 8px;
+  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
+}
+.lightbox-close {
+  position: absolute;
+  top: 14px;
+  right: 18px;
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  border-radius: 50%;
+  background: rgba(15, 23, 42, 0.5);
+  color: #f1f5f9;
+  font-size: 1.35rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+.lightbox-close:hover { background: rgba(51, 65, 85, 0.85); border-color: rgba(255, 255, 255, 0.6); }
+.lightbox-close:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
+/* ---------- BibTeX ---------- */
+.bibtex-box { position: relative; max-width: 860px; margin: 0 auto; }
+.bibtex-box pre {
+  background: #0f172a;
+  color: #e2e8f0;
+  border-radius: 14px;
+  padding: 24px 26px;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.86rem;
+  line-height: 1.55;
+  margin: 0;
+}
+.copy-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: #334155;
+  color: #e2e8f0;
+  border: 1px solid #475569;
+  border-radius: 8px;
+  padding: 6px 14px;
+  font-size: 0.84rem;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.copy-btn:hover { background: #475569; }
+/* ---------- Footer ---------- */
+footer {
+  border-top: 1px solid var(--border);
+  padding: 30px 0 38px;
+  text-align: center;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+/* ---------- Responsive ---------- */
+@media (max-width: 760px) {
+  section { padding: 42px 0; }
+  .hero { padding: 60px 0 46px; }
+  .metric-grid, .mech-grid { grid-template-columns: 1fr; }
+  .metric-value { font-size: 2.2rem; }
+  body { font-size: 16px; }
+  .topnav-inner { gap: 12px; padding: 0 16px; }
+}
+/* ---------- Reduced motion: no animation, everything visible ---------- */
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  html.js .reveal,
+  html.js .reveal.stagger > * {
+    opacity: 1;
+    transform: none;
+  }
+  *, *::before, *::after {
+    transition: none !important;
+    animation: none !important;
+  }
+  .btn:hover { transform: none; }
+}
+/* 4-card mechanism grid: 2x2 on desktop, single column on narrow screens.
+   (Kept after the responsive block above so the narrow-screen override below
+   must also live here — same specificity, source order decides.) */
+.mech-grid.mech-grid-4 { grid-template-columns: repeat(2, 1fr); }
+@media (max-width: 760px) {
+  .mech-grid.mech-grid-4 { grid-template-columns: 1fr; }
+}