#word-spirograph > div {
  transform-origin: 11ch 10em;
  position: absolute;
  font-size: 0.89em;
}
span.hlnote > span.undernote > span > span::before {
  width: 0.8lh;
  height: 0.8lh;
  content: " ";
  opacity: 0.2;
  background-image: url('data:image/svg+xml,<svg width="64" height="64" version="1.1" viewBox="0 0 16.933 16.933" xmlns="http://www.w3.org/2000/svg"><path d="m1.5898 4.4292s-3.101 6.8193 4.9923 6.7231" fill="none" stroke="%23000"  stroke-width="1.06"/><path d="m6.582 11.152h4.5957" stroke="%23000"  stroke-width="1.06"/><path d="m9.9979 13.576 6.6411-2.4241-6.6755-2.4298s0.91325 0.99288 0.95364 2.4298c0.04038 1.4369-0.91923 2.4241-0.91923 2.4241z"/></svg>');
  background-size: 100% 100%;
}

span.undernote {
  color: var(--muted-color);
  font-family: "Alegreya Sans SC", system-ui, Ubuntu, sans-serif;
  text-transform: lowercase;
  letter-spacing: 1.19px;
  font-size: 0.645em;
  span {
    position: absolute;

    span {
      display: flex;
      position: relative;
      top: calc(1lh + 0.1em);
    }
  }
}

span.hlnote {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--tmp-muted-between);
}

span.hlnote > span.undernote > span > span {
  top: calc(1lh + 0.25em);
}

@media (prefers-color-scheme: dark) {
  span.hlnote > span.undernote > span > span::before {
    filter: invert(100);
  }
}