Mobile fixes: portrait camera, OffscreenCanvas + GPU fallbacks

index.html

@@ -29,7 +29,7 @@
         color: rgb(229, 229, 229);
       }
     </style>
-    <script type="module" crossorigin src="./assets/index-Cz6a28xH.js"></script>
+    <script type="module" crossorigin src="./assets/index-BCIuzTYl.js"></script>
   </head>
   <body
     class="bg-gradient-to-b from-neutral-950 via-neutral-950 to-neutral-900 text-neutral-100 min-h-screen"
@@ -62,18 +62,20 @@
       </header>
 
       <section
-        class="relative rounded-xl overflow-hidden bg-black aspect-video shadow-2xl ring-1 ring-neutral-800/60"
+        id="video-container"
+        class="relative rounded-xl overflow-hidden bg-black shadow-2xl ring-1 ring-neutral-800/60 mx-auto"
+        style="aspect-ratio: 16 / 9; max-height: 75vh; width: 100%"
       >
         <video
           id="webcam"
-          class="w-full h-full object-cover scale-x-[-1]"
+          class="w-full h-full object-contain scale-x-[-1]"
           autoplay
           muted
           playsinline
         ></video>
         <canvas
           id="overlay"
-          class="absolute inset-0 w-full h-full pointer-events-none scale-x-[-1]"
+          class="absolute inset-0 w-full h-full pointer-events-none object-contain scale-x-[-1]"
         ></canvas>
         <div
           id="personal-calib-overlay"
@@ -98,7 +100,7 @@
             <div class="text-neutral-400 text-sm">Show your</div>
             <div
               id="personal-calib-emotion"
-              class="text-5xl font-bold text-white capitalize tracking-tight"
+              class="text-3xl sm:text-5xl font-bold text-white capitalize tracking-tight"
             >
               happy
             </div>