.process-preview {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 60;
  width: min(300px, 36vw);
  aspect-ratio: 4 / 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.process-preview.is-visible { opacity: 1; }
.process-preview img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  border: 1px solid var(--color-hairline);
  box-shadow: 0 16px 44px rgba(25, 40, 55, .14);
}
@media (hover: hover) and (pointer: fine) {
  [data-process-preview]:hover .step__title { color: var(--color-brand-ink); }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .process-preview { display: none; }
}