');-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}.ToolsArrowsChart{display:flex;margin:auto auto 2.5rem;position:relative}@media(max-width:800px){.ToolsArrowsChart{padding-left:0;padding-right:0}}.ToolsArrowsChart svg{fill:#e0e4e4;overflow:visible}.ToolsArrowsChart__svg{bottom:0;left:0;position:absolute;right:0;top:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.ToolsArrowsChart__axis{stroke:#484f73;stroke-width:1px}.ToolsArrowsChart__axis__label{fill-opacity:.5;dominant-baseline:middle;font-size:.66em;font-weight:600;letter-spacing:.1em;text-transform:uppercase}@keyframes gradientLineSegmentIn{0%{stroke-opacity:0}to{stroke-opacity:1}}.ToolsArrowsChart__tool--is-hidden{opacity:0;pointer-events:none}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line{stroke-opacity:0;animation:gradientLineSegmentIn .2s ease-out;animation-fill-mode:forwards}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-0{animation-delay:0s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-1{animation-delay:.03s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-2{animation-delay:.06s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-3{animation-delay:.09s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-4{animation-delay:.12s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-5{animation-delay:.15s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-6{animation-delay:.18s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-7{animation-delay:.21s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-8{animation-delay:.24s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-9{animation-delay:.27s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-10{animation-delay:.3s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-11{animation-delay:.33s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-12{animation-delay:.36s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-13{animation-delay:.39s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-14{animation-delay:.42s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-15{animation-delay:.45s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-16{animation-delay:.48s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-17{animation-delay:.51s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-18{animation-delay:.54s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-19{animation-delay:.57s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-20{animation-delay:.6s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-21{animation-delay:.63s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-22{animation-delay:.66s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-23{animation-delay:.69s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-24{animation-delay:.72s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-25{animation-delay:.75s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-26{animation-delay:.78s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-27{animation-delay:.81s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-28{animation-delay:.84s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-29{animation-delay:.87s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-30{animation-delay:.9s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-31{animation-delay:.93s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-32{animation-delay:.96s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-33{animation-delay:.99s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-34{animation-delay:1.02s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-35{animation-delay:1.05s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-36{animation-delay:1.08s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-37{animation-delay:1.11s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-38{animation-delay:1.14s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-39{animation-delay:1.17s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-40{animation-delay:1.2s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-41{animation-delay:1.23s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-42{animation-delay:1.26s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-43{animation-delay:1.29s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-44{animation-delay:1.32s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-45{animation-delay:1.35s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-46{animation-delay:1.38s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-47{animation-delay:1.41s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-48{animation-delay:1.44s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-49{animation-delay:1.47s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-50{animation-delay:1.5s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-51{animation-delay:1.53s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-52{animation-delay:1.56s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-53{animation-delay:1.59s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-54{animation-delay:1.62s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-55{animation-delay:1.65s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-56{animation-delay:1.68s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-57{animation-delay:1.71s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-58{animation-delay:1.74s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-59{animation-delay:1.77s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-60{animation-delay:1.8s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-61{animation-delay:1.83s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-62{animation-delay:1.86s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-63{animation-delay:1.89s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-64{animation-delay:1.92s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-65{animation-delay:1.95s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-66{animation-delay:1.98s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-67{animation-delay:2.01s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-68{animation-delay:2.04s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-69{animation-delay:2.07s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-70{animation-delay:2.1s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-71{animation-delay:2.13s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-72{animation-delay:2.16s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-73{animation-delay:2.19s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-74{animation-delay:2.22s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-75{animation-delay:2.25s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-76{animation-delay:2.28s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-77{animation-delay:2.31s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-78{animation-delay:2.34s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-79{animation-delay:2.37s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-80{animation-delay:2.4s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-81{animation-delay:2.43s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-82{animation-delay:2.46s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-83{animation-delay:2.49s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-84{animation-delay:2.52s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-85{animation-delay:2.55s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-86{animation-delay:2.58s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-87{animation-delay:2.61s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-88{animation-delay:2.64s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-89{animation-delay:2.67s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-90{animation-delay:2.7s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-91{animation-delay:2.73s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-92{animation-delay:2.76s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-93{animation-delay:2.79s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-94{animation-delay:2.82s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-95{animation-delay:2.85s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-96{animation-delay:2.88s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-97{animation-delay:2.91s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-98{animation-delay:2.94s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-99{animation-delay:2.97s}.ToolsArrowsChart__tool--is-hovering .ToolsArrowsChart__year{fill-opacity:1}.ToolsArrowsChart__tool--is-hovering-other text{fill-opacity:0;stroke-opacity:0}.ToolsArrowsChart__tool--is-hovering-other .ToolsArrowsChart__gradient-line{stroke:#232840;stroke-width:1!important}.ToolsArrowsChart__tool--is-hovering-other .ToolsArrowsChart__now{fill-opacity:.2!important}.ToolsArrowsChart__hover-background{stroke-width:30px;stroke:transparent;fill:none}.ToolsArrowsChart__year{fill-opacity:0}.ToolsArrowsChart__gradient-line{fill:none;stroke-width:4.5px;stroke-linecap:round;stroke-linejoin:round;mix-blend-mode:lighten;pointer-events:none}@keyframes fadeInSlideUp{0%{fill-opacity:0;transform:translateY(1em)}to{fill-opacity:1;transform:translateY(0)}}.ToolsArrowsChart__year{font-size:.8em;font-weight:600;pointer-events:none}.ToolsArrowsChart__label-background{stroke:#1a1f35;stroke-width:3px;font-size:.8em;font-weight:600}.ToolsArrowsChart__label{font-size:.8em;font-weight:600}.ToolsArrowsChart__label__box{cursor:default}.ToolsArrowsChart__label__box text{pointer-events:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ToolsArrowsChart__listener{fill:transparent}.ToolsArrowsChart__label{cursor:pointer}.ToolsArrowsChart__label:hover{fill:#fff}.hide_visually{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.legend{margin-top:-6rem;max-width:25rem;position:absolute;right:0}.legend_label{fill:#e1e1e1;text-anchor:start;box-sizing:border-box;font-size:.8rem;line-height:1.25rem;margin-bottom:0;margin-top:0;max-width:12rem}.legend_label.left{border-left:1px solid #e1e1e1;padding-left:.5rem;padding-top:.25rem}.legend_label.right{border-right:1px solid #e1e1e1;padding-bottom:.35rem;padding-right:.5rem;padding-top:.1rem;text-align:right}.legend_colors{background-position:top;background-repeat:no-repeat;background-size:100% 100%;border-left:1px solid #e1e1e1;border-right:1px solid #e1e1e1;display:block;height:1rem;margin-top:0;width:12rem}
The State of CSS 2021: CSS Frameworks Springe zu Inhalt
Bibliotheken, die Dir vordefinierte Komponenten und Styles liefern.
Einstufung von Bekanntheit, Interesse und Zufriedenheit.
Zufriedenheit Interesse Usage Bekanntheit
Technologien mit weniger als 10% Bekanntheit sind nicht inkludiert. Jeder Wert wird wie folgt definiert:
Zufriedenheit: würde wieder nutzen / (würde wieder nutzen + würde nicht wieder nutzen )
Interesse: will lernen / (will lernen + kein Interesse )
Nutzung: (würde wieder nutzen + würde nicht wieder nutzen ) / total
Bekanntheit: (total - nie davon gehört ) / total
Das Ranking-Chart kann gewechselt werden zwischen Zufriedenheit, Interesse, Nutzung und Bekanntheit, sodass du ein besseres Bild erhältst.
Überblick über Meinungen zu Technologien, abgefragt über die Zeit.
Würde ich wieder verwenden
Würde ich nicht verwenden
Interessiert
Kein Interesse
Nie davon gehört
Technologien mit nur einem Jahr Daten werden nicht aufgeführt.
Dieses Diagramm teilt positive ('will lernen' und 'würde es wieder verwenden') gegenüber
negative ('kein Interesse' und 'würde ich nicht wieder verwenden') Erfahrungen dar.
Die Balkendicke stellt die Anzahl der Befragten dar, die sich einer Technologie bewusst sind.
We asked members of the CSS community to share their “pick of the year”
All major browsers shipped support for aspect-ratio in 2021.
At first I underestimated it, but there are so many
situations where this property comes in handy.
We asked members of the CSS community to share their “pick of the year”
Front-end developer from Vienna, and creator of htmhell.dev .