:root {

	--mha-item-bg: light-dark(#eee, #333);

	--mha-arrow-thickness: 0.1em;
	--mha-arrow-size-h: 0.8em;
	--mha-arrow-size-v: 0.3em;

	--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);
}


div.mha-hdr-item {
	border: 1px solid light-dark(var(--light-line-medium), var(--dark-line-medium));
	border-radius: 0.25em;
	background-color: var(--mha-item-bg);
	margin: 1em 0;
	padding: 0 0.5em;
}

div.mha-hdr-item div {
	margin: 0.5em 0;
}

div.mha-hdr-item pre {
	margin: 0.5em 0;
	padding: 0.25em 0.5em;
}

div.mha-hdr-item div code {
	margin: 0.5em;
	padding: 0.25em 0.5em;
}

div.mha-hdr-item div table {
	margin-top: 0.25em;
}

div.mha-hdr-item p {
	margin: 0.5em 0;
}

div.mha-hdr-item-title {
	font-size: 1.2rem;
	font-weight: bold;
	padding: 0;
	margin: 0.5em 0;
	size: 1.25em;
}



.mha-rcv-pair {
	display: grid;
	grid-template-columns: 1fr 2em 1fr;
	gap: 0.25em;
}
.mha-rcv-pair > div:nth-child(even) {
	align-self: center;
}
.mha-rcv-pair > div:nth-child(odd) {
	background-color: var(--mha-item-bg);
	border: 1px solid light-dark(var(--light-line-dark), var(--dark-line-dark));
	border-radius: 0.25em;
	align-self: stretch;
	text-align: center;
}
.mha-rcv-pair > div > h4 {
	line-height: 1.2;
	margin: 0.5em;
	padding: 0;
	font-size: 1.1em;
}
.mha-rcv-pair > div > p {
	line-height: 1.2;
	margin: 0.5em 0.5em;
}
.mha-rcv-pair-arrow {
	margin: auto 0;
	display: grid;
	grid-template-columns: 1fr var(--mha-arrow-size-h);
	gap: 0;
	align-items: center;
}
.mha-rcv-pair-arrow > div:first-child {
	height: var(--mha-arrow-thickness);
	background: light-dark(var(--light-line-dark), var(--dark-line-light));
	width: 100%;
}
.mha-rcv-pair-arrow > div:last-child {
	width: 0;
	height: 0;
	border-top: var(--mha-arrow-size-v) solid transparent;
	border-left: var(--mha-arrow-size-h) solid light-dark(var(--light-line-dark), var(--dark-line-light));
	border-bottom: var(--mha-arrow-size-v) solid transparent;
}

.mha-rcv-wrap {
	display: grid;
	align-items: center;
	grid-template-columns: calc(var(--mha-arrow-size-v) - calc(var(--mha-arrow-thickness) / 2) ) 1fr;
	gap: 0;
	align-items: center;
	margin: 0.25em auto;
	width: calc(50% + 1.75em + calc(var(--mha-arrow-size-h) / 2));
}
.mha-rcv-wrap-right {
	border-right: var(--mha-arrow-thickness) solid light-dark(var(--light-line-dark), var(--dark-line-light));
	height: 0.5em;
}
.mha-rcv-wrap-left-top {
	border-left: var(--mha-arrow-thickness) solid light-dark(var(--light-line-dark), var(--dark-line-light));
	border-top: var(--mha-arrow-thickness) solid light-dark(var(--light-line-dark), var(--dark-line-light));
	height: 0.5em;
}
.mha-rcv-wrap-arrow {
	grid-column: 1 / -1;
	width: 0;
	height: 0;
	border-left: var(--mha-arrow-size-v) solid transparent;
	border-right: var(--mha-arrow-size-v) solid transparent;
	border-top: var(--mha-arrow-size-h) solid light-dark(var(--light-line-dark), var(--dark-line-light));
}



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);
}