.pixelated {
            image-rendering: pixelated;
            image-rendering: -moz-crisp-edges;
            image-rendering: crisp-edges;
        }

        input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 0.25rem;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: #ffffff;
        }

        ::-webkit-scrollbar-thumb {
            background: #E8D3B8;
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #58A6FF;
        }

        input[type=range] {
            -webkit-appearance: none;
            background: transparent;
        }

        input[type=range]::-webkit-slider-runnable-track {
            background: #E8D3B8;
            height: 6px;
            border-radius: 3px;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #58A6FF;
            margin-top: -5px;
            cursor: pointer;
            border: 2px solid white;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        #viewportContainer {
            touch-action: none;
            user-select: none;
            -webkit-touch-callout: none;
        }

        #canvasContainer {
            width: 2048px;
            height: 2048px;
            transform-origin: top left;
        }

        .layer-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            image-rendering: pixelated;
        }

        .toast-enter {
            animation: toastIn 0.3s ease-out forwards;
        }

        .toast-exit {
            animation: toastOut 0.3s ease-in forwards;
        }

        @keyframes toastIn {
            from {
                opacity: 0;
                transform: translate(-50%, -20px);
            }

            to {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }

        @keyframes toastOut {
            from {
                opacity: 1;
                transform: translate(-50%, 0);
            }

            to {
                opacity: 0;
                transform: translate(-50%, -20px);
            }
        }

        /* Custom active tool indicator using CSS */
        .tool-btn.active-tool .indicator-desktop {
            display: block;
        }

        .tool-btn.active-tool .indicator-mobile {
            display: block;
        }