.sound-toggle {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 14px;
  border: 1px solid #92959d7a;
  border-radius: 50%;
  color: #d6d8de;
  background: linear-gradient(140deg, #37393eeb, #111216f2 65%);
  box-shadow: 0 8px 24px #0006, inset 0 1px 0 #ffffff26;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.sound-toggle svg { width: 24px; height: 24px; overflow: visible; }
.sound-toggle:hover { border-color: #d9dbe4; color: #fff; }
.sound-toggle:focus-visible { outline: 2px solid #ff5c1c; outline-offset: 5px; }
.sound-toggle[data-sound="on"] { color: #fff; border-color: #ff7a4580; }
.sound-toggle[data-sound="on"] .sound-toggle__cross { display: none; }
.sound-toggle[data-sound="off"] .sound-toggle__waves { display: none; }