/* A CSS record: no image transfer and only a transform while playing. */
.music-toggle{width:52px;height:52px;min-width:44px;min-height:44px;padding:4px;gap:0;border-radius:50%;background:#fffefa;border:1px solid #c9d0b3;box-shadow:0 3px 14px #3e4e2f20;justify-content:center}
#music-label{display:none}
.music-toggle .music-icon{position:relative;display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:conic-gradient(from 25deg,#242a21,#505747 45deg,#20261d 85deg,#30382a 170deg,#656b59 210deg,#20261d 255deg,#242a21);box-shadow:inset 0 0 0 1px #141b14;animation:wedding-record-spin 10s linear infinite;animation-play-state:paused}
.music-toggle .music-icon:before{content:'';position:absolute;inset:3px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 2px,#e0e5cf21 2px 3px)}
.disc-label{position:relative;width:16px;height:16px;border-radius:50%;background:conic-gradient(#a7b47b,#75814c,#c6cc9c,#75814c,#a7b47b);border:1px solid #c9cfaa}
.disc-label:after{content:'';position:absolute;inset:5px;border-radius:50%;background:#fffefa}
.music-toggle.playing .music-icon{animation:wedding-record-spin 10s linear infinite;animation-play-state:running}
@keyframes wedding-record-spin{to{transform:rotate(360deg)}}
@media(max-height:450px){.music-toggle{width:44px;height:44px;padding:3px}.music-toggle .music-icon{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.music-toggle .music-icon,.music-toggle.playing .music-icon{animation:none}}
/* The stationary button receives every tap, including taps on the rotating art. */
.music-toggle{touch-action:manipulation;-webkit-tap-highlight-color:transparent;isolation:isolate}
.music-toggle *{pointer-events:none}

/* Keep the opening card clear; the audio control appears with the invitation. */
body:not(.invitation-open) .music-toggle{display:none}