Browser GUI: add step and total countdown to header

Shows remaining time for the current step and the entire sud in large
accent-coloured monospace text to the right of the transport buttons,
matching the per-step plate colour. Hidden until a step is active.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SH2D4LRuCnhLSzoYerAfJX

web/style.css

@@ -84,6 +84,35 @@ header#connection-bar {
     border-left: 1px solid var(--border);
 }
 
+/* --- Header countdown --- */
+
+#header-countdown {
+    display: flex;
+    flex-direction: column;
+    gap: 0.05em;
+    padding-left: 0.8em;
+    border-left: 1px solid var(--border);
+}
+.hdr-cdown-row {
+    display: flex;
+    align-items: baseline;
+    gap: 0.35em;
+}
+.hdr-cdown-lbl {
+    font-size: 0.65em;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    width: 2.8em;
+}
+#hdr-step-remaining,
+#hdr-total-remaining {
+    font-family: 'Courier New', 'Lucida Console', monospace;
+    font-weight: bold;
+    font-size: 1.35em;
+    color: var(--accent);
+}
+
 /* --- Transport buttons (circular, coloured) --- */
 
 .transport-btn {