/* The page base (colors, type, section, button) is shared by every demo. It is
   imported here rather than linked from the HTML, so a cached copy of the page
   and a fresh copy of this file still produce a styled demo.

   This file replaced style.css when the demo moved onto the shared base and got
   the card markup. The old style.css stays for pages still cached with the old
   markup and can be deleted once a day has passed after that deployment. */
@import url("/styles/demo.css");

section {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  align-content: start;
}

h1,
.eyebrow,
#status {
  margin: 0;
}

h1 code {
  font-family: var(--mono);
  font-size: 0.9em;
}

#preview {
  inline-size: min(100%, 24rem);
  aspect-ratio: 4 / 3;
  border-radius: 0.5rem;
  background: light-dark(#dfe3dd, #111);
  object-fit: cover;
}

#status {
  min-block-size: 1.4em;
  color: var(--muted);
}

#event-log {
  margin: 0;
  inline-size: 100%;
  min-block-size: 4.5em;
  overflow: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}