.player .volume {
  align-self: center;
  height: 32px;
  margin: 0;
  display: grid;
  grid-template-columns: 22px minmax(58px, 100px) 34px;
  align-items: center;
  gap: 9px;
}
.player .volume > span { width: 22px; height: 22px; display: block; position: relative; }
.player .volume > span::before { left: 0; top: 1px; width: 20px; height: 20px; }
.player .volume input { width: 100%; height: 4px; margin: 0; align-self: center; transform: translateY(-6px); }
.player .volume output {
  min-width: 34px;
  color: var(--muted);
  text-align: right;
  font: 10px 'DM Mono', monospace;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 670px) {
  .player { grid-template-columns: 48px minmax(0, 1fr) 150px; grid-template-rows: 45px 50px; }
  .player .now-playing { grid-column: 2 / 4; }
  .player .progress-area { grid-column: 1 / 3; grid-row: 2; }
  .player .volume { grid-column: 3; grid-row: 2; grid-template-columns: 20px minmax(48px, 1fr) 32px; gap: 6px; }
}