4CM split routing: stereo pipeline + breakpoint + Web UI

Pipeline:
- process() dispatches to _process_mono() or _process_4cm() based on routing_mode
- _process_4cm() splits chain at routing_breakpoint: pre blocks on ch0, post on ch1
- _process_single_block() extracted for reuse in both mono and 4cm paths
- routing_mode/routing_breakpoint load from preset via load_preset()
- set_routing() for runtime configuration
- Properties: routing_mode (mono|4cm), routing_breakpoint with validation

Web server:
- GET /api/routing — current routing mode and breakpoint
- POST /api/routing — set routing mode/breakpoint, persist to current preset, WS broadcast
- _gather_state() includes routing_mode and routing_breakpoint

Web UI:
- Settings page: 4CM toggle + breakpoint slider with routing description
- Dashboard: routing badge (4CM/Mono) with breakpoint info
- app.js: WebSocket handler, updateRoutingUI(), toggle4cm(), set4cmBreakpoint()
- style.css: .badge, .badge-4cm, .badge-mono, .routing-status, .routing-desc

Tests: mock pipeline fixture updated with routing_mode/routing_breakpoint

src/web/templates/settings.html

@@ -52,6 +52,46 @@
         </div>
     </div>
 
+    <div class="card">
+        <div class="card-header">
+            <h2>4-Cable Method (4CM)</h2>
+        </div>
+        <div class="card-body">
+            <div class="setting-row">
+                <div class="setting-label">4CM Mode</div>
+                <div class="setting-value">
+                    <button class="btn toggle-btn {% if routing_mode == '4cm' %}active{% endif %}"
+                            id="4cm-toggle-btn" onclick="toggle4cm()">
+                        {% if routing_mode == '4cm' %}ON{% else %}OFF{% endif %}
+                    </button>
+                </div>
+            </div>
+            <div class="setting-row" id="breakpoint-row"
+                 {% if routing_mode != '4cm' %}style="opacity: 0.4; pointer-events: none;"{% endif %}>
+                <div class="setting-label">Breakpoint</div>
+                <div class="setting-value">
+                    <input type="range" class="slider" id="4cm-breakpoint"
+                           min="0" max="16" value="{{ routing_breakpoint }}"
+                           oninput="set4cmBreakpoint(this.value)">
+                    <span id="4cm-breakpoint-text">{{ routing_breakpoint }}</span>
+                </div>
+            </div>
+            <div class="setting-row">
+                <div class="setting-label">Routing</div>
+                <div class="setting-value">
+                    <span id="4cm-routing-desc" class="routing-desc">
+                        {% if routing_mode == '4cm' %}
+                            Input 1 (Guitar) → Pre blocks [0..{{ routing_breakpoint }}) → Send
+                            &nbsp;|&nbsp; Input 2 (Return) → Post blocks [{{ routing_breakpoint }}..] → Output
+                        {% else %}
+                            Mono: Guitar → Full chain → Output
+                        {% endif %}
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div class="card">
         <div class="card-header">
             <h2>About</h2>