/* 8901 Di card shell: 286px outer, 6px inset, 225px UI stage, 16px copy inset. */
#how-it-works { --cb-accent:#00d6a3; }
#how-it-works .cb-steps__card { max-width:286px; width:calc(100% - 13px); padding:6px; border-radius:18px; background:#0c1511; border-color:#20362c; }
#how-it-works .cb-steps__step:nth-child(odd) .cb-steps__card { margin-left:auto; margin-right:13px; }
#how-it-works .cb-steps__step:nth-child(even) .cb-steps__card { margin-right:auto; margin-left:13px; }
#how-it-works .cb-steps__copy { padding:16px; background:#111d17; border:1px solid #22392d; border-radius:12px; }
#how-it-works .cb-steps__card h3 { font-size:16px; line-height:1.2; }
#how-it-works .cb-steps__body { font-size:14px; line-height:1.4; margin-top:12px; }
#how-it-works .cb-steps__list { gap:39px; }
#how-it-works .cb-steps__step { column-gap:26px; }
#how-it-works .cb-steps__number { background:#d4e3dc; color:#07120d; border-color:#d4e3dc; border-radius:4px; }
#how-it-works .is-reached .cb-steps__number { background:#00d6a3; border-color:#00d6a3; color:#041b12; }
#how-it-works .is-reached .cb-steps__card { border-color:#257758; background:radial-gradient(ellipse at top left,#00d6a317,transparent 72%),#0c1511; }
.cb-steps__animation { height:225px; position:relative; overflow:hidden; margin-bottom:6px; }
.cb-demo { display:block; width:100%; max-width:288px; height:225px; margin:auto; overflow:visible; }
.cb-demo text { fill:#c4d5cc; font:9px 'Space Mono',Pretendard,monospace; }
.cb-demo .cb-demo-label { fill:#73e6b2; font-size:9px; }
.cb-demo .cb-demo-muted { fill:#789889; font-size:8px; }
.cb-demo-box { fill:#102219; stroke:#315c47; stroke-width:.7; }
.cb-demo-wire { fill:none; stroke:#387457; stroke-width:1; }
.cb-demo-check { fill:#00d6a3; }
.cb-demo-tick { fill:none; stroke:#071b12; stroke-width:1.6; stroke-linecap:round; }
.cb-demo-track { fill:#213e2f; }
.cb-demo-progress { fill:#00d6a3; animation:cb-demo-progress 5s linear infinite; }
.cb-demo-reveal { animation:cb-demo-reveal 5s cubic-bezier(.23,1,.32,1) infinite; }
.cb-demo-row { animation:cb-demo-row 5s cubic-bezier(.23,1,.32,1) infinite; }
.cb-demo-packet { fill:#00d6a3; animation:cb-demo-packet 5s linear infinite; }
.cb-demo-screen { fill:#17352a; }
.cb-demo-landscape { fill:#31624d; stroke:#518e70; stroke-width:1; }
.cb-demo-compare { fill:#00d6a311; stroke:#00d6a3; animation:cb-demo-reveal 5s linear infinite; }
.cb-demo-playhead { stroke:#73e6b2; stroke-width:2; animation:cb-demo-playhead 5s linear infinite; }
.cb-demo-lut { fill:#c09c4233; animation:cb-demo-lut 5s cubic-bezier(.77,0,.175,1) infinite; transform-origin:38px 72px; }
.cb-demo-document { animation:cb-demo-row 5s cubic-bezier(.23,1,.32,1) infinite; }
.cb-demo-caption { position:absolute; bottom:7px; right:12px; font:8px/1 'Space Mono',monospace; letter-spacing:.12em; color:#628774; }
.cb-steps__animation * { animation-play-state:paused; }
.cb-steps__animation.is-playing * { animation-play-state:running; }
@keyframes cb-demo-progress { 0%,10%{transform:scaleX(.03)} 65%,90%{transform:scaleX(1)} 100%{transform:scaleX(.03)} }
@keyframes cb-demo-reveal { 0%,42%{opacity:.12} 60%,90%{opacity:1} 100%{opacity:.12} }
@keyframes cb-demo-row { 0%,8%{opacity:.2;transform:translateY(8px)} 25%,90%{opacity:1;transform:translateY(0)} 100%{opacity:.2;transform:translateY(8px)} }
@keyframes cb-demo-packet { 0%,10%{opacity:0;transform:translateX(0)} 20%{opacity:1} 65%{opacity:1;transform:translateX(58px)} 75%,100%{opacity:0;transform:translateX(58px)} }
@keyframes cb-demo-playhead { 0%,10%{transform:translateX(0)} 80%,90%{transform:translateX(155px)} 100%{transform:translateX(0)} }
@keyframes cb-demo-lut { 0%,10%{transform:scaleX(.03)} 65%,90%{transform:scaleX(1)} 100%{transform:scaleX(.03)} }
/* Exact side-circuit path/node geometry from 8901 ki, recolored green. */
.cb-steps__circuit { position:absolute; top:0; width:160px; pointer-events:none; color:#00d6a345; mask-image:linear-gradient(to bottom,transparent,#000 70px); }
.cb-steps__circuit--left { left:-169px; }
.cb-steps__circuit--right { right:-169px; transform:scaleX(-1); }
.cb-steps__trace-head { stroke:#73e6b2; stroke-width:3; stroke-linecap:round; stroke-dasharray:.025 .975; stroke-dashoffset:1; }
@media(max-width:1279px){ .cb-steps__circuit { display:none; } }
@media(max-width:1023px){
 #how-it-works .cb-steps__card { max-width:286px; width:100%; margin-left:0!important; margin-right:0!important; margin-top:24px; }
 #how-it-works .cb-steps__step { column-gap:20px; }
 .cb-steps__circuit { display:none; }
}
@media(max-width:639px){
 #how-it-works .cb-steps__step { column-gap:12px; }
 .cb-steps__animation { height:auto; aspect-ratio:288/225; }
 .cb-demo { height:auto; }
}
@media(prefers-reduced-motion:reduce){
 .cb-steps__animation * { animation:none!important; }
 .cb-steps__trace-head { display:none; }
}

#how-it-works .cb-steps__card { border-radius:18px!important; }
#how-it-works .cb-steps__copy { border-radius:12px!important; }
#how-it-works .cb-steps__eyebrow { margin-bottom:24px; }