/* Scoped SoundCloud messenger. No fonts, images or other network resources. */
.cosmic-player {
  --cosmic-player-ready: 1;
  --cosmic-player-progress: 0;
  position: fixed;
  z-index: 75;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  color: #f5f0ff;
  font: 400 13px/1.45 Arial, Helvetica, sans-serif;
  isolation: isolate;
}
.cosmic-player, .cosmic-player * { box-sizing: border-box; }
.cosmic-player [hidden] { display: none !important; }
.cosmic-player button, .cosmic-player a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cosmic-player button { color: inherit; font: inherit; cursor: pointer; border: 0; margin: 0; }
.cosmic-player button:disabled { cursor: default; opacity: .5; }
.cosmic-player :is(button, a):focus-visible { outline: 2px solid #a5ebf5; outline-offset: 4px; }
.cosmic-player__dock {
  position: relative;
  display: flex;
  align-items: center;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin-left: auto;
  overflow: hidden;
  border: 1px solid #c5a4ff66;
  border-radius: 18px 18px 5px 18px;
  background: linear-gradient(130deg, #272037, #0c101deF 65%);
  box-shadow: 0 8px 32px #0007, inset 0 1px #ffffff14;
  backdrop-filter: blur(18px);
}
.cosmic-player__dock::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, #b38cff19 43%, #8bd5ed12 50%, transparent 75%);
  background-size: 240% 100%;
}
.cosmic-player[data-state="playing"] .cosmic-player__dock::before { animation: cosmic-player-sheen 9s ease-in-out infinite alternate; }
.cosmic-player__dock::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ab78ed, #8de5ed);
  transform: scaleX(var(--cosmic-player-progress));
  transform-origin: left;
  pointer-events: none;
}
.cosmic-player__toggle { position: relative; display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 9px 17px 9px 13px; background: transparent; text-align: left; }
.cosmic-player__dock-copy { display: grid; gap: 1px; }
.cosmic-player__dock-name { font-size: 11px; letter-spacing: .03em; font-weight: 600; }
.cosmic-player__dock-label { color: #cdb8ee; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.cosmic-player__signal { display: flex; align-items: center; gap: 3px; width: 26px; height: 26px; }
.cosmic-player__signal i { display: block; width: 3px; height: 12px; background: #c19af5; border-radius: 3px; transform-origin: center; }
.cosmic-player__signal i:nth-child(2) { height: 22px; background: #a7dfeb; }
.cosmic-player__signal i:nth-child(3) { height: 17px; }
.cosmic-player__signal i:nth-child(4) { height: 8px; background: #a7dfeb; }
.cosmic-player[data-state="playing"] .cosmic-player__signal i { animation: cosmic-player-wave 1.8s ease-in-out infinite alternate; }
.cosmic-player[data-state="playing"] .cosmic-player__signal i:nth-child(2) { animation-delay: -.65s; }
.cosmic-player[data-state="playing"] .cosmic-player__signal i:nth-child(3) { animation-delay: -.3s; }
.cosmic-player[data-state="playing"] .cosmic-player__signal i:nth-child(4) { animation-delay: -.9s; }
.cosmic-player__icon-button { display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: #ffffff0a; }
.cosmic-player__pause { margin-right: 7px !important; }
.cosmic-player__pause-symbol { width: 13px; height: 15px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.cosmic-player__minus { width: 15px; height: 2px; background: currentColor; }
.cosmic-player__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(360px, calc(100vw - 32px - env(safe-area-inset-right)));
  max-height: calc(100vh - 110px - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 110px - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 17px;
  border: 1px solid #b797eb70;
  border-radius: 22px 22px 7px 22px;
  background: radial-gradient(ellipse at 0 0, #352044b8, transparent 50%), linear-gradient(135deg, #141521fa, #0a0c15fc);
  box-shadow: 0 18px 80px #0009, inset 0 1px #ffffff19;
  backdrop-filter: blur(22px);
  animation: cosmic-player-arrive .28s cubic-bezier(.2, .8, .2, 1) both;
}
.cosmic-player__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cosmic-player__eyebrow { display: block; color: #aecee1; text-transform: uppercase; letter-spacing: .18em; font-size: 9px; margin-bottom: 3px; }
.cosmic-player__title { margin: 0; color: #f5f0ff; font: 500 24px/1.12 Arial, Helvetica, sans-serif; letter-spacing: -.035em; }
.cosmic-player__track { margin: 14px 0 8px; color: #e3d5fb; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.cosmic-player__status { margin: 0 0 12px; font-size: 11px; color: #b9b7cb; line-height: 1.5; }
.cosmic-player__embed:empty { display: none; }
.cosmic-player__embed { overflow: hidden; background: #fff; border-radius: 8px; }
.cosmic-player__iframe { display: block; width: 100%; height: 300px; border: 0; background: #fff; }
.cosmic-player__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; }
.cosmic-player__disconnect, .cosmic-player__direct { display: inline-flex; align-items: center; min-height: 44px; background: none; padding: 4px 0; font-size: 11px !important; }
.cosmic-player__direct { color: #b6e7ee; text-decoration: underline; text-underline-offset: 4px; }
.cosmic-player__connect { width: 100%; min-height: 44px; border: 1px solid #ba9deb66 !important; border-radius: 9px; background: #a37cd722; padding: 10px 14px; }
.cosmic-player__privacy { margin: 3px 0 0; color: #aaa8bb; font-size: 10px; line-height: 1.6; }
.cosmic-player[data-hero="true"] { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px); }
.cosmic-player[data-hero="true"] .cosmic-player__panel { max-height: calc(100dvh - 174px - env(safe-area-inset-bottom)); }
.cosmic-player[data-motion="static"] *, .cosmic-player[data-motion="static"] ::before { animation-play-state: paused !important; }
.cosmic-player[data-motion="static"] .cosmic-player__panel { animation: none !important; opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .cosmic-player__dock { transition: border-color .25s ease, box-shadow .25s ease; }
  .cosmic-player__dock:hover { border-color: #c9adffb3; box-shadow: 0 9px 35px #0009, 0 0 24px #a574e01c; }
  .cosmic-player__icon-button:hover, .cosmic-player__connect:hover { background: #a37cd732; }
  .cosmic-player__direct:hover { color: #e1fbff; }
}
@media (max-width: 480px) {
  .cosmic-player__toggle { min-height: 52px; padding: 7px 12px; gap: 8px; }
  .cosmic-player__dock-name { font-size: 10px; }
  .cosmic-player__dock-label { font-size: 9px; }
  .cosmic-player__panel { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cosmic-player *, .cosmic-player ::before { animation: none !important; transition: none !important; }
}
@media print { .cosmic-player { display: none !important; } }
@keyframes cosmic-player-wave { from { transform: scaleY(.5); } to { transform: scaleY(1); } }
@keyframes cosmic-player-sheen { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes cosmic-player-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }