diff --git a/demo.html b/demo.html
new file mode 100644
index 0000000..45667c7
--- /dev/null
+++ b/demo.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Persian RTL Fixer — Reliability Demo</title>
+  <style>
+    :root { color-scheme: light; --ink: #172628; --paper: #f3efe5; --line: #d4ccbd; --teal: #176f68; --gold: #e5a82c; }
+    * { box-sizing: border-box; }
+    body { max-width: 860px; margin: 0 auto; padding: 40px 20px 70px; color: var(--ink); background: var(--paper); line-height: 1.7; }
+    h1, h2, .label, .intro, button { font-family: "Segoe UI", sans-serif; }
+    h1 { margin: 0; font-size: clamp(32px, 7vw, 62px); line-height: 1; letter-spacing: -2px; }
+    h1 span { color: var(--teal); }
+    .intro { max-width: 680px; margin: 18px 0 32px; color: #596460; }
+    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px; }
+    .box { min-height: 150px; padding: 18px; border: 1px solid var(--line); border-top: 4px solid var(--gold); background: #fffdf8; }
+    .label { margin-bottom: 14px; color: #6f7772; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
+    .box p { margin: 0; font-size: 18px; }
+    .authored { font-family: Tahoma, sans-serif; }
+    .stream { grid-column: 1 / -1; min-height: 185px; }
+    #streamOutput { min-height: 58px; margin-bottom: 18px; font-size: 20px; }
+    button { border: 0; padding: 10px 15px; color: white; background: var(--teal); font-weight: 700; cursor: pointer; }
+    button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
+    code { font-family: Consolas, monospace; }
+  </style>
+</head>
+<body>
+  <h1>Persian <span>RTL</span><br />reliability lab.</h1>
+  <p class="intro">Load the extension and compare each expectation. The extension may change direction and unstyled Persian typography, but it must never change the actual text or its Latin digits.</p>
+
+  <main class="grid">
+    <section class="box">
+      <div class="label">Persian · should become RTL + Vazirmatn</div>
+      <p>این یک متن فارسی بدون فونت است که باید به‌آرامی راست‌چین شود.</p>
+    </section>
+
+    <section class="box">
+      <div class="label">Arabic only · must remain untouched</div>
+      <p>هذا نص عربي للاختبار ويجب ألا يتغير.</p>
+    </section>
+
+    <section class="box">
+      <div class="label">English-leading mixed · should use auto</div>
+      <p>The assistant returned یک پاسخ فارسی کوتاه for this request.</p>
+    </section>
+
+    <section class="box">
+      <div class="label">Latin digits · must remain identical</div>
+      <p>نسخه 1234567890 برای آزمایش تبدیل‌نشدن اعداد نوشته شده است.</p>
+    </section>
+
+    <section class="box">
+      <div class="label">Author font · must preserve Tahoma</div>
+      <p class="authored">این متن از قبل فونت مشخص‌شده توسط سایت دارد.</p>
+    </section>
+
+    <section class="box">
+      <div class="label">Protected code · must remain untouched</div>
+      <pre><code>const پیام = "متن فارسی 123";</code></pre>
+    </section>
+
+    <section class="box stream">
+      <div class="label">Streaming AI simulation · click to generate token by token</div>
+      <div id="streamOutput" aria-live="polite">Waiting for a simulated response…</div>
+      <button id="streamButton" type="button">Stream Persian response</button>
+    </section>
+  </main>
+
+  <script>
+    const response = "این پاسخ زنده هوش مصنوعی است و عدد 1234567890 باید دقیقاً بدون تغییر باقی بماند.";
+    const output = document.getElementById("streamOutput");
+    const button = document.getElementById("streamButton");
+    let timer;
+    button.addEventListener("click", () => {
+      clearInterval(timer);
+      output.textContent = "";
+      button.disabled = true;
+      let index = 0;
+      timer = setInterval(() => {
+        output.textContent += response[index++];
+        if (index >= response.length) {
+          clearInterval(timer);
+          button.disabled = false;
+        }
+      }, 32);
+    });
+  </script>
+</body>
+</html>