.pf-stack [data-layer=client]{--layer:#00e5ff}.pf-stack [data-layer=server]{--layer:#5784ff}.pf-stack [data-layer=data]{--layer:#00c853}.pf-stack [data-layer=tooling]{--layer:#aab6cf}.pf-figure,.pf-skills li,.pf-figure-label{--cut:10px;isolation:isolate;background:var(--edge,var(--line-strong));clip-path:polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));border:0;position:relative}.pf-figure:before,.pf-skills li:before,.pf-figure-label:before{content:"";z-index:-1;background:var(--fill);clip-path:polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));transition:background-color .3s;position:absolute;inset:1px}.pf-stack-row{--cut:14px;isolation:isolate;position:relative}.pf-stack-row:before,.pf-stack-row:after{content:"";z-index:-1;transition:background-color .3s;position:absolute;inset:0}.pf-stack-row:before{background:var(--fill);clip-path:polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut))}.pf-stack-row:after{background:var(--edge);clip-path:polygon(evenodd, var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut), var(--cut) 0, calc(var(--cut) + .414px) 1px, calc(100% - var(--cut) - .414px) 1px, calc(100% - 1px) calc(var(--cut) + .414px), calc(100% - 1px) calc(100% - var(--cut) - .414px), calc(100% - var(--cut) - .414px) calc(100% - 1px), calc(var(--cut) + .414px) calc(100% - 1px), 1px calc(100% - var(--cut) - .414px), 1px calc(var(--cut) + .414px), calc(var(--cut) + .414px) 1px)}.pf-stack{grid-template-columns:minmax(0,1fr) clamp(330px,40cqi,520px);gap:28px;display:grid}.pf-stack-list{flex-direction:column;gap:10px;min-width:0;display:flex}.pf-stack-head{flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding-bottom:2px;display:flex}.pf-stack-row{--edge:color-mix(in srgb, var(--layer) 30%, var(--line));--fill:#82beff0b;outline:none;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:14px 16px;display:grid}.pf-stack-row:focus-visible,.pf-stack-row.is-active{--edge:var(--layer);--fill:color-mix(in srgb, var(--layer) 11%, transparent)}@media (hover:hover){.pf-stack-row:hover{--edge:var(--layer);--fill:color-mix(in srgb, var(--layer) 11%, transparent)}}.pf-stack-layer{font-family:var(--mono);flex-direction:column;gap:5px;font-size:11px;display:flex}.pf-stack-layer strong{letter-spacing:.04em;color:var(--layer);align-items:center;gap:8px;font-weight:600;display:flex}.pf-stack-layer strong:before{content:"";background:var(--layer);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);flex:none;width:8px;height:8px}.pf-stack-layer span{color:var(--text-dim)}.pf-skills{flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:6px;display:flex}.pf-skills li{--cut:6px;--edge:color-mix(in srgb, var(--layer) 30%, var(--line));--fill:#0a101c;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb, var(--layer) 18%, var(--text));padding:6px 10px;font-size:13px;font-weight:600;line-height:1;transition:background-color .3s,color .3s}.pf-stack-row:focus-visible .pf-skills li,.pf-stack-row.is-active .pf-skills li{--edge:color-mix(in srgb, var(--layer) 55%, transparent)}@media (hover:hover){.pf-stack-row:hover .pf-skills li{--edge:color-mix(in srgb, var(--layer) 55%, transparent)}.pf-stack-row .pf-skills li:hover{--edge:var(--layer);--fill:color-mix(in srgb, var(--layer) 16%, #0a101c);color:var(--text)}}.pf-figure{--cut:22px;--fill:#04070eeb;--request:var(--accent);--response:#e9f0ff;min-height:420px;margin:0;overflow:hidden;container:figure/inline-size}.pf-figure-mount{touch-action:pan-y;position:absolute;inset:0}.pf-figure-note{z-index:1;font-family:var(--mono);letter-spacing:.08em;color:var(--muted);pointer-events:none;margin:0;font-size:10.5px;position:absolute}.pf-figure-note--title{color:var(--text-dim);flex-direction:column;gap:3px;display:flex;top:16px;left:24px;right:24px}.pf-figure-note--title strong{color:var(--accent-text);font-size:11px;font-weight:600}.pf-figure-labels{pointer-events:none;position:absolute;inset:0}.pf-figure-label{--cut:7px;--edge:color-mix(in srgb, var(--layer) 50%, transparent);--fill:#050912f0;width:max-content;max-width:var(--label-width,196px);font-family:var(--mono);opacity:0;margin:0;padding:7px 11px 8px;font-size:11px;line-height:1.35;transition:opacity .35s,background-color .3s;position:absolute;top:0;left:0}.pf-figure.is-ready:not(.is-assembling) .pf-figure-label{opacity:1}.pf-figure.is-ready:not(.is-assembling) .pf-figure-label.is-dimmed{opacity:.3}.pf-figure-label strong{letter-spacing:.06em;color:var(--layer);font-weight:600;display:block}.pf-figure-label span{font-family:var(--display);color:var(--text);text-wrap:balance;margin-top:3px;font-size:12.5px;font-weight:500;line-height:1.3;display:block}.pf-figure-label i{white-space:nowrap;font-style:normal}.pf-figure-label em{color:var(--text-dim);font-style:normal}.pf-figure-label.is-focused{--edge:var(--layer);--fill:color-mix(in srgb, var(--layer) 14%, #050912)}.pf-figure-label--api{padding:5px 9px}.pf-figure-foot{pointer-events:none;justify-content:space-between;align-items:flex-end;gap:12px;display:flex;position:absolute;bottom:16px;left:24px;right:24px}.pf-figure-note--hint{flex:none;position:static}.pf-figure-steps{display:grid}.pf-figure-steps li{color:var(--text);visibility:hidden;grid-area:1/1;font-size:13px;font-weight:500;line-height:1.25}.pf-figure-steps li.is-current{visibility:visible;animation:.4s both rise}.pf-figure-steps small,.pf-figure-key{font-family:var(--mono);letter-spacing:.14em;color:var(--request);align-items:center;gap:7px;font-size:10.5px;font-weight:600;display:flex}.pf-figure-steps small{margin-bottom:4px}.pf-figure-steps [data-figure-step=response] small,.pf-figure-key--response{color:var(--response)}.pf-figure-steps small:before,.pf-figure-key:before{content:"";clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:currentColor;flex:none;width:7px;height:7px}.pf-figure-legend{gap:16px;display:none}.pf-corner{border:0 solid var(--accent);width:12px;height:12px;position:absolute}.pf-corner--tl{border-top-width:2px;border-left-width:2px;top:8px;left:8px}.pf-corner--tr{border-top-width:2px;border-right-width:2px;top:8px;right:8px}.pf-corner--bl{border-bottom-width:2px;border-left-width:2px;bottom:8px;left:8px}.pf-corner--br{border-bottom-width:2px;border-right-width:2px;bottom:8px;right:8px}html:not(.js) .pf-figure-labels,.pf-figure.is-fallback .pf-figure-labels{flex-direction:column;justify-content:center;gap:10px;display:flex;inset:64px 24px 24px}html:not(.js) .pf-figure-label,.pf-figure.is-fallback .pf-figure-label{opacity:1;max-width:none;position:relative}html:not(.js) .pf-figure-foot,.pf-figure.is-fallback .pf-figure-foot{display:none}@media (prefers-reduced-motion:reduce){.pf-figure-legend{display:flex}.pf-figure-steps{display:none}}@container figure (width<=420px){.pf-figure-label{padding:6px 9px 7px}.pf-figure-label span{font-size:12px}.pf-figure-label--api{padding:4px 8px}.pf-figure-steps li{font-size:12.5px}}@media (width>=1024px) and (height<=820px){.pf-stack-list{gap:8px}.pf-stack-row{padding-block:11px}}@container sheet (width<=1000px){.pf-stack-row{grid-template-columns:minmax(0,1fr);gap:10px}.pf-stack-layer{flex-flow:wrap;align-items:baseline;gap:4px 12px}}@container sheet (width<=700px){.pf-stack{grid-template-columns:minmax(0,1fr);gap:24px}.pf-stack-row{grid-template-columns:140px minmax(0,1fr);gap:16px}.pf-stack-layer{flex-direction:column;gap:5px}.pf-figure{height:clamp(450px,140cqi,560px);min-height:0}}@container sheet (width<=520px){.pf-stack-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px 14px}.pf-stack-layer{flex-flow:wrap;align-items:baseline;gap:4px 12px}.pf-figure-note--title,.pf-figure-foot{left:18px;right:18px}.pf-figure-note--hint{display:none}}