:root {
	--axisSize: 20px;
	--backgroundColor: #002223;
	--controlActiveColor: #484848;
	--controlCornerRadius: 4px;
	--controlInactiveColor: #838383;
	--controlHoverColor: #0060FF;
	--controlHeight: 30px;
	--controlShadowColor: #cecece;
	--gridControlCornerRadius: 4px;
	--headerHeight: 40px;
	--uiBorderBottom: 1.5px solid #747474;
	--uiBorderLeft: 1.5px solid #d2d2d2;
	--uiBorderRight: 1.5px solid #898989;
	--uiBorderTop: 1.5px solid #ececec;
	--uiColor: #b3b3b3;
	--uiColorLighter: #cfcfcf;
	--uiColorDarker: #999999;
	--uiInputBackgroundColor: #e3e3e3;
}

body {
	background-color: var(--backgroundColor);
	color: #eeeeee;
	font-family: "Helvetica", "Arial", sans-serif;
	margin: 0px;
	padding: 20px;
	position: relative;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.box {
	background-color: #eeeeee;
	box-sizing: border-box;
	color: #000000;
	margin: 20px auto;
	max-width: 600px;
	padding: 20px;
	border-radius: 8px;
}
	.example-image {
		background: url('check-dark.svg');
		background-size: 30px 30px;
		display: inline-block;
	}
		.example-image img {
			max-width: 100%;
		}
	h1, h2, h3, p {
		margin: 0px auto;
		max-width: 600px;
		padding: 10px 0px;
	}
	button,
	#controls a {
		background: var(--uiColor);
		border-bottom: var(--uiBorderBottom);
		border-left: var(--uiBorderLeft);
		border-radius: var(--controlCornerRadius);
		border-right: var(--uiBorderRight);
		border-top: var(--uiBorderTop);
		box-sizing: border-box;
		color: var(--controlInactiveColor);
		cursor: pointer;
		display: inline-block;
		height: var(--controlHeight);
		line-height: var(--controlHeight);
		padding: 0px;
		position: relative;
		text-align: center;
		text-shadow: 1px 1px 1px var(--controlShadowColor);
		transition: background linear 0.2s, color linear 0.2s;
		vertical-align: top;
	}
		button:hover,
		#controls a:hover {
			background: #d9d9d9;
		}

/* 
	👆 Header
*/
#header {
	background: var(--uiColor);
	border-bottom: var(--uiBorderBottom);
	border-top: var(--uiBorderTop);
	height: var(--headerHeight);
	left: 0px;
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 20;
}
	h1 {
		color: var(--backgroundColor);
		left: 20px;
		margin: 0px;
		padding: 0px;
		position: absolute;
		transition: color 0.3s ease;
	}
		h1 a {
			text-decoration: none;
		}
		h1 img {
			height: 24px;
			margin-top: calc((var(--headerHeight) - 24px) / 2);
		}
	#framesButton {
		background: var(--uiColorLighter);
		color: #000000;
		font-size: 24px;
		line-height: 0px;
		opacity: 0;
		padding: 0px 0px 4px 0px;
		position: absolute;
		right: 110px;
		text-align: center;
		top: 5px;
		transform: scale(0);
		transition: opacity 0.4s ease, transform 0.4s ease;
		width: 40px;
	}
	#gridButton {
		background: var(--uiColorLighter);
		color: #000000;
		font-size: 24px;
		line-height: 0px;
		opacity: 0;
		padding: 0px 0px 4px 0px;
		position: absolute;
		right: 60px;
		text-align: center;
		top: 5px;
		transform: scale(0);
		transition: opacity 0.4s ease, transform 0.4s ease;
		width: 40px;
	}
	#closeButton {
		background: var(--uiColorLighter);
		color: #000000;
		font-size: 24px;
		line-height: 0px;
		opacity: 0;
		padding: 0px 0px 4px 0px;
		position: absolute;
		right: 10px;
		text-align: center;
		top: 5px;
		transform: scale(0);
		transition: opacity 0.4s ease, transform 0.4s ease;
		width: 40px;
	}
		.visible {
			opacity: 1 !important;
			transform: scale(1) !important;
		}

