optimizations for mobile

src/lib/generators/weather/WeatherGen.svelte

@@ -31,6 +31,12 @@
 	let isPlaying = $state(false);
 	let isInitialized = $state(false);
 
+	// Detect mobile for visualization sizing
+	const isMobile = typeof window !== 'undefined' &&
+		(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
+		window.innerWidth < 768);
+	const vizSize = isMobile ? 280 : 400;
+
 	// Audio components
 	let synth: Tone.PolySynth | null = null;
 	let arpSynth: Tone.Synth | null = null;
@@ -397,6 +403,26 @@
 	// Lifecycle
 	onMount(() => {
 		initializeAudio();
+
+		// Handle page visibility changes (screen sleep/wake, tab switching)
+		const handleVisibilityChange = async () => {
+			if (!document.hidden && isPlaying) {
+				// Page is visible again - resume audio context if suspended
+				if (Tone.getContext().state === 'suspended') {
+					await Tone.getContext().resume();
+				}
+				// Restart transport if it stopped
+				if (Tone.getTransport().state !== 'started') {
+					Tone.getTransport().start();
+				}
+			}
+		};
+
+		document.addEventListener('visibilitychange', handleVisibilityChange);
+
+		return () => {
+			document.removeEventListener('visibilitychange', handleVisibilityChange);
+		};
 	});
 
 	onDestroy(() => {
@@ -471,6 +497,6 @@
 	</div>
 
 	<div class="flex items-center justify-center">
-		<AudioVisualization {isPlaying} {analyser} width={400} height={400} />
+		<AudioVisualization {isPlaying} {analyser} width={vizSize} height={vizSize} />
 	</div>
 </div>