@layer framework, override, foo, bar.baz;
@layer override {
  @keyframes slide-left {
    from {
      translate: 0;
    }
    to {
      translate: -100% 0;
    }
  }
}
@layer framework {
  @keyframes slide-left {
    from {
      margin-left: 0;
    }
    to {
      margin-left: -100%;
    }
  }
}
.sidebar {
  animation: slide-left 300ms;
}
@layer{}
@layer{}
@layer reset.type {
  strong {
    font-weight: bold;
  }
}
@layer framework {
  .title {
    font-weight: 100;
  }
  @layer theme {
    h1, 
    h2 {
      color: maroon;
    }
  }
}
@layer reset {
  [hidden] {
    display: none;
  }
}
@layer framework {
  @layer default {
    p {
      margin-block: 0.75em;
    }
  }
  @layer theme {
    p {
      color: #222;
    }
  }
}
@layer framework.theme {
  blockquote {
    color: rebeccapurple;
  }
}
