.mcp-section { left: 0; width: 100%; transform: none; background: #f7f8fa; color: #000; }
.mcp-section::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: #eaebee; pointer-events: none; }
.mcp-section__inner { position: relative; width: 1380px; height: 100%; margin: 0 auto; border-inline: 1px solid #eaebee; }
.mcp-section__heading { position: absolute; top: 160px; left: 0; width: 100%; text-align: center; }
.mcp-section__eyebrow { margin: 0 0 24px; color: #3385ff; font-size: 16px; line-height: 24px; }
.mcp-section__heading h2 { margin: 0; font-size: 48px; line-height: 60px; font-weight: 400; white-space: nowrap; }
.mcp-section__description { margin: 20px 0 0; color: #777; font-size: 18px; line-height: 27px; }
.mcp-section__connections { position: absolute; top: 226px; left: 50%; width: 2560px; height: 255px; transform: translateX(-50%); pointer-events: none; }
.mcp-section__connections img { position: absolute; top: 0; display: block; width: 1177px; height: 255px; }
.mcp-section__connection-left { left: 0; }
.mcp-section__connection-right { right: 0; }
.mcp-section__connection-central { position: absolute; top: 510px; left: 50%; transform: translateX(-50%); pointer-events: none; }
.mcp-section__status { position: absolute; top: 452px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; height: 58px; padding: 0 28px 0 14px; border-radius: 100px; background: #282828; color: #fff; font-size: 14px; line-height: 20px; }
.mcp-section__status > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #343434; color: #2498ff; font-size: 18px; }
.mcp-section__preview { position: absolute; top: 552px; left: 50%; width: 1068px; height: 544px; transform: translateX(-50%); border-radius: 24px; background: url("https://pixso.cn/assets/image/pixso-ai-20261022-3c6e4127c7/image/mcp/mcp-bj.jpg") center / cover no-repeat; }
.mcp-config { position: absolute; top: 140px; left: 50%; width: 454px; padding: 6px; transform: translateX(-50%); border: 0; border-radius: 22px; background: rgb(255 255 255 / 72%); outline: 1px solid rgb(0 0 0 / 9%); outline-offset: 0; }
.mcp-config__inner { border-radius: 16px; background: #fff; outline: 1px solid rgb(0 0 0 / 10%); outline-offset: 0; overflow: hidden; }
.mcp-config__header { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 7.5px 0 16px; border-bottom: 1px solid #eaebee; color: #555; font-size: 14px; }
.mcp-config__copy svg { width: 16px; height: 16px; }
.mcp-config__copy { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #666; cursor: pointer; transition: scale 150ms ease-out; }
.mcp-config__copy:hover { background: rgb(0 0 0 / 5%); }
.mcp-config__copy:active { scale: .97; }
.mcp-config__copy svg { grid-area: 1 / 1; transition: opacity 150ms ease-out; }
.mcp-config__icon-check, .mcp-config__copy.is-copied .mcp-config__icon-copy { opacity: 0; }
.mcp-config__copy.is-copied .mcp-config__icon-check { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mcp-config__copy svg { transition: none; } }
.mcp-config__copy:focus-visible { outline: 2px solid #3385ff; outline-offset: 2px; }
.mcp-config__code { margin: 0; padding: 14.5px 18px; color: #444; font: 16px/24px ui-monospace, SFMono-Regular, Consolas, monospace; user-select: text; }
.mcp-config__key { color: #974fff; }
.mcp-config__value { color: #3385ff; }
.mcp-section__guide { position: absolute; top: 1126px; left: 0; width: 100%; margin: 0; text-align: center; color: #888; font-size: 14px; line-height: 20px; }
.mcp-section__guide a { color: #222; text-underline-offset: 3px; }
.mcp-section__guide a:hover { color: #2C76FF; }
.mcp-section__feedback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .mcp-config__copy { transition: none; } .mcp-config__copy:active { scale: 1; } }