PagesStructures['id1782244239437'] = {"structures":[{"type":"page","id":"id1782244239437","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":true,"name":"Precision Studio Pro","baseName":"Artwork Page 2","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":-592.6171875,"top":0},"size":{"width":1185,"height":2314}},"childElements":[{"type":"SectionElement","id":"id1782244239439","elementProperties":{"tagName":"SECTION","behaviours":null,"isLocked":false,"name":"Section 7","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":1385,"left":0,"width":1185,"top":0},"lastResizingSize":{"width":1185,"height":1385},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"padding":{"top":0,"left":0,"bottom":0,"right":0},"basicUserCanEdit":true,"backgroundColor":"transparent","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillVertical":false,"fillHorizontal":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"childrenAnchor":"center","resizingGripPosiotion":"s","sectionName":"Section A","pageContentType":1,"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"borderColor":{"top":"Black","left":"Black","bottom":"Black","right":"Black"},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"}},"metaData":{"position":{"left":-592.6171875,"top":150.99609375},"size":{"width":1185,"height":1385}},"childElements":[{"type":"freeText","id":"id1780952143718","elementProperties":{"tagName":"H3","behaviours":null,"isLocked":false,"name":"Text 3","baseName":null,"templateID":"templateid1780952143719","templateName":null,"order":31,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":218,"height":34,"left":-108,"top":1328},"lastResizingSize":{"width":218,"height":34,"left":-102,"top":-28},"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=\"font-size:14px;\">​Copyright © All Rights Reserved</span><br></div>","verticalAlignment":"top"},"metaData":{"position":{"left":-107.98828125,"top":1478.984375},"size":{"width":218,"height":34}}},{"type":"ExternalAppembed_html_app1","id":"id1782244391904","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Embed Html 2","baseName":null,"templateID":"templateid1782244391905","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":1176,"height":846,"left":-593,"top":469},"lastResizingSize":{"width":1176,"height":846},"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>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        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            margin: 0; \n            overflow: hidden; \n            width: 100%;\n            box-sizing: border-box;\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: 12px; \n            gap: 12px; \n            font-size: 11px; \n            overflow-y: auto; \n            overflow-x: hidden; \n            box-sizing: border-box; \n            flex-shrink: 0; \n            transition: width 0.25s ease, padding 0.25s ease, opacity 0.25s ease; \n            height: 100%; \n            opacity: 1;\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: 6px; margin-bottom: 2px; flex-shrink: 0; }\n        h2 { font-size: 0.90rem; margin: 0; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; outline: none; }\n        \n        .section { display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid #2a2a2a; padding-bottom: 10px; flex-shrink: 0; }\n        label { text-transform: uppercase; font-weight: bold; color: #777; font-size: 9px; margin-top: 1px; display: block; }\n        \n        input, button { background: #2a2a2a; border: 1px solid #444; color: white; padding: 6px; border-radius: 3px; font-size: 11px; outline: none; box-sizing: border-box; width: 100%; height: auto; }\n        \n        input[type=\"range\"] { accent-color: var(--accent); cursor: pointer; height: 16px; touch-action: none; display: block; margin: 2px 0; }\n\n        .stats-box { background: rgba(0,0,0,0.4); padding: 6px; border-radius: 4px; border: 1px solid #333; margin-top: 3px; font-family: monospace; color: var(--accent); text-align: center; box-sizing: border-box; }\n\n        .btn { cursor: pointer; font-weight: bold; text-transform: uppercase; border: none; transition: 0.2s; box-sizing: border-box; }\n        .btn-main { background: var(--accent); color: #000; padding: 10px; margin-top: 5px; flex-shrink: 0; }\n        .btn-sub { background: var(--blue-gray); color: #fff; padding: 6px; 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        \n        .btn-zoom {\n            background-color: #2a2a2a;\n            border: 1px solid #555;\n            color: #fff;\n            padding: 8px;\n            font-size: 11px;\n            font-weight: 700;\n            letter-spacing: 0.5px;\n            margin-top: 3px;\n            border-radius: 4px;\n        }\n        .btn-zoom:active { background-color: var(--accent); color: #000; border-color: var(--accent); }\n\n        #welcomeModal, #zoomModal, #snapshotModal { 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, #snapshotModal { display: none; z-index: 6000; }\n        \n        .modal-content { background: var(--panel); padding: 30px; border: 1px solid var(--accent); border-radius: 8px; text-align: center; max-width: 400px; width: 85%; }\n        .zoom-modal-content { background: var(--panel); padding: 25px; border: 1px solid var(--accent); border-radius: 8px; text-align: center; max-width: 500px; width: 90%; }\n        \n        .snapshot-modal-content { background: var(--panel); padding: 20px; border: 1px solid var(--accent); border-radius: 8px; display: flex; flex-direction: column; align-items: center; max-width: 85vw; max-height: 85vh; }\n        .snapshot-viewer-container { overflow: auto; max-width: 100%; max-height: 70vh; margin-bottom: 15px; background: #111; border: 1px solid #333; position: relative; }\n        #snapshotLargeImg { display: block; max-width: 100%; height: auto; transform-origin: top left; transition: transform 0.1s ease; }\n\n        .main-workspace {\n            flex-grow: 1;\n            display: flex;\n            height: 100%;\n            overflow: hidden;\n            position: relative;\n        }\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%; }\n\n        .gallery-panel {\n            width: 160px;\n            background: #141414;\n            border-left: 1px solid #333;\n            display: flex;\n            flex-direction: column;\n            padding: 12px;\n            gap: 12px;\n            overflow-y: auto;\n            box-sizing: border-box;\n            flex-shrink: 0;\n            height: 100%;\n            transition: width 0.25s ease, padding 0.25s ease, opacity 0.25s ease;\n        }\n        body.fullscreen .gallery-panel { width: 0; padding: 0; border: none; opacity: 0; pointer-events: none; }\n        \n        .gallery-title { text-transform: uppercase; font-weight: bold; color: var(--accent); font-size: 9px; letter-spacing: 0.5px; border-bottom: 1px solid #2a2a2a; padding-bottom: 6px; text-align: center; }\n        .thumbnail-card { background: #1e1e1e; border: 1px solid #444; border-radius: 4px; padding: 4px; cursor: pointer; transition: transform 0.2s, border-color 0.2s; position: relative; }\n        .thumbnail-card:hover { border-color: var(--accent); transform: scale(1.02); }\n        .thumbnail-card img { width: 100%; display: block; border-radius: 2px; background: #000; }\n        .thumbnail-label { font-size: 8px; color: #777; text-align: center; margin-top: 4px; font-family: monospace; text-transform: uppercase; }\n        \n        .clear-gallery-btn { background: #2a1a1a; border: 1px solid #522; color: #c66; font-size: 9px; padding: 5px; cursor: pointer; text-transform: uppercase; font-weight: bold; border-radius: 3px; margin-top: auto; }\n        .clear-gallery-btn:hover { background: #422; color: #f88; }\n\n        @media (max-width: 1024px) {\n            .sidebar { width: 250px; gap: 10px; padding: 10px; }\n            .gallery-panel { width: 130px; padding: 8px; }\n        }\n    </style>\n</head>\n<body>\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 id=\"snapshotModal\">\n    <div class=\"snapshot-modal-content\">\n        <h2 id=\"snapshotTitle\" style=\"margin-top: 0; margin-bottom: 10px; font-size: 14px; color: var(--accent); text-transform: uppercase;\">Captured View</h2>\n        <div style=\"display: flex; gap: 15px; align-items: center; margin-bottom: 10px; width: 100%; justify-content: center;\">\n            <label style=\"font-size: 9px; margin: 0;\">Interactive Zoom:</label>\n            <input type=\"range\" id=\"popZoom\" min=\"1\" max=\"4\" step=\"0.1\" value=\"1\" style=\"width: 150px;\" oninput=\"adjustPopupZoom(this.value)\">\n            <span id=\"popZoomReadout\" style=\"font-size: 10px; font-family: monospace; color: var(--accent);\">1.0x</span>\n        </div>\n        <div class=\"snapshot-viewer-container\" id=\"snapViewCont\">\n            <img id=\"snapshotLargeImg\" src=\"\" alt=\"Snapshot View\">\n        </div>\n        <button class=\"btn btn-sub\" onclick=\"closeSnapshotModal()\" style=\"padding: 8px 25px; max-width: 200px;\">Close Reference</button>\n    </div>\n</div>\n\n<div class=\"sidebar\">\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    </div>\n\n    <div class=\"section\">\n        <label>2. Canvas 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        <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:26px; padding:0; cursor:pointer; border:none; margin-bottom: 6px;\">\n        \n        <div style=\"display:flex; gap:5px; align-items:center;\">\n            <button id=\"centerXBtn\" class=\"btn btn-sub\" onclick=\"toggleFilter('centerX')\">Centering X</button>\n            <input type=\"color\" id=\"xColor\" value=\"#ff0000\" oninput=\"appSettingChanged()\" style=\"width:40px; height:24px; padding:0; cursor:pointer; border:none;\">\n        </div>\n        <label>X Line Faintness (Opacity)</label>\n        <input type=\"range\" id=\"xOpacity\" min=\"10\" max=\"100\" step=\"5\" value=\"30\" oninput=\"appSettingChanged()\">\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; gap:6px; margin-top:2px;\">\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()\">Maximize View</button>\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    <div style=\"display: flex; flex-direction: column; gap: 6px; margin-top: auto; flex-shrink: 0;\">\n        <button class=\"btn btn-main\" style=\"margin: 0; background: #27ae60; color:#fff;\" onclick=\"takeSnapshot()\">Take Snapshot</button>\n        <button class=\"btn btn-main\" style=\"margin: 0;\" onclick=\"downloadImage()\">Save Reference</button>\n    </div>\n</div>\n\n<div class=\"main-workspace\">\n    <div id=\"viewport\">\n        <canvas id=\"mainCanvas\"></canvas>\n    </div>\n\n    <div class=\"gallery-panel\" id=\"galleryPanel\">\n        <div class=\"gallery-title\">Snapshots</div>\n        <div id=\"galleryContainer\" style=\"display: flex; flex-direction: column; gap: 10px;\"></div>\n        <button class=\"clear-gallery-btn\" id=\"clearGallery\" onclick=\"clearSnapshots()\" style=\"display:none;\">Clear All</button>\n    </div>\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, centerX: false };\n    let activeCol = 0, activeRow = 0;\n    let snapshotCount = 0;\n\n    window.addEventListener('DOMContentLoaded', () => {\n        img.crossOrigin = \"anonymous\";\n        \n        img.onload = function() {\n            loadAppState();\n            loadSnapshotsFromStorage();\n        };\n\n        img.onerror = function() {\n            img.src = \"https://storage.googleapis.com/production-homestead-v1-0-0/170/2018170/S9EXuCtN/e078bfaf032240608319f111a5c9d078\";\n        };\n\n        img.src = \"https://storage.googleapis.com/production-homestead-v1-0-0/170/2018170/S9EXuCtN/e078bfaf032240608319f111a5c9d078\";\n\n        const returningUser = localStorage.getItem('precision_returning_session');\n        if (returningUser) {\n            document.getElementById('welcomeModal').style.display = 'none';\n        }\n    });\n\n    function closeWelcomeModal() {\n        document.getElementById('welcomeModal').style.display = 'none';\n        localStorage.setItem('precision_returning_session', 'true');\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            xColor: document.getElementById('xColor').value,\n            xOpacity: document.getElementById('xOpacity').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            centerX: filters.centerX\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        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        if(state.xColor) document.getElementById('xColor').value = state.xColor;\n        if(state.xOpacity) document.getElementById('xOpacity').value = state.xOpacity;\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        filters.centerX = state.centerX || false;\n\n        document.getElementById('bwBtn').classList.toggle('active', filters.grayscale);\n        document.getElementById('thirdsBtn').classList.toggle('active', filters.thirds);\n        document.getElementById('centerXBtn').classList.toggle('active', filters.centerX);\n        \n        drawAll();\n    }\n\n    function appSettingChanged() {\n        drawAll();\n        saveAppState();\n    }\n\n    function toggleFullScreen() {\n        document.body.classList.toggle('fullscreen');\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[0]) return;\n        const reader = new FileReader();\n        reader.onload = (ev) => {\n            const newImg = new Image();\n            newImg.crossOrigin = \"anonymous\";\n            newImg.onload = () => { \n                img = newImg;\n                resetAll(); \n                autoCenterAndFit(); \n                saveAppState();\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            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(); ctx.moveTo(0, pos); zCtx.lineTo(zoomCanvas.width, pos); zCtx.stroke();\n        }\n    }\n\n    function getRGBA(hex, opacityPercent) {\n        let c = hex.replace('#','');\n        if(c.length === 3) c = c[0]+c[0]+c[1]+c[1]+c[2]+c[2];\n        let r = parseInt(c.substring(0,2), 16);\n        let g = parseInt(c.substring(2,4), 16);\n        let b = parseInt(c.substring(4,6), 16);\n        return `rgba(${r}, ${g}, ${b}, ${opacityPercent / 100})`;\n    }\n\n    function toggleFilter(filterName) {\n        filters[filterName] = !filters[filterName];\n        if (filterName === 'grayscale') document.getElementById('bwBtn').classList.toggle('active', filters.grayscale);\n        if (filterName === 'thirds') document.getElementById('thirdsBtn').classList.toggle('active', filters.thirds);\n        if (filterName === 'centerX') document.getElementById('centerXBtn').classList.toggle('active', filters.centerX);\n        appSettingChanged();\n    }\n\n    function toggleFlip(axis) {\n        if (axis === 'h') flipH = flipH === 1 ? -1 : 1;\n        if (axis === 'v') flipV = flipV === 1 ? -1 : 1;\n        appSettingChanged();\n    }\n\n    function autoCenterAndFit() {\n        moveX = 0; moveY = 0;\n        document.getElementById('zoom').value = 1.0;\n        drawAll();\n    }\n\n    function resetAll() {\n        moveX = 0; moveY = 0; flipH = 1; flipV = 1;\n        filters = { grayscale: false, thirds: false, centerX: false };\n        document.getElementById('zoom').value = 1.0;\n        document.getElementById('blur').value = 0;\n        document.getElementById('thickness').value = 1;\n        document.getElementById('gridColor').value = \"#000000\";\n        document.getElementById('xColor').value = \"#ff0000\";\n        document.getElementById('xOpacity').value = 30;\n        document.getElementById('bwBtn').classList.remove('active');\n        document.getElementById('thirdsBtn').classList.remove('active');\n        document.getElementById('centerXBtn').classList.remove('active');\n        drawAll();\n    }\n\n    function drawAll() {\n        if (!img || !img.complete || img.naturalWidth === 0) 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        document.getElementById('gridReadout').innerText = cols === 0 ? `GRID: OFF` : `GRID: ${cols} x ${rowCount}`;\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            \n            if (filters.centerX) {\n                ctx.save();\n                ctx.strokeStyle = getRGBA(document.getElementById('xColor').value, document.getElementById('xOpacity').value);\n                ctx.lineWidth = Math.max(1, document.getElementById('thickness').value - 1);\n                for (let i = 0; i < cols; i++) {\n                    for (let j = 0; j < rowCount; j++) {\n                        let xStart = pad + i * step; let yStart = pad + j * step;\n                        let xEnd = xStart + step; let yEnd = yStart + step;\n                        if (yEnd > pad + dH) yEnd = pad + dH;\n                        if (yStart < pad + dH) {\n                            ctx.beginPath(); ctx.moveTo(xStart, yStart); ctx.lineTo(xEnd, yEnd); ctx.stroke();\n                            ctx.beginPath(); ctx.moveTo(xEnd, yStart); ctx.lineTo(xStart, yEnd); ctx.stroke();\n                        }\n                    }\n                }\n                ctx.restore();\n            }\n\n            if (filters.thirds) {\n                ctx.save(); ctx.strokeStyle = \"rgba(212, 175, 55, 0.5)\"; ctx.lineWidth = 1.5;\n                const tw = dW / 3; const th = dH / 3;\n                for(let i=1; i<=2; i++) {\n                    ctx.beginPath(); ctx.moveTo(pad + i*tw, pad); ctx.lineTo(pad + i*tw, pad+dH); ctx.stroke();\n                    ctx.beginPath(); ctx.moveTo(pad, pad + i*th); ctx.lineTo(pad+dW, pad + i*th); ctx.stroke();\n                }\n                ctx.restore();\n            }\n\n            ctx.save();\n            ctx.strokeStyle = document.getElementById('gridColor').value;\n            ctx.lineWidth = document.getElementById('thickness').value || 1;\n            for (let i = 0; i <= cols; i++) {\n                ctx.beginPath(); ctx.moveTo(pad + i * step, pad); ctx.lineTo(pad + i * step, pad + dH); ctx.stroke();\n            }\n            for (let j = 0; j <= rowCount; j++) {\n                let yPos = pad + j * step; if (yPos > pad + dH) yPos = pad + dH;\n                ctx.beginPath(); ctx.moveTo(pad, yPos); ctx.lineTo(pad + dW, yPos); ctx.stroke();\n            }\n            \n            // CRISP HIGH-CONTRAST LABELS\n            ctx.fillStyle = \"#ffffff\"; \n            ctx.font = \"bold 13px 'Segoe UI', monospace\"; \n            ctx.textBaseline = \"middle\"; \n            ctx.textAlign = \"center\";\n            \n            // Draw Letters (A, B, C...)\n            for (let i = 0; i < cols; i++) {\n                ctx.fillText(String.fromCharCode(65 + i), pad + i * step + step / 2, pad - 16);\n            }\n            \n            // Draw Numbers (1, 2, 3...)\n            for (let j = 0; j < rowCount; j++) {\n                ctx.fillText(j + 1, pad - 18, pad + j * step + step / 2);\n            }\n            ctx.restore();\n        }\n    }\n\n    function takeSnapshot() {\n        snapshotCount++;\n        const dataUrl = canvas.toDataURL(\"image/png\");\n        addSnapshotToGallery(dataUrl, `Snap #${snapshotCount}`);\n        saveSnapshotsToStorage();\n    }\n\n    function addSnapshotToGallery(src, labelText) {\n        const container = document.getElementById('galleryContainer');\n        const card = document.createElement('div');\n        card.className = 'thumbnail-card';\n        card.onclick = () => openSnapshotModal(src, labelText);\n\n        const thumbImg = document.createElement('img');\n        thumbImg.src = src;\n\n        const lbl = document.createElement('div');\n        lbl.className = 'thumbnail-label';\n        lbl.innerText = labelText;\n\n        card.appendChild(thumbImg);\n        card.appendChild(lbl);\n        container.appendChild(card);\n        \n        document.getElementById('clearGallery').style.display = 'block';\n    }\n\n    function clearSnapshots() {\n        document.getElementById('galleryContainer').innerHTML = '';\n        document.getElementById('clearGallery').style.display = 'none';\n        localStorage.removeItem('precision_snapshots');\n        snapshotCount = 0;\n    }\n\n    function saveSnapshotsToStorage() {\n        const cards = document.querySelectorAll('#galleryContainer .thumbnail-card');\n        const list = [];\n        cards.forEach(c => {\n            list.push({ src: c.querySelector('img').src, label: c.querySelector('.thumbnail-label').innerText });\n        });\n        localStorage.setItem('precision_snapshots', JSON.stringify(list));\n    }\n\n    function loadSnapshotsFromStorage() {\n        const saved = localStorage.getItem('precision_snapshots');\n        if(!saved) return;\n        const list = JSON.parse(saved);\n        list.forEach(item => addSnapshotToGallery(item.src, item.label));\n        if(list.length > 0) {\n            snapshotCount = list.length;\n            document.getElementById('clearGallery').style.display = 'block';\n        }\n    }\n\n    function openSnapshotModal(src, title) {\n        document.getElementById('snapshotTitle').innerText = title;\n        const imgEl = document.getElementById('snapshotLargeImg');\n        imgEl.src = src;\n        document.getElementById('popZoom').value = 1;\n        document.getElementById('popZoomReadout').innerText = \"1.0x\";\n        imgEl.style.transform = \"scale(1)\";\n        document.getElementById('snapshotModal').style.display = 'flex';\n    }\n\n    function closeSnapshotModal() { document.getElementById('snapshotModal').style.display = 'none'; }\n    \n    function adjustPopupZoom(val) {\n        document.getElementById('popZoomReadout').innerText = `${parseFloat(val).toFixed(1)}x`;\n        document.getElementById('snapshotLargeImg').style.transform = `scale(${val})`;\n    }\n\n    function downloadImage() {\n        const link = document.createElement('a');\n        link.download = `${document.getElementById('displayTitle').innerText.replace(/\\s+/g, '_')}_Reference.png`;\n        link.href = canvas.toDataURL(\"image/png\");\n        link.click();\n    }\n</script>\n</body>\n</html>","embed_html_app1headerHtml":""},"metaData":{"position":{"left":-592.98828125,"top":619.98046875},"size":{"width":1176,"height":846}}}]}],"offset":{"left":230.99609375,"top":63.984375}}],"connections":{"targetConnections":{},"sourceConnections":{}},"customStatesProperties":{},"pageId":"id1782244239437","version":17.004,"id":"id1782246254043","relativePoint":{"left":230.99609375,"top":63.984375}}