body { background: var(--cream); }
  .page { max-width: 1440px; min-height: 100vh; width: 100%; margin: 0 auto; display: flex; flex-direction: column; }
  .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); }
  .progress-label { font-family:var(--mono); font-size:var(--t-micro); text-transform:uppercase; letter-spacing:0.14em; color:var(--muted); }
  .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 { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:80px; padding:80px 96px; align-items:center; }
  .quiz-num { font-family:var(--mono); font-size:12px; color:var(--forest); letter-spacing:0.14em; margin-bottom:24px; display:flex; gap:var(--s-2); }
  .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); }

  /* Preference sliders */
  .pref-group {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .pref {
    padding: var(--s-5);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
  }
  .pref-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
  }
  .pref-label {
    font-family: var(--display);
    font-size: var(--t-body);
    color: var(--ink);
    font-weight: 600;
  }
  .pref-value {
    font-family: var(--mono);
    font-size: var(--t-micro);
    color: var(--forest);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pref-axis {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
  }
  .pref-track {
    position: relative;
    height: 36px;
    background: var(--cream-deep);
    border-radius: var(--r-pill);
    cursor: pointer;
  }
  .pref-track .marks {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 18px;
    justify-content: space-between;
  }
  .pref-track .marks span {
    width: 2px;
    height: 8px;
    background: var(--faint);
    border-radius: 1px;
  }
  .pref-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--forest);
    border: 3px solid var(--cream);
    box-shadow: var(--shadow-md);
  }
  .pref-thumb::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: var(--forest);
    border-radius: 50%;
  }

  /* Pill row for binary-ish answers */
  .pill-row {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    margin-top: 12px;
  }
  .pill {
    padding: 10px 16px;
    border: 1.5px solid var(--rule);
    background: var(--paper);
    color: var(--ink);
    border-radius: var(--r-pill);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 140ms ease;
  }
  .pill:hover { border-color: var(--forest); }
  .pill.selected { background: var(--ink); color: var(--cream); border-color: var(--ink); }

  /* Country input — quiz-05 ---------------------------------------- */
  .country-input {
    width: 100%;
    max-width: 480px;
    padding: 14px 18px;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    transition: border-color .15s, box-shadow .15s;
  }
  .country-input:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--g16);
  }
  .country-input::placeholder { color: var(--text-faint); }

  /* Loose pill row that wraps neatly */
  .pill-row.wrap { flex-wrap: wrap; }

  /* Required / optional label badges. Slate "Optional" sits next to
     fields you can skip; the absence of the badge means required. */
  .opt-badge {
    display: inline-block;
    margin-inline-start: 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
  }

  /* Disabled Continue — pre-JS friendly. */
  a.btn.primary.is-disabled,
  a.btn.primary.is-disabled:hover {
    cursor: not-allowed;
    transform: none;
    opacity: 0.4;
    pointer-events: none;
  }

  /* Per-card Skip toggle — same pattern as quiz-03/04. Applies to
     the optional cards (everything except Country). */
  .pref { transition: background 200ms ease, border-color 200ms ease, border-style 0ms; }
  .pref-head { align-items: center; gap: var(--s-3); }
  .pref-label { transition: color 200ms ease; }
  .pref-skip {
    font-family: var(--mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-faint);
    background: transparent;
    border: 1px solid transparent;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .pref:hover .pref-skip { color: var(--muted); }
  .pref-skip:hover, .pref-skip:focus-visible {
    color: var(--forest-deep);
    background: var(--g10);
    border-color: var(--g16);
    outline: none;
  }
  .pref-skip[aria-pressed="true"] {
    color: var(--forest-deep);
    background: var(--g10);
    border-color: var(--g16);
  }
  .pref.is-skipped {
    background: var(--cream-deep);
    border-style: dashed;
    border-color: var(--g16);
  }
  .pref.is-skipped .pref-label { color: var(--muted); }
  .pref.is-skipped .pill-row,
  .pref.is-skipped .pref-axis {
    opacity: 0.45;
    filter: grayscale(0.4);
    pointer-events: none;
    transition: opacity 200ms ease, filter 200ms ease;
  }
  .pref-skipped-note {
    display: none;
    margin-top: 14px;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--forest-deep);
  }
  .pref-skipped-note::before {
    content: "–";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--g10);
    border: 1px solid var(--g16);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
  }
  .pref.is-skipped .pref-skipped-note { display: inline-flex; }

  /* Responsive (UX-3) — mirrors quiz-01's breakpoints; these two
     steps shipped without any and were unusable on phones. */
  @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; }
  }