/* Structural CSS */
        :root {
            --bg-app: #111;
            --bg-surface: #222;
            --bg-panel: #1a1a1a;
            --bg-button: #828282;

            --text-main: #eee;
            --text-muted: #aaa;
            --text-button: #2f2f2f;

            --accent-primary: #ff9500;
            --accent-danger: #ff3b30;
            --accent-highlight: #ffd400;

            --waveform-a: #333;
            --waveform-b: #2a2a2a;

            --border-subtle: #6b6b6b;

            --arm-active-text: #fff;

            /* Meter segment colors */
            --meter-low:  #00e676;
            --meter-mid:  #ffd400;
            --meter-high: #ff3b30;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            background: #111;
            font-family: system-ui, sans-serif;
            overflow: hidden;
            user-select: none;
        }

        body {
            display: flex;
            flex-direction: column;
            background: var(--bg-app);
            color: var(--text-main);
        }

        button {
            background: var(--bg-button);
            border: 1px solid var(--border-subtle);
            color: var(--text-button);
        }

        input[type="range"] {
            accent-color: var(--accent-primary);
        }

        /* Themed checkboxes */
        input[type="checkbox"] {
            -webkit-appearance: none;
            appearance: none;
            width: 13px;
            height: 13px;
            border: 1.5px solid var(--border-subtle);
            background: var(--bg-surface);
            border-radius: 2px;
            cursor: pointer;
            flex-shrink: 0;
            vertical-align: middle;
        }

        input[type="checkbox"]:checked {
            background: var(--accent-primary);
            border-color: var(--accent-primary);
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5l2.5 2.5L8 3' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        input[type="checkbox"]:disabled { opacity: 0.4; cursor: not-allowed; }

        /* Themed radio buttons */
        input[type="radio"] {
            -webkit-appearance: none;
            appearance: none;
            width: 14px;
            height: 14px;
            border: 1.5px solid var(--border-subtle);
            background: var(--bg-surface);
            border-radius: 50%;
            cursor: pointer;
            flex-shrink: 0;
            vertical-align: middle;
        }

        input[type="radio"]:checked {
            border-color: var(--accent-primary);
            background-image: radial-gradient(circle, var(--accent-primary) 42%, transparent 46%);
        }

        /* Themed number inputs */
        input[type="number"] {
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            color: var(--text-main);
            font-family: inherit;
            font-size: inherit;
            padding: 3px 5px;
            outline: none;
        }

        input[type="number"]:focus {
            border-color: var(--accent-primary);
        }

        input[type="number"]::selection {
            background: color-mix(in srgb, var(--accent-highlight) 45%, transparent);
            color: var(--text-main);
        }

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

        /* ----- Prevent Text Selection on Interactive UI ----- */
        .marker-transport,
        .menu-bar,
        .transport,
        #timeline-area,
        .timeline-ruler,
        #timeline-overlay,
        button,
        input[type="range"],
        gain-slider,
        pan-slider {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
        }

        .track-title,
        .lyrics-editor {
            user-select: text;
        }

        /* Main Transport */

        .transport {
            height: 48px;
            padding: 0 16px;
            display: flex;
            align-items: center;
            gap: 0;
            background: var(--bg-panel);
            border-bottom: 1px solid var(--border-subtle);
        }

        /* Five-group transport layout */
        #transport-scenes,
        .marker-transport,
        .transport-playback,
        .transport-tempo,
        .transport-zoom {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        #transport-scenes   { justify-content: flex-start; }
        .marker-transport   { justify-content: center; }
        .transport-playback { justify-content: center; gap: 8px; }
        .transport-tempo    { justify-content: center; gap: 10px; }
        .transport-zoom     { justify-content: flex-end; }

        #returnToBeginningBtn:active,
        #returnToBeginningBtn.pressed {
            background: var(--accent-primary);
            color: var(--bg-app);
            transform: scale(0.92);
        }

        .transport button {
            padding: 6px 12px;
            cursor: pointer;
        }

        .transport button:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* Playback control buttons — uniform circular icon buttons */
        #returnToBeginningBtn,
        #playBtn,
        #recordBtn {
            width: 32px;
            height: 32px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            flex-shrink: 0;
        }



        .transport-scene {
            width: 26px;
            height: 26px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 600;
        }

        .transport-scene.active {
            background: var(--accent-highlight);
            color: black;
        }

        .timeline-row {
            opacity: var(--row-opacity, 1);
        }

        .control-row.not-in-scene,
        .timeline-row.not-in-scene,
        .control-row.not-in-solo,
        .timeline-row.not-in-solo {
            opacity: 0.35;
        }

        /* Solo overrides scene mask for the soloed track */
        .layout-root:has(.solo-btn.active) .control-row:not(.not-in-solo).not-in-scene,
        .layout-root:has(.solo-btn.active) .timeline-row:not(.not-in-solo).not-in-scene {
            opacity: 1;
        }

        .record-btn.recording {
            background: var(--accent-danger);
            color: var(--text-main);
        }


        #playBtn.active {
            background: var(--accent-primary);
            color: var(--text-main);
        }





        /* ----- Global Time ----- */

        .global-time {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            padding: 4px 8px;
        }

        /* ----- Time Signature Dropdown ----- */

        .timesig-wrapper {
            position: relative;
        }

        .timesig-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 12px;
            color: var(--text-main);
            padding: 2px 6px;
            border-radius: 4px;
        }

        .timesig-btn:hover {
            background: var(--bg-panel);
        }

        .timesig-menu {
            position: absolute;
            top: 100%;
            left: 0;
            margin-top: 4px;
            padding: 4px;
            display: none;
            flex-direction: column;
            gap: 2px;
            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            z-index: 1000;
            min-width: 36px;
        }

        .timesig-menu button {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 4px 8px;
            text-align: center;
            font-size: 12px;
            color: var(--text-main);
            border-radius: 4px;
        }

        .timesig-menu button:hover {
            background: var(--bg-surface);
        }

        /* Open state */
        .timesig-wrapper.open .timesig-menu {
            display: flex;
        }

        /* Prevent text selection */
        .timesig-btn,
        .timesig-menu {
            user-select: none;
        }

        .tempo {
            padding: 5px;
            outline: 1px solid transparent;
            border-radius: 3px;
        }

        .tempo:focus {
            outline-color: var(--accent-primary);
        }

        .tempo::selection {
            background: color-mix(in srgb, var(--accent-highlight) 45%, transparent);
            color: var(--text-main);
        }



        /* Metronome */
        .metronome-scan {
            position: relative;
            width: 80px;
            height: 26px;
            background-color: var(--bg-app);

            background-image: repeating-linear-gradient(90deg,
                    var(--border-subtle),
                    var(--border-subtle) 1px,
                    transparent 1px,
                    transparent 20px);

            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            overflow: hidden;
        }

        .metronome-line {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--accent-primary);
        }






        /* Timer */

        .timer {
            font-family: monospace;
            font-size: 15px;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.04em;
            background: var(--bg-app);
            border: 1px solid var(--border-subtle);
            border-radius: 5px;
            padding: 4px 10px;
            color: var(--accent-primary);
            min-width: max-content;
        }

        /* Meter */

        .meter {
            width: 100%;
            height: 10px;
            background: var(--bg-app);
            border: 1px solid var(--border-subtle);
            border-radius: 3px;
            overflow: hidden;
            display: block;
            opacity: 0.35;
            transition: opacity 0.2s ease;
        }

        .meter.active {
            opacity: 1;
        }

        .meter-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(to right, var(--meter-low), var(--meter-mid), var(--meter-high));
            transition: width 0.1s linear;
        }


        /* Layout */

        .layout-root {
            flex: 1;
            display: grid;
            grid-template-columns: 280px 1fr;
            overflow: hidden;
        }

        /* Controls column */

        #controls-column {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        #controls-column-spacer {
            height: 32px;
            /* must match ruler height */
            flex-shrink: 0;
            border-bottom: 1px solid var(--border-subtle);
            background: var(--bg-panel);
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 10px;
        }

        #controls-column-spacer .meter {
            flex: 1;
            min-width: 0;
            max-width: 80px;
            margin-left: auto;
        }

        #add-audio-track-btn,
        #add-midi-track-btn {
            font-size: 11px;
            padding: 3px 11px;
            border-radius: 50px;
            cursor: pointer;
            flex-shrink: 0;
            font-weight: 500;
            line-height: 1;
            border: 1px solid;
        }

        #add-audio-track-btn {
            background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-surface));
            border-color: color-mix(in srgb, var(--accent-primary) 50%, transparent);
            color: var(--text-main);
        }

        #add-midi-track-btn {
            background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-surface));
            border-color: color-mix(in srgb, var(--accent-primary) 50%, transparent);
            color: var(--text-main);
        }

        #add-audio-track-btn:hover {
            background: color-mix(in srgb, var(--accent-primary) 28%, var(--bg-surface));
            border-color: var(--accent-primary);
        }

        #add-midi-track-btn:hover {
            background: color-mix(in srgb, var(--accent-primary) 28%, var(--bg-surface));
            border-color: var(--accent-primary);
        }

        #controls-scroll-column {
            background: var(--bg-app);
            overflow-y: hidden;
        }

        .control-row {
            padding: 0px;
            box-sizing: border-box;
            position: relative;
        }


        /* Timeline Markers */

        #timeline-markers {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .marker-time {
            display: inline;
            cursor: pointer;
            padding: 2px 8px;
            border-radius: 5px;
            background: color-mix(in oklab, var(--accent-primary) 8%, transparent);
            border-left: 3px solid var(--accent-primary);
            border-right: 3px solid var(--accent-primary);
        }

        .marker-time:hover {
            background: var(--bg-surface);
            color: var(--accent-primary);
        }

        .marker-time.disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .marker-time.disabled:hover {
            background: transparent;
            color: inherit;
        }

        #timeline-markers {
            position: absolute;
            inset: 0;
            pointer-events: none;
            /* markers override this */
            z-index: 20;
            /* MUST be above the canvas */
        }

        /* The wrapper — receives the clicks */
        .timeline-marker-hit {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 14px;
            /* BIG target */
            transform: translateX(-7px);
            pointer-events: auto;
            /* OVERRIDES parent setting */
            cursor: grab;
            background: rgba(255, 0, 0, 0);
            /* TEMP DEBUG — will remove */
        }

        .timeline-marker-hit:active {
            cursor: grabbing;
        }

        /* The actual visible line (tiny) */
        .timeline-marker-line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 2px;
            transform: translateX(-1px);
            background: var(--accent-highlight);
        }

        .timeline-marker-hit:hover .timeline-marker-line {
            background: var(--accent-primary);
            width: 3px;
        }

        .timeline-marker-line.selected {
            /* background-color: var(--accent-primary); */
            box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px, 5px 5px 15px 5px rgba(0, 0, 0, 0);
        }




        /* Track name */

        .track-title {
            font-weight: bold;
            padding: 2px 4px;
            border-radius: 4px;
            cursor: text;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
            flex-shrink: 1;
        }

        .track-title:hover {
            background: var(--bg-panel);
        }

        .track-title:focus {
            outline: 1px solid #ff9500;
            background: var(--bg-surface);
            overflow: auto;
            text-overflow: clip;
        }

        .track-row-1 {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
        }

        .track-row-1 .solo-btn {
            margin-left: auto;
        }

        .track-row-2 {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .track-row-2 .track-meter {
            flex-shrink: 0;
            width: 32px;
        }

        .track-row-2 gain-slider {
            flex: 2;
            min-width: 0;
        }

        .track-row-2 pan-slider {
            flex: 1;
            min-width: 0;
        }

        .track-row-2 .row-opacity-slider {
            width: 48px;
            flex-shrink: 0;
        }

        body:not(.has-video) .row-opacity-slider { display: none; }

        .solo-btn {
            padding: 2px 6px;
            font-weight: bold;
            cursor: pointer;
        }

        .solo-btn.active {
            background: #ffd400;
            color: var(--text-main);
        }


        .solo-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        #controls-scroll-column:has(.solo-btn.active) .solo-btn:not(.active) {
            visibility: hidden;
        }

        .track-edit-btn {
            width: 22px;
            height: 22px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-muted);
            background: transparent;
            border: none;
            flex-shrink: 0;
        }

        .track-edit-btn:hover {
            color: var(--text-main);
            opacity: 1;
        }

        .drag-handle {
            cursor: grab;
            opacity: 0.5;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            padding: 0 8px;
            touch-action: none;
            color: var(--text-muted);
        }

        .drag-handle:hover { opacity: 1; }
        .drag-handle:active { cursor: grabbing; }

        .control-row.dragging,
        .timeline-row.dragging {
            opacity: 0.35;
        }

        #drop-indicator {
            position: fixed;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--accent-primary);
            pointer-events: none;
            z-index: 9999;
            display: none;
            top: 0;
        }

        #drop-indicator.visible {
            display: block;
        }

        #drop-indicator::before {
            content: '';
            position: absolute;
            left: 4px;
            top: 50%;
            transform: translateY(-50%);
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent-primary);
        }

        gain-slider {
            display: block;
            width: 100%;
            height: 20px;
            position: relative;
            cursor: pointer;
        }

        .gs-track {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 4px;
            transform: translateY(-50%);
            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 2px;
        }

        .gs-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: var(--accent-primary);
            border-radius: 2px;
        }

        .gs-thumb {
            position: absolute;
            top: 50%;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--accent-primary);
            border: 2px solid var(--bg-app);
            transform: translate(-50%, -50%);
        }

        gain-slider:hover .gs-thumb,
        gain-slider[data-dragging] .gs-thumb {
            background: var(--accent-highlight);
        }

        /* Pan Slider */

        pan-slider {
            display: flex;
            align-items: center;
            gap: 5px;
            width: 100%;
            height: 18px;
            cursor: pointer;
        }

        .ps-label {
            font-size: 9px;
            font-weight: 700;
            color: var(--text-muted);
            opacity: 0.6;
            flex-shrink: 0;
            letter-spacing: 0.03em;
        }

        .ps-track {
            flex: 1;
            position: relative;
            height: 4px;
            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 2px;
        }

        /* Center tick mark */
        .ps-center-tick {
            position: absolute;
            left: 50%;
            top: -3px;
            bottom: -3px;
            width: 1px;
            transform: translateX(-50%);
            background: var(--border-subtle);
            pointer-events: none;
        }

        .ps-tick {
            position: absolute;
            top: -3px;
            bottom: -3px;
            width: 1px;
            transform: translateX(-50%);
            background: var(--text-muted);
            pointer-events: none;
        }

        .ps-fill {
            position: absolute;
            top: 0;
            height: 100%;
            background: var(--accent-primary);
            border-radius: 2px;
        }

        .ps-thumb {
            position: absolute;
            top: 50%;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--accent-primary);
            border: 2px solid var(--bg-app);
            transform: translate(-50%, -50%);
        }

        pan-slider:focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 2px;
            border-radius: 3px;
        }

        pan-slider:hover .ps-thumb,
        pan-slider[data-dragging] .ps-thumb {
            background: var(--accent-highlight);
        }

        .track-scenes {
            display: flex;
            gap: 4px;
            align-items: center;
            justify-content: flex-end;
        }

        .track-scene {
            min-width: 18px;
            height: 18px;
            border-radius: 3px;
            font-size: 11px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;

            background: transparent;
            border: 1px solid var(--border-subtle);
            color: var(--text-muted);
            cursor: pointer;
        }

        .track-scene.active {
            background: var(--accent-primary);
            color: black;
            border-color: var(--accent-primary);
        }

        .track-row-instr {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .is-audio-track .track-row-instr {
            display: none;
        }

        .track-row-3 {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .track-row-4 {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .output-select {
            width: 100%;
            font-size: 10px;
            padding: 2px 18px 2px 6px;
            border-radius: 6px;
            border: 1px solid var(--border-subtle);
            background: var(--bg-surface);
            color: var(--text-secondary);
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path d='M0 0l4 5 4-5z' fill='#888'/></svg>");
            background-repeat: no-repeat;
            background-position: right 5px center;
            background-size: 7px;
        }

        .output-select:focus {
            outline: none;
            border-color: var(--accent-primary);
            color: var(--text-main);
        }

        .track-midi-controls {
            display: flex;
            gap: 4px;
        }

        .track-midi-controls .instrument-toggle,
        .track-midi-controls .add-midi-clip-btn {
            flex-shrink: 0;
            font-size: 11px;
            padding: 3px 11px;
            border-radius: 50px;
            cursor: pointer;
            background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-surface));
            border: 1px solid color-mix(in srgb, var(--accent-primary) 50%, transparent);
            color: var(--text-main);
            font-weight: 500;
            white-space: nowrap;
        }

        .track-midi-controls .instrument-toggle:hover,
        .track-midi-controls .add-midi-clip-btn:hover {
            background: color-mix(in srgb, var(--accent-primary) 28%, var(--bg-surface));
            border-color: var(--accent-primary);
        }

        .gm-program-select {
            font-size: 10px;
            padding: 3px 18px 3px 6px;
            border-radius: 6px;
            border: 1px solid var(--border-subtle);
            background: var(--bg-surface);
            color: var(--text-secondary);
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path d='M0 0l4 5 4-5z' fill='#888'/></svg>");
            background-repeat: no-repeat;
            background-position: right 5px center;
            background-size: 7px;
            max-width: 160px;
        }

        .gm-program-select:focus {
            outline: none;
            border-color: var(--accent-primary);
            color: var(--text-main);
        }

        .sfz-instrument-select {
            font-size: 10px;
            padding: 3px 18px 3px 6px;
            border-radius: 6px;
            border: 1px solid var(--border-subtle);
            background: var(--bg-surface);
            color: var(--text-secondary);
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path d='M0 0l4 5 4-5z' fill='#888'/></svg>");
            background-repeat: no-repeat;
            background-position: right 5px center;
            background-size: 7px;
            max-width: 160px;
        }

        .sfz-instrument-select:focus {
            outline: none;
            border-color: var(--accent-primary);
            color: var(--text-main);
        }

        /* Track Volume Meter */

        .track-meter {
            display: flex;
            flex-direction: column;
            gap: 2px;
            width: 100%;
            pointer-events: none;
        }


        .tm-ch {
            height: 4px;
            display: flex;
            flex-direction: row;
            gap: 1px;
        }

        .tm-seg {
            flex: 1;
            border-radius: 1px;
            background: rgba(255, 255, 255, 0.07);
        }

        /* Color by position (bottom = index 1, top = index 12) */
        .tm-seg:nth-child(-n+7).lit {
            background: var(--meter-low);
            box-shadow: 0 0 3px color-mix(in srgb, var(--meter-low) 67%, transparent);
        }
        .tm-seg:nth-child(n+8):nth-child(-n+9).lit {
            background: var(--meter-mid);
            box-shadow: 0 0 3px color-mix(in srgb, var(--meter-mid) 67%, transparent);
        }
        .tm-seg:nth-child(n+10).lit {
            background: var(--meter-high);
            box-shadow: 0 0 3px color-mix(in srgb, var(--meter-high) 67%, transparent);
        }

        /* Peak hold — same colors, no fill beneath */
        .tm-seg:nth-child(-n+7).peak {
            background: var(--meter-low);
            opacity: 0.7;
        }
        .tm-seg:nth-child(n+8):nth-child(-n+9).peak {
            background: var(--meter-mid);
            opacity: 0.7;
        }
        .tm-seg:nth-child(n+10).peak {
            background: var(--meter-high);
            opacity: 0.7;
        }

        /* Zoom slider */

        #zoom-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 20px;
            background: transparent;
            margin: 0;
        }

        .zoom-container {
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 140px;
        }

        #zoom-slider::-webkit-slider-runnable-track {
            height: 4px;
            background: var(--bg-panel);
            border-radius: 2px;
            border: 1px solid var(--border-subtle);
        }

        #zoom-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--accent-primary);
            border: 2px solid var(--bg-app);
            margin-top: -6px;
            /* centers thumb on track */
            cursor: pointer;
        }

        #zoom-slider:hover::-webkit-slider-thumb,
        #zoom-slider:focus-visible::-webkit-slider-thumb {
            background: var(--accent-highlight);
        }

        .zoom-slider-wrap {
            position: relative;
            width: 140px;
        }

        .zoom-ticks {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0 7px; /* matches half the thumb width so ticks align under each stop */
            margin-top: 4px;
            height: 10px;
        }

        .zoom-ticks span {
            width: 1px;
            height: 5px;
            background: var(--text-muted);
            opacity: 0.45;
            flex-shrink: 0;
        }

        .zoom-ticks span.zoom-tick-center {
            height: 9px;
            opacity: 0.75;
        }



        /* Timeline */

        .timeline-ruler {
            height: 32px;
            background: var(--bg-panel);
            border-bottom: 1px solid var(--border-subtle);
            flex-shrink: 0;
            position: sticky;
            top: 0;
            z-index: 5;
        }

        .timeline-ruler-inner {
            position: relative;
            height: 100%;
        }

        #timeline-ruler-canvas {
            position: absolute;
            height: 100%;
            display: block;
        }

        #timeline-inner {
            position: relative;
            width: max-content;
            overflow: visible;
        }

        #timeline-area {
            position: relative;
            overflow-x: auto;
            overflow-y: auto;
            background: var(--bg-surface);
            overscroll-behavior: none;
        }

        #timeline-overlay {
            position: absolute;
            top: 32px;
            /* height of timeline-ruler */
            left: 0;
            pointer-events: none;
            z-index: 1;
        }

        .timeline-row {
            padding: 0px;
            box-sizing: border-box;
        }

        #ruler-playhead {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--accent-primary);
            pointer-events: none;
            z-index: 15;
        }

        #ruler-playhead::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 8px solid var(--accent-primary);
        }

        #playhead {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--accent-primary);
            z-index: 10;
        }

        #record-range,
        .record-range-done {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2px;
            background: var(--accent-danger);
            pointer-events: none;
            opacity: 0.85;
        }

        /* Inside timeline-row and control-row */
        .row-inner {
            padding: 10px;
        }

        .control-row .row-inner {
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 6px;
            height: 100%;
            box-sizing: border-box;
        }

        /* Timeline rows: no horizontal padding, fixed height, positioning context for clips */
        .timeline-row .row-inner {
            padding: 10px 0;
            position: relative;
            height: 136px;
            box-sizing: border-box;
        }

        .is-midi-track.timeline-row .row-inner {
            height: 166px;
        }

        /* Waveform */

        .waveform {
            position: absolute;
            top: 0;
            bottom: 0;
            background-color: var(--bg-surface);

            background-image: repeating-linear-gradient(90deg,
                    var(--waveform-a),
                    var(--waveform-a) 20px,
                    var(--waveform-b) 20px,
                    var(--waveform-b) 40px);
        }

        .waveform {
            cursor: grab;
        }

        .waveform.wf-dragging {
            cursor: grabbing;
        }

        .waveform.selected {
            outline: 2px solid var(--accent-primary);
            outline-offset: -2px;
            filter: brightness(1.25);
        }


        .waveform-canvas {
            display: block;
            width: 100%;
            height: 100%;
        }








        
        /* Themes CSS */

        body[data-theme="Dark"] {
            /* Surfaces */
            --bg-app: #111827;
            --bg-surface: #1f2937;
            --bg-panel: #020617;
            --bg-button: #374151;

            /* Text */
            --text-main: #e5e7eb;
            --text-muted: #9ca3af;
            --text-button: #e5e7eb;

            /* UI chrome */
            --border-subtle: #374151;

            /* Accents */
            --accent-primary: #ff9500;
            --accent-danger: #ff3b30;
            --accent-highlight: #ffd400;

            /* Empty track background (quiet) */
            --waveform-a: #1f2937;
            --waveform-b: #111827;

        }


        body[data-theme="Light"] {

            /* Surfaces */
            --bg-app: #f3f4f6;
            --bg-surface: #cdcbcb;
            --bg-panel: #e5e7eb;

            /* Text */
            --text-main: #111827;
            --text-muted: #6b7280;
            --text-button: #111827;

            /* UI chrome */
            --border-subtle: #d1d5db;

            /* Accents stay the same */
            --accent-primary: #ff9500;
            --accent-danger: #ff3b30;
            --accent-highlight: #ffd400;

            /* Empty track background (quiet) */
            --waveform-a: #e5e7eb;
            --waveform-b: #d1d5db;

            --bg-button: #e0dfdf;

        }


        body[data-theme="Studio"] {
            /* Surfaces */
            --bg-app: #020617;
            --bg-surface: #0f172a;
            --bg-panel: #020617;
            --bg-button: #1e293b;

            /* Text */
            --text-main: #d1d5db;
            --text-muted: #94a3b8;
            --text-button: #e5e7eb;

            /* UI chrome */
            --border-subtle: #1e293b;

            /* Accents */
            --accent-primary: #38bdf8;
            --accent-danger: #ef4444;
            --accent-highlight: #7dd3fc;

            /* Empty track background (quiet) */
            --waveform-a: #020617;
            --waveform-b: #0f172a;

        }

        body[data-theme="Ice"] {
            /* Surfaces */
            --bg-app: #eaf2f8;
            --bg-surface: #ffffff;
            --bg-panel: #dbe7f0;

            /* Text */
            --text-main: #0f172a;
            --text-muted: #475569;
            --text-button: #0f172a;

            /* UI chrome */
            --border-subtle: #c7d6e2;

            /* Accents */
            --accent-primary: #38bdf8;
            --accent-danger: #ef4444;
            --accent-highlight: #7dd3fc;

            /* Empty track background (quiet) */
            --waveform-a: #dbe7f0;
            --waveform-b: #c7d6e2;

            --bg-button: #c6d2c9;

        }

        body[data-theme="Ice9"] {
            /* Surfaces — clear crystalline ice, deeper than Ice */
            --bg-app:     #d8eaf7;
            --bg-surface: #eef6fd;
            --bg-panel:   #c4d9ec;
            --bg-button:  #aecadf;

            /* Text — deep ocean navy */
            --text-main:   #0c2038;
            --text-muted:  #3a5f7a;
            --text-button: #0c2038;

            /* UI chrome */
            --border-subtle: #96bcd4;

            /* Accents — deeper blue primary, bright cyan highlight */
            --accent-primary:   #0077b6;
            --accent-danger:    #ef4444;
            --accent-highlight: #48cae4;

            /* Waveform */
            --waveform-a: #c4d9ec;
            --waveform-b: #aecadf;
        }

        body[data-theme="Fire"] {
            /* Surfaces */
            --bg-app: #27110d;
            --bg-surface: #371714;
            --bg-panel: #451e19;

            /* Text */
            --text-main: #fdf3f3;
            --text-muted: #f3aeae;
            --text-button: #fdf3f3;

            /* UI chrome */
            --border-subtle: #71321d;

            /* Accents */
            --accent-primary: #e2772d;
            --accent-danger: #ca3838;
            --accent-highlight: #ebd459;

            /* Empty track background (quiet) */
            --waveform-a: #451e19;
            --waveform-b: #562922;

            --bg-button: #62251d;
        }

        body[data-theme="Earth"] {
            /* Surfaces */
            --bg-app: #2b2a25;
            --bg-surface: #3a372f;
            --bg-panel: #463f34;

            /* Text */
            --text-main: #f5f5f4;
            --text-muted: #a8a29e;
            --text-button: #1c1917;

            /* UI chrome */
            --border-subtle: #57534e;

            /* Accents */
            --accent-primary: #84cc16;
            --accent-danger: #b91c1c;
            --accent-highlight: #eab308;

            /* Empty track background (quiet) */
            --waveform-a: #463f34;
            --waveform-b: #57534e;

            --bg-button: #5c5151;

        }

        body[data-theme="Wind"] {
            /* Surfaces */
            --bg-app: #f8fafc;
            --bg-surface: #ffffff;
            --bg-panel: #e2e8f0;

            /* Text */
            --text-main: #0f172a;
            --text-muted: #64748b;
            --text-button: #0f172a;

            /* UI chrome */
            --border-subtle: #cbd5e1;

            /* Accents */
            --accent-primary: #22d3ee;
            --accent-danger: #ef4444;
            --accent-highlight: #a5f3fc;

            /* Empty track background (quiet) */
            --waveform-a: #e2e8f0;
            --waveform-b: #cbd5e1;

            --bg-button: #a99292;

        }

        body[data-theme="Sol"] {
            /* Surfaces */
            --bg-app: #fff7ed;
            --bg-surface: #ffffff;
            --bg-panel: #ffedd5;

            /* Text */
            --text-main: #78350f;
            --text-muted: #a16207;
            --text-button: #78350f;

            /* UI chrome */
            --border-subtle: #fed7aa;

            /* Accents */
            --accent-primary: #f59e0b;
            --accent-danger: #dc2626;
            --accent-highlight: #fde047;

            /* Empty track background (quiet) */
            --waveform-a: #ffedd5;
            --waveform-b: #fed7aa;

            --bg-button: #dec5cc;

        }

        body[data-theme="Cookies Haze"] {
            /* Surfaces — purple bud with lime green seeping through */
            --bg-app:     #160f1e;   /* deep grape-black */
            --bg-surface: #1e1a30;   /* dark violet with a green whisper */
            --bg-panel:   #1a1428;   /* rich plum panel */
            --bg-button:  #2a2040;   /* purple-dark with slight teal push */

            /* Text — crystalline white + lavender-muted */
            --text-main:   #eef8f0;  /* crystalline white — cool, barely-green tinted */
            --text-muted:  #8ec49a;  /* muted sage — green leaking through purple haze */
            --text-button: #eef8f0;

            /* UI chrome — lime-kissed purple edge */
            --border-subtle: #3a3458;

            /* Accents — amber pistils, vivid lime trichomes */
            --accent-primary:   #c87d1a;  /* burnt amber — orange hairs */
            --accent-danger:    #cc3333;
            --accent-highlight: #c6f135;  /* vivid lime — trichome crystals */

            /* Waveform — purple with lime shimmer */
            --waveform-a: #1e1a30;
            --waveform-b: #2a3020;   /* deep olive-violet — green lurking */
        }

        body[data-theme="Purple Dark"] {
            /* Surfaces — deep violet night */
            --bg-app:     #120e1a;
            --bg-surface: #1d1828;
            --bg-panel:   #171321;
            --bg-button:  #342b49;

            /* Text — soft lavender, muted violet */
            --text-main:   #eae2f5;
            --text-muted:  #9484ac;
            --text-button: #eae2f5;

            /* UI chrome */
            --border-subtle: #3f3256;

            /* Accents — vivid violet, electric pink */
            --accent-primary:   #a77dcf;
            --accent-danger:    #c46f6f;
            --accent-highlight: #d199d9;

            /* Waveform */
            --waveform-a: #171321;
            --waveform-b: #342b49;
        }

        body[data-theme="Rangoli"] {
            /* Surfaces — night sky of a Hindu wedding, deep jewel plum */
            --bg-app:     #1a0d1c;
            --bg-surface: #2b142e;
            --bg-panel:   #211025;
            --bg-button:  #3e1e42;

            /* Text — warm gold, amber muted */
            --text-main:   #f3e4ba;
            --text-muted:  #ba9068;
            --text-button: #f3e4ba;

            /* UI chrome — deep plum border */
            --border-subtle: #562f59;

            /* Accents — saffron marigold, magenta */
            --accent-primary:   #d89728;
            --accent-danger:    #c53d3d;
            --accent-highlight: #dc89e9;

            /* Waveform */
            --waveform-a: #211025;
            --waveform-b: #3e1e42;
        }


        body[data-theme="Purple Light"] {
            /* Surfaces — soft violet in daylight */
            --bg-app:     #f0ebfb;
            --bg-surface: #faf8ff;
            --bg-panel:   #e6dff5;
            --bg-button:  #d0c4ee;

            /* Text — deep indigo, muted mauve */
            --text-main:   #1a0e38;
            --text-muted:  #6b5890;
            --text-button: #1a0e38;

            /* UI chrome */
            --border-subtle: #bbaee0;

            /* Accents — vivid violet primary, soft pink highlight */
            --accent-primary:   #7c3aed;
            --accent-danger:    #dc2626;
            --accent-highlight: #c084fc;

            /* Waveform */
            --waveform-a: #e6dff5;
            --waveform-b: #d0c4ee;
        }




        body[data-theme="Studio Light"] {
            /* Surfaces — clean bright studio console */
            --bg-app:     #f0f0f0;
            --bg-surface: #ffffff;
            --bg-panel:   #e8e8e8;
            --bg-button:  #d4d4d4;

            /* Text — near-black on white */
            --text-main:   #1a1a1a;
            --text-muted:  #6b6b6b;
            --text-button: #1a1a1a;

            /* UI chrome */
            --border-subtle: #c2c2c2;

            /* Accents — studio blue primary, green signal */
            --accent-primary:   #0a84ff;
            --accent-danger:    #ff3b30;
            --accent-highlight: #30c060;

            /* Waveform */
            --waveform-a: #e4e4e4;
            --waveform-b: #d0d0d0;
        }

        body[data-theme="Red Light"] {
            /* Surfaces — recording booth under the ON AIR lamp */
            --bg-app:     #0c0202;
            --bg-surface: #180808;
            --bg-panel:   #110505;
            --bg-button:  #270d0d;

            /* Text — warm pinkish-white, dim red muted */
            --text-main:   #f9dede;
            --text-muted:  #9b5353;
            --text-button: #f9dede;

            /* UI chrome */
            --border-subtle: #351212;

            /* Accents — vivid red primary, hot pink highlight */
            --accent-primary:   #c64a4a;
            --accent-danger:    #e77878;
            --accent-highlight: #eea1a1;

            /* Waveform */
            --waveform-a: #180808;
            --waveform-b: #230b0b;
        }

        body[data-theme="x286"] {
            /* Surfaces — phosphor screen in a dark room */
            --bg-app:     #0c0700;   /* near-black, faint warm */
            --bg-surface: #160c00;   /* dim phosphor glow */
            --bg-panel:   #100800;   /* deep amber-black panel */
            --bg-button:  #221100;   /* slightly lighter for buttons */

            /* Text — phosphor amber, bright and dim */
            --text-main:   #ff9900;  /* full phosphor brightness */
            --text-muted:  #7a4a00;  /* dim phosphor — recessed text */
            --text-button: #ff9900;

            /* UI chrome — dark amber line */
            --border-subtle: #3a2000;

            /* Accents — all orange, all the time */
            --accent-primary:   #ff7700;  /* active/selected — deeper orange */
            --accent-danger:    #ffaa00;  /* bright amber — monochrome phosphor alert */
            --accent-highlight: #ffcc00;  /* bright amber highlight */

            /* Waveform — phosphor trace */
            --waveform-a: #160c00;
            --waveform-b: #221100;

            /* Meter — monochrome amber, dim → bright */
            --meter-low:  #995500;   /* dim phosphor */
            --meter-mid:  #dd7700;   /* medium glow */
            --meter-high: #ffbb00;   /* full phosphor brightness */
        }


        body[data-theme="Saffron"] {
            /* Surfaces — dark amber like the bridesmaids' saris in shadow */
            --bg-app:     #1c0d00;
            --bg-surface: #2d1400;
            --bg-panel:   #240f00;
            --bg-button:  #3d2000;

            /* Text — warm cream, muted amber */
            --text-main:   #fef3d0;
            --text-muted:  #c87840;
            --text-button: #fef3d0;

            /* UI chrome — dark amber border */
            --border-subtle: #5a3010;

            /* Accents — bright saffron orange, marigold yellow */
            --accent-primary:   #f97316;
            --accent-danger:    #dc2626;
            --accent-highlight: #fbbf24;

            /* Waveform */
            --waveform-a: #240f00;
            --waveform-b: #3d2000;
        }


        body[data-theme="Harvest"] {
            /* Surfaces — shadow grey base, toffee warmth */
            --bg-app:     #1f1e23;
            --bg-surface: #37281b;
            --bg-panel:   #282016;
            --bg-button:  #465440;

            /* Text — pearl beige, toffee muted */
            --text-main:   #e3d7bc;
            --text-muted:  #835b46;
            --text-button: #e3d7bc;

            /* UI chrome — dark granite shadow */
            --border-subtle: #2e3729;

            /* Accents — amber honey primary, intense cherry danger */
            --accent-primary:   #e2a41e;
            --accent-danger:    #b13a40;
            --accent-highlight: #b13a40;

            /* Waveform */
            --waveform-a: #282016;
            --waveform-b: #37281b;
        }

        body[data-theme="Canyon"] {
            /* Surfaces — shadowed canyon rock and clay */
            --bg-app:     #3d1218;
            --bg-surface: #634039;
            --bg-panel:   #4e2426;
            --bg-button:  #585560;

            /* Text — pale sandstone, muted terracotta */
            --text-main:   #f5e2d8;
            --text-muted:  #d68c72;
            --text-button: #f5e2d8;

            /* UI chrome — cool gray-purple shadow */
            --border-subtle: #3a3840;

            /* Accents — bright terracotta at golden hour, muted salmon */
            --accent-primary:   #ea7d46;
            --accent-danger:    #ff4444;
            --accent-highlight: #d68c72;

            /* Waveform */
            --waveform-a: #4e2426;
            --waveform-b: #634039;
        }

        body[data-theme="Ember"] {
            /* Surfaces — near-black with warm amber undertone, zero blue */
            --bg-app:     #0d0800;
            --bg-surface: #1a1000;
            --bg-panel:   #130c00;
            --bg-button:  #2a1800;

            /* Text — dim amber glow, easy on dark-adapted eyes */
            --text-main:   #e8a040;
            --text-muted:  #7a4a10;
            --text-button: #e8a040;

            /* UI chrome — dark warm border, no cool tones */
            --border-subtle: #3d2200;

            /* Accents — deep amber primary, burnt orange highlight */
            --accent-primary:   #e07800;
            --accent-danger:    #cc2200;
            --accent-highlight: #ffa030;

            /* Waveform */
            --waveform-a: #130c00;
            --waveform-b: #2a1800;
        }

        /* base1/2/3 — pure grayscale; all colors are HSV(0, 0, V%) = hsl(0, 0%, V%) */

        body[data-theme="base1"] {
            /* dark shell */
            --arm-active-text: #111;
            --bg-app:     hsl(0, 0%, 10%);
            --bg-surface: hsl(0, 0%, 16%);
            --bg-panel:   hsl(0, 0%,  7%);
            --bg-button:  hsl(0, 0%, 45%);

            --text-main:   hsl(0, 0%, 92%);
            --text-muted:  hsl(0, 0%, 60%);
            --text-button: hsl(0, 0%, 12%);

            --border-subtle: hsl(0, 0%, 35%);

            --accent-primary:   hsl(0, 0%, 75%);
            --accent-danger:    hsl(0, 0%, 55%);
            --accent-highlight: hsl(0, 0%, 88%);

            --waveform-a: hsl(0, 0%, 18%);
            --waveform-b: hsl(0, 0%, 13%);
        }

        body[data-theme="base2"] {
            /* mid-gray shell */
            --arm-active-text: #111;
            --bg-app:     hsl(0, 0%, 40%);
            --bg-surface: hsl(0, 0%, 50%);
            --bg-panel:   hsl(0, 0%, 33%);
            --bg-button:  hsl(0, 0%, 65%);

            --text-main:   hsl(0, 0%, 97%);
            --text-muted:  hsl(0, 0%, 75%);
            --text-button: hsl(0, 0%, 20%);

            --border-subtle: hsl(0, 0%, 55%);

            --accent-primary:   hsl(0, 0%, 90%);
            --accent-danger:    hsl(0, 0%, 70%);
            --accent-highlight: hsl(0, 0%, 95%);

            --waveform-a: hsl(0, 0%, 45%);
            --waveform-b: hsl(0, 0%, 37%);
        }

        body[data-theme="base3"] {
            /* light shell */
            --arm-active-text: #111;
            --bg-app:     hsl(0, 0%, 88%);
            --bg-surface: hsl(0, 0%, 95%);
            --bg-panel:   hsl(0, 0%, 80%);
            --bg-button:  hsl(0, 0%, 72%);

            --text-main:   hsl(0, 0%,  8%);
            --text-muted:  hsl(0, 0%, 35%);
            --text-button: hsl(0, 0%, 12%);

            --border-subtle: hsl(0, 0%, 65%);

            --accent-primary:   hsl(0, 0%, 58%);
            --accent-danger:    hsl(0, 0%, 45%);
            --accent-highlight: hsl(0, 0%, 48%);

            --waveform-a: hsl(0, 0%, 83%);
            --waveform-b: hsl(0, 0%, 90%);
        }

        /* x286 — Mars colony newswire ticker */
        #x286-newswire {
            display: none;
            height: 34px;
            flex-shrink: 0;
        }

        body[data-theme="x286"] #x286-newswire {
            display: flex;
            align-items: center;
            background: #0c0700;
            border-top: 1px solid #3a2000;
            font-family: 'Courier New', Courier, monospace;
            font-size: 14px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #cc7700;
            overflow: hidden;
            user-select: none;
        }

        body[data-theme="x286"] .x286-nw-badge {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 10px;
            height: 100%;
            font-weight: bold;
            color: #ffbb00;
            letter-spacing: 0.18em;
            border-right: 1px solid #3a2000;
            white-space: nowrap;
        }

        body[data-theme="x286"] .x286-nw-badge::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #ffbb00;
            box-shadow: 0 0 5px #ffbb00aa;
            flex-shrink: 0;
            animation: x286-blink 1.4s ease-in-out infinite;
        }

        body[data-theme="x286"] .x286-nw-viewport {
            flex: 1;
            overflow: hidden;
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;
        }

        /* Scanline overlay — gives dot-matrix texture */
        body[data-theme="x286"] .x286-nw-viewport::after {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                transparent 0px,
                transparent 2px,
                rgba(0, 0, 0, 0.22) 2px,
                rgba(0, 0, 0, 0.22) 3px
            );
            pointer-events: none;
            z-index: 1;
        }

        body[data-theme="x286"] .x286-nw-track {
            white-space: nowrap;
            will-change: transform;
            line-height: 1;
        }

        /* x286 — dim amber placeholder text instead of browser-default gray */
        body[data-theme="x286"] .panel-marker-note::placeholder {
            color: var(--text-muted);
            opacity: 1;
        }

        /* x286 — dark icon on lit buttons so the amber icon doesn't vanish into the amber fill */
        body[data-theme="x286"] #playBtn.active,
        body[data-theme="x286"] .record-btn.recording {
            color: var(--bg-app);
        }

        /* x286 — hide scrollbars on the timeline/track area */
        body[data-theme="x286"] #timeline-area {
            scrollbar-width: none;
        }
        body[data-theme="x286"] #timeline-area::-webkit-scrollbar {
            display: none;
        }

        /* x286 — custom checkbox styling to stay monochrome */
        body[data-theme="x286"] input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 13px;
            height: 13px;
            border: 1.5px solid #7a4a00;
            background: #160c00;
            border-radius: 2px;
            cursor: pointer;
            flex-shrink: 0;
            vertical-align: middle;
        }

        body[data-theme="x286"] input[type="checkbox"]:checked {
            background: #ff7700;
            border-color: #ff7700;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5l2.5 2.5L8 3' stroke='%230c0700' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        body[data-theme="x286"] input[type="checkbox"]:disabled {
            border-color: #3a2000;
            opacity: 0.4;
        }

        /* x286 — opacity sliders */
        body[data-theme="x286"] .row-opacity-slider,
        body[data-theme="x286"] #video-opacity-slider {
            appearance: none;
            -webkit-appearance: none;
            background: transparent;
            cursor: pointer;
        }

        body[data-theme="x286"] .row-opacity-slider::-webkit-slider-runnable-track,
        body[data-theme="x286"] #video-opacity-slider::-webkit-slider-runnable-track {
            height: 4px;
            background: #100800;
            border: 1px solid #3a2000;
            border-radius: 2px;
        }

        body[data-theme="x286"] .row-opacity-slider::-webkit-slider-thumb,
        body[data-theme="x286"] #video-opacity-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ff7700;
            border: 2px solid #0c0700;
            margin-top: -5px;
        }

        body[data-theme="x286"] .row-opacity-slider::-moz-range-track,
        body[data-theme="x286"] #video-opacity-slider::-moz-range-track {
            height: 4px;
            background: #100800;
            border: 1px solid #3a2000;
            border-radius: 2px;
        }

        body[data-theme="x286"] .row-opacity-slider::-moz-range-thumb,
        body[data-theme="x286"] #video-opacity-slider::-moz-range-thumb {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ff7700;
            border: 2px solid #0c0700;
        }

        body[data-theme="x286"] .row-opacity-slider:hover::-webkit-slider-thumb,
        body[data-theme="x286"] .row-opacity-slider:active::-webkit-slider-thumb,
        body[data-theme="x286"] #video-opacity-slider:hover::-webkit-slider-thumb,
        body[data-theme="x286"] #video-opacity-slider:active::-webkit-slider-thumb {
            background: #ffcc00;
        }

        body[data-theme="x286"] .row-opacity-slider:hover::-moz-range-thumb,
        body[data-theme="x286"] .row-opacity-slider:active::-moz-range-thumb,
        body[data-theme="x286"] #video-opacity-slider:hover::-moz-range-thumb,
        body[data-theme="x286"] #video-opacity-slider:active::-moz-range-thumb {
            background: #ffcc00;
        }


        /* Menu CSS */

        #unsaved-indicator {
            margin-left: auto;
            margin-right: 10px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.04em;
            color: var(--accent-primary);
            background: color-mix(in oklab, var(--accent-primary) 12%, transparent);
            border: 1px solid color-mix(in oklab, var(--accent-primary) 35%, transparent);
            border-radius: 4px;
            padding: 2px 8px;
            pointer-events: none;
            user-select: none;
        }

        /* ----- View Toggles ----- */

        body.hide-scenes #transport-scenes,
        body.hide-scenes .track-scenes { display: none; }
        body.hide-scenes .is-audio-track .track-row-3 { display: none; }
        body.hide-scenes .is-midi-track .track-row-3 { display: none; }
        body.hide-scenes .is-midi-track.timeline-row .row-inner { height: 136px; }
        body.hide-scenes .is-midi-track.control-row { height: 136px; }

        body.hide-marker-transport .marker-transport { display: none; }

        body.hide-tempo .global-time { display: none; }

        body.hide-metronome .metronome-scan { display: none; }

        body.hide-zoom .transport-zoom { display: none; }

        body.hide-solo .solo-btn { display: none; }


        body.hide-master #bottom-panel-master { display: none; }
        body.hide-effects #master-effects { display: none; }
        body.hide-notes #bottom-panel-content { display: none; }

        /* ----- Accessibility ----- */

        #toast {
            position: fixed;
            bottom: 88px;
            left: 50%;
            transform: translateX(-50%);
            background: color-mix(in srgb, var(--bg-surface) 85%, black);
            color: var(--text-main);
            border: 1px solid var(--border-subtle);
            padding: 5px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            pointer-events: none;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.15s ease;
        }

        #toast.visible { opacity: 1; }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* menu-label is now a <button> — strip default button styles */
        button.menu-label {
            background: none;
            border: none;
            color: inherit;
            font: inherit;
            cursor: pointer;
            padding: 4px 6px;
            border-radius: 4px;
        }

        /* open menu when keyboard-opened (managed by JS) */
        .menu.keyboard-open .menu-pop {
            display: block;
        }

        /* ----- Focus-visible styles ----- */

        button:focus-visible,
        [role="menuitem"]:focus-visible,
        [role="button"]:focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 2px;
        }

        /* menu items need inset outline since they're inside a popup */
        .menu-pop [role="menuitem"]:focus-visible {
            outline-offset: -2px;
            border-radius: 4px;
        }

        .solo-btn:focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 2px;
        }

        #zoom-slider:focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 2px;
        }

        .track-title:focus-visible {
            outline: 1px solid var(--accent-primary);
            background: var(--bg-surface);
        }

        .panel-marker-note:focus-visible {
            outline: 1px solid var(--accent-primary);
            border-color: var(--accent-primary);
        }

        .marker-time:focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 2px;
        }

        .menu-bar {
            height: 32px;
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 0 12px;
            background: var(--bg-app);
            border-bottom: 1px solid var(--border-subtle);
            position: relative;
            z-index: 100;
        }

        .project-name-display {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 13px;
            color: var(--text-muted);
            pointer-events: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 40%;
        }

        .menu-label {
            display: flex;
            align-items: center;
            height: 100%;

            padding: 4px 6px;
            border-radius: 4px;
        }

        .menu:hover .menu-label {
            background: var(--bg-panel);
        }

        .menu {
            position: relative;
        }

        .menu-pop {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: var(--bg-panel);
            padding: 6px;
            min-width: 200px;
        }

        .menu:hover .menu-pop {
            display: block;
        }

        .menu.item-clicked .menu-pop {
            display: none;
        }

        .menu-pop div {
            padding: 6px 12px;
            white-space: nowrap;
            cursor: pointer;
        }

        .menu-pop div:hover {
            background: var(--bg-surface);
            border-radius: 4px;
        }

        .menu-pop div.menu-item-disabled,
        .menu-pop [aria-disabled="true"] {
            opacity: 0.4;
            pointer-events: none;
            cursor: default;
        }

        .menu-pop [data-theme] {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .menu-pop [data-theme].active::after {
            content: "✓";
            margin-left: auto;
            padding-left: 16px;
            opacity: 0.5;
        }

        .theme-swatch {
            width: 32px;
            height: 13px;
            border-radius: 3px;
            background: linear-gradient(to right,
                var(--sb) 0% 55%,
                var(--sc) 55% 82%,
                var(--sa) 82% 93%,
                var(--sd) 93% 100%
            );
            border: 10px solid #000000;
            flex-shrink: 0;
        }

        .menu-pop hr {
            border: none;
            border-top: 1px solid var(--border-subtle);
            margin: 4px 6px;
        }






        /* Marker Dropdown */

        #marker-dropdown {
            position: fixed;
            z-index: 9000;
            min-width: 160px;
            padding: 4px;
            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
        }

        .marker-dropdown-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
        }

        .marker-dropdown-item:not(.marker-dropdown-playhead):hover {
            background: var(--bg-surface);
        }

        .marker-dropdown-playhead {
            pointer-events: none;
            opacity: 0.55;
            cursor: default;
        }

        .mdd-label {
            font-size: 11px;
            font-style: italic;
            color: var(--accent-primary);
        }

        .mdd-time {
            font-family: monospace;
            font-size: 12px;
            font-variant-numeric: tabular-nums;
            color: var(--text-muted);
        }

        .marker-dropdown-item:not(.marker-dropdown-playhead):hover .mdd-time {
            color: var(--text-main);
        }

        /* Track Name Tooltip */

        @keyframes x286-blink {
            0%, 100% { opacity: 1; }
            50%       { opacity: 0.12; }
        }

        @keyframes tnt-in {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes tnt-out {
            from { opacity: 1; transform: translateY(0); }
            to   { opacity: 0; transform: translateY(12px); }
        }

        @keyframes tnt-shrink {
            from { width: 100%; }
            to   { width: 0%; }
        }

        #track-name-tooltip {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 9999;

            width: 260px;
            padding: 12px 14px 0;
            box-sizing: border-box;

            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.4);

            animation: tnt-in 200ms ease forwards;
            overflow: hidden;
        }

        #track-name-tooltip.tnt-exit {
            animation: tnt-out 200ms ease forwards;
        }

        .tnt-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px;
        }

        .tnt-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-main);
            letter-spacing: 0.02em;
        }

        .tnt-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 14px;
            cursor: pointer;
            padding: 2px 4px;
            line-height: 1;
            border-radius: 3px;
        }

        .tnt-close:hover {
            color: var(--text-main);
            background: var(--bg-surface);
        }

        .tnt-definition {
            margin: 0 0 10px;
            font-size: 12px;
            line-height: 1.5;
            color: var(--text-muted);
        }

        .tnt-progress {
            height: 2px;
            margin: 0 -14px;
            background: var(--accent-primary);
            animation: tnt-shrink 20s linear forwards;
        }

        /* Audio Reconnect Banner */

        #audio-reconnect-banner {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 9999;

            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;

            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.4);

            animation: tnt-in 200ms ease forwards;
        }

        .arb-text {
            font-size: 13px;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .arb-btn {
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 4px;
            border: 1px solid var(--accent-primary);
            background: transparent;
            color: var(--accent-primary);
            cursor: pointer;
            white-space: nowrap;
        }

        .arb-btn:hover {
            background: var(--accent-primary);
            color: var(--bg-panel);
        }

        .arb-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 14px;
            cursor: pointer;
            padding: 2px 4px;
            line-height: 1;
            border-radius: 3px;
        }

        .arb-close:hover {
            color: var(--text-main);
            background: var(--bg-surface);
        }

        /* Bottom Panel */

        #bottom-panel {
            flex-shrink: 0;
            height: 300px;
            background: var(--bg-panel);
            border-top: 1px solid var(--border-subtle);
            display: flex;
            flex-direction: column;
            position: relative;
        }

        body.hide-bottom-panel #bottom-panel {
            display: none;
        }

        #bottom-panel-handle {
            height: 6px;
            flex-shrink: 0;
            cursor: ns-resize;
            background: transparent;
        }

        #bottom-panel-handle:hover {
            background: var(--accent-primary);
            opacity: 0.4;
        }

        #bottom-panel-body {
            flex: 1;
            display: flex;
            flex-direction: row;
            overflow: hidden;
        }

        /* Master section */

        #bottom-panel-master {
            width: 280px;
            box-sizing: border-box;
            flex-shrink: 0;
            border-right: 1px solid var(--border-subtle);
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 0;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--border-subtle) transparent;
        }
        #bottom-panel-master::-webkit-scrollbar { width: 4px; }
        #bottom-panel-master::-webkit-scrollbar-track { background: transparent; }
        #bottom-panel-master::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 2px; }

        .master-section {
            display: flex;
            flex-direction: column;
            padding: 8px 0;
        }
        .master-section + .master-section {
            border-top: 1px solid var(--border-subtle);
        }

        .master-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-panel);
            margin: 0 -12px;
            padding: 3px 12px;
            cursor: pointer;
            user-select: none;
        }

        .master-heading {
            margin: 0;
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .master-heading::before {
            content: '▾';
            margin-right: 5px;
            display: inline-block;
            transition: transform 0.15s ease;
        }

        .master-section.collapsed .master-heading::before {
            transform: rotate(-90deg);
        }

        .master-section-body {
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding-top: 6px;
            max-height: 400px;
            opacity: 1;
            transition: max-height 0.18s ease, opacity 0.12s ease, padding-top 0.18s ease;
        }

        .master-section.collapsed .master-section-body {
            max-height: 0;
            opacity: 0;
            padding-top: 0;
        }

        .master-collapse-controls {
            display: flex;
            gap: 4px;
            padding: 4px 0 6px;
        }

        .master-collapse-controls button {
            flex: 1;
            background: var(--bg-surface);
            color: var(--text-muted);
            border: 1px solid var(--border);
            border-radius: 3px;
            padding: 2px 6px;
            font-size: 10px;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .master-collapse-controls button:hover {
            color: var(--text-main);
        }

        .master-group-label {
            margin: 0 -12px;
            padding: 4px 12px;
            background: var(--bg-surface);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-main);
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .master-group-label::before {
            content: '▾';
            font-size: 10px;
            display: inline-block;
            transition: transform 0.15s ease;
        }

        .master-group.collapsed .master-group-label::before {
            transform: rotate(-90deg);
        }

        .master-group {
            border-top: 1px solid var(--border-subtle);
            padding-top: 4px;
        }

        .master-group:first-child {
            border-top: none;
            padding-top: 0;
        }

        .master-group-body {
            overflow: hidden;
            max-height: 2000px;
            transition: max-height 0.2s ease, opacity 0.15s ease;
            opacity: 1;
        }

        .master-group.collapsed .master-group-body {
            max-height: 0;
            opacity: 0;
        }

        .master-sub-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 4px -12px 0;
            padding: 2px 12px;
            background: var(--bg-panel);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        /* Custom themed preset dropdowns */
        .csel {
            position: relative;
            display: inline-flex;
        }

        .csel-trigger {
            -webkit-appearance: none;
            appearance: none;
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            color: var(--text-muted);
            font-size: 10px;
            font-family: inherit;
            padding: 2px 6px;
            cursor: pointer;
            outline: none;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .csel-trigger::after {
            content: '';
            display: inline-block;
            width: 0;
            height: 0;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-top: 3px solid currentColor;
            opacity: 0.6;
            flex-shrink: 0;
        }

        .csel-trigger:focus,
        .csel.open .csel-trigger {
            border-color: var(--accent-primary);
            color: var(--text-main);
        }

        .csel-menu {
            display: none;
            position: fixed;
            z-index: 99999;
            background: var(--bg-surface);
            border: 1px solid var(--accent-primary);
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.35);
            overflow: hidden;
        }

        .csel-menu.open { display: block; }

        .csel-opt {
            padding: 4px 8px;
            font-size: 10px;
            color: var(--text-main);
            cursor: pointer;
            white-space: nowrap;
        }

        .csel-opt:hover {
            background: color-mix(in srgb, var(--accent-primary) 20%, var(--bg-surface));
        }

        .csel-opt.active {
            color: var(--accent-primary);
            font-weight: 600;
        }

        .master-fx-controls {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .master-fx-toggle {
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            color: var(--text-muted);
            font-size: 9px;
            font-weight: 700;
            padding: 2px 5px;
            cursor: pointer;
            letter-spacing: 0.06em;
        }

        .master-fx-toggle.active {
            background: var(--accent-primary);
            color: var(--bg-app);
            border-color: var(--accent-primary);
        }

        #master-meter {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .master-meter-row {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .master-ch-label {
            font-size: 9px;
            font-weight: 700;
            color: var(--text-muted);
            opacity: 0.6;
            width: 8px;
            flex-shrink: 0;
        }

        .master-meter-bar {
            flex: 1;
            height: 8px;
            display: flex;
            gap: 2px;
        }

        .mm-seg {
            flex: 1;
            border-radius: 1px;
            background: rgba(255, 255, 255, 0.07);
        }

        /* Horizontal segment colors (left = low, right = high) */
        .mm-seg:nth-child(-n+13).lit {
            background: var(--meter-low);
            box-shadow: 0 0 3px color-mix(in srgb, var(--meter-low) 67%, transparent);
        }
        .mm-seg:nth-child(n+14):nth-child(-n+16).lit {
            background: var(--meter-mid);
            box-shadow: 0 0 3px color-mix(in srgb, var(--meter-mid) 67%, transparent);
        }
        .mm-seg:nth-child(n+17).lit {
            background: var(--meter-high);
            box-shadow: 0 0 3px color-mix(in srgb, var(--meter-high) 67%, transparent);
        }
        .mm-seg:nth-child(-n+13).peak {
            background: var(--meter-low);
            opacity: 0.7;
        }
        .mm-seg:nth-child(n+14):nth-child(-n+16).peak {
            background: var(--meter-mid);
            opacity: 0.7;
        }
        .mm-seg:nth-child(n+17).peak {
            background: var(--meter-high);
            opacity: 0.7;
        }

        /* GR meter — fills right-to-left, amber color */
        .gr-meter-bar {
            flex: 1;
            height: 8px;
            display: flex;
            gap: 2px;
        }
        .gr-seg {
            flex: 1;
            border-radius: 1px;
            background: rgba(255, 255, 255, 0.07);
        }
        .gr-seg.lit {
            background: var(--meter-mid);
            box-shadow: 0 0 3px color-mix(in srgb, var(--meter-mid) 67%, transparent);
        }

        .sf2-load-btn {
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            color: var(--text-muted);
            font-size: 9px;
            font-weight: 700;
            padding: 2px 6px;
            cursor: pointer;
            letter-spacing: 0.06em;
            flex-shrink: 0;
        }
        .sf2-load-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
        .sf2-load-btn:disabled { opacity: 0.5; cursor: default; }

        .sf2-name-display {
            font-size: 9px;
            color: var(--text-muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            min-width: 0;
        }

        .master-gain-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .master-gain-label {
            font-size: 10px;
            color: var(--text-muted);
            flex-shrink: 0;
        }

        .metronome-count-in-only-label {
            font-size: 10px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
        }

        .metronome-2x2 {
            display: grid;
            grid-template-columns: auto auto auto;
            align-items: center;
            gap: 2px 8px;
        }
        .metronome-2x2 label {
            display: flex;
            justify-content: center;
        }
        .met-col-hdr {
            font-size: 10px;
            color: var(--text-muted);
            text-align: center;
        }
        .met-row-lbl {
            font-size: 10px;
            color: var(--text-muted);
        }

        #master-gain-slider {
            flex: 1;
            width: auto;
        }

        #bottom-panel-content {
            flex: 1;
            overflow: auto;
            padding: 8px 12px;
        }

        .panel-marker-grid {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .panel-marker-row {
            display: grid;
            grid-template-columns: 76px 1fr;
            gap: 6px 12px;
            align-items: start;
            padding: 4px 6px;
            border-radius: 5px;
            border-left: 3px solid transparent;
        }

        .panel-marker-row.selected {
            background: color-mix(in oklab, var(--accent-primary) 8%, transparent);
            border-left-color: var(--accent-primary);
        }

        .panel-marker-time {
            font-family: monospace;
            font-size: 12px;
            font-variant-numeric: tabular-nums;
            color: var(--accent-primary);
            padding-top: 5px;
        }

        .panel-marker-row {
            cursor: pointer;
        }

        .panel-marker-row:hover .panel-marker-time {
            text-decoration: underline;
        }

        .panel-marker-note {
            width: 100%;
            box-sizing: border-box;
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            color: var(--text-main);
            font-family: system-ui, sans-serif;
            font-size: 13px;
            line-height: 1.5;
            padding: 4px 8px;
            resize: none;
            overflow: hidden;
        }

        .panel-marker-note:focus {
            outline: 1px solid var(--accent-primary);
            border-color: var(--accent-primary);
        }

        .panel-marker-note::placeholder {
            color: var(--text-muted);
            opacity: 1;
        }

        .panel-marker-note::selection {
            background: color-mix(in srgb, var(--accent-highlight) 45%, transparent);
            color: var(--text-main);
        }

        body[data-notes-font="mono"] .panel-marker-note {
            font-family: monospace;
        }

        .chord-picker {
            grid-column: 1 / -1;
            position: relative;
            margin-top: 2px;
        }

        .chord-picker-trigger {
            width: 100%;
            background: var(--bg-surface);
            color: var(--text-muted);
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            padding: 4px 24px 4px 8px;
            font-size: 12px;
            text-align: left;
            cursor: pointer;
            position: relative;
        }

        .chord-picker-trigger::after {
            content: "▾";
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            pointer-events: none;
        }

        .chord-picker-trigger:hover {
            border-color: var(--accent-primary);
            color: var(--text-main);
        }

        .chord-picker-dropdown {
            display: none;
            position: fixed;
            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.4);
            z-index: 200;
            overflow: hidden;
        }

        .chord-picker-dropdown.open {
            display: block;
        }

        .chord-picker-option {
            padding: 6px 12px;
            font-size: 12px;
            color: var(--text-muted);
            cursor: pointer;
            white-space: nowrap;
        }

        .chord-picker-option:hover {
            background: color-mix(in oklab, var(--accent-primary) 15%, transparent);
            color: var(--text-main);
        }

        .chord-picker-option.active {
            color: var(--accent-primary);
        }

        /* Demo Sequence Popup */

        .demo-seq-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99998;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .demo-seq-card {
            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 10px;
            padding: 28px;
            max-width: 380px;
            width: 100%;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        }

        .demo-seq-eyebrow {
            margin: 0 0 6px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--accent-primary);
        }

        .demo-seq-title {
            margin: 0 0 10px;
            font-size: 18px;
            font-weight: 700;
            color: var(--text-main);
        }

        .demo-seq-description {
            margin: 0 0 22px;
            font-size: 13px;
            line-height: 1.6;
            color: var(--text-muted);
        }

        .demo-seq-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }

        .demo-seq-actions button {
            padding: 6px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
        }

        .demo-seq-cancel {
            background: transparent;
            border-color: var(--border-subtle);
            color: var(--text-muted);
        }

        .demo-seq-skip {
            background: var(--bg-surface);
            border-color: var(--border-subtle);
            color: var(--text-main);
        }

        .demo-seq-run {
            background: var(--accent-primary);
            border-color: var(--accent-primary);
            color: #000;
            font-weight: 600;
        }

        /* Demo Cursor */

        #demo-cursor {
            position: fixed;
            pointer-events: none;
            z-index: 99999;
            width: 22px;
            height: 22px;
            filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
            transition: none;
        }

        #demo-cursor.demo-cursor-clicking {
            transform: scale(0.82);
            filter: drop-shadow(0 0 8px var(--accent-primary));
            transition: transform 0.1s ease, filter 0.1s ease;
        }

