/* Does a relative url() in a custom property registered as <image> or <url> resolve against the
   stylesheet that declares it (css/tokens.css) rather than the document? Each row paints the
   property as a background over a red circle: css/circle.svg is green, the document-relative
   circle.svg is orange, and red means nothing loaded. The var() consumers are style attributes
   in index.html, so their base URL is the document's.
   https://drafts.css-houdini.org/css-properties-values-api/#calculation-of-computed-values */

i {
	display: block;
	margin: auto;
	width: 2em;
	aspect-ratio: 1;
	border-radius: 50%;
	background: red center / cover no-repeat;
}

/* Page */

body {
	font: 100%/1.5 system-ui, sans-serif;
}

th,
td {
	padding: .25em 1em;
}

th {
	text-align: start;
	font-weight: normal;
}