/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Mar 06 2026 | 11:41:30 */
/* --- 5. PLAYER INTERFACE WRAPPER --- */
        .interface-wrapper {
            background: linear-gradient(to bottom, var(--bg-dark) 0%, #101720 100%);
            border-bottom: 1px solid rgba(255,255,255,0.02);
        }

        /* --- 6. ENGAGEMENT MODELS WRAPPER --- */
        .engagement-wrapper {
            background-color: var(--bg-dark);
            background-image: radial-gradient(circle at 0% 0%, rgba(245, 166, 35, 0.04) 0%, transparent 60%);
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

/* --- 7. SECURITY & COMPLIANCE WRAPPER --- */
        .security-wrapper {
            background: linear-gradient(180deg, #101720 0%, var(--bg-dark) 100%);
            border-bottom: 1px solid rgba(255,255,255,0.02);
        }

/* --- 8. GRAPHICS SHOWCASE WRAPPER --- */
        .showcase-wrapper {
            background-color: var(--bg-dark);
            border-bottom: 1px solid rgba(255,255,255,0.02);
        }

        .showcase-grid {
            display: grid;
            /* Creates a responsive grid that adjusts based on screen size */
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 32px;
            width: 100%;
        }

        .showcase-item {
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.05);
            position: relative;
            background: var(--bg-card);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            aspect-ratio: 16 / 9; /* Keeps a cinematic ratio for your graphics */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .showcase-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        /* Subtle zoom effect when users hover over your graphics */
        .showcase-item:hover img {
            transform: scale(1.06);
        }
        
        /* Mobile adjustment for smaller screens */
        @media (max-width: 768px) {
            .showcase-grid {
                grid-template-columns: 1fr;
            }
        }