*{box-sizing:border-box}*,body{margin:0}button{color:#000;cursor:pointer}:root{--arrow-offset:0px;--button-border-colors:#444;--button-border-radius:4px;--body-font-weight:300;--body-font-family:"Recoleta";--mono-font-family:"JetBrains Mono";--goodies-font-family:"Inter";--primary-background-color:#fdf8ee;--page-background-color:var(--primary-background-color);--video-background-color:var(--primary-background-color);--offwhite-background-color:#fffffe;--accent-background-color:#ff0;--flow-subheader-background-color:#fff3be;--sine-wave-1-image-url:url(/homepage/assets/sine-wave-1.svg);--sine-wave-2-image-url:url(/homepage/assets/sine-wave-2.svg);--sine-wave-3-image-url:url(/homepage/assets/sine-wave-3.svg);--system-sans-serif:-apple-system,BlinkMacSystemFont,"avenir next",avenir,"helvetica neue",helvetica,ubuntu,roboto,noto,"segoe ui",arial,sans-serif}html{height:100vh;overflow-x:hidden}body{background:var(--page-background-color)}.home{font-size:.8vw;min-height:100%}.container{padding:0 2em}.section-header{background-color:#fff;border:1px solid var(--button-border-colors);border-radius:var(--button-border-radius);font-family:var(--body-font-family);font-size:800%;margin:0;padding:.4em 1em;z-index:1}.section-header-aligner{align-items:flex-start;display:flex;justify-content:center}.section-subheader{font-size:4em;font-weight:var(--body-font-weight);margin:0}.section-description,.section-description-text{font-family:var(--body-font-family);font-weight:var(--body-font-weight)}.section-description-text{font-size:200%}.header{align-items:flex-start;display:flex;justify-content:space-between;overflow-x:hidden;overflow-y:hidden;padding:1em 2em;position:sticky;top:2em;z-index:4}.header .info>*{transition:opacity .25s ease-in}.header.minimal .info>*{opacity:0}.header.minimal .info .sound-control{opacity:1}.navigation{background-color:#fff;border:1px solid var(--button-border-colors);border-radius:var(--button-border-radius)}.logo{display:inline-flex;padding:.75rem}.logo img{width:1.5rem}.tagline{font-family:var(--body-font-family);font-size:320%;font-weight:700;margin:0}.info{align-items:center;display:flex}.info>*{padding:0 1rem}.info .separator{display:none;font-family:var(--mono-font-family);font-size:150%;font-weight:100}.info .separator+.sound-control{padding:.5rem}.sound-control{padding-right:0;position:relative;visibility:hidden}button.sound-control{background:none;border:none;cursor:pointer}.sound-control .muted-icon{position:absolute;visibility:hidden}.sound-control .unmuted-icon{position:relative;visibility:hidden}.sound-control.muted .unmuted-icon{position:absolute;visibility:hidden}.sound-control.muted .muted-icon{position:relative;visibility:hidden}.navigation{align-items:center;display:flex;overflow-x:hidden;transition:width .25s ease-in-out;width:calc(3rem + 2px)}.navigation .links{font-family:var(--body-font-family);font-size:170%;font-weight:400;padding:0 1rem;white-space:nowrap}.nav-container{max-width:100%;width:-moz-fit-content;width:fit-content}.navigation.expanded,.navigation:hover{width:100%}.navigation:hover .links{display:inline-block}.hero .flip-book{max-height:100vh;max-width:100vw;position:relative;z-index:-1}.hero{height:1000vh;margin-top:-100vh}.hero .scroll-content{height:100vh;position:sticky;top:0}.hero-titles{align-items:center;background:var(--video-background-color);bottom:0;display:flex;justify-content:flex-start;padding:2em;position:absolute;width:100%}.hero-titles .crank{display:none}.hero-separator{display:inline-flex;justify-content:center;padding:0 1.8em}.hero-separator,.hero-title{font-family:var(--mono-font-family);font-size:250%;white-space:nowrap}.hero-title{background:none;border:1px solid transparent;border-radius:var(--button-border-radius);padding:.5em 1.5em}.hero-title:hover{border:1px dashed var(--button-border-colors)}.hero-title:last-child{padding-right:2em}.hero-title.active{background:#fff;border:1px solid var(--button-border-colors)}.hero-title.seen+.hero-separator{visibility:visible}.hero-title .separator{font-weight:100}#publish-share-hero-title+.hero-separator{display:none}.form-input{border:1px solid #fbd6a7;border-radius:2em;box-shadow:5px 5px 19px 0 #ffe5b1c9;flex:1;margin-right:1em;max-height:6em;min-height:6em;padding:2.5em}.form-button,.form-input{font-family:var(--mono-font-family);font-size:2.75em}.form-button{background-color:#ff0;border:1px solid var(--button-border-colors);border-radius:100em;font-weight:700;height:6em;width:6em}.generate{background-color:var(--offwhite-background-color);padding-bottom:0;padding-top:20em}.generate-form{display:flex}.generate-form-layout-aligner{padding:5em 8em 0}.generate-form-ui-aligner{display:flex;flex:1}.generate .section-tagline{font-family:var(--body-font-family);font-size:6.5em;font-weight:600;margin:1.5em 0 2em;padding:0 5em;text-align:center}.generate-examples{font-size:3em;font-weight:500;padding:2em 1em}.generate-examples .generate-examples-tag{font-weight:600}.generate-examples .generate-example-link{color:#000;padding:0 .25em;text-decoration:none}.generate-examples .generate-example-link:hover{text-decoration:underline}.flow{background-color:var(--offwhite-background-color);padding-bottom:20em;padding-top:20em}.side-by-side{align-items:center;display:flex;justify-content:center;padding:10em 3em}.side-by-side .section-description-text{margin:1em 0}.side-by-side .arrow{font-family:var(--mono-font-family);font-size:250%;padding:0 4em;white-space:nowrap}.arrow.left-arrow:before{content:"<-"}.arrow.right-arrow:before{content:"->"}.side-by-side .image{border-radius:1em;width:50em}.supporting-copy-wrapper{display:flex;font-family:var(--body-font-family);justify-content:center;margin-top:2rem;width:100%}.section-supporting-copy{background:var(--offwhite-background-color);border:1px dashed #000;border-radius:5px;font-size:2rem;padding:.5em;white-space:nowrap}.flow-section-closing{display:flex;font-family:Recoleta;font-size:3rem;font-weight:100;justify-content:center;padding:6em 1.25em;width:77%}.flow-supporting-copy{margin-bottom:8em;padding:0 12.5em}.flow .keyboard-driven .section-subheader{background:#fff3be9e;border:1px solid #ffe058}.flow .mouse-driven .section-subheader{background:rgba(255,228,196,.6);border:1px solid #ffb967}.flow .fun-driven .section-subheader{background:#ffc0eb1c;border:1px solid #ff8edb6b}.signup{background-color:var(--offwhite-background-color);padding:15em 8em}.signup-form{display:flex}.signup-form-outer-aligner{display:flex;flex:1;flex-direction:column}.signup-form-outer-aligner .section-description-text:first-child{font-weight:600;padding-left:2em;text-align:left}.signup-form-outer-aligner .section-description-text:last-child{padding-right:20%;text-align:right}.signup-form-inner-aligner{align-items:center;display:flex;padding-right:2em}.flow,.generate,.signup-form{font-size:.8em}.signup .section-header-aligner{margin-bottom:10%;margin-top:-18%}.signup .section-description-text{font-size:3.5em;margin:1.5em 0}.vibes{padding-bottom:25em;padding-top:20em}.vibes,.vibes .vibes-header{display:flex;justify-content:center}.vibes .vibes-header{background-color:var(--accent-background-color);border:1px solid;border-radius:5px;font-family:var(--body-font-family);font-size:300%;font-weight:600;margin:0;padding:.25rem 1rem}.vibes-aligner{align-items:center;display:flex;flex-direction:column;justify-content:center}.vibes-video{padding:7em 1em;width:22em}.vibes-image{display:none;width:38em}.footer{background-color:var(--offwhite-background-color);padding:5em 4em}.footer,.footer .contact-header{font-family:var(--body-font-family)}.footer .contact-header{font-size:300%;font-weight:600}.contact-link{color:#000}.footer .links{font-size:200%;font-weight:var(--body-font-weight)}.links a,.links a:visited{color:#000}.links a{text-decoration:none}.links>*+*{padding-left:1em;position:relative}.links>*+:before{content:"\2022";left:.35em;position:absolute;top:50%;transform:translateY(-50%)}.goodies{padding:8em 10em 12em}.goodies .section-header-aligner{margin-bottom:5%;margin-top:-15%}.goodie-item .goodie-details>*+*,.goodie-item>*+*{margin-top:1em}.goodie-row{display:flex;flex-wrap:wrap;margin-bottom:4em;margin-top:4rem}.goodie-item{align-items:center;display:flex;flex:1 1 auto;flex-direction:column;margin-top:5rem;max-width:33%;padding:2em 4em}.goodie-preview{display:flex;justify-content:center;margin-bottom:1em}.goodie-image{border:1px solid var(--button-border-colors);border-radius:100%;height:auto;width:12em}.goodie-label{background-color:#fff;border:1px solid var(--button-border-colors);border-radius:.5em;display:inline-flex;font-size:1rem;padding:.5em 1.8em}.goodie-header,.goodie-label{font-family:var(--body-font-family)}.goodie-header{display:flex;font-size:3.25em;margin-bottom:1em;margin:.5em 0 0;text-align:center}.goodie-description{font-family:var(--system-sans-serif);font-size:110%;font-size:calc(1rem + .2vw)}.goodie-details{align-items:center;display:flex;flex-direction:column;gap:.5rem;justify-content:center;padding:0 2em}.goodie-description-text{font-size:1rem;margin-top:.75rem}.arrow{transform:translateX(var(--arrow-offset));transition:transform .3s;white-space:nowrap;will-change:transform}.arrow-offset{--arrow-offset:1em}.arrow-offset .left-arrow{--arrow-offset:-1em}.goodies{position:relative}.goodies:before{background:linear-gradient(180deg,var(--offwhite-background-color) 0,rgba(255,250,240,0) 100%);height:8em;top:0}.goodies:after,.goodies:before{content:" ";left:0;position:absolute;width:100%}.goodies:after{background:linear-gradient(180deg,var(--page-background-color) 0,#fffffe 100%);bottom:0;height:12em}.vibes:before{background:linear-gradient(180deg,var(--offwhite-background-color) 0,rgba(255,250,240,0) 100%);content:" ";height:20em;left:0;position:absolute;top:0;width:100%}.vibes{position:relative}.vibes:after{background:linear-gradient(180deg,var(--page-background-color) 0,#fffffe 100%);bottom:0;content:" ";height:25em;left:0;position:absolute;width:100%}.generate{position:relative}.generate:before{background:linear-gradient(180deg,var(--page-background-color) 0,#fefefe 100%);height:20em;left:0}.generate:after,.generate:before{content:" ";position:absolute;top:0;width:100%}.generate:after{background-image:var(--sine-wave-1-image-url);background-position-y:-42em;background-repeat:no-repeat;background-size:120% 150%;height:100em;pointer-events:none;z-index:0}.flow>*{z-index:1}.flow>*,.side-by-side.fun-driven,.side-by-side.mouse-driven{position:relative}.side-by-side.keyboard-driven{z-index:3}.side-by-side.mouse-driven{margin-bottom:20em;z-index:2}.side-by-side.mouse-driven:before{background-image:var(--sine-wave-2-image-url);background-position-x:0;background-position-y:30em;background-repeat:no-repeat;background-size:120% 40em;width:200%}.side-by-side.fun-driven:before,.side-by-side.mouse-driven:before{content:" ";height:200%;pointer-events:none;position:absolute;z-index:1}.side-by-side.fun-driven:before{background-image:var(--sine-wave-3-image-url);background-position-x:0;background-position-y:-60em;background-repeat:no-repeat;background-size:100% 100em;width:100%}.flow .section-subheader{background:var(--flow-subheader-background-color);border:1px solid #0000001a;border-radius:.25em;box-shadow:0 .25em .25em 0 #00000030;padding:.5em;text-align:center}.scroll-container{border:1px dashed #fbd6a7;border-radius:1em;box-shadow:5px 5px 19px 0 #ffe5b1c9;box-sizing:content-box;flex:1 0 auto;max-width:50.125em;overflow-x:hidden;overflow-y:auto;width:50.125em;z-index:1}.scroll-container .fallback-image{display:none;height:100%;visibility:hidden;width:100%}.fun-driven .scroll-content,.keyboard-driven .scroll-content,.mouse-driven .scroll-content{height:900vh}.scroll-content{height:300vh}.scroll-content .scroll-canvas-container{position:sticky;top:0}.scroll-content .scroll-canvas{height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.scroll-crank{position:absolute;right:1em;top:1em;z-index:2}.fun-driven .scroll-canvas,.fun-driven .scroll-container,.generate-driven .generate-workspace-image,.generate-driven .scroll-canvas,.generate-driven .scroll-container,.keyboard-driven .scroll-canvas,.keyboard-driven .scroll-container,.mouse-driven .scroll-canvas,.mouse-driven .scroll-container{height:45.575em}.scroll-container::-webkit-scrollbar{display:none}.scroll-container{-ms-overflow-style:none;background:var(--page-background-color);scrollbar-width:none}.overflow-wrapper{overflow:hidden}@media screen and (max-width:768px){.section-header{font-size:12em}.header .navigation{font-size:2em}.header .info .sound-control{display:none}.goodie-item{max-width:50%}.goodie-details{font-size:2em}.goodie-description{font-size:120%}.goodies{padding-bottom:7em}.goodies .goodie-header{margin-top:0}.goodies .section-header-aligner{margin-bottom:10em}.goodies .goodie-item{padding-bottom:8em;padding-top:8em}.goodie-image{width:30em}.header{align-items:center}.header .tagline{font-size:5em}.footer{font-size:2em}.generate-form{flex-direction:column;font-size:.5rem;font-size:1.5em}.generate input,.generate-button{min-height:2em}.flow .side-by-side{padding:10em 15em}.flow .side-by-side .section-description{font-size:1.4em}.signup{padding-bottom:0;padding-top:3em}.signup .section-header-aligner{margin-bottom:7em;margin-top:0}.signup-form{flex-direction:column;font-size:.5rem;font-size:1.5em}.signup input,.signup-button{min-height:2em}.signup-form-outer-aligner{padding-left:0;padding-right:0}.signup .section-description-text{font-size:240%;padding:1em}.signup-form-inner-aligner{align-items:stretch;flex-direction:column;padding-right:0}.signup-form-inner-aligner .form-input{margin-bottom:2em;margin-right:0}.signup .signup-form-outer-aligner .section-description-text{font-size:4em;padding-left:0;padding-right:0;text-align:center}.signup-button{align-self:center;height:4em;width:100%}.vibes-image{display:block}.vibes-video{display:none}.vibes{font-size:2em;padding-bottom:5em;padding-top:10em}.vibes:before{height:10em}.vibes:after{height:5em}.scroll-container .scroll-crank{visibility:hidden}.scroll-container .fallback-image{display:block;visibility:visible}.scroll-container canvas{display:none;visibility:hidden}.scroll-container{overflow-y:hidden}.section-supporting-copy{font-size:1.2rem}.side-by-side.mouse-driven:before{background-position-y:20em}}@media screen and (max-width:600px) and (orientation:portrait){.section-header{font-size:15em}.goodie-item{max-width:100%}.goodie-details{font-size:3em}.goodie-image{width:50em}.goodies .section-header-aligner{margin-bottom:15em}.flow,.generate{padding-top:30em}.flow .side-by-side{flex-direction:column;padding-bottom:30em}.flow .side-by-side .arrow{display:none}.flow .side-by-side.mouse-driven{flex-direction:column-reverse}.flow .side-by-side .scroll-canvas,.flow .side-by-side .scroll-container{height:91.15em;max-width:100.25em;width:100.25em}.flow .side-by-side .section-description{font-size:3em}.flow .side-by-side.keyboard-driven{padding-top:30em}.flow .side-by-side.mouse-driven{margin-bottom:0}.flow .side-by-side .section-description{margin-bottom:2em}.flow .side-by-side .section-subheader{text-align:center}.header .info .crank,.header .info .sound-control{display:none}.header .navigation{font-size:3em;width:auto}.header .nav-container{width:100%}.header{flex-direction:column-reverse;padding-left:4em;padding-right:4em}.header .tagline{font-size:8em;padding:1em 0}.header.minimal .info{height:0;visibility:hidden}.header .navigation .links{display:flex;justify-content:center;width:100%}.header .navigation .links>*+*{padding-left:3em}.header .navigation .links>*+:before{left:25%}.hero .hero-titles{font-size:2em;padding-bottom:2em}.hero .hero-title{display:none}.hero .hero-title.active{border-style:dashed;display:block;flex:1 1 auto;pointer-events:none}.hero .hero-separator{display:none}.hero .hero-title.active+.hero-separator{display:block;padding:0 1rem 0 1.5rem}.hero .hero-titles .crank{align-items:center;display:inline-flex;padding:0 2em 0 0}.hero-titles #publish-share-hero-title.active+.hero-separator{display:block;visibility:hidden}.signup{padding-bottom:0;padding-top:12em}.signup .section-header-aligner{margin-bottom:15em;margin-top:0}.vibes{font-size:2em;padding-bottom:10em;padding-top:10em}.vibes:after,.vibes:before{height:10em}.flow-section-closing{font-size:12em;padding:4em 0 8em}.side-by-side.mouse-driven:before{background-position-y:90em}.side-by-side.fun-driven:before{background-position-y:25em}.flow:after{background-position-y:-20em}.section-supporting-copy{white-space:pre}.generate .generate-form-layout-aligner{display:none}}@media screen and (max-width:300px) and (orientation:portrait){.header .navigation .links{font-size:200%;justify-content:space-evenly;padding:0}.header .navigation .links>*{padding-left:0}.header .navigation .links>:before{visibility:hidden}}.generate .form-input::-moz-placeholder{color:#d3d3d3}.generate .form-input::placeholder{color:#d3d3d3}