.site-head.astro-5qrshpxv .sb-sound.astro-5qrshpxv { /* 声音按钮容器 */
  position: relative; /* 承载悬停底色 */
  display: flex; /* 居中声音图标 */
  align-items: center; /* 垂直居中图标 */
  justify-content: center; /* 水平居中图标 */
  width: 48px; /* 对齐顶部网格 */
  height: 96px; /* 对齐顶部网格 */
  flex: 0 0 48px; /* 固定按钮宽度 */
  padding: 0; /* 清除默认留白 */
  color: var(--color-secondary); /* 继承主题颜色 */
  appearance: none; /* 清除系统外观 */
  background: none; /* 保持背景透明 */
  border: 0; /* 清除默认边框 */
  border-left: 1px solid var(--color-secondary); /* 延续顶部网格 */
  border-radius: 0; /* 保持方形网格 */
  cursor: pointer; /* 表明可以点击 */
} /* 结束声音按钮容器 */

.site-head.astro-5qrshpxv .sb-sound.astro-5qrshpxv::before { /* 声音按钮悬停面 */
  position: absolute; /* 覆盖按钮区域 */
  inset: 0; /* 填满按钮区域 */
  background: var(--color-secondary); /* 使用对比色 */
  transform: scaleX(0); /* 默认隐藏底色 */
  transform-origin: left center; /* 从左侧展开 */
  transition: transform .3s cubic-bezier(1, 0, 0, 1); /* 匹配原页节奏 */
  content: ""; /* 生成装饰层 */
} /* 结束声音按钮悬停面 */

.site-head.astro-5qrshpxv .sb-sound.astro-5qrshpxv:hover::before { /* 声音按钮悬停 */
  transform: scaleX(1); /* 展开对比底色 */
} /* 结束声音按钮悬停 */

.sb-sound__icon { /* 声音条图标 */
  position: relative; /* 位于悬停面上 */
  z-index: 1; /* 保持图标可见 */
  display: flex; /* 横排三个声音条 */
  align-items: flex-end; /* 从底部对齐 */
  gap: 2px; /* 控制条间距 */
  width: 18px; /* 控制图标宽度 */
  height: 18px; /* 控制图标高度 */
} /* 结束声音条图标 */

.sb-sound__bar { /* 单根声音条 */
  width: 4px; /* 设置条宽 */
  height: 35%; /* 设置基础高度 */
  background: var(--color-secondary); /* 使用主题前景色 */
  transform-origin: center bottom; /* 从底部起伏 */
  transition: background-color .3s cubic-bezier(1, 0, 0, 1); /* 柔和切换颜色 */
} /* 结束单根声音条 */

.sb-sound__bar:nth-child(2) { /* 第二根声音条 */
  height: 70%; /* 形成音量层次 */
} /* 结束第二根声音条 */

.sb-sound__bar:nth-child(3) { /* 第三根声音条 */
  height: 100%; /* 形成音量层次 */
} /* 结束第三根声音条 */

.sb-sound[data-sound="on"] .sb-sound__bar { /* 开启状态声音条 */
  animation: hth-sound-level 1.8s ease-in-out infinite alternate; /* 缓慢显示声景 */
} /* 结束开启状态声音条 */

.sb-sound[data-sound="on"] .sb-sound__bar:nth-child(2) { /* 第二根开启声音条 */
  animation-delay: -.6s; /* 错开起伏节奏 */
} /* 结束第二根开启声音条 */

.sb-sound[data-sound="on"] .sb-sound__bar:nth-child(3) { /* 第三根开启声音条 */
  animation-delay: -1.2s; /* 错开起伏节奏 */
} /* 结束第三根开启声音条 */

.site-head.astro-5qrshpxv .sb-sound.astro-5qrshpxv:hover .sb-sound__bar { /* 声音按钮悬停图标 */
  background: var(--color-primary); /* 反转图标颜色 */
} /* 结束声音按钮悬停图标 */

@keyframes hth-sound-level { /* 声音条呼吸动画 */
  from { transform: scaleY(.45); } /* 降低当前声音条 */
  to { transform: scaleY(1); } /* 恢复当前声音条 */
} /* 结束声音条呼吸动画 */

@media only screen and (max-width: 987px) { /* 平板顶部布局 */
  .site-head.astro-5qrshpxv .sb-sound.astro-5qrshpxv { order: 5; } /* 放在右侧控制区 */
} /* 结束平板顶部布局 */

@media only screen and (max-width: 767px) and (orientation: landscape), only screen and (max-width: 576px) { /* 手机顶部布局 */
  .site-head.astro-5qrshpxv .sb-sound.astro-5qrshpxv { height: 100%; } /* 跟随紧凑顶部栏 */
} /* 结束手机顶部布局 */

@media (prefers-reduced-motion: reduce) { /* 尊重减少动画偏好 */
  .sb-sound[data-sound="on"] .sb-sound__bar { animation: none; } /* 停止声音条动画 */
} /* 结束减少动画偏好 */