.mcp-page {
    --mcp-accent: #5142c4;
    --mcp-tint: #f1eeff;
    --mcp-halo: rgba(122, 111, 240, .14);
    --mcp-mint: #086a54;
    --mcp-mint-bg: #e4f7ef;
    --mcp-sky: #12668c;
    --mcp-sky-bg: #e6f5fe;
    color: var(--ink);
}

[data-theme="dark"] .mcp-page {
    --mcp-accent: #c1b7ff;
    --mcp-tint: #29234d;
    --mcp-halo: rgba(122, 111, 240, .19);
    --mcp-mint: #83e0c0;
    --mcp-mint-bg: #173b36;
    --mcp-sky: #a3d9ff;
    --mcp-sky-bg: #1e344d;
}

.mcp-page :is(h1, h2, h3, p, figure) { margin: 0; }
.mcp-page h1,
.mcp-page h2 { text-wrap: balance; }
.mcp-page section[id] { scroll-margin-top: 100px; }
.mcp-page a:focus-visible,
.mcp-page button:focus-visible,
.mcp-page summary:focus-visible {
    outline: 2px solid var(--mcp-accent);
    outline-offset: 4px;
}

.mcp-hero {
    padding-block: clamp(58px, 8vw, 116px);
    border-block-end: 1px solid var(--line);
    background:
        radial-gradient(ellipse at 19% 30%, var(--mcp-halo), transparent 52%),
        radial-gradient(ellipse at 10% 82%, rgba(54, 180, 153, .10), transparent 39%);
}

.mcp-hero-grid,
.mcp-setup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 82px);
}

.mcp-hero-grid { align-items: center; }

.mcp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mcp-accent);
    font-size: .89rem;
    font-weight: 700;
}

.mcp-kicker > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px var(--mcp-halo);
}

.mcp-intro h1 {
    margin-block: 17px 16px;
    font-size: clamp(2.18rem, 4.3vw, 3.85rem);
    line-height: 1.44;
    font-weight: 900;
}

.mcp-intro h1 em {
    color: var(--mcp-accent);
    font-style: normal;
}

.mcp-intro > p {
    max-width: 37rem;
    color: var(--ink-2);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 2;
}

.mcp-actions,
.mcp-platforms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.mcp-actions { margin-block-start: 27px; }
.mcp-actions svg { width: 19px; height: 19px; }

.mcp-platforms {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.mcp-platforms li {
    padding: 3px 12px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: .84rem;
}

.mcp-demo {
    color: #f3f1ff;
    border: 1px solid #42386b;
    border-radius: 28px;
    background:
        radial-gradient(ellipse at 15% 0, rgba(141, 116, 247, .2), transparent 57%),
        #17152b;
    box-shadow: 0 18px 0 -10px var(--mcp-halo), 0 28px 66px -24px rgba(20, 15, 53, .48);
}

.mcp-demo-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 15px 21px;
    border-block-end: 1px solid rgba(222, 217, 255, .14);
}

.mcp-demo-brand,
.mcp-demo-notification {
    display: flex;
    align-items: center;
    gap: 11px;
}

.mcp-demo-brand { font-weight: 700; }

.mcp-demo-icon,
.mcp-demo-bell,
.mcp-feature-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
}

