/* Selected option D mapped to r05 roles. Layout and task logic are preserved.
   option-d.css is an unchanged copy of palette-review-r01/site/variants/D.css. */
:root {
  --body: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bg: var(--paper);
  --surface: var(--paper);
  --gold: var(--coral);
  --sage: var(--blue);
  --danger: var(--error);
  color-scheme: light;
}
@media screen {
  body { background: var(--paper); }
  .site-header,.site-footer { background: var(--space); border-color: var(--line); }
  .site-header { box-shadow: 40px 0 var(--space), -40px 0 var(--space); }
  .site-footer { box-shadow: 40px 0 var(--space), -40px 0 var(--space); }
  h1,h2,h3,dialog h2,.pan-module h2,.answer-explanation h2,
  .answer-empty h2,.catalogue-links h2,.invitation-review .section-heading {
    font-family: var(--display); font-weight: 500;
  }
  h1 { font-size: clamp(36px,3.35vw,48px); line-height: 1.08; letter-spacing: -.035em; }
  h2 { letter-spacing: -.02em; }
  .answer-number { font-family: var(--display); font-weight: 500; color: var(--blue); }
  input,select,textarea { background: var(--paper); border-color: var(--input-line); }
  option { background: var(--paper); }
  input[type=checkbox] { accent-color: var(--blue); }
  .button-primary,.skip-link { background: var(--coral); color: var(--white); }
  .button-primary:hover { background: var(--coral-hover); }
  .button-quiet { border-color: var(--muted); }
  .button-quiet:hover { background: var(--paper-2); }
  .mode-switch { border-color: var(--muted); }
  .mode-switch button:hover { background: var(--paper-2); }
  .mode-switch button[aria-pressed=true] { background: var(--coral); color: var(--white); box-shadow: none; }
  .mode-switch button[aria-pressed=true]:hover { background: var(--coral-hover); }
  .form-error { background: var(--error-soft); }
  .pan-workspace { background: var(--paper); }
  .pan-module>select { background: var(--paper); }
  .pan-figure .shape-a { fill: var(--paper); stroke: var(--blue); }
  .pan-figure .shape-b { fill: var(--blue-soft); stroke: var(--blue); }
  .pan-figure .dimension-line,.pan-figure .guide-line { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .swap-button { border-color: var(--muted); }
  .swap-button:hover { background: var(--paper-2); }
  .pan-answer,.answer-empty { background: var(--blue-soft); }
  .math-details { background: var(--paper-2); }
  .guide details { border-color: var(--line); }
  dialog { background: var(--paper); border-color: var(--muted); }
  dialog::backdrop { background: rgb(23 46 60 / 64%); }
  .toast { background: var(--ink); color: var(--white); box-shadow: 0 4px 24px rgb(23 46 60 / 20%); }
}
@media screen and (max-width:760px) {
  h1 { font-size: 38px; }
  .site-header,.site-footer { box-shadow: none; }
  .pan-module:nth-last-child(1) { border-color: var(--line); }
}