#app{--innerHeight:calc(100dvh - 5rem);height:100dvh;overflow:hidden;overflow-y:auto;width:100vw}#app .editor-container{display:grid;grid-template-columns:auto 1fr;height:var(--innerHeight);position:relative;width:100%}#app .editor-container .editor-params{border-right:1px solid var(--border-color-darker);box-sizing:border-box;display:flex;flex-direction:column;gap:3rem;padding:.5rem;width:20rem}#app .editor-container .editor-params .editor-param .editor-param-title{align-items:center;display:flex;font-weight:700;gap:.5rem}#app .editor-container .editor-params .editor-param .editor-param-title>img{height:1.5rem;width:1.5rem}#app .editor-container .editor-params .editor-param .editor-param-body{box-sizing:border-box;display:flex;flex-direction:column;gap:1rem;margin-top:1rem;padding:0 1rem}#app .editor-container .editor-params .editor-param .editor-param-body .editor-param-item{align-items:center;display:grid;grid-template-columns:minmax(5rem,auto) 1fr;justify-items:start}#app .editor-container .editor-params .editor-param .editor-param-body .editor-param-item>span{margin-right:1rem}#app .editor-container .editor-params .editor-param .editor-param-body .editor-param-item pea-input-number{border-radius:.25rem;height:2.35rem;width:100%}#app .editor-container .editor-params .editor-param .editor-param-body .export-btn{background:var(--color-primary);border-radius:.25rem;color:#fff;cursor:pointer;padding:.5rem;text-align:center}#app .editor-container .editor-params .editor-param[details]{position:absolute;right:1rem;top:1rem;z-index:1}#app .editor-container .editor-params .editor-param[details] .editor-param-title{display:none}#app .editor-container .editor-params .editor-param[details] .editor-param-body{margin:0;padding:0}#app .editor-container .editor-params pea-select{border-radius:.25rem}#app .editor-container[data-mode="1"] .editor-params .editor-param[details]{color:#fff}#app .editor-container .editor{height:var(--innerHeight);position:relative;width:calc(100vw - 20rem - 6px)}#app .editor-container .editor .editor-modes{align-items:center;display:flex;gap:1rem;left:1rem;position:absolute;top:1rem;z-index:1}#app .editor-container .editor .editor-modes .editor-mode{background:var(--border-color-darker);border-radius:.25rem;cursor:pointer;padding:.25rem;text-align:center;width:3rem}#app .editor-container .editor .editor-modes .editor-mode[active=true]{background-color:var(--color-primary);color:#fff}#app .editor-container .editor .svg-editor{box-sizing:border-box;display:flex;height:100%;overflow:auto;padding:1px;position:relative;width:100%}#app .editor-container .editor .svg-editor #svg_circle{flex-shrink:0;margin:auto}#app .editor-container .editor #viewport{height:100%;left:0;position:absolute;top:0;width:100%}#app .editor-container .commands-pop{background:rgba(0,0,0,.3);height:100dvh;left:0;position:absolute;top:0;width:100vw;z-index:1}#app .editor-container .commands-pop .commands-inner{background:#fff;border-radius:.5rem;box-sizing:border-box;left:50%;max-width:95vw;padding:1rem;position:absolute;top:50%;transform:translate(-50%,-50%);width:40rem}#app .editor-container .commands-pop .commands-inner .commands-title{align-items:center;display:flex;font-size:1.5rem;font-weight:700;justify-content:space-between}#app .editor-container .commands-pop .commands-inner .commands-title svg{cursor:pointer;height:2rem;width:2rem}#app .editor-container .commands-pop .commands-inner .commands-title svg:hover path{fill:var(--color-primary)}#app .editor-container .commands-pop .commands-inner .commands-body{display:flex;flex-direction:column;gap:1rem;margin:1rem 0;max-height:15rem;overflow:hidden;overflow-y:auto}#app .editor-container .commands-pop .commands-inner .commands-body .command-item{border:1px solid var(--border-color-darker);box-sizing:border-box;padding:1rem}#app .editor-container .commands-pop .commands-inner .commands-body .command-item .command-item-title{align-items:center;border-bottom:1px solid var(--border-color-darker);display:flex;font-weight:700;justify-content:space-between;padding-bottom:1rem}#app .editor-container .commands-pop .commands-inner .commands-body .command-item .command-item-title>svg{cursor:pointer;height:1.5rem;width:1.5rem}#app .editor-container .commands-pop .commands-inner .commands-body .command-item .command-item-title>svg:hover path{fill:var(--color-primary)}#app .editor-container .commands-pop .commands-inner .commands-body .command-item .command-text{overflow:hidden;overflow-x:auto;white-space:nowrap;width:100%}#app .editor-container .commands-pop .commands-inner .download-command{background:var(--color-primary);border-radius:.25rem;color:#fff;cursor:pointer;margin-left:auto;padding:.5rem 1rem;width:-moz-fit-content;width:fit-content}#app .page{box-sizing:border-box;padding:7rem 10rem;text-align:center}#app .page h2{font-size:2.5rem;margin-bottom:4rem}#app .page h2:has(+a),#app .page h2:has(+p){margin-bottom:0!important}#app .page .what{background:#fff;border-radius:.5rem;box-shadow:1rem 1rem var(--color-primary-light-3);box-sizing:border-box;line-height:1.8;margin:6rem auto 4rem;padding:2rem;position:relative;text-align:start;width:75%}#app .page .what h1{background:var(--link-color);border-radius:.5rem;box-shadow:.8rem 1rem 0 #fff;color:#fff;font-size:2rem!important;left:0;padding:.5rem 1rem;position:absolute;top:-1rem;transform:translateY(-100%)}#app .page .how-use-items{display:flex;gap:3rem;justify-content:space-between}#app .page .how-use-items .how-use-item{border-radius:.5rem;box-shadow:0 0 10px var(--border-color-darker);box-sizing:border-box;padding:1rem;text-align:start;width:33.33%}#app .page .how-use-items .how-use-item>b{align-items:center;background:var(--color-primary-light-8);border-radius:10rem;color:var(--color-primary);display:flex;font-size:2rem;height:4rem;justify-content:center;width:4rem}#app .page .key-features-items{display:grid;gap:2rem;grid-template-columns:repeat(3,calc(33.33% - 1.35rem))}#app .page .key-features-items .key-features-item{border:1px dashed var(--color-primary);border-radius:1rem;box-sizing:border-box;padding:2rem;text-align:start}#app .page .key-features-items .key-features-item>img{background:var(--color-primary-light-8);box-shadow:0 0 0 .7rem var(--color-primary-light-8);clip-path:circle(80%);height:2rem;width:2rem}#app .page .faqs{margin:0 auto;text-align:center;width:80%}#app .page .faqs .faq{background:var(--bg-color-page);border-radius:1rem;box-sizing:border-box;margin-bottom:2rem;text-align:start}#app .page .faqs .faq>h3{align-items:center;display:flex;justify-content:space-between;margin:0;padding:1.5rem;position:relative}#app .page .faqs .faq>h3>input{cursor:pointer;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}#app .page .faqs .faq>h3>svg{flex-shrink:0;pointer-events:none;transform:rotate(0deg);transition:transform .2s}#app .page .faqs .faq>div{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s}#app .page .faqs .faq>div p{grid-row:1/10;margin:0;overflow:hidden;padding:0 1.5rem;transition:padding .2s}#app .page .faqs .faq:has(input:checked) svg{transform:rotate(95deg)}#app .page .faqs .faq:has(input:checked)>div{grid-template-rows:1fr}#app .page .faqs .faq:has(input:checked)>div p{padding:0 1.5rem 2rem}#app .start-creating{box-sizing:border-box;font-size:1.5rem;padding:7rem 10rem;position:relative;text-align:center}#app .start-creating>img{height:100%;left:0;-o-object-fit:cover;object-fit:cover;opacity:.5;position:absolute;top:0;width:100%;z-index:-1}#app .start-creating>h2{font-size:3rem}#app .start-creating>p{margin:2rem 0 5rem}#app .start-creating .start-creating-btn{background:var(--color-primary);border-radius:.5rem;margin:3rem auto 0;padding:1rem 2rem}#app .start-creating .start-creating-btn,#app .try-editor{color:#fff;cursor:pointer;width:-moz-fit-content;width:fit-content}#app .try-editor{background-color:var(--color-primary);border-radius:.25rem;display:block;margin-top:1rem;padding:.5rem 1rem}@media screen and (max-width:1300px){#app .page .what{width:100%}}@media screen and (max-width:900px){.head{font-size:1.25rem}#app .editor-container{align-items:center;display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;margin-bottom:4rem}#app .editor-container .editor-params{height:var(--innerHeight);overflow:unset;width:100%}#app .editor-container .editor-params .editor-param[details]{position:unset}#app .editor-container .editor-params .editor-param[details] .editor-param-title{display:unset}#app .editor-container .editor-params .editor-param[details] .editor-param-body{margin-top:1rem;padding:0 1rem}#app .editor-container[data-mode="1"] .editor-params .editor-param[details]{color:unset}#app .editor-container .editor{height:95vw;width:95vw}#app .editor-container .editor .editor-modes{display:none}#app .editor-container .commands-pop .commands-inner .commands-title svg:hover path{fill:unset}#app .page{padding:1rem 2.5vw}#app .page h2{font-size:2rem}#app .page .what{background:unset;box-shadow:unset;margin:3rem auto;padding:0;width:calc(100% - 1rem)}#app .page .what h2{background:unset;box-shadow:unset!important;color:inherit;margin:0;padding:0;position:unset!important;text-align:center;transform:unset!important}#app .page .what>p{background:#fff;border-radius:.5rem;box-shadow:.5rem .5rem var(--color-primary);box-sizing:border-box;margin-right:.5rem;padding:1rem}#app .page .how-use-items{align-items:center;display:flex;flex-direction:column;gap:3rem;margin-top:5rem}#app .page .how-use-items .how-use-item{margin:0!important;width:100%}#app .page .key-features-items{align-items:center;display:flex;flex-direction:column}#app .page .faqs{width:100%}#app .page .faqs h3{font-size:1.2rem}#app .start-creating{padding:1rem 2.5vw}#app .start-creating h2{font-size:2rem}#app .start-creating p{margin:2rem 0}#app .start-creating .start-creating-btn{font-size:1rem;margin:0 auto}}