/* Layout only. Every value is a DS token. */
.demo {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: var(--spacing-40) var(--spacing-16);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); margin-bottom: var(--spacing-8); }
.demo-logo { height: var(--spacing-24); width: auto; }
.demo-logo--dark { display: none; }
[data-theme="dark"] .demo-logo--light { display: none; }
[data-theme="dark"] .demo-logo--dark { display: block; }
.demo-env {
  color: var(--content-secondary);
  background: var(--bg-secondary);
  border-radius: var(--radius-pill);
  padding: var(--spacing-4) var(--spacing-12);
}
.demo-card { display: flex; flex-direction: column; gap: var(--spacing-16); }
.demo-card form { display: flex; flex-direction: column; gap: var(--spacing-12); }
.demo-muted { color: var(--content-secondary); }
.demo-back { align-self: flex-start; gap: var(--spacing-6); }
.demo-back svg, .pl-input-icon svg { width: var(--spacing-24); height: var(--spacing-24); }
.demo-code { letter-spacing: var(--spacing-8); font-weight: var(--font-weight-semibold); }
.demo-ok { color: var(--accent-success); }
.demo-ok svg { width: var(--spacing-40); height: var(--spacing-40); }
.demo-log-list { margin: 0; padding-inline-start: var(--spacing-16); display: flex; flex-direction: column; gap: var(--spacing-8); color: var(--content-secondary); word-break: break-all; }
.demo-log-list .is-error { color: var(--accent-alert); }
[hidden] { display: none !important; }