.cd-quiz-article { margin: 0 auto; }
.cd-quiz {
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 0 20px;
}

.cd-quiz__intro { text-align: center; }
.cd-quiz__cat {
	display: inline-block;
	font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: #fff; background: var(--cd-brand); text-decoration: none;
	padding: .3em .8em; border-radius: 999px; margin-bottom: 14px;
}
.cd-quiz__title { font-size: clamp(1.7rem, 5.2vw, 2.6rem); line-height: 1.08; margin: 0 0 18px; font-weight: 900; letter-spacing: -.02em; }
.cd-quiz__cover { border-radius: var(--cd-radius); overflow: hidden; box-shadow: var(--cd-shadow-lg); margin: 0 0 22px; }
.cd-quiz__cover img { width: 100%; height: auto; display: block; }
.cd-quiz__introtext { color: var(--cd-muted); font-size: 1.05rem; line-height: 1.6; margin-bottom: 22px; text-align: left; }
.cd-quiz__meta {
	list-style: none; display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center;
	padding: 0; margin: 0 0 26px; color: var(--cd-muted); font-size: .9rem; font-weight: 600;
}
.cd-quiz__meta li { display: inline-flex; align-items: center; gap: 6px; }
.cd-quiz__meta .dashicons { font-size: 18px; width: 18px; height: 18px; }
.cd-diff { padding: .2em .7em; border-radius: 999px; font-size: .78rem; }
.cd-diff--easy { background: #dcfce7; color: #166534; }
.cd-diff--medium { background: #fef9c3; color: #854d0e; }
.cd-diff--hard { background: #fee2e2; color: #991b1b; }
.cd-quiz__notready { color: var(--cd-muted); font-style: italic; }

.cd-resume {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
	background: var(--cd-brand-soft); border: 1px solid #c7d2fe; color: #3730a3;
	border-radius: var(--cd-radius-sm); padding: 12px 16px; margin-bottom: 20px; font-weight: 600;
}

.cd-quiz__progress { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.cd-progress { flex: 1; height: 10px; background: var(--cd-line); border-radius: 999px; overflow: hidden; }
.cd-progress__fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cd-brand), #7c3aed); border-radius: 999px; transition: width .35s cubic-bezier(.4,0,.2,1); }
.cd-quiz__counter { font-weight: 700; font-size: .9rem; color: var(--cd-muted); white-space: nowrap; }

.cd-quiz__stage { animation: cd-fade .3s ease; }
@keyframes cd-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cd-q__media { border-radius: var(--cd-radius); overflow: hidden; margin-bottom: 18px; }
.cd-q__media img { width: 100%; height: auto; display: block; }
.cd-q__text { font-size: clamp(1.25rem, 3.6vw, 1.7rem); line-height: 1.3; margin: 0 0 22px; font-weight: 800; }

.cd-q__answers { display: grid; gap: 12px; }
.cd-answer-card {
	display: flex; align-items: center; gap: 14px;
	width: 100%; text-align: left;
	background: var(--cd-bg); border: 2px solid var(--cd-line); border-radius: var(--cd-radius-sm);
	padding: 16px 18px; font-size: 1.02rem; font-weight: 500; color: var(--cd-ink);
	cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .08s ease;
	-webkit-tap-highlight-color: transparent;
}
.cd-answer-card:hover { border-color: var(--cd-brand); background: var(--cd-brand-soft); }
.cd-answer-card:active { transform: scale(.99); }
.cd-answer-card:focus-visible { outline: 3px solid rgba(79,70,229,.4); outline-offset: 2px; }
.cd-answer-card__mark {
	flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
	border: 2px solid var(--cd-line); position: relative; transition: border-color .12s ease;
}
.cd-answer-card.is-selected { border-color: var(--cd-brand); background: var(--cd-brand-soft); }
.cd-answer-card.is-selected .cd-answer-card__mark { border-color: var(--cd-brand); }
.cd-answer-card.is-selected .cd-answer-card__mark::after {
	content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--cd-brand);
}
.cd-answer-card__text { flex: 1; }

.cd-quiz__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.cd-quiz__nav .cd-btn { min-width: 120px; }

.cd-quiz__result { animation: cd-fade .4s ease; }
.cd-result-card {
	background: var(--cd-bg); border: 1px solid var(--cd-line);
	border-radius: var(--cd-radius); overflow: hidden; box-shadow: var(--cd-shadow-lg);
}
.cd-result__media { aspect-ratio: 16/9; background: var(--cd-brand-soft); }
.cd-result__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-result__body { padding: 28px 24px 32px; }
.cd-result__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; font-weight: 700; color: var(--cd-brand); margin: 0 0 6px; }
.cd-result__title { font-size: clamp(1.6rem, 5vw, 2.4rem); margin: 0 0 12px; font-weight: 900; letter-spacing: -.01em; }
.cd-result__short { font-size: 1.12rem; color: var(--cd-ink); margin: 0 0 18px; }
.cd-result__traits { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.cd-result__traits li { background: var(--cd-brand-soft); color: var(--cd-brand-dark); font-weight: 600; font-size: .86rem; padding: .35em .9em; border-radius: 999px; }
.cd-result__long { color: var(--cd-muted); line-height: 1.65; margin-bottom: 22px; }
.cd-result__long p { margin: 0 0 1em; }
.cd-result__careers { background: var(--cd-bg-soft); border-radius: var(--cd-radius-sm); padding: 16px 18px; margin-bottom: 22px; }
.cd-result__careers h3 { margin: 0 0 8px; font-size: 1rem; }
.cd-result__careers ul { margin: 0; padding-left: 18px; color: var(--cd-ink); }
.cd-result__careers li { margin: 3px 0; }
.cd-result__cta { margin-right: 10px; }
.cd-result__actions { margin-top: 18px; }

.cd-related { margin: 40px auto; max-width: var(--cd-maxw); }

@media (prefers-color-scheme: dark) {
	.cd-answer-card { background: #1b1f27; color: #f3f4f6; border-color: #2b303b; }
	.cd-answer-card:hover, .cd-answer-card.is-selected { background: #232838; }
	.cd-result-card { background: #1b1f27; border-color: #2b303b; }
	.cd-result__short { color: #e5e7eb; }
	.cd-result__careers { background: #14181f; }
	.cd-diff--easy { background: #14532d; color: #bbf7d0; }
	.cd-diff--medium { background: #713f12; color: #fde68a; }
	.cd-diff--hard { background: #7f1d1d; color: #fecaca; }
}

@media (prefers-reduced-motion: reduce) {
	.cd-quiz__stage, .cd-quiz__result { animation: none; }
	.cd-progress__fill { transition: none; }
}

.cd-loop { margin: 4px 0 20px; padding: 18px; border: 1px solid var(--cd-line); border-radius: var(--cd-radius-sm); background: var(--cd-bg-soft); }
.cd-loop__insight { margin: 0 0 6px; font-size: 1.05rem; color: var(--cd-ink); }
.cd-loop__predict { margin: 0 0 14px; color: var(--cd-muted); font-style: italic; }
.cd-loop__prove { width: 100%; }
.cd-result__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (prefers-color-scheme: dark) { .cd-loop { background: #14181f; border-color: #2b303b; } .cd-loop__insight { color: #f3f4f6; } }