added an explanation and removed unnecessary code

src/optimizer.html

@@ -241,6 +241,23 @@
             </article>
         </div>
 
+        <h3>Explanation & Usage</h3>
+        <p>The columns in the second box represent, in order:</p>
+        <ol>
+            <li>
+                The total level and stats of the optimal class.
+            </li>
+            <li>
+                Desired stats (input what you want here)
+            </li>
+            <li>
+                Calculated stats as they should be in your level-up menu in-game.
+            </li>
+            <li>
+                Calculated final statistics as shown on the "Stats" screen in-game.
+            </li>
+        </ol>
+
         <h3>Softcaps</h3>
         <table>
             <thead>

src/script/optimizer.js

@@ -83,12 +83,10 @@ async function update() {
 
     document.getElementsByName("subtractive-stat").forEach((elem, i) => {
         elem.value = ((desired[i] > best.stats[i] ? desired[i] : best.stats[i]));
-        elem.value > desired[i] && elem.value > best.stats[i] ? (elem.style.color = "tomato", elem.style.fontWeight = "bold") : (elem.style.color = "unset", elem.style.fontWeight = "unset");
     });
 
     document.getElementsByName("additive-stat").forEach((elem, i) => {
         elem.value = ((desired[i] > best.stats[i] ? desired[i] : best.stats[i]) + items[i]);
-        elem.value < desired[i] || elem.value < best.stats[i] ? (elem.style.color = "deepskyblue", elem.style.fontWeight = "bold") : (elem.style.color = "unset", elem.style.fontWeight = "unset");
     });
 
     // update talismans
@@ -156,4 +154,3 @@ function cloneTemplate(template, destination, item) {
 
     destination.appendChild(clone);
 }
-

src/style/main.css

@@ -141,7 +141,7 @@ h6 {
 
 p {
     margin-top: 0rem;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
 }
 
 /* links */