Update style.css

style.css

@@ -2,28 +2,36 @@ body {
     margin: 0;
     padding: 0;
     font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-    background: transparent; /* Ensure transparency for OBS */
+    background: transparent;
+    overflow: hidden;
 }
 
 h1 {
+    font-size: 18px;
+    margin: 0 0 10px;
+    color: #333;
+}
+
+h2 {
     font-size: 16px;
-    margin-top: 0;
+    margin: 10px 0 5px;
+    color: #444;
 }
 
 p {
-    color: rgb(107, 114, 128);
-    font-size: 15px;
-    margin-bottom: 10px;
-    margin-top: 5px;
+    color: #6b7280;
+    font-size: 14px;
+    margin: 5px 0;
 }
 
 .card {
-    max-width: 620px;
-    margin: 0 auto;
-    padding: 16px;
-    border: 1px solid lightgray;
-    border-radius: 16px;
-    background: white; /* Ensure card is visible if preview is enabled */
+    max-width: 640px;
+    margin: 10px auto;
+    padding: 20px;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .card p:last-child {
@@ -31,38 +39,69 @@ p {
 }
 
 #videoPreview, #canvasOutput {
-    width: 100%;
-    max-width: 1920px;
-    height: auto;
-    aspect-ratio: 16 / 9;
-    display: block;
-    margin: 0 auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1920px;
+    height: 1080px;
+    object-fit: cover;
+    z-index: 1;
+}
+
+#controlPanel {
+    position: relative;
+    z-index: 2;
+    display: none; /* Hidden by default for OBS */
+}
+
+#status, #noVideo {
+    font-size: 14px;
+    color: #dc2626;
+    text-align: center;
+    margin-top: 10px;
 }
 
 input[type="range"] {
     width: 100%;
-    margin: 10px 0;
+    margin: 8px 0;
+    accent-color: #3b82f6;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+    margin-right: 8px;
+    accent-color: #3b82f6;
 }
 
 label {
     font-size: 14px;
-    margin-right: 10px;
+    color: #374151;
 }
 
 button {
     padding: 8px 16px;
-    background: #007bff;
+    background: #3b82f6;
     color: white;
     border: none;
-    border-radius: 4px;
+    border-radius: 6px;
     cursor: pointer;
+    transition: background 0.2s;
 }
 
 button:hover {
-    background: #0056b3;
+    background: #2563eb;
 }
 
-input[type="radio"],
-input[type="checkbox"] {
-    margin-right: 5px;
+#previewToggle {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    z-index: 3;
+}
+
+@media (max-width: 640px) {
+    .card {
+        margin: 10px;
+        padding: 15px;
+    }
 }