*{box-sizing:border-box}body{font-family:sans-serif;background:#f2f2f2;margin:0 10px}.audio-player{background:#c1b6bc}.inner{max-width:1200px;margin:0 auto;padding:20px}.audio-info{display:flex;gap:20px}.text{color:#f50}.title{color:#fff;font-weight:100;font-size:32px;margin-bottom:0;padding:2px;line-height:37px;background-color:rgba(0,0,0,.8)}.icon-wrapper{display:flex;align-items:center;justify-content:center;height:100%}.audio-image{width:300px;height:300px;background:#1e1e1e}.audio-icon{font-size:40px;display:flex;justify-content:center;align-items:center;height:80px;width:80px;border-radius:50%;background:#989898}.audio-image img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;vertical-align:middle}.controls-wrapper{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.controls button,.volume button{border:none;background-color:transparent;margin-right:8px;cursor:pointer}button svg{font-size:20px}.volume{display:flex;align-items:center}.volume button{margin:0}.progress{display:flex;align-items:center;gap:10px;width:100%}.time{color:#333;font-size:13px;line-height:46px}.time.current{color:#f50}.top__bar{font-size:.875rem;line-height:1.25rem;text-align:center;padding-top:.5rem;padding-bottom:.5rem;background-color:#fafafa;border-bottom:1px solid #f0f0f2}.top__bar a{color:inherit}.top__bar p{margin:0}input[type=range]{--range-progress:0;-webkit-appearance:none;position:relative;background:#ccc;width:100%;height:2px;border-radius:2px;cursor:pointer}input[type=range]::-moz-range-track{position:relative;background:#ccc;width:100%;height:2px;border-radius:2px;cursor:pointer}input[type=range]:before{content:"";height:2px;background:#f50;width:var(--range-progress);border-bottom-left-radius:2px;border-top-left-radius:2px;position:absolute;top:0;left:0}input[type=range]::-moz-range-progress{background:#f50;border-bottom-left-radius:2px;border-top-left-radius:2px;height:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:8px;width:8px;border-radius:50%;border:none;background-color:#f50;cursor:pointer;position:relative}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}input[type=range]::-moz-range-thumb{height:8px;width:8px;border-radius:50%;background:#f50;cursor:pointer;border:transparent;position:relative}input[type=range]:active::-moz-range-thumb{transform:scale(1.2)}