/* A small listening room inside the existing violet, mint and coral palette. */
.music-entry { margin: 16px 0 12px; min-width: 0; }
button.music-listen { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 66px; text-align: left; padding: 12px; border: 1px solid #cfc5ed; border-radius: 14px; background: linear-gradient(115deg,#f1ebff,#edf9f6); color: #31294f; cursor: pointer; box-shadow: none; }
button.music-listen:hover { border-color: #7953d3; background: linear-gradient(115deg,#e9dfff,#ddf5ee); transform: translateY(-1px); }
button.music-listen.is-current { border-color: #7045ed; box-shadow: 0 0 0 2px #7045ed18; }
.music-entry-copy { flex: 1; min-width: 0; }
.music-entry-copy small { display: block; font-size: .64rem; color: #685186; font-weight: 750; letter-spacing: .04em; margin-bottom: 4px; }
.music-entry-copy strong { display: block; font-size: .85rem; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; }
.music-image { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px; color: #756983; font-size: .69rem; line-height: 1.55; font-weight: 400; }
.music-duration { color: #605773; font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.music-entry-action { color: #7045ed; font-size: .9rem; min-width: 14px; }
.music-disclosure { display: block; font-size: .64rem; color: #756c87; line-height: 1.5; }
.music-entry > .music-disclosure { padding: 6px 2px 0; }
.music-signal { display: flex; align-items: center; gap: 3px; width: 25px; height: 25px; flex-shrink: 0; }
.music-signal i { background: #8056df; width: 3px; height: 9px; border-radius: 4px; }
.music-signal i:nth-child(2) { height: 21px; background: #478f86; }
.music-signal i:nth-child(3) { height: 15px; }
.music-signal i:nth-child(4) { height: 11px; background: #d47887; }
.is-playing .music-signal i { animation: music-breathe .85s ease-in-out infinite alternate; }
.music-signal i:nth-child(2) { animation-delay: -.3s; }
.music-signal i:nth-child(3) { animation-delay: -.6s; }
@keyframes music-breathe { to { transform: scaleY(.4); } }
.music-missing { font-size: .75rem; color: #736b83; margin: 16px 0; }
.music-invitation { display: flex; align-items: center; gap: 24px; padding: 23px 30px; margin: 0 0 26px; border: 1px solid #d7cff1; border-radius: 20px; background: radial-gradient(ellipse at 95% 10%,#d3f4e8,transparent 60%),linear-gradient(110deg,#f0e7ff,#fbf9ff); }
.music-invitation small { color: #6c4c9d; font-size: .75rem; font-weight: 750; letter-spacing: .07em; }
.music-invitation h2 { margin: 5px 0 7px; color: #34274d; font-size: clamp(1.1rem,2vw,1.5rem); line-height: 1.3; }
.music-invitation p { margin: 0; font-size: .85rem; color: #635a75; max-width: 740px; }
.music-orbit { display: grid; place-items: center; flex-shrink: 0; width: 66px; height: 66px; border-radius: 50%; color: #eee2ff; font-size: 2rem; background: repeating-radial-gradient(circle,#39304e 0 3px,#4b3d63 4px 5px); box-shadow: 5px 5px 0 #8a6ec926; }
.music-player[hidden] { display: none !important; }
.music-player { position: fixed; z-index: 100; bottom: max(16px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(900px,calc(100% - 32px)); box-sizing: border-box; padding: 16px 20px 12px; border: 1px solid #b8aad3; border-radius: 24px; background: #fffcfff5; backdrop-filter: blur(20px); color: #302641; box-shadow: 0 12px 55px #25144033,0 1px 5px #25144015; }
body.has-music-player { padding-bottom: 220px; scroll-padding-bottom: 220px; }
html:has(.has-music-player) { scroll-padding-bottom: 220px; }
.music-player-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.music-disc { display: grid; position: relative; overflow: hidden; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; color: #e0ceff; background: repeating-radial-gradient(circle,#3c2d55 0 4px,#504064 5px 6px); font-size: 1.4rem; }
#music-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#music-art[hidden] { display: none; }
.music-now { flex: 1; min-width: 0; }
.music-now a { display: block; font-size: .72rem; font-weight: 650; color: #71617e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.music-now a:hover { text-decoration: underline; }
.music-now strong { display: block; font-size: .94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.7; }
#music-state { display: block; font-size: .65rem; color: #776c85; }
.music-player button { display: grid; place-items: center; flex-shrink: 0; min-width: 38px; min-height: 38px; padding: 6px; border: 0; border-radius: 50%; background: #f0ebf7; color: #5d427c; font: inherit; cursor: pointer; }
.music-player button:hover { background: #e5daf7; }
.music-player button.music-primary { background: #7045ed; color: white; width: 45px; height: 45px; }
.music-player button:disabled { opacity: .35; cursor: default; }
.music-player :is(button,input,summary,a):focus-visible,.music-listen:focus-visible { outline: 3px solid #e98251; outline-offset: 4px; }
.music-seek { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: .7rem; font-variant-numeric: tabular-nums; }
.music-player input[type=range] { accent-color: #8053d6; cursor: pointer; height: 24px; padding: 0; border: none; box-shadow: none; margin: 0; }
#music-progress { flex: 1; min-width: 0; }
.music-player-bottom { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
.music-player-bottom > .music-disclosure { flex: 1; }
.music-volume { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .65rem; color: #776c85; }
#music-volume { width: 72px; }
#music-details summary { color: #6f538c; font-size: .7rem; cursor: pointer; white-space: nowrap; }
.music-detail-panel { position: absolute; bottom: calc(100% + 12px); right: 0; width: min(430px,100%); box-sizing: border-box; max-height: 45vh; overflow: auto; padding: 22px; border: 1px solid #d2c3e5; border-radius: 18px; background: #fffcff; box-shadow: 0 10px 40px #25144026; font-size: .8rem; line-height: 1.7; overflow-wrap: anywhere; }
.music-detail-panel p { margin: 0 0 10px; }
#music-version { font-size: .67rem; }
.music-player button.music-share { font-size: .7rem; border-radius: 8px; padding: 6px 9px; min-height: 32px; white-space: nowrap; }
.music-link-label { display: block; font-size: .7rem; margin-bottom: 12px; }
#music-share-link { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; font-size: .72rem; padding: 8px; }
.music-player.is-collapsed { width: min(520px,calc(100% - 32px)); padding: 10px 14px; }
.music-player.is-collapsed .music-expanded,.music-player.is-collapsed #music-next,.music-player.is-collapsed #music-state { display: none; }
@media (max-width: 600px) {
  .music-invitation { gap: 14px; padding: 20px 16px; }
  .music-orbit { width: 48px; height: 48px; }
  .music-player { width: calc(100% - 16px); padding: 12px; border-radius: 18px; bottom: max(8px,env(safe-area-inset-bottom)); }
  .music-player-main { gap: 5px; }
  .music-disc { display: none; }
  .music-now strong { font-size: .84rem; }
  .music-player button { min-width: 36px; min-height: 40px; }
  .music-player button.music-primary { width: 42px; height: 42px; }
  .music-player-bottom { flex-wrap: wrap; gap: 6px 14px; }
  .music-player-bottom > .music-disclosure { flex-basis: 100%; font-size: .6rem; }
  #music-details { margin-left: auto; }
  .music-volume { flex: 1; }
  #music-volume { width: 90px; }
}
@media (prefers-reduced-motion: reduce) { .is-playing .music-signal i { animation: none; } button.music-listen:hover { transform: none; } }