/* ----- Chord Diagrams ----- */

        #chord-diagrams-dialog {
            position: fixed;
            top: 210px;
            left: 0;
            width: 330px;
            height: 460px;
            min-width: 200px;
            min-height: 120px;
            z-index: 500;
            display: none;
            user-select: none;
            overflow: visible;
        }

        #chord-diagrams-dialog.cd-visible {
            display: block;
        }

        .cd-dialog-inner {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            box-shadow: 0 6px 24px rgba(0,0,0,0.45);
            overflow: hidden;
        }

        .cd-tab-strip {
            position: absolute;
            left: 100%;
            top: 32px;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .cd-tab {
            writing-mode: vertical-lr;
            padding: 10px 7px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-left: none;
            border-radius: 0 6px 6px 0;
            cursor: pointer;
            color: var(--text-muted);
            user-select: none;
            white-space: nowrap;
            transition: background 0.1s, color 0.1s;
        }

        .cd-tab:hover:not(.cd-tab-active) {
            color: var(--text-main);
            background: var(--bg-panel);
        }

        .cd-tab-active {
            background: var(--accent-primary);
            color: var(--text-button);
            border-color: var(--accent-primary);
        }

        .cd-tab-add {
            font-size: 14px;
            font-weight: 400;
            padding: 6px 7px;
            letter-spacing: 0;
        }

        .cd-resize-edge {
            position: absolute;
            z-index: 10;
        }
        .cd-resize-n { top: 0; left: 6px; right: 6px; height: 6px; cursor: ns-resize; }
        .cd-resize-s { bottom: 0; left: 6px; right: 6px; height: 6px; cursor: ns-resize; }
        .cd-resize-e { right: 0; top: 6px; bottom: 6px; width: 6px; cursor: ew-resize; }
        .cd-resize-w { left: 0; top: 6px; bottom: 6px; width: 6px; cursor: ew-resize; }

        .cd-dialog-titlebar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            background: var(--bg-surface);
            border-radius: 8px 8px 0 0;
            border-bottom: 1px solid var(--border-subtle);
            cursor: grab;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .cd-dialog-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 13px;
            cursor: pointer;
            padding: 2px 5px;
            border-radius: 3px;
            line-height: 1;
        }

        .cd-dialog-close:hover {
            color: var(--text-main);
            background: var(--bg-panel);
        }

        .cd-dialog-share {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 13px;
            cursor: pointer;
            padding: 2px 5px;
            border-radius: 3px;
            line-height: 1;
        }

        .cd-dialog-share:hover {
            color: var(--text-main);
            background: var(--bg-panel);
        }

        #chord-diagrams-body {
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }

        .cd-empty {
            font-size: 12px;
            color: var(--text-muted);
            margin: 0;
        }

        /* Chord grid */

        .cd-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: 18px repeat(5, 1fr);
            background: transparent;
        }

        .cd-grid.cd-4frets {
            grid-template-rows: 18px repeat(4, 1fr);
        }

        .cd-grid.cd-6frets {
            grid-template-rows: 18px repeat(6, 1fr);
        }

        .cd-top-cell {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            border-right: none;
            min-height: 18px;
            cursor: pointer;
        }

        .cd-top-cell::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
            background: var(--border-subtle);
        }

        .cd-top-cell:hover {
            background: var(--bg-panel);
            color: var(--text-main);
        }

        .cd-fret-cell.cd-s-first,
        .cd-fret-cell.cd-s-last {
            border-bottom: none;
        }

        .cd-fret-cell.cd-s-first::after,
        .cd-top-cell.cd-s-first::after {
            content: "";
            position: absolute;
            left: 50%;
            right: 0;
            bottom: 0;
            height: 1px;
            background: var(--border-subtle);
        }

        .cd-fret-cell.cd-s-last::after,
        .cd-top-cell.cd-s-last::after {
            content: "";
            position: absolute;
            left: 0;
            right: 50%;
            bottom: 0;
            height: 1px;
            background: var(--border-subtle);
        }

        .cd-fret-cell {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid var(--border-subtle);
            border-right: none;
            cursor: pointer;
            aspect-ratio: 10 / 12;
        }

        .cd-fret-cell::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 1px;
            transform: translateX(-50%);
            background: var(--text-muted);
            opacity: 0.4;
            z-index: 0;
            pointer-events: none;
        }

        .cd-fret-cell:hover {
            background: color-mix(in oklab, var(--accent-primary) 12%, transparent);
        }

        .cd-dot {
            position: relative;
            z-index: 1;
            width: 65%;
            aspect-ratio: 1;
            border-radius: 50%;
            background: var(--text-main);
            pointer-events: none;
        }

        .cd-grid.cd-view .cd-top-cell,
        .cd-grid.cd-view .cd-fret-cell {
            cursor: default;
            pointer-events: none;
        }

        .cd-grid.cd-view .cd-top-cell:hover,
        .cd-grid.cd-view .cd-fret-cell:hover {
            background: transparent;
        }

        /* List view */

        .cd-chord-row {
            display: flex;
            flex-wrap: wrap;
            gap: 32px;
        }

        .cd-chord-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            width: 72px;
            zoom: var(--cd-zoom, 1);
            cursor: pointer;
        }

        .cd-chord-card.cd-card-highlighted {
            outline: 2px solid var(--accent-primary);
            outline-offset: 3px;
            border-radius: 4px;
        }

        .cd-chord-card.cd-card-dimmed {
            outline: 2px solid color-mix(in oklab, var(--accent-primary) 50%, transparent);
            outline-offset: 3px;
            border-radius: 4px;
        }

        .cd-name-grid-col {
            position: relative;
        }

        .cd-chord-card:hover .cd-card-name {
            color: var(--accent-primary);
            text-decoration: underline;
        }

        .cd-grid-wrap {
            display: flex;
            align-items: flex-start;
            gap: 0;
            width: 150px;
            align-self: center;
        }

        .cd-chord-card .cd-grid-wrap {
            width: 100%;
        }

        .cd-grid-wrap .cd-grid {
            flex: 1;
        }

        .cd-name-grid-col {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .cd-fret-label {
            font-size: 10px;
            color: var(--text-muted);
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .cd-card-name {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-main);
            text-align: center;
        }

        .cd-card-actions {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .cd-card-btn {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 3px;
            cursor: pointer;
            background: var(--bg-button);
            border: 1px solid var(--border-subtle);
            color: var(--text-muted);
        }

        .cd-card-btn:hover { color: var(--text-main); }
        .cd-btn-delete:hover { color: var(--accent-danger); }

        .cd-play-btn {
            font-size: 10px;
            padding: 2px 0;
            width: 100%;
            border-radius: 3px;
            cursor: pointer;
            background: transparent;
            border: 1px solid transparent;
            color: var(--text-muted);
            opacity: 0;
            transition: opacity 0.15s;
        }

        .cd-chord-card:hover .cd-play-btn {
            opacity: 1;
        }

        .cd-play-btn:hover {
            background: var(--bg-button);
            border-color: var(--border-subtle);
            color: var(--text-main);
        }

        .cd-add-btn {
            align-self: flex-start;
            font-size: 12px;
            padding: 5px 12px;
            cursor: pointer;
            background: transparent;
            border: 1px dashed var(--border-subtle);
            border-radius: 4px;
            color: var(--text-muted);
        }

        .cd-add-btn:hover {
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }

        #chord-diagrams-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            border-top: 1px solid var(--border-subtle);
            background: var(--bg-panel);
            flex-shrink: 0;
        }

        .cd-zoom-wrap {
            display: flex;
            gap: 4px;
        }

        .cd-zoom-btn {
            background: transparent;
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            color: var(--text-muted);
            font-size: 16px;
            width: 28px;
            height: 28px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        .cd-zoom-btn:hover {
            color: var(--text-main);
        }

        /* Editor */

        .cd-editor-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .cd-name-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .cd-name-input {
            flex: 1;
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            color: var(--text-main);
            font-size: 14px;
            font-weight: 700;
            padding: 4px 8px;
        }

        .cd-name-input:focus {
            outline: 1px solid var(--accent-primary);
            border-color: var(--accent-primary);
        }

        .cd-basefret-label {
            font-size: 11px;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .cd-basefret-input {
            width: 44px;
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            color: var(--text-main);
            font-size: 12px;
            padding: 4px 6px;
            text-align: center;
            outline: none;
        }

        .cd-basefret-input:focus {
            border-color: var(--accent-primary);
        }

        .cd-rows-seg {
            display: flex;
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            overflow: hidden;
        }

        .cd-rows-btn {
            background: var(--bg-surface);
            border: none;
            color: var(--text-muted);
            font-size: 12px;
            padding: 3px 8px;
            cursor: pointer;
        }

        .cd-rows-btn + .cd-rows-btn {
            border-left: 1px solid var(--border-subtle);
        }

        .cd-rows-btn.active {
            background: var(--accent-primary);
            color: var(--bg-app);
        }

        .cd-rows-btn:not(.active):hover {
            color: var(--text-main);
        }

        .cd-sound-seg {
            display: flex;
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            overflow: hidden;
        }

        .cd-sound-btn {
            background: var(--bg-surface);
            border: none;
            color: var(--text-muted);
            font-size: 11px;
            padding: 4px 10px;
            cursor: pointer;
            letter-spacing: 0.04em;
        }

        .cd-sound-btn + .cd-sound-btn {
            border-left: 1px solid var(--border-subtle);
        }

        .cd-sound-btn.active {
            background: var(--accent-primary);
            color: var(--bg-app);
            font-weight: 600;
        }

        .cd-sound-btn:not(.active):hover {
            color: var(--text-main);
        }

        .cd-dialog-footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }

        .cd-btn-save {
            background: var(--accent-primary);
            border: 1px solid transparent;
            border-radius: 4px;
            color: #111;
            font-weight: 600;
            font-size: 12px;
            padding: 5px 14px;
            cursor: pointer;
        }

        .cd-btn-save:hover { opacity: 0.85; }

        .cd-btn-cancel {
            background: transparent;
            border: 1px solid transparent;
            border-radius: 4px;
            color: var(--text-muted);
            font-size: 12px;
            padding: 5px 14px;
            cursor: pointer;
        }

        .cd-btn-cancel:hover { color: var(--text-main); }

        .cd-btn-delete-chord {
            background: transparent;
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            color: var(--text-muted);
            font-size: 12px;
            padding: 5px 14px;
            cursor: pointer;
        }

        .cd-btn-delete-chord:hover {
            color: var(--accent-danger);
            border-color: var(--accent-danger);
        }

        /* Chord edit popover */

        #chord-edit-popover {
            position: fixed;
            left: -9999px;
            top: -9999px;
            width: 240px;
            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.55);
            z-index: 600;
            display: none;
            flex-direction: column;
        }

        #chord-edit-popover.cd-popover-visible {
            display: flex;
        }

        .cd-popover-inner {
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .cd-popover-inner .cd-grid-wrap {
            width: 150px;
        }

        .cd-popover-inner .cd-fret-label {
            font-size: 17px;
            min-width: 22px;
            text-align: right;
        }

        .cd-popover-inner .cd-top-cell {
            font-size: 19px;
        }

        .cd-popover-inner .cd-grid {
            grid-template-rows: 28px repeat(5, 1fr);
        }

        .cd-popover-inner .cd-grid.cd-4frets {
            grid-template-rows: 28px repeat(4, 1fr);
        }

        .cd-popover-inner .cd-grid.cd-6frets {
            grid-template-rows: 28px repeat(6, 1fr);
        }

        .cd-popover-inner .cd-dialog-footer {
            border-top: 1px solid var(--border-subtle);
            padding-top: 10px;
            margin-top: 2px;
            justify-content: space-between;
        }

        .cd-popover-inner .cd-editor-footer-right {
            display: flex;
            gap: 8px;
        }

        .cd-popover-inner .cd-play-wrap {
            display: flex;
            justify-content: center;
        }

/* Keyboard Shortcut Help Overlay */

        .shortcut-help-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .shortcut-help-overlay[hidden] { display: none; }

        .shortcut-help-panel {
            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 10px;
            padding: 20px 24px;
            width: 340px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        }

        .shortcut-help-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .shortcut-help-header span {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-main);
        }

        .shortcut-help-header button {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 16px;
            cursor: pointer;
            padding: 2px 6px;
            line-height: 1;
            border-radius: 4px;
        }

        .shortcut-help-header button:hover { color: var(--text-main); }

        .shortcut-list {
            margin: 0;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 8px 20px;
            align-items: baseline;
        }

        .shortcut-list dt {
            font-family: monospace;
            font-size: 12px;
            background: var(--bg-track);
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            padding: 2px 6px;
            white-space: nowrap;
            color: var(--text-main);
            justify-self: start;
        }

        .shortcut-list dd {
            margin: 0;
            font-size: 13px;
            color: var(--text-muted);
        }

