:root {
	--fg: black;
	--bg: transparent;
	--tint: #0002;
	--section-border: 4px ridge #35a656;
	--border: 1px solid #35a656;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg: white;
		--bg: #1b1f1c;
		--tint: #333d36;
		--section-border: 4px ridge #633006;
		--border: 1px solid #633006;
	}

	a {
		color: #c7b142;
	}

	a:visited {
		color: #c2872f;
	}
}

body {
	width: fit-content;
	margin: 20px auto;
	display: flex;
	gap: 20px;

	font-family: monospace;
	font-size: 12px;

	color: var(--fg);
	background-color: var(--bg);
}

@media screen and (max-width: 1200px) {
	body {
		flex-direction: column;
	}
}

div.column {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

section {
	border: var(--section-border);
	padding: 10px 20px;
	width: 70ch;
	box-sizing: content-box;
}

p {
	hyphens: auto;
}

table, th, td {
	border: var(--border);
}

table {
	margin: auto;
}

details {
	border: var(--border);
	padding: 5px;

	&:has(summary:hover) {
		background-color: var(--tint);
	}
}

summary {
	cursor: pointer;
}

.st-table td {
	width: 74px;
	padding: 5px;
	box-sizing: content-box;
	text-align: center;
}

.st-table {
	vertical-align: start;
	border: none;
}

.st-atlas {
	--p: 0px 0px;
	background: url("assets/st-atlas.webp");
	background-size: 256px 320px;
	background-position: var(--p);
	display: inline-block;
	height: 64px;
	width: 64px;

	& + & {
		margin-left: 14px;
	}
}

#ca-demo {
	& td {
		text-align: center;
		width: 3ch;

		&[data-t="1"], &:has(:checked) {
			background-color: var(--tint);
		}
	}

	& label {
		display: inline-block;
		width: 100%;
		&:has(:checked)::before {
			content: "1";
		}
		&:not(:has(:checked))::before {
			content: "0";
		}

		& input {
			display: none;
		}
	}
}