Leaderboard: one tabbed section; score-against-cost chart coloured by provider

assets/paper.css

@@ -114,14 +114,17 @@ section.dark .section-desc { color: rgba(242,238,230,.6); }
 .seg { display: inline-flex; background: var(--bg-alt); border-radius: 999px; padding: 3px; border: 1px solid var(--border); }
 .seg button { border: 0; background: transparent; padding: .35rem .9rem; border-radius: 999px; font: 600 .84rem Inter, sans-serif; color: var(--text-muted); cursor: pointer; }
 .seg button.on { background: #fff; color: var(--text-h); box-shadow: var(--shadow-sm); }
+.lb-tabs { display: flex; justify-content: center; margin: 0 0 1.2rem; position: sticky; top: calc(var(--nav-h) + 10px); z-index: 5; }
+.seg-lg { background: rgba(255,255,255,.85); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); } .seg-lg button { padding: .5rem 1.2rem; font-size: .92rem; }
+svg.pareto .band { fill: rgba(26,31,54,.035); } svg.pareto .frontier { stroke: var(--text-h); stroke-width: 1.6; stroke-opacity: .7; }
 .note { font-size: .82rem; color: var(--text-muted); margin-top: .8rem; line-height: 1.6; }
 .tip { position: fixed; z-index: 2000; pointer-events: none; background: #1a1f36; color: #fff; font-size: .8rem; line-height: 1.45; padding: .5rem .7rem; border-radius: 8px;
   box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 300px; opacity: 0; transform: translate(-50%, calc(-100% - 12px)); transition: opacity .12s; }
 .tip.on { opacity: 1; } .tip b { display: block; font-size: .84rem; }
 svg.ch [data-tip] { cursor: default; }
 svg.pareto .pt circle { transition: r .12s; } svg.pareto .pt:hover circle { r: 8; }
-svg.pareto .frontier { fill: none; stroke: var(--primary); stroke-width: 2.2; }
-svg.pareto .band { fill: rgba(102,126,234,.07); }
+svg.pareto .frontier { fill: none; }
+
 .frontier-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.2rem; }
 .frontier-list h4 { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .3rem; }
 .frontier-list div.r { display: flex; justify-content: space-between; font-size: .86rem; padding: .3rem 0; border-bottom: 1px solid var(--line-soft); }

assets/paper.js

@@ -19,7 +19,9 @@
     seg.querySelectorAll("button").forEach(function (b) {
       b.addEventListener("click", function () {
         seg.querySelectorAll("button").forEach(function (x) { x.classList.toggle("on", x === b); });
-        chart.querySelectorAll("[data-view]").forEach(function (g) { g.style.display = g.getAttribute("data-view") === b.getAttribute("data-view") ? "" : "none"; });
+        chart.querySelectorAll("[data-view]").forEach(function (g) {
+          if (seg.contains(g)) return;   // the tab buttons carry data-view too
+          g.style.display = g.getAttribute("data-view") === b.getAttribute("data-view") ? "" : "none"; });
       });
     });
   });

cases.html

@@ -5,7 +5,7 @@
 <link rel="icon" href="data:image/svg+xml,<svg viewBox='0 0 32 32' aria-hidden='true'><defs><linearGradient id='gi' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2392400e'/><stop offset='1' stop-color='%23d97706'/></linearGradient></defs><rect x='1' y='1' width='30' height='30' rx='8' fill='url(%23gi)'/><path d='M16 6.5 25 11.5v9L16 25.5 7 20.5v-9z' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/><path d='M7 11.5 16 16.5 25 11.5M16 16.5v9' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/></svg>">
 <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=DM+Sans:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap">
-<link rel="stylesheet" href="assets/paper.css?v=a4037058">
+<link rel="stylesheet" href="assets/paper.css?v=5427505a">
 <style>
 :root{--c4s-a:#5a67d8;--c4s-b:#d97706;--c4s-hot:#dc4a2d;--c4s-ok:#0f9f6e;--c4s-g1:#8b93a7;--c4s-g2:#aab1c2;--c4s-g3:#cdd2de;--c4s-seq:#5a67d8;--c4s-unit:#e3e7f0}
 svg.ch{width:100%;height:auto;display:block;font-family:Inter,system-ui,sans-serif;overflow:visible}
@@ -83,7 +83,7 @@ evaluator scored that scene. 6 cases, 41 scenes in 3D. Pick a case, then an agen
 <footer><p>Code4Scene &nbsp;·&nbsp; UC San Diego &amp; UC Berkeley &nbsp;·&nbsp; <a href="https://github.com/SimWorld-AI/Code4Scene" target="_blank" rel="noopener">GitHub</a> &nbsp;·&nbsp;
 <a href="https://simworld.org/" target="_blank" rel="noopener">SimWorld Home</a></p>
 <p style="margin-top:.5rem;font-size:.75rem;color:rgba(255,255,255,.25)">Part of the SimWorld project.</p></footer>
-<script src="assets/paper.js?v=a4037058"></script><script src="data/site.js?v=0b09af46"></script><script type="module">import * as THREE from "three";
+<script src="assets/paper.js?v=5427505a"></script><script src="data/site.js?v=0b09af46"></script><script type="module">import * as THREE from "three";
 import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 import { MeshoptDecoder } from "three/addons/libs/meshopt_decoder.module.js";