fix(onboarding): no image flash when switching search demos

Switching search modes briefly showed the next demo's result images because
the results container stayed mounted and faded its opacity down from the
previous demo's visible state. Key it by demoIndex so it remounts fresh at
opacity-0 and only fades in once the new query finishes typing.

src/components/onboarding/StepSearchDemo.tsx

@@ -84,10 +84,16 @@ export function StepSearchDemo() {
 
       {/* Results — hidden (not greyed) until the query finishes typing, so it
           doesn't look like the app is reading the user's mind. Space is held
-          by the invisible tiles so the layout doesn't jump when they appear. */}
-      <div className={`mt-3 flex flex-wrap justify-center gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-0"}`}>
+          by the invisible tiles so the layout doesn't jump when they appear.
+          Keyed by demoIndex so switching demos remounts the row fresh at
+          opacity-0 instead of fading the new images out from the previous
+          demo's visible state. */}
+      <div
+        key={demoIndex}
+        className={`mt-3 flex flex-wrap justify-center gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-0"}`}
+      >
         {demo.results.map((src, i) => (
-          <div key={`${demoIndex}-${i}`} className="aspect-square w-36 overflow-hidden rounded-xl bg-white/[0.04]">
+          <div key={i} className="aspect-square w-36 overflow-hidden rounded-xl bg-white/[0.04]">
             <img src={src} alt="" className="h-full w-full object-cover" />
           </div>
         ))}