.prose :where(ul.contains-task-list) {
  list-style: none;
  padding-inline-start: 0;
}

.prose :where(li.task-list-item) {
  align-items: flex-start;
  display: flex;
  gap: 0.625em;
  padding-inline-start: 0;
}

.prose :where(li.task-list-item > input[type="checkbox"]) {
  appearance: none;
  background: var(--lotus-background);
  border: 1px solid var(--lotus-border-hover);
  border-radius: var(--lotus-radius-sm);
  color: var(--lotus-accent);
  display: inline-grid;
  flex: 0 0 auto;
  height: 1em;
  margin: 0.375em 0 0;
  place-content: center;
  width: 1em;
}

.prose :where(li.task-list-item > input[type="checkbox"])::before {
  background: currentColor;
  clip-path: polygon(14% 44%, 0 59%, 39% 100%, 100% 19%, 84% 6%, 37% 70%);
  content: "";
  height: 0.625em;
  transform: scale(0);
  transform-origin: center;
  transition: transform 120ms ease;
  width: 0.625em;
}

.prose :where(li.task-list-item > input[type="checkbox"]:checked) {
  background: var(--lotus-accent-soft);
  border-color: color-mix(in oklab, var(--lotus-accent) 52%, transparent);
}

.prose :where(li.task-list-item > input[type="checkbox"]:checked)::before {
  transform: scale(1);
}