.demo {
  min-width: 0;
  margin: var(--space-6) 0;
  color: var(--color-fg);
}

.demo .demo-media {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.demo .demo-caption {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.demo .demo-title {
  color: var(--color-fg);
}

.demo-disclosure {
  margin-block-start: var(--space-3);
}

.demo-disclosure > summary {
  padding: var(--space-2) 0;
  color: var(--color-fg);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.demo-disclosure > summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--space-1);
  border-radius: var(--radius-sm);
}

.demo-disclosure:not([open]) > .demo-animation {
  display: none;
}

.demo-disclosure[open] > .demo-animation {
  margin-block-start: var(--space-2);
}