Update Style.css

Style.css

@@ -1,63 +1,39 @@
 body {
-    background: #111;
-    color: #fff;
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
+  background: #111;
+  color: white;
+  font-family: Arial;
+  text-align: center;
+  padding: 20px;
 }
 
-.container {
-    width: 90%;
-    max-width: 600px;
-    background: #1b1b1b;
-    padding: 20px;
-    border-radius: 12px;
-    box-shadow: 0 0 15px rgba(255,255,255,0.1);
-    text-align: center;
+.controls {
+  width: 90%;
+  max-width: 400px;
+  margin: auto;
+  text-align: left;
 }
 
-h2 {
-    margin-bottom: 15px;
+.controls label {
+  display: block;
+  margin-top: 10px;
 }
 
-input[type="file"] {
-    margin: 10px 0;
-    padding: 8px;
-    background: #222;
-    border: 1px solid #444;
-    color: white;
-    border-radius: 6px;
+input[type=range] {
+  width: 100%;
 }
 
-img {
-    width: 100%;
-    margin-top: 15px;
-    border-radius: 10px;
-    display: none;
+canvas {
+  margin-top: 20px;
+  max-width: 95%;
+  border: 1px solid #555;
 }
 
 button {
-    margin-top: 20px;
-    padding: 12px 20px;
-    background: #ff9800;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    color: black;
-    font-weight: bold;
-    font-size: 15px;
-    transition: 0.2s;
-}
-
-button:hover {
-    background: #ffa31a;
-}
-
-#resultImg {
-    margin-top: 20px;
-    display: none;
+  margin-top: 20px;
+  padding: 10px 20px;
+  background: #1e90ff;
+  border: none;
+  color: white;
+  font-size: 18px;
+  border-radius: 6px;
 }