@supports (--a: b){
  body {
    background: red;
  }
}

body {
  background: green;
}

@supports (--a: b){
  body {
    background: yellow;
  }
}

@supports (--a: b) {
  @media (min-width: 1px) {
    body {
      background: red;
    }
  }
}

@media (min-width: 1px) {
  @supports (--a: b) {
    body {
      background: #f36;
    }
  }
}

@media (min-width: 2px) {
  @media (min-width: 1px) {
    @supports (--a: b) {
      @supports (display: flex) {
        body {
          background: pink;
        }
      }
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.