.volume-control{display:flex;align-items:center;gap:8px;flex-shrink:0;color:var(--ink)}
.volume-control button{width:38px;height:40px;display:grid;place-items:center;padding:8px}
.volume-control svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.volume-control label{font-size:10px;color:#c0b9ae}
.volume-control input{width:80px;min-width:0;height:32px;margin:0;accent-color:var(--orange);cursor:pointer}
.volume-control output{width:30px;font-size:10px;font-variant-numeric:tabular-nums;color:#c0b9ae}
.volume-control .sound-muted,.volume-control.muted .sound-waves{display:none}
.volume-control.muted .sound-muted{display:block}
.player>.volume-control{order:2}
.player{gap:16px}
.player .playing-info{width:26%}
.immersive-controls>.volume-control{justify-content:center;margin:8px auto 0}
.immersive-controls>.volume-control input{width:120px}
@media(max-width:1100px){
  .player{height:138px;padding:10px 4% 64px;gap:8px}
  .player .playing-info{width:auto;flex:1}
  .player>.volume-control{position:absolute;right:4%;bottom:22px}
  .player .progress{position:absolute;left:4%;right:4%;bottom:8px;gap:8px}
  .player .progress input{height:2px}
  body{padding-bottom:138px}
  #toast{bottom:148px}
}
@media(max-width:700px){
  .player>.volume-control{left:5%;right:5%;justify-content:flex-end}
  .player>.volume-control input{width:110px}
  .player .playing-info strong{max-width:100%;font-size:10px}
  .player .playing-info>div{min-width:0}
}