html{line-height:1.15;-webkit-text-size-adjust:100%}
body{margin:0}
main{display:block}
h1{font-size:2em;margin:0.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;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:-0.25em}

sup{top:-0.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}
button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{padding:0.35em 0.75em 0.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}
template{display:none}
[hidden]{display:none}

@charset "UTF-8";.argument{margin:0.5rem 0;padding-left:1.5rem}
.argument__type{color:#777}
.argument__type,.argument__description{margin-left:0.4rem}
.argument__type::before,.argument__description::before{content:'·';padding-right:0.4rem;display:inline-block}
.button-group::after{content:'';display:block;clear:both}
.button-group .button{float:left;border-radius:0;margin-left:-1px}
.button-group .button:first-child{ border-radius:5px 0 0 5px}
.button-group .button:last-child{ border-radius:0 5px 5px 0}
.buy-button{display:block;margin-bottom:10px;line-height:1.3rem;border-radius:8px;padding:10px 100px 10px 10px;position:relative;text-align:center}
.buy-button__title{font-weight:bold}
.buy-button__for{display:block;font-style:italic}
.buy-button__price{font-size:1.6rem;background:#888;color:white;position:absolute;right:0;top:0;height:100%;width:80px;border-radius:0 8px 8px 0;text-align:center;line-height:64px}
.buy-button__price__dollar{font-size:1.4rem;margin-right:3px;vertical-align:top}

@media screen and (min-width:768px){.buy-button-trio{margin-top:40px;margin-bottom:50px}
.buy-button-trio::after{content:'';display:block;clear:both}
.buy-button-trio .buy-button{float:left;width:31.33%;margin-right:3%;padding:20px 0 0;transition:transform 0.2s}
.buy-button-trio .buy-button:nth-child(3){margin-right:0}
.buy-button-trio .buy-button > span{display:block;padding-left:10px;padding-right:10px}
.buy-button-trio .buy-button__project,.buy-button-trio .buy-button__license{font-size:1.1rem}
.buy-button-trio .buy-button__title{font-size:1.9rem;line-height:1.2}
.buy-button-trio .buy-button__license{margin-bottom:15px}
.buy-button-trio .buy-button__for{margin-bottom:20px;font-size:1.1rem}
.buy-button-trio .buy-button__price{position:relative;width:auto;font-size:2.4rem;line-height:1.3;padding-top:15px;padding-bottom:10px;border-radius:0 0 8px 8px}
.buy-button-trio .buy-button__was-price{display:block;padding-bottom:10px}
.buy-button-trio .buy-button__price__dollar{position:relative;top:8px}
.buy-button-trio .buy-button:hover{transform:translateY(-5px)}
}
.call-out{border-top:2px solid #ED2;border-bottom:2px solid #ED2;padding-left:40px;position:relative;margin:20px 0}
.call-out::before{content:'i';display:block;width:20px;height:20px;position:absolute;left:5px;top:20px;background:#ED2;border-radius:50%;text-align:center;color:white;font-family:Consolas,Georgia,serif;font-style:italic}
.call-out h2{margin-top:0;padding-top:10px;border-top:none}
.call-out--chill{ border-color:#8C8}
.call-out--chill::before{ background:#8C8}
.call-out--big-copy p,.call-out--big-copy li,.call-out--big-copy li::before{font-size:1.2rem;line-height:1.2}
.call-out--big-copy ol{list-style:none}
.quick-start-list li{position:relative;counter-increment:call-out-big-copy-item}
.quick-start-list li::before{content:counter(call-out-big-copy-item) ".";position:absolute;left:-1.2rem;font-size:1.2rem;font-weight:bold}
.quick-start-list{list-style:none}

@media screen and (min-width:768px){.call-out{border:2px solid #ED2;padding:10px 20px 10px 80px;border-radius:6px;position:relative;margin:20px 0}
.call-out--chill{ border-color:#8C8}
.call-out::before{width:40px;height:40px;left:20px;top:30px;font-size:1.9rem;line-height:46px}
}
.chunky-button{display:block;padding:10px;margin-bottom:10px;border-radius:5px;text-decoration:none;line-height:1}
.chunky-button:hover{ text-decoration:none}
.chunky-button--fill{background-image:linear-gradient(hsla(0,0%,0%,0),hsla(0,0%,0%,0.15))}
.chunky-button__icon{margin-right:10px}
.chunky-button__icon svg{width:48px;height:48px;vertical-align:bottom}
.chunky-button__text{display:inline-block}
.chunky-button__text__plain{display:block}
.chunky-button__text__strong{display:block;font-size:1.4rem;font-weight:bold}
.chunky-button--outline{padding-top:8px;padding-bottom:8px;border:2px solid}
.duo::after{content:'';display:block;clear:both}
.duo__cell{margin-bottom:10px}
.duo--legal__plain{padding:0 0.8rem;background:#FAFAFA;color:#888}
.duo--legal--first .duo--legal__official::before,.duo--legal--first .duo--legal__plain::before{display:block;padding-top:0.5rem;font-size:0.88rem;color:#888}
.duo--legal--first .duo--legal__official::before{content:'Official legal copy'}
.duo--legal--first .duo--legal__plain::before{content:'Plain English'}

@media screen and (min-width:768px){.duo__cell{float:left;width:48.5%}
.duo__cell:first-child{margin-right:3%}
.duo__cell--license-option p{ margin-top:0}
}
.commercial-license-agreement h3{counter-increment:cla-h3;counter-reset:cla-part}
.commercial-license-agreement h3::before{content:counter(cla-h3) '.';margin-right:0.25rem;color:#888;font-family:'Texta',sans-serif}
.cla__part{counter-increment:cla-part}
.cla__part::before,.cla__definitions-list li::before{content:counter(cla-h3) '.' counter(cla-part) '.';color:#888;margin-right:0.25rem}
.cla__definitions-list{list-style:none;padding-left:2.6rem}
.cla__definitions-list li{text-indent:-1.5rem;margin-bottom:0.5rem;counter-increment:cla-definitions-item}
.cla__definitions-list li::before{content:counter(cla-h3) '.' counter(cla-definitions-item) '.'}
.edit-demo{clear:both;font-size:0.92rem}
.example{margin:40px 0}
.example__code pre{ margin:0 0 20px}
.gh-button{display:inline-block;background:none;border:none;color:#333;font-size:1.1rem}
.gh-button__title,.gh-button__stat{float:left;font-weight:bold;line-height:20px;padding:5px 10px;border:1px solid #D5D5D5}
.gh-button__icon,.gh-button .github-logo{height:21px;fill:#333;display:inline-block;vertical-align:bottom}
.gh-button__title{background-color:#EEE;background-image:linear-gradient(#FCFCFC,#EEE);border-radius:4px 0 0 4px}
.gh-button .github-logo{margin-right:0.2em}
.gh-button__stat{border-left:0;border-radius:0 4px 4px 0;background:white}
.gh-button:hover{ color:#333}
.gh-button:hover .gh-button__title{background-color:#DDD;background-image:linear-gradient(#EEE,#DDD)}
.gh-button:hover .gh-button__stat{color:#4078C0}
.gh-button:hover .gh-button__icon--star{fill:#4078C0}
.shirt-promo{margin:40px 0}
.shirt-promo__title{font-size:1.6rem}
.shirt-promo__image{display:block;max-width:100%;margin-bottom:10px}
.showcase-item__link{display:block;padding:10px;margin-bottom:20px;border-radius:8px;background:#DDD}
.showcase-item__link::after{content:'';display:block;clear:both}
.showcase-item__image{width:80px;float:left;display:block}
.showcase-item__image svg{display:block;border-radius:5px;width:100%;height:auto}
.showcase-item__text{float:left;width:calc(100% - 120px);padding-left:10px}
.showcase-item__title{margin:0;font-size:1.4rem}
.showcase-item__description{margin:0}

@media screen and (min-width:768px){.showcase-item{float:left;width:48.5%}
.showcase-item:nth-child(2n+1){margin-right:3%}
.showcase-item__image{width:120px}
.showcase-item__text{padding-left:20px}
.showcase-item__title{font-size:2rem}
.showcase-item__description{font-size:1.2rem;line-height:1.2}
}
.showcase-item-list{padding:0;list-style:none}
.showcase-item-list::after{content:'';display:block;clear:both}
.showcase-item .infinite-scroll-illo{padding:5px}
.showcase__banner__image{display:block;max-width:100%;margin-top:10px;border-radius:5px}
.site-footer{padding:40px 0;margin-top:60px}
.site-footer__copy{font-size:1.2rem}
.site-footer .twitter-logo{width:1.3rem;height:1.3rem;vertical-align:middle}
.socks-promo{margin:40px 0}
.socks-promo__image{display:block;max-width:100%;border-radius:5px}
.socks-promo .duo__cell{ margin-bottom:0}
.flickity-illo{ background:#ED0}
.infinite-scroll-illo__page{stroke:#333;stroke-width:20;stroke-miterlimit:10}
.infinite-scroll-illo__page--back{ fill:white}
.infinite-scroll-illo__page--front1{ fill:#C25}
.infinite-scroll-illo__page--front2{ fill:#E62}
.infinite-scroll-illo__page--front3{ fill:#EA0}
.isotope-illo{ background:#222}
*{box-sizing:border-box}

body{font-family:'Work Sans',-apple-system,Helvetica,Arial,sans-serif;color:#444;line-height:1.5;margin:0;padding:0}
.export body{ font-family:-apple-system,Helvetica,Arial,sans-serif}
html{ font-size:14px}

a{color:#19F;text-decoration:none}

a:hover{color:#C25}

h1,h2,h3{line-height:1.2}
pre,code,kbd{font-family:Consolas,Menlo,monospace;font-size:14px;background:#FAFAFA;border:1px solid #DDD;white-space:pre-wrap}

pre{padding:10px;border-radius:5px;overflow:auto}

code,kbd{padding:2px 3px;line-height:1.2;border-radius:3px}

pre code{padding:0;line-height:1.5;background:none;border:none}
button{font:inherit}
hr{border:none;border-top:1px solid #DDD;margin:40px 0}
th,td{padding:3px 20px 3px 0}

th{text-align:left;color:#AAA;font-weight:normal}

td{border-top:1px solid #DDD}

tr:nth-child(2) td{border-top:3px double #DDD}
.main{position:relative}
.main__page{padding-bottom:40px;border-bottom:20px solid #19F;margin-bottom:40px}
.page-title{font-size:2.2rem;margin:40px 0 40px}
.main h2{font-size:1.6rem;font-weight:normal;border-top:4px solid #19F;padding-top:1rem;margin-top:3rem}
.main h3{font-size:1.4rem;border-top:1px solid #DDD;padding-top:1rem;margin-top:2.5rem}
.main a{text-decoration:underline}
.main .call-out h2:first-child{margin-top:0.5rem;padding-top:0;border-top:none}
.main li{margin:4px 0}
*[data-license-property]{color:#C25}
@media screen and (max-width:640px){.hidden-small{display:none}
}

@media screen and (min-width:768px){
html{ font-size:16px}
.page-title{font-size:4rem}
.main h2{font-size:2.4rem;padding-top:2rem}
.main h3{font-size:1.6rem;padding-top:1.5rem}

pre,code,kbd{font-size:15px}
}
code .string{ color:#0A2}
code .number,code .cp,code .literal{color:#07D}
code .keyword{ color:#E31}
code .kd,code .attribute{ color:#D31}
code .title{ color:#39A}
code .params{ color:#98D}
code .p{ color:#EDB}
code .o{ color:#F63}
code .nb{ color:#A9A}
code .subst{ color:#A58}
code .comment{color:#999;font-style:italic}

code .tag{ color:#37B}

code .id{ color:#567}
code .class{ color:#B27}
code .rules{ color:#431}
code .value{ color:#555}
code .tag .value{ color:#0A2}

code .nd,code .pseudo{ color:#38D}
code .hexcolor{ color:#F63}
code .at_rule{ color:#088}

code .built_in{ color:#E08}

code .infinite-scroll,code .infinite-scroll_keyword,code .infscroll_var{color:#D0D}code .jquery_var{ color:#D70}

code .infinite-scroll{ text-decoration:underline}
.article{margin-bottom:80px}
.article img{display:block;max-width:100%}
.button--big-ol{display:block;padding:20px;background-color:#C25;background-image:linear-gradient(hsla(0,0%,0%,0),hsla(0,0%,0%,0.15));border:none;border-radius:10px;font-size:1.6rem;font-weight:bold;color:white;text-align:center;cursor:pointer;box-shadow:0 2px 10px hsla(0,0%,0%,0.2)}
.main .button--big-ol{text-decoration:none}
.button.button--big-ol:hover{color:white;background-color:#19F}
.button.button--big-ol:active{color:white;background-color:#07D;box-shadow:inset 0 2px 20px hsla(0,0%,0%,0.4)}
.demo-status{font-size:1.2rem;background:#FAFAFA;border:1px solid #DDD;padding:10px 20px;border-radius:5px;margin-top:14px}
.full-page-demo-footer{height:400px}
.buy-button{background:#EEE}
.main .buy-button{text-decoration:none}
.buy-button__price{background:#19F}
.buy-button:hover{ text-decoration:none}
.buy-button:hover .buy-button__price{background:#C25}
.showcase-item__link{background:white}
.showcase-item__link:hover{background:#19F;color:white}
.site-footer{margin-top:0;background:#EEE;position:relative;z-index:1}
.site-footer .twitter-logo{ fill:#19F}
.site-footer a:hover .twitter-logo{ fill:#C25}
.site-footer .mfzy-logo__body-fill{ fill:#19F}
.site-footer .mfzy-logo__stripes{ display:none}
.site-footer a:hover .mfzy-logo__stripes{ display:inline}
.mfzy-wordmark{ stroke:#19F}
.mfzy-brand__link:hover .mfzy-wordmark{ stroke:#333}

@media screen and (min-width:960px){.site-footer .mfzy-brand{position:absolute;left:20px;top:60px;width:160px}
.site-footer .mfzy-logo{display:block;width:108px;height:108px;margin:0 auto 5px}
.site-footer .mfzy-wordmark{display:block;margin:0 auto}
}
.hero{padding:20px 0;background:#19F;color:white;min-height:320px}
.hero__masthead{position:relative}
.hero .container::after{content:'';display:block;clear:both}
.hero .infinite-scroll-illo{display:block;position:absolute;left:0;top:0;width:80px;height:80px}
.hero .infinite-scroll-illo__page{stroke:#036}
.hero__text{padding-left:100px}
.hero__title{font-size:2rem;margin:0;line-height:1;padding-top:10px}
.hero__new-badge{display:inline-block;padding:5px 10px;vertical-align:top;border-radius:1em;background:#C25;color:white;text-align:center;font-weight:bold;font-style:normal;font-size:1rem}
.hero__tagline{font-size:1.2rem;line-height:1.2;margin:0;color:white}
.hero .chunky-button--fill{background-color:#06C;color:white}
.hero .chunky-button--fill .chunky-button__icon svg{fill:white}
.hero .chunky-button--fill:hover{background-color:#EA0}
.hero .chunky-button--outline{border-color:#05B;color:white}
.hero .chunky-button--outline .chunky-button__icon svg{fill:white}
.hero .chunky-button--outline:hover{background:#EA0}

@media screen and (min-width:768px){.hero .infinite-scroll-illo{width:260px;height:260px}
.hero__text{padding-left:300px}
.hero__new-badge{position:relative;top:-10px;width:70px;height:70px;background:#C25;color:white;border-radius:35px;margin:0}
.hero__new-badge__new{display:block;font-size:0.85rem;margin-top:4px;text-transform:uppercase;transform:skewY(-15deg)}
.hero__new-badge__version{display:block;font-size:2.4rem;line-height:0.8;font-weight:bold;transform:skewY(-15deg)}
.hero__title{font-size:4.2rem;padding-top:25px}
.hero__tagline{font-size:2rem}
.hero__button-row{margin-top:60px}
}
.image-grid{max-width:1200px}
.image-grid__item,.image-grid__col-sizer{width:32%}
.image-grid__gutter-sizer{ width:2%}
.image-grid__item{margin-bottom:20px;float:left}
.image-grid.are-images-unloaded .image-grid__item{opacity:0}
.image-grid__image{display:block;max-width:100%}
.loader-ellips{font-size:20px;position:relative;width:4em;height:1em;margin:0px auto}
.loader-ellips__dot{display:block;width:8px;height:8px;border-radius:0.5em;background:var(--color-brand-2);position:absolute;animation-duration:0.5s;animation-timing-function:ease;animation-iteration-count:infinite}
.loader-ellips__dot:nth-child(1),.loader-ellips__dot:nth-child(2){left:0}
.loader-ellips__dot:nth-child(3){ left:1em}
.loader-ellips__dot:nth-child(4){ left:2em}

@keyframes reveal{from{ transform:scale(0.001)}
to{ transform:scale(1)}
}
@keyframes slide{to{ transform:translateX(1em)}
}
.loader-ellips__dot:nth-child(1){animation-name:reveal}
.loader-ellips__dot:nth-child(2),.loader-ellips__dot:nth-child(3){animation-name:slide}
.loader-ellips__dot:nth-child(4){animation-name:reveal;animation-direction:reverse}
.loader-wheel{font-size:64px;position:relative;height:1em;width:1em;padding-left:0.45em;overflow:hidden;margin:0 auto;animation:loader-wheel-rotate 0.5s steps(12) infinite}
.loader-wheel i{display:block;position:absolute;height:0.3em;width:0.1em;border-radius:0.05em;background:#333;opacity:0.8;transform:rotate(-30deg);transform-origin:center 0.5em}

@keyframes loader-wheel-rotate{from{ transform:rotate(0deg)}
to{ transform:rotate(360deg)}
}
.scroller{height:400px;padding:10px 10px 100px;overflow-y:scroll;border:1px solid #DDD;border-radius:5px}
.scroller-item{height:200px;margin-bottom:10px;padding:20px;background:#19F;border-radius:5px;color:white;font-size:3rem;line-height:1}
.scroller-item--height2{ height:250px}
.scroller-item--height3{ height:300px}
.scroller-item--magenta{ background:#C25}
.scroller-item--red{ background:#E21}
.scroller-item--gold{ background:#EA0}
.scroller-item--green{ background:#6C6}
.scroller--prefill{ height:500px}
.scroller--prefill .scroller-item,.scroller--prefill .scroller-item--height2,.scroller--prefill .scroller-item--height3{ height:80px}
.scroller-status{display:none}
.scroller-status__message{text-align:center;color:#777}
.page-nav{font-size:0.85rem;line-height:1.2}
.page-nav__list{list-style:none;margin:0 0 40px;padding:0 10px 0 0}
.page-nav__item{margin:0.2rem 0;overflow-wrap:break-word}
.page-nav__item--h3,.page-nav__item--h4{padding-left:15px}

@media screen and (min-width:960px){.page-nav{position:absolute;left:0;top:0;width:200px;height:100%}
.page-nav__list{display:block;margin:0;padding:20px}
.page-nav::after{content:'sticky';display:none}
.page-nav.is-sticky .page-nav__list{position:-webkit-sticky;position:sticky;left:0;top:0}
.page-nav__item a{display:block;padding:2px 0;text-decoration:none}
}
.site-nav{display:flex;flex-wrap:wrap;align-items:stretch;background:#19F;list-style:none;margin:0;padding:0}
.main ~ .site-nav{position:relative;margin-top:80px;z-index:2}
.site-nav__item a{display:block;padding:10px 20px;color:white}
.site-nav__item--homepage{font-weight:bold}
.site-nav__item a:hover{background:#C25;color:white}
.site-nav__item a:active{background:white;color:#8C8}
.page--style .site-nav__item--style a,.page--options .site-nav__item--options a,.page--api .site-nav__item--api a,.page--events .site-nav__item--events a,.page--extras .site-nav__item--extras a,.page--license .site-nav__item--license a{background:#FFF;color:#19F}
@media screen and (min-width:768px){.site-nav__item{width:auto;font-size:1.2rem}
.site-nav__item a{padding:20px 25px}
}
.site-scroll__button{margin:60px auto;padding:20px 40px}
.masonry-small .image-grid__item{margin-bottom:10px}