/* Domma Showcase - demo styles from public/showcase/integrations, by scripts/site-migrate/demo-styles.mjs:
 * only rules for classes the demos use. Do not edit - re-run the script, or move a rule
 * into a demo's own demo.css. */
.showcase-demo[data-demo^="showcase/integrations/"] .flow-step {
            display: inline-block;
            background: var(--dm-primary-bg, #e7f3ff);
            color: var(--dm-primary, #007bff);
            padding: 1rem 1.5rem;
            border-radius: 6px;
            font-weight: 600;
            margin: 0.5rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .showcase-demo[data-demo^="showcase/integrations/"] .flow-arrow {
            display: inline-block;
            color: var(--dm-text-secondary, #6c757d);
            font-size: 1.5rem;
            margin: 0 0.5rem;
        }

        .showcase-demo[data-demo^="showcase/integrations/"] .result-pane {
            background: var(--dm-bg-secondary, #f8f9fa);
            border: 1px solid var(--dm-border, #dee2e6);
            border-radius: 4px;
            padding: 1.5rem;
            min-height: 200px;
        }

        .showcase-demo[data-demo^="showcase/integrations/"] .model-state {
            background: var(--dm-bg-tertiary, #e9ecef);
            border-radius: 4px;
            padding: 1rem;
            margin-top: 1rem;
        }

        .showcase-demo[data-demo^="showcase/integrations/"] .model-state h4 {
            margin-top: 0;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        .showcase-demo[data-demo^="showcase/integrations/"] .model-state pre {
            margin: 0;
            background: var(--dm-surface, #fff);
            padding: 0.75rem;
            border-radius: 4px;
            font-size: 12px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
        }