.port-flow{--pf-dark:#151514;--pf-dark-2:#1c1c1a;--pf-plate:#f4f3ef;--pf-mute:#92918a;--pf-line:#363630;--pf-live:#ff7a2f;--pf-paper:#f0eee6;--pf-ink:#131312;--pf-code:Fragment,monospace;--pf-ease:cubic-bezier(.16,1,.3,1);position:relative;height:350vh;background:var(--pf-dark);color:var(--pf-plate)}
.port-flow-pin{position:sticky;top:0;height:100svh;min-height:720px;padding:105px var(--gutter,4.4vw) 44px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;overflow:hidden}
.port-flow-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;position:relative;z-index:2}.port-flow-kicker{display:block;font-family:var(--pf-code);font-size:11px;letter-spacing:.03em;color:var(--pf-mute);margin-bottom:19px}.port-flow-head h2{font-family:Archivo,Arial,sans-serif;font-size:clamp(38px,4.8vw,70px);line-height:.97;font-weight:800;letter-spacing:-.035em;font-variation-settings:"wdth" 108}.port-flow-head p{font-size:18px;line-height:1.5;color:#b3b2ab;margin-top:15px}.port-flow-pick{display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0;margin-bottom:4px}.port-flow-pick button{background:none;border:1px solid var(--pf-line);color:#d9d8d1;border-radius:999px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;font-family:Archivo,Arial,sans-serif;font-size:13px;font-weight:550;transition:background .2s,color .2s,border-color .2s}.port-flow-pick button:hover{border-color:#6b6a64}.port-flow-pick button[aria-pressed=true]{background:var(--pf-plate);color:var(--pf-ink);border-color:var(--pf-plate)}.port-flow-pick i{border:1.5px solid currentColor;border-radius:50%;width:9px;height:9px;display:block}
.port-flow-stage{display:flex;flex-direction:column;justify-content:center;min-height:0}.port-flow-graphic{width:100%;min-height:0;flex:1;display:flex;align-items:center;justify-content:center}.port-flow-schematic{width:100%;max-height:100%;overflow:visible;display:block;font-family:var(--pf-code)}.port-flow-backwire,.port-flow-livewire{fill:none;stroke:var(--pf-line);stroke-width:3;stroke-linecap:round}.port-flow-livewire{stroke:var(--pf-live);stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px #ff7a2f55)}.port-flow-upperwire{fill:none;stroke:var(--pf-live);stroke-width:2;stroke-dasharray:5 6;opacity:.16;transition:opacity .4s}.port-flow-station{opacity:.42;transition:opacity .45s}.port-flow-station[data-visited=true]{opacity:.8}.port-flow-station[data-active=true]{opacity:1}.port-flow-box{fill:var(--pf-dark-2);stroke:#44443e;stroke-width:1.5;transition:stroke .3s,fill .4s}.port-flow-station[data-active=true] .port-flow-box{stroke:var(--pf-live);fill:#2b211b}.port-flow-symbol{fill:none;stroke:#c1c0b8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.port-flow-tag{font-family:var(--pf-code);font-size:14px;font-weight:400;fill:var(--pf-mute)}.port-flow-station[data-active=true] .port-flow-tag{fill:var(--pf-plate)}.port-flow-bus{fill:#262623;stroke:#4a4a45;stroke-width:1.5}.port-flow-branch{fill:none;stroke:#45453f;stroke-width:1.5}.port-flow-tool{fill:#55554f;transition:fill .4s}.port-flow-station[data-active=true] .port-flow-tool{fill:var(--pf-live)}.port-flow-ring{fill:var(--pf-dark-2);stroke:#5d5b52;stroke-width:2;stroke-dasharray:4 5;transition:stroke .4s,fill .4s}.port-flow-pin-dot{fill:#88867d}.port-flow-station[data-active=true] .port-flow-ring{stroke:var(--pf-live);stroke-width:3;stroke-dasharray:none;fill:#32231a}.port-flow-station[data-active=true] .port-flow-pin-dot{fill:#ffbf98}.port-flow-source-bars rect{fill:#45453e;transform-box:fill-box;transform-origin:bottom;transition:fill .45s}.port-flow-station[data-active=true] .port-flow-source-bars rect{fill:#cb7640;animation:port-flow-bar 1.8s var(--pf-ease) infinite alternate}.port-flow-source-bars rect:nth-child(2){animation-delay:.15s}.port-flow-source-bars rect:nth-child(3){animation-delay:.3s}.port-flow-source-bars rect:nth-child(4){animation-delay:.45s}@keyframes port-flow-bar{0%{transform:scaleY(.68)}100%{transform:scaleY(1)}}.port-flow-method{opacity:.5;transition:opacity .35s}.port-flow-method rect{fill:var(--pf-dark-2);stroke:#4a4a45;stroke-width:1.5}.port-flow-method text{font-family:var(--pf-code);fill:#d9d8d1;font-size:13px}.port-flow[data-step="2"] .port-flow-upperwire,.port-flow[data-step="3"] .port-flow-upperwire,.port-flow[data-step="4"] .port-flow-upperwire{opacity:1}.port-flow[data-step="2"] .port-flow-method,.port-flow[data-step="3"] .port-flow-method,.port-flow[data-step="4"] .port-flow-method{opacity:1}.port-flow-pulse{fill:#ffd9bf}.port-flow-pulse-halo{fill:var(--pf-live);opacity:.65}
.port-flow-navigation{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-top:0;position:relative;z-index:2}.port-flow-navigation button{font-family:var(--pf-code);font-size:12px;line-height:1.45;letter-spacing:-.01em;border:0;border-top:1px solid #3a3a34;padding:15px 0 0;background:none;text-align:left;color:var(--pf-mute);transition:color .2s,border-color .2s;white-space:nowrap}.port-flow-navigation button span{display:inline-block;font-size:10px;margin-right:9px;opacity:.55}.port-flow-navigation button[aria-selected=true]{color:var(--pf-plate);border-color:var(--pf-live)}.port-flow-navigation button:hover{color:var(--pf-plate);border-color:#9a988e}
.port-flow-foot{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:end;margin-top:12px}.port-flow-details{position:relative;list-style:none;min-height:184px;padding:0;margin:0}.port-flow-details li{position:absolute;bottom:0;inset-inline:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s,transform .55s var(--pf-ease),visibility .3s}.port-flow-details li[data-active=true]{opacity:1;visibility:visible;transform:none}.port-flow-command{font-family:var(--pf-code);display:block;color:var(--pf-mute);font-size:11px;letter-spacing:.04em;margin-bottom:18px}.port-flow-details h3{font-family:Archivo,Arial,sans-serif;font-variation-settings:"wdth" 108;font-size:clamp(26px,2.6vw,40px);font-weight:750;line-height:1.05;letter-spacing:-.025em;max-width:800px}.port-flow-details p{color:#b3b2ab;max-width:36em;margin-top:14px;font-size:17px;line-height:1.55}
.port-flow-receipt{background:var(--pf-paper);color:var(--pf-ink);padding:18px 20px 27px;position:relative;transform:rotate(-1.2deg);box-shadow:0 30px 60px -30px #000000e6;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;font-family:var(--pf-code)}.port-flow-receipt-head{border-bottom:1px solid #131312;color:#78766d;display:flex;justify-content:space-between;gap:12px;padding-bottom:11px;font-size:11px;line-height:1.5;margin:0}.port-flow-receipt dl{margin:0}.port-flow-receipt dl>div{border-bottom:1px dashed #13131233;display:grid;grid-template-columns:90px minmax(0,1fr);gap:9px;font-size:11px;line-height:1.5;max-height:0;padding:0;opacity:0;overflow:hidden;transition:max-height .5s var(--pf-ease),padding .4s,opacity .4s}.port-flow-receipt dl>div[data-visible=true]{max-height:76px;padding:7px 0;opacity:1}.port-flow-receipt dt{color:#78766d}.port-flow-receipt dd{margin:0;word-break:break-word}.port-flow-receipt-note{font-size:10px;line-height:1.4;color:#77746b;margin:10px 0 0}.port-flow-stamp{border:2px solid #c8672e;color:#c8672e;border-radius:3px;position:absolute;right:19px;bottom:35px;font-size:11px;padding:4px 7px;opacity:0;transform:rotate(-9deg) scale(1.5);transition:opacity .25s,transform .45s var(--pf-ease)}.port-flow[data-step="5"] .port-flow-stamp{opacity:1;transform:rotate(-9deg) scale(1)}.port-flow[data-step="5"] .port-flow-receipt-note{margin-bottom:25px}.port-flow-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#30302b;pointer-events:none}.port-flow-progress i{display:block;width:100%;height:100%;background:var(--pf-live);transform:scaleX(0);transform-origin:left;transition:transform .1s linear}
@media (min-width:900px) and (max-height:860px){.port-flow-pin{min-height:610px;padding-top:94px;padding-bottom:30px;grid-template:"head head" auto "stage receipt" minmax(0,1fr) "details receipt" auto/minmax(0,1fr) 340px;gap:17px 40px}.port-flow-head{grid-area:head}.port-flow-head h2{font-size:clamp(36px,4vw,56px)}.port-flow-head p{margin-top:11px;font-size:16px}.port-flow-kicker{margin-bottom:13px}.port-flow-stage{grid-area:stage}.port-flow-foot{display:contents}.port-flow-details{grid-area:details;min-height:156px}.port-flow-details h3{font-size:clamp(24px,2.2vw,32px)}.port-flow-details p{font-size:15px;margin-top:11px}.port-flow-command{margin-bottom:14px}.port-flow-receipt{grid-area:receipt;align-self:end}.port-flow-navigation{gap:12px}.port-flow-navigation button{font-size:10px;padding-top:11px}.port-flow-navigation button span{display:none}.port-flow-tag{display:none}}
@media (max-width:899px){.port-flow{height:auto}.port-flow-pin{position:relative;height:auto;min-height:0;display:block;padding:90px var(--gutter,24px) 70px;overflow:hidden}.port-flow-head{display:block}.port-flow-head h2{font-size:clamp(35px,6vw,54px)}.port-flow-head p{font-size:16px;margin-top:17px}.port-flow-kicker{font-size:10px;margin-bottom:18px}.port-flow-pick{margin-top:23px}.port-flow-pick button{font-size:12px;padding:8px 10px}.port-flow-stage{margin-top:34px}.port-flow-graphic{height:190px;overflow:hidden}.port-flow-schematic{width:100%;min-width:0;max-height:180px}.port-flow-tag{font-size:17px}.port-flow-navigation{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 15px;margin-top:15px}.port-flow-navigation button{font-size:11px;white-space:normal;min-height:46px;padding-top:11px}.port-flow-navigation button span{font-size:9px;display:block;margin:0 0 3px}.port-flow-foot{display:block;margin-top:31px}.port-flow-details{min-height:175px}.port-flow-details h3{font-size:29px}.port-flow-details p{font-size:15px;line-height:1.6}.port-flow-command{font-size:10px;margin-bottom:15px}.port-flow-receipt{max-width:420px;margin:29px auto 0}.port-flow-receipt-head{font-size:10px}.port-flow-receipt dl>div{font-size:10px}.port-flow-stamp{font-size:10px}.port-flow-progress{position:relative;margin-top:35px}}
@media (prefers-reduced-motion:reduce){.port-flow{height:auto}.port-flow-pin{position:relative;height:auto;min-height:0;gap:40px}.port-flow-graphic{min-height:230px}.port-flow-source-bars rect{animation:none!important}.port-flow *{transition:none!important}.port-flow-livewire{filter:none}}