Add a status-bar toggle to disable the falling petals

Some people find the drifting ambient petals distracting rather than
cozy, so make the whole PetalFall layer opt-out-able from a 🌸 toggle
sitting just left of the sound toggle in the status bar.

Mirrors the existing sound-mute pattern: a tiny localStorage-backed
pub/sub (effects/petals.ts) drives a PetalsToggle twin of SoundToggle.
PetalFall subscribes to the setting, stops animating and wipes the
canvas when off, and the choice persists across reloads. Works in both
day (petals) and night (stars) modes.

Claude-Session: https://claude.ai/code/session_016Yr6jELuRc7hyzYLccQKZd

web/src/effects/PetalFall.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { isPetalsEnabled, onPetalsEnabledChange } from './petals'
 
 // PetalFall is the cozy ambient layer: a fixed, non-interactive 2D canvas that
 // drifts soft cherry-blossom petals down the page. Each petal is a real
@@ -212,8 +213,19 @@ interface Petal {
 
 export function PetalFall({ night = false }: { night?: boolean }) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
+  const [enabled, setEnabled] = useState(isPetalsEnabled)
+
+  // Let the status-bar toggle switch the ambient layer on/off live.
+  useEffect(() => onPetalsEnabledChange(setEnabled), [])
 
   useEffect(() => {
+    if (!enabled) {
+      // User turned the ambient petals off — wipe any frame left on the canvas.
+      const el = canvasRef.current
+      el?.getContext('2d')?.clearRect(0, 0, el.width, el.height)
+      return
+    }
+
     const reduce =
       typeof window !== 'undefined' &&
       window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
@@ -347,7 +359,7 @@ export function PetalFall({ night = false }: { night?: boolean }) {
       document.removeEventListener('visibilitychange', onVisibility)
       petals = []
     }
-  }, [night])
+  }, [night, enabled])
 
   return (
     <canvas