/* Guides use the existing demo typography, with accessible controls at every viewport. */
:focus-visible{outline:3px solid #006fff;outline-offset:4px}
.dmcap h1{font-size:32px;line-height:1.25}.dmcap p{font-size:16px;line-height:1.6;max-width:64ch;margin:12px auto 24px}
.dmbar .dmback,.dmnote{font-size:14px}.bub p,.dmodal p{font-size:15px;line-height:1.6}
.bub button,.dmodal button,.dmodal a{min-height:44px;font-size:14px}.dmodal h5{font-size:20px}
.demo-toolbar{max-width:1160px;margin:16px auto;display:flex;justify-content:flex-end;gap:16px}.demo-toolbar button,.demo-close{background:#fff;border:1px solid #d9d9d9;border-radius:8px;padding:10px 16px;font:600 14px -apple-system,sans-serif;cursor:pointer;min-height:44px}
.demo-inspector{width:calc(100% - 32px);max-width:1600px;height:90vh;max-height:90vh;border:0;border-radius:14px;padding:16px;background:#fafafa;margin:auto}.demo-inspector::backdrop{background:rgba(0,0,0,.65)}
.demo-inspector .inspector-scroll{overflow:auto;height:calc(100% - 60px);margin-top:12px}.demo-inspector .stage{transform:none!important}.demo-close{float:right}
body.embed .demo-toolbar,body.ambient .demo-toolbar{display:none}.demo-fallback{padding:32px;font:16px/1.7 -apple-system,sans-serif}
@media(max-width:640px){
 .dmshell{padding:16px 16px 32px}.dmcap h1{font-size:26px}.dmbar{align-items:flex-start}.dmbar span{font-size:12px}
 .stagefit{height:calc(var(--preview-height,220px) + 250px)!important;background:#fff}
 .ovl{top:var(--preview-height,220px);bottom:0;position:absolute;height:auto;padding:16px;border-top:1px solid #e4e9f0;background:#fff}
 .ovl .hs,.ovl .dscrim{display:none}.ovl .bub,.ovl .dmodal{position:static!important;transform:none!important;width:100%;max-width:100%;padding:0;border:0;box-shadow:none;background:#fff}
 .ovl .bub .bnum{font-size:12px}.ovl .bub p,.ovl .dmodal p{font-size:16px;line-height:1.6}.ovl .dmodal .mrow{flex-wrap:wrap;justify-content:flex-start}
 .bub::before,.bub::after{display:none}.dmnote{text-align:left}.demo-toolbar{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

body[data-demo-name="demo-connect-system"] .ovl .endov{z-index:15;background:white;color:#17181c}body[data-demo-name="demo-connect-system"] .endcard h2,body[data-demo-name="demo-connect-system"] .endcard p{color:#17181c}body[data-demo-name="demo-connect-system"] .endcard{width:100%;max-width:560px;padding:24px}body[data-demo-name="demo-connect-system"] .endbtns{flex-wrap:wrap}body[data-demo-name="demo-connect-system"] .endbtns a{min-height:44px}
@media(max-width:640px){body[data-demo-name="demo-connect-system"] .stagefit{height:calc(var(--preview-height,220px) + 320px)!important}body[data-demo-name="demo-connect-system"] .endov{position:static;padding:0}body[data-demo-name="demo-connect-system"] .endcard{padding:0}body[data-demo-name="demo-connect-system"] .endcard h2{font-size:24px}body[data-demo-name="demo-connect-system"] .endcard p{font-size:16px}}

/* Closeout: restore the connection title and let phone guides size to their content. */
body:not(.embed)[data-demo-name="demo-connect-system"] .dmcap{display:block!important}
body[data-demo-name="demo-connect-system"] .wt-cap:empty{display:none}
@media(max-width:640px){
 body[data-demo-name] .stagefit{height:auto!important;min-height:var(--preview-height,220px)}
 body[data-demo-name] .stagefit>.stage{position:absolute;top:0;left:0}
 body[data-demo-name] .stagefit>.ovl{position:relative;inset:auto;margin-top:var(--preview-height,220px);height:auto;min-height:0;padding:20px}
}