*,
  *::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)
    );
  }

  .label {
    font-family: var(
      --arclight-label-font,
      'Tomorrow',
      'Arclight Label',
      system-ui,
      -apple-system,
      'Segoe UI',
      sans-serif
    );
    font-weight: 600;
    text-transform: uppercase;
    /* --label-spacing-inline in arc-ui's tree. Tomorrow is set tight, so small
       caps need the tracking back; 1px was the Azeret-era value. */
    letter-spacing: var(--label-spacing-inline, 0.75px);
    color: var(--text-ghost, #6b6b80);
    /* Optical, not metric: the cap-height of a small uppercase label sits above
       the optical centre of the mark beside it. Nudging the text down centres
       the pair by eye. Spelled once here rather than three times by hand. */
    margin-top: var(--arclight-label-shift, 0.15em);
  }

      :host {
        display: inline-block;
        --_gap: 6px;
        --_fs: 10px;
      }

      .surface {
        gap: var(--_gap);
        font-size: var(--_fs);
      }