body input[type=range]{appearance:none;cursor:pointer;border-radius:16px;outline:none;width:100%;overflow:hidden}body input[type=range]::-webkit-slider-runnable-track{background:#ccc;border-radius:16px;height:15px}body input[type=range]::-moz-range-track{background:#ccc;border-radius:16px;height:15px}body input[type=range]::-webkit-slider-thumb{appearance:none;border:2px solid var(--accent-color);width:15px;height:15px;box-shadow:-407px 0 0 400px var(--accent-color);background-color:#fff;border-radius:50%}body input[type=range]::-moz-range-thumb{border:1px solid var(--accent-color);width:15px;height:15px;box-shadow:-407px 0 0 400px var(--accent-color);background-color:#fff;border-radius:50%}.gradient-background{background-image:linear-gradient(to left top, black 0%, hsl(from var(--accent-color) h s calc(l - 30)) 100%)}.lighter-accent{--lighter-accent-color:hsl(from var(--accent-color) h s calc(l + 30));background-image:linear-gradient(to left bottom, var(--lighter-accent-color) 0%, var(--accent-color) 100%);color:#0000;-webkit-background-clip:text;background-clip:text}.opacity-transition{transition:opacity .5s}.control-panel{transform:perspective(600px)rotateX(5deg)rotateY(-3deg)}.fade-in-out{animation:10s linear infinite fade-in}.fade-out-in{animation:10s linear infinite fade-out}@keyframes fade-in{0%,to{opacity:0}50%{opacity:1}}@keyframes fade-out{0%,to{opacity:1}50%{opacity:0}}