.key, .syntax, main > hr::after, .field :is(em, strong, pre)::before, .field :is(em, strong, pre)::after, .field :not(pre) > code::before, .field :not(pre) > code::after, :is(div.field, .raw) a:not([href^="#"])::before, :is(div.field, .raw) a:not([href^="#"])::after, .task::before, .marquee::before, .marquee::after {
	font-family: monospace, monospace;
	font-size-adjust: 0.45;
	font-weight: normal;
	font-style: normal;
	color: var(--muted);
}

.key {
	display: block;
	font-size: 1rem;

	@media (min-width: 60rem) {
		display: inline-flex;
		justify-content: flex-end;
		width: 0;
		position: relative;
		left: -1ch;
		white-space: nowrap;
	}
}

main > hr {
	border: 0;
	margin: 1rlh 0 0;
	text-box: trim-both cap alphabetic;
	padding-top: calc(1rlh - 1cap);

	& + * {
		--flow-space: 1rlh;
	}

	&::after {
		content: "----" / "";
	}
}

.raw {
	white-space: pre-wrap;
}

.field {
	& em::before, & em::after {
		content: "*" / "";
	}

	& strong::before, & strong::after {
		content: "**" / "";
	}

	& :not(pre) > code::before, & :not(pre) > code::after {
		content: "`" / "";
	}

	& pre::before, & pre::after {
		content: "```" / "";
		display: block;
	}

	&:is(div, .raw) a:not([href^="#"]) {
		&::before {
			content: "[" / "";
			display: inline-block;
		}

		&::after {
			content: "]" / "";
			display: inline-block;
		}
	}

	& :is(h2, h3) > a[href^="#"]::before {
		content: "#" / "";
	}

	& h3 > a[href^="#"]::before {
		content: "##" / "";
	}
}

ul:has(> .task) {
	padding: 0;
	list-style: none;
}

.task::before {
	content: "- " / "";
}

.check {
	color: light-dark(#b45309, #f5a10e);
}

.wavy {
	& span {
		display: inline-block;
		animation: wave 1s ease-in-out infinite;
		animation-delay: calc(var(--i) * 0.1s);
	}

	@media (prefers-reduced-motion: reduce) {
		& span {
			animation: none;
		}
	}
}

@keyframes wave {
	50% {
		translate: 0 -0.06em;
	}
}

.marquee {
	display: inline-flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 16rem;

	&::before {
		content: "<marquee>" / "";
	}

	&::after {
		content: "</marquee>" / "";
	}

	& span {
		flex: 1;
		overflow: clip;
	}

	& span span {
		display: inline-block;
		padding-left: 100%;
		white-space: nowrap;
		animation: marquee 6s linear infinite;
	}

	&[aria-pressed="true"] span span {
		animation-play-state: paused;
	}

	@media (prefers-reduced-motion: reduce) {
		& span span {
			animation: none;
			padding-left: 0;
		}
	}
}

@keyframes marquee {
	to {
		translate: -100%;
	}
}

:is(.wavy, .marquee) {
	padding: 0;
	border: 0;
	border-radius: 0.25rem;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}