.build{padding:140px 0 130px;view-timeline-name:--build}.stage{display:grid;grid-template-columns:.95fr 1.05fr;gap:40px 56px;align-items:center;align-content:center}.build-head{grid-column:1 / -1;text-align:center}.build-head .ln>span{transform-origin:50% 100%}.stage h2{font-size:calc(clamp(36px, 3.4vw, 58px) * var(--ds));line-height:.98;margin-bottom:14px}.build-sub{font-size:clamp(16px, 1.2vw, 19px);line-height:1.6;color:var(--paper-mute);font-weight:500}.steps{position:relative;display:grid;gap:30px;padding-inline-start:36px}.rail{position:absolute;inset-inline-start:6px;top:6px;bottom:6px;width:4px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}.rail i{position:absolute;inset:0;background:var(--blue);transform-origin:50% 0}.st h3{display:inline-block;font-size:clamp(24px, 2.2vw, 34px);font-weight:900;color:var(--white);background:var(--blue);padding:4px 14px 6px}.st dl{margin:16px 0 0;display:grid;gap:4px}.st dt{font:700 14px var(--f-text);color:var(--paper-mute);margin-top:10px}.st dd{margin:0;font-size:18px;line-height:1.55;font-weight:500;max-width:40ch}.st dd.end{font-weight:700;font-size:20px}.screen-wrap{position:relative}.screen{position:relative;aspect-ratio:16/11;width:min(100%, calc(50dvh * 16 / 11));margin-inline:auto;background:var(--white);box-shadow:0 0 0 12px var(--ink);overflow:hidden}.bar{height:40px;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:2px solid var(--ink);direction:ltr;background:var(--white)}.bar i{width:11px;height:11px;background:var(--c)}.bar span{margin-inline-start:12px;font:700 13px var(--f-text);color:var(--paper-mute)}.canvas{position:absolute;inset:40px 0 0}.wf{position:absolute;inset:0;padding:18px;display:grid;grid-template-rows:7% 40% 1fr 9%;gap:12px;opacity:0}.wf .blk-w{border:2px dashed color-mix(in srgb,var(--ink) 40%,transparent);position:relative;overflow:hidden;transform-origin:100% 50%}.wf .blk-w::after{content:"";position:absolute;inset:0;background:var(--f);opacity:0}.wf .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.confetti{position:absolute;left:50%;top:45%;width:0;height:0;z-index:2;pointer-events:none}.confetti i{position:absolute;left:-5px;top:-7px;width:10px;height:14px;background:var(--c);opacity:0}.confetti i.dot{width:10px;height:10px;border-radius:50%}.confetti i.strip{width:6px;height:20px}.burst-mark{position:absolute;inset-inline:0;top:82%;height:1px;pointer-events:none}.build-after{padding:0 0 130px}.build-note{max-width:900px;margin:0 auto;padding:22px 26px;background:var(--lav);border-inline-start:4px solid var(--blue);font-size:17px;line-height:1.65;font-weight:500}.build-more{max-width:900px;margin:22px auto 0;text-align:center;font-size:17px;line-height:1.7}.build-more a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}@media (hover:hover) and (pointer:fine){.build-more a:hover{color:var(--blue)}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.build{height:320vh;padding:0}.build .stage{position:sticky;top:var(--top);height:calc(100dvh - var(--top))}.steps{display:block;height:260px}.st{position:absolute;inset-inline:36px 0;top:0;opacity:0;animation:win linear both;animation-timeline:--build}.st:nth-of-type(1){animation-name:winOut;animation-range:contain 0% contain 30%}.st:nth-of-type(2){animation-range:contain 30% contain 60%}.st:nth-of-type(3){animation-name:winIn;animation-range:contain 60% contain 76%}@keyframes win{0%{opacity:0;translate:0 40px}20%,80%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -40px}}@keyframes winOut{0%,80%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -40px}}@keyframes winIn{0%{opacity:0;translate:0 40px}30%,100%{opacity:1;translate:0 0}}.rail i{animation:rail linear both;animation-timeline:--build;animation-range:contain 0% contain 100%}@keyframes rail{from{transform:scaleY(0)}to{transform:scaleY(1)}}.wf{opacity:1}.wf .blk-w{animation:draw linear both;animation-timeline:--build;animation-range:contain calc(var(--i) * 4%) contain calc(var(--i) * 4% + 16%)}.wf .blk-w::after{animation:fill linear both;animation-timeline:--build;animation-range:contain calc(40% + var(--i) * 4%) contain calc(52% + var(--i) * 4%)}@keyframes draw{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}@keyframes fill{to{opacity:1}}@media (max-width:900px){.build{height:300vh}.build .stage{gap:16px;padding-block:10px}.build h2{font-size:calc(34px * var(--ds));margin-bottom:8px}.build-sub{font-size:14px;line-height:1.5}.build-sub br{display:none}.steps{height:178px;padding-inline-start:20px}.st{inset-inline:20px 0}.rail{inset-inline-start:2px}.st h3{font-size:21px;padding:3px 12px 5px}.st dl{margin-top:6px;gap:2px}.st dt{font-size:12.5px;margin-top:6px}.st dd{font-size:15px;line-height:1.45}.st dd.end{font-size:16px}.screen{width:min(calc(100% - 16px), calc(34dvh * 16 / 11));box-shadow:0 0 0 8px var(--ink)}.bar{height:28px;padding:0 10px;gap:5px}.bar i{width:8px;height:8px}.bar span{font-size:11px;margin-inline-start:6px}.canvas{inset:28px 0 0}.wf{padding:10px;gap:7px}.wf .cards{gap:7px}}}}@media (max-width:900px){.build{padding:110px 0}.stage{grid-template-columns:1fr;gap:28px}}