:root{--primary-color: #7F6DF2;--primary-color-tranparent: #7f6df290;--primary-color-light: #9688F2;--primary-color-light-transparent: #9688F290;--secondary-color: #BFF207;--secondary-color-transparent: #BFF207DD0;--secondary-color-warm: #D7F205;--secondary-color-warm-transparent: #D7F205D0;--secondary-color-dark: #86aa05;--text-color: #014034;--text-muted: #54756d;--text-on-primary: #ffffff;--bg: #f7f8fa;--bg-secondary: #ece9ff;--surface: #ffffff;--surface-2: #f1f3f5;--canvas-bg: #ffffff;--border: #e6e8eb;--border-strong: #cfd4da;--shadow-color: #0d001ed3;--success: #16a34a;--warning: #f59e0b;--danger: #ef4444;--info: #0ea5e9;--tool-active-bg: #ece9ff;--tool-active-border: #cfc8ff;--tool-hover-bg: #f4f5ff;--tool-disabled: #c3c7cd;--control-track: #e4e7eb;--control-thumb: #7F6DF2;--control-focus: #7F6DF2;--focus-ring: .125rem solid #D7F205;--overlay: rgba(0,0,0,.4);--glass-blur: .313rem;--glass-opacity: .12;--glass-border: 1px solid rgba(255, 255, 255, .35);--glass-glow: 0 .625rem 1.875rem rgba(0,0,0,.08);--glass-light: rgba(255, 255, 255, .72);--glass-tint: rgba(255, 255, 255, .72);--glass-stroke: rgba(127, 109, 242, .25);--glass-highlight: rgba(191, 242, 7, .18);--glass-tint-light: rgba(15, 18, 20, .64);--glass-stroke-light: rgba(255, 255, 255, .22);--glass-highlight-light: rgba(127, 109, 242, .22);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--radius-sm: .125rem;--radius-md: .25rem;--radius-lg: .5rem;--radius-full: 1rem;--btn-h: 2.25rem;--icon: 1.125rem;--icon-lg: 1.375rem;--z-menu: 10;--z-toast: 1000;--z-modal: 1100;--ease: cubic-bezier(.2,.7,.2,1);--dur-1: .12s;--dur-2: .2s;--primary-h: 248;--primary-s: 84%;--primary-l: 69%;--cursor-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'%3E%3Cpath fill='%23014034' d='M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0z'/%3E%3C/svg%3E") 0 20, crosshair;--cursor-eraser: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 576 512'%3E%3Cpath fill='%23014034' d='M290.7 57.4L57.4 290.7c-25 25-25 65.5 0 90.5l80 80c12 12 28.3 18.7 45.3 18.7H288h9.4H512c17.7 0 32-14.3 32-32s-14.3-32-32-32H387.9L518.6 285.3c25-25 25-65.5 0-90.5L381.3 57.4c-25-25-65.5-25-90.5 0zM297.4 416H288l-105.4 0-80-80L227.3 211.3 364.7 348.7 297.4 416z'/%3E%3C/svg%3E") 10 10, auto;--cursor-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'%3E%3Cpath fill='%23014034' d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V240c0 8.8-7.2 16-16 16s-16-7.2-16-16V64c0-17.7-14.3-32-32-32s-32 14.3-32 32V336c0 1.5 0 3.1 .1 4.6L67.6 283c-16-15.2-41.3-14.6-56.6 1.4s-14.6 41.3 1.4 56.6L124.8 448c43.1 41.1 100.4 64 160 64H304c97.2 0 176-78.8 176-176V128c0-17.7-14.3-32-32-32s-32 14.3-32 32V240c0 8.8-7.2 16-16 16s-16-7.2-16-16V64c0-17.7-14.3-32-32-32s-32 14.3-32 32V240c0 8.8-7.2 16-16 16s-16-7.2-16-16V32z'/%3E%3C/svg%3E") 10 10, grab;--cursor-eyedropper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'%3E%3Cpath fill='%23014034' d='M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z'/%3E%3C/svg%3E") 0 20, crosshair;--cursor-bucket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'%3E%3Cpath fill='%23014034' d='M96 152v-48c0-4.4 3.6-8 8-8h35.1c3.6 0 7.2 1.2 10.1 3.5l33.9 21.7c2.9 2.3 6.5 3.5 10.1 3.5H280c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H216 176 152 104c-4.4 0-8-3.6-8-8zm-16 16h16 24 24 64 112c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H193.1c-1.2 0-2.4-.4-3.4-1.2L156 24.7C151.1 21.1 145.3 19.2 139.1 19.2H104c-13.3 0-24 10.7-24 24v48 56c0 4.4-3.6 8-8 8H24c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8H72 80zm329.1 94.8C434.5 254.9 448 237.8 448 217.6c0-11.7-5-22.4-13.1-29.9L391 144.5c-8.1-7.5-18.9-11.7-30-11.7s-21.9 4.2-30 11.7l-44 43.2c-8.1 7.5-13.1 18.2-13.1 29.9c0 20.2 13.5 37.3 32.9 42.9c-.6 3.8-1.8 7.4-3.4 10.9c-4.6 9.7-12.6 17.7-22.3 22.3c-9.7 4.6-20.7 5.5-31.1 2.4L55.1 240.1C41.7 236.2 29 245.2 29 259.2v26.8c0 9.5 6.2 17.9 15.3 20.8l221 70.3c10.4 3.1 21.4 2.2 31.1-2.4c9.7-4.6 17.7-12.6 22.3-22.3c4.6-9.7 5.5-20.7 2.4-31.1l70.3-221c2.9-9.1-1-19.1-9.5-23.6s-18.8-2.4-25.5 4.6L273 163.9c-6.7 7.1-7.3 18.1-1.4 25.9s16.5 10.7 25.5 6.6l84.5-38.4z'/%3E%3C/svg%3E") 0 20, pointer;--cursor-gradient: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23014034' d='M20 5H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2M8 17H6v-2h2zm0-4H6v-2h2zm0-4H6V7h2zm4 8h-2v-2h2zm0-4h-2v-2h2zm0-4h-2V7h2zm4 8h-2v-2h2zm0-4h-2v-2h2zm0-4h-2V7h2z'/%3E%3C/svg%3E") 10 10, crosshair}*{box-sizing:border-box;margin:0%;padding:0%}body{background-image:linear-gradient(120deg,var(--primary-color-light) 0%,var(--primary-color) 100%);background-image:url(/Painting-app/assets/waves-DXgSKbJP.webp);background-position:center center;background-size:cover;color:var(--text-color);font-family:Figtree,sans-serif}button:focus-visible,input:focus-visible,[role=button]:focus-visible{outline:var(--focus-ring)}@media screen and (max-width:848px){body{background-image:url(/Painting-app/assets/waves-mobile-CcsBUa6h.webp);background-position:center center;background-size:cover}}.canvas{width:100%;height:100vh;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;background:none}.menu,.navigation{position:relative;width:100%;max-width:850px}.menu{position:relative;top:0rem;min-height:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--space-2) var(--space-1) var(--space-2);background-color:var(--primary-color-light-transparent);border:var(--glass-border);border-radius:0 0 var(--radius-lg) var(--radius-lg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));box-shadow:0 .25rem 1.25rem #0d001e26}.menu h1{margin-bottom:var(--space-3);font-size:clamp(1rem,calc(1rem + .5rem * ((100vw - 20rem) / 880)),1.5rem);font-weight:700;color:var(--text-on-primary);text-shadow:0 .125rem .5rem rgba(0,0,0,.2)}.navigation{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;align-items:flex-start;gap:var(--space-2);margin-top:0}.group.zoom,.brush-color,.brush-opacity,.brush-size,.pan-group,.tools,.history,.file{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;background:#ffffff14;border-radius:var(--radius-md);padding:var(--space-2);min-height:calc(1.75rem + var(--space-2) * 2 + var(--space-2) + .813rem)}.buttons,.history-tools,.file-tools{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:var(--space-1)}.brush-color,.brush-size,.brush-opacity{display:flex;flex-direction:column;align-items:center;margin:0}.tools-title{display:block;text-align:center;font-size:clamp(.75rem,.74rem + .1vw,.8125rem);margin:0 0 var(--space-2);color:var(--text-on-primary);font-weight:500;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.3);text-shadow:0 1px 2px rgba(0,0,0,.55)}.menu input{cursor:pointer}.menu button{padding:var(--space-1);border-radius:var(--radius-md);cursor:pointer;background-color:var(--secondary-color);border:1px solid var(--border-strong);transition:all var(--dur-2) var(--ease);box-shadow:0 .125rem .25rem var(--shadow-color);width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu button:hover{cursor:pointer;transform:translateY(-1px);background-color:var(--secondary-color-warm);border:1px solid var(--border-strong);box-shadow:0 .188rem .375rem var(--shadow-color)}.menu button:active{transform:translateY(0)}.menu button:focus-visible,.menu input[type=color]:focus-visible,.menu input[type=range]:focus-visible{outline:var(--focus-ring);outline-offset:.125rem;box-shadow:0 0 0 .25rem color-mix(in srgb,var(--control-focus) 25%,transparent)}.menu button svg{width:auto;height:.875rem;fill:currentColor;vertical-align:middle;pointer-events:none}.menu button.active{background:linear-gradient(135deg,var(--tool-active-bg) 0%,var(--bg-secondary) 100%);border-color:var(--tool-active-border);color:var(--text-color);box-shadow:0 .125rem .5rem #7f6df24d}.menu input[type=color]{width:1.75rem;height:1.75rem;padding:.125rem;border:1px solid var(--border-strong);border-radius:var(--radius-md);background-color:var(--secondary-color);cursor:pointer;transition:all var(--dur-2) ease;box-shadow:0 .125rem .25rem var(--shadow-color);flex-shrink:0}.menu input[type=color]:hover{transform:translateY(-1px);border-color:var(--border-strong);background-color:var(--secondary-color-warm);box-shadow:0 .188rem .375rem var(--shadow-color)}.menu input[type=color]::-webkit-color-swatch-wrapper{padding:0}.menu input[type=color]::-webkit-color-swatch{border:1px solid var(--border);border-radius:var(--radius-md)}.menu input[type=color]::-moz-color-swatch{border:1px solid var(--border);border-radius:var(--radius-md)}.brush-color:focus-within,.brush-size:focus-within,.brush-opacity:focus-within{outline:.188rem solid var(--control-focus);outline-offset:.125rem;border-radius:var(--radius-md)}.menu input[type=range]{appearance:none;-webkit-appearance:none;width:6.25rem;height:1rem;margin:0;border:none;padding:1px .125rem;border-radius:var(--radius-full);background:transparent;box-shadow:inset 0 1px 2px 0 var(--overlay),inset 0 -1px 0 0 var(--glass-border);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.375rem;height:1.375rem;border:none;border-radius:50%;background-image:linear-gradient(to bottom,var(--secondary-color) 0,var(--secondary-color-dark) 100%);cursor:pointer;transition:all var(--dur-2) ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{width:.875rem;height:.875rem;border:none;border-radius:50%;background-image:linear-gradient(to bottom,var(--secondary-color) 0,var(--secondary-color-dark) 100%);cursor:pointer;transition:all var(--dur-2) ease}input[type=range]::-moz-range-thumb:hover{transform:scale(1.15)}input[type=range]::-ms-thumb{width:.875rem;height:.875rem;border-radius:50%;border:0;background-image:linear-gradient(to bottom,var(--secondary-color) 0,var(--secondary-color-dark) 100%)}.menu input[type=range]::-webkit-slider-runnable-track{height:.625rem;border-radius:999px;background:linear-gradient(180deg,#0d3a33,#0b2e29);box-shadow:inset 0 1px #0d0e0f,inset 0 -1px #3a3d42}.menu input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.375rem;height:1.375rem;border-radius:50%;background:var(--secondary-color);border:.125rem solid #0b3a2f;margin-top:-.375rem;box-shadow:0 1px 2px #0003;cursor:pointer;transition:transform var(--dur-2) var(--ease)}.menu input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.05)}.menu input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 .25rem color-mix(in srgb,var(--control-focus) 35%,transparent)}.menu input[type=range]::-moz-range-track{height:.625rem;border-radius:999px;background:linear-gradient(180deg,#0d3a33,#0b2e29);box-shadow:inset 0 1px #0d0e0f,inset 0 -1px #3a3d42}.menu input[type=range]::-moz-range-thumb{width:1.375rem;height:1.375rem;border-radius:50%;background-image:linear-gradient(to bottom,var(--secondary-color) 0,var(--secondary-color-dark) 100%);border:.125rem solid #0b3a2f;box-shadow:0 1px 2px #0003;cursor:pointer;transition:transform var(--dur-2) var(--ease)}.menu input[type=range]::-moz-range-thumb:hover{transform:scale(1.05)}.menu input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 .25rem color-mix(in srgb,var(--control-focus) 35%,transparent)}.menu input[type=range]::-ms-track{height:.625rem;border-radius:999px;background:linear-gradient(180deg,#0d3a33,#0b2e29);border-color:transparent;color:transparent}.menu input[type=range]::-ms-fill-lower,.menu input[type=range]::-ms-fill-upper{background:#0b3a2f;border-radius:999px;box-shadow:inset 0 1px #0d0e0f,inset 0 -1px #3a3d42}.menu input[type=range]::-ms-thumb{width:1.375rem;height:1.375rem;border-radius:50%;background:var(--secondary-color);border:.125rem solid #0b3a2f;box-shadow:0 1px 2px #0003;cursor:pointer}@media(forced-colors:active){.menu input[type=range]{forced-color-adjust:none}.menu input[type=range]::-webkit-slider-runnable-track,.menu input[type=range]::-moz-range-track,.menu input[type=range]::-ms-fill-lower,.menu input[type=range]::-ms-fill-upper{background:CanvasText}.menu input[type=range]::-webkit-slider-thumb,.menu input[type=range]::-moz-range-thumb,.menu input[type=range]::-ms-thumb{background:Highlight;border-color:Highlight}}@media(prefers-reduced-motion:no-preference){.menu input[type=color]:hover,.menu input[type=range]::-webkit-slider-thumb:hover,.menu input[type=range]::-moz-range-thumb:hover{transform:translateY(-1px)}}@media(max-width:848px){.menu{padding:var(--space-3) var(--space-1);border-radius:0}.navigation{justify-content:flex-start}input[type=range]{width:5rem}}@media(max-width:448px){.menu{padding:var(--space-2) var(--space-2)}.menu h1{display:none}.navigation{gap:var(--space-1)}.group.zoom,.brush-color,.brush-opacity,.brush-size,.pan-group,.tools,.history,.file{align-items:flex-start;padding:var(--space-1);min-height:calc(1.75rem + var(--space-1) * 2 + var(--space-1) + .813rem)}.tools-title{flex:0;margin:0 0 var(--space-1)}.buttons,.history-tools,.file-tools{flex:2}.menu input[type=range]{flex:2;height:1rem}.menu button{width:1.5rem;height:1.5rem}input[type=range]::-webkit-slider-thumb{width:1.25rem;height:1.25rem}}.draw-area{position:relative;width:100%;border:.125rem solid var(--border);border-radius:var(--radius-lg);background-color:var(--bg-secondary);box-shadow:0 .625rem 2.5rem #0d001e33;margin:var(--space-3) auto;max-width:850px;height:calc(85vh - 2.5rem);overflow:hidden}.draw-area #draw-canvas{width:100%;height:100%;aspect-ratio:unset;background-color:var(--bg-secondary);border:1px solid var(--border-strong);box-shadow:1px 1px 5px var(--glass-stroke);border-radius:var(--radius-lg);transform:translate(var(--pan-x, 0),var(--pan-y, 0)) scale(var(--zoom, 1));transform-origin:top left;image-rendering:auto;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.draw-area #draw-canvas[data-tool=pencil]{cursor:var(--cursor-pencil)}.draw-area #draw-canvas[data-tool=eraser]{cursor:var(--cursor-eraser)}.draw-area #draw-canvas[data-tool=move]{cursor:var(--cursor-move)}.draw-area #draw-canvas[data-tool=eyedropper]{cursor:var(--cursor-eyedropper)}.draw-area #draw-canvas[data-tool=bucket]{cursor:var(--cursor-bucket)}.draw-area #draw-canvas[data-tool=gradient]{cursor:var(--cursor-gradient)}@media(max-width:848px){.draw-area{margin:var(--space-4);width:unset}}@media(max-width:448px){.draw-area{height:calc(85vh - 1rem);margin:var(--space-2)}}