:root{color:#20232a;background:#f7f8fa;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0}main{width:min(100% - 2rem,48rem);margin:0 auto;padding:clamp(3rem,10vw,7rem) 0}h1{font-size:clamp(2rem,6vw,3.5rem);line-height:1.15}p{font-size:1.125rem;line-height:1.6}.player{background:#fff;border:1px solid #d9dce3;border-radius:1rem;margin-top:2rem;padding:clamp(1.25rem,4vw,2rem)}.track-number,.artist,.times,.progress-label{color:#555d6b}.track-number,.progress-label,.times{font-size:.875rem}.player h2{margin:.75rem 0 0;font-size:1.5rem}.artist{margin:.25rem 0 1.5rem}.progress-label{display:block}.progress{accent-color:#4d398d;width:100%;margin:.75rem 0 0}.times{justify-content:space-between;display:flex}.controls{flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;display:flex}button{color:#20232a;cursor:pointer;min-height:2.75rem;font:inherit;background:#fff;border:1px solid #a9afbc;border-radius:.5rem;flex:auto;padding:.6rem 1rem}button.primary{color:#fff;background:#4d398d;border-color:#4d398d}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #8c77d2}.error{color:#a12626;margin:1.5rem 0 0;font-size:.95rem}