.vertical-audio-player { display:flex; align-items:center; gap:1rem; }
.vertical-audio-player audio { display:none; }

/* use the custom properties from the inline style */
.vap-bar {
  position:relative; width:6px; height:100%;
  background: var(--vap-track-color);
}
.vap-progress {
  position:absolute; bottom:0; width:100%; height:0;
  background: var(--vap-progress-color);
}

/* button styling */
.vap-controls button {
  background: var(--vap-button-bg-color);
  color: var(--vap-button-text-color);
  border: var(--vap-button-border-w) solid var(--vap-button-border-color);
  padding:0.4em 0.8em; cursor:pointer; border-radius:3px;
}

/* volume slider track & thumb */
.vap-volume-slider {
  -webkit-appearance:none;
  width:5rem; height:0.5rem;
  background: var(--vap-slider-track-color);
  margin-top:0.2em;
}
.vap-volume-slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:1rem; height:1rem; border-radius:50%;
  background: var(--vap-slider-thumb-color);
  cursor:pointer;
}
/* For Firefox */
.vap-volume-slider::-moz-range-thumb {
  width:1rem; height:1rem; border-radius:50%;
  background: var(--vap-slider-thumb-color);
}

/* labels */
.vap-mark .vap-label {
  color: var(--vap-label-text-color);
  position:absolute; left:8px; top:-0.5em;
  white-space:nowrap; font-size:0.85rem;
  background:rgba(255,255,255,0.9);
  padding:0 4px; border-radius:2px;
}

/* …the rest of your responsive tweaks… */