/* Quote Slide */
        body.quote-slide {
            background: linear-gradient(135deg, #0f3443 0%, #34687a 100%);
            color: #fff;
        }


        /* Demo Styles */
        .margin-demo {
            font-family: system-ui, sans-serif;
        }

        .margin-demo h3, .margin-demo p {
            transition: margin 0.5s ease;
        }

        .with-reset {
            margin: 0;
        }

        .without-reset h3 {
            margin: 1em 0;
        }

        .without-reset p {
            margin: 1em 0;
        }

        .theme-demo {
            padding: 1.5rem;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .brand-1 {
            --primary: #0a7;
            --bg: #f0f9f4;
        }

        .brand-2 {
            --primary: #e91e63;
            --bg: #fce4ec;
        }

        .brand-3 {
            --primary: #2196f3;
            --bg: #e3f2fd;
        }

        .themed {
            background: var(--bg);
            color: var(--primary);
        }

        .themed button {
            background: var(--primary);
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 0.5rem;
        }

        .themed a {
            color: var(--primary);
        }

        .form-demo {
            max-width: 400px;
            margin: 0 auto;
        }

        .form-demo form {
            padding: 1.5rem;
            border: 3px solid transparent;
            border-radius: 8px;
            transition: all 0.3s ease;
            background: #f9f9f9;
        }

        .form-demo input {
            width: 100%;
            padding: 0.5rem;
            margin-bottom: 1rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }

        .form-demo button {
            background: #0a7;
            color: white;
            border: none;
            padding: 0.5rem 1.5rem;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
        }

        /* Modern CSS reactivity */
        .reactive-form:has(:invalid:not(:placeholder-shown)) {
            border-color: #e91e63;
            background: #fef0f3;
        }

        .reactive-form:has(:valid) {
            border-color: #0a7;
            background: #f0fdf4;
        }

        .reactive-form:has(:focus) {
            box-shadow: 0 0 0 3px rgba(10, 170, 119, 0.2);
        }

        /* Navigation hints */
        .nav-hint {
            position: fixed;
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.8rem;
            color: #666;
            animation: float 2s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(-10px); }
        }

        .code-comment {
            color: #7c7c7c;
        }

        .code-property {
            color: #4fc3f7;
        }

        .code-value {
            color: #a5d6a7;
        }

        .code-selector {
            color: #ffab91;
        }

        /* Animation for demos */
        @keyframes marginPulse {
            0%, 100% { margin: 0; }
            50% { margin: 2rem 0; }
        }

        .animating-margin h3,
        .animating-margin p {
            animation: marginPulse 4s ease-in-out infinite;
        }

        .demo-label {

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

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

                            .demo-button {
                                background: #0a7;
                                color: white;
                                border: none;
                                padding: 0.5rem 1rem;
                                margin: 0.25rem;
                                border-radius: 4px;
                                cursor: pointer;
                                font-size: 1rem;
                            }