fix(website): stop the hero mismatching its own prerendered markup

Reading prefers-reduced-motion in the state initialiser made the first
client render disagree with the server for anyone who has it on: the server
always serialises the searching state, the client painted the resting one,
and React bailed out of hydration with #418 on every load. The preference
now applies a tick later, from the opening-run effect, so the first render
matches the HTML and the resting state arrives immediately after.

The header's home link was 19px tall — the most reached-for control in the
nav, and the only one under the 24px target minimum, while every nav link
beside it was already 44. It gets a 44px box.

The demo's search field also carries an id, name and type, which clears the
"form field should have an id or name" issue and stops browsers offering
autofill on a fake terminal input.

website/src/pages/docs.tsx

@@ -204,7 +204,14 @@ export const Docs = () => {
       </Section>
 
       <Section band>
-        <Panel title="the rest">
+        {/*
+          The only Panel on a band. Two consequences, both handled here:
+          its default bg-panel fill would match the band exactly, so it takes
+          bg-raised like the band callouts do; and the legend paints over the
+          top border to punch the gap, so it has to match the surface *behind*
+          the panel — the band — not the panel's own fill. See panel.tsx.
+        */}
+        <Panel title="the rest" className="bg-raised [&>span]:bg-panel">
           <Cols center className="gap-6">
             <Prose>
               <p>