/* Page-scoped implementation of design-system/ducky-beta-ui/MASTER.md (colours: tokens.css).
   The book shell and controls remain the production components used by Storybook. */
:is(.page-developers,.page-connect-muse,.page-connect-gemini) main{background:var(--db-canvas)}
:is(.page-developers,.page-connect-muse,.page-connect-gemini) .book-shell{--bg:var(--db-canvas);--surface:var(--db-paper);--surface-2:var(--db-accent-soft);--text:var(--db-ink);--muted:var(--db-muted);--border:var(--db-line);--blue:var(--db-focus);--accent:var(--db-accent);--focus-ring:var(--db-focus);--r-sm:6px;--r-md:10px;color:var(--text);gap:48px;grid-template-columns:224px minmax(0,800px)}
:is(.page-developers,.page-connect-muse,.page-connect-gemini) .book-sidebar{background:var(--db-nav);padding:24px 16px;border-radius:10px;--text:#fbf7e9;--muted:#bed0c5;--surface-2:#19382d;--border:#4f8068;--accent:#e0b338}
:is(.page-developers,.page-connect-muse,.page-connect-gemini) .book-sidebar a:focus-visible,:is(.page-developers,.page-connect-muse,.page-connect-gemini) .book-menu summary:focus-visible{outline:3px solid #efc94f;outline-offset:2px}
:is(.page-developers,.page-connect-muse,.page-connect-gemini) .book-heading h1{max-width:19ch;margin-bottom:16px}
:is(.page-developers,.page-connect-muse,.page-connect-gemini) .book-lead{font-size:17px;max-width:62ch}
.dev-label{display:block;font-size:12px;font-weight:650;color:var(--muted);margin:0 0 8px!important}
.dev-connect-bar{display:flex;align-items:flex-end;gap:16px;margin-top:24px}
.dev-connect-bar>div{flex:1;min-width:0}.dev-connect-bar .book-copy-block{padding:8px 12px;gap:8px}
.dev-connect-bar .book-action{flex:none;min-height:62px}
:is(.page-developers,.page-connect-muse,.page-connect-gemini) .dev-access{font-size:12px;color:var(--muted);margin:12px 0 16px}
.dev-capabilities{margin:24px 0 0}.dev-capabilities>div{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:24px 0;border-top:1px solid var(--border)}
.dev-capabilities dt{font-size:17px;font-weight:700;display:flex;gap:16px;align-items:baseline}.dev-number{font-size:12px;color:var(--muted);font-weight:500}
.dev-capabilities dd{margin:0}:is(.page-developers,.page-connect-muse,.page-connect-gemini) .dev-capabilities p{margin:0 0 8px}:is(.page-developers,.page-connect-muse,.page-connect-gemini) .dev-fine{font-size:13px;color:var(--muted);line-height:1.7;margin:16px 0 0}
.dev-selector{display:flex;border:1px solid var(--border);border-radius:6px;background:var(--surface);padding:4px;margin:24px 0 0}
.dev-selector[hidden],.dev-example[hidden]{display:none}.book-article .dev-selector button{flex:1;background:transparent;border-color:transparent;border-radius:4px;padding:8px}
.book-article .dev-selector button[aria-pressed=true]{background:var(--text);color:var(--bg)}
.dev-example{padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-top:16px;min-width:0}
:is(.page-developers,.page-connect-muse,.page-connect-gemini) .dev-prompt{font-size:16px;margin:12px 0 24px}.dev-example .book-copy-block{background:var(--bg)}
.dev-example pre{max-height:none;white-space:pre-wrap;overflow-wrap:anywhere}.dev-example h3{font-size:18px}
.dev-client,.dev-reference{margin:12px 0;scroll-margin-top:100px}.dev-client .book-copy-block{margin-bottom:16px}.dev-doc-link{display:inline-flex;align-items:center;min-height:44px;margin-bottom:12px}
.dev-contract{margin-bottom:24px}.dev-tool-index{margin:0}.dev-tool-index>div{padding:16px 0;border-top:1px solid var(--border)}.dev-tool-index dt{font-size:14px;font-weight:700}.dev-tool-index dd{margin:8px 0 0}.dev-tool-index code{font-size:12px;overflow-wrap:anywhere;line-height:2}
@media(max-width:1000px){:is(.page-developers,.page-connect-muse,.page-connect-gemini) .book-shell{gap:32px}.dev-capabilities>div{grid-template-columns:1fr;gap:12px}.dev-connect-bar{display:block}.dev-connect-bar .book-action{margin-top:12px;min-height:44px}}
@media(max-width:820px){:is(.page-developers,.page-connect-muse,.page-connect-gemini) .book-shell{grid-template-columns:1fr;gap:24px}:is(.page-developers,.page-connect-muse,.page-connect-gemini) .book-sidebar{padding:0 16px}:is(.page-developers,.page-connect-muse,.page-connect-gemini) .book-menu{border:0}:is(.page-developers,.page-connect-muse,.page-connect-gemini) .book-heading h1{font-size:36px}:is(.page-developers,.page-connect-muse,.page-connect-gemini).lang-zh .book-heading h1{font-size:32px}:is(.page-developers,.page-connect-muse,.page-connect-gemini) .book-lead{font-size:16px}.dev-connect-bar{margin-top:16px}.dev-example{padding:16px}.dev-capabilities>div{padding:20px 0}.dev-selector{margin-top:16px}}
:is(.page-connect-muse,.page-connect-gemini) .book-code pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;max-height:none}
:is(.page-connect-muse,.page-connect-gemini) .book-article{overflow-wrap:anywhere}
/* Connection workspace: one explicit choice, one matching instruction panel. */
.page-developers .book-heading h1{max-width:none;font-size:clamp(36px,4.3vw,56px);line-height:1.08}
.page-developers .book-section{margin-top:48px;padding-top:32px}
.page-developers .dev-connect-bar{padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:10px}
.page-developers .dev-connect-bar .book-copy-block{background:var(--bg);border:none;padding:12px}
.page-developers .dev-connect-bar .book-action{min-height:44px}
.dev-client-workspace{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-top:24px}
.dev-client-picker label{display:block;font-size:13px;font-weight:650;margin-bottom:8px}
.dev-client-picker select{width:100%;min-height:44px;padding:8px 12px;font:inherit;font-size:14px;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:6px}
.dev-client-picker[hidden],.dev-client[hidden]{display:none}
.dev-client-panels{min-width:0}.dev-client-workspace:not([data-mounted]){display:block}
.dev-client-workspace[data-mounted] .dev-client{border:0;padding:0;margin:0;border-radius:0}
.dev-client-workspace .book-code pre{white-space:pre-wrap;overflow-wrap:anywhere}
.dev-client-workspace .dev-doc-link{font-size:13px}
.dev-profile{margin:24px 0 32px;padding:24px;border-left:3px solid var(--accent);background:var(--surface)}
.dev-profile dl{margin:20px 0}.dev-profile dl>div{display:grid;grid-template-columns:160px 1fr;gap:20px;padding:10px 0}.dev-profile dt{font-size:13px}.dev-profile dd{margin:0;font-size:14px}.dev-profile>p{max-width:68ch}
.dev-profile code{overflow-wrap:anywhere}
.page-developers .dev-capabilities>div{padding:20px 0}
@media(max-width:1100px){.dev-client-workspace{grid-template-columns:1fr}.dev-client-picker{max-width:320px}}
@media(max-width:820px){.page-developers .book-section{margin-top:32px;padding-top:24px}.page-developers .dev-connect-bar,.dev-client-workspace,.dev-profile{padding:16px}.dev-profile dl>div{grid-template-columns:1fr;gap:4px}.dev-client-picker{max-width:none}}

.dev-client-picker select{font-size:16px}.dev-client-picker select:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}

.dev-recovery details{border-top:1px solid var(--line,#cbd2c9);padding:10px 0}.dev-recovery summary{cursor:pointer;min-height:44px;padding:10px 0;font-weight:600}.dev-recovery details p{max-width:68ch}

.dev-journeys{margin-top:24px}.dev-journeys h3{font-size:18px}.dev-client-panels .dev-connect-bar{margin-top:0}.dev-journeys .book-copy-block{margin:12px 0}.dev-journeys pre{white-space:pre-wrap;overflow-wrap:anywhere}

.page-developers #connect{margin-top:16px;padding-top:16px;border-top:0}.page-developers .dev-client-workspace{margin-top:16px}.page-developers .dev-page-index{margin-top:24px}.page-developers .book-menu summary{color:var(--text)}