fix(onboarding): hide search results until typed, trim gallery grid to 2 rows

- search demo results were greyed-but-visible while the query was still
  typing, as if the app pre-knew the search; they're now invisible (space
  reserved, no layout jump) and fade in only once typing completes
- gallery preview dropped from 3 rows to 2 so the 'Click any tile' explainer
  text is visible without scrolling

src/components/onboarding/StepGalleryPreview.tsx

@@ -3,19 +3,16 @@ import { FakeTile, ReplayButton } from "./fakes";
 
 const REVEAL_MS = 280;
 
+// Two rows (cols-4) keeps the explainer text visible without scrolling.
 const TILE_PROPS: { favorite?: boolean; rating?: number; duration?: string }[] = [
   {},
   { favorite: true },
   {},
   { duration: "1:24" },
   { rating: 5 },
-  {},
   { favorite: true, rating: 3 },
-  {},
   { duration: "0:09" },
   {},
-  { rating: 4 },
-  {},
 ];
 
 const TILE_COUNT = TILE_PROPS.length;

src/components/onboarding/StepSearchDemo.tsx

@@ -82,8 +82,10 @@ export function StepSearchDemo() {
         </span>
       </div>
 
-      {/* Results — fixed-width tiles, centered, so 1/2/3 results all look right */}
+      {/* Results — hidden (not greyed) until the query finishes typing, so it
-      <div className={`mt-3 flex flex-wrap justify-center gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-30"}`}>
+          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"}`}>
         {demo.results.map((src, i) => (
           <div key={`${demoIndex}-${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" />