Can "panda CSS" resolve dynamic props?

[Kazuhiro-Mimaki]

Can "panda CSS" resolve dynamic props like following?

import { useState } from "react";
import { css } from "styled-system/css";

export default function Index() {
  const [count, setCount] = useState(0);

  return (
    <div className={css({ fontSize: "2xl", fontWeight: "bold" })}>
      Hello 🐼!
      <p className={css({ color: count === 3 ? "red" : "black" })}>
        hello world
      </p>
      <button onClick={() => setCount((prev) => prev + 1)}>plus count</button>
    </div>
  );
}

I recognize that "panda CSS" is zero runtime CSS-in-JS framework, so I think above code doesn't work.
However, above code works.
Is it why? I cannot understand why works regardless of zero runtime.

[astahmer]

the extractor is smart enough to extract both condition branches when the condition expression is unresolvable statically, https://panda-css.com/docs/guides/dynamic-styling#runtime-conditions

so, in this example, both "red" and "black" are extracted and will be generated, cause we can't know at build-time which one should be used
https://play.panda-css.com/_Zbe0snK6h