.background-audio-toggle {
  position: fixed;
  z-index: 12;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(115, 158, 179, .42);
  border-radius: 50%;
  color: #d7e8ef;
  background: rgba(6, 18, 26, .78);
  cursor: pointer;
  transition: border-color 180ms cubic-bezier(.16, 1, .3, 1), color 180ms cubic-bezier(.16, 1, .3, 1), background 180ms cubic-bezier(.16, 1, .3, 1), transform 180ms cubic-bezier(.16, 1, .3, 1);
}

.background-audio-toggle:hover {
  border-color: rgba(24, 189, 234, .72);
  color: #ffffff;
  background: rgba(8, 30, 41, .92);
  transform: translateY(-1px);
}

.background-audio-toggle:active {
  transform: translateY(0);
}

.background-audio-toggle:focus-visible {
  outline: 2px solid #18bdea;
  outline-offset: 3px;
}

.background-audio-toggle[aria-pressed="true"] {
  border-color: rgba(82, 220, 155, .72);
  color: #74e8ad;
  background: rgba(7, 36, 31, .9);
}

.background-audio-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.background-audio-icon-on {
  display: none;
}

.background-audio-toggle[aria-pressed="true"] .background-audio-icon-off {
  display: none;
}

.background-audio-toggle[aria-pressed="true"] .background-audio-icon-on {
  display: block;
}

.home-background-audio-toggle {
  left: calc(var(--product-nav-width, 96px) + 18px);
  bottom: max(18px, env(safe-area-inset-bottom));
}

body.product-nav-collapsed .home-background-audio-toggle {
  left: 18px;
}

.login-background-audio-toggle {
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
}

@media (max-width: 860px) {
  .home-background-audio-toggle {
    left: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .background-audio-toggle {
    transition-duration: .01ms;
  }
}