.cd-chain{display:flex;align-items:flex-start;justify-content:space-between;position:relative;padding:0 0 20px}.cd-track{position:absolute;top:8px;left:9px;right:9px;height:3px;border-radius:3px;background:var(--demo-stroke)}.cd-dot-wrap{display:flex;align-items:center;position:relative;z-index:1;cursor:default}.cd-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--demo-stroke);background:#fff;position:relative;transition:border-color .3s,background .3s,transform .3s}.cd-dot--current{border-color:var(--demo-success);background:var(--demo-success-soft)}.cd-dot--current::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(30,142,62,.28);animation:cd-pulse 2s ease-in-out infinite}@keyframes cd-pulse{0%{opacity:.6;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}100%{opacity:.6;transform:scale(.92)}}.cd-dot-label{font-size:11px;color:var(--demo-muted);white-space:nowrap;letter-spacing:.2px}.cd-dot-label--current{color:var(--demo-success);font-weight:600}.cd-ripple{position:absolute;inset:0;pointer-events:none}.cd-ripple::after{content:"";position:absolute;left:50%;top:50%;width:32px;height:32px;border-radius:50%;border:2px solid var(--demo-ring);transform:translate(-50%,-50%) scale(.4);opacity:0}.cd-banner{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--demo-success);background:var(--demo-success-soft);margin-bottom:14px;position:relative;overflow:hidden}.cd-banner-dot{width:14px;height:14px;border-radius:50%;background:var(--demo-success);opacity:.55;flex-shrink:0}.cd-banner-skel{height:10px;border-radius:999px;background:var(--demo-success);opacity:.28}.cd-banner--danger{border-color:var(--demo-danger-stroke);background:var(--demo-danger-soft)}.cd-banner--danger .cd-banner-dot{background:var(--demo-danger)}.cd-banner--danger .cd-banner-skel{background:var(--demo-danger)}.cd-doc-area{position:relative;margin-top:12px;flex:1}.cd-doc{border:1px solid var(--demo-stroke);border-radius:var(--demo-radius-md);background:#fff;padding:16px;position:absolute;inset:0}.cd-doc-title{height:12px;width:65%;border-radius:999px;background:var(--demo-surface-3);margin-bottom:14px}.cd-doc-line{display:flex;gap:6px;margin-bottom:10px}.cd-doc-line:last-child{margin-bottom:0}.cd-doc-chunk{height:9px;border-radius:999px;background:var(--demo-surface-2)}.cd-doc--old .cd-doc-title{width:58%}.chain-demo .demo-stage{display:flex;flex-direction:column}.cd-banner-current{opacity:1}.cd-banner-old{opacity:0;position:absolute;inset:0}.cd-banner-wrap{position:relative}.cd-doc-current{opacity:1}.cd-doc-old{opacity:0;transform:translateY(6px)}.chain-demo.step-1 .cd-chain{animation:cd-timeline-in .6s ease-out forwards}@keyframes cd-timeline-in{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}.chain-demo.step-1 .cd-banner-wrap{animation:cd-banner-in .4s ease-out .3s forwards}.chain-demo.step-1 .cd-doc-area{animation:cd-doc-in .4s ease-out .5s forwards}@keyframes cd-banner-in{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}@keyframes cd-doc-in{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}.chain-demo.step-2 .cd-banner-wrap,.chain-demo.step-2 .cd-chain,.chain-demo.step-2 .cd-doc-area,.chain-demo.step-3 .cd-banner-wrap,.chain-demo.step-3 .cd-chain,.chain-demo.step-3 .cd-doc-area,.chain-demo.step-4 .cd-banner-wrap,.chain-demo.step-4 .cd-chain,.chain-demo.step-4 .cd-doc-area{opacity:1;transform:none}.chain-demo.step-3 .cd-dot-v2{animation:cd-dot-press .4s ease-in-out forwards}@keyframes cd-dot-press{0%{transform:scale(1)}40%{transform:scale(.82)}70%{transform:scale(1.1)}100%{transform:scale(1)}}.chain-demo.step-3 .cd-dot-v2 .cd-ripple::after{animation:cd-dot-ripple .7s ease-out forwards}@keyframes cd-dot-ripple{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}30%{opacity:1;transform:translate(-50%,-50%) scale(.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}.chain-demo.step-3 .cd-dot-v2{border-color:var(--demo-danger);background:var(--demo-danger-soft)}.chain-demo.step-3 .cd-dot--current::after{animation:none;opacity:.3}.chain-demo.step-3 .cd-banner-current{animation:cd-fade-out .3s ease-in .4s forwards}@keyframes cd-fade-out{0%{opacity:1}100%{opacity:0}}.chain-demo.step-3 .cd-banner-old{animation:cd-fade-in .3s ease-out .55s forwards}@keyframes cd-fade-in{0%{opacity:0}100%{opacity:1}}.chain-demo.step-3 .cd-doc-area,.chain-demo.step-4 .cd-doc-area{animation:cd-doc-lift .5s ease-in-out .4s forwards}@keyframes cd-doc-lift{0%{transform:none}35%{transform:translateY(-8px)}100%{transform:none}}.chain-demo.step-3 .cd-doc-current{animation:cd-doc-swap-out .3s ease-in .4s forwards}@keyframes cd-doc-swap-out{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}.chain-demo.step-3 .cd-doc-old{animation:cd-doc-swap-in .35s ease-out .6s forwards}@keyframes cd-doc-swap-in{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}.chain-demo.step-4 .cd-dot--current{animation:cd-dot-press .4s ease-in-out forwards}.chain-demo.step-4 .cd-dot--current .cd-ripple::after{animation:cd-dot-ripple .7s ease-out forwards}.chain-demo.step-4 .cd-dot-v2{border-color:var(--demo-stroke);background:#fff}.chain-demo.step-4 .cd-dot--current::after{animation:cd-pulse 2s ease-in-out infinite .5s;opacity:1}.chain-demo.step-4 .cd-dot--current{border-color:var(--demo-success);background:var(--demo-success-soft)}.chain-demo.step-4 .cd-banner-current{opacity:0;animation:cd-fade-in .3s ease-out .55s forwards}.chain-demo.step-4 .cd-banner-old{opacity:1;animation:cd-fade-out .3s ease-in .4s forwards}.chain-demo.step-4 .cd-doc-old{opacity:1;transform:none;animation:cd-doc-swap-out .3s ease-in .4s forwards}.chain-demo.step-4 .cd-doc-current{opacity:0;transform:translateY(-10px);animation:cd-doc-swap-in .35s ease-out .6s forwards}@media (prefers-reduced-motion:reduce){.cd-banner-current,.cd-banner-old,.cd-banner-wrap,.cd-chain,.cd-doc-area,.cd-doc-current,.cd-doc-old,.cd-dot--current,.cd-dot--current::after,.cd-dot-v2,.cd-ripple::after{animation:none!important;transition:none!important}.cd-banner-wrap,.cd-chain,.cd-doc-area{opacity:1;transform:none}}.chain-demo .cd-banner-current,.chain-demo .cd-banner-old,.chain-demo .cd-doc-current,.chain-demo .cd-doc-old,.chain-demo .cd-dot{will-change:transform,opacity}