body[data-page-type="quiz"] {
  --quiz-site-header-height: 76px;
  --quiz-progress-height: 70px;
}

/* The quiz has no dark cinematic hero behind the absolute white navigation.
 * Keep its header in normal flow, consistently dark, and sticky so the quiz can
 * safely stack its own progress/question affordances underneath it. */
body[data-page-type="quiz"] .site-header,
body[data-page-type="quiz"] .site-header.scrolled {
  position: sticky;
  inset-block-start: 0;
  height: var(--quiz-site-header-height);
  z-index: 40;
  color: #fff;
  background: linear-gradient(90deg, rgba(10, 36, 28, .98), rgba(20, 57, 44, .96));
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16), 0 10px 34px rgba(6, 23, 15, .18);
}

body[data-page-type="quiz"] .site-header .header-inner {
  border-bottom-color: rgba(255, 255, 255, .14);
}

.quiz-page {
  max-width: 980px;
  padding-top: clamp(2.5rem, 7vw, 6rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.quiz-intro,
.quiz-result-hero {
  max-width: 760px;
  margin: 0 auto 2rem;
  text-align: center;
}

.quiz-intro h1,
.quiz-result-hero h1 {
  margin: .35rem 0 1rem;
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  line-height: .96;
}

.quiz-intro > p,
.quiz-result-hero > p {
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.7;
}

.quiz-count {
  display: inline-block;
  padding: .65rem 1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.quiz-intro .quiz-privacy-note {
  max-width: 650px;
  margin: .85rem auto 0;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--muted, #58645b);
}

.quiz-form {
  max-width: 820px;
  margin: 0 auto;
}

.quiz-progress-wrap {
  position: sticky;
  inset-block-start: var(--quiz-site-header-height, 76px);
  z-index: 22;
  min-height: var(--quiz-progress-height, 70px);
  padding: .8rem .35rem .72rem;
  background: linear-gradient(180deg, rgba(246, 241, 230, .99) 76%, rgba(246, 241, 230, .93));
  border-bottom: 1px solid rgba(29, 60, 47, .1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.quiz-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .45rem;
  font-weight: 750;
}

.quiz-progress-wrap progress {
  display: block;
  width: 100%;
  height: 12px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  accent-color: #9b6b2f;
  background: #ded5c1;
}

.quiz-progress-wrap progress::-webkit-progress-bar {
  background: #ded5c1;
  border-radius: inherit;
}

.quiz-progress-wrap progress::-webkit-progress-value {
  background: linear-gradient(90deg, #b7893e, #80612d);
  border-radius: inherit;
  transition: width .42s cubic-bezier(.22, .74, .2, 1);
}

.quiz-progress-wrap progress::-moz-progress-bar {
  background: linear-gradient(90deg, #b7893e, #80612d);
  border-radius: inherit;
  transition: width .42s cubic-bezier(.22, .74, .2, 1);
}

.quiz-questions {
  position: relative;
}

.quiz-question {
  --quiz-card-pad: clamp(1.25rem, 4vw, 2.25rem);
  position: relative;
  margin: 1.25rem 0;
  padding: 0 var(--quiz-card-pad) var(--quiz-card-pad);
  border: 1px solid rgba(29, 60, 47, .2);
  border-radius: 24px;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 18px 50px rgba(20, 57, 44, .08);
}

.quiz-question::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 16% 20%, rgba(226, 194, 126, .42) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 18%, rgba(90, 124, 102, .38) 0 2px, transparent 3px),
    linear-gradient(115deg, transparent 26%, rgba(241, 220, 171, .2) 48%, transparent 68%);
}

.quiz-question-head {
  position: sticky;
  inset-block-start: calc(var(--quiz-site-header-height, 76px) + var(--quiz-progress-height, 70px) - 1px);
  z-index: 16;
  margin-inline: calc(-1 * var(--quiz-card-pad));
  margin-bottom: 1.05rem;
  padding: var(--quiz-card-pad);
  padding-bottom: 1rem;
  border-radius: 23px 23px 0 0;
  border-bottom: 1px solid rgba(29, 60, 47, .12);
  background: rgba(255, 253, 248, .97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 20px rgba(20, 57, 44, .05);
}

.quiz-question-heading-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.quiz-question-heading-copy {
  min-width: 0;
}

.quiz-question-heading-copy h2 {
  margin: .15rem 0 0;
  font: 700 clamp(1.25rem, 3vw, 1.8rem) / 1.25 Georgia, serif;
  color: inherit;
  text-wrap: balance;
}

.quiz-question-heading-copy h2:focus {
  outline: none;
}

.quiz-number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 2.3rem;
  width: 2.3rem;
  height: 2.3rem;
  margin-top: .05rem;
  border-radius: 50%;
  background: #14392c;
  color: #fff;
  font: 700 1rem / 1 sans-serif;
  box-shadow: 0 5px 14px rgba(20, 57, 44, .22);
}

.quiz-meta {
  margin: 0;
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .7;
}

.quiz-listen {
  display: inline-flex;
  margin: .85rem 0 0 3.3rem;
  min-height: 44px;
  padding: .55rem .8rem;
  border-radius: 999px;
  background: #f2ecdf;
  color: #284c38;
  font-size: .92rem !important;
}

.quiz-listen[hidden] {
  display: none !important;
}

.quiz-listen .icon {
  width: 18px;
  height: 18px;
}

.quiz-listen:hover,
.quiz-listen[aria-pressed="true"] {
  background: #14392c;
  color: #fff;
}

.quiz-options {
  display: grid;
  gap: .75rem;
}

.quiz-option {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  min-height: 60px;
  padding: .85rem 1rem;
  border: 1px solid rgba(20, 57, 44, .22);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.quiz-option:hover,
.quiz-option:focus-within {
  border-color: #8c672d;
  box-shadow: 0 0 0 3px rgba(156, 117, 52, .12);
  transform: translateY(-1px);
}

.quiz-option.is-selected,
.quiz-option:has(input:checked) {
  border-color: #8a672d;
  background: #f5eedf;
  box-shadow: 0 8px 22px rgba(82, 66, 35, .08), inset 0 0 0 1px rgba(138, 103, 45, .16);
}

.quiz-option input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: #14392c;
}

.quiz-option-letter {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #ede4cf;
  font-weight: 800;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.quiz-option.is-selected .quiz-option-letter,
.quiz-option:has(input:checked) .quiz-option-letter {
  background: #14392c;
  color: #fff;
  transform: scale(1.06);
}

.quiz-option-text {
  min-width: 0;
  line-height: 1.45;
}

.quiz-step-actions {
  display: none;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

.quiz-submit {
  margin-top: 1.5rem;
  text-align: center;
}

.quiz-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: .8rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: #14392c;
  color: #fff !important;
  font: 700 1rem / 1.2 sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.quiz-primary:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(20, 57, 44, .2);
}

.quiz-primary:focus-visible {
  outline: 3px solid #c99b48;
  outline-offset: 3px;
}

.quiz-primary:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.quiz-form.is-enhanced .quiz-question {
  display: none;
}

.quiz-form.is-enhanced .quiz-question.is-current {
  display: block;
}

.quiz-form.is-enhanced .quiz-step-actions {
  display: flex;
}

.quiz-form.is-enhanced .quiz-question:last-child .quiz-step-actions {
  display: none;
}

.quiz-form.is-enhanced .quiz-submit {
  display: none;
}

.quiz-form.is-enhanced.is-final .quiz-submit {
  display: block;
}

.quiz-question.is-leaving {
  pointer-events: none;
  animation: quiz-question-leave .18s ease-in both;
}

.quiz-question.is-entering {
  animation: quiz-question-enter .52s cubic-bezier(.17, .84, .28, 1) both;
}

.quiz-question.is-entering::after {
  animation: quiz-question-glint .62s ease-out both;
}

@keyframes quiz-question-leave {
  to {
    opacity: 0;
    transform: translate3d(-18px, 4px, 0) scale(.985);
    filter: blur(2px);
  }
}

@keyframes quiz-question-enter {
  0% {
    opacity: 0;
    transform: translate3d(26px, 8px, 0) scale(.975);
    filter: blur(4px);
  }
  68% {
    opacity: 1;
    transform: translate3d(-3px, 0, 0) scale(1.004);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes quiz-question-glint {
  0%, 100% { opacity: 0; }
  34% { opacity: .95; }
}

.quiz-result-percent {
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  margin: 1.2rem auto;
  border: 10px solid #d6bd82;
  border-radius: 50%;
  background: #14392c;
  color: #fff;
  font-size: 2.1rem;
  font-weight: 850;
}

.quiz-iq-score {
  display: grid;
  gap: .25rem;
  width: min(100%, 330px);
  margin: 1rem auto 1.35rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(156, 117, 52, .35);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(245, 238, 223, .95), rgba(255, 255, 255, .78));
  box-shadow: 0 12px 30px rgba(20, 57, 44, .08);
}

.quiz-iq-score span {
  color: #5f4a25;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.quiz-iq-score strong {
  color: #14392c;
  font: 800 clamp(1.7rem, 5vw, 2.6rem) / 1 Georgia, serif;
}

.quiz-iq-score small {
  color: var(--muted, #58645b);
  font-size: .78rem;
  line-height: 1.4;
}

.quiz-review {
  max-width: 820px;
  margin: 3rem auto 0;
}

.quiz-review > h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.quiz-review-card {
  margin: 1rem 0;
  padding: 1.35rem 1.5rem;
  border-left: 6px solid #55796a;
  border-radius: 16px;
  background: rgba(255, 255, 255, .7);
}

.quiz-review-card.is-wrong {
  border-left-color: #9a5a4a;
}

.quiz-review-card h3 {
  margin: .3rem 0 1rem;
}

.quiz-result-listen,
.quiz-review-listen {
  min-height: 44px;
  padding: .55rem .8rem;
  border: 1px solid rgba(40, 76, 56, .38);
  border-radius: 999px;
  background: #f2ecdf;
  color: #284c38;
  font-size: .92rem !important;
}

.quiz-result-listen {
  margin: 0 auto 1rem;
}

.quiz-review-listen {
  margin: -.2rem 0 1rem;
}

.quiz-result-listen:hover,
.quiz-result-listen[aria-pressed="true"],
.quiz-review-listen:hover,
.quiz-review-listen[aria-pressed="true"] {
  background: #14392c;
  color: #fff;
}

.quiz-explanation {
  font-size: 1.03rem;
  line-height: 1.65;
}

.quiz-source {
  font-size: .9rem;
  opacity: .75;
}

.quiz-empty,
.quiz-no-js {
  padding: 1.25rem;
  border-radius: 14px;
  background: #eee6d4;
}

.dark-mode .quiz-progress-wrap {
  background: linear-gradient(180deg, rgba(21, 35, 29, .99) 76%, rgba(21, 35, 29, .94));
  border-bottom-color: rgba(234, 222, 190, .12);
}

.dark-mode .quiz-question,
.dark-mode .quiz-review-card {
  background: #1e3028;
  border-color: #5c7469;
}

.dark-mode .quiz-question-head {
  background: rgba(30, 48, 40, .97);
  border-bottom-color: #52695f;
}

.dark-mode .quiz-option {
  background: #22382f;
  border-color: #60786d;
}

.dark-mode .quiz-option.is-selected,
.dark-mode .quiz-option:has(input:checked) {
  background: #314a3e;
  border-color: #d5b878;
}

.dark-mode .quiz-option-letter,
.dark-mode .quiz-listen,
.dark-mode .quiz-result-listen,
.dark-mode .quiz-review-listen {
  background: #344d42;
  color: #f5edda;
  border-color: #718779;
}

.dark-mode .quiz-primary {
  background: #e7c982;
  color: #173027 !important;
}

.dark-mode .quiz-iq-score {
  background: linear-gradient(135deg, #293f35, #22352d);
  border-color: #8d794d;
}

.dark-mode .quiz-iq-score span,
.dark-mode .quiz-iq-score strong,
.dark-mode .quiz-iq-score small {
  color: #f3e5bd;
}

@media (max-width: 700px) {
  body[data-page-type="quiz"] {
    --quiz-site-header-height: 70px;
    --quiz-progress-height: 66px;
  }

  .quiz-page {
    padding-top: 2.25rem;
  }

  .quiz-progress-wrap {
    padding-inline: .15rem;
  }

  .quiz-question {
    --quiz-card-pad: 1.05rem;
    border-radius: 18px;
  }

  .quiz-question-head {
    border-radius: 17px 17px 0 0;
  }

  .quiz-question-heading-row {
    gap: .72rem;
  }

  .quiz-question-heading-copy h2 {
    font-size: clamp(1.15rem, 5vw, 1.45rem);
    line-height: 1.27;
  }

  .quiz-number {
    flex-basis: 2rem;
    width: 2rem;
    height: 2rem;
    font-size: .9rem;
  }

  .quiz-listen {
    margin-left: 2.72rem;
  }

  .quiz-option {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: .65rem;
    padding: .78rem;
  }

  .quiz-primary {
    width: 100%;
  }
}

@media (max-width: 390px) {
  body[data-page-type="quiz"] .site-header .wrap {
    width: calc(100% - 24px);
  }

  body[data-page-type="quiz"] .header-inner {
    gap: 6px;
  }

  body[data-page-type="quiz"] .header-support {
    width: auto;
    min-width: 0;
    padding: 0 6px;
    gap: 0;
    white-space: nowrap;
    font-size: 12px !important;
  }

  body[data-page-type="quiz"] .header-support > span {
    display: none;
  }

  body[data-page-type="quiz"] .menu-toggle {
    flex: 0 0 44px;
  }

  .quiz-page {
    width: calc(100% - 24px);
  }

  .quiz-progress-copy {
    gap: .5rem;
    font-size: .9rem;
  }

  .quiz-question {
    --quiz-card-pad: .9rem;
  }

  .quiz-question-heading-row {
    gap: .6rem;
  }

  .quiz-listen {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }

  .quiz-option {
    min-height: 62px;
    padding: .7rem;
    gap: .55rem;
  }

  .quiz-option-letter {
    width: 1.8rem;
    height: 1.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-page *,
  .quiz-page *::before,
  .quiz-page *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

html[data-motion="off"] .quiz-page *,
html[data-motion="off"] .quiz-page *::before,
html[data-motion="off"] .quiz-page *::after {
  scroll-behavior: auto !important;
  transition: none !important;
  animation: none !important;
}