.ce-experience {
	box-sizing: border-box;
	max-width: 680px;
	margin: 24px auto;
	padding: 24px;
	border: 1px solid #d8e2dd;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 28px rgba(23, 35, 31, 0.1);
	color: #17231f;
	font-family: inherit;
}

.ce-experience--modal {
	width: min(680px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	overflow: auto;
}

.ce-experience--modal::backdrop {
	background: rgba(16, 27, 22, 0.62);
}

.ce-experience progress {
	display: block;
	width: 100%;
	height: 18px;
	margin-top: 10px;
	accent-color: #16784c;
}

.ce-experience h2 {
	margin: 0 0 10px;
	font-size: clamp(1.35rem, 3vw, 1.75rem);
	line-height: 1.2;
}

.ce-experience p {
	line-height: 1.55;
}

.ce-experience__eyebrow {
	margin: 0 0 6px;
	color: #16784c;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ce-experience__button {
	min-width: 44px;
	min-height: 44px;
	margin-top: 8px;
	padding: 10px 18px;
	border: 0;
	border-radius: 6px;
	background: #16784c;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
}

.ce-experience__button:hover {
	background: #0f5d3b;
}

.ce-experience__button:focus-visible {
	outline: 3px solid #8bd4ad;
	outline-offset: 3px;
}

.ce-experience__button:disabled {
	cursor: wait;
	opacity: 0.65;
}

.ce-experience__confirmation {
	margin: 0;
	font-weight: 700;
}

.ce-experience__choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 18px;
}

.ce-experience__choice {
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid #9bcbb2;
	border-radius: 8px;
	background: #eff8f3;
	color: #0f5d3b;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
}

.ce-experience__choice:hover,
.ce-experience__choice:focus-visible {
	border-color: #16784c;
	background: #dff2e7;
}

.ce-experience__form {
	display: grid;
	gap: 16px;
	margin-top: 18px;
}

.ce-experience__field {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
}

.ce-experience__field label,
.ce-experience__field legend {
	font-weight: 700;
}

.ce-experience__field input:not([type="radio"]):not([type="checkbox"]),
.ce-experience__field select,
.ce-experience__field textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 9px 11px;
	border: 1px solid #879d93;
	border-radius: 6px;
	background: #fff;
	color: #17231f;
	font: inherit;
}

.ce-experience__field input:focus-visible,
.ce-experience__field select:focus-visible,
.ce-experience__field textarea:focus-visible {
	outline: 3px solid #8bd4ad;
	outline-offset: 2px;
}

.ce-reward__state {
	margin-top: 18px;
	padding: 16px;
	border: 1px solid #9bcbb2;
	border-radius: 10px;
	background: #f5fbf7;
}

.ce-reward__state[data-state="revealed"] {
	animation: ce-reward-seal 600ms ease-out both;
	border-color: #16784c;
	box-shadow: 0 0 0 4px rgba(22, 120, 76, 0.12);
}

.ce-reward__state[data-state="claimed"] {
	border-color: #16784c;
	background: #e7f5ed;
}

.ce-reward__title {
	margin: 0 0 8px;
	font-size: 1.2rem;
}

.ce-reward__status {
	margin-bottom: 0;
	font-weight: 700;
}

@keyframes ce-reward-seal {
	from { opacity: 0.65; transform: scale(0.985); }
	to { opacity: 1; transform: scale(1); }
}

@media (max-width: 720px) {
	.ce-experience {
		margin: 16px;
		padding: 20px;
	}

	.ce-experience__button {
		width: 100%;
	}

	.ce-experience__choices {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ce-experience *,
	.ce-experience *::before,
	.ce-experience *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.ce-reward__state {
		animation: none !important;
		transform: none !important;
	}
}