:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; margin: 0; }
.container { max-width: 880px; margin: 0 auto; padding: 24px; }
.card { background: Canvas; color: CanvasText; border: 1px solid color-mix(in lch, Canvas, black 10%); border-radius: 12px; padding: 16px; box-shadow: 0 4px 16px color-mix(in lch, black, transparent 85%); }
.hero { display: block; width: 100%; height: auto; border-radius: 8px; margin-bottom: 12px; }
.actions { display: flex; gap: 8px; margin-top: 16px; }
.button { display: inline-block; padding: 10px 14px; border-radius: 8px; background: #2563eb; color: white; text-decoration: none; }
.button.secondary { background: #6b7280; }
.list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.list-item { border: 1px solid color-mix(in lch, Canvas, black 10%); border-radius: 10px; overflow: hidden; }
.list-item img { width: 100%; height: 160px; object-fit: cover; display: block; }
.list-item a { display: grid; grid-template-columns: 1fr; gap: 8px; color: inherit; text-decoration: none; padding: 8px; }