:root {
	--line-height: 1.5rem;
	--font: Consolas, monospace;
	--fg: #c8d3df;
	--bg: #0f1419;
	--dim: #4a5663;
}
html, body {
	margin: 0;
	height: 100%;
	background: var(--bg);
	color: var(--fg)
}
body {
	font-family: var(--font);
	font-size: 1rem;
	line-height: var(--line-height);
	position: relative;
}
/* The background prompt column fills the full viewport height; fixed so it stays in place while scrolling. */
body::before {
	content: "";
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: 2ch;            /* equal to the width of "> " */
	background-image: linear-gradient(
		to bottom,
		var(--dim) 0,
		var(--dim) 100%
	);
	/* Use a tiled text image via SVG data URI for crisp glyphs */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='24'><text x='0' y='17' font-family='Consolas,monospace' font-size='16' fill='green'>&gt;</text></svg>");
	background-repeat: repeat-y;
	background-size: 2ch var(--line-height);
	pointer-events: none;
	z-index: 0;
}
main {
	position: relative;
	z-index: 1;
	padding: 0;          /* content sits directly on top of the background pattern */
	white-space: pre;
}
.code {
	position: relative;
	z-index: 1;
	padding: 0;          /* content sits directly on top of the background pattern */
	white-space: pre;
}
.header {
	font-weight: bold;
	color: lightgreen;
}
.pipe {
	color: green;
}