.kpg-demo {
	--kpg-step-paper: #f5f1e9;
	--kpg-step-card: #fffdf9;
	--kpg-step-slate: #26363d;
	--kpg-step-text: #2e302f;
	--kpg-step-muted: #626762;
	--kpg-step-line: #d7d5cb;
	--kpg-step-orange: #b46d3d;
	background: linear-gradient(145deg, #2c3e45 0%, var(--kpg-step-slate) 62%, #1e2c31 100%);
	border: 1px solid #405159;
	border-radius: 24px;
	box-shadow: 0 18px 45px rgba(25, 35, 39, 0.22), inset 0 1px rgba(255, 255, 255, 0.08);
	color: var(--kpg-step-card);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	margin: 2rem auto;
	max-width: 760px;
	padding: clamp(1.15rem, 4vw, 2.5rem);
}

.kpg-demo--unavailable { max-width: 680px; }
.kpg-demo__sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.kpg-demo__header { border-bottom: 1px solid rgba(245, 241, 233, .28); padding-bottom: 1.25rem; }
.kpg-demo__eyebrow, .kpg-demo__step-label { color: var(--kpg-step-orange); font-size: .78rem; font-weight: 700; letter-spacing: .1em; margin: 0 0 .5rem; text-transform: uppercase; }
.kpg-demo h1, .kpg-demo h2, .kpg-demo h3 { color: var(--kpg-step-slate); font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.2; }
.kpg-demo h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 .8rem; }
.kpg-demo h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); margin: 0 0 .7rem; }
.kpg-demo h3 { font-size: 1rem; margin: 0 0 .35rem; }
.kpg-demo__header p { color: #eef0ea; line-height: 1.65; }
.kpg-demo__header h2 { color: var(--kpg-step-card); }
.kpg-demo__boundary { background: rgba(255, 253, 249, .11); border-left: 2px solid var(--kpg-step-orange); padding: .75rem .9rem; }
.kpg-demo__progress { align-items: baseline; color: var(--kpg-step-card); display: flex; font-weight: 700; gap: .2rem; margin: 1.25rem 0; }
.kpg-demo__progress-label { color: #d6ddd8; font-size: .9rem; font-weight: 500; margin-left: .55rem; }
.kpg-demo__step, .kpg-demo__summary { background: linear-gradient(145deg, #fffdf9, var(--kpg-step-paper)); border: 1px solid rgba(255, 255, 255, .75); border-radius: 16px; box-shadow: 0 10px 24px rgba(12, 20, 22, .16); color: var(--kpg-step-text); padding: clamp(1rem, 3vw, 1.5rem); }
.kpg-demo__step p, .kpg-demo__summary p { color: var(--kpg-step-muted); line-height: 1.65; }
.kpg-demo__choices { border: 0; display: grid; gap: .7rem; margin: 1.25rem 0 0; padding: 0; }
.kpg-demo__choices label { align-items: center; background: #fbfaf6; border: 1px solid var(--kpg-step-line); border-radius: 12px; cursor: pointer; display: flex; gap: .75rem; line-height: 1.45; padding: .85rem .95rem; }
.kpg-demo__choices label:has(input:checked) { background: #f1eee6; border-color: var(--kpg-step-orange); }
.kpg-demo__choices input { accent-color: var(--kpg-step-orange); flex: 0 0 auto; height: 1.1rem; width: 1.1rem; }
.kpg-demo__choices input:focus-visible { outline: 3px solid rgba(180, 109, 61, .38); outline-offset: 3px; }
.kpg-demo__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.kpg-demo__button { background: var(--kpg-step-slate); border: 1px solid var(--kpg-step-slate); border-radius: 999px; color: #fff; cursor: pointer; font: inherit; font-weight: 650; padding: .7rem 1rem; text-decoration: none; }
.kpg-demo__button:hover { background: #1e2c31; border-color: #1e2c31; color: #fff; }
.kpg-demo__button:focus-visible, .kpg-demo__change:focus-visible { outline: 3px solid rgba(180, 109, 61, .42); outline-offset: 3px; }
.kpg-demo__button:disabled { cursor: not-allowed; opacity: .48; }
.kpg-demo__button--secondary, .kpg-demo__button--link { background: transparent; border-color: rgba(255, 253, 249, .72); color: var(--kpg-step-card); }
.kpg-demo__button--link { border-color: var(--kpg-step-orange); }
.kpg-demo__button--secondary:hover, .kpg-demo__button--link:hover { background: #e8e5dc; border-color: var(--kpg-step-orange); color: var(--kpg-step-slate); }
.kpg-demo__summary dl { display: grid; gap: .75rem; margin: 1.25rem 0; }
.kpg-demo__summary dl div { border-bottom: 1px solid var(--kpg-step-line); display: grid; gap: .25rem; grid-template-columns: 1fr auto; padding-bottom: .75rem; }
.kpg-demo__summary dt { color: var(--kpg-step-muted); font-size: .9rem; grid-column: 1; }
.kpg-demo__summary dd { font-weight: 650; grid-column: 1; margin: 0; }
.kpg-demo__change { background: none; border: 0; color: var(--kpg-step-orange); cursor: pointer; font: inherit; font-weight: 700; grid-column: 2; grid-row: 1 / span 2; text-decoration: underline; }
.kpg-demo__explanation { background: #f0f2ee; border-radius: 12px; padding: 1rem; }
.kpg-demo__explanation p { margin: 0 0 1rem; }
.kpg-demo__explanation p:last-child { margin-bottom: 0; }
.kpg-demo__note { font-size: .9rem; }
.kpg-demo__step, .kpg-demo__summary { transition: opacity 150ms ease, transform 150ms ease; }

@media (max-width: 560px) {
	.kpg-demo { border-radius: 16px; margin: 1rem 0; }
	.kpg-demo__actions { flex-direction: column; }
	.kpg-demo__button { text-align: center; width: 100%; }
}

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

/* Integration rules scoped exclusively to this standalone example. */
.kpg-demo, .kpg-demo * { box-sizing: border-box; }
.kpg-demo { width: 100%; font-size: 16px; }
.kpg-demo [hidden] { display: none !important; }
.kpg-demo .kpg-demo__header h2 { color: #fffdf9; font-size: clamp(26px,4vw,38px); margin: 0 0 16px; }
.kpg-demo .kpg-demo__button { white-space: normal; min-height: 44px; line-height: 1.4; }
.kpg-demo .kpg-demo__button:focus-visible,
.kpg-demo .kpg-demo__change:focus-visible,
.kpg-demo .kpg-demo__choices input:focus-visible { outline: 3px solid #b57b44; outline-offset: 4px; }
.kpg-demo .kpg-demo__choices input { margin: 0; appearance: auto; }
.kpg-demo .kpg-demo__choices label { color: #2e302f; }
.kpg-demo .kpg-demo__change { min-height: 44px; padding: 6px; }
.kpg-demo .kpg-demo__summary dd { overflow-wrap: anywhere; }
@media (max-width: 420px) {
 .kpg-demo .kpg-demo__summary dl div { grid-template-columns: minmax(0,1fr); }
 .kpg-demo .kpg-demo__change { grid-column: 1; grid-row: auto; justify-self: start; }
}