.box {
  display: block;
  width: 5em;
  aspect-ratio: 1;
  display: grid;
  position: relative;

  place-content: center;
  outline: 1px dashed #333;
  margin: 0 auto;
}

.box::after, .box::before {
  content: '';
  display: block;
  width: 5em;
  aspect-ratio: 1;
  position: absolute;
  
  transform-origin: 50% 50%;
  transform: translateX(50px) rotate(45deg);
  z-index: -1; /* Make sure text is on top */
}

.box::after {
  background: lightseagreen;
  animation: adjust 5s linear infinite alternate;
}

.box::before {
  background: #ccc;
}

@keyframes adjust {
  to {
    transform: translateX(100px);
  }
}

.box[data-method="replace"]::after {
  animation-composition: replace;
}

.box[data-method="add"]::after {
  animation-composition: add;
}

.box[data-method="accumulate"]::after {
  animation-composition: accumulate;
}

main {
  display: grid;
  place-content: center;
  gap: 5em;
}

/* Non-demo styles below */
@layer base {
  @layer reset {
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
    }
  }
  @layer layout {
    html {
      max-width: 84ch;
      padding: 3rem 2rem;
      margin: auto;
    }

    html {
      --font-sans: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
      --font-serif: ui-serif,serif;
      --font-mono: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;
    }
    body {
      font-family: var(--font-sans);
    }
    pre, code {
      font-family: var(--font-mono);
    }
    
    body {
      display: grid;
      place-content: safe center;
      gap: 3rem;
    }

    a,
    a:visited {
      color: blue;
    }
    
    h2 {
      margin-top: 2em;
    }

    summary {
      cursor: pointer;
    }

    dd + dt {
      margin-top: 0.5em;
    }

    button {
      cursor: pointer;
    }
    
    footer {
      text-align: center;
      font-style: italic;
    }
  }

  @layer support {
    .no-support,
    .has-support {
      margin: 1em 0;
      padding: 1em;
      border: 1px solid #ccc;
    }

    .no-support {
      background-color: #ff00002b;
    }
    .no-support[data-level="warn"] {
      background-color: #ffff002b;
    }
    .has-support {
      background-color: #00ff002b;
    }
    .no-support, [data-show-when-no-support] {
      display: block !important;
    }
    .has-support, [data-show-when-has-support] {
      display: none !important;
    }
    :is(.has-support, .no-support) > :first-child {
      margin-top: 0;
    }
    :is(.has-support, .no-support) > :last-child {
      margin-bottom: 0;
    }
    
    @property --supports-at-property {
      syntax: "*";
      initial-value: ;
      inherits: true;
    }
    .no-support[data-support="at-property"], [data-no-support="at-property"] {
      --value-when-supported: var(--supports-at-property) none;
      --value-when-not-supported: block;
      display: var(--value-when-supported, var(--value-when-not-supported)) !important;
    }
    .has-support[data-support="at-property"], [data-has-support="at-property"] {
      --value-when-supported: var(--supports-at-property) block;
      --value-when-not-supported: none;
      display: var(--value-when-supported, var(--value-when-not-supported)) !important;
    }

    @supports (transform: scaleX(cos(360deg))) {
      .no-support[data-support="css-trig-fns"] {
        display: none !important;
      }
      .has-support[data-support="css-trig-fns"], [data-show-when-has-support="css-trig-fns"] {
        display: block !important;
      }
    }

    @supports (animation-composition: replace) {
      .no-support[data-support="css-animation-composition"] {
        display: none !important;
      }
      .has-support[data-support="css-animation-composition"], [data-show-when-has-support="css-animation-composition"] {
        display: block !important;
      }
    }
  }
}