/* Hand-drawn Underline — library CSS */
:root {
  --underline-color: var(--brand--lavender, #c89ef2);
  --underline-thickness: 0.22;
  /* Y offset: + moves the stroke down, - moves it up.
     Unitless = em of the text (e.g. 0.1), or use px / rem (e.g. 0.2rem).
     Override per element with data-underline-offset="…". */
  --underline-offset: 0;
  --underline-roughness: 1;
  --underline-speed: 1;
  --underline-opacity: 1;
}
.hu-layer {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  overflow: visible; pointer-events: none; z-index: -1;
}
.hu-layer svg {
  position: absolute; overflow: visible; width: 1px; height: 1px;
  color: var(--underline-color);
  opacity: var(--underline-opacity);
}
.hu-reveal {
  fill: none; stroke: #fff;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--hu-dur, 700ms)
              cubic-bezier(.62, .04, .28, 1) var(--hu-delay, 0ms);
}
.is-drawn  .hu-reveal { stroke-dashoffset: 0; }
.is-erasing .hu-reveal {
  stroke-dashoffset: -1;
  transition-duration: calc(var(--hu-dur, 700ms) * .55);
  transition-delay: 0ms;
  transition-timing-function: cubic-bezier(.55, 0, .8, .3);
}
.is-instant .hu-reveal { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .hu-reveal { transition: none !important; } }