diff --git a/index.html b/index.html
index 5741af4..ffd4262 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,6 @@
       --bg: #f7f7f8;
       --fg: #111827;
       --muted: #6b7280;
-      --accent: #111827;
       --border: #e5e7eb;
       --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     }
@@ -23,7 +22,7 @@
       color: var(--fg);
     }
     h1 {
-      margin: 0 0 1rem;
+      margin: 0 0 0.75rem;
       font-size: 1.8rem;
       font-weight: 600;
       letter-spacing: 0.03em;
@@ -33,61 +32,32 @@
       color: var(--muted);
       font-size: 0.95rem;
     }
-    .grid {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr);
-      gap: 1.25rem;
-      margin-top: 1.5rem;
-    }
-    @media (min-width: 768px) {
-      .grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-      }
-    }
-    .panel {
-      padding: 1rem 1.1rem;
-      border-radius: 0.85rem;
-      border: 1px solid var(--border);
-      background: #ffffff;
-      box-shadow: 0 10px 25px rgba(15,23,42,0.03);
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-    .label {
-      font-size: 0.8rem;
-      text-transform: uppercase;
-      letter-spacing: 0.16em;
-      color: var(--muted);
-    }
-    .sample {
-      min-height: 80px;
-      font-size: 40px;
-      letter-spacing: 0.03em;
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 0.4ch;
-    }
     .controls {
       display: flex;
       flex-wrap: wrap;
       gap: 0.5rem;
       align-items: center;
-      margin-top: 1rem;
+      margin: 1.25rem 0 0.5rem;
       font-size: 0.8rem;
       color: var(--muted);
     }
     .controls input[type="range"] {
       flex: 1;
     }
+    .tag {
+      padding: 0.15rem 0.5rem;
+      border-radius: 999px;
+      border: 1px solid var(--border);
+      font-size: 0.7rem;
+      color: var(--muted);
+    }
     .input-wrap {
-      margin-top: 0.5rem;
       display: flex;
       align-items: center;
       gap: 0.4rem;
       font-size: 0.8rem;
       color: var(--muted);
+      margin-bottom: 1.25rem;
     }
     .input-wrap input {
       flex: 1;
@@ -97,13 +67,42 @@
       font-family: var(--font-ui);
       font-size: 0.85rem;
     }
-    .tag {
-      padding: 0.15rem 0.5rem;
-      border-radius: 999px;
+    .grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 1.25rem;
+    }
+    @media (min-width: 768px) {
+      .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    }
+    .panel {
+      padding: 1rem 1.1rem;
+      border-radius: 0.85rem;
       border: 1px solid var(--border);
-      font-size: 0.7rem;
+      background: #ffffff;
+      box-shadow: 0 10px 25px rgba(15,23,42,0.03);
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+      min-height: 110px;
+    }
+    .label {
+      font-size: 0.8rem;
+      text-transform: uppercase;
+      letter-spacing: 0.16em;
       color: var(--muted);
     }
+    .sample {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0.2ch;
+      font-size: 40px;
+      letter-spacing: 0.03em;
+      color: var(--fg);
+      word-break: break-word;
+    }
     @font-face {
       font-family: "Stain";
       src: url("./dist/Stain.otf") format("opentype");
@@ -111,25 +110,77 @@
       font-style: normal;
       font-display: swap;
     }
-    .stain { font-family: "Stain", system-ui, sans-serif; }
+    .stain {
+      font-family: "Stain", system-ui, sans-serif;
+    }
     .sys {
-      font-family:
-        "Candara",
-        system-ui,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        sans-serif;
+      font-family: "Candara", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     }
   </style>
 </head>
 <body>
   <h1>Stain Font Preview</h1>
   <p>
-    Compare the in-progress "Stain" typeface against your system text (ideally Candara) in light mode.
-    Full A-Z alphabet implemented.
+    Compare the in-progress "Stain" typeface against your system font (Candara preferred) in light mode.
+    A–Z / a–z currently implemented as basic outlines.
   </p>
 
   <div class="controls">
-    <span class="tag">A-Z a-z</span>
-    <span>Size
\ No newline at end of file
+    <span class="tag">A–Z a–z</span>
+    <span>Size</span>
+    <input id="size" type="range" min="18" max="96" value="40" />
+    <span id="sizeVal">40px</span>
+    <span>Letter spacing</span>
+    <input id="track" type="range" min="-10" max="40" value="3" />
+    <span id="trackVal">0.03em</span>
+  </div>
+
+  <div class="input-wrap">
+    <span>Sample text:</span>
+    <input id="text" value="Stain: The quick brown fox jumps over the lazy dog ABC abc" />
+  </div>
+
+  <div class="grid">
+    <section class="panel">
+      <div class="label">Stain</div>
+      <div id="stainSample" class="sample stain">
+        Stain: The quick brown fox jumps over the lazy dog ABC abc
+      </div>
+    </section>
+    <section class="panel">
+      <div class="label">System (Candara / fallback)</div>
+      <div id="sysSample" class="sample sys">
+        Stain: The quick brown fox jumps over the lazy dog ABC abc
+      </div>
+    </section>
+  </div>
+
+  <script>
+    const text = document.getElementById("text");
+    const size = document.getElementById("size");
+    const sizeVal = document.getElementById("sizeVal");
+    const track = document.getElementById("track");
+    const trackVal = document.getElementById("trackVal");
+    const stainSample = document.getElementById("stainSample");
+    const sysSample = document.getElementById("sysSample");
+
+    const update = () => {
+      const content = text.value || "Stain: The quick brown fox jumps over the lazy dog ABC abc";
+      const fs = size.valueAsNumber || 40;
+      const ls = (track.valueAsNumber || 3) / 100;
+      sizeVal.textContent = fs + "px";
+      trackVal.textContent = ls.toFixed(2) + "em";
+      [stainSample, sysSample].forEach((el) => {
+        el.textContent = content;
+        el.style.fontSize = fs + "px";
+        el.style.letterSpacing = ls + "em";
+      });
+    };
+
+    text.addEventListener("input", update);
+    size.addEventListener("input", update);
+    track.addEventListener("input", update);
+    window.addEventListener("load", update);
+  </script>
+</body>
+</html>
