Update style.css

style.css

@@ -1,28 +1,15 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+html, body { height: 100%; margin: 0; background:#000; font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans TC, Arial, sans-serif; }
+    #wrap { position: fixed; inset: 0; display: grid; grid-template-rows: 1fr auto; }
+    #gl { width: 100%; height: 100%; display:block; }
+    .ui { color:#ddd; background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.8)); padding: 10px 14px; display:flex; gap:16px; align-items:center; flex-wrap: wrap; }
+    .ui label { font-size: 12px; opacity:.9; }
+    .ui input[type=range] { width: 180px; }
+    .ui button { background:#111; color:#ddd; border:1px solid #333; border-radius:10px; padding:6px 10px; cursor:pointer; }
+    .ui input[type=file] { color:#ccc; }html, body { height: 100%; margin: 0; background:#000; font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans TC, Arial, sans-serif; }
+    #wrap { position: fixed; inset: 0; display: grid; grid-template-rows: 1fr auto; }
+    #gl { width: 100%; height: 100%; display:block; }
+    .ui { color:#ddd; background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.8)); padding: 10px 14px; display:flex; gap:16px; align-items:center; flex-wrap: wrap; }
+    .ui label { font-size: 12px; opacity:.9; }
+    .ui input[type=range] { width: 180px; }
+    .ui button { background:#111; color:#ddd; border:1px solid #333; border-radius:10px; padding:6px 10px; cursor:pointer; }
+    .ui input[type=file] { color:#ccc; }