#room-soundtrack { position: relative; color: #f5efdf; width: 100%; }
.soundtrack-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px 8px; min-height: 76px; }
.soundtrack-copy { flex: 1; min-width: 0; }
.soundtrack-label { display: block; font-size: 12px; color: #cdb58d; margin-bottom: 3px; }
.soundtrack-title { font: 23px/1.05 var(--serif); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soundtrack-artist { display: block; font-size: 12px; color: #cabbA5; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soundtrack-bar button { padding: 6px; min-width: 38px; min-height: 44px; border-radius: 50%; }
.soundtrack-bar #soundtrack-toggle { flex-shrink: 0; width: 52px; height: 52px; border: 1px solid #d4b68280; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
#soundtrack-symbol { font-size: 14px; }
#soundtrack-action { font-size: 12px; }
#soundtrack-next { font-size: 25px; }
#soundtrack-next[data-album="true"] { font-size: 12px; border-radius: 8px; }
.soundtrack-bar #soundtrack-details { flex-shrink: 0; width: 64px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; line-height: 1.2; }
#soundtrack-details-label { max-width: 42px; }
.soundtrack-caret { font-size: 18px; line-height: 12px; }
#soundtrack-details[aria-expanded="true"] .soundtrack-caret { transform: rotate(180deg); }
#soundtrack-details[aria-expanded="true"] { background: #d4b68220; }
.soundtrack-bar button:hover { background: #d4b68220; }
.soundtrack-meter { display: flex; align-items: center; gap: 3px; width: 21px; height: 26px; }
.soundtrack-meter i { width: 3px; height: 18px; background: #d9be84; transform: scaleY(.2); transform-origin: bottom; border-radius: 2px; animation: meter .85s ease-in-out infinite alternate; animation-play-state: paused; }
.soundtrack-meter i:nth-child(2) { animation-delay: -.5s; }
.soundtrack-meter i:nth-child(3) { animation-delay: -.2s; }
.soundtrack-meter i:nth-child(4) { animation-delay: -.7s; }
body[data-soundtrack-state="playing"] .soundtrack-meter i { animation-play-state: running; }
body:not([data-soundtrack-state="playing"]) .soundtrack-meter { opacity: .35; }
.soundtrack-progress { height: 2px; margin: 0 14px; background: #d4b68223; overflow: hidden; }
.soundtrack-progress span { display: block; height: 100%; width: 0; background: #d9be84; transition: width .2s linear; }
#soundtrack-player { position: absolute; bottom: calc(100% + 8px); right: 0; width: min(360px,100%); padding: 0 10px 4px; background: #211a14; border: 1px solid #d4b68250; border-radius: 14px; box-shadow: 0 -8px 50px #0006; max-height: min(360px,calc(100dvh - 220px)); overflow: auto; overscroll-behavior: contain; }
.soundtrack-player-heading { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; min-height: 44px; background: #211a14; color: #cdb58d; font-size: 12px; }
#soundtrack-hide { min-height: 44px; padding: 8px 4px 8px 12px; display: flex; gap: 8px; align-items: center; color: #f5efdf; font-size: 12px; }
#soundtrack-hide:hover { color: #d9be84; }
#soundtrack-hide:focus-visible, #soundtrack-details:focus-visible { outline: 2px solid #d9be84; outline-offset: -2px; }
#soundtrack-player iframe { display: block; width: 100%; border: 0; border-radius: 10px; }
#soundtrack-link { display: inline-block; margin: 2px 4px; font-size: 12px; padding: 8px 0; text-decoration: underline; text-underline-offset: 4px; }
.soundtrack-note { font-size: 12px; line-height: 1.5; color: #e5d7bf; margin: 0 4px 8px; }
@keyframes meter { from { transform: scaleY(.22); } to { transform: scaleY(1); } }
@media (max-width: 650px) {
  .soundtrack-bar { gap: 8px; padding: 8px; min-height: 76px; }
  .soundtrack-bar #soundtrack-toggle { width: 46px; height: 48px; }
  .soundtrack-title { font-size: 21px; }
  .soundtrack-bar #soundtrack-next, .soundtrack-bar #soundtrack-details { min-width: 34px; }
  .soundtrack-meter { width: 15px; gap: 2px; }
  .soundtrack-meter i { width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-soundtrack-state="playing"] .soundtrack-meter i { transform: scaleY(.7); }
}