*,
*::before,
*::after {
	box-sizing: 'border-box';
	padding: 0;
	margin: 0;
}

:root {
	font-family: 'Inter', 'Roboto', sans-serif;

	/* Tailwind colors */
	--color-red-50: lab(96.5005% 4.18508 1.52328);
	--color-red-100: lab(92.243% 10.2865 3.83865);
	--color-red-200: lab(86.017% 19.8815 7.75869);
	--color-red-300: lab(76.5514% 36.422 15.5335);
	--color-red-400: lab(63.7053% 60.745 31.3109);
	--color-red-500: lab(55.4814% 75.0732 48.8528);
	--color-red-600: lab(48.4493% 77.4328 61.5452);
	--color-red-700: lab(40.4273% 67.2623 53.7441);
	--color-red-800: lab(33.7174% 55.8993 41.0293);
	--color-red-900: lab(28.5139% 44.5539 29.0463);
	--color-red-950: lab(13.003% 29.04 16.7519);
	--color-orange-50: lab(97.7008% 1.53735 5.90649);
	--color-orange-100: lab(94.7127% 3.58394 14.3151);
	--color-orange-200: lab(88.4871% 9.94918 28.8378);
	--color-orange-300: lab(80.8059% 21.7313 50.4455);
	--color-orange-400: lab(70.0429% 42.5156 75.8207);
	--color-orange-500: lab(64.272% 57.1788 90.3583);
	--color-orange-600: lab(57.1026% 64.2584 89.8886);
	--color-orange-700: lab(46.4615% 57.7275 70.8507);
	--color-orange-800: lab(37.1566% 46.6433 50.5562);
	--color-orange-900: lab(30.2951% 36.0434 37.671);
	--color-orange-950: lab(14.1747% 23.4515 19.4461);
	--color-amber-50: lab(98.6252% -0.635922 8.42309);
	--color-amber-100: lab(95.916% -1.21653 23.111);
	--color-amber-200: lab(91.7203% -0.505269 49.9084);
	--color-amber-300: lab(86.4156% 6.13147 78.3961);
	--color-amber-400: lab(80.1641% 16.6016 99.2089);
	--color-amber-500: lab(72.7183% 31.8672 97.9407);
	--color-amber-600: lab(60.3514% 40.5624 87.1228);
	--color-amber-700: lab(47.2709% 42.9082 69.2966);
	--color-amber-800: lab(37.8822% 37.1699 52.2718);
	--color-amber-900: lab(31.2288% 30.2627 40.0378);
	--color-amber-950: lab(15.8111% 20.9107 23.3752);
	--color-yellow-50: lab(98.6846% -1.79055 9.7766);
	--color-yellow-100: lab(97.3564% -4.51407 27.344);
	--color-yellow-200: lab(94.3433% -5.00429 52.9663);
	--color-yellow-300: lab(89.7033% -0.480294 84.4917);
	--color-yellow-400: lab(83.2664% 8.65132 106.895);
	--color-yellow-500: lab(76.3898% 14.5258 98.4589);
	--color-yellow-600: lab(62.7799% 22.4197 86.1544);
	--color-yellow-700: lab(47.8202% 25.2426 66.5015);
	--color-yellow-800: lab(38.7484% 23.5833 51.4916);
	--color-yellow-900: lab(32.3865% 21.1273 38.5959);
	--color-yellow-950: lab(16.8146% 15.7422 23.1133);
	--color-lime-50: lab(98.7039% -5.32573 10.2149);
	--color-lime-100: lab(96.8662% -11.7133 22.0854);
	--color-lime-200: lab(94.0718% -22.5338 42.5238);
	--color-lime-300: lab(89.9218% -35.6546 68.5254);
	--color-lime-400: lab(83.7876% -45.0447 88.4738);
	--color-lime-500: lab(75.3197% -46.6547 86.1778);
	--color-lime-600: lab(61.1055% -41.0235 73.1483);
	--color-lime-700: lab(47.246% -32.2589 55.8249);
	--color-lime-800: lab(37.7655% -25.1694 43.0683);
	--color-lime-900: lab(31.9931% -20.7654 33.7379);
	--color-lime-950: lab(16.5113% -15.1841 22.0145);
	--color-green-50: lab(98.1563% -5.60117 2.75915);
	--color-green-100: lab(96.1861% -13.8464 6.52365);
	--color-green-200: lab(92.4222% -26.4702 12.9427);
	--color-green-300: lab(86.9953% -47.2691 25.0054);
	--color-green-400: lab(78.503% -64.9265 39.7492);
	--color-green-500: lab(70.5521% -66.5147 45.8073);
	--color-green-600: lab(59.0978% -58.6621 41.2579);
	--color-green-700: lab(47.0329% -47.0239 31.4788);
	--color-green-800: lab(37.4616% -36.7971 22.9692);
	--color-green-900: lab(30.797% -29.6927 17.382);
	--color-green-950: lab(15.6845% -20.4225 11.7249);
	--color-emerald-50: lab(97.8462% -6.94966 1.85487);
	--color-emerald-100: lab(94.9004% -17.0769 5.63836);
	--color-emerald-200: lab(90.2247% -31.039 9.47084);
	--color-emerald-300: lab(83.9203% -48.7124 13.8849);
	--color-emerald-400: lab(75.0771% -60.7313 19.4147);
	--color-emerald-500: lab(66.9756% -58.27 19.5419);
	--color-emerald-600: lab(55.0481% -49.9246 15.93);
	--color-emerald-700: lab(44.4871% -41.0396 11.0361);
	--color-emerald-800: lab(35.3675% -33.1188 8.04002);
	--color-emerald-900: lab(28.8637% -26.9249 5.45986);
	--color-emerald-950: lab(15.0582% -17.9507 2.38369);
	--color-teal-50: lab(98.3189% -4.74921 -0.111711);
	--color-teal-100: lab(95.1845% -17.4212 -0.425422);
	--color-teal-200: lab(90.7612% -33.1343 -0.542295);
	--color-teal-300: lab(84.8977% -48.1516 -1.3321);
	--color-teal-400: lab(76.0109% -53.3483 -2.27906);
	--color-teal-500: lab(67.3859% -49.0983 -2.63511);
	--color-teal-600: lab(55.0223% -41.0774 -3.90277);
	--color-teal-700: lab(44.4134% -33.1436 -4.22149);
	--color-teal-800: lab(35.5975% -26.6648 -4.34487);
	--color-teal-900: lab(29.506% -21.4706 -3.59886);
	--color-teal-950: lab(16.6371% -15.3183 -3.81732);
	--color-cyan-50: lab(98.3304% -5.97432 -2.62108);
	--color-cyan-100: lab(95.3146% -13.8285 -6.84732);
	--color-cyan-200: lab(91.0821% -24.0435 -12.8306);
	--color-cyan-300: lab(85.3886% -36.7636 -21.5716);
	--color-cyan-400: lab(76.6045% -40.9406 -29.6231);
	--color-cyan-500: lab(67.805% -35.3952 -30.2018);
	--color-cyan-600: lab(55.1767% -26.7496 -30.5139);
	--color-cyan-700: lab(44.7267% -21.5987 -26.118);
	--color-cyan-800: lab(36.5114% -17.1989 -21.6292);
	--color-cyan-900: lab(30.372% -13.1853 -18.7887);
	--color-cyan-950: lab(19.1528% -9.68757 -15.5267);
	--color-sky-50: lab(97.3623% -2.33802 -4.13098);
	--color-sky-100: lab(94.3709% -4.56053 -8.23453);
	--color-sky-200: lab(88.6983% -11.3978 -16.8488);
	--color-sky-300: lab(80.3307% -20.2945 -31.385);
	--color-sky-400: lab(70.687% -23.6078 -45.9483);
	--color-sky-500: lab(63.3038% -18.433 -51.0407);
	--color-sky-600: lab(51.7754% -11.4712 -49.8349);
	--color-sky-700: lab(41.6013% -9.10804 -42.5647);
	--color-sky-800: lab(35.164% -9.57692 -34.4068);
	--color-sky-900: lab(29.1959% -8.34689 -28.2453);
	--color-sky-950: lab(17.8299% -5.31271 -21.1584);
	--color-blue-50: lab(96.492% -1.14644 -5.11479);
	--color-blue-100: lab(92.0301% -2.24757 -11.6453);
	--color-blue-200: lab(86.15% -4.04379 -21.0797);
	--color-blue-300: lab(77.5052% -6.4629 -36.42);
	--color-blue-400: lab(65.0361% -1.42065 -56.9802);
	--color-blue-500: lab(54.1736% 13.3369 -74.6839);
	--color-blue-600: lab(44.0605% 29.0279 -86.0352);
	--color-blue-700: lab(36.9089% 35.0961 -85.6872);
	--color-blue-800: lab(30.2514% 27.7853 -70.2699);
	--color-blue-900: lab(26.1542% 15.7545 -51.5504);
	--color-blue-950: lab(15.6723% 8.86232 -32.2945);
	--color-indigo-50: lab(95.4818% 0.411302 -6.78529);
	--color-indigo-100: lab(91.6577% 1.04591 -12.7199);
	--color-indigo-200: lab(84.4329% 3.18977 -23.9688);
	--color-indigo-300: lab(74.0235% 8.54138 -41.6075);
	--color-indigo-400: lab(59.866% 22.4834 -64.4485);
	--color-indigo-500: lab(48.295% 38.3129 -81.9673);
	--color-indigo-600: lab(38.4009% 52.6132 -92.3857);
	--color-indigo-700: lab(32.4486% 49.2217 -84.6695);
	--color-indigo-800: lab(26.6645% 37.9804 -68.6402);
	--color-indigo-900: lab(23.3911% 24.6978 -50.4718);
	--color-indigo-950: lab(12.4853% 14.9672 -31.3418);
	--color-violet-50: lab(96.2416% 2.28849 -5.51657);
	--color-violet-100: lab(93.0838% 4.35197 -9.88284);
	--color-violet-200: lab(87.0888% 8.53688 -19.4189);
	--color-violet-300: lab(76.7419% 18.3911 -37.0706);
	--color-violet-400: lab(62.8239% 34.9159 -60.0512);
	--color-violet-500: lab(49.9355% 55.1776 -81.8963);
	--color-violet-600: lab(41.088% 68.9966 -91.995);
	--color-violet-700: lab(35.2783% 67.9912 -88.793);
	--color-violet-800: lab(29.3188% 57.7986 -76.1493);
	--color-violet-900: lab(24.3783% 45.7525 -61.4902);
	--color-violet-950: lab(14.0706% 33.3353 -46.7553);
	--color-purple-50: lab(97.1627% 2.99937 -4.13398);
	--color-purple-100: lab(93.3333% 6.97437 -9.83434);
	--color-purple-200: lab(87.8405% 13.4282 -18.7159);
	--color-purple-300: lab(78.3298% 26.2195 -34.9499);
	--color-purple-400: lab(63.6946% 47.6127 -59.2066);
	--color-purple-500: lab(52.0183% 66.11 -78.2316);
	--color-purple-600: lab(43.0295% 75.21 -86.5669);
	--color-purple-700: lab(36.1758% 69.8525 -80.0381);
	--color-purple-800: lab(30.6017% 56.7637 -64.4751);
	--color-purple-900: lab(24.9401% 45.2703 -51.2728);
	--color-purple-950: lab(14.8253% 38.9005 -44.5861);
	--color-fuchsia-50: lab(97.1083% 4.46233 -4.09334);
	--color-fuchsia-100: lab(93.9419% 9.57647 -9.08735);
	--color-fuchsia-200: lab(87.7108% 19.9958 -18.2054);
	--color-fuchsia-300: lab(78.5378% 39.3533 -32.9615);
	--color-fuchsia-400: lab(66.1178% 66.0652 -52.4733);
	--color-fuchsia-500: lab(56.4256% 83.132 -64.639);
	--color-fuchsia-600: lab(47.5131% 83.4271 -63.0363);
	--color-fuchsia-700: lab(39.787% 72.2653 -53.1244);
	--color-fuchsia-800: lab(32.904% 60.2883 -43.6569);
	--color-fuchsia-900: lab(27.755% 48.6174 -34.3553);
	--color-fuchsia-950: lab(15.7348% 39.0235 -27.4073);
	--color-pink-50: lab(96.4459% 4.53997 -1.49434);
	--color-pink-100: lab(93.5864% 9.01193 -3.15079);
	--color-pink-200: lab(87.4504% 19.6 -6.46662);
	--color-pink-300: lab(77.8308% 38.525 -10.5394);
	--color-pink-400: lab(64.5597% 64.3615 -12.7988);
	--color-pink-500: lab(56.9303% 76.8162 -8.07021);
	--color-pink-600: lab(49.5493% 79.8381 2.31768);
	--color-pink-700: lab(42.1737% 71.8009 7.42233);
	--color-pink-800: lab(34.9559% 60.2885 5.99639);
	--color-pink-900: lab(29.4367% 49.3962 3.35757);
	--color-pink-950: lab(15.6116% 35.2166 3.53979);
	--color-rose-50: lab(96.2369% 4.94155 1.28011);
	--color-rose-100: lab(92.8221% 9.86832 2.60075);
	--color-rose-200: lab(86.806% 19.1909 4.07754);
	--color-rose-300: lab(76.6339% 38.3549 9.68835);
	--color-rose-400: lab(64.4125% 63.0291 19.2068);
	--color-rose-500: lab(56.101% 79.4328 31.4532);
	--color-rose-600: lab(49.1882% 81.577 36.0311);
	--color-rose-700: lab(41.1651% 71.6251 30.3087);
	--color-rose-800: lab(34.6481% 60.802 20.1957);
	--color-rose-900: lab(29.7104% 51.514 12.6253);
	--color-rose-950: lab(14.2323% 34.0086 9.80922);
	--color-slate-50: lab(98.1434% -0.369519 -1.05966);
	--color-slate-100: lab(96.286% -0.852436 -2.46847);
	--color-slate-200: lab(91.7353% -0.998765 -4.76968);
	--color-slate-300: lab(84.7652% -1.94535 -7.93337);
	--color-slate-400: lab(65.5349% -2.25151 -14.5072);
	--color-slate-500: lab(48.0876% -2.03595 -16.5814);
	--color-slate-600: lab(35.5623% -1.74978 -15.4316);
	--color-slate-700: lab(26.9569% -1.47016 -15.6993);
	--color-slate-800: lab(16.132% -0.318035 -14.6672);
	--color-slate-900: lab(7.78673% 1.82345 -15.0537);
	--color-slate-950: lab(1.76974% 1.32743 -9.28855);
	--color-gray-50: lab(98.2596% -0.247031 -0.706708);
	--color-gray-100: lab(96.1596% -0.0823438 -1.13575);
	--color-gray-200: lab(91.6229% -0.159115 -2.26791);
	--color-gray-300: lab(85.1236% -0.612259 -3.7138);
	--color-gray-400: lab(65.9269% -0.832707 -8.17473);
	--color-gray-500: lab(47.7841% -0.393182 -10.0268);
	--color-gray-600: lab(35.6337% -1.58697 -10.8425);
	--color-gray-700: lab(27.1134% -0.956401 -12.3224);
	--color-gray-800: lab(16.1051% -1.18239 -11.7533);
	--color-gray-900: lab(8.11897% 0.811279 -12.254);
	--color-gray-950: lab(1.90334% 0.278696 -5.48866);
	--color-zinc-50: lab(98.26% 0 0);
	--color-zinc-100: lab(96.1634% 0.0993311 -0.364041);
	--color-zinc-200: lab(90.6853% 0.399232 -1.45452);
	--color-zinc-300: lab(84.9837% 0.601262 -2.17986);
	--color-zinc-400: lab(65.6464% 1.53497 -5.42429);
	--color-zinc-500: lab(47.8878% 1.65477 -5.77283);
	--color-zinc-600: lab(35.1166% 1.78212 -6.1173);
	--color-zinc-700: lab(26.8019% 1.35387 -4.68303);
	--color-zinc-800: lab(15.7305% 0.613764 -2.16959);
	--color-zinc-900: lab(8.30603% 0.618205 -2.16572);
	--color-zinc-950: lab(2.51107% 0.242703 -0.886115);
	--color-neutral-50: lab(98.26% 0 0);
	--color-neutral-100: lab(96.52% -0.0000298023 0.0000119209);
	--color-neutral-200: lab(90.952% 0 -0.0000119209);
	--color-neutral-300: lab(84.92% 0 -0.0000119209);
	--color-neutral-400: lab(66.128% -0.0000298023 0.0000119209);
	--color-neutral-500: lab(48.496% 0 0);
	--color-neutral-600: lab(34.924% 0 0);
	--color-neutral-700: lab(27.036% 0 0);
	--color-neutral-800: lab(15.204% 0 -0.00000596046);
	--color-neutral-900: lab(7.78201% -0.0000149012 0);
	--color-neutral-950: lab(2.75381% 0 0);
	--color-stone-50: lab(98.2686% -0.0991821 0.364304);
	--color-stone-100: lab(96.5286% -0.0991821 0.364268);
	--color-stone-200: lab(91.055% 0.663072 0.865579);
	--color-stone-300: lab(84.7909% 0.928015 1.59738);
	--color-stone-400: lab(66.2166% 1.88044 3.20326);
	--color-stone-500: lab(48.1164% 2.35701 4.26852);
	--color-stone-600: lab(35.5168% 1.08604 4.07829);
	--color-stone-700: lab(27.3812% 1.32917 3.57789);
	--color-stone-800: lab(15.0353% 1.96067 1.53427);
	--color-stone-900: lab(9.03835% 1.15298 1.92955);
	--color-stone-950: lab(2.86037% 0.455312 0.568903);
}

