.mapping-face-outline {
  fill: var(--mapping-face-fill);
  stroke: var(--mapping-face-stroke);
  stroke-width: 1.55;
  stroke-linejoin: round;
}

.mapping-shoulder-curve {
  fill: none;
  stroke: var(--mapping-shoulder-stroke);
  stroke-width: 2;
  stroke-linecap: round;
}

.mapping-centre-line {
  fill: none;
  stroke: var(--mapping-centre-stroke);
  stroke-width: 1.8;
  /* Butt caps keep the dashed spine from poking into the head oval at the chin. */
  stroke-linecap: butt;
  stroke-dasharray: 4 3;
}

.mapping-shoulder-node {
  fill: var(--mapping-shoulder-node-fill);
  stroke: var(--mapping-shoulder-node-stroke);
  stroke-width: 1.8;
}

.mapping-centre-node {
  fill: var(--mapping-centre-node-fill);
  stroke: var(--mapping-centre-node-stroke);
  stroke-width: 1.45;
}

.mapping-shoulder-node.intersection {
  fill: var(--mapping-intersection-fill);
  stroke: var(--mapping-intersection-stroke);
  stroke-width: 2;
}

.mapping-example {
  display: grid;
  place-items: center;
}

.mapping-example svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}