.quiz {
	position: relative;
	background: linear-gradient(
		to bottom,
		#d3dcfc 6%,
		#fff 38%,
		#fff 90%,
		#d3dcfc 240%
	);
	min-height: 90svh;
	overflow: clip;
}

.quiz-prompt {
	padding: 6rem 2rem;
}

.quiz-prompt button {
		--archer--grad-one-color: var(--color-theme-800) !important;
		--archer--grad-two-color: var(--color-theme-800) !important;
		--archer--button-color-text: var(--color-theme-400) !important;
		--archer--button-color-border: var(--color-theme-600) !important;

		border-radius: 100vmax !important;
		font-family: var(--wp--preset--font-family--monte);
	}

.quiz-prompt button:not([disabled]):hover {
			--archer--grad-one-color: var(--color-theme-1000) !important;
			--archer--grad-two-color: var(--color-theme-1000) !important;
			--archer--button-color-text: #fff !important;
		}

.quiz-sub-heading {
	color: var(--color-theme-200);
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--1000);
	font-weight: 700;
	font-family: var(--wp--preset--font-family--monte);
	line-height: 0.9;
}

.quiz-heading {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 0.15em;
	font-size: var(--wp--preset--font-size--1400);
	font-weight: 800;
	color: var(--color-theme-600);
	text-transform: uppercase;
	line-height: 0.9;
	padding-block: 0.5rem 1.5rem;
	font-family: var(--wp--preset--font-family--monte);
}

@media (min-width: 62em) {

.quiz-heading {
		font-size: 4rem
}
	}

@media (min-width: 75em) {

.quiz-heading {
		font-size: 5rem
}
	}

.quiz-heading span {
		position: relative;
	}

.quiz-heading span::before {
			content: "";
			width: 10em;
			position: absolute;
		}

.quiz-heading span:nth-child(1)::before {
				height: 5.9em;
				font-size: 0.1em;
				background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNTkiPjxwYXRoIGZpbGw9IiNmODk3MmUiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTgzLjQ5MiA1MC4zNTJzLTE0Ljc0IDYuMDk5LTI0Ljc0IDcuNDAyYy0xMCAxLjI5OS0yMy4wNjgtMi4zMzUtMTUuMjgyLTYuMzIyIDcuNzktMy45ODEgMTAuNzc1LTUuNzkyLTMuNDYtNy45OTEtMTQuMjM0LTIuMjA5LTI1LjQwNS02LjMyLTE5LjgyOC04LjIwM3M5LjAxMi0zLjgyOSAyLjg3NC01LjgyOWMtNi4xMzQtMS45OTktMTcuNzAyLTUuNDE1LTEzLjUzOS02LjU5MSA0LjE1OS0xLjE3NiA2LjM1NS0uNTUzLjY4OS01LjQxNEM0LjU0IDEyLjUzOS0yLjU5NSA1Ljk1Ljk0NiA1LjEyYzMuNTQtLjgzIDE4LjE1MSA4LjE4NSAxNy44MDEgNS41MDMtLjM1LTIuNjg3LTUuMTczLTExLjI5LTIuMDM4LTEwLjU4MiAzLjEzNC43MTQgMTguMTI4IDIwLjQ3NCAxNy40NiAxNS40OC0uNjYyLTUuMDA0LTUuODY1LTE1LjYzMy0xLjkzOC0xNC40NDEgMy45MjUgMS4xOTcgMjUuNjk2IDI2LjczOCAyNy40NzUgMjcuODY2IDEuNzgzIDEuMTM0IDIuNDg1LS4zNi40NDQtNS4xMTUtMi4wNDctNC43NTYgMi44NC42NTUgNC40NDguOTY0IDEuNjA0LjMwMy0yLjkwOS04LjA1Mi4zMTgtOC4yODdzMjIuMDEgMjEuMjk5IDE4LjU3NiAzMy44NDQiLz48cGF0aCBmaWxsPSIjNDU3NTVjIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik05OS44NTUgNTIuNzc3YS42Ni42NiAwIDAgMS0uNDA4LjIzNGMtMjIuOCAzLjcwMy02OS4wMDItMjkuMjI0LTcwLjk2LTMwLjYyN2EuNjYuNjYgMCAwIDEgLjc2Mi0xLjA3OWMuNDczLjMzOSA0Ny43MTcgMzQuMDE3IDY5Ljk5MiAzMC40YS42NS42NSAwIDAgMSAuNzQ5LjU1MS42NS42NSAwIDAgMS0uMTQxLjUyNXoiLz48L3N2Zz4K);
				inset: -1em auto auto -8.9em;
			}

