:root { color-scheme: dark; --bg:#05070d; --card:#0c1220; --edge:#1c2a4a; --fg:#e8f0ff; --mute:#8593b5; --blue:#2f6bff; --glow:#5b93ff; }
* { box-sizing: border-box; }
body { margin:0; color:var(--fg); font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; padding: 0 16px 48px;
  background: radial-gradient(70% 50% at 50% 0%, rgba(47,107,255,.22), transparent 70%), var(--bg); }
.hero { text-align:center; padding: 80px 0 36px; }
.hero h1 { margin:0; font-size: clamp(48px, 10vw, 96px); letter-spacing: .08em; font-weight: 900; line-height: 1; }
.hero h1 span { color: var(--blue); text-shadow: 0 0 28px rgba(91,147,255,.6); }
.tag { color: var(--mute); margin: 12px 0 0; }
main { max-width: 1040px; margin: 0 auto; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.card { display:block; background: var(--card); border: 1px solid var(--edge); border-radius: 12px; overflow:hidden; color: inherit; text-decoration: none; transition: transform .12s, border-color .12s, box-shadow .12s; }
.card:hover { transform: translateY(-3px); border-color: var(--glow); box-shadow: 0 12px 40px rgba(47,107,255,.25); }
.card .photo { aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.card .photo img { width:100%; height:100%; object-fit: cover; display:block; transition: transform .4s; }
.card:hover .photo img { transform: scale(1.04); }
.card .body { padding: 18px 20px 20px; }
.card h2 { margin:0 0 4px; font-size: 22px; }
.card .tagline { color: var(--glow); font-size: 14px; margin: 0 0 10px; }
.card .blurb { color: var(--mute); font-size: 14px; margin: 0 0 14px; }
.meta { display:flex; gap: 10px; font-size: 12px; color: var(--mute); }
.meta .status { color: var(--glow); text-transform: uppercase; letter-spacing: .06em; }
.meta .status.wip { color: var(--mute); }
.play { display:inline-block; margin-top: 12px; padding: 8px 14px; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 700; }
.empty { text-align:center; color: var(--mute); }
footer { text-align:center; color: var(--mute); font-size: 13px; margin-top: 64px; }