/* Styles of the test page only; the widget renders in its own shadow root. */
body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  color: #1d1d1f;
  background: #f6f6f4;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 160px;
}

h1 {
  margin: 0 0 4px;
  font-size: 24px;
}

h2 {
  margin: 24px 0 8px;
  font-size: 16px;
}

.lead,
.hint {
  color: #56575b;
}

.panel {
  padding: 16px;
  border: 1px solid #e7e7e8;
  border-radius: 12px;
  background: #fff;
}

pre {
  overflow-x: auto;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f3f3f3;
}

code {
  overflow-wrap: anywhere;
}

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0;
}

dd {
  margin: 0;
}

.error {
  color: #cf2a06;
}

.slot {
  min-height: 120px;
  padding: 16px;
  border: 1px dashed #cfcfd0;
  border-radius: 12px;
}