@import "https://unpkg.com/open-props/colors-oklch.min.css";

@layer diamond {
  .diamond {
    inline-size: 50vmin;
    aspect-ratio: 1;
  }
  
  .top {
    block-size: 25%;
    -webkit-clip-path: polygon(26% 0%, 73% 0%, 100% 100%, 0% 100%);
            clip-path: polygon(26% 0%, 73% 0%, 100% 100%, 0% 100%);
    background: conic-gradient(
      from 270deg at bottom in oklab, 
      var(--color-9) 0%, 13%, var(--color-7) 0% 0%, 37%, var(--color-3) 0% 0%, 50%, oklch(80% 0.30 158 / 0%) 0% 0%
    );
  }
  
  .bottom {
    block-size: 75%;
    background: conic-gradient(
      from 326deg at bottom in oklab, 
      var(--color-5) 0%, 5%, var(--color-7) 0% 0%, 14%, var(--color-9) 0% 0%, 18.8%, transparent 0% 0%
    );
  }
}

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
    accent-color: var(--color-bright);
  }

  html {
    block-size: 100%;
    background: var(--color-15);
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    gap: 5vmin;
  }
  
  .swatches {
    display: grid;
    grid-template-columns: 50vmin;
    grid-template-rows: auto repeat(6, 5vmin);
    gap: 1vmin;
  }
  
  .swatch {
    border-radius: 3px;
  }
  
  .bright {
    background: var(--color-bright);
    aspect-ratio: 1;
    -webkit-margin-after: 2vmin;
            margin-block-end: 2vmin;
    border-radius: 5px;
  }
}