/* Quote Slide */
        body.quote-slide {
            background: linear-gradient(135deg, #004d40 0%, #00796b 100%);
            color: #fff;
        }



        /* Self-sizing Toolbar Demo */
        .toolbar-demo {
            display: flex;
            gap: 1rem;
            padding: 1rem;
            background: #f5f5f5;
            border-radius: 8px;
            margin-bottom: 1rem;
            animation: toolbarResize 6s ease-in-out infinite;
        }

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

        .toolbar-button {
            flex: 1;
            padding: 0.75rem 1rem;
            background: #00796b;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .toolbar-button:hover {
            background: #004d40;
        }

        /* Min/Max Card Demo */
        .card-container {
            width: 100%;
            padding: 2rem;
            background: #e0f2f1;
            border: 2px dashed #00796b;
            border-radius: 8px;
            position: relative;
            animation: cardResize 8s ease-in-out infinite;
            display: flex;
            justify-content: center;
        }

        @keyframes cardResize {
            0%, 100% { width: 100%; }
            25% { width: 80%; }
            50% { width: 60%; }
            75% { width: 40%; }
        }

        .container-label {
            position: absolute;
            top: 0.5rem;
            left: 0.5rem;
            font-size: 0.8rem;
            color: #00796b;
            font-weight: bold;
        }

        .balance-card {
            background: linear-gradient(135deg, #00796b 0%, #4db6ac 100%);
            color: white;
            padding: 2rem;
            border-radius: 8px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        /* Dense Grid Demo */
        .dense-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            grid-auto-flow: dense;
            gap: 1rem;
            padding: 1rem;
            background: #f5f5f5;
            border-radius: 8px;
			width: 100%;
        }

        .grid-item {
            background: #00796b;
            color: white;
            padding: 1rem;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .grid-item.wide {
            grid-column: span 2;
            background: #004d40;
        }

        .grid-item.tall {
            grid-row: span 2;
            background: #00897b;
        }

        /* Animation for grid items appearing */
        @keyframes itemAppear {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .grid-item {
            animation: itemAppear 0.5s ease-out;
        }

        .demo-label {

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

        /* Window resize indicator */
        .resize-indicator {
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 0.8rem;
            color: #666;
            background: rgba(255, 255, 255, 0.9);
            padding: 0.5rem 1rem;
            border-radius: 4px;
        }