:root {
    --deep: #0A1628;
    --frost-panel: #101F38;
    --ice: #E8F4FF;
    --ice-dim: #7A8FA8;
    --cyan: #7DD3FC;
    --avax-red: #E84142;
    --rule: #1E3350;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--deep);
    color: var(--ice);
    font-family: 'Space Grotesk', sans-serif;
    padding-bottom: 60px;
  }
  .mono { font-family: 'JetBrains Mono', monospace; }

  /* Faint ice-crack texture */
  .crack-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background-image:
      linear-gradient(105deg, transparent 48%, rgba(125,211,252,0.03) 49%, transparent 51%),
      linear-gradient(15deg, transparent 48%, rgba(125,211,252,0.03) 49%, transparent 51%);
    background-size: 300px 300px, 220px 220px;
  }

  

  .page { display: block; max-width: 760px; margin: 0 auto; padding: 28px 20px; position: relative; z-index: 2; }
  
  .masthead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
  .logo { display: flex; align-items: center; gap: 10px; }
  .crystal-icon {
    width: 32px; height: 32px; background: linear-gradient(135deg, var(--cyan), var(--ice));
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  }
  .logo-text { font-weight: 700; font-size: 20px; color: var(--ice); letter-spacing: -0.5px; }
  .nav { display: flex; gap: 4px; flex-wrap: wrap; }
  .nav a { font-size: 12px; color: var(--ice-dim); text-decoration: none; padding: 7px 11px; border: 1px solid transparent; }
  .nav a.active { color: var(--cyan); border-color: var(--cyan); }

  .panel {
    background: var(--frost-panel);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 18px;
    position: relative;
  }

  h1.hero { font-size: 30px; font-weight: 700; line-height: 1.3; color: var(--ice); margin: 0 0 8px; letter-spacing: -0.5px; }
  .hero-sub { color: var(--ice-dim); font-size: 14px; margin-bottom: 24px; line-height: 1.6; }
  .glow { color: var(--cyan); }

  .btn {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px;
    background: var(--cyan); color: var(--deep); border: none; padding: 13px 18px; cursor: pointer; border-radius: 4px;
  }
  .btn-red { background: var(--avax-red); color: var(--ice); }
  .btn-ghost { background: transparent; color: var(--ice-dim); border: 1px solid var(--rule); border-radius: 4px; font-size: 12px; padding: 8px 12px; cursor: pointer; }

  .row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
  .row:last-child { border-bottom: none; }
  .label { color: var(--ice-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }

  .block-list-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .block-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--frost-panel), var(--rule)); border: 1px solid var(--cyan); clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--cyan); }
  .block-name { font-weight: 700; font-size: 14px; }
  .block-meta { color: var(--ice-dim); font-size: 11px; }
  .score-tag { margin-left: auto; text-align: right; }
  .score-num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; color: var(--ice); }

  .field-group { margin-bottom: 18px; }
  .field-group label { display: block; font-size: 12px; color: var(--ice-dim); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
  .field-group input { width: 100%; background: var(--deep); border: 1px solid var(--rule); color: var(--ice); padding: 12px; font-family: 'Space Grotesk'; font-size: 14px; border-radius: 4px; }
  .hint { font-size: 12px; color: var(--ice-dim); margin-top: 4px; }

  .tab-toggle { display: flex; gap: 2px; margin-bottom: 16px; }
  .tab-toggle button { flex: 1; padding: 10px; font-family: 'Space Grotesk'; font-weight: 700; font-size: 12px; background: var(--rule); color: var(--ice-dim); border: none; cursor: pointer; border-radius: 4px; }
  .tab-toggle button.on { background: var(--cyan); color: var(--deep); }

  .fee-split { display: flex; gap: 10px; margin: 16px 0; }
  .fee-cell { flex: 1; text-align: center; padding: 16px 10px; border: 1px solid var(--rule); border-radius: 6px; }
  .fee-pct { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; color: var(--cyan); }
  .fee-label { font-size: 11px; color: var(--ice-dim); margin-top: 4px; }
  .fee-cell.burn { border-color: var(--avax-red); }
  .fee-cell.burn .fee-pct { color: var(--avax-red); }

  .note { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ice-dim); background: var(--rule); border-left: 3px solid var(--cyan); padding: 10px 14px; margin-top: 16px; border-radius: 0 4px 4px 0; }

  .stock-pick { flex-shrink: 0; cursor: pointer; }
  .stock-badge {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
    text-align: center; line-height: 1.1; color: var(--deep);
    transition: transform 0.15s;
  }
  .stock-pick:hover .stock-badge, .stock-pick.selected .stock-badge { transform: scale(1.08); }
  .stock-pick.selected .stock-badge { outline: 2px solid var(--ice); outline-offset: 2px; }FILEEOF
