We should display those rules in the Rules view

examples:

h1 {
  transition: background-color 1.5s;
  background-color: green;
}
@starting-style {
  h1 {
    background-color: transparent;
  }
}

/* Conditional rules can be used with CSS Nesting: */

h1 {
  transition: background-color 1.5s;
  background-color: green;
  @starting-style {
    background-color: transparent;
  }
}

While working on a test page, I realized that properties in @starting-style rules can be overridden by properties not inside them:

div {
  border-color: gold;
  transition: all 1s linear;
}

@starting-style {
  div {
    border-color: cyan;
    background-color: blue; /* this won't be applied … */
  }
}

div {
  background-color: transparent; /* … because this overrides it */
}

so starting-style rules are not treated differently, and we should mark those as overridden.
The Rules view would display something like:

div {
  background-color: transparent;
}

@starting-style {
  div {
    border-color: cyan;
    ~~background-color: blue;~~
  }
}

div {
  ~~border-color: gold;~~
  transition: all 1s linear;
}

With the current logic, we'll mark the border-color: gold as overridden too, which is not entirely accurate, as it is applied in the end.
So we need to differentiate between starting-style properties being actually overridden, with properties that will be applied, but will be transitioned from a starting-style property.

div {
  background-color: transparent;
}

@starting-style {
  div {
    border-color: cyan;
    ~~background-color: blue;~~
  }
}

div {
  border-color: gold; ⏱ /* adding an icon or some badge / specific style */
  transition: all 1s linear;
}

If we're adding a button of some sort, we could also make it jump to the property that specifies the starting-style

Note that !important will also override starting-style properties, so :

div {
  border-color: gold !important;
  transition: all 1s linear;
}

@starting-style {
  div {
    border-color: cyan; /* this is overridden by the !important in the regular rule */
  }
}

Note that the overridden logic would also need to be adapted in the computed panel so we ignore starting-style properties

Properties inside @starting-style rules can be overridden by higher priority
properties in other starting-style rules, but also by higher priority properties
inside regular rules.
The other way around is not true, a property in a starting style rule can't override
a property from a regular rule, it only sets its starting style.
updateDeclarations needs to reflect this so we properly mark overridden props,
and avoid marking valid props as overridden.

https://hg.mozilla.org/mozilla-central/rev/b045155b8af1
https://hg.mozilla.org/mozilla-central/rev/9035da951f49
https://hg.mozilla.org/mozilla-central/rev/8a7a126bcb68