<section id="context-cards" 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) 240ms 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">10</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Context Cards</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Retrieved knowledge chunks with their sources.</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: 931px;"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="flex w-full max-w-95 flex-col gap-2"><div class="flex items-center gap-2 px-0.5" style="animation:fade-in 400ms ease-out both"><span class="text-[13px] font-semibold text-ink">All chunks</span><span class="inline-flex h-5 items-center rounded-md bg-inset px-1.5 text-[11.5px] font-medium text-ink-2 shadow-hairline tabular-nums">32</span></div><div class="overflow-hidden rounded-card bg-surface shadow-card" style="animation:fade-up 400ms cubic-bezier(0.23,1,0.32,1) 0ms both"><div class="primitive-card-bar flex items-center gap-2.5 border-b border-line"><span class="flex min-w-0 items-center gap-1.5 text-[13px] font-medium text-ink"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h10"></path></svg><span class="truncate">Vendor onboarding rule</span></span><span class="ml-auto shrink-0 text-[12px] text-ink-3 tabular-nums">290 characters</span></div><p class="px-3 pt-2 pb-1 text-[12.5px] leading-relaxed text-ink-2">Cold-chain certification must be verified before a new dairy can be added to the reorder workflow.</p><div class="px-3 pb-3"><span class="inline-flex h-6 items-center gap-1.5 rounded-full bg-inset px-2 text-[12px] font-medium text-ink-2 shadow-btn transition-[opacity,transform,background-color] duration-300 hover:bg-hover" style="opacity: 1; transform: scale(1); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-delay: 0ms;"><span class="flex size-3.5 items-center justify-center rounded-[4px] bg-red text-[7px] font-bold text-white">PDF</span>Dairy Onboarding SOP.pdf<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M7 7h10v10"></path></svg></span></div></div><div class="overflow-hidden rounded-card bg-surface shadow-card" style="animation:fade-up 400ms cubic-bezier(0.23,1,0.32,1) 100ms both"><div class="primitive-card-bar flex items-center gap-2.5 border-b border-line"><span class="flex min-w-0 items-center gap-1.5 text-[13px] font-medium text-ink"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h10"></path></svg><span class="truncate">Seasonal demand row</span></span><span class="ml-auto shrink-0 text-[12px] text-ink-3 tabular-nums">1,250 characters</span></div><p class="px-3 pt-2 pb-1 text-[12.5px] leading-relaxed text-ink-2">Q4 velocity table: pistachio +18%, vanilla +6%, rocky road -11%; retire flavors below 40 scoops weekly.</p><div class="px-3 pb-3"><span class="inline-flex h-6 items-center gap-1.5 rounded-full bg-inset px-2 text-[12px] font-medium text-ink-2 shadow-btn transition-[opacity,transform,background-color] duration-300 hover:bg-hover" style="opacity: 1; transform: scale(1); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-delay: 80ms;"><span class="flex size-3.5 items-center justify-center rounded-[4px] bg-green text-[7px] font-bold text-white">CSV</span>Sales Velocity Export.csv<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M7 7h10v10"></path></svg></span></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>