#header{display:flex;justify-content:space-between;align-items:center;padding:24px 64px;border-bottom:1px solid #f3f4f6}#header .header-title h1{font-size:1.7rem;font-weight:700;margin:0 0 8px;color:#333}#header .header-title h1 span.emoji{font-size:1.6rem}#header .header-title span{font-size:.9rem}#header .header-menu{display:flex;align-items:center}#header .header-menu nav{display:flex;align-items:center;text-align:right;padding:.3em}#header .header-menu nav a{color:var(--contrast-color);margin-right:16px;padding-bottom:8px;text-decoration:none;border-bottom:1px solid;cursor:pointer}#header .header-menu nav a.active{font-weight:bold}#header .header-menu nav svg{cursor:pointer;font-size:2em}body.dark-theme #header{border-bottom:1px solid #1c2435}body.dark-theme #header .header-title h1{color:#fff}.pwa-toast{position:fixed;right:2em;bottom:1em;border-radius:4px;z-index:1}.pwa-toast .pwa-toast--offline,.pwa-toast .pwa-toast--update{background-color:var(--gradient-800);color:var(--contrast-color);display:flex;align-items:center;border-radius:1rem;padding:.8rem;margin-bottom:.8rem;font-size:.8rem}.pwa-toast .pwa-toast--offline svg,.pwa-toast .pwa-toast--update svg{display:inline-flex;margin-right:.4rem}svg.dark-mode #chrome #Base{fill:#0c0c17}svg.dark-mode #chrome #Bar-Base,svg.dark-mode #chrome #Tab #Shape,svg.dark-mode #chrome #Address #Rectangle{fill:#313543}svg.dark-mode #chrome #Address #Address-Base{fill:#191b21}svg.dark-mode #chrome #Navigation-Items #Arrow-Back,svg.dark-mode #chrome #Navigation-Items #Refresh,svg.dark-mode #chrome #New-Tab{fill:#fff}section.result{position:relative;display:flex;overflow-y:scroll;overflow-x:hidden;width:82vw;height:calc(100% - 60px);padding:30px 0;background-position:center;background-size:contain}section.result .result-wrapper{max-width:82%;margin:auto}section.result .result-wrapper #input{width:256px;padding:3em 4em;border-radius:.4em;box-shadow:var(--box-shadow);background-color:#f5f5f5;color:#333;font-size:.85rem;text-align:center}section.result .result-wrapper #input input{display:none}section.result .result-wrapper #input img{width:128px}section.result .result-wrapper #canvas{background-position:center;background-size:cover;background-repeat:no-repeat;padding:48px;box-sizing:border-box;border-radius:0;opacity:1;width:initial}section.result .result-wrapper #canvas.has-bg-image{background-size:cover;background-position:50% 50%}section.result .result-wrapper #canvas.has-bg-image[data-image-type=type-2],section.result .result-wrapper #canvas.has-bg-image[data-image-type=type-3]{background-size:contain}section.result .result-wrapper #canvas.has-bg-image[data-image-type=type-2]{background-position:right}section.result .result-wrapper #canvas.has-bg-image[data-image-type=type-3],section.result .result-wrapper #canvas.has-bg-image[data-image-type=type-5],section.result .result-wrapper #canvas.has-bg-image[data-image-type=type-6]{background-position:top}section.result .result-wrapper #canvas .canvas-mockup.has-radius{border-radius:8px}section.result .result-wrapper #canvas .canvas-mockup.has-radius .canvas-mockup--header-window,section.result .result-wrapper #canvas .canvas-mockup.has-radius .canvas-mockup--content{border-radius:8px}section.result .result-wrapper #canvas .canvas-mockup.has-radius.with-position--left .canvas-mockup--header-window,section.result .result-wrapper #canvas .canvas-mockup.has-radius.with-position--left .canvas-mockup--content{border-top-left-radius:0;border-bottom-left-radius:0}section.result .result-wrapper #canvas .canvas-mockup.has-radius.with-position--right .canvas-mockup--header-window,section.result .result-wrapper #canvas .canvas-mockup.has-radius.with-position--right .canvas-mockup--content{border-top-right-radius:0;border-bottom-right-radius:0}section.result .result-wrapper #canvas .canvas-mockup.has-radius.with-position--bottom .canvas-mockup--header-window,section.result .result-wrapper #canvas .canvas-mockup.has-radius.with-position--bottom .canvas-mockup--content{border-bottom-left-radius:0;border-bottom-right-radius:0}section.result .result-wrapper #canvas .canvas-mockup.has-radius.with-position--top .canvas-mockup--header-window,section.result .result-wrapper #canvas .canvas-mockup.has-radius.with-position--top .canvas-mockup--content{border-top-left-radius:0;border-top-right-radius:0}section.result .result-wrapper #canvas .canvas-mockup.has-border .canvas-mockup--header-window{border-bottom-left-radius:0;border-bottom-right-radius:0}section.result .result-wrapper #canvas .canvas-mockup.has-border .canvas-mockup--content{border-top-left-radius:0;border-top-right-radius:0}section.result .result-wrapper #canvas .canvas-mockup.has-shadow--s-1{box-shadow:0 1px 2px #0000000d}section.result .result-wrapper #canvas .canvas-mockup.has-shadow--s-2{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}section.result .result-wrapper #canvas .canvas-mockup.has-shadow--s-3{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}section.result .result-wrapper #canvas .canvas-mockup.has-shadow--s-4{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}section.result .result-wrapper #canvas .canvas-mockup.has-shadow--s-5{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}section.result .result-wrapper #canvas .canvas-mockup.has-shadow--s-6{box-shadow:0 25px 50px -12px #00000040}section.result .result-wrapper #canvas .canvas-mockup.has-shadow--s-7{box-shadow:0 35px 60px -15px #0000004d}section.result .result-wrapper #canvas .canvas-mockup.has-shadow--s-8{box-shadow:0 14px 28px #00000040,0 10px 10px #00000038}section.result .result-wrapper #canvas .canvas-mockup .canvas-mockup--header-window,section.result .result-wrapper #canvas .canvas-mockup .canvas-mockup--content{display:block;width:100%}section.result .result-wrapper .result-preload{display:none;position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);background-color:var(--preload-color);flex-direction:column;align-items:center;justify-content:center;width:50%;height:50%;border-radius:1em}section.result .result-wrapper .result-preload span.emoji{font-size:6em;margin-bottom:.4em}section.result .result-wrapper .result-preload.active{display:flex;box-shadow:var(--box-shadow)}section.result .result-wrapper .result-action{display:flex;position:fixed;bottom:2em;left:2em}section.result .result-wrapper .result-action .result-action--reset{font-size:1.5em;cursor:pointer}section.result .result-wrapper .result-action .result-action--reset:hover{color:var(--secondary-color)}section.controller{width:18vw;background-color:#0000001a;padding:1em;display:flex;flex-direction:column}section.controller .controller-form--group{margin:.6em 0}section.controller .controller-form--field{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem}section.controller .controller-form--field label{font-size:.8rem}section.controller .controller-form--field .field-padding{width:calc(115px - 24px)}section.controller .controller-form--field .field-position{display:flex;justify-content:space-between;width:115px}section.controller .controller-form--field .field-position svg{cursor:pointer}section.controller .controller-form--field .field-position svg:not(.active){color:#8f8f8f}section.controller .controller-form--field .gradient-color--item{width:24px;height:24px;border-radius:100%;cursor:pointer}section.controller .controller-form--field select{width:115px}section.controller .controller-form--field .export-button{flex:1}section.controller .controller-form--field .export-button:not(:last-child){margin-right:8px}section.controller .controller-button--action{display:flex}section.controller .controller-button--action button{width:100%}section.controller .controller-button--action button:first-child{margin-right:8px}.modal{width:536px;background-color:var(--gradient-800)}section#content{position:relative;height:calc(100% - 112px)}section#content .main{display:flex;height:100%}section#content .has-gradient{background-image:linear-gradient(to right top,var(--gradient-from),var(--gradient-to, rgba(236, 72, 149, 0)))}section#content .has-gradient--none{background-color:#fdfdfd}.share-link--content{margin-top:16px}.share-link--content textarea{outline:none;border:none;padding:8px;background:var(--gradient-700);border-radius:8px;width:calc(100% - 16px);height:64px;font-size:.9rem;color:var(--contrast-color)}.modal-enter-active,.modal-leave-active{transition:transform .2s cubic-bezier(.4,0,.2,1)}.modal-enter-from,.modal-leave-to{transform:scale(0)}.modal-enter-to,.modal-leave-from{transform:scale(1)}*{font-family:"IBM Plex Mono",monospace;letter-spacing:.05786em}body{background-color:#fff;--dark-color: rgb(250, 145, 25);--secondary-color: rgb(250, 145, 25);--contrast-color: black;--icon-color: #f97316;--preload-color: #f5f5f5;--gradient-50: rgb(255, 242, 203);--gradient-100: rgb(254, 236, 181);--gradient-200: rgb(253, 224, 134);--gradient-300: rgb(253, 213, 87);--gradient-400: rgb(253, 202, 54);--gradient-500: rgb(252, 193, 36);--gradient-600: rgb(252, 180, 31);--gradient-700: rgb(251, 161, 28);--gradient-800: rgb(250, 145, 25);--gradient-900: rgb(249, 115, 22);--box-shadow: 0 1px 1px hsl(0deg 0% 0% / .075), 0 2px 2px hsl(0deg 0% 0% / .075), 0 4px 4px hsl(0deg 0% 0% / .075), 0 8px 8px hsl(0deg 0% 0% / .075), 0 16px 16px hsl(0deg 0% 0% / .07);padding:0;margin:0;color:var(--contrast-color)}body.dark-theme{background-color:#111827;--dark-color: rgb(49, 36, 200);--secondary-color: rgb(202, 202, 250);--contrast-color: white;--icon-color: #1ce7b4;--preload-color: #212121;--gradient-100: rgb(234, 240, 255);--gradient-200: rgb(224, 230, 252);--gradient-300: rgb(207, 214, 235);--gradient-400: rgb(171, 178, 198);--gradient-500: rgb(139, 145, 165);--gradient-600: rgb(99, 105, 124);--gradient-700: rgb(80, 86, 104);--gradient-800: rgb(49, 56, 73);--gradient-900: rgb(17, 24, 39)}html,body,#app{height:100%}#app{display:flex;flex-direction:column}#modal{overflow:hidden;position:absolute;top:0;left:0;width:100vw;height:100vh;display:flex;align-content:flex-start;justify-content:center;align-items:center;background-color:#ffffff40;transform:scale(1)}#modal:not(.active){transition-delay:.2s;transform:scale(0)}#modal .modal{padding:16px;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f;border-radius:.5em}#modal .modal[tabindex]{outline:none!important}#modal .modal .modal-header{display:flex;justify-content:space-between;align-items:center}#modal .modal .modal-header .modal-header--action{display:flex;align-items:center}#modal .modal .modal-header .modal-header--action .icon{cursor:pointer}.emoji{font-family:emoji,sans-serif}.icon-color{color:var(--icon-color)}.icon{width:18px;height:18px;display:block;background-position:center;background-size:contain;cursor:pointer}.icon.no-pointer{cursor:default}.notyf .notyf__message{font-size:.8rem}select,input[type=text],input[type=number],button{outline:none;border:none}select,input[type=text],input[type=number]{background-color:#fff;padding:8px 12px;border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}button{background:var(--gradient-300);padding:8px 16px;border-radius:6px;cursor:pointer}button.btn-transparent{background:rgba(255,255,255,.5)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{border-radius:0;background-color:#0000004d}::-webkit-scrollbar-thumb{border-radius:8px;background-color:#0006}@media only screen and (max-width: 768px){#app{padding:1rem;height:calc(100% - 2rem)}#app #header{padding:0 0 .8em;border-bottom:none;flex-direction:column}#app #header .header-title{width:100%;margin-bottom:8px}#app #header .header-title h1{font-size:1.5em}#app #header .header-title span{font-size:.8em}#app #header .header-menu{width:100%}#app #header .header-menu nav{text-align:left;padding:8px 0;width:100%}#app #header .header-menu nav>a{font-size:.83em;margin-right:12px}#app #header .header-menu nav>a.active{font-weight:bold}#app #header .header-menu nav>i{flex:1;display:flex;justify-content:flex-end}#app #header .header-menu .icon.icon-lg{position:fixed;top:1em;right:1em}#app #content{height:auto}#app #content .main{align-items:flex-start;flex-direction:column}#app #content .main section.result{width:100%;overflow-y:hidden}#app #content .main section.result .result-wrapper{margin:0;max-width:100%}#app #content .main section.result .result-wrapper #input{width:calc(100% - 8em)}#app #content .main section.result .result-wrapper .result-action{background-color:var(--dark-color);padding:8px;border-radius:8px}#app #content .main section.result .result-wrapper .result-preload.active{width:95%}#app #content .main section.controller{width:calc(100% - 2em)}#app #content .main .main-content{position:relative;width:100%;flex-direction:column;box-shadow:none}#app #content .main .main-content section{width:100%;border-radius:1rem;margin-bottom:1rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}#app #content .main .main-content section#about{width:100%}#app #content .main .main-content section#about p{font-size:.9rem}#app #content .main .main-content--shadow{width:100%;height:250px}body.dark-theme section#content .main .main-content section#panel-result{background-color:var(--gradient-800)}}@-webkit-keyframes notyf-fadeinup{0%{opacity:0;transform:translateY(25%)}to{opacity:1;transform:translateY(0)}}@keyframes notyf-fadeinup{0%{opacity:0;transform:translateY(25%)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes notyf-fadeinleft{0%{opacity:0;transform:translate(25%)}to{opacity:1;transform:translate(0)}}@keyframes notyf-fadeinleft{0%{opacity:0;transform:translate(25%)}to{opacity:1;transform:translate(0)}}@-webkit-keyframes notyf-fadeoutright{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(25%)}}@keyframes notyf-fadeoutright{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(25%)}}@-webkit-keyframes notyf-fadeoutdown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(25%)}}@keyframes notyf-fadeoutdown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(25%)}}@-webkit-keyframes ripple{0%{transform:scale(0) translateY(-45%) translate(13%)}to{transform:scale(1) translateY(-45%) translate(13%)}}@keyframes ripple{0%{transform:scale(0) translateY(-45%) translate(13%)}to{transform:scale(1) translateY(-45%) translate(13%)}}.notyf{position:fixed;top:0;left:0;height:100%;width:100%;color:#fff;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;pointer-events:none;box-sizing:border-box;padding:20px}.notyf__icon--error,.notyf__icon--success{height:21px;width:21px;background:#fff;border-radius:50%;display:block;margin:0 auto;position:relative}.notyf__icon--error:after,.notyf__icon--error:before{content:"";background:currentColor;display:block;position:absolute;width:3px;border-radius:3px;left:9px;height:12px;top:5px}.notyf__icon--error:after{transform:rotate(-45deg)}.notyf__icon--error:before{transform:rotate(45deg)}.notyf__icon--success:after,.notyf__icon--success:before{content:"";background:currentColor;display:block;position:absolute;width:3px;border-radius:3px}.notyf__icon--success:after{height:6px;transform:rotate(-45deg);top:9px;left:6px}.notyf__icon--success:before{height:11px;transform:rotate(45deg);top:5px;left:10px}.notyf__toast{display:block;overflow:hidden;pointer-events:auto;-webkit-animation:notyf-fadeinup .3s ease-in forwards;animation:notyf-fadeinup .3s ease-in forwards;box-shadow:0 3px 7px #00000040;position:relative;padding:0 15px;border-radius:2px;max-width:300px;transform:translateY(25%);box-sizing:border-box;flex-shrink:0}.notyf__toast--disappear{transform:translateY(0);-webkit-animation:notyf-fadeoutdown .3s forwards;animation:notyf-fadeoutdown .3s forwards;-webkit-animation-delay:.25s;animation-delay:.25s}.notyf__toast--disappear .notyf__icon,.notyf__toast--disappear .notyf__message{-webkit-animation:notyf-fadeoutdown .3s forwards;animation:notyf-fadeoutdown .3s forwards;opacity:1;transform:translateY(0)}.notyf__toast--disappear .notyf__dismiss{-webkit-animation:notyf-fadeoutright .3s forwards;animation:notyf-fadeoutright .3s forwards;opacity:1;transform:translate(0)}.notyf__toast--disappear .notyf__message{-webkit-animation-delay:.05s;animation-delay:.05s}.notyf__toast--upper{margin-bottom:20px}.notyf__toast--lower{margin-top:20px}.notyf__toast--dismissible .notyf__wrapper{padding-right:30px}.notyf__ripple{height:400px;width:400px;position:absolute;transform-origin:bottom right;right:0;top:0;border-radius:50%;transform:scale(0) translateY(-51%) translate(13%);z-index:5;-webkit-animation:ripple .4s ease-out forwards;animation:ripple .4s ease-out forwards}.notyf__wrapper{display:flex;align-items:center;padding-top:17px;padding-bottom:17px;padding-right:15px;border-radius:3px;position:relative;z-index:10}.notyf__icon{width:22px;text-align:center;font-size:1.3em;opacity:0;-webkit-animation:notyf-fadeinup .3s forwards;animation:notyf-fadeinup .3s forwards;-webkit-animation-delay:.3s;animation-delay:.3s;margin-right:13px}.notyf__dismiss{position:absolute;top:0;right:0;height:100%;width:26px;margin-right:-15px;-webkit-animation:notyf-fadeinleft .3s forwards;animation:notyf-fadeinleft .3s forwards;-webkit-animation-delay:.35s;animation-delay:.35s;opacity:0}.notyf__dismiss-btn{background-color:#00000040;border:none;cursor:pointer;transition:opacity .2s ease,background-color .2s ease;outline:none;opacity:.35;height:100%;width:100%}.notyf__dismiss-btn:after,.notyf__dismiss-btn:before{content:"";background:#fff;height:12px;width:2px;border-radius:3px;position:absolute;left:calc(50% - 1px);top:calc(50% - 5px)}.notyf__dismiss-btn:after{transform:rotate(-45deg)}.notyf__dismiss-btn:before{transform:rotate(45deg)}.notyf__dismiss-btn:hover{opacity:.7;background-color:#00000026}.notyf__dismiss-btn:active{opacity:.8}.notyf__message{vertical-align:middle;position:relative;opacity:0;-webkit-animation:notyf-fadeinup .3s forwards;animation:notyf-fadeinup .3s forwards;-webkit-animation-delay:.25s;animation-delay:.25s;line-height:1.5em}@media only screen and (max-width:480px){.notyf{padding:0}.notyf__ripple{height:600px;width:600px;-webkit-animation-duration:.5s;animation-duration:.5s}.notyf__toast{max-width:none;border-radius:0;box-shadow:0 -2px 7px #00000021;width:100%}.notyf__dismiss{width:56px}}