Fix eraser lab spacing and improve control layout

Restructured the controls layout for better spacing and legibility:

1. Controls section layout:
   - Changed .controls from 2-column grid to flex column
   - Changed .erasure-controls to responsive auto-fit grid
   - Control groups now display in clean, bounded boxes

2. Checkbox improvements:
   - Increased spacing between checkboxes (12px margins)
   - Made checkboxes larger (1.3 scale) and easier to click
   - Fixed labels to not be uppercase/spaced for readability
   - Fixed width issues with proper box-sizing

3. Control group styling:
   - Added 25px padding for breathing room
   - Added visual separator under h3 headings
   - Better margins between elements

4. Slider improvements:
   - Increased height to 8px for easier interaction
   - Better spacing (20px bottom margin)
   - Improved label font weight

All controls are now properly bounded, aligned, and legible.

Author: claude

styles.css

@@ -406,26 +406,39 @@ input[type="file"],
 }
 
 /* Controls */
-.controls,
+.controls {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
 .erasure-controls {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 15px;
-    margin-bottom: 20px;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+}
+
+@media (max-width: 768px) {
+    .erasure-controls {
+        grid-template-columns: 1fr;
+    }
 }
 
 .control-group,
 .option-group {
     background: #ffffff;
-    padding: 20px;
+    padding: 25px;
     border-radius: 0;
     border: 2px solid #4a4a4a;
-    margin-bottom: 15px;
 }
 
 .control-group h3 {
-    margin-bottom: 15px;
+    margin-bottom: 18px;
+    margin-top: 0;
     color: #1a1a1a;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #e8e8e8;
 }
 
 .control-group label,
@@ -448,6 +461,12 @@ input[type="file"],
     transition: all 0.3s ease;
     background: #ffffff;
     width: 100%;
+    box-sizing: border-box;
+}
+
+.control-group input[type="checkbox"] {
+    width: auto;
+    padding: 0;
 }
 
 .control-group input:focus,
@@ -877,33 +896,45 @@ input[type="file"],
 .checkbox-container {
     display: flex;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
+    padding: 8px 0;
 }
 
 .checkbox-container input[type="checkbox"] {
-    margin-right: 10px;
-    transform: scale(1.2);
+    width: auto;
+    margin-right: 12px;
+    transform: scale(1.3);
     accent-color: #c41e3a;
     cursor: pointer;
+    flex-shrink: 0;
+}
+
+.checkbox-container label {
+    cursor: pointer;
+    margin: 0;
+    font-size: 0.95em;
+    text-transform: none;
+    letter-spacing: normal;
 }
 
 /* Sliders */
 .slider-container {
-    margin-bottom: 15px;
+    margin-bottom: 20px;
 }
 
 .slider-label {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 8px;
-    font-weight: 500;
+    margin-bottom: 10px;
+    font-weight: 600;
     color: #1a1a1a;
+    font-size: 0.95em;
 }
 
 .slider {
     width: 100%;
-    height: 6px;
+    height: 8px;
     border-radius: 0;
     background: #e8e8e8;
     outline: none;
@@ -1033,8 +1064,6 @@ input[type="file"],
         padding: 20px;
     }
 
-    .controls,
-    .erasure-controls,
     .tools-section {
         grid-template-columns: 1fr;
     }