.soundtrack-control {
  position: fixed;
  z-index: 30;
  left: clamp(14px, 2.4vw, 32px);
  bottom: clamp(14px, 2.4vh, 26px);
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 158px;
  padding: 10px 13px;
  color: #e9f2f3;
  text-align: left;
  border: 1px solid #d7e8eb39;
  background: #10171ccc;
  box-shadow: 0 8px 28px #07101542, inset 0 0 18px #8eeaf108;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.soundtrack-control:hover { transform: translateY(-2px); border-color: #93e8ef8c; }
.soundtrack-control:focus-visible { outline: 2px solid #88edf5; outline-offset: 4px; }
.soundtrack-control__glyph { width: 23px; height: 21px; display: flex; align-items: center; justify-content: center; gap: 3px; color: #87e7ed; }
.soundtrack-control__glyph i { display: block; width: 2px; height: 6px; border-radius: 2px; background: currentColor; opacity: .72; }
.soundtrack-control[data-playing="true"] .soundtrack-control__glyph i { animation: soundtrack-wave .78s ease-in-out infinite alternate; }
.soundtrack-control[data-playing="true"] .soundtrack-control__glyph i:nth-child(2) { animation-delay: -.35s; }
.soundtrack-control[data-playing="true"] .soundtrack-control__glyph i:nth-child(3) { animation-delay: -.58s; }
.soundtrack-control[data-playing="true"] .soundtrack-control__glyph i:nth-child(4) { animation-delay: -.18s; }
.soundtrack-control__copy { display: grid; gap: 4px; }
.soundtrack-control__copy small { font: 500 7px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .1em; opacity: .68; }
@keyframes soundtrack-wave { from { height: 4px; opacity: .46; } to { height: 17px; opacity: 1; } }

body:not(.entry-page) .soundtrack-control {
  color: #4a565b;
  border-color: #53606636;
  background: #eef2f2dc;
  box-shadow: 0 8px 28px #26323820, inset 0 0 18px #fff9;
}
body:not(.entry-page) .soundtrack-control__glyph { color: #607f88; }
html.theme-dark body:not(.entry-page) .soundtrack-control {
  color: #e9f2f3;
  border-color: #d7e8eb39;
  background: #10171ccc;
  box-shadow: 0 8px 28px #07101542, inset 0 0 18px #8eeaf108;
}
html.theme-dark body:not(.entry-page) .soundtrack-control__glyph { color: #87e7ed; }

@media (max-width: 560px) {
  .soundtrack-control { min-width: auto; gap: 8px; padding: 9px 10px; }
  .soundtrack-control__glyph { width: 20px; }
  .soundtrack-control__copy small { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .soundtrack-control, .soundtrack-control__glyph i { transition: none; animation: none !important; }
}