.cm-mermaid-keyword{color:#569cd6;font-weight:700}.cm-mermaid-variable{color:#9cdcfe}.cm-mermaid-string{color:#ce9178}.cm-mermaid-number{color:#b5cea8}.cm-mermaid-operator{color:#d4d4d4;font-weight:700}.cm-mermaid-bracket{color:gold}.cm-mermaid-comment{color:#6a9955;font-style:italic}.cm-mermaid-meta{color:#4ec9b0}[data-theme=dark] .cm-mermaid-keyword{color:#4fc3f7}[data-theme=dark] .cm-mermaid-variable{color:#a6e22e}[data-theme=dark] .cm-mermaid-string{color:#f92672}[data-theme=dark] .cm-mermaid-number{color:#ae81ff}[data-theme=dark] .cm-mermaid-operator{color:#f8f8f2}[data-theme=dark] .cm-mermaid-bracket{color:#ffd866}[data-theme=dark] .cm-mermaid-comment{color:#75715e}[data-theme=dark] .cm-mermaid-meta{color:#66d9ef}:root{--bg-primary: #111827;--bg-secondary: #1f2937;--bg-tertiary: rgba(17, 24, 39, .5);--text-primary: #f3f4f6;--text-secondary: #9ca3af;--border-color: #374151;--accent-hover: #3b82f6;--error-text: #f87171;--error-bg: rgba(153, 27, 27, .2);--button-bg: #374151;--button-text: #f9fafb;--button-hover-bg: #4b5563;--selection-bg: rgba(59, 130, 246, .2)}body.light{--bg-primary: #f9fafb;--bg-secondary: #ffffff;--bg-tertiary: rgba(249, 250, 251, .8);--text-primary: #1f2937;--text-secondary: #4b5563;--border-color: #e5e7eb;--accent-hover: #3b82f6;--error-text: #ef4444;--error-bg: rgba(254, 226, 226, 1);--button-bg: #e5e7eb;--button-text: #1f2937;--button-hover-bg: #d1d5db;--selection-bg: rgba(59, 130, 246, .15)}body{font-family:Inter,sans-serif;overflow:hidden;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s,color .3s}body.page-blogs{overflow:auto;overflow-x:hidden;overflow-y:auto}.code-block-container{position:relative}.copy-button{position:absolute;top:8px;right:8px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;padding:4px 8px;font-size:12px;color:var(--text-secondary);cursor:pointer;opacity:.7;transition:all .2s ease;display:flex;align-items:center;gap:4px}.copy-button:hover{opacity:1;background:var(--button-hover-bg);color:var(--text-primary)}.copy-button svg{width:14px;height:14px}.code-block-container pre{padding-top:40px}#editor{font-family:Fira Code,monospace}#left-pane #editor-container{display:flex;flex-direction:column;height:100%;min-height:0}#left-pane .CodeMirror{height:100%;font-family:Fira Code,monospace;background-color:transparent;color:var(--text-primary);border:none;border-radius:0}#left-pane .CodeMirror-gutters{background-color:var(--bg-secondary);border-right:1px solid var(--border-color);border-radius:0}#left-pane .CodeMirror-linenumber{color:var(--text-secondary);font-size:.9em;padding-right:8px;text-align:right;min-width:2em;line-height:1.4}#left-pane .CodeMirror-linenumbers{background-color:var(--bg-secondary);border-right:1px solid var(--border-color);padding:0 4px;width:3em}#left-pane .CodeMirror-code{background-color:transparent}#left-pane .CodeMirror-cursor{border-left:1px solid var(--text-primary)}#left-pane .CodeMirror-selected,#left-pane .CodeMirror-focused .CodeMirror-selected{background-color:var(--selection-bg)}#resizer{transition:background-color .2s ease-in-out;background-color:var(--border-color)}#resizer:hover{background-color:var(--accent-hover)}#output svg{max-width:100%;height:auto}#output-container{scroll-behavior:smooth;position:relative;overflow:auto;overflow-x:auto;overflow-y:auto}#output-wrapper{transition:transform .2s ease-in-out;position:relative;display:flex;align-items:center;justify-content:center}#zoom-in-btn,#zoom-out-btn{opacity:.7;transition:opacity .2s ease-in-out}#zoom-in-btn:hover,#zoom-out-btn:hover{opacity:1}#zoom-in-btn:disabled,#zoom-out-btn:disabled{opacity:.3;cursor:not-allowed}#output-container::-webkit-scrollbar{width:8px;height:8px}#output-container::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:4px}#output-container::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}#output-container::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}#output-container.grab{cursor:grab}#output-container.grabbing{cursor:grabbing}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 768px){#navbar-default{position:absolute;top:100%;left:0;right:0;width:100%;z-index:9999;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:0;margin:0;box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a}#navbar-default ul{width:100%;margin:0;padding:0;border-radius:0}#navbar-default ul li{width:100%}#navbar-default ul li button{color:var(--text-primary)!important;border-bottom:1px solid var(--border-color);width:100%;text-align:left;padding:1rem;border-radius:0}#navbar-default ul li:last-child button{border-bottom:none}}@media (max-width: 768px){body{overflow:auto}#container{flex-direction:column;overflow-y:auto}#left-pane,#right-pane{width:100%!important;height:calc(100vh - 100px)!important;overflow:auto}#resizer{display:none}body.mobile-show-editor #left-pane{display:flex}body.mobile-show-editor #right-pane,body.mobile-show-preview #left-pane{display:none}body.mobile-show-preview #right-pane{display:flex}#output-container{height:auto;min-height:50vh}header{position:sticky;top:0;z-index:40}footer{position:sticky;bottom:0;z-index:40}#top-toolbar{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;gap:.5rem}#top-toolbar>div{min-width:max-content}#footer-actions{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;gap:.5rem;min-width:0}#footer-actions .footer-action,#footer-actions a{min-width:max-content;white-space:nowrap}.mermaid-code-block{background:linear-gradient(135deg,#667eea,#764ba2);border:2px solid #4c51bf;border-radius:12px;padding:20px;margin:20px 0;position:relative;box-shadow:0 8px 32px #667eea4d;overflow:hidden}.mermaid-code-block:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#4c51bf,#667eea,#764ba2)}.mermaid-code-block-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;color:#fff}.mermaid-code-block-title{font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:8px}.mermaid-code-block-title:before{content:"📊";font-size:16px}.mermaid-code-block-copy{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}.mermaid-code-block-copy:hover{background:#ffffff4d;transform:translateY(-1px)}.mermaid-code-block pre{background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:16px;margin:0;overflow-x:auto;font-family:Fira Code,Monaco,Consolas,monospace;font-size:14px;line-height:1.6;color:#e2e8f0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.mermaid-code-block code{color:#e2e8f0;background:none;padding:0;font-size:14px}[data-theme=dark] .mermaid-code-block{background:linear-gradient(135deg,#1a202c,#2d3748);border-color:#4a5568;box-shadow:0 8px 32px #0006}[data-theme=dark] .mermaid-code-block pre{background:#0006;border-color:#ffffff1a;color:#f7fafc}[data-theme=dark] .mermaid-code-block code{color:#f7fafc}body.light .mermaid-code-block{background:linear-gradient(135deg,#f7fafc,#edf2f7);border-color:#cbd5e0;box-shadow:0 8px 32px #0000001a}body.light .mermaid-code-block pre{background:#fffc;border-color:#0000001a;color:#2d3748}body.light .mermaid-code-block code,body.light .mermaid-code-block-header{color:#2d3748}body.light .mermaid-code-block-copy{background:#0000001a;border-color:#0003;color:#2d3748}body.light .mermaid-code-block-copy:hover{background:#0003}}