*,::before,::after{box-sizing:border-box}*:focus{outline:none}ul[class],ol[class]{padding:0;list-style:none}dl{height:100%;width:100%;position:relative}.relative{height: 100%;width: 100%;position: relative}body,h1,h2,h3,h4,p,ul[class],ol[class],li,figure,figcaption,blockquote,dl,dd{margin:0}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}a{text-decoration:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}input,button,textarea,select{border:0;outline:0;font:inherit,-webkit-appearance: none;-webkit-border-radius: 0;-moz-appearance: none;-moz-border-radius: 0}input,button{-webkit-appearance: none}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

a, a:hover, a:active, a:visited {text-decoration: none;}

::selection {background: rgba(0,0,0, .90);color: rgba(255,255,255, 1);}
::-moz-selection {background: rgba(0,0,0, .90);color: #fff;}
input:-webkit-autofill,input:-webkit-autofill:hover, input:-webkit-autofill:focus,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus{border: 0;-webkit-text-fill-color: transparent;-webkit-box-shadow: none;transition: background-color 5000s ease-in-out 0s;font-weight: 900;}

@font-face{font-family:system-ui;font-style:normal;font-weight:300;src:local(.SFNS-Light),local(.SFNSText-Light),local(.HelveticaNeueDeskInterface-Light),local(.LucidaGrandeUI),local("Segoe UI Light"),local("Ubuntu Light"),local(Roboto-Light),local(DroidSans),local(Tahoma)}@font-face{font-family:system-ui;font-style:italic;font-weight:300;src:local(.SFNS-LightItalic),local(.SFNSText-LightItalic),local(.HelveticaNeueDeskInterface-Italic),local(.LucidaGrandeUI),local("Segoe UI Light Italic"),local("Ubuntu Light Italic"),local(Roboto-LightItalic),local(DroidSans),local(Tahoma)}@font-face{font-family:system-ui;font-style:normal;font-weight:400;src:local(.SFNS-Regular),local(.SFNSText-Regular),local(.HelveticaNeueDeskInterface-Regular),local(.LucidaGrandeUI),local("Segoe UI"),local(Ubuntu),local(Roboto-Regular),local(DroidSans),local(Tahoma)}@font-face{font-family:system-ui;font-style:italic;font-weight:400;src:local(.SFNS-Italic),local(.SFNSText-Italic),local(.HelveticaNeueDeskInterface-Italic),local(.LucidaGrandeUI),local("Segoe UI Italic"),local("Ubuntu Italic"),local(Roboto-Italic),local(DroidSans),local(Tahoma)}@font-face{font-family:system-ui;font-style:normal;font-weight:500;src:local(.SFNS-Medium),local(.SFNSText-Medium),local(.HelveticaNeueDeskInterface-MediumP4),local(.LucidaGrandeUI),local("Segoe UI Semibold"),local("Ubuntu Medium"),local(Roboto-Medium),local(DroidSans-Bold),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:italic;font-weight:500;src:local(.SFNS-MediumItalic),local(.SFNSText-MediumItalic),local(.HelveticaNeueDeskInterface-MediumItalicP4),local(.LucidaGrandeUI),local("Segoe UI Semibold Italic"),local("Ubuntu Medium Italic"),local(Roboto-MediumItalic),local(DroidSans-Bold),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:normal;font-weight:700;src:local(.SFNS-Bold),local(.SFNSText-Bold),local(.HelveticaNeueDeskInterface-Bold),local(.LucidaGrandeUI),local("Segoe UI Bold"),local("Ubuntu Bold"),local(Roboto-Bold),local(DroidSans-Bold),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:italic;font-weight:700;src:local(.SFNS-BoldItalic),local(.SFNSText-BoldItalic),local(.HelveticaNeueDeskInterface-BoldItalic),local(.LucidaGrandeUI),local("Segoe UI Bold Italic"),local("Ubuntu Bold Italic"),local(Roboto-BoldItalic),local(DroidSans-Bold),local("Tahoma Bold")}

html,
body {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	font: 300 16px system-ui;
}
body {
	background: #fff;
	transition: background .3s ease-in-out;
}
body.win {
	background: #00de66;
}
body.win.win1 {
	background: #0fbdf2;
}
body.win.win2 {
	background: #00de66;
}
body.win.win3 {
	background: #ff8a30;
}
body.win.win4 {
	background: #fce200;
}
body.lose {
	background: #ff3b3b;
}
/* body::after {
	content: "";
	position: fixed;
	width:  100%;
	height: 100%;
	left: 0;
	top:  0;
	opacity: 1;
	pointer-events: all;
	background: #fff;
	transition: opacity .3s ease-in-out, top 0s .3s ease-in-out;
	z-index: 100;
}
body.start::after {
	opacity: 0;
	top: -100%;
	pointer-events: none;
} */
header {
	position: absolute;
	left: 0;
	top:  0;
	height: 20px;
	width: 100%;
	background: #000;
	z-index: 101;
}
header .logo {
	position: absolute;
	height: 12px;
	left: 10px;
	top: 4px;
}
header .logo svg {
	height: 100%;
	display: block;
}
header .logo svg * {
	fill: #fff;
}
header .more {
	position: absolute;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: flex-end;
	text-align: right;
	height: 12px;
	top: 4px;
	right: 10px;
	color: #fff;
	font-size: 12px;
	cursor: pointer;
	font-weight: 500;
	transition: all .2s ease-in-out;
}
header .more:hover {
	font-weight: 900;
}
.countdown {
	height: 100%;
	width: 100px;
	display: none;
	align-content: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: absolute;
	left: 50%;
	top:  0;
	transform: translateX(-50%);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
body.win .countdown,
body.lose .countdown {
	display: flex;
}
.blinking_colon {
	animation: blink 1s steps(2) infinite;
}
@keyframes blink {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
#game {
	width:  100%;
	height: calc(100vh - calc(100vh - 100% - 20px));
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px;
	position: relative;
	margin-top: 20px;
}
#game article {
	height: 80px;
	width:  80px;
	border: 1px solid #000;
	border-radius: 100%;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 52px;
	margin: 6px;
	cursor: pointer;
	transition: all .3s ease-in-out;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.win #game article,
.lose #game article {
	pointer-events: none;
}
#game article.selected {
	height: 110px;
	width:  110px;
	font-size: 64px;
	font-weight: 200;
	background: #000;
	color: #fff;
}
#game article.exact,
#game article.exact.selected {
	background: #00de66;
	color: #fff;
	border: 0;
	pointer-events: none;
}
#game article.almost,
#game article.almost.selected {
	background: #ff3b3b;
	color: #fff;
	border: 0;
}
body.win article,
body.lose article {
	border: 0 !important;
	background: #fff;
	box-shadow: none !important;
}
body.win article {
	color: #00de66;
}
body.win.win1 article {
	color: #0fbdf2;
}
body.win.win2 article {
	color: #00de66;
}
body.win.win3 article {
	color: #ff8a30;
}
body.win.win4 article,
body.win.win4 .remaining,
body.win.win4 .share {
	color: #000;
}
body.lose article {
	color: #ff3b3b;
}
.shake {
	animation: shake .5s forwards;
}
@keyframes shake {
	0% {
		transform: rotate(0deg);
	}
	20% {
		transform: rotate(30deg);
	}
	40% {
		transform: rotate(-20deg);
	}
	60% {
		transform: rotate(10deg);
	}
	80% {
		transform: rotate(-5deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
.gauge {
	position: absolute;
	height: 50px;
	left: 50px;
	bottom: 0;
	width: calc(100% - 100px);
	transition: opacity .3s ease-in-out;
}
body.win .gauge,
body.lose .gauge {
	opacity: 0 !important;
	pointer-events: none;
}
.keys {
	height: calc(100vh - calc(100vh - 100%));
	width: 50px;
	display: flex;
	align-content: center;
	align-items: center;
	flex-flow: column;
	justify-content: space-evenly;
	text-align: center;
	position: fixed;
	left: 0;
	top:  0;
	transition: all .2s ease-in-out;
}
.keys.second {
	left: auto;
	right: 0;
}
.win .keys,
.lose .keys {
	opacity: 0;
	pointer-events: none;
}
.keys span {
	height: 36px;
	width:  36px;
	border-radius: 100%;
	display: block;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	transition: all .2s ease-in-out;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.keys span:hover {
	font-size: 16px;
}
.keys span.exact,
.ticks span.exact {
	color: #00de66;
	font-weight: 700;
}
.keys span.almost,
.ticks span.almost {
	color: #ff3b3b;
	font-weight: 700;
}
.keys span.nope,
.ticks span.nope {
	color: #a3a3a3;
	font-weight: 700;
	position: relative;
}
.keys span.nope::after,
.ticks span.nope::after {
	content: "";
	position: absolute;
	top:  50%;
	left: 50%;
	height: 1px;
	width: 100%;
	max-width: 14px;
	background: #ff3b3b;
	transform: translate(-50%,-50%) rotate(8deg);
}
.gauge .pointer {
	height: 30px;
	width:  30px;
	border-radius: 100%;
	background: #00cfff;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	cursor: move;
	transition: all .2s ease-in-out;
}
.gauge .ticks {
	height: 30px;
	width: 100%;
	position: absolute;
	left: 0;
	top:  -30px;
	margin-left: calc(100% / 27);
}
.gauge .ticks span {
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: absolute;
	left: 0;
	top:  0;
	pointer-events: none;
	opacity: 0;
/* 	transition: opacity .2s ease-in-out; */
}
.gauge .ticks span.active {
	opacity: 1;
}
.range {
	width: 100%;
	height: 1px;
   -webkit-appearance: none;
	background: transparent;
	outline: none;
	position: relative;
	z-index: 2;
	transition: background .2s ease-in-out;
}
.gauge:hover .range {
	background: transparent;
}
input[type=range]::-webkit-slider-runnable-track {
	background: transparent;
	color: transparent;
}
input[type=range]::-moz-range-track {
	background: transparent;
	color: transparent;
}
input[type=range]::-ms-track {
	background: transparent;
	color: transparent;
}
.range::-webkit-slider-thumb {
   -webkit-appearance: none;
	height: 30px;
	width:  30px;
	background: #000;
	box-shadow: 0 0 0 0;
	border: 2px solid #fff;
	border-radius: 100%;
	cursor: move;
	transition: all .2s ease-in-out;
	position: relative;
	z-index: 2;
}
.range::-moz-range-thumb {
   -webkit-appearance: none;
	height: 30px;
	width:  30px;
	background: #000;
	box-shadow: 0 0 0 0;
	border: 2px solid #fff;
	border-radius: 100%;
	cursor: move;
	transition: all .2s ease-in-out;
	position: relative;
	z-index: 2;
}
.range::-ms-thumb {
   -webkit-appearance: none;
	height: 30px;
	width:  30px;
	background: #000;
	box-shadow: 0 0 0 0;
	border: 2px solid #fff;
	border-radius: 100%;
	cursor: move;
	transition: all .2s ease-in-out;
	position: relative;
	z-index: 2;
}
.remaining {
	width:  50px;
	height: 50px;
	position: absolute;
	top:  50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin-top: -150px;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 24px;
}
body.win .remaining {
	font-size: 32px;
	color: #fff;
}
body.lose .remaining {
	display: none;
}
.share {
	color: #fff;
	font-weight: 500;
	position: absolute;
	top: 50%;
	right: 0;
	width: 80px;
	height: 20px;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transform: translatY(-50%);
	cursor: pointer;
	transition: all .2s ease-in-out;
}
.share.loading {
	animation: loading .5s infinite;
}
@keyframes loading {
	0% {
		letter-spacing: 0;
	}
	50% {
		letter-spacing: .2em;
	}
	100% {
		letter-spacing: 0;
	}	
}
.share:hover {
	font-weight: 900;
}
.share.loaded:hover {
	font-weight: inherit;
}
.win .share,
.lose .share {	
	opacity: 1;
	pointer-events: all;
}
#more {
	width:  100%;
	height: 100%;
	left: 0;
	top:  -100%;
	position: fixed;
	background: #000;
	z-index: 100;
	pointer-events: none;
	overflow: hidden;
	padding: 50px;
	opacity: 0;
	transition: opacity .3s ease-in-out, top .3s .3s ease-in-out;
	z-index: 101;
}
body.show_more #more {	
	top:  0;
	opacity: 1;
	pointer-events: all;
	transition: opacity .3s ease-in-out, top 0s 0s;
}
.how_to_play {
	position: relative;
	padding-bottom: 50px;
	color: #fff;
	line-height: 1.7;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling:scroll;
}
#more::after {
	content: "\00d7";
	color: #fff;
	font-weight: 200;
	cursor: pointer;
	position: fixed;
	top:   0px;
	right: 0px;
	height: 50px;
	width:  50px;
	font-size: 50px;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	text-align: center;
}
#more .logo {
	height: 40px;
	margin-bottom: 30px;
}
#more .logo svg {
	height: 100%;
	display: block;
}
#more .logo svg * {
	fill: #fff;
}
.how_to_play h1,
.how_to_play h2 {
	margin-top: 20px;
	margin-bottom: 20px;
}
.how_to_play .explain {
	margin-bottom: 10px;
	font-size: 18px;
}
.how_to_play .explain .feature {
	font-size: 150%;
}
.blue {
	color: #0fbdf2;
	font-weight: 700;
}
.green {
	color: #00de66;
	font-weight: 700;
}
.orange {
	color: #ff8a30;
	font-weight: 700;
}
.yellow {
	color: #fce200;
	font-weight: 700;
}
.red {
	color: #ff3b3b;
	font-weight: 700;
}

		@media (max-width: 900px) {
		/* PHONE STYLES 
		------------------------------ */
		
		#game {
			padding: 0;
			flex-flow: column;
			height: calc((100vh - calc(100vh - 100%)) - 140px);
			max-width: 400px;
			max-height: 700px;
			position: absolute;
			left: 50%;
			top:  50%;
			margin: 0;
			transform: translate(-50%,-50%);
		}
		.short #game {
			height: calc((100vh - calc(100vh - 100%)) - 180px);
		}
		.short #game article {
			height: 50px;
			width:  50px;
			font-size: 30px;
		}
		.short.mini #game article {
			height: 40px;
			width:  40px;
			font-size: 24px;
		}
		.short #game article.selected {
			height: 80px;
			width:  80px;
			font-size: 60px;
			font-weight: 200;
			background: #000;
			color: #fff;
		}
		.short.mini #game article.selected {
			height: 60px;
			width:  60px;
			font-size: 40px;
		}
		.remaining {
			height: 50px;
			width: 100%;
			top: -30px;
			left: 0;
			margin: 0;
			pointer-events: none;
			position: absolute;
			display: flex;
			align-content: center;
			align-items: center;
			justify-content: center;
			text-align: center;
			transform: none;
		}
		.win .remaining {
			top: -10px;
		}
		.gauge {
			margin-bottom: -80px;
		}
		.mini .remaining {
			top: -60px;
		}
		.win.mini .remaining {
			top: -50px;
		}
		.gauge .pointer {
			height: 30px !important;
			width:  30px;
			border-radius: 100%;
			background: #000;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			cursor: move;
			transition: all .2s ease-in-out;
		}
		.range::-webkit-slider-thumb,
		.range::-moz-range-thumb,
		.range::-ms-thumb {
		   -webkit-appearance: none;
			height: 30px;
			width:  30px;
			background: #000;
			box-shadow: 0 0 0 0;
			border: 2px solid #fff;
			cursor: move;
			transition: all .2s ease-in-out;
			position: relative;
			z-index: 2;
		}		
		.share {
			top: auto;
			right: auto;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}		
		.mini .share {
			bottom: -30px;
		}
		
		/* ----------------------------
		END PHONE STYLES */
}

				@media (min-width: 481px) and (max-width: 900px) and (orientation: landscape) {
				/* PHONE LANDSCAPE STYLES 
				------------------------------ */
				
				#game {
					flex-flow: row;
					max-width: 100%;
					max-height: 400px;
					height: calc(100vh - calc(100vh - 100% - 20px));
				}
				.short #game {
					height: calc(100vh - calc(100vh - 100% + 60px));
					margin-top: 10px;
				}			
				.keys {
					height: 50px;
					width: 100%;
					display: flex;
					align-content: center;
					align-items: center;
					flex-flow: row;
					justify-content: space-evenly;
					text-align: center;
					position: absolute;
					left: 0;
					top:  0;
					transition: all .2s ease-in-out;
				}
				.keys.second {
					left: 0;
					top: auto;
					bottom: 0;
					right: auto;
				}
				.gauge {
					width: calc(100% - 100px);
					height: 50px;
					transform: rotate(90deg);
					right: auto;
					margin: 0;
					transform-origin: left top;
					top: 50px;
					left: 97.25%;
				}
				.ticks {
					margin-top: 64px;
				}
				.remaining {
					height: 100%;
					width:  50px;
					left: 10px;
					top:  0;
					display: flex;
					align-content: center;
					align-items: center;
					justify-content: center;
					text-align: center;
					margin: 0;
					transform: none;
					pointer-events: none;
				}
				.mini .remaining,
				.win.mini .remaining {
					top: 0;
				}
				.share {
					left: auto;
					bottom: auto;
					top: 50%;
					right: 20px;
					transform: translateY(-50%);
				}
				.mini .share {
					right: 5px;
				}
				
				/* ----------------------------
				PHONE LANDSCAPE STYLES */
				}
				
				
						@media (min-width: 900px) {
						/* DESKTOP STYLES 
						------------------------------ */
						
						#game {
							max-width: 900px;
							margin: 0 auto;
						}					
						.keys {
							height: 50px;
							width: 100%;
							display: flex;
							align-content: center;
							align-items: center;
							flex-flow: row;
							justify-content: space-evenly;
							text-align: center;
							position: absolute;
							left: 50%;
							top:  50%;
							margin-top: -150px;
							transform: translate(-50%,-50%);
							transition: all .2s ease-in-out;
						}
						.keys.second {
							left: 50%;
							right: auto;
							margin-top: 150px;
						}
						.remaining {
							margin-top: 0;
							margin-left: -400px;
						}
						.gauge {
							width: 250px;
							transform: rotate(90deg);
							top: 50%;
							right: 0;
							margin: 0;
							margin-top: -25px;
							margin-left: 668px;
						}
						/* ----------------------------
						END DESKTOP STYLES */
						}