* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    width: 100vw; height: 100vh;
    background: linear-gradient(to bottom, #e8f5e9 0%, #c8e6c9 100%);
    display: flex; justify-content: center; align-items: flex-end; overflow: hidden;
}
.name {
    position: fixed; top: 30px; left: 30px;
    font-family: 'SF Mono', 'Consolas', monospace; font-size: 32px;
    color: #2e7d32; font-weight: 600; letter-spacing: -0.5px;
}
.branch-container { position: relative; width: 250px; height: 85vh; margin-bottom: 0; }
.main-line {
    position: absolute; left: 50%; bottom: 0; width: 8px; height: 0;
    background: #388e3c; border-radius: 0; transform: translateX(-50%);
    animation: grow-main 1s ease-out forwards; z-index: 2;
}
@keyframes grow-main { to { height: 36%; } }
.commit {
    position: absolute; left: 50%; width: 14px; height: 14px;
    background: #a5d6a7; border: 3px solid #388e3c; border-radius: 50%;
    transform: translateX(-50%) scale(0); z-index: 3;
}
.c1 { bottom: 5%; animation: pop 0.3s ease-out 0.3s forwards; }
.c2 { bottom: 20%; animation: pop 0.3s ease-out 0.6s forwards; }
.branch-point {
    position: absolute; left: 50%; bottom: 35%; width: 18px; height: 18px;
    background: #66bb6a; border: 3px solid #1b5e20; border-radius: 50%;
    transform: translateX(-50%) scale(0); animation: pop 0.3s ease-out 0.9s forwards; z-index: 4;
}
.branch-label { position: absolute; font-family: 'SF Mono', 'Consolas', monospace; font-size: 14px; font-weight: 500; white-space: nowrap; opacity: 0; }
.main-label { left: calc(50% + 20px); bottom: 35%; color: #1b5e20; animation: fade-in 0.5s ease-out 1.1s forwards; }
.continue-line {
    position: absolute; left: 50%; bottom: 35%; width: 8px; height: 0;
    background: #81c784; border-radius: 0; transform: translateX(-50%);
    animation: grow-continue 1.0s ease-out 1.2s forwards; z-index: 1;
}
@keyframes grow-continue { to { height: 45%; } }
.d1, .d2, .d3 { background: #c8e6c9; border-color: #81c784; }
.d1 { bottom: 49%; animation: pop 0.3s ease-out 1.5s forwards; }
.d2 { bottom: 64%; animation: pop 0.3s ease-out 1.8s forwards; }
.d3 { bottom: 79%; animation: pop 0.3s ease-out 2.1s forwards; }
.label { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-family: 'SF Mono', 'Consolas', monospace; font-size: 12px; color: #2e7d32; white-space: nowrap; opacity: 0; animation: fade-in 0.3s ease-out forwards; }
.d1 .label { animation-delay: 1.7s; } .d2 .label { animation-delay: 2.0s; } .d3 .label { animation-delay: 2.3s; }
@keyframes pop { 0% { transform: translateX(-50%) scale(0); } 70% { transform: translateX(-50%) scale(1.3); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }