button,input{-webkit-appearance:none;background:none;outline:none;border:0}html,body,#app,.page{height:100%}#app:after,.page,.player p:after{position:absolute;bottom:0;right:0;left:0;top:0}*{margin:0;padding:0;box-sizing:border-box}html,body{color:#424242;background:#fafafa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow-x:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:16px;line-height:1}#app:after{background:#424242;content:""}button{overflow:hidden;border:2px solid #424242;cursor:pointer}.page{align-items:center;justify-content:center;flex-direction:column;backface-visibility:hidden;transition:all .6s ease;background:#fafafa;overflow:hidden;display:flex}.text{transform:translateZ(0);z-index:2}.player{opacity:0;transform:translateZ(0) scale(.85);transform-origin:bottom;z-index:1}.ready .text{transform:translate(-100%)}.ready .player{transform:scale(1);opacity:1}.player{padding-bottom:5vh;user-select:none}.player p{flex:1;width:100%;display:flex;justify-content:center;align-items:center;font-size:3rem}.player p:after{opacity:0;content:"";background:rgba(59,173,227,.08);z-index:0}.player p:active:after{opacity:1}.player .buttons{width:256px;justify-content:space-between;align-items:center;display:flex;z-index:1}.player button{line-height:0;border-radius:50%;fill:#424242;width:56px;height:56px}.player img{width:32px;height:32px}.player .play{width:80px;height:80px}.player .alt{color:#bdbdbd;fill:currentColor;transition:color .3s;position:absolute;border:none;top:16px}.player .alt:hover{color:#9e9e9e}.player .alt:active{color:#424242}.player .fz{right:16px}.player .back{left:16px}.player.xs p{font-size:1.75rem}.player.xs .fz{color:#424242}.range{width:75%;max-width:480px;background:#3bade3;border-radius:.25rem;background:linear-gradient(45deg,#3bade3 0%,#576fe6 25%,#9844b7 51%,#c53e9f 75%,#ff357f 100%);margin:2rem auto;height:2px;z-index:1}.range::-webkit-slider-thumb{cursor:-webkit-grab;max-width:80px;appearance:none;transition:border 1s ease;border:2px solid currentColor;background:#fafafa;border-radius:50%;width:30px;height:30px}.range::-webkit-slider-thumb:active{cursor:-webkit-grabbing}.range::-moz-range-thumb{cursor:-moz-grab;max-width:80px;appearance:none;transition:border 1s ease;border:2px solid currentColor;background:#fafafa;border-radius:50%;width:30px;height:30px}.range::-moz-range-thumb:active{cursor:-moz-grabbing}.range.blue{color:#3bade3}.range.indigo{color:#576fe6}.range.purple{color:#9844b7}.range.maude{color:#c53e9f}.range.pink{color:#ff357f}.text textarea{height:50vh;max-width:500px;border:1px dotted;margin:5vh auto;padding:12px;resize:none;width:85vw}.text button{font-weight:700;font-size:1.3rem;letter-spacing:2px;text-transform:uppercase;padding:12px 36px}