/* intro-with-toc block */

@layer components {

	.b4fb016b1 {
		margin-block: var(--space-6);
	}

	.b87ea826e {
		max-inline-size: 70ch;
		font-size: var(--fs-md);
		color: var(--color-text);
		line-height: var(--lh-normal);
	}

	.b87ea826e p + p {
		margin-block-start: var(--space-4);
	}

	.b3ed6f8c3 {
		margin-block-start: var(--space-6);
		padding: var(--space-5);
		background: var(--color-bg-subtle);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		max-inline-size: 60ch;
	}

	.beb8573d5 {
		font-weight: var(--fw-semibold);
		font-size: var(--fs-base);
		margin: 0 0 var(--space-3);
		color: var(--color-text);
	}

	.b2b05d19a {
		list-style: none;
		padding: 0;
		margin: 0;
		counter-reset: toc;
	}

	.b8a57e670 {
		counter-increment: toc;
		line-height: var(--lh-snug);
	}

	.b8a57e670 + .b8a57e670 {
		margin-block-start: var(--space-2);
	}

	.b7cf25c12 {
		display: inline-block;
		color: var(--color-brand);
		text-decoration: none;
		font-size: var(--fs-sm);
	}

	.b7cf25c12::before {
		content: counter(toc) ". ";
		color: var(--color-text-subtle);
		font-variant-numeric: tabular-nums;
		margin-inline-end: var(--space-1);
	}

	.b7cf25c12:hover,
	.b7cf25c12:focus-visible {
		text-decoration: underline;
	}

	.b486df591 {
		padding-inline-start: var(--space-4);
		font-size: var(--fs-xs);
		color: var(--color-text-muted);
	}
}