#seekBar,
#volumeBar {
  height: 6px;
  background: #fff;
  outline: 0;
  transition: background 450ms ease-in;
}
#volumeBar {
  -webkit-appearance: none;
  border-radius: 3px;
  background-image: linear-gradient(to right, #e11d48 0, #e11d48 0, #fff 0, #fff 100%);
}
#volumeBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e11d48;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  transition: background 0.3s;
}
#volumeBar::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e11d48;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  transition: background 0.3s;
}
#volumeBar::-ms-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e11d48;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  transition: background 0.3s;
}
#volumeBar:hover::-moz-range-thumb,
#volumeBar:hover::-ms-thumb,
#volumeBar:hover::-webkit-slider-thumb {
  background: #c11240;
}
#volumeBar:active::-moz-range-thumb,
#volumeBar:active::-ms-thumb,
#volumeBar:active::-webkit-slider-thumb {
  background: #a50e38;
}
#seekBar {
  -webkit-appearance: none;
  width: 100%;
  border-radius: 3px;
  background-image: linear-gradient(to right, #e11d48 0, #e11d48 0, #fff 0, #fff 100%);
}
#seekBar.updating {
  transition: none !important;
  will-change: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#seekBar.updating::-webkit-slider-thumb {
  transition: none !important;
  transform: translateZ(0);
  will-change: transform;
}
#seekBar.updating::-moz-range-thumb {
  transition: none !important;
  transform: translateZ(0);
  will-change: transform;
}
#seekBar.updating::-ms-thumb {
  transition: none !important;
  transform: translateZ(0);
  will-change: transform;
}
#seekBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e11d48;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  transition: background 0.3s;
}
#seekBar::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e11d48;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  transition: background 0.3s;
}
#seekBar::-ms-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e11d48;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  transition: background 0.3s;
}
#seekBar:hover::-moz-range-thumb,
#seekBar:hover::-ms-thumb,
#seekBar:hover::-webkit-slider-thumb {
  background: #c11240;
}
#seekBar:active::-moz-range-thumb,
#seekBar:active::-ms-thumb,
#seekBar:active::-webkit-slider-thumb {
  background: #a50e38;
}
@media (max-width: 640px) {
  #seekBar {
    position: absolute;
    left: 0;
    bottom: -12px;
  }
}
@keyframes fadeScale {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.play-pause-indicator {
  animation: 0.6s ease-out fadeScale;
}

#speedMenu {
  transform-origin: bottom right;
  transition: opacity 150ms ease, transform 150ms ease;
}
#speedMenu.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
#speedMenu.closed {
  opacity: 0;
  transform: scale(0.95) translateY(5px);
  pointer-events: none;
}
.speed-label {
  display: inline-block;
}