:root { color-scheme: light; font: 16px/1.65 system-ui, sans-serif; color: #252b3b; background: #fff; }
body { margin: 0; }
a { color: #493bdb; text-underline-offset: 3px; }
a:focus-visible, select:focus-visible { outline: 2px solid #493bdb; outline-offset: 4px; }
.docs-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 0 24px; border-bottom: 1px solid #e4e6ec; font-size: 14px; }
.docs-header img { display: block; }
.docs-header nav { display: flex; gap: 24px; }
.docs-header a { color: inherit; text-decoration: none; }
.docs-header [aria-current] { color: #493bdb; box-shadow: 0 2px #493bdb; }
main { max-width: 820px; margin: 48px auto; padding: 0 24px; }
h1 { font-size: 2.5rem; letter-spacing: -.04em; line-height: 1.2; }
h2 { margin-top: 40px; line-height: 1.3; }
h3 { font-size: 1.25rem; }
section { scroll-margin-top: 24px; }
.preview { padding: 16px 20px; border-left: 4px solid #7566ef; background: #f3f1ff; }
.environment { font-size: .875rem; overflow-wrap: anywhere; }
select { font: inherit; border: 1px solid #9ba0b0; border-radius: 6px; padding: 8px 36px 8px 12px; background: transparent; color: inherit; max-width: 100%; }
pre { overflow: auto; padding: 20px; border-radius: 8px; background: #f6f7fa; line-height: 1.5; }
code { font-size: .875rem; }
li { margin: 10px 0; }
.skip { position: absolute; left: 16px; top: -100px; padding: 8px; background: #fff; }
.skip:focus { top: 8px; }
@media (max-width: 600px) { .docs-header { padding: 12px 16px; flex-wrap: wrap; } .docs-header img { width: 151px; height: 30px; } .docs-header nav { gap: 20px; } main { margin-top: 32px; padding: 0 16px; } h1 { font-size: 2rem; } }
:root[data-theme="dark"] { background: #151720; color: #e4e6ec; } :root[data-theme="dark"] a, :root[data-theme="dark"] .docs-header [aria-current] { color: #b5abff; } :root[data-theme="dark"] .preview { background: #28243f; } :root[data-theme="dark"] pre { background: #202431; } :root[data-theme="dark"] .docs-header { border-color: #383d4c; } :root[data-theme="dark"] .skip { background: #151720; }

/* The docs mount the dashboard's shared CustomSelectField without its app reset. */
.mcp-client-selector {
  /* Same palette values as src/app.scss, used by CustomSelectField.scss. */
  --color-neutral-black-400: rgb(102, 102, 102);
  --color-neutral-black-700: rgb(51, 51, 51);
  --color-brand-secondary: rgb(55, 147, 246);
  --color-neutral-white-100: rgb(245, 245, 245);
  width: 360px;
  max-width: 100%;
}
.mcp-client-selector .select_label, .mcp-client-selector .linkText { margin: 0; }
.mcp-client-selector .select { display: flex; flex-direction: column; gap: 8px; }
.mcp-client-selector .ant-select { max-height: 40px; }
.mcp-client-selector .custom-select-dropdown { color-scheme: light; }
/* Use the existing neutral palette for dark-mode contrast. */
:root[data-theme="dark"] .mcp-client-selector {
  --color-neutral-black-400: rgb(220, 220, 220);
  --color-neutral-black-700: rgb(245, 245, 245);
  --color-neutral-white-100: rgb(34, 34, 34);
}
:root[data-theme="dark"] .mcp-client-selector .custom-select-dropdown { color-scheme: dark; }