<div class="notice">⚠️ Your browser does not support the <code>::details-content</code>  featureused in this demo. Use a Chromium browser to view it.</div>

<details>
  <summary>Toggle content</summary>
  Open and close the element to toggle this content.
</details>

::details-content {
  transition: height 0.5s ease;
  height: 0;
  overflow: clip;
}

/* Browser supports interpolate-size */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  [open]::details-content {
    height: auto;
  }
}

@supports selector(::details-content) {
  .notice {
    display: none;
  }
}

@layer base {
  
  body {
    font-family: system-ui;
    overflow-x: hidden;
  }
  
  .notice {
    background: wheat;
    color: saddlebrown;
    margin-block-end: 1rem;
    padding: 1rem;
    text-align: center;
    text-shadow: 0 1px 1px hsl(0 0 100%);
}