body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
}

input[type="color"] {
    appearance: none;
    padding: 0;
    border: 2px solid #4b5563;
    transition: all 0.2s ease;
}

input[type="color"]:hover {
    transform: scale(1.1);
    border-color: #6b7280;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

button {
    transition: all 0.2s ease;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

button:active {
    transform: translateY(0);
    box-shadow: none;
}