.mcp-demo{max-width:1080px;margin-bottom:48px}
.demo-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 18px}
.demo-heading h2{font-size:1.35rem;font-weight:500;letter-spacing:-.02em;margin:0}
.demo-heading>span{font-size:.75rem;letter-spacing:.1em;color:#a9bdcc;white-space:nowrap}
.demo-player{aspect-ratio:16/9;background:#071014;border:1px solid #395360;border-radius:14px;overflow:hidden;box-shadow:0 24px 70px #0005}
.demo-play{position:relative;display:block;width:100%;height:100%;color:#fff}
.demo-play img{display:block;width:100%;height:100%;object-fit:cover}
.demo-play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;display:grid;place-items:center;border-radius:50%;background:#e8f4f8;color:#0b1c27;font-size:28px;padding-left:5px;box-shadow:0 4px 30px #0009;transition:background .15s,scale .15s}
.demo-play-label{position:absolute;left:50%;top:calc(50% + 50px);transform:translateX(-50%);padding:7px 15px;border-radius:30px;background:#071014e8;font-size:.9rem;white-space:nowrap}
.demo-play:hover .demo-play-icon{background:#b7e7fb;scale:1.05}
.demo-play:focus-visible{outline:4px solid #b7e7fb;outline-offset:-5px}
.demo-player iframe{display:block;width:100%;height:100%;border:0}
.demo-caption{display:flex;justify-content:space-between;gap:20px;margin:16px 0 22px;color:#a9bdcc;font-size:.875rem;line-height:1.6}
.demo-caption p{margin:0}.demo-caption a{white-space:nowrap;color:#d8eaf3;text-underline-offset:4px}
.demo-chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.demo-chapters a{display:flex;align-items:center;gap:10px;border:1px solid #28424e;border-radius:8px;background:#0c1a23;padding:14px 16px;text-decoration:none;color:#e9eef0;font-size:.9rem}
.demo-chapters a:hover{border-color:#8faeba;background:#122a36}.demo-chapters span{color:#a9cbdc;font-variant-numeric:tabular-nums;font-size:.8rem}
.demo-chapters a:focus-visible,.demo-caption a:focus-visible{outline:2px solid #b7e7fb;outline-offset:4px}
@media(max-width:720px){.demo-heading{align-items:flex-start;flex-direction:column;gap:8px}.demo-heading h2{font-size:1.2rem}.demo-caption{flex-direction:column;gap:8px}.demo-chapters{grid-template-columns:1fr;gap:8px}.demo-chapters a{padding:12px 14px}.demo-play-icon{width:58px;height:58px;font-size:22px}.demo-play-label{top:calc(50% + 37px);font-size:.75rem}.demo-player{border-radius:9px}}
@media(prefers-reduced-motion:reduce){.demo-play-icon{transition:none}}

/* Demo walkthrough: preserve the page's existing typography and quiet layout. */
.ai-command-page .demo-walkthrough{max-width:820px;margin:0 auto 72px}
.demo-walkthrough h2{font-size:clamp(1.6rem,2.3vw,2rem);font-weight:500;line-height:1.25;letter-spacing:-.025em;margin:0 0 20px}
.demo-walkthrough p{color:#aec3ce;line-height:1.7;font-size:1.0625rem}
.demo-walkthrough-steps{margin:28px 0;padding-left:1.5rem}
.demo-walkthrough-steps li{padding-left:.5rem;margin-bottom:24px}
.demo-walkthrough-steps li::marker{color:#a9cbdc}
.demo-walkthrough h3{font-size:1.15rem;font-weight:500;margin:0 0 8px}
.demo-walkthrough-steps p{margin:0}
.demo-walkthrough .demo-scope{font-size:.9375rem;border-top:1px solid #28424e;padding-top:22px}
.demo-related a{color:#d8eaf3;text-underline-offset:4px}
.demo-related a:focus-visible{outline:2px solid #b7e7fb;outline-offset:4px}
@media(max-width:720px){.ai-command-page .demo-walkthrough{margin-bottom:48px}.demo-walkthrough p{font-size:1rem}}