/*
	📥 Importer
*/
#importer {
	margin-top: 100px;
}
	#importer > h2,
	#importer > p {
		color: #eeeeee;
		margin: 10px auto;
		padding: 0px 20px;
		text-align: center;
	}
		a {
			color: #7bb9fc;
			transition: color linear 0.2s;
		}
			a:hover {
				color: #b2d7ff;
			}
	#dropBox {
		background: #00ab75;
		border: 10px solid #3dd4a4;
		border-radius: 30px;
		color: var(--backgroundColor);
		cursor: pointer;
		font-size: 72px;
		height: 133px;
		margin: 40px auto;
		padding: 0px;
		position: relative;
		text-align: center;
		transition: background 0.3s ease, border-color 0.3s ease;
		width: 140px;
	}
		#dropBoxIcon {
			color: #5cffcb;
			font-weight: bold;
			height: 100%;
			line-height: 123px;
			margin: 0px;
			padding: 0px;
			pointer-events: none;
			text-align: center;
			transition: transform 0.3s ease, color 0.3s ease;
			vertical-align: middle;
			width: 100%;
		}
			#dropBoxIcon.loading {
				animation: spin 1s linear infinite;
			}
				@keyframes spin {
					0% { transform: rotate(0deg); }
					100% { transform: rotate(360deg); }
				}
		#dropBox:hover,
		#dropBox.dragEnter {
			background: #009264;
			border: 10px solid #79ffd5;
		}
			#dropBox.dragEnter #dropBoxIcon {
				color: #bfffeb;
			}
		#spriteSheetFile {
			display: none;
		}

/*
	⚙️ Setup
*/
#setup {
	align-items: center;
	display: none;
	flex-direction: column;
	justify-content: center;
	margin-top: var(--headerHeight);
	min-height: calc(100vh - var(--headerHeight) - 40px);
	padding: 20px;
}
	#setup.visible {
		display: flex;
	}
	#setupPreview {
		background: url('check-dark.svg');
		background-size: 30px 30px;
		margin-top: -10%;
		max-height: 70%;
		max-width: 70%;
		position: relative;
	}
		#setupPreview img {
			width: 100%;
		}
		#gridOverlay {
			display: grid;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}
			.gridCell {
				border: 1px solid #f04848;
				margin: -0.5px;
				transition: background-color 0.2s ease;
			}
			.gridCell:hover {
				background-color: rgba(255, 0, 0, 0.15);
			}
		#gridAxisX {
			height: var(--controlHeight);
			right: -0.5px;
			position: absolute;
			top: 100%;
			width: calc(var(--controlHeight) * 3);
		}
		#gridAxisY {
			height: calc(var(--controlHeight) * 3);
			position: absolute;
			left: 100%;
			top: calc(100% - (var(--controlHeight) * 3));
			width: var(--controlHeight);
		}
			#gridAxisX button {
				font-size: 18px !important;
				height: 100%;
				width: var(--controlHeight);
			}
			#gridAxisY button {
				font-size: 18px !important;
				height: var(--controlHeight);
				width: 100%;
			}
			#gridAxisX input,
			#gridAxisY input {
				-webkit-appearance: none;
				-moz-appearance: textfield;
				background: var(--uiInputBackgroundColor);
				border: none;
				box-sizing: border-box;
				color: #333333;
				height: var(--controlHeight);
				line-height: var(--controlHeight);
				padding: 0px;
				text-align: center;
				width: var(--controlHeight);
			}
			#gridAxisX input {
				border-bottom: var(--uiBorderBottom) !important;
				border-top: var(--uiBorderBottom) !important;
			}
			#gridAxisY input {
				border-left: var(--uiBorderRight) !important;
				border-right: var(--uiBorderRight) !important;
			}
			#gridAxisX input::-webkit-outer-spin-button,
			#gridAxisX input::-webkit-inner-spin-button,
			#gridAxisY input::-webkit-outer-spin-button,
			#gridAxisY input::-webkit-inner-spin-button {
				-webkit-appearance: none;
				margin: 0;
			}
			#gridColumnsMinus {
				border-radius: 0px 0px 0px var(--gridControlCornerRadius);
			}
			#gridColumnsPlus {
				border-radius: 0px;
			}
			#gridRowsMinus {
				border-radius: 0px;
			}
			#gridRowsPlus {
				border-radius: 0px var(--gridControlCornerRadius) 0px 0px;
			}
		#setupButton {
			background: #00c546;
			border-bottom: 1px solid #006b25;
			border-left: 1px solid #5de68d;
			border-radius: 0px 0px var(--gridControlCornerRadius) 0px;
			border-right: 1px solid #006b25;
			border-top: 1px solid #9bffbe;
			bottom: calc(0px - (var(--controlHeight)));
			color: #006f27;
			font-size: 28px;
			height: var(--controlHeight);
			line-height: 0px;
			position: absolute;
			right: calc(-(var(--controlHeight)));
			text-shadow: 1px 1px 1px #60fc96;
			width: var(--controlHeight);
		}
			#setupButton:hover {
				background: #00e551;
				color: #00501c;
			}

