* {
	background: transparent;
	color: inherit;
	border: none;
	font-weight: inherit;
	font-size: inherit;
	font-style: inherit;
	margin: 0;
	padding: 0;
}

body {
	background: hsl(30, 25%, 90%);
	font: 16px / 150% monospace;
	color: hsl(30, 25%, 10%);
	margin: 0;
}

a {
	color: hsl(90, 100%, 23%);
}

b {
	color: hsl(30, 100%, 30%);
}

@media (prefers-color-scheme: dark) {
	a {
		color: hsl(90, 70%, 70%);
	}

	b {
		color: hsl(30, 85%, 70%);
	}

	body {
		background: hsl(30, 35%, 10%);
		color: hsl(30, 15%, 90%);
	}

	svg circle {
		fill: white;
	}
}

main {
	max-width: 80ch;
	padding: 3ch;
	margin: auto;
}

#output p,
#pending-output {
	white-space: pre-wrap;
	word-break: break-all;
}

#input {
	display: grid;
	grid-template-columns: 2ch 1fr;
	grid-template-rows: auto auto;
}
#input p {
	grid-column: 1 / 3;
	grid-row: 2;
}
#input:before {
	content: '>';
}
#input #text {
	display: grid;
	grid-column: 2;
	grid-row: 1;
}
#input #text textarea {
	line-height: inherit;
	font-family: inherit;
	outline: none;
	overflow: hidden;
	resize: none;
}
#input #text textarea,
#input #text:after {
	grid-area: 1 / 1 / 2 / 2;
	white-space: pre-wrap;
}