/* The illustration and the interaction geometry share one coordinate system. */
.mechanical-illustration {
  pointer-events: none;
  user-select: none;
}

.mechanical-illustrated .mechanical-region {
  fill: transparent;
  stroke: transparent;
  stroke-width: var(--model-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
  transition: fill 160ms ease, stroke 160ms ease;
}

.mechanical-illustrated .mechanical-anchor {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.mechanical-illustrated .part:hover .mechanical-region,
.mechanical-illustrated .part.active .mechanical-region {
  fill: var(--model-highlight);
  stroke: var(--accent);
}

.mechanical-illustrated .part:focus-visible .mechanical-region {
  fill: var(--model-highlight);
  stroke: var(--accent);
  stroke-width: var(--model-focus-stroke);
  stroke-dasharray: 5 3;
}

@media (prefers-reduced-motion: reduce) {
  .mechanical-illustrated .mechanical-region { transition: none; }
}