UI redesign Phase 0-6 + functional fixes

- tokens.css v3: chrome-only design tokens (slate + amber)
- corrector.css: full retoken, no pink in chrome, TL note 56px
- corrector.html: mode-panel, multi-edit panel, proxy scripts
- Phase 3: status bar restyle, shortcut-bar hidden, feedback collapsed
- Phase 4: left mode-panel with proxied mode/display/offset controls
- Phase 5: barline toolbar coral context-bar + marker dimming
- Phase 6: multi-edit panel for batch operations on multi-select
- Fix: staff drag now updates omrY so markers don't snap back
- Fix: free glyph click navigates timeline to that measure
- Fix: auto-fit zoom on image load (width-fit)
- Fix: acc-label size 46px, closer to note (+8,+5)
- Add: pitch preview sound on raise/lower/accidental/drag
- Update: glyph shapes with correct unicode symbols

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

static/corrector.css

@@ -1,92 +1,144 @@
 * { box-sizing: border-box; margin: 0; padding: 0; }
-body { font-family: 'Segoe UI', sans-serif; font-size: 13px; background: #1a1a2e; color: #e0e0e0; display: flex; flex-direction: column; height: 100vh; }
+body { font-family: var(--font-sans); font-size: var(--fs-body); background: var(--bg-1); color: var(--ink-0); display: flex; flex-direction: column; height: 100vh; }
 
 /* Feedback Banner */
-#feedback-bar {
-  display: flex; justify-content: center; padding: 6px 12px;
-  background: #1a0a2e; border-bottom: 1px solid #444;
-}
+#feedback-bar { display: none; }
 #feedback-btn {
   display: inline-block; padding: 8px 40px;
-  background: #e94560; color: #fff; font-size: 22px; font-weight: bold;
+  background: var(--accent-dim); color: #fff; font-size: var(--fs-body); font-weight: bold;
   text-decoration: none; border-radius: 6px; letter-spacing: 1px;
 }
-#feedback-btn:hover { background: #ff6b6b; }
+#feedback-btn:hover { background: #f7b06d; }
 
 /* Upload Bar */
 #upload-bar {
   display: flex; align-items: center; gap: 15px; padding: 8px 12px;
-  background: #16213e; border-bottom: 1px solid #333;
-  font-size: 24px; flex-wrap: wrap;
-}
-#upload-bar label { display: flex; align-items: center; gap: 6px; font-size: 24px; }
-#upload-bar input[type="file"] { width: 340px; font-size: 21px; }
-#upload-bar input[type="number"] { width: 75px; background: #0f3460; border: 1px solid #555; color: #fff; padding: 4px 5px; border-radius: 4px; font-size: 24px; }
-#load-btn { padding: 8px 22px; background: #e94560; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 24px; }
-#load-btn:hover { background: #ff6b6b; }
-#load-status { color: #aaa; font-size: 19px; }
+  background: var(--bg-2); border-bottom: 1px solid var(--line);
+  font-size: var(--fs-body); flex-wrap: wrap;
+}
+#upload-bar label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-label); }
+#upload-bar input[type="file"] { width: 340px; font-size: var(--fs-label); }
+#upload-bar input[type="number"] { width: 75px; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink-0); padding: 4px 5px; border-radius: 4px; font-size: var(--fs-label); }
+#load-btn { padding: 8px 22px; background: linear-gradient(180deg, #f7b06d, #e08840); color: #1c1004; border: none; border-radius: 5px; cursor: pointer; font-weight: 600; font-size: var(--fs-label); }
+#load-btn:hover { filter: brightness(1.06); }
+#load-status { color: var(--ink-2); font-size: var(--fs-meta); }
 #page-nav { display: inline-flex; align-items: center; gap: 6px; }
-#page-nav button { padding: 4px 12px; background: #0f3460; color: #e0e0e0; border: 1px solid #555; border-radius: 4px; cursor: pointer; font-size: 24px; }
-#page-nav button:hover { background: #1a1a5e; }
-#page-indicator { font-size: 22px; color: #e0e0e0; min-width: 60px; text-align: center; }
+#page-nav button { padding: 4px 12px; background: var(--bg-3); color: var(--ink-0); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font-size: var(--fs-label); }
+#page-nav button:hover { background: var(--bg-4); }
+#page-indicator { font-size: var(--fs-label); font-family: var(--font-mono); color: var(--ink-0); min-width: 60px; text-align: center; }
 
 /* Toolbar */
 #toolbar {
   display: flex; align-items: center; gap: 8px; padding: 6px 12px;
-  background: #0f3460; border-bottom: 1px solid #333; flex-wrap: wrap;
-  font-size: 24px;
+  background: var(--bg-3); border-bottom: 1px solid var(--line); flex-wrap: wrap;
+  font-size: var(--fs-body);
 }
-.tool-group { display: flex; align-items: center; gap: 4px; padding: 0 6px; border-right: 1px solid #333; }
+.tool-group { display: flex; align-items: center; gap: 4px; padding: 0 6px; border-right: 1px solid var(--line); }
 .tool-group:last-child { border-right: none; }
 .tool-group.right { margin-left: auto; }
 #toolbar button {
-  padding: 6px 11px; background: #16213e; color: #e0e0e0; border: 1px solid #555;
-  border-radius: 3px; cursor: pointer; font-size: 24px;
-}
-#toolbar button:hover { background: #1a1a5e; border-color: #888; }
-#toolbar button:active { background: #e94560; }
-#btn-show-free-glyphs { padding: 10px 18px; font-size: 26px; font-weight: bold; background: #4a2080; border-color: #8a4fd0; }
-#btn-show-free-glyphs:hover { background: #6a30b0; border-color: #a060e0; }
-#btn-show-free-glyphs.active { background: #7b2ff7; border-color: #a060e0; color: #fff; }
-#btn-download { background: #1b6b1b; border-color: #2a2; }
-#btn-download:hover { background: #2a8a2a; }
-#toolbar label { font-size: 24px; }
-#toolbar input[type="number"] { font-size: 24px; width: 68px; }
+  padding: 6px 11px; background: var(--bg-2); color: var(--ink-0); border: 1px solid var(--line-strong);
+  border-radius: 3px; cursor: pointer; font-size: var(--fs-label);
+}
+#toolbar button:hover { background: var(--bg-4); border-color: var(--line-strong); }
+#toolbar button:active { background: var(--accent-soft); color: var(--accent); }
+#btn-show-free-glyphs { padding: 10px 18px; font-size: var(--fs-label); font-weight: bold; background: rgba(255,153,0,.12); border-color: rgba(255,153,0,.4); color: #ffcc88; }
+#btn-show-free-glyphs:hover { background: rgba(255,153,0,.2); }
+#btn-show-free-glyphs.active { background: rgba(255,153,0,.25); border-color: #ff9900; color: #ffd9a3; }
+#btn-download { background: rgba(124,212,84,.12); border-color: rgba(124,212,84,.4); color: #b6e4a4; }
+#btn-download:hover { background: rgba(124,212,84,.2); }
+#feedback-link {
+  display: inline-flex; width: 30px; height: 30px;
+  align-items: center; justify-content: center;
+  color: var(--ink-2); text-decoration: none; border-radius: var(--r-md);
+}
+#feedback-link:hover { background: var(--bg-3); color: var(--ink-0); }
+#toolbar label { font-size: var(--fs-label); }
+#toolbar input[type="number"] { font-size: var(--fs-label); width: 68px; }
 #toolbar input[type="range"] { width: 112px; height: 12px; }
 
 #zoom-slider { width: 112px; vertical-align: middle; }
-#zoom-label { font-size: 21px; color: #aaa; min-width: 38px; display: inline-block; }
+#zoom-label { font-size: var(--fs-meta); color: var(--ink-2); min-width: 38px; display: inline-block; }
 
 /* Shortcut Reference Bar */
