@layer components {
  .install-band {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
    translate: 0 50%;
  }

  .install-band__pill {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    max-inline-size: 100%;
    min-inline-size: 0;
    padding: .75rem .75rem .75rem 1.5rem;
    border-radius: var(--pw-r-lg);
    background: var(--pw-code-bg);
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .install-band__cmd {
    color: color-mix(in oklch, var(--pw-code-text) 78%, var(--pw-primary-soft));
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-sm);
    white-space: nowrap;
  }
  .install-band__prompt { margin-inline-end: .35rem; color: var(--pw-code-com); user-select: none; }
  .install-band__verb { color: inherit; }
  .install-band__flag { color: var(--pw-code-com); }
  .install-band__package { color: var(--pw-success); }

  .install-band__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex: none;
    border-radius: calc(var(--pw-r-lg) - .25rem);
    background: color-mix(in oklch, var(--pw-code-text) 8%, transparent);
    color: var(--pw-code-com);
    transition: color .2s, background .2s;
    &:hover {
      background: color-mix(in oklch, var(--pw-code-text) 16%, transparent);
      color: var(--pw-code-text);
    }
    &.is-copied { color: var(--pw-success); }
  }

  .install-band__icon {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .install-band__icon--done { display: none; }
  .is-copied {
    & .install-band__icon--idle { display: none; }
    & .install-band__icon--done { display: block; }
  }

  .hero:has(.install-band) {
    padding-block-end: 0;
    & + .section { padding-block-start: calc(clamp(4.5rem, 8vw, 7rem) + 2rem); }
  }
}