Fix docs modal: move markup before script so listeners attach

The 'How to use' button wasn't opening the modal because the modal
markup was placed AFTER the </script> tag, so when the script ran,
document.getElementById('docsOverlay') returned null and the click
handler was attached to nothing.

Move the modal <div> block to before the <script> tag so the IDs
exist at the time the script wires them up.

Co-Authored-By: Claude <noreply@anthropic.com>

index.html

@@ -215,6 +215,51 @@
     </div>
   </div>
 
+<div class="docs-overlay" id="docsOverlay">
+  <div class="docs-modal" id="docsModal">
+    <div class="docs-header">
+      <h3>How to use Inkling via Inference Providers</h3>
+      <button class="docs-close" id="closeDocs" type="button" aria-label="Close">×</button>
+    </div>
+    <div class="docs-body">
+      <p>Reach the model through Hugging Face's OpenAI-compatible router. Set <code>HF_TOKEN</code> in your environment and use the <code>thinkingmachines/Inkling:together</code> model id.</p>
+      <pre class="docs-snippet" id="docsCode"><button class="copy-btn" id="copySnippet" type="button">Copy</button>import os
+from openai import OpenAI
+
+client = OpenAI(
+    base_url="https://router.huggingface.co/v1",
+    api_key=os.environ["HF_TOKEN"],
+)
+
+stream = client.chat.completions.create(
+    model="thinkingmachines/Inkling:together",
+    messages=[
+        {
+            "role": "user",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "Describe this image in one sentence."
+                },
+                {
+                    "type": "image_url",
+                    "image_url": {
+                        "url": "https://cdn.britannica.com/61/93061-050-99147DCE/Statue-of-Liberty-Island-New-York-Bay.jpg"
+                    }
+                }
+            ]
+        }
+    ],
+    stream=True,
+)
+
+for chunk in stream:
+    print(chunk.choices[0].delta.content, end="")</pre>
+      <p class="docs-footer">The <code>:auto</code> suffix routes to your preferred provider in settings; you can also use <code>:cheapest</code> or <code>:fastest</code>.</p>
+    </div>
+  </div>
+</div>
+
 <script>
 "use strict";
 
@@ -487,49 +532,5 @@ $("copySnippet").addEventListener("click", () => {
 });
 </script>
 
-<div class="docs-overlay" id="docsOverlay">
-  <div class="docs-modal" id="docsModal">
-    <div class="docs-header">
-      <h3>How to use Inkling via Inference Providers</h3>
-      <button class="docs-close" id="closeDocs" type="button" aria-label="Close">×</button>
-    </div>
-    <div class="docs-body">
-      <p>Reach the model through Hugging Face's OpenAI-compatible router. Set <code>HF_TOKEN</code> in your environment and use the <code>thinkingmachines/Inkling:together</code> model id.</p>
-      <pre class="docs-snippet" id="docsCode"><button class="copy-btn" id="copySnippet" type="button">Copy</button>import os
-from openai import OpenAI
-
-client = OpenAI(
-    base_url="https://router.huggingface.co/v1",
-    api_key=os.environ["HF_TOKEN"],
-)
-
-stream = client.chat.completions.create(
-    model="thinkingmachines/Inkling:together",
-    messages=[
-        {
-            "role": "user",
-            "content": [
-                {
-                    "type": "text",
-                    "text": "Describe this image in one sentence."
-                },
-                {
-                    "type": "image_url",
-                    "image_url": {
-                        "url": "https://cdn.britannica.com/61/93061-050-99147DCE/Statue-of-Liberty-Island-New-York-Bay.jpg"
-                    }
-                }
-            ]
-        }
-    ],
-    stream=True,
-)
-
-for chunk in stream:
-    print(chunk.choices[0].delta.content, end="")</pre>
-      <p class="docs-footer">The <code>:auto</code> suffix routes to your preferred provider in settings; you can also use <code>:cheapest</code> or <code>:fastest</code>.</p>
-    </div>
-  </div>
-</div>
 </body>
 </html>