-#shortcut-bar {
-  display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 6px 12px;
-  background: #12122a; border-bottom: 1px solid #2a2a4a;
-  font-size: 20px; color: #888;
+#shortcut-bar { display: none; }
+#shortcut-bar b { color: var(--ink-1); }
+
+/* OMR Apply Button (moved to status-bar in Phase 3) */
+#omr-apply-btn {
+  margin-left: 8px; padding: 4px 10px;
+  background: rgba(124,212,84,.12); border: 1px solid rgba(124,212,84,.4); color: #b6e4a4;
+  border-radius: 5px; cursor: pointer; font-size: var(--fs-meta);
+}
+#omr-apply-btn:hover { background: rgba(124,212,84,.2); }
+#omr-apply-badge {
+  background: var(--danger); color: #fff; border-radius: 8px;
+  padding: 0 5px; margin-left: 4px; font-size: 10px;
 }
-#shortcut-bar b { color: #bbb; }
 
 /* Progress Bar */
 #progress-bar-container {
-  position: relative; height: 38px; background: #0a0a1a; border-bottom: 1px solid #333;
+  position: relative; height: 38px; background: var(--bg-0); border-bottom: 1px solid var(--line);
   cursor: pointer; user-select: none;
 }
 #progress-bar-fill {
-  height: 100%; width: 0%; background: linear-gradient(90deg, #e94560, #ff6b6b);
+  height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), #f7b06d);
   transition: none; pointer-events: none;
 }
 #progress-time {
   position: absolute; top: 0; right: 8px; line-height: 38px;
-  font-size: 15px; color: #aaa; pointer-events: none;
+  font-size: var(--fs-meta); color: var(--ink-2); pointer-events: none;
 }
 
-/* Main Area: flex row for score + timeline */
+/* Mode Panel (left aside) */
+#mode-panel {
+  width: 248px; flex-shrink: 0;
+  background: var(--bg-2); border-right: 1px solid var(--line);
+  display: flex; flex-direction: column;
+  overflow-y: auto;
+}
+#mode-panel .mode-list { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
+.mode-row {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 10px; border-radius: 6px;
+  background: transparent; border: 1px solid transparent;
+  color: var(--ink-0); cursor: pointer;
+  font-size: var(--fs-label); text-align: left;
+}
+.mode-row .ic {
+  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
+  background: var(--bg-3); border-radius: 5px; color: var(--ink-1); font-size: 13px;
+}
+.mode-row .kbd-chip { margin-left: auto; }
+.mode-row.is-active {
+  background: var(--accent-soft); border-color: var(--accent-dim); color: var(--accent);
+}
+.mode-row.is-active .ic { background: rgba(243,162,91,.2); color: var(--accent); }
+
+#mode-panel .display-toggles { padding: 4px 14px 12px; display: flex; flex-direction: column; gap: 4px; }
+.tg { display: flex; align-items: center; gap: 10px; font-size: var(--fs-label); color: var(--ink-1); cursor: pointer; padding: 4px 0; }
+.tg input { accent-color: var(--accent); }
+
+#mode-panel .offset-grid {
+  padding: 6px 14px 12px;
+  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px;
+}
+.offset-grid label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); color: var(--ink-2); }
+.offset-grid input[type="number"] {
+  background: #0a0d14; border: 1px solid var(--line); border-radius: 5px;
+  color: var(--ink-0); padding: 4px 6px; font-family: var(--font-mono); font-size: 11.5px;
+}
+
+#warning-list { padding: 6px 14px 12px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-meta); }
+
+/* Main Area: flex row for mode-panel + score + timeline */
 #main-area {
   flex: 1; display: flex; overflow: hidden; min-height: 0;
 }
 
 /* Main Canvas */
 #canvas-wrapper {
-  flex: 1; overflow: auto; background: #111; position: relative; min-width: 0;
+  flex: 1; overflow: auto; background: var(--bg-0); position: relative; min-width: 0;
 }
 #canvas-container {
   position: relative; display: inline-block;
