:root {
	--char-ctr-fg: light-dark(#000, #fff);
	--char-ctr-bg: light-dark(#bbb, #777);
	--char-ctr-bc: light-dark(#999, #ccc);

	--char-asc-fg: light-dark(#000, #ddd);
	--char-asc-bg: light-dark(#ddd, #333);
	--char-asc-bc: light-dark(#ccc, #777);

	--char-ans-fg: light-dark(#660, #ff9);
	--char-ans-bg: light-dark(#ff9, #440);
	--char-ans-bc: light-dark(#990, #cc6);

	--char-uni-fg: light-dark(#c00, #f99);
	--char-uni-bg: light-dark(#fcc, #400);
	--char-uni-bc: light-dark(#c66, #f66);
}

pre.char-output {
	line-height: 2;
}

span.char {
	border: 1px solid;
	padding: 0.05em 0.25em;
	margin: 0 0.1em;
	border-radius: 0.2em;
}

span.ctr {
	color: var(--char-ctr-fg);
	background-color: var(--char-ctr-bg);
	border-color: var(--char-ctr-bc);
}
span.asc {
	color: var(--char-asc-fg);
	background-color: var(--char-asc-bg);
	border-color: var(--char-asc-bc);
}
span.ans {
	color: var(--char-ans-fg);
	background-color: var(--char-ans-bg);
	border-color: var(--char-ans-bc);
}
span.uni {
	color: var(--char-uni-fg);
	background-color: var(--char-uni-bg);
	border-color: var(--char-uni-bc);
}