2 files changed, 4 insertions, 103 deletions
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;
-}