/* 裁音魔方 · 页面样式（自 pages/separate.html 抽取，修改后请同步对应页面） */
        /* ===== 音频分离演示：三轨轨道样式（与新首页一致） ===== */
        :root { --text-muted: #9E9E9E; --info-blue: #4FC3F7; }
        .demo-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 600; font-size: 18px; color: #4FC3F7; }
        .demo-tag { font-size: 11px; background: rgba(79,195,247,0.15); color: #4FC3F7; padding: 2px 10px; border-radius: 20px; font-weight: 500; }
        .demo-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 22px; }

        .track-list { display: flex; flex-direction: column; gap: 12px; }
        .track-row { background: #222; padding: 14px 20px; border-radius: 16px; display: flex; align-items: center; gap: 16px; }
        .track-btn { background: #333; border: none; color: white; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.24s; flex-shrink: 0; }
        .track-btn:hover { background: var(--primary); }
        .track-btn.playing { background: var(--primary); }
        .track-info { display: flex; flex-direction: column; min-width: 110px; }
        .track-info h3 { font-size: 15px; margin-bottom: 2px; font-weight: 600; }
        .track-info span { font-size: 12px; color: var(--text-muted); }
        .track-spectrum { flex: 1; display: flex; align-items: center; height: 40px; overflow: hidden; opacity: 0.7; transition: opacity 0.24s; }
        .track-row:hover .track-spectrum { opacity: 1; }
        .track-spectrum.active { opacity: 1; }
        .track-spectrum canvas { width: 100%; height: 100%; display: block; cursor: pointer; }
        @media (max-width: 768px) {
            .track-row { flex-wrap: wrap; gap: 12px; }
            .track-info { flex: 0 0 100%; }
            .track-spectrum { flex: 1; min-width: 150px; }
        }