.quiz-heading span:nth-child(2)::before {
				height: 7em;
				font-size: 0.05em;
				background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNzAiPjxwYXRoIGZpbGw9IiMzYWJiOWMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTg3LjkyOSAyNC4yMThzMTcuNDEzIDI4LjU4Ny0yLjQwMyAzOC4xMTdjMCAwLTUuOTgzIDMuNjQyLTIuNjQzLTEwLjg5MSAzLjMzLTE0LjU0LTIuMjA1LTkuODYtMi41ODQtNC44NDhzLS41OTIgMTYuOTEyLTcuNTY5IDE5Ljk0NWMtNi45NzggMy4wMzItNi40MjctMS4yMjctNC4zODMtNS40NTlzMy43NjctMTMuNTExLjQ5Mi0xMi44NTJjLTMuMjc0LjY2LjEzMSA3LjE5LTQuMjQyIDEzLjUzOS00LjM4NCA2LjM0MS0xMS4zNTIgMTAuNzI2LTExLjM3MyA0LjgzNC0uMDIxLTUuODkxIDguMDMxLTE5LjIyMyAyLjM5Mi0xNi40NDEtNS42NDcgMi43OTIuMjExIDEwLjc4Ni04LjQxNyAxNi4yNXMtOS40ODUuNDY0LTkuNDc3LS43OTljLjAxLTEuMjQ1IDYuMTAzLTExLjg4IDIuMjA1LTExLjM0My0zLjg5OS41MzctMy45MzEgOC4zNzItNy42ODcgMTAuMzIxLTMuNzYxIDEuOTMyLTkuMDE5IDMuOTU4LTkuNTM3LS4xOS0uNTE4LTQuMTQ3IDcuMjE4LTguNDgxIDQuNjQ2LTguOTc1cy01LjMyNCA3LjE3Ny0xMS42MTkgNS4xOTFDOS40NDUgNTguNjM4LTIuOTA3IDU1LjIzMi42MjMgNTIuMjkxYzMuNTE5LTIuOTQ5IDEyLjYyNS0xMS4yNjkgMTguNjYyLTguMzYzIDYuMDM3IDIuOTA1IDEuNzY0LTEuNjQyLTEuNDEzLTIuNjQ4cy05LjM5Ni00Ljk0OS0zLjI5OS02LjE2MmM2LjEwNS0xLjIyMyAxMS4xNjctLjc1NSAxNS4yNDcgMi41OTEgNC4wNzkgMy4zNDYgMy43NjgtMS4yNi0uNTA0LTIuOTE1cy03LjY1OS0zLjMxNi02LjUzMi00LjgxIDEwLjMyMS00LjYzNCAxOC4yMjYtLjQyMWM3LjkwNSA0LjIxMiA0LjU1NS0xLjIxMyAyLjA5OC0yLjIxNXMtMTMuNDg2LTQuMDY2LTEwLjkwMy02LjY0MSAxMC4yMDctMy43ODUgMTUuNzMzLS44NDYgMy4xNi0xLjA2My41My0yLjIwMWMtMi42NDgtMS4xMzUtOC45MDgtMy4xMjctNi41NDEtNS40ODEgMi4zNjgtMi4zNTMgMTUuMjUtMi40MDIgMTguODggMi4wNzIgMy42NDEgNC40ODIgNy4xODUgMi40MzEgMi42MTQtMS40NTZDNTguODQ5IDguOTA3IDUwLjY5MyAzLjU3OCA1My45NDguOTg4YzMuMjY2LTIuNTgzIDI0LjA4Mi0xLjc0IDM0LjAwNiAyMy4yMTZ6Ii8+PHBhdGggZmlsbD0iIzExNzY1YSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOTkuOTEgNi4wMjNhLjc4Ljc4IDAgMCAxIC4wNDUuNjE5QzkzLjg0IDIzLjE4NSA3NS4zNjggMzMuNTUgNjAuOTUgMzkuMzI3Yy0xNS41NCA2LjIzOC0yOS44NSA4LjYyNC0yOS45OTMgOC42NDlhLjc4Ljc4IDAgMCAxLS44ODQtLjYxMS43NDcuNzQ3IDAgMCAxIC42LS44NjljLjU2Ni0uMDg5IDU2LjQ2OS05LjYxNSA2Ny44NS00MC4zOGEuNzMuNzMgMCAwIDEgLjk3Mi0uNDI2LjczLjczIDAgMCAxIC40MTEuMzYxeiIvPjwvc3ZnPgo=);
				inset: auto auto -4.3em -5.7em;
			}

