:root{--color-text:#d4cde9;--color-bg:#252637;--color-popup:#3a2b63;--code-font-size:16px;--color-button:#d3a447;--color-focus-outline:#d3a447;--color-form-control-bg:#2c214b}body{margin:0;padding:0;background:rgba(0,0,0,.5);background:var(--color-bg);color:rgba(255,255,255,.9);min-height:100vh;font-size:87.5%;position:relative;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif,'Segoe UI Emoji','Segoe UI Symbol'}h1{margin-top:0}input,select,textarea{font-size:inherit;color:var(--color-text);background:var(--color-form-control-bg);border:1px solid rgba(255,255,255,.09);border-bottom-color:rgba(255,255,255,.17);box-shadow:inset 0 2px 5px rgba(0,0,0,.2);border-radius:3px;padding:10px;box-sizing:border-box}[role=button]{cursor:pointer}a{text-decoration:none;color:#f7ae2d;cursor:pointer}a:hover{text-decoration:underline}p{line-height:1.65}button{font-family:inherit;font-size:100%}.hide{display:none!important}.flex{display:flex}.flex-grow{flex-grow:1}.flex-v-center{align-items:center}.flex-h-center{justify-content:center}.flex-h-end{justify-content:flex-end}.fr{float:right}.relative{position:relative}.tac{text-align:center}.tar{text-align:right}.va-m{vertical-align:middle}.full-width{width:100%}.opacity--30{opacity:.3}.opacity--70{opacity:.7}.pointer-none{pointer-events:none}.ml-1{margin-left:1rem}.ml-2{margin-left:2rem}.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mb-0{margin-bottom:0}.mt-0{margin-top:0}.support-link{color:#f7ae2d}@media screen and (max-width:600px){.block--mobile{display:block}.ml-0--mobile{margin-left:0}.hide-on-mobile{display:none!important}}@media screen and (min-width:601px){.show-on-mobile{display:none}.flex--desk{display:flex}}hr{background:0;border:0;border-bottom:1px solid rgba(255,255,255,.12);margin:20px 0}label{cursor:pointer}[class*=hint--]:after{text-transform:none;font-weight:400;letter-spacing:.5px;font-size:14px}.line{display:block;margin-bottom:1em}.caret{display:inline-block;width:0;height:0;border:6px solid transparent;border-top-color:currentColor;position:relative;top:5px;margin-left:8px}a>svg{fill:rgba(255,255,255,.2)}.hidden-select{opacity:0;position:absolute;left:0;right:0;top:0;bottom:0}.btn{display:inline-block;color:var(--color-button);font-size:inherit;background:0 0;border:3px solid var(--color-button);border-radius:5px;padding:9px 15px;cursor:pointer;letter-spacing:.2px;line-height:1;white-space:nowrap;transition:box-shadow .2s ease}.btn--primary{background:var(--color-button) linear-gradient(180deg,rgba(0,0,0,.15) 0,transparent);color:#000;font-weight:600}.btn--big{padding:15px 30px;border-radius:3px}.btn-icon{display:inline-flex;align-items:center}.btn:hover{text-decoration:none;box-shadow:0 5px 5px 0 rgba(0,0,0,.25)}:focus{outline-width:4px;outline-color:var(--color-button);outline-style:solid;outline-offset:1px}.btn-icon>svg{width:20px;height:20px;fill:currentColor;vertical-align:middle;margin-right:8px}.btn--big>svg{width:25px;height:25px;margin-right:12px}.btn-loader{display:none}.is-loading>svg{display:none}.is-loading .btn-loader{display:block}.star:after{content:'★';color:currentColor}.show-when-selected{display:none}.selected .show-when-selected{display:inline-block}.main-container{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;overflow:hidden;transition:.1s ease .2s;will-change:filter}body:not(.light-version).overlay-visible .main-container{transition-duration:.5s;transition-delay:.4s;filter:blur(3px)}.content-wrap{height:1px;max-height:calc(100% - 70px)}.code-side,.demo-side{flex-basis:inherit;position:relative;width:50%}.layout-3 .content-wrap{flex-direction:row-reverse}.code-side{display:flex;flex-direction:column}.layout-2 .content-wrap{flex-direction:column}.layout-2 .code-side{flex-direction:row;width:auto}.layout-2 .demo-side{width:auto}.layout-5 .code-side{flex-direction:row;width:auto}.layout-5 .code-wrap{height:auto}.layout-4 .code-side{display:none}.layout-4 .code-side+.gutter{display:none}.layout-4 .demo-side{width:100%!important}.is-detached-mode .demo-side{display:none}.is-detached-mode .code-side{width:100%!important}.is-detached-mode.layout-2 .code-side{height:auto!important}.code-wrap{display:flex;flex-direction:column;flex-basis:inherit;height:33%;overflow:hidden;position:relative;background:var(--color-bg);transition:height .3s ease,width .3s ease;will-change:height}.layout-2 .code-wrap.is-minimized,.layout-5 .code-wrap.is-minimized{flex-direction:row}.is-dragging .code-wrap{transition:none}.layout-2 .code-wrap{height:auto;width:33%}.code-wrap__header{display:flex;flex-shrink:0;justify-content:space-between;align-items:center;padding:5px 10px;background:rgba(0,0,0,.2);color:#888;border-bottom:1px solid rgba(0,0,0,.3);font-weight:700;user-select:none}.code-wrap__header-label{display:inline-block;font-size:1.1em}.layout-2 .code-side .is-minimized .code-wrap__header,.layout-5 .code-side .is-minimized .code-wrap__header{writing-mode:vertical-lr;padding:10px 5px}.code-wrap__header .caret{transition:.2s ease}.is-minimized .code-wrap__header .caret{opacity:0}.code-wrap__header-btn{display:inline-block;vertical-align:top;margin-left:8px}.code-wrap__header-btn,.code-wrap__header-btn>svg{width:18px;height:18px}.code-wrap__header-right-options{position:relative;z-index:1}.code-wrap__collapse-btn:before{content:url('data:image/svg+xml;utf8,')}.is-maximized .code-wrap__collapse-btn:before{content:url('data:image/svg+xml;utf8,')}@keyframes pop-in{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.CodeMirror{width:100%;height:calc(100% - 25px);font-size:var(--code-font-size)}.layout-2 .is-minimized .Codemirror,.layout-5 .is-minimized .Codemirror{height:calc(100%)}.CodeMirror pre{font-variant-ligatures:contextual}.cm-s-monokai .CodeMirror-linenumber{color:rgba(255,255,255,.2)}.cm-s-monokai .CodeMirror-gutters,.cm-s-monokai.CodeMirror{background:var(--color-bg)}.cm-s-monokai .CodeMirror-guttermarker-subtle{opacity:.4}.cm-s-monokai .CodeMirror-activeline-background,.cm-s-monokai .CodeMirror-activeline-gutter{background:rgba(0,0,0,.1)!important}.CodeMirror-hints{font-size:var(--code-font-size);border:0;background:#1e1e2c}.CodeMirror-hint{color:#bbb;padding:2px 4px}li.CodeMirror-hint-active{background:#5b429d}#demo-frame{border:0;width:100%;height:calc(100% - 29px);position:absolute;z-index:1;background:#fff}body>#demo-frame{height:100%}.footer,.main-header{padding:5px 10px;background-color:#12131b;color:rgba(255,255,255,.45);border-top:1px solid rgba(255,255,255,.14)}.footer{display:flex;justify-content:space-between;z-index:6}.main-header{display:flex;flex-wrap:nowrap;border:0;border-bottom:1px solid rgba(255,255,255,.14)}.btn--dark,.main-header__btn-wrap>button{box-sizing:content-box;text-transform:uppercase;font-size:12px;font-weight:700;line-height:20px;height:20px;letter-spacing:.6px;white-space:nowrap;color:#9297b3;border-radius:3px;margin-left:10px;padding:0 8px;border:1px solid rgba(0,0,0,.9);background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(255,255,255,.1) 100%);box-shadow:0 -1px 0 0 rgba(255,255,255,.15)}.btn--dark>svg{fill:#9297b3;margin-right:4px}.main-header__btn-wrap>.is-marked>svg{fill:#dc143c}.btn--dark:hover{border-color:rgba(146,151,179,.5)}.main-header__btn-wrap>.is-loading{pointer-events:none;opacity:.4}.main-header__avatar-img,.profile-modal__avatar-img{border-radius:50%}.logo{display:inline-block;height:25px;width:48px;margin-right:5px;background:url(icon-48.png) 0 -12px;background-repeat:no-repeat;vertical-align:middle;-webkit-filter:grayscale(.9);filter:grayscale(.9);transition:.4s ease;opacity:.3;will-change:opacity,filter}.footer:hover .logo{-webkit-filter:grayscale(0);filter:grayscale(0);opacity:1}.footer__right{font-size:0;line-height:0}.footer__separator{display:inline-block;height:24px;margin:0 10px 0 20px;border-left:1px solid rgba(255,255,255,.2)}.mode-btn{background:0 0;border:0;padding:0;margin-left:10px;display:inline-block}.footer__link:first-of-type{margin-left:5px}.footer__link{display:inline-block;background:0 0;border:0;padding:0;margin-right:5px;position:relative;top:2px}.footer a>svg,.footer button>svg{transition:.3s ease;fill:rgba(255,255,255,.2)}.footer a:hover svg,.footer button:hover svg{fill:rgba(255,255,255,.45)}.mode-btn svg{width:24px;height:24px}.mode-btn.selected svg{fill:rgba(255,255,255,.45)}.gutter{background:rgba(255,255,255,.05);flex-shrink:0}.gutter-horizontal{cursor:ew-resize}.gutter-vertical{cursor:ns-resize}.item-title-input{background:0 0;border:0!important;color:rgba(255,255,255,.6);flex:1;padding:3px 5px!important}.search-input{width:100%;font-size:16px}.modal{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow-y:auto;align-items:center;display:flex;align-items:baseline;justify-content:center;z-index:2000;visibility:hidden;will-change:transform}@keyframes anim-modal-overlay{to{opacity:1;transform:translateY(0) scale(1)}}.modal__close-btn{position:absolute;right:1rem;top:1rem;text-transform:uppercase;font-weight:700;font-size:.8rem;opacity:.8;transition:.25s ease;border:1px solid #000;border-radius:2px;padding:.2rem .5rem}.modal__close-btn>svg{fill:#000;width:30px;height:30px}.modal__close-btn:hover{opacity:.7}.modal__content{background:var(--color-popup);color:var(--color-text);position:relative;border-radius:5px;opacity:0;padding:3em;font-size:1.1em;line-height:1.4;max-width:85vw;margin:2rem auto;box-sizing:border-box;overflow-y:auto;pointer-events:auto;transform:translateY(50px) scale(.95);animation:anim-modal .3s ease forwards;animation-delay:150ms}@keyframes anim-modal{to{opacity:1;transform:translateY(0) scale(1)}}@media screen and (max-width:900px){.modal__content{max-width:95vw}}.is-modal-visible{visibility:visible}.modal-overlay{position:fixed;width:100%;height:100%;visibility:hidden;top:0;left:0;z-index:5;opacity:0;will-change:opacity;background:rgba(0,0,0,.6);transition:opacity .3s}.ask-to-import-modal .modal__content,.modal--small .modal__content,.pledge-modal .modal__content{max-width:800px}.login-modal .modal__content{overflow-y:initial}.saved-items-pane{position:fixed;right:0;top:0;bottom:0;width:450px;padding:20px 30px;z-index:6;background-color:var(--color-popup);transition:.3s cubic-bezier(1,.13,.21,.87);transition-property:transform;will-change:transform;transform:translateX(100%)}.saved-items-pane.is-open{transition-duration:.4s;transform:translateX(0)}.is-modal-visible~.modal-overlay,.overlay-visible .modal-overlay,.saved-items-pane.is-open~.modal-overlay{opacity:1;visibility:visible}.saved-items-pane__close-btn{position:absolute;left:-18px;top:24px;opacity:0;visibility:hidden;border-radius:50%;padding:10px 14px;background:#dc143c;color:#fff;border:0;transform:scale(0);will-change:transform,opacity;transition:.3s ease;transition-delay:0}.saved-items-pane.is-open .saved-items-pane__close-btn{opacity:1;transition-delay:.4s;transform:scale(1);visibility:visible}.saved-item-tile{padding:20px;background-color:rgba(255,255,255,.06);position:relative;margin:20px 0;display:block;border-radius:4px;cursor:pointer;opacity:0;transform:translateX(50px);will-change:opacity,transform;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);animation:slide-left .35s ease forwards}.saved-item-tile:nth-child(1){animation-delay:.2s}.saved-item-tile:nth-child(2){animation-delay:.25s}.saved-item-tile:nth-child(3){animation-delay:.3s}.saved-item-tile:nth-child(4){animation-delay:.35s}.saved-item-tile:nth-child(5){animation-delay:.4s}.saved-item-tile:nth-child(6){animation-delay:.45s}.saved-item-tile:nth-child(7){animation-delay:.5s}.saved-item-tile:nth-child(8){animation-delay:.55s}.saved-item-tile:nth-child(9){animation-delay:.6s}.saved-item-tile:nth-child(10){animation-delay:.65s}.saved-item-tile:nth-child(11){animation-delay:.7s}.saved-item-tile:nth-child(12){animation-delay:.75s}.saved-item-tile:nth-child(n+12){animation-delay:.8s}@keyframes slide-left{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}.saved-item-tile.selected,.saved-item-tile:hover{background:rgba(255,255,255,.1)}.saved-item-tile__btns{position:absolute;top:6px;z-index:1;right:8px;opacity:0;pointer-events:none;transition:.25s ease}.saved-item-tile.selected .saved-item-tile__btns,.saved-item-tile:hover .saved-item-tile__btns{opacity:1;pointer-events:auto}.saved-item-tile__img{margin-right:10px}.saved-item-tile__btn{padding:7px 10px;color:#fff;border-radius:20px;margin-left:2px;background:rgba(255,255,255,.1);text-transform:uppercase}.saved-item-tile__btn:hover{background:rgba(255,255,255,.8);color:#555}.saved-item-tile__title{pointer-events:none;font-size:1.4em;margin:0;opacity:.8}.saved-item-tile__meta{margin-top:8px;pointer-events:none;opacity:.3}.saved-items-pane__container{overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 90px)}.notifications-btn{position:relative}@keyframes shake{2%,22%{transform:translate3d(-1px,0,0)}20%,5%{transform:translate3d(2px,0,0)}12%,17%,7%{transform:translate3d(-4px,0,0)}10%,15%{transform:translate3d(4px,0,0)}}.notifications-btn.has-new{animation:shake 7s linear infinite;transform-origin:50% 10px}.notifications-btn__dot{position:absolute;right:1;top:-2px;background:#31fe45;border-radius:50%;width:12px;height:12px;display:none}.has-new .notifications-btn__dot{display:block}.notification{border-radius:5px;padding:20px;background:rgba(248,246,249,.05);position:relative}.notification:not(:last-child){margin-bottom:10px}.notification li:not(:last-child){margin-bottom:10px}.notification__version{background:#af6204;color:#fff;padding:3px;border-radius:5px;position:absolute;top:2px;left:2px}.loader,.loader:after{border-radius:50%;width:3em;height:3em}.loader{font-size:5px;position:relative;text-indent:-9999em;border-top:1.1em solid rgba(118,57,229,.2);border-right:1.1em solid rgba(118,57,229,.2);border-bottom:1.1em solid rgba(118,57,229,.2);border-left:1.1em solid #7639e5;transform:translateZ(0);animation:load8 1.1s infinite linear}@keyframes load8{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.btn-group{position:relative;cursor:pointer}.dropdown__menu{position:absolute;top:100%;left:0;padding:0;margin:0;min-width:200px;display:block;font-size:.88rem;list-style:none;border-radius:4px;overflow:hidden;opacity:0;visibility:hidden;transition:transform .25s ease;transform:translateY(10px);z-index:5;background:#fff}.dropdown__menu>li>a{display:block;padding:6px 15px;color:#333;cursor:pointer}.dropdown__menu>li.selected>a,.dropdown__menu>li>a:hover{background:var(--color-popup);color:#fff}.dropdown__menu>li:not(:last-child){border-bottom:1px solid rgba(0,0,0,.05)}.dropdown__menu.is-open,.open>.dropdown__menu{opacity:1;visibility:visible;transform:translateY(0)}.alerts-container{position:fixed;will-change:transform;left:50%;top:-5px;padding:10px;background:#fff;border:1px solid #eee;color:#333;box-shadow:0 3px 5px rgba(0,0,0,.2);font-size:1rem;border-radius:3px;z-index:6;transform:translateX(-50%) translateY(-100%);transition:.3s ease}.alerts-container.is-active{transform:translateX(-50%) translateY(0)}.error-gutter{width:8px}.gutter-error-marker{width:8px;height:20px;background:red;border-radius:0;position:relative;top:0;left:1px}.gutter-error-marker:after{content:attr(data-title);background:red;color:#fff;padding:4px;opacity:0;visibility:hidden;position:absolute;top:14px;left:0;width:300px;transform:translateX(-10px);will-change:transform;transition:.2s ease}.gutter-error-marker:hover:after{opacity:1;visibility:visible;transform:translateX(0)}.count-label{color:rgba(0,0,0,.8);background:rgba(255,255,255,.53);border-radius:5px;padding:1px 6px;font-weight:700}.onboard-step{margin:15px;padding:20px 30px;background-color:rgba(255,255,255,.1);border-radius:10px;box-shadow:0 16px 22px rgba(0,0,0,.1);flex:1}.onboard-step__icon{fill:rgba(255,255,255,.3);stroke-width:.5px;stroke:rgba(0,0,0,.4);width:80px;height:80px}.autocomplete-dropdown{border-top-left-radius:0;border-top-right-radius:0;right:0;max-height:200px;overflow-y:auto;border:1px solid rgba(0,0,0,.5);z-index:2001}.autocomplete__loader{position:absolute;right:3px;bottom:1px}@keyframes wobble{from{transform:none}15%{transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}to{transform:none}}.animated{animation-duration:1s;animation-fill-mode:both}.wobble{animation-name:wobble}.console{background:var(--color-bg);z-index:6;position:absolute;bottom:0;min-height:80px;height:35vh;left:0;right:0;display:flex;flex-direction:column;transform:translateY(0);transition:transform .4s cubic-bezier(.76,.01,.13,.9)}.console.is-minimized{transform:translateY(calc(100% - 29px))}.console .CodeMirror{height:calc(100% - 30px)}.console__log{flex:1}.console-exec-input{padding:5px;font-size:1.3em;flex:1;background:rgba(0,0,0,.3);color:#fff;border:0}.console:not(.is-minimized) .code-wrap__header{cursor:ns-resize}.global-console-container{display:none;position:relative;height:35px}.is-detached-mode .console,.is-detached-mode .footer{z-index:4}.is-detached-mode .global-console-container{display:block}.kbd-shortcut__keys{background:rgba(0,0,0,.3);border-radius:3px;padding:3px 8px;margin-right:5px;display:inline-block;font-size:.9rem;font-weight:700}.kbd-shortcut__details{display:inline-block}.web-maker-with-tag{position:relative;display:inline-block}.is-extension .web-maker-with-tag:after{display:none}.social-login-btn--github{color:#fff;background:#656b6f;border-color:#656b6f}.social-login-btn--facebook{color:#fff;background:#4e62c0;border-color:#4e62c0}.social-login-btn--google{background:#fff;border:2px solid currentColor;color:#000}body.is-logged-in .hide-on-login,body:not(.is-app) .show-when-app,body:not(.is-extension) .show-when-extension,body:not(.is-logged-in) .hide-on-logout{display:none}.onboard-selection{padding:10px;margin:0 40px;border-radius:5px;transition:.25s ease;position:relative;border:1px solid transparent}.onboard-selection:hover{cursor:pointer;transform:scale(1.15)}.onboard-selection.selected:after{content:'';position:absolute;right:-20px;bottom:40px;width:80px;height:80px;border-radius:50%;background:#fff url('data:image/svg+xml;charset=UTF-8,')}.bookmarklet{display:inline-flex;align-items:center;border:1px #aaa solid;padding:0 5px;border-style:dashed;color:#f7f7f7}.help-text{font-size:.9em;color:rgba(255,255,255,.5)}.social-login-btn:after,.social-login-btn:before,.social-login-btn:hover:after,.social-login-btn:hover:before{visibility:hidden}.last-login-github .social-login-btn--github:after,.last-login-github .social-login-btn--github:before{visibility:visible}.last-login-facebook .social-login-btn--facebook:after,.last-login-facebook .social-login-btn--facebook:before{visibility:visible}.last-login-google .social-login-btn--google:after,.last-login-google .social-login-btn--google:before{visibility:visible}.footer__js13k-days-left{padding:1px 9px;text-transform:uppercase;background:#b12a34;color:#fff;border-radius:3px;letter-spacing:.7px}.footer__js13k-code-size{margin-left:1rem}.js13k__dropdown{position:fixed;display:inline-block;background:var(--color-popup);color:var(--color-text);bottom:35px;padding:16px;border-radius:4px;box-shadow:0 -7px 13px 2px rgba(0,0,0,.2);left:50%;margin-left:-115px}@media screen and (max-width:600px){body{font-size:70%}.main-header{overflow-x:auto}.main-header__btn-wrap{flex-shrink:0}.modal__content{padding:1em}.saved-items-pane{width:77vw;padding:10px 20px}}.cm-s-paraiso-dark.CodeMirror{background:#2f1e2e;color:#b9b6b0}.cm-s-paraiso-dark .CodeMirror-gutters{background:#2f1e2e;border-right:0}.cm-s-paraiso-dark .CodeMirror-activeline-background{background:#4d344a}.cm-s-monokai.CodeMirror{background:#272822;color:#f8f8f2}.cm-s-monokai .CodeMirror-gutters{background:#272822;border-right:0}.cm-s-monokai .CodeMirror-activeline-background{background:#373831}.cm-s-3024-day.CodeMirror{background:#f7f7f7;color:#3a3432}.cm-s-3024-day .CodeMirror-gutters{background:#f7f7f7;border-right:0}.cm-s-3024-day .CodeMirror-activeline-background{background:#e8f2ff}.cm-s-material.CodeMirror{background-color:#263238;color:rgba(233,237,237,1)}.cm-s-material .CodeMirror-gutters{background:#263238;color:#537f7e}.cm-s-material .CodeMirror-activeline-background{background:rgba(0,0,0,0)}.cm-s-dracula .CodeMirror-gutters,.cm-s-dracula.CodeMirror{background-color:#282a36!important;color:#f8f8f2!important}.cm-s-dracula .CodeMirror-activeline-background{background:rgba(255,255,255,.1)}.cm-s-blackboard.CodeMirror{background:#0c1021;color:#f8f8f8}.cm-s-blackboard .CodeMirror-gutters{background:#0c1021;border-right:0}.cm-s-blackboard .CodeMirror-activeline-background{background:#3c3636}.cm-s-midnight.CodeMirror{background:#0f192a;color:#d1edff}.cm-s-midnight .CodeMirror-gutters{background:#0f192a;border-right:1px solid}.cm-s-midnight .CodeMirror-activeline-background{background:#253540}