From f074964f9a39644fc2acd901b137eca345fdae5a Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Sun, 15 Feb 2026 17:09:57 +0100
Subject: refactor(tools): consolidate common CSS for HTML tools

Extract common styles from various tool HTML files (timeline, spectral, cnn_v2_test, etc.) into a shared stylesheet.

This reduces code duplication and improves maintainability of the tool frontends.

- Create a new 'tools/common/style.css' to house the shared rules.
- Update all tool HTML files to link to the new stylesheet.
- Remove redundant inline styles from individual HTML files.
---
 tools/cnn_v2_test/index.html      |  39 +--
 tools/common/style.css            | 117 ++++++++
 tools/shader_editor/index.html    |  42 +--
 tools/spectral_editor/index.html  |   1 +
 tools/spectral_editor/style.css   | 106 +-------
 tools/timeline_editor/index.html  | 555 +++++++++++++++++++++++++++++++-------
 tools/track_visualizer/index.html |  21 +-
 7 files changed, 582 insertions(+), 299 deletions(-)
 create mode 100644 tools/common/style.css

(limited to 'tools')

diff --git a/tools/cnn_v2_test/index.html b/tools/cnn_v2_test/index.html
index e226d0c..84702d5 100644
--- a/tools/cnn_v2_test/index.html
+++ b/tools/cnn_v2_test/index.html
@@ -32,32 +32,21 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CNN v2 Testing Tool</title>
+  <link rel="stylesheet" href="../common/style.css">
   <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
     body {
-      font-family: 'Courier New', monospace;
-      background: #1a1a1a;
-      color: #e0e0e0;
       display: flex;
       flex-direction: column;
       height: 100vh;
-      overflow: hidden;
     }
     .header {
-      background: #2a2a2a;
       padding: 16px;
       border-bottom: 1px solid #404040;
-      display: flex;
-      align-items: center;
       gap: 24px;
-      flex-wrap: wrap;
     }
     h1 { font-size: 18px; }
     .controls {
-      display: flex;
       gap: 16px;
-      align-items: center;
-      flex-wrap: wrap;
     }
     .control-group {
       display: flex;
@@ -66,7 +55,7 @@
     }
     .control-group label { font-size: 12px; }
     input[type="range"] { width: 120px; }