.quiz-heading span:nth-child(3)::before {
				height: 8em;
				font-size: 0.05em;
				background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgODAiPjxwYXRoIGZpbGw9IiNjM2RjNDIiIGQ9Ik0xMS42MDMgMTMuNzg0czIyLjE0NS0yLjc1MyAzMC44NjEtMy44MDRjOC43MDctMS4wNTkgMjUuMjA1LjU4MiAyNi44NTYgOS4xNzYgMS42NiA4LjYwMiAyLjA0NiAxMC40OTEgOC4wMzYgOS45OTRzLTEgMi42OTUtLjQ3OCAzLjc3IDYuMTg1IDIuMTIgNC4zMzMgMy4xOTVjLTEuODYyIDEuMDY1IDMuNDQ2IDQuMTA2IDIuMzM0IDUuMDc0LTEuMTEzLjk2Ny0yLjI5OSAxLjAzNy0uMTk0IDIuOTYyczUuNDU2IDQuMTY1IDMuNjQyIDYuNzIzUzk5Ljk1OCA2MS4yMzUgMTAwIDY0LjE2OGMuMDUxIDIuOTI0LTcuMzI0LjcxNi04LjY5MiAzLjMxMXMxLjQ5NCA0Ljk2NC0uMzc4IDUuOTE2Yy0xLjg3My45MzUtMTEuNzMyLTQuMTE4LTEyLjA0Ny0xLjc1NnMxLjA2MSA1LjIxNC0yLjQzIDQuMDc3Yy0zLjUtMS4xMjktNi45NjEtMy44MjEtNy4xNzMuMjYtLjE5NSA0LjA4LTIuNzA3IDMuNjE4LTYuMDMzIDEuMjMtMy4zNDMtMi4zODgtNS4yNC02LjE1OS03LjMyNC0yLjk1MS0yLjA3NSAzLjIxNy00Ljk5My01LjQwMi03LjQ3Ny0zLjkyNnMtMi43NDggMy4yMzUtNS4xNDkuMTc5Yy0yLjM5Mi0zLjA2Ni0zLjEzOC0uODgxLTQuNjM4LjQzMy0xLjUwMSAxLjMxMy0zLjE1Ny01LjIwMi00Ljg4OC00LjgwMi0xLjc0MS40MDktMi41MzQgMS4xMDEtMy44ODItLjkzMS0xLjM1Ni0yLjAyMy0yLjE3Mi02LjAwMi01LjUyMi00LjU1Ny0zLjM0OSAxLjQyOC02Ljk4Mi0xMy4yNTgtOC44MDctMTkuMzM0cy0zLjU1My0xNC42MDgtMy45NTctMjcuNTE1eiIvPjxwYXRoIGZpbGw9IiMxMTc2NWEiIGQ9Im0uMzIxLjIzOS4wNi0uMDYyYS45MjYuOTI2IDAgMCAxIDEuMjk1LjIwOGMxOC44NjkgMjYuMjg5IDYxLjI3NyA1MC4yMTQgNjEuNjk5IDUwLjQ1MmEuOTI3LjkyNyAwIDAgMSAuMzU5IDEuMjYxLjk0Ljk0IDAgMCAxLTEuMjYxLjM1OWMtLjQyMy0uMjM5LTQzLjItMjQuMzY4LTYyLjMwMS01MC45ODVBLjk0Ljk0IDAgMCAxIC4zMTIuMjN6Ii8+PC9zdmc+Cg==);
				inset: auto -8.8em -5.5em auto;
			}

