.chronology-demo .agent-panel{padding:22px 22px 0;justify-content:flex-start}
.chronology-demo .dot-orbit{width:156px;height:156px;top:-92px}
.chronology-demo .dot-globe{width:66px;height:66px;bottom:-25px;animation:chronology-breathe 3s ease-in-out infinite}
.chronology-demo .agent-prompt{margin-top:68px;padding:12px 9px;white-space:normal;line-height:1.5;width:100%;font-size:12px;border-color:#c8a24b44;background:#111a2e}
.chronology-demo .agent-status{font-size:10px;line-height:1.5;min-height:30px;margin:13px 0 8px;color:#b8c2d4}
.agent-steps{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.agent-steps li{display:flex;align-items:center;gap:9px;font-size:11px;line-height:1.4;color:#7e93b8;transition:color .35s}
.step-marker{width:19px;height:19px;flex:0 0 19px;border:1px solid #2a3750;border-radius:50%;display:grid;place-items:center;font-size:9px}
.agent-steps [data-state=active]{color:#f4f0e6}
.agent-steps [data-state=active] .step-marker{border-color:#c8a24b;background:#c8a24b22;box-shadow:0 0 12px #c8a24b33}
.agent-steps [data-state=complete]{color:#c8a24b}
.agent-steps [data-state=complete] .step-marker{background:#c8a24b;border-color:#c8a24b;color:#080d1a}
.chronology-demo .file-icons{gap:16px;margin:17px 0 8px}
.chronology-demo .file-icons span{padding:4px;font-size:8px}
.animation-control{align-self:center;border:0;background:transparent;color:#b8c2d4;font:inherit;font-size:10px;min-height:34px;padding:8px 12px;cursor:pointer;margin-bottom:4px;text-decoration:underline;text-underline-offset:3px}
.animation-control:hover{color:#e8c56a}
.animation-control:focus-visible{outline:2px solid #e8c56a;outline-offset:2px}
.animation-control[hidden]{display:none}
.chronology-demo .agent-footer{margin-top:auto;white-space:nowrap;font-size:9px}
.chronology-demo .chronology>div{transition:opacity .55s,transform .55s}
.chronology-demo .chronology>div[data-revealed=false]{opacity:.22;transform:translateY(5px)}
.chronology-demo .source{transition:opacity .55s,color .55s}
.chronology-demo[data-sources=false] .source{opacity:.2}
.chronology-demo[data-playing=false] .dot-globe{animation-play-state:paused}
@keyframes chronology-breathe{50%{opacity:.45;transform:translateX(-50%) scale(.88)}}
@media(max-width:600px){.chronology-demo .agent-panel{padding:22px 27px 0}.chronology-demo .agent-steps{width:100%;max-width:310px;align-self:center}.chronology-demo .agent-prompt{max-width:310px}.chronology-demo .agent-footer{font-size:10px}.agent-steps li{font-size:12px}}
@media(prefers-reduced-motion:reduce){.chronology-demo .dot-globe{animation:none}.chronology-demo .chronology>div,.chronology-demo .source,.agent-steps li{transition:none}}