:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:15em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em #f7df1eaa)}.card{padding:2em}.read-the-docs{color:#888}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}body{background:#ccc;-webkit-user-select:none;user-select:none;color:#fff;font-family:Open Sans,sans-serif}.radio-container{width:350px;margin:auto}.radio-container .radio-header{background-color:#fff;text-align:center;padding:10px 0}.radio-container .radio-header .radio-name{font-size:26px;font-weight:100;color:#43ac6a}.radio-container .radio-header .current-presenter{font-size:14px;font-weight:400;color:red}.radio-container .radio-body{background:#43ac6a;background:-webkit-linear-gradient(left top,#4eee8a,#183e26);background:-o-linear-gradient(top left,#4eee8a,#183e26);background:-moz-linear-gradient(top left,#4eee8a,#183e26);background:linear-gradient(to bottom right,#4eee8a,#183e26);background-size:100% 200%;animation:background-scroll 7s alternate ease-in-out infinite;height:250px;position:relative;overflow:hidden}.radio-container .radio-body .current-song{font-size:20px;font-weight:100;text-align:center;padding:110px 0;position:absolute;z-index:2;width:350px}.radio-container .radio-body .radio-buttons{position:absolute;bottom:0;left:15px;height:50px;width:320px;z-index:2}.radio-container .radio-body .radio-buttons .button{color:#fff9;float:left}.radio-container .radio-body .radio-buttons .button:hover{color:#fffc}.radio-container .radio-body .radio-buttons .button-play{font-size:2em;width:25px}.radio-container .radio-body .radio-buttons .button-stop{margin:12px}.radio-container .radio-body .radio-buttons .button-request{float:right;margin-top:16px;font-size:14px}.radio-container .radio-body .shine{position:absolute;top:-50px;left:-90px;height:120px;width:300px;background:linear-gradient(360deg,#ffffff1a,#ffffff0d);transform:rotate(-45deg)}.radio-container .radio-body .wave-bars{position:relative;z-index:1;height:100%}.radio-container .radio-body .wave-bars .wave{margin-top:125px;transform:translateY(-50%);height:3px;width:4px;background:#fff3;float:left;margin-right:3px;animation-delay:2s}.radio-container .radio-body .wave-bars .wave:first-child{margin-left:2px}.radio-container .radio-body .wave-bars .wave:last-child{margin-right:0}.radio-container .radio-body .wave-bars .wave.wave-1{animation:wave1 .5s linear alternate infinite}.radio-container .radio-body .wave-bars .wave.wave-2{animation:wave2 .7s linear alternate infinite}.radio-container .radio-body .wave-bars .wave.wave-3{animation:wave3 .6s linear alternate infinite}.radio-container .radio-body .wave-bars .wave.wave-4{animation:wave4 .5s linear alternate infinite}.radio-container .radio-body .wave-bars .wave.wave-5{animation:wave5 .6s linear alternate infinite}.radio-container .radio-body .wave-bars .wave.no-animation{animation:stopwaves 1s linear;animation-iteration-count:1;animation-fill-mode:forwards}.radio-container .radio-message{background:linear-gradient(to bottom,#381026,#462e48);padding:15px;text-align:center}.radio-container .radio-message .message-header{font-weight:600}.radio-container .radio-volume{background:#fff;padding:10px 15px;height:40px}.radio-container .radio-volume .button-sound{float:left;font-size:2em;color:#ddd;width:30px}.radio-container .radio-volume .button-sound:hover{color:#bbb}.radio-container .radio-volume input[type=range]{position:relative;top:8px;width:260px;height:9px;margin:10px 12px;display:inline;-webkit-appearance:none;border-radius:8px;border:1px solid #ddd;background-color:#fff}.radio-container .radio-volume input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:#fff;border:1px solid #ccc;width:20px;height:20px;border-radius:10px;cursor:pointer}.radio-container .radio-volume input[type=range]::-moz-range-track{border-radius:8px;width:260px;height:7px;border:1px solid #ddd;background-color:#fff}.radio-container .radio-volume input[type=range]::-moz-range-thumb{background:#fff;border:1px solid #ccc;width:18px;height:18px;border-radius:9px;cursor:pointer}.radio-container .radio-volume input[type=range]::-ms-track{width:164px;height:7px;cursor:pointer;background:transparent;border-color:transparent;color:transparent}.radio-container .radio-volume input[type=range]:focus{outline:0}.radio-container .button{cursor:pointer}@-webkit-keyframes background-scroll{0%{background-position:0 0}to{background-position:0 100%}}@-moz-keyframes background-scroll{0%{background-position:0 0}to{background-position:0 100%}}@keyframes background-scroll{0%{background-position:0 0}to{background-position:0 100%}}@-webkit-keyframes wave1{0%{height:10%}33%{height:30%}66%{height:15%}to{height:35%}}@-moz-keyframes wave1{0%{height:10%}33%{height:30%}66%{height:15%}to{height:35%}}@keyframes wave1{0%{height:10%}33%{height:30%}66%{height:15%}to{height:35%}}@-webkit-keyframes wave2{0%{height:40%}33%{height:20%}66%{height:40%}to{height:20%}}@-moz-keyframes wave2{0%{height:40%}33%{height:20%}66%{height:40%}to{height:20%}}@keyframes wave2{0%{height:40%}33%{height:20%}66%{height:40%}to{height:20%}}@-webkit-keyframes wave3{0%{height:30%}33%{height:45%}66%{height:30%}to{height:15%}}@-moz-keyframes wave3{0%{height:30%}33%{height:45%}66%{height:30%}to{height:15%}}@keyframes wave3{0%{height:45%}33%{height:20%}66%{height:30%}to{height:15%}}@-webkit-keyframes wave4{0%{height:30%}33%{height:25%}66%{height:45%}to{height:25%}}@-moz-keyframes wave4{0%{height:30%}33%{height:25%}66%{height:45%}to{height:25%}}@keyframes wave4{0%{height:30%}33%{height:25%}66%{height:45%}to{height:25%}}@-webkit-keyframes wave5{0%{height:20%}33%{height:35%}66%{height:15%}to{height:35%}}@-moz-keyframes wave5{0%{height:20%}33%{height:35%}66%{height:15%}to{height:35%}}@keyframes wave5{0%{height:20%}33%{height:35%}66%{height:15%}to{height:35%}}@keyframes stopwaves{to{height:3px}}