@layer blocks {
  /* The hero's live demo. Rows reuse .task-item / .checkbox / .badge, the
     search/create line reuses .write-line, and the create plus reuses
     .demo-add, so the marketing page and the product cannot drift apart.
     Only what is demo-only lives here: the handwritten label. */
  .demo-label {
    --cluster-align: flex-end;
    --cluster-space: var(--space-2xs);
    font-size: var(--text-md);
  }

  .demo-label svg {
    margin-block-end: 2px;
    color: var(--color-decorative);
  }

  .demo .write-line {
    --flow-space: var(--space-3xs); /* spec .demo-label margin-bottom; do not inherit the CTA gap */
  }

  .demo-list {
    --flow-space: var(--space-s); /* spec 18px */
    list-style: none;
  }

  /* The provisional row offering to create what was typed */
  .demo-list li[data-state="create"] .title {
    color: var(--color-text-faint);
  }

  .demo-add {
    appearance: none;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--form-control-toggle-size);
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    border: var(--stroke-m) dashed var(--color-accent-strong);
    border-radius: var(--radius-s);
    background: transparent;
    box-shadow: none;
    color: var(--color-accent-strong);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
  }

  .demo-add:hover {
    background: var(--color-accent-tint);
  }
}