/* Floating volume widget */
.volume-ui{
  position:fixed;
  top:14px;
  right:14px;

  /* Super top layer */
  z-index:2147483647;
  isolation:isolate;
  transform: translateZ(0);

  display:flex;
  align-items:center;
  gap:10px;

  padding:10px 12px;
  background:rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  border:2px solid rgba(0,0,0,0.12);
  border-radius:18px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/* Make sure clicks always work */
.volume-ui, .volume-ui *{
  pointer-events:auto;
}

.volume-btn{
  font: inherit;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  line-height:1;
  font-size:34px;
}

.volume-slider{
  width:140px;
  accent-color:#ff7fb0;
}

@media (max-width:420px){
  .volume-slider{ width:110px; }
  .volume-btn{ font-size:30px; }
}