@charset "UTF-8";
/*
 * 4 March 2022
 * CSS Knob widget with Range Slider
 * Inspired by Ana Tudor's 1 element range slider collection
 *
 * ✔ responsive
 * ✔ only 1 line of HTML
 * ✔ drag + keyboard accessible
 * ✔ UI created with CSS gradients & SASS generators
 * ✔ highly customizable with CSS & SASS variables
 * ✔ powered by 9* lines of JavaScript
 *
 * Tested on the latest versions of Chrome & Firefox
 * Open it in the details view for more information
 *
 */
@-webkit-keyframes appear {
	to {
		visibility: visible;
	}
}
@keyframes appear {
	to {
		visibility: visible;
	}
}
.knob {
	font-size: 0.152vmin;
	--full-angle: 250;
	--start-angle: 55;
	--size: 533;
	--knob-size: 300;
	--knob-tip-size: 9%;
	--knob-pseudo-size: 100;
	--knob-border-width: 1.6%;
	--knob-scale: calc(var(--knob-size) / var(--knob-pseudo-size));
	--calc-size: calc(var(--size) * 1em);
	--calc-knob-size: calc(var(--size) * (var(--knob-size) / 100) * 1em);
	--mapped: calc((var(--value) - var(--min, 0)) / (var(--max, 100) - var(--min, 0)));
	--current-angle: calc(var(--full-angle, 360) * var(--mapped, 0) * 1deg);
	--calc-size-diff: calc(var(--size) - var(--knob-pseudo-size));
	--center: calc(var(--calc-size-diff) * 0.5em);
	--translate: calc((var(--calc-size-diff) * var(--mapped, 0) * -1em) + var(--center));
	--cur-drag: grab;
	--cur-dragging: grabbing;
	width: var(--calc-size);
	height: var(--calc-size);
	overflow: hidden;
	background-image:
		url("data:image/svg+xml,%3Csvg viewBox='0 0 533 533' width='533px' height='533px' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv class='c-o' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='c-i'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.c-o,.c-i{position:absolute;left:0;top:0;right:0;bottom:0}.c-i::before{--s:300px;content:\"\";position:absolute;left:50%25;top:50%25;transform:translate(-50%25,-50%25);width:calc(var(--s) - 2px);height:calc(var(--s) - 2px);border-radius:50%25;box-shadow:0 56px 70px 8px rgba(0,0,0,0.45),0 -50px 45px 26px rgba(255,255,255,0.6)}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg viewBox='0 0 5260 5260' width='5260px' height='5260px' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv class='c-o' xmlns='http://www.w3.org/1999/xhtml'%3E<div class=\"c-i\" style=\"--n:10\"><div class='s' style='--i:0'><div class='d d0'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:1'><div class='d d1'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:2'><div class='d d2'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:3'><div class='d d3'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:4'><div class='d d4'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:5'><div class='d d5'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:6'><div class='d d6'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:7'><div class='d d7'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:8'><div class='d d8'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:9'><div class='d d9'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:10'><div class='d d1'><div class='a'></div><div class='b e'></div><div class='b c'></div></div><div class='d d0'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div></div>%3C/div%3E%3Cstyle%3E.c-o,.c-i{position:absolute;left:0;top:0;right:0;bottom:0}.s{--as:55;--ae:-0.6;--angle:calc(((250 - (var(--ae) * 2)) / var(--n)) * var(--i) * 1deg);position:absolute;left:50%25;top:50%25;transform:translate(-50%25, -50%25) rotate(90deg)rotate(calc((var(--as) + var(--ae)) * 1deg)) rotate(var(--angle))translateX(calc(\a 		5260 * (45.03726 / 100) * 1px\a 	)) rotate(-90deg)rotate(calc((var(--as) + var(--ae)) * -1deg))rotate(calc(var(--angle) * -1));}.d{--s:130px;--pt:polygon(9.2%25 0, 89.8%25 0, 68.2%25 13%25, 31.8%25 13%25);--ps:polygon(26%25 33%25, 26%25 76%25, -0.4%25 98.4%25, 0 94%25, 0 1.6%25);--pc:polygon(26.6%25 0, 73.4%25 0, 92%25 50%25, 73.4%25 100%25, 26.6%25 100%25, 8%25 50%25);--m:0;color:rgba(40,40,40,0.859);position:relative;width:var(--s);height:calc(var(--s) * 1.5831818182);display:inline-block}.d,.d div{border-radius:calc(var(--s) * 0.1066);overflow:hidden}.d::before,.d::after{content:\"\";clip-path:var(--pt)}.d::before,.d::after,.d div,.d div::before,.d div::after{position:absolute;left:0;top:0;width:100%25;height:100%25;display:block}.d::before,.d::after,.d .a,.d div::before,.d div::after{background:currentColor}.d .a{top:50%25;height:13%25;transform:translateY(-50%25);clip-path:var(--pc)}.d .b {height:50%25}.d .b::before,.d .b::after{content: \"\";clip-path: var(--ps)}.d .b::after{transform:rotateY(180deg)}.d .c,.d::after{transform:rotateX(180deg)}.d .c{transform-origin:0 100%25}.d::before{opacity:var(--A,1)}.e::after{opacity:var(--B,1)}.c::after{opacity:var(--C,1)}.d::after{opacity:var(--D,1)}.c::before{opacity:var(--E,1)}.e::before{opacity:var(--F,1)}.a{opacity:var(--G, 1)}.d0{--G:var(--m)}.d1{--m:0;--A:var(--m);--D:var(--m);--E:var(--m);--F:var(--m);--G:var(--m);margin-left:calc(var(--s) * -0.742)}.d2,.d3,.d7{--F:var(--m)}.d3,.d4,.d5,.d7,.d9{--E:var(--m)}.d2{--C:var(--m)}.d4{--A:var(--m);--D:var(--m)}.d5,.d6{--B: var(--m)}.d7{--D:var(--m);--G:var(--m)}.s > .d:not(:last-of-type){margin-right:calc(var(--s) * 0.16)}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg viewBox='0 0 520 520' width='520px' height='520px' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv class='c-o' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='c-i'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.c-o,.c-i{position:absolute;left:0;top:0;right:0;bottom:0}.c-i{color: rgba(40,40,40,1);--diameter:10px;--offset-bottom:13%25;--offset-bottom-text:12.5%25;--offset-center:18.78%25;--offset-center-text:18.28%25;background-image:radial-gradient(circle at center,currentColor calc((var(--diameter) * 0.5) - 1px),transparent calc(var(--diameter) * 0.5)),radial-gradient(circle at center,currentColor calc((var(--diameter) * 0.5) - 1px),transparent calc(var(--diameter) * 0.5));background-position:left calc(50%25 + var(--offset-center)) bottom var(--offset-bottom),left calc(50%25 - var(--offset-center)) bottom var(--offset-bottom);background-size:var(--diameter) var(--diameter);background-repeat:no-repeat;opacity:0.9;}.c-i::before,.c-i::after{position:absolute;left:calc(50%25 + (var(--sgn, 1) * var(--offset-center-text)));bottom:var(--offset-bottom-text);transform:translate(-50%25,100%25);font-size:18.2px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-transform:uppercase;}.c-i::before{--sgn:-1;content:'min'}.c-i::after {content:'max'}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg viewBox='0 0 5260 5260' width='5260px' height='5260px' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv class='c-o' xmlns='http://www.w3.org/1999/xhtml'%3E<div class=\"c-i\" style=\"--n:100\"><div class='tick' style='--i:0'></div><div class='tick' style='--i:1'></div><div class='tick' style='--i:2'></div><div class='tick' style='--i:3'></div><div class='tick' style='--i:4'></div><div class='tick' style='--i:5'></div><div class='tick' style='--i:6'></div><div class='tick' style='--i:7'></div><div class='tick' style='--i:8'></div><div class='tick' style='--i:9'></div><div class='tick' style='--i:10'></div><div class='tick' style='--i:11'></div><div class='tick' style='--i:12'></div><div class='tick' style='--i:13'></div><div class='tick' style='--i:14'></div><div class='tick' style='--i:15'></div><div class='tick' style='--i:16'></div><div class='tick' style='--i:17'></div><div class='tick' style='--i:18'></div><div class='tick' style='--i:19'></div><div class='tick' style='--i:20'></div><div class='tick' style='--i:21'></div><div class='tick' style='--i:22'></div><div class='tick' style='--i:23'></div><div class='tick' style='--i:24'></div><div class='tick' style='--i:25'></div><div class='tick' style='--i:26'></div><div class='tick' style='--i:27'></div><div class='tick' style='--i:28'></div><div class='tick' style='--i:29'></div><div class='tick' style='--i:30'></div><div class='tick' style='--i:31'></div><div class='tick' style='--i:32'></div><div class='tick' style='--i:33'></div><div class='tick' style='--i:34'></div><div class='tick' style='--i:35'></div><div class='tick' style='--i:36'></div><div class='tick' style='--i:37'></div><div class='tick' style='--i:38'></div><div class='tick' style='--i:39'></div><div class='tick' style='--i:40'></div><div class='tick' style='--i:41'></div><div class='tick' style='--i:42'></div><div class='tick' style='--i:43'></div><div class='tick' style='--i:44'></div><div class='tick' style='--i:45'></div><div class='tick' style='--i:46'></div><div class='tick' style='--i:47'></div><div class='tick' style='--i:48'></div><div class='tick' style='--i:49'></div><div class='tick' style='--i:50'></div><div class='tick' style='--i:51'></div><div class='tick' style='--i:52'></div><div class='tick' style='--i:53'></div><div class='tick' style='--i:54'></div><div class='tick' style='--i:55'></div><div class='tick' style='--i:56'></div><div class='tick' style='--i:57'></div><div class='tick' style='--i:58'></div><div class='tick' style='--i:59'></div><div class='tick' style='--i:60'></div><div class='tick' style='--i:61'></div><div class='tick' style='--i:62'></div><div class='tick' style='--i:63'></div><div class='tick' style='--i:64'></div><div class='tick' style='--i:65'></div><div class='tick' style='--i:66'></div><div class='tick' style='--i:67'></div><div class='tick' style='--i:68'></div><div class='tick' style='--i:69'></div><div class='tick' style='--i:70'></div><div class='tick' style='--i:71'></div><div class='tick' style='--i:72'></div><div class='tick' style='--i:73'></div><div class='tick' style='--i:74'></div><div class='tick' style='--i:75'></div><div class='tick' style='--i:76'></div><div class='tick' style='--i:77'></div><div class='tick' style='--i:78'></div><div class='tick' style='--i:79'></div><div class='tick' style='--i:80'></div><div class='tick' style='--i:81'></div><div class='tick' style='--i:82'></div><div class='tick' style='--i:83'></div><div class='tick' style='--i:84'></div><div class='tick' style='--i:85'></div><div class='tick' style='--i:86'></div><div class='tick' style='--i:87'></div><div class='tick' style='--i:88'></div><div class='tick' style='--i:89'></div><div class='tick' style='--i:90'></div><div class='tick' style='--i:91'></div><div class='tick' style='--i:92'></div><div class='tick' style='--i:93'></div><div class='tick' style='--i:94'></div><div class='tick' style='--i:95'></div><div class='tick' style='--i:96'></div><div class='tick' style='--i:97'></div><div class='tick' style='--i:98'></div><div class='tick' style='--i:99'></div><div class='tick' style='--i:100'></div></div>%3C/div%3E%3Cstyle%3E.c-o,.c-i{position:absolute;left:0;top:0;right:0;bottom:0}.tick{--angle:calc((250 / var(--n)) * var(--i) * 1deg);position:absolute;left:50%25;top:50%25;width:80px;height:30px;background:rgba(161,161,161,1);border-radius:100px;transform:translate(-50%25,-50%25) rotate(90deg) rotate(55deg) rotate(var(--angle)) translateX(calc(\a 		5260 * (38.5931 / 100) * 1px\a 	)) translate(50%25);opacity:0.73}.tick:nth-child(10n + 1){background:rgba(88,86,86,1);width:100px;opacity:0.83}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E");
	background-position: 0 0;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	border-radius: 50%;
	visibility: hidden;
	-webkit-animation: appear steps(2) 20ms calc(var(--drag-duration) * 2) forwards;
	animation: appear steps(2) 20ms calc(var(--drag-duration) * 2) forwards;
	--outline-color: rgba(0, 100, 200, 0.5);
	--outline-width: 3em;
	--drag-duration: 500ms;
	--drag-timing-func: cubic-bezier(0.18, 0.89, 0.32, 1.28);
	--knob-shadow: rgba(0, 0, 0, 0.6);
	--knob-face-gradient: linear-gradient(#f1f1f1, #fff);
	--knob-border-gradient: linear-gradient(#fff 34%, #d1d1d1);
}
.knob,
.knob::-webkit-slider-runnable-track,
.knob::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	background-color: #0000;
}
.knob::-webkit-slider-runnable-track {
	width: 100%;
	height: 100%;
}
.knob,
.knob::-webkit-slider-runnable-track {
	pointer-events: none;
}
.knob,
.knob::-moz-range-track,
.knob::-moz-range-thumb {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: relative;
	border: 0;
	background-color: #0000;
}
.knob::-moz-range-progress {
	-moz-appearance: none;
	appearance: none;
	display: none;
}
.knob::-moz-range-track {
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.knob::-webkit-slider-thumb {
	width: calc(var(--knob-pseudo-size) * 1em);
	height: calc(var(--knob-pseudo-size) * 1em);
	box-sizing: border-box;
	padding: calc(var(--knob-border-width) / var(--knob-scale));
	border-radius: 50%;
	box-shadow: 0 0 0 0 var(--knob-shadow);
	outline: solid var(--outline-color);
	outline-width: 0;
	background-image:
		url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv class='c-o' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class=\"c-i\"%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.c-o,.c-i{position:absolute;left:0;top:0;right:0;bottom:0}.c-i{border-radius:50px;background:rgba(40,40,40,1)}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E"),
		var(--knob-face-gradient), var(--knob-border-gradient);
	background-size:
		var(--knob-tip-size) var(--knob-tip-size),
		100% 100%,
		100% 100%;
	background-position:
		left 50% bottom 10%,
		0 0,
		0 0;
	background-repeat: no-repeat;
	background-clip: border-box, content-box, border-box;
	background-origin: content-box, border-box, border-box;
	transition-duration: 100ms, 50ms, var(--drag-duration);
	transition-timing-function: ease-out, ease-out, var(--drag-timing-func);
	pointer-events: auto;
	cursor: var(--cur-drag);
	left: var(--translate, 0);
	top: var(--center, 0);
	transform: rotate(calc(var(--start-angle, 0) * 1deg)) rotate(var(--current-angle, 0)) scale(var(--knob-scale));
	-webkit-transition-property: box-shadow, outline, transform;
	transition-property: box-shadow, outline, transform;
}
.knob::-moz-range-thumb {
	width: calc(var(--knob-pseudo-size) * 1em);
	height: calc(var(--knob-pseudo-size) * 1em);
	box-sizing: border-box;
	padding: calc(var(--knob-border-width) / var(--knob-scale));
	border-radius: 50%;
	box-shadow: 0 0 0 0 var(--knob-shadow);
	outline: solid var(--outline-color);
	outline-width: 0;
	background-image:
		url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv class='c-o' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class=\"c-i\"%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.c-o,.c-i{position:absolute;left:0;top:0;right:0;bottom:0}.c-i{border-radius:50px;background:rgba(40,40,40,1)}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E"),
		var(--knob-face-gradient), var(--knob-border-gradient);
	background-size:
		var(--knob-tip-size) var(--knob-tip-size),
		100% 100%,
		100% 100%;
	background-position:
		left 50% bottom 10%,
		0 0,
		0 0;
	background-repeat: no-repeat;
	background-clip: border-box, content-box, border-box;
	background-origin: content-box, border-box, border-box;
	transition-duration: 100ms, 50ms, var(--drag-duration);
	transition-timing-function: ease-out, ease-out, var(--drag-timing-func);
	pointer-events: auto;
	cursor: var(--cur-drag);
	translate: var(--translate, 0) 0;
	scale: var(--knob-scale);
	rotate: calc((var(--start-angle, 0) * 1deg) + var(--current-angle, 0));
	-moz-transition-property: box-shadow, outline, rotate;
	transition-property: box-shadow, outline, rotate;
}
.knob:hover::-moz-range-thumb {
	box-shadow: 0 0 7em 0 var(--knob-shadow);
}
.knob:hover::-webkit-slider-thumb {
	box-shadow: 0 0 7em 0 var(--knob-shadow);
}
.knob:active {
	cursor: var(--cur-dragging);
}
.knob::-moz-range-thumb:active {
	cursor: var(--cur-dragging);
}
.knob::-webkit-slider-thumb:active {
	cursor: var(--cur-dragging);
}
.knob:focus-visible {
	outline: none;
}
.knob:focus-visible::-moz-range-thumb {
	outline-width: var(--outline-width);
}
.knob:focus-visible::-webkit-slider-thumb {
	outline-width: var(--outline-width);
}

html,
body {
	height: 100%;
}

html {
	background: #e8e8e8;
}

body {
	display: grid;
	place-items: center;
	overscroll-behavior-y: contain;
}

* {
	padding: 0;
	margin: 0;
}