@@ -99,6 +151,10 @@ body { font-family: 'Segoe UI', sans-serif; font-size: 13px; background: #1a1a2e
   position: absolute; top: 0; left: 0; pointer-events: none;
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   PRESERVED — do not change. See PRESERVED_VALUES.md §1
+   ═══════════════════════════════════════════════════════════════ */
+
 /* Markers */
 .marker {
   pointer-events: all; cursor: pointer;
@@ -123,12 +179,11 @@ body { font-family: 'Segoe UI', sans-serif; font-size: 13px; background: #1a1a2e
 .marker.grade-mid { fill: rgba(255, 165, 0, 0.8); stroke: #ffa500; stroke-width: 1.5; }
 .marker.grade-ok { fill: rgba(255, 220, 50, 0.7); stroke: #ddcc33; stroke-width: 1; }
 
-/* Accidental label next to marker */
+/* PRESERVED §2 — Accidental & ghost labels */
 .acc-label {
-  pointer-events: none; font-size: 66px; fill: #ffd700; font-weight: bold;
-  stroke: #000; stroke-width: 5px; paint-order: stroke fill;
+  pointer-events: none; font-size: 46px; fill: #ffd700; font-weight: bold;
+  stroke: #000; stroke-width: 4px; paint-order: stroke fill;
 }
-/* Ghost marker for add mode */
 .ghost-marker {
   fill: rgba(255, 50, 50, 0.5); stroke: #ff3333; stroke-width: 2.5;
   stroke-dasharray: 4 2;
@@ -137,24 +192,28 @@ body { font-family: 'Segoe UI', sans-serif; font-size: 13px; background: #1a1a2e
   fill: #ff3333; font-size: 14px; font-weight: bold; opacity: 0.9;
 }
 
-/* Chord Popup */
+/* ═══════════════════════════════════════════════════════════════
+   CHROME — retokened
+   ═══════════════════════════════════════════════════════════════ */
+
+/* Chord Popup — chrome retokened, position PRESERVED §6 */
 #chord-popup {
-  position: absolute; background: #16213e; border: 1px solid #e94560;
+  position: absolute; background: var(--bg-2); border: 1px solid var(--line-strong);
   border-radius: 6px; padding: 6px 0; z-index: 100; min-width: 140px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+  box-shadow: var(--shadow-md);
 }
 #chord-popup.hidden { display: none; }
-#chord-popup-title { padding: 4px 12px; font-size: 11px; color: #aaa; border-bottom: 1px solid #333; }
+#chord-popup-title { padding: 4px 12px; font-size: 11px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
 #chord-popup-list { list-style: none; }
 #chord-popup-list li {
   padding: 6px 12px; cursor: pointer; font-size: 13px;
 }
-#chord-popup-list li:hover { background: #0f3460; }
+#chord-popup-list li:hover { background: var(--bg-3); }
 #chord-popup-list li .voice-dot {
   display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
 }
 
-/* Barline overlays */
+/* PRESERVED §4 — Barline overlays */
 .barline-overlay {
   pointer-events: none;
   transition: stroke-width 0.1s, opacity 0.1s;
@@ -167,7 +226,7 @@ body { font-family: 'Segoe UI', sans-serif; font-size: 13px; background: #1a1a2e
 .barline-overlay.bl-selected { stroke: #0066ff; stroke-width: 3; opacity: 1.0; }
 .barline-overlay.bl-hover { stroke-width: 2.5; opacity: 0.8; }
 
-/* Free glyph overlays */
+/* PRESERVED §5 — Free glyph overlays */
 .free-glyph-box {
   fill: rgba(255, 153, 0, 0.15);
   stroke: #ff9900;
@@ -186,51 +245,63 @@ body { font-family: 'Segoe UI', sans-serif; font-size: 13px; background: #1a1a2e
   fill: rgba(0, 204, 68, 0.15);
 }
 
-/* Glyph shape popup */
+/* PRESERVED §6 — Glyph shape popup (sizes/position locked, chrome retokened) */
 #glyph-popup {
-  position: fixed; background: #16213e; border: 2px solid #ff9900;
+  position: fixed; background: var(--bg-2); border: 2px solid #ff9900;
   border-radius: 8px; padding: 10px 0; z-index: 10000; min-width: 280px;
   max-height: 70vh; overflow-y: auto;
-  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
+  box-shadow: var(--shadow-lg);
 }
 #glyph-popup.hidden { display: none; }
-#glyph-popup-title { padding: 8px 20px; font-size: 20px; color: #ccc; border-bottom: 1px solid #444; font-weight: bold; }
+#glyph-popup-title { padding: 8px 20px; font-size: 20px; color: var(--ink-1); border-bottom: 1px solid var(--line); font-weight: bold; }
 #glyph-popup-list { list-style: none; }
 #glyph-popup-list li {
   padding: 10px 20px; cursor: pointer; font-size: 22px;
 }
-#glyph-popup-list li:hover { background: #0f3460; }
+#glyph-popup-list li:hover { background: var(--bg-3); }
 #glyph-popup-list .glyph-cat {
-  padding: 6px 20px; font-size: 18px; color: #ff9900; pointer-events: none; font-weight: bold; border-top: 1px solid #333;
+  padding: 6px 20px; font-size: 18px; color: #ff9900; pointer-events: none; font-weight: bold; border-top: 1px solid var(--line);
 }
 
-/* Ghost barline for barline edit mode */
+/* PRESERVED §4 — Ghost barline & barline label */
 .ghost-barline {
   stroke: #ff3333; stroke-width: 1.5; opacity: 0.5;
   stroke-dasharray: 6 3; pointer-events: none;
 }
-
-/* Barline measure label */
 .barline-label {
   fill: #00cc44; font-size: 9px; pointer-events: none; opacity: 0.7;
 }
 
-/* Barline toolbar */
+/* Barline toolbar — chrome retokened */
 #barline-toolbar {
-  display: none; padding: 5px 12px;
-  background: #1a0a2e; border-bottom: 1px solid #555;
-  font-size: 20px; color: #ccc; align-items: center; gap: 12px;
+  display: none;
+  height: 44px; padding: 0 16px; align-items: center; gap: 12px;
+  background: linear-gradient(180deg, rgba(255,108,122,.16), rgba(255,108,122,.05));
+  border-bottom: 1px solid rgba(255,108,122,.35);
+  font-size: var(--fs-label); color: var(--ink-1);
 }
 #barline-toolbar.active { display: flex; }
+#barline-toolbar .bl-mode-label {
+  padding: 4px 12px; border-radius: 999px;
+  font-size: 11px; font-weight: 700; letter-spacing: .06em;
+  background: rgba(255,108,122,.25); color: #ffd0d4; border: 1px solid rgba(255,108,122,.4);
+}
+#barline-toolbar #bl-count { font-family: var(--font-mono); color: var(--ink-1); }
+#barline-toolbar .bl-hint { color: var(--ink-2); font-size: var(--fs-meta); margin-left: auto; }
 #barline-toolbar button {
-  padding: 4px 12px; background: #16213e; color: #e0e0e0;
-  border: 1px solid #555; border-radius: 3px; cursor: pointer; font-size: 20px;
+  height: 28px; padding: 0 12px; border-radius: var(--r-md);
+  background: var(--bg-3); border: 1px solid var(--line-strong); color: var(--ink-0);
+  font-size: var(--fs-label); cursor: pointer;
 }
-#barline-toolbar button:hover { background: #1a1a5e; }
-#barline-toolbar .bl-mode-label { color: #ff6644; font-weight: bold; }
-#barline-toolbar .bl-hint { color: #888; font-size: 18px; }
+#barline-toolbar button:hover { background: var(--bg-4); }
+#barline-toolbar #bl-btn-accept {
+  background: linear-gradient(180deg, #f7b06d, #e08840); border-color: #bf6c2f; color: #1c1004; font-weight: 600;
+}
+
+/* Dim markers during barline edit mode */
+body.mode-barline #marker-svg .marker { opacity: 0.3; transition: opacity .15s; }
 
-/* Rhythm validation warnings */
+/* PRESERVED §8 — Rhythm validation warnings */
 .rhythm-warning {
   pointer-events: none;
   animation: rhythm-pulse 2s ease-in-out infinite;
@@ -240,38 +311,37 @@ body { font-family: 'Segoe UI', sans-serif; font-size: 13px; background: #1a1a2e
   50% { fill: rgba(255, 40, 40, 0.25); }
 }
 
-/* Timeline Panel (Piano Roll) — right side */
+/* Timeline Panel (Piano Roll) — chrome retokened */
 #timeline-panel {
   flex: 1; min-width: 0;
-  background: #0d0d1a; border-left: 2px solid #e94560;
+  background: var(--bg-1); border-left: 1px solid var(--line);
   display: flex; flex-direction: column; overflow: hidden;
 }
 #timeline-header {
   display: flex; align-items: center; padding: 10px 14px;
-  background: linear-gradient(180deg, #1a0a2e, #12122a);
-  border-bottom: 2px solid #e94560; gap: 10px; flex-shrink: 0;
+  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
+  border-bottom: 1px solid var(--line); gap: 10px; flex-shrink: 0;
 }
 #timeline-title {
-  font-weight: bold; color: #e94560; font-size: 28px;
-  text-shadow: 0 0 8px rgba(233,69,96,0.4);
+  font-weight: bold; color: var(--ink-0); font-size: var(--fs-display);
   white-space: nowrap;
 }
 #timeline-controls { display: flex; align-items: center; gap: 12px; margin-left: auto; }
 #timeline-snap-label {
-  color: #bbb; font-size: 24px; display: flex; align-items: center; gap: 6px;
+  color: var(--ink-1); font-size: var(--fs-label); display: flex; align-items: center; gap: 6px;
   cursor: pointer;
 }
 #timeline-snap-label input[type="checkbox"] { width: 20px; height: 20px; }
-#timeline-snap-label:hover { color: #fff; }
+#timeline-snap-label:hover { color: var(--ink-0); }
 #timeline-grid-select {
-  background: #1a1a3e; color: #ddd; border: 1px solid #444;
-  border-radius: 4px; font-size: 24px; padding: 6px 10px;
+  background: var(--bg-3); color: var(--ink-0); border: 1px solid var(--line);
+  border-radius: 4px; font-size: var(--fs-label); padding: 6px 10px;
 }
 #timeline-close {
-  background: none; border: none; color: #666;
-  font-size: 36px; cursor: pointer; padding: 0 8px; line-height: 1;
+  background: none; border: none; color: var(--ink-3);
+  font-size: 20px; cursor: pointer; padding: 0 8px; line-height: 1;
 }
-#timeline-close:hover { color: #e94560; }
+#timeline-close:hover { color: var(--accent); }
 #timeline-body {
   flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px;
 }