/* 🎞️ Animation */
#animation {
	align-items: center;
	display: none;
	flex-direction: column;
	justify-content: center;
	margin-top: var(--headerHeight);
	min-height: calc(100vh - var(--headerHeight) - 40px);
	padding: 20px;
}
	#animation.visible {
		display: flex;
	}
	#canvas {
		background: url('check-dark.svg');
		background-size: 30px 30px;
		display: inline-block;
		position: relative;
		transition: transform 0.2s ease-out;
	}
		#image {
			background-repeat: no-repeat;
			height: 100%;
			image-rendering: crisp-edges;
			width: 100%;
		}

/*
	🎞️ Frames view
*/
#framesView {
	background: var(--backgroundColor);
	border-bottom: var(--uiBorderBottom);
	display: none;
	height: 74px;
	left: 0px;
	position: fixed;
	top: var(--headerHeight);
	transform: translateY(-100%);
	transition: transform 0.3s ease;
	width: 100%;
	z-index: 15;
}
	#framesView.visible {
		transform: translateY(0);
	}
	#framesContainer {
		display: flex;
		height: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}
		.frame-thumbnail {
			background: url('check-dark.svg');
			background-size: 30px 30px;
			border-right: 1px solid #ff0000;
			cursor: pointer;
			flex-shrink: 0;
			position: relative;
		}
		.frame-thumbnail:hover::after {
			background-color: rgba(255, 0, 0, 0.3);
			content: '';
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}
		.frame-thumbnail.active .frame-number {
			background: #880000;
			color: #ffffff;
		}
		.frame-image {
			display: block;
			image-rendering: crisp-edges;
		}
		.frame-number {
			background: #222222;
			border-top: 1px solid #ff0000;
			color: #ffffff;
			font-size: 12px;
			height: 10px;
			line-height: 10px;
			margin-bottom: 10px;
			overflow: hidden;
			padding: 2px 4px;
			text-align: center;
			white-space: nowrap;
		}

