<section id="approval-card" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 180ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">04</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Approval Card</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Human-in-the-loop questions the agent asks before acting.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height: 454px;"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="flex min-h-[196px] w-full max-w-80 flex-col items-stretch"><div class="w-full self-start overflow-hidden rounded-card bg-surface shadow-card"><div class="primitive-card-pad" style="animation:fade-up 350ms cubic-bezier(0.23,1,0.32,1) both"><div class="flex items-start justify-between gap-3"><span class="text-[13px] font-medium text-ink">How many flavors should we launch?</span><button type="button" aria-label="Dismiss" class="primitive-icon-button shrink-0 text-ink-3 transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"></path></svg></button></div><div class="mt-2 flex flex-col gap-0.5"><button type="button" aria-pressed="false" class="-mx-1.5 flex items-center gap-2 rounded-control px-1.5 py-1 text-left transition-colors duration-100 hover:bg-hover"><span class="flex size-4 shrink-0 items-center justify-center transition-colors duration-200
                        rounded-full
                        shadow-[inset_0_0_0_1.5px_var(--line-strong)] text-transparent"><span class="size-1.5 rounded-full bg-canvas transition-transform duration-200" style="transform:scale(0)"></span></span><span class="text-[13px] transition-colors duration-200 text-ink-2">Three (core line)</span></button><button type="button" aria-pressed="false" class="-mx-1.5 flex items-center gap-2 rounded-control px-1.5 py-1 text-left transition-colors duration-100 hover:bg-hover"><span class="flex size-4 shrink-0 items-center justify-center transition-colors duration-200
                        rounded-full
                        shadow-[inset_0_0_0_1.5px_var(--line-strong)] text-transparent"><span class="size-1.5 rounded-full bg-canvas transition-transform duration-200" style="transform:scale(0)"></span></span><span class="text-[13px] transition-colors duration-200 text-ink-2">Five (full case)</span></button><button type="button" aria-pressed="false" class="-mx-1.5 flex items-center gap-2 rounded-control px-1.5 py-1 text-left transition-colors duration-100 hover:bg-hover"><span class="flex size-4 shrink-0 items-center justify-center transition-colors duration-200
                        rounded-full
                        shadow-[inset_0_0_0_1.5px_var(--line-strong)] text-transparent"><span class="size-1.5 rounded-full bg-canvas transition-transform duration-200" style="transform:scale(0)"></span></span><span class="text-[13px] transition-colors duration-200 text-ink-2">Just one hero</span></button><label class="-mx-1.5 flex items-center gap-2 rounded-control px-1.5 py-1 transition-colors duration-100 focus-within:bg-hover hover:bg-hover"><span aria-hidden="true" class="size-4 shrink-0"></span><input placeholder="Type something…" aria-label="Custom answer" class="min-w-0 flex-1 bg-transparent text-[13px] text-ink outline-none placeholder:text-ink-3" value="" style=""></label></div></div><div class="primitive-card-footer flex items-center justify-between"><span class="flex items-center gap-2"><button type="button" aria-label="Previous" disabled="" class="flex size-6 items-center justify-center rounded-[5px] text-ink-3 transition-colors duration-100 enabled:hover:bg-hover enabled:hover:text-ink-2 disabled:opacity-35"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"></path></svg></button><span class="flex items-center gap-1"><button type="button" aria-label="Go to question 1" aria-current="step" class="rounded-full transition-all duration-300 disabled:cursor-default" style="width:9px;height:9px;border:2.5px solid var(--ink)"></button><button type="button" aria-label="Go to question 2" class="rounded-full transition-all duration-300 disabled:cursor-default" style="width:7px;height:7px;border:1.5px solid var(--ink-3)"></button><button type="button" aria-label="Go to question 3" class="rounded-full transition-all duration-300 disabled:cursor-default" style="width:7px;height:7px;border:1.5px solid var(--ink-3)"></button></span><button type="button" aria-label="Next" class="flex size-6 items-center justify-center rounded-[5px] text-ink-3 transition-colors duration-100 enabled:hover:bg-hover enabled:hover:text-ink-2 disabled:opacity-35"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"></path></svg></button></span><button type="button" aria-label="Next question" disabled="" class="-mr-0.5 flex size-7 items-center justify-center rounded-[8px] transition-[background-color,color,transform] duration-200 enabled:active:scale-[0.96]" style="background:var(--field);color:var(--ink-3);box-shadow:var(--shadow-btn)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"></path></svg></button></div></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section>