@font-face {
	font-family: "JetBrains Mono";
	src:
		local("JetBrains Mono"),
		url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@v2.304/fonts/webfonts/JetBrainsMono-Regular.woff2")
		format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src:
		local("JetBrains Mono Medium"),
		url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@v2.304/fonts/webfonts/JetBrainsMono-Medium.woff2")
		format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src:
		local("JetBrains Mono SemiBold"),
		url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@v2.304/fonts/webfonts/JetBrainsMono-SemiBold.woff2")
		format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src:
		local("JetBrains Mono Bold"),
		url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@v2.304/fonts/webfonts/JetBrainsMono-Bold.woff2")
		format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--font: "JetBrains Mono", monospace;
	--ink: #222222;
	--background: #c0c0c0;
	--guide-line: rgb(34 34 34 / 18%);
	--cell-width: 1ch;
	--cell-height: 1.2em;
	--content-max-width: 64ch;
	--table-horizontal-rule: "────────────────────────────────────────────────────────────────────────────────";
}
html {
	font-family: var(--font);
	font-synthesis: none;
	-webkit-font-smoothing: none;
}
*,
*::before,
*::after {
	box-sizing: border-box;
	font-family: inherit;
}
::selection {
	color: var(--background);
	background: var(--ink);
}
body {
	--viewport-grid-width: round(down, 100%, var(--cell-width));
	--viewport-grid-height: round(down, 100dvh, var(--cell-height));
	--viewport-grid-inline-offset:
		calc((100% - var(--viewport-grid-width)) / 2);
	--viewport-grid-block-offset:
		calc((100dvh - var(--viewport-grid-height)) / 2);

	width: var(--viewport-grid-width);
	min-height: var(--viewport-grid-height);
	margin: var(--viewport-grid-block-offset) auto;
	padding: var(--cell-height) 2ch;
	color: var(--ink);
	background: var(--background);
	font-size: 16px;
	line-height: 1.2;
}
body::before {
	position: fixed;
	z-index: 2;
	top: var(--viewport-grid-block-offset);
	left: var(--viewport-grid-inline-offset);
	width: var(--viewport-grid-width);
	height: var(--viewport-grid-height);
	box-shadow: 0 0 0 100vmax var(--background);
	pointer-events: none;
	content: "";
}
main {
	width: 100%;
	width: round(down, 100%, 1ch);
	max-width: var(--content-max-width);
	margin-inline: auto;
	margin-inline-start: round(
		down,
		calc((100% - min(100%, var(--content-max-width))) / 2),
		1ch
	);
}
main > header {
	position: sticky;
	z-index: 3;
	top: var(--viewport-grid-block-offset);
	height: var(--cell-height);
	margin-block: var(--cell-height);
	background: var(--background);
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: var(--cell-height);
	font-size: 1em;
	font-weight: 700;
	line-height: var(--cell-height);
}
main > header h1 {
	margin: 0;
}
h1::before {
	content: "# ";
}
h2::before {
	content: "## ";
}
h3::before {
	content: "### ";
}
h4::before {
	content: "#### ";
}
h5::before {
	content: "##### ";
}
h6::before {
	content: "###### ";
}
header label {
	display: flex;
	height: var(--cell-height);
	cursor: pointer;
	line-height: var(--cell-height);
}
input[type="checkbox"] {
	appearance: none;
	width: 3ch;
	height: var(--cell-height);
	margin: 0 1ch 0 0;
	padding: 0;
	border: 0;
	color: inherit;
	background: transparent;
	font: inherit;
	cursor: pointer;
}
input[type="checkbox"]::before {
	content: "[ ]";
}
input[type="checkbox"]:checked::before {
	content: "[x]";
}
input[type="checkbox"]:focus-visible {
	outline: 1px solid var(--ink);
	outline-offset: 0.25ch;
}
code {
	color: var(--background);
	background: var(--ink);
}
code::before,
code::after {
	color: var(--ink);
	background: var(--background);
}
code::before {
	content: "▐";
}
code::after {
	content: "▌";
}
code::selection {
	color: var(--ink);
	background: var(--background);
}
a {
	color: var(--ink);
}
a[target="_blank"]::after {
	content: " ↗";
}
a:hover,
a:focus-visible {
	color: var(--background);
	background: var(--ink);
}
table {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin-block: var(--cell-height);
	border-spacing: 0;
	table-layout: auto;
}
table col:nth-child(2),
table col:nth-child(3) {
	width: 50%;
}
table tr {
	position: relative;
	height: calc(var(--cell-height) + var(--cell-height));
}
table tbody tr:last-child {
	height: calc(
		var(--cell-height) + var(--cell-height) + var(--cell-height)
	);
}
table th,
table td {
	position: relative;
	height: 100%;
	padding: var(--cell-height) 1ch 0 2ch;
	overflow: hidden;
	font-weight: 400;
	line-height: var(--cell-height);
	text-align: left;
	white-space: nowrap;
}
table tbody tr:last-child td {
	padding-bottom: var(--cell-height);
}
table th::before,
table td::before,
table tbody tr:last-child td::after,
table tr::after {
	position: absolute;
	display: block;
	overflow: hidden;
	line-height: var(--cell-height);
	white-space: pre;
	pointer-events: none;
}
table th::before,
table td::before {
	inset: 0 0 auto;
	height: calc(var(--cell-height) + var(--cell-height));
}
table th::before {
	content: "┬" var(--table-horizontal-rule) "\A│" / "";
}
table th:first-child::before {
	content: "┌" var(--table-horizontal-rule) "\A│" / "";
}
table td::before {
	content: "┼" var(--table-horizontal-rule) "\A│" / "";
}
table td:first-child::before {
	content: "├" var(--table-horizontal-rule) "\A│" / "";
}
table tbody tr:last-child td::after {
	inset: auto 0 0;
	height: var(--cell-height);
	content: "┴" var(--table-horizontal-rule) / "";
}
table tbody tr:last-child td:first-child::after {
	content: "└" var(--table-horizontal-rule) / "";
}
table tr::after {
	z-index: 1;
	top: 0;
	right: 0;
	width: 1ch;
	height: 100%;
	background: var(--background);
}
table thead tr::after {
	content: "┐\A│" / "";
}
table tbody tr::after {
	content: "┤\A│" / "";
}
table tbody tr:last-child::after {
	content: "┤\A│\A┘" / "";
}
table th:last-child,
table td:last-child {
	padding-right: 2ch;
}
footer {
	height: var(--cell-height);
	margin-block-start: calc(var(--cell-height) + var(--cell-height));
	line-height: var(--cell-height);
}
ul {
	margin-block: var(--cell-height);
	padding-left: 2ch;
}
li {
	min-height: var(--cell-height);
	line-height: var(--cell-height);
	overflow-wrap: anywhere;
}
li::marker {
	content: "• ";
	font-family: var(--font);
}
[data-grid-guides] {
	position: fixed;
	z-index: 10;
	top: var(--viewport-grid-block-offset);
	left: 50%;
	width: var(--viewport-grid-width);
	height: var(--viewport-grid-height);
	transform: translateX(-50%);
	pointer-events: none;
	background-image:
		linear-gradient(to right, var(--guide-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--guide-line) 1px, transparent 1px);
	background-size: var(--cell-width) var(--cell-height);
}