@scope (skip-nav-ui) {
  :where(:scope) {
    --skip-nav-bg: var(--a-accent-bg);
    --skip-nav-fg: var(--a-accent-fg);
  }

  /* Host renders nothing in flow — pure behavioral wrapper. The inner
     <a> is position:fixed (anchored to viewport) and sr-only by default;
     becomes visible only on keyboard focus. */
  :scope {
    display: contents;
  }

  :scope a {
    /* sr-only — same canonical pattern as visually-hidden-ui. */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(100%);
    white-space: nowrap;
    border: 0;
    /* Visible-state colors set here so the focus rule doesn't have to
       re-set them; UA's default <a> color is overridden either way. */
    background: var(--skip-nav-bg);
    color: var(--skip-nav-fg);
    text-decoration: none;
    border-radius: var(--a-radius-md);
    font-weight: var(--a-weight-medium);
  }

  :scope a:focus-visible,
  :scope a:focus {
    /* Reveal — drop the sr-only clip + restore intrinsic size + nudge
       down/right from the viewport edge so it doesn't kiss the corner. */
    top: var(--a-space-2);
    left: var(--a-space-2);
    width: auto;
    height: auto;
    padding: var(--a-space-2) var(--a-space-3);
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    outline: 2px solid var(--a-accent-bg);
    outline-offset: 2px;
  }
}
