@layer utilities {
  /* The red dash that marks the current item: the margin nav's page, the
     picked option. It rides on ::after, so it can't go on an element that
     draws its own ::after. Where it sits is set with --current-mark-*
     (defaults in tokens.css). */
  .current-mark {
    position: relative;
  }
  .current-mark:is([aria-current], [aria-selected="true"])::after {
    content: "";
    position: var(--current-mark-position);
    inset-block-start: var(--current-mark-inset);
    inset-inline-start: 50%;
    translate: var(--current-mark-translate);
    inline-size: var(--space-quarter);
    block-size: var(--stroke-m);
    background: var(--color-accent);
  }
}