docs(site): start the How it works rail unlit, in step with its first step

site/components/landing/How.tsx

@@ -113,19 +113,21 @@ export function How({ demo, receipt, repair }: { demo: LaidOutDiagram; receipt:
       };
       layout();
       setPinned(true);
-      setStep(0);
+      const draw = (progress: number) => {
+        if (fill.current) fill.current.style.transform = `scaleX(${progress})`;
+        setStep(Math.min(3, Math.floor(progress * 4)));
+      };
       // CSS sticky does the pin; ScrollTrigger only reads how far through the runway the page is.
       const st = ScrollTrigger.create({
         trigger: p,
         start: () => `top top+=${stickTop.current}`,
         end: () => `+=${runway.current}`,
         invalidateOnRefresh: true,
         onRefreshInit: layout,
-        onUpdate: ({ progress }) => {
-          if (fill.current) fill.current.style.transform = `scaleX(${progress})`;
-          setStep(Math.min(3, Math.floor(progress * 4)));
-        },
+        onUpdate: ({ progress }) => draw(progress),
       });
+      // onUpdate waits for a scroll; until then the rail would keep its resting (full) fill.
+      draw(st.progress);
       return () => {
         st.kill();
         p.style.height = '';

site/e2e/smoke.spec.ts

@@ -68,6 +68,8 @@ test('with motion allowed the walkthrough pins and the scroll picks its step', a
   await page.goto('/');
   const pin = page.locator('.how-pin');
   await expect(pin).toHaveAttribute('data-live', 'true');
+  // Before any scroll the rail is unlit, as step 1 is.
+  await expect.poll(() => page.locator('.hfill').evaluate((el) => getComputedStyle(el).transform)).toBe('matrix(0, 0, 0, 1, 0, 0)');
   const at = (f: number) =>
     page.evaluate((f) => {
       const p = document.querySelector<HTMLElement>('.how-pin')!;
@@ -191,9 +193,12 @@ test('the old kind pages redirect into the docs', async ({ page }) => {
 
 test('the docs search opens with ⌘K, finds a field and goes to it', async ({ page }) => {
   await page.goto('/docs');
-  await page.keyboard.press('ControlOrMeta+k');
   const box = page.getByRole('combobox', { name: 'Search the docs' });
-  await expect(box).toBeFocused();
+  // The shortcut is bound once the page hydrates; a press before that lands nowhere.
+  await expect(async () => {
+    await page.keyboard.press('ControlOrMeta+k');
+    await expect(box).toBeFocused({ timeout: 500 });
+  }).toPass();
   await box.fill('statsNote');
   await expect(page.getByRole('option').first()).toContainText('statsNote');
   await page.keyboard.press('Enter');