Remove some unneeded clutter

css/style.css

@@ -165,7 +165,8 @@ body {
 
 .section.step {
   position: relative;
-  padding-left: 72px;
+  /* padding-left: 72px; */
+  padding: var(--space-4);
   scroll-margin-top: 88px;
 }
 
@@ -193,7 +194,7 @@ body {
   border-color: var(--primary);
 }
 
-.step::before {
+/* .step::before {
   content: "";
   position: absolute;
   left: 35px;
@@ -202,17 +203,17 @@ body {
   width: 2px;
   background: var(--border-hard);
   z-index: 1;
-}
+} */
 
-#step-0.step::before, #step-4.step::before {
+/* #step-0.step::before, #step-4.step::before {
   display: none;
-}
+} */
 
 /* step-3 (Preview) lives as a pinned side panel next to Settings, not
    inline in the vertical step flow, so it doesn't carry a connecting rail */
-#step-3.step::before {
+/* #step-3.step::before {
   display: none;
-}
+} */
 
 /* ---- Typography ---- */
 
@@ -874,18 +875,18 @@ input[type="file"]::file-selector-button {
     display: none;
   }
 
-  .section.step {
+  /* .section.step {
     padding-left: 32px;
-  }
+  } */
 
   .step-num {
     position: static;
     margin-bottom: var(--space-4);
   }
 
-  .step::before {
+  /* .step::before {
     display: none;
-  }
+  } */
 
   .input-methods-row {
     flex-direction: column;

index.html

@@ -53,11 +53,10 @@
     </section>
 
     <section class="section step bottom-divider" id="step-1">
-      <div class="step-num">1</div>
+      <!-- <div class="step-num">1</div> -->
       <section class="sub-section input-methods-row">
         <div class="column-left" id="file-input-column">
-          <!-- // <h2 class="sub-section-title">Select image</h2> // -->
-          <h2>Select image</h2>
+          <h2>1. Select image</h2>
           <div class="note upload-note">You can import multiple images at once.<br>All processing is done locally in your browser: your images are not uploaded or stored anywhere online.</div>
           <input type="file" id="file-input" name="file-input" multiple/><br />
           <div id="file-input-column-items"></div>
@@ -72,7 +71,7 @@
         </div>
         <div class="column-right">
           <!-- // <h2 class="sub-section-title">or paste existing byte array</h2> // -->
-          <h2>Or paste existing byte array</h2>
+          <h2>1. Paste existing byte array</h2>
           <textarea id="byte-input" class="byte-input" placeholder="i.e. 0xff, 0x81, 0x0d, 0x8d, 0xb1, 0xb1, 0x80, 0xfc"></textarea><br />
           <div class="text-input-size">
             <input type="number" min="1" id="text-input-width" class="size-input" value="128" /> x
@@ -92,8 +91,8 @@
 
     <div class="settings-preview-row">
     <section class="section step bottom-divider" id="step-2">
-      <div class="step-num">2</div>
-      <h2>Image Settings</h2>
+      <!-- <div class="step-num">2</div> -->
+      <h2>2. Image Settings</h2>
       <section class="sub-section">
         <div class="table settings-grid">
 
@@ -229,7 +228,7 @@
     </section>
 
     <section class="section step bottom-divider" id="step-3">
-      <div class="step-num">3</div>
+      <!-- <div class="step-num">3</div> -->
       <h2>Preview</h2>
       <section class="sub-section">
         <div class="no-file-selected msg">No files selected</div>
@@ -239,8 +238,8 @@
     </div>
 
     <section class="section step" id="step-4">
-      <div class="step-num">4</div>
-      <h2>Output</h2>
+      <!-- <div class="step-num">4</div> -->
+      <h2>3. Output</h2>
       <section class="sub-section">
         <div class="table">
           <div class="table-row">