/* Custom styles */
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #0a0a0a;
    overflow: hidden;
}

* {
    box-sizing: border-box;
}

/* Smooth scrolling and animations */
.spirograph-canvas {
    filter: drop-shadow(0 0 20px rgba(6, 182, 212, 0.3));
}

/* Custom scrollbar for control panel */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(55, 65, 81, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.5);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(6, 182, 212, 0.7);
}

/* Breathing animation for inactive elements */
@keyframes breathe {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.breathing {
    animation: breathe 3s ease-in-out infinite;
}

/* Glow effects */
.glow-cyan {
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
}

.glow-pink {
    box-shadow: 0 0 20px rgba(255, 107, 157, 0.4);
}

/* Custom color input styling */
input[type="color"] {
    -webkit-appearance: none;
    border: none;
    cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
}

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

/* Floating animation */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.floating {
    animation: float 6s ease-in-out infinite;
}

/* Pulse animation for buttons */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.5); }
    50% { box-shadow: 0 0 30px rgba(6, 182, 212, 0.8); }
}

.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Ensure proper rendering on all devices */
canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}