75rem;">👩</div>
<div>
<div style="font-weight: 600;">温柔女声</div>
<div style="font-size: 0.75rem; color: var(--gray-600);">适合抒情歌曲</div>
</div>
</div>
</div>
<div class="card" data-voice="female2">
<div style="display: flex; align-items: center; gap: var(--space-3);">
<div style="width: 24px; height: 24px; border-radius: 50%; background: var(--primary-3); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem;">💃</div>
<div>
<div style="font-weight: 600;">活泼女声</div>
<div style="font-size: 0.75rem; color: var(--gray-600);">适合流行歌曲</div>
</div>
</div>
</div>
<div class="card" data-voice="male1">
<div style="display: flex; align-items: center; gap: var(--space-3);">
<div style="width: 24px; height: 24px; border-radius: 50%; background: var(--info-1); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem;">👨</div>
<div>
<div style="font-weight: 600;">沉稳男声</div>
<div style="font-size: 0.75rem; color: var(--gray-600);">适合民谣</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="panel">
<div class="panel-header">
<h3 class="panel-title">🎹 乐器库</h3>
</div>
<div class="panel-content">
<div class="card-grid card-grid-2">
<div class="card active" data-instrument="piano">🎹 钢琴</div>
<div class="card" data-instrument="strings">🎻 弦乐</div>
<div class="card" data-instrument="guitar">🎸 吉他</div>
<div class="card" data-instrument="flute">🎵 长笛</div>
<div class="card" data-instrument="drums">🥁 鼓组</div>
<div class="card" data-instrument="bass">🎸 贝斯</div>
</div>
</div>
</div>
</div>

<div class="workspace-system">
<div class="panel">
<div class="panel-header">
<h3 class="panel-title">🎵 歌词编辑器</h3>
</div>
<div class="panel-content">
<div class="editor-container">
<textarea class="editor" id="music-lyrics" placeholder="在此输入歌词...&#10;使用标记定义歌曲结构:&#10;[主歌]&#10;这是主歌部分的歌词&#10;[副歌]&#10;这是副歌部分的歌词&#10;[间奏]&#10;等待8小节">
[主歌]
轻轻的我走了，正如我轻轻的来
我轻轻的招手，作别西天的云彩

[副歌]
那河畔的金柳，是夕阳中的新娘
波光里的艳影，在我的心头荡漾

[间奏]
等待4小节

[预副歌]
软泥上的青荇，油油的在水底招摇
在康河的柔波里，我甘心做一条水草</textarea>
</div>
</div>
</div>

<div class="panel">
<div class="panel-header">
<h3 class="panel-title">📊 音乐可视化</h3>
</div>
<div class="panel-content">
<div class="visualization-system">
<div class="visualization-panel" id="music-waveform">
<div style="position: absolute; top: var(--space-3); left: var(--space-3); font-size: 0.75rem; color: var(--primary-1);">波形显示</div>
</div>
<div class="visualization-panel" id="music-spectrum">
<div style="position: absolute; top: var(--space-3); left: var(--space-3); font-size: 0.75rem; color: var(--primary-1);">频谱分析</div>
</div>
<div class="timeline-panel" id="music-timeline">
<div style="position: absolute; top: var(--space-3); left: var(--space-3); font-size: 0.75rem; color: var(--primary-1);">时间线</div>
</div>
</div>
</div>
</div>
</div>

<div class="control-system">
<div class="panel">
<div class="panel-header">
<h3 class="panel-title">🎛️ 音乐控制</h3>
</div>
<div class="panel-content">
<div class="input-group">
<label class="input-label">🎶 BPM</label>
<input type="number" class="input-field" id="music-bpm" value="120" min="60" max="240">
</div>
<div class="slider-group">
<div class="slider-label">
<span>音调</span>
<span class="slider-value" id="pitch-value">1.0</span>
</div>
<input type="range" class="input-field" id="music-pitch" min="0.5" max="2.0" step="0.1" value="1.0">
</div>
<div class="slider-group">
<div class="slider-label">