*{margin:0;padding:0;box-sizing:border-box}html.app,body.app{height:100%;overflow:hidden}body.resizing{cursor:col-resize;user-select:none}body.welcome{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Inter","Helvetica Neue",Arial,sans-serif;line-height:1.6;color:#0f172a;background:#f1f5f9;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem 0}h1,h2,h3,h4,h5,h6{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Inter","Helvetica Neue",Arial,sans-serif;font-weight:600;line-height:1.2;margin:0}p{margin:0;line-height:1.6}a{color:#6366f1;text-decoration:underline;transition:all .25s cubic-bezier(0.4, 0, 0.2, 1)}a:hover{color:#4f46e5}a:focus{outline:2px solid #818cf8;outline-offset:2px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.hidden{display:none}@media(max-width: 768px){.md\:hidden{display:none}.md\:block{display:block}}@media(max-width: 576px){.sm\:hidden{display:none}.sm\:block{display:block}.sm\:text-center{text-align:center}}#container{display:flex;width:100vw;height:100vh;flex-direction:row}#leftPanel{display:flex;flex-direction:column;min-width:100px;width:20%;max-width:80%;background:#f8fafc;overflow:hidden;flex-shrink:0}#yamlInput{flex:1;overflow:auto}#resizer{width:4px;cursor:col-resize;background-color:#e2e8f0;transition:background-color .2s;position:relative;flex-shrink:0}#resizer::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:24px;height:30px;background-color:rgba(0,0,0,.1);border-radius:3px;z-index:2}#resizer:hover,#resizer.active{background-color:#cbd5e1}#canvasContainer{flex:1;position:relative;min-width:0;height:100%;border-left:1px solid #cbd5e1;display:flex;flex-direction:column;overflow:hidden}#desktopControlsContainer{flex-shrink:0;width:100%;position:relative}#canvas{display:block;width:100%;height:100%;flex:1;min-height:0}@media(max-width: 768px){#container{flex-direction:column;height:100vh;display:flex}#leftPanel{width:100%;min-height:100px;height:30%;max-height:80%;min-width:auto;max-width:none;flex-shrink:0}#resizer{width:100%;height:4px;cursor:row-resize;flex-shrink:0}#resizer::after{width:30px;height:24px}#canvasContainer{width:100%;min-height:100px;flex:1;border-left:none;border-top:1px solid #cbd5e1;overflow:hidden}#desktopControlsContainer{display:none}body.resizing{cursor:row-resize}}#welcome-container{max-width:1200px;width:90%;margin:0 auto;background:#f8fafc;border-radius:24px;box-shadow:12px 12px 24px rgba(163,177,198,.3),-12px -12px 24px hsla(0,0%,100%,.8);overflow:hidden;border:1px solid hsla(0,0%,100%,.8)}.main-header{background:#fff;padding:3rem 2.5rem;border-bottom:none;position:relative}.main-header::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg, transparent, #f1f5f9, transparent)}.main-header .header-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.main-header .header-text h1{font-size:2.25rem;font-weight:700;color:#0f172a;margin-bottom:.5rem;line-height:1.2;background:linear-gradient(135deg, #6366f1, #818cf8);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text}.main-header .header-text .subtitle{font-size:1.125rem;color:#64748b;margin:0;font-weight:400;line-height:1.6}.main-header .header-demo{max-width:400px;justify-self:center}.main-header .header-demo .video-container{border-radius:16px;overflow:hidden;box-shadow:8px 8px 16px rgba(163,177,198,.25),-8px -8px 16px hsla(0,0%,100%,.7);background:#fff;margin-bottom:1rem;border:1px solid hsla(0,0%,100%,.8);transition:all .25s cubic-bezier(0.4, 0, 0.2, 1)}.main-header .header-demo .video-container:hover{box-shadow:12px 12px 24px rgba(163,177,198,.3),-12px -12px 24px hsla(0,0%,100%,.8);transform:translateY(-2px)}.main-header .header-demo .video-container video{width:100%;height:auto;display:block}.main-header .header-demo .demo-actions{text-align:center}.main-content{padding:0}.intro-section{display:none}.demo-section{display:none}.features-section{padding:3rem 2.5rem;background:#f8fafc;position:relative}.features-section h3{font-size:1.5rem;font-weight:600;color:#0f172a;margin-bottom:2rem;text-align:center;position:relative}.features-section h3::after{content:"";position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%);width:60px;height:3px;background:linear-gradient(90deg, #6366f1, #818cf8);border-radius:2px}.features-section .features-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:1.5rem;margin-bottom:1.5rem}.features-section .features-grid .feature-item{padding:2rem;background:#fff;border-radius:16px;border:1px solid hsla(0,0%,100%,.8);box-shadow:4px 4px 8px rgba(163,177,198,.25),-4px -4px 8px hsla(0,0%,100%,.6);transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);position:relative;overflow:hidden}.features-section .features-grid .feature-item::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, #6366f1, #10b981);opacity:0;transition:all .25s cubic-bezier(0.4, 0, 0.2, 1)}.features-section .features-grid .feature-item:hover{box-shadow:8px 8px 16px rgba(163,177,198,.25),-8px -8px 16px hsla(0,0%,100%,.7);transform:translateY(-4px)}.features-section .features-grid .feature-item:hover::before{opacity:1}.features-section .features-grid .feature-item h4{font-size:1.125rem;font-weight:600;color:#0f172a;margin-bottom:1rem;position:relative}.features-section .features-grid .feature-item p{font-size:1rem;color:#64748b;margin:0;line-height:1.6}.about-section{padding:3rem 2.5rem;background:#fff;border-top:none;position:relative}.about-section::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg, transparent, #f1f5f9, transparent)}.about-section h3{font-size:1.5rem;font-weight:600;color:#0f172a;margin-bottom:2rem;text-align:center;position:relative}.about-section h3::after{content:"";position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%);width:60px;height:3px;background:linear-gradient(90deg, #10b981, #818cf8);border-radius:2px}.about-section p{font-size:1.125rem;color:#64748b;line-height:1.6;max-width:700px;margin:0 auto;text-align:center;padding:1.5rem;background:hsla(0,0%,100%,.6);border-radius:16px;box-shadow:inset 4px 4px 8px rgba(163,177,198,.2),inset -4px -4px 8px hsla(0,0%,100%,.7);border:1px solid hsla(0,0%,100%,.8)}.main-footer{background:linear-gradient(135deg, #4f46e5, #6366f1);color:#fff;padding:2rem 2.5rem;position:relative}.main-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent)}.main-footer .footer-content{text-align:center}.main-footer .footer-content p{margin:0;font-size:.875rem;opacity:.9}.main-footer .footer-content p:first-child{margin-bottom:.5rem;font-weight:500}.main-footer .footer-content .footer-links a{color:#fff;text-decoration:none;opacity:.8;transition:all .25s cubic-bezier(0.4, 0, 0.2, 1)}.main-footer .footer-content .footer-links a:hover{opacity:1;text-decoration:underline}@media(max-width: 992px){#welcome-container{margin:1rem;width:calc(100% - 2rem)}.main-header .header-content{grid-template-columns:1fr;gap:2rem;text-align:center}.main-header .header-content .header-demo{order:-1;max-width:100%;justify-self:center}.features-section .features-grid{grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:1rem}}@media(max-width: 768px){.main-header{padding:2rem 1.5rem}.main-header .header-content{gap:1.5rem}.main-header .header-text h1{font-size:1.875rem}.main-header .header-text .subtitle{font-size:1rem;margin-bottom:1.5rem}.features-section,.about-section{padding:2rem 1.5rem}.features-section .features-grid{grid-template-columns:1fr;gap:1rem}.main-footer{padding:1.5rem 1.5rem}}@media(max-width: 576px){#welcome-container{margin:.5rem;width:calc(100% - 1rem);border-radius:16px}.main-header{padding:1.5rem 1.5rem}.main-header .header-text h1{font-size:1.5rem}.main-header .header-text .subtitle{margin-bottom:1rem}.features-section,.about-section{padding:1.5rem 1.5rem}.features-section .features-grid .feature-item{padding:1rem}.launch-btn{padding:.625rem 1.25rem;font-size:.875rem}}.version-info{margin-bottom:2rem}.version-info h2{font-size:1.5rem;margin-bottom:.5rem;color:#64748b}.demo-section{margin-bottom:2rem}.demo-section h3{font-size:1.25rem;margin-bottom:1rem;color:#64748b}@media(max-width: 768px){.demo-section h3{font-size:1.125rem}}#controls{padding:8px;border-bottom:none;background:#f8fafc;position:relative}#controls::after{content:"";position:absolute;bottom:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg, transparent, #f1f5f9, transparent)}#desktopControlsContainer{flex-shrink:0}#buttonScroller{width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}#buttonScroller::-webkit-scrollbar{display:none}#buttonContainer{display:inline-flex;padding:0;gap:8px}.action-btn{padding:8px 16px;border:1px solid hsla(0,0%,100%,.8);border-radius:12px;background:#fff;cursor:pointer;white-space:nowrap;font-size:.875rem;box-shadow:4px 4px 8px rgba(163,177,198,.25),-4px -4px 8px hsla(0,0%,100%,.6);transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);color:#0f172a;backdrop-filter:blur(10px)}.action-btn:hover{background:#f8fafc;box-shadow:8px 8px 16px rgba(163,177,198,.25),-8px -8px 16px hsla(0,0%,100%,.7);transform:translateY(-1px)}.action-btn:active{transform:translateY(0);box-shadow:inset 4px 4px 8px rgba(163,177,198,.2),inset -4px -4px 8px hsla(0,0%,100%,.7)}#iconButtonScroller{width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;margin-bottom:8px}#iconButtonScroller::-webkit-scrollbar{display:none}#iconButtonContainer{display:inline-flex;padding:0;gap:8px}.icon-btn{padding:8px 16px;border:1px solid hsla(0,0%,100%,.8);border-radius:12px;background:#fff;cursor:pointer;white-space:nowrap;font-size:.875rem;display:flex;align-items:center;gap:6px;transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);min-height:40px;box-shadow:4px 4px 8px rgba(163,177,198,.25),-4px -4px 8px hsla(0,0%,100%,.6);color:#0f172a;backdrop-filter:blur(10px)}.icon-btn:hover{background:#f8fafc;box-shadow:8px 8px 16px rgba(163,177,198,.25),-8px -8px 16px hsla(0,0%,100%,.7);transform:translateY(-1px)}.icon-btn:active{transform:translateY(0);box-shadow:inset 4px 4px 8px rgba(163,177,198,.2),inset -4px -4px 8px hsla(0,0%,100%,.7)}.icon-btn::before{content:"";width:18px;height:18px;display:inline-block;background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0;filter:brightness(0) saturate(100%) invert(15%) sepia(20%) saturate(1500%) hue-rotate(210deg) brightness(95%) contrast(95%)}#shareBtn::before{background-image:url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236366f1%27 stroke-width=%272%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8%27/%3E%3Cpolyline points=%2716,6 12,2 8,6%27/%3E%3Cline x1=%2712%27 y1=%272%27 x2=%2712%27 y2=%2715%27/%3E%3C/svg%3E")}#saveImageBtn::before{background-image:url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236366f1%27 stroke-width=%272%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Crect x=%273%27 y=%273%27 width=%2718%27 height=%2718%27 rx=%272%27 ry=%272%27/%3E%3Cpolyline points=%278,12 12,16 16,12%27/%3E%3Cline x1=%2712%27 y1=%278%27 x2=%2712%27 y2=%2716%27/%3E%3C/svg%3E")}#copyYamlBtn::before{background-image:url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236366f1%27 stroke-width=%272%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Crect x=%279%27 y=%279%27 width=%2713%27 height=%2713%27 rx=%272%27 ry=%272%27/%3E%3Cpath d=%27M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1%27/%3E%3C/svg%3E")}#clearBtn::before{background-image:url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236366f1%27 stroke-width=%272%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpolyline points=%273,6 5,6 21,6%27/%3E%3Cpath d=%27M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2%27/%3E%3Cline x1=%2710%27 y1=%2711%27 x2=%2710%27 y2=%2717%27/%3E%3Cline x1=%2714%27 y1=%2711%27 x2=%2714%27 y2=%2717%27/%3E%3C/svg%3E")}.icon-btn:hover::before{filter:brightness(0) saturate(100%) invert(100%)}.action-btn.customizable-form-btn:hover::before{filter:brightness(0) invert(1) !important}.action-btn.link-screens-btn:hover::before{filter:brightness(0) invert(1) !important}.action-btn.entity-form-btn:hover::before{filter:brightness(0) invert(1) !important}.action-btn.custom-popup-btn:hover::before{filter:brightness(0) invert(1) !important}.launch-btn{display:inline-block;background:#fff;color:#6366f1;text-decoration:none;padding:.875rem 1.75rem;border-radius:12px;font-weight:500;font-size:1rem;transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:4px 4px 8px rgba(163,177,198,.25),-4px -4px 8px hsla(0,0%,100%,.6);border:1px solid hsla(0,0%,100%,.8);cursor:pointer;position:relative;overflow:hidden;backdrop-filter:blur(10px)}.launch-btn::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, #6366f1, #818cf8);opacity:0;transition:opacity .3s ease;z-index:-1}.launch-btn:hover{transform:translateY(-2px);box-shadow:8px 8px 16px rgba(163,177,198,.25),-8px -8px 16px hsla(0,0%,100%,.7);color:#fff;text-decoration:none}.launch-btn:hover::before{opacity:1}.launch-btn:active{transform:translateY(0);box-shadow:inset 4px 4px 8px rgba(163,177,198,.2),inset -4px -4px 8px hsla(0,0%,100%,.7)}.launch-btn:focus{outline:none;box-shadow:8px 8px 16px rgba(163,177,198,.25),-8px -8px 16px hsla(0,0%,100%,.7),0 0 0 3px rgba(99,102,241,.2)}.action-btn.customizable-form-btn{background:linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(129, 140, 248, 0.1));border-color:rgba(99,102,241,.3);color:#6366f1;position:relative;padding-left:40px}.action-btn.customizable-form-btn:hover{background:linear-gradient(135deg, #6366f1, #818cf8);border-color:#6366f1;color:#fff;box-shadow:8px 8px 16px rgba(163,177,198,.25),-8px -8px 16px hsla(0,0%,100%,.7)}.action-btn.customizable-form-btn::before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236366f1%27 stroke-width=%272%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Crect x=%273%27 y=%274%27 width=%2718%27 height=%2715%27 rx=%272%27 ry=%272%27/%3E%3Cline x1=%277%27 y1=%278%27 x2=%2717%27 y2=%278%27/%3E%3Cline x1=%277%27 y1=%2712%27 x2=%2717%27 y2=%2712%27/%3E%3Cline x1=%277%27 y1=%2716%27 x2=%2713%27 y2=%2716%27/%3E%3C/svg%3E")}.action-btn.custom-popup-btn{background:linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));border-color:rgba(16,185,129,.3);color:#10b981;position:relative;padding-left:40px;transition:all .25s cubic-bezier(0.4, 0, 0.2, 1)}.action-btn.custom-popup-btn:hover{background:linear-gradient(135deg, #10b981, #059669);border-color:#10b981;color:#fff;box-shadow:8px 8px 16px rgba(163,177,198,.25),-8px -8px 16px hsla(0,0%,100%,.7)}.action-btn.custom-popup-btn::before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2310b981%27 stroke-width=%272%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Crect x=%274%27 y=%276%27 width=%2716%27 height=%2712%27 rx=%272%27 ry=%272%27/%3E%3Cline x1=%274%27 y1=%279%27 x2=%2720%27 y2=%279%27/%3E%3Cline x1=%277%27 y1=%2712%27 x2=%2717%27 y2=%2712%27/%3E%3Cline x1=%277%27 y1=%2714%27 x2=%2714%27 y2=%2714%27/%3E%3C/svg%3E")}.action-btn.link-screens-btn{background:linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(129, 140, 248, 0.1));border-color:rgba(99,102,241,.3);color:#6366f1;position:relative;padding-left:40px}.action-btn.link-screens-btn:hover{background:linear-gradient(135deg, #6366f1, #818cf8);border-color:#6366f1;color:#fff;box-shadow:8px 8px 16px rgba(163,177,198,.25),-8px -8px 16px hsla(0,0%,100%,.7)}.action-btn.link-screens-btn::before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236366f1%27 stroke-width=%272.5%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cline x1=%276%27 y1=%274%27 x2=%276%27 y2=%2720%27/%3E%3Cline x1=%2718%27 y1=%274%27 x2=%2718%27 y2=%2720%27/%3E%3Cline x1=%278%27 y1=%2712%27 x2=%2716%27 y2=%2712%27/%3E%3Cpolyline points=%2712,8 16,12 12,16%27/%3E%3C/svg%3E")}.action-btn.entity-form-btn{background:linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(129, 140, 248, 0.1));border-color:rgba(99,102,241,.3);color:#6366f1;position:relative;padding-left:40px}.action-btn.entity-form-btn:hover{background:linear-gradient(135deg, #6366f1, #818cf8);border-color:#6366f1;color:#fff;box-shadow:8px 8px 16px rgba(163,177,198,.25),-8px -8px 16px hsla(0,0%,100%,.7)}.action-btn.entity-form-btn::before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236366f1%27 stroke-width=%272%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Crect x=%273%27 y=%273%27 width=%2718%27 height=%2718%27 rx=%272%27 ry=%272%27/%3E%3Cpath d=%27M9 9h6v6H9z%27/%3E%3Cpath d=%27M21 12h-3m-6 0H9m6 0V9m0 3v3%27/%3E%3C/svg%3E")}@media(max-width: 768px){.launch-btn{padding:.625rem 1.25rem;font-size:.875rem}.icon-btn{padding:6px 8px;font-size:.75rem;min-height:32px}.icon-btn::before{width:16px;height:16px}.action-btn.custom-popup-btn,.action-btn.customizable-form-btn,.action-btn.link-screens-btn,.action-btn.entity-form-btn{padding-left:28px}.action-btn.custom-popup-btn::before,.action-btn.customizable-form-btn::before,.action-btn.link-screens-btn::before,.action-btn.entity-form-btn::before{width:14px;height:14px;left:6px}}@media(max-width: 576px){.icon-btn{gap:4px}.icon-btn .btn-text{display:none}.action-btn.custom-popup-btn,.action-btn.customizable-form-btn,.action-btn.link-screens-btn,.action-btn.entity-form-btn{padding-left:24px;font-size:.75rem}.action-btn.custom-popup-btn::before,.action-btn.customizable-form-btn::before,.action-btn.link-screens-btn::before,.action-btn.entity-form-btn::before{width:12px;height:12px;left:6px}}.video-container{position:relative;background:#f8fafc;border-radius:16px;overflow:hidden;border:1px solid #f1f5f9}.video-container video{width:100%;height:auto;display:block;border-radius:0}.section-divider{height:1px;background:#f1f5f9;margin:2rem 0}.content-wrapper{max-width:1200px;margin:0 auto;padding:0 2.5rem}@media(max-width: 768px){.content-wrapper{padding:0 1.5rem}}