.build-scene{position:relative;isolation:isolate;container-type:inline-size;width:100%;color:#e9f0f5;--wb-gradient:var(--showcase-gradient,linear-gradient(105deg,#f6fbfff0,#a8d7f7e8 50%,#ffdda8ed));--wb-line:#d5e7f52e}
.build-scene *{box-sizing:border-box}
.build-scene svg{display:block;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.build-scene [data-reveal],.build-scene [data-until]{transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.build-scene [data-until]{opacity:0;pointer-events:none}
.build-enhanced .build-scene [data-until]:not(.is-retired){opacity:1}
.build-enhanced .build-scene [data-reveal]:not(.is-shown){opacity:0;pointer-events:none}
.build-enhanced .build-scene [data-reveal].is-shown{opacity:1}
.build-enhanced .build-scene [data-until].is-retired{opacity:0;pointer-events:none}
.build-scene .wb-browser{position:absolute;top:54px;left:0;right:36px;height:342px;isolation:isolate;border-radius:32px;overflow:hidden}
.build-scene .wb-browser>[data-demo-glass]{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none}
.build-scene .wb-browser>[data-demo-glass]:empty{background:#ffffff06;border:1px solid #ffffff38;box-shadow:inset 0 1px 0 #ffffff38,inset 0 0 14px #ffffff0c;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.build-scene .demo-glass-surface>.glass-surface__content{padding:0}
.build-scene .wb-browser-chrome{position:absolute;top:0;left:21px;right:21px;height:48px;display:flex;align-items:center;gap:15px;border-bottom:1px solid #d5e7f521}
.build-scene .wb-browser-dots{display:flex;gap:5px}
.build-scene .wb-browser-dots i{width:6px;height:6px;border:1px solid #c3d8e670;border-radius:50%;background:#c3d8e609}
.build-scene .wb-address{position:relative;flex:1;height:25px;display:flex;align-items:center;justify-content:center;border:1px solid #c3d8e630;border-radius:8px;background:#ffffff03;color:#acbdc8;font:11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}
.build-scene .wb-address-text{display:block;max-width:11ch;white-space:nowrap;overflow:hidden;transition:max-width .85s steps(11,end),opacity .15s}
.build-enhanced .build-scene .wb-address-text:not(.is-shown){max-width:0}
.build-scene .wb-address>i{width:1px;height:12px;background:#bdd5e4;margin-left:2px}
.build-scene .wb-page-nav{position:absolute;left:24px;right:24px;top:62px;height:30px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #d5e7f51f}
.build-scene .wb-site-mark{width:16px;height:16px;display:block;border-radius:4px;background:var(--wb-gradient)}
.build-scene .wb-nav-links{display:flex;align-items:center;gap:9px;height:17px}
.build-scene .wb-nav-links>i{width:25px;height:3px;background:#c3d8e64d;border-radius:2px;transition:opacity .35s,transform .55s;transition-delay:.1s}
.build-scene .wb-nav-links>i:nth-child(2){transition-delay:.2s}
.build-scene .wb-nav-links>i:nth-child(3){transition-delay:.3s}
.build-scene .wb-nav-links>b{height:17px;width:43px;border-radius:8px;background:var(--wb-gradient);margin-left:2px;transition:opacity .4s,transform .55s;transition-delay:.4s}
.build-enhanced .build-scene .wb-page-nav:not(.is-shown) .wb-nav-links>*{opacity:0;transform:translateY(-7px)}
.build-scene .wb-page-hero{position:absolute;left:24px;right:24px;top:105px;bottom:82px;display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.build-scene .wb-page-copy{min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.build-scene .wb-title-lines{display:grid;gap:8px;width:100%}
.build-scene .wb-title-lines>i{display:block;height:13px;width:92%;border-radius:3px;background:var(--wb-gradient);transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.build-scene .wb-title-lines>i:last-child{width:67%;transition-delay:.15s}
.build-enhanced .build-scene .wb-title-lines:not(.is-shown)>i{transform:scaleX(.04)}
.build-scene .wb-body-lines{display:grid;gap:6px;width:100%;margin-top:13px}
.build-scene .wb-body-lines>i{display:block;width:100%;height:5px;border-radius:2px;background:#b8d0e148}
.build-scene .wb-body-lines>i:last-child{width:80%}
.build-scene .wb-site-cta{position:relative;display:grid;place-items:center;width:99px;height:27px;margin-top:17px;border:1px solid #f4fbff70;border-radius:14px;background:var(--wb-gradient);transition:opacity .55s,transform .65s;isolation:isolate}
.build-enhanced .build-scene .wb-site-cta:not(.is-shown){transform:translateY(8px) scale(.95)}
.build-scene .wb-site-cta>span{width:42px;height:4px;background:#17252f;border-radius:2px;transition:transform .4s}
.build-scene .wb-click-ring{position:absolute;inset:-5px;border:1px solid #d3eafa90;border-radius:20px;pointer-events:none}
.build-enhanced .build-scene .wb-click-ring:not(.is-shown){transform:scale(.75)}
.build-enhanced .build-scene .wb-click-ring.is-retired{transform:scale(1.15)}
.build-stage[data-frame="8"] .wb-site-cta>span{transform:scaleX(.88)}
.build-scene .wb-media{position:relative;min-width:0;display:grid;place-items:center;overflow:hidden;border:1px solid #c7dfed42;border-radius:13px;background:linear-gradient(145deg,#b6d8f10a,#080f1538);isolation:isolate}
.build-enhanced .build-scene .wb-media:not(.is-shown){transform:translateY(10px) scale(.94)}
.build-scene .wb-media>svg{width:25px;height:25px;fill:#c7dbe6a6;stroke:none;z-index:1}
.build-scene .wb-media-light{position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,#c3e7fc17 50%,transparent 75%);transform:translateX(120%);transition:transform 1.3s}
.build-stage[data-frame="5"] .wb-media-light{transform:translateX(-120%)}
.build-scene .wb-content-grid{position:absolute;left:24px;right:24px;bottom:22px;height:47px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.build-scene .wb-content-card{padding:8px;border:1px solid #c3d9e734;border-radius:8px;background:#c3d9e705;transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--card-order)*.2s)}
.build-enhanced .build-scene .wb-content-grid:not(.is-shown) .wb-content-card{opacity:0;transform:translateY(13px)}
.build-scene .wb-content-card>i{display:block;width:9px;height:9px;border-radius:2px;background:#c3d9e74d;margin-bottom:5px}
.build-scene .wb-content-card>span{display:block;width:100%;height:3px;border-radius:2px;background:#c3d9e738;margin-top:4px}
.build-scene .wb-content-card>span:last-child{width:75%}
.build-scene .wb-launch-edge{position:absolute;inset:1px;border:1px solid #d5eafb99;border-radius:inherit;box-shadow:inset 0 0 13px #c1e5ff32;pointer-events:none}
.build-scene .wb-published{position:absolute;right:25px;bottom:15px;display:flex;align-items:center;gap:6px;padding:5px 9px;font-size:10px;line-height:1.2;letter-spacing:.02em;border:1px solid #d3e6f349;background:#111c24ed;border-radius:10px;color:#d7e6ef}
.build-scene .wb-published>svg{height:13px;width:13px}
.build-enhanced .build-scene .wb-published:not(.is-shown){transform:translateY(7px)}
.build-scene .wb-phone{--wb-gradient:linear-gradient(105deg,#f6f6f4f0,#ddddd9ed 52%,#f1e2c7ed);position:absolute;right:0;top:236px;width:118px;height:221px;padding:28px 12px 13px;background:linear-gradient(140deg,#171717f7,#080808fa);border:1px solid #dedede80;border-radius:23px;box-shadow:0 12px 35px #0007,inset 0 1px 1px #ffffff42;z-index:5;overflow:hidden}
.build-enhanced .build-scene .wb-phone:not(.is-shown){transform:translate(16px,12px) scale(.95)}
.build-scene .wb-phone-speaker{position:absolute;width:28px;height:4px;top:10px;left:calc(50% - 14px);border-radius:5px;background:#c5c5c55e}
.build-scene .wb-phone-nav{display:flex;justify-content:space-between;align-items:center;height:14px;border-bottom:1px solid #d2d2d225;margin-bottom:10px;padding-bottom:6px}
.build-scene .wb-phone-nav>i{width:9px;height:9px;background:var(--wb-gradient);border-radius:2px}
.build-scene .wb-phone-nav>span{width:10px;height:6px;border-top:1px solid #cfcfcf;border-bottom:1px solid #cfcfcf}
.build-scene .wb-phone-title{display:grid;gap:4px}
.build-scene .wb-phone-title>i{height:6px;width:93%;background:var(--wb-gradient);border-radius:2px}
.build-scene .wb-phone-title>i:last-child{width:68%}
.build-scene .wb-phone-copy{display:grid;gap:3px;margin-top:7px}
.build-scene .wb-phone-copy>i{width:90%;height:2px;background:#d0d0d04d;border-radius:2px}
.build-scene .wb-phone-copy>i:last-child{width:70%}
.build-scene .wb-phone-media{height:50px;margin-top:10px;display:grid;place-items:center;border:1px solid #d2d2d245;border-radius:6px;background:#ffffff07}
.build-scene .wb-phone-media>svg{width:14px;height:14px;fill:#dededea6;stroke:none}
.build-scene .wb-phone-cta{display:block;width:67%;height:11px;margin-top:8px;border-radius:6px;background:var(--wb-gradient)}
.build-scene .wb-phone-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px}
.build-scene .wb-phone-cards>i{height:15px;border:1px solid #d2d2d232;border-radius:3px}
.build-enhanced .build-scene .wb-phone-page:not(.is-shown){transform:translateY(10px)}
.build-enhanced .build-scene .wb-phone-cards:not(.is-shown){transform:translateY(7px)}
.build-scene .wb-ready{position:absolute;top:15px;right:46px;display:flex;align-items:center;gap:8px;color:#d9e6ef;font-size:12px;line-height:1.4}
.build-scene .wb-ready>svg{height:18px;width:18px;padding:2px;border:1px solid #c2deed5c;border-radius:50%}
.build-scene .wb-cursor{position:absolute;left:0;top:-54px;width:23px;height:28px;z-index:7;pointer-events:none;filter:drop-shadow(0 3px 3px #0007);--cursor-x:calc(100cqw - 86px);--cursor-y:128px;transform:translate(var(--cursor-x),var(--cursor-y));transition:transform .65s cubic-bezier(.3,.1,.15,1),opacity .4s}
.build-scene .wb-cursor>svg{height:28px;width:24px;fill:#e6f3fa;stroke:#111d25;stroke-width:1.1}
.build-stage[data-frame="3"] .wb-cursor{--cursor-x:27cqw;--cursor-y:202px}
.build-stage[data-frame="4"] .wb-cursor{--cursor-x:29cqw;--cursor-y:244px}
.build-stage[data-frame="5"] .wb-cursor{--cursor-x:73cqw;--cursor-y:226px}
.build-stage[data-frame="6"] .wb-cursor,.build-stage[data-frame="8"] .wb-cursor,.build-stage[data-frame="9"] .wb-cursor{--cursor-x:77px;--cursor-y:287px}
.build-stage[data-frame="7"] .wb-cursor{--cursor-x:68cqw;--cursor-y:351px}
@container(max-width:510px){
 .build-scene .wb-browser{top:42px;right:24px;height:294px}
 .build-scene .wb-browser-chrome{height:42px;left:18px;right:18px;gap:10px}
 .build-scene .wb-address{height:23px;font-size:10px}
 .build-scene .wb-page-nav{left:20px;right:20px;top:55px;height:26px}
 .build-scene .wb-site-mark{height:14px;width:14px}
 .build-scene .wb-nav-links{gap:7px}.build-scene .wb-nav-links>i{width:17px}.build-scene .wb-nav-links>b{width:35px;height:15px}
 .build-scene .wb-page-hero{left:20px;right:20px;top:94px;bottom:73px;gap:12px}
 .build-scene .wb-title-lines{gap:6px}.build-scene .wb-title-lines>i{height:10px}
 .build-scene .wb-body-lines{margin-top:10px;gap:5px}.build-scene .wb-body-lines>i{height:4px}
 .build-scene .wb-site-cta{width:82px;height:23px;margin-top:14px}.build-scene .wb-site-cta>span{width:34px;height:3px}
 .build-scene .wb-media{border-radius:10px}
 .build-scene .wb-content-grid{left:20px;right:20px;bottom:20px;height:40px;gap:7px}.build-scene .wb-content-card{padding:6px;border-radius:6px}.build-scene .wb-content-card>i{height:7px;width:7px;margin-bottom:4px}.build-scene .wb-content-card>span{height:2px;margin-top:4px}
 .build-scene .wb-published{right:21px;bottom:13px;font-size:9px;padding:4px 7px}
 .build-scene .wb-phone{top:214px;width:94px;height:185px;padding:25px 10px 11px;border-radius:20px}
 .build-scene .wb-phone-nav{height:12px;margin-bottom:8px;padding-bottom:5px}.build-scene .wb-phone-nav>i{height:7px;width:7px}
 .build-scene .wb-phone-title{gap:3px}.build-scene .wb-phone-title>i{height:5px}
 .build-scene .wb-phone-copy{margin-top:6px;gap:2px}
 .build-scene .wb-phone-media{height:38px;margin-top:8px}.build-scene .wb-phone-cta{margin-top:7px;height:9px}.build-scene .wb-phone-cards{margin-top:8px;gap:3px}.build-scene .wb-phone-cards>i{height:12px}
 .build-scene .wb-ready{top:9px;right:31px}
 .build-scene .wb-cursor{top:-42px;--cursor-x:calc(100cqw - 66px);--cursor-y:108px}
 .build-stage[data-frame="3"] .wb-cursor{--cursor-y:176px}.build-stage[data-frame="4"] .wb-cursor{--cursor-y:211px}.build-stage[data-frame="5"] .wb-cursor{--cursor-y:190px}.build-stage[data-frame="6"] .wb-cursor,.build-stage[data-frame="8"] .wb-cursor,.build-stage[data-frame="9"] .wb-cursor{--cursor-x:64px;--cursor-y:248px}.build-stage[data-frame="7"] .wb-cursor{--cursor-y:298px}
}
@container(max-width:370px){
 .build-scene .wb-browser{top:38px;right:15px;height:257px}
 .build-scene .wb-browser-chrome{height:38px;left:17px;right:17px;gap:9px}.build-scene .wb-browser-dots{gap:4px}.build-scene .wb-browser-dots i{height:5px;width:5px}.build-scene .wb-address{height:21px}
 .build-scene .wb-page-nav{left:18px;right:18px;top:49px;height:23px}.build-scene .wb-site-mark{height:12px;width:12px}.build-scene .wb-nav-links{gap:5px}.build-scene .wb-nav-links>i{width:13px}.build-scene .wb-nav-links>b{width:28px;height:13px}
 .build-scene .wb-page-hero{left:18px;right:18px;top:83px;bottom:65px;gap:10px}
 .build-scene .wb-title-lines>i{height:9px}.build-scene .wb-title-lines{gap:5px}.build-scene .wb-body-lines{margin-top:9px;gap:4px}.build-scene .wb-body-lines>i{height:3px}
 .build-scene .wb-site-cta{width:72px;height:21px;margin-top:12px}.build-scene .wb-site-cta>span{width:29px}
 .build-scene .wb-media>svg{height:21px;width:21px}
 .build-scene .wb-content-grid{left:18px;right:18px;bottom:18px;height:35px;gap:6px}.build-scene .wb-content-card{padding:5px}.build-scene .wb-content-card>i{height:6px;width:6px;margin-bottom:3px}.build-scene .wb-content-card>span{margin-top:3px}
 .build-scene .wb-published{right:19px;bottom:11px;font-size:9px}.build-scene .wb-published>svg{width:11px;height:11px}
 .build-scene .wb-phone{top:177px;width:82px;height:157px;padding:22px 9px 9px;border-radius:19px}
 .build-scene .wb-phone-nav{height:10px;margin-bottom:6px;padding-bottom:4px}.build-scene .wb-phone-nav>i{height:6px;width:6px}.build-scene .wb-phone-title{gap:3px}.build-scene .wb-phone-title>i{height:4px}.build-scene .wb-phone-copy{margin-top:5px}
 .build-scene .wb-phone-media{height:29px;margin-top:6px}.build-scene .wb-phone-media>svg{height:12px;width:12px}.build-scene .wb-phone-cta{height:7px;margin-top:6px}.build-scene .wb-phone-cards{margin-top:7px}.build-scene .wb-phone-cards>i{height:10px}
 .build-scene .wb-ready{top:6px;right:18px}
 .build-scene .wb-cursor{top:-38px;--cursor-x:calc(100cqw - 53px);--cursor-y:97px}
 .build-stage[data-frame="3"] .wb-cursor{--cursor-y:157px}.build-stage[data-frame="4"] .wb-cursor{--cursor-y:188px}.build-stage[data-frame="5"] .wb-cursor{--cursor-y:170px}.build-stage[data-frame="6"] .wb-cursor,.build-stage[data-frame="8"] .wb-cursor,.build-stage[data-frame="9"] .wb-cursor{--cursor-x:58px;--cursor-y:220px}.build-stage[data-frame="7"] .wb-cursor{--cursor-y:266px}
}
@media(prefers-reduced-motion:reduce){.build-scene *{transition:none!important}.build-scene .wb-cursor,.build-scene .wb-launch-edge{display:none}}