/* ▶️ Controls */
#controls {
	bottom: 80px;
	height: var(--controlHeight);
	left: calc(50% - 335px / 2);
	line-height: var(--controlHeight);
	position: fixed;
	transition: color ease-in-out 0.2s;
	width: 335px;
}
	#frameDimensions,
	#frameCount {
		color: #3fb777;
		font-size: 14px;
		text-align: center;
		position: absolute;
		width: 100%;
	}
	#frameDimensions {
		top: -50px;
	}
	#frameCount {
		top: -70px;
	}
	/* ⏱️ Timing */
	#zoom {
		position: relative;
	}
	#timingIcon {
		color: var(--uiColor);
		font-size: 28px;
		left: -45px;
		margin: 0px;
		padding: 0px;
		position: absolute;
		top: 0px;
	}
	#controls div input {
		-webkit-appearance: none;
		-moz-appearance: textfield;
		background: var(--uiInputBackgroundColor);
		border: none;
		border-radius: var(--controlCornerRadius);
		box-sizing: border-box;
		color: var(--uiColorDarker);
		font-size: 14px;
		font-weight: bold;
		height: var(--controlHeight);
		left: -15px;
		padding: 0px 0px 0px 10px;
		position: absolute;
		text-align: left;
		width: 75px;
	}
	#controls div input:not(:disabled) {
		color: #333333;
	}
	#controls div input:focus,
	#controls div input:active {
		outline: none;
	}
	#timingUnit {
		color: var(--uiColorDarker);
		font-size: 12px;
		left: 34px;
		margin: 0px;
		padding: 0px;
		position: absolute;
		top: 2px;
	}
	#controls div input::-webkit-outer-spin-button,
	#controls div input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	/* 🔎 Zoom buttons */
	#zoom {
		left: 45px;
		margin-bottom: 20px;
		position: relative;
		text-align: center;
	}
		#zoom button {
			font-weight: bold;
		}
			#zoom button span {
				border: var(--controlInactiveColor) 1.5px solid;
				border-radius: 30px;
				display: block;
				height: 18px;
				line-height: 16.5px !important;
				margin: 0px auto;
				position: relative;
				top: 0px !important;
				width: 18px;
			}
		#zoomIn {
			border-bottom-left-radius: 0px;
			border-top-left-radius: 0px;
		}
		#zoomValue {
			border-radius: 0px;
			font-size: 16px;
			line-height: 16.5px !important;
		}
		#zoomOut {
			border-bottom-right-radius: 0px;
			border-top-right-radius: 0px;
		}
		
	#animationType {
		font-weight: normal !important;
		padding-bottom: 2px;
		right: 45px !important;
	}
		#animationType span {
			border: none !important;
			font-size: 30px !important;
			transform: scaleX(-1);
		}
	/* ▶️ Playback buttons */
	button, #controls a {
		width: 45px;
	}
		#controls button {
			cursor: not-allowed;
		}
		#controls.active button {
			color: var(--controlActiveColor);
			cursor: pointer;
		}
		#controls button > span {
			font-size: 18px;
			left: 1px;
			line-height: var(--controlHeight);
			position: relative;
			top: -0.5px;
		}
			#stepBackward span {
				padding-right: 4px;
			}
			#stepForward span {
				padding-right: 10px;
			}
			#controls button > span > span {
				left: 10px;
				position: absolute;
			}
			#about, #loopToggle, #animationType {
				font-weight: bold;
				position: absolute;
				width: 35px !important;
			}
			#about {
				color: var(--controlActiveColor) !important;
				cursor: pointer !important;
				font-size: 20px;
				margin-right: 20px;
				text-decoration: none;
			}
				#about:hover {
					color: var(--controlHoverColor) !important;
				}
			#playPause span {
				font-size: 24px !important;
				top: -1.5px !important;
				font-family: "Arial", "Helvetica", monospace !important;
				font-variant-emoji: text !important;
			}
			#playPause,
			#stepBackward,
			#stepForward {
				border-radius: 0px;
			}
			#stepBackward span,
			#jumpFirst span {
				display: inline-block;
				transform: scaleX(-1);
			}
				#stepBackward span span {
					transform: scaleX(1);
				}
			.jumpLine {
				background: var(--controlInactiveColor);
				border-radius: 2px;
				height: 12.5px;
				position: absolute;
				right: -1px;
				top: 4.5px;
				width: 3px;
			}
				#jumpFirst .jumpLine {
					top: 8.5px !important;
				}
				#controls.active .jumpLine {
					background: var(--controlActiveColor);
				}
			#jumpFirst {
				border-radius: var(--controlCornerRadius) 0px 0px var(--controlCornerRadius);
			}
			#jumpLast {
				border-radius: 0px var(--controlCornerRadius) var(--controlCornerRadius) 0px;
			}
			#loopToggle {
				margin-left: 20px;
			}
				#loopToggle span {
					font-size: 24px !important;
					top: -3px !important;
				}
				#controls.active #loopToggle.active span {
					color: var(--controlHoverColor) !important;
				}
				#controls.active #animationType.active span {
					color: var(--controlHoverColor) !important;
				}