@spacefast/setup-ui 0.2.1

package/src/styles.css

@@ -0,0 +1,827 @@
+/* Public, framework-agnostic setup renderer. Every selector is namespaced so
+   consumers can import this stylesheet without inheriting global resets.
+   Hierarchy contract: one hero primary per page; alternates recede; the
+   terminal lane is open but quiet; source lanes are the big friendly exits. */
+.sf-setup-page,
+.sf-setup-picker,
+.sf-setup-detection,
+.sf-setup-generic,
+.sf-setup-failure,
+.sf-setup-state,
+.sf-setup-source-lanes,
+.sf-setup-terminal,
+.sf-setup-method,
+.sf-setup-let-agent,
+.sf-setup-dock {
+  --sf-setup-bg: var(--background, Canvas);
+  --sf-setup-fg: var(--foreground, CanvasText);
+  --sf-setup-muted: var(--muted, color-mix(in srgb, CanvasText 7%, Canvas));
+  --sf-setup-muted-fg: var(--muted-foreground, color-mix(in srgb, CanvasText 65%, Canvas));
+  --sf-setup-border: var(--border, color-mix(in srgb, CanvasText 16%, Canvas));
+  --sf-setup-accent: var(--primary, CanvasText);
+  --sf-setup-accent-fg: var(--primary-foreground, Canvas);
+  /* Amber wash derived locally — host themes define `--warm` as a foreground
+     token, so it must never be consumed as a background. */
+  --sf-setup-warm: color-mix(in srgb, #f59e0b 12%, var(--background, Canvas));
+  --sf-setup-warning: var(--warning-text, #9a6700);
+  box-sizing: border-box;
+  color: var(--sf-setup-fg);
+}
+
+.sf-setup-page *,
+.sf-setup-picker *,
+.sf-setup-detection *,
+.sf-setup-generic *,
+.sf-setup-failure *,
+.sf-setup-state *,
+.sf-setup-source-lanes *,
+.sf-setup-terminal *,
+.sf-setup-dock *,
+.sf-setup-let-agent * {
+  box-sizing: border-box;
+}
+
+.sf-setup-page,
+.sf-setup-picker,
+.sf-setup-detection,
+.sf-setup-generic,
+.sf-setup-failure,
+.sf-setup-state,
+.sf-setup-terminal {
+  display: flex;
+  flex-direction: column;
+}
+.sf-setup-page {
+  width: min(100%, 52rem);
+  margin-inline: auto;
+  gap: 3rem;
+  min-width: 0;
+}
+.sf-setup-picker {
+  width: min(100%, 52rem);
+  margin-inline: auto;
+  gap: 2.5rem;
+}
+.sf-setup-picker > section,
+.sf-setup-generic,
+.sf-setup-failure,
+.sf-setup-detection {
+  gap: 1rem;
+}
+.sf-setup-page__head {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: flex-start;
+  gap: 1.25rem;
+}
+.sf-setup-method__head {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+.sf-setup-page__head > div,
+.sf-setup-method__head > div {
+  min-width: 0;
+  flex: 1;
+}
+.sf-setup-page h1,
+.sf-setup-picker h1,
+.sf-setup-detection h1 {
+  margin: 0;
+  font-family: var(--font-serif, ui-serif, Georgia, serif);
+  font-size: clamp(2.6rem, 7vw, 3.6rem);
+  font-weight: 500;
+  line-height: 1.02;
+  letter-spacing: -0.035em;
+  text-wrap: balance;
+}
+.sf-setup-page h2,
+.sf-setup-page h3,
+.sf-setup-generic h2,
+.sf-setup-failure h2,
+.sf-setup-state h2,
+.sf-setup-dock h2 {
+  margin: 0;
+  text-wrap: balance;
+}
+.sf-setup-page p,
+.sf-setup-picker p,
+.sf-setup-detection p,
+.sf-setup-generic p,
+.sf-setup-failure p,
+.sf-setup-state p,
+.sf-setup-dock p {
+  margin: 0.35rem 0 0;
+  color: var(--sf-setup-muted-fg);
+  line-height: 1.55;
+  text-wrap: pretty;
+}
+.sf-setup-page__head > div > p {
+  max-width: 56ch;
+  font-size: 1.05rem;
+}
+.sf-setup-page__docs {
+  display: inline-block;
+  margin-top: 0.75rem;
+  font-size: 0.9rem;
+}
+.sf-setup-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  align-self: flex-start;
+  margin-bottom: -1.5rem;
+  padding: 0.35rem 0.55rem;
+  border: 0;
+  border-radius: 0.45rem;
+  background: none;
+  color: var(--sf-setup-muted-fg);
+  font: inherit;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+.sf-setup-back:hover {
+  color: var(--sf-setup-fg);
+  background: var(--sf-setup-muted);
+}
+.sf-setup-back svg {
+  width: 0.95rem;
+  height: 0.95rem;
+  transform: scaleX(-1);
+}
+.sf-setup-eyebrow {
+  margin: 0 0 0.45rem !important;
+  color: var(--sf-setup-muted-fg);
+  font:
+    500 0.75rem/1.3 ui-monospace,
+    monospace;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.sf-setup-page__head .sf-setup-eyebrow,
+.sf-setup-method--primary .sf-setup-eyebrow {
+  color: var(--sf-setup-warning);
+}
+.sf-setup-eyebrow svg {
+  width: 1rem;
+  height: 1rem;
+  vertical-align: -0.15rem;
+}
+.sf-setup-mark {
+  display: inline-flex;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--sf-setup-border);
+  border-radius: 0.4rem;
+  background: var(--sf-setup-muted);
+  color: var(--sf-setup-muted-fg);
+  object-fit: contain;
+  font:
+    600 0.65rem/1 ui-monospace,
+    monospace;
+}
+.sf-setup-mark--large {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 0.75rem;
+  box-shadow: 0 1px 2px color-mix(in srgb, CanvasText 12%, transparent);
+}
+.sf-setup-button {
+  display: inline-flex;
+  min-height: 2.25rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  padding: 0.45rem 0.8rem;
+  border: 1px solid var(--sf-setup-accent);
+  border-radius: 0.45rem;
+  background: var(--sf-setup-accent);
+  color: var(--sf-setup-accent-fg);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+.sf-setup-button svg {
+  width: 1rem;
+  height: 1rem;
+}
+.sf-setup-button:hover:not(:disabled) {
+  filter: brightness(1.12);
+}
+.sf-setup-button:focus-visible,
+.sf-setup-search:focus-within,
+.sf-setup-picker-grid button:focus-visible,
+.sf-setup-source-grid a:focus-visible,
+.sf-setup-method__payload:focus-visible,
+.sf-setup-terminal-row__copy:focus-visible,
+.sf-setup-let-agent:focus-visible {
+  outline: 2px solid var(--sf-setup-accent);
+  outline-offset: 2px;
+}
+.sf-setup-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.52;
+}
+.sf-setup-button--quiet {
+  border-color: var(--sf-setup-border);
+  background: var(--sf-setup-bg);
+  color: var(--sf-setup-fg);
+}
+.sf-setup-methods,
+.sf-setup-terminal__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+}
+
+/* Method cards — the primary is the hero; alternates are quiet siblings. */
+.sf-setup-method {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.85rem;
+  padding: 1rem 1.1rem;
+  border: 1px solid var(--sf-setup-border);
+  border-radius: 0.75rem;
+  background: var(--sf-setup-bg);
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease;
+}
+.sf-setup-method:hover {
+  border-color: color-mix(in srgb, var(--sf-setup-fg) 28%, transparent);
+}
+.sf-setup-method--primary {
+  gap: 1.2rem;
+  padding: 1.75rem;
+  border-color: color-mix(in srgb, var(--sf-setup-fg) 14%, transparent);
+  background: var(--sf-setup-muted);
+  box-shadow: 0 22px 50px -38px color-mix(in srgb, CanvasText 55%, transparent);
+}
+.sf-setup-method h3 {
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+.sf-setup-method p {
+  font-size: 0.9rem;
+}
+.sf-setup-method--primary h3 {
+  font-family: var(--font-serif, ui-serif, Georgia, serif);
+  font-size: 1.6rem;
+  font-weight: 500;
+  letter-spacing: -0.015em;
+}
+.sf-setup-method--primary p {
+  font-size: 1rem;
+}
+.sf-setup-method__payload {
+  display: grid;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 0.8rem;
+  padding: 1rem 1.1rem;
+  border: 1px solid color-mix(in srgb, var(--sf-setup-fg) 9%, transparent);
+  border-radius: 0.55rem;
+  background: var(--sf-setup-bg);
+  color: var(--sf-setup-fg);
+  cursor: pointer;
+  text-align: left;
+  box-shadow: inset 0 1px 0 color-mix(in srgb, CanvasText 5%, transparent);
+}
+.sf-setup-method__payload code {
+  min-width: 0;
+  overflow: auto;
+  font-size: 0.84rem;
+  line-height: 1.55;
+  white-space: pre;
+}
+.sf-setup-method__payload svg {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+}
+.sf-setup-method__payload:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--sf-setup-fg) 22%, transparent);
+}
+.sf-setup-method--primary .sf-setup-method__payload {
+  border-color: color-mix(in srgb, var(--sf-setup-fg) 14%, transparent);
+}
+.sf-setup-method--primary .sf-setup-method__payload code {
+  font-size: 0.9rem;
+}
+.sf-setup-method[data-listing-status="submitted"],
+.sf-setup-method[data-listing-status="planned"] {
+  border-style: dashed;
+  background: color-mix(in srgb, var(--sf-setup-muted) 45%, var(--sf-setup-bg));
+}
+.sf-setup-alternatives {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1.35rem;
+}
+.sf-setup-section-head {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.sf-setup-section-head h2 {
+  font-family: var(--font-serif, ui-serif, Georgia, serif);
+  font-size: 1.6rem;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+.sf-setup-section-head p {
+  max-width: 62ch;
+  margin: 0;
+}
+.sf-setup-alternatives__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.sf-setup-warning {
+  color: var(--sf-setup-warning) !important;
+  font-size: 0.85rem;
+}
+.sf-setup-link {
+  color: var(--sf-setup-fg);
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+}
+.sf-setup-failure {
+  padding: 1.25rem;
+  border: 1px solid color-mix(in srgb, var(--sf-setup-warning) 35%, transparent);
+  border-radius: 0.65rem;
+  background: color-mix(in srgb, var(--sf-setup-warning) 8%, transparent);
+}
+
+/* Source lanes — the big friendly “or just bring your stuff” exits. */
+.sf-setup-source-lanes {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.sf-setup-source-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+}
+.sf-setup-source-grid a {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.9rem;
+  padding: 1.4rem 1.3rem;
+  border: 1px solid var(--sf-setup-border);
+  border-radius: 0.9rem;
+  background: var(--sf-setup-bg);
+  color: var(--sf-setup-fg);
+  text-decoration: none;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease,
+    transform 150ms ease,
+    box-shadow 150ms ease;
+}
+.sf-setup-source-grid a:hover {
+  border-color: color-mix(in srgb, var(--sf-setup-fg) 28%, transparent);
+  background: var(--sf-setup-muted);
+  transform: translateY(-2px);
+  box-shadow: 0 16px 36px -30px color-mix(in srgb, CanvasText 55%, transparent);
+}
+.sf-setup-source-grid svg {
+  width: 1.15rem;
+  height: 1.15rem;
+  flex: none;
+  box-sizing: content-box;
+  padding: 0.5rem;
+  border: 1px solid color-mix(in srgb, var(--sf-setup-fg) 10%, transparent);
+  border-radius: 0.6rem;
+  background: var(--sf-setup-muted);
+  color: var(--sf-setup-fg);
+}
+.sf-setup-source-grid strong {
+  font-size: 1rem;
+  font-weight: 600;
+}
+.sf-setup-source-grid span {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+.sf-setup-source-grid small,
+.sf-setup-picker-grid small,
+.sf-setup-let-agent small {
+  color: var(--sf-setup-muted-fg);
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+/* Compact variant — a slim row strip at the bottom of agent pages. */
+.sf-setup-source-lanes--compact {
+  gap: 0.6rem;
+}
+.sf-setup-source-lanes--compact .sf-setup-source-grid {
+  gap: 0.6rem;
+}
+.sf-setup-source-lanes--compact .sf-setup-source-grid a {
+  flex-direction: row;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.75rem 0.9rem;
+  border-radius: 0.65rem;
+  transform: none;
+  box-shadow: none;
+}
+.sf-setup-source-lanes--compact .sf-setup-source-grid a:hover {
+  transform: none;
+  box-shadow: none;
+}
+.sf-setup-source-lanes--compact .sf-setup-source-grid svg {
+  padding: 0;
+  border: 0;
+  background: none;
+}
+.sf-setup-source-lanes--compact .sf-setup-source-grid strong {
+  font-size: 0.9rem;
+}
+
+/* Generic MCP lane */
+.sf-setup-generic {
+  padding: 1.5rem;
+  border: 1px solid color-mix(in srgb, var(--sf-setup-fg) 9%, transparent);
+  border-radius: 0.75rem;
+  background: var(--sf-setup-muted);
+  box-shadow: 0 20px 48px -40px color-mix(in srgb, CanvasText 50%, transparent);
+}
+.sf-setup-generic h2 {
+  font-family: var(--font-serif, ui-serif, Georgia, serif);
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: -0.015em;
+}
+.sf-setup-generic nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+.sf-setup-search {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  margin: 1rem 0;
+  padding: 0 0.75rem;
+  border: 1px solid var(--sf-setup-border);
+  border-radius: 0.5rem;
+  background: var(--sf-setup-bg);
+}
+.sf-setup-search svg {
+  width: 1rem;
+  height: 1rem;
+}
+.sf-setup-search input {
+  width: 100%;
+  min-height: 2.75rem;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--sf-setup-fg);
+  font: inherit;
+}
+.sf-setup-picker-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+}
+.sf-setup-picker-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+.sf-setup-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.6rem;
+}
+.sf-setup-picker-grid button {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.9rem 1rem;
+  border: 1px solid var(--sf-setup-border);
+  border-radius: 0.75rem;
+  background: var(--sf-setup-bg);
+  color: var(--sf-setup-fg);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease,
+    box-shadow 150ms ease;
+}
+.sf-setup-picker-grid button:hover,
+.sf-setup-picker-grid button[aria-selected="true"] {
+  border-color: color-mix(in srgb, var(--sf-setup-fg) 28%, transparent);
+  background: var(--sf-setup-muted);
+  box-shadow: 0 14px 30px -26px color-mix(in srgb, CanvasText 55%, transparent);
+}
+.sf-setup-picker-grid strong {
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+.sf-setup-picker-grid small {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.sf-setup-mark--picker {
+  width: 2.1rem;
+  height: 2.1rem;
+  border-radius: 0.55rem;
+}
+.sf-setup-picker-go {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+  color: var(--sf-setup-muted-fg);
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+.sf-setup-picker-grid button:hover .sf-setup-picker-go,
+.sf-setup-picker-grid button:focus-visible .sf-setup-picker-go {
+  opacity: 1;
+}
+.sf-setup-picker-grid button > span:last-child,
+.sf-setup-let-agent span {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+.sf-setup-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+/* Overlapping agent-logo strip — hints at the crowd behind a grouped option. */
+.sf-setup-avatar-group {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+.sf-setup-avatar-group .sf-setup-mark {
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 999px;
+  background: var(--sf-setup-bg);
+  box-shadow: 0 0 0 2px var(--sf-setup-bg);
+}
+.sf-setup-avatar-group .sf-setup-mark + .sf-setup-mark,
+.sf-setup-avatar-group .sf-setup-avatar-group__more {
+  margin-left: -0.45rem;
+}
+.sf-setup-avatar-group__more {
+  z-index: 1;
+  display: inline-flex;
+  height: 1.6rem;
+  min-width: 1.6rem;
+  align-items: center;
+  justify-content: center;
+  padding-inline: 0.25rem;
+  border: 1px solid var(--sf-setup-border);
+  border-radius: 999px;
+  background: var(--sf-setup-muted);
+  color: var(--sf-setup-muted-fg);
+  font:
+    600 0.62rem/1 ui-monospace,
+    monospace;
+  box-shadow: 0 0 0 2px var(--sf-setup-bg);
+}
+.sf-setup-detection {
+  width: min(100%, 48rem);
+  margin-inline: auto;
+  gap: 1.25rem;
+}
+
+/* Terminal lane — open but quiet. Command rows, not cards. */
+.sf-setup-terminal {
+  padding: 1.1rem 1.2rem;
+  border: 1px dashed color-mix(in srgb, var(--sf-setup-fg) 14%, transparent);
+  border-radius: 0.75rem;
+  background: color-mix(in srgb, var(--sf-setup-muted) 55%, var(--sf-setup-bg));
+}
+.sf-setup-terminal__content {
+  gap: 0.65rem;
+}
+.sf-setup-terminal-row p {
+  margin: 0 0 0.3rem;
+  color: var(--sf-setup-muted-fg);
+  font-size: 0.82rem;
+}
+.sf-setup-terminal-row > div {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+.sf-setup-terminal-row__copy {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+.sf-setup-terminal-row__copy code {
+  min-width: 0;
+  flex: 1;
+  overflow-x: auto;
+  padding: 0.45rem 0.65rem;
+  border-radius: 0.45rem;
+  background: color-mix(in srgb, var(--sf-setup-fg) 6%, transparent);
+  color: var(--sf-setup-fg);
+  font:
+    400 0.8rem/1.5 ui-monospace,
+    monospace;
+  white-space: pre;
+}
+.sf-setup-terminal-row__copy > svg {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+  color: var(--sf-setup-muted-fg);
+}
+.sf-setup-terminal-row__copy:hover:not(:disabled) > svg {
+  color: var(--sf-setup-fg);
+}
+.sf-setup-terminal-row__tools {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 0.55rem;
+  color: var(--sf-setup-muted-fg);
+  font-size: 0.8rem;
+}
+.sf-setup-terminal-row__tools svg {
+  width: 1rem;
+  height: 1rem;
+}
+.sf-setup-terminal-row__tools .sf-setup-link {
+  color: var(--sf-setup-muted-fg);
+}
+.sf-setup-state {
+  max-width: 36rem;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 2rem 0;
+}
+
+/* Dock */
+.sf-setup-dock {
+  --sf-setup-fg: var(--foreground, CanvasText);
+  --sf-setup-muted-fg: var(--muted-foreground, color-mix(in srgb, CanvasText 65%, Canvas));
+  --sf-setup-accent: var(--primary, CanvasText);
+  --sf-setup-accent-fg: var(--primary-foreground, Canvas);
+  position: sticky;
+  z-index: 30;
+  bottom: 0;
+  border-top: 1px solid color-mix(in srgb, #f59e0b 42%, transparent);
+  background: color-mix(in srgb, var(--background, Canvas) 84%, #f59e0b);
+  color: var(--sf-setup-fg);
+  backdrop-filter: blur(12px);
+  box-shadow: 0 -18px 50px -40px color-mix(in srgb, CanvasText 45%, transparent);
+}
+.sf-setup-dock > div {
+  display: flex;
+  width: min(100%, 56rem);
+  margin: 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.1rem 1.5rem max(1.1rem, env(safe-area-inset-bottom));
+}
+.sf-setup-dock h2 {
+  font-family: var(--font-serif, ui-serif, Georgia, serif);
+  font-size: 1.4rem;
+  font-weight: 500;
+}
+.sf-setup-dock[data-copied] > div {
+  padding-block: 0.65rem;
+}
+.sf-setup-dock[data-copied] h2 {
+  font-size: 1.05rem;
+}
+
+/* The promoted fast-path row on question one. */
+.sf-setup-let-agent {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.1rem 1.2rem;
+  border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent);
+  border-radius: 0.75rem;
+  background: var(--sf-setup-warm);
+  color: var(--sf-setup-fg);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease;
+}
+.sf-setup-let-agent:hover {
+  border-color: color-mix(in srgb, #f59e0b 70%, transparent);
+  box-shadow: 0 14px 34px -28px color-mix(in srgb, #b45309 65%, transparent);
+}
+.sf-setup-let-agent > svg {
+  width: 1.05rem;
+  height: 1.05rem;
+  flex: none;
+  color: var(--sf-setup-warning);
+}
+.sf-setup-let-agent strong {
+  font-size: 1rem;
+  font-weight: 600;
+}
+.sf-setup-let-agent kbd {
+  display: inline-flex;
+  width: 1.75rem;
+  height: 1.75rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid color-mix(in srgb, #b45309 35%, transparent);
+  border-radius: 0.4rem;
+  background: var(--sf-setup-bg);
+  color: var(--sf-setup-warning);
+  font:
+    600 0.75rem/1 ui-monospace,
+    monospace;
+}
+.sf-setup-let-agent[data-copied="true"] {
+  border-color: color-mix(in srgb, #16a34a 55%, transparent);
+}
+
+@media (max-width: 48rem) {
+  .sf-setup-source-grid,
+  .sf-setup-picker-grid {
+    grid-template-columns: 1fr;
+  }
+  .sf-setup-source-grid a {
+    flex-direction: row;
+    align-items: center;
+  }
+  .sf-setup-dock > div {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .sf-setup-dock .sf-setup-button {
+    width: 100%;
+    min-height: 2.75rem;
+  }
+  .sf-setup-button {
+    min-height: 2.75rem;
+  }
+}
+
+@media (max-width: 34rem) {
+  .sf-setup-page {
+    gap: 2.25rem;
+  }
+  .sf-setup-page__head {
+    grid-template-columns: 1fr;
+  }
+  .sf-setup-method__head {
+    flex-direction: column;
+  }
+  .sf-setup-method__head .sf-setup-button {
+    width: 100%;
+  }
+  .sf-setup-method--primary {
+    padding: 1.15rem;
+  }
+  .sf-setup-page h1,
+  .sf-setup-picker h1,
+  .sf-setup-detection h1 {
+    font-size: clamp(2.25rem, 12vw, 3rem);
+  }
+}