html, body {
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
}

body {
	display: grid;
	grid-template-columns: [screen-start toc-start] 1fr [toc-end cnt-start] minmax(auto, 69em) [cnt-end] 1fr [screen-end];
	grid-template-rows: [cnt-start toc-start] auto [toc-end cnt-end];
}

body > main {
	grid-area: cnt / cnt;
}

body > div.toc {
	grid-area: toc / toc;
}

div.toc > ol {
	position: sticky;
	top: 1.25rem;
}

main {
	font-size: 16pt;
	margin-top: 1rem;
	min-height: 100vh;
	display: grid;

	grid-template-columns: [block-start] 2rem [line-start code-start] minmax(auto, 42rem) [line-end] 20rem [code-end] 1fr [block-end];
	align-content: center;
}

main > * {
	grid-column: line;
}

main > code.block {
	grid-column: code;
}

main code.block > pre {
	margin: 0.25em 0 0.25em 0.5em;
}

main h1 {
	margin-bottom: 0;
}

main div > p:first-child {
	margin-top: 0;
}

main div > p:last-child {
	margin-bottom: 0;
}

main div.empty {
	height: 1em;
}