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

  @keyframes pulse-expand {
    0%,
    100% {
      transform: scale(1);
      opacity: 0.7;
    }
    50% {
      transform: scale(1.15);
      opacity: 1;
    }
  }

  @keyframes pulse-contract {
    0%,
    100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(0.92);
      opacity: 0.5;
    }
  }

  .pulse-out,
  .pulse-in {
    transform-box: fill-box;
    transform-origin: center;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: paused;
  }

  .pulse-out {
    animation-name: pulse-expand;
  }

  .pulse-in {
    animation-name: pulse-contract;
  }

  :host([animated][data-visible]) .pulse-out,
  :host([animated][data-visible]) .pulse-in {
    animation-play-state: running;
  }

      :host {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
        overflow: visible;
        color: var(--text-primary, #e8e8ec);
        --logo-size: 28px;
      }

      :host([size='md']) {
        --logo-size: 48px;
      }

      :host([size='lg']) {
        --logo-size: 96px;
      }

      /* Sized in CSS, not by an inline style written from updated(). v1 set
         svg.style.height directly, which no external rule could outrank — an
         element nobody could resize. */
      svg {
        height: var(--logo-size);
        width: auto;
        overflow: visible;
      }