.mcp-demo-icon { color: #e1d9ff; background: #403366; }
.mcp-demo-bell { color: #a5efd5; background: #254745; }
.mcp-demo svg,
.mcp-feature-icon svg { width: 23px; height: 23px; }
.mcp-demo-label { color: #c9c2e0; font-size: .8rem; }

.mcp-demo-dialog {
    display: grid;
    gap: 14px;
    padding: 21px;
}

.mcp-bubble {
    width: fit-content;
    max-width: 95%;
    padding: 11px 14px;
    border: 1px solid rgba(222, 217, 255, .12);
    border-radius: 17px;
    line-height: 1.9;
    font-size: .94rem;
}

.mcp-bubble strong { color: #d9cffb; font-size: .78rem; }
.mcp-bubble-user { border-start-start-radius: 5px; background: #3a3059; }
.mcp-bubble-agent {
    justify-self: end;
    border-start-end-radius: 5px;
    background: #25223b;
}

.mcp-demo-notification {
    flex-wrap: wrap;
    padding: 12px;
    border: 1px solid rgba(174, 237, 211, .20);
    border-radius: 15px;
    background: #222437;
}

.mcp-demo-notification p { color: #d1cde6; font-size: .84rem; }
.mcp-demo-pending {
    margin-inline-start: auto;
    padding: 3px 8px;
    border-radius: 20px;
    color: #afe6d3;
    background: #2a4249;
    font-size: .75rem;
    white-space: nowrap;
}

.mcp-section { padding-block: clamp(51px, 7vw, 92px); }
.mcp-section-heading { max-width: 42rem; }
.mcp-section-heading h2,
.mcp-download-banner h2 {
    margin-block: 10px 9px;
    font-size: clamp(1.65rem, 3.2vw, 2.55rem);
    line-height: 1.55;
    font-weight: 900;
}

.mcp-section-heading p,
.mcp-use-card p,
.mcp-step p,
.mcp-details p,
.mcp-requirements li {
    color: var(--ink-2);
    line-height: 1.95;
}

.mcp-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
    margin-block-start: 24px;
}

.mcp-use-card,
.mcp-example,
.mcp-requirements,
.mcp-step,
.mcp-details {
    min-width: 0;
    border: 1px solid var(--line);
    background: var(--surface);
}

.mcp-use-card,
.mcp-example {
    padding: clamp(17px, 2.3vw, 27px);
    border-radius: 22px;
}

.mcp-feature-icon {
    width: 47px;
    height: 47px;
    margin-block-end: 17px;
    color: var(--mcp-accent);
    background: var(--mcp-tint);
}

.mcp-feature-icon--mint { color: var(--mcp-mint); background: var(--mcp-mint-bg); }
.mcp-feature-icon--sky { color: var(--mcp-sky); background: var(--mcp-sky-bg); }

.mcp-page h3 {
    margin-block-end: 6px;
    font-size: 1.13rem;
    font-weight: 800;
    line-height: 1.6;
}

.mcp-setup,
.mcp-faq {
    border-block: 1px solid var(--line);
    background: var(--bg-soft);
}

.mcp-setup-grid { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }

.mcp-requirements {
    margin-block-start: 22px;
    padding: 20px;
    border-radius: 18px;
}

.mcp-requirements ul {
    margin: 0;
    padding-inline-start: 20px;
}

.mcp-requirements li + li { margin-block-start: 7px; }
.mcp-requirements li::marker { color: var(--mcp-accent); }

.mcp-page :is(.mcp-requirements, .mcp-step, .mcp-details-body) a {
    color: var(--mcp-accent);
    text-decoration: underline;
    text-underline-offset: .22em;
}

.mcp-steps,
.mcp-faq-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mcp-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 18px;
    border-radius: 18px;
}

.mcp-step-number {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 11px;
    color: var(--mcp-accent);
    background: var(--mcp-tint);
    font-weight: 800;
}

.mcp-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 13px 0 0;
}

.mcp-fields > div {
    padding: 9px 11px;
    border-radius: 10px;
    background: var(--bg-soft);
}

.mcp-fields dt { color: var(--ink-2); font-size: .82rem; }
.mcp-fields dd { margin: 3px 0 0; font-size: .92rem; overflow-wrap: anywhere; }
.mcp-fields code {
    direction: ltr;
    unicode-bidi: isolate;
    font-size: .87em;
    font-weight: 700;
}

.mcp-fields--keys { margin-block-end: 12px; }
.mcp-step .mcp-source { margin-block-start: 9px; font-size: .83rem; }
.mcp-setup-content > .mcp-details { margin-block-start: 12px; }
.mcp-details { border-radius: 15px; }

.mcp-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 15px;
    list-style: none;
    cursor: pointer;
    font-weight: 800;
}

.mcp-details summary::-webkit-details-marker { display: none; }
.mcp-details summary::after {
    content: "+";
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: var(--mcp-accent);
    background: var(--mcp-tint);
    font-size: 1.15rem;
}

.mcp-details[open] summary::after { content: "−"; }
.mcp-details-body { padding: 0 16px 15px; }

.mcp-example {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--mcp-tint), var(--surface) 42%);
}

.mcp-example-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
    margin-block-end: 12px;
}

.mcp-example-number {
    color: var(--mcp-accent);
    font-size: 1.35rem;
    font-weight: 900;
}

.mcp-copy {
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--mcp-accent);
    cursor: pointer;
    font: inherit;
    font-size: .83rem;
    font-weight: 700;
}

.mcp-copy:hover { border-color: var(--mcp-accent); }
.mcp-copy[hidden] { display: none; }

.mcp-example blockquote {
    flex: 1;
    margin: 6px 0 0;
    padding: 0 12px;
    border-inline-start: 3px solid var(--mcp-halo);
    color: var(--ink-2);
    line-height: 1.95;
}

.mcp-page .mcp-copy-status {
    min-height: 1.5em;
    margin-block-start: 8px;
    color: var(--mcp-accent);
    font-size: .86rem;
}

.mcp-bottom { padding-block: clamp(40px, 6vw, 74px); }

.mcp-download-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(23px, 5vw, 50px);
    border-radius: 25px;
    background:
        radial-gradient(ellipse at 10% 5%, rgba(211, 201, 255, .22), transparent 52%),
        linear-gradient(125deg, #4131a3, #282452);
    color: #fff;
}

.mcp-download-banner h2 { margin-block-start: 0; color: #fff; }
.mcp-download-banner p { color: #e7e2ff; line-height: 1.9; }
.mcp-download-banner .btn:focus-visible { outline-color: #fff; }

@media (max-width: 900px) {
    .mcp-hero-grid,
    .mcp-setup-grid { grid-template-columns: minmax(0, 1fr); }
    .mcp-demo { width: min(100%, 620px); }
    .mcp-setup-aside {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 16px;
    }
    .mcp-requirements { margin-block-start: 0; }
}

@media (max-width: 690px) {
    .mcp-card-grid,
    .mcp-setup-aside { grid-template-columns: minmax(0, 1fr); }
    .mcp-demo { border-radius: 20px; }
    .mcp-demo-header,
    .mcp-demo-dialog { padding: 13px; }
    .mcp-actions .btn,
    .mcp-download-banner .btn { font-size: .95rem; padding: 12px 16px; }
}

@media (max-width: 460px) {
    .mcp-fields { grid-template-columns: minmax(0, 1fr); }
    .mcp-step { gap: 9px; padding: 12px; }
    .mcp-step-number { width: 28px; height: 28px; }
}