body {
	font: 1em/1.5 system-ui, sans-serif;
	padding: 1em 2em;
	margin: auto;
	max-width: max(90vw, 50em);
}

body > header {
	display: grid;
	gap: .4em 1em;

	h1, p, #settings {
		margin: 0;
		grid-column: 1;
	}

	@media (width > 40em) {
		grid-template-columns: 1fr auto;
		align-items: space-between;

		aside {
			grid-row: 1 / 4;
			grid-column: 2;
		}
	}

	fieldset {
		width: max-content;
	}
}

fieldset {
	border: 1px solid hsl(220 10% 50% / 40%);
	border-radius: 0.3em;
}

input {
	font: inherit;

	&[type="number"] {
		field-sizing: content;
		min-width: 4ch;
	}
}

img, canvas, object {
	box-shadow: 0 0 3px -1.5px black;
	background: repeating-conic-gradient(hsl(0 0 50 / 10%) 0 25%, transparent 0 50%) 0 / 1em 1em;
}

#preview, #debug {
	display: grid;
	gap: 1em;

	h2 {
		grid-column: 1 / -1;
	}

	@media (width > 40em) {
		grid-template-columns: 1fr 1fr;
	}
}

#original {
	position: relative;

	#file_input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 25%;
		background: hsl(0 0 100 / 50%);
		backdrop-filter: blur(5px);
		cursor: pointer;
		transition: 0.1s;
	}

	&:not(:hover, :focus-within) {
		#file_input {
			opacity: 0;
		}
	}
}