.qs-audio.qs-audio.qs-audio.qs-audio {
  --qs-lime: #D9FB3E;
  --qs-blue: #93B1FB;
  --qs-hover: #4B53AF;
  --qs-card: #14132B;
  --qs-panel: #1E1D3F;
  --qs-text: #F2F2F7;
  --qs-muted: #9B99C2;
  --qs-green: #2FCB71;
  --qs-red: #E5484D;
  --qs-radius-card: 24px;
  --qs-radius-ctrl: 16px;
  --qs-radius-sm: 12px;
  --qs-track: rgba(147, 177, 251, 0.18);
  --qs-buffer: rgba(242, 242, 247, 0.20);
  --qs-border: rgba(147, 177, 251, 0.14);

  box-sizing: border-box;
  width: 100%;
  max-width: var(--qs-max-width, none);
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-areas: "play cur seek dur opts";
  align-items: center;
  column-gap: 14px;
  padding: 16px 18px;
  background: var(--qs-card);
  border: 1px solid var(--qs-border);
  border-radius: var(--qs-radius-card);
  box-shadow: none;
  color: var(--qs-text);
  line-height: 1.4;
  -webkit-user-select: none;
  user-select: none;
}

.qs-audio.qs-audio.qs-audio.qs-audio button,
.qs-audio.qs-audio.qs-audio.qs-audio div,
.qs-audio.qs-audio.qs-audio.qs-audio span {
  all: revert;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.qs-audio.qs-audio.qs-audio.qs-audio *,
.qs-audio.qs-audio.qs-audio.qs-audio *::before,
.qs-audio.qs-audio.qs-audio.qs-audio *::after { box-sizing: border-box; }
.qs-audio.qs-audio.qs-audio.qs-audio button,
.qs-audio.qs-audio.qs-audio.qs-audio [role="slider"] { -webkit-tap-highlight-color: transparent; }

.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__media { display: none; }

.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__play {
  grid-area: play;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--qs-lime);
  color: var(--qs-card);
  cursor: pointer;
  font: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__play .qs-audio__ic,
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__mute .qs-audio__ic {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.62);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__play .qs-audio__ic { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__mute .qs-audio__ic { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__play .qs-audio__ic--play,
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__mute .qs-audio__ic--vol-on {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__play:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 7px rgba(217, 251, 62, 0.16);
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__play:active { transform: scale(0.97); }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__play:focus { outline: none; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__play:focus-visible { outline: 3px solid var(--qs-blue); outline-offset: 3px; }
.qs-audio.qs-audio.qs-audio.qs-audio.is-playing .qs-audio__play .qs-audio__ic--play {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.62);
}
.qs-audio.qs-audio.qs-audio.qs-audio.is-playing .qs-audio__play .qs-audio__ic--pause {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__time {
  font-size: 0.82em;
  color: var(--qs-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__time--current { grid-area: cur; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__time--duration { grid-area: dur; }

.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__seek {
  grid-area: seek;
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__seek-track {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--qs-track);
  transition: box-shadow .15s ease;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__seek-buffer,
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__seek-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__seek-buffer { width: 0%; background: var(--qs-buffer); }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__seek-fill { width: 0%; background: var(--qs-lime); overflow: hidden; }
.qs-audio.qs-audio.qs-audio.qs-audio.is-playing .qs-audio__seek-fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80px;
  width: 80px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
  animation: qs-audio-sheen 3s ease-in-out infinite;
}
@keyframes qs-audio-sheen {
  0% { left: -80px; }
  60%, 100% { left: 100%; }
}
@keyframes qs-audio-playhead {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 251, 62, 0.28), 0 2px 7px rgba(6, 5, 20, 0.55); }
  55% { box-shadow: 0 0 0 6px rgba(217, 251, 62, 0), 0 2px 7px rgba(6, 5, 20, 0.55); }
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__seek-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--qs-lime);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 7px rgba(6, 5, 20, 0.55);
  transition: width .12s ease, height .12s ease, box-shadow .15s ease;
  pointer-events: none;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__seek:hover .qs-audio__seek-thumb,
.qs-audio.qs-audio.qs-audio.qs-audio.is-seeking .qs-audio__seek-thumb { width: 18px; height: 18px; }
.qs-audio.qs-audio.qs-audio.qs-audio.is-playing .qs-audio__seek-thumb { animation: qs-audio-playhead 2.4s ease-out infinite; }
.qs-audio.qs-audio.qs-audio.qs-audio.is-seeking .qs-audio__seek-thumb { animation: none; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__seek:hover .qs-audio__seek-thumb {
  box-shadow: 0 0 0 6px rgba(217, 251, 62, 0.16), 0 2px 7px rgba(6, 5, 20, 0.55);
  animation: none;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__seek:focus { outline: none; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__seek:focus-visible .qs-audio__seek-track { box-shadow: 0 0 0 3px var(--qs-blue); }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__seek:focus-visible .qs-audio__seek-thumb { width: 18px; height: 18px; }

.qs-audio.qs-audio.qs-audio.qs-audio--has-actions {
  grid-template-columns: auto auto 1fr auto auto auto;
  grid-template-areas: "play cur seek dur act opts";
}

.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__actions {
  grid-area: act;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: background-color .15s ease;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action .qs-audio__ic {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.62);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action .qs-audio__ic--add {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action .qs-audio__ic path { fill: var(--qs-blue); }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action:hover { background: var(--qs-lime); }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action:hover .qs-audio__ic path { fill: var(--qs-card); }

.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action::after {
  content: attr(data-qs-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 6px 10px;
  border-radius: var(--qs-radius-sm);
  background: var(--qs-panel);
  border: 1px solid var(--qs-border);
  color: var(--qs-text);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events: none;
  z-index: 4;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action[aria-pressed="true"]::after {
  content: attr(data-qs-tip-pressed);
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action:hover::after,
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action:focus { outline: none; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action:focus-visible { outline: 3px solid var(--qs-blue); outline-offset: 2px; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action[aria-pressed="true"] .qs-audio__ic--add {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.62);
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action[aria-pressed="true"] .qs-audio__ic--added {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action[aria-pressed="true"] { background: var(--qs-lime); }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action[aria-pressed="true"] .qs-audio__ic--added path {
  fill: var(--qs-card);
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action[aria-busy="true"] { opacity: 0.55; cursor: default; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action.is-error { background: var(--qs-red); }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action.is-error .qs-audio__ic path { fill: var(--qs-text); }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__action.is-error::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  border-color: var(--qs-red);
}

.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__opts { grid-area: opts; position: relative; display: inline-flex; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__opts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: background-color .15s ease;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__opts-btn svg { width: 22px; height: 22px; display: block; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__opts-btn:hover,
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__opts-btn[aria-expanded="true"] { background: var(--qs-hover); }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__opts-btn:hover svg rect,
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__opts-btn:hover svg circle,
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__opts-btn[aria-expanded="true"] svg rect,
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__opts-btn[aria-expanded="true"] svg circle { fill: var(--qs-text); }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__opts-btn:focus { outline: none; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__opts-btn:focus-visible { outline: 3px solid var(--qs-blue); outline-offset: 2px; }

.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: max-content;
  min-width: 208px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 14px;
  background: var(--qs-panel);
  border: 1px solid var(--qs-border);
  border-radius: var(--qs-radius-ctrl);
  box-shadow: 0 16px 36px rgba(6, 5, 20, 0.55);
  display: grid;
  gap: 12px;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__row { display: flex; align-items: center; gap: 10px; }

.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__mute {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--qs-card);
  cursor: pointer;
  font: inherit;
  transition: background-color .15s ease;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__mute:hover { background: var(--qs-hover); }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__mute:hover .qs-audio__spk { fill: var(--qs-text); }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__mute:hover .qs-audio__wave { stroke: var(--qs-text); }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__mute:focus { outline: none; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__mute:focus-visible { outline: 3px solid var(--qs-blue); outline-offset: 2px; }
.qs-audio.qs-audio.qs-audio.qs-audio.is-muted .qs-audio__mute .qs-audio__ic--vol-on {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.62);
}
.qs-audio.qs-audio.qs-audio.qs-audio.is-muted .qs-audio__mute .qs-audio__ic--vol-off {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__vol {
  position: relative;
  flex: 1 1 auto;
  height: 28px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__vol-track {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--qs-track);
  transition: box-shadow .15s ease;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__vol-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--qs-blue);
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__vol-thumb {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--qs-blue);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 7px rgba(6, 5, 20, 0.55);
  transition: width .12s ease, height .12s ease;
  pointer-events: none;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__vol:hover .qs-audio__vol-thumb { width: 18px; height: 18px; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__vol:focus { outline: none; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__vol:focus-visible .qs-audio__vol-track { box-shadow: 0 0 0 3px var(--qs-blue); }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__vol:focus-visible .qs-audio__vol-thumb { width: 18px; height: 18px; }
.qs-audio.qs-audio.qs-audio.qs-audio.is-muted .qs-audio__vol-fill,
.qs-audio.qs-audio.qs-audio.qs-audio.is-muted .qs-audio__vol-thumb { background: var(--qs-muted); }

.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__row--speed {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--qs-border);
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__row-label {
  font-size: clamp(0.64rem, 0.66em, 0.78rem);
  color: var(--qs-muted);
  letter-spacing: 0.03em;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__speeds { display: flex; gap: 6px; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__speed {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: var(--qs-card);
  color: var(--qs-muted);
  cursor: pointer;
  font: inherit;
  font-size: clamp(0.7rem, 0.72em, 0.85rem);
  line-height: 1;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__speed:hover { background: var(--qs-hover); color: var(--qs-text); }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__speed:focus { outline: none; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__speed:focus-visible { outline: 3px solid var(--qs-blue); outline-offset: 2px; }
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__speed[aria-pressed="true"] {
  background: var(--qs-lime);
  color: var(--qs-card);
  font-weight: 600;
}
.qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__speed[aria-pressed="true"]:hover {
  background: var(--qs-lime);
  color: var(--qs-card);
}

@media (max-width: 480px) {
  .qs-audio.qs-audio.qs-audio.qs-audio {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "play . opts"
      "cur seek dur";
    row-gap: 14px;
    column-gap: 12px;
  }
  .qs-audio.qs-audio.qs-audio.qs-audio--has-actions {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "play act opts"
      "cur seek dur";
  }
  .qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__actions { justify-self: end; }
  .qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__panel { bottom: auto; top: calc(100% + 12px); }
  .qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__speeds { flex-wrap: wrap; }
  .qs-audio.qs-audio.qs-audio.qs-audio .qs-audio__speed { flex: 1 1 calc(50% - 3px); }
}

@media (prefers-reduced-motion: reduce) {
  .qs-audio.qs-audio.qs-audio.qs-audio.qs-audio *,
  .qs-audio.qs-audio.qs-audio.qs-audio.qs-audio *::before,
  .qs-audio.qs-audio.qs-audio.qs-audio.qs-audio *::after { transition-duration: 0.001ms; }
  .qs-audio.qs-audio.qs-audio.qs-audio.qs-audio.is-playing .qs-audio__seek-fill::after,
  .qs-audio.qs-audio.qs-audio.qs-audio.qs-audio.is-playing .qs-audio__seek-thumb { animation: none; }
}