/* One accent, where nobody looks for one: the wet edge of the ink. As a headline reads in, the leading edge is the
   red of the auditor's pencil and dries to ink behind it. Once read, nothing stays coloured. The same red marks the
   tip of the steps line while it moves, text selection, and keyboard focus. */
:root{--wet:#C8233B}
.fi{background-image:linear-gradient(90deg,
  var(--c1) 0,var(--c1) calc(var(--p,1) * 116% - 16%),
  var(--wet) calc(var(--p,1) * 116% - 7%),
  var(--c0) calc(var(--p,1) * 116%),var(--c0) 100%)}
.soft.fi,.soft .fi{--wet:rgb(200 35 59 / .7)}

/* the steps line: a red tip while it travels */
.st3bar i::after{content:"";position:absolute;right:-3px;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--wet);
  opacity:calc(min(1, var(--sp,1) * 20) * min(1, (1 - var(--sp,1)) * 20))}
.steps3{--sp:1}

/* selection and focus */
::selection{background:rgb(200 35 59 / .16);color:#111}
:focus-visible{outline-color:var(--wet)!important}