body {
	--color-category-semantics: #6018b6;
	--color-category-forms: #4e7a0c;
	--color-category-css: #0b7e8d;
	--color-category-scripting: #07289f;
	--color-category-server: #8c3e07;
	--color-category-ux: #af0698;

	--color-level-0: #4e7a0c;
	--color-level-1: #930303;
	--color-level-2: #0b7e8d;
}

.training-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

:is([data-category], [data-level]) {
	--key-color: var(--color-accent-dark);
	display: inline-flex;

	font-size: 87.5%;
	border: 0.13em solid var(--key-color);
	border-radius: 1.2em;
	overflow: hidden;
	line-height: 1.2;
}

:is([data-category], [data-level]) span {
	padding: 0.2em 0.3em;
}

:is([data-category], [data-level]) span:first-child {
	display: inline-flex;
	align-items: center;

	font-weight: bold;
	font-size: 87.5%;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--key-color);
	color: var(--color-key-light);
	padding-inline-start: 0.5em;
}

:is([data-category], [data-level]) span:last-child {
	paddin-block-start: 0;
	background: var(--color-key-light);
	padding-inline-end: 0.5em;
}

[data-category=semantics],
[data-header-category=semantics] {
	--key-color: var(--color-category-semantics);
}

[data-category=forms],
[data-header-category=forms] {
	--key-color: var(--color-category-forms);
}

[data-category=css],
[data-header-category=css] {
	--key-color: var(--color-category-css);
}

[data-category=scripting],
[data-header-category=scripting] {
	--key-color: var(--color-category-scripting);
}

[data-category=server],
[data-header-category=server] {
	--key-color: var(--color-category-server);
}

[data-category=ux],
[data-header-category=ux] {
	--key-color: var(--color-category-ux);
}

[data-level="0"] {
	--key-color: var(--color-level-0);
}

[data-level="1"] {
	--key-color: var(--color-level-1);
}

[data-level="2"] {
	--key-color: var(--color-level-2);
}