overhaul: migrated to tailwind css for css management, consolidated custom css, removed inline css, removed unneeded css, and otherwise improved page styling

code/web/templates/build/_step3_skeleton.html

@@ -0,0 +1,32 @@
+<section>
+  <div class="two-col two-col-left-rail">
+  <aside class="card-preview" data-card-name="{{ commander|urlencode }}">
+    {% set commander_base = (commander.split(' - Synergy (')[0] if ' - Synergy (' in commander else commander) %}
+    <a href="https://scryfall.com/search?q={{ commander_base|urlencode }}" target="_blank" rel="noopener">
+  <img src="{{ commander_base|card_image('normal') }}" alt="{{ commander }} card image" data-card-name="{{ commander_base }}" />
+      </a>
+    </aside>
+    <div class="grow" data-skeleton>
+  <div hx-get="/build/banner" hx-trigger="load"></div>
+
+      <div style="text-align:center; padding:3rem 1rem;">
+        <div class="spinner" style="margin:0 auto 1rem; width:48px; height:48px; border:4px solid rgba(0,0,0,0.1); border-top-color:#007bff; border-radius:50%; animation:spin 0.8s linear infinite;"></div>
+        <h3 style="margin:0 0 0.5rem;">Automating choices...</h3>
+        <p class="muted" style="margin:0;">{{ automation_message }}</p>
+      </div>
+      
+      {# Hidden form that auto-submits with defaults #}
+      <form id="auto-step3-form" hx-post="/build/step3" hx-target="#wizard" hx-swap="innerHTML" hx-trigger="load delay:100ms" style="display:none;">
+        {% for key, value in defaults.items() %}
+          <input type="hidden" name="{{ key }}" value="{{ value }}" />
+        {% endfor %}
+      </form>
+    </div>
+  </div>
+</section>
+
+<style>
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>