:root{--color-primary: #3498db;--color-primary-hover: #2980b9;--color-success: #27ae60;--color-success-hover: #229954;--color-error: #e74c3c;--color-header: #2c3e50;--color-panel-header: #34495e;--color-text: #333;--color-text-muted: #7f8c8d;--color-border: #ddd;--color-border-light: #bdc3c7;--color-bg: #f5f5f5;--color-bg-light: #fafafa;--color-bg-white: #ffffff;--color-bg-panel: #ecf0f1;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-family-mono: "Monaco", "Menlo", "Ubuntu Mono", monospace;--font-size-base: 14px;--font-size-sm: .75rem;--font-size-md: .875rem;--font-size-lg: 1.5rem;--border-radius: 4px;--border-width: 1px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .15);--transition-fast: .1s ease-out;--transition-normal: .2s ease-out;--z-controls: 10}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);height:100vh;background-color:var(--color-bg);display:flex;flex-direction:column}.header{background:var(--color-header);color:#fff;padding:var(--spacing-md);text-align:center;box-shadow:var(--shadow-sm)}.header h1{margin:0;font-size:var(--font-size-lg);font-weight:600}.container{display:flex;gap:1px;flex-grow:1}.panel{flex:1;background:var(--color-bg-white);display:flex;flex-direction:column}.panel-header{background:var(--color-panel-header);color:#fff;padding:.75rem var(--spacing-md);font-weight:500;display:flex;justify-content:space-between;align-items:center}.panel-content{flex:1;padding:var(--spacing-md);overflow:auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);background:var(--color-primary);color:#fff;border:none;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);cursor:pointer;font-size:var(--font-size-sm);transition:background-color var(--transition-normal),transform var(--transition-fast)}.btn:hover{background:var(--color-primary-hover)}.btn:disabled{background:var(--color-border-light);cursor:not-allowed}.btn-small{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm)}.btn-success{background:var(--color-success)}.btn-success:hover{background:var(--color-success-hover)}.btn-icon{width:36px;height:36px;padding:0;font-size:18px;background:var(--color-bg-white);border:var(--border-width) solid var(--color-border);color:var(--color-text);box-shadow:var(--shadow-sm)}.btn-icon:hover{background:var(--color-bg);border-color:#999}.btn-icon:active{transform:scale(.95)}.btn-icon:disabled{opacity:.5;cursor:not-allowed;background:var(--color-bg-white)}.error-message{background:var(--color-error);color:#fff;padding:var(--spacing-md);margin:var(--spacing-md);border-radius:var(--border-radius);display:none}.error-message.visible{display:block}@media(max-width:768px){.container{flex-direction:column}.panel{min-height:300px}}.input-panel .panel-content{padding:0}#mermaid-input{width:100%;height:100%;background:var(--color-bg-light)}#mermaid-input .cm-editor{height:100%;background:var(--color-bg-light)}#mermaid-input .cm-editor.cm-focused{outline:none;background:var(--color-bg-white)}#mermaid-input .cm-scroller{font-family:var(--font-family-mono);line-height:1.5}#mermaid-input .cm-gutters{background:var(--color-bg-light);border-right:1px solid var(--color-border-light)}#mermaid-input .cm-editor.cm-focused .cm-gutters{background:var(--color-bg-white)}#mermaid-input .cm-activeLineGutter{background:#007bff1a}#mermaid-input .cm-activeLine{background:#007bff0d}.example-buttons,.controls{display:flex;gap:var(--spacing-sm)}.output-panel .panel-content{padding:0;overflow:hidden;position:relative;background:var(--color-bg-light)}#svg-container{width:100%;height:100%;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}#svg-container.panning{cursor:grabbing}#svg-container.can-pan{cursor:grab}#svg-output{transform-origin:center center;transition:transform var(--transition-fast)}#svg-output svg{width:100%;height:auto;display:block}.zoom-controls{position:absolute;bottom:var(--spacing-md);right:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);z-index:var(--z-controls)}.zoom-level{background:var(--color-bg-white);border:var(--border-width) solid var(--color-border);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);font-size:12px;text-align:center;box-shadow:var(--shadow-sm)}