:root { color: #202124; background: #fff; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; padding: 24px; }
main { max-width: 760px; margin: 0 auto; }
.catalog { margin: 0; padding: 0; border-top: 1px solid #ddd; list-style: none; }
.catalog li { border-bottom: 1px solid #ddd; }
.card { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; padding: 16px 8px; color: inherit; text-decoration: none; }
.card:hover { background: #f6f6f6; }
.card:focus-visible { outline: 2px solid #202124; outline-offset: -2px; }
.card__visual { display: grid; place-items: center; width: 48px; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: #f1f1f1; }
.card__emoji { font-size: 1.75rem; }
.card__fallback { font-size: 1.25rem; font-weight: 600; }
.card__image { width: 100%; height: 100%; object-fit: cover; }
.card__copy strong, .card__copy span { display: block; }
.card__copy strong { margin-bottom: 4px; font-size: 1rem; }
.card__copy span { color: #666; font-size: .875rem; line-height: 1.4; }
@media (max-width: 480px) { body { padding: 12px; } }