*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #edf1f7;--surface: #ffffff;--surface-2: #f4f7fc;--border: #cdd8e8;--border-strong: #8fafc8;--text-1: #0d1f33;--text-2: #2c4a6a;--text-3: #6a8aaa;--accent: #1a3a6e;--accent-light: #e4edf8;--accent-hover: #102a54;--line-color: #8fafc8;--radius: 10px;--shadow-sm: 0 1px 2px rgba(0,0,0,.05);--shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04)}html,body,#root{height:100%;overflow:hidden}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text-1);-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-3)}.editor-panel{display:flex;flex-direction:column;height:100%;background:var(--surface);overflow:hidden}.editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);flex-shrink:0;gap:8px}.editor-label{font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.04em;text-transform:uppercase}.editor-toolbar-right{display:flex;align-items:center;gap:6px}.editor-meta{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}.toolbar-btn{display:flex;align-items:center;gap:4px;padding:4px 8px;font-size:12px;font-weight:500;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text-2);cursor:pointer;transition:all .12s;font-family:inherit}.toolbar-btn:hover{border-color:var(--border-strong);color:var(--text-1);background:var(--bg)}.toolbar-btn--active{background:var(--accent-light);border-color:var(--border-strong);color:var(--accent)}.toolbar-btn--danger:hover{border-color:#fca5a5;color:#dc2626;background:#fef2f2}.editor-help{padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);flex-shrink:0}.help-title{font-size:11px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}.help-table{display:flex;flex-direction:column;gap:4px}.help-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.help-code{font-family:JetBrains Mono,Fira Code,monospace;font-size:11px;color:var(--accent);background:var(--accent-light);padding:1px 5px;border-radius:4px;white-space:nowrap;flex-shrink:0}.help-desc{font-size:11px;color:var(--text-3)}.help-note{margin-top:8px;font-size:11px;color:var(--text-3);line-height:1.5}.help-note code{font-family:JetBrains Mono,monospace;font-size:11px;background:var(--bg);padding:0 3px;border-radius:3px}.editor-textarea{flex:1;width:100%;padding:14px;font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--text-1);background:var(--surface);border:none;outline:none;resize:none;overflow-y:auto;-moz-tab-size:2;tab-size:2}.editor-textarea::placeholder{color:var(--text-3);opacity:.7}.family-tree{position:relative;display:flex;flex-direction:column;align-items:center;gap:40px;padding:32px 24px 48px;min-width:max-content;margin:0 auto}.tree-node{display:flex;flex-direction:column;align-items:center}.cobig-svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none}.person-card{display:flex;flex-direction:column;align-items:center;padding:10px 16px;min-width:100px;max-width:160px;border-radius:var(--radius);border:1.5px solid var(--border);background:var(--surface);box-shadow:var(--shadow);transition:box-shadow .15s,border-color .15s;cursor:default;-webkit-user-select:none;user-select:none;text-align:center}.person-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}.person-name{font-size:13px;font-weight:600;color:var(--text-1);line-height:1.35;word-break:break-word}.person-dates{font-size:11px;color:var(--text-3);margin-top:3px;font-variant-numeric:tabular-nums}.person-cobig{font-size:10px;color:var(--accent);margin-top:4px;padding:1px 6px;background:var(--accent-light);border-radius:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.comment-node{font-size:13px;font-weight:600;letter-spacing:.03em;padding:4px 14px;background:var(--accent-light);border-radius:20px;border:1px solid var(--border-strong);color:var(--accent)}.children-area{display:flex;flex-direction:column;align-items:center}.children-area:before{content:"";display:block;width:1.5px;height:20px;background:var(--line-color)}.children-row{display:flex;align-items:flex-start}.child-col{display:flex;flex-direction:column;align-items:center;padding:20px 8px 0;position:relative}.child-col:after{content:"";position:absolute;top:0;left:0;right:0;height:1.5px;background:var(--line-color)}.child-col:first-child:after{left:50%}.child-col:last-child:after{right:50%}.child-col:first-child:last-child:after{display:none}.child-col:before{content:"";position:absolute;top:0;left:50%;width:1.5px;height:20px;background:var(--line-color);transform:translate(-50%)}.cobig-littles-row{display:flex;justify-content:center;padding-top:20px}.cobig-little-col{display:flex;flex-direction:column;align-items:center;padding:0 8px}.tree-separator{width:100%;max-width:320px;height:1px;background:var(--border);margin:0 auto}.tree-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;color:var(--text-3);padding:40px;text-align:center}.tree-empty-icon{opacity:.4;margin-bottom:4px}.tree-empty-title{font-size:15px;font-weight:600;color:var(--text-2)}.tree-empty-hint{font-size:13px;color:var(--text-3)}.app{display:flex;flex-direction:column;height:100%;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:50px;flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--border);gap:12px}.app-header-left{display:flex;align-items:center;gap:9px;min-width:0}.app-logo{flex-shrink:0;line-height:0}.app-title{font-size:15px;font-weight:700;color:var(--text-1);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-toggle{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:3px;gap:2px;flex-shrink:0}.tab-btn{display:flex;align-items:center;gap:5px;padding:4px 10px;font-size:12px;font-weight:500;border:none;background:transparent;color:var(--text-3);border-radius:5px;cursor:pointer;transition:all .12s;font-family:inherit}.tab-btn:hover{color:var(--text-1)}.tab-btn--active{background:var(--surface);color:var(--text-1);box-shadow:var(--shadow-sm)}.app-main{flex:1;display:flex;overflow:hidden;min-height:0}.pane{overflow:hidden;display:flex;flex-direction:column}.pane-editor{width:340px;flex-shrink:0;border-right:1px solid var(--border)}.pane-divider{width:1px;background:var(--border);flex-shrink:0;display:none}.pane-tree{flex:1;min-width:0;background:var(--bg);background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:20px 20px;background-position:10px 10px}.tree-scroll{width:100%;height:100%;overflow:auto;padding-bottom:48px}@media (max-width: 640px){.pane-editor,.pane-tree{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;display:none}.tree-scroll{scrollbar-width:none;-ms-overflow-style:none}.tree-scroll::-webkit-scrollbar{display:none}.pane--active{display:flex!important}.app-main{position:relative}.pane-editor{border-right:none;width:100%}.pane-tree{flex:none}}@media (min-width: 641px) and (max-width: 900px){.pane-editor{width:280px}.tab-toggle{pointer-events:none;opacity:.5}}@media (min-width: 641px){.pane-editor,.pane-tree{display:flex!important}}