@import url(https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css);*{margin:0;padding:0}a{text-decoration:inherit}ol,ul{list-style:none}button,h1,h2,h3,h4,input,select{font:inherit}body,html{height:100%;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}#app{height:100%}#app,.disk{overflow:hidden}.disk{position:relative;padding-top:100%;border-radius:100%;-webkit-transform:translateY(-50%) scale(.88);transform:translateY(-50%) scale(.88);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-transition:all .6s ease;transition:all .6s ease}.disk input{display:none}.disk_cover{position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;background-image:radial-gradient(circle,#444 0,#333 100%);background-size:cover;background-position:50%}.disk_cover:after{content:"";position:absolute;top:50%;left:50%;margin-left:-8px;margin-top:-8px;width:16px;height:16px;border-radius:100%;background-image:linear-gradient(45deg,#fff,#dabad1);-webkit-box-shadow:0 1px 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px 1px rgba(0,0,0,.2)}.disk__playing{-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-box-shadow:0 10px 30px rgba(0,0,0,.1),0 20px 20px -10px rgba(108,29,171,.3);box-shadow:0 10px 30px rgba(0,0,0,.1),0 20px 20px -10px rgba(108,29,171,.3)}.disk__playing .disk_cover{-webkit-animation:rotate 6s linear infinite;animation:rotate 6s linear infinite}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.control{height:100%}.control,.control_btn{display:-webkit-box;display:-ms-flexbox;display:flex}.control_btn{margin:2px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:4px;color:#ccc;font-size:16px;-webkit-transition:background-color .6s ease;transition:background-color .6s ease}.control_btn:hover{background-color:#ddd;color:#fff}.control_btn__side{font-size:14px}.play-btn{position:relative;width:20px;height:20px}.play-btn:before{left:11px;margin-left:-4px;height:0;border:12px solid transparent;border-left-color:#ccc;border-top-width:10px;border-bottom-width:10px}.play-btn:after,.play-btn:before{content:"";position:absolute;top:50%;margin-top:-10px;width:0;-webkit-transition:all .2s ease;transition:all .2s ease}.play-btn:after{right:5px;margin-right:-4px;height:20px;border:0 solid transparent;border-width:0 0 0 6px;border-left-color:#ccc;opacity:0;-webkit-transform:scale(0);transform:scale(0)}.control__playing .play-btn:before{border-width:0 0 0 6px;height:20px;left:5px}.control__playing .play-btn:after{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.control_btn:hover .play-btn:before{border-left-color:#fff}.control_btn:hover .play-btn:after{border-color:#fff}.progress{padding-left:123px;padding-right:12px;height:100%;border-radius:6px 6px 0 0;background-color:hsla(0,0%,100%,.5);-webkit-transition:all .6s ease;transition:all .6s ease}.progress__playing{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress_title{padding-top:6px;font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.progress_text{padding-top:2px;padding-left:2px;font-size:12px;font-weight:700;color:#ccc;-webkit-transform:scale(.6);transform:scale(.6);-webkit-transform-origin:left top;transform-origin:left top}.progress_line{height:3px;border-radius:3px;overflow:hidden;background-color:#ddd}.progress_line span{display:block;height:100%;background-color:#ec51a5}.player{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;max-width:300px;max-height:75px;width:300px;height:75px;border-radius:8px;background-color:#fff;-webkit-box-shadow:0 30px 60px rgba(0,0,0,.12),0 20px 20px rgba(95,23,101,.2);box-shadow:0 30px 60px rgba(0,0,0,.12),0 20px 20px rgba(95,23,101,.2)}.player_disk{-webkit-box-flex:1.2;-ms-flex:1.2;flex:1.2;padding:12px}.player_control{-webkit-box-flex:2;-ms-flex:2;flex:2;padding:12px 0;padding-right:12px}.player_progress{position:absolute;left:9px;right:9px;top:0;bottom:25px;z-index:-1}.home{position:relative;z-index:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;background-color:#ffedff}