html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
#app { display: flex; height: 100%; }
#left-pane { flex: 0 0 33.333%; display: flex; flex-direction: column; min-width: 0; }
#right-pane { flex: 1 1 66.667%; display: flex; flex-direction: column; min-width: 0; }
.pane-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
.pane-header h2 { margin: 0; font-size: 16px; }
#render-btn { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; background: white; cursor: pointer; }
#render-btn:hover { background: #f3f4f6; }
#yaml-input { flex: 1; width: 100%; }
.CodeMirror { height: 100%; font-size: 13px; }
#error { color: #b91c1c; padding: 6px 12px; min-height: 22px; }
#graph { flex: 1; position: relative; }
svg { width: 100%; height: 100%; display: block; background: #ffffff; }
.node circle { fill: #3b82f6; stroke: #1e40af; stroke-width: 1px; }
.node text { font-size: 12px; fill: #111827; pointer-events: none; }
.link { stroke: #9ca3af; stroke-opacity: 0.8; }