:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#14101e;--night:#241c38;--plum:#3c2a52;--steel:#5a6988;--cloud:#c0cbdc;--amber:#f6b545;--yellow:#fce36b}*{box-sizing:border-box}html{background:var(--ink)}body{background:linear-gradient(var(--ink), var(--ink)) padding-box, var(--ink);min-height:100vh;color:var(--cloud);margin:0;font:16px/1.4 ui-monospace,monospace}svg{display:block}.masthead{justify-items:center;gap:16px;padding:40px 16px 24px;display:grid}.filters{flex-wrap:wrap;justify-content:center;gap:8px;max-width:1200px;margin:0 auto;padding:0 16px 24px;display:flex}.chip{border:2px solid var(--steel);background:var(--night);cursor:pointer;padding:6px 8px}.chip:hover{border-color:var(--cloud)}.chip[aria-pressed=true]{background:var(--amber);border-color:var(--yellow)}.chip:focus-visible,.card:focus-visible,.src:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}.grid{grid-template-columns:repeat(auto-fill, var(--card,320px));justify-content:center;gap:24px;max-width:1800px;margin:0 auto;padding:0 16px 48px;display:grid}.card{width:var(--card,320px);background:var(--night);border:2px solid var(--plum);text-decoration:none;transition:transform 80ms steps(2,end);display:block}.card:hover{border-color:var(--amber);transform:translateY(-2px)}.card img{width:var(--card,320px);aspect-ratio:16/9;height:auto;image-rendering:pixelated;background:var(--plum);display:block}.meta{gap:6px;padding:10px 10px 12px;display:grid}.foot{border-top:2px solid var(--night);justify-items:center;gap:12px;padding:24px 16px 48px;display:grid}.src{border:2px solid var(--steel);padding:6px 8px}
