#app{--innerHeight:calc(100dvh - 5rem);height:100dvh;overflow:hidden;overflow-y:auto;width:100vw}#app .editor{background:linear-gradient(180deg,#99d1ff,#fff);height:var(--innerHeight);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}#app .editor #layer-2D-viewer{background:#fff;height:var(--innerHeight);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--innerHeight)}#app .editor #viewport{height:100%;width:100%}#app .editor .top-helpers{background:#fff;border-radius:.5rem;box-shadow:0 0 10px var(--border-color-darker);display:flex;font-weight:700;gap:2rem;left:50%;padding:.5rem 1rem;position:absolute;top:1rem;transform:translateX(-50%);z-index:1}#app .editor .top-helpers .top-helper{border:1px solid var(--border-color-darker);border-radius:.25rem;cursor:pointer;padding:.25rem 1rem;position:relative}#app .editor .top-helpers .top-helper[active=true]{background-color:var(--color-primary-light-9);color:var(--color-primary)}#app .editor .top-helpers .top-helper .exports-pop{color:var(--text-color-primary);display:grid;grid-template-rows:0fr;left:0;position:absolute;top:calc(100% + 1rem);transition:grid-template-rows .2s}#app .editor .top-helpers .top-helper .exports-pop .exports-pop-inner{background-color:#fff;border-radius:.25rem;box-shadow:0 0 10px var(--border-color-darker);box-sizing:border-box;display:flex;flex-direction:column;gap:1rem;grid-row:1/10;margin-top:.5rem;overflow:hidden;padding:0 1rem;transition:padding .2s;width:-moz-fit-content;width:fit-content}#app .editor .top-helpers .top-helper .exports-pop .exports-pop-inner .export{border:1px solid var(--border-color-darker);border-radius:.25rem;box-sizing:border-box;cursor:pointer;padding:.5rem 1rem;white-space:nowrap}#app .editor .top-helpers .top-helper .exports-pop .exports-pop-inner .export:hover{background-color:var(--color-primary-light-9);color:var(--color-primary)}#app .editor .top-helpers .top-helper[export][active=true] .exports-pop{grid-template-rows:1fr}#app .editor .top-helpers .top-helper[export][active=true] .exports-pop .exports-pop-inner{padding:1rem}#app .editor .blocks{left:1rem;position:absolute;top:1rem}#app .editor .zoom-pop{background:#fff;border-radius:.25rem;box-shadow:0 0 10px var(--border-color-darker);box-sizing:border-box;cursor:pointer;left:1rem;position:absolute;top:50%;transform:translateY(-50%)}#app .editor .zoom-pop .zoom-pop-title{align-items:center;display:flex;font-weight:700;justify-content:space-between;margin-bottom:0;padding:1rem}#app .editor .zoom-pop .zoom-pop-title svg{cursor:pointer;height:1.5rem;width:1.5rem}#app .editor .zoom-pop[active=true]{cursor:default}#app .editor .zoom-pop .zoom-item{align-items:center;display:grid;grid-template-columns:2rem 1fr;margin:.8rem 1rem;width:8rem}#app .editor .zoom-pop .zoom-item>input{border:1px solid var(--border-color-darker);border-radius:.25rem;box-sizing:border-box;margin:0;outline:none;padding:.5rem;width:100%}#app .editor .layer-slider-container{display:flex;flex-direction:column;height:90%;justify-content:space-between;position:absolute;right:1rem;top:50%;transform:translateY(-50%)}#app .editor .layer-slider-container>svg{background:rgba(0,0,0,.8);border-radius:.25rem;box-sizing:border-box;cursor:pointer;height:2rem;padding:.25rem;width:2rem}#app .editor .layer-slider-container>svg>path{fill:#fff}#app .editor .layer-slider-container .layer-slider{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(-90deg);width:calc((var(--innerHeight) - 2rem)*.9 - 5rem)}#app .editor .layer-slider-container .layer-slider>input{opacity:0;width:100%}#app .editor .layer-slider-container .layer-slider>input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1rem solid transparent;cursor:pointer}#app .editor .layer-slider-container .layer-slider .slider-btn{align-items:center;background:rgba(0,0,0,.8);border-radius:.25rem;color:#fff;content:attr(layer,"1");display:flex;height:2rem;justify-content:center;left:calc(100%*var(--value) - 2rem*var(--value));pointer-events:none;position:absolute;top:50%;transform:rotate(90deg) translateX(-50%);width:2rem;z-index:1}#app .editor .layer-slider-container .layer-slider:after{background:rgba(0,0,0,.5);border-radius:1rem;content:"";height:.5rem;left:1px;pointer-events:none;position:absolute;top:calc(50% - 1px);transform:translateY(-50%);width:100%}#app .editor .commands-pop{background:rgba(0,0,0,.3);height:100dvh;left:0;position:absolute;top:0;width:100vw;z-index:1}#app .editor .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 .commands-pop .commands-inner .commands-title{font-size:1.5rem;font-weight:700}#app .editor .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 .commands-pop .commands-inner .commands-body .command-item{border:1px solid var(--border-color-darker);box-sizing:border-box;padding:1rem}#app .editor .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 .commands-pop .commands-inner .commands-body .command-item .command-item-title>svg{cursor:pointer;height:1.5rem;width:1.5rem}#app .editor .commands-pop .commands-inner .commands-body .command-item .command-item-title>svg:hover path{fill:var(--color-primary)}#app .editor .commands-pop .commands-inner .commands-body .command-item .command-text{overflow:hidden;overflow-x:auto;white-space:nowrap;width:100%}#app .editor .commands-pop .commands-inner .download-command{background:var(--color-primary);margin-left:auto}#app .editor .commands-pop .commands-inner .download-command,#app .try-editor{border-radius:.25rem;color:#fff;cursor:pointer;padding:.5rem 1rem;width:-moz-fit-content;width:fit-content}#app .try-editor{background-color:var(--color-primary);display:block;margin-top:1rem}#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 .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,#app .page .faqs .faq>div ul{grid-row:1/10;margin:0;overflow:hidden;padding:0 1.5rem;transition:padding .2s}#app .page .faqs .faq>div ul{margin:0 1.5rem}#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 .page .faqs .faq:has(input:checked)>div ul{margin:0 1.5rem 2rem}#app .generator-options{margin:7rem auto;width:calc(100vw - 20rem)}#app .generator-options .generator-options-title{background:var(--color-primary);color:#fff;font-size:2.5rem;margin:0;padding:1.5rem 0;text-align:center}#app .generator-options .generator-option{align-items:center;display:grid;grid-template-columns:13rem 1fr;line-height:1.8;min-height:10rem}#app .generator-options .generator-option:nth-child(odd){background-color:var(--color-info-light-9)}#app .generator-options .generator-option .generator-option-title{text-align:center}#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;color:#fff;cursor:pointer;margin:3rem auto 0;padding:1rem 2rem;width:-moz-fit-content;width:fit-content}@media screen and (max-width:1300px){#app .page .what{width:100%}}@media screen and (max-width:900px){.head{font-size:1.25rem}#app .editor .blocks{bottom:1rem;top:unset}#app .editor #layer-2D-viewer{height:100vw;width:100vw}#app .editor .layer-slider-container{height:70%}#app .editor .layer-slider-container .layer-slider{width:calc((var(--innerHeight) - 2rem)*.7 - 5rem)}#app .editor .layer-slider-container .layer-slider .slider-btn{pointer-events:unset}#app .editor .top-helpers .top-helper .exports-pop{position:fixed}#app .editor .top-helpers .top-helper .exports-pop .exports-pop-inner .export:hover{background-color:unset;color:unset}#app .page{padding:1rem 2.5vw}#app .page h2{font-size:2rem}#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 .generator-options{width:95vw}#app .generator-options .generator-options-title{background:unset;color:inherit}#app .generator-options .generator-options-body{display:flex;flex-direction:column;gap:2rem;margin-top:2rem}#app .generator-options .generator-options-body .generator-option{background:unset;border:1px solid var(--border-color-darker);border-radius:.5rem;box-sizing:border-box;display:flex;flex-direction:column;padding:1rem}#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}}