.reactTooltip{border-radius:3px;display:inline-block;font-size:13px;left:-999em;opacity:0;padding:8px 21px;position:fixed;pointer-events:none;transition:opacity .3s ease-out,margin-top .3s ease-out,margin-left .3s ease-out;top:-999em;z-index:999}.reactTooltip:after{content:"";width:0;height:0;position:absolute}.reactTooltip.show{opacity:.9!important;margin-top:0!important;margin-left:0!important}.reactTooltip.type-dark{color:#fff;background-color:#222}.reactTooltip.type-dark.place-top:after{border-top:8px solid #222}.reactTooltip.type-dark.place-bottom:after{border-bottom:8px solid #222}.reactTooltip.type-dark.place-left:after{border-left:6px solid #222}.reactTooltip.type-dark.place-right:after{border-right:6px solid #222}.reactTooltip.type-success{color:#fff;background-color:#8dc572}.reactTooltip.type-success.place-top:after{border-top:8px solid #8dc572}.reactTooltip.type-success.place-bottom:after{border-bottom:8px solid #8dc572}.reactTooltip.type-success.place-left:after{border-left:6px solid #8dc572}.reactTooltip.type-success.place-right:after{border-right:6px solid #8dc572}.reactTooltip.type-warning{color:#fff;background-color:#f0ad4e}.reactTooltip.type-warning.place-top:after{border-top:8px solid #f0ad4e}.reactTooltip.type-warning.place-bottom:after{border-bottom:8px solid #f0ad4e}.reactTooltip.type-warning.place-left:after{border-left:6px solid #f0ad4e}.reactTooltip.type-warning.place-right:after{border-right:6px solid #f0ad4e}.reactTooltip.type-error{color:#fff;background-color:#be6464}.reactTooltip.type-error.place-top:after{border-top:8px solid #be6464}.reactTooltip.type-error.place-bottom:after{border-bottom:8px solid #be6464}.reactTooltip.type-error.place-left:after{border-left:6px solid #be6464}.reactTooltip.type-error.place-right:after{border-right:6px solid #be6464}.reactTooltip.type-info{color:#fff;background-color:#337ab7}.reactTooltip.type-info.place-top:after{border-top:8px solid #337ab7}.reactTooltip.type-info.place-bottom:after{border-bottom:8px solid #337ab7}.reactTooltip.type-info.place-left:after{border-left:6px solid #337ab7}.reactTooltip.type-info.place-right:after{border-right:6px solid #337ab7}.reactTooltip.type-light{color:#222;background-color:#fff}.reactTooltip.type-light.place-top:after{border-top:8px solid #fff}.reactTooltip.type-light.place-bottom:after{border-bottom:8px solid #fff}.reactTooltip.type-light.place-left:after{border-left:6px solid #fff}.reactTooltip.type-light.place-right:after{border-right:6px solid #fff}.reactTooltip.place-top{margin-top:-10px}.reactTooltip.place-top:after{border-left:10px solid transparent;border-right:10px solid transparent;bottom:-8px;left:50%;margin-left:-10px}.reactTooltip.place-bottom{margin-top:10px}.reactTooltip.place-bottom:after{border-left:10px solid transparent;border-right:10px solid transparent;top:-8px;left:50%;margin-left:-10px}.reactTooltip.place-left{margin-left:-10px}.reactTooltip.place-left:after{border-top:6px solid transparent;border-bottom:6px solid transparent;right:-6px;top:50%;margin-top:-5px}.reactTooltip.place-right{margin-left:10px}.reactTooltip.place-right:after{border-top:6px solid transparent;border-bottom:6px solid transparent;left:-6px;top:50%;margin-top:-5px}html{min-width:1040px}body{font-family:Open Sans,Helvetica,sans-serif;margin:0 auto;position:relative;tab-size:2;width:960px;font-size:16px}h1{font-size:64px;margin:.1em 0}h2{margin-top:1em}h1,h2,h3{font-family:Roboto;text-rendering:optimizeLegibility;margin-bottom:0}svg.icon{margin:0 5px}p{line-height:26px}a{text-decoration:none;color:#66b5af;border-bottom:1px solid transparent}a:hover{border-bottom:1px solid #66b5af}#about,#gallery{width:715px}#about #block__header,#gallery #block__header{border:none;height:0}#about .gallery,#gallery .gallery{width:1000px;float:left}#about .frame-holder,#gallery .frame-holder{margin:25px 10px;margin-bottom:20px;width:240px;height:250px;float:left}#about .frame-holder p,#gallery .frame-holder p{margin-top:-250px;clear:left}#about .frame-holder img,#gallery .frame-holder img{width:240px;float:left}#site-wrapper{position:absolute}#block__header{position:fixed;height:50px;top:0;width:962px;margin:0 auto;background-color:#fff;z-index:101}#block__title{float:left;height:80px;line-height:50px;padding:0 5px;margin-left:5px;font-size:20px;font-weight:700}a.header-link{padding:5px;text-decoration:none;color:#000;font-size:16px}a.header-link:hover{color:#66b5af}a.header-link:hover path{fill:#66b5af}#block__nav{float:left;height:50px}#block__nav-gist-title{font-size:28px;font-weight:700;padding-right:5px;margin-right:5px}#block__nav-gist-author{margin-right:15px}#block__content{position:absolute;top:50px}.CodeMirror{height:auto;font-size:18px}#auth{float:right;margin:0 5px;line-height:50px}#auth a{text-decoration:none}#user{float:right;margin:0 5px}#user img{width:26px;height:26px;vertical-align:middle}#block__iframe{position:fixed;top:50px;width:960px;height:100%;border:none;box-shadow:0 0 5px #afafaf;overflow:hidden;border-radius:3px;background:#fff}#block__code-index{margin-top:30px;width:962px}#block__code-files{background:#fafafa;padding-right:1px;width:960px;height:25px;z-index:200}.absolute-files{position:absolute;top:500px}.fixed-files{position:fixed;top:50px}.file{float:left;display:inline-block;padding:0 10px;font-size:16px;max-width:250px;overflow:hidden;position:relative;height:25px;border-bottom:none;cursor:pointer;background-color:#fafafa;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.file:hover{background-color:#f7e2ad}.file.active{background-color:#66b5af}.file.active a.filename{color:#fff;border-bottom-color:transparent}.file.has-delete{padding-right:30px}.file-delete{position:absolute;top:0;right:0;padding:0 8px 6px;color:#be6464;margin-left:4px;border:none;float:right;text-decoration:none}.file-delete:hover{background-color:#fafafa;border-bottom:1px solid #fafafa}#files__more{display:none;float:left;max-width:250px;z-index:200;background-color:#fafafa}#files__more .file{width:100%}#files__more.show{display:inline-block;margin-right:-20px}.hidden{display:none}#files__add-wrapper{display:inline-block;float:right}#files__add-ui{display:none;float:left}#files__add,#files__add-ui.show{display:inline-block}#files__add{float:right;padding:0 10px;font-size:16px}#files__add-new:hover{background-color:#fafafa}#files__add-new-name{margin:5px}#block__code-wrapper{position:absolute;top:500px;width:960px;margin-top:25px}#block__code-handle{cursor:ew-resize;width:12px;position:fixed;top:50px;right:694px;bottom:0}#editor__controls{position:absolute;top:0;width:calc(100% - 4px);height:30px;background-color:hsla(0,0%,99%,.95);border-left:6px solid #161616}#editor__controls #editor__controls-autorun{width:20px;height:20px;margin:5px 7px;background-color:#588fc0}#editor__controls #editor__controls-autorun.paused{background-color:#777}#editor__controls #editor__controls-autorun.error{background-color:#dd737a}#editor__controls #editor__controls-autorun svg{padding:2px}#editor__controls #editor__controls-autorun path{fill:#fff}#editor__txt{width:100%;min-height:500px;padding:5px;resize:vertical}#block__code-thumbnail-edit{position:absolute;top:0;right:0}#block__code-thumbnail-edit #nav__loading{clear:right}#editor__png{margin-top:10px;float:left;clear:left}#editor__png-preview,#editor__png-preview canvas{float:left}#editor__png-preview p{float:left;width:calc(100% - 500px);margin:10px}#editor__png-input{float:right;border:1px solid #66b5af;background-color:#66b5af;padding:5px}#thumbnail__save{clear:right;width:120px!important}#block__popper{position:fixed;top:90px;left:0;right:0;width:100%;height:480px;outline:0;border:0;background:#efefef}#block__popper:hover{background:#eae9e5}.popped #block__popper{background:#f7e2ad;transition-property:background;transition-duration:.5s}.popped #block__popper:hover{background:#f7e2ad}.popped #block__iframe{z-index:150;box-shadow:0 3px 10px #66b5af}#block__mode{top:110px}#block__fullscreen,#block__mode{position:fixed;left:10px;cursor:pointer;font-size:23px}#block__fullscreen{top:135px}.description{font-family:Roboto,sans-serif;width:300px;font-size:20px;padding:3px 10px}.blocks .renderer{top:75px;height:500px}.blocks .renderer #block__iframe{top:75px;height:500px;overflow:hidden}.blocks #block__code-wrapper .CodeMirror-scroll{min-height:600px}.blocks #block__code-handle{display:none}#block__header.fullscreen,#block__header.sidebyside{left:40px}.fullscreen #home__overlay,.sidebyside #home__overlay{position:fixed;left:0;top:75px}.fullscreen .renderer,.sidebyside .renderer{position:fixed;top:75px;left:40px;bottom:0}.fullscreen .renderer #block__iframe,.sidebyside .renderer #block__iframe{top:75px;height:calc(100% - 90px);overflow:scroll}.fullscreen .renderer #block__popper,.sidebyside .renderer #block__popper{width:1000px}.fullscreen .renderer.popped,.sidebyside .renderer.popped{z-index:1}.fullscreen #block__code-files,.sidebyside #block__code-files{position:fixed;top:50px;left:40px;right:0;width:auto}.fullscreen #block__code-wrapper,.sidebyside #block__code-wrapper{position:fixed;top:75px;right:0;width:700px;bottom:0;margin:0;overflow:scroll}.fullscreen #block__code-wrapper #block__code-index,.sidebyside #block__code-wrapper #block__code-index{width:100%;height:calc(100% - 30px)}.fullscreen #block__code-wrapper #block__code-index .CodeMirror,.sidebyside #block__code-wrapper #block__code-index .CodeMirror{width:100%;height:100%}#block__wrapper.embed #block__site-nav{display:none}#block__wrapper.embed #block__nav-gist-title input.description{border:0;outline:0;font-weight:700;font-size:24px}#block__wrapper.embed #site-header__save-fork #block__lock,#block__wrapper.embed #site-header__save-fork #block__new,#block__wrapper.embed #site-header__user{display:none}#block__wrapper.embed #block__popper{background-color:#f8f8f8}#block__wrapper.embed #block__popper:hover{background-color:#f5f5f5}#block__wrapper.embed .popped #block__popper{background-color:#f7e2ad}.fullscreen .renderer #block__iframe{width:calc(100% - 50px);height:calc(100% - 95px)}.fullscreen #block__code-handle,.fullscreen #block__code-wrapper{display:none}#block__lock{float:right;border-radius:3px;width:22px;height:22px;padding:5px 0;padding-left:5px;margin:10px 5px;border:1px solid #fff}#block__lock path{fill:#000}#block__lock.clickable{cursor:pointer}#block__lock.clickable:hover{color:#66b5af;border:1px solid #f7e2ad}#block__lock.clickable:hover path{fill:#66b5af}#block__fork,#block__new,#block__save,#thumbnail__save{float:right;padding:5px 10px;margin:10px 5px;cursor:pointer;background-color:#66b5af;color:#fff;border-radius:3px;width:35px;height:22px;border:1px solid #fff}#block__fork:hover,#block__new:hover,#block__save:hover,#thumbnail__save:hover{color:#66b5af;background-color:#fff;border:1px solid #66b5af}#block__new{background:#fff;color:#66b5af;border:1px solid #fff;text-decoration:underline}#block__site-nav{position:fixed;top:10px;left:3px;z-index:300}#block__site-nav .nav-link{margin-top:6px;margin-left:8px}#block__site-nav .nav-link:first-child{margin-top:0}#block__site-nav .nav-link a{font-size:11px;color:#000}#block__site-nav .nav-link a:hover{border-bottom:0}#block__loading{width:960px}#block__loading .sk-cube-grid{margin:10px auto}#nav__loading{float:right;padding:5px 10px;margin:10px 5px;border-radius:3px;width:35px;height:22px;color:#66b5af;background-color:#fff;border:1px solid #66b5af}#nav__loading .sk-cube-grid{width:24px;height:24px;margin:0 auto}.ReactModal__Overlay{z-index:400}.ReactModal__Content{z-index:500;height:50px;background-color:#fe6675!important}.ReactModal__Content .error{color:#efefef}#tutorial__overlay{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;z-index:1000;background-color:#fefefe;overflow-y:scroll}#tutorial__overlay #tutorial__content{width:715px;margin:0 auto 20px}#tutorial__overlay #tutorial__content .domain{color:#ac3f1a}#tutorial__overlay #tutorial__content .tut{margin:10px 0}#tutorial__overlay .subhead{color:gray;text-transform:uppercase}#tutorial__overlay .url{padding-left:1em;border-left:3px solid #efefef}#tutorial__overlay #fixedstarted{position:fixed;width:100%}#tutorial__overlay #getstarted{position:absolute;top:20px}#tutorial__overlay .getstarted{padding:5px;text-transform:uppercase;font-size:20px;color:#fff;background-color:#66b5af;border:1px solid #66b5af;border-radius:2px;width:150px;text-align:center;cursor:pointer}@media (max-width:1200px){#getstarted{right:40px}}@media (min-width:1200px){#getstarted{left:40px}}.ColorPicker{box-sizing:content-box}.inlet_slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-16px}.sk-cube-grid{width:100px;height:100px;margin:10px}.sk-cube-grid .sk-cube{width:33%;height:33%;background-color:#66b5af;float:left;-webkit-animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}.sk-cube-grid .sk-cube1{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube2{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube3{-webkit-animation-delay:.4s;animation-delay:.4s}.sk-cube-grid .sk-cube4{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube5{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube6{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube7{-webkit-animation-delay:0s;animation-delay:0s}.sk-cube-grid .sk-cube8{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube9{-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes sk-cubeGridScaleDelay{0%,70%,to{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(.2,.2,1);transform:scale3D(.2,.2,1)}}@keyframes sk-cubeGridScaleDelay{0%,70%,to{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(.2,.2,1);transform:scale3D(.2,.2,1)}}