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

      /* Sizes are CSS, not inline styles written from render(). v1's "stacked"
         size lived here too — it was a layout wearing a size's clothes, and it
         differed from "md" by 1px of tracking, which the lockup now sets through
         --arclight-wordmark-tracking. */
      :host {
        display: inline-block;
        line-height: 1;
        --_fs: 15px;
        --_ls: 6px;
      }

      :host([size='md']) {
        --_fs: 18px;
        --_ls: 9px;
      }

      :host([size='lg']) {
        --_fs: 24px;
        --_ls: 12px;
      }

      .wordmark {
        font-family: var(
          --arclight-wordmark-font,
          'Host Grotesk',
          'Arclight Wordmark',
          system-ui,
          sans-serif
        );
        font-size: var(--_fs);
        font-weight: 500;
        letter-spacing: var(--arclight-wordmark-tracking, var(--_ls));
        text-transform: uppercase;
        color: var(--text-primary, #e8e8ec);
        white-space: nowrap;
        user-select: none;
        /* Tracking is applied after the last letter too; pull it back so the
           mark ends at the R rather than a letter-space past it. */
        margin-right: calc(-1 * var(--arclight-wordmark-tracking, var(--_ls)));
      }