@@ -279,34 +349,34 @@ body { font-family: 'Segoe UI', sans-serif; font-size: 13px; background: #1a1a2e
 /* Staff lane */
 .tl-lane {
   margin-bottom: 6px; position: relative;
-  background: #0a0a16; border: 1px solid #1a1a3e; border-radius: 4px;
+  background: #0a0a16; border: 1px solid var(--line); border-radius: 4px;
   overflow: hidden;
 }
 .tl-lane-label {
   position: absolute; left: 0; top: 0; bottom: 0; width: 80px;
-  background: #111128; border-right: 1px solid #2a2a4a;
-  font-size: 20px; color: #8888bb; padding: 4px 6px;
+  background: var(--bg-2); border-right: 1px solid var(--line);
+  font-size: var(--fs-meta); color: var(--ink-2); padding: 4px 6px;
   pointer-events: none; z-index: 2; line-height: 1.3;
   display: flex; flex-direction: column; justify-content: center;
 }
-.tl-lane-label .staff-id { font-size: 22px; color: #aaa; font-weight: bold; }
+.tl-lane-label .staff-id { font-size: var(--fs-label); color: var(--ink-1); font-weight: 700; }
 .tl-grid-line {
   position: absolute; top: 0; bottom: 0; width: 1px;
-  background: #1a1a2e; pointer-events: none; z-index: 0;
+  background: var(--bg-1); pointer-events: none; z-index: 0;
 }
-.tl-grid-line.beat { background: #2a2a4a; }
-.tl-grid-line.bar-start { background: #555; width: 2px; }
+.tl-grid-line.beat { background: var(--line); }
+.tl-grid-line.bar-start { background: var(--line-strong); width: 2px; }
 .tl-grid-label {
-  position: absolute; bottom: 1px; font-size: 8px; color: #555;
+  position: absolute; bottom: 1px; font-size: 8px; color: var(--ink-3);
   pointer-events: none; transform: translateX(-50%); z-index: 0;
 }
 
-/* Note block */
+/* PRESERVED §7 — Note block (height/font-size changeable, voice gradients locked) */
 .tl-note {
-  position: absolute; height: 96px;
+  position: absolute; height: 56px;
   border-radius: 4px; cursor: grab; z-index: 1;
-  font-size: 22px; font-weight: 600; line-height: 96px;
-  text-align: center; padding: 0 3px;
+  font-size: var(--fs-label); font-weight: 600; line-height: 52px;
+  text-align: center; padding: 0 3px; margin: 7px 0;
   color: #fff; white-space: nowrap; overflow: hidden;
   text-overflow: ellipsis;
   user-select: none; min-width: 18px;
@@ -316,17 +386,17 @@ body { font-family: 'Segoe UI', sans-serif; font-size: 13px; background: #1a1a2e
 }
 .tl-note:hover {
   box-shadow: 0 0 8px rgba(255,255,255,0.25), inset 0 0 12px rgba(255,255,255,0.08);
-  z-index: 3; transform: scaleY(1.08);
+  z-index: 3; transform: scaleY(1.15);
 }
 .tl-note.dragging {
   cursor: grabbing; opacity: 0.9; z-index: 4;
-  box-shadow: 0 0 14px rgba(233,69,96,0.7), 0 2px 8px rgba(0,0,0,0.5);
-  transform: scaleY(1.12);
+  box-shadow: 0 0 14px rgba(243,162,91,0.7), 0 2px 8px rgba(0,0,0,0.5);
+  transform: scaleY(1.2);
 }
 .tl-note.selected {
   border: 2px solid #ffd700;
-  box-shadow: 0 0 12px rgba(255,215,0,0.6), 0 0 24px rgba(255,215,0,0.3);
-  transform: scaleY(1.1);
+  box-shadow: 0 0 8px rgba(255,215,0,0.7), 0 0 16px rgba(255,215,0,0.35);
+  transform: scaleY(1.18);
 }
 .tl-note.rest {
   background: #222233 !important; color: #777; border-style: dashed;
@@ -341,7 +411,7 @@ body { font-family: 'Segoe UI', sans-serif; font-size: 13px; background: #1a1a2e
 .tl-note.voice3 { background: linear-gradient(135deg, #228833, #33aa44); }
 .tl-note.voice4 { background: linear-gradient(135deg, #cc8800, #eea500); }
 
-/* Rubber-band selection */
+/* PRESERVED §3 — Rubber-band selection */
 .tl-rubber {
   border: 2px dashed #ffd700; background: rgba(255,215,0,0.1);
   pointer-events: none; z-index: 100;
@@ -361,13 +431,33 @@ body { font-family: 'Segoe UI', sans-serif; font-size: 13px; background: #1a1a2e
 /* Measure navigation arrows */
 .tl-nav { display: flex; gap: 8px; margin-bottom: 8px; }
 .tl-nav button {
-  padding: 6px 16px; background: #16213e; color: #aaa; border: 1px solid #333;
-  border-radius: 4px; cursor: pointer; font-size: 22px;
+  padding: 6px 16px; background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line);
+  border-radius: 4px; cursor: pointer; font-size: var(--fs-label);
 }
-.tl-nav button:hover { background: #1a1a5e; color: #fff; }
+.tl-nav button:hover { background: var(--bg-4); color: var(--ink-0); }
+
+/* Multi-Edit Panel */
+#multi-edit-panel {
+  width: 280px; flex-shrink: 0;
+  background: var(--bg-2); border-left: 1px solid var(--line);
+  display: flex; flex-direction: column;
+  padding-bottom: 16px; overflow-y: auto;
+}
+#multi-edit-panel[hidden] { display: none; }
+.me-block { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
+.me-block:last-of-type { border-bottom: 0; flex-direction: row; gap: 8px; }
+.me-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
+.me-row { display: flex; gap: 6px; flex-wrap: wrap; }
+.me-row .btn { flex: 1; min-width: 0; }
 
 /* Status Bar */
 #status-bar {
-  display: flex; justify-content: space-between; padding: 5px 12px;
-  background: #16213e; border-top: 1px solid #333; font-size: 19px; color: #aaa;
-}
+  display: flex; align-items: center; gap: 18px;
+  padding: 0 14px; height: 30px;
+  background: var(--bg-2); border-top: 1px solid var(--line);
+  font-size: var(--fs-meta); color: var(--ink-2);
+  flex-shrink: 0;
+}
+#status-mode { color: var(--accent); font-weight: 600; }
+#status-selection { color: var(--ink-1); }
+#status-total { margin-left: auto; }

static/corrector.html

@@ -73,15 +73,8 @@
   <div class="tool-group">
     <label><span data-i18n="zoom">확대</span>: <input type="range" id="zoom-slider" min="25" max="200" value="50" step="5"><span id="zoom-label">50%</span></label>
   </div>
-  <div class="tool-group">
-    <label><span data-i18n="x_off">X 오프셋</span>: <input type="number" id="offset-x" value="0" step="1" style="width:84px"></label>
-    <label><span data-i18n="y_off">Y 오프셋</span>: <input type="number" id="offset-y" value="0" step="1" style="width:84px"></label>
-  </div>
-  <div class="tool-group">
-    <label><span data-i18n="staff_dist">보표 간격</span>: <input type="number" id="staff-dist-input" value="65" step="1" style="width:84px"></label>
-    <label><span data-i18n="sys_dist">단 간격 보정</span>: <input type="number" id="sys-dist-adj" value="0" step="1" style="width:84px"></label>
-  </div>
-  <div class="tool-group">
+  <!-- Hidden buttons: IDs required by corrector.js, proxied from #mode-panel -->
+  <div class="tool-group" style="display:none">
     <button id="btn-debug-lines" data-i18n="staff_lines" title="오선 표시/숨김">오선 표시</button>
     <button id="btn-adjust-staves" data-i18n="adjust_staves" title="오선 위치 수동 조정">오선 조정</button>
     <button id="btn-show-barlines" data-i18n="show_barlines" title="감지된 마디선 표시/숨김">마디선</button>
@@ -92,6 +85,7 @@
     <button id="btn-lang" title="한국어/English">EN</button>
   </div>
   <div class="tool-group right">
+    <a id="feedback-link" href="https://docs.google.com/forms/d/e/1FAIpQLScDoM53RMjDLlftORYHXmZ5kmkN4TTZOIyFIRuVsZhp4RGjEA/viewform" target="_blank" rel="noopener" title="피드백">&#9993;</a>
     <button id="btn-download" data-i18n="download">XML 다운로드</button>
   </div>
 </div>
@@ -124,9 +118,6 @@
   <span><b>Shift+K:</b> <span data-i18n="sc_keysig">조표</span></span>
   <span><b>Shift+C:</b> <span data-i18n="sc_clef">음자리표</span></span>
   <span><b>t:</b> Timeline</span>
-  <button id="omr-apply-btn" style="margin-left:12px;padding:2px 10px;background:#2a6;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;display:none" onclick="applyOmrEdits()">
-    Apply to OMR <span id="omr-apply-badge" style="background:#e44;color:#fff;border-radius:8px;padding:0 5px;margin-left:4px;font-size:10px;display:none"></span>
-  </button>
 </div>
 
 <!-- Barline Edit Toolbar -->
@@ -141,6 +132,34 @@
 
 <!-- Main Area: Score + Timeline side by side -->
 <div id="main-area">
+  <aside id="mode-panel">
+    <section class="panel-head"><h4>모드</h4></section>
+    <div class="mode-list">
+      <button class="mode-row is-active" data-proxy=""><span class="ic">✎</span> 음표 편집 <span class="kbd-chip">esc</span></button>
+      <button class="mode-row" data-proxy="btn-barline-mode"><span class="ic">┊</span> 마디선 편집 <span class="kbd-chip">B</span></button>
+      <button class="mode-row" data-proxy="btn-show-free-glyphs"><span class="ic">◇</span> 후보 기호 <span class="kbd-chip" id="glyph-count"></span></button>
+      <button class="mode-row" data-proxy="btn-adjust-staves"><span class="ic">≣</span> 오선 위치 조정</button>
+    </div>
+
+    <section class="panel-head"><h4>표시</h4></section>
+    <div class="display-toggles">
+      <label class="tg"><input type="checkbox" data-proxy="btn-debug-lines"> 오선 표시</label>
+      <label class="tg"><input type="checkbox" data-proxy="btn-show-barlines"> 마디선 오버레이</label>
+    </div>
+
+    <section class="panel-head"><h4>오프셋 / 간격</h4></section>
+    <div class="offset-grid">
+      <label>X<input type="number" id="offset-x" value="0" step="1"></label>
+      <label>Y<input type="number" id="offset-y" value="0" step="1"></label>
+      <label>보표 간격<input type="number" id="staff-dist-input" value="65" step="1"></label>
+      <label>단 간격 보정<input type="number" id="sys-dist-adj" value="0" step="1"></label>
+    </div>
+
+    <div style="flex:1"></div>
+    <section class="panel-head"><h4>경고</h4></section>
+    <div id="warning-list"></div>
+  </aside>
+
   <div id="canvas-wrapper">
     <div id="canvas-container">
       <img id="score-image" alt="Score image">
@@ -165,6 +184,45 @@
     </div>
     <div id="timeline-body"></div>
   </div>
+
+  <!-- Multi-Edit Panel (appears on multi-select) -->
+  <aside id="multi-edit-panel" hidden>
+    <section class="panel-head"><h4>다중 편집 <span id="multi-edit-count" class="mono"></span></h4></section>
+    <div class="me-block">
+      <div class="me-label">음높이</div>
+      <div class="me-row">
+        <button class="btn" data-proxy="btn-down" data-proxy-shift>&#9660; 옥타브</button>
+        <button class="btn" data-proxy="btn-down">&#9660; 반음</button>
+        <button class="btn" data-proxy="btn-up">반음 &#9650;</button>
+        <button class="btn" data-proxy="btn-up" data-proxy-shift>옥타브 &#9650;</button>
+      </div>
+    </div>
+    <div class="me-block">
+      <div class="me-label">길이</div>
+      <div class="me-row">
+        <button class="btn" data-proxy="btn-dur-whole">&#119133;</button>
+        <button class="btn" data-proxy="btn-dur-half">&#119134;</button>
+        <button class="btn" data-proxy="btn-dur-quarter">&#119135;</button>
+        <button class="btn" data-proxy="btn-dur-eighth">&#119136;</button>
+        <button class="btn" data-proxy="btn-dur-16th">&#119137;</button>
+        <button class="btn" data-proxy="btn-dur-32nd">&#119138;</button>
+      </div>
+    </div>
+    <div class="me-block">
+      <div class="me-label">임시표</div>
+      <div class="me-row">
+        <button class="btn" data-proxy="btn-dblsharp">&#119082;</button>
+        <button class="btn" data-proxy="btn-sharp">&#9839;</button>
+        <button class="btn" data-proxy="btn-natural">&#9838;</button>
+        <button class="btn" data-proxy="btn-flat">&#9837;</button>
+        <button class="btn" data-proxy="btn-dblflat">&#119083;</button>
+      </div>
+    </div>
+    <div class="me-block">
+      <button class="btn ghost" data-proxy="btn-rest-toggle" style="flex:1">음표 &#8596; 쉼표</button>
+      <button class="btn danger" data-proxy="btn-delete" style="flex:1">&#128465; 일괄 삭제</button>
+    </div>
+  </aside>
 </div>
 
 <!-- Chord Popup -->
@@ -181,11 +239,60 @@
 
 <!-- Status Bar -->
 <div id="status-bar">
-  <span id="status-mode" style="color:#ffff66;font-weight:bold;"></span>
+  <span id="status-mode"></span>
   <span id="status-selection" data-i18n="no_sel">선택 없음</span>
   <span id="status-total"></span>
+  <button id="omr-apply-btn" onclick="applyOmrEdits()" style="display:none">
+    Apply to OMR <span id="omr-apply-badge" style="display:none"></span>
+  </button>
 </div>
 
+<script>
+// Mode panel proxies — clicks the underlying button so corrector.js stays unaware.
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('[data-proxy]').forEach(el => {
+    const targetId = el.dataset.proxy;
+    if (!targetId) return;
+    const target = document.getElementById(targetId);
+    if (!target) return;
+    if (el.tagName === 'INPUT') {
+      el.addEventListener('change', () => { target.click(); });
+    } else {
+      el.addEventListener('click', () => { target.click(); });
+    }
+  });
+
+  // Barline mode: mirror .active onto body for marker dimming
+  const _btb = document.getElementById('barline-toolbar');
+  if (_btb) {
+    new MutationObserver(() => {
+      document.body.classList.toggle('mode-barline', _btb.classList.contains('active'));
+    }).observe(_btb, { attributes: true, attributeFilter: ['class'] });
+  }
+
+  // Multi-edit panel: show/hide based on multi-select count
+  const _mep = document.getElementById('multi-edit-panel');
+  const _mec = document.getElementById('multi-edit-count');
+  if (_mep) {
+    new MutationObserver(() => {
+      const n = document.querySelectorAll('#marker-svg .marker.multi-selected').length;
+      const show = n > 1;
+      _mep.toggleAttribute('hidden', !show);
+      if (show) _mec.textContent = '(' + n + ')';
+    }).observe(document.getElementById('marker-svg'), { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });
+  }
+
+  // Shift-proxy for octave step buttons in multi-edit panel
+  document.querySelectorAll('[data-proxy][data-proxy-shift]').forEach(el => {
+    el.addEventListener('click', e => {
+      e.preventDefault(); e.stopPropagation();
+      const target = document.getElementById(el.dataset.proxy);
+      if (!target) return;
+      target.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, shiftKey: true }));
+    }, true);
+  });
+});
+</script>
 <script src="/static/corrector.js"></script>
 </body>
 </html>

static/corrector.js

@@ -1510,21 +1510,36 @@ function matchOmrGrades(notes, omrData) {
 
 const _GLYPH_SHAPES = [
   { cat: "Notes", cat_ko: "음표", items: [
-    { shape: "NOTEHEAD_BLACK", label: "♩ Black", label_ko: "♩ 검은 음표" },
-    { shape: "NOTEHEAD_VOID", label: "♩ Void (half)", label_ko: "♩ 빈 음표 (2분)" },
-    { shape: "WHOLE_NOTE", label: "𝅝 Whole", label_ko: "𝅝 온음표" },
+    { shape: "NOTEHEAD_BLACK", label: "● Black (filled)", label_ko: "● 검은 음표머리" },
+    { shape: "NOTEHEAD_VOID", label: "○ Void (half)", label_ko: "○ 빈 음표머리 (2분)" },
+    { shape: "WHOLE_NOTE", label: "◎ Whole", label_ko: "◎ 온음표" },
   ]},
   { cat: "Rests", cat_ko: "쉼표", items: [
     { shape: "QUARTER_REST", label: "𝄾 Quarter", label_ko: "𝄾 4분쉼표" },
-    { shape: "EIGHTH_REST", label: "𝄾 Eighth", label_ko: "𝄾 8분쉼표" },
-    { shape: "HALF_REST", label: "𝄻 Half", label_ko: "𝄻 2분쉼표" },
-    { shape: "WHOLE_REST", label: "𝄻 Whole", label_ko: "𝄻 온쉼표" },
+    { shape: "EIGHTH_REST", label: "𝄿 Eighth", label_ko: "𝄿 8분쉼표" },
+    { shape: "HALF_REST", label: "▬ Half", label_ko: "▬ 2분쉼표" },
+    { shape: "WHOLE_REST", label: "▄ Whole", label_ko: "▄ 온쉼표" },
   ]},
   { cat: "Accidentals", cat_ko: "임시표", items: [
     { shape: "SHARP", label: "♯ Sharp", label_ko: "♯ 올림표" },
     { shape: "FLAT", label: "♭ Flat", label_ko: "♭ 내림표" },
     { shape: "NATURAL", label: "♮ Natural", label_ko: "♮ 제자리표" },
   ]},
+  // { cat: "Clefs", cat_ko: "음자리표", items: [
+  //   { shape: "G_CLEF", label: "𝄞 Treble", label_ko: "𝄞 높은음자리표" },
+  //   { shape: "F_CLEF", label: "𝄢 Bass", label_ko: "𝄢 낮은음자리표" },
+  //   { shape: "C_CLEF", label: "𝄡 Alto/Tenor", label_ko: "𝄡 가온음자리표" },
+  // ]},
+  // { cat: "Dynamics", cat_ko: "셈여림", items: [
+  //   { shape: "DYNAMICS_F", label: "f Forte", label_ko: "f 포르테" },
+  //   { shape: "DYNAMICS_P", label: "p Piano", label_ko: "p 피아노" },
+  // ]},
+  // { cat: "Other", cat_ko: "기타", items: [
+  //   { shape: "FERMATA", label: "𝄐 Fermata", label_ko: "𝄐 늘임표" },
+  //   { shape: "FLAG_8TH", label: "⚑ 8th flag", label_ko: "⚑ 8분 꼬리" },
+  //   { shape: "FLAG_16TH", label: "⚑⚑ 16th flag", label_ko: "⚑⚑ 16분 꼬리" },
+  //   { shape: "DOT", label: "• Dot", label_ko: "• 점" },
+  // ]},
 ];
 
 function toggleFreeGlyphs() {
@@ -1576,6 +1591,19 @@ function openGlyphAssignPopup(fgIdx, event) {
 
   const g = freeGlyphData[fgIdx];
 
+  // Navigate timeline to the measure containing this glyph
+  const glyphCx = g.x + g.w / 2;
+  let closestIdx = -1, closestDist = Infinity;
+  noteInfos.forEach((n, i) => {
+    if (n.systemIdx !== g.systemIdx) return;
+    const d = Math.abs(n.px - glyphCx);
+    if (d < closestDist) { closestDist = d; closestIdx = i; }
+  });
+  if (closestIdx >= 0) {
+    const n = noteInfos[closestIdx];
+    renderTimelinePanel(n.measureNum, n.systemIdx);
+  }
+
   const isKo = currentLang === "ko";
   for (const cat of _GLYPH_SHAPES) {
     const catLi = document.createElement("li");
@@ -3153,8 +3181,8 @@ function renderMarkers(notes) {
     // Accidental label
     if (n.alter !== 0) {
       const txt = document.createElementNS(SVG_NS, "text");
-      txt.setAttribute("x", n.px + 22);
-      txt.setAttribute("y", n.py + 20);
+      txt.setAttribute("x", n.px + 8);
+      txt.setAttribute("y", n.py + 5);
       txt.classList.add("acc-label");
       txt.dataset.idx = idx;
       txt.textContent = alterStr(n.alter);
@@ -3450,8 +3478,8 @@ function updateSingleMarker(idx) {
       accLabel.dataset.idx = idx;
       markerSvg.appendChild(accLabel);
     }
-    accLabel.setAttribute("x", n.px + 12);
-    accLabel.setAttribute("y", n.py + 7);
+    accLabel.setAttribute("x", n.px + 8);
+    accLabel.setAttribute("y", n.py + 5);
     accLabel.textContent = accStr;
   } else if (accLabel) {
     accLabel.remove();
@@ -3897,6 +3925,7 @@ function raiseNote(skipUndo) {
       newPitch: stepOctaveToOmrPitch(n.step, n.octave, n.clef.sign) });
   }
   recomputeAndUpdate(selectedIdx);
+  _previewNote(n);
 }
 
 function lowerNote(skipUndo) {
@@ -3930,6 +3959,7 @@ function lowerNote(skipUndo) {
       newPitch: stepOctaveToOmrPitch(n.step, n.octave, n.clef.sign) });
   }
   recomputeAndUpdate(selectedIdx);
+  _previewNote(n);
 }
 
 function setAccidental(alterValue, skipUndo) {
@@ -3965,6 +3995,7 @@ function setAccidental(alterValue, skipUndo) {
     }
   }
   recomputeAndUpdate(selectedIdx);
+  _previewNote(n);
 }
 
 // ── Note Deletion ────────────────────────────────────────────
@@ -6424,6 +6455,16 @@ async function loadPage(pageIdx) {
     markerSvg.setAttribute("width", scoreImage.naturalWidth);
     markerSvg.setAttribute("height", scoreImage.naturalHeight);
 
+    // Auto-fit zoom to canvas width on first load
+    if (!pg._zoomApplied) {
+      const wrapper = document.getElementById("canvas-wrapper");
+      const fitZoom = Math.floor((wrapper.clientWidth / scoreImage.naturalWidth) * 100);
+      const clampedZoom = Math.max(25, Math.min(200, fitZoom));
+      zoomSlider.value = clampedZoom;
+      applyZoom(clampedZoom);
+      pg._zoomApplied = true;
+    }
+
     renderMarkers(noteInfos);
     if (selectedIdx >= 0 && selectedIdx < noteInfos.length) selectNote(selectedIdx);
     else { selectedIdx = -1; statusSel.textContent = t("no_sel"); }
@@ -6473,6 +6514,16 @@ async function loadPage(pageIdx) {
   markerSvg.setAttribute("width", scoreImage.naturalWidth);
   markerSvg.setAttribute("height", scoreImage.naturalHeight);
 
+  // Auto-fit zoom to canvas width on first load
+  if (!pg._zoomApplied) {
+    const wrapper = document.getElementById("canvas-wrapper");
+    const fitZoom = Math.floor((wrapper.clientWidth / scoreImage.naturalWidth) * 100);
+    const clampedZoom = Math.max(25, Math.min(200, fitZoom));
+    zoomSlider.value = clampedZoom;
+    applyZoom(clampedZoom);
+    pg._zoomApplied = true;
+  }
+
   // Parse XML — from pre-loaded text or from file
   let xmlText;
   if (pg.xmlText) {
@@ -7186,6 +7237,13 @@ let isPlaying = false;
 let playbackStartOffset = 0; // seconds offset for seek
 let cursorSeekTime = 0; // time in seconds where the red cursor is parked
 
+function _previewNote(n) {
+  if (!n || n.isRest) return;
+  if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  const freq = noteToFreq(n.step, n.octave, n.alter);
+  playNoteSound(freq, 0.3, 0, n.step, n.octave, n.alter);
+}
+
 function noteToFreq(step, octave, alter) {
   const midi = (octave + 1) * 12 + [0,2,4,5,7,9,11][STEP_INDEX[step]] + alter;
   return 440 * Math.pow(2, (midi - 69) / 12);
@@ -8416,6 +8474,7 @@ document.addEventListener("mouseup", () => {
       recordOmrEdit({ type: "change_pitch", headId: n.omrHeadId,
         newPitch: stepOctaveToOmrPitch(n.step, n.octave, n.clef.sign) });
     }
+    _previewNote(n);
   }
   if (dragIsXMode) {
     document.body.style.cursor = "";
@@ -8448,7 +8507,7 @@ function recomputeWithAnchorsRealtime() {
     }
     const accLabel = markerSvg.querySelector(`text.acc-label[data-idx="${idx}"]`);
     if (accLabel) {
-      accLabel.setAttribute("x", n.px + 12);
+      accLabel.setAttribute("x", n.px + 8);
     }
   });
 }
@@ -8786,6 +8845,27 @@ document.addEventListener("mousemove", (e) => {
 
 document.addEventListener("mouseup", (e) => {
   if (staffDragIdx < 0 || !staffAdjustMode) return;
+
+  // Compute delta before clearing state — needed to update omrY/omrX
+  const dy = (e.clientY - staffDragStartY) / currentZoom;
+  const dx = (e.clientX - staffDragStartX) / currentZoom;
+  const wasShift = staffDragShift;
+  const draggedIdx = staffDragIdx;
+  const numSPS = (systemsData.length > 0) ? systemsData[0].numStaves : 1;
+  const dragSysIdx = Math.floor(draggedIdx / numSPS);
+  const dragStaffInSys = (draggedIdx % numSPS) + 1;
+
+  // Update omrY/omrX for notes on the dragged staff so they don't snap back
+  noteInfos.forEach(n => {
+    if (n.systemIdx === dragSysIdx && n.staff === dragStaffInSys) {
+      if (wasShift) {
+        if (n.omrX != null) n.omrX += dx;
+      } else {
+        if (n.omrY != null) n.omrY += dy;
+      }
+    }
+  });
+
   staffDragIdx = -1;
   staffDragOrigData = null;
   staffDragDebugLines = [];
@@ -9682,7 +9762,7 @@ document.addEventListener("mousemove", (e) => {
       const circle = markerSvg.querySelector(`circle.marker[data-idx="${idx}"]`);
       if (circle) circle.setAttribute("cx", n.px);
       const accLabel = markerSvg.querySelector(`text.acc-label[data-idx="${idx}"]`);
-      if (accLabel) accLabel.setAttribute("x", n.px + 12);
+      if (accLabel) accLabel.setAttribute("x", n.px + 8);
     });
     return;
   }

static/tokens.css

@@ -1,75 +1,76 @@
 /* ============================================================
-   Score → MML · Design Tokens (drop-in)
+   Score → MML · Design Tokens · v3 (2026-05-17)
    ------------------------------------------------------------
-   Apply ONCE at the top of static/index.html and static/corrector.html
-   (or extract to /static/tokens.css and link it before the file's own CSS).
-
-   These tokens replace the existing dark-navy + hot-pink palette
-   (#1a1a2e / #16213e / #0f3460 / #e94560) with a refined
-   slate + amber system. Voice colors are tuned to be friendlier
-   beside the grade-confidence colors (which previously fought
-   the #e94560 pink).
+   STATUS: this file is ALREADY linked from corrector.html as the
+   FIRST stylesheet (before corrector.css).
+
+   PHILOSOPHY (v3):
+     "Calm chrome, working workspace."
+
+   - Chrome (topbar, toolbar, panels, status, popups' wrapper):
+     slate neutrals + ONE amber action accent. Restrained.
+   - Score canvas overlays (markers, pulse, accidental labels,
+     voice colours, grade colours, rubber-band): UNCHANGED.
+     These are user-tuned & functional, not decorative.
+   - Timeline: compact (24px lanes), DAW-style voice gradients
+     retained, but pink chrome (border-left, title glow) dropped.
+   - Popups' chrome (chord neutral, glyph orange) keeps its
+     semantic colour but in token form.
+
+   This file owns:
+     :root tokens
+     html/body defaults
+     .btn .icon-btn .kbd-chip .pill .tabs .panel-head .mode-pill
+     .app-topbar .app-statusbar .slider input
+
+   This file does NOT redefine any .marker, .barline-overlay,
+   .free-glyph-box, .score-rubber, .tl-rubber, .tl-note, .acc-label,
+   .ghost-marker, .ghost-label, .rhythm-warning, .ghost-barline,
+   .measure-highlight, .barline-label, .debug-line, .staff-overlay,
+   .playback-cursor, #chord-popup, #glyph-popup rule.
+   Those live in corrector.css and stay there. See PRESERVED_VALUES.md.
    ============================================================ */
 
-/* Fonts ------------------------------------------------------ */
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
 @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");
 
 :root{
-  /* Surfaces (dark, neutral slate — replaces #1a1a2e/#16213e/#0f3460) */
-  --bg-0: #0a0c10;   /* canvas surround / behind score paper */
-  --bg-1: #0e1118;   /* app shell */
-  --bg-2: #141822;   /* panels, cards */
-  --bg-3: #1b2030;   /* raised: toolbar buttons */
-  --bg-4: #232a3c;   /* button hover */
+  /* Surfaces */
+  --bg-0: #0a0c10;       /* canvas surround */
+  --bg-1: #0e1118;       /* app shell */
+  --bg-2: #141822;       /* panels */
+  --bg-3: #1b2030;       /* raised: buttons, inputs */
+  --bg-4: #232a3c;       /* button hover */
   --line:        #262c3a;
   --line-strong: #323a4f;
 
-  /* Ink (text) */
-  --ink-0: #eef1f7;  /* primary */
-  --ink-1: #b9c0cf;  /* secondary */
-  --ink-2: #7f8898;  /* tertiary / labels */
-  --ink-3: #535b6c;  /* muted / disabled */
+  /* Ink */
+  --ink-0: #eef1f7;
+  --ink-1: #b9c0cf;
+  --ink-2: #7f8898;
+  --ink-3: #535b6c;
 
-  /* SINGLE accent — actions only. Replaces #e94560 everywhere. */
-  --accent:      #f3a25b;          /* warm amber */
+  /* Accent (action only) */
+  --accent:      #f3a25b;
   --accent-dim:  #a87246;
   --accent-soft: rgba(243,162,91,.14);
 
-  /* Selection (two-tier: single = gold, multi = red) */
-  --sel-single:  #ffd86b;          /* was #ffd700 — slightly warmer */
-  --sel-multi:   #ff5d5d;          /* was #e02020 — same intent, less saturated */
-
-  /* Grade / confidence — kept semantically distinct from accent */
-  --grade-low:   #ff5252;          /* matches sel-multi family */
-  --grade-mid:   #ffae3a;
-  --grade-ok:    #7cd454;
-
-  /* Voice palette — tuned for parity in saturation/luminance */
-  --v1: #6aa3ff;    /* was #4488ff — softer */
-  --v2: #ff6c7a;    /* was #ff4444 — distinct from grade-low */
-  --v3: #6dd17e;    /* was #44aa44 — distinct from grade-ok */
-  --v4: #ffc24a;    /* was #ffaa00 — distinct from grade-mid */
-
-  /* Barline edit overlays */
-  --bl-high:     #7cd454;
-  --bl-medium:   #ffae3a;
-  --bl-low:      #d9882e;
-  --bl-manual:   #80b7ff;
-  --bl-implicit: #cc66cc;
-  --bl-selected: #5a99ff;
+  /* Status semantic */
+  --ok:    #7cd454;
+  --warn:  #ffae3a;
+  --danger:#ff5d5d;
 
   /* Type */
   --font-sans: "Pretendard Variable", Pretendard, ui-sans-serif, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, monospace;
 
-  /* Type scale — replaces the existing 24px-everywhere problem */
-  --fs-display: 22px;   /* page headers */
-  --fs-title:   16px;   /* section titles */
-  --fs-body:    13px;   /* default UI */
-  --fs-label:   12px;   /* form labels, toolbar buttons */
-  --fs-meta:    11.5px; /* status bar, helper text */
-  --fs-kbd:     10.5px; /* keyboard hints */
+  /* Type scale (UI chrome only — does NOT apply to .acc-label or popup contents) */
+  --fs-display: 18px;    /* topbar brand, page title */
+  --fs-title:   14px;    /* section headers, panel heads */
+  --fs-body:    13px;    /* default UI */
+  --fs-label:   12px;    /* form labels, toolbar buttons */
+  --fs-meta:    11.5px;  /* status bar, helper text */
+  --fs-kbd:     10.5px;  /* keyboard hints */
 
   /* Spacing */
   --space-1: 4px;
@@ -92,7 +93,7 @@
 }
 
 /* ============================================================
-   GLOBAL DEFAULTS (applies once tokens.css is linked)
+   GLOBAL DEFAULTS
    ============================================================ */
 
 html, body {
@@ -104,17 +105,15 @@ html, body {
   text-rendering: geometricPrecision;
 }
 
-/* Tabular numerics on every mono span */
 .mono, code, kbd, .kbd-chip {
   font-family: var(--font-mono);
   font-variant-numeric: tabular-nums;
 }
 
 /* ============================================================
-   COMPONENT PRIMITIVES — copy these once and reuse
+   COMPONENT PRIMITIVES
    ============================================================ */
 
-/* Button */
 .btn{
   display:inline-flex; align-items:center; gap:6px;
   height:30px; padding:0 12px; border-radius: var(--r-md);
@@ -137,13 +136,19 @@ html, body {
 .btn.ghost { background: transparent; border-color: var(--line); }
 .btn.ghost:hover { background: var(--bg-3); }
 
+.btn.success {           /* for #btn-download (retokened green) */
+  background: rgba(124,212,84,.12);
+  border-color: rgba(124,212,84,.4);
+  color: #b6e4a4;
+}
+.btn.success:hover { background: rgba(124,212,84,.2); }
+
 .btn.danger {
   background: rgba(255,93,93,.12);
   border-color: rgba(255,93,93,.35);
   color: #ffb3b3;
 }
 
-/* Icon button */
 .icon-btn{
   width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
   background:transparent; border:1px solid transparent;
@@ -151,7 +156,6 @@ html, body {
 }
 .icon-btn:hover { background: var(--bg-3); color: var(--ink-0); }
 
-/* Keyboard chip */
 .kbd-chip{
   display:inline-block;
   font-family: var(--font-mono); font-size: var(--fs-kbd);
@@ -160,16 +164,15 @@ html, body {
   line-height: 1.4;
 }
 
-/* Pill (status) */
 .pill{
   display:inline-flex; align-items:center; gap:6px;
   padding: 5px 10px; border-radius: 999px;
   background: var(--bg-2); border:1px solid var(--line);
   color: var(--ink-1); font-size: var(--fs-label);
 }
-.pill .dot{ width:6px; height:6px; border-radius:50%; background: var(--grade-ok); }
+.pill .dot{ width:6px; height:6px; border-radius:50%; background: var(--ok); }
 
-/* Top bar / app shell */
+/* App shell */
 .app-topbar{
   height:48px; display:flex; align-items:center; gap:14px;
   padding: 0 var(--space-4);
@@ -177,8 +180,6 @@ html, body {
   border-bottom: 1px solid var(--line);
   flex-shrink: 0;
 }
-
-/* Status bar */
 .app-statusbar{
   height:30px; display:flex; align-items:center; gap:18px;
   padding: 0 var(--space-4);
@@ -189,12 +190,10 @@ html, body {
 }
 .app-statusbar .sep { width:1px; height:14px; background: var(--line); }
 
-/* Tabs (Convert / Corrector) */
 .tabs{ display:flex; gap:2px; background: var(--bg-2); padding:3px; border-radius: 8px; border:1px solid var(--line); }
 .tabs .tab{ padding: 5px 12px; border-radius: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
 .tabs .tab.is-active{ background: var(--bg-3); color: var(--ink-0); box-shadow: inset 0 0 0 1px var(--line-strong); }
 
-/* Panel header */
 .panel-head{
   display:flex; align-items:center; gap:8px;
   padding: 10px 14px;
@@ -206,7 +205,6 @@ html, body {
   text-transform: uppercase; color: var(--ink-2); margin: 0;
 }
 
-/* Mode pill (shows current corrector mode) */
 .mode-pill{
   padding: 3px 10px; border-radius: 999px;
   font-size: 11px; font-weight: 700; letter-spacing: .06em;
@@ -216,7 +214,6 @@ html, body {
 .mode-pill.add{     background: rgba(106,163,255,.16); color: #cfe2ff; border-color: rgba(106,163,255,.4); }
 .mode-pill.glyph{   background: rgba(255,153,51,.16); color: #ffcc88; border-color: rgba(255,153,51,.4); }
 
-/* Slider */
 .slider{
   appearance: none; height: 4px; border-radius: 99px;
   background: var(--bg-3); outline: none; width: 120px;
@@ -226,8 +223,17 @@ html, body {
   background: var(--accent); border: 2px solid #1a1004; cursor: pointer;
 }
 
-/* Number/text input */
-input[type="number"], input[type="text"], select{
+/* Inputs — scope to chrome (not popups; corrector.js sets inline styles) */
+.app-topbar input[type="number"],
+.app-topbar input[type="text"],
+.app-topbar select,
+#mode-panel input[type="number"],
+#mode-panel input[type="text"],
+#mode-panel select,
+#toolbar input[type="number"],
+#toolbar input[type="range"],
+#upload-bar input[type="number"],
+#upload-bar input[type="file"]{
   background: #0a0d14;
   border: 1px solid var(--line);
   border-radius: 5px;
@@ -236,70 +242,11 @@ input[type="number"], input[type="text"], select{
   font-family: var(--font-mono);
   font-size: 11.5px;
 }
-input:focus, select:focus{
+.app-topbar input:focus,
+#mode-panel input:focus,
+#toolbar input:focus,
+#upload-bar input:focus{
   outline: none;
   border-color: var(--accent-dim);
   box-shadow: 0 0 0 2px var(--accent-soft);
 }
-
-/* ============================================================
-   MARKER OVERLAY (score notes) — REPLACES current .marker rules
-   ============================================================ */
-
-.marker{ pointer-events: all; cursor: pointer; transition: r .1s, stroke-width .1s; }
-.marker:hover{ r: 10; }
-
-/* Voice fill */
-.marker.voice1{ fill: rgba(106,163,255,.78); stroke: #4a7adc; stroke-width: 1; }
-.marker.voice2{ fill: rgba(255,108,122,.78); stroke: #d44352; stroke-width: 1; }
-.marker.voice3{ fill: rgba(109,209,126,.78); stroke: #4ca85f; stroke-width: 1; }
-.marker.voice4{ fill: rgba(255,194,74,.78); stroke: #d49832; stroke-width: 1; }
-.marker.rest-marker{ fill: rgba(120,128,144,.4); stroke: #5a6273; stroke-width: 1; r: 6; }
-
-/* Grade confidence */
-.marker.grade-low{ fill: rgba(255,80,80,.85); stroke: var(--grade-low); stroke-width: 2;
-  filter: drop-shadow(0 0 4px rgba(255,82,82,.6)); }
-.marker.grade-mid{ fill: rgba(255,174,58,.85); stroke: var(--grade-mid); stroke-width: 1.5; }
-.marker.grade-ok{  fill: rgba(124,212,84,.7);  stroke: var(--grade-ok);  stroke-width: 1; }
-
-/* Selection (preserve worklog #8 — multi must beat voice colors) */
-.marker.selected{
-  stroke: var(--sel-single); stroke-width: 4; r: 12;
-  filter: drop-shadow(0 0 8px var(--sel-single)) drop-shadow(0 0 16px rgba(255,216,107,.5));
-}
-.marker.multi-selected{
-  stroke: var(--sel-multi) !important; stroke-width: 4 !important; r: 11;
-  filter: drop-shadow(0 0 4px rgba(255,93,93,.8)) !important;
-}
-.marker.multi-selected.selected{
-  stroke: var(--sel-multi) !important; stroke-width: 5 !important; r: 12;
-  filter: drop-shadow(0 0 6px rgba(255,93,93,.9)) !important;
-}
-
-.marker.modified{ stroke: var(--grade-ok); stroke-width: 2.5;
-  filter: drop-shadow(0 0 3px var(--grade-ok)); }
-.marker.modified.selected{ stroke: var(--sel-single); stroke-width: 3;
-  filter: drop-shadow(0 0 4px var(--grade-ok)); }
-
-.marker.playback-highlight{ stroke: var(--grade-low); stroke-width: 3; r: 11;
-  fill: rgba(255,80,80,.9); }
-
-/* Rubber-band selection */
-.score-rubber{
-  border: 2px dashed var(--sel-multi);
-  background: rgba(255,93,93,.08);
-  pointer-events: none; z-index: 100;
-}
-.tl-rubber{
-  border: 2px dashed var(--sel-single);
-  background: rgba(255,216,107,.10);
-  pointer-events: none; z-index: 100;
-}
-
-/* Barline overlays */
-.barline-overlay.high     { stroke: var(--bl-high);     stroke-width: 1.5; opacity: .55; }
-.barline-overlay.medium   { stroke: var(--bl-medium);   stroke-width: 1.5; opacity: .55; }
-.barline-overlay.low      { stroke: var(--bl-low);      stroke-width: 1.5; opacity: .55; stroke-dasharray: 4 4; }
-.barline-overlay.manual   { stroke: var(--bl-manual);   stroke-width: 2;   opacity: .75; }
-.barline-overlay.implicit { stroke: var(--bl-implicit); stroke-width: 2;   opacity: .65; stroke-dasharray: 6 3; }
-.barline-overlay.bl-selected { stroke: var(--bl-selected); stroke-width: 3; opacity: 1; }