:root {
  --wcbp-padding: 1rem;
  --wcbp-display: block;
  --wcbp-border-width: 2px;
  --wcbp-border-style: dashed;
  --wcbp-font-family: system-ui, sans-serif;
}

html {
  block-size: 100%;
}

body {
  font-family: var(--wcbp-font-family);
  padding: 1.5rem;
  margin: 0;
  min-block-size: 100dvh;
}

h1 {
  margin: 0 0 1rem;
}

div {
  display: grid;
  gap: 1rem;
}

code {
  background: #f0f0f0;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}

dynamic-name,
cdn-dynamic-name,
no-side-effects,
web-component-best-practices {
  display: var(--wcbp-display);
  padding: var(--wcbp-padding);
  border-width: var(--wcbp-border-width);
  border-style: var(--wcbp-border-style);
}

dynamic-name {
  border: var(--wcbp-border-width) var(--wcbp-border-style) blue;
}

cdn-dynamic-name {
  border: var(--wcbp-border-width) var(--wcbp-border-style) purple;
}

no-side-effects {
  border: var(--wcbp-border-width) var(--wcbp-border-style) green;
}

.demo-components {
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease-in-out;
}

.wcbp-ready .demo-components {
  opacity: 1;
  visibility: visible;
}