PagesStructures['id1779690236526'] = {"structures":[{"type":"page","id":"id1779690236526","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":true,"name":"Precision Art Grid (orig)","baseName":"Precision Art Grid","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":-555.8333740234375,"top":0},"size":{"width":1112,"height":5151}},"childElements":[{"type":"SectionElement","id":"id1779690236527","elementProperties":{"tagName":"SECTION","behaviours":null,"isLocked":false,"name":"Section 4","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":1395,"left":0,"width":1178,"top":0},"lastResizingSize":{"height":1395,"left":0,"width":1178,"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":{"mainColor":1,"variation":4,"opacity":1,"brightness":0},"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":"Precision Grid app section 1","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},"left":{"mainColor":1,"variation":4,"opacity":1,"brightness":0},"right":{"mainColor":1,"variation":4,"opacity":1,"brightness":0},"bottom":{"mainColor":1,"variation":4,"opacity":1,"brightness":0}},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"}},"metaData":{"position":{"left":-555.8333740234375,"top":184},"size":{"width":1112,"height":1395}},"childElements":[{"type":"ExternalAppembed_html_app1","id":"id1779690697013","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Embed Html 1","baseName":null,"templateID":"templateid1779690697014","templateName":null,"order":44,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":960,"height":611,"left":-480,"top":2},"lastResizingSize":{"width":960,"height":611,"left":-480,"top":2},"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, maximum-scale=1.0, user-scalable=no\">\n    <title>Master Studio Pro | Ray Naso Art</title>\n    <style>\n        :root { --accent: #d4af37; --bg: #0a0a0a; --panel: #1e1e1e; --text: #d0d0d0; --blue-gray: #3a4b5c; --lock: #c0392b; }\n        \n        * { box-sizing: border-box; }\n\n        body { \n            font-family: 'Segoe UI', system-ui, sans-serif; \n            background: var(--bg); \n            color: var(--text); \n            display: flex; \n            height: 100vh; \n            height: 100dvh; \n            margin: 0; \n            overflow: hidden; \n            width: 100%;\n        }\n        \n        /* Mobile Navigation Header */\n        #mobileNavHeader {\n            display: none;\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            height: 48px;\n            background: var(--panel);\n            border-bottom: 1px solid #333;\n            z-index: 3000;\n            align-items: center;\n            justify-content: space-between;\n            padding: 0 12px;\n        }\n\n        .menu-toggle-btn {\n            background: var(--accent);\n            color: #000;\n            border: none;\n            padding: 6px 12px;\n            border-radius: 4px;\n            font-weight: bold;\n            font-size: 11px;\n            text-transform: uppercase;\n            cursor: pointer;\n            width: auto;\n        }\n\n        .sidebar { \n            width: 280px; \n            background: var(--panel); \n            border-right: 1px solid #333; \n            display: flex; \n            flex-direction: column; \n            padding: 15px; \n            gap: 16px; \n            font-size: 11px; \n            overflow-y: auto; \n            overflow-x: hidden; \n            flex-shrink: 0; \n            transition: transform 0.3s ease, width 0.25s ease, padding 0.25s ease, opacity 0.25s ease; \n            height: 100%; \n            opacity: 1;\n            z-index: 3500;\n            -webkit-overflow-scrolling: touch; \n        }\n        \n        body.fullscreen .sidebar { width: 0; padding: 0; border: none; opacity: 0; pointer-events: none; }\n\n        #fsToast {\n            position: fixed;\n            bottom: 20px;\n            left: 50%;\n            transform: translateX(-50%);\n            background: rgba(0, 0, 0, 0.85);\n            color: var(--accent);\n            padding: 8px 16px;\n            border-radius: 20px;\n            font-size: 10px;\n            font-weight: bold;\n            letter-spacing: 1px;\n            z-index: 4000;\n            pointer-events: none;\n            border: 1px solid var(--accent);\n            opacity: 0;\n            transition: opacity 0.3s ease;\n            text-transform: uppercase;\n        }\n        body.fullscreen #fsToast { opacity: 1; }\n\n        #exitFS { position: fixed; top: 15px; right: 15px; z-index: 4000; padding: 8px 16px; background: var(--accent); color: #000; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.5); font-size: 11px; text-transform: uppercase; display: none; }\n        body.fullscreen #exitFS { display: block; }\n\n        .studio-header { cursor: pointer; border-bottom: 1px solid #333; padding-bottom: 8px; margin-bottom: 5px; flex-shrink: 0; }\n        h2 { font-size: 0.95rem; margin: 0; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; outline: none; }\n        \n        .section { display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid #2a2a2a; padding-bottom: 12px; flex-shrink: 0; }\n        label { text-transform: uppercase; font-weight: bold; color: #777; font-size: 9px; margin-top: 2px; display: block; }\n        \n        input, button { background: #2a2a2a; border: 1px solid #444; color: white; padding: 8px; border-radius: 3px; font-size: 11px; outline: none; width: 100%; height: auto; }\n        \n        input[type=\"range\"] { accent-color: var(--accent); cursor: pointer; height: 24px; touch-action: none; display: block; }\n\n        .stats-box { background: rgba(0,0,0,0.4); padding: 8px; border-radius: 4px; border: 1px solid #333; margin-top: 5px; font-family: monospace; color: var(--accent); text-align: center; }\n\n        .btn { cursor: pointer; font-weight: bold; text-transform: uppercase; border: none; transition: 0.2s; }\n        .btn-main { background: var(--accent); color: #000; padding: 12px; margin-top: 10px; flex-shrink: 0; }\n        .btn-sub { background: var(--blue-gray); color: #fff; padding: 8px; flex: 1; }\n        .btn-sub.active { background: var(--accent); color: #000; }\n        .btn-lock.active { background: var(--accent); color: #000; border: 1px solid #fff; }\n        .btn-auto-grid { background: #2e7d32; color: #fff; border: 1px solid #4caf50; padding: 8px; margin-top: 4px; cursor: pointer; font-weight: bold; text-transform: uppercase; }\n        .btn-auto-grid:hover { background: #388e3c; }\n        .btn-danger { background: #7a1f1d; color: #fff; border: 1px solid #9e2a2b; cursor: pointer; font-weight: bold; text-transform: uppercase; margin-top: 4px; }\n        .btn-danger:hover { background: #9e2a2b; }\n        \n        .btn-zoom {\n            background-color: #2a2a2a;\n            border: 1px solid #555;\n            color: #fff;\n            padding: 10px;\n            font-size: 12px;\n            font-weight: 700;\n            letter-spacing: 0.5px;\n            margin-top: 5px;\n            border-radius: 4px;\n        }\n        .btn-zoom:active { background-color: var(--accent); color: #000; border-color: var(--accent); }\n\n        #welcomeModal, #zoomModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 5000; display: flex; justify-content: center; align-items: center; }\n        #zoomModal { display: none; z-index: 6000; }\n        \n        .modal-content { background: var(--panel); padding: 25px; border: 1px solid var(--accent); border-radius: 8px; text-align: center; max-width: 400px; width: 85%; }\n        .zoom-modal-content { background: var(--panel); padding: 20px; border: 1px solid var(--accent); border-radius: 8px; text-align: center; max-width: 500px; width: 90%; }\n\n        #viewport { \n            flex-grow: 1; \n            display: flex; \n            justify-content: center; \n            align-items: center; \n            background: #111; \n            position: relative; \n            overflow: auto; \n            cursor: crosshair; \n            height: 100%;\n            touch-action: none; \n            -webkit-overflow-scrolling: auto;\n        }\n        \n        canvas { \n            background: #fff; \n            box-shadow: 0 0 60px rgba(0,0,0,0.8); \n            margin: auto; \n            max-width: 95%; \n            max-height: 95%;\n            object-fit: contain;\n            will-change: filter;\n        }\n\n        #zoomCanvas { background: #fff; border: 1px solid #444; max-width: 100%; height: auto; }\n\n        @media (max-width: 768px) {\n            body { flex-direction: column; }\n\n            #mobileNavHeader { display: flex; }\n\n            .sidebar {\n                position: fixed;\n                top: 48px;\n                left: 0;\n                bottom: 0;\n                width: 85%;\n                max-width: 320px;\n                transform: translateX(-100%);\n                box-shadow: 5px 0 25px rgba(0,0,0,0.8);\n                padding-bottom: 30px;\n            }\n\n            .sidebar.mobile-open {\n                transform: translateX(0);\n            }\n\n            #viewport {\n                margin-top: 48px;\n                height: calc(100dvh - 48px);\n            }\n\n            input, button, .btn-sub, .btn-auto-grid {\n                min-height: 38px;\n            }\n        }\n    </style>\n</head>\n<body>\n\n<div id=\"mobileNavHeader\">\n    <button class=\"menu-toggle-btn\" onclick=\"toggleMobileMenu()\">Controls Menu</button>\n    <span style=\"font-size: 10px; color: var(--accent); font-weight: bold;\">PRECISION GRID</span>\n    <button class=\"menu-toggle-btn\" style=\"background: var(--blue-gray); color:#fff;\" onclick=\"toggleFullScreen()\">Full Screen</button>\n</div>\n\n<button id=\"exitFS\" onclick=\"toggleFullScreen()\">Minimize Menu</button>\n<div id=\"fsToast\">Double Tap Canvas to return Menu</div>\n\n<div id=\"welcomeModal\">\n    <div class=\"modal-content\">\n        <h1 style=\"color:var(--accent); font-size: 1.2rem; margin-top:0;\">RAY NASO PRECISION ART GRID</h1>\n        <p style=\"font-size: 13px; color: #bbb; line-height: 1.5;\">Studio Edition Ready.<br><br>Click \"Maximize View\" to fill the screen instantly. Double-tap to exit.</p>\n        <button class=\"btn btn-main\" style=\"width:100%\" onclick=\"closeWelcomeModal()\">Enter Studio</button>\n    </div>\n</div>\n\n<div id=\"zoomModal\">\n    <div class=\"zoom-modal-content\">\n        <h2 id=\"zoomTitle\" style=\"margin-top: 0; margin-bottom: 15px;\">Detailed View</h2>\n        <canvas id=\"zoomCanvas\" width=\"450\" height=\"450\"></canvas>\n        <div style=\"display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 15px;\">\n            <label style=\"font-size: 10px;\">Sub-grid divisions</label>\n            <input type=\"number\" id=\"subGridDivs\" value=\"5\" min=\"2\" max=\"10\" style=\"width: 50px; text-align: center;\" onchange=\"updateZoomedGrid()\">\n            <button class=\"btn btn-sub\" onclick=\"closeZoomModal()\" style=\"padding: 6px 15px;\">Close View</button>\n        </div>\n    </div>\n</div>\n\n<div class=\"sidebar\" id=\"sidebarMenu\">\n    <div class=\"studio-header\">\n        <h2 id=\"displayTitle\" contenteditable=\"true\" spellcheck=\"false\" oninput=\"saveAppState()\">Ray Naso Precision Art Grid</h2>\n        <span style=\"font-size:8px; color:#555;\">CLICK TO EDIT TITLE</span>\n    </div>\n    \n    <div class=\"section\">\n        <label>1. Image Source</label>\n        <input type=\"file\" id=\"upload\" accept=\"image/*\">\n        <button class=\"btn btn-danger\" onclick=\"factoryReset()\">Factory Reset Image</button>\n    </div>\n\n    <div class=\"section\">\n        <label>2. Canvas & Grid Setup</label>\n        <div style=\"display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px;\">\n            <div><label style=\"font-size:8px;\">WIDTH</label><input type=\"number\" id=\"canvW\" value=\"20\" oninput=\"appSettingChanged()\"></div>\n            <div><label style=\"font-size:8px;\">HEIGHT</label><input type=\"number\" id=\"canvH\" value=\"16\" oninput=\"appSettingChanged()\"></div>\n            <div><label style=\"font-size:8px;\">COLUMNS</label><input type=\"number\" id=\"cols\" value=\"10\" oninput=\"appSettingChanged()\"></div>\n        </div>\n        <button class=\"btn-auto-grid\" onclick=\"autoCalculateGrid()\">Auto Grid Image Ratio</button>\n        <div class=\"stats-box\" id=\"gridReadout\">GRID: -- x --</div>\n    </div>\n\n    <div class=\"section\">\n        <label>3. Appearance</label>\n        <label>Thickness</label>\n        <input type=\"range\" id=\"thickness\" min=\"1\" max=\"5\" step=\"1\" value=\"1\" oninput=\"appSettingChanged()\">\n        <label>Grid Color</label>\n        <input type=\"color\" id=\"gridColor\" value=\"#000000\" oninput=\"appSettingChanged()\" style=\"height:36px; padding:0; cursor:pointer; border:none;\">\n    </div>\n\n    <div class=\"section\">\n        <label>4. Zoom & Panning</label>\n        <input type=\"range\" id=\"zoom\" min=\"0.1\" max=\"4\" step=\"0.01\" value=\"1\" oninput=\"appSettingChanged()\">\n        <div style=\"display:flex; flex-direction:column; gap:6px; margin-top:5px;\">\n            <div style=\"display:flex; gap:6px;\">\n                <button class=\"btn btn-sub\" style=\"background: var(--blue-gray);\" onclick=\"autoCenterAndFit(); saveAppState();\">Auto Fit</button>\n                <button id=\"lockBtn\" class=\"btn btn-sub\" onclick=\"toggleLock()\">Lock Pan</button>\n                <button class=\"btn btn-sub\" onclick=\"resetAll(); saveAppState();\">Reset</button>\n            </div>\n            <button id=\"mobileZoomBtn\" class=\"btn-zoom btn\" onclick=\"toggleFullScreen(); closeMobileMenu();\">Maximize View</button>\n        </div>\n    </div>\n\n    <div class=\"section\">\n        <label>5. Artistic Filters</label>\n        <div style=\"display:flex; gap:5px;\">\n            <button id=\"bwBtn\" class=\"btn btn-sub\" onclick=\"toggleFilter('grayscale')\">B&W</button>\n            <button id=\"thirdsBtn\" class=\"btn btn-sub\" onclick=\"toggleFilter('thirds')\">3rds</button>\n        </div>\n        <label>The Squint (Blur)</label>\n        <input type=\"range\" id=\"blur\" min=\"0\" max=\"15\" value=\"0\" oninput=\"appSettingChanged()\">\n        <div style=\"display:flex; gap:5px;\">\n            <button class=\"btn btn-sub\" onclick=\"toggleFlip('h')\">Flip H</button>\n            <button class=\"btn btn-sub\" onclick=\"toggleFlip('v')\">Flip V</button>\n        </div>\n    </div>\n\n    <button class=\"btn btn-main\" onclick=\"downloadImage()\">Save Reference</button>\n</div>\n\n<div id=\"viewport\">\n    <canvas id=\"mainCanvas\"></canvas>\n</div>\n\n<script>\n    const canvas = document.getElementById('mainCanvas');\n    const ctx = canvas.getContext('2d');\n    let img = new Image();\n    let moveX = 0, moveY = 0, flipH = 1, flipV = 1, isLocked = false;\n    let isDragging = false, startX, startY;\n    let filters = { grayscale: false, thirds: false };\n    let activeCol = 0, activeRow = 0;\n\n    const DEFAULT_LIGHTHOUSE_URL = \"https://storage.googleapis.com/production-homestead-v1-0-0/170/2018170/S9EXuCtN/e078bfaf032240608319f111a5c9d078\";\n\n    window.addEventListener('DOMContentLoaded', () => {\n        img.crossOrigin = \"anonymous\";\n        \n        const savedImage = localStorage.getItem('precision_img_src');\n        if (savedImage) {\n            img.src = savedImage;\n        } else {\n            img.src = DEFAULT_LIGHTHOUSE_URL;\n        }\n\n        const returningUser = localStorage.getItem('precision_returning_session');\n        if (returningUser) {\n            document.getElementById('welcomeModal').style.display = 'none';\n        }\n    });\n\n    img.onload = function() {\n        if (!localStorage.getItem('precision_app_state')) {\n            resetAll();\n            autoCenterAndFit();\n        } else {\n            loadAppState();\n        }\n    };\n\n    function toggleMobileMenu() {\n        const sidebar = document.getElementById('sidebarMenu');\n        sidebar.classList.toggle('mobile-open');\n    }\n\n    function closeMobileMenu() {\n        const sidebar = document.getElementById('sidebarMenu');\n        sidebar.classList.remove('mobile-open');\n    }\n\n    function factoryReset() {\n        localStorage.removeItem('precision_img_src');\n        localStorage.removeItem('precision_app_state');\n        localStorage.removeItem('precision_returning_session');\n        window.location.reload();\n    }\n\n    function closeWelcomeModal() {\n        document.getElementById('welcomeModal').style.display = 'none';\n        localStorage.setItem('precision_returning_session', 'true');\n    }\n\n    function autoCalculateGrid() {\n        if (!img.width || !img.height) return;\n        \n        const imgRatio = img.width / img.height;\n        let bestW = 20, bestH = 16;\n\n        if (imgRatio >= 1) { // Landscape orientation\n            bestW = 20;\n            bestH = Math.round(20 / imgRatio);\n            if (bestH < 10) bestH = 10;\n        } else { // Portrait orientation\n            bestH = 20;\n            bestW = Math.round(20 * imgRatio);\n            if (bestW < 10) bestW = 10;\n        }\n\n        document.getElementById('canvW').value = bestW;\n        document.getElementById('canvH').value = bestH;\n        document.getElementById('cols').value = 10;\n        \n        autoCenterAndFit();\n        saveAppState();\n    }\n\n    function saveAppState() {\n        const state = {\n            title: document.getElementById('displayTitle').innerText,\n            canvW: document.getElementById('canvW').value,\n            canvH: document.getElementById('canvH').value,\n            cols: document.getElementById('cols').value,\n            thickness: document.getElementById('thickness').value,\n            gridColor: document.getElementById('gridColor').value,\n            zoom: document.getElementById('zoom').value,\n            blur: document.getElementById('blur').value,\n            moveX: moveX,\n            moveY: moveY,\n            flipH: flipH,\n            flipV: flipV,\n            grayscale: filters.grayscale,\n            thirds: filters.thirds\n        };\n        localStorage.setItem('precision_app_state', JSON.stringify(state));\n    }\n\n    function loadAppState() {\n        const savedState = localStorage.getItem('precision_app_state');\n        if (!savedState) { drawAll(); return; }\n        \n        const state = JSON.parse(savedState);\n        \n        document.getElementById('displayTitle').innerText = state.title || \"Ray Naso Precision Art Grid\";\n        document.getElementById('canvW').value = state.canvW;\n        document.getElementById('canvH').value = state.canvH;\n        document.getElementById('cols').value = state.cols;\n        document.getElementById('thickness').value = state.thickness;\n        document.getElementById('gridColor').value = state.gridColor;\n        document.getElementById('zoom').value = state.zoom;\n        document.getElementById('blur').value = state.blur;\n        \n        moveX = state.moveX || 0;\n        moveY = state.moveY || 0;\n        flipH = state.flipH || 1;\n        flipV = state.flipV || 1;\n        \n        filters.grayscale = state.grayscale || false;\n        filters.thirds = state.thirds || false;\n\n        document.getElementById('bwBtn').classList.toggle('active', filters.grayscale);\n        document.getElementById('thirdsBtn').classList.toggle('active', filters.thirds);\n        \n        drawAll();\n    }\n\n    function appSettingChanged() {\n        drawAll();\n        saveAppState();\n    }\n\n    function toggleFullScreen() {\n        document.body.classList.toggle('fullscreen');\n        closeMobileMenu();\n        setTimeout(drawAll, 260);\n    }\n\n    function toggleLock() {\n        isLocked = !isLocked;\n        document.getElementById('lockBtn').classList.toggle('active');\n        document.getElementById('viewport').style.cursor = isLocked ? \"not-allowed\" : \"crosshair\";\n    }\n\n    document.getElementById('upload').addEventListener('change', (e) => {\n        if (!e.target.files || e.target.files.length === 0) return;\n\n        const reader = new FileReader();\n        reader.onload = (ev) => {\n            const newImg = new Image();\n            newImg.crossOrigin = \"anonymous\";\n            \n            newImg.onload = () => { \n                img = newImg;\n                localStorage.removeItem('precision_app_state'); \n                resetAll(); \n                autoCalculateGrid();\n                \n                try {\n                    localStorage.setItem('precision_img_src', ev.target.result);\n                } catch(err) {\n                    console.warn(\"Image exceeds local storage limit.\");\n                }\n                saveAppState();\n                closeMobileMenu();\n            };\n            newImg.src = ev.target.result;\n        };\n        reader.readAsDataURL(e.target.files[0]);\n    });\n\n    const vp = document.getElementById('viewport');\n    function startDrag(clientX, clientY) { if(isLocked) return; isDragging = true; startX = clientX - moveX; startY = clientY - moveY; }\n    function moveDrag(clientX, clientY) { if(!isDragging || isLocked) return; moveX = clientX - startX; moveY = clientY - startY; drawAll(); }\n    \n    vp.addEventListener('mousedown', (e) => startDrag(e.clientX, e.clientY));\n    window.addEventListener('mousemove', (e) => moveDrag(e.clientX, e.clientY));\n    window.addEventListener('mouseup', () => { if(isDragging) { isDragging = false; saveAppState(); } });\n\n    vp.addEventListener('touchstart', (e) => {\n        if (e.touches.length === 1) {\n            if(!isLocked) e.preventDefault(); \n            startDrag(e.touches[0].clientX, e.touches[0].clientY);\n        }\n    }, { passive: false });\n\n    vp.addEventListener('touchmove', (e) => {\n        if (e.touches.length === 1) {\n            if(!isLocked) e.preventDefault();\n            moveDrag(e.touches[0].clientX, e.touches[0].clientY);\n        }\n    }, { passive: false });\n\n    vp.addEventListener('touchend', () => { if(isDragging) { isDragging = false; saveAppState(); } });\n\n    let lastTap = 0;\n    vp.addEventListener('touchend', (e) => {\n        const currentTime = new Date().getTime();\n        const tapLength = currentTime - lastTap;\n        \n        if (tapLength < 280 && tapLength > 0) {\n            e.preventDefault();\n            \n            if (document.body.classList.contains('fullscreen')) {\n                toggleFullScreen();\n            } else {\n                const rect = canvas.getBoundingClientRect();\n                const x = e.changedTouches[0].clientX - rect.left;\n                const y = e.changedTouches[0].clientY - rect.top;\n                const padVal = document.body.classList.contains('fullscreen') ? 40 : 60;\n                \n                const cw = parseFloat(document.getElementById('canvW').value) || 1;\n                const ch = parseFloat(document.getElementById('canvH').value) || 1;\n                const colInput = document.getElementById('cols').value;\n                const cols = (colInput === \"\" || parseInt(colInput) === 0) ? 0 : parseInt(colInput);\n                \n                if (cols === 0) return; \n\n                const scale = Math.min((vp.offsetWidth - padVal * 2.2) / cw, (vp.offsetHeight - padVal * 2.2) / ch);\n                const dW = cw * scale, dH = ch * scale;\n                const step = dW / cols;\n\n                if (x >= padVal && x <= padVal + dW && y >= padVal && y <= padVal + dH) {\n                    activeCol = Math.floor((x - padVal) / step);\n                    activeRow = Math.floor((y - padVal) / step);\n                    showZoomedGrid();\n                }\n            }\n        }\n        lastTap = currentTime;\n    });\n\n    vp.addEventListener('dblclick', (e) => {\n        if (document.body.classList.contains('fullscreen')) {\n            toggleFullScreen();\n            return;\n        }\n        const rect = canvas.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n        const padVal = 60;\n        const cw = parseFloat(document.getElementById('canvW').value) || 1;\n        const ch = parseFloat(document.getElementById('canvH').value) || 1;\n        const colInput = document.getElementById('cols').value;\n        const cols = (colInput === \"\" || parseInt(colInput) === 0) ? 0 : parseInt(colInput);\n        \n        if (cols === 0) return; \n\n        const scale = Math.min((vp.offsetWidth - padVal * 2.2) / cw, (vp.offsetHeight - padVal * 2.2) / ch);\n        const dW = cw * scale, dH = ch * scale;\n        const step = dW / cols;\n\n        if (x >= padVal && x <= padVal + dW && y >= padVal && y <= padVal + dH) {\n            activeCol = Math.floor((x - padVal) / step);\n            activeRow = Math.floor((y - padVal) / step);\n            showZoomedGrid();\n        }\n    });\n\n    function showZoomedGrid() {\n        const letter = String.fromCharCode(65 + activeCol);\n        document.getElementById('zoomTitle').innerText = `Detailed View: Square ${letter}${activeRow + 1}`;\n        document.getElementById('zoomModal').style.display = 'flex';\n        drawZoomedCanvas();\n    }\n\n    function closeZoomModal() { document.getElementById('zoomModal').style.display = 'none'; }\n    function updateZoomedGrid() { drawZoomedCanvas(); }\n\n    function drawZoomedCanvas() {\n        const zoomCanvas = document.getElementById('zoomCanvas');\n        const zCtx = zoomCanvas.getContext('2d');\n        const padVal = document.body.classList.contains('fullscreen') ? 40 : 60;\n        \n        const cw = parseFloat(document.getElementById('canvW').value) || 1;\n        const ch = parseFloat(document.getElementById('canvH').value) || 1;\n        const colInput = document.getElementById('cols').value;\n        const cols = (colInput === \"\" || parseInt(colInput) === 0) ? 0 : parseInt(colInput);\n        \n        if (cols === 0) return;\n\n        const scale = Math.min((vp.offsetWidth - padVal * 2.2) / cw, (vp.offsetHeight - padVal * 2.2) / ch);\n        const dW = cw * scale, dH = ch * scale;\n        const step = dW / cols;\n\n        const tempCanvas = document.createElement('canvas');\n        tempCanvas.width = canvas.width;\n        tempCanvas.height = canvas.height;\n        const tempCtx = tempCanvas.getContext('2d');\n\n        tempCtx.fillStyle = \"#111\"; tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);\n        tempCtx.save();\n        tempCtx.beginPath(); tempCtx.rect(padVal, padVal, dW, dH); tempCtx.clip();\n\n        const centerX = padVal + (dW / 2) + moveX, centerY = padVal + (dH / 2) + moveY;\n        tempCtx.translate(centerX, centerY); tempCtx.scale(flipH, flipV); tempCtx.translate(-centerX, -centerY);\n\n        const imgRatio = img.width / img.height, canvasRatio = cw / ch;\n        let iW = (imgRatio > canvasRatio) ? dW : dH * imgRatio, iH = (imgRatio > canvasRatio) ? dW / imgRatio : dH;\n        const zoomVal = parseFloat(document.getElementById('zoom').value);\n\n        tempCtx.drawImage(img, centerX - (iW * zoomVal)/2, centerY - (iH * zoomVal)/2, iW * zoomVal, iH * zoomVal);\n        \n        if (filters.grayscale) {\n            try {\n                let imgData = tempCtx.getImageData(padVal, padVal, dW, dH);\n                for (let i = 0; i < imgData.data.length; i += 4) {\n                    let gray = 0.3 * imgData.data[i] + 0.59 * imgData.data[i + 1] + 0.11 * imgData.data[i + 2];\n                    imgData.data[i] = imgData.data[i + 1] = imgData.data[i + 2] = gray;\n                }\n                tempCtx.putImageData(imgData, padVal, padVal);\n            } catch(e) {}\n        }\n        tempCtx.restore();\n\n        const sX = padVal + activeCol * step;\n        const sY = padVal + activeRow * step;\n\n        zCtx.fillStyle = \"#fff\"; zCtx.fillRect(0, 0, zoomCanvas.width, zoomCanvas.height);\n        zCtx.drawImage(tempCanvas, sX, sY, step, step, 0, 0, zoomCanvas.width, zoomCanvas.height);\n\n        const divisions = parseInt(document.getElementById('subGridDivs').value) || 5;\n        const zStep = zoomCanvas.width / divisions;\n        zCtx.strokeStyle = document.getElementById('gridColor').value;\n        zCtx.lineWidth = document.getElementById('thickness').value || 1;\n\n        for (let i = 0; i <= divisions; i++) {\n            let pos = i * zStep;\n            zCtx.beginPath(); zCtx.moveTo(pos, 0); zCtx.lineTo(pos, zoomCanvas.height); zCtx.stroke();\n            zCtx.beginPath(); zCtx.moveTo(0, pos); zCtx.lineTo(zoomCanvas.width, pos); zCtx.stroke();\n        }\n    }\n\n    function drawAll() {\n        if (!img.src) return;\n        \n        const colInput = document.getElementById('cols').value;\n        const cols = (colInput === \"\" || parseInt(colInput) === 0) ? 0 : parseInt(colInput);\n        \n        const cw = parseFloat(document.getElementById('canvW').value) || 20;\n        const ch = parseFloat(document.getElementById('canvH').value) || 16;\n        const zoom = parseFloat(document.getElementById('zoom').value);\n        const pad = document.body.classList.contains('fullscreen') ? 40 : 60;\n        const rowCount = cols > 0 ? Math.ceil(ch / (cw / cols)) : 0;\n        \n        if (cols === 0) {\n            document.getElementById('gridReadout').innerText = `GRID: OFF`;\n        } else {\n            document.getElementById('gridReadout').innerText = `GRID: ${cols} x ${rowCount}`;\n        }\n\n        let vw = vp.offsetWidth || 800;\n        let vh = vp.offsetHeight || 600;\n        const scale = Math.min((vw - pad * 2.2) / cw, (vh - pad * 2.2) / ch);\n        const dW = cw * scale, dH = ch * scale;\n\n        canvas.width = dW + pad * 2; canvas.height = dH + pad * 2;\n\n        ctx.fillStyle = \"#111\"; ctx.fillRect(0, 0, canvas.width, canvas.height);\n        \n        const blur = document.getElementById('blur').value;\n        canvas.style.filter = blur > 0 ? `blur(${blur}px)` : 'none';\n        canvas.style.webkitFilter = blur > 0 ? `blur(${blur}px)` : 'none';\n\n        ctx.save();\n        ctx.beginPath(); ctx.rect(pad, pad, dW, dH); ctx.clip();\n\n        const cX = pad + dW / 2 + moveX, cY = pad + dH / 2 + moveY;\n        ctx.translate(cX, cY); ctx.scale(flipH, flipV); ctx.translate(-cX, -cY);\n\n        const ratio = img.width / img.height, cRatio = cw / ch;\n        let iW = (ratio > cRatio) ? dW : dH * ratio, iH = (ratio > cRatio) ? dW / ratio : dH;\n        ctx.drawImage(img, cX - (iW * zoom) / 2, cY - (iH * zoom) / 2, iW * zoom, iH * zoom);\n\n        if (filters.grayscale) {\n            try {\n                let d = ctx.getImageData(pad, pad, dW, dH);\n                for (let i = 0; i < d.data.length; i += 4) {\n                    let g = 0.3 * d.data[i] + 0.59 * d.data[i+1] + 0.11 * d.data[i+2];\n                    d.data[i] = d.data[i+1] = d.data[i+2] = g;\n                }\n                ctx.putImageData(d, pad, pad);\n            } catch(e) {}\n        }\n        ctx.restore();\n\n        if (cols > 0) {\n            const step = dW / cols;\n            ctx.strokeStyle = document.getElementById('gridColor').value;\n            ctx.lineWidth = document.getElementById('thickness').value;\n            \n            for (let i = 0; i <= cols; i++) {\n                let x = pad + i * step;\n                ctx.beginPath(); ctx.moveTo(x, pad); ctx.lineTo(x, pad + dH); ctx.stroke();\n            }\n            for (let j = 0; j <= rowCount; j++) {\n                let y = pad + j * step;\n                if (y <= pad + dH + 1) {\n                    ctx.beginPath(); ctx.moveTo(pad, y); ctx.lineTo(pad + dW, y); ctx.stroke();\n                }\n            }\n\n            ctx.fillStyle = \"#fff\"; ctx.font = \"bold 14px sans-serif\"; ctx.textAlign = \"center\";\n            for (let i = 0; i < cols; i++) ctx.fillText(String.fromCharCode(65+i), pad + i*step + step/2, pad - 12);\n            ctx.textAlign = \"right\"; ctx.textBaseline = \"middle\";\n            for (let j = 0; j < rowCount; j++) ctx.fillText(j+1, pad - 12, pad + j*step + step/2);\n        }\n\n        if (filters.thirds) {\n            ctx.strokeStyle = \"red\"; ctx.lineWidth = 1; ctx.setLineDash([5, 5]);\n            for(let t=1; t<=2; t++) {\n                ctx.beginPath(); ctx.moveTo(pad + (dW/3)*t, pad); ctx.lineTo(pad + (dW/3)*t, pad+dH); ctx.stroke();\n                ctx.beginPath(); ctx.moveTo(pad, pad + (dH/3)*t); ctx.lineTo(pad+dW, pad + (dH/3)*t); ctx.stroke();\n            }\n            ctx.setLineDash([]);\n        }\n    }\n\n    function toggleFlip(dir) { \n        if(dir === 'h') flipH *= -1; else flipV *= -1; \n        appSettingChanged(); \n    }\n    \n    function toggleFilter(f) { \n        filters[f] = !filters[f]; \n        document.getElementById(f === 'grayscale' ? 'bwBtn' : 'thirdsBtn').classList.toggle('active');\n        appSettingChanged(); \n    }\n    \n    function resetAll() { \n        moveX = 0; moveY = 0; flipH = 1; flipV = 1; filters.grayscale = false; filters.thirds = false;\n        document.getElementById('zoom').value = 1; document.getElementById('blur').value = 0;\n        document.querySelectorAll('.active').forEach(b => b.classList.remove('active'));\n        drawAll(); \n    }\n    \n    function autoCenterAndFit() {\n        if (!img.width || !img.height) return;\n        \n        moveX = 0;\n        moveY = 0;\n\n        const cw = parseFloat(document.getElementById('canvW').value) || 20;\n        const ch = parseFloat(document.getElementById('canvH').value) || 16;\n\n        const imgRatio = img.width / img.height;\n        const canvRatio = cw / ch;\n\n        let requiredZoom = 1;\n        if (imgRatio > canvRatio) {\n            requiredZoom = imgRatio / canvRatio;\n        } else {\n            requiredZoom = canvRatio / imgRatio;\n        }\n\n        document.getElementById('zoom').value = requiredZoom.toFixed(2);\n        drawAll();\n    }\n    \n    function downloadImage() {\n        const link = document.createElement('a');\n        link.download = 'RayNaso_Reference.jpg';\n        link.href = canvas.toDataURL('image/jpeg', 0.9);\n        link.click();\n    }\n    \n    window.addEventListener('resize', drawAll);\n</script>\n</body>\n</html>","embed_html_app1headerHtml":""},"metaData":{"position":{"left":-480.0000305175781,"top":186},"size":{"width":960,"height":611}}},{"type":"image","id":"id1779724153421","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Image 6","baseName":null,"templateID":"templateid1779724153422","templateName":null,"order":45,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":102,"height":143,"left":-464,"top":642},"lastResizingSize":{"width":102,"height":143,"left":-464,"top":642},"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":null,"openInNewTab":false,"openInTopWindow":false,"shouldUnderlineChildren":false,"templateOpener":false,"popupType":"DefaultPopup","imageUrl":{"id":154969090,"imagePath":"https://storage.googleapis.com/production-homestead-v1-0-0/170/2018170/S9EXuCtN/e078bfaf032240608319f111a5c9d078","storageServer":0,"imageWidth":928,"imageHeight":1152},"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":-464.0000305175781,"top":826},"size":{"width":102,"height":143}}},{"type":"freeText","id":"id1780951852766","elementProperties":{"tagName":"H3","behaviours":null,"isLocked":false,"name":"Text 4","baseName":null,"templateID":"templateid1780951852767","templateName":null,"order":46,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":215,"height":34,"left":45,"top":593},"lastResizingSize":{"width":215,"height":34,"left":45,"top":593},"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\"><span style=\"font-size:14px;\">Copyright © All Rights Reserved</span></span><br></div>","verticalAlignment":"top"},"metaData":{"position":{"left":45,"top":777},"size":{"width":215,"height":34}}},{"type":"image","id":"id1781054650059","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Image 8","baseName":null,"templateID":"templateid1781054650060","templateName":null,"order":47,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":200,"height":109,"left":-327,"top":641},"lastResizingSize":{"width":200,"height":109,"left":-327,"top":641},"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":"Asset","url":{"id":4694749,"title":"Basic Shapes.png","description":"","fileName":"34e3672de41247b58d5feeab4ae593d8/Basic Shapes.png","fileType":"png","assetType":5,"category":23,"ownerID":28713746,"storageServer":6,"albumID":null,"deleted":null}},"openInNewTab":true,"openInTopWindow":false,"shouldUnderlineChildren":false,"templateOpener":false,"popupType":"DefaultPopup","imageUrl":{"id":154986967,"imagePath":"https://storage.googleapis.com/production-homestead-v1-0-0/170/2018170/S9EXuCtN/c8a9c140738b4700b77edef9e02af3f8","storageServer":0,"imageWidth":1408,"imageHeight":768},"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":-327.0000305175781,"top":825},"size":{"width":200,"height":109}}},{"type":"freeText","id":"id1781055492456","elementProperties":{"tagName":"H3","behaviours":null,"isLocked":false,"name":"Text 5","baseName":null,"templateID":"templateid1781055492457","templateName":null,"order":48,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":149,"height":29,"left":-303,"top":756},"lastResizingSize":{"width":149,"height":29,"left":-303,"top":756},"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 style=\"color:#4a9ee8;\"><u><a href=\"https://storage.googleapis.com/wzukusers/user-28713746/documents/34e3672de41247b58d5feeab4ae593d8/Basic%20Shapes.png\" data-attached-link=\"{&quot;type&quot;:&quot;Asset&quot;,&quot;url&quot;:{&quot;id&quot;:4694749,&quot;title&quot;:&quot;Basic Shapes.png&quot;,&quot;description&quot;:&quot;&quot;,&quot;fileName&quot;:&quot;34e3672de41247b58d5feeab4ae593d8/Basic Shapes.png&quot;,&quot;fileType&quot;:&quot;png&quot;,&quot;assetType&quot;:5,&quot;category&quot;:23,&quot;ownerID&quot;:28713746,&quot;storageServer&quot;:6,&quot;albumID&quot;:null,&quot;deleted&quot;:null},&quot;title&quot;:&quot;Basic Shapes.png&quot;,&quot;target&quot;:&quot;_blank&quot;}\" class=\"wz-link\" target=\"_blank\"><span style=\"font-size:12px;\">Download Shapes image</span></a></u></span></div>","verticalAlignment":"top"},"metaData":{"position":{"left":-303.0000305175781,"top":940},"size":{"width":149,"height":29}}},{"type":"image","id":"id1782245491912","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Image 3","baseName":null,"templateID":"templateid1782245491914","templateName":null,"order":49,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":253,"height":156,"left":-127,"top":1107},"lastResizingSize":{"width":253,"height":156,"left":-127,"top":1107},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":3,"left":3,"spread":0,"blur":6,"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":"Pages","url":"id1782244239437"},"openInNewTab":true,"openInTopWindow":false,"shouldUnderlineChildren":false,"templateOpener":false,"popupType":"DefaultPopup","imageUrl":{"id":155010742,"imagePath":"https://storage.googleapis.com/production-homestead-v1-0-0/170/2018170/S9EXuCtN/84d421f84d464ff3b3144b5dc07f2d7e","storageServer":0,"imageWidth":1408,"imageHeight":768},"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":-127,"top":1291},"size":{"width":253,"height":156}}},{"type":"freeText","id":"id1782669056272","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Text 6","baseName":null,"templateID":"templateid1782669056273","templateName":null,"order":50,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":321,"height":150,"left":159,"top":652},"lastResizingSize":{"width":321,"height":150,"left":159,"top":652},"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 class=\"theme-text-color-0-0\"><strong>Best Experienced on iPad, Tablet, or Desktop</strong><!--{cke_protected}{C}%3C!%2D%2DTgQPHd%7C%7C%5B%5D%2D%2D%3E--><br>\"Because serious art requires seeing the fine details, the Precision Art Grid is engineered specifically for larger studio screens. Put down the tiny phone, open this page on your tablet or computer, and let’s build a perfect layout together.\"</span><span class=\"theme-text-color-0-0\"></span>​​<br></div>","verticalAlignment":"top"},"metaData":{"position":{"left":159,"top":836},"size":{"width":321,"height":150}}},{"type":"SkinButtonElement","id":"id1785332745257","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Button 10","baseName":null,"templateID":"templateid1783525757618","templateName":null,"order":52,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{"categoryId":288},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":191,"height":40,"left":-98,"top":1092},"lastResizingSize":{"width":191,"height":40,"left":-98,"top":1092},"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"},"dataInfo":null,"startSelected":false,"urlAddress":{"type":"None","url":null},"openInNewTab":false,"openInTopWindow":false,"shouldUnderlineChildren":false,"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"skinBinding":{"skinName":"id1785332745258","index":0,"type":"Inline","hierarchy":{"structures":[{"type":"skinHierarchyBox","id":"id1433401989076","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Skin Element 3","baseName":null,"templateID":"templateid1433401989080","templateName":null,"order":0,"customStates":null,"isElementWasEditedInMode":false,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":1783525757608,"styleBindingFields":{"backgroundColor":{"type":1,"properties":{"backgroundColor":{"boundToProperty":true,"fields":{}}}},"borderColor0":{"type":1,"properties":{"borderColor":{"boundToProperty":false,"fields":{"left":true,"top":true,"bottom":true,"right":true}}}},"borderWidth0":{"type":1,"properties":{"borderWidth":{"boundToProperty":false,"fields":{"left":true,"top":true,"bottom":true,"right":true}}}},"padding":{"type":1,"properties":{"padding":{"boundToProperty":true,"fields":{}}}},"roundness":{"type":1,"properties":{"roundness":{"boundToProperty":true,"fields":{}}}},"shadow":{"type":1,"properties":{"shadow":{"boundToProperty":true,"fields":{}}}},"glow":{"type":1,"properties":{"glow":{"boundToProperty":true,"fields":{}}}},"innerShadow":{"type":1,"properties":{"innerShadow":{"boundToProperty":true,"fields":{}}}},"innerGlow":{"type":1,"properties":{"innerGlow":{"boundToProperty":true,"fields":{}}}}},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":160,"height":56,"top":0,"left":0},"lastResizingSize":{"width":160,"height":56,"top":0,"left":0},"fieldsMap":{},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"imageOpacity":1,"backgroundOverlay":"transparent","overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"startSelected":false,"openInNewTab":false,"openInTopWindow":false,"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","isVisible":true,"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"},"borderColor":{"top":{"mainColor":2,"variation":3,"opacity":1,"brightness":0},"left":{"mainColor":2,"variation":3,"opacity":1,"brightness":0},"bottom":{"mainColor":2,"variation":3,"opacity":1,"brightness":0},"right":{"mainColor":2,"variation":3,"opacity":1,"brightness":0}},"borderWidth":{"top":1,"left":1,"bottom":1,"right":1},"backgroundColor":"transparent","padding":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":50,"topRight":50,"bottomLeft":50,"bottomRight":50},"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"rgba(0,0,0,0.1)"},"innerGlow":{"spread":0,"blur":0,"color":"black"}},"metaData":{"position":{"left":-80,"top":0},"size":{"width":160,"height":56}},"childElements":[{"type":"freeText","id":"id1433401989079","elementProperties":{"tagName":"H3","behaviours":null,"isLocked":false,"name":"Text 1","baseName":null,"templateID":"templateid1433401989080","templateName":null,"order":1,"customStates":null,"isElementWasEditedInMode":false,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":1783525757608,"styleBindingFields":{"formattedText":{"type":2,"properties":{"formattedText":{"boundToProperty":true,"fields":{}}}},"verticalAlignment":{"type":2,"properties":{"verticalAlignment":{"boundToProperty":true,"fields":{}}}},"fontSize1":{"type":1,"properties":{"fontSize":{"boundToProperty":true,"fields":{}}}},"fontColor1":{"type":1,"properties":{"fontColor":{"boundToProperty":true,"fields":{}}}},"font1":{"type":1,"properties":{"font":{"boundToProperty":true,"fields":{}}}}},"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":238,"height":100,"left":-14,"top":21},"lastResizingSize":{"width":158,"height":54},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","backgroundColor":"transparent","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"imageOpacity":1,"backgroundOverlay":"transparent","isVisible":true,"verticalLayout":"centered","horizontalLayout":"normal","fillLayout":{"fillVertical":true,"fillHorizontal":true},"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},"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","startSelected":false,"openInNewTab":false,"openInTopWindow":false,"namedTextStyle":"headingS","textShadow":[],"lineHeight":{"percentages":120,"unit":"percentages"},"letterSpacing":0,"textStyle":{"bold":false,"italic":false,"underline":false},"textDirection":2,"rotationAngle":0,"formattedText":"Join My Mailing List","verticalAlignment":"center","innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"innerGlow":{"spread":0,"blur":0,"color":"black"},"fontSize":15,"fontColor":{"mainColor":2,"variation":3,"opacity":1,"brightness":0},"font":{"themeFont":"body1"}},"metaData":{"position":{"left":-79,"top":1},"size":{"width":158,"height":54}},"isForBackground":true,"isForShadow":true}],"offset":{"left":909,"top":555},"isForBackground":true,"hasBackgroundChild":true,"isForShadow":true}],"connections":{"targetConnections":{},"sourceConnections":{}},"customStatesProperties":{"id1433401989076":{"backgroundColor":{"MouseOverState":{"id1433401989076":{"transitionInDuration":200,"transitionOutDuration":200,"easing":"linear","useCustomExitAnimation":false,"stateValue":{"mainColor":2,"variation":2,"opacity":1,"brightness":0}}},"MouseDownState":{}},"borderColor":{"MouseOverState":{},"MouseDownState":{}},"borderWidth":{"MouseOverState":{},"MouseDownState":{}},"padding":{"MouseOverState":{},"MouseDownState":{}},"roundness":{"MouseOverState":{},"MouseDownState":{}},"shadow":{"MouseOverState":{},"MouseDownState":{}},"glow":{"MouseOverState":{},"MouseDownState":{}},"innerShadow":{"MouseOverState":{},"MouseDownState":{}},"innerGlow":{"MouseOverState":{},"MouseDownState":{}}},"id1433401989079":{"fontColor":{"MouseOverState":{"id1433401989076":{"transitionInDuration":200,"transitionOutDuration":200,"easing":"linear","useCustomExitAnimation":false,"stateValue":{"mainColor":0,"variation":0,"opacity":1,"brightness":0}}},"MouseDownState":{}},"formattedText":{"MouseOverState":{},"MouseDownState":{}},"verticalAlignment":{"MouseOverState":{},"MouseDownState":{}},"fontSize":{"MouseOverState":{},"MouseDownState":{}},"font":{"MouseOverState":{},"MouseDownState":{}}}},"pageId":"1403784258535","version":17.004,"id":"id1433402004868","relativePoint":{"left":909,"top":555},"styleVersion":1783525757611,"styleId":1783525757608,"fieldsToData":{"backgroundColor":{"name":"backgroundColor","fieldType":"BackgroundColor","categoryId":"Colors","priority":0,"title":"Background"},"borderColor0":{"name":"borderColor0","fieldType":"SolidColor","categoryId":"Colors","priority":1,"title":"Border"},"borderWidth0":{"name":"borderWidth0","fieldType":"Pixels","categoryId":"Border","priority":2,"title":"Border Width","options":{"fieldVisualizer":"Slider","visualizerOptions":{"min":0,"max":20}}},"padding":{"name":"padding","fieldType":"Padding","categoryId":"Border","priority":3,"title":"Padding"},"roundness":{"name":"roundness","fieldType":"Roundness","categoryId":"Border","priority":4,"title":"Roundness"},"shadow":{"name":"shadow","fieldType":"Shadow","categoryId":"Effects","priority":5,"title":"Shadow"},"glow":{"name":"glow","fieldType":"Glow","categoryId":"Effects","priority":6,"title":"Glow"},"innerShadow":{"name":"innerShadow","fieldType":"InnerShadow","categoryId":"Effects","priority":7,"title":"Inner Shadow"},"innerGlow":{"name":"innerGlow","fieldType":"InnerGlow","categoryId":"Effects","priority":8,"title":"Inner Glow"},"fontSize1":{"name":"fontSize1","fieldType":"Pixels","categoryId":"Text","priority":9,"title":"Text Size","options":{"fieldVisualizer":"NumericTextBox","visualizerOptions":{"min":0}}},"fontColor1":{"name":"fontColor1","fieldType":"SolidColor","categoryId":"Colors","priority":10,"title":"Text"},"font1":{"name":"font1","fieldType":"Font","categoryId":"Text","priority":11,"title":"Font"}},"categoriesData":{"Colors":{"title":"Colors","priority":1,"id":"Colors"},"Border":{"title":"Border","priority":3,"id":"Border"},"Effects":{"title":"Effects","priority":4,"id":"Effects"},"Text":{"title":"Text","priority":2,"id":"Text"}},"fieldsToValues":{"backgroundColor":{"NormalState":{"value":"rgb(253,96,24)"},"MouseOverState":{"value":{"mainColor":2,"variation":2,"opacity":1,"brightness":0}},"MouseDownState":{}},"borderColor0":{"NormalState":{"value":{"mainColor":2,"variation":3,"opacity":1,"brightness":0}},"MouseOverState":{},"MouseDownState":{}},"borderWidth0":{"NormalState":{"value":1},"MouseOverState":{},"MouseDownState":{}},"padding":{"NormalState":{"value":{"top":0,"left":0,"bottom":0,"right":0}},"MouseOverState":{},"MouseDownState":{}},"roundness":{"NormalState":{"value":{"topLeft":50,"topRight":50,"bottomLeft":50,"bottomRight":50}},"MouseOverState":{},"MouseDownState":{}},"shadow":{"NormalState":{"value":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"}},"MouseOverState":{},"MouseDownState":{}},"glow":{"NormalState":{"value":{"spread":0,"blur":0,"color":"black"}},"MouseOverState":{},"MouseDownState":{}},"innerShadow":{"NormalState":{"value":{"top":0,"left":0,"spread":0,"blur":0,"color":"rgba(0,0,0,0.1)"}},"MouseOverState":{},"MouseDownState":{}},"innerGlow":{"NormalState":{"value":{"spread":0,"blur":0,"color":"black"}},"MouseOverState":{},"MouseDownState":{}},"fontSize1":{"NormalState":{"value":15},"MouseOverState":{},"MouseDownState":{}},"fontColor1":{"NormalState":{"value":{"mainColor":0,"variation":0,"opacity":1,"brightness":0}},"MouseOverState":{"value":{"mainColor":0,"variation":0,"opacity":1,"brightness":0}},"MouseDownState":{}},"font1":{"NormalState":{"value":"Open Sans Extra Bold"},"MouseOverState":{},"MouseDownState":{}}},"statesAnimations":{"MouseOverState":{"transitionInDuration":200,"transitionOutDuration":200,"easing":"linear","useCustomExitAnimation":false},"MouseDownState":{"transitionInDuration":0,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":false}},"StructureVersion":17.004}},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","basicUserCanEdit":true,"verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillVertical":false,"fillHorizontal":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"isVisible":true,"buttonAction":{"type":"None"},"iconReference":null,"formattedText":"<div>Get Precision Grid Pro&nbsp;</div>"},"metaData":{"position":{"left":-98,"top":1276},"size":{"width":191,"height":40},"isTextButton":true},"childElements":[]},{"type":"ExternalAppembed_html_app1","id":"id1785999942921","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Embed Html 12","baseName":null,"templateID":"templateid1785999942922","templateName":null,"order":74,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":400,"height":115,"left":-198,"top":913},"lastResizingSize":{"width":400,"height":115,"left":-198,"top":913},"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=\"https://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":-198,"top":1097},"size":{"width":400,"height":115}}},{"type":"freeText","id":"id1786000279932","elementProperties":{"tagName":"H3","behaviours":null,"isLocked":false,"name":"Text 8","baseName":null,"templateID":"templateid1786000279933","templateName":null,"order":75,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":313,"height":27,"left":-154,"top":886},"lastResizingSize":{"width":313,"height":27,"left":-154,"top":886},"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;\"><span style=\"font-size:14px;\"><span class=\"theme-text-color-0-0\">Click here for 3D Perspective Tool</span></span></div>","verticalAlignment":"top"},"metaData":{"position":{"left":-154,"top":1070},"size":{"width":313,"height":27}}},{"type":"freeText","id":"id1786002785878","elementProperties":{"tagName":"H3","behaviours":null,"isLocked":false,"name":"Text 10","baseName":null,"templateID":"templateid1786002785879","templateName":null,"order":76,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":243,"height":30,"left":-127,"top":1358},"lastResizingSize":{"width":243,"height":30,"left":-127,"top":1358},"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;\"><span style=\"font-size:14px;\"><span class=\"theme-text-color-0-0\">Copyright © All Rights Reserved</span></span><br></div>","verticalAlignment":"top"},"metaData":{"position":{"left":-127,"top":1542},"size":{"width":243,"height":30}}},{"type":"SkinButtonElement","id":"id1787644019891","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Button 11","baseName":null,"templateID":"templateid1787644019893","templateName":null,"order":77,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{"categoryId":290},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":147,"height":54,"left":-54,"top":652},"lastResizingSize":{"width":147,"height":54,"left":-54,"top":652},"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"},"dataInfo":null,"startSelected":false,"urlAddress":{"type":"Asset","url":{"id":4704953,"title":"Grid PDF.html","description":"","fileName":"ed46464e3a2b4c8d857bb79dcb75a62f/Grid PDF.html","fileType":"html","assetType":5,"category":23,"ownerID":28713746,"storageServer":6,"albumID":null,"deleted":null}},"openInNewTab":false,"openInTopWindow":false,"shouldUnderlineChildren":false,"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"skinBinding":{"skinName":"id1787644019892","index":0,"type":"Inline","hierarchy":{"structures":[{"type":"skinHierarchyBox","id":"id1437392447318","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Skin Element 3","baseName":null,"templateID":"templateid1437392447323","templateName":null,"order":0,"customStates":null,"isElementWasEditedInMode":false,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":1787644019884,"styleBindingFields":{"backgroundColor":{"type":1,"properties":{"backgroundColor":{"boundToProperty":true,"fields":{}}}},"borderColor0":{"type":1,"properties":{"borderColor":{"boundToProperty":false,"fields":{"left":true,"top":true,"bottom":true,"right":true}}}},"borderWidth0":{"type":1,"properties":{"borderWidth":{"boundToProperty":false,"fields":{"left":true,"top":true,"bottom":true,"right":true}}}},"padding":{"type":1,"properties":{"padding":{"boundToProperty":true,"fields":{}}}},"roundness":{"type":1,"properties":{"roundness":{"boundToProperty":true,"fields":{}}}},"shadow":{"type":1,"properties":{"shadow":{"boundToProperty":true,"fields":{}}}},"glow":{"type":1,"properties":{"glow":{"boundToProperty":true,"fields":{}}}},"innerShadow":{"type":1,"properties":{"innerShadow":{"boundToProperty":true,"fields":{}}}},"innerGlow":{"type":1,"properties":{"innerGlow":{"boundToProperty":true,"fields":{}}}}},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":160,"height":56,"top":0,"left":0},"lastResizingSize":{"width":160,"height":56,"top":0,"left":0},"fieldsMap":{},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"imageOpacity":1,"backgroundOverlay":"transparent","overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"startSelected":false,"openInNewTab":false,"openInTopWindow":false,"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","isVisible":true,"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"},"borderColor":{"top":{"mainColor":2,"variation":2,"opacity":1,"brightness":0},"left":{"mainColor":2,"variation":2,"opacity":1,"brightness":0},"bottom":{"mainColor":2,"variation":2,"opacity":1,"brightness":0},"right":{"mainColor":2,"variation":2,"opacity":1,"brightness":0}},"borderWidth":{"top":1,"left":1,"bottom":1,"right":1},"backgroundColor":{"mainColor":0,"variation":0,"opacity":1,"brightness":0},"padding":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":4,"bottomLeft":4,"topRight":4,"bottomRight":4},"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"rgba(0,0,0,0.1)"},"innerGlow":{"spread":0,"blur":0,"color":"black"}},"metaData":{"position":{"left":-80,"top":0},"size":{"width":160,"height":56}},"childElements":[{"type":"freeText","id":"id1437392447321","elementProperties":{"tagName":"H3","behaviours":null,"isLocked":false,"name":"Text 1","baseName":null,"templateID":"templateid1437392447323","templateName":null,"order":1,"customStates":null,"isElementWasEditedInMode":false,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":1787644019884,"styleBindingFields":{"formattedText":{"type":2,"properties":{"formattedText":{"boundToProperty":true,"fields":{}}}},"verticalAlignment":{"type":2,"properties":{"verticalAlignment":{"boundToProperty":true,"fields":{}}}},"fontSize1":{"type":1,"properties":{"fontSize":{"boundToProperty":true,"fields":{}}}},"fontColor1":{"type":1,"properties":{"fontColor":{"boundToProperty":true,"fields":{}}}},"font1":{"type":1,"properties":{"font":{"boundToProperty":true,"fields":{}}}}},"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":109,"height":56,"left":-14,"top":21},"lastResizingSize":{"width":113,"height":54},"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","backgroundColor":"transparent","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"imageOpacity":1,"backgroundOverlay":"transparent","isVisible":true,"verticalLayout":"centered","horizontalLayout":"normal","fillLayout":{"fillVertical":true,"fillHorizontal":true},"margin":{"top":0,"left":45,"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,"openInNewTab":false,"openInTopWindow":false,"namedTextStyle":"headingS","textShadow":[],"lineHeight":{"percentages":120,"unit":"percentages"},"letterSpacing":0,"textStyle":{"bold":false,"italic":false,"underline":false},"textDirection":2,"formattedText":"Heading 3","verticalAlignment":"center","fontSize":18,"fontColor":{"mainColor":2,"variation":2,"opacity":1,"brightness":0},"font":{"themeFont":"body1"}},"metaData":{"position":{"left":-34,"top":1},"size":{"width":113,"height":54}}},{"type":"Icon","id":"id1437392447322","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Icon 1","baseName":null,"templateID":"templateid1437392447323","templateName":null,"order":2,"customStates":null,"isElementWasEditedInMode":false,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":1787644019884,"styleBindingFields":{"iconReference":{"type":2,"properties":{"iconReference":{"boundToProperty":true,"fields":{}}}},"iconColor1":{"type":1,"properties":{"iconColor":{"boundToProperty":true,"fields":{}}}}},"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":24,"height":24,"left":8,"top":16},"lastResizingSize":{"width":24,"height":24,"left":8,"top":16},"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","backgroundColor":"transparent","verticalLayout":"centered","horizontalLayout":"dockLeft","fillLayout":{"fillVertical":false,"fillHorizontal":false},"margin":{"top":0,"left":8,"bottom":0,"right":0},"padding":{"top":0,"left":0,"bottom":0,"right":0},"startSelected":false,"openInNewTab":false,"openInTopWindow":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,"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","iconReference":{"collectionName":"public-font-icons","iconName":"download-arrow-11297836"},"iconSize":"auto","iconColor":{"mainColor":2,"variation":2,"opacity":1,"brightness":0}},"metaData":{"position":{"left":-71,"top":16},"size":{"width":24,"height":24}}}],"offset":{"left":909,"top":555},"isForBackground":true,"isForShadow":true}],"connections":{"targetConnections":{},"sourceConnections":{}},"customStatesProperties":{"id1437392447318":{"backgroundColor":{"MouseOverState":{"id1437392447318":{"transitionInDuration":600,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":true,"stateValue":{"mainColor":0,"variation":4,"opacity":1,"brightness":0}}},"MouseDownState":{}},"borderColor":{"MouseOverState":{},"MouseDownState":{}},"borderWidth":{"MouseOverState":{},"MouseDownState":{}},"padding":{"MouseOverState":{},"MouseDownState":{}},"roundness":{"MouseOverState":{},"MouseDownState":{}},"shadow":{"MouseOverState":{},"MouseDownState":{}},"glow":{"MouseOverState":{},"MouseDownState":{}},"innerShadow":{"MouseOverState":{},"MouseDownState":{}},"innerGlow":{"MouseOverState":{},"MouseDownState":{}}},"id1437392447322":{"margin":{"MouseOverState":{"id1437392447318":{"stateValue":{"top":0,"left":13,"bottom":0,"right":0},"transitionInDuration":200,"transitionOutDuration":200}}},"iconColor":{"MouseOverState":{"id1437392447318":{"transitionInDuration":600,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":true,"stateValue":{"mainColor":2,"variation":0,"opacity":1,"brightness":0}}},"MouseDownState":{}},"iconReference":{"MouseOverState":{},"MouseDownState":{}}},"id1437392447321":{"fontColor":{"MouseOverState":{"id1437392447318":{"transitionInDuration":600,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":true,"stateValue":{"mainColor":2,"variation":0,"opacity":1,"brightness":0}}},"MouseDownState":{}},"formattedText":{"MouseOverState":{},"MouseDownState":{}},"verticalAlignment":{"MouseOverState":{},"MouseDownState":{}},"fontSize":{"MouseOverState":{},"MouseDownState":{}},"font":{"MouseOverState":{},"MouseDownState":{}}}},"pageId":"id1433428400022","version":17.004,"id":"id1437392464095","relativePoint":{"left":909,"top":555},"styleVersion":1787644019887,"styleId":1787644019884,"fieldsToData":{"backgroundColor":{"name":"backgroundColor","fieldType":"BackgroundColor","categoryId":"Colors","priority":0,"title":"Background"},"iconColor1":{"name":"iconColor1","fieldType":"SolidColor","categoryId":"Colors","priority":1,"title":"Icon Color"},"borderColor0":{"name":"borderColor0","fieldType":"SolidColor","categoryId":"Colors","priority":2,"title":"Border"},"borderWidth0":{"name":"borderWidth0","fieldType":"Pixels","categoryId":"Border","priority":3,"title":"Border Width","options":{"fieldVisualizer":"Slider","visualizerOptions":{"min":0,"max":20}}},"padding":{"name":"padding","fieldType":"Padding","categoryId":"Border","priority":4,"title":"Padding"},"roundness":{"name":"roundness","fieldType":"Roundness","categoryId":"Border","priority":5,"title":"Roundness"},"shadow":{"name":"shadow","fieldType":"Shadow","categoryId":"Effects","priority":6,"title":"Shadow"},"glow":{"name":"glow","fieldType":"Glow","categoryId":"Effects","priority":7,"title":"Glow"},"innerShadow":{"name":"innerShadow","fieldType":"InnerShadow","categoryId":"Effects","priority":8,"title":"Inner Shadow"},"innerGlow":{"name":"innerGlow","fieldType":"InnerGlow","categoryId":"Effects","priority":9,"title":"Inner Glow"},"fontSize1":{"name":"fontSize1","fieldType":"Pixels","categoryId":"Text","priority":10,"title":"Text Size","options":{"fieldVisualizer":"NumericTextBox","visualizerOptions":{"min":0}}},"fontColor1":{"name":"fontColor1","fieldType":"SolidColor","categoryId":"Colors","priority":11,"title":"Text"},"font1":{"name":"font1","fieldType":"Font","categoryId":"Text","priority":12,"title":"Font"}},"categoriesData":{"Colors":{"title":"Colors","priority":1,"id":"Colors"},"Border":{"title":"Border","priority":3,"id":"Border"},"Effects":{"title":"Effects","priority":4,"id":"Effects"},"Text":{"title":"Text","priority":2,"id":"Text"}},"fieldsToValues":{"backgroundColor":{"NormalState":{"value":{"mainColor":0,"variation":0,"opacity":1,"brightness":0}},"MouseOverState":{"value":{"mainColor":0,"variation":4,"opacity":1,"brightness":0}},"MouseDownState":{}},"iconColor1":{"NormalState":{"value":{"mainColor":2,"variation":2,"opacity":1,"brightness":0}},"MouseOverState":{"value":{"mainColor":2,"variation":0,"opacity":1,"brightness":0}},"MouseDownState":{}},"borderColor0":{"NormalState":{"value":{"mainColor":2,"variation":2,"opacity":1,"brightness":0}},"MouseOverState":{},"MouseDownState":{}},"borderWidth0":{"NormalState":{"value":1},"MouseOverState":{},"MouseDownState":{}},"padding":{"NormalState":{"value":{"top":0,"left":0,"bottom":0,"right":0}},"MouseOverState":{},"MouseDownState":{}},"roundness":{"NormalState":{"value":{"topLeft":4,"bottomLeft":4,"topRight":4,"bottomRight":4}},"MouseOverState":{},"MouseDownState":{}},"shadow":{"NormalState":{"value":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"}},"MouseOverState":{},"MouseDownState":{}},"glow":{"NormalState":{"value":{"spread":0,"blur":0,"color":"black"}},"MouseOverState":{},"MouseDownState":{}},"innerShadow":{"NormalState":{"value":{"top":0,"left":0,"spread":0,"blur":0,"color":"rgba(0,0,0,0.1)"}},"MouseOverState":{},"MouseDownState":{}},"innerGlow":{"NormalState":{"value":{"spread":0,"blur":0,"color":"black"}},"MouseOverState":{},"MouseDownState":{}},"fontSize1":{"NormalState":{"value":18},"MouseOverState":{},"MouseDownState":{}},"fontColor1":{"NormalState":{"value":{"mainColor":2,"variation":2,"opacity":1,"brightness":0}},"MouseOverState":{"value":{"mainColor":2,"variation":0,"opacity":1,"brightness":0}},"MouseDownState":{}},"font1":{"NormalState":{"value":{"themeFont":"body1"}},"MouseOverState":{},"MouseDownState":{}}},"statesAnimations":{"MouseOverState":{"transitionInDuration":600,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":true},"MouseDownState":{"transitionInDuration":0,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":false}},"StructureVersion":17.004}},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","basicUserCanEdit":true,"verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillHorizontal":false,"fillVertical":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"isVisible":true,"buttonAction":{"type":"None"},"iconReference":{"collectionName":"public-font-icons","iconName":"download-arrow-11297836"},"formattedText":"Download"},"metaData":{"position":{"left":-54,"top":836},"size":{"width":147,"height":54},"isTextButton":true},"childElements":[]},{"type":"freeText","id":"id1787644089436","elementProperties":{"tagName":"H3","behaviours":null,"isLocked":false,"name":"Text 20","baseName":null,"templateID":"templateid1787644089437","templateName":null,"order":81,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":114,"height":48,"left":-38,"top":706},"lastResizingSize":{"width":114,"height":48,"left":-38,"top":706},"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;\"><span class=\"theme-text-color-0-0\">​Quick How-to guide</span><br></div>","verticalAlignment":"top"},"metaData":{"position":{"left":-38,"top":890},"size":{"width":114,"height":48}}}]},{"type":"SectionElement","id":"id1785801571890","elementProperties":{"tagName":"SECTION","behaviours":null,"isLocked":false,"name":"Section 7","baseName":null,"templateID":null,"templateName":null,"order":4,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{"categoryId":199},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"height":317,"left":0,"width":0,"top":0},"lastResizingSize":{"height":317,"left":0,"width":0,"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 2","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":-555.8333740234375,"top":1579},"size":{"width":1112,"height":317}},"childElements":[{"type":"userBox","id":"id1785336878132","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Box 1","baseName":null,"templateID":"templateid1785336878133","templateName":null,"order":32,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":618,"height":295,"left":-480,"top":10},"lastResizingSize":{"width":618,"height":295,"left":-480,"top":10},"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(103,43,23)","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":-480.0000305175781,"top":1589},"size":{"width":618,"height":295}},"childElements":[{"type":"freeText","id":"id1785336172264","elementProperties":{"tagName":"H1","behaviours":null,"isLocked":false,"name":"Text 1","baseName":null,"templateID":"templateid1785336172265","templateName":null,"order":33,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":177,"height":48,"left":61,"top":186},"lastResizingSize":{"width":177,"height":48,"left":61,"top":186},"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":36,"font":{"themeFont":"heading1"},"contentTextTransform":"none","isBold":false,"isItalic":false,"isUnderline":false,"textStyle":{"bold":false,"underline":false,"italic":false},"textDirection":2,"dataBinding":null,"formattedText":"<div><font color=\"#fefefe\"><span style=\"font-size: 20px;\">Click here to see \"How-To\" videos</span></font></div>","verticalAlignment":"top"},"metaData":{"position":{"left":-419.0000305175781,"top":1775},"size":{"width":177,"height":48}}},{"type":"image","id":"id1785336052095","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Image 10","baseName":null,"templateID":"templateid1785336052096","templateName":null,"order":34,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":78,"height":45,"left":298,"top":189},"lastResizingSize":{"width":78,"height":45,"left":298,"top":189},"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":{"mainColor":0,"variation":0,"opacity":1,"brightness":0},"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://youtu.be/936Wi52z6wA?si=HSIwG99ax4z-1J9F"},"openInNewTab":true,"openInTopWindow":false,"shouldUnderlineChildren":false,"templateOpener":false,"popupType":"DefaultPopup","imageUrl":{"id":155047888,"imagePath":"https://storage.googleapis.com/production-homestead-v1-0-0/170/2018170/S9EXuCtN/253c66d2e9f24ebd92f9c11a0981b752","storageServer":0,"imageWidth":3840,"imageHeight":2160},"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":-182,"top":1778},"size":{"width":78,"height":45}}},{"type":"image","id":"id1785333551895","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Image 7","baseName":null,"templateID":"templateid1785333551896","templateName":null,"order":35,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":200,"height":113,"left":396,"top":158},"lastResizingSize":{"width":200,"height":113,"left":396,"top":158},"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://youtu.be/936Wi52z6wA?si=87UMQlyARyIHhl1I"},"openInNewTab":true,"openInTopWindow":false,"shouldUnderlineChildren":false,"templateOpener":false,"popupType":"DefaultPopup","imageUrl":{"id":155047854,"imagePath":"https://storage.googleapis.com/production-homestead-v1-0-0/170/2018170/S9EXuCtN/3c6bc4880f454f1796a5384ce86bfe80","storageServer":0,"imageWidth":756,"imageHeight":429},"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":-84,"top":1747},"size":{"width":200,"height":113}}},{"type":"freeText","id":"id1785333134050","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Text 7","baseName":null,"templateID":"templateid1785333134051","templateName":null,"order":36,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":582,"height":137,"left":14,"top":14},"lastResizingSize":{"width":582,"height":137,"left":14,"top":14},"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 class=\"theme-text-color-0-0\"><span style=\"font-size:20px;\">Struggling with perspective? I’ve got you covered! 📐 I created 4 free web apps to help you visualize complex structures with ease. For a quick step-by-step guide on how to make the most of these tools, check out my latest YouTube video.<!--{cke_protected}{C}%3C!%2D%2DTgQPHd%7C%7C%7C%5B%5D%2D%2D%3E--><br>Watch here:</span></span><br><span class=\"theme-text-color-0-0\"><span style=\"font-size:20px;\"></span></span><span class=\"theme-text-color-0-0\"><span style=\"font-size:20px;\"></span></span><br></div>","verticalAlignment":"top"},"metaData":{"position":{"left":-466.0000305175781,"top":1603},"size":{"width":582,"height":137}}}]},{"type":"JMMLElement","id":"id1785335875236","elementProperties":{"tagName":"DIV","behaviours":{"normalBehaviours":{},"isTemplateBehaviour":{}},"isLocked":false,"name":"Join My Mailing List 1","baseName":null,"templateID":"templateid1785335875254","templateName":null,"order":57,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{"skinId":"501281-id1468501382269","categoryId":346},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":243,"height":278,"left":197,"top":10},"lastResizingSize":{"width":243,"height":278,"left":197,"top":10},"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,"overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":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":"rgb(60,120,199)","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"},"formID":"id1785335875258","formOptions":{"clearOnSubmit":true},"startSelected":false,"urlAddress":null,"openInNewTab":false,"openInTopWindow":false,"shouldUnderlineChildren":false,"templateOpener":false,"popupType":"ElementPopup","elementPopupEnabled":false,"elementPopupTimeout":10,"elementPopupVisible":false,"JMML_targetEmail":"","JMML_submitSuccessText":"Thank you","JMML_submitErrorText":"Something went wrong, please try again later.","JMML_Layout":"embed","JMML_Popup_TimeOut":10,"JMML_Parent_Section_Id":"1407691228483"},"metaData":{"position":{"left":197,"top":1589},"size":{"width":243,"height":278}},"childElements":[{"type":"freeText","id":"id1785335875237","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Text 1","baseName":null,"templateID":"templateid1785335875254","templateName":null,"order":58,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":245,"height":22,"left":11,"top":20},"lastResizingSize":{"width":245,"height":22,"left":11,"top":20},"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":"dockLeft","fillLayout":{"fillHorizontal":true,"fillVertical":false},"margin":{"top":20,"left":20,"bottom":0,"right":20},"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":"menu","fontColor":{"mainColor":0,"variation":0,"opacity":1,"brightness":0},"textShadow":[],"lineHeight":{"pixels":14,"percentages":120,"unit":"percentages"},"letterSpacing":0,"fontSize":null,"font":null,"contentTextTransform":"none","isBold":false,"isItalic":false,"isUnderline":false,"textStyle":{"bold":false,"underline":false,"italic":false},"textDirection":2,"dataBinding":null,"formattedText":"<div>Join our newsletter</div>","verticalAlignment":"top"},"metaData":{"position":{"left":217,"top":1609},"size":{"width":203,"height":22}}},{"type":"JMMLSkinInputElement","id":"id1785335875238","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Name","baseName":"Name","templateID":"templateid1785335875254","templateName":null,"order":59,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{"skinId":"501271-id1461663366306"},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":245,"height":65,"left":11,"top":50},"lastResizingSize":{"width":245,"height":65,"left":11,"top":50},"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,"overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"skinBinding":{"type":"Inline","skinName":"id1785335875241","index":0,"hierarchy":{"structures":[{"type":"skinHierarchyBox","id":"id1438684170971","elementProperties":{"tagName":"DIV","behaviours":{"normalBehaviours":{},"isTemplateBehaviour":{}},"isLocked":false,"name":"Text Input","baseName":null,"templateID":"templateid1438684170977","templateName":null,"order":0,"customStates":null,"isElementWasEditedInMode":false,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":1467709683537,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"left":0,"width":412,"top":0,"height":64},"lastResizingSize":{"left":0,"width":412,"top":0,"height":64},"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"fieldsMap":{"id1438684170975":{"0":{"name":"labelText","type":"title","title":"Label Text"}}},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","backgroundColor":"transparent","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"imageOpacity":1,"backgroundOverlay":"transparent","overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"startSelected":false,"openInNewTab":false,"openInTopWindow":false,"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","padding":{"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"}},"metaData":{"position":{"left":-206,"top":0},"size":{"width":412,"height":64}},"childElements":[{"type":"TextInputField","id":"id1438684170974","elementProperties":{"tagName":"DIV","behaviours":{"normalBehaviours":{},"isTemplateBehaviour":{}},"isLocked":false,"name":"Text Input Field","baseName":null,"templateID":"templateid1438684170977","templateName":null,"order":1,"customStates":null,"isElementWasEditedInMode":false,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":1467709683537,"styleBindingFields":{"inputBackgroundColor":{"type":1,"properties":{"backgroundColor":{"boundToProperty":true,"fields":{}}}},"inputBorderColor1":{"type":1,"properties":{"borderColor":{"boundToProperty":false,"fields":{"left":true,"top":true,"bottom":true,"right":true}}}},"inputBorderWidth1":{"type":1,"properties":{"borderWidth":{"boundToProperty":false,"fields":{"left":true,"top":true,"bottom":true,"right":true}}}},"padding":{"type":1,"properties":{"padding":{"boundToProperty":true,"fields":{}}}},"roundness":{"type":1,"properties":{"roundness":{"boundToProperty":true,"fields":{}}}},"shadow":{"type":1,"properties":{"shadow":{"boundToProperty":true,"fields":{}}}},"glow":{"type":1,"properties":{"glow":{"boundToProperty":true,"fields":{}}}},"innerShadow":{"type":1,"properties":{"innerShadow":{"boundToProperty":true,"fields":{}}}},"innerGlow":{"type":1,"properties":{"innerGlow":{"boundToProperty":true,"fields":{}}}},"inputFontSize":{"type":1,"properties":{"fontSize":{"boundToProperty":true,"fields":{}}}},"inputfontColor":{"type":1,"properties":{"fontColor":{"boundToProperty":true,"fields":{}}}},"inputfont":{"type":1,"properties":{"font":{"boundToProperty":true,"fields":{}}}}},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"left":0,"width":412,"top":81,"height":64},"lastResizingSize":{"width":412,"height":34},"imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"imageOpacity":1,"backgroundOverlay":"transparent","verticalAlign":"center","horizontalAlign":"left","horizontalContentAlign":"center","startSelected":false,"openInNewTab":false,"openInTopWindow":false,"namedTextStyle":"bodyXS","textShadow":[],"lineHeight":{"percentages":120,"unit":"percentages"},"letterSpacing":0,"textStyle":{"bold":false,"underline":false,"italic":false},"textDirection":2,"isVisible":true,"verticalLayout":"dockBottom","horizontalLayout":"normal","fillLayout":{"fillVertical":true,"fillHorizontal":true},"margin":{"top":30,"left":0,"bottom":0,"right":0},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"},"borderColor":{"top":{"mainColor":2,"variation":2,"opacity":1,"brightness":0},"left":{"mainColor":2,"variation":2,"opacity":1,"brightness":0},"bottom":{"mainColor":2,"variation":2,"opacity":1,"brightness":0},"right":{"mainColor":2,"variation":2,"opacity":1,"brightness":0}},"borderWidth":{"top":1,"left":1,"bottom":1,"right":1},"backgroundColor":"transparent","padding":{"left":8,"right":3,"top":3,"bottom":3},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"innerGlow":{"spread":0,"blur":0,"color":"black"},"fontSize":14,"fontColor":{"mainColor":2,"variation":2,"opacity":1,"brightness":0},"font":{"themeFont":"body1"}},"metaData":{"position":{"left":-206,"top":30},"size":{"width":412,"height":34}}},{"type":"label","id":"id1438684170975","elementProperties":{"tagName":"DIV","behaviours":{"normalBehaviours":{},"isTemplateBehaviour":{}},"isLocked":false,"name":"Label","baseName":null,"templateID":"templateid1438684170977","templateName":null,"order":2,"customStates":null,"isElementWasEditedInMode":false,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":1467709683537,"styleBindingFields":{"fontSize1":{"type":1,"properties":{"fontSize":{"boundToProperty":true,"fields":{}}}},"fontColor1":{"type":1,"properties":{"fontColor":{"boundToProperty":true,"fields":{}}}},"font1":{"type":1,"properties":{"font":{"boundToProperty":true,"fields":{}}}}},"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"left":105,"width":412,"top":-32,"height":30},"lastResizingSize":{"left":105,"width":412,"top":-32,"height":30},"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","startSelected":false,"openInNewTab":false,"openInTopWindow":false,"backgroundColor":"transparent","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"imageOpacity":1,"backgroundOverlay":"transparent","isVisible":true,"verticalLayout":"dockTop","horizontalLayout":"dockLeft","fillLayout":{"fillVertical":false,"fillHorizontal":true},"margin":{"top":0,"left":0,"bottom":0,"right":0},"padding":{"top":0,"left":0,"bottom":0,"right":0},"verticalAlign":"center","horizontalAlign":"left","horizontalContentAlign":"center","namedTextStyle":"bodyS","textShadow":[],"lineHeight":{"percentages":120,"unit":"percentages"},"letterSpacing":0,"textStyle":{"bold":false,"underline":false,"italic":false},"textDirection":2,"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,"text":"Name","textType":"div","trimText":false,"fontSize":14,"fontColor":{"mainColor":2,"variation":2,"opacity":1,"brightness":0},"font":{"themeFont":"body1"}},"metaData":{"position":{"left":-206,"top":0},"size":{"width":412,"height":30}}}],"offset":{"left":783,"top":555},"isForBackground":true}],"connections":{"targetConnections":{},"sourceConnections":{}},"customStatesProperties":{"id1438684170974":{"borderWidth":{"ElementFocusedState":{"id1438684170974":{"stateValue":{"top":2,"left":2,"bottom":2,"right":2}}},"MouseOverState":{},"MouseDownState":{}},"borderColor":{"ElementFocusedState":{"id1438684170974":{"stateValue":{"top":"rgb(199,199,199)","left":"rgb(199,199,199)","bottom":"rgb(199,199,199)","right":"rgb(199,199,199)"}}},"MouseOverState":{},"MouseDownState":{}},"backgroundColor":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"padding":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"roundness":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"shadow":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"glow":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"innerShadow":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"innerGlow":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"fontSize":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"fontColor":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"font":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}}},"id1438684170975":{"fontSize":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"fontColor":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"font":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}}}},"pageId":"id1437317173804","version":17.004,"id":"id1438684191283","relativePoint":{"left":783,"top":555},"styleVersion":1467709683541,"styleId":1467709683537,"fieldsToData":{"inputBackgroundColor":{"name":"inputBackgroundColor","fieldType":"BackgroundColor","categoryId":"Colors","priority":0,"title":"Input Background"},"inputBorderColor1":{"name":"inputBorderColor1","fieldType":"SolidColor","categoryId":"Colors","priority":1,"title":"Input Border"},"inputBorderWidth1":{"name":"inputBorderWidth1","fieldType":"Pixels","categoryId":"Border","priority":2,"title":"Input Border Width","options":{"fieldVisualizer":"Slider","visualizerOptions":{"min":0,"max":20}}},"padding":{"name":"padding","fieldType":"Padding","categoryId":"Border","priority":3,"title":"Padding"},"roundness":{"name":"roundness","fieldType":"Roundness","categoryId":"Border","priority":4,"title":"Roundness"},"shadow":{"name":"shadow","fieldType":"Shadow","categoryId":"Effects","priority":5,"title":"Shadow"},"glow":{"name":"glow","fieldType":"Glow","categoryId":"Effects","priority":6,"title":"Glow"},"innerShadow":{"name":"innerShadow","fieldType":"InnerShadow","categoryId":"Effects","priority":7,"title":"Inner Shadow"},"innerGlow":{"name":"innerGlow","fieldType":"InnerGlow","categoryId":"Effects","priority":8,"title":"Inner Glow"},"fontSize1":{"name":"fontSize1","fieldType":"Pixels","categoryId":"Text","priority":9,"title":"Text Size","options":{"fieldVisualizer":"NumericTextBox","visualizerOptions":{"min":0}}},"inputFontSize":{"name":"inputFontSize","fieldType":"Pixels","categoryId":"Text","priority":10,"title":"Input Text Size","options":{"fieldVisualizer":"NumericTextBox","visualizerOptions":{"min":0}}},"fontColor1":{"name":"fontColor1","fieldType":"SolidColor","categoryId":"Colors","priority":11,"title":"Text"},"inputfontColor":{"name":"inputfontColor","fieldType":"SolidColor","categoryId":"Colors","priority":12,"title":"Input Text"},"font1":{"name":"font1","fieldType":"Font","categoryId":"Text","priority":13,"title":"Font"},"inputfont":{"name":"inputfont","fieldType":"Font","categoryId":"Text","priority":14,"title":"Input Text"}},"categoriesData":{"Colors":{"title":"Colors","priority":1,"id":"Colors"},"Border":{"title":"Border","priority":3,"id":"Border"},"Effects":{"title":"Effects","priority":4,"id":"Effects"},"Text":{"title":"Text","priority":2,"id":"Text"}},"fieldsToValues":{"inputBackgroundColor":{"NormalState":{"value":{"mainColor":0,"variation":0,"opacity":1,"brightness":0}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"inputBorderColor1":{"NormalState":{"value":{"mainColor":0,"variation":0,"opacity":1,"brightness":0}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"inputBorderWidth1":{"NormalState":{"value":1},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"padding":{"NormalState":{"value":{"left":8,"right":3,"top":3,"bottom":3}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"roundness":{"NormalState":{"value":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"shadow":{"NormalState":{"value":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"glow":{"NormalState":{"value":{"spread":0,"blur":0,"color":"black"}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"innerShadow":{"NormalState":{"value":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"innerGlow":{"NormalState":{"value":{"spread":0,"blur":0,"color":"black"}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"fontSize1":{"NormalState":{"value":12},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"inputFontSize":{"NormalState":{"value":12},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"fontColor1":{"NormalState":{"value":{"mainColor":0,"variation":0,"opacity":1,"brightness":0}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"inputfontColor":{"NormalState":{"value":{"mainColor":2,"variation":4,"opacity":1,"brightness":0}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"font1":{"NormalState":{"value":{"themeFont":"heading1"}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"inputfont":{"NormalState":{"value":{"themeFont":"heading1"}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}}},"statesAnimations":{"ElementFocusedState":{"transitionInDuration":0,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":false},"MouseOverState":{"transitionInDuration":0,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":false},"MouseDownState":{"transitionInDuration":0,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":false}},"StructureVersion":17.004}},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","basicUserCanEdit":true,"verticalLayout":"normal","horizontalLayout":"centered","fillLayout":{"fillVertical":false,"fillHorizontal":true},"margin":{"top":46,"left":20,"bottom":0,"right":20},"startSelected":false,"urlAddress":null,"openInNewTab":false,"openInTopWindow":false,"shouldUnderlineChildren":false,"isVisible":true,"padding":{"top":0,"left":0,"bottom":0,"right":0},"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center"},"metaData":{"position":{"left":217,"top":1639},"size":{"width":203,"height":65}},"childElements":[]},{"type":"JMMLSkinInputElement","id":"id1785335875239","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Email","baseName":"Email","templateID":"templateid1785335875254","templateName":null,"order":63,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{"skinId":"501271-id1461663366306"},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":245,"height":65,"left":11,"top":115},"lastResizingSize":{"width":245,"height":65,"left":11,"top":115},"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,"overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"skinBinding":{"type":"Inline","skinName":"id1785335875242","index":0,"hierarchy":{"structures":[{"type":"skinHierarchyBox","id":"id1438684170971","elementProperties":{"tagName":"DIV","behaviours":{"normalBehaviours":{},"isTemplateBehaviour":{}},"isLocked":false,"name":"Text Input","baseName":null,"templateID":"templateid1438684170977","templateName":null,"order":0,"customStates":null,"isElementWasEditedInMode":false,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":1467709683537,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"left":0,"width":412,"top":0,"height":64},"lastResizingSize":{"left":0,"width":412,"top":0,"height":64},"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"fieldsMap":{"id1438684170975":{"0":{"name":"labelText","type":"title","title":"Label Text"}}},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","backgroundColor":"transparent","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"imageOpacity":1,"backgroundOverlay":"transparent","overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"startSelected":false,"openInNewTab":false,"openInTopWindow":false,"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","padding":{"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"}},"metaData":{"position":{"left":-206,"top":0},"size":{"width":412,"height":64}},"childElements":[{"type":"TextInputField","id":"id1438684170974","elementProperties":{"tagName":"DIV","behaviours":{"normalBehaviours":{},"isTemplateBehaviour":{}},"isLocked":false,"name":"Text Input Field","baseName":null,"templateID":"templateid1438684170977","templateName":null,"order":1,"customStates":null,"isElementWasEditedInMode":false,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":1467709683537,"styleBindingFields":{"inputBackgroundColor":{"type":1,"properties":{"backgroundColor":{"boundToProperty":true,"fields":{}}}},"inputBorderColor1":{"type":1,"properties":{"borderColor":{"boundToProperty":false,"fields":{"left":true,"top":true,"bottom":true,"right":true}}}},"inputBorderWidth1":{"type":1,"properties":{"borderWidth":{"boundToProperty":false,"fields":{"left":true,"top":true,"bottom":true,"right":true}}}},"padding":{"type":1,"properties":{"padding":{"boundToProperty":true,"fields":{}}}},"roundness":{"type":1,"properties":{"roundness":{"boundToProperty":true,"fields":{}}}},"shadow":{"type":1,"properties":{"shadow":{"boundToProperty":true,"fields":{}}}},"glow":{"type":1,"properties":{"glow":{"boundToProperty":true,"fields":{}}}},"innerShadow":{"type":1,"properties":{"innerShadow":{"boundToProperty":true,"fields":{}}}},"innerGlow":{"type":1,"properties":{"innerGlow":{"boundToProperty":true,"fields":{}}}},"inputFontSize":{"type":1,"properties":{"fontSize":{"boundToProperty":true,"fields":{}}}},"inputfontColor":{"type":1,"properties":{"fontColor":{"boundToProperty":true,"fields":{}}}},"inputfont":{"type":1,"properties":{"font":{"boundToProperty":true,"fields":{}}}}},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"left":0,"width":412,"top":81,"height":64},"lastResizingSize":{"width":412,"height":34},"imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"imageOpacity":1,"backgroundOverlay":"transparent","verticalAlign":"center","horizontalAlign":"left","horizontalContentAlign":"center","startSelected":false,"openInNewTab":false,"openInTopWindow":false,"namedTextStyle":"bodyXS","textShadow":[],"lineHeight":{"percentages":120,"unit":"percentages"},"letterSpacing":0,"textStyle":{"bold":false,"underline":false,"italic":false},"textDirection":2,"isVisible":true,"verticalLayout":"dockBottom","horizontalLayout":"normal","fillLayout":{"fillVertical":true,"fillHorizontal":true},"margin":{"top":30,"left":0,"bottom":0,"right":0},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"},"borderColor":{"top":{"mainColor":0,"variation":0,"opacity":1,"brightness":0},"left":{"mainColor":0,"variation":0,"opacity":1,"brightness":0},"bottom":{"mainColor":0,"variation":0,"opacity":1,"brightness":0},"right":{"mainColor":0,"variation":0,"opacity":1,"brightness":0}},"borderWidth":{"top":1,"left":1,"bottom":1,"right":1},"backgroundColor":"transparent","padding":{"left":8,"right":3,"top":3,"bottom":3},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"innerGlow":{"spread":0,"blur":0,"color":"black"},"fontSize":14,"fontColor":{"mainColor":2,"variation":2,"opacity":1,"brightness":0},"font":{"themeFont":"body1"}},"metaData":{"position":{"left":-206,"top":30},"size":{"width":412,"height":34}}},{"type":"label","id":"id1438684170975","elementProperties":{"tagName":"DIV","behaviours":{"normalBehaviours":{},"isTemplateBehaviour":{}},"isLocked":false,"name":"Label","baseName":null,"templateID":"templateid1438684170977","templateName":null,"order":2,"customStates":null,"isElementWasEditedInMode":false,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":1467709683537,"styleBindingFields":{"fontSize1":{"type":1,"properties":{"fontSize":{"boundToProperty":true,"fields":{}}}},"fontColor1":{"type":1,"properties":{"fontColor":{"boundToProperty":true,"fields":{}}}},"font1":{"type":1,"properties":{"font":{"boundToProperty":true,"fields":{}}}}},"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"left":105,"width":412,"top":-32,"height":30},"lastResizingSize":{"left":105,"width":412,"top":-32,"height":30},"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","startSelected":false,"openInNewTab":false,"openInTopWindow":false,"backgroundColor":"transparent","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"imageOpacity":1,"backgroundOverlay":"transparent","isVisible":true,"verticalLayout":"dockTop","horizontalLayout":"dockLeft","fillLayout":{"fillVertical":false,"fillHorizontal":true},"margin":{"top":0,"left":0,"bottom":0,"right":0},"padding":{"top":0,"left":0,"bottom":0,"right":0},"verticalAlign":"center","horizontalAlign":"left","horizontalContentAlign":"center","namedTextStyle":"bodyS","textShadow":[],"lineHeight":{"percentages":120,"unit":"percentages"},"letterSpacing":0,"textStyle":{"bold":false,"underline":false,"italic":false},"textDirection":2,"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,"text":"Email","textType":"div","trimText":false,"fontSize":14,"fontColor":{"mainColor":0,"variation":0,"opacity":1,"brightness":0},"font":{"themeFont":"body1"}},"metaData":{"position":{"left":-206,"top":0},"size":{"width":412,"height":30}}}],"offset":{"left":783,"top":555},"isForBackground":true}],"connections":{"targetConnections":{},"sourceConnections":{}},"customStatesProperties":{"id1438684170974":{"borderWidth":{"ElementFocusedState":{"id1438684170974":{"stateValue":{"top":2,"left":2,"bottom":2,"right":2}}},"MouseOverState":{},"MouseDownState":{}},"borderColor":{"ElementFocusedState":{"id1438684170974":{"stateValue":{"top":"rgb(199,199,199)","left":"rgb(199,199,199)","bottom":"rgb(199,199,199)","right":"rgb(199,199,199)"}}},"MouseOverState":{},"MouseDownState":{}},"backgroundColor":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"padding":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"roundness":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"shadow":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"glow":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"innerShadow":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"innerGlow":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"fontSize":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"fontColor":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"font":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}}},"id1438684170975":{"fontSize":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"fontColor":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"font":{"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}}}},"pageId":"id1437317173804","version":17.004,"id":"id1438684191283","relativePoint":{"left":783,"top":555},"styleVersion":1467709683541,"styleId":1467709683537,"fieldsToData":{"inputBackgroundColor":{"name":"inputBackgroundColor","fieldType":"BackgroundColor","categoryId":"Colors","priority":0,"title":"Input Background"},"inputBorderColor1":{"name":"inputBorderColor1","fieldType":"SolidColor","categoryId":"Colors","priority":1,"title":"Input Border"},"inputBorderWidth1":{"name":"inputBorderWidth1","fieldType":"Pixels","categoryId":"Border","priority":2,"title":"Input Border Width","options":{"fieldVisualizer":"Slider","visualizerOptions":{"min":0,"max":20}}},"padding":{"name":"padding","fieldType":"Padding","categoryId":"Border","priority":3,"title":"Padding"},"roundness":{"name":"roundness","fieldType":"Roundness","categoryId":"Border","priority":4,"title":"Roundness"},"shadow":{"name":"shadow","fieldType":"Shadow","categoryId":"Effects","priority":5,"title":"Shadow"},"glow":{"name":"glow","fieldType":"Glow","categoryId":"Effects","priority":6,"title":"Glow"},"innerShadow":{"name":"innerShadow","fieldType":"InnerShadow","categoryId":"Effects","priority":7,"title":"Inner Shadow"},"innerGlow":{"name":"innerGlow","fieldType":"InnerGlow","categoryId":"Effects","priority":8,"title":"Inner Glow"},"fontSize1":{"name":"fontSize1","fieldType":"Pixels","categoryId":"Text","priority":9,"title":"Text Size","options":{"fieldVisualizer":"NumericTextBox","visualizerOptions":{"min":0}}},"inputFontSize":{"name":"inputFontSize","fieldType":"Pixels","categoryId":"Text","priority":10,"title":"Input Text Size","options":{"fieldVisualizer":"NumericTextBox","visualizerOptions":{"min":0}}},"fontColor1":{"name":"fontColor1","fieldType":"SolidColor","categoryId":"Colors","priority":11,"title":"Text"},"inputfontColor":{"name":"inputfontColor","fieldType":"SolidColor","categoryId":"Colors","priority":12,"title":"Input Text"},"font1":{"name":"font1","fieldType":"Font","categoryId":"Text","priority":13,"title":"Font"},"inputfont":{"name":"inputfont","fieldType":"Font","categoryId":"Text","priority":14,"title":"Input Text"}},"categoriesData":{"Colors":{"title":"Colors","priority":1,"id":"Colors"},"Border":{"title":"Border","priority":3,"id":"Border"},"Effects":{"title":"Effects","priority":4,"id":"Effects"},"Text":{"title":"Text","priority":2,"id":"Text"}},"fieldsToValues":{"inputBackgroundColor":{"NormalState":{"value":{"mainColor":0,"variation":0,"opacity":1,"brightness":0}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"inputBorderColor1":{"NormalState":{"value":{"mainColor":0,"variation":0,"opacity":1,"brightness":0}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"inputBorderWidth1":{"NormalState":{"value":1},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"padding":{"NormalState":{"value":{"left":8,"right":3,"top":3,"bottom":3}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"roundness":{"NormalState":{"value":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"shadow":{"NormalState":{"value":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"glow":{"NormalState":{"value":{"spread":0,"blur":0,"color":"black"}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"innerShadow":{"NormalState":{"value":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"innerGlow":{"NormalState":{"value":{"spread":0,"blur":0,"color":"black"}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"fontSize1":{"NormalState":{"value":12},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"inputFontSize":{"NormalState":{"value":12},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"fontColor1":{"NormalState":{"value":{"mainColor":0,"variation":0,"opacity":1,"brightness":0}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"inputfontColor":{"NormalState":{"value":{"mainColor":2,"variation":4,"opacity":1,"brightness":0}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"font1":{"NormalState":{"value":{"themeFont":"heading1"}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}},"inputfont":{"NormalState":{"value":{"themeFont":"heading1"}},"ElementFocusedState":{},"MouseOverState":{},"MouseDownState":{}}},"statesAnimations":{"ElementFocusedState":{"transitionInDuration":0,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":false},"MouseOverState":{"transitionInDuration":0,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":false},"MouseDownState":{"transitionInDuration":0,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":false}},"StructureVersion":17.004}},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","basicUserCanEdit":true,"verticalLayout":"normal","horizontalLayout":"centered","fillLayout":{"fillVertical":false,"fillHorizontal":true},"margin":{"top":111,"left":20,"bottom":0,"right":20},"startSelected":false,"urlAddress":null,"openInNewTab":false,"openInTopWindow":false,"shouldUnderlineChildren":false,"isVisible":true,"padding":{"top":0,"left":0,"bottom":0,"right":0},"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center"},"metaData":{"position":{"left":217,"top":1704},"size":{"width":203,"height":65}},"childElements":[]},{"type":"SkinButtonElement","id":"id1785335875240","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Button 1","baseName":null,"templateID":"templateid1785335875254","templateName":null,"order":67,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":true,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":245,"height":35,"left":11,"top":193},"lastResizingSize":{"width":245,"height":35,"left":11,"top":193},"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"},"dataInfo":null,"startSelected":false,"urlAddress":null,"openInNewTab":false,"openInTopWindow":false,"shouldUnderlineChildren":false,"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"skinBinding":{"skinName":"id1785335875243","index":0,"type":"Inline","hierarchy":{"structures":[{"type":"skinHierarchyBox","id":"id1457434147104","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Skin Element 3","baseName":null,"templateID":"templateid1457434147108","templateName":null,"order":0,"customStates":null,"isElementWasEditedInMode":false,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":1457434153234,"styleBindingFields":{"backgroundColor":{"type":1,"properties":{"backgroundColor":{"boundToProperty":true,"fields":{}}}},"borderColor0":{"type":1,"properties":{"borderColor":{"boundToProperty":false,"fields":{"left":true,"top":true,"bottom":true,"right":true}}}},"borderWidth0":{"type":1,"properties":{"borderWidth":{"boundToProperty":false,"fields":{"left":true,"top":true,"bottom":true,"right":true}}}},"padding":{"type":1,"properties":{"padding":{"boundToProperty":true,"fields":{}}}},"roundness":{"type":1,"properties":{"roundness":{"boundToProperty":true,"fields":{}}}},"shadow":{"type":1,"properties":{"shadow":{"boundToProperty":true,"fields":{}}}},"glow":{"type":1,"properties":{"glow":{"boundToProperty":true,"fields":{}}}},"innerShadow":{"type":1,"properties":{"innerShadow":{"boundToProperty":true,"fields":{}}}},"innerGlow":{"type":1,"properties":{"innerGlow":{"boundToProperty":true,"fields":{}}}}},"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,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":160,"height":56,"top":0,"left":0},"lastResizingSize":{"width":160,"height":56,"top":0,"left":0},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"rgba(0,0,0,0.1)"},"fieldsMap":{},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","backgroundColor":{"mainColor":1,"variation":3,"opacity":1,"brightness":0},"imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"startSelected":false,"openInNewTab":false,"openInTopWindow":false,"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","padding":{"top":0,"left":0,"bottom":0,"right":0},"isVisible":true,"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":0,"topRight":0,"bottomLeft":0,"bottomRight":0},"borderColor":{"top":{"mainColor":1,"variation":2,"opacity":1,"brightness":-0.06},"left":{"mainColor":1,"variation":2,"opacity":1,"brightness":-0.06},"right":{"mainColor":1,"variation":2,"opacity":1,"brightness":-0.06},"bottom":{"mainColor":1,"variation":2,"opacity":1,"brightness":-0.06}},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"}},"metaData":{"position":{"left":-80,"top":0},"size":{"width":160,"height":56}},"childElements":[{"type":"freeText","id":"id1457434147107","elementProperties":{"tagName":"H3","behaviours":null,"isLocked":false,"name":"Text 1","baseName":null,"templateID":"templateid1457434147108","templateName":null,"order":1,"customStates":null,"isElementWasEditedInMode":false,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":1457434153234,"styleBindingFields":{"formattedText":{"type":2,"properties":{"formattedText":{"boundToProperty":true,"fields":{}}}},"verticalAlignment":{"type":2,"properties":{"verticalAlignment":{"boundToProperty":true,"fields":{}}}},"fontSize1":{"type":1,"properties":{"fontSize":{"boundToProperty":true,"fields":{}}}},"fontColor1":{"type":1,"properties":{"fontColor":{"boundToProperty":true,"fields":{}}}},"font1":{"type":1,"properties":{"font":{"boundToProperty":true,"fields":{}}}}},"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,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":238,"height":100,"left":-14,"top":21},"lastResizingSize":{"width":158,"height":54},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","backgroundColor":"transparent","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","isVisible":true,"verticalLayout":"centered","horizontalLayout":"normal","fillLayout":{"fillVertical":true,"fillHorizontal":true},"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":"center","horizontalContentAlign":"center","startSelected":false,"openInNewTab":false,"openInTopWindow":false,"namedTextStyle":null,"fontColor":{"mainColor":3,"variation":0,"opacity":1,"brightness":0},"textShadow":[],"lineHeight":{"percentages":120,"unit":"percentages"},"letterSpacing":0,"fontSize":16,"font":{"themeFont":"body1"},"contentTextTransform":"none","isBold":false,"isItalic":false,"textStyle":{"bold":false,"italic":false,"underline":false},"textDirection":2,"formattedText":"Heading 3","verticalAlignment":"center"},"metaData":{"position":{"left":-80,"top":0},"size":{"width":160,"height":56}},"isForBackground":true,"isForShadow":true}],"offset":{"left":1494,"top":1027},"isForBackground":true,"hasBackgroundChild":true,"isForShadow":true}],"connections":{"targetConnections":{},"sourceConnections":{}},"customStatesProperties":{"id1457434147104":{"backgroundColor":{"MouseOverState":{"id1457434147104":{"transitionInDuration":200,"transitionOutDuration":200,"easing":"linear","useCustomExitAnimation":false,"stateValue":{"mainColor":1,"variation":2,"opacity":1,"brightness":0.05}}}}},"id1457434147107":{"fontSize":{"MouseDownState":{"id1457434147104":{"transitionInDuration":0,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":false,"stateValue":15}}}}},"pageId":"id1438683250677","version":17.004,"id":"id1457434152865","relativePoint":{"left":1494,"top":1027},"styleVersion":1457434153237,"styleId":1467709683537,"fieldsToData":{"backgroundColor":{"name":"backgroundColor","fieldType":"BackgroundColor","categoryId":"Colors","priority":0,"title":"Background"},"borderColor0":{"name":"borderColor0","fieldType":"SolidColor","categoryId":"Colors","priority":1,"title":"Border"},"borderWidth0":{"name":"borderWidth0","fieldType":"Pixels","categoryId":"Border","priority":2,"title":"Border Width","options":{"fieldVisualizer":"Slider","visualizerOptions":{"min":0,"max":20}}},"padding":{"name":"padding","fieldType":"Padding","categoryId":"Border","priority":3,"title":"Padding"},"roundness":{"name":"roundness","fieldType":"Roundness","categoryId":"Border","priority":4,"title":"Roundness"},"shadow":{"name":"shadow","fieldType":"Shadow","categoryId":"Effects","priority":5,"title":"Shadow"},"glow":{"name":"glow","fieldType":"Glow","categoryId":"Effects","priority":6,"title":"Glow"},"innerShadow":{"name":"innerShadow","fieldType":"InnerShadow","categoryId":"Effects","priority":7,"title":"Inner Shadow"},"innerGlow":{"name":"innerGlow","fieldType":"InnerGlow","categoryId":"Effects","priority":8,"title":"Inner Glow"},"fontSize1":{"name":"fontSize1","fieldType":"Pixels","categoryId":"Text","priority":9,"title":"Text Size","options":{"fieldVisualizer":"NumericTextBox","visualizerOptions":{"min":0}}},"fontColor1":{"name":"fontColor1","fieldType":"SolidColor","categoryId":"Colors","priority":10,"title":"Text"},"font1":{"name":"font1","fieldType":"Font","categoryId":"Text","priority":11,"title":"Font"}},"categoriesData":{"Colors":{"title":"Colors","priority":1,"id":"Colors"},"Border":{"title":"Border","priority":3,"id":"Border"},"Effects":{"title":"Effects","priority":4,"id":"Effects"},"Text":{"title":"Text","priority":2,"id":"Text"}},"fieldsToValues":{"backgroundColor":{"87":{},"NormalState":{"value":{"mainColor":1,"variation":3,"opacity":1,"brightness":0}},"MouseOverState":{"value":{"mainColor":1,"variation":2,"opacity":1,"brightness":0.05}},"MouseDownState":{},"MobileResponsiveStateId1234":{"value":{"mainColor":1,"variation":3,"opacity":1,"brightness":0}}},"borderColor0":{"87":{},"NormalState":{"value":{"mainColor":1,"variation":2,"opacity":1,"brightness":-0.06}},"MouseOverState":{},"MouseDownState":{},"MobileResponsiveStateId1234":{"value":{"mainColor":1,"variation":2,"opacity":1,"brightness":-0.06}}},"borderWidth0":{"87":{},"NormalState":{"value":0},"MouseOverState":{},"MouseDownState":{},"MobileResponsiveStateId1234":{"value":0}},"padding":{"87":{},"NormalState":{"value":{"top":0,"left":0,"bottom":0,"right":0}},"MouseOverState":{},"MouseDownState":{},"MobileResponsiveStateId1234":{"value":{"top":0,"left":0,"right":0,"bottom":0}}},"roundness":{"87":{},"NormalState":{"value":{"topLeft":0,"topRight":0,"bottomLeft":0,"bottomRight":0}},"MouseOverState":{},"MouseDownState":{},"MobileResponsiveStateId1234":{"value":{"topLeft":0,"topRight":0,"bottomLeft":0,"bottomRight":0}}},"shadow":{"87":{},"NormalState":{"value":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"}},"MouseOverState":{},"MouseDownState":{},"MobileResponsiveStateId1234":{"value":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"}}},"glow":{"87":{},"NormalState":{"value":{"spread":0,"blur":0,"color":"black"}},"MouseOverState":{},"MouseDownState":{},"MobileResponsiveStateId1234":{"value":{"spread":0,"blur":0,"color":"black"}}},"innerShadow":{"87":{},"NormalState":{"value":{"top":0,"left":0,"spread":0,"blur":0,"color":"rgba(0,0,0,0.1)"}},"MouseOverState":{},"MouseDownState":{},"MobileResponsiveStateId1234":{"value":{"top":0,"left":0,"spread":0,"blur":0,"color":"rgba(0,0,0,0.1)"}}},"innerGlow":{"87":{},"NormalState":{"value":{"spread":0,"blur":0,"color":"black"}},"MouseOverState":{},"MouseDownState":{},"MobileResponsiveStateId1234":{"value":{"spread":0,"blur":0,"color":"black"}}},"fontSize1":{"87":{"value":15},"NormalState":{"value":16},"MouseDownState":{"value":15},"MouseOverState":{},"MobileResponsiveStateId1234":{"value":16}},"fontColor1":{"87":{},"NormalState":{"value":{"mainColor":3,"variation":0,"opacity":1,"brightness":0}},"MouseOverState":{},"MouseDownState":{},"MobileResponsiveStateId1234":{"value":{"mainColor":3,"variation":0,"opacity":1,"brightness":0}}},"font1":{"87":{},"NormalState":{"value":{"themeFont":"heading1"}},"MouseOverState":{},"MouseDownState":{},"MobileResponsiveStateId1234":{"value":{"themeFont":"heading1"}}}},"statesAnimations":{"87":{"transitionInDuration":0,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":false},"MouseOverState":{"transitionInDuration":200,"transitionOutDuration":200,"easing":"linear","useCustomExitAnimation":false},"MouseDownState":{"transitionInDuration":0,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":false}},"StructureVersion":17.004}},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","basicUserCanEdit":true,"verticalLayout":"normal","horizontalLayout":"centered","fillLayout":{"fillVertical":false,"fillHorizontal":true},"margin":{"top":189,"left":20,"bottom":0,"right":20},"isVisible":true,"buttonAction":{"type":"SubmitForm","data":{"targetId":"id1785335875236","options":{"triggerType":3,"triggerName":"MouseClick"}}},"iconReference":null,"formattedText":"Subscribe"},"metaData":{"position":{"left":217,"top":1782},"size":{"width":203,"height":35},"isTextButton":true},"childElements":[]}]}]},{"type":"SectionElement","id":"id1785798259399","elementProperties":{"tagName":"SECTION","behaviours":null,"isLocked":false,"name":"Section 9","baseName":null,"templateID":null,"templateName":null,"order":5,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{"categoryId":199},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"height":831,"left":0,"width":1178,"top":0},"lastResizingSize":{"height":831,"left":0,"width":1178,"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":"3D_2PT_Perspective App-Section 3","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":-555.8333740234375,"top":1896},"size":{"width":1112,"height":831}},"childElements":[{"type":"ExternalAppembed_html_app1","id":"id1785332685388","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Embed Html 2","baseName":null,"templateID":"templateid1785332685389","templateName":null,"order":51,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":960,"height":658,"left":-480,"top":98},"lastResizingSize":{"width":960,"height":658,"left":-480,"top":98},"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>Perfect Perspective Studio</title>\n    <style>\n        body {\n            margin: 0; padding: 0; background-color: #f1f5f9;\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            overflow: hidden; display: flex; flex-direction: column; height: 100vh;\n        }\n        #controls {\n            background: #ffffff; padding: 12px 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n            display: flex; flex-wrap: wrap; gap: 15px; align-items: center; z-index: 10;\n        }\n        .control-group { display: flex; align-items: center; gap: 6px; }\n        label { font-size: 13px; font-weight: 600; color: #334155; }\n        select {\n            padding: 5px 8px; border-radius: 4px; border: 1px solid #cbd5e1;\n            background: #f8fafc; font-size: 13px; font-weight: 600; color: #0f172a; cursor: pointer;\n        }\n        input[type=\"range\"] { width: 110px; accent-color: #0284c7; }\n        input[type=\"range\"]:disabled { opacity: 0.4; cursor: not-allowed; }\n        .btn {\n            background: #64748b; color: white; border: none; padding: 6px 12px;\n            border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer;\n            transition: background 0.2s;\n        }\n        .btn:hover { background: #475569; }\n        .btn.active { background: #16a34a; }\n        \n        .file-upload-btn {\n            background: #0284c7; color: white; border: none; padding: 6px 12px;\n            border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer;\n            display: inline-block; transition: background 0.2s;\n        }\n        .file-upload-btn:hover { background: #0369a1; }\n        #imageLoader { display: none; }\n\n        .instructions {\n            font-size: 12px; color: #64748b; margin-left: auto;\n            background: #f8fafc; padding: 6px 12px; border-radius: 4px; border: 1px solid #e2e8f0;\n        }\n        \n        #canvas-container { flex: 1; position: relative; background: #fafafa; overflow: hidden; }\n        canvas { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }\n\n        #imageOverlay {\n            position: absolute; top: 50px; left: 50px; width: 350px;\n            cursor: move; z-index: 5; opacity: 0.5; user-select: none;\n            box-sizing: border-box; border: 1px dashed #0284c7;\n        }\n        #imageOverlay img { width: 100%; height: 100%; display: block; pointer-events: none; }\n        .resize-handle {\n            width: 14px; height: 14px; background: #0284c7; border: 2px solid #ffffff;\n            border-radius: 50%; position: absolute; right: -7px; bottom: -7px;\n            cursor: se-resize; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 6;\n        }\n    </style>\n</head>\n<body>\n\n    <div id=\"controls\">\n        <div class=\"control-group\">\n            <label for=\"modeSelect\">Mode:</label>\n            <select id=\"modeSelect\">\n                <option value=\"2pt\">2-Point Perspective</option>\n                <option value=\"1pt\">1-Point Perspective</option>\n                <option value=\"3pt\">3-Point Perspective</option>\n            </select>\n        </div>\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 (Looking Down)</option>\n                <option value=\"wormsEye\">Worm's-Eye (Looking Up at High-Rise)</option>\n            </select>\n        </div>\n        <div class=\"control-group\">\n            <label for=\"horizonSlider\">Horizon Y:</label>\n            <input type=\"range\" id=\"horizonSlider\" min=\"15\" max=\"85\" value=\"45\">\n        </div>\n        <div class=\"control-group\">\n            <label for=\"vp1Slider\" id=\"vp1Label\">Left VP X:</label>\n            <input type=\"range\" id=\"vp1Slider\" min=\"5\" max=\"95\" value=\"15\">\n        </div>\n        <div class=\"control-group\" id=\"vp2Group\">\n            <label for=\"vp2Slider\">Right VP X:</label>\n            <input type=\"range\" id=\"vp2Slider\" min=\"55\" max=\"95\" value=\"85\">\n        </div>\n        <div class=\"control-group\" id=\"vp3Group\" style=\"display: none;\">\n            <label for=\"vp3Slider\">VP 3 Distance:</label>\n            <input type=\"range\" id=\"vp3Slider\" min=\"200\" max=\"1000\" value=\"450\">\n        </div>\n        <div class=\"control-group\">\n            <label for=\"heightSlider\">Height:</label>\n            <input type=\"range\" id=\"heightSlider\" min=\"30\" max=\"220\" value=\"120\">\n        </div>\n        <div class=\"control-group\">\n            <label for=\"depthLeftSlider\">Left Depth:</label>\n            <input type=\"range\" id=\"depthLeftSlider\" min=\"10\" max=\"80\" value=\"45\">\n        </div>\n        <div class=\"control-group\">\n            <label for=\"depthRightSlider\">Right Depth:</label>\n            <input type=\"range\" id=\"depthRightSlider\" min=\"10\" max=\"80\" value=\"45\">\n        </div>\n        <button id=\"toggleGrid\" class=\"btn\">Toggle Floor Grid</button>\n        \n        <div class=\"control-group\" style=\"border-left: 1px solid #cbd5e1; padding-left: 15px;\">\n            <label class=\"file-upload-btn\" for=\"imageLoader\">Import Image</label>\n            <input type=\"file\" id=\"imageLoader\" accept=\"image/*\">\n        </div>\n        <div class=\"control-group\">\n            <label for=\"opacitySlider\">Opacity:</label>\n            <input type=\"range\" id=\"opacitySlider\" min=\"0\" max=\"1\" step=\"0.05\" value=\"0.5\">\n        </div>\n        <button id=\"toggleLayer\" class=\"btn\">Bring Grid to Front</button>\n\n        <div class=\"instructions\">\n            🎥 Drag the **Front Vertical Edge** to slide the structure across the plane.\n        </div>\n    </div>\n\n    <div id=\"canvas-container\">\n        <canvas id=\"perspectiveCanvas\"></canvas>\n        <div id=\"imageOverlay\" style=\"display: none;\">\n            <img id=\"uploadedImage\" src=\"\" alt=\"Reference Image\">\n            <div class=\"resize-handle\" 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 toggleGridBtn = document.getElementById('toggleGrid');\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 gridIsFront = 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', () => {\n            draw();\n        });\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) {\n            imageOverlay.style.opacity = e.target.value;\n        });\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        function resizeCanvas() {\n            canvas.width = container.clientWidth;\n            canvas.height = container.clientHeight;\n            updatePositionsFromSliders();\n            draw();\n        }\n\n        function updatePositionsFromSliders() {\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 (cubeFrontTop.x === 0 && cubeFrontTop.y === 0) {\n                cubeFrontTop.x = canvas.width / 2;\n                cubeFrontTop.y = horizonY + 40;\n            }\n            \n            cubeFrontBottom.x = cubeFrontTop.x;\n            cubeFrontBottom.y = cubeFrontTop.y + cubeHeight;\n        }\n\n        window.addEventListener('resize', resizeCanvas);\n        \n        [horizonSlider, vp1Slider, vp2Slider, vp3Slider, heightSlider, depthLeftSlider, depthRightSlider].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.clientX : e.clientX;\n            const cy = e.touches ? e.touches.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 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 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            ctx.strokeStyle = 'rgba(239, 68, 68, 0.22)'; ctx.lineWidth = 1;\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            ctx.strokeStyle = 'rgba(239, 68, 68, 0.22)'; ctx.lineWidth = 1;\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            // Determine VP3 position based on View Angle choice\n            const dist = parseInt(vp3Slider.value);\n            const isWormsEye = viewAngleSelect.value === 'wormsEye';\n            \n            // Worm's-Eye puts VP3 up in the sky (-dist); Bird's-Eye puts VP3 down in the ground (+dist)\n            const vp3YPos = isWormsEye ? horizonY - dist : horizonY + dist;\n            const vp3 = { x: canvas.width / 2, y: vp3YPos };\n\n            // 1. Horizon Line\n            ctx.strokeStyle = '#94a3b8'; ctx.lineWidth = 2;\n            ctx.beginPath(); ctx.moveTo(0, horizonY); ctx.lineTo(canvas.width, horizonY); ctx.stroke();\n\n            // 2. Vanishing Points\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            // 3. Projections\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            // Calculate second corner along the vertical ray receding toward VP3\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            // 4. Construction Rays\n            ctx.strokeStyle = 'rgba(239, 68, 68, 0.22)'; ctx.lineWidth = 1;\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                // 5. Solid Faces\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                // Caps\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                // 6. Outlines\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                // Inner wireframe\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\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        resizeCanvas();\n    </script>\n</body>\n</html>","embed_html_app1headerHtml":""},"metaData":{"position":{"left":-480.0000305175781,"top":1994},"size":{"width":960,"height":658}}}]},{"type":"SectionElement","id":"id1785798487792","elementProperties":{"tagName":"SECTION","behaviours":null,"isLocked":false,"name":"Section 10","baseName":null,"templateID":null,"templateName":null,"order":6,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{"categoryId":199},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"height":937,"left":20,"width":1178,"top":-1719},"lastResizingSize":{"height":937,"left":20,"width":1178,"top":-1719},"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":"3D_2PT_Perspective App- w/Roof-Section 4","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":-555.8333740234375,"top":2727},"size":{"width":1112,"height":937}},"childElements":[{"type":"ExternalAppembed_html_app1","id":"id1785333043252","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Embed Html 5","baseName":null,"templateID":"templateid1785333043253","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":960,"height":628,"left":-480,"top":97},"lastResizingSize":{"width":960,"height":628,"left":-480,"top":97},"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>Perfect 2-Point Perspective Studio - House Edition</title>\n    <style>\n        body {\n            margin: 0; padding: 0; background-color: #f1f5f9;\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            overflow: hidden; display: flex; flex-direction: column; height: 100vh;\n        }\n        #controls {\n            background: #ffffff; padding: 12px 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n            display: flex; flex-wrap: wrap; gap: 15px; align-items: center; z-index: 10;\n        }\n        .control-group { display: flex; align-items: center; gap: 6px; }\n        label { font-size: 13px; font-weight: 600; color: #334155; }\n        input[type=\"range\"] { width: 90px; accent-color: #0284c7; }\n        \n        .reset-btn {\n            background: #e2e8f0; color: #334155; border: 1px solid #cbd5e1;\n            padding: 2px 6px; font-size: 11px; font-weight: bold; border-radius: 3px;\n            cursor: pointer; transition: background 0.2s;\n        }\n        .reset-btn:hover { background: #cbd5e1; }\n\n        .btn {\n            background: #64748b; color: white; border: none; padding: 6px 12px;\n            border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer;\n            transition: background 0.2s;\n        }\n        .btn:hover { background: #475569; }\n        .btn.active { background: #16a34a; }\n        \n        .file-upload-btn {\n            background: #0284c7; color: white; border: none; padding: 6px 12px;\n            border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer;\n            display: inline-block; transition: background 0.2s;\n        }\n        .file-upload-btn:hover { background: #0369a1; }\n        #imageLoader { display: none; }\n        \n        #canvas-container { flex: 1; position: relative; background: #fafafa; overflow: hidden; }\n        canvas { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }\n\n        #imageOverlay {\n            position: absolute; top: 50px; left: 50px; width: 350px; cursor: move;\n            z-index: 5; opacity: 0.5; user-select: none; box-sizing: border-box; border: 1px dashed #0284c7;\n        }\n        #imageOverlay img { width: 100%; height: 100%; display: block; pointer-events: none; }\n        .resize-handle {\n            width: 14px; height: 14px; background: #0284c7; border: 2px solid #ffffff;\n            border-radius: 50%; position: absolute; right: -7px; bottom: -7px;\n            cursor: se-resize; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 6;\n        }\n    </style>\n</head>\n<body>\n\n    <div id=\"controls\">\n        <div class=\"control-group\">\n            <label for=\"horizonSlider\">Horizon Y:</label>\n            <input type=\"range\" id=\"horizonSlider\" min=\"5\" max=\"95\" value=\"45\">\n        </div>\n        <div class=\"control-group\" style=\"background: #f8fafc; padding: 3px 6px; border-radius: 4px; border: 1px solid #e2e8f0;\">\n            <label for=\"angleSlider\">Angle:</label>\n            <input type=\"range\" id=\"angleSlider\" min=\"-15\" max=\"15\" step=\"0.1\" value=\"0\">\n            <button id=\"resetAngle\" class=\"reset-btn\">0°</button>\n        </div>\n        <div class=\"control-group\">\n            <label for=\"vp1Slider\">Left VP X:</label>\n            <input type=\"range\" id=\"vp1Slider\" min=\"-300\" max=\"45\" value=\"15\">\n        </div>\n        <div class=\"control-group\">\n            <label for=\"vp2Slider\">Right VP X:</label>\n            <input type=\"range\" id=\"vp2Slider\" min=\"55\" max=\"400\" value=\"85\">\n        </div>\n        <div class=\"control-group\">\n            <label for=\"heightSlider\">Wall H:</label>\n            <input type=\"range\" id=\"heightSlider\" min=\"30\" max=\"220\" value=\"120\">\n        </div>\n        <div class=\"control-group\">\n            <label for=\"roofSlider\">Roof H:</label>\n            <input type=\"range\" id=\"roofSlider\" min=\"0\" max=\"150\" value=\"60\">\n        </div>\n        <div class=\"control-group\">\n            <label for=\"depthLeftSlider\">L-Depth:</label>\n            <input type=\"range\" id=\"depthLeftSlider\" min=\"10\" max=\"80\" value=\"45\">\n        </div>\n        <div class=\"control-group\">\n            <label for=\"depthRightSlider\">R-Depth:</label>\n            <input type=\"range\" id=\"depthRightSlider\" min=\"10\" max=\"80\" value=\"45\">\n        </div>\n        <button id=\"toggleRoofDir\" class=\"btn\">Roof Dir: Side</button>\n        <button id=\"toggleGuides\" class=\"btn active\">VP Guides</button>\n        <button id=\"toggleGrid\" class=\"btn\">Floor Grid</button>\n        \n        <div class=\"control-group\" style=\"border-left: 1px solid #cbd5e1; padding-left: 10px;\">\n            <label class=\"file-upload-btn\" for=\"imageLoader\">Import</label>\n            <input type=\"file\" id=\"imageLoader\" accept=\"image/*\">\n        </div>\n        <div class=\"control-group\">\n            <label for=\"opacitySlider\">Opa:</label>\n            <input type=\"range\" id=\"opacitySlider\" min=\"0\" max=\"1\" step=\"0.05\" value=\"0.5\">\n        </div>\n        <button id=\"toggleLayer\" class=\"btn\">Grid to Front</button>\n    </div>\n\n    <div id=\"canvas-container\">\n        <canvas id=\"perspectiveCanvas\"></canvas>\n        <div id=\"imageOverlay\" style=\"display: none;\">\n            <img id=\"uploadedImage\" src=\"\" alt=\"Reference Image\">\n            <div class=\"resize-handle\" 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 horizonSlider = document.getElementById('horizonSlider');\n        const angleSlider = document.getElementById('angleSlider');\n        const resetAngleBtn = document.getElementById('resetAngle');\n        const vp1Slider = document.getElementById('vp1Slider');\n        const vp2Slider = document.getElementById('vp2Slider');\n        const heightSlider = document.getElementById('heightSlider');\n        const roofSlider = document.getElementById('roofSlider');\n        const depthLeftSlider = document.getElementById('depthLeftSlider');\n        const depthRightSlider = document.getElementById('depthRightSlider');\n        \n        const toggleRoofDirBtn = document.getElementById('toggleRoofDir');\n        const toggleGuidesBtn = document.getElementById('toggleGuides');\n        const toggleGridBtn = document.getElementById('toggleGrid');\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 horizonAngle = 0; \n        let vp1X = 0;\n        let vp2X = 0;\n        let showGuides = true;\n        let showGrid = false;\n        let gridIsFront = false;\n        let roofDirection = 'side'; \n\n        let cubeFrontTop = { x: 0, y: 0 };\n        let cubeFrontBottom = { x: 0, y: 0 };\n        let cubeHeight = parseInt(heightSlider.value);\n        let roofHeight = parseInt(roofSlider.value);\n\n        let isDragging = false;\n        let dragOffset = { x: 0, y: 0 };\n        const interactionRadius = 25;\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        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 = \"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 = \"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) {\n            imageOverlay.style.opacity = e.target.value;\n        });\n\n        imageOverlay.addEventListener('mousedown', function(e) {\n            if (e.target === resizeHandle) {\n                isOverlayResizing = true;\n                overlayStartX = e.clientX;\n                overlayStartY = e.clientY;\n                overlayStartWidth = imageOverlay.clientWidth;\n                overlayStartHeight = imageOverlay.clientHeight;\n                e.preventDefault();\n                e.stopPropagation();\n            } else {\n                isOverlayDragging = true;\n                overlayStartX = e.clientX;\n                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        toggleGuidesBtn.addEventListener('click', () => {\n            showGuides = !showGuides;\n            toggleGuidesBtn.classList.toggle('active', showGuides);\n            draw();\n        });\n\n        toggleRoofDirBtn.addEventListener('click', () => {\n            roofDirection = (roofDirection === 'side') ? 'front' : 'side';\n            toggleRoofDirBtn.textContent = `Roof Dir: ${roofDirection.charAt(0).toUpperCase() + roofDirection.slice(1)}`;\n            toggleRoofDirBtn.classList.toggle('active', roofDirection === 'front');\n            draw();\n        });\n\n        resetAngleBtn.addEventListener('click', () => {\n            angleSlider.value = 0;\n            updatePositionsFromSliders();\n            draw();\n        });\n\n        function resizeCanvas() {\n            canvas.width = container.clientWidth;\n            canvas.height = container.clientHeight;\n            updatePositionsFromSliders();\n            draw();\n        }\n\n        function updatePositionsFromSliders() {\n            horizonY = (parseInt(horizonSlider.value) / 100) * canvas.height;\n            horizonAngle = (parseFloat(angleSlider.value) * Math.PI) / 180;\n            \n            vp1X = (parseInt(vp1Slider.value) / 100) * canvas.width;\n            vp2X = (parseInt(vp2Slider.value) / 100) * canvas.width;\n            \n            cubeHeight = parseInt(heightSlider.value);\n            roofHeight = parseInt(roofSlider.value);\n\n            if (cubeFrontTop.x === 0 && cubeFrontTop.y === 0) {\n                cubeFrontTop.x = canvas.width / 2;\n                cubeFrontTop.y = horizonY + 40;\n            }\n            \n            cubeFrontBottom.x = cubeFrontTop.x;\n            cubeFrontBottom.y = cubeFrontTop.y + cubeHeight;\n        }\n\n        window.addEventListener('resize', resizeCanvas);\n        \n        [horizonSlider, angleSlider, vp1Slider, vp2Slider, heightSlider, roofSlider, depthLeftSlider, depthRightSlider].forEach(slider => {\n            slider.addEventListener('input', () => { updatePositionsFromSliders(); draw(); });\n        });\n\n        function getMousePos(e) {\n            const rect = canvas.getBoundingClientRect();\n            return { x: e.clientX - rect.left, y: e.clientY - rect.top };\n        }\n\n        function getRotatedMousePos(e) {\n            const basePos = getMousePos(e);\n            const cx = canvas.width / 2;\n            const cy = horizonY;\n            \n            const dx = basePos.x - cx;\n            const dy = basePos.y - cy;\n            const cos = Math.cos(-horizonAngle);\n            const sin = Math.sin(-horizonAngle);\n            \n            return {\n                x: cx + (dx * cos - dy * sin),\n                y: cy + (dx * sin + dy * cos)\n            };\n        }\n\n        canvas.addEventListener('mousedown', (e) => {\n            const pos = getRotatedMousePos(e);\n            const minX = cubeFrontTop.x - interactionRadius;\n            const maxX = cubeFrontTop.x + interactionRadius;\n            const minY = Math.min(cubeFrontTop.y, cubeFrontBottom.y) - 40;\n            const maxY = Math.max(cubeFrontTop.y, cubeFrontBottom.y) + 40;\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 = getRotatedMousePos(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) - 40;\n                const maxY = Math.max(cubeFrontTop.y, cubeFrontBottom.y) + 40;\n                canvas.style.cursor = (pos.x >= minX && pos.x <= maxX && pos.y >= minY && pos.y <= maxY) ? 'move' : 'default';\n                return;\n            }\n\n            cubeFrontTop.x = pos.x - dragOffset.x;\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 drawGrid(vp1, vp2) {\n            ctx.strokeStyle = 'rgba(148, 163, 184, 0.12)'; ctx.lineWidth = 1;\n            const linesCount = 24;\n            const dispersion = Math.max(canvas.width, canvas.height) * 4;\n            \n            for (let i = 0; i <= linesCount; i++) {\n                const targetOffset = (dispersion * 2 / linesCount) * i - dispersion;\n                \n                ctx.beginPath(); \n                ctx.moveTo(vp1.x, vp1.y); \n                ctx.lineTo(canvas.width / 2 + targetOffset, canvas.height * 3); \n                ctx.stroke();\n                \n                ctx.beginPath(); \n                ctx.moveTo(vp2.x, vp2.y); \n                ctx.lineTo(canvas.width / 2 - targetOffset, canvas.height * 3); \n                ctx.stroke();\n            }\n        }\n\n        function draw() {\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n            const vp1 = { x: vp1X, y: horizonY };\n            const vp2 = { x: vp2X, y: horizonY };\n\n            ctx.save();\n            ctx.translate(canvas.width / 2, horizonY);\n            ctx.rotate(horizonAngle);\n            ctx.translate(-canvas.width / 2, -horizonY);\n\n            if (showGrid) drawGrid(vp1, vp2);\n\n            // 1. Render Horizon Line\n            ctx.strokeStyle = '#94a3b8'; ctx.lineWidth = 2;\n            ctx.beginPath(); \n            ctx.moveTo(-canvas.width * 3, horizonY); \n            ctx.lineTo(canvas.width * 4, horizonY); \n            ctx.stroke();\n\n            // 2. Render Focal Point Nodes\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            // 3. Mathematical Depth Extents\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: -canvas.height * 2}, {x: leftFaceX, y: canvas.height * 3});\n            const leftBottom = getLineIntersection(cubeFrontBottom, vp1, {x: leftFaceX, y: -canvas.height * 2}, {x: leftFaceX, y: canvas.height * 3});\n            const rightTop = getLineIntersection(cubeFrontTop, vp2, {x: rightFaceX, y: -canvas.height * 2}, {x: rightFaceX, y: canvas.height * 3});\n            const rightBottom = getLineIntersection(cubeFrontBottom, vp2, {x: rightFaceX, y: -canvas.height * 2}, {x: rightFaceX, y: canvas.height * 3});\n            const backTop = getLineIntersection(leftTop, vp2, rightTop, vp1);\n            const backBottom = getLineIntersection(leftBottom, vp2, rightBottom, vp1);\n\n            if (leftTop && leftBottom && rightTop && rightBottom && backTop && backBottom) {\n                \n                let frontPeak = null;\n                let backPeak = null;\n\n                // 4. Global Vanishing Point Guides\n                if (showGuides) {\n                    ctx.lineWidth = 1;\n                    \n                    // Left Projection (Red)\n                    ctx.strokeStyle = 'rgba(239, 68, 68, 0.4)';\n                    ctx.beginPath();\n                    ctx.moveTo(vp1.x, vp1.y); ctx.lineTo(cubeFrontTop.x, cubeFrontTop.y);\n                    ctx.moveTo(vp1.x, vp1.y); ctx.lineTo(cubeFrontBottom.x, cubeFrontBottom.y);\n                    ctx.moveTo(vp1.x, vp1.y); ctx.lineTo(rightTop.x, rightTop.y);\n                    ctx.moveTo(vp1.x, vp1.y); ctx.lineTo(rightBottom.x, rightBottom.y);\n                    ctx.stroke();\n\n                    // Right Projection (Blue)\n                    ctx.strokeStyle = 'rgba(14, 165, 233, 0.4)';\n                    ctx.beginPath();\n                    ctx.moveTo(vp2.x, vp2.y); ctx.lineTo(cubeFrontTop.x, cubeFrontTop.y);\n                    ctx.moveTo(vp2.x, vp2.y); ctx.lineTo(cubeFrontBottom.x, cubeFrontBottom.y);\n                    ctx.moveTo(vp2.x, vp2.y); ctx.lineTo(leftTop.x, leftTop.y);\n                    ctx.moveTo(vp2.x, vp2.y); ctx.lineTo(leftBottom.x, leftBottom.y);\n                    ctx.stroke();\n                }\n\n                // Solid Wall Shading\n                ctx.fillStyle = 'rgba(14, 165, 233, 0.20)'; \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                if (roofHeight > 0) {\n                    if (roofDirection === 'side') {\n                        // SIDE GABLE MATRIX (Ridge runs along VP2)\n                        const frontLeftCenterDiag = getLineIntersection(leftTop, cubeFrontBottom, leftBottom, cubeFrontTop);\n                        const backRightCenterDiag = getLineIntersection(backTop, rightBottom, backBottom, rightTop);\n\n                        if (frontLeftCenterDiag && backRightCenterDiag) {\n                            const frontCenterLineTop = { x: frontLeftCenterDiag.x, y: -canvas.height * 2 };\n                            const frontCenterLineBottom = { x: frontLeftCenterDiag.x, y: canvas.height * 3 };\n                            const backCenterLineTop = { x: backRightCenterDiag.x, y: -canvas.height * 2 };\n                            const backCenterLineBottom = { x: backRightCenterDiag.x, y: canvas.height * 3 };\n\n                            const frontWallTopCenter = getLineIntersection(leftTop, cubeFrontTop, frontCenterLineTop, frontCenterLineBottom);\n                            if (frontWallTopCenter) {\n                                frontPeak = { x: frontWallTopCenter.x, y: frontWallTopCenter.y - roofHeight };\n                                backPeak = getLineIntersection(frontPeak, vp2, backCenterLineTop, backCenterLineBottom);\n                            }\n                        }\n\n                        if (frontPeak && backPeak) {\n                            if (showGuides) {\n                                ctx.lineWidth = 1;\n                                ctx.strokeStyle = 'rgba(239, 68, 68, 0.4)'; // Red Guide to Peak\n                                ctx.beginPath(); ctx.moveTo(vp1.x, vp1.y); ctx.lineTo(frontPeak.x, frontPeak.y); ctx.stroke();\n                                ctx.strokeStyle = 'rgba(14, 165, 233, 0.4)'; // Blue Guide to Peak\n                                ctx.beginPath(); ctx.moveTo(vp2.x, vp2.y); ctx.lineTo(frontPeak.x, frontPeak.y); ctx.stroke();\n                            }\n\n                            // Gable End Fill (Left Face)\n                            ctx.fillStyle = 'rgba(14, 165, 233, 0.20)';\n                            ctx.beginPath(); ctx.moveTo(leftTop.x, leftTop.y); ctx.lineTo(frontPeak.x, frontPeak.y); ctx.lineTo(cubeFrontTop.x, cubeFrontTop.y); ctx.fill();\n\n                            // Sloped Pitch Fills\n                            ctx.fillStyle = 'rgba(224, 100, 36, 0.35)'; \n                            ctx.beginPath(); ctx.moveTo(cubeFrontTop.x, cubeFrontTop.y); ctx.lineTo(frontPeak.x, frontPeak.y); ctx.lineTo(backPeak.x, backPeak.y); ctx.lineTo(rightTop.x, rightTop.y); ctx.fill();\n\n                            ctx.fillStyle = 'rgba(224, 100, 36, 0.50)'; \n                            ctx.beginPath(); ctx.moveTo(leftTop.x, leftTop.y); ctx.lineTo(frontPeak.x, frontPeak.y); ctx.lineTo(backPeak.x, backPeak.y); ctx.lineTo(backTop.x, backTop.y); ctx.fill();\n\n                            // Roof Edge Vectors\n                            ctx.strokeStyle = '#b45309'; ctx.lineWidth = 2.5;\n                            ctx.beginPath();\n                            ctx.moveTo(leftTop.x, leftTop.y); ctx.lineTo(frontPeak.x, frontPeak.y); ctx.lineTo(cubeFrontTop.x, cubeFrontTop.y);\n                            ctx.moveTo(frontPeak.x, frontPeak.y); ctx.lineTo(backPeak.x, backPeak.y);\n                            ctx.lineTo(backTop.x, backTop.y);\n                            ctx.moveTo(backPeak.x, backPeak.y); ctx.lineTo(rightTop.x, rightTop.y);\n                            ctx.stroke();\n                        }\n                    } else {\n                        // FRONT GABLE MATRIX (Ridge runs along VP1)\n                        const frontRightCenterDiag = getLineIntersection(cubeFrontTop, rightBottom, cubeFrontBottom, rightTop);\n                        const backLeftCenterDiag = getLineIntersection(leftTop, backBottom, leftBottom, backTop);\n\n                        if (frontRightCenterDiag && backLeftCenterDiag) {\n                            const frontCenterLineTop = { x: frontRightCenterDiag.x, y: -canvas.height * 2 };\n                            const frontCenterLineBottom = { x: frontRightCenterDiag.x, y: canvas.height * 3 };\n                            const backCenterLineTop = { x: backLeftCenterDiag.x, y: -canvas.height * 2 };\n                            const backCenterLineBottom = { x: backLeftCenterDiag.x, y: canvas.height * 3 };\n\n                            const frontWallTopCenter = getLineIntersection(cubeFrontTop, rightTop, frontCenterLineTop, frontCenterLineBottom);\n                            if (frontWallTopCenter) {\n                                frontPeak = { x: frontWallTopCenter.x, y: frontWallTopCenter.y - roofHeight };\n                                backPeak = getLineIntersection(frontPeak, vp1, backCenterLineTop, backCenterLineBottom);\n                            }\n                        }\n\n                        if (frontPeak && backPeak) {\n                            if (showGuides) {\n                                ctx.lineWidth = 1;\n                                ctx.strokeStyle = 'rgba(239, 68, 68, 0.4)'; // Red Guide to Peak\n                                ctx.beginPath(); ctx.moveTo(vp1.x, vp1.y); ctx.lineTo(frontPeak.x, frontPeak.y); ctx.stroke();\n                                ctx.strokeStyle = 'rgba(14, 165, 233, 0.4)'; // Blue Guide to Peak\n                                ctx.beginPath(); ctx.moveTo(vp2.x, vp2.y); ctx.lineTo(frontPeak.x, frontPeak.y); ctx.stroke();\n                            }\n\n                            // Gable End Fill (Front Face)\n                            ctx.fillStyle = 'rgba(14, 165, 233, 0.35)';\n                            ctx.beginPath(); ctx.moveTo(cubeFrontTop.x, cubeFrontTop.y); ctx.lineTo(frontPeak.x, frontPeak.y); ctx.lineTo(rightTop.x, rightTop.y); ctx.fill();\n\n                            // Sloped Pitch Fills\n                            ctx.fillStyle = 'rgba(224, 100, 36, 0.35)'; \n                            ctx.beginPath(); ctx.moveTo(cubeFrontTop.x, cubeFrontTop.y); ctx.lineTo(frontPeak.x, frontPeak.y); ctx.lineTo(backPeak.x, backPeak.y); ctx.lineTo(leftTop.x, leftTop.y); ctx.fill();\n\n                            ctx.fillStyle = 'rgba(224, 100, 36, 0.50)'; \n                            ctx.beginPath(); ctx.moveTo(rightTop.x, rightTop.y); ctx.lineTo(frontPeak.x, frontPeak.y); ctx.lineTo(backPeak.x, backPeak.y); ctx.lineTo(backTop.x, backTop.y); ctx.fill();\n\n                            // Roof Edge Vectors\n                            ctx.strokeStyle = '#b45309'; ctx.lineWidth = 2.5;\n                            ctx.beginPath();\n                            ctx.moveTo(cubeFrontTop.x, cubeFrontTop.y); ctx.lineTo(frontPeak.x, frontPeak.y); ctx.lineTo(rightTop.x, rightTop.y);\n                            ctx.moveTo(frontPeak.x, frontPeak.y); ctx.lineTo(backPeak.x, backPeak.y);\n                            ctx.lineTo(backTop.x, backTop.y);\n                            ctx.moveTo(backPeak.x, backPeak.y); ctx.lineTo(leftTop.x, leftTop.y);\n                            ctx.stroke();\n                        }\n                    }\n                }\n\n                // 5. Structural Corner Inks\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);\n                ctx.lineTo(rightBottom.x, rightBottom.y); ctx.lineTo(cubeFrontBottom.x, cubeFrontBottom.y);\n                ctx.stroke();\n\n                // 6. Structural Wireframe Occlusions\n                ctx.strokeStyle = 'rgba(3, 105, 161, 0.25)'; ctx.lineWidth = 1.5;\n                ctx.setLineDash([5, 5]);\n                ctx.beginPath();\n                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                \n                // If a roof gable centerline exists behind the front walls, draw it out\n                if (roofHeight > 0 && roofDirection === 'side') {\n                    const frontLeftCenterDiag = getLineIntersection(leftTop, cubeFrontBottom, leftBottom, cubeFrontTop);\n                    if (frontLeftCenterDiag) {\n                        const frontCenterLineTop = { x: frontLeftCenterDiag.x, y: -canvas.height * 2 };\n                        const frontCenterLineBottom = { x: frontLeftCenterDiag.x, y: canvas.height * 3 };\n                        const frontWallTopCenter = getLineIntersection(leftTop, cubeFrontTop, frontCenterLineTop, frontCenterLineBottom);\n                        if (frontWallTopCenter) {\n                            ctx.moveTo(frontWallTopCenter.x, frontWallTopCenter.y);\n                            ctx.lineTo(frontWallTopCenter.x, frontWallTopCenter.y - roofHeight);\n                        }\n                    }\n                } else if (roofHeight > 0 && roofDirection === 'front') {\n                    const frontRightCenterDiag = getLineIntersection(cubeFrontTop, rightBottom, cubeFrontBottom, rightTop);\n                    if (frontRightCenterDiag) {\n                        const frontCenterLineTop = { x: frontRightCenterDiag.x, y: -canvas.height * 2 };\n                        const frontCenterLineBottom = { x: frontRightCenterDiag.x, y: canvas.height * 3 };\n                        const frontWallTopCenter = getLineIntersection(cubeFrontTop, rightTop, frontCenterLineTop, frontCenterLineBottom);\n                        if (frontWallTopCenter) {\n                            ctx.moveTo(frontWallTopCenter.x, frontWallTopCenter.y);\n                            ctx.lineTo(frontWallTopCenter.x, frontWallTopCenter.y - roofHeight);\n                        }\n                    }\n                }\n\n                ctx.stroke();\n                ctx.setLineDash([]);\n            }\n\n            ctx.restore();\n        }\n\n        resizeCanvas();\n    </script>\n</body>\n</html>","embed_html_app1headerHtml":""},"metaData":{"position":{"left":-480.0000305175781,"top":2824},"size":{"width":960,"height":628}}}]},{"type":"SectionElement","id":"id1785798210862","elementProperties":{"tagName":"SECTION","behaviours":null,"isLocked":false,"name":"Section 8","baseName":null,"templateID":null,"templateName":null,"order":7,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{"categoryId":199},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"height":1482,"left":0,"width":1178,"top":0},"lastResizingSize":{"height":1482,"left":0,"width":1178,"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":"3D_2PT_Perspective-House_Spin-5","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":-555.8333740234375,"top":3664},"size":{"width":1112,"height":1482}},"childElements":[{"type":"ExternalAppembed_html_app1","id":"id1785332892649","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Embed Html 3","baseName":null,"templateID":"templateid1785332892650","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":957,"height":568,"left":-477,"top":42},"lastResizingSize":{"width":957,"height":568,"left":-477,"top":42},"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 HTML House Studio - Auto Rotation Capture</title>\n    <style>\n        body {\n            margin: 0; padding: 0; background-color: #f1f5f9;\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            overflow: hidden; display: flex; flex-direction: column; height: 100vh;\n        }\n        #controls {\n            background: #ffffff; padding: 12px 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n            display: flex; flex-wrap: wrap; gap: 15px; align-items: center; z-index: 10;\n        }\n        .control-group { display: flex; align-items: center; gap: 6px; }\n        label { font-size: 13px; font-weight: 600; color: #334155; }\n        input[type=\"range\"] { width: 90px; accent-color: #0284c7; }\n        \n        .btn {\n            background: #0284c7; color: white; border: 1px solid #0284c7;\n            padding: 4px 10px; font-size: 12px; font-weight: bold; border-radius: 4px;\n            cursor: pointer; display: flex; align-items: center; justify-content: center;\n        }\n        .btn:hover { background: #0369a1; }\n        .btn.playing { background: #ef4444; border-color: #ef4444; }\n        .btn.playing:hover { background: #dc2626; }\n\n        .reset-btn {\n            background: #e2e8f0; color: #334155; border: 1px solid #cbd5e1;\n            padding: 2px 6px; font-size: 11px; font-weight: bold; border-radius: 3px;\n            cursor: pointer;\n        }\n\n        #viewport {\n            flex: 1; position: relative; background: #fafafa;\n            display: flex; justify-content: center; align-items: center;\n            perspective: 1000px; \n            perspective-origin: 50% 30%;\n        }\n\n        #house-container {\n            position: relative;\n            transform-style: preserve-3d;\n            transform: rotateX(-15deg) rotateY(45deg);\n        }\n\n        /* Wall Face Base Styles */\n        .wall {\n            position: absolute;\n            box-sizing: border-box;\n            border: 2px solid #0369a1;\n            background-color: rgba(14, 165, 233, 0.35);\n        }\n        \n        .left-wall, .back-wall {\n            background-color: rgba(14, 165, 233, 0.20);\n        }\n\n        /* Front Wall Layout for Door */\n        .front-wall {\n            display: flex;\n            justify-content: center;\n            align-items: flex-end;\n        }\n\n        /* Proportional Scaling Door */\n        .door {\n            box-sizing: border-box;\n            border: 2px solid #7c2d12;\n            background-color: rgba(124, 45, 18, 0.6);\n            border-bottom: none;\n        }\n\n        /* Roof Panel Base Styles */\n        .roof-panel {\n            position: absolute;\n            box-sizing: border-box;\n            border: 2.5px solid #b45309;\n            background-color: rgba(224, 100, 36, 0.45);\n        }\n        \n        .left-roof {\n            background-color: rgba(224, 100, 36, 0.60);\n            transform-origin: 50% 100%; \n        }\n        .right-roof {\n            transform-origin: 50% 0%; \n        }\n\n        /* SVG Gable Plugs */\n        .gable-svg {\n            position: absolute;\n            fill: rgba(14, 165, 233, 0.35);\n            stroke: #0369a1;\n            stroke-width: 2px;\n            overflow: visible;\n        }\n    </style>\n</head>\n<body>\n\n    <div id=\"controls\">\n        <!-- New Auto-Rotation Engine Controls -->\n        <div class=\"control-group\" style=\"background: #f8fafc; padding: 4px 8px; border-radius: 6px; border: 1px solid #e2e8f0; gap: 10px;\">\n            <button id=\"spinBtn\" class=\"btn\">▶ Spin</button>\n            <div style=\"display: flex; align-items: center; gap: 4px;\">\n                <label for=\"speedSlider\">Speed:</label>\n                <input type=\"range\" id=\"speedSlider\" min=\"0.1\" max=\"5\" step=\"0.1\" value=\"1\">\n            </div>\n        </div>\n\n        <div class=\"control-group\" style=\"background: #f0fdf4; padding: 3px 6px; border-radius: 4px; border: 1px solid #bbf7d0;\">\n            <label for=\"rotationSlider\" style=\"color: #166534;\">Manual Y:</label>\n            <input type=\"range\" id=\"rotationSlider\" min=\"0\" max=\"360\" value=\"45\">\n            <button id=\"resetRotation\" class=\"reset-btn\">45°</button>\n        </div>\n        <div class=\"control-group\">\n            <label for=\"cameraPitch\">Camera Pitch:</label>\n            <input type=\"range\" id=\"cameraPitch\" min=\"-60\" max=\"60\" value=\"-15\">\n        </div>\n        <div class=\"control-group\">\n            <label for=\"widthSlider\">Width (X):</label>\n            <input type=\"range\" id=\"widthSlider\" min=\"100\" max=\"400\" value=\"240\">\n        </div>\n        <div class=\"control-group\">\n            <label for=\"depthSlider\">Depth (Z):</label>\n            <input type=\"range\" id=\"depthSlider\" min=\"100\" max=\"400\" value=\"200\">\n        </div>\n        <div class=\"control-group\">\n            <label for=\"heightSlider\">Wall H (Y):</label>\n            <input type=\"range\" id=\"heightSlider\" min=\"50\" max=\"300\" value=\"140\">\n        </div>\n        <div class=\"control-group\">\n            <label for=\"roofSlider\">Roof Pitch:</label>\n            <input type=\"range\" id=\"roofSlider\" min=\"0\" max=\"200\" value=\"75\">\n        </div>\n    </div>\n\n    <div id=\"viewport\">\n        <div id=\"house-container\">\n            <!-- Main Walls -->\n            <div id=\"front\" class=\"wall front-wall\">\n                <div id=\"door\" class=\"door\"></div>\n            </div>\n            <div id=\"back\" class=\"wall\"></div>\n            <div id=\"left\" class=\"wall left-wall\"></div>\n            <div id=\"right\" class=\"wall\"></div>\n\n            <!-- Triangular Side Gable Plugs -->\n            <div id=\"left-gable\"></div>\n            <div id=\"right-gable\"></div>\n\n            <!-- Main Roof Planes -->\n            <div id=\"roof-left\" class=\"roof-panel left-roof\"></div>\n            <div id=\"roof-right\" class=\"roof-panel right-roof\"></div>\n        </div>\n    </div>\n\n    <script>\n        const container = document.getElementById('house-container');\n        const rotationSlider = document.getElementById('rotationSlider');\n        const resetRotationBtn = document.getElementById('resetRotation');\n        const cameraPitchSlider = document.getElementById('cameraPitch');\n        \n        const widthSlider = document.getElementById('widthSlider');\n        const depthSlider = document.getElementById('depthSlider');\n        const heightSlider = document.getElementById('heightSlider');\n        const roofSlider = document.getElementById('roofSlider');\n\n        // Animation Variables\n        const spinBtn = document.getElementById('spinBtn');\n        const speedSlider = document.getElementById('speedSlider');\n        let isSpinning = false;\n        let animationFrameId = null;\n        let currentRotationY = 45;\n\n        function updateHouse() {\n            const rotX = cameraPitchSlider.value;\n            const w = parseInt(widthSlider.value);\n            const d = parseInt(depthSlider.value);\n            const h = parseInt(heightSlider.value);\n            const rh = parseInt(roofSlider.value);\n\n            // Use the tracking rotation coordinate variable\n            container.style.transform = `rotateX(${rotX}deg) rotateY(${currentRotationY}deg)`;\n            container.style.width = w + 'px';\n            container.style.height = h + 'px';\n\n            // Walls\n            document.getElementById('front').style.width = w + 'px';\n            document.getElementById('front').style.height = h + 'px';\n            document.getElementById('front').style.transform = `translate3d(0px, 0px, ${d/2}px)`;\n\n            const door = document.getElementById('door');\n            door.style.width = Math.max(30, w * 0.18) + 'px';\n            door.style.height = Math.max(45, h * 0.65) + 'px';\n\n            document.getElementById('back').style.width = w + 'px';\n            document.getElementById('back').style.height = h + 'px';\n            document.getElementById('back').style.transform = `translate3d(0px, 0px, ${-d/2}px) rotateY(180deg)`;\n\n            const leftWall = document.getElementById('left');\n            leftWall.style.width = d + 'px';\n            leftWall.style.height = h + 'px';\n            leftWall.style.left = (w/2 - d/2) + 'px';\n            leftWall.style.transform = `rotateY(-90deg) translate3d(0px, 0px, ${w/2}px)`;\n\n            const rightWall = document.getElementById('right');\n            rightWall.style.width = d + 'px';\n            rightWall.style.height = h + 'px';\n            rightWall.style.left = (w/2 - d/2) + 'px';\n            rightWall.style.transform = `rotateY(90deg) translate3d(0px, 0px, ${w/2}px)`;\n\n            // Gables\n            const leftGable = document.getElementById('left-gable');\n            leftGable.innerHTML = `<svg class=\"gable-svg\" width=\"${d}\" height=\"${rh}\"><polygon points=\"0,${rh} ${d/2},0 ${d},${rh}\" /></svg>`;\n            leftGable.style.position = 'absolute';\n            leftGable.style.width = d + 'px';\n            leftGable.style.height = rh + 'px';\n            leftGable.style.left = (w/2 - d/2) + 'px';\n            leftGable.style.transform = `rotateY(-90deg) translate3d(0px, ${-rh}px, ${w/2}px)`;\n\n            const rightGable = document.getElementById('right-gable');\n            rightGable.innerHTML = `<svg class=\"gable-svg\" width=\"${d}\" height=\"${rh}\"><polygon points=\"0,${rh} ${d/2},0 ${d},${rh}\" /></svg>`;\n            rightGable.style.position = 'absolute';\n            rightGable.style.width = d + 'px';\n            rightGable.style.height = rh + 'px';\n            rightGable.style.left = (w/2 - d/2) + 'px';\n            rightGable.style.transform = `rotateY(90deg) translate3d(0px, ${-rh}px, ${w/2}px)`;\n\n            // Roof\n            const overhangX = 14;\n            const overhangZ = 12;\n            const baseSlantLength = Math.sqrt(Math.pow(d / 2, 2) + Math.pow(rh, 2));\n            const roofSlantLength = baseSlantLength + overhangZ; \n            \n            const roofAngleRad = Math.atan2(rh, d / 2);\n            const roofAngleDeg = (roofAngleRad * 180) / Math.PI;\n\n            const roofLeft = document.getElementById('roof-left');\n            roofLeft.style.width = (w + (overhangX * 2)) + 'px'; \n            roofLeft.style.height = roofSlantLength + 'px';    \n            roofLeft.style.left = (-overhangX) + 'px';\n            roofLeft.style.top = (0 - roofSlantLength) + 'px';\n            roofLeft.style.transform = `translate3d(0px, ${-rh}px, 0px) rotateX(${-90 - roofAngleDeg}deg)`;\n\n            const roofRight = document.getElementById('roof-right');\n            roofRight.style.width = (w + (overhangX * 2)) + 'px';\n            roofRight.style.height = roofSlantLength + 'px';\n            roofRight.style.left = (-overhangX) + 'px';\n            roofRight.style.top = '0px';\n            roofRight.style.transform = `translate3d(0px, ${-rh}px, 0px) rotateX(${-90 + roofAngleDeg}deg)`;\n        }\n\n        // Smooth Animation Loop using requestAnimationFrame\n        function spinLoop() {\n            if (!isSpinning) return;\n            \n            // Increment rotation based on speed slider value\n            currentRotationY = (currentRotationY + parseFloat(speedSlider.value)) % 360;\n            \n            // Sync the manual input range slider background value visually\n            rotationSlider.value = Math.round(currentRotationY);\n            \n            updateHouse();\n            animationFrameId = requestAnimationFrame(spinLoop);\n        }\n\n        // Toggle spin play/pause state\n        spinBtn.addEventListener('click', () => {\n            isSpinning = !isSpinning;\n            if (isSpinning) {\n                spinBtn.textContent = '■ Stop';\n                spinBtn.classList.add('playing');\n                spinLoop();\n            } else {\n                spinBtn.textContent = '▶ Spin';\n                spinBtn.classList.remove('playing');\n                cancelAnimationFrameId(animationFrameId);\n            }\n        });\n\n        // Sync manual manual input slider adjustments\n        rotationSlider.addEventListener('input', () => {\n            currentRotationY = parseInt(rotationSlider.value);\n            updateHouse();\n        });\n\n        // Other control updates\n        [cameraPitchSlider, widthSlider, depthSlider, heightSlider, roofSlider].forEach(slider => {\n            slider.addEventListener('input', updateHouse);\n        });\n\n        resetRotationBtn.addEventListener('click', () => {\n            currentRotationY = 45;\n            rotationSlider.value = 45;\n            updateHouse();\n        });\n\n        updateHouse();\n    </script>\n</body>\n</html>","embed_html_app1headerHtml":""},"metaData":{"position":{"left":-477.0000305175781,"top":3706},"size":{"width":957,"height":568}}},{"type":"ExternalAppembed_html_app1","id":"id1785334494065","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Embed Html 6","baseName":null,"templateID":"templateid1785334494066","templateName":null,"order":70,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":957,"height":703,"left":-477,"top":714},"lastResizingSize":{"width":957,"height":703,"left":-477,"top":714},"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>Perspective Tracer Studio Pro</title>\n    <style>\n        body {\n            margin: 0; padding: 0; background-color: #f1f5f9;\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            overflow: hidden; display: flex; flex-direction: column; height: 100vh;\n        }\n        #controls {\n            background: #ffffff; padding: 10px 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n            display: flex; flex-wrap: wrap; gap: 12px; align-items: center; z-index: 10;\n        }\n        .control-group { display: flex; align-items: center; gap: 6px; }\n        label { font-size: 13px; font-weight: 600; color: #334155; }\n        input[type=\"range\"] { width: 85px; accent-color: #0284c7; cursor: pointer; }\n        \n        .num-control {\n            display: flex; align-items: center; gap: 2px; background: #f1f5f9;\n            border: 1px solid #cbd5e1; border-radius: 4px; padding: 1px;\n        }\n        .num-control input[type=\"number\"] {\n            width: 48px; border: none; background: transparent; text-align: center;\n            font-size: 12px; font-weight: 600; color: #1e293b; padding: 2px 0;\n            -moz-appearance: textfield; outline: none;\n        }\n        .num-control input[type=\"number\"]::-webkit-inner-spin-button,\n        .num-control input[type=\"number\"]::-webkit-outer-spin-button {\n            -webkit-appearance: none; margin: 0;\n        }\n        .btn-step {\n            background: #e2e8f0; color: #334155; border: none; width: 22px; height: 22px;\n            border-radius: 3px; font-size: 13px; font-weight: bold; cursor: pointer;\n            display: flex; align-items: center; justify-content: center; user-select: none;\n            touch-action: manipulation; transition: background 0.15s;\n        }\n        .btn-step:hover { background: #cbd5e1; }\n        .btn-step:active { background: #0284c7; color: white; }\n\n        .btn {\n            background: #64748b; color: white; border: none; padding: 6px 12px;\n            border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer;\n            transition: background 0.2s, transform 0.05s;\n        }\n        .btn:hover { background: #475569; }\n        .btn:active { transform: scale(0.98); }\n        .btn.active { background: #16a34a; }\n        \n        .btn-vp1 { background: #ef4444; }\n        .btn-vp1:hover { background: #dc2626; }\n        .btn-vp2 { background: #2563eb; }\n        .btn-vp2:hover { background: #1d4ed8; }\n        .btn-connect { background: #a855f7; }\n        .btn-connect:hover { background: #9333ea; }\n        .btn-delete { background: #dc2626; color: white; }\n        .btn-delete:hover { background: #b91c1c; }\n        .btn-export { background: #0ea5e9; }\n        .btn-export:hover { background: #0284c7; }\n        .btn-clear { background: #94a3b8; color: #334155; }\n        .btn-clear:hover { background: #cbd5e1; }\n        \n        .mode-toggle {\n            display: flex; background: #e2e8f0; border-radius: 6px; padding: 2px; gap: 2px;\n        }\n        .mode-btn {\n            border: none; background: transparent; padding: 4px 10px; font-size: 12px;\n            font-weight: 600; border-radius: 4px; cursor: pointer; color: #64748b;\n        }\n        .mode-btn.active { background: #ffffff; color: #0284c7; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }\n\n        .file-upload-btn {\n            background: #0284c7; color: white; border: none; padding: 6px 12px;\n            border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer;\n            display: inline-block; transition: background 0.2s;\n        }\n        .file-upload-btn:hover { background: #0369a1; }\n        #imageLoader { display: none; }\n\n        .instructions {\n            font-size: 12px; color: #64748b; margin-left: auto;\n            background: #f8fafc; padding: 6px 12px; border-radius: 4px; border: 1px solid #e2e8f0;\n        }\n        \n        #canvas-container { flex: 1; position: relative; background: #fafafa; overflow: hidden; }\n        \n        canvas { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; outline: none; }\n\n        #imageOverlay {\n            position: absolute; top: 50px; left: 50px; width: 450px;\n            cursor: move; z-index: 5; opacity: 0.5; user-select: none;\n            box-sizing: border-box; border: 1px dashed #0284c7;\n        }\n        #imageOverlay img { width: 100%; height: 100%; display: block; pointer-events: none; }\n        \n        .resize-handle {\n            width: 14px; height: 14px; background: #0284c7; border: 2px solid #ffffff;\n            border-radius: 50%; position: absolute; right: -7px; bottom: -7px;\n            cursor: se-resize; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 6;\n        }\n    </style>\n</head>\n<body>\n\n    <div id=\"controls\">\n        <div class=\"mode-toggle\">\n            <button id=\"mode1pt\" class=\"mode-btn\">1-Point</button>\n            <button id=\"mode2pt\" class=\"mode-btn active\">2-Point</button>\n        </div>\n\n        <div class=\"control-group\">\n            <label for=\"horizonSlider\">Horizon Y:</label>\n            <input type=\"range\" id=\"horizonSlider\" min=\"5\" max=\"95\" step=\"0.1\" value=\"45.0\">\n            <div class=\"num-control\">\n                <button class=\"btn-step\" id=\"horizonMinus\">-</button>\n                <input type=\"number\" id=\"horizonInput\" value=\"45.0\" min=\"5\" max=\"95\" step=\"0.1\">\n                <button class=\"btn-step\" id=\"horizonPlus\">+</button>\n            </div>\n        </div>\n\n        <div class=\"control-group\">\n            <label for=\"vp1Slider\" id=\"vp1Label\">Left VP X:</label>\n            <input type=\"range\" id=\"vp1Slider\" min=\"-200\" max=\"45\" step=\"0.1\" value=\"15.0\">\n            <div class=\"num-control\">\n                <button class=\"btn-step\" id=\"vp1Minus\">-</button>\n                <input type=\"number\" id=\"vp1Input\" value=\"15.0\" min=\"-200\" max=\"45\" step=\"0.1\">\n                <button class=\"btn-step\" id=\"vp1Plus\">+</button>\n            </div>\n        </div>\n\n        <div class=\"control-group\" id=\"vp2Group\">\n            <label for=\"vp2Slider\">Right VP X:</label>\n            <input type=\"range\" id=\"vp2Slider\" min=\"55\" max=\"300\" step=\"0.1\" value=\"85.0\">\n            <div class=\"num-control\">\n                <button class=\"btn-step\" id=\"vp2Minus\">-</button>\n                <input type=\"number\" id=\"vp2Input\" value=\"85.0\" min=\"55\" max=\"300\" step=\"0.1\">\n                <button class=\"btn-step\" id=\"vp2Plus\">+</button>\n            </div>\n        </div>\n        \n        <div class=\"control-group\" style=\"border-left: 1px solid #cbd5e1; padding-left: 10px; gap: 8px;\">\n            <button id=\"addLfi\" class=\"btn btn-vp1\">+ Add Line (VP1)</button>\n            <button id=\"addRfi\" class=\"btn btn-vp2\">+ Add Right Line</button>\n            <button id=\"addConnect\" class=\"btn btn-connect\">+ Add Custom Connect Line</button>\n            <button id=\"deleteSelected\" class=\"btn btn-delete\">🗑️ Delete Selected</button>\n            <button id=\"clearLines\" class=\"btn btn-clear\">Clear All Lines</button>\n        </div>\n        \n        <div class=\"control-group\" style=\"border-left: 1px solid #cbd5e1; padding-left: 10px; gap: 8px;\">\n            <label class=\"file-upload-btn\" for=\"imageLoader\">Import Image</label>\n            <input type=\"file\" id=\"imageLoader\" accept=\"image/*\">\n            <button id=\"exportGrid\" class=\"btn btn-export\">📸 Export Grid Layout</button>\n        </div>\n\n        <div class=\"control-group\">\n            <label for=\"opacitySlider\">Opacity:</label>\n            <input type=\"range\" id=\"opacitySlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.50\">\n            <div class=\"num-control\">\n                <button class=\"btn-step\" id=\"opacityMinus\">-</button>\n                <input type=\"number\" id=\"opacityInput\" value=\"0.50\" min=\"0\" max=\"1\" step=\"0.01\">\n                <button class=\"btn-step\" id=\"opacityPlus\">+</button>\n            </div>\n        </div>\n\n        <button id=\"toggleLayer\" class=\"btn\">Bring Grid to Front</button>\n\n        <div class=\"instructions\">\n            📐 Direct placement enabled. Click any line/point to select green, then press <b>Delete</b>. Hold <b>Shift</b> for orthogonal snapping.\n        </div>\n    </div>\n\n    <div id=\"canvas-container\">\n        <canvas id=\"perspectiveCanvas\" tabindex=\"0\"></canvas>\n        <div id=\"imageOverlay\" style=\"display: none;\">\n            <img id=\"uploadedImage\" src=\"\" alt=\"Reference Image\">\n            <div class=\"resize-handle\" 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        let perspectiveMode = '2pt';\n        const mode1ptBtn = document.getElementById('mode1pt');\n        const mode2ptBtn = document.getElementById('mode2pt');\n        const vp2Group = document.getElementById('vp2Group');\n        const vp1Label = document.getElementById('vp1Label');\n\n        const horizonSlider = document.getElementById('horizonSlider');\n        const horizonInput = document.getElementById('horizonInput');\n        const vp1Slider = document.getElementById('vp1Slider');\n        const vp1Input = document.getElementById('vp1Input');\n        const vp2Slider = document.getElementById('vp2Slider');\n        const vp2Input = document.getElementById('vp2Input');\n        const opacitySlider = document.getElementById('opacitySlider');\n        const opacityInput = document.getElementById('opacityInput');\n        \n        const addLfiBtn = document.getElementById('addLfi');\n        const addRfiBtn = document.getElementById('addRfi');\n        const addConnectBtn = document.getElementById('addConnect');\n        const deleteSelectedBtn = document.getElementById('deleteSelected');\n        const clearLinesBtn = document.getElementById('clearLines');\n        const exportGridBtn = document.getElementById('exportGrid');\n\n        const imageLoader = document.getElementById('imageLoader');\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 gridIsFront = false;\n\n        let customLines = []; \n        let activePlacementType = null; \n        let connectStartPoint = null;   \n        let currentMousePos = { x: 0, y: 0 };\n        let isShiftPressed = false;\n        \n        let selectedLineIndex = null;\n        let selectedTargetNode = null; \n        let isDraggingPoint = false;\n        const hitRadius = 22; // Forgiving hit radius across all screen regions\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        // Mode Switching\n        mode1ptBtn.addEventListener('click', () => setPerspectiveMode('1pt'));\n        mode2ptBtn.addEventListener('click', () => setPerspectiveMode('2pt'));\n\n        function setPerspectiveMode(mode) {\n            perspectiveMode = mode;\n            if (mode === '1pt') {\n                mode1ptBtn.classList.add('active');\n                mode2ptBtn.classList.remove('active');\n                vp2Group.style.display = 'none';\n                addRfiBtn.style.display = 'none';\n                vp1Label.textContent = 'Center VP X:';\n                vp1Slider.min = \"0\"; vp1Slider.max = \"100\";\n                vp1Input.min = \"0\"; vp1Input.max = \"100\";\n                if (parseFloat(vp1Slider.value) < 0) updateControl('vp1', 50.0);\n            } else {\n                mode2ptBtn.classList.add('active');\n                mode1ptBtn.classList.remove('active');\n                vp2Group.style.display = 'flex';\n                addRfiBtn.style.display = 'inline-block';\n                vp1Label.textContent = 'Left VP X:';\n                vp1Slider.min = \"-200\"; vp1Slider.max = \"45\";\n                vp1Input.min = \"-200\"; vp1Input.max = \"45\";\n            }\n            if (activePlacementType === 'right' && mode === '1pt') setPlacementMode(null);\n            updatePositionsFromSliders();\n            draw();\n        }\n\n        // Binds & Controls\n        function bindControlPair(slider, input, key, decimals = 1) {\n            slider.addEventListener('input', () => {\n                const val = parseFloat(slider.value).toFixed(decimals);\n                input.value = val;\n                if (key === 'opacity') {\n                    imageOverlay.style.opacity = val;\n                } else {\n                    updatePositionsFromSliders();\n                    draw();\n                }\n            });\n\n            input.addEventListener('change', () => {\n                let val = parseFloat(input.value);\n                const min = parseFloat(slider.min);\n                const max = parseFloat(slider.max);\n                if (isNaN(val)) val = parseFloat(slider.value);\n                val = Math.max(min, Math.min(max, val));\n                const formatted = val.toFixed(decimals);\n                input.value = formatted;\n                slider.value = formatted;\n                if (key === 'opacity') {\n                    imageOverlay.style.opacity = formatted;\n                } else {\n                    updatePositionsFromSliders();\n                    draw();\n                }\n            });\n        }\n\n        bindControlPair(horizonSlider, horizonInput, 'horizon', 1);\n        bindControlPair(vp1Slider, vp1Input, 'vp1', 1);\n        bindControlPair(vp2Slider, vp2Input, 'vp2', 1);\n        bindControlPair(opacitySlider, opacityInput, 'opacity', 2);\n\n        function updateControl(key, newValue) {\n            let slider, input, decimals = 1;\n            if (key === 'horizon') { slider = horizonSlider; input = horizonInput; }\n            else if (key === 'vp1') { slider = vp1Slider; input = vp1Input; }\n            else if (key === 'vp2') { slider = vp2Slider; input = vp2Input; }\n            else if (key === 'opacity') { slider = opacitySlider; input = opacityInput; decimals = 2; }\n\n            const min = parseFloat(slider.min);\n            const max = parseFloat(slider.max);\n            let clamped = Math.max(min, Math.min(max, newValue));\n            const formatted = clamped.toFixed(decimals);\n\n            slider.value = formatted;\n            input.value = formatted;\n\n            if (key === 'opacity') {\n                imageOverlay.style.opacity = formatted;\n            } else {\n                updatePositionsFromSliders();\n                draw();\n            }\n        }\n\n        function attachHoldEvents(btnElement, key, delta) {\n            let timer = null;\n\n            function stepOnce() {\n                let slider = (key === 'horizon') ? horizonSlider : (key === 'vp1' ? vp1Slider : (key === 'vp2' ? vp2Slider : opacitySlider));\n                let current = parseFloat(slider.value);\n                updateControl(key, current + delta);\n            }\n\n            function start() {\n                stepOnce();\n                timer = setInterval(stepOnce, 70);\n            }\n\n            function stop() {\n                clearInterval(timer);\n            }\n\n            btnElement.addEventListener('mousedown', start);\n            btnElement.addEventListener('mouseup', stop);\n            btnElement.addEventListener('mouseleave', stop);\n            \n            btnElement.addEventListener('touchstart', (e) => {\n                e.preventDefault();\n                start();\n            });\n            btnElement.addEventListener('touchend', stop);\n        }\n\n        attachHoldEvents(document.getElementById('horizonMinus'), 'horizon', -0.1);\n        attachHoldEvents(document.getElementById('horizonPlus'), 'horizon', 0.1);\n        attachHoldEvents(document.getElementById('vp1Minus'), 'vp1', -0.1);\n        attachHoldEvents(document.getElementById('vp1Plus'), 'vp1', 0.1);\n        attachHoldEvents(document.getElementById('vp2Minus'), 'vp2', -0.1);\n        attachHoldEvents(document.getElementById('vp2Plus'), 'vp2', 0.1);\n        attachHoldEvents(document.getElementById('opacityMinus'), 'opacity', -0.01);\n        attachHoldEvents(document.getElementById('opacityPlus'), 'opacity', 0.01);\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                canvas.focus();\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        addLfiBtn.addEventListener('click', () => setPlacementMode(activePlacementType === 'left' ? null : 'left'));\n        addRfiBtn.addEventListener('click', () => setPlacementMode(activePlacementType === 'right' ? null : 'right'));\n        addConnectBtn.addEventListener('click', () => setPlacementMode(activePlacementType === 'connect' ? null : 'connect'));\n\n        function setPlacementMode(mode) {\n            activePlacementType = mode;\n            connectStartPoint = null; \n            selectedLineIndex = null;\n            selectedTargetNode = null;\n            updatePlacementButtons();\n        }\n\n        function deleteSelectedLine() {\n            if (selectedLineIndex !== null) {\n                customLines.splice(selectedLineIndex, 1);\n                selectedLineIndex = null;\n                selectedTargetNode = null;\n                draw();\n            }\n        }\n\n        deleteSelectedBtn.addEventListener('click', deleteSelectedLine);\n\n        clearLinesBtn.addEventListener('click', () => {\n            customLines = [];\n            selectedLineIndex = null;\n            selectedTargetNode = null;\n            setPlacementMode(null);\n            draw();\n        });\n\n        function updatePlacementButtons() {\n            addLfiBtn.classList.toggle('active', activePlacementType === 'left');\n            addRfiBtn.classList.toggle('active', activePlacementType === 'right');\n            addConnectBtn.classList.toggle('active', activePlacementType === 'connect');\n            \n            if (activePlacementType && !gridIsFront) {\n                toggleLayerBtn.click();\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 = '450px';\n                        imageOverlay.style.height = (450 * imageAspectRatio) + 'px';\n                        imageOverlay.style.display = 'block';\n                    };\n                };\n                reader.readAsDataURL(e.target.files[0]);\n            }\n        });\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; overlayStartHeight = imageOverlay.clientHeight;\n                e.preventDefault(); e.stopPropagation();\n            } else {\n                isOverlayDragging = true;\n                overlayStartX = e.clientX; overlayStartY = e.clientY;\n                overlayStartLeft = imageOverlay.offsetLeft; overlayStartTop = imageOverlay.offsetTop;\n                e.preventDefault();\n            }\n        });\n\n        function resizeCanvas() {\n            const rect = container.getBoundingClientRect();\n            canvas.width = rect.width;\n            canvas.height = rect.height;\n            updatePositionsFromSliders();\n            draw();\n        }\n\n        function updatePositionsFromSliders() {\n            horizonY = (parseFloat(horizonSlider.value) / 100) * canvas.height;\n            const v1Pct = parseFloat(vp1Slider.value) / 100;\n            vp1X = v1Pct * canvas.width;\n\n            if (perspectiveMode === '2pt') {\n                const v2Pct = parseFloat(vp2Slider.value) / 100;\n                vp2X = v2Pct * canvas.width;\n            }\n        }\n\n        window.addEventListener('resize', resizeCanvas);\n\n        // Accurate Pixel Position (Prevents unwanted lower snapping)\n        function getMousePos(e) {\n            const rect = canvas.getBoundingClientRect();\n            const scaleX = canvas.width / rect.width;\n            const scaleY = canvas.height / rect.height;\n            return {\n                x: (e.clientX - rect.left) * scaleX,\n                y: (e.clientY - rect.top) * scaleY\n            };\n        }\n\n        function getSnappedPosition(start, current) {\n            if (!isShiftPressed) return current; // Pure exact placement unless Shift is held\n            const dx = current.x - start.x;\n            const dy = current.y - start.y;\n            if (Math.abs(dx) > Math.abs(dy)) {\n                return { x: current.x, y: start.y };\n            } else {\n                return { x: start.x, y: current.y };\n            }\n        }\n\n        function distToSegment(p, v, w) {\n            const l2 = (w.x - v.x) ** 2 + (w.y - v.y) ** 2;\n            if (l2 === 0) return Math.hypot(p.x - v.x, p.y - v.y);\n            let t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;\n            t = Math.max(0, Math.min(1, t));\n            return Math.hypot(p.x - (v.x + t * (w.x - v.x)), p.y - (v.y + t * (w.y - v.y)));\n        }\n\n        function getLineEndpoints(line) {\n            let start = (line.type === 'left') ? { x: vp1X, y: horizonY } :\n                        (line.type === 'right') ? { x: vp2X, y: horizonY } :\n                        { x: line.startX, y: line.startY };\n            let target = { x: line.targetX, y: line.targetY };\n            return { start, target };\n        }\n\n        // Mouse Action Handler\n        canvas.addEventListener('mousedown', (e) => {\n            canvas.focus();\n            const pos = getMousePos(e);\n            \n            if (activePlacementType) {\n                if (activePlacementType === 'left' || (activePlacementType === 'right' && perspectiveMode === '2pt')) {\n                    // Exact point assignment without rounding\n                    customLines.push({ type: activePlacementType, targetX: pos.x, targetY: pos.y });\n                    selectedLineIndex = customLines.length - 1; \n                    selectedTargetNode = 'target';\n                    if (!e.shiftKey) setPlacementMode(null);\n                } else if (activePlacementType === 'connect') {\n                    if (!connectStartPoint) {\n                        connectStartPoint = { x: pos.x, y: pos.y };\n                    } else {\n                        const finalPos = getSnappedPosition(connectStartPoint, pos);\n                        customLines.push({\n                            type: 'connect',\n                            startX: connectStartPoint.x, startY: connectStartPoint.y,\n                            targetX: finalPos.x, targetY: finalPos.y\n                        });\n                        selectedLineIndex = customLines.length - 1;\n                        selectedTargetNode = 'target';\n                        connectStartPoint = null; \n                        if (!e.shiftKey) setPlacementMode(null);\n                    }\n                }\n                draw();\n                return;\n            }\n\n            let hitFound = false;\n\n            // 1. Precise node checking\n            for (let i = customLines.length - 1; i >= 0; i--) {\n                const line = customLines[i];\n                if (line.type === 'right' && perspectiveMode === '1pt') continue;\n\n                if (Math.hypot(pos.x - line.targetX, pos.y - line.targetY) <= hitRadius) {\n                    selectedLineIndex = i; selectedTargetNode = 'target'; isDraggingPoint = true; hitFound = true; break;\n                }\n                if (line.type === 'connect' && Math.hypot(pos.x - line.startX, pos.y - line.startY) <= hitRadius) {\n                    selectedLineIndex = i; selectedTargetNode = 'start'; isDraggingPoint = true; hitFound = true; break;\n                }\n            }\n\n            // 2. Uniform line-body selection\n            if (!hitFound) {\n                for (let i = customLines.length - 1; i >= 0; i--) {\n                    const line = customLines[i];\n                    if (line.type === 'right' && perspectiveMode === '1pt') continue;\n\n                    const { start, target } = getLineEndpoints(line);\n                    if (distToSegment(pos, start, target) <= 16) {\n                        selectedLineIndex = i;\n                        selectedTargetNode = 'target';\n                        hitFound = true;\n                        break;\n                    }\n                }\n            }\n\n            if (!hitFound) { \n                selectedLineIndex = null; \n                selectedTargetNode = null; \n            }\n            draw();\n        });\n\n        window.addEventListener('mousemove', (e) => {\n            if (isOverlayDragging) {\n                const dx = e.clientX - overlayStartX; const dy = e.clientY - overlayStartY;\n                imageOverlay.style.left = (overlayStartLeft + dx) + 'px'; imageOverlay.style.top = (overlayStartTop + dy) + 'px';\n                return;\n            }\n            if (isOverlayResizing) {\n                const dx = e.clientX - overlayStartX; const newWidth = Math.max(80, overlayStartWidth + dx); \n                imageOverlay.style.width = newWidth + 'px'; imageOverlay.style.height = (newWidth * imageAspectRatio) + 'px';\n                return;\n            }\n\n            const pos = getMousePos(e);\n\n            if (isDraggingPoint && selectedLineIndex !== null) {\n                const line = customLines[selectedLineIndex];\n                if (selectedTargetNode === 'target') {\n                    const snapped = (line.type === 'connect') ? getSnappedPosition({ x: line.startX, y: line.startY }, pos) : pos;\n                    line.targetX = snapped.x; line.targetY = snapped.y;\n                } else if (selectedTargetNode === 'start') {\n                    const snapped = getSnappedPosition({ x: line.targetX, y: line.targetY }, pos);\n                    line.startX = snapped.x; line.startY = snapped.y;\n                }\n                draw();\n                return;\n            }\n\n            if (activePlacementType) {\n                currentMousePos = pos;\n                draw();\n            } else {\n                let hoverFound = false;\n                for (let i = 0; i < customLines.length; i++) {\n                    const line = customLines[i];\n                    if (line.type === 'right' && perspectiveMode === '1pt') continue;\n                    const { start, target } = getLineEndpoints(line);\n\n                    if (Math.hypot(pos.x - line.targetX, pos.y - line.targetY) <= hitRadius ||\n                        (line.type === 'connect' && Math.hypot(pos.x - line.startX, pos.y - line.startY) <= hitRadius) ||\n                        distToSegment(pos, start, target) <= 16) {\n                        hoverFound = true; break;\n                    }\n                }\n                canvas.style.cursor = hoverFound ? 'pointer' : 'default';\n            }\n        });\n\n        window.addEventListener('mouseup', () => { isOverlayDragging = false; isOverlayResizing = false; isDraggingPoint = false; });\n\n        window.addEventListener('keydown', (e) => {\n            if (e.key === 'Shift') { \n                isShiftPressed = true; \n                draw(); \n            }\n            if ((e.key === 'Delete' || e.key === 'Backspace') && selectedLineIndex !== null) {\n                if (document.activeElement.tagName !== 'INPUT') {\n                    e.preventDefault();\n                    deleteSelectedLine();\n                }\n            }\n        });\n\n        window.addEventListener('keyup', (e) => { if (e.key === 'Shift') { isShiftPressed = false; draw(); } });\n\n        exportGridBtn.addEventListener('click', () => {\n            const prevSelect = selectedLineIndex;\n            const prevNode = selectedTargetNode;\n            selectedLineIndex = null; selectedTargetNode = null;\n            \n            draw();\n\n            const dataURL = canvas.toDataURL('image/png');\n            const link = document.createElement('a');\n            link.download = 'studio-perspective-layout.png';\n            link.href = dataURL;\n            link.click();\n\n            selectedLineIndex = prevSelect; selectedTargetNode = prevNode;\n            draw();\n        });\n\n        function draw() {\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\n            const vp1 = { x: vp1X, y: horizonY };\n            const vp2 = { x: vp2X, y: horizonY };\n\n            // 1. Draw Horizon Line\n            ctx.strokeStyle = '#94a3b8'; ctx.lineWidth = 2;\n            ctx.beginPath(); ctx.moveTo(0, horizonY); ctx.lineTo(canvas.width, horizonY); ctx.stroke();\n\n            // 2. Custom Lines & Nodes\n            customLines.forEach((line, index) => {\n                if (line.type === 'right' && perspectiveMode === '1pt') return;\n\n                const isSelected = (index === selectedLineIndex);\n                if (isSelected) { \n                    ctx.strokeStyle = '#10b981';\n                    ctx.lineWidth = 4; \n                } else {\n                    if (line.type === 'left') ctx.strokeStyle = 'rgba(239, 68, 68, 0.85)';\n                    else if (line.type === 'right') ctx.strokeStyle = 'rgba(37, 99, 235, 0.85)';\n                    else ctx.strokeStyle = 'rgba(168, 85, 247, 0.9)'; \n                    ctx.lineWidth = 2;\n                }\n                \n                ctx.beginPath();\n                if (line.type === 'connect') ctx.moveTo(line.startX, line.startY);\n                else { const origin = (line.type === 'left') ? vp1 : vp2; ctx.moveTo(origin.x, origin.y); }\n                ctx.lineTo(line.targetX, line.targetY);\n                ctx.stroke();\n                \n                const baseColor = (line.type === 'left') ? '#ef4444' : (line.type === 'right' ? '#2563eb' : '#a855f7');\n                ctx.fillStyle = isSelected ? '#10b981' : baseColor;\n                \n                ctx.beginPath(); \n                ctx.arc(line.targetX, line.targetY, isSelected ? 8 : 5, 0, Math.PI * 2); \n                ctx.fill();\n                \n                if (line.type === 'connect') {\n                    ctx.fillStyle = isSelected ? '#10b981' : baseColor;\n                    ctx.beginPath(); \n                    ctx.arc(line.startX, line.startY, isSelected ? 8 : 5, 0, Math.PI * 2); \n                    ctx.fill();\n                }\n            });\n\n            // 3. Line Placement Preview\n            if (activePlacementType) {\n                ctx.lineWidth = 1.5; ctx.setLineDash([4, 4]); ctx.beginPath();\n                if (activePlacementType === 'left') {\n                    ctx.strokeStyle = 'rgba(239, 68, 68, 0.6)'; ctx.moveTo(vp1.x, vp1.y); ctx.lineTo(currentMousePos.x, currentMousePos.y);\n                } else if (activePlacementType === 'right' && perspectiveMode === '2pt') {\n                    ctx.strokeStyle = 'rgba(37, 99, 235, 0.6)'; ctx.moveTo(vp2.x, vp2.y); ctx.lineTo(currentMousePos.x, currentMousePos.y);\n                } else if (activePlacementType === 'connect') {\n                    ctx.strokeStyle = 'rgba(168, 85, 247, 0.6)';\n                    if (connectStartPoint) {\n                        const snapped = getSnappedPosition(connectStartPoint, currentMousePos);\n                        ctx.moveTo(connectStartPoint.x, connectStartPoint.y); ctx.lineTo(snapped.x, snapped.y);\n                    } else {\n                        ctx.arc(currentMousePos.x, currentMousePos.y, 4, 0, Math.PI * 2);\n                    }\n                }\n                ctx.stroke(); ctx.setLineDash([]); \n            }\n\n            // 4. Vanishing Point Anchor Labels\n            if (vp1.x >= 0 && vp1.x <= canvas.width) {\n                ctx.fillStyle = '#ef4444'; ctx.beginPath(); ctx.arc(vp1.x, vp1.y, 7, 0, Math.PI * 2); ctx.fill();\n                ctx.fillStyle = '#334155'; ctx.font = 'bold 12px sans-serif'; \n                const label = (perspectiveMode === '1pt') ? 'VP (Center)' : 'VP 1 (Left)';\n                ctx.fillText(label, vp1.x - 25, vp1.y - 12);\n            }\n            if (perspectiveMode === '2pt' && vp2.x >= 0 && vp2.x <= canvas.width) {\n                ctx.fillStyle = '#2563eb'; ctx.beginPath(); ctx.arc(vp2.x, vp2.y, 7, 0, Math.PI * 2); ctx.fill();\n                ctx.fillStyle = '#334155'; ctx.font = 'bold 12px sans-serif'; ctx.fillText('VP 2 (Right)', vp2.x - 25, vp2.y - 12);\n            }\n        }\n\n        resizeCanvas();\n    </script>\n</body>\n</html>","embed_html_app1headerHtml":""},"metaData":{"position":{"left":-477.0000305175781,"top":4378},"size":{"width":957,"height":703}}},{"type":"SkinButtonElement","id":"id1785799387315","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Button 1","baseName":null,"templateID":"templateid1785799387317","templateName":null,"order":71,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{"categoryId":296},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":58,"height":39,"left":-561,"top":1359},"lastResizingSize":{"width":58,"height":39,"left":-561,"top":1359},"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"},"dataInfo":null,"startSelected":false,"urlAddress":{"type":"None","url":null},"openInNewTab":false,"openInTopWindow":false,"shouldUnderlineChildren":false,"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"skinBinding":{"skinName":"id1785799387316","index":0,"type":"Inline","hierarchy":{"structures":[{"type":"skinHierarchyBox","id":"id1431213630181","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Skin Element 3","baseName":null,"templateID":"templateid1431213630184","templateName":null,"order":0,"customStates":null,"isElementWasEditedInMode":false,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":1785799387309,"styleBindingFields":{"backgroundColor":{"type":1,"properties":{"backgroundColor":{"boundToProperty":true,"fields":{}}}},"borderColor0":{"type":1,"properties":{"borderColor":{"boundToProperty":false,"fields":{"left":true,"top":true,"bottom":true,"right":true}}}},"borderWidth0":{"type":1,"properties":{"borderWidth":{"boundToProperty":false,"fields":{"left":true,"top":true,"bottom":true,"right":true}}}},"padding":{"type":1,"properties":{"padding":{"boundToProperty":true,"fields":{}}}},"roundness":{"type":1,"properties":{"roundness":{"boundToProperty":true,"fields":{}}}},"shadow":{"type":1,"properties":{"shadow":{"boundToProperty":true,"fields":{}}}},"glow":{"type":1,"properties":{"glow":{"boundToProperty":true,"fields":{}}}},"innerShadow":{"type":1,"properties":{"innerShadow":{"boundToProperty":true,"fields":{}}}},"innerGlow":{"type":1,"properties":{"innerGlow":{"boundToProperty":true,"fields":{}}}}},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":93,"height":70,"top":0,"left":0},"lastResizingSize":{"width":93,"height":70,"top":0,"left":0},"fieldsMap":{},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"imageOpacity":1,"backgroundOverlay":"transparent","overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"startSelected":false,"openInNewTab":false,"openInTopWindow":false,"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","isVisible":true,"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"},"borderColor":{"top":{"mainColor":2,"variation":2,"opacity":1,"brightness":0},"left":{"mainColor":2,"variation":2,"opacity":1,"brightness":0},"bottom":{"mainColor":2,"variation":2,"opacity":1,"brightness":0},"right":{"mainColor":2,"variation":2,"opacity":1,"brightness":0}},"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"backgroundColor":{"mainColor":4,"variation":2,"opacity":1,"brightness":0},"padding":{"left":5,"right":5,"top":5,"bottom":5},"roundness":{"topLeft":0,"topRight":0,"bottomLeft":0,"bottomRight":0},"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"rgba(0,0,0,0.1)"},"innerGlow":{"spread":0,"blur":0,"color":"black"}},"metaData":{"position":{"left":-46.5,"top":0},"size":{"width":93,"height":70}},"childElements":[{"type":"Icon","id":"id1431213630183","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Icon 1","baseName":null,"templateID":"templateid1431213630184","templateName":null,"order":1,"customStates":null,"isElementWasEditedInMode":false,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":1785799387309,"styleBindingFields":{"iconReference":{"type":2,"properties":{"iconReference":{"boundToProperty":true,"fields":{}}}},"iconColor1":{"type":1,"properties":{"iconColor":{"boundToProperty":true,"fields":{}}}}},"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":93,"height":36,"left":8,"top":16},"lastResizingSize":{"width":91,"height":68},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","backgroundColor":"transparent","verticalLayout":"dockTop","horizontalLayout":"centered","fillLayout":{"fillVertical":true,"fillHorizontal":true},"margin":{"top":0,"left":0,"bottom":0,"right":0},"padding":{"top":0,"left":0,"bottom":0,"right":0},"startSelected":false,"openInNewTab":false,"openInTopWindow":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,"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","iconReference":{"collectionName":"public-font-icons","iconName":"angle-up"},"iconSize":"auto","innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"innerGlow":{"spread":0,"blur":0,"color":"black"},"iconColor":{"mainColor":3,"variation":0,"opacity":1,"brightness":0}},"metaData":{"position":{"left":-45.5,"top":1},"size":{"width":91,"height":68}},"isForBackground":true,"isForShadow":true}],"offset":{"left":942.5,"top":555},"isForBackground":true,"hasBackgroundChild":true,"isForShadow":true}],"connections":{"targetConnections":{},"sourceConnections":{}},"customStatesProperties":{"id1431213630181":{"backgroundColor":{"MouseOverState":{"id1431213630181":{"transitionInDuration":0,"transitionOutDuration":200,"easing":"linear","useCustomExitAnimation":true,"stateValue":{"mainColor":4,"variation":2,"opacity":1,"brightness":0.13}}},"MouseDownState":{}},"borderColor":{"MouseOverState":{},"MouseDownState":{}},"borderWidth":{"MouseOverState":{},"MouseDownState":{}},"padding":{"MouseOverState":{},"MouseDownState":{"id1431213630181":{"transitionInDuration":0,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":false,"stateValue":{"left":6,"right":6,"top":6,"bottom":6}}}},"roundness":{"MouseOverState":{},"MouseDownState":{}},"shadow":{"MouseOverState":{},"MouseDownState":{}},"glow":{"MouseOverState":{},"MouseDownState":{}},"innerShadow":{"MouseOverState":{},"MouseDownState":{}},"innerGlow":{"MouseOverState":{},"MouseDownState":{}}},"id1431213630183":{"iconColor":{"MouseOverState":{},"MouseDownState":{}},"iconReference":{"MouseOverState":{},"MouseDownState":{}}}},"pageId":"id1430787658171","version":17.004,"id":"id1431213655953","relativePoint":{"left":942.5,"top":555},"styleVersion":1785799387312,"styleId":1785799387309,"fieldsToData":{"backgroundColor":{"name":"backgroundColor","fieldType":"BackgroundColor","categoryId":"Colors","priority":0,"title":"Background"},"iconColor1":{"name":"iconColor1","fieldType":"SolidColor","categoryId":"Colors","priority":1,"title":"Icon Color"},"borderColor0":{"name":"borderColor0","fieldType":"SolidColor","categoryId":"Colors","priority":2,"title":"Border"},"borderWidth0":{"name":"borderWidth0","fieldType":"Pixels","categoryId":"Border","priority":3,"title":"Border Width","options":{"fieldVisualizer":"Slider","visualizerOptions":{"min":0,"max":20}}},"padding":{"name":"padding","fieldType":"Padding","categoryId":"Border","priority":4,"title":"Padding"},"roundness":{"name":"roundness","fieldType":"Roundness","categoryId":"Border","priority":5,"title":"Roundness"},"shadow":{"name":"shadow","fieldType":"Shadow","categoryId":"Effects","priority":6,"title":"Shadow"},"glow":{"name":"glow","fieldType":"Glow","categoryId":"Effects","priority":7,"title":"Glow"},"innerShadow":{"name":"innerShadow","fieldType":"InnerShadow","categoryId":"Effects","priority":8,"title":"Inner Shadow"},"innerGlow":{"name":"innerGlow","fieldType":"InnerGlow","categoryId":"Effects","priority":9,"title":"Inner Glow"}},"categoriesData":{"Colors":{"title":"Colors","priority":1,"id":"Colors"},"Border":{"title":"Border","priority":3,"id":"Border"},"Effects":{"title":"Effects","priority":4,"id":"Effects"}},"fieldsToValues":{"backgroundColor":{"NormalState":{"value":{"mainColor":4,"variation":2,"opacity":1,"brightness":0}},"MouseOverState":{"value":{"mainColor":4,"variation":2,"opacity":1,"brightness":0.13}},"MouseDownState":{}},"iconColor1":{"NormalState":{"value":{"mainColor":3,"variation":0,"opacity":1,"brightness":0}},"MouseOverState":{},"MouseDownState":{}},"borderColor0":{"NormalState":{"value":{"mainColor":2,"variation":2,"opacity":1,"brightness":0}},"MouseOverState":{},"MouseDownState":{}},"borderWidth0":{"NormalState":{"value":0},"MouseOverState":{},"MouseDownState":{}},"padding":{"NormalState":{"value":{"left":5,"right":5,"top":5,"bottom":5}},"MouseDownState":{"value":{"left":6,"right":6,"top":6,"bottom":6}},"MouseOverState":{}},"roundness":{"NormalState":{"value":{"topLeft":0,"topRight":0,"bottomLeft":0,"bottomRight":0}},"MouseOverState":{},"MouseDownState":{}},"shadow":{"NormalState":{"value":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"}},"MouseOverState":{},"MouseDownState":{}},"glow":{"NormalState":{"value":{"spread":0,"blur":0,"color":"black"}},"MouseOverState":{},"MouseDownState":{}},"innerShadow":{"NormalState":{"value":{"top":0,"left":0,"spread":0,"blur":0,"color":"rgba(0,0,0,0.1)"}},"MouseOverState":{},"MouseDownState":{}},"innerGlow":{"NormalState":{"value":{"spread":0,"blur":0,"color":"black"}},"MouseOverState":{},"MouseDownState":{}}},"statesAnimations":{"MouseOverState":{"transitionInDuration":0,"transitionOutDuration":200,"easing":"linear","useCustomExitAnimation":true},"MouseDownState":{"transitionInDuration":0,"transitionOutDuration":0,"easing":"linear","useCustomExitAnimation":false}},"StructureVersion":17.004}},"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","basicUserCanEdit":true,"verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillHorizontal":false,"fillVertical":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"isVisible":true,"buttonAction":{"type":"NavigateTo","data":{"options":{"scrollToTop":true,"animationDuration":1000,"triggerType":3,"triggerName":"MouseClick"}}},"iconReference":{"collectionName":"public-font-icons","iconName":"angle-up"},"formattedText":"<div>Top</div>"},"metaData":{"position":{"left":-561.0000305175781,"top":5023},"size":{"width":58,"height":39},"isTextButton":false},"childElements":[]}]}],"offset":{"left":231,"top":64}}],"connections":{"targetConnections":{},"sourceConnections":{}},"customStatesProperties":{"id1785332745257":{"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":118,"height":40,"left":194,"top":84}}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"fixed"}}},"cellItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"id":1785332745260,"width":100,"rowId":1785332745261}}}},"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}}}},"id1785335875236":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":16}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"left":-420,"width":310,"top":514,"height":276}}}},"lastResizingSize":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":310,"height":276}}}},"rowsItems":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"1785335875244":{"id":1785335875244},"1785335875245":{"id":1785335875245},"1785335875246":{"id":1785335875246},"1785335875247":{"id":1785335875247}}}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"block"}}},"cellItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"id":1785335875248,"width":100,"rowId":1785335875249}}}},"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}}},"elementPopupEnabled":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":false}}},"JMML_Layout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"embed"}}}},"id1785335875237":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":17}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"staticMargin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"horizontalMargin":0,"verticalMargin":8}}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":320,"height":34,"left":11,"top":20}}}},"lastResizingSize":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":320,"height":34}}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"block"}}},"cellItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"id":1785335875250,"width":100,"rowId":1785335875244}}}},"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}}}},"padding":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":10,"left":20,"bottom":0,"right":20}}}}},"id1785335875238":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":18}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":245,"height":65,"left":11,"top":46}}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"block"}}},"cellItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"id":1785335875251,"width":100,"rowId":1785335875245}}}},"verticalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"horizontalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"fillLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"fillVertical":false,"fillHorizontal":false}}}},"margin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"bottom":0,"right":0}}}},"isVisible":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"padding":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":20,"bottom":0,"right":20}}}}},"id1785335875239":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":22}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":245,"height":65,"left":11,"top":111}}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"block"}}},"cellItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"id":1785335875252,"width":100,"rowId":1785335875246}}}},"verticalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"horizontalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"fillLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"fillVertical":false,"fillHorizontal":false}}}},"margin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"bottom":0,"right":0}}}},"isVisible":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"padding":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":20,"bottom":0,"right":20}}}}},"id1785335875240":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":26}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"elementOpacity":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":1}}},"staticMargin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"horizontalMargin":0,"verticalMargin":0}}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":170,"height":35,"left":302,"top":20}}}},"lastResizingSize":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":170,"height":35}}}},"shadow":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"}}}},"glow":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"spread":0,"blur":0,"color":"black"}}}},"innerGlow":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"spread":0,"blur":0,"color":"black"}}}},"innerShadow":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"}}}},"horizontalAlign":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"center"}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"fixed"}}},"cellItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"id":1785335875253,"width":100,"rowId":1785335875247}}}},"verticalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"horizontalLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"normal"}}},"fillLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"fillVertical":false,"fillHorizontal":false}}}},"margin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"bottom":0,"right":0}}}},"isVisible":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}}},"id1785799387315":{"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":58,"height":57,"left":-296,"top":73}}}},"display":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"fixed"}}},"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}}}}},"pageId":"id1779690236526","version":17.004,"id":"id1787682190794","relativePoint":{"left":231,"top":64}}