.deployment-animation{position:relative;padding:2rem 1rem;background:color-mix(in oklab,var(--theme-foreground) 5%,transparent);border-radius:.75rem;overflow:hidden}.stepper-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem}.step-btn{width:2.5rem;height:2.5rem;border:2px solid var(--theme-accent);background:color-mix(in oklab,var(--theme-accent) 10%,transparent);color:var(--theme-accent);border-radius:.375rem;cursor:pointer;font-size:1rem;font-weight:600;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0}.step-btn:hover:not(:disabled){background:color-mix(in oklab,var(--theme-accent) 20%,transparent);transform:scale(1.05)}.step-btn:disabled{opacity:.3;cursor:not-allowed}.step-indicator{font-size:.875rem;font-weight:600;color:var(--theme-foreground);opacity:.8}.step-caption{text-align:center;font-size:.875rem;font-style:italic;color:var(--theme-foreground);opacity:.7;margin:.75rem 0 .5rem;min-height:1.25rem}.server-row{display:flex;justify-content:center;gap:1rem;margin-bottom:1rem}.server{width:3.5rem;height:3.5rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.75rem;transition:all .3s ease}.server.state-v1{background:color-mix(in oklab,var(--theme-blue) 30%,transparent);border:2px solid var(--theme-blue);color:var(--theme-blue)}.server.state-v2{background:color-mix(in oklab,var(--theme-green) 30%,transparent);border:2px solid var(--theme-green);color:var(--theme-green)}.server.state-down{background:color-mix(in oklab,var(--theme-foreground) 5%,transparent);border:2px solid color-mix(in oklab,var(--theme-foreground) 20%,transparent);color:var(--theme-foreground);opacity:.3;transform:scale(.85)}.server.state-updating{background:linear-gradient(90deg,color-mix(in oklab,var(--theme-blue) 30%,transparent),color-mix(in oklab,var(--theme-green) 30%,transparent));border:2px solid var(--theme-accent);color:var(--theme-foreground);font-size:.65rem}.server.old{background:color-mix(in oklab,var(--theme-blue) 30%,transparent);border:2px solid var(--theme-blue);color:var(--theme-blue)}.server.new{background:color-mix(in oklab,var(--theme-green) 30%,transparent);border:2px solid var(--theme-green);color:var(--theme-green)}.server.blue{background:color-mix(in oklab,var(--theme-blue) 30%,transparent);border:2px solid var(--theme-blue);color:var(--theme-blue)}.server.green{background:color-mix(in oklab,var(--theme-green) 30%,transparent);border:2px solid var(--theme-green);color:var(--theme-green)}.blue-green-animation .environment-container{display:flex;justify-content:center;gap:2rem;margin-bottom:1rem}.blue-green-animation .environment{padding:1rem;border-radius:.5rem;background:color-mix(in oklab,var(--theme-foreground) 5%,transparent);transition:all .5s ease;opacity:.4}.blue-green-animation .environment.active{opacity:1;box-shadow:0 0 20px color-mix(in oklab,var(--theme-accent) 30%,transparent)}.blue-green-animation .env-label{display:block;text-align:center;font-size:.75rem;font-weight:600;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.blue-green-animation .blue-env .env-label{color:var(--theme-blue)}.blue-green-animation .green-env .env-label{color:var(--theme-green)}.blue-green-animation .traffic-indicator{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.5rem;position:relative;height:3rem}.blue-green-animation .traffic-label{font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--theme-foreground);opacity:.7;position:absolute;top:0}.blue-green-animation .traffic-arrow{width:4px;height:2rem;background:var(--theme-accent);border-radius:2px;position:absolute;transition:all .5s ease;left:calc(50% - 80px);top:1.5rem}.blue-green-animation .traffic-arrow:after{content:"";position:absolute;left:50%;transform:translate(-50%);top:-8px;border:6px solid transparent;border-bottom-color:var(--theme-accent)}.canary-animation .traffic-split{display:flex;justify-content:center;gap:2rem;align-items:flex-end;margin-bottom:1rem}.canary-animation .traffic-segment{display:flex;flex-direction:column;align-items:center;gap:.5rem}.canary-animation .traffic-segment .server{transition:all .3s ease}.canary-animation .percentage{font-size:.875rem;font-weight:700;transition:all .3s ease}.canary-animation .stable .percentage{color:var(--theme-blue)}.canary-animation .canary .percentage{color:var(--theme-green)}.canary-animation .progress-bar{height:8px;background:color-mix(in oklab,var(--theme-foreground) 15%,transparent);border-radius:4px;overflow:hidden;margin-bottom:.5rem}.canary-animation .progress-fill{height:100%;background:linear-gradient(90deg,var(--theme-blue),var(--theme-green));border-radius:4px;transition:width .3s ease;width:0%}.progressive-animation .rollout-stages{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1rem}.progressive-animation .stage{display:flex;flex-direction:column;align-items:center;gap:.25rem}.progressive-animation .stage-label{font-size:.75rem;font-weight:600;color:var(--theme-foreground);opacity:.7}.progressive-animation .gate{width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;background:color-mix(in oklab,var(--theme-foreground) 10%,transparent);border:2px solid color-mix(in oklab,var(--theme-foreground) 20%,transparent);color:var(--theme-foreground);opacity:.4;transition:all .3s ease}.progressive-animation .gate.activating{transform:scale(1.15);opacity:.7}.progressive-animation .gate.activated{background:color-mix(in oklab,var(--theme-green) 30%,transparent);border-color:var(--theme-green);color:var(--theme-green);opacity:1;transform:scale(1)}.progressive-animation .rollout-progress{height:8px;background:color-mix(in oklab,var(--theme-foreground) 15%,transparent);border-radius:4px;overflow:hidden;margin-bottom:.5rem}.progressive-animation .rollout-fill{height:100%;background:var(--theme-green);border-radius:4px;transition:width .3s ease;width:0%}