<details>
  <summary>Details interpolation example</summary>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid dolores, distinctio ipsum veritatis magni soluta maiores rerum optio, possimus animi eligendi architecto sed placeat quasi quibusdam, nihil odio. Amet, tempore.</p>
</details>

details {
  inline-size: 50ch;
  
  @media (prefers-reduced-motion: no-preference) {
    interpolate-size: allow-keywords;
  }
  
  &::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip; 
    transition: content-visibility 1s allow-discrete,
                opacity 1s,
                block-size 1s;
  }
  
  &[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}






@layer 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;
    place-content: center;
  }
  
  summary {
    cursor: pointer;
  }
}