*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-primary: #3b82f6;--color-primary-hover: #2563eb;--color-secondary: #6b7280;--color-secondary-hover: #4b5563;--color-success: #10b981;--color-bg: #ffffff;--color-surface: #f9fafb;--color-border: #e5e7eb;--color-text: #111827;--color-text-muted: #6b7280;--color-error: #ef4444;--radius: 6px;--shadow: 0 1px 3px rgba(0, 0, 0, .1)}body{font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;background-color:var(--color-bg);color:var(--color-text);line-height:1.5}html,body,#app{height:100%}.embed-mode{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.embed-edit-btn{position:absolute;top:.75rem;right:.75rem;padding:.5rem;color:var(--color-text-muted);opacity:.5;transition:opacity .15s,color .15s;border-radius:var(--radius)}.embed-edit-btn:hover{opacity:1;color:var(--color-primary)}.embed-mode .diagram-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.embed-mode .diagram-container svg{max-width:100%;max-height:100%;width:auto;height:auto;display:block}.embed-mode .error-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem}.embed-mode .error-message{text-align:center;color:var(--color-error)}.embed-mode .error-message h2{font-size:1.25rem;margin-bottom:.5rem}.editor-mode{min-height:100vh;display:flex;flex-direction:column}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--color-border);background-color:var(--color-surface)}.editor-header h1{font-size:1.25rem;font-weight:600}.editor-header .actions{display:flex;gap:.5rem}.btn{display:inline-flex;align-items:center;padding:.5rem 1rem;font-size:.875rem;font-weight:500;border-radius:var(--radius);border:none;cursor:pointer;transition:background-color .15s,transform .1s}.btn:active{transform:scale(.98)}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:var(--color-primary-hover)}.btn-secondary{background-color:#fff;color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background-color:var(--color-surface);border-color:var(--color-secondary-hover)}.btn-success{background-color:var(--color-success)!important;color:#fff!important;border-color:var(--color-success)!important}.editor-main{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1px;background-color:var(--color-border)}@media(max-width:768px){.editor-main{grid-template-columns:1fr;grid-template-rows:1fr 1fr}}.editor-pane,.preview-pane{background-color:var(--color-bg);display:flex;flex-direction:column}.editor-pane label,.preview-pane label{display:block;padding:.75rem 1rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);background-color:var(--color-surface);border-bottom:1px solid var(--color-border)}.code-editor-container{flex:1;overflow:hidden}.code-editor-container .cm-editor{height:100%}.editor-pane textarea{flex:1;padding:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875rem;line-height:1.6;border:none;resize:none;outline:none}.editor-pane textarea:focus{background-color:#fefefe}.preview-container{flex:1;padding:1.5rem;overflow:auto;display:flex;align-items:center;justify-content:center;background-color:var(--color-surface)}.preview-container svg{max-width:100%;height:auto;background-color:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}.preview-container .loading{color:var(--color-text-muted)}.preview-container .error-message{color:var(--color-error);text-align:center;max-width:100%}.preview-container .error-message pre{margin-top:.5rem;padding:.75rem;background-color:#fff;border-radius:var(--radius);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem;white-space:pre-wrap;word-break:break-word}.editor-footer{padding:.5rem 1.5rem;text-align:center;font-size:.75rem;color:var(--color-text-muted);background-color:var(--color-surface);border-top:1px solid var(--color-border)}.editor-footer a{color:inherit;text-decoration:none}.editor-footer a:hover{text-decoration:underline}