diff --git a/simulator/static/style.css b/simulator/static/style.css
index 3541cd9..314f43c 100644
--- a/simulator/static/style.css
+++ b/simulator/static/style.css
@@ -115,17 +115,25 @@ input[type=range], select { width: 100%; }
 .dial-rim { fill: #0d1320; stroke: #243352; stroke-width: 1.2; }
 .dial-body { fill: #16203200; stroke: #2c3c5c; stroke-width: 1; }
 .dial-tick { stroke: #3a4d70; stroke-width: 0.8; }
-.dial-label { fill: #789ac0; font-size: 6px; font-family: ui-monospace, monospace;
+.dial-label { fill: #b8cfe6; font-size: 6px; font-family: ui-monospace, monospace;
               letter-spacing: 0.2px; cursor: pointer; }
 .dial-label:hover { fill: #cde; }
 .dial-label.active { fill: #9cf; font-weight: 700; }
-.dial-caption { fill: #4d6184; font-size: 4.4px; letter-spacing: 1.2px;
+.dial-caption { fill: #8fa6c4; font-size: 4.4px; letter-spacing: 1.2px;
                 font-family: ui-monospace, monospace; }
 .dial-needle { fill: #9cf; }
 .dial-needle polygon { filter: drop-shadow(0 0 1px #9cf); }
 .dial-hub { fill: #2c3c5c; stroke: #9cf; stroke-width: 0.6; }
 .scale-name { display: block; text-align: center; font-size: 12px; color: #cde; }
-.hint { margin: 0.3rem 0 0; font-size: 11px; color: #789; }
+.hint { margin: 0.3rem 0 0; font-size: 11px; color: #9fb3c8; }
+/* Visible keyboard focus for every interactive element (was only on .dev-switch). */
+:focus-visible { outline: 2px solid #9af; outline-offset: 2px; }
+#dial:focus-visible { outline-offset: 4px; border-radius: 50%; }
+/* Screen-reader-only text (announcements, labels): present in the a11y tree, off-screen. */
+.visually-hidden {
+  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
 
 /* --- Dev Mode --- a single switch; all dev controls/data live in #dev-panel below it. */
 .dev-switch { display: flex; align-items: center; gap: 0.5rem; cursor: pointer;