.showcase-page{padding-top:76px}.showcase-heading{display:grid;gap:12px;max-width:960px;margin-bottom:28px}.showcase-heading .lead{margin:0;max-width:680px}.showcase-grid{column-count:4;column-gap:18px}.showcase-card{position:relative;display:grid;gap:10px;width:100%;margin:0 0 18px;break-inside:avoid;page-break-inside:avoid;overflow:hidden;border:1px solid var(--color-border-soft);border-radius:var(--radius-md);background:var(--color-card);padding:10px;box-shadow:var(--shadow-panel);transform:translateZ(0);transition:transform .18s var(--ease-standard),border-color .18s var(--ease-standard)}.showcase-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--color-primary) 34%,var(--color-border-soft))}.showcase-card:has(.showcase-card-hitarea:focus-visible){outline:2px solid var(--color-primary);outline-offset:3px}.showcase-card-hitarea{position:absolute;inset:0;z-index:2;border:0;border-radius:inherit;background:transparent;cursor:pointer;padding:0}.showcase-card-hitarea:hover,.showcase-card-hitarea:active,.showcase-card-hitarea:focus-visible{border-color:transparent;box-shadow:none;outline:0;transform:none}.showcase-media{position:relative;overflow:hidden;border-radius:var(--radius-sm);background:var(--color-surface-muted)}.showcase-media img{width:100%;height:auto;display:block}.showcase-card-body{display:grid;gap:6px;min-width:0;padding:2px 2px 4px}.showcase-card h2{margin:0;color:var(--color-text);font-size:13px;font-weight:600;line-height:1.35}.showcase-prompt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.showcase-preview-dialog{--showcase-preview-pad: clamp(14px, 2.4vw, 22px);width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;border:1px solid var(--color-border-soft);border-radius:var(--radius-xl);background:var(--color-card);color:var(--color-text);padding:0;box-shadow:0 28px 90px #0000007a}.showcase-preview-dialog::backdrop{background:#000000ad;backdrop-filter:blur(8px)}.showcase-preview-shell{display:grid;gap:14px;padding:var(--showcase-preview-pad)}.showcase-preview-header,.showcase-preview-footer{display:flex;align-items:center;gap:16px}.showcase-preview-header{position:sticky;top:0;z-index:3;justify-content:flex-end;margin:calc(-1 * var(--showcase-preview-pad)) calc(-1 * var(--showcase-preview-pad)) -60px;padding:var(--showcase-preview-pad);pointer-events:none}.showcase-preview-close{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--color-border-soft);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--color-surface) 88%,transparent);color:var(--color-text-muted);backdrop-filter:blur(12px);padding:0;cursor:pointer;pointer-events:auto;transition:border-color .18s var(--ease-standard),color .18s var(--ease-standard),transform .18s var(--ease-standard)}.showcase-preview-close:hover,.showcase-preview-close:focus-visible{border-color:color-mix(in srgb,var(--color-primary) 42%,var(--color-border-soft));color:var(--color-text)}.showcase-preview-close:active{transform:scale(.98)}.showcase-preview-close-icon{width:18px;height:18px;stroke-width:2;pointer-events:none}.showcase-preview-media{display:flex;justify-content:flex-start;align-items:flex-start;overflow:hidden;border:1px solid var(--color-border-soft);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-surface-muted) 72%,var(--color-card));padding:8px;box-shadow:inset 0 1px color-mix(in srgb,white 6%,transparent)}.showcase-preview-media img{display:block;width:auto;max-width:100%;height:auto;max-height:min(68vh,720px);border-radius:var(--radius-sm);object-fit:contain}.showcase-preview-prompt{margin:0;width:min(680px,100%);border:1px solid var(--color-border-soft);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-surface) 88%,var(--color-card));padding:13px 15px;color:var(--color-text);font-size:14px;line-height:1.6;box-shadow:inset 0 1px color-mix(in srgb,white 5%,transparent);overflow-wrap:anywhere}.showcase-preview-footer{justify-content:flex-end}.showcase-preview-action{min-height:44px}@media(max-width:1280px){.showcase-grid{column-count:3}}@media(max-width:980px){.showcase-grid{column-count:2}}@media(max-width:640px){.showcase-page{padding-top:34px;padding-bottom:48px}.showcase-heading{gap:10px;margin-bottom:20px}.showcase-heading .page-title{font-size:clamp(42px,13vw,56px);line-height:1.02}.showcase-heading .lead{font-size:16px;line-height:1.58}.showcase-grid{column-count:1;column-gap:14px}.showcase-card{gap:10px;margin-bottom:14px;padding:10px}.showcase-card-body{padding:0 2px 2px}.showcase-preview-dialog{width:calc(100vw - 20px);max-height:calc(100vh - 20px)}.showcase-preview-header{align-items:center}.showcase-preview-prompt{font-size:13px;line-height:1.58}.showcase-preview-footer,.showcase-preview-action{width:100%}.showcase-preview-action{justify-content:center}}@media(prefers-reduced-motion:reduce){.showcase-card,.showcase-preview-close{transition:none}.showcase-card:hover,.showcase-preview-close:active{transform:none}}