/* The 12px Mouse Follower Dot */
        .cursor-dot {
            width: 12px;
            height: 12px;
            background-color: #0d6efd; /* Bootstrap primary color */
            border-radius: 50%; /* Make it a circle */
            position: fixed; /* Fixed relative to the viewport */
            top: 0;
            left: 0;
            pointer-events: none; /* Crucial: allows clicking *through* the dot */
            z-index: 9999; /* Ensure it stays on top of everything */
            transform: translate(-50%, -50%); /* Center the dot perfectly on the cursor tip */
            
            /* Smooth transitions for scaling and color changes on hover */
            transition: transform 0.2s ease-out, background-color 0.2s ease-out;
            box-shadow: 0 0 10px rgba(13, 110, 253, 0.5);
        }

        /* Optional helper class applied via JS when hovering over clickable items */
        .cursor-dot.hovered {
            transform: translate(-50%, -50%) scale(2.5);
            background-color: rgba(13, 110, 253, 0.4);
            mix-blend-mode: multiply;
        }

        /* General layout styling for the demo */
        .demo-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }