.pd-ai-demo-header { margin-block-end:var(--pd-space-4); }
.pd-ai-demo-header > a { font-size:var(--pd-fs-xs); }
.pd-ai-demo-eyebrow { display:block; margin-top:var(--pd-space-4); color:var(--pd-color-role-ai); font-size:var(--pd-fs-xs); font-weight:var(--pd-fw-medium); }
.pd-ai-demo-header h1 { margin:var(--pd-space-2) 0; font-size:var(--pd-fs-display); font-weight:var(--pd-fw-medium); line-height:var(--pd-lh-snug); }
.pd-ai-demo-header p,.pd-ai-demo-card > p,.pd-ai-demo-note { color:var(--pd-ui-muted); font-size:var(--pd-fs-sm); line-height:var(--pd-lh-relaxed); }
.pd-ai-demo-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--pd-space-2); margin-top:var(--pd-space-4); }
.pd-ai-demo-controls > div { display:flex; align-items:center; flex-wrap:wrap; gap:var(--pd-space-1); font-size:var(--pd-fs-xs); }
.pd-ai-demo-controls button { min-height:var(--pd-btn-h-sm); padding:0 var(--pd-space-2); border:0; border-radius:var(--pd-btn-radius); color:var(--pd-ui-ink); background:var(--pd-ui-soft); font-size:var(--pd-fs-xs); }
.pd-ai-demo-controls button[aria-pressed="true"] { color:var(--pd-color-on-primary); background:var(--pd-color-role-ai); }
.pd-ai-demo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--pd-space-3); }
.pd-ai-demo-card { overflow:hidden; min-width:0; padding:var(--pd-space-4); background:var(--pd-ui-surface); border:1px solid var(--pd-ui-line); border-radius:var(--pd-card-radius); }
.pd-ai-demo-card > header { display:flex; align-items:center; gap:var(--pd-space-2); }
.pd-ai-demo-card > header > span { color:var(--pd-ui-muted); font-size:var(--pd-fs-xs); }
.pd-ai-demo-card h2 { margin:0; font-size:var(--pd-fs-lg); font-weight:var(--pd-fw-medium); }
.pd-ai-demo-art { display:flex; align-items:center; justify-content:center; height:calc(var(--pd-space-5)*3); margin-top:var(--pd-space-3); background:var(--pd-ui-soft); border-radius:var(--pd-radius-md); }
.pd-ai-demo-art img { display:block; width:auto; height:calc(var(--pd-icon-xl)*2); }
.pd-ai-demo-card > p { min-height:calc(var(--pd-space-5)*2); margin:var(--pd-space-3) 0; font-size:var(--pd-fs-xs); }
.pd-ai-demo-context { padding:var(--pd-space-3); border:1px solid var(--pd-ui-line); border-radius:var(--pd-radius-md); background:var(--pd-ui-surface); }
.pd-ai-demo-context + .pd-ai-demo-context { margin-top:var(--pd-space-2); }
.pd-ai-demo-card h3 { margin:0 0 var(--pd-space-3); color:var(--pd-ui-muted); font-size:var(--pd-fs-xs); font-weight:var(--pd-fw-regular); }
.pd-ai-demo-name { color:var(--pd-color-role-ai); display:flex; align-items:center; gap:calc(var(--pd-space-1)/2); margin-top:var(--pd-space-2); font-size:var(--pd-fs-sm); font-weight:var(--pd-fw-medium); line-height:var(--pd-lh-snug); }
.pd-ai-demo-name img { display:block; flex:none; height:var(--pd-icon-sm); width:auto; }
.pd-ai-demo-page[data-icon-size="16"] .pd-ai-demo-name img { height:var(--pd-icon-md); }
.pd-ai-demo-page[data-icon-size="20"] .pd-ai-demo-name img { height:var(--pd-icon-lg); }
.pd-ai-demo-caption { margin:var(--pd-space-2) 0 0; color:var(--pd-ui-muted); font-size:var(--pd-fs-3xs); }
.pd-ai-demo-dark { --pd-ui-muted:var(--pd-color-on-dark-secondary); background:var(--pd-color-text); color:var(--pd-color-on-dark); border-color:transparent; }
.pd-ai-demo-large { margin-top:var(--pd-space-4); }
.pd-ai-demo-name-lg { font-size:var(--pd-fs-lg); }
.pd-ai-demo-name-lg img { height:var(--pd-icon-lg) !important; }
.pd-ai-demo-download { display:flex; gap:var(--pd-space-3); margin-top:var(--pd-space-4); font-size:var(--pd-fs-xs); }
.pd-ai-demo-note { margin-top:var(--pd-space-4); font-size:var(--pd-fs-xs); }
@media(max-width:800px) { .pd-ai-demo-grid { grid-template-columns:1fr; } .pd-ai-demo-header h1 { font-size:var(--pd-fs-xl); } .pd-ai-demo-card > p { min-height:0; } }