PagesStructures['id1785913149835'] = {"structures":[{"type":"page","id":"id1785913149835","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":true,"name":"1. 2. 3. Easy PERSPECTIVE Tool","baseName":"HOME","templateID":null,"templateName":null,"order":0,"customStates":null,"isElementWasEditedInMode":true,"showHoverEffects":true,"skinInformation":{"categoryId":245},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":0,"height":1068,"top":0,"left":0},"lastResizingSize":{"width":0,"height":1068,"top":0,"left":0},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","basicUserCanEdit":true,"overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"childrenAnchor":"center","backgroundColor":{"mainColor":0,"variation":0,"opacity":1,"brightness":0},"imageUrl":"","imageLayout":"fitWhenBigger","imagePosition":{"horizontal":"center","vertical":"center"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","gridLines":[],"fixedBackground":false,"statesGroups":null},"metaData":{"position":{"left":-791.1666870117188,"top":0},"size":{"width":1582,"height":2712}},"childElements":[{"type":"SectionElement","id":"id1785913149837","elementProperties":{"tagName":"SECTION","behaviours":null,"isLocked":false,"name":"Section 2","baseName":null,"templateID":null,"templateName":null,"order":3,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"height":684,"left":0,"width":1301,"top":0},"lastResizingSize":{"height":684,"left":0,"width":1301,"top":0},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"padding":{"top":0,"left":0,"bottom":0,"right":0},"basicUserCanEdit":true,"backgroundColor":"transparent","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillVertical":false,"fillHorizontal":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"childrenAnchor":"center","resizingGripPosiotion":"s","sectionName":"Section A","pageContentType":1,"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"borderColor":{"top":{"mainColor":1,"variation":4,"opacity":1,"brightness":0.16},"left":{"mainColor":1,"variation":4,"opacity":1,"brightness":0.16},"right":{"mainColor":1,"variation":4,"opacity":1,"brightness":0.16},"bottom":{"mainColor":1,"variation":4,"opacity":1,"brightness":0.16}},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"}},"metaData":{"position":{"left":-791.1666870117188,"top":184.0000057220459},"size":{"width":1582,"height":684}},"childElements":[{"type":"userBox","id":"id1785998784066","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Box 3","baseName":null,"templateID":"templateid1785998784067","templateName":null,"order":7,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":1413,"height":191,"left":-688,"top":531},"lastResizingSize":{"width":1413,"height":191,"left":-688,"top":531},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","padding":{"top":0,"left":0,"bottom":0,"right":0},"basicUserCanEdit":true,"backgroundColor":"rgb(33,151,175)","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillHorizontal":false,"fillVertical":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"childrenAnchor":"left","startSelected":false,"urlAddress":null,"openInNewTab":false,"openInTopWindow":false,"shouldUnderlineChildren":false,"isVisible":true,"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"borderColor":{"top":"Black","left":"Black","bottom":"Black","right":"Black"},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"},"rotationAngle":0},"metaData":{"position":{"left":-688,"top":715.0000457763672},"size":{"width":1413,"height":191}},"childElements":[{"type":"ExternalAppembed_html_app1","id":"id1785996038532","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Embed Html 11","baseName":null,"templateID":"templateid1785996038533","templateName":null,"order":8,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":413,"height":120,"left":41,"top":40},"lastResizingSize":{"width":413,"height":120,"left":41,"top":40},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"basicUserCanEdit":true,"backgroundColor":"transparent","padding":{"top":0,"left":0,"bottom":0,"right":0},"imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillHorizontal":false,"fillVertical":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"isVisible":true,"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"borderColor":{"top":"Black","left":"Black","bottom":"Black","right":"Black"},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"},"rotationAngle":0,"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","embed_html_app1html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>3D Perspective Banner Link</title>\n    <style>\n        html, body {\n            margin: 0;\n            padding: 0;\n            background: transparent;\n            overflow: hidden;\n        }\n\n        .banner-card {\n            display: inline-flex;\n            align-items: center;\n            gap: 18px;\n            background-color: #ffffff;\n            border: 2px solid #000000;\n            padding: 12px 18px 12px 10px;\n            text-decoration: none;\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n            transition: transform 0.2s, box-shadow 0.2s;\n            box-sizing: border-box;\n            max-width: 100%;\n        }\n\n        .banner-card:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.15);\n        }\n\n        .graphic-container {\n            width: 88px;\n            height: 88px;\n            flex-shrink: 0;\n            background-color: #0d131f;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        /* Continuous rotation animation for the cube inside the SVG */\n        .rotating-cube {\n            transform-origin: 50px 50px;\n            animation: spin 8s linear infinite;\n        }\n\n        @keyframes spin {\n            from {\n                transform: rotate(0deg);\n            }\n            to {\n                transform: rotate(360deg);\n            }\n        }\n\n        .text-container {\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            white-space: nowrap;\n        }\n\n        .brand-name {\n            font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;\n            font-size: 1.45rem;\n            font-weight: 900;\n            color: #0b1329;\n            letter-spacing: 1px;\n            line-height: 1;\n            margin-bottom: 4px;\n        }\n\n        .tool-title {\n            font-family: 'Helvetica Neue', Arial, sans-serif;\n            font-size: 1.05rem;\n            font-weight: 800;\n            color: #1e293b;\n            letter-spacing: 0.8px;\n            line-height: 1.1;\n            margin-bottom: 5px;\n        }\n\n        .tagline {\n            font-family: 'Helvetica Neue', Arial, sans-serif;\n            font-size: 0.68rem;\n            font-weight: 700;\n            color: #0284c7;\n            letter-spacing: 0.8px;\n            text-transform: uppercase;\n        }\n    </style>\n</head>\n<body>\n\n    <!-- Clickable Banner Card Link -->\n    <a href=\"https://raynaso.com/1-2-3-easy-perspective-tool\" target=\"_top\" class=\"banner-card\">\n        \n        <!-- Perspective Cube SVG Graphic -->\n        <div class=\"graphic-container\">\n            <svg width=\"82\" height=\"82\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <!-- Static Horizon Line -->\n                <line x1=\"5\" y1=\"50\" x2=\"95\" y2=\"50\" stroke=\"#94a3b8\" stroke-width=\"1.5\" stroke-dasharray=\"3 3\"/>\n                \n                <!-- Static Vanishing Points -->\n                <circle cx=\"8\" cy=\"50\" r=\"3.5\" fill=\"#ef4444\"/>\n                <circle cx=\"92\" cy=\"50\" r=\"3.5\" fill=\"#ef4444\"/>\n\n                <!-- Static Perspective Grid Lines -->\n                <line x1=\"8\" y1=\"50\" x2=\"50\" y2=\"28\" stroke=\"rgba(239, 68, 68, 0.45)\" stroke-width=\"1\"/>\n                <line x1=\"8\" y1=\"50\" x2=\"50\" y2=\"72\" stroke=\"rgba(239, 68, 68, 0.45)\" stroke-width=\"1\"/>\n                <line x1=\"92\" y1=\"50\" x2=\"50\" y2=\"28\" stroke=\"rgba(239, 68, 68, 0.45)\" stroke-width=\"1\"/>\n                <line x1=\"92\" y1=\"50\" x2=\"50\" y2=\"72\" stroke=\"rgba(239, 68, 68, 0.45)\" stroke-width=\"1\"/>\n\n                <!-- Continuously Rotating 3D Cube -->\n                <g class=\"rotating-cube\">\n                    <!-- Left Face -->\n                    <polygon points=\"50,33 33,41 33,59 50,67\" fill=\"rgba(14, 165, 233, 0.4)\" stroke=\"#0284c7\" stroke-width=\"1.5\"/>\n                    <!-- Right Face -->\n                    <polygon points=\"50,33 67,41 67,59 50,67\" fill=\"rgba(14, 165, 233, 0.6)\" stroke=\"#0284c7\" stroke-width=\"1.5\"/>\n                    <!-- Top Face -->\n                    <polygon points=\"50,33 33,41 50,47 67,41\" fill=\"rgba(56, 189, 248, 0.5)\" stroke=\"#0284c7\" stroke-width=\"1.5\"/>\n                    <!-- Front Center Line -->\n                    <line x1=\"50\" y1=\"33\" x2=\"50\" y2=\"67\" stroke=\"#38bdf8\" stroke-width=\"2\"/>\n                </g>\n            </svg>\n        </div>\n\n        <!-- Text Block -->\n        <div class=\"text-container\">\n            <div class=\"brand-name\">RAY NASO</div>\n            <div class=\"tool-title\">3D PERSPECTIVE TOOL</div>\n            <div class=\"tagline\">1 • 2 • 3 Point Perspective & Reference</div>\n        </div>\n\n    </a>\n\n</body>\n</html>","embed_html_app1headerHtml":""},"metaData":{"position":{"left":-647,"top":755.0000457763672},"size":{"width":413,"height":120}}},{"type":"freeText","id":"id1785998535313","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Text 6","baseName":null,"templateID":"templateid1785998535314","templateName":null,"order":9,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":869,"height":157,"left":498,"top":17},"lastResizingSize":{"width":869,"height":157,"left":498,"top":17},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","basicUserCanEdit":true,"backgroundColor":"transparent","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","isVisible":true,"verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillHorizontal":false,"fillVertical":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"borderColor":{"top":"Black","left":"Black","bottom":"Black","right":"Black"},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"},"padding":{"top":0,"left":0,"bottom":0,"right":0},"rotationAngle":0,"verticalAlign":"center","horizontalAlign":"left","horizontalContentAlign":"center","startSelected":false,"urlAddress":null,"openInNewTab":false,"openInTopWindow":false,"shouldUnderlineChildren":false,"namedTextStyle":null,"fontColor":{"mainColor":2,"opacity":1,"brightness":0},"textShadow":[],"lineHeight":{"pixels":14,"percentages":120,"unit":"percentages"},"letterSpacing":0,"fontSize":14,"font":{"themeFont":"body1"},"contentTextTransform":"none","isBold":false,"isItalic":false,"isUnderline":false,"textStyle":{"bold":false,"underline":false,"italic":false},"textDirection":2,"dataBinding":null,"formattedText":"<div><span style=\"font-size:14px;\"></span><span class=\"theme-text-color-0-0\"><span style=\"font-size:20px;\">For every artist who has ever spent hours wrestling with vanishing points or watched a great painting get thrown off by bad perspective, this tool was built for you. The Ray Naso 3D Perspective Tool gives traditional and digital creators an instant 3D perspective framework that works alongside your real-world reference images. Perfect for students mastering the basics or seasoned studio painters building complex landscapes, it provides the precise structural backbone your art needs in a matter of seconds.</span></span><span style=\"font-size:14px;\"></span><br></div>","verticalAlignment":"top"},"metaData":{"position":{"left":-190,"top":732.0000457763672},"size":{"width":869,"height":157}}}]},{"type":"image","id":"id1780901566512","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Image 2","baseName":null,"templateID":"templateid1563048314470","templateName":null,"order":24,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":35,"height":41,"left":301,"top":428},"lastResizingSize":{"width":35,"height":41,"left":1011,"top":7},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","basicUserCanEdit":true,"isVisible":true,"backgroundColor":"transparent","verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillHorizontal":false,"fillVertical":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"startSelected":false,"urlAddress":{"type":"Web","url":"https://www.youtube.com/channel/UCwpI5Mszrsf4lDcdXmrjh-Q"},"openInNewTab":true,"openInTopWindow":false,"shouldUnderlineChildren":false,"templateOpener":false,"popupType":"DefaultPopup","imageUrl":{"id":144951021,"imagePath":"5d2a39614851ajkoT5i7/YouTubeLogo.jpg","ownerID":28713746,"storageServer":6,"scaledVersions":[{"size":200,"suffix":"_d200"}],"imageWidth":225,"imageHeight":225,"isTemporary":0},"imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"borderColor":{"top":"black","left":"black","bottom":"black","right":"black"},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"},"rotationAngle":0,"backgroundOverlay":"transparent","dataBinding":null,"imageLoadingOverlay":{"background":"rgba(255,255,255,0.7)","imageInfo":{}},"imageLoadingSettings":{"hideImage":false,"showOverlay":false,"overlayBackground":"rgba(255,255,255,0.7)"},"alt":null},"metaData":{"position":{"left":301.00006103515625,"top":612.0000152587891},"size":{"width":35,"height":41}}},{"type":"image","id":"id1780901566516","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Image 24","baseName":null,"templateID":"templateid1563048572090","templateName":null,"order":25,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":47,"height":41,"left":355,"top":428},"lastResizingSize":{"width":47,"height":41,"left":1065,"top":7},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","basicUserCanEdit":true,"isVisible":true,"backgroundColor":"transparent","verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillHorizontal":false,"fillVertical":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"startSelected":false,"urlAddress":{"type":"Web","url":"https://www.facebook.com/CalliforniaArtist/?ref=settings"},"openInNewTab":true,"openInTopWindow":false,"shouldUnderlineChildren":false,"templateOpener":false,"popupType":"DefaultPopup","imageUrl":{"id":144951043,"imagePath":"5d2a3a63bdc38YFIMaWA/facebook-logo-100035675-large.jpg","ownerID":28713746,"storageServer":6,"scaledVersions":[{"size":200,"suffix":"_d200"},{"size":400,"suffix":"_d400"}],"imageWidth":580,"imageHeight":580,"isTemporary":0},"imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"borderColor":{"top":"black","left":"black","bottom":"black","right":"black"},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"},"rotationAngle":0,"backgroundOverlay":"transparent","dataBinding":null,"imageLoadingOverlay":{"background":"rgba(255,255,255,0.7)","imageInfo":{}},"imageLoadingSettings":{"hideImage":false,"showOverlay":false,"overlayBackground":"rgba(255,255,255,0.7)"},"alt":null},"metaData":{"position":{"left":355.00006103515625,"top":612.0000152587891},"size":{"width":47,"height":41}}}]},{"type":"SectionElement","id":"id1785913249190","elementProperties":{"tagName":"SECTION","behaviours":null,"isLocked":false,"name":"Section 6","baseName":null,"templateID":"templateid1785913209778","templateName":null,"order":4,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{"skinId":"500603-id1432731515344","categoryId":226},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"height":1361,"left":0,"width":1582,"top":0},"lastResizingSize":{"height":1323,"left":0,"width":1582,"top":0},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"padding":{"top":0,"left":0,"bottom":0,"right":0},"basicUserCanEdit":true,"backgroundColor":"transparent","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillVertical":false,"fillHorizontal":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"childrenAnchor":"center","resizingGripPosiotion":"s","sectionName":"Section 1","pageContentType":1,"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"borderColor":{"top":"Black","left":"Black","bottom":"Black","right":"Black"},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"}},"metaData":{"position":{"left":-791.1666870117188,"top":868.0000457763672},"size":{"width":1582,"height":1361}},"childElements":[{"type":"ExternalAppembed_html_app1","id":"id1785913313944","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Embed Html 10","baseName":null,"templateID":"templateid1785913313945","templateName":null,"order":54,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":1413,"height":1023,"left":-688,"top":44},"lastResizingSize":{"width":1413,"height":1023},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"basicUserCanEdit":true,"backgroundColor":"transparent","padding":{"top":0,"left":0,"bottom":0,"right":0},"imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillHorizontal":false,"fillVertical":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"isVisible":true,"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"borderColor":{"top":"Black","left":"Black","bottom":"Black","right":"Black"},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"},"rotationAngle":0,"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","embed_html_app1html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>3D Perspective Tool</title>\n    <style>\n        * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n        }\n        body {\n            display: flex;\n            height: 100vh;\n            width: 100vw;\n            overflow: hidden;\n            background-color: #0f172a;\n            color: #f8fafc;\n        }\n        #sidebar {\n            width: 320px;\n            background-color: #1e293b;\n            padding: 20px;\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n            overflow-y: auto;\n            z-index: 10;\n            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);\n        }\n        .control-group {\n            display: flex;\n            flex-direction: column;\n            gap: 6px;\n        }\n        label {\n            font-size: 0.85rem;\n            font-weight: 600;\n            color: #94a3b8;\n        }\n        select, input[type=\"file\"], button {\n            background-color: #334155;\n            color: #f8fafc;\n            border: 1px solid #475569;\n            padding: 8px 12px;\n            border-radius: 6px;\n            font-size: 0.9rem;\n            cursor: pointer;\n        }\n        button {\n            font-weight: 600;\n            background-color: #2563eb;\n            border: none;\n            transition: background 0.2s;\n        }\n        button:hover {\n            background-color: #1d4ed8;\n        }\n        button.active {\n            background-color: #059669;\n        }\n        input[type=\"range\"] {\n            width: 100%;\n            accent-color: #38bdf8;\n        }\n        #canvas-container {\n            flex: 1;\n            position: relative;\n            background-color: #0f172a;\n            overflow: hidden;\n        }\n        canvas {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            z-index: 1;\n        }\n        #imageOverlay {\n            position: absolute;\n            top: 50px;\n            left: 50px;\n            display: none;\n            z-index: 5;\n            cursor: move;\n            user-select: none;\n        }\n        #imageOverlay img {\n            width: 100%;\n            height: 100%;\n            display: block;\n            pointer-events: none;\n        }\n        #resizeHandle {\n            position: absolute;\n            right: -6px;\n            bottom: -6px;\n            width: 14px;\n            height: 14px;\n            background-color: #38bdf8;\n            border: 2px solid #ffffff;\n            border-radius: 50%;\n            cursor: nwse-resize;\n        }\n    </style>\n</head>\n<body>\n\n    <div id=\"sidebar\">\n        <h2>Perspective Tool</h2>\n        \n        <div class=\"control-group\">\n            <label for=\"modeSelect\">Perspective Mode:</label>\n            <select id=\"modeSelect\">\n                <option value=\"1pt\">1-Point Perspective</option>\n                <option value=\"2pt\" selected>2-Point Perspective</option>\n                <option value=\"3pt\">3-Point Perspective</option>\n            </select>\n        </div>\n\n        <div class=\"control-group\" id=\"viewAngleGroup\" style=\"display: none;\">\n            <label for=\"viewAngleSelect\">View Angle:</label>\n            <select id=\"viewAngleSelect\">\n                <option value=\"birdsEye\">Bird's Eye View</option>\n                <option value=\"wormsEye\">Worm's Eye View</option>\n            </select>\n        </div>\n\n        <div class=\"control-group\">\n            <label>Horizon Line Height:</label>\n            <input type=\"range\" id=\"horizonSlider\" min=\"10\" max=\"90\" value=\"40\">\n        </div>\n\n        <div class=\"control-group\">\n            <label id=\"vp1Label\">Left VP X:</label>\n            <input type=\"range\" id=\"vp1Slider\" min=\"5\" max=\"45\" value=\"15\">\n        </div>\n\n        <div class=\"control-group\" id=\"vp2Group\">\n            <label>Right VP X:</label>\n            <input type=\"range\" id=\"vp2Slider\" min=\"55\" max=\"95\" value=\"85\">\n        </div>\n\n        <div class=\"control-group\" id=\"vp3Group\" style=\"display: none;\">\n            <label>3rd VP Distance:</label>\n            <input type=\"range\" id=\"vp3Slider\" min=\"100\" max=\"800\" value=\"400\">\n        </div>\n\n        <div class=\"control-group\">\n            <label>Cube Height:</label>\n            <input type=\"range\" id=\"heightSlider\" min=\"20\" max=\"300\" value=\"120\">\n        </div>\n\n        <div class=\"control-group\">\n            <label>Left Depth:</label>\n            <input type=\"range\" id=\"depthLeftSlider\" min=\"5\" max=\"95\" value=\"30\">\n        </div>\n\n        <div class=\"control-group\">\n            <label>Right Depth:</label>\n            <input type=\"range\" id=\"depthRightSlider\" min=\"5\" max=\"95\" value=\"30\">\n        </div>\n\n        <div class=\"control-group\">\n            <label>Line Vibrancy:</label>\n            <input type=\"range\" id=\"vibrancySlider\" min=\"0\" max=\"100\" value=\"100\">\n        </div>\n\n        <button id=\"toggleGrid\">Toggle Perspective Lines</button>\n        <button id=\"toggleFloorGrid\">Toggle Floor Grid</button>\n        <button id=\"toggleLayer\">Bring Grid to Front</button>\n\n        <hr style=\"border-color: #334155;\">\n\n        <div class=\"control-group\">\n            <label>Overlay Reference Image:</label>\n            <input type=\"file\" id=\"imageLoader\" accept=\"image/*\">\n        </div>\n\n        <div class=\"control-group\">\n            <label>Image Opacity:</label>\n            <input type=\"range\" id=\"opacitySlider\" min=\"0.1\" max=\"1\" step=\"0.05\" value=\"0.7\">\n        </div>\n    </div>\n\n    <div id=\"canvas-container\">\n        <canvas id=\"perspectiveCanvas\"></canvas>\n        <div id=\"imageOverlay\">\n            <img id=\"uploadedImage\" src=\"\" alt=\"Overlay\">\n            <div id=\"resizeHandle\"></div>\n        </div>\n    </div>\n\n<script>\n    const canvas = document.getElementById('perspectiveCanvas');\n    const ctx = canvas.getContext('2d');\n    const container = document.getElementById('canvas-container');\n\n    const modeSelect = document.getElementById('modeSelect');\n    const viewAngleSelect = document.getElementById('viewAngleSelect');\n    const viewAngleGroup = document.getElementById('viewAngleGroup');\n    const horizonSlider = document.getElementById('horizonSlider');\n    const vp1Slider = document.getElementById('vp1Slider');\n    const vp2Slider = document.getElementById('vp2Slider');\n    const vp3Slider = document.getElementById('vp3Slider');\n    const vp1Label = document.getElementById('vp1Label');\n    const vp2Group = document.getElementById('vp2Group');\n    const vp3Group = document.getElementById('vp3Group');\n    const heightSlider = document.getElementById('heightSlider');\n    const depthLeftSlider = document.getElementById('depthLeftSlider');\n    const depthRightSlider = document.getElementById('depthRightSlider');\n    const vibrancySlider = document.getElementById('vibrancySlider');\n    const toggleGridBtn = document.getElementById('toggleGrid');\n    const toggleFloorGridBtn = document.getElementById('toggleFloorGrid');\n\n    const imageLoader = document.getElementById('imageLoader');\n    const opacitySlider = document.getElementById('opacitySlider');\n    const imageOverlay = document.getElementById('imageOverlay');\n    const uploadedImage = document.getElementById('uploadedImage');\n    const resizeHandle = document.getElementById('resizeHandle');\n    const toggleLayerBtn = document.getElementById('toggleLayer');\n\n    let horizonY = 0;\n    let vp1X = 0;\n    let vp2X = 0;\n    let showGrid = false;\n    let showFloorGrid = false;\n    let gridIsFront = false;\n    let isInitialized = false;\n\n    let cubeFrontTop = { x: 0, y: 0 };\n    let cubeFrontBottom = { x: 0, y: 0 };\n    let cubeHeight = parseInt(heightSlider.value);\n\n    let isDragging = false;\n    let dragOffset = { x: 0, y: 0 };\n    const interactionRadius = 15;\n\n    let isOverlayDragging = false;\n    let isOverlayResizing = false;\n    let overlayStartX, overlayStartY;\n    let overlayStartLeft, overlayStartTop;\n    let overlayStartWidth, overlayStartHeight;\n    let imageAspectRatio = 1;\n\n    modeSelect.addEventListener('change', () => {\n        const mode = modeSelect.value;\n        if (mode === '1pt') {\n            vp1Label.textContent = 'Center VP X:';\n            vp1Slider.min = \"5\"; vp1Slider.max = \"95\"; vp1Slider.value = \"50\";\n            vp2Slider.disabled = true; vp2Group.style.opacity = \"0.4\";\n            vp3Group.style.display = \"none\";\n            viewAngleGroup.style.display = \"none\";\n        } else if (mode === '3pt') {\n            vp1Label.textContent = 'Left VP X:';\n            vp1Slider.min = \"5\"; vp1Slider.max = \"45\"; vp1Slider.value = \"15\";\n            vp2Slider.disabled = false; vp2Group.style.opacity = \"1\";\n            vp3Group.style.display = \"flex\";\n            viewAngleGroup.style.display = \"flex\";\n        } else {\n            vp1Label.textContent = 'Left VP X:';\n            vp1Slider.min = \"5\"; vp1Slider.max = \"45\"; vp1Slider.value = \"15\";\n            vp2Slider.disabled = false; vp2Group.style.opacity = \"1\";\n            vp3Group.style.display = \"none\";\n            viewAngleGroup.style.display = \"none\";\n        }\n        updatePositionsFromSliders();\n        draw();\n    });\n\n    viewAngleSelect.addEventListener('change', () => { draw(); });\n\n    toggleLayerBtn.addEventListener('click', () => {\n        gridIsFront = !gridIsFront;\n        if (gridIsFront) {\n            canvas.style.zIndex = \"6\"; \n            imageOverlay.style.zIndex = \"5\";\n            imageOverlay.style.pointerEvents = \"none\"; \n            toggleLayerBtn.textContent = \"Bring Image to Front\";\n            toggleLayerBtn.style.background = \"#16a34a\";\n        } else {\n            canvas.style.zIndex = \"1\"; \n            imageOverlay.style.zIndex = \"5\";\n            imageOverlay.style.pointerEvents = \"auto\"; \n            toggleLayerBtn.textContent = \"Bring Grid to Front\";\n            toggleLayerBtn.style.background = \"#64748b\";\n        }\n    });\n\n    imageLoader.addEventListener('change', function(e) {\n        if (e.target.files && e.target.files[0]) {\n            const reader = new FileReader();\n            reader.onload = function(event) {\n                uploadedImage.src = event.target.result;\n                uploadedImage.onload = function() {\n                    imageAspectRatio = uploadedImage.naturalHeight / uploadedImage.naturalWidth;\n                    imageOverlay.style.width = '350px';\n                    imageOverlay.style.height = (350 * imageAspectRatio) + 'px';\n                    imageOverlay.style.display = 'block';\n                };\n            };\n            reader.readAsDataURL(e.target.files[0]);\n        }\n    });\n\n    opacitySlider.addEventListener('input', function(e) { imageOverlay.style.opacity = e.target.value; });\n\n    imageOverlay.addEventListener('mousedown', function(e) {\n        if (e.target === resizeHandle) {\n            isOverlayResizing = true;\n            overlayStartX = e.clientX; overlayStartY = e.clientY;\n            overlayStartWidth = imageOverlay.clientWidth;\n            overlayStartHeight = imageOverlay.clientHeight;\n            e.preventDefault(); e.stopPropagation();\n        } else {\n            isOverlayDragging = true;\n            overlayStartX = e.clientX; overlayStartY = e.clientY;\n            overlayStartLeft = imageOverlay.offsetLeft;\n            overlayStartTop = imageOverlay.offsetTop;\n            e.preventDefault();\n        }\n    });\n\n    toggleGridBtn.addEventListener('click', () => {\n        showGrid = !showGrid;\n        toggleGridBtn.classList.toggle('active', showGrid);\n        draw();\n    });\n\n    toggleFloorGridBtn.addEventListener('click', () => {\n        showFloorGrid = !showFloorGrid;\n        toggleFloorGridBtn.classList.toggle('active', showFloorGrid);\n        draw();\n    });\n\n    function updatePositionsFromSliders() {\n        if (canvas.width === 0 || canvas.height === 0) return;\n\n        horizonY = (parseInt(horizonSlider.value) / 100) * canvas.height;\n        vp1X = (parseInt(vp1Slider.value) / 100) * canvas.width;\n        vp2X = (parseInt(vp2Slider.value) / 100) * canvas.width;\n        cubeHeight = parseInt(heightSlider.value);\n\n        if (!isInitialized) {\n            cubeFrontTop.x = canvas.width / 2;\n            cubeFrontTop.y = horizonY + 40;\n            isInitialized = true;\n        }\n        \n        cubeFrontBottom.x = cubeFrontTop.x;\n        cubeFrontBottom.y = cubeFrontTop.y + cubeHeight;\n    }\n\n    function resizeCanvas() {\n        const width = container.clientWidth || window.innerWidth;\n        const height = container.clientHeight || window.innerHeight;\n\n        if (width === 0 || height === 0) return;\n\n        canvas.width = width;\n        canvas.height = height;\n        updatePositionsFromSliders();\n        draw();\n    }\n\n    const resizeObserver = new ResizeObserver(() => {\n        resizeCanvas();\n    });\n    resizeObserver.observe(container);\n\n    window.addEventListener('resize', resizeCanvas);\n    \n    [horizonSlider, vp1Slider, vp2Slider, vp3Slider, heightSlider, depthLeftSlider, depthRightSlider, vibrancySlider].forEach(slider => {\n        slider.addEventListener('input', () => { updatePositionsFromSliders(); draw(); });\n    });\n\n    function getMousePos(e) {\n        const rect = canvas.getBoundingClientRect();\n        const cx = e.touches ? e.touches[0].clientX : e.clientX;\n        const cy = e.touches ? e.touches[0].clientY : e.clientY;\n        return { x: cx - rect.left, y: cy - rect.top };\n    }\n\n    canvas.addEventListener('mousedown', (e) => {\n        const pos = getMousePos(e);\n        const minX = cubeFrontTop.x - interactionRadius;\n        const maxX = cubeFrontTop.x + interactionRadius;\n        const minY = Math.min(cubeFrontTop.y, cubeFrontBottom.y);\n        const maxY = Math.max(cubeFrontTop.y, cubeFrontBottom.y);\n\n        if (pos.x >= minX && pos.x <= maxX && pos.y >= minY && pos.y <= maxY) {\n            isDragging = true;\n            dragOffset.x = pos.x - cubeFrontTop.x;\n            dragOffset.y = pos.y - cubeFrontTop.y;\n        }\n    });\n\n    window.addEventListener('mousemove', (e) => {\n        if (isOverlayDragging) {\n            const dx = e.clientX - overlayStartX;\n            const dy = e.clientY - overlayStartY;\n            imageOverlay.style.left = (overlayStartLeft + dx) + 'px';\n            imageOverlay.style.top = (overlayStartTop + dy) + 'px';\n            return;\n        }\n\n        if (isOverlayResizing) {\n            const dx = e.clientX - overlayStartX;\n            const newWidth = Math.max(80, overlayStartWidth + dx); \n            imageOverlay.style.width = newWidth + 'px';\n            imageOverlay.style.height = (newWidth * imageAspectRatio) + 'px';\n            return;\n        }\n\n        const pos = getMousePos(e);\n        if (!isDragging) {\n            const minX = cubeFrontTop.x - interactionRadius;\n            const maxX = cubeFrontTop.x + interactionRadius;\n            const minY = Math.min(cubeFrontTop.y, cubeFrontBottom.y);\n            const maxY = Math.max(cubeFrontTop.y, cubeFrontBottom.y);\n            canvas.style.cursor = (pos.x >= minX && pos.x <= maxX && pos.y >= minY && pos.y <= maxY) ? 'move' : 'default';\n            return;\n        }\n\n        const buffer = 20;\n        let boundedX;\n        if (modeSelect.value === '1pt') {\n            boundedX = Math.max(buffer, Math.min(canvas.width - buffer, pos.x - dragOffset.x));\n        } else {\n            boundedX = Math.max(vp1X + buffer, Math.min(vp2X - buffer, pos.x - dragOffset.x));\n        }\n\n        cubeFrontTop.x = boundedX;\n        cubeFrontTop.y = pos.y - dragOffset.y;\n        cubeFrontBottom.x = cubeFrontTop.x;\n        cubeFrontBottom.y = cubeFrontTop.y + cubeHeight;\n        draw();\n    });\n\n    window.addEventListener('mouseup', () => { \n        isDragging = false; \n        isOverlayDragging = false;\n        isOverlayResizing = false;\n    });\n\n    function getLineIntersection(p1, p2, p3, p4) {\n        const denom = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);\n        if (denom === 0) return null;\n        const ua = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denom;\n        return { x: p1.x + ua * (p2.x - p1.x), y: p1.y + ua * (p2.y - p1.y) };\n    }\n\n    function getVibrancyStyle() {\n        const val = parseInt(vibrancySlider.value) / 100;\n        const opacity = 0.15 + (0.50 * val);\n        const width = 1.0 + (0.5 * val);\n        return {\n            strokeStyle: `rgba(239, 68, 68, ${opacity})`,\n            lineWidth: width\n        };\n    }\n\n    function drawGrid() {\n        ctx.strokeStyle = 'rgba(148, 163, 184, 0.12)'; ctx.lineWidth = 1;\n        const linesCount = 14;\n        const mode = modeSelect.value;\n        const vp1 = { x: vp1X, y: horizonY };\n\n        if (mode === '1pt') {\n            for (let i = 0; i <= linesCount; i++) {\n                const targetY = canvas.height;\n                const targetX = (canvas.width / linesCount) * i;\n                ctx.beginPath(); ctx.moveTo(vp1.x, vp1.y); ctx.lineTo(targetX, targetY); ctx.stroke();\n            }\n        } else {\n            const vp2 = { x: vp2X, y: horizonY };\n            for (let i = 0; i <= linesCount; i++) {\n                const targetY = canvas.height;\n                const targetXLeft = vp1.x + ((canvas.width * 1.5) / linesCount) * i - canvas.width * 0.25;\n                const targetXRight = vp2.x - ((canvas.width * 1.5) / linesCount) * i + canvas.width * 0.25;\n                ctx.beginPath(); ctx.moveTo(vp1.x, vp1.y); ctx.lineTo(targetXLeft, targetY); ctx.stroke();\n                ctx.beginPath(); ctx.moveTo(vp2.x, vp2.y); ctx.lineTo(targetXRight, targetY); ctx.stroke();\n            }\n        }\n    }\n\n    function drawFloorGrid() {\n        ctx.strokeStyle = 'rgba(56, 189, 248, 0.25)';\n        ctx.lineWidth = 1;\n        \n        const mode = modeSelect.value;\n        const vp1 = { x: vp1X, y: horizonY };\n        const divisions = 20;\n\n        if (mode === '1pt') {\n            for (let i = -divisions; i <= divisions * 2; i++) {\n                const x = (canvas.width / divisions) * i;\n                ctx.beginPath();\n                ctx.moveTo(vp1.x, vp1.y);\n                ctx.lineTo(x, canvas.height);\n                ctx.stroke();\n            }\n            for (let j = 1; j <= 12; j++) {\n                const y = horizonY + Math.pow(j / 12, 2) * (canvas.height - horizonY);\n                ctx.beginPath();\n                ctx.moveTo(0, y);\n                ctx.lineTo(canvas.width, y);\n                ctx.stroke();\n            }\n        } else {\n            const vp2 = { x: vp2X, y: horizonY };\n            for (let i = -divisions; i <= divisions * 2; i++) {\n                const step = (canvas.width / divisions) * i;\n                ctx.beginPath();\n                ctx.moveTo(vp1.x, vp1.y);\n                ctx.lineTo(step, canvas.height);\n                ctx.stroke();\n\n                ctx.beginPath();\n                ctx.moveTo(vp2.x, vp2.y);\n                ctx.lineTo(canvas.width - step, canvas.height);\n                ctx.stroke();\n            }\n        }\n    }\n\n    function draw1Point() {\n        const vp = { x: vp1X, y: horizonY };\n\n        ctx.strokeStyle = '#94a3b8'; ctx.lineWidth = 2;\n        ctx.beginPath(); ctx.moveTo(0, horizonY); ctx.lineTo(canvas.width, horizonY); ctx.stroke();\n\n        ctx.fillStyle = '#ef4444';\n        ctx.beginPath(); ctx.arc(vp.x, vp.y, 6, 0, Math.PI * 2); ctx.fill();\n        ctx.fillStyle = '#334155'; ctx.font = 'bold 12px sans-serif';\n        ctx.fillText('VP (Center)', vp.x - 30, vp.y - 12);\n\n        const width = (parseInt(depthLeftSlider.value) + parseInt(depthRightSlider.value)) * 2;\n        const halfWidth = width / 2;\n        const depthFactor = (parseInt(depthRightSlider.value) / 100) * 0.6;\n\n        const fTL = { x: cubeFrontTop.x - halfWidth, y: cubeFrontTop.y };\n        const fTR = { x: cubeFrontTop.x + halfWidth, y: cubeFrontTop.y };\n        const fBL = { x: cubeFrontBottom.x - halfWidth, y: cubeFrontBottom.y };\n        const fBR = { x: cubeFrontBottom.x + halfWidth, y: cubeFrontBottom.y };\n\n        const bTL = { x: fTL.x + (vp.x - fTL.x) * depthFactor, y: fTL.y + (vp.y - fTL.y) * depthFactor };\n        const bTR = { x: fTR.x + (vp.x - fTR.x) * depthFactor, y: fTR.y + (vp.y - fTR.y) * depthFactor };\n        const bBL = { x: fBL.x + (vp.x - fBL.x) * depthFactor, y: fBL.y + (vp.y - fBL.y) * depthFactor };\n        const bBR = { x: fBR.x + (vp.x - fBR.x) * depthFactor, y: fBR.y + (vp.y - fBR.y) * depthFactor };\n\n        const vibrancy = getVibrancyStyle();\n        ctx.strokeStyle = vibrancy.strokeStyle; \n        ctx.lineWidth = vibrancy.lineWidth;\n        [fTL, fTR, fBL, fBR].forEach(pt => {\n            ctx.beginPath(); ctx.moveTo(vp.x, vp.y); ctx.lineTo(pt.x, pt.y); ctx.stroke();\n        });\n\n        ctx.fillStyle = 'rgba(14, 165, 233, 0.35)'; \n        ctx.beginPath(); ctx.moveTo(fTL.x, fTL.y); ctx.lineTo(fTR.x, fTR.y); ctx.lineTo(fBR.x, fBR.y); ctx.lineTo(fBL.x, fBL.y); ctx.fill();\n\n        ctx.fillStyle = 'rgba(14, 165, 233, 0.2)'; \n        ctx.beginPath(); ctx.moveTo(fTR.x, fTR.y); ctx.lineTo(bTR.x, bTR.y); ctx.lineTo(bBR.x, bBR.y); ctx.lineTo(fBR.x, fBR.y); ctx.fill();\n        ctx.beginPath(); ctx.moveTo(fTL.x, fTL.y); ctx.lineTo(bTL.x, bTL.y); ctx.lineTo(bBL.x, bBL.y); ctx.lineTo(fBL.x, fBL.y); ctx.fill();\n\n        if (cubeFrontTop.y > horizonY) {\n            ctx.fillStyle = 'rgba(14, 165, 233, 0.25)';\n            ctx.beginPath(); ctx.moveTo(fTL.x, fTL.y); ctx.lineTo(fTR.x, fTR.y); ctx.lineTo(bTR.x, bTR.y); ctx.lineTo(bTL.x, bTL.y); ctx.fill();\n        }\n        if (cubeFrontBottom.y < horizonY) {\n            ctx.fillStyle = 'rgba(14, 165, 233, 0.25)';\n            ctx.beginPath(); ctx.moveTo(fBL.x, fBL.y); ctx.lineTo(fBR.x, fBR.y); ctx.lineTo(bBR.x, bBR.y); ctx.lineTo(bBL.x, bBL.y); ctx.fill();\n        }\n\n        ctx.strokeStyle = '#0284c7'; ctx.lineWidth = 2.5;\n        ctx.beginPath(); ctx.moveTo(cubeFrontTop.x, cubeFrontTop.y); ctx.lineTo(cubeFrontBottom.x, cubeFrontBottom.y); ctx.stroke();\n\n        ctx.strokeStyle = '#0369a1'; ctx.lineWidth = 2;\n        ctx.beginPath();\n        ctx.strokeRect(fTL.x, fTL.y, width, cubeHeight);\n        ctx.moveTo(fTL.x, fTL.y); ctx.lineTo(bTL.x, bTL.y);\n        ctx.moveTo(fTR.x, fTR.y); ctx.lineTo(bTR.x, bTR.y);\n        ctx.moveTo(fBL.x, fBL.y); ctx.lineTo(bBL.x, bBL.y);\n        ctx.moveTo(fBR.x, fBR.y); ctx.lineTo(bBR.x, bBR.y);\n        ctx.moveTo(bTL.x, bTL.y); ctx.lineTo(bTR.x, bTR.y); ctx.lineTo(bBR.x, bBR.y); ctx.lineTo(bBL.x, bBL.y); ctx.closePath();\n        ctx.stroke();\n    }\n\n    function draw2Point() {\n        const vp1 = { x: vp1X, y: horizonY };\n        const vp2 = { x: vp2X, y: horizonY };\n\n        ctx.strokeStyle = '#94a3b8'; ctx.lineWidth = 2;\n        ctx.beginPath(); ctx.moveTo(0, horizonY); ctx.lineTo(canvas.width, horizonY); ctx.stroke();\n\n        ctx.fillStyle = '#ef4444';\n        ctx.beginPath(); ctx.arc(vp1.x, vp1.y, 6, 0, Math.PI * 2); ctx.fill();\n        ctx.beginPath(); ctx.arc(vp2.x, vp2.y, 6, 0, Math.PI * 2); ctx.fill();\n        \n        ctx.fillStyle = '#334155'; ctx.font = 'bold 12px sans-serif';\n        ctx.fillText('VP 1 (Left)', vp1.x - 25, vp1.y - 12);\n        ctx.fillText('VP 2 (Right)', vp2.x - 25, vp2.y - 12);\n\n        const pctLeft = parseInt(depthLeftSlider.value) / 100;\n        const pctRight = parseInt(depthRightSlider.value) / 100;\n\n        const leftOffset = (cubeFrontTop.x - vp1X) * pctLeft; \n        const rightOffset = (vp2X - cubeFrontTop.x) * pctRight;\n        const leftFaceX = cubeFrontTop.x - leftOffset;\n        const rightFaceX = cubeFrontTop.x + rightOffset;\n\n        const leftTop = getLineIntersection(cubeFrontTop, vp1, {x: leftFaceX, y: 0}, {x: leftFaceX, y: canvas.height});\n        const leftBottom = getLineIntersection(cubeFrontBottom, vp1, {x: leftFaceX, y: 0}, {x: leftFaceX, y: canvas.height});\n        const rightTop = getLineIntersection(cubeFrontTop, vp2, {x: rightFaceX, y: 0}, {x: rightFaceX, y: canvas.height});\n        const rightBottom = getLineIntersection(cubeFrontBottom, vp2, {x: rightFaceX, y: 0}, {x: rightFaceX, y: canvas.height});\n        const backTop = getLineIntersection(leftTop, vp2, rightTop, vp1);\n        const backBottom = getLineIntersection(leftBottom, vp2, rightBottom, vp1);\n\n        const vibrancy = getVibrancyStyle();\n        ctx.strokeStyle = vibrancy.strokeStyle; \n        ctx.lineWidth = vibrancy.lineWidth;\n        [cubeFrontTop, cubeFrontBottom, rightTop, rightBottom].forEach(pt => {\n            if (pt) { ctx.beginPath(); ctx.moveTo(vp1.x, vp1.y); ctx.lineTo(pt.x, pt.y); ctx.stroke(); }\n        });\n        [cubeFrontTop, cubeFrontBottom, leftTop, leftBottom].forEach(pt => {\n            if (pt) { ctx.beginPath(); ctx.moveTo(vp2.x, vp2.y); ctx.lineTo(pt.x, pt.y); ctx.stroke(); }\n        });\n\n        if (leftTop && leftBottom && rightTop && rightBottom && backTop && backBottom) {\n            ctx.fillStyle = 'rgba(14, 165, 233, 0.25)'; \n            ctx.beginPath(); ctx.moveTo(cubeFrontTop.x, cubeFrontTop.y); ctx.lineTo(leftTop.x, leftTop.y); ctx.lineTo(leftBottom.x, leftBottom.y); ctx.lineTo(cubeFrontBottom.x, cubeFrontBottom.y); ctx.fill();\n\n            ctx.fillStyle = 'rgba(14, 165, 233, 0.35)'; \n            ctx.beginPath(); ctx.moveTo(cubeFrontTop.x, cubeFrontTop.y); ctx.lineTo(rightTop.x, rightTop.y); ctx.lineTo(rightBottom.x, rightBottom.y); ctx.lineTo(cubeFrontBottom.x, cubeFrontBottom.y); ctx.fill();\n\n            ctx.fillStyle = 'rgba(14, 165, 233, 0.12)'; \n            if (cubeFrontTop.y > horizonY) {\n                ctx.beginPath(); ctx.moveTo(cubeFrontTop.x, cubeFrontTop.y); ctx.lineTo(leftTop.x, leftTop.y); ctx.lineTo(backTop.x, backTop.y); ctx.lineTo(rightTop.x, rightTop.y); ctx.fill();\n            } \n            if (cubeFrontBottom.y < horizonY) {\n                ctx.beginPath(); ctx.moveTo(cubeFrontBottom.x, cubeFrontBottom.y); ctx.lineTo(leftBottom.x, leftBottom.y); ctx.lineTo(backBottom.x, backBottom.y); ctx.lineTo(rightBottom.x, rightBottom.y); ctx.fill();\n            }\n\n            ctx.strokeStyle = '#0284c7'; ctx.lineWidth = 2.5;\n            ctx.beginPath(); ctx.moveTo(cubeFrontTop.x, cubeFrontTop.y); ctx.lineTo(cubeFrontBottom.x, cubeFrontBottom.y); ctx.stroke();\n\n            ctx.strokeStyle = '#0369a1'; ctx.lineWidth = 2;\n            ctx.beginPath();\n            ctx.moveTo(cubeFrontTop.x, cubeFrontTop.y); ctx.lineTo(leftTop.x, leftTop.y); ctx.lineTo(leftBottom.x, leftBottom.y); ctx.lineTo(cubeFrontBottom.x, cubeFrontBottom.y);\n            ctx.moveTo(cubeFrontTop.x, cubeFrontTop.y); ctx.lineTo(rightTop.x, rightTop.y); ctx.lineTo(rightBottom.x, rightBottom.y); ctx.lineTo(cubeFrontBottom.x, cubeFrontBottom.y);\n            if (cubeFrontTop.y > horizonY) { ctx.moveTo(leftTop.x, leftTop.y); ctx.lineTo(backTop.x, backTop.y); ctx.lineTo(rightTop.x, rightTop.y); }\n            if (cubeFrontBottom.y < horizonY) { ctx.moveTo(leftBottom.x, leftBottom.y); ctx.lineTo(backBottom.x, backBottom.y); ctx.lineTo(rightBottom.x, rightBottom.y); }\n            ctx.stroke();\n\n            ctx.strokeStyle = 'rgba(3, 105, 161, 0.4)'; ctx.lineWidth = 1;\n            ctx.beginPath();\n            if (cubeFrontTop.y <= horizonY) { ctx.moveTo(leftTop.x, leftTop.y); ctx.lineTo(backTop.x, backTop.y); ctx.lineTo(rightTop.x, rightTop.y); }\n            if (cubeFrontBottom.y >= horizonY) { ctx.moveTo(leftBottom.x, leftBottom.y); ctx.lineTo(backBottom.x, backBottom.y); ctx.lineTo(rightBottom.x, rightBottom.y); }\n            ctx.moveTo(backTop.x, backTop.y); ctx.lineTo(backBottom.x, backBottom.y);\n            ctx.stroke();\n        }\n    }\n\n    function draw3Point() {\n        const vp1 = { x: vp1X, y: horizonY };\n        const vp2 = { x: vp2X, y: horizonY };\n\n        const dist = parseInt(vp3Slider.value);\n        const isWormsEye = viewAngleSelect.value === 'wormsEye';\n        \n        const vp3YPos = isWormsEye ? horizonY - dist : horizonY + dist;\n        const vp3 = { x: canvas.width / 2, y: vp3YPos };\n\n        ctx.strokeStyle = '#94a3b8'; ctx.lineWidth = 2;\n        ctx.beginPath(); ctx.moveTo(0, horizonY); ctx.lineTo(canvas.width, horizonY); ctx.stroke();\n\n        ctx.fillStyle = '#ef4444';\n        ctx.beginPath(); ctx.arc(vp1.x, vp1.y, 6, 0, Math.PI * 2); ctx.fill();\n        ctx.beginPath(); ctx.arc(vp2.x, vp2.y, 6, 0, Math.PI * 2); ctx.fill();\n        if (vp3.y >= 0 && vp3.y <= canvas.height) {\n            ctx.beginPath(); ctx.arc(vp3.x, vp3.y, 6, 0, Math.PI * 2); ctx.fill();\n        }\n        \n        ctx.fillStyle = '#334155'; ctx.font = 'bold 12px sans-serif';\n        ctx.fillText('VP 1 (Left)', vp1.x - 25, vp1.y - 12);\n        ctx.fillText('VP 2 (Right)', vp2.x - 25, vp2.y - 12);\n\n        const pctLeft = parseInt(depthLeftSlider.value) / 100;\n        const pctRight = parseInt(depthRightSlider.value) / 100;\n\n        const fTop = { x: cubeFrontTop.x, y: cubeFrontTop.y };\n        \n        const dx = vp3.x - fTop.x;\n        const dy = vp3.y - fTop.y;\n        const len = Math.hypot(dx, dy) || 1;\n        const dir = isWormsEye ? -1 : 1;\n        \n        const fBot = {\n            x: fTop.x + (dx / len) * cubeHeight * dir,\n            y: fTop.y + (dy / len) * cubeHeight * dir\n        };\n\n        const leftTopX = fTop.x - (fTop.x - vp1X) * pctLeft;\n        const rightTopX = fTop.x + (vp2X - fTop.x) * pctRight;\n\n        const lTop = getLineIntersection(fTop, vp1, {x: leftTopX, y: 0}, {x: leftTopX, y: canvas.height});\n        const rTop = getLineIntersection(fTop, vp2, {x: rightTopX, y: 0}, {x: rightTopX, y: canvas.height});\n\n        const lBot = getLineIntersection(lTop, vp3, fBot, vp1);\n        const rBot = getLineIntersection(rTop, vp3, fBot, vp2);\n\n        const bTop = getLineIntersection(lTop, vp2, rTop, vp1);\n        const bBot = getLineIntersection(lBot, vp2, rBot, vp1);\n\n        const vibrancy = getVibrancyStyle();\n        ctx.strokeStyle = vibrancy.strokeStyle; \n        ctx.lineWidth = vibrancy.lineWidth;\n        [fTop, lTop, rTop].forEach(pt => {\n            if (pt) { ctx.beginPath(); ctx.moveTo(vp3.x, vp3.y); ctx.lineTo(pt.x, pt.y); ctx.stroke(); }\n        });\n        [fTop, fBot, rTop, rBot].forEach(pt => {\n            if (pt) { ctx.beginPath(); ctx.moveTo(vp1.x, vp1.y); ctx.lineTo(pt.x, pt.y); ctx.stroke(); }\n        });\n        [fTop, fBot, lTop, lBot].forEach(pt => {\n            if (pt) { ctx.beginPath(); ctx.moveTo(vp2.x, vp2.y); ctx.lineTo(pt.x, pt.y); ctx.stroke(); }\n        });\n\n        if (lTop && lBot && rTop && rBot && bTop && bBot) {\n            ctx.fillStyle = 'rgba(14, 165, 233, 0.25)';\n            ctx.beginPath(); ctx.moveTo(fTop.x, fTop.y); ctx.lineTo(lTop.x, lTop.y); ctx.lineTo(lBot.x, lBot.y); ctx.lineTo(fBot.x, fBot.y); ctx.fill();\n\n            ctx.fillStyle = 'rgba(14, 165, 233, 0.35)';\n            ctx.beginPath(); ctx.moveTo(fTop.x, fTop.y); ctx.lineTo(rTop.x, rTop.y); ctx.lineTo(rBot.x, rBot.y); ctx.lineTo(fBot.x, fBot.y); ctx.fill();\n\n            ctx.fillStyle = 'rgba(14, 165, 233, 0.18)';\n            if (fTop.y > horizonY && lTop.y > horizonY && rTop.y > horizonY) {\n                ctx.beginPath(); ctx.moveTo(fTop.x, fTop.y); ctx.lineTo(lTop.x, lTop.y); ctx.lineTo(bTop.x, bTop.y); ctx.lineTo(rTop.x, rTop.y); ctx.fill();\n            } \n            if (fBot.y < horizonY && lBot.y < horizonY && rBot.y < horizonY) {\n                ctx.beginPath(); ctx.moveTo(fBot.x, fBot.y); ctx.lineTo(lBot.x, lBot.y); ctx.lineTo(bBot.x, bBot.y); ctx.lineTo(rBot.x, rBot.y); ctx.fill();\n            }\n\n            ctx.strokeStyle = '#0284c7'; ctx.lineWidth = 2.5;\n            ctx.beginPath(); ctx.moveTo(fTop.x, fTop.y); ctx.lineTo(fBot.x, fBot.y); ctx.stroke();\n\n            ctx.strokeStyle = '#0369a1'; ctx.lineWidth = 2;\n            ctx.beginPath();\n            ctx.moveTo(fTop.x, fTop.y); ctx.lineTo(lTop.x, lTop.y); ctx.lineTo(lBot.x, lBot.y); ctx.lineTo(fBot.x, fBot.y);\n            ctx.moveTo(fTop.x, fTop.y); ctx.lineTo(rTop.x, rTop.y); ctx.lineTo(rBot.x, rBot.y); ctx.lineTo(fBot.x, fBot.y);\n            \n            if (fTop.y > horizonY && lTop.y > horizonY && rTop.y > horizonY) { \n                ctx.moveTo(lTop.x, lTop.y); ctx.lineTo(bTop.x, bTop.y); ctx.lineTo(rTop.x, rTop.y); \n            }\n            if (fBot.y < horizonY && lBot.y < horizonY && rBot.y < horizonY) { \n                ctx.moveTo(lBot.x, lBot.y); ctx.lineTo(bBot.x, bBot.y); ctx.lineTo(rBot.x, rBot.y); \n            }\n            ctx.stroke();\n\n            ctx.strokeStyle = 'rgba(3, 105, 161, 0.4)'; ctx.lineWidth = 1;\n            ctx.beginPath();\n            if (fTop.y <= horizonY) { ctx.moveTo(lTop.x, lTop.y); ctx.lineTo(bTop.x, bTop.y); ctx.lineTo(rTop.x, rTop.y); }\n            if (fBot.y >= horizonY) { ctx.moveTo(lBot.x, lBot.y); ctx.lineTo(bBot.x, bBot.y); ctx.lineTo(rBot.x, rBot.y); }\n            ctx.moveTo(bTop.x, bTop.y); ctx.lineTo(bBot.x, bBot.y);\n            ctx.stroke();\n        }\n    }\n\n    function draw() {\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n        if (showGrid) drawGrid();\n        if (showFloorGrid) drawFloorGrid();\n\n        const mode = modeSelect.value;\n        if (mode === '1pt') {\n            draw1Point();\n        } else if (mode === '3pt') {\n            draw3Point();\n        } else {\n            draw2Point();\n        }\n    }\n\n    window.addEventListener('DOMContentLoaded', () => {\n        resizeCanvas();\n    });\n</script>\n</body>\n</html>","embed_html_app1headerHtml":""},"metaData":{"position":{"left":-688,"top":912.0000457763672},"size":{"width":1413,"height":1023}}},{"type":"userBox","id":"id1785998950834","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Box 5","baseName":null,"templateID":"templateid1785998950835","templateName":null,"order":55,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":1413,"height":153,"left":-688,"top":1075},"lastResizingSize":{"width":1413,"height":153,"left":-688,"top":1037},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","padding":{"top":0,"left":0,"bottom":0,"right":0},"basicUserCanEdit":true,"backgroundColor":"rgb(17,121,169)","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillHorizontal":false,"fillVertical":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"childrenAnchor":"left","startSelected":false,"urlAddress":null,"openInNewTab":false,"openInTopWindow":false,"shouldUnderlineChildren":false,"isVisible":true,"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"borderColor":{"top":"Black","left":"Black","bottom":"Black","right":"Black"},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"},"rotationAngle":0},"metaData":{"position":{"left":-688,"top":1943.0000457763672},"size":{"width":1413,"height":153}},"childElements":[{"type":"freeText","id":"id1785997029323","elementProperties":{"tagName":"H3","behaviours":null,"isLocked":false,"name":"Text 1","baseName":null,"templateID":"templateid1785997029324","templateName":null,"order":56,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":920,"height":146,"left":262,"top":7},"lastResizingSize":{"width":920,"height":146,"left":262,"top":7},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","basicUserCanEdit":true,"backgroundColor":"transparent","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","isVisible":true,"verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillHorizontal":false,"fillVertical":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"borderColor":{"top":"Black","left":"Black","bottom":"Black","right":"Black"},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"},"padding":{"top":0,"left":0,"bottom":0,"right":0},"rotationAngle":0,"verticalAlign":"center","horizontalAlign":"left","horizontalContentAlign":"center","startSelected":false,"urlAddress":null,"openInNewTab":false,"openInTopWindow":false,"shouldUnderlineChildren":false,"namedTextStyle":null,"fontColor":{"mainColor":2,"opacity":1,"brightness":0},"textShadow":[],"lineHeight":{"percentages":120,"unit":"percentages"},"letterSpacing":0,"fontSize":20,"font":{"themeFont":"body1"},"contentTextTransform":"none","isBold":false,"isItalic":false,"isUnderline":false,"textStyle":{"bold":false,"underline":false,"italic":false},"textDirection":2,"dataBinding":null,"formattedText":"<div style=\"text-align: center;\"><ul><li style=\"text-align: left;\"><span style=\"font-size:18px;\"><span class=\"theme-text-color-0-0\"><strong>Instant Visual Alignment: </strong>Instantly establish 1, 2, or 3-point grid frameworks without tedious manual drafting.</span></span></li><li style=\"text-align: left;\"><span style=\"font-size:18px;\"><span class=\"theme-text-color-0-0\"><strong>Confidence in Composition: </strong>Place architectural structures, buildings, and depth elements cleanly into your scenes.</span></span></li><li style=\"text-align: left;\"><span style=\"font-size:18px;\"><span class=\"theme-text-color-0-0\"><strong>Streamlined Studio Workflow:</strong> Dial in your eye level, lock your focal points, and spend more time painting and less time measuring.</span></span></li></ul></div>","verticalAlignment":"top"},"metaData":{"position":{"left":-426,"top":1950.0000457763672},"size":{"width":920,"height":146}}}]},{"type":"freeText","id":"id1785997644500","elementProperties":{"tagName":"H3","behaviours":null,"isLocked":false,"name":"Text 5","baseName":null,"templateID":"templateid1785997644501","templateName":null,"order":57,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":252,"height":273,"left":460,"top":783},"lastResizingSize":{"width":252,"height":273},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","basicUserCanEdit":true,"backgroundColor":"transparent","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","isVisible":true,"verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillHorizontal":false,"fillVertical":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"borderColor":{"top":"Black","left":"Black","bottom":"Black","right":"Black"},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"},"padding":{"top":0,"left":0,"bottom":0,"right":0},"rotationAngle":0,"verticalAlign":"center","horizontalAlign":"left","horizontalContentAlign":"center","startSelected":false,"urlAddress":null,"openInNewTab":false,"openInTopWindow":false,"shouldUnderlineChildren":false,"namedTextStyle":null,"fontColor":{"mainColor":2,"opacity":1,"brightness":0},"textShadow":[],"lineHeight":{"percentages":120,"unit":"percentages"},"letterSpacing":0,"fontSize":20,"font":{"themeFont":"body1"},"contentTextTransform":"none","isBold":false,"isItalic":false,"isUnderline":false,"textStyle":{"bold":false,"underline":false,"italic":false},"textDirection":2,"dataBinding":null,"formattedText":"<div><span class=\"theme-text-color-0-0\"><strong>Pro Tip:</strong> </span><br></div><div><span class=\"theme-text-color-0-0\"><strong>​</strong></span><br></div><div><span class=\"theme-text-color-0-0\">Use 1-point for classic straight-on vistas, </span><br></div><div><span class=\"theme-text-color-0-0\"></span><br></div><div><span class=\"theme-text-color-0-0\">2-point for structured buildings and corners, and </span><br></div><div><span class=\"theme-text-color-0-0\"></span><br></div><div><span class=\"theme-text-color-0-0\">3-point when you want dramatic high/low visual angles!</span><span class=\"theme-text-color-0-0\"></span><br></div>","verticalAlignment":"top"},"metaData":{"position":{"left":460.00006103515625,"top":1651.0000457763672},"size":{"width":252,"height":273}}}]}],"offset":{"left":231,"top":64.00000190734863}}],"connections":{"targetConnections":{},"sourceConnections":{}},"customStatesProperties":{"id1785913149835":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":0}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"topZIndex":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":0}}},"elementOpacity":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":1}}},"staticMargin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"horizontalMargin":0,"verticalMargin":0}}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":0,"height":1068,"top":0,"left":0}}}},"lastResizingSize":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":362,"height":4336}}}},"isVisibleInLastSection":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInLastDataItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"shadow":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"}}}},"glow":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"spread":0,"blur":0,"color":"black"}}}},"verticalAlign":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"center"}}},"horizontalAlign":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"center"}}},"horizontalContentAlign":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"center"}}},"basicUserCanEdit":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"rowsItems":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":null}}},"backgroundColor":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"mainColor":0,"variation":0,"opacity":1,"brightness":0}}}},"imageUrl":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":""}}},"imageLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"stretchedToFill"}}},"imagePosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"vertical":"center","horizontal":"center"}}}},"origImage":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":""}}},"imageOpacity":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":1}}},"backgroundOverlay":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"transparent"}}},"fixedBackground":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":false}}}},"id1785913149837":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":3}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"height":684,"left":0,"width":1301,"top":0}}}},"rowsItems":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"1786001356462":{"id":1786001356462}}}}}},"id1785998784066":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":8}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":1413,"height":191,"left":-688,"top":531}}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"block"}}},"cellItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"id":1786001356463,"width":100,"rowId":1786001356462}}}},"verticalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"horizontalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"fillLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"fillHorizontal":false,"fillVertical":false}}}},"margin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"bottom":0,"right":0}}}},"rowsItems":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"1786001356466":{"id":1786001356466},"1786001356468":{"id":1786001356468}}}}},"isVisible":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}}},"id1785996038532":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":9}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":413,"height":120,"left":41,"top":40}}}},"verticalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"horizontalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"fillLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"fillHorizontal":false,"fillVertical":false}}}},"margin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"bottom":0,"right":0}}}},"isVisible":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"block"}}},"cellItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"id":1786001356467,"width":100,"rowId":1786001356466}}}}},"id1785998535313":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":10}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":869,"height":504,"left":498,"top":17}}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"block"}}},"cellItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"id":1786001356469,"width":100,"rowId":1786001356468}}}},"isVisible":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"verticalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"horizontalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"fillLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"fillHorizontal":false,"fillVertical":false}}}},"margin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"bottom":0,"right":0}}}}},"id1780901566512":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":14}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":35,"height":35,"left":733,"top":13}}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"fixed"}}},"cellItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"id":1780901566527,"width":49.494949494949495,"rowId":1780901566524}}}},"isVisible":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"verticalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"horizontalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"fillLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"fillHorizontal":false,"fillVertical":false}}}},"margin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"bottom":0,"right":0}}}}},"id1780901566516":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":15}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":36,"height":35,"left":687,"top":13}}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"fixed"}}},"cellItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"id":1780901566531,"width":50.505050505050505,"rowId":1780901566524}}}},"isVisible":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"verticalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"horizontalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"fillLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"fillHorizontal":false,"fillVertical":false}}}},"margin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"bottom":0,"right":0}}}}},"id1785913249190":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":4}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"height":1188,"left":0,"width":1830,"top":0}}}},"rowsItems":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"1786001356473":{"id":1786001356473},"1786001356476":{"id":1786001356476},"1786001356479":{"id":1786001356479}}}}}},"id1785913313944":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":11}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":1413,"height":987,"left":-688,"top":45}}}},"verticalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"horizontalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"fillLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"fillHorizontal":false,"fillVertical":false}}}},"margin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"bottom":0,"right":0}}}},"isVisible":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"block"}}},"cellItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"id":1786001356474,"width":100,"rowId":1786001356473}}}}},"id1785998950834":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":35}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":1413,"height":153,"left":-688,"top":1037}}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"block"}}},"cellItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"id":1786001356480,"width":100,"rowId":1786001356479}}}},"verticalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"horizontalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"fillLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"fillHorizontal":false,"fillVertical":false}}}},"margin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"bottom":0,"right":0}}}},"rowsItems":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"1786001356483":{"id":1786001356483}}}}},"isVisible":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}}},"id1785997029323":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":36}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":920,"height":375,"left":262,"top":7}}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"block"}}},"cellItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"id":1786001356484,"width":100,"rowId":1786001356483}}}},"isVisible":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"verticalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"horizontalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"fillLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"fillHorizontal":false,"fillVertical":false}}}},"margin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"bottom":0,"right":0}}}}},"id1785997644500":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":30}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":207,"height":199,"left":506,"top":826}}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"fixed"}}},"cellItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"id":1786001356477,"width":100,"rowId":1786001356476}}}},"isVisible":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"verticalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"horizontalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"fillLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"fillHorizontal":false,"fillVertical":false}}}},"margin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"bottom":0,"right":0}}}}}},"pageId":"id1785913149835","version":17.004,"id":"id1786002118890","relativePoint":{"left":231,"top":64.00000190734863}}