.quiz-intro {
	font-size: var(--wp--preset--font-size--500);
	max-width: 50ch;
	font-weight: 500;
	color: var(--color-theme-600);
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--monte);
	text-wrap: balance;
	padding-block-end: 1.5rem;
	line-height: 1.2;
}

.quiz-cloud {
	position: absolute;
	width: 10em;
	height: 6.9em;
	z-index: 4;
	animation: clouds infinite 40s linear;
}

.quiz-cloud.cloud-01 {
		top: 5em;
		font-size: 0.9rem;
		animation-delay: -12s;
		animation-duration: 65s;
	}

.quiz-cloud.cloud-02 {
		top: 2.25em;
	}

.quiz-cloud.cloud-03 {
		top: 4.5em;
		font-size: 1.35rem;
		animation-delay: -28s;
		animation-duration: 35s;
	}

.quiz-cloud.cloud-04 {
		top: 3.5em;
		font-size: 0.8rem;
		animation-delay: -20s;
		animation-duration: 80s;
	}

@keyframes clouds {
	0% {
		left: -10em;
	}
	100% {
		left: calc(100% + 10em);
	}
}

.quiz-windmill {
	position: absolute;
	inset: auto auto -2em 4vw;
	width: 5.3em;
	height: 10em;
	z-index: 2;
	font-size: 2.5rem;
}

.quiz-windmill [data-css-spin] {
		transform-origin: 50% 26.5%;
		animation: windmillSpin infinite 8s linear;
	}

.quiz-windmill.windmill-01 {
		inset: auto auto -4em 4vw;
	}

.quiz-windmill.windmill-01 [data-css-spin] {
			animation-delay: 0.25s;
		}

.quiz-windmill.windmill-02 {
		inset: auto auto -2em 20vw;
		display: none;
	}

.quiz-windmill.windmill-02 [data-css-spin] {
			animation-delay: -1.25s;
		}

@media (min-width: 48.875em) {

.quiz-windmill.windmill-02 {
			display: block
	}
		}

.quiz-windmill.windmill-03 {
		inset: auto 20vw -3em auto;
		display: none;
	}

.quiz-windmill.windmill-03 [data-css-spin] {
			animation-delay: -2s;
		}

@media (min-width: 62em) {

.quiz-windmill.windmill-03 {
			display: block
	}
		}

.quiz-windmill.windmill-04 {
		inset: auto 1vw -4em auto;
	}

.quiz-windmill.windmill-04 [data-css-spin] {
			animation-delay: -0.3s;
		}

@keyframes windmillSpin {
	0% {
		rotate: 0deg;
	}
	100% {
		rotate: 360deg;
	}
}

.quiz-building {
	position: absolute;
	inset: auto 0 -6vw;
	z-index: 1;
	width: 100vw;
	height: 22vw;
}

