rem of media queries vs rem of anything else

As per the CSS Values and Units Module Level 3 about rem values:

Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value

However, I can use @media queries even to alter the font-size for the :root selector, and I can use a quantity in rems as the breakpoint.

So to me it looks like the @media query "reads" the value of 1rem to set the breakpoint, but if theres a :root {} ruleset in it, it also "sets" the value of 1rem, leading to a cycle in the definition.

What am I missing?

To give an example, in the snippet below, if you resize the window around the breakpoint (same snippet on JSFiddle, where resizing of the panels is a bit easier), you'll see that the size of the ellipse (which has width: 50rem;) changes, which means that the meaning of 1rem changes when we cross the breakpoint, which means that we truly switch from :root { font-size: 0.5em; } to :root { font-size: 2rem; } across the breakpoint.

Which ultimately means, I understand, that we are successfully changing the computed value of font-size on the :root element.

If that's the case, how is it even possible to use rems for the breakpoint of the media query?

Observing the result of the snippet below, I'd say that the breakpoint happens at the same viewport width regardless of how font-size is changed in :root {} rulesets.

What part of the standard explains what I'm observing?

:root {
  box-sizing: border-box;
  margin: 0;
  font-size: 0.5rem;
}
.shape {
  content: "";
  display: block;
  background-color: red;
  border-radius: 100%;
  width: 50rem;
  height: 10rem;
}

@media (min-width: 50rem) {
  .shape {
    background-color: blue;
  }
  :root {
    font-size: 2rem;
  }
}

<div class="shape">
</div>
ciao

From the same specification:

When used outside the context of an element (such as in media queries), these units refer to the computed font metrics corresponding to the initial values of the font property.

So 50rem is simply 50*16px = 800px

:root {
  box-sizing: border-box;
  margin: 0;
  font-size: 0.5rem;
}
.shape {
  content: "";
  display: block;
  background-color: red;
  border-radius: 100%;
  width: 50rem;
  height: 10rem;
}

@media (min-width: 50rem) {
  .shape {
    background-color: blue;
  }  
  :root {
    font-size: 2rem;
  }
}
@media (min-width: 800px) {
  .shape {
    outline:10px solid green;
  }
}

<div class="shape">
</div>