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 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; }
  .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); }
  .multi-hint { font-family:var(--mono); font-size:var(--t-micro); color:var(--muted); margin-bottom:14px; text-transform:uppercase; letter-spacing:0.14em; }

  /* Answer choices (same as quiz-01) ----------------------------- */
  .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; }

  /* Checkbox affordance — sits on the right of each .choice so the
     multi-select intent is unmistakable. The empty/checked states
     mirror the card's selected state. */
  .choice .check-box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--faint);
    border-radius: var(--r-xs);
    background: var(--paper);
    flex-shrink: 0;
    position: relative;
    transition: border-color 160ms ease, background 160ms ease;
  }
  .choice:hover .check-box { border-color: var(--forest); }
  .choice.selected .check-box {
    border-color: var(--forest);
    background: var(--forest);
  }
  .choice.selected .check-box::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 3px;
    width: 10px;
    height: 5px;
    border-inline-start: 2px solid var(--cream);
    border-bottom: 2px solid var(--cream);
    transform: rotate(-45deg);
  }

  /* Disabled Continue — static + pre-JS friendly; see quiz-01. */
  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; }
  }