.pth-path{position:relative;display:grid;gap:30px;margin:22px 0 0;padding:0;list-style:none}.pth-path:before{content:"";position:absolute;top:18px;bottom:18px;left:17px;width:2px;border-radius:2px;background:linear-gradient(to bottom,#35a8ffa6,#3858e98c 50%,#f5c84ccc)}.pth-step:after{content:"";position:absolute;top:12px;left:12px;z-index:2;width:12px;height:12px;border-radius:3px;background:var(--gold);box-shadow:0 0 14px #f5c84cb3;opacity:0;pointer-events:none}.wpl-js .pth-step.is-in:after{animation:pth-run .7s ease-in .15s 1 both}@keyframes pth-run{0%{transform:translateY(-46px);opacity:0}25%{opacity:1}85%{opacity:1}to{transform:none;opacity:0}}.pth-step{position:relative;display:grid;gap:12px;min-width:0;padding-left:54px}.pth-node{position:absolute;top:0;left:0;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:2px solid var(--blue);color:#fff;background:#0b1222;font-weight:800;font-size:calc(15px * var(--text-scale, 1));box-shadow:0 0 0 5px #05070d,0 0 18px #35a8ff66}.pth-step[data-last=true] .pth-node{border-color:var(--gold);box-shadow:0 0 0 5px #05070d,0 0 18px #f5c84c73}.pth-text{display:grid;gap:4px;min-width:0;padding-top:5px}.pth-text>b{font-size:calc(19px * var(--text-scale, 1));font-weight:800;letter-spacing:-.01em}.pth-text>span{color:var(--ink-2);font-size:calc(14.5px * var(--text-scale, 1));line-height:1.45}.pth-why summary{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--blue);font-size:calc(13px * var(--text-scale, 1));font-weight:650;cursor:pointer;list-style:none}.pth-why summary::-webkit-details-marker,.pth-limits summary::-webkit-details-marker{display:none}.pth-why[open] summary svg,.pth-limits[open]>summary svg,.pth-limits li details[open] summary svg{transform:rotate(180deg)}.pth-why p{max-width:46ch;margin:0 0 6px;color:var(--ink-2);font-size:calc(13.5px * var(--text-scale, 1));line-height:1.5}.pth-why+.pth-why{margin-top:-10px}.pth-art{display:flex;align-items:center;min-width:0;min-height:64px}.pth-art code,.pth-limits code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:calc(12px * var(--text-scale, 1));overflow-wrap:anywhere}.pth-art i{font-style:normal}.wpl .pth-art code{padding:0;background:none}.pth-end{margin:22px 0 0 54px;color:var(--ink-2);font-size:calc(13px * var(--text-scale, 1))}.pth-press{display:grid;gap:10px;justify-items:start}.pth-press-btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;color:#fff;background:var(--wp);font-weight:750;font-size:calc(14px * var(--text-scale, 1));box-shadow:0 8px 24px #3858e959}.wpl-js .pth-step.is-in .pth-press-btn{animation:pth-press 1.6s ease-in-out .8s 1 both}.pth-press-ring{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:999px;border:2px solid rgb(120 150 255 / .8);opacity:0}.wpl-js .pth-step.is-in .pth-press-ring{animation:pth-ring 1.6s ease-out .8s 1 both}@keyframes pth-press{0%,18%,to{transform:none}9%{transform:scale(.95)}}@keyframes pth-ring{0%,9%{opacity:0;transform:none}12%{opacity:.9}45%,to{opacity:0;transform:scale(1.18,1.5)}}.pth-chips{display:flex;flex-wrap:wrap;gap:6px}.pth-chips i{padding:3px 9px;border-radius:999px;color:var(--ink-2);background:#ffffff0f;font-size:calc(12px * var(--text-scale, 1))}.pth-link{display:grid;grid-template-columns:auto minmax(36px,90px) auto;align-items:center;gap:8px}.pth-link-node{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;background:#ffffff0f;font-weight:700;font-size:calc(13px * var(--text-scale, 1))}.pth-link-line{height:2px;background:#ffffff1f}.pth-link-line i{display:block;height:100%;background:var(--blue);box-shadow:0 0 10px #35a8ffb3;transform-origin:left}.wpl-js .pth-step.is-in .pth-link-line i{animation:pth-grow 1.8s ease-in-out .8s 1 both}.pth-link-ok{color:var(--green)}.wpl-js .pth-step.is-in .pth-link-ok{animation:pth-after 1.8s ease-in-out .8s 1 both}@keyframes pth-grow{0%,8%{transform:scaleX(0)}45%,to{transform:scaleX(1)}}@keyframes pth-after{0%,45%{opacity:0}55%,to{opacity:1}}.pth-fields{display:grid;gap:8px;width:min(100%,290px)}.pth-field{display:grid;gap:3px}.pth-field>code{color:var(--ink-2)}.pth-field-box{position:relative;display:flex;align-items:center;height:36px;padding:0 34px 0 12px;border-radius:10px;border:1px solid var(--line);background:#00000059;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:calc(13px * var(--text-scale, 1))}.pth-field-box svg{position:absolute;right:11px;color:var(--gold)}.pth-field-typed,.pth-field-dots{position:absolute;left:12px;white-space:nowrap}.pth-field-typed{opacity:0;overflow:hidden}.wpl-js .pth-step.is-in .pth-field-typed{animation:pth-typed 3.2s steps(14,end) calc(.8s + var(--pth-delay, 0s)) 1 both}.pth-field-dots{color:var(--ink-2);letter-spacing:.12em}.wpl-js .pth-step.is-in .pth-field-dots{animation:pth-dots 3.2s linear calc(.8s + var(--pth-delay, 0s)) 1 both}@keyframes pth-typed{0%{max-width:0;opacity:1}30%{max-width:16em;opacity:1}38%{max-width:16em;opacity:1}42%,to{max-width:16em;opacity:0}}@keyframes pth-dots{0%,38%{opacity:0}44%,to{opacity:1}}.pth-term{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:#0006}.pth-term-prompt{color:var(--green);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.pth-term-typed{display:inline-block;overflow:hidden;white-space:nowrap}.wpl-js .pth-step.is-in .pth-term-typed{animation:pth-type 2.6s steps(26,end) .8s 1 both}.pth-term-ok{flex:none;color:var(--green)}.wpl-js .pth-step.is-in .pth-term-ok{animation:pth-after 2.6s ease-in-out .8s 1 both}@keyframes pth-type{0%{max-width:0}40%,to{max-width:22em}}.pth-file{display:grid;gap:8px;width:min(100%,290px)}.pth-file>code{color:var(--ink-2)}.pth-file-lines{display:grid;gap:6px;padding:12px;border-radius:10px;border:1px solid var(--line);background:#00000059}.pth-file-lines i{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--blue),rgb(53 168 255 / .35));transform-origin:left}.wpl-js .pth-step.is-in .pth-file-lines i{animation:pth-grow 1.8s ease-in-out calc(.8s + var(--pth-delay, 0s)) 1 both}.pth-build{display:grid;gap:10px;width:min(100%,290px)}.pth-build-bar{height:8px;border-radius:4px;background:#ffffff1a;overflow:hidden}.pth-build-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--wp),var(--blue));transform-origin:left}.wpl-js .pth-step.is-in .pth-build-bar i{animation:pth-fill 2.4s ease-in-out .8s 1 both}.pth-build-made{display:inline-flex;align-items:center;gap:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:calc(13px * var(--text-scale, 1));overflow-wrap:anywhere}.wpl-js .pth-step.is-in .pth-build-made{animation:pth-made 2.4s ease-in-out .8s 1 both}.pth-build-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px #3ddc97cc}@keyframes pth-fill{0%{transform:scaleX(0)}60%,to{transform:scaleX(1)}}@keyframes pth-made{0%,58%{opacity:.25}68%,to{opacity:1}}.pth-check{display:grid;gap:12px;width:min(100%,300px)}.pth-page{display:grid;gap:7px;padding:12px;border-radius:12px;background:linear-gradient(160deg,#ffffff14,#ffffff08)}.pth-page-line{height:6px;width:100%;border-radius:3px;background:#ffffff29}.pth-page-line.is-title{width:62%;height:9px;background:#fff6}.pth-page-line.is-short{width:78%;filter:blur(2px)}.pth-page-key{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;color:#1a1204;background:var(--gold);font-weight:800;font-size:calc(12px * var(--text-scale, 1));box-shadow:0 0 16px #f5c84c73}.pth-compare{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px}.pth-compare>span:not(.pth-compare-ok){display:grid;gap:1px;min-width:0}.pth-compare small{color:var(--ink-2);font-size:calc(11px * var(--text-scale, 1))}.pth-compare-ok{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#04130c;background:var(--green)}.wpl-js .pth-step.is-in .pth-compare-ok{animation:pth-ok 1.8s ease-in-out 1.2s 1 both}@keyframes pth-ok{0%,35%{transform:scale(.4);opacity:0}45%{transform:scale(1.15);opacity:1}52%,to{transform:none;opacity:1}}.pth-limits{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.pth-limits>summary{display:flex;align-items:center;gap:10px;min-height:52px;font-weight:750;cursor:pointer;list-style:none}.pth-limits>summary i{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;color:var(--ink-2);background:#ffffff14;font-style:normal;font-size:calc(12px * var(--text-scale, 1))}.pth-limits>summary svg{margin-left:auto;color:var(--ink-2)}.pth-limits ul{display:grid;margin:0;padding:0 0 10px;list-style:none}.pth-limits li summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 10px;min-height:44px;padding:6px 0;cursor:pointer;list-style:none;font-size:calc(14px * var(--text-scale, 1));line-height:1.4}.pth-limits li summary span{grid-column:1;color:var(--ink-2)}.pth-limits li summary svg{grid-column:2;grid-row:1 / span 2;color:var(--ink-2)}.pth-limits li p{max-width:70ch;margin:0 0 10px;color:var(--ink-2);font-size:calc(13.5px * var(--text-scale, 1));line-height:1.5}@media (min-width: 900px){.pth-path{gap:40px;margin-top:30px}.pth-path:before{left:calc(50% - 12px);width:24px;margin-left:0;border-radius:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='180' viewBox='0 0 24 180'%3E%3Cpath d='M12 0 C 24 30 24 60 12 90 S 0 150 12 180' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") top center / 24px 180px repeat-y;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='180' viewBox='0 0 24 180'%3E%3Cpath d='M12 0 C 24 30 24 60 12 90 S 0 150 12 180' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") top center / 24px 180px repeat-y}.pth-step:after{top:calc(50% - 6px);left:calc(50% - 6px)}.pth-step:before{content:"";position:absolute;top:50%;left:50%;z-index:-1;width:520px;height:300px;margin:-150px 0 0 -260px;background:radial-gradient(closest-side,rgb(53 168 255 / .1),transparent);pointer-events:none}.pth-step[data-last=true]:before{background:radial-gradient(closest-side,rgb(245 200 76 / .1),transparent)}.pth-step{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:0 104px;padding-left:0}.pth-node{top:50%;left:50%;margin:-18px 0 0 -18px}.pth-text{justify-items:end;padding-top:0;text-align:right}.pth-art{justify-content:flex-start}.pth-step:nth-child(2n) .pth-text{order:2;justify-items:start;text-align:left}.pth-step:nth-child(2n) .pth-art{order:1;justify-content:flex-end}.pth-why p{margin-left:auto}.pth-step:nth-child(2n) .pth-why p{margin-left:0}.pth-end{margin-left:0;text-align:center}}@media (prefers-reduced-motion: reduce){.pth *,.pth *:before,.pth *:after{animation:none!important}}.pth-code{display:none;width:fit-content;max-width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:calc(12px * var(--text-scale, 1));color:var(--ink-2);overflow-wrap:anywhere}@media (max-width: 719px),(max-height: 500px) and (max-width: 932px){.pth.is-compact .pth-art{display:none}.pth.is-compact .pth-code{display:block}.pth.is-compact .pth-path{gap:18px}}@media (min-width: 640px) and (max-width: 899px) and (max-height: 500px){.pth:not(.is-rail):not(.is-compact) .pth-step:has(>.pth-art){grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:20px}}.pth-body{grid-column:1 / -1;min-width:0;text-align:left}@media (min-width: 900px){.pth.is-rail .pth-path{gap:30px}.pth.is-rail .pth-path:before{left:17px;width:2px;border-radius:2px;-webkit-mask:none;mask:none}.pth.is-rail .pth-step:after{top:12px;left:12px}.pth.is-rail .pth-step:before{content:none}.pth.is-rail .pth-step{grid-template-columns:minmax(0,1fr);align-items:start;gap:12px;padding-left:54px}.pth.is-rail .pth-node{top:0;left:0;margin:0}.pth.is-rail .pth-step .pth-text{order:0;justify-items:start;padding-top:5px;text-align:left}.pth.is-rail .pth-step .pth-art{order:0;justify-content:flex-start}.pth.is-rail .pth-step .pth-why p{margin-left:0}.pth.is-rail .pth-end{margin-left:54px;text-align:left}}
