style.css

@import "compare.css" layer(demo.component);

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;
    display: grid;
  }
  
  img {
    max-block-size: 80dvh;
    max-inline-size: 100%;
  }
}

.github-corner {
  position: absolute;
  top: 0;
  right: 0;
  inline-size: var(--size-10);
  
  &:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }

  & > svg {
    fill: inherit;
    stroke: inherit;
    position: absolute; 
    top: 0; 
    right: 0;
  }
}

@keyframes octocat-wave{
  0%,100% {
    transform: rotate(0)
  }
  20%,60% {
    transform: rotate(-25deg)
  }
  40%,80% {
    transform: rotate(10deg)
  }
}