:root{--bg: #f7f7f5;--panel: #ffffff;--border: #e0e0dc;--text: #1f1f1d;--text-muted: #6b6b66;--accent: #2563eb;--accent-soft: #dbe6fd;--danger: #b3261e;--radius: 8px;font-family:IBM Plex Sans,-apple-system,BlinkMacSystemFont,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text)}.app{display:flex;height:100vh}.sidebar{width:300px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px}.sidebar-header h1{font-size:16px;margin:0 0 12px}.sidebar-empty{color:var(--text-muted);font-size:13px;line-height:1.5}.diagram-list{list-style:none;margin:12px 0;padding:0;overflow-y:auto;flex:1;border:1px solid var(--border);border-radius:var(--radius)}.diagram-list:focus{outline:2px solid var(--accent);outline-offset:-2px}.diagram-list-item{padding:8px 10px;font-size:13px;font-family:IBM Plex Mono,monospace;cursor:pointer;border-bottom:1px solid var(--border);word-break:break-all}.diagram-list-item:last-child{border-bottom:none}.diagram-list-item:hover{background:#f0f0ee}.diagram-list-item.selected{background:var(--accent-soft);font-weight:600}.sidebar-hint{font-size:11px;color:var(--text-muted);margin:0}.main{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:20px 28px}.main-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-shrink:0}.main-header h2{font-family:IBM Plex Mono,monospace;font-size:15px;margin:0;color:var(--text-muted)}.loading-indicator{font-size:12px;color:var(--text-muted)}.view-toggle{display:flex;gap:4px;margin-left:auto}.icon-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);color:var(--text-muted);cursor:pointer}.icon-btn:hover{border-color:var(--accent);color:var(--text)}.icon-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.placeholder{color:var(--text-muted);padding:40px 0}.main-content{flex:1;display:flex;gap:20px;min-height:0}.diagram-column{flex:1;min-width:0;display:flex;flex-direction:column}.notes-column{width:320px;flex-shrink:0;display:flex;flex-direction:column;overflow-y:auto}.error-banner{background:#fdecea;border:1px solid var(--danger);color:var(--danger);padding:10px 14px;border-radius:var(--radius);margin-bottom:16px;font-size:13px}.diagram-pane{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;overflow:auto;flex:1;min-height:280px}.diagram-pane:focus{outline:2px solid var(--accent);outline-offset:2px}.diagram-render{display:flex;justify-content:center;min-width:100%}.diagram-render svg{max-width:100%;height:auto}.diagram-error{color:var(--danger);white-space:pre-wrap;font-family:IBM Plex Mono,monospace;font-size:12px}.markdown-pane{display:block}.markdown-render{max-width:900px;margin:0 auto;font-size:20px;line-height:1.6}.markdown-render h1,.markdown-render h2,.markdown-render h3,.markdown-render h4{line-height:1.25;margin:1em 0 .5em}.markdown-render h1:first-child,.markdown-render h2:first-child,.markdown-render h3:first-child{margin-top:0}.markdown-render h1{font-size:44px;border-bottom:2px solid var(--border);padding-bottom:14px}.markdown-render h2{font-size:32px}.markdown-render h3{font-size:25px}.markdown-render p,.markdown-render ul,.markdown-render ol,.markdown-render blockquote{margin:.7em 0}.markdown-render ul,.markdown-render ol{padding-left:1.3em}.markdown-render li+li{margin-top:.3em}.markdown-render a{color:var(--accent)}.markdown-render code{font-family:IBM Plex Mono,monospace;font-size:.85em;background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:2px 7px}.markdown-render pre{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;overflow-x:auto}.markdown-render pre code{font-size:.75em;border:none;padding:0;background:none}.markdown-render blockquote{border-left:4px solid var(--border);color:var(--text-muted);padding:4px 0 4px 20px}.markdown-render img{max-width:100%}.markdown-render table{border-collapse:collapse;margin:.7em 0;font-size:.85em}.markdown-render th,.markdown-render td{border:1px solid var(--border);padding:9px 14px;text-align:left}.markdown-render hr{border:none;border-top:1px solid var(--border);margin:1.6em 0}.diagram-render g.node.fp-active rect,.diagram-render g.node.fp-active polygon,.diagram-render g.node.fp-active path{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px;transition:outline-offset .12s ease}.diagram-render g.node.fp-active{filter:drop-shadow(0 1px 3px rgba(37,99,235,.3))}.diagram-render g.node.fp-active .nodeLabel{color:var(--accent)}.fp-link-icon circle{fill:var(--panel);stroke:var(--border);stroke-width:1.3px}.fp-link-icon text{font-size:10px;fill:var(--text-muted);font-family:IBM Plex Sans,sans-serif;pointer-events:none}.fp-link-icon:hover circle{stroke:var(--accent);fill:var(--accent-soft)}.fp-link-icon:hover text{fill:var(--accent)}.notes-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;height:100%;display:flex;flex-direction:column}.notes-panel-empty{color:var(--text-muted);font-size:13px}.notes-panel-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.notes-node-label{font-weight:600}.notes-node-id{font-family:IBM Plex Mono,monospace;font-size:12px;color:var(--text-muted)}.notes-textarea,.source-textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius);padding:10px;font-family:IBM Plex Sans,sans-serif;font-size:14px;resize:vertical}.notes-textarea{flex:1;resize:none;background:#fffce8;border-color:#eadf9c}.notes-textarea:focus{outline:none;border-color:var(--accent)}.source-textarea{flex:1;height:100%;font-family:IBM Plex Mono,monospace;font-size:12.5px;line-height:1.5}.notes-panel-actions,.source-editor-actions{margin-top:10px;display:flex;justify-content:flex-end;flex-shrink:0}.source-editor{flex:1;display:flex;flex-direction:column}.btn{font-family:inherit;font-size:13px;padding:7px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--panel);cursor:pointer}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{color:var(--text-muted);cursor:default}.unsupported-screen{max-width:520px;margin:80px auto;padding:0 20px;line-height:1.6}