@font-face {
	font-family: 'IoskeleyMono';
	src: url('https://assets.codepen.io/1137/IoskeleyMono-Regular.woff2')
		format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IoskeleyMono';
	src: url('https://assets.codepen.io/1137/IoskeleyMono-Bold.woff2')
		format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--black-1: #252423;
	--black-2: #262422;
	--black-3: #262422;
	--black-4: #262422;
	--black-5: #272421;
	--black-6: #272421;
	--white-1: #f6f4f2;
	--white-2: #b8b6b3;
	--white-3: #9a9593;
	--white-4: #524f49;
	--white-5: #413d39;
	--white-6: #312e2b;
	--red-1: #ff4b4b;
	--red-2: #bf3e3e;
	--red-3: #9e3838;
	--red-4: #532a29;
	--red-5: #412726;
	--red-6: #322523;
	--corail-1: #ff8333;
	--corail-2: #bf672d;
	--corail-3: #9e582b;
	--corail-4: #533724;
	--corail-5: #412f23;
	--corail-6: #322922;
	--orange-1: #ffa828;
	--orange-2: #bf8026;
	--orange-3: #9e6d25;
	--orange-4: #523e23;
	--orange-5: #413422;
	--orange-6: #322b21;
	--yellow-1: #ffcc2a;
	--yellow-2: #bf9a27;
	--yellow-3: #9e8026;
	--yellow-4: #524723;
	--yellow-5: #413922;
	--yellow-6: #322d21;
	--citrus-1: #f9f640;
	--citrus-2: #bab836;
	--citrus-3: #9b9932;
	--citrus-4: #515027;
	--citrus-5: #403f24;
	--citrus-6: #323022;
	--lime-1: #b7ff54;
	--lime-2: #8bbe44;
	--lime-3: #759d3d;
	--lime-4: #42522b;
	--lime-5: #384027;
	--lime-6: #2d3123;
	--green-1: #6aff65;
	--green-2: #54be50;
	--green-3: #4a9e45;
	--green-4: #31522e;
	--green-5: #2c4029;
	--green-6: #273124;
	--emerald-1: #57f695;
	--emerald-2: #47b873;
	--emerald-3: #409962;
	--emerald-4: #2d5039;
	--emerald-5: #293f30;
	--emerald-6: #263128;
	--turquoise-1: #66ffbc;
	--turquoise-2: #52be8e;
	--turquoise-3: #479e77;
	--turquoise-4: #305242;
	--turquoise-5: #2b4035;
	--turquoise-6: #26312b;
	--cyan-1: #26f2d5;
	--cyan-2: #25b5a0;
	--cyan-3: #259686;
	--cyan-4: #244e48;
	--cyan-5: #233f39;
	--cyan-6: #23302d;
	--sega-1: #05dbe9;
	--sega-2: #0fa4ae;
	--sega-3: #138990;
	--sega-4: #1e4a4c;
	--sega-5: #203b3c;
	--sega-6: #212f2f;
	--sky-1: #33b3f1;
	--sky-2: #2e88b4;
	--sky-3: #2c7395;
	--sky-4: #26424e;
	--sky-5: #25363e;
	--sky-6: #242c2f;
	--indigo-1: #717aff;
	--indigo-2: #595fbe;
	--indigo-3: #4d519e;
	--indigo-4: #323351;
	--indigo-5: #2c2c3f;
	--indigo-6: #282630;
	--lavender-1: #a369ff;
	--lavender-2: #7d53be;
	--lavender-3: #6a489e;
	--lavender-4: #3e3051;
	--lavender-5: #342a3f;
	--lavender-6: #2b2530;
	--purple-1: #c06ddf;
	--purple-2: #9356a8;
	--purple-3: #7b4a8c;
	--purple-4: #45314b;
	--purple-5: #392b3c;
	--purple-6: #2f262d;
	--magenta-1: #e962bf;
	--magenta-2: #af4e90;
	--magenta-3: #93447a;
	--magenta-4: #4e2e43;
	--magenta-5: #3f2936;
	--magenta-6: #31252b;
	--pink-1: #ff86a7;
	--pink-2: #bf687f;
	--pink-3: #9f586b;
	--pink-4: #53363c;
	--pink-5: #412e32;
	--pink-6: #322729;
	--bg-1: #252423;
	--bg-2: #2a2928;
	--bg-3: #2f2e2d;
	--bg-4: #353433;
	--bg-5: #3a3938;
	--fg-1: #dddcda;
	--fg-2: #c6c3c1;
	--fg-3: #96918f;
	--fg-4: #65655e;
	--fg-5: #33332e;
	--input-border-radius: .25rem;
	--br: 1rem;
	--padding: 1rem;
	--border-width: 1px;
}

