.quickstart { max-width:1000px; }
.quickstart .setup { border:1px solid var(--rule); margin:16px 0; padding:16px; background:var(--cream-raised); min-width:0; }
.quickstart .setup > summary { cursor:pointer; color:var(--focus); padding:4px 0; }
.quickstart .setup[open] > summary { margin-bottom:12px; }
.quickstart .client-options > details { border-left:2px solid var(--violet); }
.quickstart pre { padding:16px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:.83rem; }
.quickstart .agent-prompt { max-height:31rem; overflow:auto; border-left:2px solid var(--focus); }
.quickstart button { padding:10px 16px; min-height:44px; cursor:pointer; }
.quickstart #copy-status { color:var(--focus); min-height:1.7em; }
.quickstart h3 { margin-top:32px; }
.quickstart [id] { scroll-margin-top:76px; }
/* The enable box shows the header's relay state (web/site-agent.js): only a
   connected agent gets the success colour; enabled-but-waiting is neutral. */
.site-main:not(.site-main-app) a.showcase-button:is([data-link="waiting"], [data-link="connecting"]),
.site-main:not(.site-main-app) a.showcase-button:is([data-link="waiting"], [data-link="connecting"]):hover { background:var(--cream-raised); color:var(--ink); border-color:var(--ink-muted); border-style:dashed; }
.site-main:not(.site-main-app) a.showcase-button[data-link="refused"],
.site-main:not(.site-main-app) a.showcase-button[data-link="refused"]:hover { background:var(--red-bg); color:var(--ink); border-color:var(--danger); }
@media(max-width:640px) {
  .quickstart .setup { padding:12px; }
  .quickstart pre { padding:12px; }
  .quickstart .agent-prompt { max-height:25rem; }
}