PageSourceSearch

https://beaverbench.github.io/

html beaverbench.github.io collected 2026-10-03 08:41:52 UTC 36,988 bytes, 1,147 lines download raw bytes

1<!doctype html>
2<html>
3  <head>
4    <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 4-5
4
5    <script async src="https://www.googletagmanager.com/gtag/js?id=
5G-J696KH33YJ
vendor: 16 bytes, lines 5-6
5"></script>
6    
6<script>
7      
vendor: 146 bytes, lines 7-11
7window.dataLayer = window.dataLayer || [];
8      function gtag(){dataLayer.push(arguments);}
9      gtag('js', new Date());
10
11      gtag('config', '
11G-J696KH33YJ
vendor: 8 bytes, lines 11-12
11');
12    
12</script>
12
13
14    <meta charset="utf-8" />
15    <!-- Meta tags for social media banners, these should be filled in appropriatly as they are your "business card" -->
16    <!-- Replace the content tag with appropriate information -->
17    <!-- <meta name="description" content="Beaver: An Enterprise Benchmark for Text-to-SQL"> -->
18    <meta
19      property="og:title"
20      content="BEAVER: An Enterprise Benchmark for Text-to-SQL"
21    />
22    <!-- <meta property="og:description" content="SOCIAL MEDIA DESCRIPTION TAG TAG"/> -->
23    <meta property="og:url" content="https://beaverbench.github.io/" />
24    <!-- Path to banner image, should be in the path listed below. Optimal dimenssions are 1200X630-->
25    <meta property="og:image" content="static/images/beaver.png" />
26    <!-- <meta property="og:image:width" content="1200"/>
27  <meta property="og:image:height" content="630"/> -->
28
29    <meta
30      name="twitter:title"
31      content="BEAVER: An Enterprise Benchmark for Text-to-SQL"
32    />
33    <!-- <meta name="twitter:description" content="TWITTER BANNER DESCRIPTION META TAG"> -->
34    <!-- Path to banner image, should be in the path listed below. Optimal dimenssions are 1200X600-->
35    <meta name="twitter:image" content="static/images/beaver.png" />
36    <!-- <meta name="twitter:card" content="summary_large_image"> -->
37    <!-- Keywords for your paper to be indexed by-->
38    <!-- <meta name="keywords" content="KEYWORDS SHOULD BE PLACED HERE"> -->
39    <meta name="viewport" content="width=device-width, initial-scale=1" />
40
41    <title>BEAVER: An Enterprise Benchmark for Text-to-SQL</title>
42    <link rel="icon" type="image/x-icon" href="static/images/beaver.png" />
43    <link
44      href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro"
45      rel="stylesheet"
46    />
47
48    <link rel="stylesheet" href="static/css/bulma.min.css" />
49    <link rel="stylesheet" href="static/css/bulma-carousel.min.css" />
50    <link rel="stylesheet" href="static/css/bulma-slider.min.css" />
51    <link
52      rel="stylesheet"
53      href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css"
54    />
55    <link rel="stylesheet" href="static/css/index.css" />
56
57    
57<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
57
58    
58<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
58
59    
59<script defer src="static/js/fontawesome.all.min.js"></script>
59
60    
60<script src="static/js/bulma-carousel.min.js"></script>
60
61    
61<script src="static/js/bulma-slider.min.js"></script>
61
62    
62<script src="static/js/index.js"></script>
62
63    
63<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
63
64    
64<script defer src="static/js/benchmark.js?v=20260322"></script>
64
65
66    <!--imports for code highlighting and copy-->
67    <link
68      rel="stylesheet"
69      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"
70    />
71    
71<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
71
72    
72<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
72
73    
73<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
73
74
75    
75<script>
76      // for copy button
77      document.addEventListener("DOMContentLoaded", function () {
78        const clipboard = new ClipboardJS(".copy-btn");
79        clipboard.on("success", function (e) {
80          e.trigger.innerText = "Copied!";
81          setTimeout(() => (e.trigger.innerText = "Copy"), 1500);
82        });
83
84        const overviewView = document.getElementById("overview-view");
85        const leaderboardView = document.getElementById("leaderboard-view");
86        const overviewLink = document.getElementById("overview-link");
87        const leaderboardLink = document.getElementById("leaderboard-link");
88
89        function setViewFromHash() {
90          const hash = window.location.hash === "#leaderboard" ? "#leaderboard" : "#overview";
91
92          if (!window.location.hash) {
93            history.replaceState(null, "", "#overview");
94          }
95
96          const showLeaderboard = hash === "#leaderboard";
97          overviewView.classList.toggle("is-hidden", showLeaderboard);
98          leaderboardView.classList.toggle("is-hidden", !showLeaderboard);
99
100          overviewLink.classList.toggle("is-dark", !showLeaderboard);
101          overviewLink.classList.toggle("is-light", showLeaderboard);
102          leaderboardLink.classList.toggle("is-dark", showLeaderboard);
103          leaderboardLink.classList.toggle("is-light", !showLeaderboard);
104
105          window.requestAnimationFrame(function () {
106            window.dispatchEvent(new Event("resize"));
107          });
108        }
109
110        window.addEventListener("hashchange", setViewFromHash);
111        setViewFromHash();
112      });
113
114    </script>
114
115  </head>
116  <body>
117    <section class="hero">
118      <div class="hero-body" style="padding-bottom: 0.5rem;">
119        <div class="container is-max-desktop">
120          <div class="columns is-centered">
121            <div class="column has-text-centered">
122              <h1 class="title is-1 publication-title">
123                🦫 BEAVER: An Enterprise Benchmark for Text-to-SQL
124              </h1>
125              <div class="is-size-5 publication-authors">
126                <!-- Paper authors -->
127                <span class="author-block">
128                  <a href="https://peterbaile.github.io/" target="_blank">Peter Baile Chen</a><sup>1</sup>,
129                </span>
130                <span class="author-block">
131                  <a href="#" target="_blank">Devin Yang</a><sup>1</sup>,
132                </span>
133                <span class="author-block">
134                  <a href="https://weiyueli7.github.io/" target="_blank">Weiyue Li</a><sup>2</sup>,
135                </span>
136                <span class="author-block">
137                  <a href="https://fabian-wenz.github.io/" target="_blank">Fabian Wenz</a><sup>1,3</sup>,
138                </span>
139                <span class="author-block">
140                  <a href="#" target="_blank">Yi Zhang</a><sup>4</sup>,
141                </span>
142                <span class="author-block">
143                  <a href="https://people.csail.mit.edu/tatbul/" target="_blank">Nesime Tatbul</a><sup>1,5</sup>,
144                </span>
145                <span class="author-block">
146                  <a href="https://people.csail.mit.edu/michjc/" target="_blank">Michael Cafarella</a><sup>1</sup>,
147                </span>
148                <span class="author-block">
149                  <a href="https://cagataydemiralp.io/" target="_blank">Çağatay Demiralp</a><sup>1,6</sup>,
150                </span>
151                <span class="author-block">
152                  <a href="#" target="_blank">Michael Stonebraker</a><sup>1</sup>
153                </span>
154              </div>
155
156              <div class="is-size-5 publication-authors">
157                <span class="author-block">
158                  <sup>1</sup>MIT, <sup>2</sup>Harvard University,
159                  <sup>3</sup>TU Munich</span>,
160                  <sup>4</sup>Greenshoe, Inc.</span>,
161                  <sup>5</sup>Intel</span>,
162                  <sup>6</sup>AWS AI Labs
163              </div>
164
165              <div class="column has-text-centered">
166                <div class="publication-links">
167                  <span class="link-block">
168                    <a
169                      href="https://arxiv.org/abs/2409.02038"
170                      target="_blank"
171                      class="external-link button is-normal is-rounded is-dark"
172                    >
173                      <span class="icon">
174                        <i class="ai ai-arxiv"></i>
175                      </span>
176                      <span>arXiv</span>
177                    </a>
178                  </span>
179
180                  <!-- Github link -->
181                  <span class="link-block">
182                    <a
183                      href="https://huggingface.co/collections/beaverbench/beaver-dataset"
184                      target="_blank"
185                      class="external-link button is-normal is-rounded is-dark"
186                    >
187                      <span class="icon">
188                        <i class="far fa-images"></i>
189                      </span>
190                      <span>Dataset</span>
191                    </a>
192                  </span>
193
194                  <span class="link-block">
195                    <a
196                      href="https://github.com/beaverbench/beaver"
197                      target="_blank"
198                      class="external-link button is-normal is-rounded is-dark"
199                    >
200                      <span class="icon">
201                        <i class="fab fa-github"></i>
202                      </span>
203                      <span>Code</span>
204                    </a>
205                  </span>
206                </div>
207                <div class="page-nav-links">
208                  <span class="link-block">
209                    <a
210                      id="overview-link"
211                      href="#overview"
212                      class="external-link button is-normal is-dark view-nav-button"
213                    >
214                      <span class="icon">
215                        <i class="fas fa-compass"></i>
216                      </span>
217                      <span>Overview</span>
218                    </a>
219                  </span>
220                  <span class="link-block">
221                    <a
222                      id="leaderboard-link"
223                      href="#leaderboard"
224                      class="external-link button is-normal is-light view-nav-button"
225                    >
226                      <span class="icon">
227                        <i class="fas fa-list-ol"></i>
228                      </span>
229                      <span>Leaderboard</span>
230                    </a>
231                  </span>
232                </div>
233              </div>
234            </div>
235          </div>
236        </div>
237      </div>
238    </section>
239    <section class="section" style="padding-top: 0rem;">
240      <div class="container is-max-desktop">
241        <div class="columns is-size-7">
242          <div class="column is-full">
243            <div id="leaderboard-view" class="page-view is-hidden">
244              <div class="left-boxes">
245                <div class="leaderboard-header">
246                  <h2 class="title is-3 has-text-centered">Leaderboard</h2>
247                  
248                  <div class="has-text-centered" style="margin-top: -10px; margin-bottom: 15px;">
249                    <a id="toggle-instructions-btn" style="cursor: pointer; font-weight: 600; text-decoration: underline;">
250                      Submission Instructions
251                    </a>
252                  </div>
253                  
254                  <div id="submission-instructions-box" class="is-hidden" style="margin-bottom: 20px; padding: 15px; background-color: #ffffff; border: 1px solid #dbdbdb; border-radius: 6px;">
255                    <h4 class="title is-6" style="margin-bottom: 10px;">How to Submit:</h4>
256                    <p class="is-size-7">
257                      Please send an email to <span style="text-decoration: underline;">[email protected]</span>, along with your method name, a brief description of the method, and, optionally, a link to your paper or codebase. We will follow up with detailed instructions.
258                    </p>
259                  </div>
260
261                  <div class="view-toggle">
262                    <button id="table-view-btn" class="button is-small is-dark" title="Table leaderboard">
263                      <span class="icon is-small"><i class="fas fa-table"></i></span>
264                    </button>
265                    <button id="scatter-view-btn" class="button is-small is-light" title="Scatter leaderboard">
266                      <span class="icon is-small"><i class="fas fa-chart-line"></i></span>
267                    </button>
268                  </div>
269                </div>
270                <div class="leaderboard-controls">
271                  <div class="field">
272                    <label class="label is-size-7">Method</label>
273                    <div class="control">
274                      <div class="select is-small is-fullwidth">
275                        <select id="method-filter"></select>
276                      </div>
277                    </div>
278                  </div>
279                  <div class="field">
280                    <label class="label is-size-7">Model</label>
281                    <div class="control">
282                      <div class="select is-small is-fullwidth">
283                        <select id="model-filter"></select>
284                      </div>
285                    </div>
286                  </div>
287                  <div class="field">
288                    <label class="label is-size-7">Search</label>
289                    <div class="control">
290                      <input id="search-filter" class="input is-small" type="text" placeholder="Find method/model" />
291                    </div>
292                  </div>
293                </div>
294                <div id="leaderboard-table-view">
295                  <div class="table-container">
296                    <table class="table is-hoverable is-fullwidth is-size-7">
297                      <thead>
298                        <tr>
299                        <th class="sortable" data-sort-key="rank">Rank</th>
300                        <th>Submission Date</th>
301                        <th class="sortable" data-sort-key="method">Method</th>
302                        <th class="sortable" data-sort-key="model">Model</th>
303                        <th class="sortable" data-sort-key="score">Execution Accuracy</th>
304                        </tr>
305                      </thead>
306                      <tbody id="leaderboard-body">
307                        <!-- Leaderboard data will be inserted here -->
308                      </tbody>
309                    </table>
310                  </div>
311                </div>
312                <div id="leaderboard-scatter-view" class="is-hidden">
313                  <div class="chart-box">
314                    <canvas id="leaderboard-scatter-chart"></canvas>
315                  </div>
316                </div>
317              </div>
318              <div class="left-boxes">
319                <div class="subtask-header">
320                  <h2 class="title is-5">Subtask Metrics Across Settings</h2>
321                  <div class="subtask-view-toggle">
322                    <button id="subtask-view-method-btn" class="button is-small is-dark" title="By method">
323                      <span class="icon is-small"><i class="fas fa-user"></i></span>
324                    </button>
325                    <button id="subtask-view-setting-btn" class="button is-small is-light" title="By setting">
326                      <span class="icon is-small"><i class="fas fa-layer-group"></i></span>
327                    </button>
328                  </div>
329                </div>
330                <div class="subtask-controls">
331                  <div id="subtask-setting-control" class="select is-small">
332                    <select id="subtask-setting"></select>
333                  </div>
334                  <div id="subtask-method-control" class="select is-small is-hidden">
335                    <select id="subtask-method"></select>
336                  </div>
337                </div>
338                <div id="subtask-legend" class="subtask-legend"></div>
339                <div class="chart-box">
340                  <canvas id="subtask-chart"></canvas>
341                </div>
342              </div>
343              <div class="left-boxes">
344                <h2 class="title is-4">Citation</h2>
345                <p>
346                  If you find our data, code, or the paper helpful, please cite the
347                  paper:
348                </p>
349                <div class="code-container">
350                  <pre><code id="codeBlockLeaderboard">@article{chen2024beaver,
351  title={BEAVER: an enterprise benchmark for text-to-sql},
352  author={Chen, Peter Baile and Yang, Devin and Li, Weiyue and Wenz, Fabian and Zhang, Yi and Tatbul, Nesime and Cafarella, Michael and Demiralp, {\c{C}}a{\u{g}}atay and Stonebraker, Michael},
353  journal={arXiv preprint arXiv:2409.02038},
354  year={2024}
355}</code></pre>
356                  <button class="copy-btn" data-clipboard-target="#codeBlockLeaderboard">
357                    Copy
358                  </button>
359                </div>
360              </div>
361            </div>
362            <div id="overview-view" class="page-view">
363              <div class="left-boxes">
364                <!-- <h2 class="title is-4">Overview</h2> -->
365                <p>
366                  BEAVER is a large-scale enterprise text-to-SQL dataset containing 9128 queries spanning 812 tables across 19 diverse domains. Of these, 7978 queries are publicly released, while the remaining portion is held out as a private test set. Queries and databases were collected from <i>private</i> organizations.
367                  <br />
368                  To facilitate fine-grained evaluation and analysis, we provide
369                  <ul style="list-style-type: disc; padding-left:20px">
370                    <li>annotations for five subtasks: multi-table retrieval, join key detection, column mapping, domain knowledge extraction, and query decomposition</li>
371                    <li>three categories of queries: <span style="text-decoration: underline;">complex queries</span> without domain knowledge, <span style="text-decoration: underline;">domain-specific queries</span> with minimal complexity, and <span style="text-decoration: underline;">domain-specific complex queries</span></li>
372                  </ul>
373                </p>
374              </div>
375              <div class="left-boxes">
376                <div class="example-header">
377                  <div>
378                    <h2 class="title is-4">Example data</h2>
379                    <p class="example-subtitle">Representative BEAVER tasks with question, SQL, and subtask annotations.</p>
380                  </div>
381                  <div class="example-toolbar">
382                    <button id="example-prev" class="example-nav" type="button" aria-label="Previous example">
383                      <i class="fas fa-arrow-left"></i>
384                    </button>
385                    <div class="example-select-wrap">
386                      <label class="label is-size-7" for="example-select">Task id</label>
387                      <div class="select is-small is-fullwidth">
388                        <select id="example-select"></select>
389                      </div>
390                    </div>
391                    <button id="example-next" class="example-nav" type="button" aria-label="Next example">
392                      <i class="fas fa-arrow-right"></i>
393                    </button>
394                  </div>
395                </div>
396                <div class="example-stage">
397                  <div class="example-meta">
398                    <span class="example-badge" id="example-db-id">db</span>
399                    <span class="example-badge" id="example-source-file">source</span>
400                  </div>
401                  <div class="example-grid">
402                    <div class="example-panel example-panel--question">
403                      <h3 class="example-label">Question</h3>
404                      <p id="example-question" class="example-question"></p>
405                    </div>
406                    <div class="example-panel example-panel--sql">
407                      <h3 class="example-label">SQL</h3>
408                      <pre class="example-code"><code id="example-sql"></code></pre>
409                    </div>
410                    <div class="example-panel">
411                      <h3 class="example-label">Multi-Table retrieval</h3>
412                      <h5 class="example-sublabel">Tables used in SQL</h5>
413                      <div id="example-gold-tables" class="example-chip-list"></div>
414                    </div>
415                    <div class="example-panel">
416                      <h3 class="example-label">Join Keys</h3>
417                      <h5 class="example-sublabel">Connections among used tables</h5>
418                      <div id="example-join-keys" class="example-chip-list"></div>
419                    </div>
420                    <div class="example-panel">
421                      <h3 class="example-label">Column Mapping</h3>
422                      <h5 class="example-sublabel">Mapping from question phrases to table columns(s)</h5>
423                      <div id="example-mapping" class="example-mapping"></div>
424                    </div>
425                    <div class="example-panel">
426                      <h3 class="example-label">Domain knowledge</h3>
427                      <h5 class="example-sublabel">Domain-specific predictates used in SQL</h5>
428                      <ul id="example-evidence" class="example-list"></ul>
429                    </div>
430                    <div class="example-panel example-panel--evidence">
431                      <h3 class="example-label">Subquery Decomposition</h3>
432                      <h5 class="example-sublabel">Decomposition of SQL into simpler sub-queries</h5>
433                      <div id="example-subqueries" class="example-subqueries"></div>
434                    </div>
435                  </div>
436                </div>
437              </div>
438              <!-- <div class="left-boxes">
439                <h2 class="title is-4">Usage</h2>
440                <p>
441                  We have created a unified MySQL version for our dataset. A free
442                  MySQL installation can be found
443                  <a href="https://dev.mysql.com/downloads/mysql/">here</a>. After
444                  the installation, import the MySQL dump files from the google
445                  drive to your local MySQL databases using
446                </p>
447                <pre><code>mysql -u root -p < `xxx.sql`</code></pre>
448                <p>
449                  To execute a SQL statement, you can either log in to the MySQL
450                  interface or you can do it via
451                  <a href="https://pypi.org/project/mysql-connector-python/"
452                    >mysql-connector-python</a
453                  >.
454                </p>
455                <br />
456                <p>
457                  If you want to use the Oracle version of
458                  <code>DW</code> queries, you can download the free oracle
459                  database and import the CSVs.
460                </p>
461              </div> -->
462              <!-- <div class="left-boxes">
463                <h2 class="title is-4">Changelog</h2>
464                <div class="container" id="changelog-body"></div>
465              </div> -->
466              <div class="left-boxes">
467                <h2 class="title is-4">Citation</h2>
468                <p>
469                  If you find our data, code, or the paper helpful, please cite the
470                  paper:
471                </p>
472                <div class="code-container">
473                  <pre><code id="codeBlockOverview">article{chen2024beaver,
474  title={BEAVER: an enterprise benchmark for text-to-sql},
475  author={Chen, Peter Baile and Yang, Devin and Li, Weiyue and Wenz, Fabian and Zhang, Yi and Tatbul, Nesime and Cafarella, Michael and Demiralp, {\c{C}}a{\u{g}}atay and Stonebraker, Michael},
476  journal={arXiv preprint arXiv:2409.02038},
477  year={2024}
478}</code></pre>
479                  <button class="copy-btn" data-clipboard-target="#codeBlockOverview">
480                    Copy
481                  </button>
482                </div>
483              </div>
484            </div>
485          </div>
486        </div>
487      </div>
488    </section>
489  
490    
490<script>
491      document.getElementById('toggle-instructions-btn').addEventListener('click', function(e) {
492        e.preventDefault();
493        const instructionsBox = document.getElementById('submission-instructions-box');
494        
495        // Toggle Bulma's 'is-hidden' class
496        if (instructionsBox.classList.contains('is-hidden')) {
497          instructionsBox.classList.remove('is-hidden');
498        } else {
499          instructionsBox.classList.add('is-hidden');
500        }
501      });
502    </script>
502
503
504  </body>
505  <style>
506    .code-container {
507      position: relative;
508      display: block;
509      max-width: 100%;
510    }
511
512    pre {
513      padding: 15px;
514      border-radius: 5px;
515      overflow-x: auto;
516      max-width: 100%;
517      white-space: pre;
518    }
519
520    .copy-btn {
521      position: absolute;
522      top: 6px;
523      right: 6px;
524      padding: 5px 10px;
525      background: #effaf3;
526      color: black;
527      border: none;
528      cursor: pointer;
529      font-size: 11px;
530      border-radius: 5px;
531      opacity: 0.8;
532      border: 0.1px solid black;
533    }
534
535    .copy-btn:hover {
536      background: #48c774;
537      color: white;
538    }
539
540    .left-boxes {
541      font-size: 110%;
542      padding: 20px;
543      background-color: #f5f5f5;
544      border-radius: 10px;
545      margin: 10px 0;
546    }
547
548    .page-nav-links {
549      display: flex;
550      justify-content: center;
551      gap: 12px;
552      flex-wrap: wrap;
553      margin-top: 3rem;
554    }
555
556    .publication-links {
557      display: flex;
558      justify-content: center;
559      align-items: center;
560      gap: 12px;
561      flex-wrap: wrap;
562    }
563
564    .view-nav-button {
565      border-radius: 6px;
566      min-width: 150px;
567    }
568
569    .view-nav-button.is-dark {
570      background-color: #3273dc;
571      border-color: #3273dc;
572      color: #ffffff;
573    }
574
575    .view-nav-button.is-dark:hover {
576      background-color: #2366d1;
577      border-color: #2366d1;
578      color: #ffffff;
579    }
580
581    .view-nav-button.is-light {
582      background-color: #f5f7fb;
583      border-color: #cfd8e6;
584      color: #2f3a4a;
585    }
586
587    .leaderboard-controls {
588      display: flex;
589      gap: 10px;
590      flex-wrap: wrap;
591      margin-bottom: 10px;
592    }
593
594    .leaderboard-controls .field {
595      flex: 1;
596      min-width: 140px;
597      margin-bottom: 0;
598    }
599
600    .leaderboard-header {
601      position: relative;
602      margin-bottom: 8px;
603    }
604
605    .view-toggle {
606      position: absolute;
607      right: 0;
608      top: 0;
609      display: flex;
610      gap: 6px;
611    }
612
613    .subtask-header {
614      display: flex;
615      align-items: center;
616      justify-content: space-between;
617      gap: 10px;
618      margin-bottom: 8px;
619    }
620
621    .subtask-view-toggle {
622      display: flex;
623      gap: 6px;
624    }
625
626    .subtask-controls {
627      display: flex;
628      gap: 10px;
629      flex-wrap: wrap;
630      margin-bottom: 10px;
631    }
632
633    .subtask-legend {
634      display: flex;
635      flex-wrap: wrap;
636      justify-content: center;
637      gap: 10px;
638      margin-bottom: 12px;
639    }
640
641    .subtask-legend--stacked {
642      flex-direction: column;
643      align-items: center;
644    }
645
646    .subtask-legend-item {
647      display: flex;
648      align-items: flex-start;
649      gap: 10px;
650      min-width: 220px;
651      max-width: 100%;
652      padding: 10px 12px;
653      border: 1px solid #d9dde5;
654      border-radius: 12px;
655      background: rgba(255, 255, 255, 0.82);
656      cursor: pointer;
657      transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
658    }
659
660    .subtask-legend-item:hover {
661      border-color: #bcc6d4;
662      transform: translateY(-1px);
663    }
664
665    .subtask-legend-item.is-muted {
666      opacity: 0.5;
667    }
668
669    .subtask-legend--stacked .subtask-legend-item {
670      width: min(100%, 720px);
671    }
672
673    .subtask-legend-swatch {
674      width: 12px;
675      height: 12px;
676      border-radius: 999px;
677      flex: 0 0 12px;
678      margin-top: 4px;
679    }
680
681    .subtask-legend-text {
682      min-width: 0;
683    }
684
685    .subtask-legend-title {
686      font-weight: 600;
687      color: #363636;
688      line-height: 1.35;
689      overflow-wrap: anywhere;
690    }
691
692    .subtask-legend-inline-description {
693      font-weight: 400;
694      color: #5f6773;
695    }
696
697    .sortable {
698      cursor: pointer;
699      user-select: none;
700    }
701
702    #leaderboard-table-view .table {
703      width: 100%;
704      table-layout: auto;
705    }
706
707    #leaderboard-table-view .table th,
708    #leaderboard-table-view .table td {
709      vertical-align: middle;
710    }
711
712    .rank-cell {
713      text-align: center;
714      min-width: 92px;
715    }
716
717    .rank-number {
718      font-size: inherit;
719      line-height: inherit;
720      font-weight: 700;
721      color: #2c323b;
722      margin-bottom: 0;
723    }
724
725    .date-pill {
726      display: inline-block;
727      background: #6f7783;
728      color: #f1f4f8;
729      border-radius: 8px;
730      padding: 4px 10px;
731      font-size: inherit;
732      font-weight: 600;
733    }
734
735    .model-cell {
736      display: inline-flex;
737      align-items: center;
738      gap: 8px;
739    }
740
741    .model-logo {
742      width: 16px;
743      height: 16px;
744      object-fit: contain;
745      border-radius: 3px;
746      background: #fff;
747    }
748
749    .chart-box {
750      position: relative;
751      min-height: 280px;
752      width: 100%;
753    }
754
755    .example-header {
756      display: flex;
757      align-items: end;
758      justify-content: space-between;
759      gap: 16px;
760      margin-bottom: 14px;
761    }
762
763    .example-subtitle {
764      color: #5f6773;
765      margin-top: 6px;
766    }
767
768    .example-toolbar {
769      display: grid;
770      grid-template-columns: 44px minmax(180px, 1fr) 44px;
771      gap: 10px;
772      align-items: end;
773      min-width: min(100%, 420px);
774      flex-shrink: 0;
775    }
776
777    .example-select-wrap {
778      min-width: 0;
779    }
780
781    .example-select-wrap .label {
782      margin-bottom: 6px;
783    }
784
785    .example-nav {
786      width: 44px;
787      height: 44px;
788      border: 1px solid #ced5df;
789      background: #ffffff;
790      color: #394150;
791      border-radius: 12px;
792      cursor: pointer;
793      padding: 0;
794      transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
795    }
796
797    .example-nav:hover {
798      background: #f5f7fa;
799      border-color: #b7c0cc;
800      transform: translateY(-1px);
801    }
802
803    .example-stage {
804      background: linear-gradient(180deg, #fafafa 0%, #f0f2f5 100%);
805      border: 1px solid #d9dde5;
806      border-radius: 16px;
807      padding: 18px;
808      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
809      min-width: 0;
810    }
811
812    .example-meta {
813      display: flex;
814      gap: 8px;
815      flex-wrap: wrap;
816      margin-bottom: 14px;
817      min-width: 0;
818    }
819
820    .example-badge {
821      background: #485fc7;
822      border: 1px solid #485fc7;
823      border-radius: 999px;
824      padding: 4px 10px;
825      font-weight: 600;
826      color: #ffffff;
827      max-width: 100%;
828      overflow-wrap: anywhere;
829    }
830
831    .example-grid {
832      display: grid;
833      grid-template-columns: 1.05fr 0.95fr;
834      gap: 14px;
835      align-items: start;
836      min-width: 0;
837    }
838
839    .example-panel {
840      background: rgba(255, 255, 255, 0.78);
841      border: 1px solid #d9dde5;
842      border-radius: 14px;
843      padding: 14px;
844      min-height: 100%;
845      backdrop-filter: blur(6px);
846      min-width: 0;
847      overflow: hidden;
848    }
849
850    .example-panel--evidence {
851      grid-column: 1 / -1;
852    }
853
854    .example-label {
855      color: #363636;
856      font-size: 0.92rem;
857      text-transform: uppercase;
858      letter-spacing: 0.04em;
859      margin-bottom: 10px;
860    }
861
862    .example-sublabel {
863      color: #363636;
864      font-size: 0.82rem;
865      /* text-transform: uppercase; */
866      font-style: italic;
867      letter-spacing: 0.04em;
868      margin-bottom: 10px;
869    }
870
871    .example-question {
872      font-size: inherit;
873      line-height: 1.6;
874      margin: 0;
875      color: #4a4a4a;
876      height: 220px;
877      overflow: auto;
878      padding-right: 6px;
879      max-width: 100%;
880      overflow-wrap: anywhere;
881    }
882
883    .example-code {
884      background: #ffffff;
885      color: #363636;
886      border: 1px solid #d9d9d9;
887      font-size: inherit;
888      white-space: pre-wrap;
889      word-break: break-word;
890      height: 220px;
891      overflow: auto;
892      margin: 0;
893      max-width: 100%;
894    }
895
896    .example-chip-list {
897      display: flex;
898      flex-wrap: wrap;
899      gap: 8px;
900      height: 140px;
901      overflow: auto;
902      align-content: flex-start;
903      padding-right: 4px;
904      max-width: 100%;
905    }
906
907    .example-chip {
908      background: #eef3ff;
909      border: 1px solid #d7def5;
910      color: #3b4a73;
911      border-radius: 999px;
912      padding: 5px 10px;
913      font-size: inherit;
914      line-height: 1.35;
915    }
916
917    .example-list {
918      margin: 0;
919      padding-left: 18px;
920      color: #4a4a4a;
921      font-size: inherit;
922      height: 90px;
923      overflow: auto;
924      padding-right: 6px;
925      max-width: 100%;
926      overflow-wrap: anywhere;
927      list-style-type: disc;
928    }
929
930    .example-list--ordered {
931      list-style-type: decimal;
932    }
933
934    .example-list li + li {
935      margin-top: 6px;
936    }
937
938    .example-mapping {
939      display: flex;
940      flex-direction: column;
941      gap: 10px;
942      height: 140px;
943      overflow: auto;
944      padding-right: 4px;
945      color: #4a4a4a;
946      max-width: 100%;
947    }
948
949    .example-mapping-item {
950      border-bottom: 1px solid #e5e8ef;
951      padding-bottom: 8px;
952    }
953
954    .example-mapping-item:last-child {
955      border-bottom: none;
956      padding-bottom: 0;
957    }
958
959    .example-mapping-key {
960      font-weight: 600;
961      margin-bottom: 4px;
962      overflow-wrap: anywhere;
963    }
964
965    .example-mapping-values {
966      display: flex;
967      flex-wrap: wrap;
968      gap: 6px;
969    }
970
971    .example-mapping-value {
972      background: #eef3ff;
973      border: 1px solid #d7def5;
974      border-radius: 8px;
975      color: #3b4a73;
976      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
977      font-size: 0.92em;
978      line-height: 1.35;
979      padding: 4px 8px;
980      overflow-wrap: anywhere;
981    }
982
983    .example-subqueries {
984      display: flex;
985      flex-direction: column;
986      gap: 10px;
987      height: 300px;
988      overflow: auto;
989      padding-right: 4px;
990      color: #4a4a4a;
991      max-width: 100%;
992    }
993
994    .example-subquery-item {
995      border-bottom: 1px solid #e5e8ef;
996      padding-bottom: 10px;
997    }
998
999    .example-subquery-item:last-child {
1000      border-bottom: none;
1001      padding-bottom: 0;
1002    }
1003
1004    .example-subquery-key {
1005      font-weight: 600;
1006      margin-bottom: 4px;
1007      overflow-wrap: anywhere;
1008    }
1009
1010    .example-subquery-value {
1011      margin: 0 0 8px;
1012      overflow-wrap: anywhere;
1013    }
1014
1015    .example-subquery-sql {
1016      background: #ffffff;
1017      border: 1px solid #d9d9d9;
1018      border-radius: 8px;
1019      color: #363636;
1020      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
1021      font-size: 0.92em;
1022      line-height: 1.45;
1023      margin: 0;
1024      padding: 10px;
1025      white-space: pre-wrap;
1026      word-break: break-word;
1027    }
1028
1029    @media screen and (max-width: 768px) {
1030      .example-header {
1031        flex-direction: column;
1032        align-items: stretch;
1033        gap: 12px;
1034      }
1035
1036      .example-toolbar {
1037        grid-template-columns: 38px 1fr 38px;
1038        grid-template-areas:
1039          "prev . next"
1040          "select select select";
1041        gap: 10px;
1042        min-width: 0;
1043      }
1044
1045      .example-select-wrap {
1046        grid-area: select;
1047        min-width: 0;
1048      }
1049
1050      .leaderboard-header {
1051        display: flex;
1052        flex-direction: column;
1053        align-items: center;
1054        gap: 8px;
1055      }
1056
1057      .view-toggle {
1058        position: static;
1059        align-self: flex-end;
1060      }
1061
1062      #leaderboard-table-view .table {
1063        font-size: 0.68rem;
1064      }
1065
1066      #leaderboard-table-view .table th,
1067      #leaderboard-table-view .table td {
1068        padding: 0.45rem 0.3rem;
1069      }
1070
1071      .rank-cell {
1072        min-width: 56px;
1073      }
1074
1075      .date-pill {
1076        padding: 2px 6px;
1077        font-size: 0.68rem;
1078      }
1079
1080      .model-cell {
1081        gap: 4px;
1082      }
1083
1084      .model-logo {
1085        width: 12px;
1086        height: 12px;
1087      }
1088
1089      .example-nav {
1090        width: 38px;
1091        height: 38px;
1092        border-radius: 10px;
1093      }
1094
1095      .subtask-legend-item {
1096        min-width: 100%;
1097      }
1098
1099      #example-prev {
1100        grid-area: prev;
1101      }
1102
1103      #example-next {
1104        grid-area: next;
1105      }
1106
1107      .example-grid {
1108        grid-template-columns: 1fr;
1109        gap: 12px;
1110      }
1111
1112      .example-stage {
1113        padding: 14px;
1114        overflow: hidden;
1115      }
1116
1117      .example-panel {
1118        padding: 12px;
1119        width: 100%;
1120      }
1121
1122      .example-question {
1123        height: 150px;
1124      }
1125
1126      .example-code {
1127        height: 170px;
1128      }
1129
1130      .example-chip-list,
1131      .example-list,
1132      .example-mapping,
1133      .example-subqueries {
1134        height: 72px;
1135      }
1136
1137      .example-question,
1138      .example-code,
1139      .example-chip-list,
1140      .example-list,
1141      .example-mapping,
1142      .example-subqueries {
1143        font-size: inherit;
1144      }
1145    }
1146  </style>
1147</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.