.hero-install-cta {
  width: 100%;
}

.hero .hero-install-cta {
  margin-top: var(--space-8);
}

.hero-install-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  color: var(--ink-soft);
}

/* Dark in both themes, so the one thing to copy reads as a terminal. */
.hero-install-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-radius: var(--radius-lg, 10px);
  background: #10202f;
  color: #e6edf3;
  cursor: pointer;
}

.hero-install-prompt {
  font-family: var(--font-mono);
  color: #7d8b99;
  user-select: none;
}

.hero-install-cmd {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  background: none;
  color: inherit;
  padding: 0;
}

/* The site's copy icon button, drawn for the dark line. */
.hero-install-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  background: transparent;
  color: #c3ccd5;
  cursor: pointer;
}

.hero-install-copy:hover {
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

.hero-install-copy.is-copied {
  color: var(--success);
}

.hero-install-copy svg {
  width: 14px;
  height: 14px;
}

/* A copy edges the entire line, not just the button, so a click anywhere
   on it answers where the eye already is. */
.hero-install-line {
  transition: box-shadow 160ms ease, background-color 160ms ease;
}
.home-page .hero-wrap .hero-install-line.is-copied,
.hero-install-line.is-copied {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--success) 50%, transparent), 0 12px 40px rgba(0, 0, 0, 0.45);
}

/* On the dark page the install line is already on a dark ground, so the
   filled box and its shadow stack up. It becomes an outline there. */
:root[data-theme="dark"] .hero-install-line {
  background: transparent;
  border: 1px solid var(--rule-strong);
  box-shadow: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-install-line {
    background: transparent;
    border: 1px solid var(--rule-strong);
    box-shadow: none;
  }
}

/* The entire line copies on click, so the entire line answers the pointer. */
.hero-install-line {
  transition: box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.hero-install-line:hover { background: #18304a; }

.hero-install-line:hover .hero-install-copy {
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

:root[data-theme="dark"] .hero-install-line:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
}

:root[data-theme="dark"] .hero-install-line.is-copied {
  border-color: color-mix(in oklab, var(--success) 60%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-install-line:hover {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    border-color: color-mix(in srgb, var(--ink) 45%, transparent);
  }

  :root:not([data-theme="light"]) .hero-install-line.is-copied {
    border-color: color-mix(in oklab, var(--success) 60%, transparent);
  }
}