.connect-page { background: radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--m-signal) 23%, transparent), transparent 31rem), radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--m-violet) 18%, transparent), transparent 35rem), var(--m-bg); }
.connect-nav > p { justify-self: center; margin: 0; color: var(--m-muted); text-transform: uppercase; letter-spacing: .14em; font-size: .62rem; font-weight: 850; }
.connect-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 105px 0 120px; }
.connect-intro { max-width: 970px; }.connect-intro h1 { max-width: 12ch; margin: 0; font: 500 clamp(4rem, 8vw, 7.6rem)/.86 var(--m-serif); letter-spacing: -.068em; }.connect-intro > p:not(.signal-label) { max-width: 720px; margin: 32px 0 0; color: var(--m-muted); font-size: 1.08rem; line-height: 1.75; }
.connect-state { width: max-content; max-width: 100%; display: flex; align-items: center; gap: 13px; margin-top: 34px; padding: 13px 17px; border: 1px solid var(--m-line); border-radius: 16px; background: color-mix(in srgb, var(--m-surface-strong) 76%, transparent); }.state-light { width: 9px; height: 9px; border-radius: 50%; background: #db9c31; box-shadow: 0 0 0 5px rgba(219,156,49,.13); }.connect-state.is-ready .state-light { background: var(--m-signal-strong); box-shadow: 0 0 0 5px color-mix(in srgb, var(--m-signal) 17%, transparent); }.connect-state > div { display: grid; gap: 3px; }.connect-state strong { font-size: .76rem; }.connect-state small { color: var(--m-muted); font-size: .62rem; }
.connection-console { margin-top: 82px; overflow: hidden; border: 1px solid var(--m-line-strong); border-radius: 26px; background: color-mix(in srgb, var(--m-surface-strong) 88%, transparent); box-shadow: var(--m-shadow); }.console-head { min-height: 55px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--m-line); color: var(--m-muted); font-size: .56rem; font-weight: 850; letter-spacing: .14em; }.console-head b { color: #d28520; }.console-head b.is-ready { color: var(--m-signal-strong); }.endpoint-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 28px; }.endpoint-row code { overflow: auto; padding: 17px 18px; border: 1px solid var(--m-line); border-radius: 14px; background: color-mix(in srgb, var(--m-bg) 45%, transparent); color: var(--m-violet); font-size: .84rem; }.endpoint-row button, .connect-flow form button, .prompt-block button { border: 0; border-radius: 999px; padding: 0 20px; background: var(--m-ink); color: var(--m-bg); font-size: .72rem; font-weight: 800; cursor: pointer; }.console-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--m-line); }.console-grid article { display: grid; gap: 7px; padding: 24px 28px; border-right: 1px solid var(--m-line); }.console-grid article:last-child { border-right: 0; }.console-grid span { color: var(--m-violet); font-size: .52rem; font-weight: 850; letter-spacing: .12em; }.console-grid strong { font: 500 1.25rem var(--m-serif); }.console-grid small { color: var(--m-muted); font-size: .63rem; }
.connect-flow { padding: 140px 0; display: grid; grid-template-columns: .7fr 1.3fr; gap: 90px; }.flow-heading { align-self: start; position: sticky; top: 50px; }.flow-heading h2 { margin: 0; font: 500 clamp(3rem, 5vw, 5rem)/.93 var(--m-serif); letter-spacing: -.055em; }.connect-flow ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--m-line); }.connect-flow li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 38px 0; border-bottom: 1px solid var(--m-line); }.connect-flow li > span { color: var(--m-violet); font-size: .61rem; font-weight: 800; }.connect-flow li strong { font: 500 1.8rem var(--m-serif); letter-spacing: -.035em; }.connect-flow li p { max-width: 610px; margin: 10px 0 0; color: var(--m-muted); line-height: 1.65; font-size: .88rem; }.connect-flow li.is-complete > span::after { content: " ✓"; color: var(--m-signal-strong); }.connect-flow form { display: flex; gap: 9px; max-width: 520px; margin-top: 20px; }.connect-flow input { min-width: 0; flex: 1; border: 1px solid var(--m-line); border-radius: 999px; padding: 13px 17px; background: var(--m-surface-strong); color: var(--m-ink); font: inherit; font-size: .8rem; }.connect-flow form button { min-height: 44px; }.client-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }.client-actions a { padding: 11px 15px; border: 1px solid var(--m-line); border-radius: 999px; font-size: .69rem; font-weight: 750; }.client-actions a:hover { border-color: var(--m-violet); }.client-actions b { color: var(--m-violet); }.prompt-block { position: relative; margin-top: 20px; padding: 18px 100px 18px 18px; border: 1px solid var(--m-line); border-radius: 15px; background: color-mix(in srgb, var(--m-surface-strong) 70%, transparent); }.prompt-block code { color: var(--m-muted); font-size: .72rem; line-height: 1.55; }.prompt-block button { position: absolute; right: 10px; top: 10px; bottom: 10px; }
.connection-boundary { margin-inline: calc((100vw - min(1180px, calc(100vw - 48px))) / -2); padding: 110px max(24px, calc((100vw - 1180px) / 2)); display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; background: var(--m-dark); color: #f2f0e7; }.connection-boundary h2 { max-width: 520px; margin: 0; font: 500 clamp(3.1rem, 5.2vw, 5.5rem)/.92 var(--m-serif); letter-spacing: -.055em; }.boundary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.boundary-grid article { padding: 30px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.05); }.boundary-grid article > span { font-size: .55rem; letter-spacing: .13em; font-weight: 850; }.boundary-grid .allowed > span { color: var(--m-signal); }.boundary-grid .blocked > span { color: #9d92ff; }.boundary-grid ul { list-style: none; display: grid; gap: 15px; margin: 30px 0 0; padding: 0; color: #b8b9b2; font-size: .78rem; }.boundary-grid li::before { content: "↳"; margin-right: 9px; color: var(--m-signal); }.blocked li::before { color: #9d92ff; }
.api-key-note { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; margin-top: 90px; padding: 30px; border: 1px solid var(--m-line); border-radius: 24px; background: var(--m-surface); }.note-mark { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--m-line); border-radius: 50%; color: var(--m-violet); font-size: 1.3rem; }.api-key-note h2 { margin: 0 0 5px; font: 500 1.55rem var(--m-serif); }.api-key-note p { margin: 0; color: var(--m-muted); line-height: 1.55; font-size: .76rem; }.api-key-note > a { display: inline-flex; gap: 10px; font-size: .72rem; font-weight: 800; }.api-key-note > a span { color: var(--m-violet); }.connect-footer { width: min(1180px, calc(100% - 48px)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 900px) { .connect-flow, .connection-boundary { grid-template-columns: 1fr; }.flow-heading { position: static; }.console-grid { grid-template-columns: 1fr; }.console-grid article { border-right: 0; border-bottom: 1px solid var(--m-line); }.console-grid article:last-child { border-bottom: 0; }.api-key-note { grid-template-columns: auto 1fr; }.api-key-note > a { grid-column: 2; }.connect-nav > p { display: none; } }
@media (max-width: 620px) { .connect-shell, .connect-footer { width: min(100% - 28px, 1180px); }.connect-shell { padding-top: 68px; }.connect-intro h1 { font-size: clamp(3.4rem, 17vw, 5.4rem); }.endpoint-row { grid-template-columns: 1fr; padding: 18px; }.endpoint-row button { min-height: 42px; }.connect-flow { padding: 100px 0; gap: 50px; }.connect-flow form { flex-direction: column; }.connect-flow form button { min-height: 44px; }.connection-boundary { margin-inline: -14px; padding: 80px 20px; }.boundary-grid { grid-template-columns: 1fr; }.api-key-note { grid-template-columns: 1fr; }.api-key-note > a { grid-column: auto; }.prompt-block { padding-right: 18px; padding-bottom: 58px; }.prompt-block button { top: auto; height: 38px; } }