.cue-stage {
	min-height: 52vh;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 2em;
	background: var(--c-gray-light);
	border-radius: var(--border-radius);
}

.demo-button {
	appearance: none;
	min-width: 12em;
	border: 1px solid transparent;
	border-radius: .45em;
	padding: .9em 1.4em;
	background: transparent;
	color: var(--c-black);
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 100ms ease;
}

.demo-button.cue-fill {
	background: var(--c-blue);
	color: var(--c-white);
}

.demo-button.cue-border {
	border-color: var(--c-black);
}

.demo-button.cue-shadow {
	box-shadow: 0 .45em .9em rgba(0, 0, 0, .2);
}

.demo-button.cue-hover:hover {
	background: var(--c-black);
	border-color: var(--c-black);
	color: var(--c-white);
}

.demo-button.cue-cursor {
	cursor: pointer;
}

.demo-button.cue-press:active {
	transform: translateY(2px) scale(.98);
	box-shadow: 0 .15em .3em rgba(0, 0, 0, .18);
}

.demo-button:focus-visible {
	outline: 3px solid var(--c-blue);
	outline-offset: 4px;
}

.cue-result {
	min-width: 12em;
	display: flex;
	justify-content: space-between;
	gap: 2em;
	padding-top: .75em;
	border-top: 1px solid var(--c-border);
	font-size: 13px;
}

.cue-result output {
	font-weight: 600;
}

.cue-stage:has(.demo-button[aria-pressed="true"]) .cue-result output {
	color: var(--c-green);
}

.toggle-example {
	max-width: 30em;
	display: grid;
	gap: 1.5em;
}

.toggle-control {
	width: 100%;
	gap: 2em;
	border: 1px solid var(--c-border);
	border-radius: var(--border-radius);
	padding: 1.25em;
	background: var(--c-white);
}

.toggle-example:has(.toggle-control[aria-checked="true"]) .cue-result output {
	color: var(--c-green);
}

.condition-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
	gap: 1px;
	background: var(--c-border);
	border: 1px solid var(--c-border);
}

.condition-grid > div {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 1em;
	background: var(--c-white);
	font-size: 13px;
}