.try-it {
	/* The app's fixed focal colour (highlightColor), for the letter and guides. */
	--try-it-focal: #e63946;
	color: var(--text, #202630);
	background: var(--bg, #fff);
	font-family: "Segoe UI", system-ui, sans-serif;
}
.try-it *,
.try-it *::before,
.try-it *::after {
	box-sizing: border-box;
}
.try-it [hidden] {
	display: none;
}
.try-it :focus-visible {
	outline: 3px solid var(--focus, #e63946);
	outline-offset: 4px;
}
.try-it-reader {
	padding: 1.25rem;
	border: 1px solid var(--border, #bbc0c8);
	border-radius: 12px;
	background: var(--surface, #f5f6f8);
	container-type: inline-size;
}
.try-it fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.try-it legend {
	margin-bottom: 0.75rem;
	font-weight: 600;
}
.try-it label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.35rem 1rem 0.35rem 0;
	cursor: pointer;
}
.try-it input {
	accent-color: var(--accent, #b82535);
}
.try-it-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1em;
	min-height: 240px;
	margin: 1rem 0;
	/* Very long words are clipped here, never scroll the page sideways. */
	overflow: hidden;
	/* Desktop default size; reduce the whole stack on narrow layouts. */
	font-size: clamp(24px, 8cqi, 64px);
}
.try-it-line {
	position: relative;
	width: 100%;
	height: 1.15em;
	margin: calc(0.22em + 1px) 0 calc(0.3em + 1px);
}
.try-it-line::before,
.try-it-line::after {
	content: "";
	position: absolute;
	left: 50%;
	width: min(100%, 8em);
	height: 1px;
	transform: translateX(-50%);
	background: var(--border, #bbc0c8);
}
.try-it-line::before {
	bottom: calc(100% + 0.22em);
}
.try-it-line::after {
	top: calc(100% + 0.3em);
}
.try-it-word {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	width: 100%;
	font-family: Consolas, "Courier New", monospace;
	font-weight: 400;
	line-height: 1.15;
	white-space: nowrap;
}
.try-it-before {
	text-align: right;
}
.try-it-after {
	text-align: left;
}
.try-it-pivot {
	color: var(--try-it-focal);
	font-weight: 700;
}
.try-it-word[data-context="quote"] {
	color: #286368;
}
.try-it-word[data-context="aside"] {
	color: #6d4ca3;
}
.try-it-guide {
	position: absolute;
	left: 50%;
	width: max(2px, 0.045em);
	height: 0.22em;
	border-radius: 1px;
	transform: translateX(-50%);
	background: var(--try-it-focal);
	opacity: 0.85;
}
.try-it-top {
	bottom: 100%;
}
.try-it-bottom {
	top: calc(100% + 0.08em);
}
.try-it-context {
	width: 85%;
	height: 1.2em;
	margin: 0;
	overflow: hidden;
	color: var(--muted, #5d6570);
	font:
		max(0.34em, 13px) / 1.2 Consolas,
		"Courier New",
		monospace;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.try-it[data-playing="true"] .try-it-context {
	opacity: 0.55;
}
.try-it-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}
.try-it button {
	padding: 0.65rem 1rem;
	border: 1px solid var(--border, #bbc0c8);
	border-radius: 6px;
	background: var(--bg, #fff);
	color: var(--text, #202630);
	font: inherit;
	cursor: pointer;
}
.try-it button:hover:enabled {
	border-color: var(--focus, #e63946);
}
.try-it button:disabled {
	opacity: 0.5;
	cursor: default;
}
.try-it .try-it-play {
	background: var(--accent, #b82535);
	color: var(--accent-text, #fff);
}
.try-it-speed {
	display: flex;
	flex: 1 1 16rem;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.try-it-speed label {
	margin: 0;
}
.try-it-speed input {
	width: min(180px, 100%);
}
.try-it output {
	min-width: 7ch;
	font-variant-numeric: tabular-nums;
}
.try-it-progress,
.try-it-sections p {
	color: var(--muted, #5d6570);
	font-size: 0.9rem;
}
.try-it .try-it-sections {
	margin-top: 1.25rem;
}
.try-it-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.try-it[data-reduced-motion="true"],
.try-it[data-reduced-motion="true"] *,
.try-it[data-reduced-motion="true"] *::before,
.try-it[data-reduced-motion="true"] *::after {
	/* biome-ignore lint/complexity/noImportantStyles: Reduced motion overrides page effects. */
	animation: none !important;
	/* biome-ignore lint/complexity/noImportantStyles: Reduced motion overrides page effects. */
	transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.try-it,
	.try-it *,
	.try-it *::before,
	.try-it *::after {
		/* biome-ignore lint/complexity/noImportantStyles: Reduced motion overrides page effects. */
		animation: none !important;
		/* biome-ignore lint/complexity/noImportantStyles: Reduced motion overrides page effects. */
		transition: none !important;
	}
}
@media (prefers-color-scheme: dark) {
	.try-it-word[data-context="quote"] {
		color: #a8dadc;
	}
	.try-it-word[data-context="aside"] {
		color: #b3a6e8;
	}
	.try-it {
		color: var(--text, #e9edf3);
		background: var(--bg, #202630);
	}
	.try-it-reader {
		background: var(--surface, #272f3b);
	}
	.try-it button {
		color: var(--text, #e9edf3);
		background: var(--bg, #202630);
	}
	.try-it-context,
	.try-it-progress,
	.try-it-sections p {
		color: var(--muted, #b6bfcc);
	}
}