.app-header{grid-column:1/3;margin-bottom:3em;display:flex;align-items:flex-end;justify-content:space-between;max-width:1380px;width:100%;margin-left:auto;margin-right:auto;padding:2em 0;position:relative;border-bottom:1px solid var(--color-grey)}.app-header h1{font-size:var(--font-size__main);margin:0;font-weight:400;color:#fff}.app-header h1 strong{color:var(--color-brand);font-weight:inherit}.app-header__logo{width:63%}.app-header__logo h2{font-size:var(--font-size__tiny);font-weight:400;color:var(--color-grey-light);margin-bottom:0}.app-header__logo span{font-size:.5em;opacity:.3;margin-left:1em;top:-1em;position:relative}.app-header__loader{height:96px}.app-header__aside{display:flex;justify-content:flex-end;align-items:center}.app-header__aside>*{margin-left:1.4em}.donate-button{text-decoration:none;color:#fff}.showcase-filter{padding:6em 0 1em;margin:0 3em;max-width:120em;display:flex;justify-content:space-between;border-bottom:1px solid #eee}.showcase-filter__results{font-size:var(--font-size__base);color:var(--color-grey-light)}.showcase-filter__results a{font:inherit;font-size:var(--font-size__medium);color:inherit;text-decoration:none}.showcase-filter input{background:none;border:1px solid #ddd;padding:1em;font:inherit;font-size:.8em;border-radius:4px;height:1em;width:20em}.showcase{background:linear-gradient(to bottom,#00000005,#fff 5%)}.showcase-grid{padding:0 2em;margin:2em auto;max-width:120em;display:flex;flex-wrap:wrap}.showcase-item{min-height:300px;box-sizing:border-box;margin:15px;padding:30px;width:calc((100% / 3) - 30px);background-color:#fff;border:1px solid #e6e7eb;border-radius:4px;box-shadow:0 .7px .9px #00000006,0 1.9px 2.4px #00000009,0 4.5px 5.7px #0000000c,0 15px 19px #00000012}.showcase-component{height:15vw;overflow:hidden}.showcase-component svg{width:100%;height:100%}.showcase-caption{box-sizing:border-box;padding-top:16px;margin-top:16px;margin-bottom:-8px}.showcase-item h4{margin:0 .7em 0 0;display:inline-block;width:70%;font-weight:400;font-size:var(--font-size__base);letter-spacing:.3px}.showcase-item a{text-decoration:none;display:block;color:var(--color-grey-light);font-size:var(--font-size__base);letter-spacing:.5px;margin-top:1em}.showcase-item .source{float:right;margin-top:0;color:var(--color-brand)}.showcase-item__new{display:flex;position:relative}.showcase-item__new a{margin:auto;text-shadow:0 4px 10px rgba(0,0,0,.1);box-shadow:0 4px 3px #0000000a;position:relative;background:#eeeeee80;padding:.5em 1em;border-radius:40px;transition:all .3s ease;top:-2em;z-index:999}.showcase-item__new a:before{content:"+";display:inline-block;margin-right:.5em}.showcase-item__new-loader{position:absolute;left:16px;right:16px;bottom:16px;width:calc(100% - 32px);height:calc(100% - 32px)}:root{--background: #1c2022;--color-silver: #3f3f41;--color-grey: #2f3134;--color-grey-light: #aaa;--color-brand: #6181ec;--font-size__main: 1.5rem;--font-size__medium: 1.2rem;--font-size__base: 1rem;--font-size__tiny: .833rem;--border-radius: 6px}html{scroll-behavior:smooth}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;min-height:100vh;min-width:960px}.App{background-color:var(--background);background-image:url(/assets/background-asset-Bu3fypXt.png),url(/assets/background-asset-Bu3fypXt.png);background-position:left top,right bottom;background-size:auto 700px;background-repeat:no-repeat}.container{padding:0 2em 3em;width:100%;margin-left:auto;margin-right:auto;min-height:76vh;max-width:1380px;display:grid;grid-template-rows:auto 1fr;grid-template-columns:repeat(2,calc(690px - 3em));grid-gap:0 3em}.app-column{width:100%}.app-editor{box-shadow:0 1.6px 2px #0000000a,0 3.7px 4.7px #0000000f,0 6.7px 8.4px #00000013,0 11.1px 14px #00000016,0 18.3px 23px #0000001a,0 31.9px 40.2px #0000001e,0 69px 87px #00000029;border-radius:var(--border-radius);padding:1.2em;max-width:100%;overflow:auto;position:sticky;top:30px;background:var(--background);border:1px solid var(--color-silver);width:100%;box-sizing:border-box;overflow:hidden}.app-editor pre{background:none!important;padding:0!important;font-size:12px}.token.comment{color:#616161!important}.copy-to-clipboard{float:right;font-size:.8em;color:var(--color-grey-light);cursor:pointer;line-height:1.6}.copy-to-clipboard:active{transform:translateY(1px)}.react-live-error{padding:.5em;border-radius:var(--border-radius);background-color:#ce11260d;color:#f85955}.app-mode{margin:-1.2em -1.2em 1.2em;background:#1a1d1f}.app-mode button{background:none;outline:none;border:none;color:var(--color-grey-light);padding:.8em 1.6em .7em;cursor:pointer;transition:all .2s ease}.app-mode button span{color:#aaa;font-size:.6em;position:relative;top:-.6em;color:#fff}.app-mode .active{background:var(--background);color:#fff}.app-editor__language-selector{background:var(--color-grey);padding:.7em 1em 0;margin:1em -1.2em -1.2em;overflow:hidden}.app-editor__language-button{color:#fff;text-decoration:none;margin-right:1em;padding-bottom:.5em;display:inline-block;background:none;border:0;font:inherit;outline:none;transition:opacity .3s ease}.app-editor__language-button:not(.current):hover{cursor:pointer;opacity:.6}.app-editor__language-button span span{color:var(--color-grey-light);font-size:.6em;position:relative;top:-.6em}.app-editor__language-selector .current{border-bottom:2px solid var(--color-brand)}.app-canvas{position:relative;min-height:8em;transition:all .3s ease;overflow:hidden;background:#fff;padding:1.5em;border-radius:var(--border-radius);border:1px solid var(--color-silver)}.app-canvas:before{content:"";position:absolute;top:0;left:0;right:0;bottom:5em;background-image:-webkit-repeating-radial-gradient(top center,rgba(0,0,0,.1),rgba(0,0,0,.1) 1px,transparent 1px,transparent 100%);background-size:20px 20px;transition:all .3s ease}.app-canvas__guideline{position:absolute;top:1.5em;left:1.5em;right:1.5em;bottom:4em;overflow:hidden;opacity:.1;transition:all .3s ease}.app-canvas__guideline img{max-width:100%}.app-canvas:hover .app-canvas__guideline{opacity:.8}.app-canvas__sketch{position:absolute;left:1.5em;top:1.5em;z-index:1}.react-live-preview{transition:all .3s ease;position:relative;z-index:1}.app-canvas:hover .react-live-preview{opacity:.9}.app-canvas__draw .upper-canvas{cursor:crosshair!important}.app-canvas__grid-visibility-off.app-canvas:before,.app-canvas__grid-visibility-off .app-canvas__guideline{opacity:0!important}.app-handlers{border-top:1px solid #e1e1e1;margin-top:3em;padding-top:1em;margin-bottom:-.5em;height:30px}.app-handlers>*{margin-right:1em}.app-handlers button{background:none;border:0;outline:0;padding:0;cursor:pointer}.app-handler__clone,.app-handler__trash,.app-handlers__tool{vertical-align:middle;width:20px;height:20px;cursor:pointer;opacity:.4;transition:opacity .3s ease}.app-handlers__tool img{width:100%;height:auto}.app-handler__trash,.app-handler__clone{float:right;opacity:1;margin-left:1em}.app-handler__trash img,.app-handler__clone img{height:100%;width:auto}.app-handlers__tool.app-handlers__active{opacity:1}.app-handlers .app-handlers__div{display:inline-block;vertical-align:middle;padding-left:.5em;font-size:var(--font-size__tiny)}.app-handlers .app-handlers__preset{display:inline-block;vertical-align:middle;padding:0 .3em;transition:color .3s ease;font:inherit;font-size:var(--font-size__tiny)}.app-config{margin-top:2em;padding-top:1em;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between}.app-config_caption{color:var(--color-grey-light);font-size:var(--font-size__tiny);width:100%!important}.app-config_inline{border:1px solid var(--color-silver);background:var(--color-grey);border-radius:3px;padding:.5em;position:relative}.app-config_inline input{background:none;border:0;font:inherit;padding:0;color:#fff;outline:0}.app-config_inline label{position:absolute;right:.5em;top:.7em;color:var(--color-grey-light);z-index:2;font-size:.9em}.app-config .row{width:calc((100% / 3) - 2em)}.app-config .row p{display:flex;align-items:center;position:relative}.app-config input[type=color]{border:0;width:31px;height:31px;border-radius:3px;margin:-.4em 1em -.4em -.3em}.app-editor_item-editor{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);border:1px solid var(--color-silver);padding:1em 1em 0;margin-top:-.3em}.app-editor_item-editor .row{display:flex;flex-wrap:wrap;justify-content:space-between}.app-editor_item-editor p{width:28%;margin-top:0}.app-config input[type=color]::-webkit-color-swatch{border:0;border-radius:2px}.app-config input[type=checkbox]{height:auto;width:auto;margin-right:1em;margin-bottom:1em}.app-config .toggle{display:inline-flex;align-items:center;line-height:1;cursor:pointer;top:-.1em;position:relative}.app-config .toggle-input{display:none}.app-config .toggle-check{margin-right:.75em;position:relative;margin-top:.2em}.app-config .toggle-check:before{content:"";display:block;position:relative;width:2.2rem;height:1.45rem;border-radius:1rem;background:#f8f8f8;cursor:pointer;background:var(--color-silver);transition:all .3s ease}.app-config .toggle-check:after{content:"";display:block;background:#fff;box-shadow:0 2px 6px #00000005;width:1.15rem;height:1.15rem;border-radius:1.2rem;position:absolute;left:.15rem;top:.15rem;transition:all .3s ease}.app-config .toggle-check.checked:before{box-shadow:inset 0 0 0 18px var(--color-brand)}.app-config .toggle-check.checked:after{left:calc(100% - 1.15rem - .15rem)}.app-config .app-config__guideline{width:calc(((100% / 3) * 2) - 1em);position:relative}.app-config .app-config__guideline button{background:none;border:0}.app-config_grid-col{width:calc(((100% / 3)) - 2em);margin-top:0}.app-config .reset-colors{background:none;border:0;outline:0;color:var(--color-grey-light);position:absolute;right:0;cursor:pointer}.learn-more{margin-top:1em;padding-top:1em;border-top:1px solid var(--color-grey)}.learn-more--title{color:var(--color-grey-light);font-size:var(--font-size__tiny);width:100%!important;font-weight:400;margin-top:1.5em;margin-bottom:.5em}.learn-more--link{color:#fff;font-size:var(--font-size__tiny);margin-top:0;margin-bottom:.3em;transition:all .3s ease}.learn-more--link:hover{color:var(--color-brand)}.learn-more--link a{color:inherit;text-decoration:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.upload-intro{color:#fff;text-align:center;margin:3em auto 1em;line-height:1.6}.upload-disclaimer{color:var(--color-grey-light);text-align:center;font-size:.8em;margin:0 auto 5em}.upload-textarea{margin:0 2.5em 1em;width:calc(100% - 5em);min-height:210px;outline:0;color:#fff;border:1px solid var(--color-silver);border-radius:9px;display:block;background:#ffffff0d;padding:1em;box-shadow:0 3.4px 4.3px #0000000f,0 11.4px 14.5px #00000015,0 51px 65px #00000024;resize:vertical;box-sizing:border-box}.upload-input-handle{margin:3em 2.5em 1em;width:calc(100% - 5em);height:250px;color:#fff;border:1px dashed var(--color-silver);border-radius:9px;display:block;padding:1em;box-sizing:border-box;overflow:hidden;position:relative;display:flex;transition:all .2s ease}.upload-error{margin-top:1em;padding:.5em;border-radius:var(--border-radius);background-color:#ce11260d;color:#f85955}.upload-input-handle--hover{border:1px dashed #fff}.upload-input-handle>*{margin:auto}.upload-input-handle .upload-intro{margin:0}.upload-input-handle input{font-size:2000%;position:absolute;left:0;right:0;top:0;bottom:0;opacity:0}.upload-body-textarea::placeholder{color:var(--color-grey-light)}.upload-button{margin-left:1em;background:var(--color-brand);border:0;color:#fff;padding:.5em 1em;border-radius:4px;line-height:1;cursor:pointer}