.detective-bg {
    background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
    background-image:
        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
}

.magnifier {
    transition: transform 0.3s;
}

.magnifier:hover {
    transform: scale(1.1) rotate(5deg);
}

.shape-display {
    transition: all 0.3s;
}

.symmetry-line {
    stroke: #fbbf24;
    stroke-width: 3;
    stroke-dasharray: 10, 5;
    animation: dash 1s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -15;
    }
}

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

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
    }

    50% {
        box-shadow: 0 0 40px rgba(251, 191, 36, 0.8);
    }
}