<span>音量</span>
<span class="slider-value" id="volume-value">70%</span>
</div>
<input type="range" class="input-field" id="music-volume" min="0" max="100" value="70">
</div>
<div class="btn-group">
<button class="btn btn-success" id="music-play">▶️ 播放</button>
<button class="btn btn-danger" id="music-stop">⏹️ 停止</button>
</div>
</div>
</div>

<div class="panel">
<div class="panel-header">
<h3 class="panel-title">🎭 情感控制</h3>
</div>
<div class="panel-content">
<div class="slider-group">
<div class="slider-label">
<span>喜悦</span>
<span class="slider-value" id="happiness-value">50%</span>
</div>
<input type="range" class="input-field" data-emotion="happiness" min="0" max="100" value="50">
</div>
<div class="slider-group">
<div class="slider-label">
<span>悲伤</span>
<span class="slider-value" id="sadness-value">20%</span>
</div>
<input type="range" class="input-field" data-emotion="sadness" min="0" max="100" value="20">
</div>
<div class="slider-group">
<div class="slider-label">
<span>平静</span>
<span class="slider-value" id="calmness-value">70%</span>
</div>
<input type="range" class="input-field" data-emotion="calmness" min="0" max="100" value="70">
</div>
</div>
</div>
</div>
</div>

<!-- 视觉反馈系统 -->
<div class="system-panels" id="visual-system" style="display: none;">
<!-- 视觉系统内容 -->
<div class="workspace-system" style="grid-column: 1 / -1;">
<div class="panel">
<div class="panel-header">
<h3 class="panel-title">🌈 视觉反馈实验室</h3>
</div>
<div class="panel-content">
<div style="text-align: center; padding: var(--space-8); color: var(--gray-600);">
<div style="font-size: 3rem; margin-bottom: var(--space-4);">🎨</div>
<h3 style="margin-bottom: var(--space-3);">视觉反馈系统</h3>
<p>正在开发中... 将包含高级动画和视觉效果</p>
</div>
</div>
</div>
</div>
</div>

<!-- 实验工坊系统 -->
<div class="system-panels" id="experiment-system" style="display: none;">
<!-- 实验系统内容 -->
<div class="workspace-system" style="grid-column: 1 / -1;">
<div class="panel">
<div class="panel-header">
<h3 class="panel-title">🔬 实验工坊</h3>
</div>
<div class="panel-content">
<div style="text-align: center; padding: var(--space-8); color: var(--gray-600);">
<div style="font-size: 3rem; margin-bottom: var(--space-4);">⚗️</div>
<h3 style="margin-bottom: var(--space-3);">创意实验空间</h3>
<p>在这里尝试新的谐音组合和音乐创意</p>
<div class="btn-group" style="justify-content: center; margin-top: var(--space-6);">
<button class="btn btn-primary">🧪 开始实验</button>
<button class="btn btn-outline">📚 实验模板</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>

<!-- 底部控制栏 -->
<footer class="footer-controls">
<div class="footer-container">
<div class="transport-controls">
<button class="btn btn-success transport-btn" id="global-play">
<span>▶️</span>
<span>全局播放</span>
</button>
<button class="btn btn-danger transport-btn" id="global-stop">
<span>⏹️</span>
<span>停止</span>
</button>
<button class="btn btn-warning transport-btn" id="global-record">
<span>⏺️</span>
<span>录制</span>
</button>
<button class="btn btn-info transport-btn" id="global-loop">
<span>🔁</span>
<span>循环</span>
</button>
</div>

<div class="progress-container">
<div class="progress-bar">
<div class="progress-fill" id="global-progress"></div>
<div class="section-markers" id="global-markers"></div>
</div>
<div style="display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--gray-600);">
<span id="current-time">00:00</span>
<span id="total-time">00:00</span>
</div>