/* 
 * Hidden from user, but availabled for screen-readers and from keyboard
 *
 * Reference: https://www.a11yproject.com/posts/how-to-hide-content
 */
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/*
 * Hidden from user and screen-readers
 */
.hidden {
	display: none !important;
}

.divider {
	margin: 1rem;
	height: 1px;
	background: var(--color-sky-500);
	border: none;
}

/**
 * UI components
 */
label:hover {
	cursor: pointer;
}

.input-title {
	font-weight: normal;
	font-size: 1rem;
	color: var(--color-slate-700);
}

.input-label {
	display: flex;
	justify-content: space-between;
}

.input-label:has(.input-label) {
	flex-direction: column;
	row-gap: 0.5rem;
}

.input-label>.input-label {
	margin-left: 1rem;
}

input[type='text'],
input[type='number'] {
	border: var(--color-slate-500) 1px solid;
	border-radius: 0.25rem;
	padding: 0.25rem 0.25rem;
}

/**
 * Layout
 */

.layout {
	max-width: 100%;
	max-height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 3rem;
}

.layout--block {
	width: 100%;
}

.layout--block_center {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*
 * Menu
 */
.menu {
	padding-top: 2rem;
	max-width: 500px;
	display: flex;
	flex-direction: column;
	align-items: center;

	row-gap: 0.5rem;
}

.menu .menu-block {
	display: flex;
	column-gap: 1rem;
}

.menu .menu-block .menu-block--element {
	padding: 0.5rem;
	border-radius: 0.25rem;
	background: var(--color-slate-200);
	text-transform: lowercase;
}

.menu .menu-block .menu-block--element:first-letter {
	text-transform: uppercase;
}

.menu .menu-block .menu-block--element:hover {
	background: var(--color-slate-400);
}

.menu .menu-block .menu-block--element > input {
	display: none;
}

.menu .menu-block .menu-block--element:has(input:checked) {
	background: var(--color-violet-400);
}

.menu .menu-block:nth-child(even) .menu-block--element:has(input:checked) {
	background: var(--color-pink-400);
}

.content {
	padding: 1rem;
	max-width: 500px;
	width: 100%;
}

.block {
	padding: 0.5rem 0;
	display: flex;
	flex-direction: column;
	row-gap: 0.5rem;
	width: 100%;
}

.block_images {
	max-width: 300px;
}

.block--title {
	color: var(--color-slate-800);
	font-size: 1.3rem;
}

.block .block--elements {
	display: flex;
	flex-direction: column;
	row-gap: 0.75rem;
}

.block .block--title.block--title_primary {
	color: var(--color-violet-600);
}

.block .block--title.block--title_secondary {
	color: var(--color-pink-400);
}

.images {
	display: flex;
	column-gap: 2rem;
	width: 100%;
}

.image-preview {
	aspect-ratio: 1;
	width: 100%;
	max-width: 300px;
	max-height: 300px;
	border: 1px solid var(--color-slate-500);
}

.swap-button {
	align-self: center;

	width: 100%;
	height: 100%;
	max-width: 2.5rem;
	max-height: 2.5rem;
	aspect-ratio: 1;

	border: none;
	background: var(--color-slate-200);
	border-radius: 0.5rem;
	padding: 0.5rem;

	color: var(--color-slate-800);
}

.swap-button:hover {
	color: var(--color-violet-500);
	background: var(--color-slate-100);
}

.swap-button--icon {
	pointer-events: none;
}

button:hover {
	cursor: pointer;
}

.button {
	width: 100%;
	height: 100%;

	border: none;
	background: var(--color-slate-200);
	border-radius: 0.5rem;
	padding: 0.5rem;

	color: var(--color-slate-800);
}

.button:disabled {
	background: var(--color-slate-300);
}

.button:hover:disabled {
	color: var(--color-slate-800);
	background: var(--color-slate-300);
	cursor: not-allowed;
}

.button:hover {
	color: var(--color-violet-500);
	background: var(--color-slate-100);
}

.submit-button {
	width: 100px;
	height: 50px;

	background: var(--color-emerald-400);
	border: 1px solid var(--color-emerald-600);
	border-radius: 0.25rem;
	font-size: 1.1rem;
	color: var(--color-slate-900);
}

.debug-label {
	max-width: 300px;
}

/* Error handler */
.error {
	position: fixed;
	top: 0;
	left: 0;
	height: 2.5rem;

	width: 100%;
	background: var(--color-red-500);
	color: white;

	display: flex;
	align-items: center;
	justify-content: center;

	column-gap: 1rem;
}

.error:has(.error--message:empty) {
	top: -2.5rem;
}

.error--message {
	font-weight: 500;
}

.error--close {
	border: none;
	background: var(--color-red-500);
	color: white;
	padding: 0.25rem;
}

.error--close:hover {
	background: white;
	color: var(--color-red-500);
}

/* Error handler end */

.file-drop--label {
	aspect-ratio: 1;

	width: 100%;
	height: 100%;
	max-width: 300px;
	max-height: 300px;
	border: 1px solid var(--color-slate-500);

	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;

	color: var(--color-slate-600);
	cursor: pointer;
}

.file-drop--input {
	display: none;
}

/* 1280px */
@media screen and (max-width: 80rem) {
	.layout {
		grid-template-columns: 1fr;
	}

	.images {
		justify-content: center;
	}

	.layout--block_secondary {
		order: 1;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		row-gap: 1rem;
	}

	.layout--block_secondary > .block {
		width: auto;
		min-width: 500px;
	}

	.layout--block_main {
		order: 2;
	}
}

/* 768px */
@media screen and (max-width: 48rem) {
	.images {
		flex-direction: column;
		align-items: center;
	}

	.layout {
		margin: 2rem;
	}

	.layout--block_secondary > .block {
		min-width: auto;
		max-width: 300px;
		width: 100%;
	}
}

/* 768px */
@media screen and (max-width: 30rem) {
	.input-label {
		flex-direction: column;
		row-gap: 0.5rem;
	}

	.input-label:has(input[type='checkbox']) {
		flex-direction: row;
	}
}