:root{
  --rac-border:#111;
  --rac-text:#f2f2f2;
  --rac-blue:#1e73be;
  --rac-track:#e6e6e6;
}
.rac-player, .rac-player *{ box-sizing:border-box; }
.rac-player{
  width:100%;
  max-width:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:linear-gradient(#2b2b2b,#1f1f1f);
  border:1px solid var(--rac-border);
  border-radius:0;
  color:var(--rac-text);
  font-family:inherit;
}
.rac-btn{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  line-height:0;
  border-radius:0;
  flex:0 0 auto;
  color:inherit;
}
.rac-time{
  font-variant-numeric:tabular-nums;
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
}
.rac-seek{ flex:1 1 auto; min-width:40px; cursor:pointer; }
.rac-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  min-width:0;
}
.rac-vol{ width:86px; flex:0 0 auto; cursor:pointer; }

.rac-seek, .rac-vol{
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  border-radius:0;
  background:linear-gradient(to right, var(--rac-blue) 0%, var(--rac-blue) 0%, var(--rac-track) 0%, var(--rac-track) 100%);
  outline:none;
}
.rac-seek::-webkit-slider-runnable-track,
.rac-vol::-webkit-slider-runnable-track{
  height:6px;
  border-radius:0;
  background:transparent;
}
.rac-seek::-webkit-slider-thumb,
.rac-vol::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--rac-text);
  border:1px solid rgba(0,0,0,.45);
  margin-top:-2px;
}
.rac-seek::-moz-range-track,
.rac-vol::-moz-range-track{
  height:6px;
  border-radius:0;
  background:transparent;
}
.rac-seek::-moz-range-thumb,
.rac-vol::-moz-range-thumb{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--rac-text);
  border:1px solid rgba(0,0,0,.45);
}

.rac-ic{ display:inline-block; width:22px; height:22px; }
.rac-play .rac-ic{ width:26px; height:26px; }
.rac-ic::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.rac-ic-play::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f2f2f2' d='M8 5v14l12-7z'/%3E%3C/svg%3E");
}
.rac-player.rac-is-playing .rac-ic-play::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f2f2f2' d='M7 5h4v14H7zM13 5h4v14h-4z'/%3E%3C/svg%3E");
}
.rac-ic-vol::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f2f2f2' d='M4 10v4h4l5 4V6L8 10H4z'/%3E%3Cpath fill='%23f2f2f2' opacity='.9' d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.06c1.48-.74 2.5-2.26 2.5-4.03z'/%3E%3C/svg%3E");
}
.rac-player.rac-muted .rac-ic-vol::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f2f2f2' d='M4 10v4h4l5 4V6L8 10H4z'/%3E%3Cpath fill='%23f2f2f2' d='M15.6 7.6l-1.6 1.6 2.8 2.8-2.8 2.8 1.6 1.6 2.8-2.8 2.8 2.8 1.6-1.6-2.8-2.8 2.8-2.8-1.6-1.6-2.8 2.8-2.8-2.8z'/%3E%3C/svg%3E");
}
.rac-ic-loop::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23f2f2f2' stroke-width='2.6' stroke-linecap='square' stroke-linejoin='miter' d='M7 7h10l-2-2m2 2-2 2M17 17H7l2 2m-2-2 2-2'/%3E%3C/svg%3E");
}
.rac-player.rac-loop-on .rac-ic-loop::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231e73be' stroke-width='2.6' stroke-linecap='square' stroke-linejoin='miter' d='M7 7h10l-2-2m2 2-2 2M17 17H7l2 2m-2-2 2-2'/%3E%3C/svg%3E");
}

@media (max-width:480px){
  .rac-player{ gap:8px; padding:8px; }
  .rac-vol{ width:72px; }
  .rac-time{ font-size:13px; }
}