.oc-artifacts { width: min(100% - calc(var(--space-6) * 2), calc(var(--space-10) * 24)); margin: 0 auto; padding: var(--space-10) 0; font-family: var(--font-sans); }
.oc-artifacts__header { margin-bottom: var(--space-8); }
.oc-artifacts__title { margin: 0; font-family: var(--font-serif); font-size: var(--text-4xl); font-weight: var(--font-weight-normal); }
.oc-artifacts__description { margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.oc-artifacts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-10) * 6), 1fr)); gap: var(--space-5); }
.oc-artifact-card { display: grid; gap: var(--space-2); min-height: calc(var(--space-10) * 4); padding: var(--space-5); border: 1px solid var(--color-card-border); border-radius: var(--radius-card); background: var(--color-card-background); color: var(--color-foreground); text-align: left; cursor: pointer; }
.oc-artifact-card:hover { background: var(--color-button-secondary-hover-bg); }
.oc-artifact-card:focus-visible { outline: 2px solid var(--color-puddle-700); outline-offset: 2px; }
.oc-artifact-card__type { color: var(--color-card-foreground); font-size: var(--text-xs); text-transform: capitalize; }
.oc-artifact-card__name { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--font-weight-normal); }
.oc-artifact-card__project { align-self: end; color: var(--color-text-secondary); font-size: var(--text-xs); }
.oc-artifacts__empty { color: var(--color-text-secondary); font-size: var(--text-sm); }