feat(05-02): add live preview panel HTML and CSS styles

- Add #live-preview div between timeline-canvas and block-inspector
- Add show selector (show-select + btn-load-show) to transport bar
- Add keyboard-hint span at far right of transport bar
- Append .live-preview, .device-strip, .strip-label, .strip-color, .strip-anim, .keyboard-hint CSS styles

lightsync/frontend/style.css

@@ -484,3 +484,72 @@ button:hover {
     color: #ff3333;
     border: none;
 }
+
+/* ── Live Preview Panel (Phase 5) ──────────────────────────────────────────── */
+
+.live-preview {
+    border-top: 1px solid var(--border-dim);
+    border-bottom: 1px solid var(--border-dim);
+    background: var(--bg-panel-dark);
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    padding: 4px 0;
+    max-height: 60px;
+    overflow-y: auto;
+    flex-shrink: 0;
+}
+
+.device-strip {
+    display: flex;
+    align-items: center;
+    height: 18px;
+    padding: 0 4px;
+    background: var(--bg-panel);
+    gap: 8px;
+    font-size: 12px;
+    font-family: var(--font-mono);
+    letter-spacing: 0.05em;
+    transition: background-color 0.1s;
+}
+
+.strip-label {
+    color: var(--text-dim);
+    text-transform: uppercase;
+    min-width: 80px;
+    flex-shrink: 0;
+    font-size: 10px;
+    letter-spacing: 0.12em;
+}
+
+.strip-color {
+    width: 40px;
+    height: 10px;
+    background: var(--text-dim);
+    flex-shrink: 0;
+    transition: background-color 0.15s;
+}
+
+.strip-anim {
+    color: var(--text-dim);
+    font-size: 10px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.device-strip.active .strip-label {
+    color: var(--text-primary);
+}
+
+.device-strip.active .strip-anim {
+    color: var(--text-primary);
+}
+
+.keyboard-hint {
+    color: var(--text-dim);
+    font-size: 10px;
+    font-family: var(--font-mono);
+    letter-spacing: 0.05em;
+    white-space: nowrap;
+    flex-shrink: 0;
+}