.connect-page>*{width:100%;max-width:var(--content-max);margin-inline:auto}.connect-head{gap:var(--space-2);padding:var(--space-7) 0 var(--space-6);display:grid}.connect-head h1{font:var(--type-title);letter-spacing:-.025em;color:var(--text-primary)}.connect-head p{font:var(--type-body);color:var(--text-secondary);margin:0}.connect-flow{gap:var(--space-7);grid-template-columns:minmax(0,1fr);min-width:0;display:grid}.connect-flow code{font-family:var(--font-mono)}.connect-label{font:var(--type-meta);letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);font-weight:600}.connect-note{margin:var(--space-2) 0 0;font:var(--type-meta);color:var(--text-secondary)}.connect-note strong{color:var(--text);font-weight:600}.connect-endpoint{gap:var(--space-4);padding:var(--space-5);background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-l);display:grid}.connect-endpoint .connect-note{margin:0}.connect-endpoint-head{justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.connect-mode{background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--radius-s);gap:2px;padding:2px;display:inline-flex}.connect-mode label{display:flex;position:relative}.connect-mode input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.connect-mode span{min-height:calc(36 * var(--ws-px));padding:0 var(--space-3);border-radius:var(--radius-sm);font:var(--type-meta);color:var(--text-secondary);text-align:center;transition:background-color var(--dur-2) var(--ease-standard);justify-content:center;align-items:center;font-weight:500;display:flex}.connect-mode input:checked+span{background:var(--bg-surface-elevated);color:var(--text);box-shadow:var(--shadow-sm);font-weight:600}.connect-mode input:focus-visible+span{outline:var(--focus-ring) solid var(--focus);outline-offset:1px}.connect-code{align-items:center;gap:var(--space-3);min-width:0;margin-top:var(--space-3);padding:var(--space-1) var(--space-1) var(--space-1) var(--space-4);background:var(--bg-surface-elevated);border:1px solid var(--border);border-radius:var(--radius-m);display:flex}.connect-endpoint .connect-code{margin-top:0}.connect-code>code{min-width:0;padding:var(--space-2) 0;font:var(--type-mono);color:var(--text-primary);overflow-wrap:anywhere;flex:1}.connect-code.block{align-items:flex-start;padding:0;position:relative}.connect-code pre{min-width:0;padding:var(--space-3) var(--space-4);font:var(--type-mono);color:var(--text);flex:1;margin:0;overflow-x:auto}.connect-code pre code{font:inherit}.connect-code.block .connect-copy-button{margin:var(--space-1)}.connect-copy-button{min-width:calc(72 * var(--ws-px));flex-shrink:0;font-weight:500}.connect-copy-button[data-copied]{background:var(--status-live-bg);border-color:var(--status-live);color:var(--status-live)}.connect-apps{gap:var(--space-3);grid-template-columns:minmax(0,1fr);min-width:0;display:grid}.connect-tabs{border-bottom:1px solid var(--border);scrollbar-width:none;display:flex;overflow-x:auto}.connect-tabs::-webkit-scrollbar{display:none}@media (width<=640px){.connect-tabs{padding-right:calc(40 * var(--ws-px));scroll-padding-inline-end:40px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),#0000)}}.connect-tabs [role=tab]{min-height:var(--target);padding:0 var(--space-4);font:var(--type-ui);color:var(--text-secondary);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-bottom:2px solid #0000;flex-shrink:0;margin-bottom:-1px}.connect-tabs [role=tab]:hover{color:var(--text)}.connect-tabs [role=tab][aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}.connect-tabs [role=tab]:focus-visible{outline-offset:-2px}.connect-panel{margin-top:var(--space-4);padding:var(--space-5) calc(var(--space-5) + var(--space-1));background:var(--bg-surface-elevated);border:1px solid var(--border);border-radius:var(--radius-l);box-shadow:var(--shadow-card)}.connect-panel[hidden]{display:none}.connect-panel-head{justify-content:space-between;align-items:baseline;gap:var(--space-2) var(--space-4);padding-bottom:var(--space-4);margin-bottom:var(--space-5);border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;display:flex}.connect-panel-head h3{font:var(--type-heading);letter-spacing:0;text-transform:none;color:var(--text);margin:0}.connect-panel-head span{font:var(--type-meta);color:var(--text-muted)}.connect-steps{gap:var(--space-4);padding-left:var(--space-5);font:var(--type-ui);color:var(--text-primary);margin:0;font-weight:400;line-height:1.6;display:grid}.connect-steps li{min-width:0;padding-left:var(--space-1)}.connect-steps li::marker{color:var(--text-muted);font-weight:500}.connect-steps strong{font-weight:600}.connect-panel>.connect-note{margin-top:var(--space-5)}.connect-actions{gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap;display:flex}.connect-manual{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border)}.connect-manual summary{min-height:var(--target);font:var(--type-ui);color:var(--link);cursor:pointer;align-items:center;list-style:none;display:inline-flex}.connect-manual summary::-webkit-details-marker{display:none}.connect-manual summary:hover{text-underline-offset:3px;text-decoration:underline}.connect-local{gap:var(--space-4);justify-items:start;display:grid}.connect-local p{color:var(--text-secondary);margin:0}.connect-next{gap:var(--space-2);padding:var(--space-5) calc(var(--space-5) + var(--space-1));background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-l);display:grid}.connect-next h2{font:var(--type-body);color:var(--text-primary);font-weight:600}.connect-next p{font:var(--type-ui);color:var(--text-secondary);margin:0;font-weight:400;line-height:1.6}.connect-next p.connect-note{font:var(--type-meta)}.connect-next .connect-actions,.connect-next .connect-note:last-child{margin-top:var(--space-3)}.connect-next a:not(.button),.connect-text-button{font:inherit;color:var(--accent-text);text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}@media (width<=767px){.connect-head{padding:var(--space-6) 0 var(--space-5)}.connect-flow{gap:var(--space-6)}.connect-endpoint{padding:var(--space-4)}.connect-mode{grid-template-columns:1fr 1fr;gap:2px;width:100%;padding:2px;display:grid}.connect-mode span{min-height:calc(32 * var(--ws-px));padding:0 var(--space-2);white-space:nowrap;font-size:12px}.connect-panel,.connect-next{padding:var(--space-4)}.connect-tabs [role=tab]{padding:0 var(--space-3);font-size:max(12px, calc(13 * var(--ws-type-px)))}.connect-steps{padding-left:var(--space-4);font-size:calc(13.5 * var(--ws-type-px))}.connect-code:not(.block){justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-1) var(--space-1) var(--space-3);flex-direction:row;display:flex}.connect-code:not(.block)>code{white-space:nowrap;scrollbar-width:none;overflow-x:auto}.connect-code:not(.block)>code::-webkit-scrollbar{display:none}.connect-code:not(.block) .connect-copy-button{flex-shrink:0;align-self:center}}