:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{color:#e7e7ea;background:#0e0e12;margin:0;font:15px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif}a{color:#7aa2ff;text-decoration:none}a:hover{text-decoration:underline}.hero{max-width:1200px;margin:0 auto;padding:44px 24px 8px}.hero h1{margin:0 0 6px;font-size:26px}.hero p{color:#a8a8b3;margin:0}.hero code{color:#cdd0d6;font:13px ui-monospace,SFMono-Regular,Menlo,monospace}.grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;max-width:1200px;margin:0 auto;padding:24px;display:grid}.card{background:#16161c;border:1px solid #24242c;border-radius:12px;flex-direction:column;transition:transform .16s,box-shadow .16s,border-color .16s;display:flex;position:relative;overflow:hidden}.card:hover{border-color:#3a3a46;transform:translateY(-3px);box-shadow:0 10px 30px -12px #000000b3}.media{aspect-ratio:16/9;background:#202028;width:100%;position:relative}.media canvas,.media img{object-fit:cover;width:100%;height:100%;display:block}.meta{padding:12px 14px 4px}.meta h2{margin:0 0 2px;font-size:15px;font-weight:600}.by{z-index:2;color:#8b8b96;font-size:13px;position:relative}.by:hover{color:#b9b9c4}.open{color:#7aa2ff;opacity:0;align-self:flex-start;margin:8px 14px 14px;font-size:13px;transition:opacity .16s,transform .16s;transform:translateY(2px)}.card:hover .open{opacity:1;transform:none}.card-link{z-index:1;position:absolute;inset:0}.empty{color:#a8a8b3;max-width:1200px;margin:0 auto;padding:24px}@media (prefers-reduced-motion:reduce){.card,.open{transition:none}}