index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Spreadsheet-RL</title>
  <style>
    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-height: 100%;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: transparent;
      color: #e2e8f0;
    }

    body {
      padding: 14px;
    }

    .card {
      width: min(100%, 1040px);
      margin: 0 auto;
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 12px;
      background:
        radial-gradient(ellipse 60% 50% at 0% 0%, rgba(37, 99, 235, 0.18) 0%, transparent 100%),
        radial-gradient(ellipse 50% 45% at 100% 100%, rgba(16, 185, 129, 0.12) 0%, transparent 100%),
        #0f1623;
      overflow: hidden;
    }

    .hero {
      padding: clamp(20px, 3.5vw, 36px) clamp(20px, 3.5vw, 40px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .eyebrow {
      margin: 0 0 10px;
      color: #60a5fa;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      font-size: clamp(2rem, 6vw, 4rem);
      line-height: 0.95;
      font-weight: 800;
      color: #f0f6ff;
      letter-spacing: -0.02em;
    }

    .subtitle {
      max-width: 820px;
      margin: 13px 0 0;
      color: #94a3b8;
      font-size: clamp(0.88rem, 1.8vw, 1.05rem);
      line-height: 1.5;
      font-weight: 400;
    }

    .links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 20px;
    }

    .links a {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 5px 14px;
      border-radius: 6px;
      font-size: 0.83rem;
      font-weight: 600;
      text-decoration: none;
    }

    .links a:first-child {
      color: #fff;
      background: #2563eb;
      border: 1px solid #3b82f6;
    }

    .links a:not(:first-child) {
      color: #cbd5e1;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.11);
    }

    .body {
      display: grid;
      grid-template-columns: 1.3fr 0.7fr;
      gap: 14px;
      padding: clamp(14px, 2.5vw, 26px);
    }

    .section {
      padding: 18px 20px;
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.025);
    }

    h2 {
      margin: 0 0 13px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: #7a93ae;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }

    li {
      font-size: 0.87rem;
      color: #94a3b8;
      line-height: 1.45;
    }

    li strong {
      color: #e2e8f0;
      font-weight: 600;
    }

    .note {
      margin-top: 16px;
      font-size: 0.76rem;
      color: #718da5;
      line-height: 1.5;
    }

    .metrics {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      align-content: start;
    }

    .metric {
      padding: 15px 16px;
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.025);
    }

    .metric strong {
      display: block;
      font-size: clamp(1.55rem, 3.5vw, 2.2rem);
      font-weight: 800;
      line-height: 1;
      color: #34d399;
      letter-spacing: -0.02em;
    }

    .metric span {
      display: block;
      margin-top: 5px;
      font-size: 0.76rem;
      color: #7a93ae;
      line-height: 1.35;
      font-weight: 500;
    }

    @media (max-width: 680px) {
      body { padding: 10px; }
      .body { grid-template-columns: 1fr; }
      .metrics { grid-template-columns: repeat(2, 1fr); }
    }
  </style>
</head>
<body>
  <main class="card">
    <section class="hero">
      <p class="eyebrow">UIUC &amp; Meta Research</p>
      <h1>Spreadsheet-RL</h1>
      <p class="subtitle">Advancing Large Language Model Agents on Realistic Spreadsheet Tasks via Reinforcement Learning.</p>
      <nav class="links" aria-label="Spreadsheet-RL links">
        <a href="https://spreadsheet-rl.github.io/" target="_blank" rel="noreferrer">Project page</a>
        <a href="https://arxiv.org/abs/2605.22642" target="_blank" rel="noreferrer">Paper</a>
        <a href="https://github.com/Spreadsheet-RL/Spreadsheet-RL" target="_blank" rel="noreferrer">Code</a>
        <a href="https://huggingface.co/datasets/Spreadsheet-RL/Spreadsheet-RL" target="_blank" rel="noreferrer">Dataset</a>
        <a href="https://huggingface.co/papers/2605.22642" target="_blank" rel="noreferrer">HF Daily</a>
      </nav>
    </section>

    <section class="body">
      <article class="section">
        <h2>What We Release</h2>
        <ul>
          <li><strong>Spreadsheet Data Agent</strong> &mdash; scalable construction of paired initial and oracle final workbooks.</li>
          <li><strong>Spreadsheet Gym</strong> &mdash; multi-turn Excel interaction with spreadsheet-native tools and sandboxed code execution.</li>
          <li><strong>Verifier &amp; Reward API</strong> &mdash; Excel recalculation and outcome comparison for RL training.</li>
          <li><strong>Domain-Spreadsheet</strong> &mdash; finance, supply chain, HR, sales, and real estate evaluation tasks.</li>
        </ul>
        <p class="note">Data and code releases are maintained by the corresponding authors at UIUC and are not affiliated with Meta.</p>
      </article>

      <aside class="metrics" aria-label="Key results">
        <div class="metric">
          <strong>5,928</strong>
          <span>filtered ExcelForum training tasks</span>
        </div>
        <div class="metric">
          <strong>23.4%</strong>
          <span>SpreadsheetBench Pass@1 after RL</span>
        </div>
        <div class="metric">
          <strong>1,660</strong>
          <span>Domain-Spreadsheet evaluation rollouts</span>
        </div>
        <div class="metric">
          <strong>17.2%</strong>
          <span>Domain-Spreadsheet Pass@1 after RL</span>
        </div>
      </aside>
    </section>
  </main>
</body>
</html>