.mermaid-demo{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin:var(--spacing-lg) 0}.mermaid-demo-header{margin-bottom:var(--spacing-md)}.mermaid-demo-header h3{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-xs);color:var(--color-text)}.mermaid-demo-header p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.mermaid-demo-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin:var(--spacing-md) 0}.mermaid-demo-panel{display:flex;flex-direction:column}.mermaid-demo-panel-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--spacing-xs)}.mermaid-demo-textarea{width:100%;min-height:300px;padding:var(--spacing-md);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--font-size-sm);font-family:var(--font-family-mono);line-height:1.7;resize:vertical;transition:all var(--transition-fast)}.mermaid-demo-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-alpha-10)}.mermaid-demo-preview{min-height:300px;padding:var(--spacing-md);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:auto;display:flex;align-items:center;justify-content:center}.mermaid-demo-preview svg{max-width:100%;height:auto}:root[data-theme=dark] .mermaid-demo-preview svg{filter:brightness(1.1)}:root[data-theme=dark] .mermaid-demo-preview svg .node rect,:root[data-theme=dark] .mermaid-demo-preview svg .node circle,:root[data-theme=dark] .mermaid-demo-preview svg .node polygon{stroke:var(--color-primary)!important;stroke-width:2px!important}:root[data-theme=dark] .mermaid-demo-preview svg .edgePath .path{stroke:var(--color-primary)!important;stroke-width:2px!important}:root[data-theme=dark] .mermaid-demo-preview svg .arrowheadPath{fill:var(--color-primary)!important;stroke:var(--color-primary)!important}:root[data-theme=dark] .mermaid-demo-preview svg text{fill:var(--color-text)!important}.mermaid-demo-error{padding:var(--spacing-sm) var(--spacing-md);background:#e07a5f1a;border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--color-error);font-size:var(--font-size-sm);margin-top:var(--spacing-sm)}.mermaid-demo-footer{text-align:center;padding-top:var(--spacing-lg);border-top:1px solid var(--color-border);margin-top:var(--spacing-lg)}.mermaid-demo-footer p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0 0 var(--spacing-md)}.mermaid-demo-cta{padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast)}.mermaid-demo-cta:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-sm)}.mermaid-demo-cta:focus{outline:2px solid var(--color-primary);outline-offset:2px}@media(max-width:768px){.mermaid-demo-split{grid-template-columns:1fr}.mermaid-demo-textarea,.mermaid-demo-preview{min-height:200px}}