/* A little record on the invitation; a listening room when opened. */
.music-dock {
  --music-cream: #fff3dd;
  position: fixed; z-index: 65;
  right: max(14px, calc((100vw - 560px) / 2 + 14px));
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: block; width: 72px;
  max-width: calc(100vw - 28px); color: var(--music-cream);
  isolation: isolate; animation: music-dock-arrive .55s .12s both;
}
.music-dock-record { position: relative; flex: 0 0 72px; width: 72px; height: 78px; }
.music-launcher { display: grid; place-items: center; width: 70px; height: 70px; padding: 3px; border: 1px solid #e5c195a6; border-radius: 50%; background: #371820; box-shadow: 0 5px 20px #41141f36; transition: transform .22s; }
.music-launcher:active { transform: scale(.94); }
.music-vinyl { position: relative; display: grid; place-items: center; flex: 0 0 auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: repeating-radial-gradient(circle at center, transparent 0 3px, #e8baa111 3.4px 4px), conic-gradient(from 15deg, #24161b, #514047 23%, #1f1318 30%, #2c1a22 63%, #72575c 72%, #24161b 82%); border: 1px solid #b9a19666; box-shadow: inset 0 0 0 6px #120e1233, inset 0 0 0 1px #f6d4ac33; animation: music-record-spin 16s linear infinite; animation-play-state: paused; }
.music-vinyl-mini { width: 62px; }
.music-record-label { position: relative; display: block; width: 60%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; border: 2px solid #a74c43; background: #b7222d; box-shadow: 0 0 0 3px #1a0e15; }
.music-record-label img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.music-record-label i { position: absolute; left: calc(50% - 3px); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; border: 1px solid #f4dab8; background: #4a1d29; }
.music-dock[data-music-state=playing] .music-vinyl, .music-player-dialog[data-music-state=playing] .music-vinyl { animation-play-state: running; }
#music-dock #music-toggle { position: absolute; inset: auto -7px -8px auto; z-index: 2; display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; gap: 0; padding: 8px; border: 0; border-radius: 50%; background: transparent; color: #fff3dd; box-shadow: none; }
#music-dock #music-toggle::before { content: ''; position: absolute; inset: 7px; border: 1px solid #e2b995; border-radius: 50%; background: #942b39; box-shadow: 0 2px 6px #3c0c233b; }
#music-dock #music-toggle>svg { position: relative; width: 19px; height: 19px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; fill: currentColor; stroke: none; animation: none; }
#music-dock #music-toggle:active { transform: scale(.94); box-shadow: none; }
.music-icon-pause, #music-dock #music-toggle>.music-icon-pause { display: none; }
[data-music-state=playing] .music-main-play>.music-icon-play, #music-dock #music-toggle.is-playing>.music-icon-play { display: none; }
[data-music-state=playing] .music-main-play>.music-icon-pause, #music-dock #music-toggle.is-playing>.music-icon-pause { display: block; }
.music-lyric-peek,.music-gesture-hint { position: absolute; right: 0; bottom: calc(100% + 9px); z-index: 2; display: flex; align-items: center; justify-content: center; width: max-content; max-width: min(282px, calc(100vw - 36px)); min-height: 44px; margin: 0; padding: 10px 15px; border: 1px solid #efe1de; border-radius: 23px 23px 15px 23px; background: #fff; color: #342f32; text-align: center; box-shadow: 0 5px 16px #573e3212, 0 1px 3px #573e320a; backdrop-filter: none; -webkit-backdrop-filter: none; transform-origin: calc(100% - 32px) bottom; }
.music-lyric-peek::before,.music-gesture-hint::before { content: none; }
.music-lyric-peek::after,.music-gesture-hint::after { content: ''; position: absolute; right: 27px; bottom: -5px; width: 10px; height: 10px; border-right: 1px solid #efe1de; border-bottom: 1px solid #efe1de; border-radius: 0 0 3px 0; background: #fff; transform: rotate(45deg); pointer-events: none; }
.music-lyric-peek[hidden],.music-gesture-hint[hidden] { display: none; }
[data-music-lyric-current] { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 13px/1.65 var(--sans); letter-spacing: .015em; -webkit-text-stroke: 0; text-shadow: none; }
.music-gesture-hint { gap: 7px; font: 600 12px/1.65 var(--sans); white-space: nowrap; }
.music-gesture-hint>span { color: #d93440; font-size: 18px; }
.music-lyric-peek:focus-visible,.music-gesture-hint:focus-visible { outline: 2px solid #d93440; outline-offset: 3px; }
.music-reactions { position: absolute; right: -5px; bottom: 35px; z-index: -1; display: none; width: 32px; height: 105px; pointer-events: none; user-select: none; }
.music-reactions i { --heart-drift: 6px; position: absolute; bottom: 0; left: 8px; display: block; color: #f24559; font: normal 17px/1 var(--sans); opacity: 0; text-shadow: 0 1px 3px #fffcf4cc; }
.music-reactions i:nth-child(2) { --heart-drift: -8px; color: #f283a2; font-size: 12px; animation-delay: -.8s; }
.music-reactions i:nth-child(3) { --heart-drift: 9px; color: #f8b0bb; font-size: 14px; animation-delay: -1.6s; }
.music-reactions i:nth-child(4) { --heart-drift: -5px; color: #ee635d; font-size: 11px; animation-delay: -2.4s; }
.music-dock[data-music-state=playing][data-lyrics-visible=true] .music-reactions { display: block; }
.music-dock[data-music-state=playing][data-lyrics-visible=true] .music-reactions i { animation-name: music-heart-rise; animation-duration: 3.2s; animation-timing-function: ease-out; animation-iteration-count: infinite; }
body:has(dialog[open]) .music-reactions i { animation-play-state: paused; }
.music-dock[data-music-state=loading] .music-launcher { animation: music-buffer 1s ease-in-out infinite alternate; }
.music-dock[data-music-state=error] .music-launcher { border-color: #fff3dd; }
.home-booting .music-dock, body:has(#invite:is([data-home-motion=waiting],[data-home-motion=revealing])) .music-dock, body:has(dialog[open]) .music-dock { visibility: hidden; pointer-events: none; }
.music-player-dialog { --music-cream: #fff3dd; position: fixed; inset: 0; width: 100%; max-width: none; height: 100svh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: var(--music-cream); background: #641f2f; overflow: auto; overscroll-behavior: contain; color-scheme: dark; }
.music-player-dialog::backdrop { background: #451421; backdrop-filter: blur(8px); }
.music-player-dialog[open] { animation: music-room-open .38s cubic-bezier(.2,.8,.2,1) both; }
.music-player-dialog::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 32% 20%,#a54a3f55,transparent 65%), linear-gradient(165deg,#7e2936 0%,#4d1b2a 85%); }
.music-player-shell { position: relative; width: min(100%, 520px); min-height: 640px; height: 100%; margin: 0 auto; padding: env(safe-area-inset-top) 26px calc(15px + env(safe-area-inset-bottom)); display: grid; grid-template-rows: 58px auto minmax(120px,1fr) auto; }
.music-player-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #edc9b6; }
.music-player-header>span:first-of-type { font: 12px/1.5 var(--sans); letter-spacing: .18em; }
.music-edition { width: 44px; text-align: right; font: 12px/1.5 Georgia,serif; letter-spacing: .08em; }
.music-player-dialog button:focus-visible, .music-player-dialog input:focus-visible { outline: 2px solid #f3d1af; outline-offset: 4px; }
.music-icon-button { width: 44px; height: 44px; display: grid; place-items: center; padding: 10px; color: #fff3dd; }
.music-icon-button svg, .music-secondary-control svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.music-player-album { display: flex; flex-direction: column; align-items: center; padding: 8px 0 12px; }
.music-record-stage { position: relative; width: 190px; height: 182px; display: grid; place-items: center; }
.music-vinyl-large { width: 176px; border-width: 2px; box-shadow: 0 10px 25px #210f2040,inset 0 0 0 7px #120e1233; }
.music-vinyl-large .music-record-label { border-width: 3px; }
.music-record-arm { position: absolute; top: 3px; right: -8px; width: 44px; height: 96px; border-right: 3px solid #e1bc94; border-bottom: 3px solid #e1bc94; border-radius: 0 0 15px 0; transform: rotate(-24deg); transform-origin: 100% 0; transition: transform .7s ease; filter: drop-shadow(0 3px 2px #140d2040); }
.music-record-arm::before { content: ''; position: absolute; right: -8px; top: -4px; width: 12px; height: 12px; border: 2px solid #e5caa4; border-radius: 50%; background: #87434b; }
.music-record-arm::after { content: ''; position: absolute; bottom: -5px; left: -5px; width: 19px; height: 8px; border-radius: 3px; background: #e4b98f; }
.music-player-dialog[data-music-state=playing] .music-record-arm { transform: rotate(0deg); }
.music-track-heading { margin-top: 18px; text-align: center; }
.music-track-kicker { font: 9px/1.5 var(--sans); letter-spacing: .24em; color: #e0b69f; }
.music-track-heading h2 { margin: 7px 0 8px; font: 400 clamp(23px,6.4vw,29px)/1.4 var(--serif); letter-spacing: .05em; }
.music-track-heading p { font: 11px/1.6 var(--sans); color: #e0b7a8; letter-spacing: .07em; }
.music-track-heading p span { margin: 0 5px; color: #bc8b7c; }
.music-lyrics-window { min-height: 0; position: relative; margin: 8px -4px 0; mask-image: linear-gradient(transparent,#000 15%,#000 82%,transparent); -webkit-mask-image: linear-gradient(transparent,#000 15%,#000 82%,transparent); }
.music-lyrics { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 65px 8px; scroll-padding-block: 45%; touch-action: pan-y pinch-zoom; }
.music-lyrics::-webkit-scrollbar { display: none; }
.music-lyrics button { display: block; width: 100%; min-height: 52px; padding: 12px 0; color: #d7a69a; font: 400 15px/1.85 var(--sans); letter-spacing: .015em; text-align: center; transition: color .4s,opacity .4s,transform .4s; transform-origin: center; opacity: .65; }
.music-lyrics button:disabled { opacity: .65; }
.music-lyrics button.is-current { color: #fff4df; font-weight: 600; opacity: 1; transform: scale(1.06); text-shadow: 0 0 20px #ffd4ae22; }
.music-player-controls { padding-top: 16px; }
.music-seek { --music-progress: 0%; display: block; width: 100%; height: 24px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; touch-action: pan-y; }
.music-seek::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right,#efd1ae var(--music-progress),#d5a19d40 var(--music-progress)); }
.music-seek::-moz-range-track { height: 3px; border-radius: 3px; background: #d5a19d40; }
.music-seek::-moz-range-progress { height: 3px; background: #efd1ae; }
.music-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; margin-top: -4px; background: #fff0d5; box-shadow: 0 0 0 5px #fff0d50d; }
.music-seek::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: #fff0d5; }
.music-seek:disabled { cursor: default; opacity: .5; }
.music-time { display: flex; justify-content: space-between; color: #dfb6a5; font: 10px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
.music-transport { display: flex; justify-content: space-evenly; align-items: center; padding: 12px 0 14px; gap: 28px; }
.music-main-play { width: 64px; height: 64px; flex: 0 0 64px; display: grid; place-items: center; padding: 17px; border-radius: 50%; color: #682333; background: #ffefd6; box-shadow: 0 5px 20px #2a112426; transition: transform .2s,background .2s; }
.music-main-play:active { transform: scale(.93); background: #f4d6b0; }
.music-main-play>svg { width: 29px; height: 29px; fill: currentColor; stroke: none; }
.music-secondary-control { width: 66px; min-height: 54px; padding: 3px; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #efd0b6; }
.music-secondary-control>span:last-child { font: 10px/1.4 var(--sans); letter-spacing: .04em; }
.music-lyric-symbol { display: grid; place-items: center; width: 24px; height: 24px; font: 15px/1 var(--serif); border: 1px solid currentColor; border-radius: 5px; }
#music-lyrics-toggle[aria-pressed=false] { opacity: .5; }
.music-player-bottom { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 20px; font: 10px/1.5 var(--sans); color: #cda094; }
.music-player-bottom>span:first-child { display: inline-flex; align-items: center; flex-shrink: 0; gap: 5px; }
.music-player-bottom svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#music-player-status { text-align: right; }
.music-player-dialog[data-music-state=loading] .music-main-play { animation: music-buffer .8s ease-in-out infinite alternate; }
@keyframes music-record-spin { to { transform: rotate(360deg); } }
@keyframes music-heart-rise { 0% { transform: translate(0, 0) scale(.5) rotate(-8deg); opacity: 0; } 18% { opacity: .8; } 55% { opacity: .65; } 100% { transform: translate(var(--heart-drift), -96px) scale(1.05) rotate(12deg); opacity: 0; } }
@keyframes music-buffer { from { opacity: .5; } to { opacity: 1; } }
@keyframes music-dock-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes music-room-open { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@media (max-height: 740px) and (max-width: 699px) {
  .music-player-shell { grid-template-rows: 50px auto minmax(110px,1fr) auto; min-height: 550px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .music-record-stage { height: 132px; width: 144px; }
  .music-vinyl-large { width: 128px; }
  .music-record-arm { height: 70px; width: 33px; right: -5px; }
  .music-player-album { padding-top: 3px; padding-bottom: 4px; }
  .music-track-heading { margin-top: 10px; }
  .music-track-heading h2 { font-size: 23px; margin: 4px 0; }
  .music-track-kicker { display: none; }
  .music-player-controls { padding-top: 8px; }
  .music-transport { padding: 8px 0; }
  .music-main-play { width: 56px; height: 56px; flex-basis: 56px; }
  .music-lyrics button { min-height: 46px; padding: 10px 0; font-size: 14px; }
}
@media (min-width: 700px) {
  .music-player-shell { width: min(100%,1080px); padding: 24px 52px 30px; min-height: 570px; grid-template-columns: 1fr 1.15fr; grid-template-rows: 54px minmax(240px,1fr) auto; column-gap: 60px; }
  .music-player-header { grid-column: 1 / -1; }
  .music-player-album { grid-column: 1; grid-row: 2; justify-content: center; }
  .music-record-stage { width: 282px; height: 274px; }
  .music-vinyl-large { width: 260px; }
  .music-record-arm { width: 66px; height: 140px; right: 0; }
  .music-track-heading { margin-top: 26px; }
  .music-track-heading h2 { font-size: 30px; }
  .music-track-heading p { font-size: 12px; }
  .music-lyrics-window { grid-column: 2; grid-row: 2 / 4; margin: 45px 0 30px; }
  .music-lyrics { padding: 42% 10px; }
  .music-lyrics button { font-size: 18px; min-height: 72px; padding: 18px 0; }
  .music-player-controls { grid-column: 1; grid-row: 3; }
}
@media (max-width: 360px) {
  .music-dock { right: 10px; }
  [data-music-lyric-current] { font-size: 12px; }
  .music-player-shell { padding-inline: 20px; }
  .music-lyrics button { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .music-dock, .music-vinyl, .music-player-dialog[open], .music-main-play, .music-launcher { animation: none !important; }
  .music-dock .music-reactions { display: none !important; }
  .music-lyrics button, .music-lyric-peek::after, .music-record-arm { transition: none; }
  .music-lyrics button.is-current { transform: none; }
}