:root{--sd-player-bg:var(--sd-primary);--sd-player-light:var(--sd-light);--sd-player-fill:var(--sd-dark);--sd-player-space:var(--sd-space-m);--sd-player-border-radius:var(--sd-radius-m);--sd-player-title-size:var(--sd-text-l);--sd-player-play-btn-size:60px;--sd-player-play-btn-radius:50%;--sd-player-progress-height:12px;--sd-player-progress-border-radius:999px}.sd-audio-player{background:var(--sd-player-bg);padding:var(--sd-player-space);border-radius:var(--sd-player-border-radius)}.sd-audio-player__title{font-size:var(--sd-player-title-size);color:var(--sd-player-light);margin-bottom:var(--sd-player-space)}.sd-audio-player__controls{display:flex;align-items:center;gap:var(--sd-player-space)}.sd-audio-player__button{width:var(--sd-player-play-btn-size);height:var(--sd-player-play-btn-size);border-radius:var(--sd-player-play-btn-radius);border:none;background:var(--sd-player-light);color:var(--sd-player-bg);font-size:22px;display:grid;place-items:center;cursor:pointer}.sd-audio-player__progress{flex:1;appearance:none;height:var(--sd-player-progress-height);border-radius:var(--sd-player-progress-border-radius);background:var(--sd-player-light);cursor:pointer}.sd-audio-player__progress::-webkit-slider-runnable-track{height:var(--sd-player-progress-height);border-radius:var(--sd-player-progress-border-radius);background:linear-gradient(to right,var(--sd-player-fill) 0%,var(--sd-player-fill) var(--progress,0%),var(--sd-player-light) var(--progress,0%),var(--sd-player-light) 100%)}.sd-audio-player__progress::-webkit-slider-thumb{appearance:none;width:0;height:0}.sd-audio-player__progress::-moz-range-track{height:var(--sd-player-progress-height);border-radius:var(--sd-player-progress-border-radius);background:var(--sd-player-light)}.sd-audio-player__progress::-moz-range-progress{height:var(--sd-player-progress-height);border-radius:var(--sd-player-progress-border-radius);background:var(--sd-player-fill)}.sd-audio-player__progress::-moz-range-thumb{width:0;height:0;border:0}.sd-audio-player__time{color:var(--sd-player-light);font-size:var(--sd-text-s);white-space:nowrap;min-width:10ch;text-align:right;font-variant-numeric:tabular-nums}.sd-audio-player__audio{display:none}@media (max-width:768px){.sd-audio-player{--sd-player-space:var(--sd-space-s);--sd-player-play-btn-size:52px;--sd-player-progress-height:10px}.sd-audio-player__title{margin-bottom:var(--sd-space-s)}.sd-audio-player__button{font-size:20px}.sd-audio-player__time{min-width:9ch;font-size:var(--sd-text-xs)}}@media (max-width:560px){.sd-audio-player__controls{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"button time" "progress progress";align-items:center;row-gap:var(--sd-space-s);column-gap:var(--sd-space-s)}.sd-audio-player__button{grid-area:button;justify-self:start}.sd-audio-player__time{grid-area:time;justify-self:end;text-align:right;min-width:10ch}.sd-audio-player__progress{grid-area:progress;width:100%}}