feat: user-customizable Lucide controller button icons

shadow.css

@@ -4,10 +4,17 @@
   font-size: 13px;
 }
 
+/* Global * uses 1.9em line-height; without this, every node inside #controller
+   (including svg) keeps a tall line box and the bar grows + content rides high. */
+#controller * {
+  line-height: 1;
+}
+
 #controller:hover #controls,
 #controller:focus-within #controls,
 :host(:hover) #controls {
-  display: inline;
+  display: inline-flex;
+  vertical-align: middle;
 }
 
 #controller {
@@ -55,15 +62,15 @@
 
 #controls {
   display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 3px;
   white-space: nowrap;
   overflow: visible;
   max-width: none;
 }
 
-#controls > * + * {
-  margin-left: 3px;
-}
-
 /* Standalone flash indicator next to speed text — hidden by default,
    briefly shown when nudge is toggled via N key or click */
 #nudge-flash-indicator {
@@ -121,7 +128,8 @@
   font-family: "Lucida Console", Monaco, monospace;
   box-sizing: border-box;
   cursor: pointer;
-  margin-bottom: 2px;
+  margin: 0;
+  flex-shrink: 0;
 }
 
 #nudge-indicator[data-enabled="true"] {
@@ -140,6 +148,11 @@
   opacity: 0.6;
 }
 
+#controller #nudge-indicator,
+#controller #nudge-flash-indicator {
+  line-height: 14px;
+}
+
 #controller.dragging {
   cursor: -webkit-grabbing;
   cursor: -moz-grabbing;
@@ -148,12 +161,14 @@
 }
 
 #controller.dragging #controls {
-  display: inline;
+  display: inline-flex;
+  vertical-align: middle;
 }
 
 .draggable {
   cursor: -webkit-grab;
   cursor: -moz-grab;
+  vertical-align: middle;
 }
 
 .draggable:active {
@@ -175,6 +190,46 @@ button {
   margin-bottom: 2px;
 }
 
+/* Icon buttons: square targets, compact bar (no extra vertical stretch). */
+#controls button {
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  max-height: 24px;
+  padding: 0;
+  margin: 0;
+  border-width: 1px;
+  line-height: 0;
+  font-size: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+button .vsc-btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+}
+
+button .vsc-btn-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  /* Lucide 24×24 paths sit slightly high in the viewBox */
+  transform: translateY(0.5px);
+}
+
 button:focus {
   outline: 0;
 }