Add sync clock entity for synchronized animation timing

Introduces Synchronization Clocks — shared, controllable time bases
that CSS sources can optionally reference for synchronized animation.

Backend:
- New SyncClock dataclass, JSON store, Pydantic schemas, REST API
- Runtime clock with thread-safe pause/resume/reset and speed control
- Ref-counted runtime pool with eager creation for API control
- clock_id field on all ColorStripSource types
- Stream integration: clock time/speed replaces source-local values
- Paused clock skips rendering (saves CPU + stops frame pushes)
- Included in backup/restore via STORE_MAP

Frontend:
- Sync Clocks tab in Streams section with cards and controls
- Clock dropdown in CSS editor (hidden speed slider when clock set)
- Clock crosslink badge on CSS source cards (replaces speed badge)
- Targets tab uses DataCache for picture/audio sources and sync clocks

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/templates/modals/css-editor.html

@@ -146,7 +146,7 @@
                         <div id="color-cycle-colors-list"></div>
                         <button type="button" class="btn btn-secondary" onclick="colorCycleAddColor()" data-i18n="color_strip.color_cycle.add_color">+ Add Color</button>
                     </div>
-                    <div class="form-group">
+                    <div id="css-editor-cycle-speed-group" class="form-group">
                         <div class="label-row">
                             <label for="css-editor-cycle-speed">
                                 <span data-i18n="color_strip.color_cycle.speed">Speed:</span>
@@ -226,7 +226,7 @@
                         <div id="css-editor-effect-preview" class="effect-palette-preview"></div>
                     </div>
 
-                    <div class="form-group">
+                    <div id="css-editor-effect-speed-group" class="form-group">
                         <div class="label-row">
                             <label for="css-editor-effect-speed">
                                 <span data-i18n="color_strip.effect.speed">Speed:</span>
@@ -492,7 +492,7 @@
                                 </select>
                                 <small id="css-editor-animation-type-desc" class="field-desc"></small>
                             </div>
-                            <div class="form-group">
+                            <div id="css-editor-animation-speed-group" class="form-group">
                                 <div class="label-row">
                                     <label for="css-editor-animation-speed">
                                         <span data-i18n="color_strip.animation.speed">Speed:</span>
@@ -508,6 +508,18 @@
                     </details>
                 </div>
 
+                <!-- Sync Clock (shown for animated types: static, gradient, color_cycle, effect) -->
+                <div id="css-editor-clock-group" class="form-group" style="display:none">
+                    <div class="label-row">
+                        <label for="css-editor-clock" data-i18n="color_strip.clock">Sync Clock:</label>
+                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
+                    </div>
+                    <small class="input-hint" style="display:none" data-i18n="color_strip.clock.hint">Optionally link to a sync clock to synchronize animation timing and speed with other sources</small>
+                    <select id="css-editor-clock" onchange="onCSSClockChange()">
+                        <option value="" data-i18n="common.none">None</option>
+                    </select>
+                </div>
+
                 <div id="css-editor-error" class="error-message" style="display: none;"></div>
             </form>
         </div>