diff --git a/web/index.html b/web/index.html
index 8161e8b..1e29e38 100644
--- a/web/index.html
+++ b/web/index.html
@@ -16,9 +16,9 @@
 		<button id="btn-sud-load">Load&hellip;</button>
 		<input type="file" id="sud-file-input" accept="application/json" class="hidden">
 		<button id="btn-sud-save">Save&hellip;</button>
-		<button id="btn-sud-start">Start</button>
-		<button id="btn-sud-pause">Pause</button>
-		<button id="btn-sud-stop">Stop</button>
+		<button id="btn-sud-start" class="transport-btn transport-start" title="Start / Resume">&#9654;</button>
+		<button id="btn-sud-pause" class="transport-btn transport-pause" title="Pause">&#9646;&#9646;</button>
+		<button id="btn-sud-stop"  class="transport-btn transport-stop"  title="Stop">&#9632;</button>
 	</span>
 </header>
 
diff --git a/web/style.css b/web/style.css
index 3d5a3f8..76bc50b 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,150 +1,265 @@
 :root {
-	--led-off: #555555;
-	--led-green: #2ecc71;
-	--led-green-dim: #1b5e36;
-	--led-orange: #e67e22;
-	--led-orange-dim: #7a4111;
+    --bg:          #121212;
+    --surface:     #1e1e1e;
+    --surface-2:   #2a2a2a;
+    --border:      #383838;
+    --text:        #e0e0e0;
+    --text-muted:  #9e9e9e;
+    --accent:      #ff7043;
+    --green:       #4caf50;
+    --green-dim:   #1b5e20;
+    --orange:      #ffa726;
+    --orange-dim:  #6d3b00;
+    --red:         #f44336;
+    --led-off:     #444444;
+    --led-green:       var(--green);
+    --led-green-dim:   var(--green-dim);
+    --led-orange:      var(--orange);
+    --led-orange-dim:  var(--orange-dim);
 }
 
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
-	font-family: sans-serif;
-	margin: 0;
-	padding: 0.5em 1em 4em 1em;
-	color: #222;
+    font-family: 'Segoe UI', system-ui, sans-serif;
+    margin: 0;
+    padding: 0.5em 1em 4em 1em;
+    background: var(--bg);
+    color: var(--text);
 }
 
+/* --- Inputs & buttons --- */
+
+input[type="text"],
+input[type="number"] {
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text);
+    padding: 0.3em 0.5em;
+}
+input[type="text"]:focus,
+input[type="number"]:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+button {
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text);
+    padding: 0.3em 0.8em;
+    cursor: pointer;
+    transition: background 0.1s, border-color 0.1s;
+}
+button:hover:not(:disabled) {
+    background: #333;
+    border-color: #555;
+}
+button:disabled { opacity: 0.4; cursor: default; }
+
+/* --- Header --- */
+
 header#connection-bar {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: 1em;
-	padding-bottom: 0.5em;
-	border-bottom: 1px solid #ccc;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1em;
+    padding: 0.6em 0;
+    border-bottom: 1px solid var(--border);
 }
 
