Add steps to default sidebar step for clarity

components/DataDirPicker.tsx

@@ -46,8 +46,9 @@ const DataDirPicker: React.FC<Props> = () => {
 
   return (
     <>
-      <p className={styles["no-top-margin"]}>
+      <p>
-        Select or drag-and-drop your Skyrim{" "}
+        <strong className={styles.step}>1. </strong>Select or drag-and-drop your
+        Skyrim{" "}
         <strong>
           <code>Data</code>
         </strong>{" "}

components/PluginTxtEditor.tsx

@@ -33,7 +33,7 @@ const PluginTxtEditor: React.FC<Props> = () => {
   return (
     <>
       <p className={styles["top-spacing"]}>
-        Paste or drag-and-drop your{" "}
+        <strong className={styles.step}>2. </strong>Paste or drag-and-drop your{" "}
         <strong>
           <code>plugins.txt</code>
         </strong>{" "}

styles/DataDirPicker.module.css

@@ -1,3 +1,7 @@
 .no-top-margin {
   margin-top: 0;
 }
+
+.step {
+  font-size: 1.5rem;
+}

styles/PluginTxtEditor.module.css

@@ -30,6 +30,18 @@
   margin-top: 34px;
 }
 
+.no-top-margin {
+  margin-top: 0;
+}
+
+.no-bottom-margin {
+  margin-bottom: 0;
+}
+
+.step {
+  font-size: 1.5rem;
+}
+
 .break-word {
   word-break: break-word;
 }