.pub-connect{--pub-connect-step:32px}.pub-connect__clients{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:40px;display:grid}@media (width>=760px){.pub-connect__clients{grid-template-columns:repeat(4,minmax(0,1fr));max-width:56rem}}.pub-connect__client{background:color-mix(in srgb, var(--pub-paper) 72%, transparent);min-height:60px;box-shadow:0 0 0 1px var(--pub-line-strong);text-align:left;color:var(--pub-ink);cursor:pointer;transition:box-shadow .18s var(--pub-ease), background-color .18s var(--pub-ease), scale .15s var(--pub-ease);border-radius:14px;grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;padding:10px 14px 10px 10px;display:grid}@media (hover:hover) and (pointer:fine){.pub-connect__client:hover{background:var(--pub-paper);box-shadow:0 0 0 1px color-mix(in srgb, var(--pub-ink) 22%, transparent)}}.pub-connect__client[aria-pressed=true]{background:var(--pub-paper);box-shadow:0 0 0 1.5px var(--pub-ink), var(--pub-shadow-lift)}.pub-connect__client:focus-visible,.pub-connect__step-head:focus-visible,.pub-connect__link:focus-visible,.pub-connect__stage-toggle:focus-visible,.pub-connect__fallback summary:focus-visible{outline:2px solid var(--pub-gold);outline-offset:3px}.pub-connect__mark{background:var(--brand-sand);border-radius:8px;grid-row:1/span 2;place-items:center;width:38px;height:38px;display:grid}.pub-connect__client-name{letter-spacing:-.01em;font-size:15px;font-weight:500;line-height:1.2}.pub-connect__client-surface{color:var(--pub-ink-muted);font-size:12.5px;line-height:1.3}.pub-connect__guide{gap:32px;margin-top:40px;display:grid}.pub-connect__stage{order:-1}@media (width>=1024px){.pub-connect__guide{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:56px}.pub-connect__stage{order:0;position:sticky;top:96px}}.pub-connect__note{max-width:60ch;color:var(--pub-ink-muted);text-wrap:pretty;margin-bottom:28px;font-size:14px;line-height:1.6}.pub-connect__steps{display:grid}.pub-connect__step{grid-template-columns:var(--pub-connect-step) minmax(0, 1fr);column-gap:16px;padding-bottom:28px;display:grid;position:relative}.pub-connect__step-head{grid-column:1/-1;grid-template-columns:var(--pub-connect-step) minmax(0, 1fr);text-align:left;cursor:pointer;border-radius:10px;align-items:center;column-gap:16px;display:grid}.pub-connect__dot{width:var(--pub-connect-step);height:var(--pub-connect-step);background:var(--pub-paper);box-shadow:0 0 0 1px var(--pub-line-strong);font-variant-numeric:tabular-nums;color:var(--pub-ink-muted);transition:background-color .24s var(--pub-ease), color .24s var(--pub-ease), box-shadow .24s var(--pub-ease);border-radius:50%;place-items:center;font-size:13px;font-weight:500;display:grid}.pub-connect__step[data-state=current] .pub-connect__dot{background:var(--pub-ink);box-shadow:0 0 0 4px color-mix(in srgb, var(--pub-ink) 8%, transparent);color:var(--pub-paper)}.pub-connect__step[data-state=done] .pub-connect__dot{background:var(--brand-sand);color:var(--pub-ink)}.pub-connect__step-title{font-family:var(--pub-serif);letter-spacing:-.02em;text-wrap:balance;color:var(--pub-ink-muted);transition:color .24s var(--pub-ease);font-size:20px;font-weight:500;line-height:1.2}.pub-connect__step[data-state=current] .pub-connect__step-title,.pub-connect__step-head:hover .pub-connect__step-title{color:var(--pub-ink)}.pub-connect__rail{top:calc(var(--pub-connect-step) + 6px);bottom:6px;left:calc(var(--pub-connect-step) / 2 - .5px);background:var(--pub-line-strong);width:1px;position:absolute;overflow:hidden}.pub-connect__progress{background:var(--pub-ink);transform-origin:top;animation:linear both paused pub-connect-progress;position:absolute;inset:0}.pub-connect[data-playing] .pub-connect__progress{animation-play-state:running}@keyframes pub-connect-progress{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.pub-connect__step-body{min-width:0;transition:grid-template-rows .42s var(--pub-ease);grid-column:2;grid-template-rows:1fr;display:grid}.pub-connect__step-inner{min-width:0;min-height:0;transition:opacity .32s var(--pub-ease);justify-items:start;gap:12px;padding-top:6px;display:grid;overflow:hidden}.pub-connect__step-inner>p{max-width:52ch;color:var(--pub-ink-muted);text-wrap:pretty;font-size:15px;line-height:1.6}.pub-connect__step-inner>.pub-literal{justify-self:stretch}.pub-connect__link{color:var(--pub-ink);text-decoration:underline;-webkit-text-decoration-color:color-mix(in srgb, var(--pub-ink) 28%, transparent);text-decoration-color:color-mix(in srgb, var(--pub-ink) 28%, transparent);text-underline-offset:4px;transition:text-decoration-color .15s var(--pub-ease);border-radius:4px;align-items:center;gap:4px;font-size:14px;font-weight:500;display:inline-flex}.pub-connect__link:hover{-webkit-text-decoration-color:var(--pub-ink);text-decoration-color:var(--pub-ink)}.pub-connect__fallback{margin-left:calc(var(--pub-connect-step) + 16px);border-top:1px solid var(--pub-line-strong);padding-top:18px}.pub-connect__fallback summary{color:var(--pub-ink);cursor:pointer;border-radius:4px;align-items:center;gap:8px;font-size:14px;font-weight:500;list-style:none;display:inline-flex}.pub-connect__fallback summary::-webkit-details-marker{display:none}.pub-connect__fallback summary svg{transition:rotate .2s var(--pub-ease);rotate:-90deg}.pub-connect__fallback[open] summary svg{rotate:0deg}.pub-connect__fallback p{max-width:52ch;color:var(--pub-ink-muted);margin:12px 0;font-size:14px;line-height:1.6}.pub-connect[data-compact] .pub-connect__clients{margin-top:32px}.pub-connect[data-compact] .pub-connect__client{min-height:48px;padding-block:7px}.pub-connect[data-compact] .pub-connect__client-surface{display:none}.pub-connect[data-compact] .pub-connect__mark{grid-row:auto;width:32px;height:32px}.pub-connect[data-compact] .pub-connect__guide{margin-top:28px}.pub-connect[data-compact] .pub-connect__note{margin-bottom:20px}.pub-connect[data-compact] .pub-connect__step{padding-bottom:18px}.pub-connect[data-compact] .pub-connect__step:not([data-state=current]) .pub-connect__step-body{grid-template-rows:0fr}.pub-connect[data-compact] .pub-connect__step:not([data-state=current]) .pub-connect__step-inner{opacity:0}.pub-connect[data-compact] .pub-connect__step-title{font-size:18px}.pub-connect[data-compact] .pub-connect__viewport{aspect-ratio:16/9.5}@media (width>=1024px){.pub-connect[data-compact] .pub-connect__guide{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}}.pub-literal{background:var(--brand-sand);box-shadow:inset 0 0 0 1px var(--pub-line);border-radius:10px;align-items:center;gap:12px;min-width:0;padding:6px 6px 6px 14px;display:flex}.pub-literal__text{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;font-family:var(--pub-code);color:var(--pub-ink);flex:1;font-size:13px;line-height:1.5}.pub-literal__text::selection{background:color-mix(in srgb, var(--pub-brand) 55%, transparent)}.pub-copy{background:var(--pub-paper);box-shadow:0 0 0 1px var(--pub-line-strong);transition:scale .15s var(--pub-ease);font-family:var(--pub-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--pub-ink);cursor:pointer;border-radius:4px;flex-shrink:0;align-items:center;gap:6px;padding:7px 11px;font-size:11px;font-weight:500;display:inline-flex}.pub-copy:focus-visible{outline:2px solid var(--pub-gold);outline-offset:2px}.pub-connect__stage{border-radius:var(--pub-r-card);background:var(--pub-paper);box-shadow:0 0 0 1px var(--pub-line-strong), var(--pub-shadow-lift);overflow:hidden}.pub-connect__stage-bar{border-bottom:1px solid var(--pub-line-strong);align-items:center;gap:12px;min-height:48px;padding:8px 10px 8px 16px;font-size:13px;display:flex}.pub-connect__stage-host{align-items:center;gap:8px;font-weight:500;display:inline-flex}.pub-connect__stage-count{font-variant-numeric:tabular-nums;color:var(--pub-ink-muted);margin-left:auto}.pub-connect__stage-toggle{width:30px;height:30px;box-shadow:0 0 0 1px var(--pub-line-strong);color:var(--pub-ink);cursor:pointer;transition:background-color .15s var(--pub-ease), scale .15s var(--pub-ease);border-radius:50%;place-items:center;display:grid}.pub-connect__stage-toggle:hover{background:var(--brand-sand)}.pub-connect__stage-toggle:active{scale:.94}.pub-connect__viewport{aspect-ratio:16/11;background:var(--pub-product-surface);color:var(--pub-ink);font-size:clamp(9px,2cqi,13px);position:relative;overflow:hidden;container-type:inline-size}@media (width<=639px){.pub-connect__viewport{aspect-ratio:4/3.4}}.pub-connect__screen{animation:pub-connect-enter .56s var(--pub-ease) both;display:flex;position:absolute;inset:0}@keyframes pub-connect-enter{0%{opacity:0;filter:blur(6px);transform:translateY(10px)scale(.985)}}.pub-connect__pointer{z-index:5;opacity:0;pointer-events:none;transform:translate(calc(var(--x,50%) - 3px), calc(var(--y,110%) - 3px));transition:transform .82s var(--pub-ease-in-out), opacity .24s var(--pub-ease);position:absolute;top:0;left:0}.pub-connect__pointer[data-visible]{opacity:1}.pub-connect__pointer-press{animation:pub-connect-press .3s var(--pub-ease) .82s both;display:block;position:relative}.pub-connect__pointer svg{fill:var(--pub-ink);stroke:var(--pub-paper);stroke-width:1.6px;filter:drop-shadow(0 2px 3px #18181747);display:block}.pub-connect__pointer-press:before{content:"";width:24px;height:24px;box-shadow:0 0 0 1.5px var(--pub-ink);opacity:0;animation:pub-connect-ripple .52s var(--pub-ease) .86s both;border-radius:50%;position:absolute;top:-9px;left:-9px}@keyframes pub-connect-press{50%{scale:.84}}@keyframes pub-connect-ripple{0%{opacity:.5;scale:.3}to{opacity:0;scale:1.3}}.pub-connect__screen [data-connect-target]{outline-offset:.6em;animation:pub-connect-mark .42s var(--pub-ease) .76s both;outline:.2em solid #0000}@keyframes pub-connect-mark{to{outline-color:var(--pub-brand);outline-offset:.2em}}.pub-mock{background:var(--pub-paper);flex:1;min-width:0;font-size:1em;line-height:1.35;display:flex;position:relative}.pub-mock b,.pub-mock strong{font-weight:500}.pub-mock__pill{background:var(--brand-sand);border-radius:99px;height:.6em;display:block}.pub-mock__nav-item{white-space:nowrap;text-overflow:ellipsis;min-width:0;color:var(--pub-ink-muted);border-radius:.5em;align-items:center;gap:.55em;padding:.45em .6em;display:flex;overflow:hidden}.pub-mock__nav-item[data-selected]{background:color-mix(in srgb, var(--pub-ink) 7%, transparent);color:var(--pub-ink);font-weight:500}.pub-mock__nav-item svg{flex-shrink:0;width:1.1em;height:1.1em}.pub-mock__sidebar{border-right:1px solid var(--pub-line-strong);background:color-mix(in srgb, var(--pub-ink) 2.5%, var(--pub-paper));flex-direction:column;flex-shrink:0;gap:.35em;width:27%;padding:1.3em .8em;display:flex}.pub-mock__sidebar .pub-mock__pill{margin:.8em .6em 0}.pub-mock__main{flex-direction:column;flex:1;gap:1.1em;min-width:0;padding:1.6em 1.8em;display:flex}.pub-mock__heading{font-family:var(--pub-serif);letter-spacing:-.02em;font-size:2em;line-height:1.05}.pub-mock__back{color:var(--pub-ink-muted);align-items:center;gap:.45em;display:inline-flex}.pub-mock__back svg{width:1em;height:1em}.pub-mock__detail{align-items:center;gap:.8em;display:flex}.pub-mock__detail img{border-radius:.65em;width:2.6em;height:2.6em}.pub-mock__detail>span:not(.pub-mock__switch){flex:1;gap:.15em;display:grid}.pub-mock__detail b{font-size:1.3em}.pub-mock__detail small{color:var(--pub-ink-muted);font-size:.85em}.pub-mock__switch{background:radial-gradient(circle at calc(100% - .68em) 50%, var(--pub-paper) .48em, transparent .5em) var(--pub-ink);border-radius:99px;flex-shrink:0;width:2.4em;height:1.35em}.pub-mock__avatar--icon{place-items:center;display:grid}.pub-mock__avatar--icon svg{width:1.1em;height:1.1em}.pub-mock__connect{background:color-mix(in srgb, var(--pub-ink) 7%, transparent);white-space:nowrap;border-radius:.5em;margin-left:auto;padding:.45em .95em;font-weight:500}.pub-mock__tabs{gap:.35em;display:flex}.pub-mock__tabs span{white-space:nowrap;color:var(--pub-ink-muted);border-radius:.55em;padding:.4em .8em}.pub-mock__tabs [data-selected]{background:color-mix(in srgb, var(--pub-ink) 7%, transparent);color:var(--pub-ink);font-weight:500}.pub-mock__toolbar{align-items:center;gap:.6em;display:flex;position:relative}.pub-mock__segment{background:color-mix(in srgb, var(--pub-ink) 5%, transparent);border-radius:.6em;padding:.2em;display:flex}.pub-mock__segment span{color:var(--pub-ink-muted);border-radius:.45em;padding:.3em .75em}.pub-mock__segment [data-selected]{background:var(--pub-paper);color:var(--pub-ink);box-shadow:0 1px 2px #18181714}.pub-mock__add-menu{background:var(--pub-ink);white-space:nowrap;color:var(--pub-paper);border-radius:.6em;align-items:center;gap:.35em;padding:.45em .8em;font-weight:500;display:inline-flex}.pub-mock__add-menu svg{width:1em;height:1em}.pub-mock__menu{z-index:2;background:var(--pub-paper);min-width:14em;box-shadow:0 0 0 1px var(--pub-line-strong), 0 .8em 2em #1818171f;animation:pub-connect-menu .32s var(--pub-ease) .18s both;transform-origin:100% 0;border-radius:.75em;gap:.15em;padding:.35em;display:grid;position:absolute;top:calc(100% + .45em);right:0}@keyframes pub-connect-menu{0%{opacity:0;transform:translateY(-.3em)scale(.97)}}.pub-mock__menu span{white-space:nowrap;border-radius:.45em;padding:.5em .7em}.pub-mock__plugin{min-width:0;box-shadow:inset 0 0 0 1px var(--pub-line-strong);border-radius:.85em;align-items:center;gap:.75em;padding:.9em;display:flex}.pub-mock__plugin--valha{background:var(--pub-paper);box-shadow:inset 0 0 0 1px var(--pub-line-strong), 0 .3em 1em #1818170f;flex-wrap:wrap}.pub-mock__plugin img{border-radius:.55em;flex-shrink:0;width:2.3em;height:2.3em}.pub-mock__plugin>span:not(.pub-mock__plus,.pub-mock__avatar,.pub-mock__connect){flex:1;gap:.2em;min-width:8em;display:grid}.pub-mock__plugin small{color:var(--pub-ink-muted);font-size:.82em;line-height:1.35}.pub-mock__avatar{background:var(--brand-sand);border-radius:.55em;flex-shrink:0;width:2.3em;height:2.3em}.pub-mock__list{gap:.6em;display:grid}.pub-mock__plus{width:1.9em;height:1.9em;box-shadow:inset 0 0 0 1px var(--pub-line-strong);border-radius:.5em;flex-shrink:0;place-items:center;margin-left:auto;display:grid}.pub-mock__plus svg{width:1em;height:1em}.pub-mock__dialog{background:var(--pub-paper);width:min(86%,30em);box-shadow:0 0 0 1px var(--pub-line-strong), 0 1.2em 3em #18181729;border-radius:.9em;gap:.7em;padding:1.3em;display:grid}.pub-mock__dialog>strong{letter-spacing:-.01em;font-size:1.15em}.pub-mock__label{font-size:.9em;font-weight:500}.pub-mock__input{min-height:2.3em;box-shadow:inset 0 0 0 1px var(--pub-line-strong);white-space:nowrap;text-overflow:ellipsis;border-radius:.5em;padding:.5em .7em;display:block;overflow:hidden}.pub-mock__input--code{font-family:var(--pub-code);font-size:.92em}.pub-mock__actions{justify-content:flex-end;gap:.5em;margin-top:.3em;display:flex}.pub-mock__actions span{box-shadow:inset 0 0 0 1px var(--pub-line-strong);border-radius:.5em;padding:.45em .95em;font-weight:500}.pub-mock__actions .pub-mock__primary{background:var(--pub-ink);box-shadow:none;color:var(--pub-paper)}.pub-mock__searchbox{max-width:18em;box-shadow:inset 0 0 0 1px var(--pub-line-strong);color:var(--pub-ink-muted);border-radius:99px;flex:1;align-items:center;gap:.55em;padding:.5em .9em;display:flex}.pub-mock__searchbox svg{width:1em;height:1em}.pub-mock__searchbox+.pub-mock__add-menu{margin-left:auto}.pub-mock--center{background:color-mix(in srgb, var(--pub-ink) 4%, var(--pub-paper));justify-content:center;align-items:center}.pub-mock__form{flex:1.35;align-content:center;justify-items:start;gap:.45em;min-width:0;padding:1.6em 2em;display:grid}.pub-mock__form .pub-mock__input{width:100%}.pub-mock__word{letter-spacing:-.01em;margin-bottom:.5em;font-size:1.1em;font-weight:600}.pub-mock__word i{color:var(--pub-gold);font-style:normal}.pub-mock__title{letter-spacing:-.015em;font-size:1.5em;font-weight:600}.pub-mock__sub{color:var(--pub-ink-muted);margin-bottom:.4em;font-size:.92em}.pub-mock__cta{background:var(--pub-brand);text-align:center;border-radius:.55em;width:100%;margin-top:.5em;padding:.65em 0;font-weight:600}.pub-mock__aside{background:color-mix(in srgb, var(--pub-brand) 22%, var(--pub-paper));flex-direction:column;flex:1;gap:.8em;min-width:0;padding:1.2em 1em;display:flex}.pub-mock__aside span{letter-spacing:.08em;color:var(--pub-gold);font-size:.7em;font-weight:600}.pub-mock__aside i{background:var(--pub-paper);border-radius:.7em;flex:1;box-shadow:0 1px 3px #1818171a}.pub-term{background:var(--pub-dark);min-width:0;font-family:var(--pub-code);color:color-mix(in srgb, var(--pub-on-dark) 88%, transparent);flex-direction:column;flex:1;gap:.5em;padding:2em 2.2em;font-size:1.05em;line-height:1.7;display:flex}.pub-term__line{white-space:nowrap;align-items:center;gap:.8em;min-width:0;display:flex}.pub-term__line[data-state=done]{color:color-mix(in srgb, var(--pub-on-dark) 55%, transparent)}.pub-term__line b{color:var(--pub-brand);font-weight:400}.pub-term__typed{white-space:pre;vertical-align:bottom;width:calc(var(--chars) * 1ch);animation:pub-connect-type calc(var(--chars) * 34ms) steps(var(--chars), end) .36s both;display:inline-block;overflow:hidden}.pub-term__line[data-state=done] .pub-term__typed{animation:none}@container (width<=480px){.pub-mock__tabs--detail span:first-child{display:none}.pub-term{padding:1.4em 1.2em;font-size:.88em}}@keyframes pub-connect-type{0%{width:0}}.pub-term__tick{width:1em;height:1em;color:var(--pub-brand);flex-shrink:0}.pub-term__caret{background:var(--pub-brand);flex-shrink:0;width:.55em;height:1.1em;animation:1s step-end infinite pub-connect-blink;display:inline-block}@keyframes pub-connect-blink{50%{opacity:0}}