cat > index.html << 'FILEEOF'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thaw</title>
<meta property="og:title" content="Thaw — Pair Anything. Set Your Own Cut.">
<meta property="og:description" content="A token launchpad on Avalanche. Pair against AVAX or bridged stocks, set your own fee, choose where it goes.">
<link rel="icon" href="/favicon.png">
<link rel="stylesheet" href="/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/6.13.5/ethers.umd.min.js"></script>
<script src="/shared.js"></script>
</head>
<body>
<div class="crack-overlay"></div>

<div class="page active" style="max-width:760px; margin:0 auto; padding:28px 20px;">
  <div class="masthead">
    <div class="logo"><div class="crystal-icon"></div><div class="logo-text">Thaw</div></div>
    <div class="nav">
      <a href="/" class="active">The Thaw</a>
      <a href="/cast.html">Cast</a>
      <a href="/portfolio.html">Your Ice</a>
      <a href="/stats.html">Global Melt</a>
      <a href="/docs.html">How It Melts</a>
      <a href="https://x.com/thawdotworld" target="_blank" rel="noopener">𝕏</a>
      <button class="btn" id="connectBtn" data-connect-button onclick="handleConnect()">Connect</button>
    </div>
  </div>

  <h1 class="hero">PAIR ANYTHING.<br><span class="glow">SET YOUR OWN CUT.</span></h1>
  <p class="hero-sub">Launch against AVAX or a bridged stock token. Pick your fee, up to 10%, and decide exactly where it goes.</p>

  <div class="panel" style="border-color: var(--cyan);">
    <div class="label" style="margin-bottom:10px; color: var(--cyan);">STOCK-PAIRED LAUNCHES</div>
    <p style="font-size:13px; line-height:1.7; color: var(--ice-dim); margin: 0;">
      Thaw is one of the few launchpads where a block can pair directly against real, bridged stock tokens — including major names like Apple, Tesla, and Nvidia — instead of just the native asset. Pick any supported stock when casting a new block.
    </p>
  </div>

  <div class="panel" id="tokenList">
    <div class="hint">Loading the ice…</div>
  </div>
</div>

<script>
async function loadTokens() {
  const listEl = document.getElementById('tokenList');
  try {
    const tokens = await apiGet('/tokens');
    if (tokens.length === 0) {
      listEl.innerHTML = '<div class="hint">No blocks cast yet. <a href="/cast.html" style="color:var(--cyan);">Be the first.</a></div>';
      return;
    }
    tokens.sort((a, b) => (b.marketCapUsd || 0) - (a.marketCapUsd || 0));
    listEl.innerHTML = tokens.map(t => `
      <a href="/token.html?address=${t.address}" style="text-decoration:none; color:inherit;">
        <div class="block-list-item">
          <div class="block-icon">${t.symbol.slice(0, 2).toUpperCase()}</div>
          <div><div class="block-name">${t.symbol}</div><div class="block-meta">${t.name} · paired with ${t.quoteSymbol}</div></div>
          <div class="score-tag">
            <div class="score-num">${t.marketCapUsd ? '$' + Math.round(t.marketCapUsd).toLocaleString() : (t.priceInQuote ? t.priceInQuote.toFixed(8) + ' ' + t.quoteSymbol : '—')}</div>
            <div class="block-meta">${timeSince(t.launchTimestamp)}</div>
          </div>
        </div>
      </a>
    `).join('');
  } catch (err) {
    listEl.innerHTML = '<div class="hint">Couldn\'t reach the ice. Try refreshing.</div>';
  }
}

function timeSince(unixTs) {
  const seconds = Math.floor(Date.now() / 1000 - unixTs);
  if (seconds < 60) return seconds + 's ago';
  if (seconds < 3600) return Math.floor(seconds / 60) + 'm ago';
  if (seconds < 86400) return Math.floor(seconds / 3600) + 'h ago';
  return Math.floor(seconds / 86400) + 'd ago';
}

loadTokens();
setInterval(loadTokens, 15000);
</script>
</body>
</html>