.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.drawing {
  position: absolute;
  overflow: visible;
  color: var(--accent-strong);
  outline: none;
  pointer-events: none;
  touch-action: none;
  transform-origin: top left;
  transition:
    transform 360ms cubic-bezier(0.2, 0.7, 0.1, 1),
    opacity 220ms ease;
}

.drawing[data-preview-match='false'] {
  opacity: 0;
  pointer-events: none;
}

.drawing[data-preview-match='false'] .hitTarget {
  pointer-events: none;
}

.previewHitTarget {
  fill: transparent;
  stroke: transparent;
  stroke-width: 1px;
  cursor: pointer;
  pointer-events: all;
}

.drawing[data-preview-selected='true'] .previewHitTarget {
  fill: var(--accent-soft);
  stroke: var(--accent-border);
}

.stroke {
  fill: none;
  stroke: currentcolor;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.stroke[data-dot] {
  fill: currentcolor;
  stroke: none;
}

.hitTarget {
  fill: none;
  stroke: transparent;
  stroke-width: 20px;
  stroke-linecap: round;
  stroke-linejoin: round;
  cursor: grab;
  pointer-events: stroke;
}

.hitTarget[data-dot] {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.selection {
  fill: none;
  stroke: var(--accent-border);
  stroke-width: 1px;
  stroke-dasharray: 4 4;
  pointer-events: none;
}

.drawing:focus-visible .stroke {
  filter: drop-shadow(0 0 3px var(--accent));
}

.drawing[data-consuming='true'] {
  opacity: 0;
  transition: opacity 240ms ease-out;
  pointer-events: none;
}

.drawing[data-consuming='true'] .hitTarget {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .drawing,
  .drawing[data-consuming='true'] {
    transition: none;
  }
}