[data-color="fg"] {
	--color-1: var(--fg-1);
	--color-2: var(--fg-2);
	--color-3: var(--fg-3);
	--color-4: var(--fg-4);
	--color-5: var(--fg-5);
}
[data-color="bg"] {
	--color-1: var(--bg-1);
	--color-2: var(--bg-2);
	--color-3: var(--bg-3);
	--color-4: var(--bg-4);
	--color-5: var(--bg-5);
}
[data-color="0"] {
	--color-1: var(--red-1);
	--color-2: var(--red-2);
	--color-3: var(--red-3);
	--color-4: var(--red-4);
	--color-5: var(--red-5);
}
[data-color="1"] {
	--color-1: var(--corail-1);
	--color-2: var(--corail-2);
	--color-3: var(--corail-3);
	--color-4: var(--corail-4);
	--color-5: var(--corail-5);
}
[data-color="2"] {
	--color-1: var(--orange-1);
	--color-2: var(--orange-2);
	--color-3: var(--orange-3);
	--color-4: var(--orange-4);
	--color-5: var(--orange-5);
}
[data-color="3"] {
	--color-1: var(--yellow-1);
	--color-2: var(--yellow-2);
	--color-3: var(--yellow-3);
	--color-4: var(--yellow-4);
	--color-5: var(--yellow-5);
}
[data-color="4"] {
	--color-1: var(--citrus-1);
	--color-2: var(--citrus-2);
	--color-3: var(--citrus-3);
	--color-4: var(--citrus-4);
	--color-5: var(--citrus-5);
}
[data-color="5"] {
	--color-1: var(--lime-1);
	--color-2: var(--lime-2);
	--color-3: var(--lime-3);
	--color-4: var(--lime-4);
	--color-5: var(--lime-5);
}
[data-color="6"] {
	--color-1: var(--green-1);
	--color-2: var(--green-2);
	--color-3: var(--green-3);
	--color-4: var(--green-4);
	--color-5: var(--green-5);
}
[data-color="7"] {
	--color-1: var(--emerald-1);
	--color-2: var(--emerald-2);
	--color-3: var(--emerald-3);
	--color-4: var(--emerald-4);
	--color-5: var(--emerald-5);
}
[data-color="8"] {
	--color-1: var(--turquoise-1);
	--color-2: var(--turquoise-2);
	--color-3: var(--turquoise-3);
	--color-4: var(--turquoise-4);
	--color-5: var(--turquoise-5);
}
[data-color="9"] {
	--color-1: var(--cyan-1);
	--color-2: var(--cyan-2);
	--color-3: var(--cyan-3);
	--color-4: var(--cyan-4);
	--color-5: var(--cyan-5);
}
[data-color="10"] {
	--color-1: var(--sega-1);
	--color-2: var(--sega-2);
	--color-3: var(--sega-3);
	--color-4: var(--sega-4);
	--color-5: var(--sega-5);
}
[data-color="11"] {
	--color-1: var(--sky-1);
	--color-2: var(--sky-2);
	--color-3: var(--sky-3);
	--color-4: var(--sky-4);
	--color-5: var(--sky-5);
}
[data-color="12"] {
	--color-1: var(--indigo-1);
	--color-2: var(--indigo-2);
	--color-3: var(--indigo-3);
	--color-4: var(--indigo-4);
	--color-5: var(--indigo-5);
}
[data-color="13"] {
	--color-1: var(--lavender-1);
	--color-2: var(--lavender-2);
	--color-3: var(--lavender-3);
	--color-4: var(--lavender-4);
	--color-5: var(--lavender-5);
}

*,
*:before,
*:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}

html,
body {
	background-color: var(--bg-1);
	color: var(--fg-1);
	font-family: 'IoskeleyMono', monospace, sans-serif;
}

.br {
	border-radius: var(--br);
}
.br .br {
	border-radius: calc(var(--br) * .5);
}
.br .br .br {
	border-radius: calc(var(--br) * .25);
}

.black {
	color: var(--bg-1);
}
.white {
	color: var(--fg-1);
}
.red {
	color: var(--red-1);
}
.orange {
	color: var(--corail-1);
}
.yellow {
	color: var(--yellow-1);
}
.blue {
	color: var(--sky-1);
}
.green {
	color: var(--green-1);
}

.grid {
	--one-cell: 100px;
	--border-color: rgba(255, 255, 255, .75);
	flex-grow: 1;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
}

.grid:before {
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
			-90deg,
			rgba(255, 255, 255, .05) 1px,
			transparent 1px
		),
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(-90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: calc(var(--one-cell) / 10) calc(var(--one-cell) / 10),
		calc(var(--one-cell) / 10) calc(var(--one-cell) / 10),
		var(--one-cell) var(--one-cell), var(--one-cell) var(--one-cell),
		var(--one-cell) var(--one-cell), var(--one-cell) var(--one-cell);
	background-position: 0 -1px;
	backface-visibility: hidden;
}

.grid:before {
	width: calc(75px + 100%);
	left: -75px;
}

@media (min-width: 500px) {
	.grid:before {
		width: 100%;
		left: 0;
	}
}

/* Logs */

.log {
	--width: 22ch;
	--height: 20ch;
	position: fixed;
	z-index: 10;
	top: 0;
	overflow-y: scroll;
	width: var(--width);
	height: var(--height);
	padding-left: 1ch;
	padding-right: 1ch;
	padding-bottom: 1ch;
	font-family: ui-monospace, monospace;
	white-space: pre;
	background-color: rgba(0, 0, 0, .5);
}

@keyframes reveal {
	from {
		opacity: 1;
	}
	to {
		opacity: .4;
	}
}

.log span {
	animation: reveal 2s ease-in-out forwards;
}

/* Inputs */

button,
select {
	width: 100%;
	flex-shrink: .5;
	border: none;
	background-color: var(--white-1);
	border-radius: var(--input-border-radius);
	white-space: nowrap;
	margin: 0;
	height: 2rem;
}

button {
	padding: 0 .75rem;
}

select:disabled,
button:disabled {
	background-color: var(--grey);
}

select:not(:disabled):hover,
button:not(:disabled):hover {
	cursor: pointer;
	background-color: var(--white-2);
}

legend {
	display: flex;
	gap: .5rem;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: 2rem;
}

label {
	display: flex;
	gap: .5rem;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	height: 2rem;
}

fieldset {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 1px;
}

fieldset.vertical {
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

fieldset > * {
	border-radius: 0;
}

fieldset > *:first-child {
	border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
}

fieldset > *:last-child {
	border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
}