/* Quote Slide */
        body.quote-slide {
            background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
            color: #fff;
        }





        /* Fluid Typography Demo */
        .fluid-demo {
            container-type: inline-size;
            width: 100%;
            padding: 2rem;
            background: #f5f5f5;
            border-radius: 8px;
            animation: fluidResize 6s ease-in-out infinite;
        }

        @keyframes fluidResize {
            0%, 100% { width: 100%; }
            50% { width: 50%; }
        }

        .fluid-text {
            font-size: clamp(1rem, 4cqw + 1rem, 2.5rem);
            line-height: 1.5;
            margin-bottom: 1rem;
        }

        .fluid-gap {
            display: flex;
            gap: clamp(0.5rem, 2cqw, 2rem);
            margin-top: 1rem;
        }

        .fluid-box {
            background: #3949ab;
            color: white;
            padding: 1rem;
            border-radius: 4px;
            flex: 1;
            text-align: center;
        }

        /* Intrinsic Media Demo */
        .media-demo {
            display: grid;
            gap: 2rem;
        }

        .media-container {
            position: relative;
            width: 100%;
            animation: mediaResize 8s ease-in-out infinite;
        }

        @keyframes mediaResize {
            0%, 100% { width: 100%; }
            33% { width: 75%; }
            66% { width: 50%; }
        }

        .video-frame {
            aspect-ratio: 16/9;
            width: 100%;
            background: linear-gradient(135deg, #3949ab 0%, #5c6bc0 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
        }

        .video-frame::before {
            content: "▶";
            font-size: 3rem;
            color: white;
            opacity: 0.8;
        }

        .img-frame {
            width: 100%;
            height: 200px;
            object-fit: cover;
            background: linear-gradient(45deg, #3949ab 25%, #5c6bc0 50%, #3949ab 75%);
            background-size: 400% 400%;
            animation: shimmer 3s ease-in-out infinite;
            border-radius: 8px;
        }

        @keyframes shimmer {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Auto-fit Grid Demo */
        .grid-demo-container {
            width: 100%;
            animation: gridResize 8s ease-in-out infinite;
        }

        @keyframes gridResize {
            0%, 100% { width: 100%; }
            50% { width: 60%; }
        }

        .auto-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            padding: 1rem;
            background: #f5f5f5;
            border-radius: 8px;
        }

        .grid-item {
            background: #3949ab;
            color: white;
            padding: 2rem 1rem;
            text-align: center;
            border-radius: 4px;
            font-weight: bold;
        }

        .demo-label {

            color: #666;
            margin-bottom: 1rem;
            display: block;
        }

        /* Comparison styles */
        .comparison-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            width: 100%;
        }

        .rigid-demo {
            padding: 1rem;
            background: #fee;
            border: 2px solid #f44336;
            border-radius: 8px;
        }

        .flexible-demo {
            padding: 1rem;
            background: #efe;
            border: 2px solid #4caf50;
            border-radius: 8px;
        }