.flame-vector{display:block;width:24px;height:28px;flex:0 0 24px;overflow:visible;pointer-events:none}.fire-handoff{--flame-body:#b3ff60;--flame-eyes:#262635;display:inline-flex;gap:8px;align-items:center;border:0;border-radius:9px;padding:8px 12px;background:#262635;color:#b3ff60;font:600 13px system-ui;cursor:pointer}.fire-handoff:hover{background:#303040;--flame-eyes:#303040}.fire-handoff:focus-visible{outline:2px solid #b3ff60;outline-offset:4px}

/* Working cycle: four fast eased turns, pause, blink. Circle throughout. */
.working-vector{--flame-body:#ffa955;--flame-eyes:#17120d;--working-cycle:3.2s}
.working-rotor{transform-box:view-box;transform-origin:50% 57.142857%;animation:fire-working-burst var(--working-cycle) linear infinite;will-change:transform}
.working-circle{opacity:1}
.working-eyes{transform-box:view-box;transform-origin:50% 64.285714%;animation:fire-working-blink var(--working-cycle) ease-in-out infinite}
@keyframes fire-working-burst{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.6,0,.3,1)}56%,100%{transform:rotate(1440deg)}}
@keyframes fire-working-blink{0%,70%,80%,100%{transform:scaleY(1)}74%,75%{transform:scaleY(.08)}}
@media(prefers-reduced-motion:reduce){.working-rotor,.working-eyes{animation:none;will-change:auto}.working-circle{opacity:1}}

/* Ready-to-review is deliberately static, including on hover. */
.review-vector,.review-vector *{animation:none!important}

/* Host-owned job states. Set data-state when the runner reports progress. */
.fire-handoff[data-state="working"]{background:#412c20;color:#ffc18b;--flame-body:#ffa955;--flame-eyes:#17120d;border:1px solid #bd8754;cursor:progress;opacity:1}
.fire-handoff[data-state="review"]{border:1px solid #9ac956}
