:root {
	color-scheme: light dark;
	--background: #ffffff;
	--text: #111111;
	--muted: #444444;
	--accent: #0b57d0;
	--error: #b3261e;
	--panel: #f2f2f2;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #121212;
		--text: #f1f1f1;
		--muted: #c4c4c4;
		--accent: #8ab4f8;
		--error: #f2b8b5;
		--panel: #1e1e1e;
	}
}

body {
	margin: 0 auto;
	max-width: 60rem;
	padding: 1rem;
	background: var(--background);
	color: var(--text);
	font: 1.1rem/1.5 system-ui, sans-serif;
}

a {
	color: var(--accent);
}

:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

.skip {
	position: absolute;
	left: -10000px;
}

.skip:focus {
	position: static;
}

nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
	padding: 0;
}

.inline {
	display: inline;
}

textarea, input, button {
	font: inherit;
	max-width: 100%;
}

textarea {
	width: 100%;
	box-sizing: border-box;
}

button {
	padding: 0.4rem 0.9rem;
	cursor: pointer;
}

pre {
	background: var(--panel);
	padding: 0.8rem;
	white-space: pre-wrap;
	word-break: break-word;
	min-height: 3rem;
}

.error {
	color: var(--error);
	font-weight: bold;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

progress {
	width: 100%;
}