html,
body {
	margin: 0;
	padding: 0;
}

body {
	display: grid;
	grid-template-rows: min-content minmax(0, 1fr) min-content;
	block-size: 100dvb;
}

button,
input,
input[type="file"]::file-selector-button {
	padding-block: 0.2em;
	padding-inline: 0.6em;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.6;
}

canvas {
	block-size: 100%;
	inline-size: 100%;
	touch-action: none;
}

.loader {
	display: flex;
	padding: 0.2em;
	gap: 0.2em;
	justify-content: center;
}

.palette {
	overflow-x: auto;
	white-space: nowrap;
	user-select: none;
}
.palette input {
	clip-path: circle(0);
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
}
.palette span {
	display: inline-block;
	border: 1px solid;
	text-align: center;
	min-inline-size: 3em;
	line-height: 3;
	border-radius: 0.3em;
	margin: 0.2em;
}
.palette input:not(:checked) + span {
	opacity: 0.5;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		background: black;
		color: white;
	}
}