-    input[type="number"] { width: 60px; background: #1a1a1a; color: #e0e0e0; border: 1px solid #404040; padding: 4px; }
+    input[type="number"] { width: 60px; padding: 4px; }
     .drop-zone {
       border: 3px dashed #606060;
       padding: 20px;
@@ -80,18 +69,10 @@
       color: #4a9eff;
     }
     button {
-      background: #1a1a1a;
-      border: 1px solid #404040;
-      color: #e0e0e0;
       padding: 6px 12px;
       font-size: 12px;
-      font-family: 'Courier New', monospace;
-      cursor: pointer;
-      transition: all 0.2s;
-      border-radius: 4px;
     }
     button:hover { border-color: #606060; background: #252525; }
-    button:disabled { opacity: 0.3; cursor: not-allowed; }
     video { display: none; }
     .drop-zone:hover { border-color: #4a9eff; background: #2a3545; }
     .drop-zone.active { border-color: #4a9eff; background: #1a2a3a; }
@@ -120,7 +101,6 @@
       padding: 24px;
       overflow: auto;
       position: relative;
-      background: #1a1a1a;
     }
     .video-controls-float {
       position: absolute;
@@ -185,7 +165,6 @@
       padding: 16px;
     }
     .panel {
-      border: 1px solid #404040;
       border-radius: 4px;
       overflow: hidden;
     }
@@ -228,28 +207,14 @@
       margin-bottom: 12px;
     }
     .layer-buttons button {
-      background: #1a1a1a;
-      border: 1px solid #404040;
-      color: #e0e0e0;
       padding: 6px 12px;
       font-size: 10px;
-      font-family: 'Courier New', monospace;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-    .layer-buttons button:hover {
-      border-color: #606060;
-      background: #252525;
     }
     .layer-buttons button.active {
       background: #4a9eff;
       border-color: #4a9eff;
       color: #1a1a1a;
     }
-    .layer-buttons button:disabled {
-      opacity: 0.3;
-      cursor: not-allowed;
-    }
     .layer-buttons button:disabled:hover {
       border-color: #404040;
       background: #1a1a1a;
diff --git a/tools/common/style.css b/tools/common/style.css
new file mode 100644
index 0000000..1ba4bad
--- /dev/null
+++ b/tools/common/style.css
@@ -0,0 +1,117 @@
+:root {
+    --bg-dark: #1e1e1e;
+    --bg-medium: #252526;
+    --bg-light: #3c3c3c;
+    --text-primary: #d4d4d4;
+    --text-muted: #858585;
+    --accent-blue: #0e639c;
+    --accent-blue-hover: #1177bb;
+    --accent-green: #4ec9b0;
+    --accent-orange: #ce9178;
+    --accent-red: #f48771;
+    --border-color: #858585;
+    --gap: 10px;
+    --radius: 4px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: var(--bg-dark);
+    color: var(--text-primary);
+    overflow: hidden;
+}
+
+button, .btn, .file-label {
+    background: var(--accent-blue);
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: var(--radius);
+    cursor: pointer;
+    font-size: 14px;
+    display: inline-block;
+    text-align: center;
+}
+
+button:hover, .btn:hover, .file-label:hover {
+    background: var(--accent-blue-hover);
+}
+
+button:disabled, .btn:disabled {
+    background: var(--bg-light);
+    cursor: not-allowed;
+}
+
+input[type="file"] {
+    display: none;
+}
+
+input, select {
+    background: var(--bg-light);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    color: var(--text-primary);
+    padding: 8px;
+    font-size: 14px;
+}
+
+.container {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    background: var(--bg-medium);
+    padding: 15px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+h1 {
+    color: var(--accent-green);
+    font-size: 18px;
+    white-space: nowrap;
+}
+
+.controls {
+    display: flex;
+    gap: var(--gap);
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.panel {
+    background: var(--bg-medium);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: 15px;
+}
+
+.error-message {
+    background: #5a1d1d;
+    color: var(--accent-red);
+    padding: 10px;
+    border-radius: var(--radius);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    margin: 10px 0;
+}
+
+.success-message {
+    background: #1e5231;
+    color: #89d185;
+    padding: 10px;
+    border-radius: var(--radius);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    margin: 10px 0;
+}
diff --git a/tools/shader_editor/index.html b/tools/shader_editor/index.html
index bad0abb..d93a595 100644
--- a/tools/shader_editor/index.html
+++ b/tools/shader_editor/index.html
@@ -4,26 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WGSL Shader Editor</title>
+    <link rel="stylesheet" href="../common/style.css">
     <style>
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
-    background: #1e1e1e;
-    color: #d4d4d4;
-    overflow: hidden;
-    height: 100vh;
-}
-
-.container {
-    display: flex;
-    height: 100vh;
-}
-
 .preview-pane {
     flex: 0 0 57%;
     background: #252526;
@@ -89,26 +71,13 @@ body {
 }
 
 .control-group button {
-    background: #0e639c;
-    color: #fff;
-    border: none;
     padding: 6px 12px;
-    border-radius: 3px;
-    cursor: pointer;
     font-size: 13px;
 }
 
-.control-group button:hover {
-    background: #1177bb;
-}
-
 .control-group input[type="number"],
 .control-group select {
-    background: #3c3c3c;
-    color: #d4d4d4;
-    border: 1px solid #3e3e42;
     padding: 4px 8px;
-    border-radius: 3px;
     font-size: 13px;
 }
 
@@ -153,19 +122,10 @@ body {
 }
 
 .editor-header button {
-    background: #0e639c;
-    color: #fff;
-    border: none;
     padding: 6px 12px;
-    border-radius: 3px;
-    cursor: pointer;
     font-size: 13px;
 }
 
-.editor-header button:hover {
-    background: #1177bb;
-}
-
 .editor-container {
     flex: 1;
     position: relative;
diff --git a/tools/spectral_editor/index.html b/tools/spectral_editor/index.html
index 75658ae..2d5f3e5 100644
--- a/tools/spectral_editor/index.html
+++ b/tools/spectral_editor/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Spectral Brush Editor</title>
+    <link rel="stylesheet" href="../common/style.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
diff --git a/tools/spectral_editor/style.css b/tools/spectral_editor/style.css
index 48f7463..87fb54e 100644
--- a/tools/spectral_editor/style.css
+++ b/tools/spectral_editor/style.css
@@ -1,18 +1,4 @@
-/* Spectral Brush Editor Styles */
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: #1e1e1e;
-    color: #d4d4d4;
-    overflow: hidden;
-    height: 100vh;
-}
+/* Spectral Brush Editor Specific Styles */
 
 #app {
     display: flex;
@@ -20,41 +6,12 @@ body {
     height: 100vh;
 }
 
-/* Header */
-header {
-    background: #252526;
-    padding: 12px 20px;
-    border-bottom: 1px solid #3e3e42;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-header h1 {
-    font-size: 18px;
-    font-weight: 600;
-    color: #cccccc;
-}
-
-.header-controls {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-}
-
-.file-info {
-    font-size: 13px;
-    color: #858585;
-}
-
-/* Main content area */
 .main-content {
     display: flex;
     flex: 1;
     overflow: hidden;
 }
 
-/* Canvas container (80% width) */
 .canvas-container {
     flex: 1;
     position: relative;
@@ -89,7 +46,6 @@ header h1 {
     display: none;
 }
 
-/* Mini spectrum viewer (bottom-right overlay) */
 .spectrum-viewer {
     position: absolute;
     bottom: 10px;
@@ -99,12 +55,8 @@ header h1 {
     background: rgba(30, 30, 30, 0.9);
     border: 1px solid #3e3e42;
     border-radius: 3px;
-    display: block;  /* Always visible */
-    pointer-events: none;  /* Don't interfere with mouse events */
-}
-
-.spectrum-viewer.active {
-    display: block;  /* Keep for backward compatibility */
+    display: block;
+    pointer-events: none;
 }
 
 #spectrumCanvas {
@@ -123,7 +75,6 @@ header h1 {
     color: #858585;
 }
 
-/* Toolbar (20% width) */
 .toolbar {
     width: 250px;
     background: #252526;
@@ -155,16 +106,6 @@ header h1 {
     transition: background 0.2s;
 }
 
-.btn-toolbar:hover {
-    background: #1177bb;
-}
-
-.btn-toolbar:disabled {
-    background: #3e3e42;
-    color: #858585;
-    cursor: not-allowed;
-}
-
 .btn-toolbar.btn-danger {
     background: #a82d2d;
 }
@@ -199,7 +140,6 @@ header h1 {
     border-color: #0e639c;
 }
 
-/* Point info panel */
 .point-info {
     margin-top: 10px;
     padding: 10px;
@@ -224,7 +164,6 @@ header h1 {
     font-family: monospace;
 }
 
-/* Control panel (bottom) */
 .control-panel {
     background: #252526;
     border-top: 1px solid #3e3e42;
@@ -314,16 +253,6 @@ header h1 {
     transition: background 0.2s;
 }
 
-.btn-playback:hover:not(:disabled) {
-    background: #1177bb;
-}
-
-.btn-playback:disabled {
-    background: #3e3e42;
-    color: #858585;
-    cursor: not-allowed;
-}
-
 .btn-playback kbd {
     background: rgba(255, 255, 255, 0.1);
     padding: 2px 5px;
@@ -331,7 +260,6 @@ header h1 {
     font-size: 11px;
 }
 
-/* Action bar (bottom) */
 .action-bar {
     background: #2d2d30;
     border-top: 1px solid #3e3e42;
@@ -365,11 +293,6 @@ header h1 {
     border-color: #0e639c;
 }
 
-.btn-action:disabled {
-    color: #858585;
-    cursor: not-allowed;
-}
-
 .btn-primary {
     padding: 6px 16px;
     background: #0e639c;
@@ -381,17 +304,11 @@ header h1 {
     transition: background 0.2s;
 }
 
-.btn-primary:hover {
-    background: #1177bb;
-}
-
-/* Icon styling */
 .icon {
     font-size: 14px;
     line-height: 1;
 }
 
-/* Modal */
 .modal {
     position: fixed;
     z-index: 1000;
@@ -490,7 +407,6 @@ header h1 {
     color: #cccccc;
 }
 
-/* Scrollbar styling */
 ::-webkit-scrollbar {
     width: 10px;
     height: 10px;
@@ -509,7 +425,6 @@ header h1 {
     background: #4e4e52;
 }
 
-/* Waveform intensity viewer */
 .waveform-container {
     position: relative;
     height: 120px;
@@ -570,24 +485,9 @@ header h1 {
     transition: background 0.2s;
 }
 
-.btn-copy:hover, .btn-snap:hover {
-    background: #1177bb;
-}
-
-.btn-copy:active, .btn-snap:active {
-    background: #0d5a8f;
-}
-
 .spectrogram-wrapper {
     flex: 1;
     position: relative;
     overflow: hidden;
     z-index: 1;
 }
-
-#spectrogramCanvas {
-    width: 100%;
-    height: 100%;
-    display: block;
-    cursor: crosshair;
-}
diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html
index 9768343..c5e0264 100644
--- a/tools/timeline_editor/index.html
+++ b/tools/timeline_editor/index.html
@@ -4,107 +4,466 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Timeline Editor - timeline.seq</title>
+    <link rel="stylesheet" href="../common/style.css">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%231e1e1e'/><rect x='10' y='30' width='15' height='40' fill='%234ec9b0'/><rect x='30' y='20' width='15' height='60' fill='%234ec9b0'/><rect x='50' y='35' width='15' height='30' fill='%234ec9b0'/><rect x='70' y='15' width='15' height='70' fill='%234ec9b0'/></svg>">
     <style>
-        :root {
-            --bg-dark: #1e1e1e;
-            --bg-medium: #252526;
-            --bg-light: #3c3c3c;
-            --text-primary: #d4d4d4;
-            --text-muted: #858585;
-            --accent-blue: #0e639c;
-            --accent-blue-hover: #1177bb;
-            --accent-green: #4ec9b0;
-            --accent-orange: #ce9178;
-            --accent-red: #f48771;
-            --border-color: #858585;
-            --gap: 10px;
-            --radius: 4px;
-        }
-
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg-dark); color: var(--text-primary); padding: 20px; min-height: 100vh; }
-        .container { max-width: 100%; width: 100%; margin: 0 auto; }
-
-        header { background: var(--bg-medium); padding: 20px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
-        h1 { color: var(--accent-green); white-space: nowrap; }
-        .controls { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; }
-        .zoom-controls { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; margin-bottom: var(--gap); }
-
-        button, .file-label { background: var(--accent-blue); color: white; border: none; padding: 10px 20px; border-radius: var(--radius); cursor: pointer; font-size: 14px; display: inline-block; }
-        button:hover, .file-label:hover { background: var(--accent-blue-hover); }
-        button:disabled { background: var(--bg-light); cursor: not-allowed; }
-        input[type="file"] { display: none; }
-
-        .checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
-        .checkbox-label input[type="checkbox"] { cursor: pointer; }
-
-        .timeline-container { background: var(--bg-medium); border-radius: 8px; position: relative; height: calc(100vh - 280px); min-height: 500px; display: flex; flex-direction: column; }
-        .timeline-content { flex: 1; overflow: auto; position: relative; padding: 0 20px 20px 20px; scrollbar-width: none; -ms-overflow-style: none; }
-        .timeline-content::-webkit-scrollbar { display: none; }
-        .timeline { position: relative; min-height: 100%; }
-
-        .sticky-header { position: sticky; top: 0; background: var(--bg-medium); z-index: 100; padding: 20px 20px 10px 20px; border-bottom: 2px solid var(--bg-light); flex-shrink: 0; }
-        .waveform-container { position: relative; height: 80px; overflow: hidden; background: rgba(0, 0, 0, 0.5); border-radius: var(--radius); cursor: crosshair; }
-        #cpuLoadCanvas { position: absolute; left: 0; bottom: 0; height: 10px; display: block; z-index: 1; }
-        #waveformCanvas { position: absolute; left: 0; top: 0; height: 80px; display: block; z-index: 2; }
-        .waveform-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(78, 201, 176, 0.6); pointer-events: none; z-index: 3; display: none; }
-        .waveform-tooltip { position: absolute; background: rgba(30, 30, 30, 0.95); color: var(--text-primary); padding: 6px 10px; border-radius: 4px; font-size: 12px; pointer-events: none; z-index: 4; display: none; white-space: nowrap; border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
-
-        .playback-indicator { position: absolute; top: 0; bottom: 0; left: 20px; width: 2px; background: var(--accent-red); box-shadow: 0 0 4px rgba(244, 135, 113, 0.8); pointer-events: none; z-index: 110; display: none; }
-
-        .time-markers { position: relative; height: 30px; margin-top: var(--gap); border-bottom: 1px solid var(--bg-light); }
-        .time-marker { position: absolute; top: 0; font-size: 12px; color: var(--text-muted); }
-        .time-marker::before { content: ''; position: absolute; left: 0; top: 20px; width: 1px; height: 10px; background: var(--bg-light); }
-        .time-marker::after { content: ''; position: absolute; left: 0; top: 30px; width: 1px; height: 10000px; background: rgba(100, 100, 60, 0.9); pointer-events: none; }
-
-        .sequence { position: absolute; background: #264f78; border: 2px solid var(--accent-blue); border-radius: var(--radius); padding: 8px; cursor: move; min-height: 40px; transition: box-shadow 0.2s; }
-        .sequence:hover { box-shadow: 0 0 10px rgba(14, 99, 156, 0.5); }
-        .sequence.selected { border-color: var(--accent-green); box-shadow: 0 0 10px rgba(78, 201, 176, 0.5); }
-        .sequence.collapsed { overflow: hidden !important; background: #1a3a4a !important; }
-        .sequence.collapsed .sequence-name { display: none !important; }
-        .sequence.active-playing { border-color: var(--accent-green); background: #2a5f4a; }
-        .sequence.active-flash { animation: sequenceFlash 0.6s ease-out; }
+        body {
+            padding: 20px;
+            min-height: 100vh;
+        }
+
+        .container {
+            max-width: 100%;
+            width: 100%;
+            margin: 0 auto;
+        }
+
+        header {
+            background: var(--bg-medium);
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+
+        .zoom-controls {
+            display: flex;
+            gap: var(--gap);
+            flex-wrap: wrap;
+            align-items: center;
+            margin-bottom: var(--gap);
+        }
+
+        .checkbox-label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .checkbox-label input[type="checkbox"] {
+            cursor: pointer;
+        }
+
+        .timeline-container {
+            background: var(--bg-medium);
+            border-radius: 8px;
+            position: relative;
+            height: calc(100vh - 280px);
+            min-height: 500px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .timeline-content {
+            flex: 1;
+            overflow: auto;
+            position: relative;
+            padding: 0 20px 20px 20px;
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+        }
+
+        .timeline-content::-webkit-scrollbar {
+            display: none;
+        }
+
+        .timeline {
+            position: relative;
+            min-height: 100%;
+        }
+
+        .sticky-header {
+            position: sticky;
+            top: 0;
+            background: var(--bg-medium);
+            z-index: 100;
+            padding: 20px 20px 10px 20px;
+            border-bottom: 2px solid var(--bg-light);
+            flex-shrink: 0;
+        }
+
+        .waveform-container {
+            position: relative;
+            height: 80px;
+            overflow: hidden;
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: var(--radius);
+            cursor: crosshair;
+        }
+
+        #cpuLoadCanvas {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            height: 10px;
+            display: block;
+            z-index: 1;
+        }
+
+        #waveformCanvas {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 80px;
+            display: block;
+            z-index: 2;
+        }
+
+        .waveform-cursor {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 1px;
+            background: rgba(78, 201, 176, 0.6);
+            pointer-events: none;
+            z-index: 3;
+            display: none;
+        }
+
+        .waveform-tooltip {
+            position: absolute;
+            background: rgba(30, 30, 30, 0.95);
+            color: var(--text-primary);
+            padding: 6px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            pointer-events: none;
+            z-index: 4;
+            display: none;
+            white-space: nowrap;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+        }
+
+        .playback-indicator {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 20px;
+            width: 2px;
+            background: var(--accent-red);
+            box-shadow: 0 0 4px rgba(244, 135, 113, 0.8);
+            pointer-events: none;
+            z-index: 110;
+            display: none;
+        }
+
+        .time-markers {
+            position: relative;
+            height: 30px;
+            margin-top: var(--gap);
+            border-bottom: 1px solid var(--bg-light);
+        }
+
+        .time-marker {
+            position: absolute;
+            top: 0;
+            font-size: 12px;
+            color: var(--text-muted);
+        }
+
+        .time-marker::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 20px;
+            width: 1px;
+            height: 10px;
+            background: var(--bg-light);
+        }
+
+        .time-marker::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 30px;
+            width: 1px;
+            height: 10000px;
+            background: rgba(100, 100, 60, 0.9);
+            pointer-events: none;
+        }
+
+        .sequence {
+            position: absolute;
+            background: #264f78;
+            border: 2px solid var(--accent-blue);
+            border-radius: var(--radius);
+            padding: 8px;
+            cursor: move;
+            min-height: 40px;
+            transition: box-shadow 0.2s;
+        }
+
+        .sequence:hover {
+            box-shadow: 0 0 10px rgba(14, 99, 156, 0.5);
+        }
+
+        .sequence.selected {
+            border-color: var(--accent-green);
+            box-shadow: 0 0 10px rgba(78, 201, 176, 0.5);
+        }
+
+        .sequence.collapsed {
+            overflow: hidden !important;
+            background: #1a3a4a !important;
+        }
+
+        .sequence.collapsed .sequence-name {
+            display: none !important;
+        }
+
+        .sequence.active-playing {
+            border-color: var(--accent-green);
+            background: #2a5f4a;
+        }
+
+        .sequence.active-flash {
+            animation: sequenceFlash 0.6s ease-out;
+        }
+
         @keyframes sequenceFlash {
-            0% { box-shadow: 0 0 20px rgba(78, 201, 176, 0.8); border-color: var(--accent-green); }
-            100% { box-shadow: 0 0 10px rgba(14, 99, 156, 0.5); border-color: var(--accent-blue); }
-        }
-
-        .sequence-header { position: absolute; top: 0; left: 0; right: 0; padding: 8px; z-index: 5; cursor: move; user-select: none; }
-        .sequence-header-name { font-size: 14px; font-weight: bold; color: #ffffff; }
-        .sequence:not(.collapsed) .sequence-header-name { display: none; }
-        .sequence-name { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: bold; color: #ffffff; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), -1px -1px 4px rgba(0, 0, 0, 0.7); pointer-events: none; white-space: nowrap; opacity: 1; transition: opacity 0.3s ease; z-index: 10; }
-        .sequence.hovered .sequence-name { opacity: 0; }
-
-        .effect { position: absolute; background: #3a3d41; border: 1px solid var(--border-color); border-radius: 3px; padding: 4px 8px; cursor: move; font-size: 11px; transition: box-shadow 0.2s; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .effect:hover { box-shadow: 0 0 8px rgba(133, 133, 133, 0.5); background: #45484d; }
-        .effect.selected { border-color: var(--accent-orange); box-shadow: 0 0 8px rgba(206, 145, 120, 0.5); }
-        .effect.conflict { background: #4a1d1d; border-color: var(--accent-red); box-shadow: 0 0 8px rgba(244, 135, 113, 0.6); }
-        .effect.conflict:hover { background: #5a2424; }
-        .effect-handle { position: absolute; top: 0; width: 6px; height: 100%; background: rgba(78, 201, 176, 0.8); cursor: ew-resize; display: none; z-index: 10; }
-        .effect.selected .effect-handle { display: block; }
-        .effect-handle.left { left: 0; border-radius: 3px 0 0 3px; }
-        .effect-handle.right { right: 0; border-radius: 0 3px 3px 0; }
-        .effect-handle:hover { background: var(--accent-green); width: 8px; }
-
-        .properties-panel { position: fixed; bottom: 20px; left: 20px; width: 350px; max-height: 80vh; background: var(--bg-medium); padding: 15px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); z-index: 1000; overflow-y: auto; transition: transform 0.3s ease; }
-        .properties-panel.collapsed { transform: translateY(calc(100% + 40px)); }
-        .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--bg-light); }
-        .panel-header h2 { margin: 0; color: var(--accent-green); font-size: 16px; }
-        .panel-toggle { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 12px; }
-        .panel-toggle:hover { background: var(--bg-light); }
-        .panel-collapse-btn { position: fixed; bottom: 20px; left: 20px; background: var(--bg-medium); border: 1px solid var(--border-color); color: var(--text-primary); padding: 8px 12px; border-radius: var(--radius); cursor: pointer; z-index: 999; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); display: none; }
-        .panel-collapse-btn:hover { background: var(--bg-light); }
-        .panel-collapse-btn.visible { display: block; }
-
-        .property-group { margin-bottom: 15px; }
-        .property-group label { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 14px; }
-        .property-group input, .property-group select { width: 100%; padding: 8px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: var(--radius); color: var(--text-primary); font-size: 14px; }
-
-        .stats { background: var(--bg-dark); padding: 10px; border-radius: var(--radius); margin-top: 10px; font-size: 12px; color: var(--text-muted); }
-        #messageArea { position: fixed; top: 80px; right: 20px; z-index: 2000; max-width: 400px; }
-        .error { background: #5a1d1d; color: var(--accent-red); padding: 10px; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
-        .success { background: #1e5231; color: #89d185; padding: 10px; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
+            0% {
+                box-shadow: 0 0 20px rgba(78, 201, 176, 0.8);
+                border-color: var(--accent-green);
+            }
+            100% {
+                box-shadow: 0 0 10px rgba(14, 99, 156, 0.5);
+                border-color: var(--accent-blue);
+            }
+        }
+
+        .sequence-header {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 8px;
+            z-index: 5;
+            cursor: move;
+            user-select: none;
+        }
+
+        .sequence-header-name {
+            font-size: 14px;
+            font-weight: bold;
+            color: #ffffff;
+        }
+
+        .sequence:not(.collapsed) .sequence-header-name {
+            display: none;
+        }
+
+        .sequence-name {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 24px;
+            font-weight: bold;
+            color: #ffffff;
+            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), -1px -1px 4px rgba(0, 0, 0, 0.7);
+            pointer-events: none;
+            white-space: nowrap;
+            opacity: 1;
+            transition: opacity 0.3s ease;
+            z-index: 10;
+        }
+
+        .sequence.hovered .sequence-name {
+            opacity: 0;
+        }
+
+        .effect {
+            position: absolute;
+            background: #3a3d41;
+            border: 1px solid var(--border-color);
+            border-radius: 3px;
+            padding: 4px 8px;
+            cursor: move;
+            font-size: 11px;
+            transition: box-shadow 0.2s;
+            display: flex;
+            align-items: center;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .effect:hover {
+            box-shadow: 0 0 8px rgba(133, 133, 133, 0.5);
+            background: #45484d;
+        }
+
+        .effect.selected {
+            border-color: var(--accent-orange);
+            box-shadow: 0 0 8px rgba(206, 145, 120, 0.5);
+        }
+
+        .effect.conflict {
+            background: #4a1d1d;
+            border-color: var(--accent-red);
+            box-shadow: 0 0 8px rgba(244, 135, 113, 0.6);
+        }
+
+        .effect.conflict:hover {
+            background: #5a2424;
+        }
+
+        .effect-handle {
+            position: absolute;
+            top: 0;
+            width: 6px;
+            height: 100%;
+            background: rgba(78, 201, 176, 0.8);
+            cursor: ew-resize;
+            display: none;
+            z-index: 10;
+        }
+
+        .effect.selected .effect-handle {
+            display: block;
+        }
+
+        .effect-handle.left {
+            left: 0;
+            border-radius: 3px 0 0 3px;
+        }
+
+        .effect-handle.right {
+            right: 0;
+            border-radius: 0 3px 3px 0;
+        }
+
+        .effect-handle:hover {
+            background: var(--accent-green);
+            width: 8px;
+        }
+
+        .properties-panel {
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            width: 350px;
+            max-height: 80vh;
+            background: var(--bg-medium);
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            overflow-y: auto;
+            transition: transform 0.3s ease;
+        }
+
+        .properties-panel.collapsed {
+            transform: translateY(calc(100% + 40px));
+        }
+
+        .panel-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid var(--bg-light);
+        }
+
+        .panel-header h2 {
+            margin: 0;
+            color: var(--accent-green);
+            font-size: 16px;
+        }
+
+        .panel-toggle {
+            background: transparent;
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            padding: 4px 8px;
+            border-radius: 3px;
+            cursor: pointer;
+            font-size: 12px;
+        }
+
+        .panel-toggle:hover {
+            background: var(--bg-light);
+        }
+
+        .panel-collapse-btn {
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            background: var(--bg-medium);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            padding: 8px 12px;
+            border-radius: var(--radius);
+            cursor: pointer;
+            z-index: 999;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+            display: none;
+        }
+
+        .panel-collapse-btn:hover {
+            background: var(--bg-light);
+        }
+
+        .panel-collapse-btn.visible {
+            display: block;
+        }
+
+        .property-group {
+            margin-bottom: 15px;
+        }
+
+        .property-group label {
+            display: block;
+            margin-bottom: 5px;
+            color: var(--text-muted);
+            font-size: 14px;
+        }
+
+        .property-group input,
+        .property-group select {
+            width: 100%;
+        }
+
+        .stats {
+            background: var(--bg-dark);
+            padding: 10px;
+            border-radius: var(--radius);
+            margin-top: 10px;
+            font-size: 12px;
+            color: var(--text-muted);
+        }
+
+        #messageArea {
+            position: fixed;
+            top: 80px;
+            right: 20px;
+            z-index: 2000;
+            max-width: 400px;
+        }
+
+        .error {
+            background: #5a1d1d;
+            color: var(--accent-red);
+            padding: 10px;
+            border-radius: var(--radius);
+            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+        }
+
+        .success {
+            background: #1e5231;
+            color: #89d185;
+            padding: 10px;
+            border-radius: var(--radius);
+            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+        }
     </style>
 </head>
 <body>
diff --git a/tools/track_visualizer/index.html b/tools/track_visualizer/index.html
index 4a613ec..d1e7480 100644
--- a/tools/track_visualizer/index.html
+++ b/tools/track_visualizer/index.html
@@ -4,18 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Music Track Visualizer</title>
+  <link rel="stylesheet" href="../common/style.css">
   <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    body {
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      background: #1e1e1e;
-      color: #d4d4d4;
-      overflow: hidden;
-    }
     #controls {
       padding: 15px;
       background: #2d2d2d;
@@ -27,16 +17,8 @@
     }
     button, input[type="file"] {
       padding: 8px 16px;
-      background: #0e639c;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
       font-size: 14px;
     }
-    button:hover {
-      background: #1177bb;
-    }
     input[type="file"] {
       padding: 6px 12px;
     }
@@ -58,7 +40,6 @@
       width: 100%;
       height: calc(100vh - 70px);
       overflow: auto;
-      background: #1e1e1e;
     }
     #timeline-canvas {
       display: block;
-- 
cgit v1.2.3