.hidden {display:none;}

#audiosrc {margin-bottom:2rem;}

.controls {display:flex;gap:1px;margin-top:2px;}
.controls > :not(.status), label {background-color:#fff;border:none;color:#000;cursor:pointer;font-size:1rem;font-weight:bold;height:3rem;line-height:3rem;min-width:3rem;}
.controls input {padding:0;}
.controls input[type="range"], .controls select {flex:1;}
.controls select#tracks {flex:2.75;}

.controls .status {min-width:3rem;position:relative;}

.controls .status:before {border-radius:100%;content:'';position:absolute;top:0.9rem;left:0.75rem;width:1.5rem;height:1.5rem;}
.controls .status.off:before {background-color:#333;}
.controls .status.playing:before {background-color:#4d4;}

.controls .status:after {font-size:1rem;font-weight:bold;line-height:3.4rem;position:absolute;top:0;left:0;text-align:center;width:3rem;}
.controls .status.fade:after,
.controls .status.fadeIn:after {color:#4d4;content:attr(data-progress);}
.controls .status.fadeOut:after {color:#f80;content:attr(data-progress);}

.status.fade + input,
.status.fadeIn + input,
.status.fadeOut + input {filter:brightness(0.5) saturate(0);pointer-events:none;}

select {min-width:72px}
select:first-of-type {width:100%;}
input {line-height:1.15em;text-align:center;width:2.25em}
input[type="file"] {border:none;margin:0;padding:0;width:100%}
input[type="range"] {width:10rem;}

#audio-wrapper {display:flex;gap:2rem;margin-top:2rem;}

.title {font-size:0.9rem;font-weight:bold;line-height:2rem;text-transform:uppercase;}
.title:empty {color:#444;}
.title:empty:before {content:'no track';}

audio {display:block;}