feat(visualizer): controls row + unified MixVisualizerControlState; 3 inert uniforms wired (P10 W2)

DeepDrftPublic.Client/Controls/MixVisualizerControls.razor.css

@@ -0,0 +1,34 @@
+/* The controls row sits in the mix-detail foreground, below the back button and above the masthead.
+   A horizontal row of four icon+slider controls. On narrow viewports it wraps to keep all four
+   present (spec §3b: wrap is the chosen mobile behaviour — none may drop). */
+.mix-visualizer-controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem 1.5rem;
+    margin: 0.5rem 0 1.5rem;
+}
+
+/* One control: a compact label icon followed by the slider. The slider gets a fixed-ish track width
+   so the four read as a tidy row rather than stretching unevenly. */
+.mix-visualizer-control {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1 1 180px;
+    min-width: 160px;
+    max-width: 260px;
+}
+
+.mix-visualizer-control-icon {
+    flex: 0 0 auto;
+    opacity: 0.7;
+}
+
+/* MudSlider renders a Razor component, so its root is reached with ::deep (a bare scoped selector
+   would not be stamped onto the child component's element). Let the slider fill the remaining width
+   of its control so the icon+slider pair lays out cleanly. */
+.mix-visualizer-control ::deep .mud-slider {
+    flex: 1 1 auto;
+    margin: 0;
+}