.bx-quiz {
  --paper: #efeee9;
  --ink: #0a0a0b;
  --u: #243a51;
  --line: rgba(10, 10, 11, 0.16);
  --sans: Arial, Helvetica, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: Arial, Helvetica, sans-serif;
  min-height: calc(100svh - 62px);
  padding: clamp(36px, 6vw, 80px) clamp(20px, 3.2vw, 58px) 90px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

.bx-quiz * { box-sizing: border-box; }
.bx-quiz button { font: inherit; cursor: pointer; }

.bx-quiz-sheet {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) clamp(22px, 3vw, 48px) 48px;
  background: #f3f0e8;
  border: 1px solid var(--ink);
}

.bx-quiz-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image: radial-gradient(rgba(10, 10, 11, 0.28) 0.55px, transparent 0.7px);
  background-size: 4px 4px;
}

.bx-quiz-meta {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--ink);
  padding-top: 10px;
  margin-bottom: 36px;
  font: 700 8px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bx-quiz h1 {
  position: relative;
  margin: 0;
  font-size: clamp(42px, 7vw, 88px);
  line-height: 0.8;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.bx-quiz h1 em {
  display: block;
  color: var(--u);
  font: 400 italic 0.52em/0.95 var(--serif);
  letter-spacing: -0.04em;
  text-transform: none;
}

.bx-quiz-lede {
  position: relative;
  margin: 18px 0 0;
  max-width: 520px;
  font: 400 17px/1.5 var(--serif);
}

.bx-quiz-note {
  position: relative;
  margin: 14px 0 36px;
  font: 700 8px/1.5 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10, 10, 11, 0.48);
}

.bx-quiz-step { position: relative; display: none; }
.bx-quiz-step.is-on { display: block; }

.bx-quiz-q {
  margin: 0 0 22px;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.bx-quiz-opts {
  display: grid;
  gap: 10px;
}

.bx-quiz-opts button {
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--ink);
  background: transparent;
  font: 400 16px/1.35 var(--serif);
}

.bx-quiz-opts button:hover,
.bx-quiz-opts button.is-on {
  background: var(--ink);
  color: #fff;
}

.bx-quiz-result { position: relative; display: none; }
.bx-quiz-result.is-on { display: block; }

.bx-quiz-result small {
  display: block;
  font: 700 8px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--u);
}

.bx-quiz-result h2 {
  margin: 12px 0 0;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.8;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.bx-quiz-result h2 em {
  color: var(--u);
  font: 400 italic 0.55em/1 var(--serif);
  text-transform: none;
}

.bx-quiz-result p {
  margin: 18px 0 0;
  max-width: 540px;
  font: 400 17px/1.5 var(--serif);
}

.bx-quiz-stop {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--u);
  font: 400 16px/1.45 var(--serif);
}

.bx-quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.bx-quiz-cta {
  min-height: 48px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font: 700 8px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bx-quiz-cta.ghost {
  background: transparent;
  color: var(--ink);
}

@media (max-width: 700px) {
  .bx-quiz { padding: 28px 16px 60px; }
  .bx-quiz-sheet { padding: 24px 16px 32px; }
}