/* View Settings Dialog */

        .view-settings-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99998;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .view-settings-overlay[hidden] { display: none; }

        .view-settings-dialog {
            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .view-settings-title {
            margin: 0;
            padding: 8px 16px;
            background: var(--bg-surface);
            border-bottom: 1px solid var(--border-subtle);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .view-settings-body {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            padding: 16px;
            gap: 0;
        }

        .vs-col {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 0 16px;
        }

        .vs-col:first-child { padding-left: 0; }
        .vs-col:last-child  { padding-right: 0; }
        .vs-col + .vs-col   { border-left: 1px solid var(--border-subtle); }

        .view-settings-body label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-main);
            cursor: pointer;
            white-space: nowrap;
        }

        .vs-group-label {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            margin-top: 10px;
        }

        .vs-col > .vs-group-label:first-child { margin-top: 0; }

        .vs-presets {
            display: flex;
            gap: 8px;
            padding: 10px 16px;
            border-bottom: 1px solid var(--border-subtle);
            background: var(--bg-surface);
        }

        .vs-preset-btn {
            flex: 1;
            padding: 6px 0;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            background: var(--bg-button);
            border: 1px solid var(--border-subtle);
            color: var(--text-main);
        }

        .vs-preset-btn:hover {
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }

        .vs-other {
            border-top: 1px solid var(--border-subtle);
        }

        .vs-other-label {
            display: block;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            padding: 8px 16px 0;
        }

        .vs-other-body {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            padding: 8px 16px 16px;
            gap: 0;
        }

        .vs-other-body .vs-col:first-child { padding-left: 0; }
        .vs-other-body .vs-col:last-child  { padding-right: 0; }
        .vs-other-body .vs-col + .vs-col   { border-left: 1px solid var(--border-subtle); }

        .vs-theme-dropdown {
            position: relative;
        }

        .vs-theme-trigger {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 5px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            background: var(--bg-button);
            border: 1px solid var(--border-subtle);
            color: var(--text-main);
        }

        .vs-theme-trigger:hover {
            border-color: var(--accent-primary);
        }

        .vs-theme-trigger .theme-swatch {
            width: 40px;
            height: 14px;
            flex-shrink: 0;
        }

        .vs-theme-arrow {
            margin-left: auto;
            font-size: 10px;
            color: var(--text-muted);
        }

        .vs-theme-stars {
            display: flex;
            gap: 2px;
            padding: 4px 2px 0;
        }

        .vs-star {
            background: none;
            border: none;
            padding: 0 2px;
            font-size: 18px;
            cursor: pointer;
            color: var(--border-subtle);
            line-height: 1;
        }

        .vs-star.filled {
            color: var(--accent-highlight);
        }

        .vs-star:hover,
        .vs-star:hover ~ .vs-star {
            color: var(--border-subtle);
        }

        .vs-theme-stars:hover .vs-star {
            color: var(--accent-highlight);
        }

        .vs-theme-stars:hover .vs-star:hover ~ .vs-star {
            color: var(--border-subtle);
        }

        .vs-hue {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 2px 0;
            font-size: 12px;
            color: var(--text-muted);
        }

        .vs-hue input[type="range"] {
            flex: 1;
            accent-color: var(--accent-primary);
        }

        #vs-hue-val {
            min-width: 36px;
            text-align: right;
            color: var(--text-main);
        }

        .vs-saturation {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 2px 0;
            font-size: 12px;
            color: var(--text-muted);
        }

        .vs-saturation input[type="range"] {
            flex: 1;
            accent-color: var(--accent-primary);
        }

        #vs-saturation-val {
            min-width: 36px;
            text-align: right;
            color: var(--text-main);
        }

        .vs-theme-panel {
            position: fixed;
            z-index: 10000;
            width: max-content;
        }

        .vs-theme-panel[hidden] { display: none; }

        .theme-swatch-list {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 4px 0;
            background: #000000;
            padding: 8px;
            border-radius: 8px;
            color: #ffffff;
        }

        .theme-swatch-list label {
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px;
            border-radius: 6px;
            border: 2px solid transparent;
            cursor: pointer;
            white-space: nowrap;
        }

        .theme-swatch-list label:has(input[type="radio"]:checked) {
            border-color: #ffffff;
        }

        .theme-swatch-list input[type="radio"] {
            display: none;
        }

        .vs-panel-stars {
            margin-left: auto;
            padding-left: 6px;
            color: white;
            font-size: 11px;
            letter-spacing: 1px;
        }

        .vs-dialog-body {
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .view-settings-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            padding: 12px 16px;
            border-top: 1px solid var(--border-subtle);
            background: var(--bg-surface);
        }

        .view-settings-actions button {
            padding: 6px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
        }

        .view-settings-accept-btn {
            background: var(--accent-primary);
            border-color: var(--accent-primary);
            color: #000;
            font-weight: 600;
        }

        .view-settings-accept-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .calibrate-description {
            font-size: 13px;
            color: var(--text-muted);
            margin: 0;
        }

        .calibrate-status {
            font-size: 13px;
            color: var(--text-muted);
            margin: 0;
            min-height: 1.4em;
        }

        .calibrate-result {
            font-size: 14px;
            font-weight: 600;
            margin: 0;
        }

        .calibrate-result.success { color: var(--accent-primary); }
        .calibrate-result.error   { color: #e57373; }

        .calibrate-manual-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-muted);
        }

        .calibrate-manual-input {
            width: 60px;
            padding: 4px 8px;
            background: var(--bg-track);
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            color: var(--text-main);
            font-size: 13px;
            text-align: right;
        }

        .unique-name-message {
            font-size: 13px;
            color: var(--text-muted);
            margin: 0;
            padding: 16px 16px 0;
        }

        .unique-name-input {
            width: calc(100% - 32px);
            box-sizing: border-box;
            margin: 8px 16px 16px;
            padding: 6px 10px;
            background: var(--bg-track);
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            color: var(--text-main);
            font-size: 13px;
        }

