.df{position:relative;display:grid;grid-template-columns:minmax(0,300px) minmax(60px,1fr) 270px minmax(60px,1fr) minmax(0,290px);align-items:center;margin-top:56px}.df-col{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px}.df-src{grid-column:1;grid-row:1}.df-out{grid-column:5;grid-row:1}.df-core{grid-row:1}.df-cap{margin:0 0 6px;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--iron)}.df-chip{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--hair);border-radius:12px;background:linear-gradient(180deg,#ffffff08,#fff0),#050506;transition:border-color .4s,box-shadow .4s,transform .4s var(--ease)}.df-chip svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--smoke);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.df-chip span{display:flex;flex-direction:column;min-width:0}.df-chip b{font-weight:500;font-size:14px;color:var(--bone);white-space:nowrap}.df-chip small{font:11px var(--mono);color:var(--iron);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.df-chip.hit{border-color:#baa7ffb3;box-shadow:0 0 0 1px #baa7ff40,0 0 28px -4px #9281f78c;transform:translate(3px)}.df-src .df-chip.hit{transform:translate(-3px)}.df-o>i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--smoke)}.df-o.g>i{background:var(--green);box-shadow:0 0 10px #3ad38999}.df-o.b>i{background:var(--sky);box-shadow:0 0 10px #70b8ff99}.df-o.v>i{background:var(--iris-glow);box-shadow:0 0 10px #baa7ff99}.df-o.n>i{background:#fff;box-shadow:0 0 10px #ffffff80}.df-core{position:relative;z-index:2;grid-column:3;padding:26px 22px 22px;border-radius:22px;text-align:center;background:radial-gradient(120% 90% at 50% 0%,#9281f72e,#9281f700 60%),#07070a;border:1px solid rgba(186,167,255,.28);box-shadow:0 0 0 1px #0009,0 30px 80px -30px #9281f78c;transition:box-shadow .35s}.df-core.hit{box-shadow:0 0 0 1px #baa7ff80,0 30px 90px -20px #9281f7d9}.df-core:before{content:"";position:absolute;inset:-1px;border-radius:22px;padding:1px;background:conic-gradient(from var(--df-a, 0deg),transparent 0 70%,#baa7ff 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:df-spin 4s linear infinite}@property --df-a{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@keyframes df-spin{to{--df-a: 360deg}}.df-orb{width:56px;height:56px;margin:0 auto 12px;border-radius:16px;display:grid;place-items:center;background:#0d0d12;border:1px solid #2a2e33;box-shadow:0 0 40px -6px #9281f7b3}.df-orb svg{width:30px;height:30px}.df-name{display:block;font-size:16px;font-weight:600;color:#fff;letter-spacing:-.01em}.df-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;text-align:left}.df-steps li{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:9px;font-size:12.5px;color:var(--iron);border:1px solid transparent;transition:all .45s var(--ease)}.df-steps li span{font:10.5px var(--mono);color:var(--charcoal);transition:color .45s}.df-steps li.on{color:#fff;background:#9281f71f;border-color:#9281f74d}.df-steps li.on span{color:var(--iris-glow)}.df-rail{display:none}.df-own{border-color:#baa7ff73;background:radial-gradient(120% 140% at 0% 0%,rgba(146,129,247,.16),transparent 60%),#07070a}.df-own svg{stroke:var(--iris-glow)}.df-own b{color:#fff}.df-then{grid-column:1 / -1;grid-row:2;display:flex;flex-direction:column;align-items:center;margin-top:18px;position:relative;z-index:2}.df-rail2{position:relative;height:56px;width:2px;background:#ffffff14;overflow:hidden;border-radius:2px;margin-bottom:10px}.df-rail2 i{position:absolute;left:0;width:2px;height:22px;background:linear-gradient(transparent,#baa7ff,#fff);animation:df-rail 1.6s cubic-bezier(.45,0,.2,1) infinite;box-shadow:0 0 8px #baa7ff}@keyframes df-rail{0%{top:-24px}to{top:58px}}.df-then .df-cap{text-align:center}.df-next{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(640px,100%)}.df-n{border-color:#3ad38959;text-decoration:none;color:inherit}a.df-n:hover{border-color:#3ad389b3}.df-n svg{stroke:var(--green)}.df-n b{color:#fff}.df-n small{white-space:normal}.df-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}.df-svg path{fill:none}.df-svg [data-base] path{stroke:#ffffff12;stroke-width:1}.df-svg [data-live] path{stroke:url(#df-beam);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(186,167,255,.8))}@media(max-width:999px){.df{grid-template-columns:1fr;gap:0;max-width:520px;margin-left:auto;margin-right:auto}.df-src .df-own{grid-column:1 / -1;justify-content:center}.df-then{grid-row:auto;margin-top:4px}.df-rail2{margin-top:0}.df-next{grid-template-columns:1fr}.df-svg{display:none}.df-core,.df-src,.df-out{grid-column:auto;grid-row:auto}.df-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}.df-cap{grid-column:1 / -1;text-align:center}.df-chip{padding:9px 11px;gap:9px}.df-chip b{font-size:13px;white-space:normal;line-height:1.25}.df-chip small{font-size:10px;white-space:normal}.df-rail{display:block;position:relative;height:56px;width:2px;margin:4px auto;background:#ffffff14;overflow:hidden;border-radius:2px}.df-rail i{position:absolute;left:0;width:2px;height:22px;background:linear-gradient(transparent,#baa7ff,#fff);animation:df-rail 1.6s cubic-bezier(.45,0,.2,1) infinite;box-shadow:0 0 8px #baa7ff}@keyframes df-rail{0%{top:-24px}to{top:58px}}}@media(prefers-reduced-motion:reduce){.df-core:before,.df-rail i{animation:none}.df-chip,.df-steps li{transition:none}}