resume playback from current position, force light theme, fix speed button label

- Play/pause toggle now resumes from current timeline position instead of restarting
- Force white background on all devices regardless of dark mode preference
- Speed button shows 0.5x by default so users know half-speed is available
- Add ben.mp4 and andy.mp4 recording to database

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/App.css

@@ -12,7 +12,7 @@
 
 .header h1 {
   font-size: 2rem;
-  color: #fff;
+  color: #213547;
   margin: 0;
 }
 

src/components/YouTubePlayer.jsx

@@ -433,7 +433,7 @@ export default function YouTubePlayer() {
     pauseAllLocalVideos();
   };
 
-  const handlePlay = () => {
+  const handlePlayFromStart = () => {
     // Seek to beginning first
     if (youtubePlayerRef.current && youtubePlayerRef.current.seekTo) {
       youtubePlayerRef.current.seekTo(0, true);
@@ -456,6 +456,17 @@ export default function YouTubePlayer() {
     playAllLocalVideos();
   };
 
+  const handleResume = () => {
+    // Resume from current position without seeking
+    if (youtubePlayerRef.current && isReady) {
+      youtubePlayerRef.current.playVideo();
+      if (youtubePlayerRef.current.setPlaybackRate) {
+        youtubePlayerRef.current.setPlaybackRate(playbackRateRef.current);
+      }
+    }
+    playAllLocalVideos();
+  };
+
   const handlePause = () => {
     // Pause all videos
     if (youtubePlayerRef.current && isReady) {
@@ -468,7 +479,7 @@ export default function YouTubePlayer() {
     if (isPlaying) {
       handlePause();
     } else {
-      handlePlay();
+      handleResume();
     }
   };
 
@@ -709,7 +720,7 @@ export default function YouTubePlayer() {
           </div>
           <WebcamRecorder
             onRecordingComplete={handleRecordingComplete}
-            onRecordingStart={handlePlay}
+            onRecordingStart={handlePlayFromStart}
             onRecordingStop={handlePause}
             onReRecord={handleReRecord}
             onDiscard={handleDiscard}
@@ -843,7 +854,7 @@ export default function YouTubePlayer() {
           disabled={!isReady || isPlaybackBlocked}
           title="Toggle half speed"
         >
-          {playbackRate === 0.5 ? '0.5x' : '1x'}
+          {playbackRate === 0.5 ? '1x' : '0.5x'}
         </button>
       </div>
       {isProcessingPlayback && (

src/index.css

@@ -3,9 +3,9 @@
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color-scheme: light;
+  color: #213547;
+  background-color: #ffffff;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -44,7 +44,7 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: #f9f9f9;
   cursor: pointer;
   transition: border-color 0.25s;
 }
@@ -56,15 +56,3 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}