.example-card{--card-preview-height:220px;--card-iframe-scale:.5;--card-surface:var(--surface);--card-border:var(--border);--card-border-hover:#ffffff38;--card-name-color:var(--text);--card-category-color:var(--text-muted);--card-category-bg:#ffffff0f;--card-radius:var(--radius-lg);border:1px solid var(--card-border);border-radius:var(--card-radius);background:var(--card-surface);cursor:pointer;flex-direction:column;text-decoration:none;transition:transform .18s,border-color .18s;display:flex;overflow:hidden}.example-card:hover{border-color:var(--card-border-hover);transform:translateY(-2px)}.card-preview{height:var(--card-preview-height);background:#f3f4f6;position:relative;overflow:hidden}.card-preview-frame{width:calc(100%/var(--card-iframe-scale));height:calc(var(--card-preview-height)/var(--card-iframe-scale));transform:scale(var(--card-iframe-scale));transform-origin:0 0;pointer-events:none;border:none;display:block}.card-preview-overlay{z-index:1;position:absolute;inset:0}.card-footer{border-top:1px solid var(--card-border);justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;display:flex}.card-name{color:var(--card-name-color);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;overflow:hidden}.card-category{color:var(--card-category-color);background:var(--card-category-bg);border-radius:var(--radius-pill,1000px);white-space:nowrap;flex-shrink:0;padding:2px 8px;font-size:11px}