@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--bg-primary:#0d1117;--bg-secondary:#161b22;--bg-tertiary:#1c2333;--bg-glass:#161b22bf;--border:#ffffff14;--border-bright:#ffffff26;--text-primary:#e6edf3;--text-secondary:#8b949e;--text-muted:#484f58;--accent-cyan:#00d4ff;--accent-magenta:#ff6bd6;--accent-lime:#a8ff00;--accent-amber:#fa0;--accent-red:#f55;--accent-green:#5fa;--radius:12px;--radius-sm:8px;--transition:.3s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,sans-serif}.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}.app-header{background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 24px;display:flex}.app-logo{align-items:center;gap:10px;display:flex}.logo-icon{color:var(--accent-cyan);filter:drop-shadow(0 0 8px #00d4ff66);font-size:24px}.app-logo h1{background:linear-gradient(135deg, var(--accent-cyan), var(--accent-magenta));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:20px;font-weight:700}.logo-sub{color:var(--text-secondary);margin-left:4px;font-size:12px}.app-actions{align-items:center;gap:10px;display:flex}.btn-learn{color:var(--accent-cyan);border-radius:var(--radius-sm);transition:var(--transition);background:#00d4ff1a;border:1px solid #00d4ff4d;padding:6px 14px;font-family:Inter,sans-serif;font-size:13px;font-weight:500;text-decoration:none}.btn-learn:hover{background:#00d4ff33;border-color:#00d4ff80}.btn-reset{color:var(--accent-red);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);background:#ff55551a;border:1px solid #ff55554d;padding:6px 14px;font-family:Inter,sans-serif;font-size:13px}.btn-reset:hover{background:#f553;border-color:#ff555580}.app-main{flex:1;display:flex;overflow:hidden}.panel-graph{border-right:1px solid var(--border);flex-direction:column;flex:1;min-width:0;display:flex;position:relative}.panel-label{text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);z-index:10;font-size:11px;font-weight:600;position:absolute;top:12px;left:16px}.graph-container{background:radial-gradient(circle at 20%,#00d4ff08 0%,#0000 50%),radial-gradient(circle at 80%,#ff6bd608 0%,#0000 50%);flex:1;justify-content:center;align-items:center;padding:20px;display:flex;overflow:auto}.graph-svg{overflow:visible}.commit-node{transition:transform var(--transition);cursor:pointer}.commit-node circle{transition:all var(--transition)}.commit-node:hover circle{filter:brightness(1.3)}.graph-edge path{transition:all var(--transition)}@keyframes headPulse{0%,to{opacity:.3;r:19}50%{opacity:.6;r:22}}.head-glow{animation:2s ease-in-out infinite headPulse}.graph-empty{color:var(--text-muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;display:flex}.graph-empty-icon{opacity:.3;color:var(--accent-cyan);font-size:48px}.graph-empty p{font-size:14px}.graph-empty code{background:var(--bg-tertiary);color:var(--accent-lime);border-radius:4px;padding:2px 8px;font-family:JetBrains Mono,monospace;font-size:12px}.graph-empty-hint{color:var(--text-muted);font-size:12px!important}.panel-right{flex-direction:column;flex-shrink:0;width:440px;min-width:360px;display:flex}.panel-terminal{flex:1;min-height:0;display:flex}.panel-sidebar{border-top:1px solid var(--border);max-height:180px;overflow-y:auto}.terminal{background:var(--bg-primary);flex-direction:column;flex:1;min-height:0;font-family:JetBrains Mono,monospace;font-size:13px;display:flex}.terminal-header{background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:10px 16px;display:flex}.terminal-dots{gap:6px;display:flex}.dot{border-radius:50%;width:10px;height:10px}.dot-red{background:#ff5f56}.dot-yellow{background:#ffbd2e}.dot-green{background:#27c93f}.terminal-title{color:var(--text-secondary);font-family:Inter,sans-serif;font-size:12px}.terminal-output{flex:1;min-height:0;padding:12px 16px;overflow-y:auto}.terminal-output::-webkit-scrollbar{width:6px}.terminal-output::-webkit-scrollbar-track{background:0 0}.terminal-output::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}.term-line{white-space:pre-wrap;word-break:break-all;line-height:1.6}.term-input{color:var(--text-primary);font-weight:500}.term-output{color:var(--text-secondary)}.term-error{color:var(--accent-red)}.term-success{color:var(--accent-green)}.term-info{color:var(--accent-cyan);opacity:.8}.terminal-input-row{border-top:1px solid var(--border);background:var(--bg-secondary);flex-shrink:0;align-items:center;padding:8px 16px;display:flex}.terminal-prompt{color:var(--accent-lime);margin-right:8px;font-weight:700}.terminal-input{color:var(--text-primary);caret-color:var(--accent-cyan);background:0 0;border:none;outline:none;flex:1;font-family:JetBrains Mono,monospace;font-size:13px}.terminal-input::placeholder{color:var(--text-muted);font-style:italic}.sidebar-panel{padding:12px 16px}.sidebar-title{text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:10px;font-size:11px;font-weight:600}.file-section{margin-bottom:8px}.file-section-label{margin-bottom:4px;font-size:11px;font-weight:600}.staged-label{color:var(--accent-green)}.working-label{color:var(--accent-amber)}.file-pill{transition:var(--transition);border-radius:12px;margin:2px 4px 2px 0;padding:2px 10px;font-family:JetBrains Mono,monospace;font-size:11px;display:inline-block}.file-pill.staged{color:var(--accent-green);background:#55ffaa1a;border:1px solid #55ffaa4d}.file-pill.modified{color:var(--accent-amber);background:#ffaa001a;border:1px solid #ffaa004d}.file-empty{color:var(--text-muted);font-size:11px;font-style:italic}@media (width<=768px){.app-main{flex-direction:column}.panel-graph{border-right:none;border-bottom:1px solid var(--border);min-height:250px}.panel-right{width:100%;min-width:0}.logo-sub{display:none}}