@layer lotek {
  /* The link sits off screen until it gets focus. It cannot be hidden with
     display or visibility, because then the keyboard cannot reach it either,
     and the whole point is lost. */
  .lt-skip-link {
    position: absolute;
    inset-inline-start: var(--lt-spacing-2);
    inset-block-start: var(--lt-spacing-2);
    z-index: 100;
    transform: translateY(calc(-100% - var(--lt-spacing-4)));
    display: inline-block;
    padding: var(
      --lt-skip-link-padding,
      var(--lt-spacing-2) var(--lt-spacing-4)
    );
    font-family: inherit;
    font-size: var(--lt-font-size-m);
    line-height: var(--lt-line-height-default);
    color: var(--lt-color-accent-content);
    background: var(--lt-color-accent-fill);
    border-radius: var(--lt-skip-link-radius, var(--lt-spacing-1));
    text-decoration: underline;
  }

  /* `:focus` and not `:focus-visible`. Focus set from code after a mouse
     click does not count as "visible focus", and the link would then stay
     hidden for someone a script sends there. After a key press it counts as
     visible, but it is the mouse click that decides. */
  .lt-skip-link:focus {
    transform: translateY(0);
    outline: var(--lt-focus-ring);
    outline-color: var(--lt-color-neutral-text-strong);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .lt-skip-link {
      transition: transform 120ms ease;
    }
  }
}