/* Center work area canvas */
#canvas-area canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    position: absolute;
    top: 0;
    left: 0;
}

#work-canvas {
    z-index: 1;
}

#overlay-canvas {
    z-index: 2;
    pointer-events: none;
}

#grid-canvas {
    z-index: 3;
    pointer-events: none;
}

/* Checkerboard transparency background */
#canvas-area .checkerboard {
    position: absolute;
    z-index: 0;
    background-image:
        conic-gradient(
            var(--checkerboard-dark) 90deg,
            var(--checkerboard-light) 90deg 180deg,
            var(--checkerboard-dark) 180deg 270deg,
            var(--checkerboard-light) 270deg
        );
    background-color: var(--checkerboard-light);
}