-.status-connected { color: #2ecc71; font-weight: bold; }
-.status-disconnected { color: #999; }
+.status-connected    { color: var(--green); font-weight: bold; }
+.status-disconnected { color: var(--text-muted); }
+
+/* --- Sud controls section --- */
 
 #sud-controls {
-	display: flex;
-	align-items: center;
-	gap: 0.5em;
-	padding-left: 1em;
-	border-left: 1px solid #ccc;
+    display: flex;
+    align-items: center;
+    gap: 0.4em;
+    padding-left: 1em;
+    border-left: 1px solid var(--border);
 }
 
+/* --- Transport buttons (circular, coloured) --- */
+
+.transport-btn {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    border: none;
+    font-size: 15px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    transition: filter 0.15s, box-shadow 0.15s;
+    flex-shrink: 0;
+}
+.transport-btn:not(:disabled):hover {
+    filter: brightness(1.25);
+    box-shadow: 0 0 10px rgba(255,255,255,0.18);
+}
+.transport-btn:disabled { opacity: 0.35; cursor: default; }
+
+.transport-start { background: var(--green);  color: #fff; }
+.transport-pause { background: var(--orange); color: #fff; }
+.transport-stop  { background: var(--red);    color: #fff; }
+
+/* --- LCD panel --- */
+
 #lcd-panel {
-	display: grid;
-	grid-template-columns: 10em 6em 6em;
-	gap: 0.2em 1em;
-	margin: 1em 0;
-	max-width: 30em;
+    display: grid;
+    grid-template-columns: 11em 6em 6em;
+    gap: 0.25em 1em;
+    margin: 1em 0;
+    max-width: 32em;
+}
+.lcd-row    { display: contents; }
+.lcd-header { font-weight: bold; color: var(--text-muted); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; }
+.lcd-label  { color: var(--text-muted); font-size: 0.9em; align-self: center; }
+.lcd {
+    font-family: 'Courier New', 'Lucida Console', monospace;
+    font-size: 1.1em;
+    background: #091209;
+    border: 1px solid #2a6e2a;
+    padding: 0.15em 0.4em;
+    text-align: right;
+    color: #7dfa7d;
+    text-shadow: 0 0 6px rgba(100,255,100,0.45);
+    border-radius: 3px;
 }
 
-.lcd-row { display: contents; }
-.lcd-header { font-weight: bold; }
-.lcd-label { color: #555; }
-.lcd {
-	font-family: monospace;
-	font-size: 1.1em;
-	background: #fff;
-	border: 1px solid #2ecc71;
-	padding: 0.1em 0.3em;
-	text-align: right;
-}
+/* --- Tabs --- */
 
 nav#tabs {
-	margin-top: 1em;
-	border-bottom: 1px solid #ccc;
+    margin-top: 1em;
+    border-bottom: 1px solid var(--border);
 }
 .tab-btn {
-	background: none;
-	border: 1px solid #ccc;
-	border-bottom: none;
-	padding: 0.4em 1em;
-	cursor: pointer;
-	position: relative;
-	top: 1px;
+    background: none;
+    border: 1px solid transparent;
+    border-bottom: none;
+    color: var(--text-muted);
+    padding: 0.4em 1.1em;
+    cursor: pointer;
+    position: relative;
+    top: 1px;
+    border-radius: 4px 4px 0 0;
+    transition: color 0.15s;
 }
+.tab-btn:hover:not(.active) { color: var(--text); border-color: var(--border); }
 .tab-btn.active {
-	background: #fff;
-	font-weight: bold;
-	border-bottom: 1px solid #fff;
+    background: var(--surface);
+    color: var(--text);
+    font-weight: bold;
+    border-color: var(--border);
+    border-bottom: 1px solid var(--surface);
 }
 
-.tab-content { display: none; padding: 1em 0; }
+.tab-content        { display: none; padding: 1em 0; }
 .tab-content.active { display: block; }
 
+/* --- Manual tab panels --- */
+
 .panel {
-	border: 1px solid #ddd;
-	border-radius: 4px;
-	padding: 0.6em 1em;
-	margin-bottom: 0.8em;
-	max-width: 30em;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 0.8em 1.1em;
+    margin-bottom: 0.8em;
+    max-width: 30em;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.45);
+}
+.panel h3 {
+    margin: 0 0 0.5em 0;
+    font-size: 0.85em;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: var(--accent);
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 0.35em;
 }
-.panel h3 { margin: 0 0 0.4em 0; }
 .panel label {
-	display: flex;
-	align-items: center;
-	gap: 0.6em;
-	margin: 0.3em 0;
+    display: flex;
+    align-items: center;
+    gap: 0.6em;
+    margin: 0.4em 0;
 }
-.panel input[type="range"] { flex: 1; }
+.panel input[type="range"]    { flex: 1; accent-color: var(--accent); }
+.panel input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
+.panel input[type="number"]   { width: 6em; }
 
-.hidden { display: none; }
+#pot-reset-row { display: flex; align-items: center; gap: 0.6em; margin: 0.4em 0; }
 
-#sud-controls button:disabled { opacity: 0.5; cursor: default; }
+/* --- Hidden --- */
+.hidden { display: none !important; }
 
-#step-plates { display: flex; flex-direction: column; gap: 0.5em; max-width: 36em; }
+/* --- Progress tab: step plates --- */
+
+#step-plates { display: flex; flex-direction: column; gap: 0.5em; max-width: 38em; }
 
 .step-plate {
-	border: 1px solid #ccc;
-	border-radius: 4px;
-	padding: 0.5em 0.8em;
-	display: grid;
-	grid-template-columns: 1.4em 1fr auto;
-	gap: 0.2em 0.6em;
-	align-items: center;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 0.55em 0.9em;
+    display: grid;
+    grid-template-columns: 1.4em 1fr auto;
+    gap: 0.2em 0.6em;
+    align-items: center;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
 }
 .step-plate .led {
-	width: 14px;
-	height: 14px;
-	border-radius: 50%;
-	background: var(--led-off);
-	border: 1px solid #222;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--led-off);
+    border: 1px solid #555;
 }
 .step-plate .title {
-	font-weight: bold;
-	grid-column: 2;
+    font-weight: bold;
+    grid-column: 2;
 }
 .step-plate .remaining {
-	font-weight: bold;
-	text-align: right;
+    font-weight: bold;
+    text-align: right;
+    font-family: 'Courier New', monospace;
+    color: var(--accent);
 }
 .step-plate .field {
-	color: #555;
-	font-size: 0.95em;
+    color: var(--text-muted);
+    font-size: 0.88em;
 }
 .step-plate .span2 { grid-column: span 2; }
 
+/* --- Message dialog --- */
+
 #sud-message-dialog {
-	border: 1px solid #ccc;
-	border-radius: 4px;
-	padding: 1em 1.4em;
-	max-width: 24em;
+    background: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 1.2em 1.6em;
+    max-width: 24em;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
 }
-#sud-message-dialog::backdrop { background: rgba(0, 0, 0, 0.3); }
+#sud-message-dialog::backdrop { background: rgba(0,0,0,0.65); }
 #sud-message-dialog form { margin-top: 1em; text-align: right; }
 
+/* --- Footer --- */
+
 footer {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	background: #f0f0f0;
-	border-top: 1px solid #ccc;
-	padding: 0.3em 1em;
-	display: flex;
-	justify-content: space-between;
-	font-size: 0.9em;
+    position: fixed;
+    bottom: 0; left: 0; right: 0;
+    background: var(--surface);
+    border-top: 1px solid var(--border);
+    padding: 0.35em 1em;
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.82em;
+    color: var(--text-muted);
 }