.song-widget {
  --song-progress: 0%;
  position: fixed;
  z-index: 100;
  right: 20px;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 248px;
  max-width: calc(100vw - 24px);
  color: #f7f6f3;
  font: 400 14px/1.4 Instrument, Arial, sans-serif;
}
.song-widget[hidden], .song-widget [hidden] { display: none !important; }
.song-panel {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 28px;
  grid-template-areas: 'play title close' 'play timeline close' 'status status status';
  align-items: center;
  column-gap: 10px;
  padding: 7px 8px 7px 9px;
  border: 1px solid #ffffff26;
  border-radius: 10px;
  background: #171717f7;
  box-shadow: 0 4px 20px #0003;
}
.song-play {
  grid-area: play;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: #e21720;
  color: #fff;
}
.song-play:hover { background: #f12731; }
.song-play svg { width: 18px; height: 18px; }
.song-play .song-icon-pause, .song-widget.is-playing .song-icon-play { display: none; }
.song-widget.is-playing .song-icon-pause { display: block; }
.song-panel h2 {
  grid-area: title;
  align-self: end;
  margin: 0;
  font: 500 13px/1.4 Instrument, Arial, sans-serif;
  letter-spacing: 0;
  color: #f7f6f3;
  white-space: nowrap;
}
.song-close { grid-area: close; display: grid; place-items: center; width: 28px; height: 36px; padding: 5px; color: #aaa7a3; background: transparent; border: 0; border-radius: 5px; }
.song-close:hover { color: #fff; }
.song-close svg { width: 16px; height: 16px; }
.song-timeline { grid-area: timeline; position: relative; height: 16px; }
.song-timeline::before { content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 2px; border-radius: 2px; background: linear-gradient(to right, #ff3b43 var(--song-progress), #ffffff30 var(--song-progress)); }
.song-seek { appearance: none; -webkit-appearance: none; position: absolute; inset: 0; width: 100%; height: 16px; margin: 0; padding: 0; background: transparent; border: 0; cursor: pointer; }
.song-seek::-webkit-slider-runnable-track { height: 2px; background: transparent; }
.song-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 6px; height: 6px; margin-top: -2px; border: 0; border-radius: 50%; background: #ff3b43; }
.song-seek::-moz-range-track { height: 2px; background: transparent; }
.song-seek::-moz-range-thumb { width: 6px; height: 6px; border: 0; border-radius: 50%; background: #ff3b43; }
.song-seek:focus-visible { outline-offset: 2px; border-radius: 2px; }
.song-status { grid-area: status; margin: 7px 0 0; font-size: 12px; color: #e1deda; }
.song-launcher { display: grid; place-items: center; margin-left: auto; width: 40px; height: 40px; padding: 10px; border: 1px solid #ffffff30; border-radius: 50%; background: #171717f7; color: #ff3b43; box-shadow: 0 4px 16px #0003; }
.song-launcher svg { width: 18px; height: 18px; }
.song-launcher:hover { border-color: #ff3b43; }
.menu-open .song-widget { visibility: hidden; }
@media (max-width: 600px) { .song-widget { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); } }