.pf-root{--pf-amber:#c2862d;--pf-amber-soft:#fff1d3;--pf-line:#d6cdb4;--pf-ink:#3f3f3f;width:min(960px,100vw - 3.5rem);color:var(--pf-ink);background:#fffdf8;border:1px solid #e6dfcc;border-radius:18px;margin:2rem 0;padding:1rem;font-size:14px;line-height:1.5}.pf-root:focus{outline:none}.pf-tabs{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.75rem;display:flex}.pf-tab{border:1px solid var(--pf-line);font:inherit;cursor:pointer;color:#6b6b6b;background:0 0;border-radius:999px;padding:.3rem .8rem;font-weight:700}.pf-tab[aria-selected=true]{color:#fff;background:#262626;border-color:#262626}.pf-hint{color:#8a8a8a;margin-left:auto;font-size:12px}.pf-stage{overflow-x:auto}.pf-stage svg{width:100%;min-width:640px;height:auto;font-family:inherit;display:block}.pf-zone{fill:#fbf6e8;stroke:#e6dfcc;stroke-width:1.5px}.pf-zone-label{fill:#8a8266;letter-spacing:.06em;text-transform:uppercase;font-size:12px;font-weight:700}.pf-edge{fill:none;stroke:#b7ae96;stroke-width:2px;transition:stroke .3s}.pf-root.pf-reply .pf-edge{marker-end:none;marker-start:url(#pf-arrow)}.pf-edge.pf-done{stroke:#e3bd78}.pf-edge.pf-lit{stroke:var(--pf-amber);stroke-width:3px}.pf-edge-label{fill:#8a8266;font-size:11px}.pf-node{cursor:pointer;outline:none}.pf-node rect,.pf-node ellipse{fill:#fff;stroke:var(--pf-line);stroke-width:1.5px;transition:fill .3s,stroke .3s}.pf-node:hover rect,.pf-node:hover ellipse{stroke:#a99c78}.pf-node:focus-visible rect,.pf-node:focus-visible ellipse{stroke:#262626;stroke-width:2.5px}.pf-node.pf-visited rect,.pf-node.pf-visited ellipse{fill:#fffaf0;stroke:#e3bd78}.pf-node.pf-active rect,.pf-node.pf-active ellipse{fill:var(--pf-amber-soft);stroke:var(--pf-amber);stroke-width:2.5px}.pf-node-title{fill:#1f1f1f;pointer-events:none;font-size:15px;font-weight:700}.pf-node-sub{fill:#7a7a7a;pointer-events:none;font-size:11.5px}.pf-badge rect{fill:#262626}.pf-badge text{fill:#fff;font-size:12px;font-weight:700}.pf-dot{fill:#2f6fb3;transition:fill .3s}.pf-ring{fill:none;stroke:#2f6fb3;stroke-opacity:.35;stroke-width:2px;transition:stroke .3s}.pf-root.pf-enc .pf-dot{fill:var(--pf-amber)}.pf-root.pf-enc .pf-ring{stroke:var(--pf-amber);stroke-dasharray:4 3}@media (prefers-reduced-motion:no-preference){.pf-node.pf-active rect,.pf-node.pf-active ellipse{animation:1.6s ease-in-out infinite pf-pulse}.pf-ring{transform-box:fill-box;transform-origin:50%;animation:1.6s ease-in-out infinite pf-ring}@keyframes pf-pulse{50%{stroke-width:4px}}@keyframes pf-ring{50%{transform:scale(1.25)}}}.pf-panels{gap:1rem;margin-top:.75rem;display:grid}.pf-step,.pf-inspector{background:#fff;border:1px solid #e6dfcc;border-radius:12px;padding:.9rem 1rem}.pf-step-count{letter-spacing:.06em;text-transform:uppercase;color:var(--pf-amber);font-size:11px;font-weight:700}.pf-step-title{letter-spacing:-.01em;color:#1a1a1a;margin:.2rem 0 .4rem;font-size:18px;font-weight:800}.pf-step{padding:1.1rem 1.4rem}.pf-step-title{font-size:20px}.pf-step-text{margin:0;font-size:16px;line-height:1.7}.pf-step-text p{margin:0 0 .85em}.pf-step-text ul,.pf-step-text ol{margin:0 0 .85em;padding-left:1.4rem}.pf-step-text li{margin:.25em 0}.pf-step-text>:last-child{margin-bottom:0}.pf-step-text code,.pf-fields dd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}.pf-step-text code{background:#0000000f;border-radius:4px;padding:.1rem .35rem}.pf-inspector-head{letter-spacing:.06em;text-transform:uppercase;color:#8a8266;margin-bottom:.5rem;font-size:11px;font-weight:700}.pf-bar{flex-wrap:wrap;gap:4px;display:flex}.pf-seg{white-space:nowrap;border:1px solid #0000001f;border-radius:6px;padding:.35rem .55rem;font-size:12px;font-weight:700}.pf-seg-enc{white-space:normal;text-align:center;flex:12rem}.pf-seg-ip{color:#1e40af;background:#dbeafe}.pf-seg-oip{color:#1e3a8a;background:#bfdbfe}.pf-seg-tcp{color:#166534;background:#dcfce7}.pf-seg-data{color:#374151;background:#f3f4f6}.pf-seg-udp{color:#5b21b6;background:#ede9fe}.pf-seg-nonce{color:#9d174d;background:#fce7f3}.pf-seg-tag{color:#991b1b;background:#fee2e2}.pf-seg-enc{color:#7a4b00;background:repeating-linear-gradient(135deg,#fde9b4 0 6px,#fbdc94 6px 12px)}.pf-fresh{box-shadow:0 0 0 2px var(--pf-amber)}.pf-fields{grid-template-columns:max-content 1fr;gap:.2rem .9rem;margin:.8rem 0 0;display:grid}.pf-fields dt{color:#8a8a8a;font-size:12px}.pf-fields dd{color:#1f1f1f;word-break:break-word;margin:0}.pf-legend{color:#7a6a3a;border-top:1px dashed #e6dfcc;margin-top:.7rem;padding-top:.6rem;font-size:12.5px;font-style:italic}.pf-legend[hidden]{display:none}.pf-code{background:#fff;border:1px solid #e6dfcc;border-radius:12px;margin-top:1rem;overflow:hidden}.pf-code-head{background:#fbf6e8;border-bottom:1px solid #efe9d8;align-items:baseline;gap:.75rem;padding:.5rem 1rem;display:flex}.pf-code-label{letter-spacing:.06em;text-transform:uppercase;color:#8a8266;font-size:11px;font-weight:700}.pf-code-file{color:#6b6b6b;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.pf-root .pf-code pre{border:0;border-radius:0;margin:0;padding:.75rem 0;font-size:13px;line-height:1.65;overflow-x:auto;background:#fff!important}.pf-root .pf-code pre code{font-size:inherit;background:0 0;padding:0}.pf-root .pf-code .line{box-sizing:border-box;border-left:3px solid #0000;min-width:100%;padding:0 1rem;display:inline-block}.pf-root .pf-code .line.pf-hl{background:var(--pf-amber-soft);border-left-color:var(--pf-amber)}.pf-root .pf-code .line:not(.pf-hl){opacity:.55}.pf-controls{justify-content:space-between;align-items:center;gap:.75rem;margin-top:.9rem;display:flex}.pf-btn{font:inherit;cursor:pointer;color:#262626;background:#fff;border:1px solid #262626;border-radius:999px;padding:.45rem 1rem;font-weight:700}.pf-btn:hover:not(:disabled){background:#f4f0e4}.pf-btn:disabled{opacity:.35;cursor:default}.pf-btn-primary{color:#fff;background:#262626;min-width:9.5rem}.pf-btn-primary:hover:not(:disabled){background:#000}.pf-dots{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.pf-dotbtn{cursor:pointer;background:0 0;border:1.5px solid #b7ae96;border-radius:50%;width:12px;height:12px;padding:0}.pf-dotbtn.pf-past{background:#e3bd78;border-color:#e3bd78}.pf-dotbtn.pf-on{background:var(--pf-amber);border-color:var(--pf-amber);transform:scale(1.3)}.pf-root button:focus-visible{outline-offset:2px;outline:2px solid #262626}
