fix: register idleYawn keyframes via direct css interpolation + cover wheel scroll (F-4)

The idleSpriteWrapperStyle was using `keyframes.toString()` inside a JS
template literal, so Emotion's serializer hit the string-handling branch
and never injected the @keyframes block — the animation silently did
nothing. Switch to direct Keyframes-object interpolation inside css\`...\`
so Emotion registers the rule and returns the animation name.

Also add 'wheel' to ACTIVITY_EVENTS so desktop mouse-wheel scrolling on
the inner scrollable content area resets the idle timer (the existing
'scroll' listener on window only catches mobile/touch scroll).

Update the source plan doc to reflect the corrected idiom so future
implementers don't repeat the bug.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

docs/superpowers/plans/2026-05-04-micro-fun-patch.md

@@ -211,6 +211,7 @@ const ACTIVITY_EVENTS: Array<keyof WindowEventMap> = [
   'touchstart',
   'keydown',
   'scroll',
+  'wheel',
 ];
 
 export function useIdleMood(idleAfterMs: number = IDLE_AFTER_MS): Mood {
@@ -262,9 +263,7 @@ const idleSpriteWrapperStyle = (mood: Mood) => css`
   display: inline-block;
   width: 100%;
   height: 100%;
-  ${mood === 'idle'
-    ? `animation: ${idleYawnKeyframes.toString()} 8s ease-in-out infinite;`
-    : ''}
+  animation: ${mood === 'idle' ? css`${idleYawnKeyframes} 8s ease-in-out infinite` : 'none'};
 `;
 ```