llmapi-v2 2.1.0

package/views/pages/docs.ejs

@@ -0,0 +1,807 @@
+<%- include('../partials/header', { pageTitle: 'API Documentation' }) %>
+<%- include('../partials/nav') %>
+
+<!-- SEO structured data -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "TechArticle",
+  "headline": "LLM API Documentation — Claude Code API Proxy",
+  "description": "Complete API documentation for LLM API, a high-availability Claude Code API proxy service. Includes quick start guide, authentication, endpoint reference, model mapping, error handling, and rate limits.",
+  "url": "https://llmapi.pro/docs",
+  "publisher": {
+    "@type": "Organization",
+    "name": "LLM API"
+  }
+}
+</script>
+
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+  <div class="flex gap-8">
+
+    <!-- Sticky sidebar navigation (desktop) -->
+    <aside class="hidden lg:block w-60 flex-shrink-0">
+      <nav class="sticky top-24 space-y-1">
+        <p class="px-3 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">Getting Started</p>
+        <a href="#quickstart" class="doc-nav-link block px-3 py-2 text-sm font-medium rounded-lg text-claude-orange bg-orange-50">Quick Start</a>
+        <a href="#claude-code" class="doc-nav-link block px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:text-claude-orange hover:bg-orange-50/50 transition-colors">Claude Code Integration</a>
+        <a href="#authentication" class="doc-nav-link block px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:text-claude-orange hover:bg-orange-50/50 transition-colors">Authentication</a>
+        <p class="px-3 pt-4 pb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">Reference</p>
+        <a href="#api-reference" class="doc-nav-link block px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:text-claude-orange hover:bg-orange-50/50 transition-colors">API Reference</a>
+        <a href="#models" class="doc-nav-link block px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:text-claude-orange hover:bg-orange-50/50 transition-colors">Models</a>
+        <a href="#errors" class="doc-nav-link block px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:text-claude-orange hover:bg-orange-50/50 transition-colors">Error Handling</a>
+        <a href="#rate-limits" class="doc-nav-link block px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:text-claude-orange hover:bg-orange-50/50 transition-colors">Rate Limits</a>
+      </nav>
+    </aside>
+
+    <!-- Mobile table of contents -->
+    <div class="lg:hidden fixed bottom-4 right-4 z-40">
+      <button onclick="document.getElementById('mobileToc').classList.toggle('hidden')" class="w-12 h-12 bg-claude-orange text-white rounded-full shadow-lg flex items-center justify-center hover:bg-opacity-90 transition-colors">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/></svg>
+      </button>
+      <div id="mobileToc" class="hidden absolute bottom-14 right-0 w-56 bg-white rounded-xl shadow-xl border border-gray-100 py-2 mb-2">
+        <a href="#quickstart" onclick="document.getElementById('mobileToc').classList.add('hidden')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Quick Start</a>
+        <a href="#claude-code" onclick="document.getElementById('mobileToc').classList.add('hidden')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Claude Code Integration</a>
+        <a href="#authentication" onclick="document.getElementById('mobileToc').classList.add('hidden')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Authentication</a>
+        <a href="#api-reference" onclick="document.getElementById('mobileToc').classList.add('hidden')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">API Reference</a>
+        <a href="#models" onclick="document.getElementById('mobileToc').classList.add('hidden')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Models</a>
+        <a href="#errors" onclick="document.getElementById('mobileToc').classList.add('hidden')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Error Handling</a>
+        <a href="#rate-limits" onclick="document.getElementById('mobileToc').classList.add('hidden')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Rate Limits</a>
+      </div>
+    </div>
+
+    <!-- Main content -->
+    <main class="flex-1 min-w-0">
+
+      <!-- ============================================================ -->
+      <!-- QUICK START                                                   -->
+      <!-- ============================================================ -->
+      <section id="quickstart" class="mb-16 scroll-mt-24">
+        <h1 class="text-3xl font-bold text-claude-dark mb-3">API Documentation</h1>
+        <p class="text-gray-600 mb-8 leading-relaxed max-w-2xl">LLM API is a high-availability Claude Code API proxy fully compatible with the Anthropic API format. Change your Base URL and start building &mdash; no other code changes required.</p>
+
+        <!-- Base URL -->
+        <div class="bg-white rounded-xl border border-gray-100 p-6 shadow-sm mb-8">
+          <h2 class="text-lg font-semibold text-claude-dark mb-2">Base URL</h2>
+          <div class="relative">
+            <pre class="bg-gray-900 text-green-400 rounded-lg p-4 text-sm font-mono">https://llmapi.pro</pre>
+            <button onclick="copyCode(this)" class="absolute top-2 right-2 px-2 py-1 text-xs text-gray-400 bg-gray-800 rounded hover:text-white transition-colors">Copy</button>
+          </div>
+        </div>
+
+        <!-- 3-step setup -->
+        <h2 class="text-xl font-semibold text-claude-dark mb-4">Get Started in 3 Steps</h2>
+
+        <!-- Step 1 -->
+        <div class="flex items-start gap-4 mb-6">
+          <span class="flex-shrink-0 w-8 h-8 bg-claude-orange text-white rounded-full flex items-center justify-center text-sm font-bold">1</span>
+          <div class="flex-1 min-w-0">
+            <h3 class="text-base font-semibold text-claude-dark mb-2">Create an account and get your API key</h3>
+            <p class="text-sm text-gray-600 mb-3"><a href="/register" class="text-claude-orange hover:underline">Register for free</a>, then copy your API key from the <a href="/dashboard" class="text-claude-orange hover:underline">Dashboard</a>.</p>
+          </div>
+        </div>
+
+        <!-- Step 2 -->
+        <div class="flex items-start gap-4 mb-6">
+          <span class="flex-shrink-0 w-8 h-8 bg-claude-orange text-white rounded-full flex items-center justify-center text-sm font-bold">2</span>
+          <div class="flex-1 min-w-0">
+            <h3 class="text-base font-semibold text-claude-dark mb-2">Set your environment variables</h3>
+
+            <!-- OS tabs -->
+            <div class="mb-3">
+              <div class="flex border-b border-gray-200">
+                <button onclick="switchTab(this, 'setup-mac')" class="os-tab px-4 py-2 text-sm font-medium border-b-2 border-claude-orange text-claude-orange" data-group="setup">macOS / Linux</button>
+                <button onclick="switchTab(this, 'setup-win')" class="os-tab px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700" data-group="setup">Windows PowerShell</button>
+              </div>
+            </div>
+            <div id="setup-mac" class="tab-panel relative">
+              <pre class="bg-gray-900 text-green-400 rounded-lg p-4 text-sm font-mono overflow-x-auto leading-relaxed"><code>export ANTHROPIC_BASE_URL=https://llmapi.pro
+export ANTHROPIC_API_KEY=your-api-key</code></pre>
+              <button onclick="copyCode(this)" class="absolute top-2 right-2 px-2 py-1 text-xs text-gray-400 bg-gray-800 rounded hover:text-white transition-colors">Copy</button>
+            </div>
+            <div id="setup-win" class="tab-panel relative hidden">
+              <pre class="bg-gray-900 text-green-400 rounded-lg p-4 text-sm font-mono overflow-x-auto leading-relaxed"><code>$env:ANTHROPIC_BASE_URL="https://llmapi.pro"
+$env:ANTHROPIC_API_KEY="your-api-key"</code></pre>
+              <button onclick="copyCode(this)" class="absolute top-2 right-2 px-2 py-1 text-xs text-gray-400 bg-gray-800 rounded hover:text-white transition-colors">Copy</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Step 3 -->
+        <div class="flex items-start gap-4 mb-6">
+          <span class="flex-shrink-0 w-8 h-8 bg-claude-orange text-white rounded-full flex items-center justify-center text-sm font-bold">3</span>
+          <div class="flex-1 min-w-0">
+            <h3 class="text-base font-semibold text-claude-dark mb-2">Send your first request</h3>
+
+            <div class="mb-3">
+              <div class="flex border-b border-gray-200">
+                <button onclick="switchTab(this, 'first-curl')" class="os-tab px-4 py-2 text-sm font-medium border-b-2 border-claude-orange text-claude-orange" data-group="first">cURL (macOS/Linux)</button>
+                <button onclick="switchTab(this, 'first-win')" class="os-tab px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700" data-group="first">PowerShell</button>
+              </div>
+            </div>
+            <div id="first-curl" class="tab-panel relative">
+              <pre class="bg-gray-900 text-green-400 rounded-lg p-4 text-sm font-mono overflow-x-auto leading-relaxed"><code>curl https://llmapi.pro/v1/messages \
+  -H "Content-Type: application/json" \
+  -H "x-api-key: $ANTHROPIC_API_KEY" \
+  -H "anthropic-version: 2023-06-01" \
+  -d '{
+    "model": "claude-sonnet-4-20250514",
+    "max_tokens": 1024,
+    "messages": [
+      {"role": "user", "content": "Hello! What can you do?"}
+    ]
+  }'</code></pre>
+              <button onclick="copyCode(this)" class="absolute top-2 right-2 px-2 py-1 text-xs text-gray-400 bg-gray-800 rounded hover:text-white transition-colors">Copy</button>
+            </div>
+            <div id="first-win" class="tab-panel relative hidden">
+              <pre class="bg-gray-900 text-green-400 rounded-lg p-4 text-sm font-mono overflow-x-auto leading-relaxed"><code>$body = @{
+  model = "claude-sonnet-4-20250514"
+  max_tokens = 1024
+  messages = @(
+    @{ role = "user"; content = "Hello! What can you do?" }
+  )
+} | ConvertTo-Json -Depth 4
+
+Invoke-RestMethod -Uri "https://llmapi.pro/v1/messages" `
+  -Method POST `
+  -Headers @{
+    "x-api-key" = $env:ANTHROPIC_API_KEY
+    "anthropic-version" = "2023-06-01"
+    "Content-Type" = "application/json"
+  } `
+  -Body $body</code></pre>
+              <button onclick="copyCode(this)" class="absolute top-2 right-2 px-2 py-1 text-xs text-gray-400 bg-gray-800 rounded hover:text-white transition-colors">Copy</button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ============================================================ -->
+      <!-- CLAUDE CODE INTEGRATION                                       -->
+      <!-- ============================================================ -->
+      <section id="claude-code" class="mb-16 scroll-mt-24">
+        <h2 class="text-2xl font-bold text-claude-dark mb-4">Claude Code Integration</h2>
+        <p class="text-gray-600 mb-6 leading-relaxed">Configure the <a href="https://docs.anthropic.com/en/docs/claude-code" target="_blank" rel="noopener" class="text-claude-orange hover:underline">Claude Code CLI</a> to route all requests through LLM API. Set two environment variables and launch Claude Code as usual &mdash; no plugins or patches needed.</p>
+
+        <!-- macOS / Linux -->
+        <h3 class="text-base font-semibold text-claude-dark mb-3">macOS / Linux</h3>
+        <div class="relative mb-6">
+          <pre class="bg-gray-900 text-green-400 rounded-lg p-4 text-sm font-mono overflow-x-auto leading-relaxed"><code># Temporary (current shell session only)
+export ANTHROPIC_BASE_URL=https://llmapi.pro
+export ANTHROPIC_API_KEY=your-api-key
+
+# Permanent (add to ~/.bashrc or ~/.zshrc)
+echo 'export ANTHROPIC_BASE_URL=https://llmapi.pro' >> ~/.zshrc
+echo 'export ANTHROPIC_API_KEY=your-api-key' >> ~/.zshrc
+source ~/.zshrc
+
+# Then simply launch Claude Code
+claude</code></pre>
+          <button onclick="copyCode(this)" class="absolute top-2 right-2 px-2 py-1 text-xs text-gray-400 bg-gray-800 rounded hover:text-white transition-colors">Copy</button>
+        </div>
+
+        <!-- Windows PowerShell -->
+        <h3 class="text-base font-semibold text-claude-dark mb-3">Windows PowerShell</h3>
+        <div class="relative mb-8">
+          <pre class="bg-gray-900 text-green-400 rounded-lg p-4 text-sm font-mono overflow-x-auto leading-relaxed"><code># Temporary (current session only)
+$env:ANTHROPIC_BASE_URL="https://llmapi.pro"
+$env:ANTHROPIC_API_KEY="your-api-key"
+
+# Permanent (user-level environment variable)
+[System.Environment]::SetEnvironmentVariable("ANTHROPIC_BASE_URL", "https://llmapi.pro", "User")
+[System.Environment]::SetEnvironmentVariable("ANTHROPIC_API_KEY", "your-api-key", "User")
+
+# Then launch Claude Code
+claude</code></pre>
+          <button onclick="copyCode(this)" class="absolute top-2 right-2 px-2 py-1 text-xs text-gray-400 bg-gray-800 rounded hover:text-white transition-colors">Copy</button>
+        </div>
+
+        <!-- Environment variables explanation -->
+        <div class="bg-white rounded-xl border border-gray-100 p-6 shadow-sm mb-8">
+          <h3 class="text-base font-semibold text-claude-dark mb-3">Environment Variables</h3>
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="border-b border-gray-100">
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Variable</th>
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Required</th>
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Description</th>
+                </tr>
+              </thead>
+              <tbody class="text-gray-600">
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1.5 py-0.5 rounded">ANTHROPIC_BASE_URL</code></td>
+                  <td class="py-2 px-2"><span class="text-claude-orange font-medium">Yes</span></td>
+                  <td class="py-2 px-2">Set to <code class="text-xs font-mono bg-gray-50 px-1 rounded">https://llmapi.pro</code> to proxy requests through LLM API.</td>
+                </tr>
+                <tr>
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1.5 py-0.5 rounded">ANTHROPIC_API_KEY</code></td>
+                  <td class="py-2 px-2"><span class="text-claude-orange font-medium">Yes</span></td>
+                  <td class="py-2 px-2">Your LLM API key (starts with <code class="text-xs font-mono bg-gray-50 px-1 rounded">sk-llmapi-</code>). Get it from the <a href="/dashboard" class="text-claude-orange hover:underline">Dashboard</a>.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- Model mapping table -->
+        <div class="bg-white rounded-xl border border-gray-100 p-6 shadow-sm">
+          <h3 class="text-base font-semibold text-claude-dark mb-2">Model Mapping</h3>
+          <p class="text-sm text-gray-600 mb-4">When Claude Code sends a request, LLM API transparently maps model identifiers to the best-available backend. You can use any standard Anthropic model name.</p>
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="border-b border-gray-100">
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Model Name</th>
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Optimized For</th>
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Notes</th>
+                </tr>
+              </thead>
+              <tbody class="text-gray-600">
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1.5 py-0.5 rounded">claude-sonnet-4-6</code></td>
+                  <td class="py-2 px-2">Code generation & tool use</td>
+                  <td class="py-2 px-2">Default Claude Code model. Routed to our best coding model.</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1.5 py-0.5 rounded">claude-opus-4-6</code></td>
+                  <td class="py-2 px-2">Complex reasoning</td>
+                  <td class="py-2 px-2">Highest-capability model for architecture and design tasks.</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1.5 py-0.5 rounded">claude-haiku-4-5</code></td>
+                  <td class="py-2 px-2">Fast & affordable</td>
+                  <td class="py-2 px-2">Quick responses for simple tasks. Lowest cost per token.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+            <p class="text-sm text-blue-800"><strong>Tip:</strong> Model routing is handled automatically. You do not need to change the model parameter in Claude Code &mdash; LLM API takes care of it.</p>
+          </div>
+        </div>
+      </section>
+
+      <!-- ============================================================ -->
+      <!-- AUTHENTICATION                                                -->
+      <!-- ============================================================ -->
+      <section id="authentication" class="mb-16 scroll-mt-24">
+        <h2 class="text-2xl font-bold text-claude-dark mb-4">Authentication</h2>
+        <p class="text-gray-600 mb-6 leading-relaxed">Every API request must include a valid API key. You can pass your key using either of the two headers below. Create and manage keys in your <a href="/dashboard" class="text-claude-orange hover:underline">Dashboard</a>.</p>
+
+        <div class="bg-white rounded-xl border border-gray-100 p-6 shadow-sm mb-6">
+          <h3 class="text-base font-semibold text-claude-dark mb-3">Supported Auth Headers</h3>
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="border-b border-gray-100">
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Header</th>
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Format</th>
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Description</th>
+                </tr>
+              </thead>
+              <tbody class="text-gray-600">
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1.5 py-0.5 rounded">x-api-key</code></td>
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">sk-llmapi-xxxx</code></td>
+                  <td class="py-2 px-2">Primary method. Compatible with the Anthropic SDK.</td>
+                </tr>
+                <tr>
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1.5 py-0.5 rounded">Authorization</code></td>
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">Bearer sk-llmapi-xxxx</code></td>
+                  <td class="py-2 px-2">Alternative Bearer-token method.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <h3 class="text-base font-semibold text-claude-dark mb-3">Example: cURL with x-api-key</h3>
+        <div class="relative mb-6">
+          <pre class="bg-gray-900 text-green-400 rounded-lg p-4 text-sm font-mono overflow-x-auto leading-relaxed"><code>curl https://llmapi.pro/v1/messages \
+  -H "Content-Type: application/json" \
+  -H "x-api-key: sk-llmapi-xxxxxxxxxxxxxxxxxxxxxxxx" \
+  -H "anthropic-version: 2023-06-01" \
+  -d '{
+    "model": "claude-sonnet-4-20250514",
+    "max_tokens": 1024,
+    "messages": [
+      {"role": "user", "content": "Explain quantum computing in simple terms."}
+    ]
+  }'</code></pre>
+          <button onclick="copyCode(this)" class="absolute top-2 right-2 px-2 py-1 text-xs text-gray-400 bg-gray-800 rounded hover:text-white transition-colors">Copy</button>
+        </div>
+
+        <div class="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+          <p class="text-sm text-yellow-800"><strong>Security note:</strong> Never expose your API key in client-side code or public repositories. If a key is compromised, delete it immediately from the Dashboard and create a new one.</p>
+        </div>
+      </section>
+
+      <!-- ============================================================ -->
+      <!-- API REFERENCE                                                 -->
+      <!-- ============================================================ -->
+      <section id="api-reference" class="mb-16 scroll-mt-24">
+        <h2 class="text-2xl font-bold text-claude-dark mb-4">API Reference</h2>
+
+        <!-- POST /v1/messages -->
+        <div class="bg-white rounded-xl border border-gray-100 p-6 shadow-sm mb-8">
+          <div class="flex items-center space-x-3 mb-2">
+            <span class="px-2.5 py-1 bg-green-100 text-green-700 text-xs font-bold rounded">POST</span>
+            <code class="text-sm font-mono text-claude-dark">/v1/messages</code>
+          </div>
+          <p class="text-gray-600 text-sm mb-6">Create a message. Fully compatible with the <a href="https://docs.anthropic.com/en/api/messages" target="_blank" rel="noopener" class="text-claude-orange hover:underline">Anthropic Messages API</a>.</p>
+
+          <h3 class="text-base font-semibold text-claude-dark mb-3">Request Parameters</h3>
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="border-b border-gray-100">
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Parameter</th>
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Type</th>
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Required</th>
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Description</th>
+                </tr>
+              </thead>
+              <tbody class="text-gray-600">
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">model</code></td>
+                  <td class="py-2 px-2">string</td>
+                  <td class="py-2 px-2"><span class="text-claude-orange font-medium">Yes</span></td>
+                  <td class="py-2 px-2">Model identifier, e.g. <code class="text-xs font-mono bg-gray-50 px-1 rounded">claude-sonnet-4-20250514</code></td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">messages</code></td>
+                  <td class="py-2 px-2">array</td>
+                  <td class="py-2 px-2"><span class="text-claude-orange font-medium">Yes</span></td>
+                  <td class="py-2 px-2">Array of message objects with <code class="text-xs font-mono bg-gray-50 px-1 rounded">role</code> (<code class="text-xs font-mono">user</code> | <code class="text-xs font-mono">assistant</code>) and <code class="text-xs font-mono bg-gray-50 px-1 rounded">content</code>.</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">max_tokens</code></td>
+                  <td class="py-2 px-2">integer</td>
+                  <td class="py-2 px-2"><span class="text-claude-orange font-medium">Yes</span></td>
+                  <td class="py-2 px-2">Maximum number of tokens to generate in the response.</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">system</code></td>
+                  <td class="py-2 px-2">string</td>
+                  <td class="py-2 px-2">No</td>
+                  <td class="py-2 px-2">System prompt that sets behavior and context for the model.</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">temperature</code></td>
+                  <td class="py-2 px-2">number</td>
+                  <td class="py-2 px-2">No</td>
+                  <td class="py-2 px-2">Sampling temperature between 0 and 1. Lower values are more deterministic.</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">tools</code></td>
+                  <td class="py-2 px-2">array</td>
+                  <td class="py-2 px-2">No</td>
+                  <td class="py-2 px-2">List of tool definitions the model may use (function calling).</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">tool_choice</code></td>
+                  <td class="py-2 px-2">object</td>
+                  <td class="py-2 px-2">No</td>
+                  <td class="py-2 px-2">Controls tool use: <code class="text-xs font-mono">auto</code>, <code class="text-xs font-mono">any</code>, or <code class="text-xs font-mono">tool</code> with a specific name.</td>
+                </tr>
+                <tr>
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">stream</code></td>
+                  <td class="py-2 px-2">boolean</td>
+                  <td class="py-2 px-2">No</td>
+                  <td class="py-2 px-2">Enable Server-Sent Events streaming. Default: <code class="text-xs font-mono">false</code>.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- Non-streaming response -->
+        <h3 class="text-base font-semibold text-claude-dark mb-3">Non-Streaming Response</h3>
+        <p class="text-sm text-gray-600 mb-3">When <code class="text-xs font-mono bg-gray-100 px-1.5 py-0.5 rounded">stream</code> is <code class="text-xs font-mono">false</code> (default), the API returns a single JSON object:</p>
+        <div class="relative mb-8">
+          <pre class="bg-gray-900 text-green-400 rounded-lg p-4 text-sm font-mono overflow-x-auto leading-relaxed"><code>{
+  "id": "msg_01XFDUDYJgAACzvnptvVoYEL",
+  "type": "message",
+  "role": "assistant",
+  "content": [
+    {
+      "type": "text",
+      "text": "Hello! I can help you with a wide range of tasks..."
+    }
+  ],
+  "model": "claude-sonnet-4-20250514",
+  "stop_reason": "end_turn",
+  "stop_sequence": null,
+  "usage": {
+    "input_tokens": 12,
+    "output_tokens": 58
+  }
+}</code></pre>
+          <button onclick="copyCode(this)" class="absolute top-2 right-2 px-2 py-1 text-xs text-gray-400 bg-gray-800 rounded hover:text-white transition-colors">Copy</button>
+        </div>
+
+        <!-- Streaming response -->
+        <h3 class="text-base font-semibold text-claude-dark mb-3">Streaming Response (SSE)</h3>
+        <p class="text-sm text-gray-600 mb-3">When <code class="text-xs font-mono bg-gray-100 px-1.5 py-0.5 rounded">stream</code> is <code class="text-xs font-mono">true</code>, the response is delivered as Server-Sent Events. Each event has an <code class="text-xs font-mono bg-gray-100 px-1 rounded">event</code> field and a JSON <code class="text-xs font-mono bg-gray-100 px-1 rounded">data</code> field:</p>
+        <div class="relative mb-6">
+          <pre class="bg-gray-900 text-green-400 rounded-lg p-4 text-sm font-mono overflow-x-auto leading-relaxed"><code>event: message_start
+data: {"type":"message_start","message":{"id":"msg_01...","type":"message","role":"assistant","content":[],"model":"claude-sonnet-4-20250514","usage":{"input_tokens":12,"output_tokens":0}}}
+
+event: content_block_start
+data: {"type":"content_block_start","index":0,"content_block":{"type":"text","text":""}}
+
+event: content_block_delta
+data: {"type":"content_block_delta","index":0,"delta":{"type":"text_delta","text":"Hello"}}
+
+event: content_block_delta
+data: {"type":"content_block_delta","index":0,"delta":{"type":"text_delta","text":"! I can"}}
+
+event: content_block_stop
+data: {"type":"content_block_stop","index":0}
+
+event: message_delta
+data: {"type":"message_delta","delta":{"stop_reason":"end_turn","stop_sequence":null},"usage":{"output_tokens":58}}
+
+event: message_stop
+data: {"type":"message_stop"}</code></pre>
+          <button onclick="copyCode(this)" class="absolute top-2 right-2 px-2 py-1 text-xs text-gray-400 bg-gray-800 rounded hover:text-white transition-colors">Copy</button>
+        </div>
+
+        <div class="bg-white rounded-xl border border-gray-100 p-6 shadow-sm">
+          <h4 class="text-sm font-semibold text-claude-dark mb-3">SSE Event Types</h4>
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="border-b border-gray-100">
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Event</th>
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Description</th>
+                </tr>
+              </thead>
+              <tbody class="text-gray-600">
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">message_start</code></td>
+                  <td class="py-2 px-2">Sent once at the beginning. Contains the message object with metadata.</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">content_block_start</code></td>
+                  <td class="py-2 px-2">Marks the start of a new content block (text or tool_use).</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">content_block_delta</code></td>
+                  <td class="py-2 px-2">Incremental content update. Concatenate <code class="text-xs font-mono">delta.text</code> to build the full response.</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">content_block_stop</code></td>
+                  <td class="py-2 px-2">The content block is complete.</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">message_delta</code></td>
+                  <td class="py-2 px-2">Final message metadata including <code class="text-xs font-mono">stop_reason</code> and total usage.</td>
+                </tr>
+                <tr>
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1 rounded">message_stop</code></td>
+                  <td class="py-2 px-2">End of stream. Close the connection.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+
+      <!-- ============================================================ -->
+      <!-- MODELS                                                        -->
+      <!-- ============================================================ -->
+      <section id="models" class="mb-16 scroll-mt-24">
+        <h2 class="text-2xl font-bold text-claude-dark mb-4">Models</h2>
+        <p class="text-gray-600 mb-6 leading-relaxed">LLM API accepts all standard Anthropic model identifiers. Requests are routed to the optimal backend provider for reliability and performance.</p>
+
+        <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="border-b border-gray-100 bg-gray-50/50">
+                  <th class="text-left py-3 px-4 font-medium text-gray-500">Model ID</th>
+                  <th class="text-left py-3 px-4 font-medium text-gray-500">Display Name</th>
+                  <th class="text-left py-3 px-4 font-medium text-gray-500">Best For</th>
+                  <th class="text-left py-3 px-4 font-medium text-gray-500">Context Window</th>
+                </tr>
+              </thead>
+              <tbody class="text-gray-600">
+                <tr class="border-b border-gray-50">
+                  <td class="py-3 px-4"><code class="text-xs font-mono bg-gray-50 px-1.5 py-0.5 rounded">claude-opus-4-20250514</code></td>
+                  <td class="py-3 px-4 font-medium">Claude Opus 4</td>
+                  <td class="py-3 px-4">Complex reasoning, advanced coding, deep analysis</td>
+                  <td class="py-3 px-4">200K tokens</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-3 px-4"><code class="text-xs font-mono bg-gray-50 px-1.5 py-0.5 rounded">claude-sonnet-4-20250514</code></td>
+                  <td class="py-3 px-4 font-medium">Claude Sonnet 4</td>
+                  <td class="py-3 px-4">Balanced performance, everyday coding, general tasks</td>
+                  <td class="py-3 px-4">200K tokens</td>
+                </tr>
+                <tr>
+                  <td class="py-3 px-4"><code class="text-xs font-mono bg-gray-50 px-1.5 py-0.5 rounded">claude-haiku-4-20250514</code></td>
+                  <td class="py-3 px-4 font-medium">Claude Haiku 4</td>
+                  <td class="py-3 px-4">Fast responses, simple tasks, high-throughput workloads</td>
+                  <td class="py-3 px-4">200K tokens</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <p class="text-sm text-gray-500 mt-3">All official Anthropic model identifiers are supported, including versioned aliases.</p>
+      </section>
+
+      <!-- ============================================================ -->
+      <!-- ERROR HANDLING                                                -->
+      <!-- ============================================================ -->
+      <section id="errors" class="mb-16 scroll-mt-24">
+        <h2 class="text-2xl font-bold text-claude-dark mb-4">Error Handling</h2>
+        <p class="text-gray-600 mb-6 leading-relaxed">LLM API uses standard HTTP status codes. Error responses always return a JSON body with a machine-readable <code class="text-xs font-mono bg-gray-100 px-1.5 py-0.5 rounded">type</code> and a human-readable <code class="text-xs font-mono bg-gray-100 px-1.5 py-0.5 rounded">message</code>.</p>
+
+        <!-- Error response format -->
+        <h3 class="text-base font-semibold text-claude-dark mb-3">Error Response Format</h3>
+        <div class="relative mb-8">
+          <pre class="bg-gray-900 text-green-400 rounded-lg p-4 text-sm font-mono overflow-x-auto leading-relaxed"><code>{
+  "type": "error",
+  "error": {
+    "type": "authentication_error",
+    "message": "Invalid API key provided."
+  }
+}</code></pre>
+          <button onclick="copyCode(this)" class="absolute top-2 right-2 px-2 py-1 text-xs text-gray-400 bg-gray-800 rounded hover:text-white transition-colors">Copy</button>
+        </div>
+
+        <!-- Status codes -->
+        <h3 class="text-base font-semibold text-claude-dark mb-3">HTTP Status Codes</h3>
+        <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="border-b border-gray-100 bg-gray-50/50">
+                  <th class="text-left py-3 px-4 font-medium text-gray-500">Status</th>
+                  <th class="text-left py-3 px-4 font-medium text-gray-500">Error Type</th>
+                  <th class="text-left py-3 px-4 font-medium text-gray-500">Description</th>
+                  <th class="text-left py-3 px-4 font-medium text-gray-500">Recommended Action</th>
+                </tr>
+              </thead>
+              <tbody class="text-gray-600">
+                <tr class="border-b border-gray-50">
+                  <td class="py-3 px-4"><code class="text-xs font-mono bg-red-50 text-red-700 px-1.5 py-0.5 rounded">400</code></td>
+                  <td class="py-3 px-4"><code class="text-xs font-mono">invalid_request_error</code></td>
+                  <td class="py-3 px-4">Malformed request body or missing required parameters.</td>
+                  <td class="py-3 px-4">Verify your JSON payload and required fields.</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-3 px-4"><code class="text-xs font-mono bg-red-50 text-red-700 px-1.5 py-0.5 rounded">401</code></td>
+                  <td class="py-3 px-4"><code class="text-xs font-mono">authentication_error</code></td>
+                  <td class="py-3 px-4">Invalid or missing API key.</td>
+                  <td class="py-3 px-4">Check that <code class="text-xs font-mono">x-api-key</code> is set correctly.</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-3 px-4"><code class="text-xs font-mono bg-red-50 text-red-700 px-1.5 py-0.5 rounded">403</code></td>
+                  <td class="py-3 px-4"><code class="text-xs font-mono">permission_error</code></td>
+                  <td class="py-3 px-4">Insufficient permissions or account suspended.</td>
+                  <td class="py-3 px-4">Verify your account status and plan entitlements.</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-3 px-4"><code class="text-xs font-mono bg-yellow-50 text-yellow-700 px-1.5 py-0.5 rounded">429</code></td>
+                  <td class="py-3 px-4"><code class="text-xs font-mono">rate_limit_error</code></td>
+                  <td class="py-3 px-4">Too many requests. Rate limit exceeded.</td>
+                  <td class="py-3 px-4">Back off and retry. See <a href="#rate-limits" class="text-claude-orange hover:underline">Rate Limits</a>.</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-3 px-4"><code class="text-xs font-mono bg-red-50 text-red-700 px-1.5 py-0.5 rounded">500</code></td>
+                  <td class="py-3 px-4"><code class="text-xs font-mono">api_error</code></td>
+                  <td class="py-3 px-4">Internal server error.</td>
+                  <td class="py-3 px-4">Retry after a brief delay. Contact support if it persists.</td>
+                </tr>
+                <tr>
+                  <td class="py-3 px-4"><code class="text-xs font-mono bg-red-50 text-red-700 px-1.5 py-0.5 rounded">503</code></td>
+                  <td class="py-3 px-4"><code class="text-xs font-mono">overloaded_error</code></td>
+                  <td class="py-3 px-4">Upstream provider is temporarily overloaded.</td>
+                  <td class="py-3 px-4">Wait a moment and retry with exponential backoff.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+
+      <!-- ============================================================ -->
+      <!-- RATE LIMITS                                                   -->
+      <!-- ============================================================ -->
+      <section id="rate-limits" class="mb-16 scroll-mt-24">
+        <h2 class="text-2xl font-bold text-claude-dark mb-4">Rate Limits</h2>
+        <p class="text-gray-600 mb-6 leading-relaxed">Rate limits vary by plan and are enforced per API key. When you exceed a limit, the API returns a <code class="text-xs font-mono bg-gray-100 px-1.5 py-0.5 rounded">429</code> status code. Upgrade your plan for higher throughput.</p>
+
+        <!-- Per-plan limits -->
+        <h3 class="text-base font-semibold text-claude-dark mb-3">Per-Plan Limits</h3>
+        <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden mb-8">
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="border-b border-gray-100 bg-gray-50/50">
+                  <th class="text-left py-3 px-4 font-medium text-gray-500">Plan</th>
+                  <th class="text-left py-3 px-4 font-medium text-gray-500">Requests / min</th>
+                  <th class="text-left py-3 px-4 font-medium text-gray-500">Requests / day</th>
+                  <th class="text-left py-3 px-4 font-medium text-gray-500">Monthly Token Quota</th>
+                </tr>
+              </thead>
+              <tbody class="text-gray-600">
+                <tr class="border-b border-gray-50">
+                  <td class="py-3 px-4 font-medium">Free</td>
+                  <td class="py-3 px-4">10</td>
+                  <td class="py-3 px-4">100</td>
+                  <td class="py-3 px-4">100K</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-3 px-4 font-medium">Basic</td>
+                  <td class="py-3 px-4">30</td>
+                  <td class="py-3 px-4">1,000</td>
+                  <td class="py-3 px-4">5M</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-3 px-4 font-medium">Pro</td>
+                  <td class="py-3 px-4">60</td>
+                  <td class="py-3 px-4">5,000</td>
+                  <td class="py-3 px-4">50M</td>
+                </tr>
+                <tr>
+                  <td class="py-3 px-4 font-medium">Enterprise</td>
+                  <td class="py-3 px-4">120</td>
+                  <td class="py-3 px-4">Unlimited</td>
+                  <td class="py-3 px-4">500M</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- Rate limit headers -->
+        <h3 class="text-base font-semibold text-claude-dark mb-3">Rate Limit Headers</h3>
+        <p class="text-sm text-gray-600 mb-3">Every API response includes headers to help you track your usage in real time:</p>
+        <div class="relative mb-6">
+          <pre class="bg-gray-900 text-green-400 rounded-lg p-4 text-sm font-mono overflow-x-auto leading-relaxed"><code>x-ratelimit-limit: 60
+x-ratelimit-remaining: 58
+x-ratelimit-reset: 2026-04-08T12:01:00Z</code></pre>
+          <button onclick="copyCode(this)" class="absolute top-2 right-2 px-2 py-1 text-xs text-gray-400 bg-gray-800 rounded hover:text-white transition-colors">Copy</button>
+        </div>
+
+        <div class="bg-white rounded-xl border border-gray-100 p-6 shadow-sm">
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="border-b border-gray-100">
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Header</th>
+                  <th class="text-left py-2 px-2 font-medium text-gray-500">Description</th>
+                </tr>
+              </thead>
+              <tbody class="text-gray-600">
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1.5 py-0.5 rounded">x-ratelimit-limit</code></td>
+                  <td class="py-2 px-2">Maximum number of requests allowed per minute for your plan.</td>
+                </tr>
+                <tr class="border-b border-gray-50">
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1.5 py-0.5 rounded">x-ratelimit-remaining</code></td>
+                  <td class="py-2 px-2">Number of requests remaining in the current rate-limit window.</td>
+                </tr>
+                <tr>
+                  <td class="py-2 px-2"><code class="text-xs font-mono bg-gray-50 px-1.5 py-0.5 rounded">x-ratelimit-reset</code></td>
+                  <td class="py-2 px-2">ISO 8601 timestamp when the rate-limit window resets.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+
+      <!-- CTA -->
+      <section class="mb-16">
+        <div class="bg-gradient-to-r from-claude-orange/10 to-claude-orange/5 rounded-2xl p-8 text-center border border-claude-orange/10">
+          <h2 class="text-xl font-bold text-claude-dark mb-2">Ready to get started?</h2>
+          <p class="text-gray-600 mb-6">Create a free account and send your first API request in under a minute.</p>
+          <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
+            <a href="/register" class="inline-flex items-center px-6 py-3 text-sm font-medium text-white bg-claude-orange rounded-xl hover:bg-opacity-90 transition-all shadow-sm hover:shadow">
+              Sign Up Free
+              <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+            </a>
+            <a href="/pricing" class="inline-flex items-center px-6 py-3 text-sm font-medium text-claude-dark bg-white border border-gray-200 rounded-xl hover:border-claude-orange hover:text-claude-orange transition-all">
+              View Pricing
+            </a>
+          </div>
+        </div>
+      </section>
+
+    </main>
+  </div>
+</div>
+
+<!-- Footer -->
+<footer class="border-t border-gray-100 bg-white">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
+      <p class="text-sm text-gray-400">&copy; 2025 LLM API. All rights reserved.</p>
+      <div class="flex items-center space-x-6">
+        <a href="/docs" class="text-sm text-gray-400 hover:text-claude-orange transition-colors">Docs</a>
+        <a href="/pricing" class="text-sm text-gray-400 hover:text-claude-orange transition-colors">Pricing</a>
+      </div>
+    </div>
+  </div>
+</footer>
+
+<script>
+  // ---- Copy code block ----
+  function copyCode(btn) {
+    const pre = btn.closest('.relative').querySelector('pre');
+    const code = pre.querySelector('code');
+    const text = code ? code.textContent : pre.textContent;
+    navigator.clipboard.writeText(text).then(function() {
+      var orig = btn.textContent;
+      btn.textContent = 'Copied!';
+      setTimeout(function() { btn.textContent = orig; }, 2000);
+    });
+  }
+
+  // ---- OS tab switcher ----
+  function switchTab(btn, panelId) {
+    // Determine group from sibling tabs
+    var tabBar = btn.parentElement;
+    var tabs = tabBar.querySelectorAll('.os-tab');
+    tabs.forEach(function(t) {
+      t.classList.remove('border-claude-orange', 'text-claude-orange');
+      t.classList.add('border-transparent', 'text-gray-500');
+    });
+    btn.classList.remove('border-transparent', 'text-gray-500');
+    btn.classList.add('border-claude-orange', 'text-claude-orange');
+
+    // Hide sibling panels, show target
+    var container = tabBar.closest('.flex-1') || tabBar.parentElement.parentElement;
+    var panels = container.querySelectorAll('.tab-panel');
+    panels.forEach(function(p) { p.classList.add('hidden'); });
+    document.getElementById(panelId).classList.remove('hidden');
+  }
+
+  // ---- Sidebar scroll-spy ----
+  function updateActiveNav() {
+    var sections = document.querySelectorAll('section[id]');
+    var links = document.querySelectorAll('.doc-nav-link');
+    var current = '';
+
+    sections.forEach(function(section) {
+      var rect = section.getBoundingClientRect();
+      if (rect.top <= 120) {
+        current = section.id;
+      }
+    });
+
+    links.forEach(function(link) {
+      var href = link.getAttribute('href').slice(1);
+      if (href === current) {
+        link.classList.add('text-claude-orange', 'bg-orange-50');
+        link.classList.remove('text-gray-600');
+      } else {
+        link.classList.remove('text-claude-orange', 'bg-orange-50');
+        link.classList.add('text-gray-600');
+      }
+    });
+  }
+
+  window.addEventListener('scroll', updateActiveNav);
+  updateActiveNav();
+
+  // Close mobile TOC when clicking outside
+  document.addEventListener('click', function(e) {
+    var toc = document.getElementById('mobileToc');
+    if (toc && !toc.classList.contains('hidden')) {
+      var fab = toc.parentElement;
+      if (!fab.contains(e.target)) {
+        toc.classList.add('hidden');
+      }
+    }
+  });
+</script>
+
+</body>
+</html>