.demo-try {
  margin: var(--space-20) 0;
}

.demo-try-h {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
}

.demo-try-how {
  margin-top: var(--space-10);
}

.demo-try-do {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--ink);
}

.demo-try-agents {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}

.demo-try-agents-h {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.demo-try-agents-list {
  margin: 0;
  padding-left: 1.25em;
  display: grid;
  gap: var(--space-2);
}

.demo-try-agents-list li::marker { color: var(--ink-dim); }

.demo-try-agents-list a {
  color: var(--accent);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.demo-try-agents-list a:hover { text-decoration: underline; text-underline-offset: 3px; }

.demo-try-rec {
  margin-left: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-dim);
}

.demo-try-note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-dim);
}

.demo-try-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* The style package dresses button; these are cards, so it comes off. */
.demo-try-paths .demo-try-path {
  appearance: none;
  height: auto;
  min-height: 0;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--space-4);
  text-align: left;
  font: inherit;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--bg);
  box-shadow: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.demo-try-paths .demo-try-path strong { color: var(--ink); font-weight: var(--weight-medium); }
.demo-try-paths .demo-try-path span {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.demo-try-paths .demo-try-path:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); background: var(--bg); }
.demo-try-paths .demo-try-path.is-on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* The prompt path carries the whole prompt, which can run to pages. It
   wraps rather than scrolling sideways, and stops at a height. */
.ip-pill-box.demo-try-long { max-height: 22rem; overflow-y: auto; }
.ip-pill-box.demo-try-long .ip-text {
  white-space: pre-wrap;
  -webkit-mask-image: none;
          mask-image: none;
}

@media (max-width: 620px) {
  .demo-try-paths { grid-template-columns: 1fr; }
}

.demo-try-safe {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-dim);
}