diff --git a/styleguide/index.html b/styleguide/index.html
index 96ae3e6..851728d 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -433,6 +433,39 @@ A living reference for every component, element, & pattern across <span class="u
 
 <hr>
 
+<!-- ============================================================ -->
+<!-- 14. UNCLOSEAI WIDGET                                          -->
+<!-- ============================================================ -->
+
+<h3>14. uncloseai. Widget</h3>
+
+<p>Every content page loads the <a href="https://uncloseai.com/">uncloseai.</a> chat widget via a single script tag. The widget provides free machine learning chat, page translation, & text to speech.</p>
+
+<h4>Embed Pattern</h4>
+<pre><code>&lt;script src="https://uncloseai.com/uncloseai.js" type="module"&gt;&lt;/script&gt;</code></pre>
+
+<p>Place before <code>&lt;/body&gt;</code>. The script injects a floating button (bottom right) that opens a chat modal. Translation & TTS features appear as controls inside the modal.</p>
+
+<h4>Behavior</h4>
+<table>
+  <thead>
+    <tr><th>Feature</th><th>Trigger</th><th>Notes</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>Chat</td><td>Click floating button</td><td>Page context passed automatically</td></tr>
+    <tr><td>Translate</td><td>Globe icon in modal controls</td><td>Renders translated page inline via iframe</td></tr>
+    <tr><td>Text to Speech</td><td>Speaker icon in modal controls</td><td>Multiple voices, adjustable speed</td></tr>
+  </tbody>
+</table>
+
+<h4>CSS Isolation</h4>
+<p>The widget loads its own stylesheet (<code>uncloseai-modal-pico.css</code> on PicoCSS sites, <code>uncloseai-modal-builtin.css</code> elsewhere). All selectors scope to <code>dialog#uncloseai-embedded-modal</code>, <code>dialog#translate-modal</code>, or <code>dialog#tts-modal</code> to avoid leaking into host page styles.</p>
+
+<h4>Software Page Card</h4>
+<p>On the <a href="/software/">software page</a>, <code>.project-uncloseai</code> spans full grid width at desktop breakpoints.</p>
+
+<hr>
+
 <p><a href="/let-us-define-a-permacomputer/">&#8592; back to the manifesto</a></p>
 
 </main>