/* The original page keeps its background, spacing, lettering and viewport. */
#music-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 168px;
  margin: 0 auto 32px;
  padding: 4px 8px 8px;
  border: 0;
  background: transparent;
  color: #eb0710;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.music-medallion { display: block; flex: none; overflow: visible; }
.music-label {
  display: block;
  width: 150px;
  height: 42px;
  overflow: visible;
  filter: drop-shadow(0 0 1.5px #2a2ad0) drop-shadow(0 0 4px #1818a8) drop-shadow(0 0 9px #0c0c70);
}
.symbol-pause, .label-pause, .focus-ring { display: none; }
#music-button[aria-pressed="true"] .symbol-play,
#music-button[aria-pressed="true"] .label-play { display: none; }
#music-button[aria-pressed="true"] .symbol-pause,
#music-button[aria-pressed="true"] .label-pause { display: block; }

@media (hover: hover) {
  #music-button:hover .music-medallion { filter: brightness(1.13); }
  #music-button:hover .music-label { filter: brightness(1.15) drop-shadow(0 0 1.5px #3232e0) drop-shadow(0 0 5px #1c1cb8) drop-shadow(0 0 10px #10107c); }
}
#music-button:focus-visible { outline: none; }
#music-button:focus-visible .focus-ring { display: block; }
#music-button:focus-visible .music-medallion { filter: brightness(1.13); }
#music-button:active .face-bevel { fill: url(#recessed); }
#music-button:active .medallion-face { transform: translateY(1px); }

@media (forced-colors: active) {
  #music-button:focus-visible { outline: 2px solid ButtonText; outline-offset: 4px; }
}