.collection-demo-strip {
  display: flex;
  flex-wrap: wrap;
  background: var(--colour1, #fff);
}
.collection-demo-strip button {
  background: var(--clr-interactive, #ef364e);
  color: #fff;
  border: 0;
  border-radius: var(--button-border-radius);
  margin: 1rem;
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  flex: 1 1 auto;
  cursor: pointer;
}
.collection-demo-strip button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}
.collection-demo-strip .collection-demo-edit {
  display: block;
  background: var(--colour2, #000);
  color: var(--colour1, #fff);
}
.collection-demo-strip .collection-demo-edit:hover,
.collection-demo-strip .collection-demo-edit:focus-visible {
  background: var(--clr-interactive, #ef364e);
  color: #fff;
}
.collection-demo-dialog {
  overflow-x: hidden;
}
.reveal-overlay.pb-demo-overlay { z-index: 100010; }
html.pb-demo-open { position: fixed; width: 100%; overflow-y: scroll; }
#collectionDemoModal {
  width: calc(100% - 2rem);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  min-height: 0;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  border-radius: 8px;
}
#collectionDemoModal.is-open { display: block; }
.collection-demo-dialog h2 {
  padding-right: 1.5rem;
  font-size: 1.5rem;
}
.collection-demo-dialog p,
.collection-demo-dialog h2 {
  overflow-wrap: anywhere;
}
.collection-demo-dialog [hidden] {
  display: none !important;
}
.collection-demo-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.collection-demo-actions .button {
  margin: 0;
}
.collection-demo-player {
  display: block;
  width: 100%;
  border: 0;
  height: 166px;
  margin-bottom: 1rem;
}
.collection-demo-player--youtube {
  aspect-ratio: 16 / 9;
  height: auto;
}
.collection-demo-player--bandcamp {
  height: 120px;
}

.pb-demo-list { list-style: none; margin: 0; padding: 0; }
.pb-demo-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #d7e6ea; align-items: flex-start; }
.pb-demo-item__body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pb-demo-item__title { font-weight: 700; }
.pb-demo-item p { margin: 0.5rem 0; }
.pb-demo-item__meta { display: block; font-size: 0.875rem; margin-top: 0.35rem; }
.pb-demo-item__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pb-demo-item__actions .button { margin: 0; }
.pb-profile-demos { margin: 2rem 0; }
.pb-pack-demos .pb-demo-item { flex-direction: row; align-items: center; gap: 0.5rem; border: 0; padding: 0.25rem 0; }
.pb-pack-demos .pb-demo-play { flex: 1; min-width: 0; margin: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.pb-pack-demos .pb-demo-submit { margin: 1rem 0; }
.pb-pack-demos .pb-demo-submit .button { margin: 0; }
.pb-demo-toggle { flex: 0 0 auto; background: none; border: 0; padding: 0.25rem; color: var(--clr-interactive, #ef364e); text-decoration: underline; cursor: pointer; }
.pb-demo-toggle:disabled { opacity: 0.5; cursor: wait; }
.pb-demo-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
[data-demo-collection]:empty, [data-demo-sidebar-status]:empty { display: none; }
.pb-pack-demos h3 { margin-top: 1rem; }
.collection-demo-dialog .pb-demo-request { display: flex; gap: 0.5rem; align-items: baseline; margin: 1rem 0; }
.collection-demo-dialog .pb-demo-request input { flex: 0 0 auto; margin: 0; }
.collection-demo-dialog textarea { box-sizing: border-box; max-width: 100%; }
@media (max-width: 600px) {
  .pb-demo-item { flex-direction: column; }
}
.pb-demo-report { text-align: right; margin-top: 1rem; }
.pb-demo-report:empty { display: none; }
.pb-demo-report-link { background: none; border: 0; padding: .25rem; color: var(--clr-interactive, #ef364e); text-decoration: underline; cursor: pointer; font-size: .875rem; }
.pb-demo-report-link:focus-visible { outline: 2px solid currentColor; }
.pb-demo-report form { text-align: left; }
.pb-demo-report select { width: 100%; max-width: 100%; }
.pb-demo-report h3 { font-size: 1.25rem; }
.pb-demo-unavailable { padding: 1rem; background: #f4f4f4; margin: .5rem 0; }