fix: render fullscreen overlays via React Portal to document.body

The fullscreen piano/drumpad was rendering inside ModuleNode which has
CSS transform: scale(zoom). This breaks position: fixed (fixed elements
inside a transformed parent position relative to the transform, not the
viewport). Using createPortal to document.body fixes this.

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

src/components/DrumPadWidget.jsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { triggerKeyboard } from '../engine/audioEngine.js';
 
 // 4x4 pad layout — each pad maps to a MIDI note
@@ -99,8 +100,9 @@ export default function DrumPadWidget({ moduleId, fullscreen, onCloseFullscreen
         </div>
       </div>
 
-      {fullscreen && (
+      {fullscreen && createPortal(
-        <FullscreenDrumPad moduleId={moduleId} onClose={onCloseFullscreen} />
+        <FullscreenDrumPad moduleId={moduleId} onClose={onCloseFullscreen} />,
+        document.body
       )}
     </>
   );

src/components/KeyboardWidget.jsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { triggerKeyboard } from '../engine/audioEngine.js';
 import { state } from '../engine/state.js';
 
@@ -167,12 +168,13 @@ export default function KeyboardWidget({ moduleId, fullscreen, onCloseFullscreen
         </div>
       </div>
 
-      {fullscreen && (
+      {fullscreen && createPortal(
         <FullscreenPiano
           moduleId={moduleId}
           initialOctave={octave}
           onClose={onCloseFullscreen}
-        />
+        />,
+        document.body
       )}
     </>
   );