Use autofocus instead of hand-duplicating field.css's real input:focus
values inline — the demo now shows the actual :focus state firing, so
it can't drift from the real rule the way a copied border-color/box-shadow
pair silently could.

diff --git a/_components/input.md b/_components/input.md
index ed90739..ca219ec 100644
--- a/_components/input.md
+++ b/_components/input.md
@@ -25,11 +25,11 @@ site uses a text input, so there is nothing for the selector to clash with.
 <figure class="example">
 <figcaption>States</figcaption>
 <div data-layout="stack">
-<input type="text" value="Focused" style="max-width: 20rem; border-color: var(--ad-color-accent); box-shadow: 0 0 0 2px var(--ad-color-accent-soft);" />
+<input type="text" value="Focused" autofocus style="max-width: 20rem;" />
 <input type="text" value="Disabled" disabled="" style="max-width: 20rem;" />
 </div>
 <details><summary>Markup</summary>
-<pre><code>&lt;input type=&quot;text&quot; value=&quot;Focused&quot; style=&quot;max-width: 20rem; border-color: var(--ad-color-accent); box-shadow: 0 0 0 2px var(--ad-color-accent-soft);&quot; /&gt;
+<pre><code>&lt;input type=&quot;text&quot; value=&quot;Focused&quot; autofocus style=&quot;max-width: 20rem;&quot; /&gt;
 &lt;input type=&quot;text&quot; value=&quot;Disabled&quot; disabled=&quot;&quot; style=&quot;max-width: 20rem;&quot; /&gt;</code></pre>
 </details>
 </figure>