.ptx{--p:0;--gap:18px;--node-h:150px;--cube:60px;--rail-y:88px;position:relative}.ptx__list{grid-template-columns:repeat(var(--n), minmax(0, 1fr));gap:var(--gap);margin:0;padding:0;list-style:none;display:grid;position:relative}.ptx__rail{--col:calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));top:calc(var(--rail-y) - 1.5px);left:calc(var(--col) / 2);right:calc(var(--col) / 2);background:repeating-linear-gradient(90deg,#0f283724 0 6px,#0000 6px 11px);border-radius:2px;height:3px;position:absolute}.ptx__fill{border-radius:inherit;background:var(--rail);clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0);filter:drop-shadow(0 0 6px #7467ff59);position:absolute;inset:0}.ptx__rail:after{content:"";top:-1px;bottom:-1px;left:calc(var(--p) * 100%);width:80px;opacity:min(1, calc(var(--p) * 30));background:linear-gradient(90deg,#0000,#fffffff2);border-radius:2px;position:absolute;translate:-100%}.ptx__step{--accent:#10b981;perspective:1100px;flex-direction:column;min-width:0;display:flex;position:relative}.ptx__node{z-index:1;height:var(--node-h);perspective:600px;position:relative}.ptx__no{font-family:var(--mono);letter-spacing:.06em;color:color-mix(in srgb, var(--accent) 85%, #000);background:color-mix(in srgb, var(--accent) 10%, white);border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);border-radius:7px;padding:3px 9px;font-size:11.5px;font-weight:700;transition:color .5s,background-color .5s;position:absolute;top:0;left:50%;translate:-50%}.ptx__step.is-reached .ptx__no{color:#fff;background:var(--accent)}.ptx__cube{left:50%;top:calc(var(--rail-y) - var(--cube) / 2);width:var(--cube);height:var(--cube);margin-left:calc(var(--cube) / -2);transform-style:preserve-3d;animation:6s ease-in-out infinite alternate ptx-sway;animation-delay:calc(var(--i) * -1.2s);transition:translate .7s var(--ease-out);position:absolute;transform:rotateX(-16deg)rotateY(-26deg)}.ptx__step.is-reached .ptx__cube{translate:0 -8px}.ptx__face{border-radius:14px;place-items:center;transition:background .6s,border-color .6s,color .6s;display:grid;position:absolute;inset:0}.ptx__face--front{color:var(--accent);background:linear-gradient(150deg, #fff, color-mix(in srgb, var(--accent) 8%, white));border:1px solid color-mix(in srgb, var(--accent) 30%, #e4ebe8);transform:translateZ(calc(var(--cube) / 2))}.ptx__face--top{background:color-mix(in srgb, var(--accent) 10%, white);border:1px solid color-mix(in srgb, var(--accent) 22%, #e4ebe8);transform:rotateX(90deg) translateZ(calc(var(--cube) / 2))}.ptx__face--side{background:color-mix(in srgb, var(--accent) 20%, #eef2f1);border:1px solid color-mix(in srgb, var(--accent) 22%, #e4ebe8);transform:rotateY(90deg) translateZ(calc(var(--cube) / 2))}.ptx__step.is-reached .ptx__face--front{color:#fff;background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 78%, white), var(--accent));border-color:#0000}.ptx__step.is-reached .ptx__face--top{background:color-mix(in srgb, var(--accent) 55%, white);border-color:#0000}.ptx__step.is-reached .ptx__face--side{background:color-mix(in srgb, var(--accent) 80%, #0b1b2a);border-color:#0000}.ptx__base{left:50%;top:calc(var(--rail-y) + var(--cube) / 2 + 6px);filter:blur(8px);background:#0f28372e;border-radius:8px;width:70px;height:12px;transition:background-color .6s;position:absolute;translate:-50%}.ptx__step.is-reached .ptx__base{background:color-mix(in srgb, var(--accent) 55%, transparent)}.ptx__step.is-current .ptx__face--front{box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent)}.ptx__drop{background:linear-gradient(color-mix(in srgb, var(--accent) 15%, transparent), var(--accent));transform-origin:top;width:1.5px;height:26px;transition:transform .6s var(--ease-out) .1s;align-self:center;margin-top:-8px;transform:scaleY(0)}.ptx__step.is-reached .ptx__drop{transform:scaleY(1)}.ptx__card{border:1px solid var(--line,#e4ebe8);opacity:.6;--hinge:-26deg;transform-origin:50% 0;transform-style:preserve-3d;transform:rotateX(calc(var(--hinge) - var(--my,0) * 8deg)) rotateY(calc(var(--mx,0) * 10deg));transition:opacity .5s, transform .8s var(--ease-out), border-color .5s, box-shadow .6s var(--ease-out);background:#fff;border-radius:20px;flex:1;padding:22px 20px 24px;position:relative}.ptx__step.is-reached .ptx__card:hover{transition:transform .25s ease-out, border-color .5s, box-shadow .6s var(--ease-out)}.ptx__chead{align-items:center;gap:10px;display:flex;transform:translateZ(28px)}.ptx__chip{width:34px;height:34px;color:var(--accent);background:color-mix(in srgb, var(--accent) 11%, white);border-radius:10px;flex-shrink:0;place-items:center;transition:background-color .5s,color .5s;display:grid}.ptx__step.is-reached .ptx__chip{color:#fff;background:var(--accent)}.ptx__mark{letter-spacing:-.05em;color:color-mix(in srgb, var(--accent) 9%, transparent);pointer-events:none;font-size:64px;font-weight:800;line-height:1;position:absolute;bottom:4px;right:14px;transform:translateZ(6px)}.ptx__title{transform:translateZ(36px)}.ptx__desc{transform:translateZ(18px)}.ptx__step.is-reached .ptx__card{--hinge:0deg;opacity:1;border-color:color-mix(in srgb, var(--accent) 32%, var(--line,#e4ebe8));box-shadow:0 28px 50px -36px color-mix(in srgb, var(--accent) 70%, transparent)}.ptx__card:after{content:"";background:var(--accent);height:3px;transition:transform .7s var(--ease-out);border-radius:0 0 3px 3px;position:absolute;top:-1px;left:20px;right:20px;transform:scaleX(0)}.ptx__step.is-reached .ptx__card:after{transform:scaleX(1)}.ptx__mtile{display:none}.ptx__label{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-size:11.5px;font-weight:700;display:block}.ptx__title{letter-spacing:-.02em;color:var(--ink);margin:10px 0 8px;font-size:17px;font-weight:600;line-height:1.3}.ptx__desc{color:var(--muted);margin:0;font-size:14px;line-height:1.6}@keyframes ptx-sway{0%{transform:rotateX(-16deg)rotateY(-30deg)}to{transform:rotateX(-12deg)rotateY(-18deg)}}@media (max-width:1100px){.ptx{--gap:12px;--cube:52px;--node-h:136px;--rail-y:80px}.ptx__card{padding:18px 16px 20px}.ptx__title{font-size:15.5px}.ptx__desc{font-size:13.5px}}@media (max-width:860px){.ptx__list{grid-template-columns:1fr;gap:14px;padding-left:60px}.ptx__rail{background:#0f28371a;width:2px;height:auto;inset:28px auto 28px 25px}.ptx__rail:after{display:none}.ptx__fill{background:var(--rail-v);clip-path:inset(0 0 calc((1 - var(--p)) * 100%) 0)}.ptx__node,.ptx__drop,.ptx__chip{display:none}.ptx__card{--hinge:0deg}.ptx__mtile{z-index:1;width:40px;height:40px;color:var(--accent);border:1px solid color-mix(in srgb, var(--accent) 28%, var(--line,#e4ebe8));background:#fff;border-radius:12px;place-items:center;transition:background-color .5s,color .5s;display:grid;position:absolute;top:18px;left:-56px}.ptx__step.is-reached .ptx__mtile{color:#fff;background:var(--accent);border-color:#0000}}@media (prefers-reduced-motion:reduce){.ptx__cube{animation:none}.ptx__card{--hinge:0deg}.ptx__card,.ptx__cube,.ptx__drop,.ptx__card:after{transition:none}}