body{margin:0;font-family:Arial,Helvetica,sans-serif}body *{box-sizing:border-box}#root{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background-color:#121212}@keyframes beat{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.8)}}@keyframes spin{to{transform:rotate(1turn)}}.animation-control-true{animation-play-state:running!important}.animation-control-false{animation-play-state:paused!important}.audio-player{width:340px;padding:20px 20px 40px;background-color:#333;border-radius:10px;display:flex;flex-direction:column;align-items:center}@media screen and (max-width: 400px){.audio-player{width:100%;height:100%;border-radius:0;justify-content:space-evenly}}.audio-player__logo{padding:4px;margin-bottom:20px}.audio-player__logo>img{height:28px}.audio-player__art{position:relative;width:340px;height:200px;margin-bottom:20px}@media screen and (max-width: 400px){.audio-player__art{width:100%}}.audio-player__art-bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;overflow:hidden}@media screen and (max-width: 400px){.audio-player__art-bg{width:100vw}}.audio-player__art-bg img{width:100%;height:100%;animation:beat 2s linear infinite}.audio-player__art-mixtape{position:relative;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% - 40px);aspect-ratio:1000 / 689;display:flex}.audio-player__art-mixtape img{position:absolute;top:0;left:0;width:100%}.audio-player__art-mixtape-1.mixtape-img,.audio-player__art-mixtape-2.mixtape-img{top:50%;transform:translateY(-50%)}.audio-player__art-mixtape .animation-wrapper{position:relative;width:50%;height:100%}.audio-player__art-mixtape .animation-wrapper .audio-player__art-mixtape-3.mixtape-img{width:80%;top:18.5%;left:20.5%;animation:spin 4s linear infinite reverse}.audio-player__art-mixtape .animation-wrapper .audio-player__art-mixtape-4.mixtape-img{width:42%;top:32.5%;left:20%;animation:spin 4s linear infinite}.audio-player__art-mixtape-5.mixtape-img{top:50%;transform:translateY(-50%)}.audio-player__waveform{position:relative;width:100%;margin-bottom:10px}.audio-player__waveform-timer{display:flex;justify-content:space-between;padding:4px}.audio-player__waveform-timer div{color:#ccc;font-weight:600}.audio-player__waveform-loading{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px);width:50px;padding:8px;aspect-ratio:1;border-radius:50%;background:#fa6e34;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:spin 1s infinite linear}.audio-player__control{width:60px;height:60px;margin-bottom:20px;border-radius:50%;background-color:#fa6e34;display:flex;justify-content:center;align-items:center;cursor:pointer}.audio-player__control-icon{fill:#fff;width:20px;height:20px}.audio-player__other{width:80%;min-width:240px}.audio-player__other>a{color:#ccc;display:inline-block;box-sizing:border-box;text-align:center;font-weight:500;width:100%;padding:10px 16px;border-radius:24px;border:1px solid #fa6e34;text-decoration:none;transition-duration:.3s}.audio-player__other>a:hover{background-color:#fa6e34;color:#fff}