@layer components{.card{background-color: var(--surface-raised);border: 1px solid transparent;border-radius: var(--radius-lg);padding: var(--space-5);color: var(--text-primary);transition: transform var(--motion-base) var(--ease-standard),box-shadow var(--motion-base) var(--ease-standard),border-color var(--motion-base) var(--ease-standard);}.card--bordered{background-color: transparent;border-color: var(--border-default);}.card--feature{background-color: var(--surface-alt);}a.card,.card a.card__link{text-decoration: none;display: block;color: inherit;}a.card:hover,.card:hover{transform: translateY(-2px);box-shadow: var(--shadow-md);border-color: var(--border-strong);}.on-dark .card,.section[data-surface="dark"] .card{background-color: rgba(255,255,255,0.04);border-color: rgba(255,255,255,0.08);color: var(--text-on-dark);}.on-dark .card--bordered,.section[data-surface="dark"] .card--bordered{background-color: transparent;border-color: rgba(255,255,255,0.14);}.on-dark a.card:hover,.section[data-surface="dark"] a.card:hover{background-color: rgba(255,255,255,0.07);border-color: rgba(255,255,255,0.24);}@media (prefers-reduced-motion: reduce){.card{transition: none;}a.card:hover,.card:hover{transform: none;}}}@layer components{.avatar{--avatar-size: 5rem;--avatar-bg-a: var(--palette-fern-dark);--avatar-bg-b: var(--palette-fern-emerald);display: inline-flex;align-items: center;justify-content: center;width: var(--avatar-size);height: var(--avatar-size);border-radius: var(--radius-full);overflow: hidden;background: linear-gradient(135deg,var(--avatar-bg-a),var(--avatar-bg-b));color: var(--text-on-dark);font-family: var(--font-display);font-size: calc(var(--avatar-size) * 0.4);font-weight: var(--weight-regular);letter-spacing: var(--tracking-tight);flex-shrink: 0;user-select: none;}.avatar > img{width: 100%;height: 100%;object-fit: cover;display: block;}.avatar[data-initials]::before{content: attr(data-initials);}.avatar[data-initials]:has(> img)::before{content: none;}.avatar--lg{--avatar-size: 7rem;}.avatar--xl{--avatar-size: 10rem;}.avatar--variant-cyan{--avatar-bg-a: #0096da;--avatar-bg-b: #00b6ff;}.avatar--variant-mint{--avatar-bg-a: #00a878;--avatar-bg-b: #5ac9a3;}.avatar--variant-sage{--avatar-bg-a: #3a4f46;--avatar-bg-b: #00a878;}}