@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 {
    max-inline-size: 38.75rem;
  }

  .demo-label {
    --cluster-align: flex-end;
    --cluster-space: var(--space-2xs);
    font-family: var(--font-hand);
    font-size: 1.4rem;
    font-weight: var(--weight-semi);
    color: var(--color-text-faint);
  }

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

  .demo .write-line {
    --flow-space: 0.25rem; /* spec .demo-label margin-bottom; do not inherit the CTA gap */
  }

  .demo-list {
    --flow-space: 1.125rem; /* 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: 1.5rem;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    border: var(--border-width) dashed var(--color-accent-strong);
    border-radius: var(--radius-s);
    background: transparent;
    box-shadow: none;
    color: var(--color-accent-strong);
    font-size: 1.15rem;
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    cursor: pointer;
  }

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

  .demo-add:focus-visible {
    outline: 2.5px solid var(--color-focus);
    outline-offset: 2px;
  }
}