.trace-flow{display:grid;gap:14px;color:#dbe7f5}.tf-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.tf-steps li{position:relative;display:grid;justify-items:start;gap:6px;padding:16px 14px 14px;border-radius:14px;background:#ffffff0d;border:1px solid rgba(34,211,238,.22)}.tf-steps li:not(:last-child):after{content:"";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;top:50%;right:-17px;transform:translateY(-50%);font-size:.7rem;color:#22d3ee}.tf-steps li>i{font-size:1.15rem;color:#22d3ee}.tf-steps li b{font-family:var(--font-display);font-size:.9rem;color:#fff;line-height:1.25}.tf-steps .tf-num{position:absolute;top:10px;right:12px;font-family:var(--font-mono);font-size:.66rem;color:#dbe7f573}.tf-steps .tf-text{font-size:.78rem;line-height:1.45;color:#dbe7f5b3}.tf-erp{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#22d3ee29,#6366f129);border:1px solid rgba(34,211,238,.45);box-shadow:0 0 24px #22d3ee1f}.tf-erp:before{content:"";position:absolute;left:12%;right:12%;top:-15px;height:14px;border:1.5px dashed rgba(34,211,238,.5);border-bottom:0;border-radius:10px 10px 0 0}.tf-erp-main{display:flex;align-items:center;gap:12px}.tf-erp-main>i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#001346;background:linear-gradient(135deg,#67e8f9,#00bcd4);font-size:1rem}.tf-erp-main b{display:block;font-family:var(--font-display);font-size:1rem;color:#fff}.tf-erp-main span{font-size:.78rem;color:#dbe7f5cc}.tf-devices{display:flex;gap:8px}.tf-devices span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:600;color:#fff;background:#ffffff14;border:1px solid rgba(255,255,255,.16)}.tf-devices .fa-windows{color:#60a5fa}.tf-devices .fa-android{color:#34d399}.trace-flow.compact{height:100%;align-content:center;padding:44px 16px 16px;gap:12px;background:radial-gradient(ellipse at 0% 0%,rgba(34,211,238,.16),transparent 60%),linear-gradient(160deg,#0c1850,#050b2c)}.trace-flow.compact .tf-steps{grid-template-columns:1fr 1fr;gap:8px}.trace-flow.compact .tf-steps li{display:flex;align-items:center;gap:8px;padding:10px 12px}.trace-flow.compact .tf-steps li:after{display:none}.trace-flow.compact .tf-steps li>i{font-size:.95rem}.trace-flow.compact .tf-steps li b{font-size:.78rem}.trace-flow.compact .tf-steps .tf-num{position:static;order:-1}.trace-flow.compact .tf-erp{padding:10px 12px}.trace-flow.compact .tf-erp:before{display:none}.trace-flow.compact .tf-erp-main>i{width:32px;height:32px;font-size:.85rem}.trace-flow.compact .tf-erp-main b{font-size:.88rem}.trace-flow.compact .tf-erp-main span{font-size:.72rem}.trace-flow.compact .tf-devices span{padding:4px 10px;font-size:.72rem}@media(max-width:900px){.tf-steps{grid-template-columns:1fr 1fr;gap:12px}.tf-steps li:after{display:none}}@media(max-width:480px){.trace-flow:not(.compact) .tf-steps{grid-template-columns:1fr}.trace-flow.compact{padding-top:40px}}