<section id="fine-tune-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) 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">18</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Fine-tune Card</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">The agent adjusts design properties in an inspector.</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: 278px;"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="relative w-full max-w-60 rounded-card bg-surface shadow-raised"><div class="primitive-card-bar flex items-center justify-between border-b border-line"><span class="text-[13px] font-medium text-ink">Flavor card</span><span class="flex items-center gap-1.5"><span class="flex size-4.5 items-center justify-center rounded-[5px] border border-accent/30 bg-accent-tint"><svg width="9" height="9" viewBox="0 0 24 24" fill="var(--accent)"><path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z"></path></svg></span><span class="bg-clip-text text-[12px] font-medium text-transparent" style="background-image:linear-gradient(90deg, var(--accent) 35%, var(--accent-ink) 50%, var(--accent) 65%);background-size:200% 100%;animation:shimmer-text 1.4s linear infinite">Adjust</span></span></div><div class="primitive-card-pad flex flex-col gap-2 border-b border-line"><p class="text-[12.5px] font-medium text-ink">Layout</p><div class="relative grid grid-cols-3 rounded-control bg-field p-0.5"><span aria-hidden="true" class="absolute inset-y-0.5 rounded-[6px] bg-surface shadow-btn transition-transform duration-300" style="width:calc((100% - 4px) / 3);left:2px;transform:translateX(0%);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"></span><button type="button" aria-label="row layout" aria-pressed="true" class="relative z-10 flex h-6 items-center justify-center transition-colors duration-200
                text-accent"><span class="flex gap-0.5"><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span></span></button><button type="button" aria-label="col layout" aria-pressed="false" class="relative z-10 flex h-6 items-center justify-center transition-colors duration-200
                text-ink-3"><span class="flex flex-col gap-0.5"><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span></span></button><button type="button" aria-label="grid layout" aria-pressed="false" class="relative z-10 flex h-6 items-center justify-center transition-colors duration-200
                text-ink-3"><span class="grid grid-cols-2 gap-0.5"><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span></span></button></div><div class="grid min-w-0 grid-cols-2 gap-2"><label class="flex h-6.5 min-w-0 items-center gap-1 rounded-chip py-1 pr-1 pl-0.5 transition-[background-color,box-shadow] duration-200" style="background:var(--field);box-shadow:none"><span role="slider" aria-label="W" aria-valuenow="324" aria-valuemin="40" aria-valuemax="999" tabindex="0" class="flex h-full shrink-0 cursor-ew-resize touch-none items-center rounded-[4px] px-0.5 text-[12px] text-ink-3 select-none hover:text-ink-2 focus-visible:text-accent-ink focus-visible:outline-none">W</span><input inputmode="numeric" aria-label="W value" class="min-w-0 flex-1 bg-transparent text-[12px] text-ink tabular-nums outline-none" value="324" style=""></label><label class="flex h-6.5 min-w-0 items-center gap-1 rounded-chip py-1 pr-1 pl-0.5 transition-[background-color,box-shadow] duration-200" style="background:var(--field);box-shadow:none"><span role="slider" aria-label="H" aria-valuenow="96" aria-valuemin="24" aria-valuemax="999" tabindex="0" class="flex h-full shrink-0 cursor-ew-resize touch-none items-center rounded-[4px] px-0.5 text-[12px] text-ink-3 select-none hover:text-ink-2 focus-visible:text-accent-ink focus-visible:outline-none">H</span><input inputmode="numeric" aria-label="H value" class="min-w-0 flex-1 bg-transparent text-[12px] text-ink tabular-nums outline-none" value="96" style=""></label></div><div class="grid min-w-0 grid-cols-2 gap-2"><label class="flex h-6.5 min-w-0 items-center gap-1 rounded-chip py-1 pr-1 pl-0.5 transition-[background-color,box-shadow] duration-200" style="background:var(--field);box-shadow:none"><span role="slider" aria-label="Radius" aria-valuenow="28" aria-valuemin="0" aria-valuemax="64" tabindex="0" class="flex h-full shrink-0 cursor-ew-resize touch-none items-center rounded-[4px] px-0.5 text-[12px] text-ink-3 select-none hover:text-ink-2 focus-visible:text-accent-ink focus-visible:outline-none">Radius</span><input inputmode="numeric" aria-label="Radius value" class="min-w-0 flex-1 bg-transparent text-[12px] text-ink tabular-nums outline-none" value="28" style=""></label><label class="flex h-6.5 min-w-0 items-center gap-1 rounded-chip py-1 pr-1 pl-0.5 transition-[background-color,box-shadow] duration-200" style="background:var(--field);box-shadow:none"><span role="slider" aria-label="Opacity" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" tabindex="0" class="flex h-full shrink-0 cursor-ew-resize touch-none items-center rounded-[4px] px-0.5 text-[12px] text-ink-3 select-none hover:text-ink-2 focus-visible:text-accent-ink focus-visible:outline-none">Opacity</span><input inputmode="numeric" aria-label="Opacity value" class="min-w-0 flex-1 bg-transparent text-[12px] text-ink tabular-nums outline-none" value="100" style=""><span class="shrink-0 pr-0.5 text-[11.5px] text-ink-3">%</span></label></div></div><div class="primitive-card-footer flex items-center justify-between"><span class="text-[12px] text-ink-3">Type</span><div class="relative -mr-0.5 w-30"><button type="button" aria-expanded="false" class="flex h-6.5 w-full items-center justify-between rounded-chip bg-inset py-1 pr-1 pl-2 shadow-hairline transition-shadow duration-200 focus-visible:outline-none"><span class="text-[12px] text-ink-3">Select type</span><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200" style="transform:rotate(0)"><path d="M6 9l6 6 6-6"></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>