body { background: var(--cream); }
  .page { max-width: 1440px; min-height: 100vh; width: 100%; margin: 0 auto; display: flex; flex-direction: column; }

  /* Minimal nav -------------------------------------------------- */
  .quiz-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-5) var(--s-7);
    border-bottom: 1px solid var(--rule);
  }
  .progress {
    flex: 1;
    max-width: 480px;
    margin: 0 var(--s-7);
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }
  .progress-bar {
    flex: 1;
    height: 4px;
    background: var(--rule);
    border-radius: var(--r-pill);
    overflow: hidden;
  }
  .progress-bar .fill {
    height: 100%;
    background: var(--forest);
    border-radius: var(--r-pill);
    transition: width 400ms ease;
  }
  .progress-label {
    font-family: var(--mono);
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
  }
  .quiz-nav .exit {
    font-family: var(--mono);
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    background: none;
    border: 0;
  }

  /* Quiz body ---------------------------------------------------- */
  .quiz {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    padding: 80px 96px;
    align-items: center;
  }
  .quiz-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .quiz-num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--forest);
    letter-spacing: 0.14em;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: var(--s-2);
  }
  .quiz-num .arrow { color: var(--forest); }
  .quiz-question {
    font-family: var(--display);
    font-size: 56px;
    line-height: 1.05;
    color: var(--ink);
    letter-spacing: -0.025em;
    font-weight: 600;
    margin-bottom: 20px;
  }
  .quiz-question .terra { color: var(--forest); }
  .quiz-help {
    font-size: 17px;
    line-height: 1.5;
    color: var(--muted);
    max-width: 480px;
  }
  .quiz-foot {
    margin-top: 48px;
    display: flex;
    gap: var(--s-4);
    align-items: center;
  }
  .quiz-foot .kbd-hint {
    font-family: var(--mono);
    font-size: var(--t-micro);
    color: var(--muted);
    margin-inline-start: 12px;
  }
  kbd {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid var(--rule);
    border-radius: var(--r-xs);
    background: var(--paper);
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink);
  }

  /* Answer choices ----------------------------------------------- */
  .quiz-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .choice {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border: 1.5px solid var(--rule);
    background: var(--paper);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 160ms ease;
    text-align: start;
    font-family: inherit;
    color: var(--ink);
  }
  .choice:hover {
    border-color: var(--forest);
    transform: translateX(4px);
  }
  .choice.selected {
    border-color: var(--forest);
    background: var(--g10);
  }
  .choice .key {
    width: 28px;
    height: 28px;
    border-radius: var(--r-xs);
    border: 1.5px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    flex-shrink: 0;
    background: var(--cream);
  }
  .choice.selected .key {
    border-color: var(--forest);
    background: var(--forest);
    color: var(--cream);
  }
  .choice .text {
    flex: 1;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
  }
  .choice .sub {
    display: block;
    font-size: var(--t-small);
    color: var(--muted);
    margin-top: 4px;
    font-weight: 400;
  }

  /* Disabled Continue (no selection yet) -------------------------
     Includes opacity + pointer-events so the disabled state holds
     pre-JS — the static HTML ships with .is-disabled, so users
     can't accidentally proceed to the next step before JS loads
     and the selection logic wires up. */
  a.btn.primary.is-disabled,
  a.btn.primary.is-disabled:hover {
    cursor: not-allowed;
    transform: none;
    opacity: 0.4;
    pointer-events: none;
  }

  /* Responsive --------------------------------------------------- */
  @media (max-width: 1100px) {
    .quiz {
      grid-template-columns: 1fr;
      gap: var(--s-7);
      padding: 56px 56px;
    }
    .quiz-question { font-size: 44px; }
    .quiz-left { justify-content: flex-start; }
  }
  @media (max-width: 720px) {
    .quiz-nav { padding: 16px 20px; }
    .quiz-nav .progress { margin: 0 var(--s-4); }
    .quiz { padding: 32px 20px; gap: var(--s-6); }
    .quiz-question { font-size: 32px; }
    .quiz-help { font-size: var(--t-body); }
    .quiz-foot { flex-wrap: wrap; }
    .quiz-foot .kbd-hint { display: none; }
    .choice { padding: var(--s-4) var(--s-4); }
    .choice .text { font-size: var(--t-body); }
    .choice .sub { font-size: 12px; }
  }