> ## Documentation Index
> Fetch the complete documentation index at: https://voltaire.tevm.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Voltaire

> High-performance, type-safe Ethereum primitives and cryptography

<style>
  {`
    /* Critical CSS - prevents FOUC on homepage */
    .voltaire-hero {
      text-align: center !important;
      padding: 3rem 2rem 6rem !important;
      max-width: 1280px !important;
      margin: 0 auto !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    .voltaire-hero h1 {
      font-size: clamp(3rem, 8vw, 6rem) !important;
      font-weight: 800 !important;
      line-height: 1.1 !important;
      margin-bottom: 1.5rem !important;
    }
    .voltaire-hero .voltaire-gradient {
      display: block !important;
      background: linear-gradient(135deg, #E6A23C 0%, #A0522D 100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      background-clip: text !important;
    }
    .voltaire-hero p {
      font-size: clamp(1.2rem, 3vw, 1.5rem) !important;
      color: #999 !important;
      max-width: 800px !important;
      margin: 0 auto 3rem !important;
      line-height: 1.6 !important;
    }
    .voltaire-hero pre,
    .voltaire-hero code,
    .voltaire-hero [data-component-part="code-block-root"] {
      text-align: left !important;
    }
    `}
</style>

<div className="voltaire-hero" style={{ textAlign: 'center', padding: '3rem 2rem 6rem', maxWidth: '1280px', margin: '0 auto' }}>
  <h1 style={{ fontSize: 'clamp(3rem, 8vw, 6rem)', fontWeight: '800', lineHeight: '1.1', marginBottom: '1.5rem' }}>
    <span className="voltaire-gradient" style={{ display: 'block', background: 'linear-gradient(135deg, #E6A23C 0%, #A0522D 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>Voltaire</span>
  </h1>

  <p style={{ fontSize: 'clamp(1.2rem, 3vw, 1.5rem)', color: '#999', maxWidth: '800px', margin: '0 auto 3rem', lineHeight: '1.6' }}><strong>Modern, high-performance Ethereum library for <span style={{ position: 'relative', display: 'inline-block', overflow: 'hidden', verticalAlign: 'middle', top: '-0.1em', width: '10ch', textAlign: 'left' }}><span id="language-text" style={{ display: 'inline-block', color: '#3178C6', transition: 'transform 0.2s ease-out' }}>TypeScript</span></span></strong></p>

  <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap', marginBottom: '3rem' }}>
    <a href="/introduction" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: '0.75rem 2rem', borderRadius: '8px', textDecoration: 'none', fontWeight: '600', background: 'linear-gradient(135deg, #E6A23C 0%, #A0522D 100%)', color: 'white', transition: 'all 0.15s ease', transform: 'scale(1)', boxShadow: 'none' }} onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.02)'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(230, 162, 60, 0.3)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none'; }} onMouseDown={(e) => { e.currentTarget.style.transform = 'scale(0.99)'; }} onMouseUp={(e) => { e.currentTarget.style.transform = 'scale(1.02)'; }}>
      Why Voltaire?
    </a>

    <a href="/getting-started" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: '0.75rem 2rem', borderRadius: '8px', textDecoration: 'none', fontWeight: '600', background: 'transparent', color: 'currentColor', border: '2px solid rgba(128, 128, 128, 0.3)', transition: 'all 0.15s ease', transform: 'scale(1)', boxShadow: 'none' }} onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(128, 128, 128, 0.1)'; e.currentTarget.style.borderColor = 'rgba(128, 128, 128, 0.5)'; e.currentTarget.style.transform = 'scale(1.02)'; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(128, 128, 128, 0.3)'; e.currentTarget.style.transform = 'scale(1)'; }} onMouseDown={(e) => { e.currentTarget.style.transform = 'scale(0.99)'; }} onMouseUp={(e) => { e.currentTarget.style.transform = 'scale(1.02)'; }}>
      Get Started
    </a>

    <a href="https://github.com/evmts/voltaire" target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: '0.75rem 2rem', borderRadius: '8px', textDecoration: 'none', fontWeight: '600', background: 'transparent', color: 'currentColor', border: '2px solid rgba(128, 128, 128, 0.3)', transition: 'all 0.15s ease', transform: 'scale(1)', boxShadow: 'none' }} onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(128, 128, 128, 0.1)'; e.currentTarget.style.borderColor = 'rgba(128, 128, 128, 0.5)'; e.currentTarget.style.transform = 'scale(1.02)'; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(128, 128, 128, 0.3)'; e.currentTarget.style.transform = 'scale(1)'; }} onMouseDown={(e) => { e.currentTarget.style.transform = 'scale(0.99)'; }} onMouseUp={(e) => { e.currentTarget.style.transform = 'scale(1.02)'; }}>
      View on GitHub
    </a>
  </div>

  <div style={{ maxWidth: '900px', margin: '0 auto 4rem' }}>
    <div role="tablist" style={{ display: 'flex', gap: '1rem', justifyContent: 'center', marginBottom: '1rem', position: 'relative' }}>
      <div id="tab-indicator" style={{ position: 'absolute', bottom: '-8px', height: '2px', background: 'linear-gradient(90deg, #E6A23C 0%, #A0522D 100%)', transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)', borderRadius: '2px', left: '0', width: '0' }} />

      <button
        role="tab"
        aria-selected="true"
        aria-controls="claude-code"
        aria-label="Claude MCP installation"
        id="claude-btn"
        style={{ padding: '0.75rem 0', background: 'transparent', border: 'none', color: '#E6A23C', fontWeight: '600', fontSize: '1rem', cursor: 'pointer', transition: 'all 0.15s cubic-bezier(0.4, 0, 0.2, 1)', position: 'relative', opacity: '1' }}
        onMouseEnter={(e) => { const isActive = e.currentTarget.getAttribute('aria-selected') === 'true'; if (!isActive) { e.currentTarget.style.opacity = '0.7'; } }}
        onMouseLeave={(e) => { const isActive = e.currentTarget.getAttribute('aria-selected') === 'true'; e.currentTarget.style.opacity = isActive ? '1' : '0.5'; }}
        onClick={(e) => {
      const allBtns = ['claude-btn', 'cursor-btn', 'codex-btn', 'amp-btn', 'opencode-btn'].map(id => document.getElementById(id));
      const allDetails = ['claude-detail', 'cursor-detail', 'codex-detail', 'amp-detail', 'opencode-detail'].map(id => document.getElementById(id));
      const indicator = document.getElementById('tab-indicator');
      const claude = document.getElementById('claude-btn');
      const claudeDetail = document.getElementById('claude-detail');

      allBtns.forEach(btn => { btn.setAttribute('aria-selected', 'false'); btn.style.color = '#999'; btn.style.opacity = '0.5'; });
      claude.setAttribute('aria-selected', 'true'); claude.style.color = '#E6A23C'; claude.style.opacity = '1';

      const rect = claude.getBoundingClientRect();
      const containerRect = claude.parentElement.getBoundingClientRect();
      indicator.style.left = (rect.left - containerRect.left) + 'px';
      indicator.style.width = rect.width + 'px';

      allDetails.forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateX(-20px)'; });
      setTimeout(() => {
        allDetails.forEach(el => { el.style.display = 'none'; });
        claudeDetail.style.display = 'block';
        setTimeout(() => { claudeDetail.style.opacity = '1'; claudeDetail.style.transform = 'translateX(0)'; }, 50);
      }, 100);
    }}
      >
        Claude
      </button>

      <button
        role="tab"
        aria-selected="false"
        aria-controls="cursor-code"
        aria-label="Cursor MCP installation"
        id="cursor-btn"
        style={{ padding: '0.75rem 0', background: 'transparent', border: 'none', color: '#999', fontWeight: '600', fontSize: '1rem', cursor: 'pointer', transition: 'all 0.15s cubic-bezier(0.4, 0, 0.2, 1)', position: 'relative', opacity: '0.5' }}
        onMouseEnter={(e) => { const isActive = e.currentTarget.getAttribute('aria-selected') === 'true'; if (!isActive) { e.currentTarget.style.opacity = '0.7'; } }}
        onMouseLeave={(e) => { const isActive = e.currentTarget.getAttribute('aria-selected') === 'true'; e.currentTarget.style.opacity = isActive ? '1' : '0.5'; }}
        onClick={(e) => {
      const allBtns = ['claude-btn', 'cursor-btn', 'codex-btn', 'amp-btn', 'opencode-btn'].map(id => document.getElementById(id));
      const allDetails = ['claude-detail', 'cursor-detail', 'codex-detail', 'amp-detail', 'opencode-detail'].map(id => document.getElementById(id));
      const indicator = document.getElementById('tab-indicator');
      const cursor = document.getElementById('cursor-btn');
      const cursorDetail = document.getElementById('cursor-detail');

      allBtns.forEach(btn => { btn.setAttribute('aria-selected', 'false'); btn.style.color = '#999'; btn.style.opacity = '0.5'; });
      cursor.setAttribute('aria-selected', 'true'); cursor.style.color = '#E6A23C'; cursor.style.opacity = '1';

      const rect = cursor.getBoundingClientRect();
      const containerRect = cursor.parentElement.getBoundingClientRect();
      indicator.style.left = (rect.left - containerRect.left) + 'px';
      indicator.style.width = rect.width + 'px';

      allDetails.forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateX(-20px)'; });
      setTimeout(() => {
        allDetails.forEach(el => { el.style.display = 'none'; });
        cursorDetail.style.display = 'block';
        setTimeout(() => { cursorDetail.style.opacity = '1'; cursorDetail.style.transform = 'translateX(0)'; }, 50);
      }, 100);
    }}
      >
        Cursor
      </button>

      <button
        role="tab"
        aria-selected="false"
        aria-controls="codex-code"
        aria-label="Codex MCP installation"
        id="codex-btn"
        style={{ padding: '0.75rem 0', background: 'transparent', border: 'none', color: '#999', fontWeight: '600', fontSize: '1rem', cursor: 'pointer', transition: 'all 0.15s cubic-bezier(0.4, 0, 0.2, 1)', position: 'relative', opacity: '0.5' }}
        onMouseEnter={(e) => { const isActive = e.currentTarget.getAttribute('aria-selected') === 'true'; if (!isActive) { e.currentTarget.style.opacity = '0.7'; } }}
        onMouseLeave={(e) => { const isActive = e.currentTarget.getAttribute('aria-selected') === 'true'; e.currentTarget.style.opacity = isActive ? '1' : '0.5'; }}
        onClick={(e) => {
      const allBtns = ['claude-btn', 'cursor-btn', 'codex-btn', 'amp-btn', 'opencode-btn'].map(id => document.getElementById(id));
      const allDetails = ['claude-detail', 'cursor-detail', 'codex-detail', 'amp-detail', 'opencode-detail'].map(id => document.getElementById(id));
      const indicator = document.getElementById('tab-indicator');
      const codex = document.getElementById('codex-btn');
      const codexDetail = document.getElementById('codex-detail');

      allBtns.forEach(btn => { btn.setAttribute('aria-selected', 'false'); btn.style.color = '#999'; btn.style.opacity = '0.5'; });
      codex.setAttribute('aria-selected', 'true'); codex.style.color = '#E6A23C'; codex.style.opacity = '1';

      const rect = codex.getBoundingClientRect();
      const containerRect = codex.parentElement.getBoundingClientRect();
      indicator.style.left = (rect.left - containerRect.left) + 'px';
      indicator.style.width = rect.width + 'px';

      allDetails.forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateX(-20px)'; });
      setTimeout(() => {
        allDetails.forEach(el => { el.style.display = 'none'; });
        codexDetail.style.display = 'block';
        setTimeout(() => { codexDetail.style.opacity = '1'; codexDetail.style.transform = 'translateX(0)'; }, 50);
      }, 100);
    }}
      >
        Codex
      </button>

      <button
        role="tab"
        aria-selected="false"
        aria-controls="amp-code"
        aria-label="Amp MCP installation"
        id="amp-btn"
        style={{ padding: '0.75rem 0', background: 'transparent', border: 'none', color: '#999', fontWeight: '600', fontSize: '1rem', cursor: 'pointer', transition: 'all 0.15s cubic-bezier(0.4, 0, 0.2, 1)', position: 'relative', opacity: '0.5' }}
        onMouseEnter={(e) => { const isActive = e.currentTarget.getAttribute('aria-selected') === 'true'; if (!isActive) { e.currentTarget.style.opacity = '0.7'; } }}
        onMouseLeave={(e) => { const isActive = e.currentTarget.getAttribute('aria-selected') === 'true'; e.currentTarget.style.opacity = isActive ? '1' : '0.5'; }}
        onClick={(e) => {
      const allBtns = ['claude-btn', 'cursor-btn', 'codex-btn', 'amp-btn', 'opencode-btn'].map(id => document.getElementById(id));
      const allDetails = ['claude-detail', 'cursor-detail', 'codex-detail', 'amp-detail', 'opencode-detail'].map(id => document.getElementById(id));
      const indicator = document.getElementById('tab-indicator');
      const amp = document.getElementById('amp-btn');
      const ampDetail = document.getElementById('amp-detail');

      allBtns.forEach(btn => { btn.setAttribute('aria-selected', 'false'); btn.style.color = '#999'; btn.style.opacity = '0.5'; });
      amp.setAttribute('aria-selected', 'true'); amp.style.color = '#E6A23C'; amp.style.opacity = '1';

      const rect = amp.getBoundingClientRect();
      const containerRect = amp.parentElement.getBoundingClientRect();
      indicator.style.left = (rect.left - containerRect.left) + 'px';
      indicator.style.width = rect.width + 'px';

      allDetails.forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateX(-20px)'; });
      setTimeout(() => {
        allDetails.forEach(el => { el.style.display = 'none'; });
        ampDetail.style.display = 'block';
        setTimeout(() => { ampDetail.style.opacity = '1'; ampDetail.style.transform = 'translateX(0)'; }, 50);
      }, 100);
    }}
      >
        Amp
      </button>

      <button
        role="tab"
        aria-selected="false"
        aria-controls="opencode-code"
        aria-label="OpenCode MCP installation"
        id="opencode-btn"
        style={{ padding: '0.75rem 0', background: 'transparent', border: 'none', color: '#999', fontWeight: '600', fontSize: '1rem', cursor: 'pointer', transition: 'all 0.15s cubic-bezier(0.4, 0, 0.2, 1)', position: 'relative', opacity: '0.5' }}
        onMouseEnter={(e) => { const isActive = e.currentTarget.getAttribute('aria-selected') === 'true'; if (!isActive) { e.currentTarget.style.opacity = '0.7'; } }}
        onMouseLeave={(e) => { const isActive = e.currentTarget.getAttribute('aria-selected') === 'true'; e.currentTarget.style.opacity = isActive ? '1' : '0.5'; }}
        onClick={(e) => {
      const allBtns = ['claude-btn', 'cursor-btn', 'codex-btn', 'amp-btn', 'opencode-btn'].map(id => document.getElementById(id));
      const allDetails = ['claude-detail', 'cursor-detail', 'codex-detail', 'amp-detail', 'opencode-detail'].map(id => document.getElementById(id));
      const indicator = document.getElementById('tab-indicator');
      const opencode = document.getElementById('opencode-btn');
      const opencodeDetail = document.getElementById('opencode-detail');

      allBtns.forEach(btn => { btn.setAttribute('aria-selected', 'false'); btn.style.color = '#999'; btn.style.opacity = '0.5'; });
      opencode.setAttribute('aria-selected', 'true'); opencode.style.color = '#E6A23C'; opencode.style.opacity = '1';

      const rect = opencode.getBoundingClientRect();
      const containerRect = opencode.parentElement.getBoundingClientRect();
      indicator.style.left = (rect.left - containerRect.left) + 'px';
      indicator.style.width = rect.width + 'px';

      allDetails.forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateX(-20px)'; });
      setTimeout(() => {
        allDetails.forEach(el => { el.style.display = 'none'; });
        opencodeDetail.style.display = 'block';
        setTimeout(() => { opencodeDetail.style.opacity = '1'; opencodeDetail.style.transform = 'translateX(0)'; }, 50);
      }, 100);
    }}
      >
        OpenCode
      </button>
    </div>

    <div
      id="claude-detail"
      style={{ cursor: 'pointer', opacity: '1', transform: 'translateX(0)', transition: 'opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)' }}
      onMouseDown={(e) => {
    const codeBlock = e.currentTarget.querySelector('[data-component-part="code-block-root"]');
    if (codeBlock) {
      codeBlock.style.transition = 'box-shadow 0.1s ease';
      codeBlock.style.boxShadow = '0 0 0 3px #E6A23C, 0 0 0 6px #A0522D';
    }
  }}
      onMouseUp={(e) => {
    const codeBlock = e.currentTarget.querySelector('[data-component-part="code-block-root"]');
    if (codeBlock) {
      codeBlock.style.boxShadow = '';
    }
  }}
      onMouseLeave={(e) => {
    const codeBlock = e.currentTarget.querySelector('[data-component-part="code-block-root"]');
    if (codeBlock) {
      codeBlock.style.boxShadow = '';
    }
  }}
      onClick={(e) => {
    navigator.clipboard.writeText('claude mcp add --transport http voltaire https://voltaire.tevm.sh/mcp');
    const feedback = document.getElementById('copy-feedback');
    feedback.style.opacity = '1';
    setTimeout(() => {
      feedback.style.opacity = '0';
    }, 500);
  }}
    >
      ```bash theme={null}
      claude mcp add --transport http voltaire https://voltaire.tevm.sh/mcp
      ```
    </div>

    <div
      id="cursor-detail"
      style={{ cursor: 'pointer', display: 'none', opacity: '0', transform: 'translateX(-20px)', transition: 'opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)' }}
      onMouseDown={(e) => {
    const codeBlock = e.currentTarget.querySelector('[data-component-part="code-block-root"]');
    if (codeBlock) {
      codeBlock.style.transition = 'box-shadow 0.1s ease';
      codeBlock.style.boxShadow = '0 0 0 3px #E6A23C, 0 0 0 6px #A0522D';
    }
  }}
      onMouseUp={(e) => {
    const codeBlock = e.currentTarget.querySelector('[data-component-part="code-block-root"]');
    if (codeBlock) {
      codeBlock.style.boxShadow = '';
    }
  }}
      onMouseLeave={(e) => {
    const codeBlock = e.currentTarget.querySelector('[data-component-part="code-block-root"]');
    if (codeBlock) {
      codeBlock.style.boxShadow = '';
    }
  }}
      onClick={(e) => {
    navigator.clipboard.writeText('Add to .cursor/mcp.json:\n{\n  "mcpServers": {\n    "voltaire": {\n      "command": "npx",\n      "args": ["mcp-remote", "https://voltaire.tevm.sh/mcp"]\n    }\n  }\n}');
    const feedback = document.getElementById('copy-feedback');
    feedback.style.opacity = '1';
    setTimeout(() => {
      feedback.style.opacity = '0';
    }, 500);
  }}
    >
      ```json theme={null}
      // Add to .cursor/mcp.json
      {
        "mcpServers": {
          "voltaire": {
            "command": "npx",
            "args": ["mcp-remote", "https://voltaire.tevm.sh/mcp"]
          }
        }
      }
      ```
    </div>

    <div
      id="codex-detail"
      style={{ cursor: 'pointer', display: 'none', opacity: '0', transform: 'translateX(-20px)', transition: 'opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)' }}
      onMouseDown={(e) => {
    const codeBlock = e.currentTarget.querySelector('[data-component-part="code-block-root"]');
    if (codeBlock) {
      codeBlock.style.transition = 'box-shadow 0.1s ease';
      codeBlock.style.boxShadow = '0 0 0 3px #E6A23C, 0 0 0 6px #A0522D';
    }
  }}
      onMouseUp={(e) => {
    const codeBlock = e.currentTarget.querySelector('[data-component-part="code-block-root"]');
    if (codeBlock) {
      codeBlock.style.boxShadow = '';
    }
  }}
      onMouseLeave={(e) => {
    const codeBlock = e.currentTarget.querySelector('[data-component-part="code-block-root"]');
    if (codeBlock) {
      codeBlock.style.boxShadow = '';
    }
  }}
      onClick={(e) => {
    navigator.clipboard.writeText('Add to ~/.codex/config.toml:\n[mcp_servers.voltaire]\nurl = "https://voltaire.tevm.sh/mcp"');
    const feedback = document.getElementById('copy-feedback');
    feedback.style.opacity = '1';
    setTimeout(() => {
      feedback.style.opacity = '0';
    }, 500);
  }}
    >
      ```toml theme={null}
      # Add to ~/.codex/config.toml
      [mcp_servers.voltaire]
      url = "https://voltaire.tevm.sh/mcp"
      ```
    </div>

    <div
      id="amp-detail"
      style={{ cursor: 'pointer', display: 'none', opacity: '0', transform: 'translateX(-20px)', transition: 'opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)' }}
      onMouseDown={(e) => {
    const codeBlock = e.currentTarget.querySelector('[data-component-part="code-block-root"]');
    if (codeBlock) {
      codeBlock.style.transition = 'box-shadow 0.1s ease';
      codeBlock.style.boxShadow = '0 0 0 3px #E6A23C, 0 0 0 6px #A0522D';
    }
  }}
      onMouseUp={(e) => {
    const codeBlock = e.currentTarget.querySelector('[data-component-part="code-block-root"]');
    if (codeBlock) {
      codeBlock.style.boxShadow = '';
    }
  }}
      onMouseLeave={(e) => {
    const codeBlock = e.currentTarget.querySelector('[data-component-part="code-block-root"]');
    if (codeBlock) {
      codeBlock.style.boxShadow = '';
    }
  }}
      onClick={(e) => {
    navigator.clipboard.writeText('// Add to ~/.config/amp/settings.json\n{\n  "mcpServers": {\n    "voltaire": {\n      "url": "https://voltaire.tevm.sh/mcp"\n    }\n  }\n}');
    const feedback = document.getElementById('copy-feedback');
    feedback.style.opacity = '1';
    setTimeout(() => {
      feedback.style.opacity = '0';
    }, 500);
  }}
    >
      ```json theme={null}
      // Add to ~/.config/amp/settings.json
      {
        "mcpServers": {
          "voltaire": {
            "url": "https://voltaire.tevm.sh/mcp"
          }
        }
      }
      ```
    </div>

    <div
      id="opencode-detail"
      style={{ cursor: 'pointer', display: 'none', opacity: '0', transform: 'translateX(-20px)', transition: 'opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)' }}
      onMouseDown={(e) => {
    const codeBlock = e.currentTarget.querySelector('[data-component-part="code-block-root"]');
    if (codeBlock) {
      codeBlock.style.transition = 'box-shadow 0.1s ease';
      codeBlock.style.boxShadow = '0 0 0 3px #E6A23C, 0 0 0 6px #A0522D';
    }
  }}
      onMouseUp={(e) => {
    const codeBlock = e.currentTarget.querySelector('[data-component-part="code-block-root"]');
    if (codeBlock) {
      codeBlock.style.boxShadow = '';
    }
  }}
      onMouseLeave={(e) => {
    const codeBlock = e.currentTarget.querySelector('[data-component-part="code-block-root"]');
    if (codeBlock) {
      codeBlock.style.boxShadow = '';
    }
  }}
      onClick={(e) => {
    navigator.clipboard.writeText('// Add to ~/.config/opencode/opencode.json\n{\n  "mcp": {\n    "voltaire": {\n      "type": "remote",\n      "url": "https://voltaire.tevm.sh/mcp"\n    }\n  }\n}');
    const feedback = document.getElementById('copy-feedback');
    feedback.style.opacity = '1';
    setTimeout(() => {
      feedback.style.opacity = '0';
    }, 500);
  }}
    >
      ```json theme={null}
      // Add to ~/.config/opencode/opencode.json
      {
        "mcp": {
          "voltaire": {
            "type": "remote",
            "url": "https://voltaire.tevm.sh/mcp"
          }
        }
      }
      ```
    </div>
  </div>

  <div style={{ maxWidth: '1000px', margin: '2rem auto 5rem' }}>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '1.5rem' }}>
      <a href="/getting-started/llm-optimized" style={{ display: 'flex', alignItems: 'center', gap: '1rem', padding: '1.5rem', border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: '12px', textDecoration: 'none', transition: 'all 0.15s ease', cursor: 'pointer' }} onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(212, 147, 30, 0.2)'; e.currentTarget.style.borderColor = 'rgba(212, 147, 30, 0.3)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.1)'; }}>
        <div style={{ fontSize: '2rem', color: '#D4931E', flexShrink: 0 }}>📐</div>

        <div>
          <h3 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', fontWeight: '700', color: '#D4931E' }}>Simple API</h3>
          <p style={{ margin: 0, fontSize: '0.9rem', color: '#999' }}>Minimal API that removes maximum complexity from previous libraries in favor of skills</p>
        </div>
      </a>

      <a href="/getting-started/branded-types" style={{ display: 'flex', alignItems: 'center', gap: '1rem', padding: '1.5rem', border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: '12px', textDecoration: 'none', transition: 'all 0.15s ease', cursor: 'pointer' }} onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(212, 147, 30, 0.2)'; e.currentTarget.style.borderColor = 'rgba(212, 147, 30, 0.3)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.1)'; }}>
        <div style={{ fontSize: '2rem', color: '#D4931E', flexShrink: 0 }}>🛡️</div>

        <div>
          <h3 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', fontWeight: '700', color: '#D4931E' }}>Modern Type Safety</h3>
          <p style={{ margin: 0, fontSize: '0.9rem', color: '#999' }}>Voltaire utilizes branded types to provide the best possible TypeScript type safety for Ethereum</p>
        </div>
      </a>

      <a href="/getting-started/wasm" style={{ display: 'flex', alignItems: 'center', gap: '1rem', padding: '1.5rem', border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: '12px', textDecoration: 'none', transition: 'all 0.15s ease', cursor: 'pointer' }} onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(212, 147, 30, 0.2)'; e.currentTarget.style.borderColor = 'rgba(212, 147, 30, 0.3)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.1)'; }}>
        <div style={{ fontSize: '2rem', color: '#D4931E', flexShrink: 0 }}>⚡</div>

        <div>
          <h3 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', fontWeight: '700', color: '#D4931E' }}>High Performance</h3>
          <p style={{ margin: 0, fontSize: '0.9rem', color: '#999' }}>Supercharge your apps performance with WASM implementations of cryptography, encoding, and EVM execution written in Zig</p>
        </div>
      </a>

      <a href="/getting-started/llm-optimized" style={{ display: 'flex', alignItems: 'center', gap: '1rem', padding: '1.5rem', border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: '12px', textDecoration: 'none', transition: 'all 0.15s ease', cursor: 'pointer' }} onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(212, 147, 30, 0.2)'; e.currentTarget.style.borderColor = 'rgba(212, 147, 30, 0.3)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.1)'; }}>
        <div style={{ fontSize: '2rem', color: '#D4931E', flexShrink: 0 }}>🤖</div>

        <div>
          <h3 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', fontWeight: '700', color: '#D4931E' }}>AI-Native</h3>
          <p style={{ margin: 0, fontSize: '0.9rem', color: '#999' }}>API and docs optimized for LLMs. Powerful MCP server to get started</p>
        </div>
      </a>

      <a href="/getting-started/powerful-features" style={{ display: 'flex', alignItems: 'center', gap: '1rem', padding: '1.5rem', border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: '12px', textDecoration: 'none', transition: 'all 0.15s ease', cursor: 'pointer' }} onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(212, 147, 30, 0.2)'; e.currentTarget.style.borderColor = 'rgba(212, 147, 30, 0.3)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.1)'; }}>
        <div style={{ fontSize: '2rem', color: '#D4931E', flexShrink: 0 }}>📦</div>

        <div>
          <h3 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', fontWeight: '700', color: '#D4931E' }}>Powerful Features</h3>
          <p style={{ margin: 0, fontSize: '0.9rem', color: '#999' }}>Unique features such as EVM execution and bytecode analysis enable optimistic updates, instant gas estimation and more</p>
        </div>
      </a>

      <a href="/getting-started/multiplatform" style={{ display: 'flex', alignItems: 'center', gap: '1rem', padding: '1.5rem', border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: '12px', textDecoration: 'none', transition: 'all 0.15s ease', cursor: 'pointer' }} onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(212, 147, 30, 0.2)'; e.currentTarget.style.borderColor = 'rgba(212, 147, 30, 0.3)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.1)'; }}>
        <div style={{ fontSize: '2rem', color: '#D4931E', flexShrink: 0 }}>🌐</div>

        <div>
          <h3 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', fontWeight: '700', color: '#D4931E' }}>Multi-Platform</h3>
          <p style={{ margin: 0, fontSize: '0.9rem', color: '#999' }}>Utilize Voltaire in the browser, mobile, Node.js, Bun, native environments, Zig, WASM or C-FFI to use in Swift or other languages that support C-FFI</p>
        </div>
      </a>
    </div>
  </div>

  <div style={{ textAlign: 'left' }}>
    <div id="editor-mount-point" style={{ maxWidth: '1000px', margin: '5rem auto 0' }} />
  </div>

  <div style={{ maxWidth: '900px', margin: '5rem auto', padding: '0 1rem' }}>
    <h2 style={{ fontSize: 'clamp(2rem, 5vw, 2.5rem)', fontWeight: '700', textAlign: 'center', marginBottom: '1rem', background: 'linear-gradient(135deg, #E6A23C 0%, #A0522D 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>Type-Safe Primitives & Crypto</h2>

    <p style={{ fontSize: '1.1rem', color: '#999', textAlign: 'center', marginBottom: '2rem' }}>
      Branded types, denomination safety, ABI encoding, and WASM-accelerated cryptography.
    </p>

    ```typescript theme={null}
    import { Address, Wei } from '@tevm/voltaire'
    import { Hex } from '@tevm/voltaire/Hex'
    import { Keccak256 } from '@tevm/voltaire/Keccak256'
    import { Rlp } from '@tevm/voltaire/Rlp'
    import { Abi } from '@tevm/voltaire/Abi'

    // Branded types - Address and Hash are distinct types
    const addr = Address('0x742d35Cc6634C0532925a3b844Bc9e7595f51e3e')
    console.log(addr.toChecksummed()) // "0x742d35Cc..."

    // Denomination safety - Wei and Gwei can't be mixed
    const value = Wei(1000000000000000000n)
    console.log(Wei.toEther(value)) // "1"

    // WASM-accelerated Keccak256
    const hash = Keccak256('hello')
    const selector = Keccak256.selector('transfer(address,uint256)')
    // Uint8Array(4) [0xa9, 0x05, 0x9c, 0xbb]

    // RLP encoding
    const encoded = Rlp.encode([addr, Hex.fromNumber(42n)])

    // ABI encoding with full type inference
    const calldata = Abi.Function.encodeParams({
      type: 'function', name: 'transfer',
      inputs: [{ type: 'address', name: 'to' }, { type: 'uint256', name: 'amount' }],
      outputs: [{ type: 'bool' }], stateMutability: 'nonpayable'
    } as const, ['0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045', 1000000000000000000n])
    ```
  </div>

  <div style={{ maxWidth: '1000px', margin: '5rem auto', padding: '0 1rem' }}>
    <h2 style={{ fontSize: 'clamp(2rem, 5vw, 2.5rem)', fontWeight: '700', textAlign: 'center', marginBottom: '1rem', background: 'linear-gradient(135deg, #E6A23C 0%, #A0522D 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>Need Providers, Signers, or Contract Interactions?</h2>

    <p style={{ fontSize: '1.1rem', color: '#999', textAlign: 'center', marginBottom: '2rem' }}>
      Voltaire focuses on primitives and cryptography. For providers, signers, contract reads/writes, and composable Effect.ts operations, use <code style={{ background: 'rgba(255,255,255,0.1)', padding: '0.2rem 0.5rem', borderRadius: '4px' }}>voltaire-effect</code>.
    </p>

    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '1rem', marginBottom: '2rem' }}>
      <div style={{ padding: '1.25rem', border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: '12px', textAlign: 'center' }}>
        <div style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>🌐</div>
        <h4 style={{ margin: '0 0 0.25rem 0', fontSize: '1rem', fontWeight: '600', color: '#D4931E' }}>Providers</h4>
        <p style={{ margin: 0, fontSize: '0.85rem', color: '#999' }}>HTTP, WebSocket, and fallback transports with retry and rate limiting</p>
      </div>

      <div style={{ padding: '1.25rem', border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: '12px', textAlign: 'center' }}>
        <div style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>🔑</div>
        <h4 style={{ margin: '0 0 0.25rem 0', fontSize: '1rem', fontWeight: '600', color: '#D4931E' }}>Signers</h4>
        <p style={{ margin: 0, fontSize: '0.85rem', color: '#999' }}>HD wallets, private key signers, and EIP-712 typed data signing</p>
      </div>

      <div style={{ padding: '1.25rem', border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: '12px', textAlign: 'center' }}>
        <div style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>📜</div>
        <h4 style={{ margin: '0 0 0.25rem 0', fontSize: '1rem', fontWeight: '600', color: '#D4931E' }}>Contracts</h4>
        <p style={{ margin: 0, fontSize: '0.85rem', color: '#999' }}>Type-safe contract reads, writes, and event subscriptions</p>
      </div>

      <div style={{ padding: '1.25rem', border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: '12px', textAlign: 'center' }}>
        <div style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>⚡</div>
        <h4 style={{ margin: '0 0 0.25rem 0', fontSize: '1rem', fontWeight: '600', color: '#D4931E' }}>Effect.ts</h4>
        <p style={{ margin: 0, fontSize: '0.85rem', color: '#999' }}>Composable operations with typed errors, retries, and timeouts</p>
      </div>
    </div>

    <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center' }}>
      <a href="https://github.com/evmts/voltaire/tree/main/voltaire-effect" target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: '0.75rem 1.5rem', borderRadius: '8px', textDecoration: 'none', fontWeight: '600', background: 'linear-gradient(135deg, #E6A23C 0%, #A0522D 100%)', color: 'white', transition: 'all 0.15s ease' }} onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.02)'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(230, 162, 60, 0.3)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none'; }}>
        View voltaire-effect →
      </a>

      <a href="https://effect.website" target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: '0.75rem 1.5rem', borderRadius: '8px', textDecoration: 'none', fontWeight: '600', background: 'transparent', color: 'currentColor', border: '2px solid rgba(128, 128, 128, 0.3)', transition: 'all 0.15s ease' }} onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(128, 128, 128, 0.1)'; e.currentTarget.style.borderColor = 'rgba(128, 128, 128, 0.5)'; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(128, 128, 128, 0.3)'; }}>
        Learn Effect.ts
      </a>
    </div>
  </div>

  <script
    dangerouslySetInnerHTML={{__html: `
  // Wait for full page load and React hydration
  window.addEventListener('load', function() {
    setTimeout(initMonaco, 500);
    setTimeout(initTextAnimation, 500);
    setTimeout(initTabIndicator, 500);
    setTimeout(observeThemeChanges, 500);
  });

  function initTabIndicator() {
    const claude = document.getElementById('claude-btn');
    const indicator = document.getElementById('tab-indicator');

    if (claude && indicator) {
      const claudeRect = claude.getBoundingClientRect();
      const containerRect = claude.parentElement.getBoundingClientRect();
      indicator.style.left = (claudeRect.left - containerRect.left) + 'px';
      indicator.style.width = claudeRect.width + 'px';
    }
  }

  function initTextAnimation() {
    // Language and platform animation
    const languages = [
      { name: 'TypeScript', color: '#3178C6' },
      { name: 'Swift', color: '#F05138' },
      { name: 'Zig', color: '#F7A41D' }
    ];
    let langIndex = 0;
    const languageText = document.getElementById('language-text');

    if (!languageText) {
      console.error('language-text element not found');
      return;
    }

    function animateLanguage() {
      // Slide up (exit)
      languageText.style.transform = 'translateY(-100%)';

      setTimeout(() => {
        langIndex = (langIndex + 1) % languages.length;
        const lang = languages[langIndex];

        languageText.textContent = lang.name;
        languageText.style.color = lang.color;
        languageText.style.transform = 'translateY(100%)';

        setTimeout(() => {
          languageText.style.transform = 'translateY(0)';
        }, 50);
      }, 200);
    }

    // Start animation cycle (every 5 seconds)
    setInterval(animateLanguage, 5000);
  }

  // Detect current theme from Mintlify's DOM
  function getCurrentTheme() {
    return document.documentElement.classList.contains('dark') ? 'vs-dark' : 'vs';
  }

  // Setup code execution with Web Worker sandbox
  function setupCodeExecution(editor) {
    const runButton = document.getElementById('run-button');
    const clearButton = document.getElementById('clear-console-button');
    const consoleOutput = document.getElementById('console-output');

    let currentWorker = null;
    let executionTimeout = null;

    // Create Web Worker for sandboxed execution
    function createWorker() {
      const workerCode = 'let Voltaire = null;' +
        'self.onmessage = async function(e) {' +
        '  const { code, loadTevm } = e.data;' +
        '  const console = {' +
        '    log: (...args) => {' +
        '      self.postMessage({' +
        '        type: "log",' +
        '        args: args.map(arg => {' +
        '          if (typeof arg === "object") {' +
        '            try { return JSON.stringify(arg, null, 2); }' +
        '            catch { return String(arg); }' +
        '          }' +
        '          return String(arg);' +
        '        })' +
        '      });' +
        '    },' +
        '    error: (...args) => {' +
        '      self.postMessage({' +
        '        type: "error",' +
        '        args: args.map(arg => String(arg))' +
        '      });' +
        '    },' +
        '    warn: (...args) => {' +
        '      self.postMessage({' +
        '        type: "warn",' +
        '        args: args.map(arg => String(arg))' +
        '      });' +
        '    }' +
        '  };' +
        '  if (loadTevm && !Voltaire) {' +
        '    try {' +
        '      self.postMessage({ type: "log", args: ["Loading Voltaire APIs..."] });' +
        '      const module = await import("https://esm.sh/@tevm/voltaire@0.1.9");' +
        '      Voltaire = module;' +
        '      Object.assign(globalThis, module);' +
        '      self.postMessage({ type: "log", args: ["Voltaire loaded! Available: Address, Hex, Keccak256, etc."] });' +
        '    } catch (err) {' +
        '      self.postMessage({ type: "error", args: ["Failed to load Voltaire: " + err.message] });' +
        '    }' +
        '  }' +
        '  try {' +
        '    const fn = new Function("console", "Voltaire", code);' +
        '    fn(console, Voltaire);' +
        '    self.postMessage({ type: "complete" });' +
        '  } catch (error) {' +
        '    self.postMessage({' +
        '      type: "error",' +
        '      args: [error.message]' +
        '    });' +
        '  }' +
        '};';

      const blob = new Blob([workerCode], { type: 'application/javascript' });
      return new Worker(URL.createObjectURL(blob));
    }

    // Add log entry to console output
    function addLog(type, args) {
      const entry = document.createElement('div');
      entry.style.marginBottom = '0.5rem';
      entry.style.paddingLeft = '1rem';
      entry.style.borderLeft = '3px solid';

      if (type === 'log') {
        entry.style.borderLeftColor = '#4CAF50';
        entry.style.color = '#d4d4d4';
      } else if (type === 'error') {
        entry.style.borderLeftColor = '#f44336';
        entry.style.color = '#f48771';
      } else if (type === 'warn') {
        entry.style.borderLeftColor = '#ff9800';
        entry.style.color = '#dcdcaa';
      }

      entry.textContent = args.join(' ');
      entry.style.whiteSpace = 'pre-wrap';
      entry.style.wordWrap = 'break-word';

      // Remove placeholder if present
      const placeholder = consoleOutput.querySelector('[style*="italic"]');
      if (placeholder) placeholder.remove();

      consoleOutput.appendChild(entry);
      consoleOutput.scrollTop = consoleOutput.scrollHeight;
    }

    // Execute code
    function executeCode() {
      // Clear previous output
      consoleOutput.innerHTML = '';

      // Terminate previous worker if running
      if (currentWorker) {
        currentWorker.terminate();
        clearTimeout(executionTimeout);
      }

      // Update button state
      runButton.textContent = '⏸ Running...';
      runButton.disabled = true;
      runButton.style.opacity = '0.7';

      // Create new worker
      currentWorker = createWorker();

      // Set up timeout (5 seconds)
      executionTimeout = setTimeout(() => {
        currentWorker.terminate();
        addLog('error', ['Execution timeout (5s limit)']);
        resetButton();
      }, 5000);

      // Handle messages from worker
      currentWorker.onmessage = (e) => {
        const { type, args } = e.data;

        if (type === 'complete') {
          clearTimeout(executionTimeout);
          resetButton();
        } else if (type === 'log' || type === 'error' || type === 'warn') {
          addLog(type, args);
        }
      };

      // Handle worker errors
      currentWorker.onerror = (error) => {
        clearTimeout(executionTimeout);
        addLog('error', ['Worker error:', error.message]);
        resetButton();
      };

      // Get code and execute
      const code = editor.getValue();
      currentWorker.postMessage({ code, loadTevm: true });
    }

    function resetButton() {
      runButton.textContent = '▶ Run Code';
      runButton.disabled = false;
      runButton.style.opacity = '1';
    }

    // Clear console
    function clearConsole() {
      consoleOutput.innerHTML = '<div style="color: #666; font-style: italic;">Console output will appear here...</div>';
    }

    // Event listeners
    runButton.addEventListener('click', executeCode);
    clearButton.addEventListener('click', clearConsole);

    // Hover effects
    runButton.addEventListener('mouseenter', () => {
      if (!runButton.disabled) {
        runButton.style.transform = 'scale(1.01)';
        runButton.style.boxShadow = '0 2px 8px rgba(230, 162, 60, 0.3)';
      }
    });
    runButton.addEventListener('mouseleave', () => {
      runButton.style.transform = 'scale(1)';
      runButton.style.boxShadow = 'none';
    });

    clearButton.addEventListener('mouseenter', () => {
      clearButton.style.background = 'rgba(128, 128, 128, 0.1)';
    });
    clearButton.addEventListener('mouseleave', () => {
      clearButton.style.background = 'transparent';
    });
  }

  async function initMonaco() {
    const mountPoint = document.getElementById('editor-mount-point');
    if (!mountPoint) return;

    mountPoint.innerHTML = \`
      <h2 style="font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: 1rem; background: linear-gradient(135deg, #E6A23C 0%, #A0522D 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Try It Now</h2>
      <p style="font-size: 1.1rem; color: #999; text-align: center; margin-bottom: 2rem;">
        Edit and experiment with live Voltaire code examples.
      </p>
      <div id="editor-container" style="width: 100%; height: 600px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px 12px 0 0; overflow: hidden; position: relative;"></div>
      <div style="display: flex; gap: 0; border: 1px solid rgba(255, 255, 255, 0.1); border-top: none;">
        <button id="run-button" style="flex: 1; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, #E6A23C 0%, #A0522D 100%); color: white; border: none; font-weight: 600; cursor: pointer; transition: all 0.15s ease; font-size: 0.95rem;">
          ▶ Run Code
        </button>
        <button id="clear-console-button" style="flex: 0 0 auto; padding: 0.75rem 1.5rem; background: transparent; color: #E6A23C; border: none; border-left: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: all 0.15s ease; font-size: 0.95rem; font-weight: 600;">
          Clear
        </button>
      </div>
      <div id="console-output" style="min-height: 150px; max-height: 300px; overflow-y: auto; background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.1); border-top: none; border-radius: 0 0 12px 12px; padding: 1rem; font-family: 'Menlo, Monaco, Courier New, monospace'; font-size: 0.875rem; line-height: 1.6; color: #d4d4d4; word-wrap: break-word; white-space: pre-wrap;">
        <div style="color: #858585; font-style: italic;">Console output will appear here...</div>
      </div>
    \`;

    try {
      const { init } = await import('https://esm.sh/modern-monaco@0.2.2');
      const monaco = await init();

      const code = '// Voltaire: Type-safe Ethereum primitives\\n' +
        '\\n' +
        '// 1. BRANDED TYPES - Address and Hash are distinct types\\n' +
        'const recipient = Address.from("0x70997970C51812dc3A010C7d01b50e0d17dc79C8");\\n' +
        'const txHash = Hash.from("0x" + "ab".repeat(32));\\n' +
        '// TypeScript prevents: sendTo(txHash) ❌ - wrong type!\\n' +
        '\\n' +
        'console.log("Address:", Address.toHex(recipient));\\n' +
        '\\n' +
        '// 2. DATA-FIRST - Just Uint8Array, works with native APIs\\n' +
        'console.log("Is Uint8Array?", recipient instanceof Uint8Array);\\n' +
        'const view = new DataView(recipient.buffer); // Native interop!\\n' +
        '\\n' +
        '// 3. FAST CRYPTO - Powered by Zig\\n' +
        'const hash = Keccak256.fromString("Hello, Ethereum!");\\n' +
        'console.log("Hash:", Hex.fromBytes(hash));\\n' +
        '\\n' +
        '// 4. FUNCTION SELECTORS - Common Ethereum operation\\n' +
        'const selector = Keccak256.selector("transfer(address,uint256)");\\n' +
        'console.log("Selector:", Hex.fromBytes(selector)); // 0xa9059cbb\\n' +
        '\\n' +
        '// 5. SKILLS API - LLM-generated project-specific abstractions\\n' +
        '// Copy a Skill into your project, customize it, own it:\\n' +
        '//\\n' +
        '// import { useTokenBalance } from \\'./skills/useTokenBalance\\';\\n' +
        '// import { sendTransaction } from \\'./skills/sendTransaction\\';\\n' +
        '//\\n' +
        '// const balance = useTokenBalance(recipient, \\'USDC\\');\\n' +
        '// await sendTransaction({ to: recipient, value: Wei.fromEther(\\'1\\') });\\n' +
        '\\n' +
        'console.log("\\\\n✓ Primitives + Skills = your custom Ethereum toolkit");';

      const model = monaco.editor.createModel(code, 'typescript');

      const editor = monaco.editor.create(document.getElementById('editor-container'), {
        model: model,
        theme: getCurrentTheme(),
        fontSize: 14,
        lineHeight: 21,
        fontFamily: 'Menlo, Monaco, "Courier New", monospace',
        minimap: { enabled: false },
        scrollBeyondLastLine: false,
        padding: { top: 16, bottom: 16, left: 16 },
        automaticLayout: true,
        lineNumbers: 'on',
        glyphMargin: false,
        folding: false,
        lineDecorationsWidth: 0,
        lineNumbersMinChars: 3,
        renderLineHighlight: 'line',
        scrollbar: {
          vertical: 'visible',
          horizontal: 'visible',
          useShadows: false,
          verticalScrollbarSize: 10,
          horizontalScrollbarSize: 10
        },
        tabSize: 2,
        insertSpaces: true
      });

      // Add CSS to increase gap between line numbers and content
      const style = document.createElement('style');
      style.textContent = \`
        .monaco-editor .margin-view-overlays .line-numbers {
          padding-right: 16px !important;
        }
      \`;
      document.head.appendChild(style);

      // Store globally for theme updates
      window.monacoInstance = monaco;
      window.monacoEditor = editor;

      // Setup code execution with Web Worker
      setupCodeExecution(editor);

      // Trigger auto-formatting
      setTimeout(() => {
        editor.getAction('editor.action.formatDocument')?.run();
      }, 100);

    } catch (e) {
      document.getElementById('editor-container').innerHTML = '<div style="padding: 2rem; text-align: center; color: #999;">Failed to load editor</div>';
    }
  }

  // Watch for theme changes
  function observeThemeChanges() {
    const observer = new MutationObserver(() => {
      if (window.monacoInstance && window.monacoEditor) {
        const container = document.getElementById('editor-container');
        // Re-initialize if container was destroyed
        if (!container || !container.parentElement) {
          initMonaco();
        } else {
          // Update theme on existing editor
          window.monacoInstance.editor.setTheme(getCurrentTheme());
        }
      }
    });

    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
  }
`}}
  />
</div>