.connect-heading,.catalog-heading,.subpage-intro{display:flex;align-items:center;justify-content:space-between;gap:24px}.connect-heading{margin-top:-8px;margin-bottom:22px}.preview-badge{font:10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.02em;padding:6px 9px;border:1px solid var(--line);border-radius:6px;color:var(--muted);white-space:nowrap}.connection-tabs{margin-bottom:28px}.connect-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:22px}.connect-feature{padding:32px;border-radius:24px;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--surface)}.agent-feature{background:var(--stage)}.connect-feature h2{font-size:32px;line-height:1.2;letter-spacing:-1px;margin:14px 0}.connect-feature>p:not(.eyebrow){color:var(--muted);max-width:450px;line-height:1.65;margin-bottom:23px}.feature-symbol{width:42px;height:42px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;border-radius:13px;margin-bottom:23px}.feature-symbol svg{width:22px;height:22px}.mini-conversation{margin-top:26px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:grid;grid-template-columns:80px 1fr;gap:12px}.mini-conversation>span{font:9px 'IBM Plex Mono',monospace;color:var(--green);padding-top:4px}.mini-conversation p{font-size:12px;line-height:1.6;margin:0}.workflow-line{display:flex;align-items:center;gap:13px;padding:20px 0}.workflow-line>span{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:14px 16px;border-radius:12px;font-size:13px;background:var(--stage)}.workflow-line>b{color:var(--muted);font-weight:400}.bridge-names{display:flex;flex-wrap:wrap;gap:9px;margin:7px 0 26px}.bridge-names span{font:11px 'IBM Plex Mono',monospace;border-bottom:2px solid var(--line);padding:4px 7px}.catalog-heading{margin:42px 0 19px}.catalog-heading h2,.subpage-intro h2{margin:0 0 8px;font-size:25px;letter-spacing:-.65px}.catalog-heading p,.subpage-intro p{color:var(--muted);font-size:14px;line-height:1.7;margin:0;max-width:670px}.catalog-heading input{width:275px}.catalog-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.catalog-filters button{font-size:12px;padding:8px 13px;border:1px solid var(--line);border-radius:20px}.catalog-filters button.active{background:var(--green);color:var(--white);border-color:var(--green)}.provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.provider-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:23px;display:flex;flex-direction:column;transition:border-color .15s}.provider-card:hover{border-color:var(--green)}.provider-top{display:flex;align-items:center;justify-content:space-between}.provider-monogram{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;font:600 18px 'IBM Plex Sans',sans-serif;color:var(--green);background:var(--stage)}.provider-monogram.ifttt,.provider-monogram.http,.provider-monogram.n8n{font-size:13px}.provider-card h3{font-size:16px;margin:19px 0 8px}.provider-card>p{color:var(--muted);font-size:13px;line-height:1.65;flex:1;margin:0 0 22px}.provider-bottom{border-top:1px solid var(--line);padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:10px}.provider-bottom small{font-size:10px;color:var(--muted);max-width:160px}.provider-bottom button{white-space:nowrap;font-size:12px}.demo-connected{font-size:9px;color:var(--green)}.community-strip{display:flex;align-items:center;gap:23px;background:#f6f5f0;color:#29372e;border:1px solid #dcded6;border-radius:20px;padding:20px 26px;margin-top:30px}.community-strip img{object-fit:contain;flex-shrink:0;border-radius:12px}.community-strip h3{font-size:17px;margin:7px 0}.community-strip p:not(.eyebrow){font-size:13px;line-height:1.6;color:#546153;max-width:670px}.community-strip>a{margin-left:auto;color:#42634d;white-space:nowrap}.community-strip .eyebrow{color:#6c745f}.connection-footnote{display:flex;gap:9px;align-items:center;justify-content:center;color:var(--muted);font-size:11px;line-height:1.6;margin:25px 0}.subpage-intro{margin:34px 0 30px}.subpage-intro .eyebrow{font-size:10px;color:var(--green);margin-bottom:13px}.subpage-intro>.primary{flex-shrink:0}.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.recipe-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:25px;display:flex;flex-direction:column}.recipe-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:var(--green);background:var(--green-soft);margin-bottom:24px}.recipe-provider{font-size:10px;color:var(--muted);position:absolute;top:37px;right:24px}.recipe-trigger{font:10px 'IBM Plex Mono',monospace;letter-spacing:.07em;color:var(--green);margin:0 0 10px}.recipe-card h3{font-size:19px;letter-spacing:-.4px;margin:0 0 12px}.recipe-card>p:not(.recipe-trigger){color:var(--muted);font-size:13px;line-height:1.7;margin:0 0 25px;flex:1}.recipe-card>.text-button{align-self:flex-start}.connection-explainer{background:var(--stage);border:1px solid var(--line);border-radius:20px;padding:28px;margin-top:25px}.connection-explainer h3{margin:0 0 24px}.offline-steps{display:flex;gap:20px;align-items:center}.offline-steps>span{flex:1;font-size:14px}.offline-steps b{font:11px 'IBM Plex Mono',monospace;display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid var(--line);border-radius:50%;margin-right:8px}.offline-steps small{display:block;margin:8px 0 0 33px;color:var(--muted);font-size:12px}.offline-steps i{font-style:normal;color:var(--muted)}.connection-explainer>p{font-size:12px;line-height:1.6;color:var(--muted);margin:25px 0 0}.mcp-layout{display:grid;grid-template-columns:1.08fr 1fr;gap:42px;margin-top:32px}.connection-title{font-size:36px;letter-spacing:-1.2px;line-height:1.2;margin:13px 0 17px}.mcp-layout .section-description{max-width:560px;line-height:1.8}.transport-switch{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:4px;margin:23px 0 17px;background:var(--stage)}.transport-switch button{padding:9px 17px;font-size:12px;border-radius:7px}.transport-switch button.active{background:var(--surface);box-shadow:0 1px 3px #00000010;color:var(--green)}.mcp-connection-card,.mcp-permissions{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:24px;margin-bottom:20px}.mcp-connection-card .section-heading{flex-wrap:wrap;gap:10px}.mcp-connection-card h3,.mcp-permissions h3{font-size:15px;display:flex;gap:8px;align-items:center;margin:0}.mcp-connection-card p{font-size:13px;color:var(--muted);line-height:1.75;margin:17px 0}.copy-field{display:flex;align-items:center;gap:8px;margin-bottom:15px}.copy-field input{font:11px 'IBM Plex Mono',monospace;min-width:0;flex:1}.copy-field button{font-size:12px}.mcp-connection-card details{margin-top:10px}.mcp-connection-card summary,.agent-tools summary{font-size:12px}#connect-view pre,#modal pre{font:11px/1.8 'IBM Plex Mono',monospace;background:var(--stage);border-radius:12px;padding:18px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}.scope-row{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);align-items:flex-start;cursor:pointer}.scope-row:last-child{border:0;padding-bottom:0}.scope-row input{width:16px;height:16px;margin-top:3px;accent-color:var(--green)}.scope-row strong{font-weight:500;font-size:13px}.scope-row small{display:block;color:var(--muted);font-size:11px;font-weight:400;line-height:1.6;margin-top:4px}.agent-playground{border:1px solid var(--line);border-radius:23px;padding:28px;background:var(--stage);align-self:start;position:sticky;top:25px}.agent-playground h3{font-size:14px;display:flex;align-items:center;gap:9px}.agent-playground .section-heading{gap:8px;flex-wrap:wrap}.chat-user{background:var(--green);color:var(--white);border-radius:16px 16px 3px 16px;padding:18px 21px;font-size:14px;line-height:1.7;margin:26px 0 22px 35px}.agent-reason>span{display:flex;align-items:center;gap:6px;color:var(--green);font:10px 'IBM Plex Mono',monospace}.agent-reason p{font-size:13px;line-height:1.8;color:var(--muted);margin:12px 0 20px}.agent-plan{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden}.agent-plan>div{display:flex;gap:20px;padding:18px;border-bottom:1px solid var(--line)}.agent-plan>div:last-child{border:0}.agent-plan time{font:12px 'IBM Plex Mono',monospace;color:var(--green);padding-top:3px}.agent-plan strong{font-size:13px;font-weight:500}.agent-plan small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.proposal-total{display:flex;justify-content:space-between;gap:15px;font-size:10px;margin:18px 0 24px;color:var(--muted)}.proposal-total strong{color:var(--ink);font-weight:500}.agent-actions{display:flex;align-items:center;flex-wrap:wrap;gap:15px}.agent-actions button{font-size:12px}.agent-tools{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.webhook-direction-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.webhook-direction-grid .plan-card{margin:0}.webhook-direction-grid h3{display:flex;align-items:center;gap:10px}.webhook-direction-grid p{color:var(--muted);font-size:13px;line-height:1.7}.event-pills{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0}.event-pills code{font:10px 'IBM Plex Mono',monospace;background:var(--stage);padding:7px 9px;border-radius:6px;color:var(--green)}.delivery-card{margin-top:25px;border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:26px}.delivery-card h3{margin:0 0 7px}.delivery-card .section-heading p{font-size:12px;color:var(--muted);margin:0}.delivery-tools{display:flex;gap:9px}.delivery-tools button{font-size:11px}.delivery-table-wrap{overflow:auto}.delivery-table{width:100%;border-collapse:collapse;text-align:left;margin:24px 0 16px;font-size:12px;min-width:650px}.delivery-table th{font:10px 'IBM Plex Mono',monospace;color:var(--muted);padding:12px 8px;border-bottom:1px solid var(--line)}.delivery-table td{padding:16px 8px;border-bottom:1px solid var(--line)}.delivery-table code{font-size:11px}.delivery-table small{display:block;color:var(--muted);margin-top:5px}.delivery-state{font-size:10px;background:var(--green-soft);color:var(--green);padding:7px 10px;border-radius:6px;white-space:nowrap}.delivery-state.queued,.delivery-state.failed{background:var(--accent-soft);color:var(--accent)}.empty-outbox{height:110px;text-align:center;color:var(--muted)}.webhook-bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:30px 0}.webhook-bottom h3{font-size:16px}.webhook-bottom p{font-size:13px;line-height:1.8;color:var(--muted)}.connection-route{display:flex;gap:20px;align-items:center;justify-content:center;padding:25px;background:var(--stage);border-radius:14px;margin:20px 0}.connection-route span{font-size:16px;font-weight:500}.connection-note{background:var(--accent-soft);padding:15px;border-radius:10px;font-size:12px;line-height:1.7;color:var(--ink);margin:18px 0}.recipe-builder{background:var(--stage);padding:22px;border-radius:15px;margin:16px 0}.recipe-builder>.eyebrow{display:block;margin:0 0 12px}.recipe-arrow{display:block;text-align:center;font-size:22px;color:var(--green);margin:18px}.connection-footnote svg{flex-shrink:0}
@media(max-width:1100px){.provider-grid,.recipe-grid{grid-template-columns:repeat(2,1fr)}.mcp-layout{gap:22px}.agent-playground{padding:22px}.community-strip{flex-wrap:wrap}.community-strip>a{margin-left:123px}.webhook-direction-grid .section-heading{flex-wrap:wrap;gap:10px}}
@media(max-width:760px){.connect-hero-grid,.mcp-layout,.webhook-direction-grid,.webhook-bottom{grid-template-columns:1fr}.connect-feature{padding:25px}.connect-feature h2{font-size:29px}.connect-heading{align-items:flex-start}.connect-heading .section-description{font-size:12px}.preview-badge{font-size:9px;white-space:normal}.catalog-heading,.subpage-intro{align-items:flex-start;flex-direction:column;gap:17px}.catalog-heading input{width:100%}.provider-grid,.recipe-grid{grid-template-columns:1fr}.provider-card{padding:21px}.catalog-filters{gap:6px}.catalog-filters button{font-size:11px;padding:7px 10px}.mini-conversation{grid-template-columns:62px 1fr;padding:15px;gap:10px}.mini-conversation>span{font-size:8px}.workflow-line{gap:8px}.workflow-line>span{font-size:11px;padding:12px}.bridge-names{gap:5px}.bridge-names span{font-size:10px}.connection-tabs{overflow-x:auto;flex-wrap:nowrap;max-width:100%}.connection-tabs button{white-space:nowrap;font-size:12px;padding-left:12px;padding-right:12px}.community-strip{gap:14px;padding:18px}.community-strip img{width:67px;height:87px}.community-strip>div{flex:1;min-width:180px}.community-strip .eyebrow{font-size:8px}.community-strip h3{font-size:15px}.community-strip>a{margin-left:81px;font-size:12px}.offline-steps{flex-direction:column;align-items:flex-start;gap:15px}.offline-steps i{margin-left:10px;transform:rotate(90deg)}.connection-explainer{padding:22px}.connection-footnote{align-items:flex-start;font-size:10px}.connection-title{font-size:32px}.agent-playground{position:static}.chat-user{margin-left:18px}.mcp-connection-card,.mcp-permissions{padding:21px}.scope-row strong{font-size:12px}.delivery-card{padding:21px}.delivery-card>.section-heading{flex-direction:column;align-items:flex-start;gap:20px}.delivery-tools{flex-wrap:wrap}.agent-plan>div{gap:14px;padding:16px}.webhook-bottom{gap:10px}.proposal-total{font-size:9px}.app-header .header-tools .local-status{display:none}.app-header .header-tools{gap:2px}.appearance-button{display:grid!important}}

#connect-view .field-hint{font-size:11px;line-height:1.7;color:var(--muted);margin:14px 0}.delivery-table td:last-child{white-space:nowrap}.delivery-table td:last-child button+button{margin-left:14px}

.agent-reason pre{font:11px/1.7 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:14px 0;color:var(--ink)}