*,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :host {
    transition: opacity var(--transition-fast, 150ms ease);
  }

  /* Reduced motion, once, for every element that adopts these styles.
   *
   * v1 had three hand-rolled copies of this and two of them were wrong. The
   * fullscreen loader's was the instructive one: it animated :host([fullscreen])
   * at specificity (0,2,0) and guarded :host at (0,1,0), so the guard lost the
   * cascade and a reduced-motion visitor got the animation anyway. !important
   * makes that class of mistake unrepresentable rather than merely fixed.
   *
   * :host is in the selector list because brand animates hosts — arc-ui's
   * otherwise-identical block omits it, since no arc component does.
   *
   * 0.01ms rather than "animation: none", matching arc-ui and for its reason: an
   * element that tears down on animationend would wait forever for an event a
   * canceled animation never fires. */
  @media (prefers-reduced-motion: reduce) {
    :host,
    :host *,
    :host *::before,
    :host *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  .surface {
    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    transition:
      transform 240ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
      filter 240ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  }

  a.surface:is(:hover, :focus-visible) {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 8px rgba(var(--accent-primary-rgb, 77, 126, 247), 0.3))
      drop-shadow(0 0 20px rgba(var(--accent-secondary-rgb, 168, 85, 247), 0.12));
  }

  a.surface:focus-visible {
    outline: none;
    box-shadow: var(
      --interactive-focus,
      0 0 0 3px rgba(var(--accent-primary-rgb, 77, 126, 247), 0.35)
    );
  }

      /* inline-flex, not inline-block. An inline-block host sits on the text
         baseline and carries the descender gap below it, which is what
         consumers were cancelling with a hand-tuned margin-top: -3px on the
         element. The gap is the package's to remove, not theirs. */
      :host {
        display: inline-flex;
        line-height: 0;
      }

      :host([layout='stacked']) .surface {
        flex-direction: column;
      }

      /* The stacked lockup sets the wordmark a touch tighter than its own size
         would; this is the one number size="stacked" used to encode. */
      :host([layout='stacked']) arclight-wordmark {
        --arclight-wordmark-tracking: 8px;
      }

      :host(:not([layout='stacked'])) arclight-wordmark {
        margin-top: var(--arclight-lockup-shift, 0.15em);
      }