body,html{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}.app-wrapper{width:100%;overflow-x:hidden}.app-header{background:-webkit-linear-gradient(315deg,#667eea,#764ba2);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:60px 20px;text-align:center;box-shadow:0 4px 6px rgba(0,0,0,.1)}.app-header h1{margin:0;font-size:2.5rem;font-weight:700;line-height:1.2}.app-header .subtitle{margin:15px 0 0;font-size:1.2rem;opacity:.95;font-weight:400}.container{max-width:1200px;margin:0 auto;padding:0 20px}.content-section{padding:60px 20px;background:#fff}.content-section:nth-child(2n){background:#f8f9fa}.content-section h2{font-size:2rem;margin-bottom:30px;color:#333;text-align:center;font-weight:600}.content-section h3{font-size:1.3rem;margin:25px 0 15px;color:#444;font-weight:600}.content-section p{font-size:1.1rem;line-height:1.8;color:#555;margin:10px 0}.steps-list{max-width:800px;margin:0 auto;padding-left:20px}.steps-list li{font-size:1.1rem;line-height:1.8;margin-bottom:20px;color:#444;padding-left:10px}.steps-list strong{color:#667eea}.benefits-list{list-style:none;padding:0;max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:25px;gap:25px}.benefits-list li{background:#fff;padding:25px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.08);font-size:1.05rem;line-height:1.7;color:#444;-webkit-transition:box-shadow .3s ease,-webkit-transform .3s ease;transition:box-shadow .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,box-shadow .3s ease;transition:transform .3s ease,box-shadow .3s ease,-webkit-transform .3s ease}.benefits-list li:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px);box-shadow:0 4px 20px rgba(0,0,0,.12)}.benefits-list strong{color:#667eea;display:block;margin-bottom:5px}.faq-section{background:#fff}.faq-item{max-width:900px;margin:0 auto 30px;padding:25px;background:#f8f9fa;border-radius:8px;border-left:4px solid #667eea}.ad-container{width:100%;max-width:1200px;min-width:300px;margin:20px auto;padding:10px;text-align:center;overflow:visible;-webkit-transition:all .3s ease;transition:all .3s ease;box-sizing:border-box}.ad-container:empty{margin:0;padding:0;height:0;min-width:0}.display-ad{background:-webkit-linear-gradient(315deg,#f8f9fa,#fff);background:linear-gradient(135deg,#f8f9fa,#fff)}.display-ad,.in-feed-ad{border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.05);border:1px solid #e5e7eb}.in-feed-ad{background:#fff}.native-ad{background:-webkit-linear-gradient(315deg,#faf8ff,#fff);background:linear-gradient(135deg,#faf8ff,#fff);border-radius:12px;border:1px solid #ede9fe}.ad-container ins.adsbygoogle{display:block!important;width:100%!important;min-width:300px!important;min-height:100px;overflow:visible!important}.ad-container ins.adsbygoogle:empty{display:none!important;min-width:0!important}@media (max-width:768px){.ad-container{margin:15px auto;padding:8px;min-width:300px}.ad-container ins.adsbygoogle{min-width:300px!important}}@media (max-width:480px){.ad-container{margin:10px auto;padding:5px;min-width:280px;width:95%}.ad-container ins.adsbygoogle{min-width:280px!important}}.main{display:flex;min-height:70vh;background:#fff;box-shadow:0 0 30px rgba(0,0,0,.1)}.sidebarWrapper{display:flex;flex-direction:column;flex:1 1;box-shadow:0 4px 12px rgba(102,126,234,.1);position:relative;min-width:280px;background:-webkit-gradient(linear,left top,left bottom,from(#fafbff),to(#fff));background:-webkit-linear-gradient(top,#fafbff,#fff);background:linear-gradient(180deg,#fafbff,#fff);border-right:1px solid #e5e7eb}.previewWrapper{display:flex;flex-direction:column;flex:5 1}.previewContainer{display:flex;flex:content;flex-grow:1;height:100%;justify-content:center;align-items:center}.previewControls{flex:content;border-top:1px solid #ddd;position:relative}.app-footer{background:#2d3748;color:#fff;padding:30px 20px;text-align:center}.app-footer p{margin:0;font-size:.95rem}.controls{background:#fff;border-radius:12px 12px 0 0}.controls,.new-file-btn{display:flex;align-items:center}.new-file-btn{background:-webkit-linear-gradient(315deg,#667eea,#764ba2);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff!important;padding:8px 16px;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;grid-gap:6px;gap:6px;-webkit-transition:all .3s ease;transition:all .3s ease;box-shadow:0 2px 8px rgba(102,126,234,.3);margin-right:20px}.new-file-btn:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.4)}.new-file-btn span{font-size:1.1rem}.controls>div:not(:nth-child(6)):not(.new-file-btn):hover{cursor:pointer;color:#764ba2;-webkit-transform:translateY(-2px);transform:translateY(-2px);-webkit-transition:all .2s ease;transition:all .2s ease}.controls>div:not(.new-file-btn){flex:content;margin-right:20px;-webkit-transition:all .2s ease;transition:all .2s ease}.controls>div:nth-child(6)>div:first-child{padding-top:3px}.controls>div:nth-child(6)>div{flex:content}.controls>div:nth-child(6){display:flex;flex-grow:1;width:100%}.controls>div:last-child{width:40px;height:30px;box-shadow:0 1px 6px rgba(0,0,0,.17),0 1px 4px rgba(0,0,0,.17);line-height:30px;text-align:center;font-size:12px}.controls-slider{flex-grow:1;padding-top:2px;margin-left:20px;width:100%}#preview{width:500px;height:500px}.parsedColorsWrapper ul{margin:0;padding:0}.parsedColorsWrapper{width:100%;flex:content;background:#fafafa;overflow-y:auto;max-height:calc(100vh - 400px)}.colorPicker{flex:content;padding:10px;background:#fff;border-bottom:1px solid #e5e7eb}.parsedColorItem li{list-style-type:none;cursor:pointer}.layerRoot{display:flex;flex-direction:row;padding:15px;border-top:.04em solid rgba(102,126,234,.1);color:#667eea;text-transform:capitalize;-webkit-transition:all .2s ease;transition:all .2s ease}.layerRoot:hover{background:rgba(102,126,234,.05);padding-left:18px}.layerRoot>div{flex:1 1;cursor:pointer}.playArrowDown{-webkit-transform:rotate(90deg);transform:rotate(90deg);display:inline-block}.background-color-picker{position:absolute;right:70px;bottom:70px}#github-link{position:absolute;right:10px;top:10px;text-decoration:none}#github-link p{display:inline}.drop-files-wrapper{border-radius:16px;border:2px dashed #667eea;background:-webkit-linear-gradient(315deg,#f5f7ff,#fff);background:linear-gradient(135deg,#f5f7ff,#fff);width:600px;max-width:90%;min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;-webkit-transition:all .3s ease;transition:all .3s ease;position:relative}.drop-files-wrapper:hover{border-color:#764ba2;background:-webkit-linear-gradient(315deg,#f0f3ff,#faf8ff);background:linear-gradient(135deg,#f0f3ff,#faf8ff);-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 10px 30px rgba(102,126,234,.15)}.upload-icon{font-size:64px;margin-bottom:20px;-webkit-animation:float 3s ease-in-out infinite;animation:float 3s ease-in-out infinite}@-webkit-keyframes float{0%,to{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}@keyframes float{0%,to{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}.drop-files-wrapper h3{font-size:1.8rem;color:#667eea;margin:10px 0;font-weight:600}.drop-files-wrapper p{color:#6b7280;font-size:1.1rem;margin:8px 0}.or-text{color:#9ca3af;font-weight:600;margin:20px 0 15px;position:relative;padding:0 20px}.or-text:after,.or-text:before{content:"";position:absolute;top:50%;width:60px;height:1px;background:#e5e7eb}.or-text:before{left:-65px}.or-text:after{right:-65px}.upload-button{background:-webkit-linear-gradient(315deg,#667eea,#764ba2);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:16px 40px;font-size:1.1rem;font-weight:600;border-radius:12px;cursor:pointer;display:flex;align-items:center;grid-gap:10px;gap:10px;-webkit-transition:all .3s ease;transition:all .3s ease;box-shadow:0 4px 15px rgba(102,126,234,.4);margin:10px 0}.upload-button:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 6px 25px rgba(102,126,234,.5)}.upload-button:active{-webkit-transform:translateY(0);transform:translateY(0)}.button-icon{font-size:1.3rem}.demo-option{margin-top:20px}.demo-button{background:transparent;color:#667eea;border:2px solid #667eea;padding:12px 30px;font-size:1rem;font-weight:600;border-radius:10px;cursor:pointer;display:flex;align-items:center;grid-gap:8px;gap:8px;-webkit-transition:all .3s ease;transition:all .3s ease}.demo-button:hover{background:#667eea;color:#fff;-webkit-transform:translateY(-2px);transform:translateY(-2px)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px}.loading-spinner{width:60px;height:60px;border:4px solid #f3f4f6;border-top-color:#667eea;border-radius:50%;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;margin-bottom:20px}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.loading-state p{color:#667eea;font-size:1.2rem;font-weight:500}.fetch-error{display:flex;align-items:center;justify-content:center;position:absolute;top:-50px;left:0;width:100%}.fetch-error>span{background:rgba(0,0,0,.35);padding:10px 20px;border-radius:5px;color:#f3f3f3}@media (max-width:1024px){.main{flex-direction:column}.sidebarWrapper{min-width:100%;width:100%;min-height:400px;max-height:500px;border-right:none;border-bottom:2px solid #e5e7eb}.previewWrapper{width:100%}.parsedColorsWrapper{max-height:250px;overflow-y:auto;-webkit-overflow-scrolling:touch}.colorPicker{padding:15px}#preview{width:400px;height:400px}.benefits-list{grid-template-columns:1fr}}@media (max-width:768px){.app-header h1{font-size:2rem}.app-header .subtitle{font-size:1rem}.app-header{padding:40px 20px}.content-section{padding:40px 15px}.content-section h2{font-size:1.6rem}.content-section h3{font-size:1.1rem}.benefits-list li,.content-section p,.steps-list li{font-size:1rem}#preview{width:300px;height:300px}.drop-files-wrapper{width:95%;min-height:350px;padding:30px 20px}.drop-files-wrapper h3{font-size:1.4rem}.upload-icon{font-size:48px}.upload-button{padding:14px 32px;font-size:1rem}.or-text:after,.or-text:before{width:40px}.or-text:before{left:-45px}.or-text:after{right:-45px}.controls{flex-wrap:wrap;justify-content:center;padding:15px!important}.controls>div{margin:8px}.new-file-btn{padding:6px 12px;font-size:.85rem}.parsedColorsWrapper{max-height:350px;overflow-y:auto;-webkit-overflow-scrolling:touch}.colorPicker{padding:10px}.sidebarWrapper{min-height:350px;max-height:450px;display:flex!important;flex-direction:column!important}.layerRoot{padding:18px 15px;font-size:.95rem}.parsedColorItem li{padding:10px 12px;font-size:.9rem}}@media (max-width:480px){.app-header h1{font-size:1.5rem}.app-header .subtitle{font-size:.9rem}.content-section h2{font-size:1.4rem}#preview{width:250px;height:250px}.drop-files-wrapper{width:95%;min-height:320px;padding:25px 15px}.drop-files-wrapper h3{font-size:1.2rem}.drop-files-wrapper p{font-size:.95rem}.upload-icon{font-size:40px}.upload-button{padding:12px 28px;font-size:.95rem}.demo-button{padding:10px 24px;font-size:.9rem}.or-text:after,.or-text:before{width:30px}.or-text:before{left:-35px}.or-text:after{right:-35px}.sidebarWrapper{min-width:100%;min-height:320px;max-height:400px;display:flex!important;flex-direction:column!important}.parsedColorsWrapper{max-height:250px!important;overflow-y:auto!important;flex:1 1 auto}.colorPicker{padding:8px;flex:0 0 auto}.colorPicker>div{-webkit-transform:scale(.9);transform:scale(.9);-webkit-transform-origin:top center;transform-origin:top center}.layerRoot{padding:20px 15px;font-size:.9rem}.parsedColorItem li{padding:12px 10px;font-size:.85rem;min-height:44px}.benefits-list li,.faq-item{padding:20px}.controls{padding:12px!important}.controls>div{margin:6px}.new-file-btn{padding:5px 10px;font-size:.8rem}}
/*# sourceMappingURL=main.7c5dd0a9.chunk.css.map */