/* Debug CSS */

        /* =============================
            DEBUG TRANSPORT STATE
        ============================= */

        #debug-transport-state {
            position: fixed;
            right: 8px;
            bottom: 8px;

            padding: 6px 10px;
            font-family: monospace;
            font-size: 12px;

            background: rgba(0, 0, 0, 0.75);
            color: #eee;
            border-radius: 4px;

            pointer-events: none;
            display: none;
        }

        body.debug #debug-transport-state {
            display: block;
        }

        /* =============================
            DEBUG SCROLL
        ============================= */

        body.debug #controls-column::after,
        body.debug #timeline-area::after {
            content: attr(data-scroll);
            position: sticky;
            top: 4px;
            font-size: 10px;
            color: #aaa;
            background: rgba(0, 0, 0, 0.6);
            padding: 2px 4px;
        }

        /* =============================
            DEBUG BOUNDING BOXES
        ============================= */

        body.debug .menu-bar {
            outline: 2px solid #ff00ff;
        }

        body.debug .transport {
            outline: 2px solid #00ffff;
        }

        body.debug .layout-root {
            outline: 2px solid #ffff00;
        }

        body.debug #controls-column {
            outline: 2px solid #ff9500;
        }

        body.debug #timeline-area {
            outline: 2px solid #4cd964;
        }

        body.debug #timeline-overlay {
            outline: 2px dashed #ffd400;
        }

        body.debug .control-row {
            outline: 1px dashed #ff3b30;
        }

        body.debug .timeline-row {
            outline: 1px dashed #4cd964;
        }

        /* Mixdown Dialog */

        .mixdown-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99998;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mixdown-card {
            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 10px;
            padding: 28px;
            max-width: 420px;
            width: 100%;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
            position: relative;
        }

        .mixdown-close {
            position: absolute;
            top: 12px;
            right: 12px;
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 14px;
            cursor: pointer;
            padding: 4px 6px;
            line-height: 1;
            border-radius: 4px;
        }
        .mixdown-close:hover {
            color: var(--text-main);
            background: var(--bg-button);
        }

        .mixdown-title {
            margin: 0 0 18px;
            font-size: 18px;
            font-weight: 700;
            color: var(--text-main);
        }

        .mixdown-section-label {
            margin: 0 0 8px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .mixdown-notice {
            margin: 0 0 18px;
            font-size: 13px;
            line-height: 1.6;
            color: var(--text-muted);
        }

        /* Scene list */

        .mixdown-scene-list {
            display: flex;
            flex-direction: column;
            gap: 3px;
            margin-bottom: 20px;
        }

        .mixdown-scene-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 6px;
            background: var(--bg-surface);
            cursor: pointer;
        }

        .mixdown-scene-row.empty {
            opacity: 0.38;
            cursor: default;
        }

        .mixdown-scene-row input[type="checkbox"] {
            flex-shrink: 0;
        }

        .mixdown-scene-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
            overflow: hidden;
        }

        .mixdown-scene-letter {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-main);
        }

        .mixdown-scene-tracks {
            font-size: 11px;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Output format */

        .mixdown-mode-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 24px;
            font-size: 13px;
            color: var(--text-main);
        }

        .mixdown-mode-group label {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }


        /* Done state file list */

        .mixdown-file-list {
            margin: 0 0 22px;
            padding-left: 18px;
            font-size: 12px;
            font-family: monospace;
            color: var(--text-muted);
            line-height: 1.9;
        }

        /* Actions */

        .mixdown-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }

        .mixdown-actions button {
            padding: 6px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
        }

        .mixdown-cancel {
            background: transparent;
            border-color: var(--border-subtle);
            color: var(--text-muted);
        }

        .mixdown-primary {
            background: var(--accent-primary);
            border-color: var(--accent-primary);
            color: #000;
            font-weight: 600;
        }

        .mixdown-primary:disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }

        /* Video export section */

        .mixdown-divider {
            border: none;
            border-top: 1px solid var(--border-subtle);
            margin: 20px 0 18px;
        }

        .mixdown-video-row {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
        }

        .mixdown-scene-select {
            flex: 1;
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            color: var(--text-main);
            font-size: 13px;
            padding: 5px 8px;
        }

        .mixdown-scene-select:disabled {
            opacity: 0.38;
            cursor: not-allowed;
        }

        .mixdown-export-video-btn {
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            color: var(--text-main);
            cursor: pointer;
            font-size: 13px;
            padding: 5px 14px;
            white-space: nowrap;
        }

        .mixdown-export-video-btn:disabled {
            opacity: 0.38;
            cursor: not-allowed;
        }


        .mixdown-video-notice {
            margin: 0;
            font-size: 11px;
            color: var(--text-muted);
        }

        /* Video export progress toast */
        .video-export-toast {
            position: fixed;
            bottom: 24px;
            right: 24px;
            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            padding: 10px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: var(--text-main);
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
            z-index: 900;
        }

        .video-export-toast-spinner {
            width: 14px;
            height: 14px;
            border: 2px solid var(--border-subtle);
            border-top-color: var(--accent-primary);
            border-radius: 50%;
            flex-shrink: 0;
            animation: toast-spin 0.7s linear infinite;
        }

        @keyframes toast-spin {
            to { transform: rotate(360deg); }
        }

        .video-export-toast-cancel {
            margin-left: 4px;
            padding: 2px 8px;
            font-size: 12px;
            background: transparent;
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            color: var(--text-muted);
            cursor: pointer;
        }
        .video-export-toast-cancel:hover {
            border-color: var(--accent-primary);
            color: var(--text-main);
        }

        /* ----- Track Selection ----- */

        .control-row.selected > .row-inner {
            border-left: 2px solid var(--accent-primary);
            padding-left: 6px;
        }


        /* ----- Clip Info Modal ----- */

        .clip-info-body {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 4px 12px;
            font-size: 13px;
            margin: 0;
            padding: 16px;
        }

        .clip-info-body dt { color: var(--text-muted); }
        .clip-info-body dd { margin: 0; }

        /* ----- Loop Editor Panel ----- */

        #loop-editor-panel {
            position: fixed;
            top: 120px;
            left: 50%;
            transform: translateX(-50%);
            width: 900px;
            min-width: 260px;
            height: 490px;
            min-height: 220px;
            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            box-shadow: 0 6px 24px rgba(0,0,0,0.45);
            z-index: 5000;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        #loop-editor-panel[hidden] { display: none; }

        .loop-editor-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            border-bottom: 1px solid var(--border-subtle);
            font-weight: 600;
            font-size: 13px;
        }

        .loop-editor-close-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 14px;
            padding: 0;
            line-height: 1;
        }

        .loop-editor-close-btn:hover { color: var(--text-main); }

        .loop-editor-body {
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            flex: 1;
            overflow-y: auto;
            min-height: 0;
        }

        .loop-editor-waveform {
            flex: 1;
            min-height: 60px;
            background: var(--bg-surface);
            border-radius: 4px;
            border: 1px solid var(--border-subtle);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-size: 12px;
        }

        .loop-editor-fields {
            display: flex;
            flex-direction: column;
            gap: 8px;
            font-size: 12px;
            color: var(--text-muted);
        }

        .loop-editor-fields label {
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

        .loop-editor-fields input[type=range] {
            flex: 1;
        }

        .loop-editor-transport {
            display: flex;
            gap: 6px;
            justify-content: center;
        }

        .loop-editor-transport button {
            padding: 4px 12px;
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            color: var(--text-main);
            cursor: pointer;
            font-size: 12px;
        }

        .loop-editor-transport button:hover { border-color: var(--accent-primary); }

        .loop-editor-resize-handle {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 14px;
            height: 14px;
            cursor: nwse-resize;
            background: linear-gradient(135deg, transparent 40%, var(--border-subtle) 40%);
            border-radius: 0 0 8px 0;
        }

        /* ----- Piano Roll Panel ----- */

        #piano-roll-panel {
            position: fixed;
            top: 80px;
            left: 0;
            width: 960px;
            min-width: 400px;
            height: 576px;
            min-height: 260px;
            background: var(--bg-panel);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            box-shadow: 0 6px 24px rgba(0,0,0,0.5);
            z-index: 5100;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        #piano-roll-panel[hidden] { display: none; }

        .piano-roll-header {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border-bottom: 1px solid var(--border-subtle);
            font-weight: 600;
            font-size: 13px;
            gap: 10px;
            cursor: grab;
            user-select: none;
        }

        .piano-roll-header:active { cursor: grabbing; }

        #piano-roll-title { flex: 1; }

        .piano-roll-toolbar { display: flex; gap: 4px; align-items: center; }

        #piano-roll-zoom-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 80px;
            height: 20px;
            background: transparent;
            margin: 0;
        }
        #piano-roll-zoom-slider::-webkit-slider-runnable-track {
            height: 4px;
            background: var(--bg-panel);
            border-radius: 2px;
            border: 1px solid var(--border-subtle);
        }
        #piano-roll-zoom-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--accent-primary);
            border: 2px solid var(--bg-app);
            margin-top: -5px;
            cursor: pointer;
        }
        #piano-roll-zoom-slider:hover::-webkit-slider-thumb { background: var(--accent-highlight); }

        .piano-roll-tool-btn {
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 11px;
            padding: 2px 8px;
        }

        .piano-roll-tool-btn.active {
            border-color: var(--accent-primary);
            color: var(--text-main);
        }

        .piano-roll-close-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 14px;
            padding: 0;
            line-height: 1;
        }

        .piano-roll-close-btn:hover { color: var(--text-main); }

        .piano-roll-body {
            flex: 1;
            display: flex;
            flex-direction: row;
            min-height: 0;
            overflow: hidden;
        }

        .piano-roll-keys-wrapper {
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            border-right: 1px solid var(--border-subtle);
        }

        .piano-roll-keys-spacer {
            height: 20px;
            flex-shrink: 0;
            border-bottom: 1px solid var(--border-subtle);
        }

        #piano-roll-keys {
            width: 44px;
            flex: 1;
            min-height: 0;
            display: block;
        }

        .piano-roll-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        #piano-roll-ruler {
            height: 20px;
            flex-shrink: 0;
            display: block;
            cursor: pointer;
            border-bottom: 1px solid var(--border-subtle);
        }

        #piano-roll-canvas {
            flex: 1;
            min-height: 0;
            display: block;
            cursor: crosshair;
        }

        .piano-roll-resize-handle {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 14px;
            height: 14px;
            cursor: nwse-resize;
            background: linear-gradient(135deg, transparent 40%, var(--border-subtle) 40%);
            border-radius: 0 0 8px 0;
        }

        #piano-roll-velocity {
            height: 80px;
            flex-shrink: 0;
            display: block;
            cursor: ns-resize;
            border-top: 1px solid var(--border-subtle);
        }

        .piano-roll-vel-label {
            height: 80px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: var(--text-muted);
            border-top: 1px solid var(--border-subtle);
            user-select: none;
        }

        .midi-notes-miniature {
            position: absolute;
            top: 4px;
            left: 0;
            pointer-events: none;
        }

        /* ----- Clip Popup ----- */

        #clip-popup {
            position: fixed;
            z-index: 1000;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.35);
        }

        #clip-popup[hidden] { display: none; }
        #clip-popup button[hidden] { display: none; }

        #clip-popup button {
            display: block;
            width: 100%;
            padding: 6px 14px;
            background: none;
            border: none;
            border-radius: 4px;
            color: var(--text-main);
            font-size: 13px;
            text-align: left;
            cursor: pointer;
            white-space: nowrap;
        }

        #clip-popup button:hover { background: var(--accent-primary); color: #fff; }

        #duplicate-dialog {
          position: fixed; inset: 0; z-index: 1100;
          display: flex; align-items: center; justify-content: center;
          background: rgba(0,0,0,0.45);
        }
        #duplicate-dialog[hidden] { display: none; }
        #duplicate-dialog-card {
          background: var(--bg-secondary);
          border: 1px solid var(--border);
          border-radius: 8px;
          padding: 20px 24px;
          display: flex; flex-direction: column; gap: 16px;
          min-width: 220px;
          box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        }
        #duplicate-dialog-title {
          margin: 0; font-size: 14px; font-weight: 600; color: var(--text-main);
        }
        #duplicate-dialog-label {
          font-size: 13px; color: var(--text-secondary);
          display: flex; flex-direction: column; gap: 6px;
        }
        #duplicate-dialog-input {
          width: 100%; padding: 6px 8px; border-radius: 4px;
          border: 1px solid var(--border); background: var(--bg-primary);
          color: var(--text-main); font-size: 14px; box-sizing: border-box;
        }
        #duplicate-dialog-actions {
          display: flex; gap: 8px; justify-content: flex-end;
        }
        #duplicate-dialog-actions button {
          padding: 6px 14px; border-radius: 4px; border: none;
          font-size: 13px; cursor: pointer;
        }
        #duplicate-dialog-cancel {
          background: var(--bg-primary); color: var(--text-main);
          border: 1px solid var(--border) !important;
        }
        #duplicate-dialog-ok {
          background: var(--accent-primary); color: #fff;
        }

        #sync-dialog {
          position: fixed; inset: 0; z-index: 1100;
          display: flex; align-items: center; justify-content: center;
          background: rgba(0,0,0,0.45);
        }
        #sync-dialog[hidden] { display: none; }
        #sync-dialog-card {
          background: var(--bg-secondary);
          border: 1px solid var(--border);
          border-radius: 8px;
          padding: 20px 24px;
          display: flex; flex-direction: column; gap: 16px;
          min-width: 300px;
          box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        }
        #sync-dialog-title {
          margin: 0; font-size: 14px; font-weight: 600; color: var(--text-main);
        }
        #sync-dialog-label {
          font-size: 13px; color: var(--text-secondary);
          display: flex; flex-direction: column; gap: 8px;
        }
        #sync-dialog-row {
          display: flex; align-items: center; gap: 8px;
        }
        #sync-dialog-slider { flex: 1; }
        #sync-dialog-number {
          width: 64px; padding: 4px 6px; border-radius: 4px;
          border: 1px solid var(--border); background: var(--bg-primary);
          color: var(--text-main); font-size: 13px;
        }
        #sync-dialog-reset {
          background: none; border: 1px solid var(--border); border-radius: 4px;
          color: var(--text-secondary); cursor: pointer; padding: 3px 7px; font-size: 13px;
        }
        #sync-dialog-reset:hover { color: var(--text-main); }
        #sync-dialog-actions {
          display: flex; gap: 8px; justify-content: flex-end;
        }
        #sync-dialog-actions button {
          padding: 6px 14px; border-radius: 4px; border: none;
          font-size: 13px; cursor: pointer;
        }
        #sync-dialog-cancel {
          background: var(--bg-primary); color: var(--text-main);
          border: 1px solid var(--border) !important;
        }
        #sync-dialog-ok {
          background: var(--accent-primary); color: #fff;
        }

        /* Track Edit Dialog ----- */
        #track-edit-dialog {
          position: fixed; inset: 0; z-index: 1100;
          display: flex; align-items: center; justify-content: center;
          background: rgba(0,0,0,0.45);
        }
        #track-edit-dialog[hidden] { display: none; }
        #track-edit-dialog-card {
          background: var(--bg-secondary);
          border: 1px solid var(--border);
          border-radius: 8px;
          padding: 20px;
          min-width: 240px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        }
        #track-edit-dialog-title {
          margin: 0; font-size: 14px; font-weight: 600; color: var(--text-main);
        }
        #track-edit-dialog-actions {
          display: flex; flex-direction: column; gap: 6px;
        }
        #track-edit-dialog-actions button {
          padding: 8px 14px; border-radius: 4px; border: 1px solid var(--border);
          font-size: 13px; cursor: pointer; text-align: left;
          background: var(--bg-primary); color: var(--text-main);
        }
        #track-edit-dialog-actions button:hover {
          border-color: var(--text-secondary); color: var(--text-main);
        }
        #track-edit-delete-btn {
          color: var(--accent-danger) !important;
          border-color: var(--accent-danger) !important;
        }
        #track-edit-delete-btn:hover {
          background: color-mix(in srgb, var(--accent-danger) 15%, transparent) !important;
        }

        /* Video Backdrop ----- */

        /* Sticky anchor keeps the video pinned to the visible area of #timeline-area
           regardless of horizontal/vertical scroll position. */
        #video-sticky-anchor {
            position: sticky;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            pointer-events: none;
            z-index: 0;
        }

        #timeline-video {
            position: absolute;
            top: 0;
            left: 0;
            /* width/height set by ResizeObserver in JS to match #timeline-area viewport */
            object-fit: contain;
            pointer-events: none;
            opacity: 0.45;
            display: none;
        }

        body.has-video #timeline-video {
            display: block;
        }

        body.video-phosphor #timeline-video {
            filter: url(#phosphor-filter);
        }

        #video-phosphor-btn {
            display: none;
        }

        body[data-theme="x286"] #video-phosphor-btn {
            display: revert;
        }


        /* Keep track content above the video backdrop */
        #timeline-inner {
            z-index: 1;
        }

        /* Video overlay mode: raise video above track content */
        body.video-overlay #video-sticky-anchor {
            z-index: 2;
        }

        #video-overlay-btn {
            opacity: 0.4;
        }
        body.video-overlay #video-overlay-btn {
            opacity: 1;
        }

        #video-transport-group {
            flex: 0 0 auto;
            display: none;
            align-items: center;
            gap: 6px;
            padding: 0 4px;
        }

        body.has-video #video-transport-group {
            display: flex;
        }

        .video-transport-label {
            color: var(--text-muted);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        #video-opacity-slider {
            width: 64px;
        }

        #video-remove-btn {
            font-size: 11px;
            padding: 3px 7px !important;
        }
