{"project":{"id":"zORVPeh","userId":"davidyarham@gmail.com","username":null,"userPicture":null,"name":"Sketch Pad","thumbnail":"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","visible":true,"contributors":"","githubRepo":null,"forkedFrom":null,"tags":"","files":{"folder":"","files":[{"name":"index.html","content":"<!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>Untitled</title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<script src=\"https://unpkg.com/lucide@latest/dist/umd/lucide.js\"></script>\n</head>\n<body>\n<main class=\"app\">\n\t<header class=\"app-header\" aria-label=\"App header\">\n\t\t<div class=\"app-header__identity\">\n\t\t\t<div class=\"app-icon\" aria-hidden=\"true\">\n\t\t\t\t<i data-lucide=\"square-pen\"></i>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<p class=\"app-header__eyebrow\">Sketchbook</p>\n\t\t\t\t<h1 class=\"app-header__title\">Notes Draw</h1>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"app-header__actions\" role=\"group\" aria-label=\"Canvas actions\">\n\t\t\t<button id=\"clearBtn\" class=\"header-button\" type=\"button\" aria-label=\"Clear canvas\">\n\t\t\t\t<i data-lucide=\"trash-2\"></i>\n\t\t\t</button>\n\t\t\t<button id=\"saveBtn\" class=\"header-button header-button--primary\" type=\"button\" aria-label=\"Save PNG\">\n\t\t\t\t<i data-lucide=\"download\"></i>\n\t\t\t</button>\n\t\t</div>\n\t</header>\n\n\t<section class=\"board\" aria-label=\"Drawing area\">\n\t\t<div class=\"board__badge\" aria-live=\"polite\">\n\t\t\t<span class=\"status-dot\"></span>\n\t\t\t<span id=\"statusText\">Pen selected</span>\n\t\t</div>\n\t\t<div class=\"canvas-shell\">\n\t\t\t<canvas id=\"drawingCanvas\" aria-label=\"Drawing canvas\"></canvas>\n\t\t</div>\n\t</section>\n\n\t<section class=\"dock\" aria-label=\"Drawing controls\">\n\t\t<div class=\"dock__tools\" role=\"group\" aria-label=\"Drawing tools\">\n\t\t\t<button class=\"tool-chip is-active\" type=\"button\" data-tool=\"pen\" aria-pressed=\"true\" title=\"Pen\">\n\t\t\t\t<i data-lucide=\"pen-tool\"></i>\n\t\t\t\t<span>Pen</span>\n\t\t\t</button>\n\t\t\t<button class=\"tool-chip\" type=\"button\" data-tool=\"pencil\" aria-pressed=\"false\" title=\"Pencil\">\n\t\t\t\t<i data-lucide=\"pencil\"></i>\n\t\t\t\t<span>Pencil</span>\n\t\t\t</button>\n\t\t\t<button class=\"tool-chip\" type=\"button\" data-tool=\"marker\" aria-pressed=\"false\" title=\"Marker\">\n\t\t\t\t<i data-lucide=\"highlighter\"></i>\n\t\t\t\t<span>Marker</span>\n\t\t\t</button>\n\t\t\t<button class=\"tool-chip\" type=\"button\" data-tool=\"eraser\" aria-pressed=\"false\" title=\"Eraser\">\n\t\t\t\t<i data-lucide=\"eraser\"></i>\n\t\t\t\t<span>Eraser</span>\n\t\t\t</button>\n\t\t\t<button class=\"tool-chip\" type=\"button\" data-tool=\"line\" aria-pressed=\"false\" title=\"Line\">\n\t\t\t\t<i data-lucide=\"slash\"></i>\n\t\t\t\t<span>Line</span>\n\t\t\t</button>\n\t\t\t<button class=\"tool-chip\" type=\"button\" data-tool=\"rectangle\" aria-pressed=\"false\" title=\"Rectangle\">\n\t\t\t\t<i data-lucide=\"square\"></i>\n\t\t\t\t<span>Rect</span>\n\t\t\t</button>\n\t\t\t<button class=\"tool-chip\" type=\"button\" data-tool=\"circle\" aria-pressed=\"false\" title=\"Circle\">\n\t\t\t\t<i data-lucide=\"circle\"></i>\n\t\t\t\t<span>Circle</span>\n\t\t\t</button>\n\t\t\t<button class=\"tool-chip\" type=\"button\" data-tool=\"fill\" aria-pressed=\"false\" title=\"Fill\">\n\t\t\t\t<i data-lucide=\"paint-bucket\"></i>\n\t\t\t\t<span>Fill</span>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<div class=\"dock__bottom\">\n\t\t\t<div class=\"swatches\" role=\"group\" aria-label=\"Color swatches\">\n\t\t\t\t<button class=\"swatch is-active\" type=\"button\" data-color=\"#1c1c1e\" style=\"--swatch:#1c1c1e\" aria-label=\"Black\"></button>\n\t\t\t\t<button class=\"swatch\" type=\"button\" data-color=\"#8e8e93\" style=\"--swatch:#8e8e93\" aria-label=\"Gray\"></button>\n\t\t\t\t<button class=\"swatch\" type=\"button\" data-color=\"#0a84ff\" style=\"--swatch:#0a84ff\" aria-label=\"Blue\"></button>\n\t\t\t\t<button class=\"swatch\" type=\"button\" data-color=\"#30b0c7\" style=\"--swatch:#30b0c7\" aria-label=\"Teal\"></button>\n\t\t\t\t<button class=\"swatch\" type=\"button\" data-color=\"#34c759\" style=\"--swatch:#34c759\" aria-label=\"Green\"></button>\n\t\t\t\t<button class=\"swatch\" type=\"button\" data-color=\"#ff9f0a\" style=\"--swatch:#ff9f0a\" aria-label=\"Orange\"></button>\n\t\t\t\t<button class=\"swatch\" type=\"button\" data-color=\"#ff3b30\" style=\"--swatch:#ff3b30\" aria-label=\"Red\"></button>\n\t\t\t\t<label class=\"swatch swatch--picker\" aria-label=\"Custom color\">\n\t\t\t\t\t<input id=\"colorPicker\" class=\"swatch__input\" type=\"color\" value=\"#1c1c1e\" aria-label=\"Custom color picker\" />\n\t\t\t\t</label>\n\t\t\t</div>\n\n\t\t\t<label class=\"size-control\" for=\"sizeRange\">\n\t\t\t\t<span class=\"size-control__label\">Thickness</span>\n\t\t\t\t<input id=\"sizeRange\" class=\"size-control__range\" type=\"range\" min=\"1\" max=\"48\" value=\"6\" />\n\t\t\t\t<output id=\"sizeValue\" class=\"size-control__value\" for=\"sizeRange\">6</output>\n\t\t\t</label>\n\t\t</div>\n\t</section>\n</main>\n  <script type=\"module\" src=\"main.js\"></script>\n</body>\n</html>"},{"name":"main.js","content":"const canvas = document.getElementById('drawingCanvas');\nconst ctx = canvas.getContext('2d');\nconst colorPicker = document.getElementById('colorPicker');\nconst sizeRange = document.getElementById('sizeRange');\nconst sizeValue = document.getElementById('sizeValue');\nconst clearBtn = document.getElementById('clearBtn');\nconst saveBtn = document.getElementById('saveBtn');\nconst statusText = document.getElementById('statusText');\nconst toolButtons = document.querySelectorAll('[data-tool]');\nconst swatches = document.querySelectorAll('.swatch[data-color]');\n\nlet currentTool = 'pen';\nlet drawing = false;\nlet brushColor = colorPicker.value;\nlet brushSize = Number(sizeRange.value);\nlet lastX = 0;\nlet lastY = 0;\nlet startX = 0;\nlet startY = 0;\nlet canvasSnapshot = null;\n\nfunction showControls() {\n\tdocument.body.classList.remove('is-drawing');\n}\n\nfunction resizeCanvas() {\n\tconst ratio = window.devicePixelRatio || 1;\n\tconst rect = {\n\t\twidth: window.innerWidth,\n\t\theight: window.innerHeight\n\t};\n\tconst snapshot = canvas.toDataURL();\n\tconst image = new Image();\n\n\timage.onload = () => {\n\t\tcanvas.width = Math.floor(rect.width * ratio);\n\t\tcanvas.height = Math.floor(rect.height * ratio);\n\t\tctx.setTransform(ratio, 0, 0, ratio, 0, 0);\n\t\tctx.lineCap = 'round';\n\t\tctx.lineJoin = 'round';\n\t\tctx.imageSmoothingEnabled = true;\n\t\tctx.clearRect(0, 0, canvas.width, canvas.height);\n\t\tctx.drawImage(image, 0, 0, rect.width, rect.height);\n\t};\n\n\timage.src = snapshot;\n\n\tif (!snapshot || snapshot === 'data:,') {\n\t\tcanvas.width = Math.floor(rect.width * ratio);\n\t\tcanvas.height = Math.floor(rect.height * ratio);\n\t\tctx.setTransform(ratio, 0, 0, ratio, 0, 0);\n\t\tctx.lineCap = 'round';\n\t\tctx.lineJoin = 'round';\n\t\tctx.imageSmoothingEnabled = true;\n\t}\n}\n\nfunction getPoint(event) {\n\tconst rect = canvas.getBoundingClientRect();\n\treturn {\n\t\tx: event.clientX - rect.left,\n\t\ty: event.clientY - rect.top\n\t};\n}\n\nfunction getToolLabel(tool) {\n\tconst labels = {\n\t\tpen: 'Pen',\n\t\tpencil: 'Pencil',\n\t\tmarker: 'Marker',\n\t\teraser: 'Eraser',\n\t\tline: 'Line',\n\t\trectangle: 'Rectangle',\n\t\tcircle: 'Circle',\n\t\tfill: 'Fill'\n\t};\n\treturn labels[tool] || 'Tool';\n}\n\nfunction getToolSettings(tool) {\n\tif (tool === 'pencil') {\n\t\treturn {\n\t\t\talpha: 0.55,\n\t\t\twidth: Math.max(1, brushSize * 0.7),\n\t\t\tcomposite: 'source-over'\n\t\t};\n\t}\n\n\tif (tool === 'marker') {\n\t\treturn {\n\t\t\talpha: 0.22,\n\t\t\twidth: Math.max(6, brushSize * 1.6),\n\t\t\tcomposite: 'multiply'\n\t\t};\n\t}\n\n\tif (tool === 'eraser') {\n\t\treturn {\n\t\t\talpha: 1,\n\t\t\twidth: Math.max(4, brushSize * 1.2),\n\t\t\tcomposite: 'destination-out'\n\t\t};\n\t}\n\n\treturn {\n\t\talpha: 1,\n\t\twidth: brushSize,\n\t\tcomposite: 'source-over'\n\t};\n}\n\nfunction updateSwatches(color) {\n\tswatches.forEach((swatch) => {\n\t\tswatch.classList.toggle('is-active', swatch.dataset.color.toLowerCase() === color.toLowerCase());\n\t});\n}\n\nfunction floodFill(x, y, fillColor) {\n\tconst width = canvas.width;\n\tconst height = canvas.height;\n\tconst ratio = window.devicePixelRatio || 1;\n\tconst imageData = ctx.getImageData(0, 0, width, height);\n\tconst data = imageData.data;\n\tconst px = Math.floor(x * ratio);\n\tconst py = Math.floor(y * ratio);\n\tconst startIndex = (py * width + px) * 4;\n\n\tif (startIndex < 0 || startIndex >= data.length) return;\n\n\tconst target = [\n\t\tdata[startIndex],\n\t\tdata[startIndex + 1],\n\t\tdata[startIndex + 2],\n\t\tdata[startIndex + 3]\n\t];\n\n\tconst hex = fillColor.replace('#', '');\n\tconst fill = [\n\t\tparseInt(hex.slice(0, 2), 16),\n\t\tparseInt(hex.slice(2, 4), 16),\n\t\tparseInt(hex.slice(4, 6), 16),\n\t\t255\n\t];\n\n\tif (target.every((value, index) => value === fill[index])) return;\n\n\tconst stack = [\n\t\t[px, py]\n\t];\n\n\twhile (stack.length) {\n\t\tconst [cx, cy] = stack.pop();\n\t\tif (cx < 0 || cy < 0 || cx >= width || cy >= height) continue;\n\n\t\tconst index = (cy * width + cx) * 4;\n\t\tif (\n\t\t\tdata[index] !== target[0] ||\n\t\t\tdata[index + 1] !== target[1] ||\n\t\t\tdata[index + 2] !== target[2] ||\n\t\t\tdata[index + 3] !== target[3]\n\t\t) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tdata[index] = fill[0];\n\t\tdata[index + 1] = fill[1];\n\t\tdata[index + 2] = fill[2];\n\t\tdata[index + 3] = fill[3];\n\n\t\tstack.push([cx + 1, cy]);\n\t\tstack.push([cx - 1, cy]);\n\t\tstack.push([cx, cy + 1]);\n\t\tstack.push([cx, cy - 1]);\n\t}\n\n\tctx.putImageData(imageData, 0, 0);\n}\n\nfunction setTool(tool) {\n\tcurrentTool = tool;\n\ttoolButtons.forEach((button) => {\n\t\tconst active = button.dataset.tool === tool;\n\t\tbutton.classList.toggle('is-active', active);\n\t\tbutton.setAttribute('aria-pressed', String(active));\n\t});\n\n\tcanvas.style.cursor = tool === 'eraser' ? 'cell' : tool === 'fill' ? 'pointer' : 'crosshair';\n\tstatusText.textContent = `${getToolLabel(tool)} selected`;\n}\n\nfunction startDrawing(event) {\n\tevent.preventDefault();\n\tcanvas.setPointerCapture(event.pointerId);\n\n\tconst point = getPoint(event);\n\tstartX = point.x;\n\tstartY = point.y;\n\tlastX = point.x;\n\tlastY = point.y;\n\n\tif (currentTool === 'fill') {\n\t\tfloodFill(point.x, point.y, brushColor);\n\t\tstatusText.textContent = 'Area filled';\n\t\tshowControls();\n\t\tcanvas.releasePointerCapture(event.pointerId);\n\t\treturn;\n\t}\n\n\tdrawing = true;\n\tdocument.body.classList.add('is-drawing');\n\tcanvasSnapshot = ctx.getImageData(0, 0, canvas.width, canvas.height);\n\n\tif (currentTool === 'pen' || currentTool === 'pencil' || currentTool === 'marker' || currentTool === 'eraser') {\n\t\tconst settings = getToolSettings(currentTool);\n\t\tctx.save();\n\t\tctx.globalCompositeOperation = settings.composite;\n\t\tctx.globalAlpha = settings.alpha;\n\t\tctx.lineWidth = settings.width;\n\t\tctx.strokeStyle = brushColor;\n\t\tctx.beginPath();\n\t\tctx.moveTo(point.x, point.y);\n\t\tctx.lineTo(point.x + 0.01, point.y + 0.01);\n\t\tctx.stroke();\n\t\tctx.restore();\n\t}\n}\n\nfunction draw(event) {\n\tif (!drawing) return;\n\tevent.preventDefault();\n\n\tconst point = getPoint(event);\n\n\tif (currentTool === 'pen' || currentTool === 'pencil' || currentTool === 'marker' || currentTool === 'eraser') {\n\t\tconst settings = getToolSettings(currentTool);\n\t\tctx.save();\n\t\tctx.lineCap = currentTool === 'marker' ? 'square' : 'round';\n\t\tctx.lineJoin = 'round';\n\t\tctx.globalCompositeOperation = settings.composite;\n\t\tctx.globalAlpha = settings.alpha;\n\t\tctx.lineWidth = settings.width;\n\t\tctx.strokeStyle = brushColor;\n\t\tctx.beginPath();\n\t\tctx.moveTo(lastX, lastY);\n\t\tctx.lineTo(point.x, point.y);\n\t\tctx.stroke();\n\t\tctx.restore();\n\t} else {\n\t\tctx.putImageData(canvasSnapshot, 0, 0);\n\t\tctx.save();\n\t\tctx.globalAlpha = 1;\n\t\tctx.lineWidth = brushSize;\n\t\tctx.strokeStyle = brushColor;\n\t\tctx.beginPath();\n\n\t\tif (currentTool === 'line') {\n\t\t\tctx.moveTo(startX, startY);\n\t\t\tctx.lineTo(point.x, point.y);\n\t\t\tctx.stroke();\n\t\t}\n\n\t\tif (currentTool === 'rectangle') {\n\t\t\tctx.strokeRect(startX, startY, point.x - startX, point.y - startY);\n\t\t}\n\n\t\tif (currentTool === 'circle') {\n\t\t\tconst radius = Math.hypot(point.x - startX, point.y - startY);\n\t\t\tctx.arc(startX, startY, radius, 0, Math.PI * 2);\n\t\t\tctx.stroke();\n\t\t}\n\n\t\tctx.restore();\n\t}\n\n\tlastX = point.x;\n\tlastY = point.y;\n}\n\nfunction stopDrawing(event) {\n\tif (event && canvas.hasPointerCapture(event.pointerId)) {\n\t\tcanvas.releasePointerCapture(event.pointerId);\n\t}\n\n\tif (!drawing) {\n\t\tshowControls();\n\t\treturn;\n\t}\n\n\tdrawing = false;\n\tcanvasSnapshot = null;\n\tshowControls();\n}\n\nfunction clearCanvas() {\n\tctx.clearRect(0, 0, canvas.width, canvas.height);\n\tstatusText.textContent = 'Canvas cleared';\n}\n\nfunction saveCanvas() {\n\tconst link = document.createElement('a');\n\tlink.href = canvas.toDataURL('image/png');\n\tlink.download = 'notes-draw.png';\n\tlink.click();\n\tstatusText.textContent = 'PNG downloaded';\n}\n\nsizeRange.addEventListener('input', () => {\n\tbrushSize = Number(sizeRange.value);\n\tsizeValue.value = String(brushSize);\n\tstatusText.textContent = `Thickness set to ${brushSize}`;\n});\n\ncolorPicker.addEventListener('input', () => {\n\tbrushColor = colorPicker.value;\n\tupdateSwatches(brushColor);\n\tstatusText.textContent = 'Custom color selected';\n});\n\nswatches.forEach((swatch) => {\n\tswatch.addEventListener('click', () => {\n\t\tbrushColor = swatch.dataset.color;\n\t\tcolorPicker.value = brushColor;\n\t\tupdateSwatches(brushColor);\n\t\tstatusText.textContent = 'Color selected';\n\t});\n});\n\nclearBtn.addEventListener('click', clearCanvas);\nsaveBtn.addEventListener('click', saveCanvas);\n\ntoolButtons.forEach((button) => {\n\tbutton.addEventListener('click', () => setTool(button.dataset.tool));\n});\n\ncanvas.addEventListener('pointerdown', startDrawing);\ncanvas.addEventListener('pointermove', draw);\ncanvas.addEventListener('pointerup', stopDrawing);\ncanvas.addEventListener('pointercancel', stopDrawing);\nwindow.addEventListener('resize', resizeCanvas);\n\nresizeCanvas();\nsetTool('pen');\nupdateSwatches(brushColor);\nsizeValue.value = String(brushSize);\n\nif (window.lucide) {\n\tlucide.createIcons();\n}"},{"name":"style.css","content":":root {\n\tcolor-scheme: light dark;\n\tfont-family: Inter, system-ui, sans-serif;\n\t--bg: #ececf1;\n\t--panel: rgba(248, 248, 250, 0.78);\n\t--panel-strong: rgba(255, 255, 255, 0.92);\n\t--line: rgba(60, 60, 67, 0.12);\n\t--text: #111214;\n\t--muted: #6e6e73;\n\t--accent: #111214;\n\t--canvas: #ffffff;\n\t--shadow: 0 10px 30px rgba(17, 18, 20, 0.1);\n}\n\n* {\n\tbox-sizing: border-box;\n}\n\nhtml,\nbody {\n\tmargin: 0;\n\twidth: 100%;\n\theight: 100%;\n}\n\nbody {\n\tmin-height: 100vh;\n\toverflow: hidden;\n\tbackground: var(--bg);\n\tcolor: var(--text);\n}\n\nbutton,\ninput {\n\tfont: inherit;\n}\n\nbutton {\n\tcursor: pointer;\n}\n\n.app-header,\n.dock,\n.board__badge {\n\ttransition: opacity 150ms ease, transform 150ms ease;\n}\n\nbody.is-drawing .app-header,\nbody.is-drawing .dock,\nbody.is-drawing .board__badge {\n\topacity: 0;\n\ttransform: translateY(8px);\n\tpointer-events: none;\n}\n\n.app {\n\twidth: 100vw;\n\theight: 100vh;\n\tposition: relative;\n}\n\n.app-header {\n\tposition: fixed;\n\ttop: 1rem;\n\tleft: 1rem;\n\tright: 1rem;\n\tz-index: 20;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 1rem;\n}\n\n.app-header__identity {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.85rem;\n\tpadding: 0.75rem 0.95rem;\n\tbackground: var(--panel);\n\tbackdrop-filter: blur(20px);\n\tborder: 1px solid var(--line);\n\tborder-radius: 20px;\n\tbox-shadow: var(--shadow);\n}\n\n.app-icon {\n\twidth: 2.5rem;\n\theight: 2.5rem;\n\tborder-radius: 14px;\n\tbackground: #ffffff;\n\tborder: 1px solid rgba(60, 60, 67, 0.08);\n\tdisplay: grid;\n\tplace-items: center;\n\tcolor: #ff9f0a;\n\tflex: 0 0 auto;\n}\n\n.app-header__eyebrow {\n\tmargin: 0 0 0.16rem;\n\tfont-size: 0.72rem;\n\tfont-weight: 600;\n\tletter-spacing: 0.08em;\n\ttext-transform: uppercase;\n\tcolor: var(--muted);\n}\n\n.app-header__title {\n\tmargin: 0;\n\tfont-size: 1.05rem;\n\tfont-weight: 700;\n\tletter-spacing: -0.03em;\n}\n\n.app-header__actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.55rem;\n\tpadding: 0.45rem;\n\tbackground: var(--panel);\n\tbackdrop-filter: blur(20px);\n\tborder: 1px solid var(--line);\n\tborder-radius: 18px;\n\tbox-shadow: var(--shadow);\n}\n\n.header-button,\n.tool-chip {\n\tborder: 1px solid var(--line);\n\tbackground: var(--panel-strong);\n\tcolor: var(--text);\n\ttransition: background 150ms ease, border-color 150ms ease, transform 150ms ease;\n}\n\n.header-button {\n\twidth: 2.5rem;\n\theight: 2.5rem;\n\tpadding: 0;\n\tborder-radius: 14px;\n\tdisplay: inline-grid;\n\tplace-items: center;\n}\n\n.header-button--primary {\n\tbackground: #111214;\n\tborder-color: #111214;\n\tcolor: #ffffff;\n}\n\n.board {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.board__badge {\n\tposition: fixed;\n\tleft: 50%;\n\ttop: 1.1rem;\n\ttransform: translateX(-50%);\n\tz-index: 15;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 0.55rem;\n\tpadding: 0.65rem 0.9rem;\n\tbackground: rgba(255, 255, 255, 0.8);\n\tbackdrop-filter: blur(18px);\n\tborder: 1px solid var(--line);\n\tborder-radius: 999px;\n\tfont-size: 0.82rem;\n\tbox-shadow: var(--shadow);\n}\n\n.status-dot {\n\twidth: 0.55rem;\n\theight: 0.55rem;\n\tborder-radius: 50%;\n\tbackground: #ff9f0a;\n}\n\n.canvas-shell {\n\tposition: fixed;\n\tinset: 0;\n\tbackground: var(--canvas);\n\toverflow: hidden;\n}\n\n#drawingCanvas {\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100vh;\n\ttouch-action: none;\n\tcursor: crosshair;\n}\n\n.dock {\n\tposition: fixed;\n\tleft: 1rem;\n\tright: 1rem;\n\tbottom: 1rem;\n\tz-index: 20;\n\tpadding: 0.7rem;\n\tbackground: var(--panel);\n\tbackdrop-filter: blur(24px);\n\tborder: 1px solid var(--line);\n\tborder-radius: 26px;\n\tbox-shadow: var(--shadow);\n\tdisplay: grid;\n\tgap: 0.7rem;\n}\n\n.dock__tools {\n\tdisplay: flex;\n\tgap: 0.45rem;\n\toverflow-x: auto;\n\tscrollbar-width: none;\n}\n\n.dock__tools::-webkit-scrollbar {\n\tdisplay: none;\n}\n\n.tool-chip {\n\tpadding: 0.62rem 0.8rem;\n\tmin-width: 4.6rem;\n\tborder-radius: 16px;\n\tdisplay: inline-flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 0.35rem;\n\tfont-size: 0.74rem;\n\tfont-weight: 600;\n\twhite-space: nowrap;\n\tflex: 0 0 auto;\n}\n\n.tool-chip.is-active {\n\tbackground: #111214;\n\tborder-color: #111214;\n\tcolor: #ffffff;\n}\n\n.dock__bottom {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 1rem;\n\tflex-wrap: wrap;\n}\n\n.swatches {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.55rem;\n\tflex-wrap: wrap;\n}\n\n.swatch {\n\twidth: 1.9rem;\n\theight: 1.9rem;\n\tpadding: 0;\n\tborder-radius: 50%;\n\tborder: 2px solid rgba(255, 255, 255, 0.95);\n\tbackground: var(--swatch);\n\tbox-shadow: 0 0 0 1px rgba(17, 18, 20, 0.12);\n\tposition: relative;\n\tflex: 0 0 auto;\n}\n\n.swatch.is-active::after {\n\tcontent: '';\n\tposition: absolute;\n\tinset: -0.22rem;\n\tborder-radius: 50%;\n\tborder: 1.5px solid #111214;\n}\n\n.swatch--picker {\n\toverflow: hidden;\n\tbackground: conic-gradient(from 180deg, #ff3b30, #ff9f0a, #ffd60a, #34c759, #30b0c7, #0a84ff, #bf5af2, #ff375f, #ff3b30);\n}\n\n.swatch__input {\n\topacity: 0;\n\twidth: 100%;\n\theight: 100%;\n\tcursor: pointer;\n}\n\n.size-control {\n\tdisplay: grid;\n\tgrid-template-columns: auto minmax(160px, 240px) auto;\n\talign-items: center;\n\tgap: 0.7rem;\n\tmin-width: min(100%, 360px);\n}\n\n.size-control__label {\n\tfont-size: 0.72rem;\n\tfont-weight: 600;\n\ttext-transform: uppercase;\n\tletter-spacing: 0.08em;\n\tcolor: var(--muted);\n}\n\n.size-control__range {\n\taccent-color: #111214;\n}\n\n.size-control__value {\n\tmin-width: 2rem;\n\ttext-align: right;\n\tfont-size: 0.82rem;\n\tfont-weight: 700;\n}\n\n.header-button:hover,\n.tool-chip:hover,\n.swatch:hover {\n\ttransform: translateY(-1px);\n}\n\n.lucide {\n\twidth: 0.95rem;\n\theight: 0.95rem;\n\tstroke-width: 2.1;\n}\n\n@media (max-width: 860px) {\n\t.app-header {\n\t\tgap: 0.75rem;\n\t}\n\n\t.app-header__identity {\n\t\tpadding: 0.7rem 0.85rem;\n\t}\n\n\t.app-header__title {\n\t\tfont-size: 0.98rem;\n\t}\n\n\t.dock {\n\t\tleft: 0.75rem;\n\t\tright: 0.75rem;\n\t\tbottom: 0.75rem;\n\t}\n\n\t.size-control {\n\t\tgrid-template-columns: 1fr;\n\t\tmin-width: 100%;\n\t}\n}\n\n@media (max-width: 640px) {\n\t.app-header {\n\t\ttop: 0.7rem;\n\t\tleft: 0.7rem;\n\t\tright: 0.7rem;\n\t}\n\n\t.board__badge {\n\t\ttop: 4.9rem;\n\t\tmax-width: calc(100vw - 1.4rem);\n\t}\n\n\t.app-header__eyebrow {\n\t\tdisplay: none;\n\t}\n\n\t.tool-chip {\n\t\tmin-width: 4.2rem;\n\t\tpadding: 0.58rem 0.72rem;\n\t}\n\n\t.dock {\n\t\tpadding: 0.62rem;\n\t\tborder-radius: 22px;\n\t}\n}\n\n@media (prefers-color-scheme: dark) {\n\t:root {\n\t\t--bg: #1c1d20;\n\t\t--panel: rgba(34, 34, 38, 0.76);\n\t\t--panel-strong: rgba(44, 45, 50, 0.92);\n\t\t--line: rgba(255, 255, 255, 0.08);\n\t\t--text: #f5f5f7;\n\t\t--muted: #a1a1aa;\n\t\t--canvas: #ffffff;\n\t\t--shadow: 0 12px 34px rgba(0, 0, 0, 0.28);\n\t}\n\n\tbody {\n\t\tbackground: #1b1c1f;\n\t}\n\n\t.app-icon {\n\t\tbackground: rgba(255, 255, 255, 0.08);\n\t\tborder-color: rgba(255, 255, 255, 0.06);\n\t}\n\n\t.header-button--primary,\n\t.tool-chip.is-active {\n\t\tbackground: #f5f5f7;\n\t\tborder-color: #f5f5f7;\n\t\tcolor: #111214;\n\t}\n\n\t.board__badge {\n\t\tbackground: rgba(44, 45, 50, 0.86);\n\t}\n\n\t.size-control__range {\n\t\taccent-color: #f5f5f7;\n\t}\n\n\t.swatch.is-active::after {\n\t\tborder-color: #f5f5f7;\n\t}\n}"}],"folders":[]},"variants":null,"createdAt":"2026-03-08T22:33:17.412Z","updatedAt":"2026-03-08T22:33:24.510Z"}}