:root {
	font-family: system-ui;
	color-scheme: light dark;
}

body {
	margin: 0;
	padding: 1rem;
}

h1 { text-align: center; }

main {
	max-inline-size: 120ch;
	margin-inline: auto;
}

iframe { inline-size: 100%; }

pre code {
	--line-counter-margin-right: 1ch;
	--line-counter-width: 4ch;

	counter-reset: step;
	counter-increment: step 0;
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: pre-wrap;
	margin: 1rem;
	display: flex;
	flex-direction: column;

	.line {
		box-sizing: border-box;
		display: inline-block;
		padding-inline-start: calc(var(--line-counter-width) + var(--line-counter-margin-right));
		inline-size: 100%;
		counter-increment: step;

		&::before {
			display: inline-block;
			margin-inline-end: var(--line-counter-margin-right);
			margin-inline-start: calc((var(--line-counter-width) + var(--line-counter-margin-right)) * -1);
			inline-size: var(--line-counter-width);
			content: counter(step, decimal-leading-zero);
			color: var(--surface-3);
			text-align: right;
		}
	}
}

progress {
	margin-inline: auto;
	inline-size: clamp(5ch, 100%, 30ch);
	display: block;
}