/* } */

/* ============================================================
   MIDI Clips
   ============================================================ */



/* Record Arm Button */
.arm-btn {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  cursor: pointer;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-muted, #888);
  line-height: 1;
}
.arm-btn.arm-active {
  background: var(--accent-danger);
  border-color: var(--accent-danger);
  color: var(--arm-active-text);
}
.arm-btn:hover {
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}
.arm-btn.arm-active:hover {
  background: color-mix(in srgb, var(--accent-danger) 80%, white);
  color: var(--arm-active-text);
}

/* Track type visual distinction */
.is-midi-track.control-row,
.is-midi-track.timeline-row {
  border-left: 3px solid var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-app));
}
.is-audio-track.control-row,
.is-audio-track.timeline-row {
  border-left: 3px solid transparent;
}

.is-audio-track.control-row { height: 136px; }
.is-midi-track.control-row  { height: 166px; }

/* MIDI clip block on the timeline */
.midi-clip {
  position: absolute;
  top: 4px;
  bottom: 4px;
  min-width: 4px;
  background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
  border: 1px solid var(--accent-primary);
  border-radius: 3px;
  overflow: visible;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.midi-clip-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 2;
}

.midi-clip-handle-left  { left: 0; border-radius: 3px 0 0 3px; }
.midi-clip-handle-right { right: 0; border-radius: 0 3px 3px 0; }

