.music-player {
  position: fixed;
  top: clamp(72px, 12vh, 124px);
  left: clamp(320px, 43vw, 720px);
  z-index: 42;
  width: min(330px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid #746d78;
  color: #ece7ed;
  background: #100c12;
  box-shadow: none;
  font-family: var(--mono);
}

.music-player[hidden] { display: none; }

.music-player__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 31px;
  padding: 0 4px 0 10px;
  border-bottom: 1px solid #57505a;
  background: #211a23;
  cursor: move;
  user-select: none;
}

.music-player__bar h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font: 700 10px/1 var(--mono);
  letter-spacing: .02em;
}

.music-player__bar h2 i { width: 5px; height: 5px; background: #cf367f; }

.music-player__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  image-rendering: auto;
}

.music-player__meta {
  display: grid;
  gap: 3px;
  padding: 11px 12px 8px;
}

.music-player__meta strong { font-size: 11px; letter-spacing: .05em; }
.music-player__meta small { color: #8f8792; font-size: 7px; letter-spacing: .06em; }

.music-player__controls {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 12px 12px;
}

.music-player__play {
  width: 28px;
  height: 25px;
  padding: 0;
  border: 1px solid #68616b;
  color: #e7e2e8;
  background: #18131a;
  cursor: pointer;
}

.music-player__play:hover { border-color: #75f4f0; color: #75f4f0; }

.music-player input[type="range"] {
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.music-player input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid #77717a;
  background: linear-gradient(to right, #ff2c9c 0 var(--music-progress, 0%), #211a23 var(--music-progress, 0%) 100%);
}

.music-player input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 1px solid #ece7ed;
  border-radius: 50%;
  background: #ff2c9c;
}

.music-player input[type="range"]::-moz-range-track {
  height: 5px;
  border: 1px solid #77717a;
  background: linear-gradient(to right, #ff2c9c 0 var(--music-progress, 0%), #211a23 var(--music-progress, 0%) 100%);
}

.music-player input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 1px solid #ece7ed;
  border-radius: 50%;
  background: #ff2c9c;
}

.music-player output { color: #d8d2d9; font-size: 9px; font-weight: 700; white-space: nowrap; }

.music-player__error {
  margin: -5px 12px 10px;
  color: #ff2c9c;
  font-size: 7px;
  letter-spacing: .08em;
}

.taskbar__tray { display: flex; align-items: center; margin-left: auto; }

.taskbar__sound {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #514a55;
  color: #d8d2d9;
  background: #18131a;
  cursor: pointer;
}

.taskbar__sound:hover { border-color: #75f4f0; color: #75f4f0; }
.taskbar__sound svg { width: 16px; height: 16px; }
.sound-icon__speaker, .sound-icon__wave { fill: currentColor; stroke: none; }
.sound-icon__mute { display: none; fill: none; stroke: currentColor; stroke-width: 2; }
.taskbar__sound[aria-pressed="true"] .sound-icon__wave { display: none; }
.taskbar__sound[aria-pressed="true"] .sound-icon__mute { display: block; }

@media (max-width: 760px) {
  .music-player { top: 60px; left: 12px; width: min(330px, calc(100vw - 24px)); }
}