/* render <kbd> with slight depth */
@supports #{'selector\(:has(kbd))'} {
	/* style individual keys only (for the innermost <kbd> element) */
	kbd kbd,
	kbd:not(:has(kbd)) {
		font-family: monospace;
		padding: 0.25em;
		background: var(--ui-overlay);
		color: var(--ui-overlay-text);
		border: 1px solid var(--primary-accent-transparent);
		margin-inline: 0.25em;
	}
}
@supports not #{'selector\(:has(kbd))'} {
	/* style the entire key sequence */
	kbd {
		font-family: monospace;
		padding: 0.25em;
		background: var(--ui-overlay);
		color: var(--ui-overlay-text);
	}
	/* and prevent double-styling for nested keys */
	kbd kbd {
		background: none;
	}
}
/* render <mark> as highlighting */
mark {
	background: var(--primary-accent-transparent);
	color: var(--ui-text);
	--pad-x-highlight: 0.125em;
	padding-inline-start: var(--pad-x-highlight);
	padding-inline-end: var(--pad-x-highlight);
}
/* tables */
table {text-align: center;}
thead {
	font-weight: bold;
	background: var(--ui-overlay);
	color: var(--ui-overlay-text);
}
th, td {
	border: 1px solid var(--ui-text);
	padding: 0.5em;
}
/* figures */
figure {
	margin: 0;
	max-width: max-content;
}
figcaption {
	padding-block: 1em;
	padding-inline: 1em;
}
figure img {
	display: block;
	margin: 0 auto;
}
figure img ~ figcaption {
	background: var(--ui-overlay);
	color: var(--ui-overlay-text);
	text-align: center;
}
/* extra style and flair */
code {
	background: var(--ui-overlay);
	color: var(--ui-overlay-text);
	padding: 0.25rem;
}
/* fix pre */
pre {
	margin: 0;
}
/* limit img to page width */
img {
	max-inline-size: 100%;
}