:root {
  --accent: #7655d8;
  --brand-mark: url("/assets/site/assets/mark-welcome-balanced.svg");
  --accent-hover: #6040b8;
  --accent-wash: color-mix(in srgb, var(--accent) 5%, var(--surface));
  --accent-tint: color-mix(in srgb, var(--accent) 11%, var(--surface));
  --accent-glow: color-mix(in srgb, var(--accent) 7%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 23%, var(--surface));
  --accent-soft: var(--accent-wash);
  --prompt-wash: var(--accent-wash);
  --prompt-line: var(--accent-line);
  --accent-selection: var(--accent-tint);
  --accent-selection-ink: var(--ink);
  --orange-button: var(--accent);
  --orange-button-hover: var(--accent-hover);
}
:root[data-palette="violet"] {
  --accent: #7655d8;
  --accent-hover: #6040b8;
}
.brand {
  gap: 7px;
}
.brand-symbol {
  display: block;
  flex: none;
  width: 30px;
  height: 30px;
  background: var(--accent);
  mask: var(--brand-mark) center / contain no-repeat;
  -webkit-mask: var(--brand-mark) center / contain no-repeat;
}
.brand-wordmark {
  display: block;
  flex: none;
  width: 122px;
  height: 25px;
  background: var(--ink);
  mask: url("/assets/site/assets/wordmark.svg?v=2") center / contain no-repeat;
  -webkit-mask: url("/assets/site/assets/wordmark.svg?v=2") center / contain no-repeat;
}
.site-header .brand {
  gap: 5px;
}
.setup-prompt {
  font-family: inherit;
}
::selection {
  background: var(--accent-tint);
  color: var(--ink);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.prompt-box p span {
  color: var(--accent);
}
.directory-page {
  --directory-card: var(--surface);
}
.directory-page .skip-link:not(:focus) {
  position: absolute;
  left: -9999px;
}
.directory-page .directory-cta {
  background: var(--accent);
  color: #fff;
}
.directory-page .directory-cta:hover {
  background: var(--accent-hover);
}
.connection-panel-mark::before,
.setup-mark {
  mask-image: var(--brand-mark);
  -webkit-mask-image: var(--brand-mark);
}
@media (max-width: 650px) {
  .site-header-inner.wrap {
    padding-inline: 18px;
  }
  .site-header-inner > nav {
    gap: 14px;
  }
  .site-header .button[data-open-setup] {
    padding-inline: 17px;
  }
}
@media (max-width: 430px) {
  .site-header .brand-wordmark {
    width: 101px;
    height: 22px;
  }
  .site-header .brand-symbol {
    width: 25px;
    height: 28px;
  }
  .site-header-inner > nav {
    gap: 12px;
  }
  .site-header .button[data-open-setup] {
    padding-inline: 14px;
  }
  .site-header nav > a.agent-docs-link {
    font-size: 12px;
  }
}
@media (max-width: 370px) {
  .site-header-inner.wrap {
    gap: 8px;
    padding-inline: 12px;
  }
  .site-header .brand-wordmark {
    width: 92px;
    height: 20px;
  }
  .site-header .button[data-open-setup] {
    font-size: 12px;
    padding-inline: 10px;
  }
  .site-header-inner > nav {
    gap: 9px;
  }
}

@media (max-width: 430px) {
  html[data-palette] .directory-page .site-header .directory-cta {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 12px;
  }
  .directory-page .site-header-inner > nav {
    gap: 10px;
  }
}
@media (max-width: 370px) {
  .directory-page .site-header-inner.wrap {
    padding-inline: 12px;
    gap: 8px;
  }
  html[data-palette] .directory-page .site-header .directory-cta {
    padding-inline: 9px;
  }
  .directory-page .site-header-inner > nav {
    gap: 8px;
  }
}
.prompt-box p span {
  white-space: normal;
  overflow-wrap: anywhere;
}