html {
	--col-back: #ffffff;
	--col-back-stripe: #f8f8f8;
	--col-back-hover: #ddeeff;
	--col-text-hover: #000000;
	--col-text: #000000;
	--col-line: #000000;
	--col-binary: #008000;
	--col-decimal: #0000aa;
	--col-hex: #aa0000;
	--col-character: #008080;
	--col-escape: #800080;

	@media (prefers-color-scheme: dark) {
		--col-back: #111111;
		--col-back-stripe: #222222;
		--col-back-hover: #223344;
		--col-text-hover: #f8f8f8;
		--col-text: #f8f8f8;
		--col-line: #dddddd;
		--col-binary: #22aa00;
		--col-decimal: #0077ee;
		--col-hex: #dd4411;
		--col-character: #00aabb;
		--col-escape: #bb66cc;
	}

	@media (prefers-contrast: more) {
		--col-back: Canvas;
		--col-back-stripe: Canvas;
		--col-back-hover: SelectedItem;
		--col-text-hover: SelectedItemText;
		--col-text: CanvasText;
		--col-line: GrayText;
		--col-binary: inherit;
		--col-decimal: inherit;
		--col-hex: inherit;
		--col-character: inherit;
		--col-escape: inherit;
	}
}

body {
	font: 1em sans-serif;
	margin: 16px;
	background: var(--col-back);
	color: var(--col-text);
}

h1 {
	display: none;
}

table {
	border-collapse: collapse;
	width: 100%;
	font-size: max(0.5em, min(2em, min(1.6vw, 1.7vh)));
}

th {
	font-weight: normal;
	text-align: center;
	border-bottom: 0.125em solid var(--col-line);
	padding: 0 0 0.25em;
}

th.b {
	min-width: 2.5em;
}
th.d {
	min-width: 2em;
}
th.h {
	min-width: 2em;
}
th.c {
	min-width: 3em;
}

td {
	padding: 0.125em 0.25em;
}

td.b {
	font: 0.7em monospace;
	text-align: center;
	color: var(--col-binary);
}

td.d {
	font-family: monospace;
	text-align: right;
	color: var(--col-decimal);
}

td.h {
	font-family: monospace;
	text-align: center;
	color: var(--col-hex);
}

td.c {
	font-size: 1.2em;
	text-align: center;
	font-weight: bold;
	color: var(--col-character);
}

td.c abbr {
	font-size: 0.8em;
	font-weight: 300;

	&::before {
		content: '[';
	}

	&::after {
		content: ']';
	}
}

td.e,
td.t {
	font: 0.9em monospace;
	white-space: pre;
	color: var(--col-escape);
}

.l {
	padding: 0;
	border-right: 0.125em solid var(--col-line);
}

tbody tr:nth-child(2n) {
	background: var(--col-back-stripe);
}

tbody tr:hover {
	background: var(--col-back-hover);
	color: var(--col-text-hover);
}

@media (max-width: 899px) {
	table {
		font-size: max(0.5em, min(2em, min(2vw, 1.7vh)));
	}

	.b {
		display: none;
	}
}