.midi-clip-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 36%;
  min-height: 8px;
  background: var(--accent-primary);
  border-radius: 1px;
  opacity: 0.5;
}

.midi-clip-handle:hover::after { opacity: 1; }

.midi-event {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  border-right: 1px solid color-mix(in srgb, var(--accent-primary) 60%, transparent);
  color: var(--text-primary);
  padding: 0 4px;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: auto;
  cursor: grab;
  background: color-mix(in srgb, var(--accent-primary) 30%, transparent);
}
.midi-event:active { cursor: grabbing; }

/* Floating chord picker popup in editor */
.midi-chord-picker-popup {
  position: fixed;
  z-index: 9999;
  background: var(--bg-elevated, var(--bg-surface));
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 0;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  min-width: 100px;
}

.midi-chord-picker-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
}

.midi-chord-picker-option:hover {
  background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

.midi-context-menu {
  position: fixed;
  z-index: 9999;
  background: var(--bg-elevated, var(--bg-surface));
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  min-width: 120px;
}

.midi-context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
}

.midi-context-menu button:hover {
  background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

/* ============================================================
   Workspace + Project Picker
   ============================================================ */

.workspace-name-display {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 8px;
  opacity: 0.7;
}
.workspace-name-display:not(:empty)::before {
  content: "ws: ";
}

#project-picker-card {
  width: min(560px, 90vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

#project-picker-body {
  overflow-y: auto;
  flex: 1;
}

#project-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#project-picker-empty {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 16px 0;
}

.pp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.pp-row:hover {
  border-color: var(--accent-primary);
}

.pp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.pp-open-btn {
  padding: 4px 12px;
  border-radius: 4px;
  border: none;
  font-size: 12px;
  cursor: pointer;
  background: var(--accent-primary);
  color: #000;
  font-weight: 600;
  flex-shrink: 0;
}
.pp-open-btn:hover {
  opacity: 0.85;
}

#project-name-prompt-input {
  width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-panel);
  color: var(--text-main);
  font-size: 14px;
  box-sizing: border-box;
  margin-top: 4px;
}