.ojch-discipline-story__viewport {
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--text);
	transition: background-color 520ms cubic-bezier(.22, 1, .36, 1), color 220ms ease;
}

.ojch-discipline-story[data-active-index="1"] .ojch-discipline-story__viewport {
	background: color-mix(in srgb, var(--wp--preset--color--background) 78%, var(--wp--preset--color--rule));
}

.ojch-discipline-story[data-active-index="2"] .ojch-discipline-story__viewport {
	background: color-mix(in srgb, var(--wp--preset--color--background) 68%, var(--wp--preset--color--accent));
}

.ojch-discipline-story[data-active-index="3"] .ojch-discipline-story__viewport {
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--background);
}

.ojch-discipline-panel {
	background: transparent;
	color: inherit;
}

.ojch-discipline-collage,
.ojch-discipline-panel--writing .ojch-discipline-collage,
.ojch-discipline-panel--experience .ojch-discipline-collage,
.ojch-discipline-panel--design .ojch-discipline-collage,
.ojch-discipline-panel--motion .ojch-discipline-collage {
	background: transparent;
}

.ojch-discipline-story[data-active-index="3"] .ojch-discipline-panel__label {
	border-color: color-mix(in srgb, var(--wp--preset--color--background) 38%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--background) 72%, transparent);
}

.ojch-discipline-story[data-active-index="3"] .ojch-discipline-panel__copy li {
	border-color: color-mix(in srgb, var(--wp--preset--color--background) 38%, transparent);
}

.ojch-discipline-story__footer {
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--secondary);
}

.ojch-discipline-story__footer nav {
	align-items: center;
	gap: 0;
}

.ojch-discipline-story__footer button,
.ojch-discipline-story__footer button:last-child {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--secondary);
	display: flex;
	height: 44px;
	justify-content: center;
	min-width: 44px;
	padding: 0;
	width: 44px;
}

.ojch-discipline-story__footer button[aria-pressed="true"],
.ojch-discipline-story__footer button[aria-current="step"] {
	background: transparent;
	color: var(--wp--preset--color--accent);
}

.ojch-discipline-phase-icon {
	display: block;
	height: 24px;
	opacity: .42;
	transform: scale(.84);
	transform-origin: center;
	transition: opacity 200ms cubic-bezier(.22, 1, .36, 1), transform 200ms cubic-bezier(.22, 1, .36, 1);
	width: 24px;
}

.ojch-discipline-story__footer button[aria-current="step"] .ojch-discipline-phase-icon {
	opacity: 1;
	transform: scale(1);
}

.ojch-discipline-story__footer button:hover .ojch-discipline-phase-icon {
	opacity: .78;
	transform: scale(.92);
}

.ojch-discipline-story__footer button[aria-current="step"]:hover .ojch-discipline-phase-icon {
	opacity: 1;
	transform: scale(1);
}

.ojch-discipline-story__footer button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -4px;
}

@media (max-width: 560px) {
	.ojch-discipline-phase-icon { transform: scale(.75); }
	.ojch-discipline-story__footer button[aria-current="step"] .ojch-discipline-phase-icon { transform: scale(.92); }
}

@media (prefers-reduced-motion: reduce) {
	.ojch-discipline-story__viewport {
		background: var(--wp--preset--color--background);
		color: var(--wp--preset--color--text);
		transition: none;
	}
	.ojch-discipline-panel--writing { background: var(--wp--preset--color--background); }
	.ojch-discipline-panel--experience { background: color-mix(in srgb, var(--wp--preset--color--background) 78%, var(--wp--preset--color--rule)); }
	.ojch-discipline-panel--design { background: color-mix(in srgb, var(--wp--preset--color--background) 68%, var(--wp--preset--color--accent)); }
	.ojch-discipline-panel--motion { background: var(--wp--preset--color--text); color: var(--wp--preset--color--background); }
	.ojch-discipline-panel--motion .ojch-discipline-panel__label {
		border-color: color-mix(in srgb, var(--wp--preset--color--background) 38%, transparent);
		color: color-mix(in srgb, var(--wp--preset--color--background) 72%, transparent);
	}
	.ojch-discipline-phase-icon { transition: none; }
}