/* The music button in the corner, shown once the invitation is open (js/music.js).
   Its colours are this design's; the rest is the same in every design. */
.music-toggle {
  --mu-bg: rgba(14, 30, 70, .55);
  --mu-line: rgba(255, 220, 150, .4);
  --mu-ink: #fff2d8;
  position: fixed;
  z-index: 60;
  top: max(14px, env(safe-area-inset-top));
  right: calc((100% - var(--card-w, 100%)) / 2 + max(14px, env(safe-area-inset-right)));
  width: 40px;
  height: 40px;
  padding: 9px;
  border: 1px solid var(--mu-line);
  border-radius: 50%;
  background: var(--mu-bg);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--mu-ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: scale(.85);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .7, .2, 1), visibility .6s;
  -webkit-tap-highlight-color: transparent;
}
.music-toggle.is-shown { opacity: 1; visibility: visible; transform: none; }
.music-toggle.is-shown.is-off { opacity: .7; }
.music-toggle svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.music-toggle .mu-dot { fill: currentColor; stroke: none; }
.music-toggle .mu-slash { display: none; }
.music-toggle.is-off .mu-slash { display: inline; }
.music-toggle:not(.is-off) svg { animation: mu-sway 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
.music-toggle:focus-visible { outline: 2px solid var(--mu-ink); outline-offset: 2px; }
@keyframes mu-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .music-toggle:not(.is-off) svg { animation: none; } }
@media print { .music-toggle { display: none; } }