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

        :root {
            --bg: #0a0a0a;
            --bg-raised: #141414;
            --bg-hover: #1a1a1a;
            --border: #1e1e1e;
            --text: #e8e8e8;
            --text-dim: #666;
            --text-muted: #444;
            --accent: #fff;
            --radius: 10px;
            --radius-lg: 14px;
            --back-btn-bg: rgba(18, 18, 18, 0.72);
            --back-btn-bg-hover: rgba(24, 24, 24, 0.82);
            --back-btn-bg-active: rgba(30, 30, 30, 0.9);
            --back-btn-border: rgba(255, 255, 255, 0.12);
            --back-btn-border-hover: rgba(255, 255, 255, 0.22);
            --back-btn-shadow: 0 14px 30px rgba(0,0,0,0.28), 0 2px 10px rgba(0,0,0,0.16);
            --back-btn-focus: rgba(255,255,255,0.18);
            --menu-surface: rgba(18, 18, 18, 0.9);
            --menu-surface-strong: rgba(24, 24, 24, 0.96);
            --menu-border: rgba(255,255,255,0.08);
            --menu-border-strong: rgba(255,255,255,0.14);
            --menu-shadow: 0 24px 44px rgba(0,0,0,0.34), 0 8px 18px rgba(0,0,0,0.18);
            --menu-chip: rgba(255,255,255,0.04);
            --menu-chip-hover: rgba(255,255,255,0.08);
            --toggle-surface: rgba(255,255,255,0.035);
            --toggle-surface-hover: rgba(255,255,255,0.065);
            --toggle-border-strong: rgba(255,255,255,0.11);
            --toggle-active-bg: rgba(255,255,255,0.14);
            --toggle-active-border: rgba(255,255,255,0.2);
            --toggle-active-text: rgba(255,255,255,0.96);
            --toggle-slider-bg: rgba(255,255,255,0.12);
            --toggle-slider-shadow: 0 3px 10px rgba(0,0,0,0.12);

            /* Sample category colors */
            --cat-kick:   #e05a3a;
            --cat-snare:  #4a8fe8;
            --cat-hihat:  #d4a83a;
            --cat-cymbal: #d4a83a;
            --cat-loop:   #4abf7c;
            --cat-synth:  #9b6dd6;
            --cat-pad:    #9b6dd6;
            --cat-bass:   #3abfbf;
            --cat-fx:     #888888;
            --cat-other:  #888888;
        }
        [data-theme="light"] {
            --bg: #f5f5f5;
            --bg-raised: #ffffff;
            --bg-hover: #ebebeb;
            --border: #e0e0e0;
            --text: #111111;
            --text-dim: #888;
            --text-muted: #bbb;
            --accent: #000;
            --back-btn-bg: rgba(255, 255, 255, 0.74);
            --back-btn-bg-hover: rgba(255, 255, 255, 0.9);
            --back-btn-bg-active: rgba(245, 245, 245, 0.96);
            --back-btn-border: rgba(0, 0, 0, 0.1);
            --back-btn-border-hover: rgba(0, 0, 0, 0.18);
            --back-btn-shadow: 0 12px 28px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
            --back-btn-focus: rgba(0,0,0,0.12);
            --menu-surface: rgba(255,255,255,0.88);
            --menu-surface-strong: rgba(255,255,255,0.96);
            --menu-border: rgba(0,0,0,0.08);
            --menu-border-strong: rgba(0,0,0,0.13);
            --menu-shadow: 0 22px 38px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.08);
            --menu-chip: rgba(0,0,0,0.035);
            --menu-chip-hover: rgba(0,0,0,0.06);
            --toggle-surface: rgba(0,0,0,0.02);
            --toggle-surface-hover: rgba(0,0,0,0.045);
            --toggle-border-strong: rgba(0,0,0,0.08);
            --toggle-active-bg: rgba(0,0,0,0.08);
            --toggle-active-border: rgba(0,0,0,0.1);
            --toggle-active-text: #111111;
            --toggle-slider-bg: rgba(0,0,0,0.06);
            --toggle-slider-shadow: 0 3px 10px rgba(0,0,0,0.06);
        }
        [data-theme="light"] .header {
            background: rgba(245,245,245,0.85);
        }
        [data-theme="light"] .player-bar {
            background: rgba(255,255,255,0.94);
            border-color: rgba(0,0,0,0.1);
            box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 2px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
        }
        [data-theme="light"] .player-skip { color: rgba(0,0,0,0.3); }
        [data-theme="light"] .player-skip:hover { color: rgba(0,0,0,0.8); }
        [data-theme="light"] .waveform-pill::after { background: linear-gradient(to left, rgba(255,255,255,0.96) 0%, transparent 100%); }
        [data-theme="light"] .waveform-pill::before { background: linear-gradient(to right, rgba(255,255,255,0.96) 0%, transparent 100%); }
        [data-theme="light"] .waveform-playhead { background: rgba(0,0,0,0.85); box-shadow: 0 0 8px rgba(0,0,0,0.2); }
        [data-theme="light"] .eq-bars span { background: #000; }
        [data-theme="light"] .trk-share-menu { background: #fff; border-color: #e0e0e0; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
        [data-theme="light"] .trk-share-opt { color: #111; }
        [data-theme="light"] .trk-share-opt:hover { background: rgba(0,0,0,0.05); }
        [data-theme="light"] #siteLogo { filter: invert(1); }
        [data-theme="light"] .vol-slider { background: linear-gradient(to right, #111111 var(--vol, 80%), #cccccc var(--vol, 80%)); background-clip: content-box; }
        [data-theme="light"] .vol-icon { color: rgba(0,0,0,0.5); }
        [data-theme="light"] .loop-btn { color: rgba(0,0,0,0.3); }
        [data-theme="light"] .loop-btn:hover { color: rgba(0,0,0,0.8); }
        [data-theme="light"] .loop-btn.active { color: #16a34a; }
        [data-theme="light"] .loop-btn.active:hover { color: #15803d; }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 14px;
            line-height: 1.4;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }