/* Product story: Archful-inspired editorial grid, Apiverket's purple palette. */
.pf{--pf-bg:#100e15;--pf-surface:#1d1825;--pf-text:#f2edf7;--pf-muted:#aba1b7;--pf-line:#37303f;--pf-accent:#d4b2f5;--pf-tint:#292034;scroll-margin-top:88px}
.pf .pf-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:42px}.pf .pf-heading h2{font-size:clamp(32px,3.2vw,46px);font-weight:500;line-height:1.12;letter-spacing:-.045em;color:var(--pf-text);margin:14px 0 0}.pf .pf-heading>p{max-width:315px;color:var(--pf-muted);font-size:15px;line-height:1.6;margin:0}.pf-eyebrow{font-size:10px;font-weight:500;letter-spacing:.13em;color:var(--pf-muted)}
.pf .pf-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border:1px solid var(--pf-line);border-radius:20px;overflow:hidden;background:var(--pf-bg)}.pf .pf-card{position:relative;isolation:isolate;min-width:0;padding:30px;display:flex;flex-direction:column;gap:28px;overflow:hidden}.pf .pf-discover{grid-column:span 8;border-right:1px solid var(--pf-line)}.pf .pf-response{grid-column:span 4;background:radial-gradient(ellipse at 80% 10%,#b487d912,transparent 65%)}.pf .pf-connect{grid-column:span 4;border-top:1px solid var(--pf-line);border-right:1px solid var(--pf-line)}.pf .pf-schema{grid-column:span 3;border-top:1px solid var(--pf-line);border-right:1px solid var(--pf-line)}.pf .pf-use{grid-column:span 5;border-top:1px solid var(--pf-line);background:radial-gradient(ellipse at 75% 35%,#b785d518,transparent 65%)}
.pf .icon{width:20px;height:20px;flex-shrink:0}.pf .pf-caption{display:flex;gap:18px;align-items:start;min-height:96px;margin-top:auto;position:relative;z-index:2}.pf .pf-caption h3{font-size:22px;line-height:1.22;font-weight:500;letter-spacing:-.03em;margin:0 0 10px;color:var(--pf-text)}.pf .pf-caption p{font-size:14px;line-height:1.55;margin:0;color:var(--pf-muted);max-width:360px}.pf .pf-caption>a{margin-left:auto;display:grid;place-items:center;width:44px;min-width:44px;height:44px;border:1px solid #71627f;border-radius:8px;color:var(--pf-text);background:#ffffff03}.pf .pf-tag{font-size:10px;color:var(--pf-muted)}
/* Main scene: connectors live behind the nodes, not through them. */
.pf .pf-network{height:330px;position:relative;display:flex;flex-direction:column;justify-content:space-between;background-image:radial-gradient(#8f749529 1px,transparent 1px);background-size:20px 20px;border-radius:12px}.pf .pf-network:before{content:"";position:absolute;inset:10% 4%;background:radial-gradient(ellipse,#a568c72b,transparent 65%);filter:blur(22px);pointer-events:none}.pf .pf-network-top,.pf .pf-network-bottom{position:relative;display:flex;align-items:center;justify-content:space-between;color:var(--pf-muted);font-size:11px;background:var(--pf-bg);padding:10px 0}.pf .pf-network-top>span:first-child{display:flex;align-items:center;gap:8px;color:var(--pf-text)}.pf .pf-network-top i{width:5px;height:5px;background:var(--pf-accent);border-radius:50%}.pf .pf-network-bottom code{font:10px 'Geist Mono',monospace}.pf .pf-network-grid{position:relative;display:grid;grid-template-columns:minmax(125px,1fr) 44px 150px 42px minmax(100px,.8fr);align-items:center}.pf .pf-network-sources{display:flex;flex-direction:column;gap:38px}.pf .pf-source-node{display:flex;align-items:center;gap:10px;padding:17px 12px;border:1px solid #584662;border-radius:9px;background:linear-gradient(140deg,#2c2135,#17121f);box-shadow:inset 0 1px 0 #ffffff0b,0 12px 24px -12px #000}.pf .pf-node-icon{display:grid;place-items:center;color:var(--pf-accent)}.pf .pf-source-node strong{font-size:12px;font-weight:500;color:var(--pf-text);display:block}.pf .pf-source-node small{font-size:10px;color:var(--pf-muted);display:block;margin-top:5px}.pf .pf-wires{height:210px}.pf .pf-wires svg{width:100%;height:100%;fill:none;stroke:#796188;stroke-width:1}.pf .pf-wires .pf-packet{stroke:#e1bdff;stroke-width:2;stroke-dasharray:.08 .92;animation:pf-travel 6s linear infinite}.pf .pf-api-node{position:relative;display:flex;flex-direction:column;align-items:center;padding:24px 10px 18px;border:1px solid #ad86ca;border-radius:15px;background:radial-gradient(ellipse at 30% 0,#855ba059,transparent 70%),linear-gradient(145deg,#3a2947,#1b1422);box-shadow:inset 0 1px 0 #edd0ff55,inset 0 -2px 2px #0006,0 16px 30px -12px #000,0 0 44px -12px #bc83ee50}.pf .pf-api-node:after{content:"";position:absolute;inset:5px;border:1px solid #dbc2f217;border-radius:11px;pointer-events:none}.pf .pf-api-emblem .icon{width:42px;height:42px;color:#e1c5f5;filter:drop-shadow(0 4px 2px #0009)}.pf .pf-api-node strong{font-size:17px;letter-spacing:-.025em;margin-top:12px;color:var(--pf-text);font-weight:500}.pf .pf-api-node small{font-size:10px;color:#c7b3d7;margin-top:7px}.pf .pf-api-format{font:10px 'Geist Mono',monospace;color:#b6a0c4;margin-top:15px}.pf .pf-out-wire{height:1px;background:#796188;position:relative;overflow:hidden}.pf .pf-out-wire span{position:absolute;inset:0;background:linear-gradient(90deg,transparent,#e1bdff,transparent);animation:pf-out 3s linear infinite}.pf .pf-destination{width:100%;display:flex;flex-direction:column;align-items:start;gap:9px;border:1px solid #695178;border-radius:10px;background:linear-gradient(130deg,#282030,#151019);color:var(--pf-text);padding:19px 14px;text-align:left;box-shadow:inset 0 1px 0 #fff1,0 14px 30px -16px #000;cursor:pointer}.pf .pf-destination strong{font-size:12px;font-weight:500}.pf .pf-destination small{font-size:10px;color:var(--pf-muted)}.pf .pf-destination>.icon{width:15px;height:15px;color:var(--pf-accent)}
/* Supporting views deliberately use different scale and framing. */
.pf .pf-response-box{height:330px;margin:16px 0 -16px;border:1px solid #62506f;border-radius:11px;background:linear-gradient(140deg,#2d2337,#19141f 70%);box-shadow:inset 0 1px 0 #ffffff16,0 20px 35px -20px #000;overflow:hidden;position:relative}.pf .pf-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px;border-bottom:1px solid #8a729332;font-size:12px;color:var(--pf-text)}.pf .pf-bar>span:first-child{display:flex;align-items:center;gap:8px}.pf .pf-bar .icon{width:16px;height:16px;color:var(--pf-muted)}.pf .pf-toggle{display:flex;gap:20px;padding:0 16px;border-bottom:1px solid #8a729332}.pf .pf-toggle button{color:var(--pf-muted);border:0;border-bottom:2px solid transparent;background:none;min-height:44px;font-size:11px;padding:8px 0;cursor:pointer}.pf .pf-toggle button[aria-pressed=true]{color:var(--pf-accent);border-color:var(--pf-accent)}.pf dl{padding:4px 16px;margin:0}.pf dl>div{padding:12px 0}.pf dt{font-size:10px;color:var(--pf-muted);margin-bottom:6px}.pf dd{font-size:13px;color:var(--pf-text);margin:0}.pf pre{font:11px/1.9 'Geist Mono',monospace;white-space:pre-wrap;overflow-wrap:anywhere;margin:18px;padding:0;background:none;color:var(--pf-accent)}.pf [hidden]{display:none!important}.pf .pf-art{height:355px;position:relative;min-width:0}.pf .pf-terminal-art{margin:10px -6px -10px;padding:0 0 0 8px;border-left:1px solid #574563;background:radial-gradient(ellipse at 0 30%,#ad70d215,transparent 70%)}.pf .pf-terminal-label{display:flex;gap:5px;align-items:center;padding:10px 14px;color:var(--pf-muted);font-size:11px}.pf .pf-terminal-label i{height:5px;width:5px;border:1px solid #a390b2;border-radius:50%}.pf .pf-terminal-label span{margin-left:10px}.pf .pf-code-box .pf-bar{display:none}.pf .pf-code-content{padding:22px 14px;color:var(--pf-text)}.pf code{font:11px/1.6 'Geist Mono',monospace}.pf .pf-method{display:block;font:12px 'Geist Mono',monospace;color:#e1b99b;margin-bottom:8px}.pf .pf-code-line{display:flex;flex-direction:column;gap:7px;margin-top:24px}.pf .pf-code-line>span{font:10px 'Geist Mono',monospace;color:var(--pf-muted)}.pf .pf-code-line code{color:#c3a8da;overflow-wrap:anywhere}.pf .pf-copy{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:16px;padding:8px 0;background:none;border:0;color:var(--pf-accent);font-size:12px;cursor:pointer}.pf .pf-code-content>small{display:block;color:var(--pf-muted);font-size:10px;line-height:1.6}.pf .pf-schema-art{padding-top:26px}.pf .pf-schema-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.07em;color:var(--pf-muted);margin-bottom:24px}.pf .pf-schema-label span{letter-spacing:0}.pf .pf-schema-box{border:0;background:none;box-shadow:none}.pf .pf-schema-box .pf-bar{display:none}.pf .pf-schema-row{padding:17px 0;display:grid;grid-template-columns:1fr auto;gap:9px;border-bottom:1px solid #8a729332}.pf .pf-schema-row code{color:var(--pf-text)}.pf .pf-schema-row>span{font:9px 'Geist Mono',monospace;color:#b28fcb}.pf .pf-schema-row small{grid-column:1/-1;color:var(--pf-muted);font-size:11px}.pf .pf-customer-art{padding-top:28px;margin-right:-4px}.pf .pf-app-tab{position:absolute;display:flex;align-items:center;gap:8px;top:0;left:0;right:20px;padding:9px 14px;border:1px solid #685574;border-bottom:0;border-radius:8px 8px 0 0;background:#211a2a;color:var(--pf-muted);font-size:10px}.pf .pf-app-tab>.icon{height:13px;width:13px}.pf .pf-app-tab>span{font-size:8px;margin-left:auto}.pf .pf-customer{position:relative;border:1px solid #705b80;border-radius:9px;background:linear-gradient(145deg,#30253a,#1a1421 65%);box-shadow:inset 0 1px 0 #ffffff16,0 18px 30px -12px #000;overflow:hidden}.pf .pf-customer .pf-bar{padding:12px 16px}.pf .pf-form{padding:14px 16px}.pf .pf-form>div{margin-bottom:11px}.pf .pf-form>div>span{display:block;color:var(--pf-muted);font-size:10px;margin-bottom:5px}.pf .pf-form strong{display:block;padding:9px 10px;border:1px solid #65527270;border-radius:5px;font-size:12px;font-weight:400;color:var(--pf-text);background:#0d091240;transition:background .4s,border-color .4s}.pf .pf-filled strong{background:#ac7dc520;border-color:#ad83c7}.pf .pf-fill{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:#d4b2f5;color:#241330;border:1px solid #e7d1fb70;border-radius:6px;font-size:11px;font-weight:500;cursor:pointer;box-shadow:inset 0 1px 0 #fff3,0 4px 12px #0003}.pf .pf-form>small{display:block;font-size:9px;color:var(--pf-muted);line-height:1.6;margin-top:9px}.pf .pf-footer{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:20px;padding:0;border:0;background:none;box-shadow:none}.pf .pf-footer p{font-size:11px;line-height:1.6;color:var(--pf-muted);margin:0}.pf .pf-footer a{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--pf-accent);font-size:13px;white-space:nowrap}.pf button:focus-visible,.pf a:focus-visible{outline:2px solid var(--pf-accent);outline-offset:4px}.pf .pf-destination:hover{border-color:var(--pf-accent);background:#302139}.pf .pf-copy:hover,.pf .pf-footer a:hover{color:#efd9ff}
@keyframes pf-travel{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes pf-out{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(max-width:1100px){.pf .pf-card{padding:24px}.pf .pf-network-grid{grid-template-columns:minmax(105px,1fr) 24px 120px 24px minmax(85px,.8fr)}.pf .pf-source-node{padding:14px 8px;gap:7px}.pf .pf-node-icon .icon{width:16px}.pf .pf-destination{padding:15px 10px}.pf .pf-network-bottom>span{display:none}.pf .pf-app-tab>span{display:none}.pf .pf-schema{grid-column:span 4}.pf .pf-use{grid-column:span 4}.pf .pf-schema-label{font-size:8px}}
@media(max-width:800px){.pf .pf-heading{align-items:start;flex-direction:column;gap:20px}.pf .pf-heading>p{max-width:430px}.pf .pf-discover{grid-column:span 12;border-right:0}.pf .pf-response,.pf .pf-connect,.pf .pf-schema,.pf .pf-use{grid-column:span 6;border-top:1px solid var(--pf-line)}.pf .pf-response{border-right:1px solid var(--pf-line)}.pf .pf-connect{border-right:0}.pf .pf-network-grid{grid-template-columns:minmax(105px,1fr) 44px 145px 40px minmax(95px,.8fr)}.pf .pf-response-box{margin:0;height:355px}.pf .pf-terminal-art{margin:0}.pf .pf-footer{align-items:start;flex-direction:column;gap:7px}}
@media(max-width:560px){.pf .pf-grid{border-radius:15px}.pf .pf-card{grid-column:span 12;padding:25px 20px;border-right:0;gap:24px}.pf .pf-heading h2{font-size:34px}.pf .pf-caption{min-height:0}.pf .pf-network{height:390px}.pf .pf-network-top>span:last-child{font-size:9px}.pf .pf-network-grid{grid-template-columns:1fr 30px 1fr;grid-template-rows:110px 34px 120px;gap:0}.pf .pf-network-sources{grid-column:1;grid-row:1/4;gap:24px}.pf .pf-wires{grid-column:2;grid-row:1/4;height:260px}.pf .pf-api-node{grid-column:3;grid-row:1;padding:12px 6px;border-radius:10px}.pf .pf-api-emblem .icon{height:25px;width:25px}.pf .pf-api-node strong{font-size:14px;margin-top:4px}.pf .pf-api-node small{margin-top:4px}.pf .pf-api-format{display:none}.pf .pf-out-wire{grid-column:3;grid-row:2;justify-self:center;width:1px;height:100%}.pf .pf-destination{grid-column:3;grid-row:3;padding:12px;gap:6px}.pf .pf-source-node{flex-direction:column;align-items:start;padding:14px}.pf .pf-network-bottom{font-size:10px}.pf .pf-art{height:auto;min-height:300px}.pf .pf-customer-art{padding-top:28px;margin-bottom:10px}.pf .pf-customer{margin-bottom:0}.pf .pf-schema-art{min-height:290px}.pf .pf-terminal-art{min-height:330px}.pf .pf-response-box{height:320px}.pf .pf-use{scroll-margin-top:85px}}
@media(prefers-reduced-motion:reduce){.pf *{animation:none!important;transition:none!important}}
/* The alternative theme remains legible; purple is the primary design. */
.is-light-concept .pf{--pf-bg:#f4f1f8;--pf-text:#23182e;--pf-muted:#66566f;--pf-line:#d8cfe1;--pf-accent:#79509b}.is-light-concept .pf .pf-scene,.is-light-concept .pf .pf-network-grid{--pf-text:#f2edf7;--pf-muted:#bcb0c8;--pf-accent:#d4b2f5}.is-light-concept .pf .pf-code-content{color:#33203f}.is-light-concept .pf .pf-code-line code{color:#79509b}
/* Keep captions clear of the lifted product surfaces. */
.pf .pf-response-box{margin:0;height:330px}
.pf .pf-art{height:395px}
.pf .pf-wires .pf-packet{animation:pf-travel 4s linear infinite}
.pf .pf-out-wire span{animation:pf-out 4s linear 2s infinite}
@media(max-width:560px){.pf .pf-art{height:auto}.pf .pf-network-grid{grid-template-columns:1fr 30px 1fr;grid-template-rows:92px 36px 142px}.pf .pf-network-sources{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative}.pf .pf-source-node{padding:10px;gap:7px}.pf .pf-wires{grid-column:1;grid-row:2;height:36px;width:1px;justify-self:center;background:#796188}.pf .pf-wires svg{display:none}.pf .pf-api-node{grid-column:1;grid-row:3;height:142px;justify-content:center}.pf .pf-out-wire{grid-column:2;grid-row:3;width:100%;height:1px}.pf .pf-destination{grid-column:3;grid-row:3;height:130px;justify-content:center}.pf .pf-network-bottom code{font-size:9px}}
@media(max-width:560px){.pf .pf-wires{grid-column:1/-1;width:100%;position:relative;background:linear-gradient(#796188,#796188) no-repeat calc(25% - 4px) 0/1px 100%}.pf .pf-wires:before{content:"";position:absolute;left:calc(25% - 4px);right:calc(25% - 4px);top:17px;border-bottom:1px solid #796188}.pf .pf-wires:after{content:"";position:absolute;right:calc(25% - 4px);top:0;height:18px;border-right:1px solid #796188}}
/* Reference calibration: readable product scale, cropped artifacts, quieter chrome. */
.pf .pf-heading h2{font-size:34px;line-height:1.18;letter-spacing:-.035em}.pf .pf-heading>p{font-size:16px;max-width:345px}.pf .pf-eyebrow{display:none}.pf .pf-heading{margin-bottom:48px}.pf .pf-caption h3{font-size:24px}.pf .pf-caption p{font-size:16px;line-height:1.45}.pf .pf-caption{min-height:108px}.pf .pf-network{height:370px}.pf .pf-network-top,.pf .pf-network-bottom{font-size:13px}.pf .pf-network-bottom code{font-size:11px}.pf .pf-network-grid{grid-template-columns:minmax(140px,1fr) 36px 155px 36px minmax(125px,.9fr)}.pf .pf-source-node{padding:18px 14px;align-items:start;flex-direction:column;background:linear-gradient(125deg,#231c2b,#19151f);border-color:#4b3d56;gap:11px}.pf .pf-source-node strong,.pf .pf-destination strong{font-size:15px}.pf .pf-source-node small,.pf .pf-destination small{font-size:12px}.pf .pf-node-icon{background:#bca2d112;border:1px solid #a78cbc1a;border-radius:7px;width:32px;height:32px}.pf .pf-network-sources{gap:32px}.pf .pf-api-node{border-radius:10px;border-color:#b096d1;background:linear-gradient(140deg,#33243f,#201829);box-shadow:inset 0 1px 0 #ffffff15,0 15px 35px -16px #000,0 0 40px -15px #a778c92a}.pf .pf-api-node:after{display:none}.pf .pf-api-node strong{font-size:19px}.pf .pf-api-node small{font-size:12px}.pf .pf-api-format{font-size:11px}.pf .pf-api-emblem .icon{filter:none;width:38px;height:38px}.pf .pf-destination{padding:22px 14px;gap:12px;border-color:#574564;background:linear-gradient(125deg,#251c2d,#19141f)}.pf .pf-response-box{height:370px;margin-top:18px;margin-bottom:-18px;border-color:#4b3f57;background:linear-gradient(130deg,#29212f,#19151f);mask-image:linear-gradient(#000 76%,transparent 100%)}.pf .pf-response .pf-caption{padding-top:16px}.pf .pf-bar{font-size:16px;padding:18px}.pf .pf-tag{font-size:11px}.pf .pf-toggle{padding-inline:18px}.pf .pf-toggle button{font-size:13px;min-height:48px}.pf dl{padding:5px 18px}.pf dl>div{padding:15px 0}.pf dt{font-size:13px;margin-bottom:8px}.pf dd{font-size:16px}.pf .pf-response pre{font-size:13px;line-height:1.9}.pf .pf-art{height:345px}.pf .pf-terminal-art{border:1px solid #51425e;border-bottom:0;border-radius:10px 10px 0 0;margin:10px 0 -10px;padding:0;background:linear-gradient(130deg,#241c2c,#17121c);mask-image:linear-gradient(#000 72%,transparent)}.pf .pf-terminal-label{border-bottom:1px solid #8a72932b;padding:17px;font-size:13px}.pf .pf-code-content{padding:18px;overflow:hidden}.pf .pf-code-comment{font:12px 'Geist Mono',monospace;color:#a99db4}.pf .pf-code-content pre{margin:17px 0;font:12px/1.8 'Geist Mono',monospace;white-space:pre-wrap}.pf .pf-code-content code{font-size:12px}.pf .pf-syntax-command{color:#e7bc95}.pf .pf-syntax-string{color:#d5c3e5}.pf .pf-syntax-key{color:#b599d2}.pf .pf-code-receipt{border-top:1px solid #8a72932b;margin-top:22px;padding-top:18px}.pf .pf-code-receipt>span{display:flex;align-items:center;gap:7px;font-size:12px;color:#b5c5b8}.pf .pf-code-receipt .icon{width:14px;height:14px}.pf .pf-copy{font-size:14px;margin-top:12px}.pf [data-pf-copy-status]{display:block;font-size:11px;color:var(--pf-muted);line-height:1.5}.pf .pf-field-count{display:flex;gap:16px;align-items:center;margin:2px 0 23px}.pf .pf-field-count>strong{font-size:48px;line-height:1;font-weight:450;letter-spacing:-.05em;color:var(--pf-text)}.pf .pf-field-count>span{font-size:14px;color:var(--pf-text)}.pf .pf-field-count small{display:block;font-size:12px;color:var(--pf-muted);margin-top:5px}.pf .pf-schema-row{padding:16px 0}.pf .pf-schema-row code{font-size:13px}.pf .pf-schema-row>span{font-size:11px}.pf .pf-schema-row small{font-size:13px}.pf .pf-customer-art{height:345px;padding-top:31px;mask-image:linear-gradient(#000 60%,transparent 100%);pointer-events:none}.pf .pf-app-tab{font-size:12px;padding:10px 14px}.pf .pf-app-tab>span{display:none}.pf .pf-customer{border-color:#63506f;background:linear-gradient(125deg,#2c2334,#1d1725);box-shadow:inset 0 1px 0 #ffffff15,0 25px 30px -20px #000}.pf .pf-customer .pf-bar{padding:18px;font-size:16px}.pf .pf-form{padding:18px}.pf .pf-form>div>span{font-size:13px;margin-bottom:7px}.pf .pf-form strong{font-size:15px;padding:11px 12px}.pf .pf-form>div{margin-bottom:16px}.pf .pf-use .pf-caption{flex:1}.pf .pf-fill{font-size:14px;min-height:48px;max-width:290px;margin-top:16px}.pf .pf-footer p{font-size:12px}.pf .pf-footer a{font-size:14px}
@media(max-width:1100px) and (min-width:801px){.pf .pf-network-grid{grid-template-columns:1fr 22px 130px 22px 1fr}.pf .pf-source-node{padding:14px 10px}.pf .pf-source-node strong,.pf .pf-destination strong{font-size:13px}.pf .pf-source-node small,.pf .pf-destination small{font-size:11px}.pf .pf-app-tab{font-size:11px}.pf .pf-bar{font-size:14px}}
@media(max-width:800px){.pf .pf-response-box{height:345px;margin:0}.pf .pf-response .pf-caption{padding-top:0}.pf .pf-network-grid{grid-template-columns:1fr 35px 150px 35px 1fr}.pf .pf-caption{min-height:100px}.pf .pf-code-content{padding:15px}.pf .pf-field-count{gap:12px}}
@media(max-width:560px){.pf .pf-heading h2{font-size:32px}.pf .pf-heading{margin-bottom:30px}.pf .pf-heading>p{font-size:15px}.pf .pf-network{height:415px}.pf .pf-network-top{font-size:12px}.pf .pf-network-grid{grid-template-columns:1fr 30px 1fr;grid-template-rows:120px 30px 155px}.pf .pf-network-sources{gap:14px}.pf .pf-source-node{padding:12px;gap:8px}.pf .pf-source-node strong{font-size:14px}.pf .pf-source-node small{font-size:11px}.pf .pf-api-node{height:155px;padding:14px 6px}.pf .pf-api-node strong{font-size:18px}.pf .pf-api-node small{font-size:11px}.pf .pf-api-emblem .icon{width:32px;height:32px}.pf .pf-destination{height:145px;padding:14px;gap:9px}.pf .pf-destination strong{font-size:14px}.pf .pf-destination small{font-size:11px}.pf .pf-caption{min-height:0}.pf .pf-art{height:330px;min-height:0}.pf .pf-schema-art{height:330px}.pf .pf-customer-art{height:320px;margin-bottom:0}.pf .pf-response-box{height:345px}.pf .pf-caption h3{font-size:23px}.pf .pf-caption p{font-size:15px}.pf .pf-use .pf-caption{flex:none}}
.pf [data-pf-status]{display:block;font-size:11px;line-height:1.5;color:var(--pf-muted);margin-top:10px}
/* Material pass: breathing room, readable detail and depth behind the content. */
.pf .pf-card{background-color:#120e19;gap:36px}
.pf .pf-discover{background:radial-gradient(ellipse at 52% 34%,#68457f14,transparent 60%),#120e19}
.pf .pf-network{height:475px;padding:8px 0 0;background-size:22px 22px}
.pf .pf-network:before{inset:14% 10%;background:radial-gradient(ellipse,#ab69d430,transparent 68%);filter:blur(28px)}
.pf .pf-network-grid{grid-template-columns:minmax(135px,1fr) 52px 166px 52px minmax(130px,.95fr)}
.pf .pf-network-sources{gap:45px}.pf .pf-source-node{padding:19px 15px;gap:9px;position:relative;background:linear-gradient(135deg,#352a42 0%,#211928 53%,#19131f 100%);border-color:#6d567c;box-shadow:inset 0 1px 0 #f0d7ff24,inset 0 -1px 0 #0008,0 5px 8px #0003,0 20px 35px -15px #000b}
.pf .pf-auth-detail{display:block;margin-top:8px;padding-top:10px;border-top:1px solid #bea0d024;font:10px 'Geist Mono',monospace;color:#c4adcF;letter-spacing:.02em}
.pf .pf-wires{height:300px}.pf .pf-wires svg{overflow:visible}.pf .pf-wires path{stroke:#9778af;stroke-width:1.25}
.pf .pf-api-node{min-height:235px;padding:27px 12px;border-radius:15px;background:radial-gradient(ellipse at 25% 0,#ba8ddd55,transparent 68%),linear-gradient(140deg,#4c355d,#2a1c37 58%,#1b1323);border-color:#b494c8;box-shadow:inset 0 1px 1px #f4ddff77,inset 0 -3px 5px #0007,0 6px 12px #0006,0 28px 38px -17px #000,0 0 50px -10px #b475d52b}
.pf .pf-api-node:after{display:block;inset:6px;border-radius:10px;border-color:#e4c7f21c}.pf .pf-api-emblem .icon{width:48px;height:48px;filter:drop-shadow(0 4px 1px #21122d) drop-shadow(0 7px 7px #0007)}.pf .pf-api-node strong{font-size:21px;margin-top:18px}.pf .pf-api-node small{font-size:12px;margin-top:10px}.pf .pf-api-format{color:#e0c4f2;margin-top:22px}.pf .pf-hub-detail{font-size:9px;color:#bda7ca;margin-top:7px;white-space:nowrap}
.pf .pf-destination{min-height:205px;padding:22px 15px;background:linear-gradient(135deg,#35293f,#1c1425);border-color:#745a87;box-shadow:inset 0 1px 0 #f0d7ff28,0 7px 10px #0004,0 24px 32px -18px #000c}.pf .pf-dest-fields{font-size:10px;line-height:1.6;color:#b9a6c7}.pf .pf-dest-action{font-size:11px;color:#e4c8fa;margin-top:8px}.pf .pf-destination>small{font-size:11px}.pf .pf-node-icon{background:linear-gradient(140deg,#d8b6f11c,#ba8de608);box-shadow:inset 0 1px 0 #fff1,0 4px 8px #0002}
.pf .pf-network-bottom{padding-block:18px;background:transparent}.pf .pf-network-top{background:transparent;padding-bottom:20px}
.pf .pf-response{background:radial-gradient(ellipse at 70% 25%,#80529c24,transparent 67%),#120e19}.pf .pf-response-box{height:430px;margin:20px 0 25px;mask-image:linear-gradient(#000 94%,transparent);background:radial-gradient(ellipse at 0 0,#62457222,transparent 70%),linear-gradient(130deg,#312738,#1a1422);border-color:#705d7e;box-shadow:inset 0 1px 0 #ead5ff2b,0 7px 12px #0005,0 26px 42px -20px #000d}.pf .pf-response .pf-caption{padding-top:0}.pf dl>div{padding:20px 0;border-bottom:1px solid #c9a8d913}.pf dl>div:last-child{border:0}.pf dd{font-size:16px}.pf dt{color:#b7a9c2}.pf .pf-response pre{font-size:13px}
.pf .pf-terminal-art{height:390px;mask-image:linear-gradient(#000 89%,transparent);background:radial-gradient(ellipse at 0 0,#65447920,transparent 60%),linear-gradient(135deg,#2d2337,#16111c);border-color:#6c557b;box-shadow:inset 0 1px 0 #e9d0ff25,0 16px 28px -16px #000}.pf .pf-code-content pre{font-size:12px;line-height:1.9}.pf .pf-code-receipt{margin-top:20px}.pf .pf-code-content{padding:18px 15px}
.pf .pf-schema-art{height:390px;padding-top:24px}.pf .pf-field-count>strong{color:#eee4f6;text-shadow:0 4px 14px #c994ec26}.pf .pf-schema{background:radial-gradient(ellipse at 20% 15%,#80579e16,transparent 65%),#120e19}.pf .pf-schema-row{padding:20px 0;border-bottom-color:#81688f55}.pf .pf-schema-row>span{color:#c3a6d9}.pf .pf-schema-row small{color:#b5a7c0}
.pf .pf-use{background:radial-gradient(ellipse at 70% 25%,#9464af22,transparent 64%),#120e19}.pf .pf-customer-art{height:390px;mask-image:linear-gradient(#000 92%,transparent);padding-top:32px}.pf .pf-customer{background:radial-gradient(ellipse at 5% 0,#9268ac22,transparent 65%),linear-gradient(135deg,#33273f,#1e1528);border-color:#846795;box-shadow:inset 0 1px 0 #f3daff30,0 6px 12px #0005,0 26px 45px -20px #000d}.pf .pf-app-tab{background:linear-gradient(130deg,#2d2338,#20172a);border-color:#645071;box-shadow:inset 0 1px 0 #dac0f014}.pf .pf-form strong{box-shadow:inset 0 2px 5px #0005,0 1px 0 #d5afea0a;background:#110d1970;border-color:#685274}.pf .pf-form>div>span{color:#baacc5}.pf .pf-filled strong{background:#a87bd21c;border-color:#ab86c2}
@media(max-width:1100px) and (min-width:801px){.pf .pf-network-grid{grid-template-columns:1fr 25px 140px 25px 1fr}.pf .pf-source-node{padding:15px 10px}.pf .pf-destination{padding:18px 10px}.pf .pf-hub-detail{font-size:8px}.pf .pf-dest-fields{font-size:9px}.pf .pf-api-node{padding-inline:8px}}
@media(max-width:800px){.pf .pf-network-grid{grid-template-columns:1fr 36px 156px 36px 1fr}.pf .pf-response-box{height:390px;margin:10px 0 0}.pf .pf-network{height:470px}}
@media(max-width:560px){.pf .pf-card{gap:30px}.pf .pf-network{height:535px}.pf .pf-network-grid{grid-template-columns:1fr 30px 1fr;grid-template-rows:160px 36px 230px}.pf .pf-network-sources{gap:14px}.pf .pf-source-node{padding:13px 10px;gap:9px}.pf .pf-auth-detail{margin-top:5px;padding-top:8px;font-size:9px}.pf .pf-wires{height:36px}.pf .pf-api-node{min-height:0;height:230px;padding:22px 6px}.pf .pf-api-emblem .icon{width:40px;height:40px}.pf .pf-api-node strong{font-size:18px;margin-top:15px}.pf .pf-api-format{display:block;margin-top:17px;font-size:10px}.pf .pf-hub-detail{font-size:8px}.pf .pf-destination{height:210px;min-height:0;padding:16px 12px;gap:9px}.pf .pf-dest-fields{font-size:9px}.pf .pf-network-bottom{padding-block:10px}.pf .pf-response-box{height:390px;margin:10px 0 0}.pf .pf-terminal-art,.pf .pf-schema-art,.pf .pf-customer-art{height:390px;min-height:0}.pf .pf-caption h3{font-size:23px}}
@media(max-width:560px){.pf .pf-network-sources{align-self:end}}
/* Preserve the editorial grid; give each node its own intended proportions. */
@media(min-width:801px){
 .pf .pf-network{height:435px}
 .pf .pf-network-grid{grid-template-columns:minmax(140px,1fr) 32px minmax(190px,1.28fr) 32px minmax(140px,1fr);align-items:center}
 .pf .pf-network-sources{gap:30px}
 .pf .pf-source-node{height:119px;padding:15px 12px;gap:8px;flex-direction:row;align-items:flex-start}
 .pf .pf-source-node .pf-node-icon{width:26px;height:26px;flex-shrink:0}
 .pf .pf-source-node .pf-node-icon .icon{width:16px;height:16px}
 .pf .pf-source-node strong{font-size:13px}
 .pf .pf-source-node small{font-size:10px;line-height:1.4}
 .pf .pf-auth-detail{font-size:9px;margin-top:10px;padding-top:9px}
 .pf .pf-api-node{width:100%;aspect-ratio:1.06;min-height:0;padding:19px 10px;justify-content:center}
 .pf .pf-api-emblem .icon{width:43px;height:43px}
 .pf .pf-api-node strong{font-size:22px;margin-top:12px}
 .pf .pf-api-node small{font-size:11px;margin-top:8px}
 .pf .pf-api-format{margin-top:15px;font-size:10px}
 .pf .pf-hub-detail{font-size:8px;margin-top:5px}
 .pf .pf-destination{min-height:0;aspect-ratio:.95;padding:17px 12px;gap:9px;justify-content:center}
 .pf .pf-destination strong{font-size:14px}
 .pf .pf-destination>small{font-size:10px}
 .pf .pf-dest-fields{font-size:9px;line-height:1.4}
 .pf .pf-dest-action{font-size:10px;margin-top:3px}
 .pf .pf-wires{height:269px}
 .pf .pf-response-box{height:405px;margin:12px 0 18px}
}
@media(min-width:801px) and (max-width:1050px){
 .pf .pf-discover{grid-column:span 8;padding:24px 18px}
 .pf .pf-network-grid{grid-template-columns:minmax(115px,1fr) 20px minmax(160px,1.3fr) 20px minmax(105px,.95fr)}
 .pf .pf-source-node{height:110px;padding:12px 8px;gap:6px}
 .pf .pf-source-node .pf-node-icon{display:none}
 .pf .pf-api-node{padding:15px 8px}
 .pf .pf-api-emblem .icon{width:34px;height:34px}
 .pf .pf-api-node strong{font-size:19px}
 .pf .pf-hub-detail{white-space:normal;text-align:center}
 .pf .pf-destination{padding:14px 9px}
 .pf .pf-wires{height:250px}
}
/* Scale the two product nodes uniformly; keep the connection paths attached. */
@media(min-width:801px){
 .pf .pf-api-node,.pf .pf-destination{transform:scale(.9);transform-origin:center;position:relative;z-index:1}
 .pf .pf-wires{width:calc(100% + 20px);margin-right:-20px}
 .pf .pf-out-wire{width:calc(100% + 40px);margin-inline:-20px}
}
/* Full-width connection scene, followed by two deliberately proportioned rows. */
@media(min-width:801px){
 .pf .pf-discover{grid-column:1/-1;border-right:0;padding:36px}
 .pf .pf-network-grid{width:min(100%,920px);margin-inline:auto;grid-template-columns:minmax(140px,1fr) 72px minmax(190px,1.1fr) 72px minmax(140px,1fr)}
 .pf .pf-schema{grid-column:span 4;border-right:1px solid var(--pf-line)}
 .pf .pf-use{grid-column:span 8}
 .pf .pf-response{grid-column:span 4;border-top:1px solid var(--pf-line);border-right:1px solid var(--pf-line)}
 .pf .pf-connect{grid-column:span 8;border-right:0}
 .pf .pf-response-box,.pf .pf-terminal-art{height:405px;margin:12px 0 18px}
 .pf .pf-customer-art{width:min(100%,540px);margin-inline:auto}
 .pf .pf-code-content{padding:24px}
 .pf .pf-code-content pre,.pf .pf-code-content code{font-size:13px;overflow-wrap:anywhere}
}
@media(max-width:800px){
 .pf .pf-card{grid-column:1/-1;border-right:0}
 .pf .pf-card+.pf-card{border-top:1px solid var(--pf-line)}
}
/* Reuse the original standalone connection illustration without scaling its nodes. */
.pf .st-connection-scene{width:min(100%,960px);margin:0 auto;min-height:420px}
.pf .st-connection-scene .icon{width:22px;height:22px}
.pf .st-connection-center>span>.icon{width:58px;height:58px}
.pf .st-connection-key>.icon{width:34px;height:34px}
.pf .st-connection-scene .st-data-trace{animation-play-state:running}
@media(max-width:700px){
 .pf .st-connection-scene{min-height:0;margin:0 auto}
 .pf .st-connection-center>span>.icon{width:44px;height:44px}
 .pf .st-connection-key>.icon{width:28px;height:28px}
}

/* Read left to right: request, response, use in an application. */
@media(min-width:801px){
 .pf .pf-connect,.pf .pf-response,.pf .pf-use{grid-column:span 4;border-top:1px solid var(--pf-line);padding:28px 24px;gap:28px}
 .pf .pf-connect,.pf .pf-response{border-right:1px solid var(--pf-line)}
 .pf .pf-use{border-right:0}
 .pf .pf-response-box,.pf .pf-terminal-art,.pf .pf-customer-art{height:405px;margin:12px 0 0;flex-shrink:0}
 .pf .pf-code-content{padding:18px}
 .pf .pf-code-content pre,.pf .pf-code-content code{font-size:11px}
 .pf .pf-caption{margin-top:0;min-height:0;align-items:flex-start}
 .pf .pf-caption h3{font-size:22px}
}