/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}html{--aqua:#3cdddd;--pink:#ff1ac6;--white:#fff;--light:hsla(0,0%,100%,0.7);--black:#131920;--dark:rgba(240,240,255,0.06);--mid:rgba(240,240,255,0.15);--gutter:2rem;--radius:5px;--max-width:1500px;--font-size:131.25%;--roboto:"Roboto",sans-serif;--space-mono:"Space Mono",monospace;width:100%;height:100%;font:normal 400 var(--font-size)/1.5 var(--roboto)}html ::-moz-selection{color:var(--black);background:var(--white)}html ::selection{color:var(--black);background:var(--white)}@media (max-width:1500px){html{--font-size:118.75%}}@media (max-width:1000px){html{--font-size:100%}}body{background:var(--black);color:var(--light);min-height:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body *,body :after,body :before{box-sizing:border-box}.section{--multiplier:4;--padding:calc(var(--gutter)*var(--multiplier));padding:var(--padding) 0;outline:none}.section--enclosed{box-shadow:0 1px var(--dark)}.section--small{padding:calc(var(--gutter)*2) 0}@media (max-width:1200px){.section{--multiplier:3}}@media (max-width:600px){.section{--multiplier:2}}.grid{--multiplier:2;--padding:calc(var(--gutter)*var(--multiplier));display:grid;grid-auto-flow:column;grid-auto-columns:1fr;grid-gap:var(--gutter);margin:0 auto;padding:0 var(--padding);width:100%;max-width:var(--max-width)}.grid--center{justify-items:center}@media (max-width:800px){.grid{--multiplier:1}}@media (max-width:600px){.grid{grid-auto-flow:row}}.hidden{position:absolute;width:0;height:0;visibility:hidden}@font-face{font-family:Roboto;src:url(../fonts/roboto-regular.woff2) format("woff2"),url(../fonts/roboto-regular.woff) format("woff");font-style:normal;font-weight:400}@font-face{font-family:Roboto;src:url(../fonts/roboto-bold.woff2) format("woff2"),url(../fonts/roboto-bold.woff) format("woff");font-style:normal;font-weight:700}@font-face{font-family:Space Mono;src:url(../fonts/space-mono-regular.woff2) format("woff2"),url(../fonts/space-mono-regular.woff) format("woff");font-style:normal;font-weight:400}.spacing-large{margin-bottom:calc(var(--gutter)*2)}.spacing-small{margin-bottom:calc(var(--gutter)/2)}.center{text-align:center}.color-white{color:var(--white)}.button{display:inline-block;margin:0 0 var(--gutter);padding:.9em 1.5em 1em;background:var(--white);color:var(--black);line-height:1em;text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:2px solid var(--white);border-radius:var(--radius);vertical-align:middle;transition:transform .4s ease}.button--transparent{background:transparent;color:var(--white)}.button:hover{transform:translateY(-2px)}.button:active{transition:none;transform:translateY(-1px)}.nobutton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;padding:0;border:none;color:currentColor;font:inherit;border-radius:0;cursor:pointer;outline:none}.symbol{width:100%;height:100%;fill:currentColor}.heading{margin:0 0 .5em;text-rendering:optimizeLegibility}.heading--large{font-size:2.7em;line-height:1.2}@media (max-width:600px){.heading--large{font-size:2.2em}}.heading--medium{font-size:1.8em;line-height:1.3}.heading--small{font-size:1.4em;line-height:1.4}.text{margin:0 0 .5em}.text--large{font-size:1.1em}.header{position:relative;display:flex;align-items:center;min-height:100vh;background-image:radial-gradient(farthest-side at 0 0,rgba(255,26,198,.3),rgba(255,26,198,0)),radial-gradient(farthest-side at 100% 0,rgba(60,221,221,.4),rgba(60,221,221,0)),radial-gradient(farthest-side at 50% 0,rgba(255,26,198,.1),rgba(255,26,198,0));text-align:center;overflow:hidden}@-webkit-keyframes header__arrow{0%{transform:translateY(0) scale(1);opacity:1}40%{transform:translateY(15px) scale(.95);opacity:0}60%{transform:translateY(-15px) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes header__arrow{0%{transform:translateY(0) scale(1);opacity:1}40%{transform:translateY(15px) scale(.95);opacity:0}60%{transform:translateY(-15px) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.header__inner{position:relative;max-width:850px}@media (max-width:700px){.header__heading br{display:none}}.header__arrow{--size:1.4em;display:block;bottom:var(--gutter);width:var(--size);height:var(--size);-webkit-animation:header__arrow 1.5s linear infinite;animation:header__arrow 1.5s linear infinite}.header__arrow,.shaper{position:absolute;left:calc(50% - var(--size)/2)}.shaper{--modifier:1;top:calc(50% - var(--size)/2);-webkit-animation-name:shaper__fadeIn;animation-name:shaper__fadeIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:cubic-bezier(.22,1,.32,1);animation-timing-function:cubic-bezier(.22,1,.32,1);-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;transform:translate(calc(var(--tx)/var(--modifier)),var(--ty))}@-webkit-keyframes shaper__fadeIn{0%{opacity:0;transform:rotate(calc(var(--rotate)*2))}10%{opacity:0}}@keyframes shaper__fadeIn{0%{opacity:0;transform:rotate(calc(var(--rotate)*2))}10%{opacity:0}}@media (max-width:1200px){.shaper{--modifier:1.4}}@media (max-width:800px){.shaper{--modifier:2}}@media (max-width:600px){.shaper{--modifier:2.4}}.shaper:first-child{-webkit-animation-delay:.2666666667s;animation-delay:.2666666667s}.shaper:nth-child(2){-webkit-animation-delay:.3333333333s;animation-delay:.3333333333s}.shaper:nth-child(3){-webkit-animation-delay:.4s;animation-delay:.4s}.shaper:nth-child(4){-webkit-animation-delay:.4666666667s;animation-delay:.4666666667s}.shaper:nth-child(5){-webkit-animation-delay:.5333333333s;animation-delay:.5333333333s}.shaper:nth-child(6){-webkit-animation-delay:.6s;animation-delay:.6s}.shaper:nth-child(7){-webkit-animation-delay:.6666666667s;animation-delay:.6666666667s}.shape{width:var(--size);height:var(--size);transform:translateY(calc(var(--criterion, 0)*-2*var(--size))) rotate(calc((1 - var(--criterion, 0)*-2)*var(--rotate)));will-change:transform}.shape--circle{border-radius:100%;overflow:hidden}.shape--triangle{-webkit-clip-path:polygon(50% 10%,0 100%,100% 100%);clip-path:polygon(50% 10%,0 100%,100% 100%)}.icon{--size:4em;position:relative;display:flex;align-items:center;margin:0 0 var(--gutter);width:var(--size);height:var(--size)}.timer{width:100%;height:100%}.timer__body,.timer__hand{fill:var(--aqua)}.timer__lines{fill:var(--pink)}.switches{width:90%;height:90%}.switches__top .switches__body,.switches__top .switches__dot{fill:var(--aqua)}.switches__top .switches__dot{transform:translateX(var(--tx,0))}.switches__bottom .switches__body,.switches__bottom .switches__dot{fill:var(--pink)}.switches__bottom .switches__dot{transform:translateX(calc(var(--tx, 0)*-1))}.devices{width:92%;height:92%}.devices__desktop,.devices__mobile{fill:var(--aqua)}.devices__tablet{fill:var(--pink)}.dots{--size:26px;--rows:3;--offset:10%;overflow:hidden}.dots__inner{display:grid;grid-template-columns:calc(var(--size)*15) 1fr calc(var(--size)*15);width:calc(100% + var(--offset));height:calc(var(--size)*var(--rows));transform:translateX(calc(var(--criterion)*var(--offset)*-1));will-change:transform}.dots__pattern{background:url(../images/dot.svg);background-size:var(--size) var(--size)}.editor{display:grid;grid-template-rows:auto 1fr}.editor__header{display:flex;padding:0 calc(var(--gutter)/2);background:var(--dark);border-radius:var(--radius) var(--radius) 0 0}.editor__tab{padding:calc(var(--gutter)/2);transition:box-shadow .4s ease}.editor__tab.active{box-shadow:inset 0 -4px var(--pink)}.editor__body{display:none;background:var(--mid);overflow:auto;-webkit-overflow-scrolling:touch;border-radius:0 0 var(--radius) var(--radius)}.editor__body.visible{display:block}.code{margin:0;font-size:.9em}.code code{display:block;padding:calc(var(--gutter)/2);background:transparent;font-family:var(--space-mono)}.code__function{color:#5fb0f1}.code__selector{color:#d19a66}.code__property,.code__string{color:#98c379}.code__builtin{color:#e6c07b}.code__keyword{color:#c678dd}.code__boolean{color:#56b6c2}.preview{position:relative;display:flex;justify-content:center;align-items:center;height:100%;min-height:200px;background:var(--dark);border-radius:var(--radius)}.preview__shape{transform:translateX(var(--tx)) rotate(var(--r));transition:transform .1s linear}.list{border:1px solid var(--dark);border-radius:var(--radius)}.list__item{position:relative;display:flex;align-items:center;padding:calc(var(--gutter)/2);background-clip:padding-box;box-shadow:0 1px 0 var(--dark);color:var(--white);text-decoration:none;overflow:hidden;transition:background .4s ease;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}.list__item:first-child{border-radius:calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0}.list__item:last-child{border-bottom:none;border-radius:0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px)}.list__item:hover{background:var(--aqua)}.list__item:before{--size:1000px;--scale:0;--opacity:0;content:"";position:absolute;left:calc(var(--x) - var(--size)/2);top:calc(var(--y) - var(--size)/2);width:var(--size);height:var(--size);background:radial-gradient(circle closest-side,var(--pink),transparent);transform:scale(var(--scale));opacity:var(--opacity);transition:transform .8s cubic-bezier(.22,1,.32,1),opacity .8s cubic-bezier(.22,1,.32,1)}.list__item:hover:before{--scale:1;--opacity:1}.list__icon{--size:24px;margin:0 calc(var(--gutter)/3) 0 0;width:var(--size);height:var(--size)}.link,.list__icon,.list__label{position:relative}.link{display:inline-block;color:currentColor;text-decoration:none}.link:after,.link:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;transform-origin:left center}.link:before{background:var(--pink)}.link:after{--scale:0;background:var(--aqua);transform:scaleX(var(--scale));transition:transform .5s cubic-bezier(.22,1,.32,1) .1s}.link:hover:after{--scale:1}.social{--size:3em;display:inline-flex;justify-content:center;align-items:center;margin:0 calc(var(--gutter)/10);width:var(--size);height:var(--size);background:var(--dark);text-decoration:none;border-radius:100%;transition:transform .4s ease}.social:hover{transform:translateY(-2px)}.social:active{transform:translateY(-1px);transition:none}.social .symbol{width:50%;height:50%}