.music-invitation{position:fixed;z-index:90;inset:0;display:grid;place-items:center;padding:20px;background:rgba(38,59,52,.28);backdrop-filter:blur(8px)}
.music-note-card{position:relative;width:min(440px,92vw);padding:48px 38px 34px;text-align:center;background:var(--paper);box-shadow:0 24px 70px rgba(38,59,52,.22);animation:music-card-in .45s cubic-bezier(.2,.7,.2,1)}
.music-note-card:before{content:"";position:absolute;inset:14px;border:1px solid rgba(197,165,106,.38);pointer-events:none}
.music-postmark{display:grid;width:48px;aspect-ratio:1;margin:0 auto 25px;place-items:center;border:1px solid var(--antique);border-radius:50%;color:var(--wax)}
.music-note-card p{font-size:22px;line-height:1.7}
.music-note-card small{display:block;margin:18px 0 28px;color:var(--sage);font:10px var(--mono);letter-spacing:.08em}
.music-note-card>div{display:flex;justify-content:center;gap:10px}
.music-note-card button{min-height:46px;padding:10px 18px;border:1px solid var(--wax);background:transparent;cursor:pointer}
.music-note-card button:first-child{color:#FCFAF4;background:var(--wax)}
.music-note-card button:disabled{opacity:.42;cursor:not-allowed}
.music-note-card em{display:block;margin-top:18px;color:var(--wax);font-size:12px;font-style:normal}
.music-control[aria-pressed=true] span{animation:music-breathe 3s ease-in-out infinite}
@keyframes music-card-in{from{opacity:0;transform:translateY(18px) scale(.98)}}
@keyframes music-breathe{50%{transform:rotate(12deg) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.music-note-card,.music-control span{animation:none!important}}