[data-scroll-write].scroll-write-ready {
  --write-muted: rgba(24, 18, 15, .16);
  --write-ink: var(--ink);
}

[data-scroll-write].scroll-write-ready em {
  --write-muted: rgba(105, 36, 49, .18);
  --write-ink: var(--wine);
}

.scroll-write__char {
  position: relative;
  color: var(--write-muted);
  transition: color 90ms linear, opacity 90ms linear;
}

.scroll-write__char.is-inked {
  color: var(--write-ink);
}

.scroll-write__char.is-cursor::after {
  position: absolute;
  top: .08em;
  right: -.045em;
  width: 1px;
  height: .76em;
  background: #a87739;
  box-shadow: 0 0 .24em rgba(168, 119, 57, .28);
  content: "";
  animation: scroll-write-pulse 720ms ease-in-out infinite alternate;
}

@keyframes scroll-write-pulse {
  from { opacity: .38; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-write__char,
  .scroll-write__char.is-inked {
    color: inherit;
    transition: none;
  }

  .scroll-write__char.is-cursor::after {
    display: none;
  }
}