');-webkit-background-clip:text;background-clip:text;color:transparent;text-align:right}.Logo__Container .Logo .text{color:#a3cacd;font-size:14.4px;font-style:italic}.Logo__Container .Logo .stateof{left:0;top:0}.Logo__Container .Logo .year{bottom:0;right:0;text-align:right}.Logo__Container .Logo .triangle{left:4.8px;top:54px;width:43.2px}.Logo__Container .Logo .triangle .inner{border:30px solid transparent;border-bottom-color:#3c52d1;border-width:0 21.6px 30px;width:100%}.Logo__Container .Logo .stripe{background:#a3cacd;height:1.5px;width:30px}.Logo__Container .Logo .stripe1{left:28.8px;top:74.4px}.Logo__Container .Logo .stripe2{left:26.4px;top:80.4px}.Logo__Container .Logo .stripe3{left:24px;top:86.4px}.Logo__Container .Logo .stripe4{left:26.4px;top:92.4px}.Logo__Container .Logo .blobs{align-items:center;display:flex;filter:url(#blob);height:60px;justify-content:center;left:30px;top:36px;transform:rotate(-20deg);width:120px}.Logo__Container .Logo .blob{background:#a3cacd;border-radius:50%;height:100%;width:50%}.Logo__Container .Logo .blob2{transform:translateX(-12px)}.Logo__Container .Logo .circle{left:calc(50% - 3px);top:50%;width:76.8px}.Logo__Container .Logo .circle .inner{transform:translateX(-50%) translateY(-50%)}.Logo__Container .Logo .circle .inner div{border:3px dashed #576de7;border-radius:100%;box-sizing:content-box;height:0;padding-bottom:100%;width:100%}.Logo__Container .Logo .frame{right:26.4px;top:50%;width:64.8px}.Logo__Container .Logo .frame .inner{transform:translateY(-50%) rotate(45deg)}.Logo__Container .Logo .frame .inner div{border:3px solid #576de7;box-shadow:2.1px 2.1px 0 0 #a3cacd;box-sizing:content-box;height:0;padding-bottom:100%;width:100%}.Logo__Container .Logo .tilde{font-size:33.6px;line-height:1}.Logo__Container .Logo .tilde1{right:12px;top:24px}.Logo__Container .Logo .tilde2{right:9.6px;top:30px}.Logo__Container .Logo .tilde3{right:7.2px;top:36px}.Logo__Container .Logo--animated .c>div{animation-delay:.1s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .s1>div{animation-delay:.2s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .s2>div{animation-delay:.3s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .circle>div>div{animation-delay:.5s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:popspin;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0)}.Logo__Container .Logo--animated .frame{animation-delay:.8s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slidetop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0) translateY(-60px) rotate(180deg)}.Logo__Container .Logo--animated .blob1{animation-delay:.9s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .blob2{animation-delay:1.1s;animation-duration:.5s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:blob;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-100%)}.Logo__Container .Logo--animated .stripe1{animation-delay:1.4s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(12px)}.Logo__Container .Logo--animated .stripe2{animation-delay:1.5s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(12px)}.Logo__Container .Logo--animated .stripe3{animation-delay:1.6s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(12px)}.Logo__Container .Logo--animated .stripe4{animation-delay:1.7s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(12px)}.Logo__Container .Logo--animated .tilde1{animation-delay:1.9s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-12px)}.Logo__Container .Logo--animated .tilde2{animation-delay:2s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-12px)}.Logo__Container .Logo--animated .tilde3{animation-delay:2.1s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-12px)}.Logo__Container .Logo--animated .triangle{animation-delay:2.8s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:popspin;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0)}.Logo__Container .Logo--animated .stateof{animation-delay:2.2s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:appear;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0}.Logo__Container .Logo--animated .year{animation-delay:2.5s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:appear;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0}}@media screen and (min-width:600px)and (max-width:999px){.Logo__Container .Logo{height:200px;position:relative;text-shadow:none;width:400px}.Logo__Container .Logo>*{position:absolute}.Logo__Container .Logo .letter{color:#f95db2;font-size:144px;font-weight:800;line-height:1}.Logo__Container .Logo .c{left:48px;text-shadow:5px 5px 0 #576de7;top:50%;transform:translateY(-50%)}.Logo__Container .Logo .s1{left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}.Logo__Container .Logo .s2{right:48px;top:50%;transform:translateY(-50%)}.Logo__Container .Logo .s2 div{background:url('data:image/svg+xml;utf8, ');-webkit-background-clip:text;background-clip:text;color:transparent;text-align:right}.Logo__Container .Logo .text{color:#a3cacd;font-size:24px;font-style:italic}.Logo__Container .Logo .stateof{left:0;top:0}.Logo__Container .Logo .year{bottom:0;right:0;text-align:right}.Logo__Container .Logo .triangle{left:8px;top:90px;width:72px}.Logo__Container .Logo .triangle .inner{border:50px solid transparent;border-bottom-color:#3c52d1;border-width:0 36px 50px;width:100%}.Logo__Container .Logo .stripe{background:#a3cacd;height:2.5px;width:50px}.Logo__Container .Logo .stripe1{left:48px;top:124px}.Logo__Container .Logo .stripe2{left:44px;top:134px}.Logo__Container .Logo .stripe3{left:40px;top:144px}.Logo__Container .Logo .stripe4{left:44px;top:154px}.Logo__Container .Logo .blobs{align-items:center;display:flex;filter:url(#blob);height:100px;justify-content:center;left:50px;top:60px;transform:rotate(-20deg);width:200px}.Logo__Container .Logo .blob{background:#a3cacd;border-radius:50%;height:100%;width:50%}.Logo__Container .Logo .blob2{transform:translateX(-20px)}.Logo__Container .Logo .circle{left:calc(50% - 5px);top:50%;width:128px}.Logo__Container .Logo .circle .inner{transform:translateX(-50%) translateY(-50%)}.Logo__Container .Logo .circle .inner div{border:5px dashed #576de7;border-radius:100%;box-sizing:content-box;height:0;padding-bottom:100%;width:100%}.Logo__Container .Logo .frame{right:44px;top:50%;width:108px}.Logo__Container .Logo .frame .inner{transform:translateY(-50%) rotate(45deg)}.Logo__Container .Logo .frame .inner div{border:5px solid #576de7;box-shadow:3.5px 3.5px 0 0 #a3cacd;box-sizing:content-box;height:0;padding-bottom:100%;width:100%}.Logo__Container .Logo .tilde{font-size:56px;line-height:1}.Logo__Container .Logo .tilde1{right:20px;top:40px}.Logo__Container .Logo .tilde2{right:16px;top:50px}.Logo__Container .Logo .tilde3{right:12px;top:60px}.Logo__Container .Logo--animated .c>div{animation-delay:.1s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .s1>div{animation-delay:.2s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .s2>div{animation-delay:.3s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .circle>div>div{animation-delay:.5s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:popspin;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0)}.Logo__Container .Logo--animated .frame{animation-delay:.8s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slidetop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0) translateY(-100px) rotate(180deg)}.Logo__Container .Logo--animated .blob1{animation-delay:.9s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .blob2{animation-delay:1.1s;animation-duration:.5s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:blob;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-100%)}.Logo__Container .Logo--animated .stripe1{animation-delay:1.4s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(20px)}.Logo__Container .Logo--animated .stripe2{animation-delay:1.5s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(20px)}.Logo__Container .Logo--animated .stripe3{animation-delay:1.6s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(20px)}.Logo__Container .Logo--animated .stripe4{animation-delay:1.7s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(20px)}.Logo__Container .Logo--animated .tilde1{animation-delay:1.9s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-20px)}.Logo__Container .Logo--animated .tilde2{animation-delay:2s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-20px)}.Logo__Container .Logo--animated .tilde3{animation-delay:2.1s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-20px)}.Logo__Container .Logo--animated .triangle{animation-delay:2.8s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:popspin;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0)}.Logo__Container .Logo--animated .stateof{animation-delay:2.2s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:appear;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0}.Logo__Container .Logo--animated .year{animation-delay:2.5s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:appear;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0}}@media screen and (min-width:1000px){.Logo__Container .Logo{height:320px;position:relative;text-shadow:none;width:640px}.Logo__Container .Logo>*{position:absolute}.Logo__Container .Logo .letter{color:#f95db2;font-size:230.4px;font-weight:800;line-height:1}.Logo__Container .Logo .c{left:76.8px;text-shadow:8px 8px 0 #576de7;top:50%;transform:translateY(-50%)}.Logo__Container .Logo .s1{left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}.Logo__Container .Logo .s2{right:76.8px;top:50%;transform:translateY(-50%)}.Logo__Container .Logo .s2 div{background:url('data:image/svg+xml;utf8, ');-webkit-background-clip:text;background-clip:text;color:transparent;text-align:right}.Logo__Container .Logo .text{color:#a3cacd;font-size:38.4px;font-style:italic}.Logo__Container .Logo .stateof{left:0;top:0}.Logo__Container .Logo .year{bottom:0;right:0;text-align:right}.Logo__Container .Logo .triangle{left:12.8px;top:144px;width:115.2px}.Logo__Container .Logo .triangle .inner{border:80px solid transparent;border-bottom-color:#3c52d1;border-width:0 57.6px 80px;width:100%}.Logo__Container .Logo .stripe{background:#a3cacd;height:4px;width:80px}.Logo__Container .Logo .stripe1{left:76.8px;top:198.4px}.Logo__Container .Logo .stripe2{left:70.4px;top:214.4px}.Logo__Container .Logo .stripe3{left:64px;top:230.4px}.Logo__Container .Logo .stripe4{left:70.4px;top:246.4px}.Logo__Container .Logo .blobs{align-items:center;display:flex;filter:url(#blob);height:160px;justify-content:center;left:80px;top:96px;transform:rotate(-20deg);width:320px}.Logo__Container .Logo .blob{background:#a3cacd;border-radius:50%;height:100%;width:50%}.Logo__Container .Logo .blob2{transform:translateX(-32px)}.Logo__Container .Logo .circle{left:calc(50% - 8px);top:50%;width:204.8px}.Logo__Container .Logo .circle .inner{transform:translateX(-50%) translateY(-50%)}.Logo__Container .Logo .circle .inner div{border:8px dashed #576de7;border-radius:100%;box-sizing:content-box;height:0;padding-bottom:100%;width:100%}.Logo__Container .Logo .frame{right:70.4px;top:50%;width:172.8px}.Logo__Container .Logo .frame .inner{transform:translateY(-50%) rotate(45deg)}.Logo__Container .Logo .frame .inner div{border:8px solid #576de7;box-shadow:5.6px 5.6px 0 0 #a3cacd;box-sizing:content-box;height:0;padding-bottom:100%;width:100%}.Logo__Container .Logo .tilde{font-size:89.6px;line-height:1}.Logo__Container .Logo .tilde1{right:32px;top:64px}.Logo__Container .Logo .tilde2{right:25.6px;top:80px}.Logo__Container .Logo .tilde3{right:19.2px;top:96px}.Logo__Container .Logo--animated .c>div{animation-delay:.1s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .s1>div{animation-delay:.2s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .s2>div{animation-delay:.3s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .circle>div>div{animation-delay:.5s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:popspin;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0)}.Logo__Container .Logo--animated .frame{animation-delay:.8s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slidetop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0) translateY(-160px) rotate(180deg)}.Logo__Container .Logo--animated .blob1{animation-delay:.9s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .blob2{animation-delay:1.1s;animation-duration:.5s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:blob;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-100%)}.Logo__Container .Logo--animated .stripe1{animation-delay:1.4s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(32px)}.Logo__Container .Logo--animated .stripe2{animation-delay:1.5s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(32px)}.Logo__Container .Logo--animated .stripe3{animation-delay:1.6s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(32px)}.Logo__Container .Logo--animated .stripe4{animation-delay:1.7s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(32px)}.Logo__Container .Logo--animated .tilde1{animation-delay:1.9s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-32px)}.Logo__Container .Logo--animated .tilde2{animation-delay:2s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-32px)}.Logo__Container .Logo--animated .tilde3{animation-delay:2.1s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-32px)}.Logo__Container .Logo--animated .triangle{animation-delay:2.8s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:popspin;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0)}.Logo__Container .Logo--animated .stateof{animation-delay:2.2s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:appear;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0}.Logo__Container .Logo--animated .year{animation-delay:2.5s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:appear;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0}}.Feature__Links,.Feature__Support{font-size:.9rem;font-weight:400}.FTBlock__Links__Item{margin-bottom:6.6666666667px}.Features__Overview{display:flex;flex-wrap:wrap;justify-content:space-between}.Features__Overview__Item{display:grid;grid-template-rows:210px 50px;height:260px;margin-bottom:40px;width:240px}.Features__Overview__Item__Footer{align-items:center;border-bottom:2px solid #9ac6c9;border-top:2px solid #9ac6c9;display:flex;font-size:.9rem;font-weight:800;justify-content:center}.Features__Overview__Item__Footer:hover{background:#9ac6c9;color:#fff;cursor:pointer}.capture .FTBlock__Description{grid-column:1/3}@media screen and (max-width:599px){.FTBlock__Resources{margin-top:20px}}.FTBlock__Resources h3{font-size:1rem;margin-bottom:10px}.FTBlock__Resources ul{padding-left:20px}.capture .FTBlock__Resources{display:none}.OpinionScaleChart{padding-top:20px}.OpinionScaleChart svg{overflow:visible}.FeaturesOverviewChart{height:100%}@media screen and (max-width:599px){.FeaturesSectionOverviewChart{height:200px;height:400px}}@media screen and (min-width:600px)and (max-width:999px){.FeaturesSectionOverviewChart{height:500px}}@media screen and (min-width:1000px){.FeaturesSectionOverviewChart{height:500px}}.ToolsOverviewCirclePackingChart svg{overflow:visible}@media screen and (max-width:599px){.TechnologiesOverviewChart{height:800px}}@media screen and (min-width:600px)and (max-width:999px){.TechnologiesOverviewChart{height:800px}}@media screen and (min-width:1000px){.TechnologiesOverviewChart{height:800px}}.Scatterplot__Crosshair__Line{stroke-dasharray:8,4;animation:svgAnts 50s linear infinite;animation-fill-mode:forwards}.text-highlight{background:#41c7c7;background:#000}.text-green,.text-highlight{border-radius:15px;color:#232840;display:inline-block;font-weight:800;padding:0 12px}.text-green{background:#41c7c7;background:#85eba2}.text-pink{background:#41c7c7;background:#f95db2}.text-pink,.text-pink-light{border-radius:15px;color:#232840;display:inline-block;font-weight:800;padding:0 12px}.text-pink-light{background:#41c7c7;background:#ec75cb}.text-pink-lighter{background:#41c7c7;background:#d68df0}.text-pink-lighter,.text-red{border-radius:15px;color:#232840;display:inline-block;font-weight:800;padding:0 12px}.text-red{background:#41c7c7;background:#fe6a6a}.text-blue{background:#41c7c7;background:#576de7}.text-blackred,.text-blue{border-radius:15px;color:#232840;display:inline-block;font-weight:800;padding:0 12px}.text-blackred{background:#41c7c7;background:rgba(0,0,0,.3);border:1px solid #fe6a6a;color:#41c7c7}.text-bold{font-weight:800}.Chip{display:block;height:12px;margin-right:7px;overflow:hidden;position:relative;width:12px}.Chip__Inner{display:block;height:100%;width:100%}.Chip--split .Chip__Inner{bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}.Chip--split .Chip__Inner:last-child{height:100%;transform:translateX(-3px) translateY(5px) rotate(-45deg);width:200%;z-index:2}.react-tabs{-webkit-tap-highlight-color:transparent}.react-tabs__tab-list{border-bottom:1px solid #aaa;margin:0 0 10px;padding:0}.react-tabs__tab{border:1px solid transparent;border-bottom:none;bottom:-1px;cursor:pointer;display:inline-block;list-style:none;padding:6px 12px;position:relative}.react-tabs__tab--selected{background:#fff;border-color:#aaa;border-radius:5px 5px 0 0;color:#000}.react-tabs__tab--disabled{color:GrayText;cursor:default}.react-tabs__tab:focus{border-color:#0188fe;box-shadow:0 0 5px #0188fe;outline:none}.react-tabs__tab:focus:after{background:#fff;bottom:-5px;content:"";height:5px;left:-4px;position:absolute;right:-4px}.react-tabs__tab-panel{display:none}.react-tabs__tab-panel--selected{display:block}
State of React Native 2023: Styling Skip to content Retention Interest Usage Awareness
Technologies with less than 10% awareness not included. Each ratio is defined as follows:
Retention = would use again
( would use again + would not use again )
Interest = want to learn
( want to learn + not interested )
Usage = ( would use again + would not use again )
total
Awareness = ( total - never heard )
total
Overview of opinions on the technologies surveyed over time.
Would use again
Would not use
Interested
Not interested
Never heard
Technologies with only one year of data are not included.
This chart splits positive (“want to learn”, “would use again”) vs
negative (“not interested”, “would not use again”) experiences on
both sides of the central axis.
Bar thickness represents the number of respondents aware of a technology.
Click on the individual label to see more details.
We asked members of the React Native community to share their opinions about the results
The number of styling libraries doubled in 2023. Does this mean that developers are still looking for fresh approaches, or are they not satisfied with the current ones? The most important aspect for every library is to be cross-platform, especially as React Native extends beyond mobile, and to support advanced theming, which will easily style complex applications. StyleSheet remains the most widely used solution, but there are some rising stars. Tamagui tripled its number of users, and NativeWind is gaining increasing popularity as we enjoy styling cross-platform apps with Tailwind. Here, we observe an interesting trend: some developers are finally moving away from StyleSheet and finding their new preferred solutions. We shouldn’t forget about some new libraries like Unistyles, gluestack or Dripsy. Each of them promises scalability with different APIs. The overall happiness with styling in React Native is satisfying for the creators. Almost 90% of developers feel positive or neutral. This means that we, the library authors, did a good job in the past year, and the doubled number of libraries could finally meet the needs of the market.
We asked members of the React Native community to share their opinions about the results
CTO at Codemask, author of rect-native-unistyles