.cq-challenge-page {
  --cqc-navy: #031639;
  --cqc-blue: #182a5b;
  --cqc-red: #e7352b;
  --cqc-success: #138a56;
  --cqc-line: #d8dfeb;
}
.cq-challenge-page [hidden] { display: none!important; }
.cq-challenge-container { width: min(960px,100%); }
.cq-challenge-header { width: min(800px,100%); margin: 0 auto clamp(25px,4vw,38px); text-align: center; }
.cq-challenge-header h1 { margin: 0; color: var(--cqc-navy); font-size: clamp(38px,6vw,68px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.cq-challenge-header > p:last-child { width: min(690px,100%); margin: 20px auto 0; color: #5d6b82; font-size: clamp(17px,2.2vw,21px); line-height: 1.5; text-wrap: balance; }
.cq-challenge-featured { overflow: hidden; margin: 0 0 clamp(28px,5vw,48px); border-radius: clamp(18px,3vw,28px); background: #dce6f6; box-shadow: 0 24px 70px rgba(3,22,57,.16); }
.cq-challenge-featured img { display: block; width: 100%; height: auto; aspect-ratio: 1200/630; object-fit: cover; }
.cq-challenge-app { width: min(820px,100%); margin-inline: auto; }
.cq-challenge-loading,
.cq-challenge-error,
.cq-challenge-noscript { padding: clamp(30px,6vw,54px); border: 1px solid var(--cqc-line); border-radius: 22px; background: #fff; box-shadow: 0 18px 55px rgba(3,22,57,.1); text-align: center; }
.cq-challenge-loading { display: flex; min-height: 170px; align-items: center; justify-content: center; gap: 13px; color: var(--cqc-navy); font-size: 18px; font-weight: 800; }
.cq-challenge-spinner { width: 24px; height: 24px; border: 3px solid #cbd6e7; border-top-color: var(--cqc-red); border-radius: 50%; animation: cqc-spin .8s linear infinite; }
@keyframes cqc-spin { to { transform: rotate(360deg); } }
.cq-challenge-error h2,
.cq-challenge-noscript h2 { margin: 0; color: var(--cqc-navy); font-size: clamp(25px,4vw,34px); }
.cq-challenge-error p,
.cq-challenge-noscript p { color: #5d6b82; font-size: 17px; line-height: 1.55; }
.cq-challenge-retry,
.cq-challenge-noscript a { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 0 22px; border: 0; border-radius: 12px; color: #fff; background: var(--cqc-red); font-size: 16px; font-weight: 900; text-decoration: none; cursor: pointer; }
.cq-challenge-progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.cq-challenge-progress-row p { margin: 0; }
.cq-challenge-progress-text { color: var(--cqc-navy); font-size: 16px; font-weight: 900; }
.cq-challenge-score-hint { color: #667085; font-size: 13px; }
.cq-challenge-progress { height: 10px; overflow: hidden; margin-bottom: 18px; border-radius: 999px; background: #dfe6f1; }
.cq-challenge-progress-bar { display: block; width: 10%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cqc-red),#ff6b63); transition: width .25s ease; }
.cq-challenge-question-card { padding: clamp(25px,5vw,48px); border: 1px solid rgba(3,22,57,.06); border-radius: 24px; background: #f5f7fb; box-shadow: 0 18px 55px rgba(3,22,57,.11); }
.cq-challenge-question-number { margin: 0 0 9px; color: var(--cqc-red); font-size: 13px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.cq-challenge-question { margin: 0 0 28px; color: var(--cqc-navy); font-size: clamp(29px,5vw,48px); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.cq-challenge-question:focus { outline: none; }
.cq-challenge-options { display: grid; gap: 13px; }
.cq-challenge-option { display: grid; width: 100%; min-height: 68px; grid-template-columns: 46px 1fr; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border: 2px solid var(--cqc-line); border-radius: 14px; color: var(--cqc-navy); background: #fff; text-align: left; cursor: pointer; transition: transform .15s ease,border-color .15s ease,background .15s ease; }
.cq-challenge-option:hover:not(:disabled) { transform: translateY(-1px); border-color: #96aed5; }
.cq-challenge-option:focus-visible { outline: 4px solid rgba(21,94,239,.22); outline-offset: 2px; }
.cq-challenge-option:disabled { opacity: 1; cursor: default; }
.cq-challenge-letter { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; color: #fff; background: var(--cqc-navy); font-weight: 900; }
.cq-challenge-option-text { font-size: clamp(17px,2.4vw,21px); font-weight: 800; line-height: 1.3; }
.cq-challenge-option.is-correct { border-color: var(--cqc-success); background: #edfcf2; }
.cq-challenge-option.is-correct .cq-challenge-letter { background: var(--cqc-success); }
.cq-challenge-option.is-wrong { border-color: var(--cqc-red); background: #fff4f3; }
.cq-challenge-option.is-wrong .cq-challenge-letter { background: var(--cqc-red); }
.cq-challenge-feedback { margin-top: 20px; padding: 20px; border-left: 6px solid var(--cqc-red); border-radius: 12px; background: #fff4f3; }
.cq-challenge-feedback.is-correct { border-color: var(--cqc-success); background: #edfcf2; }
.cq-challenge-feedback:focus { outline: none; }
.cq-challenge-feedback p { margin: 0; }
.cq-challenge-feedback-label { color: var(--cqc-navy); font-size: 21px; font-weight: 900; }
.cq-challenge-feedback-answer { margin-top: 7px!important; color: #27364d; font-size: 17px; line-height: 1.5; }
.cq-challenge-next { width: 100%; min-height: 58px; margin-top: 20px; border: 0; border-radius: 13px; color: #fff; background: var(--cqc-red); font-size: 18px; font-weight: 900; cursor: pointer; box-shadow: 0 10px 25px rgba(231,53,43,.22); }
.cq-challenge-next:hover { background: #ce291f; }
.cq-challenge-next:focus-visible,
.cq-challenge-retry:focus-visible,
.cq-challenge-share:focus-visible,
.cq-challenge-replay:focus-visible { outline: 4px solid rgba(21,94,239,.25); outline-offset: 3px; }
.cq-challenge-results { padding: clamp(30px,7vw,64px); border-radius: 26px; color: #fff; background: radial-gradient(circle at 50% -20%,rgba(255,255,255,.18),transparent 38%),linear-gradient(145deg,#031639,#182a5b 68%,#263f75); box-shadow: 0 28px 75px rgba(3,22,57,.25); text-align: center; }
.cq-challenge-results:focus { outline: none; }
.cq-challenge-results-kicker { margin: 0 0 8px; color: #ff918b; font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.cq-challenge-results h2 { margin: 0; color: #fff; font-size: clamp(28px,5vw,44px); letter-spacing: -.03em; }
.cq-challenge-score { margin: 17px 0 10px; color: #fff; font-size: clamp(62px,12vw,108px); font-weight: 950; line-height: 1; letter-spacing: -.06em; }
.cq-challenge-badge { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 10px; padding: 0 21px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(255,255,255,.1); font-size: 19px; backdrop-filter: blur(8px); }
.cq-challenge-badge-icon { font-size: 25px; }
.cq-challenge-badge-name { color: #fff; }
.cq-challenge-result-message { width: min(550px,100%); margin: 21px auto 28px; color: #dce7ff; font-size: 18px; line-height: 1.55; }
.cq-challenge-result-actions { display: flex; justify-content: center; gap: 13px; }
.cq-challenge-share,
.cq-challenge-replay { min-height: 56px; padding: 0 22px; border: 2px solid transparent; border-radius: 13px; font-size: 16px; font-weight: 900; cursor: pointer; }
.cq-challenge-share { color: #fff; background: var(--cqc-red); }
.cq-challenge-replay { border-color: rgba(255,255,255,.38); color: #fff; background: transparent; }
.cq-challenge-share-status { min-height: 24px; margin: 15px 0 0; color: #dce7ff; font-size: 14px; }
@media (max-width:600px) {
  .cq-challenge-header { text-align: left; }
  .cq-challenge-featured { border-radius: 16px; }
  .cq-challenge-question-card { border-radius: 17px; }
  .cq-challenge-progress-row { align-items: flex-start; flex-direction: column; gap: 3px; }
  .cq-challenge-option { grid-template-columns: 42px 1fr; padding-right: 13px; }
  .cq-challenge-letter { width: 38px; height: 38px; }
  .cq-challenge-result-actions { flex-direction: column; }
  .cq-challenge-share,
  .cq-challenge-replay { width: 100%; }
}
@media (prefers-reduced-motion:reduce) {
  .cq-challenge-spinner { animation: none; }
  .cq-challenge-progress-bar,
  .cq-challenge-option { transition: none; }
}