integration-modes.im{display:grid;gap:var(--s-5)}@media(min-width:64rem){integration-modes.im:not(.im--compact){grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);grid-template-areas:"top top" "scene cards" "choose choose";column-gap:var(--s-5);align-items:stretch}.im:not(.im--compact) .im__top{grid-area:top}.im:not(.im--compact) .im__scene{grid-area:scene}.im:not(.im--compact) .im__cards{grid-area:cards;grid-template-columns:1fr}.im:not(.im--compact) .im__choose{grid-area:choose}}.im__switch{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--line)}.im__btn{min-height:2.75rem;padding:0 1.1rem;border-radius:var(--r-pill);color:var(--fg-muted);font-weight:600;font-size:var(--fs-small);cursor:pointer;transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}.im__btn[aria-pressed=true]{background:var(--accent-solid);color:var(--accent-on)}.im__btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.im__scene{margin:0;padding:var(--s-4);border-radius:var(--r-l);background:radial-gradient(30rem 16rem at 50% 50%,color-mix(in oklab,var(--a-600) 16%,transparent),transparent 70%),var(--bg-raised);box-shadow:inset 0 0 0 1px var(--line)}.im__scene{display:flex;flex-direction:column;gap:var(--s-4)}.im__scene svg{display:block;flex:1 1 auto;width:100%;height:auto;min-height:0;margin-block:auto;overflow:visible}.im__scene svg *{transform-box:view-box}@media(max-width:47.99rem){.im>*,.im__scene{min-width:0}.im__pan{margin-inline:calc(var(--s-4) * -1);padding-inline:var(--s-4)}.im__pan svg{width:40rem;max-width:none}}.im-l__wire{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:4 5}.im-l__solid{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--dur-long) var(--ease-out);transition-delay:calc(var(--i) * 90ms * var(--m))}.im[data-mode=api] .im-l__solid{stroke-dashoffset:0}.im-l__mod{transition:transform var(--dur-slow) var(--ease-spring),opacity var(--dur-base) var(--ease-out);transition-delay:calc(var(--i) * 70ms * var(--m))}.im-l__mod rect{fill:var(--bg);stroke:var(--fg-subtle)}.im-l__mod text,.im-l__x,.im-l__data,.im-c__fields text{font:600 10.5px var(--font-mono);letter-spacing:.04em}.im-l__mod text{fill:var(--fg-muted)}.im[data-mode=api] .im-l__mod{transform:scale(0);opacity:0}.im-l__x{fill:var(--fg-subtle);transition:opacity var(--dur-base) var(--ease-out)}.im-l__data{fill:var(--xray-fg);opacity:0;transition:opacity var(--dur-base) var(--ease-out)}.im[data-mode=api] .im-l__x{opacity:0}.im[data-mode=api] .im-l__data{opacity:1}.im-n rect{fill:var(--bg);stroke:var(--line-strong);transition:stroke var(--dur-base) var(--ease-out)}.im[data-mode=api] .im-n rect{stroke:color-mix(in oklab,var(--accent) 70%,var(--line-strong))}.im-n text{fill:var(--fg);font:600 13px var(--font-text)}.im-c__box{fill:var(--a-600);stroke:var(--a-400)}.im-c__glow{fill:none;stroke:var(--xray);opacity:0;transform-origin:360px 165px}.im[data-mode=api][data-in] .im-c__glow{animation:im-ping calc(2.2s * var(--m)) var(--ease-out) infinite}.im-c text{fill:#fff;font:700 16px var(--font-text)}.im-c__fields{opacity:0;transform:translateY(-6px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}.im-c__fields rect{fill:color-mix(in oklab,var(--xray) 14%,var(--bg));stroke:color-mix(in oklab,var(--xray) 60%,transparent)}.im-c__fields text{fill:var(--xray)}.im[data-mode=api] .im-c__fields{opacity:1;transform:none;transition-delay:calc(.5s * var(--m))}.im-l__pkt{fill:var(--xray);opacity:0;offset-rotate:0deg}.im[data-in] .im-l__pkt--pass{animation:im-lag calc(2.6s * var(--m)) linear infinite;animation-delay:calc(var(--i) * -.52s * var(--m))}.im[data-in] .im-l__pkt--block{fill:var(--fg-subtle);animation:im-stuck calc(2.6s * var(--m)) linear infinite;animation-delay:calc(var(--i) * -.52s * var(--m) - 1.3s * var(--m))}.im[data-mode=api][data-in] .im-l__pkt{fill:var(--xray);animation-name:im-pass;animation-duration:calc(1.7s * var(--m))}@keyframes im-lag{0%{offset-distance:0%;opacity:0}8%{opacity:1}40%,62%{offset-distance:50%}92%{opacity:1}to{offset-distance:100%;opacity:0}}@keyframes im-stuck{0%{offset-distance:0%;opacity:0}8%{opacity:1}40%{offset-distance:48%;opacity:1}70%,to{offset-distance:48%;opacity:0}}@keyframes im-pass{0%{offset-distance:0%;opacity:0}10%,90%{opacity:1}to{offset-distance:100%;opacity:0}}@keyframes im-ping{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}.im__cards{display:grid;gap:var(--s-4);margin:0;padding:0;list-style:none}@media(min-width:48rem){.im__cards{grid-template-columns:repeat(2,minmax(0,1fr))}}.im-card{display:grid;align-content:start;gap:var(--s-2);padding:var(--s-5);border-radius:var(--r-l);background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out)}.im:not(.im--compact) .im-card{cursor:pointer}.im:not(.im--compact)[data-mode=module] .im-card[data-card=module],.im:not(.im--compact)[data-mode=api] .im-card[data-card=api]{box-shadow:inset 0 0 0 1px var(--accent),0 0 30px -14px var(--a-glow);background:color-mix(in oklab,var(--a-700) 16%,var(--bg-raised))}.im-card__ico{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-bottom:var(--s-2);border-radius:var(--r-m);background:color-mix(in oklab,var(--a-500) 16%,transparent)}.im-card__ico svg{fill:none;stroke:var(--accent-strong);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.im-card__title{margin:0;font-size:var(--fs-h3)}.im-card__sub{margin:0 0 var(--s-2);color:var(--fg-subtle);font-size:var(--fs-small)}.im-card__list{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}.im-card__list li{position:relative;padding-left:1.5rem;color:var(--fg-muted);text-wrap:pretty}.im-card__list li:before{position:absolute;left:0;top:0;font:700 1em var(--font-mono)}.im-card__pro:before{content:"+";color:var(--xray)}.im-card__con:before{content:"−";color:var(--fg-subtle)}.im__choose{margin:0;max-width:70ch;color:var(--fg)}.im-log{display:grid;gap:var(--s-2);padding-top:var(--s-4);border-top:1px dashed var(--line)}.im-log__head{font:600 var(--fs-label) var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-subtle)}.im-log__rows{display:grid;margin:0;padding:0;list-style:none}.im-log__row{display:grid;grid-template-columns:minmax(7.5rem,max-content) auto auto minmax(0,1fr);align-items:center;gap:var(--s-3);padding:.45rem 0;border-bottom:1px solid color-mix(in oklab,var(--line) 60%,transparent);font-size:var(--fs-small);color:var(--fg-muted)}.im-log__row:last-child{border-bottom:0}.im-log__src{color:var(--fg);font-weight:600}.im-log__arrow,.im-log__dst{font-family:var(--font-mono);color:var(--fg-subtle)}.im-log__st{display:grid;justify-items:end;font:600 var(--fs-label) var(--font-mono);letter-spacing:.04em}.im-log__st>span{grid-area:1 / 1;padding:.2rem .6rem;border-radius:var(--r-pill);white-space:nowrap;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-slow) var(--ease-spring);transition-delay:calc(var(--i) * 90ms * var(--m))}.im-log__mod{color:var(--fg-subtle);box-shadow:inset 0 0 0 1px var(--line-strong)}.im-log__api{color:var(--xray);background:color-mix(in oklab,var(--xray) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--xray) 45%,transparent);opacity:0;transform:translateY(6px)}.im[data-mode=api] .im-log__mod{opacity:0;transform:translateY(-6px)}.im[data-mode=api] .im-log__api{opacity:1;transform:none}@media(max-width:30rem){.im-log__row{grid-template-columns:minmax(0,1fr) auto}.im-log__arrow,.im-log__dst{display:none}}:root[data-motion=off] .im-log__st>span{transition:none}:root[data-motion=off] .im-l__pkt{display:none}.fb{padding-block:var(--section-y);overflow-x:clip}.fb__grid{display:grid;gap:var(--s-7);align-items:center}@media(min-width:64rem){.fb__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s-9)}}.fb__copy{display:grid;gap:var(--s-5);justify-items:start}.fb__kicker{margin:0;font:500 var(--fs-label) var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--xray-fg)}.fb__title{margin:0;max-width:18ch;font-size:clamp(2rem,4vw,3.75rem);line-height:1.02;letter-spacing:var(--display-tracking);text-wrap:balance}.fb__lead{margin:0;max-width:50ch}.fb__next{display:grid;gap:var(--s-3);width:100%;max-width:52ch;padding-top:var(--s-4);border-top:1px dashed var(--line-strong)}.fb__next-t{margin:0;color:var(--fg-subtle);font:500 var(--fs-label) var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.fb__fork{display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}.fb__fork li{display:grid;grid-template-columns:2.5rem 1fr;gap:var(--s-2);align-items:start;color:var(--fg-muted)}.fb__fork b{color:var(--fg)}.fb__arrow path{fill:none;stroke:var(--accent-strong);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}.fb__doc-wrap{perspective:1400px;display:grid;justify-items:center}.fb__doc{position:relative;width:min(100%,26rem);padding:var(--s-5);border-radius:var(--r-l);background:linear-gradient(160deg,color-mix(in oklab,var(--a-500) 14%,transparent),transparent 55%),var(--bg-raised);box-shadow:inset 0 0 0 1px var(--line-strong),0 40px 70px -40px #020610e6,0 0 60px -30px var(--a-glow);transform:rotateY(-10deg) rotateX(6deg);transition:transform var(--dur-long) var(--ease-expo)}.fb__doc-wrap:hover .fb__doc{transform:rotateY(-3deg) rotateX(2deg)}.fb__doc-head{display:flex;align-items:center;gap:var(--s-3);padding-bottom:var(--s-4);margin-bottom:var(--s-4);border-bottom:1px solid var(--line);color:var(--fg);font:600 var(--fs-small) var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.fb__doc-ico{width:1.6rem;height:2rem;border-radius:4px;background:repeating-linear-gradient(to bottom,transparent 0 5px,color-mix(in oklab,var(--fg) 30%,transparent) 5px 6.5px) .3rem .45rem / calc(100% - .6rem) calc(100% - .8rem) no-repeat,color-mix(in oklab,var(--accent) 30%,var(--surface))}.fb__rows{display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}.fb__rows li{display:grid;grid-template-columns:1.4rem 1fr;column-gap:var(--s-3);row-gap:.35rem;align-items:center}.fb__rows svg{grid-row:span 2;align-self:start;fill:none;stroke-linecap:round;stroke-linejoin:round}.fb__rows circle{stroke:color-mix(in oklab,var(--xray) 70%,transparent);stroke-width:1.4}.fb__rows path{stroke:var(--xray);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0}.fb__rows b{color:var(--fg);font-weight:600;font-size:var(--fs-small)}.fb__rows i{height:5px;width:var(--w);border-radius:3px;background:color-mix(in oklab,var(--fg) 14%,transparent)}.fb__stamp{position:absolute;right:-.75rem;bottom:1.25rem;padding:.4rem .9rem;border-radius:var(--r-s);border:2px solid var(--xray);color:var(--xray);background:color-mix(in oklab,var(--bg) 70%,transparent);font:700 var(--fs-small) var(--font-mono);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-9deg);box-shadow:0 0 24px -8px var(--xray)}@media(max-width:47.99rem){.fb__stamp{right:var(--s-3);bottom:var(--s-3)}.fb__doc,.fb__doc-wrap:hover .fb__doc{transform:none}}@media(prefers-reduced-motion:no-preference){:root:not([data-motion=off]) .fb__grid:not([data-in]) :is(.fb__rows li,.fb__stamp){opacity:0}:root:not([data-motion=off]) .fb__grid:not([data-in]) :is(.fb__rows path,.fb__arrow path){stroke-dashoffset:1}:root:not([data-motion=off]) .fb__grid[data-in] .fb__rows li{animation:fb-row calc(.5s * var(--m)) var(--ease-out) both;animation-delay:calc(var(--i) * .22s * var(--m))}:root:not([data-motion=off]) .fb__grid[data-in] .fb__rows path{animation:fb-tick calc(.4s * var(--m)) var(--ease-out) both;animation-delay:calc(.25s * var(--m) + var(--i) * .22s * var(--m))}:root:not([data-motion=off]) .fb__grid[data-in] .fb__stamp{animation:fb-stamp calc(.56s * var(--m)) var(--ease-spring) calc(1.45s * var(--m)) both}:root:not([data-motion=off]) .fb__grid[data-in] .fb__arrow path{animation:fb-tick calc(.7s * var(--m)) var(--ease-out) both;animation-delay:calc(.6s * var(--m) + var(--i) * .3s * var(--m))}}@keyframes fb-row{0%{opacity:0;transform:translateY(8px)}}@keyframes fb-tick{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes fb-stamp{0%{opacity:0;transform:rotate(-9deg) scale(1.8)}65%{opacity:1;transform:rotate(-9deg) scale(.95)}to{opacity:1;transform:rotate(-9deg) scale(1)}}