If media queries do not affect specificity, how come the style is being applied even when placed on top

With this style

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div {
  @media (min-width: 0px) {
     color: blue;
  }
  color: red;
}

<!-- language: lang-html -->

<div>
hello
</div>

<!-- end snippet -->

I expect the color to be red. However, it's actually blue and I have no explanation for this. Tested on Chrome. The color is red in other browsers.

This is because the nested @rule actually unwraps to

@rule {
  & {
    /* ... */
  }
}

This is explained in this paragraph of the specs, which even contains an example pointing out this case:

> css
> .foo {
> display: grid;
>
> @media (orientation: landscape) {
> grid-auto-flow: column;
> }
> }
> /* equivalent to
> .foo {
> display: grid;
>
> @media (orientation: landscape) {
> & {
> grid-auto-flow: column;
> }
> }
> }
> */
>

And if we do add the & selector to the color: red rule, we get the same specificity:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div {
  @media (min-width: 0px) {
     color: blue;
  }
  & { color: red; }
}

<!-- language: lang-html -->

<div>
hello
</div>

<!-- end snippet -->

And note that your code currently produces a red output in non Chromium browsers because they still don't support CSS nesting, so they just treat the @media rule here as an invalid rule and go on to parse the div one.
If you want to support all browsers, you have to manually unwrap these rules:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

@media (min-width: 0px) {
  div { color: blue; }
}
div {
  color: red;
}

<!-- language: lang-html -->

<div>
hello<!-- will be red everywhere -->
</div>

<!-- end snippet -->

I will use another example to illustrate your issue:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div {
  & {
    color: blue;
  }
  color: red;
}

<!-- language: lang-html -->

<div>
hello
</div>

<!-- end snippet -->

We are mixing "nested rules" and "declarations" and the Specification defines such behavior by moving the "nested rules" at the end.

So the browser will change your code to this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div {
  color: red;
  & {
    color: blue;
  }
}

<!-- language: lang-html -->

<div>
hello
</div>

<!-- end snippet -->

And then to this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div {
  color: red;
}

div {
  color: blue;
}

<!-- language: lang-html -->

<div>
hello
</div>

<!-- end snippet -->

So always start with the "declarations" then the "nested rules"