.quiz-panel {
	position: fixed;
	inset: var(--wp-admin--admin-bar--height, 0) 0 0;
	z-index: 900;
	opacity: 0;
	pointer-events: none;
	scale: 1.1;
	background: linear-gradient(0deg, #fff 6%, #d5dbfb 128%);
	transition-property: opacity, scale;
}

.show-quiz .quiz-panel {
	opacity: 1;
	pointer-events: auto;
	scale: 1;
}

.quiz-layout {
	grid-template-rows: minmax(0, 1fr);
	align-items: center;
}

.quiz-question-panel {
	transition-property: translate, opacity;
	transition-delay: 0.2s;
}

@starting-style {

.quiz-question-panel {
		translate: 0 2rem;
		opacity: 0
}
	}

.quiz-question-panel.unload {
		opacity: 0;
		translate: 0 -2rem;
	}

.quiz-question-aside {
	display: none;
	transition-property: translate, opacity;
	width: 45%;
	clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
}

@starting-style {

.quiz-question-aside {
		translate: 2rem 0;
		opacity: 0
}
	}

@media (min-width: 37.5em) {

.quiz-question-aside {
		display: grid
}
	}

.unload + .quiz-question-aside {
	opacity: 0;
	translate: 2rem 0;
}

:is(.stage-1, .stage-6) + .quiz-question-aside {
	background: var(--color-theme-200);
}

:is(.stage-2, .stage-7, .stage-10) + .quiz-question-aside {
	background: var(--color-theme-500);
}

:is(.stage-4, .stage-9) + .quiz-question-aside {
	background: var(--color-theme-600);
}

@media (min-width: 37.5em) {
		.quiz-question-panel-split > * {
			max-width: min(48vw, 40rem);
		}

.quiz-question-panel-columns .quiz-response-items {
		grid-auto-flow: column;
		grid-template-rows: repeat(3, minmax(0, 1fr));
		grid-template-columns: repeat(2, minmax(0, 1fr))
}
	}

.quiz-response-items {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem 0.75rem;
}

.quiz-response:hover .quiz-response-label {
		background: color-mix(
			in display-p3,
			var(--color-theme-800),
			transparent 60%
		);
	}

.quiz-response.active .quiz-response-label {
		translate: 0.1875rem -0.1875rem;
		box-shadow: -0.1875rem 0.1875rem 0 0 var(--color-theme-600);
		background: var(--color-theme-800);
	}

.quiz-response-label {
	transition-property: translate, box-shadow, background;
	box-shadow: 0 0 0 0 var(--color-theme-600);
	text-wrap: balance;
}

.quiz-progress {
	transition-property: translate, opacity;
}

.quiz-complete .quiz-progress {
	translate: 0 105%;
	opacity: 0;
}

.quiz-progress-state {
	transition-property: width;
	transition-duration: 1s;
}

.quiz-guy {
	position: absolute;
	inset: -0.4em auto auto;
	font-size: 2.5rem;
	width: 1em;
	height: 1.28em;
	transition-property: left, scale;
	transition-duration: 1s, 0.4s;
	translate: -75% 0;
}

.quiz-guy-leg {
	transform-origin: 50% 30%;
	animation: walk 1s infinite ease-in-out;
	animation-play-state: paused;
}

.quiz-guy-right {
	animation-direction: reverse;
}

.walk .quiz-guy-leg {
	animation-play-state: running;
}

.walk-back .quiz-guy {
	scale: -1 1;
}

.quiz-results-loader .quiz-guy {
	position: static;
	inset: revert;
	translate: revert;
}

.quiz-results-loader {
	transition-property: translate, opacity;
	transition-delay: 0.2s;
}

@starting-style {

.quiz-results-loader {
		translate: 0 2rem;
		opacity: 0
}
	}

.quiz-results-loader-bar {
	background: repeating-linear-gradient(
			45deg,
			var(--color-theme-600),
			color-mix(
				in display-p3,
				var(--color-theme-200),
				var(--color-theme-600) 15%
			),
			var(--color-theme-600)
		)
		0 100% / 200% 100%;
	animation: infiniteLoader 1.5s infinite forwards linear;
}

@keyframes walk {
	0% {
		rotate: 0deg;
	}

	25% {
		rotate: -5deg;
	}

	75% {
		rotate: 5deg;
	}

	100% {
		rotate: 0deg;
	}
}

@keyframes infiniteLoader {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: -200% 0;
	}
}