:root {
  --bg: #070912;
  --ink: #eef1fb;
  --muted: #8b93b5;
  --accent: #7c9bff;
  --card: #11141f;
  --line: rgba(140,150,210,.14);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
#bg { position: fixed; top: 0; left: 0; width: 100%; height: 560px; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }

header, main, footer { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
header { padding-top: 84px; padding-bottom: 30px; }
.kicker { text-transform: uppercase; letter-spacing: 3px; font-size: 12px; font-weight: 700; color: var(--accent); }
h1 { font-size: clamp(34px, 6vw, 58px); line-height: 1.05; letter-spacing: -1.5px; margin: 14px 0 16px; }
.lede { color: var(--muted); font-size: 18px; max-width: 640px; }
.disclaimer { margin-top: 16px; max-width: 640px; font-size: 14px; color: #aab2cc;
  border-left: 2px solid var(--accent); padding-left: 14px; }
.disclaimer em { color: var(--ink); font-style: italic; }
.count { margin-top: 18px; font-size: 13px; color: var(--accent); letter-spacing: .5px; }

section { margin: 40px 0; }
.sechead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.sechead h2 { font-size: 22px; letter-spacing: -0.5px; }
.sechead span { color: var(--muted); font-size: 14px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 9px; transition: transform .16s, border-color .16s, box-shadow .16s;
}
.card:hover { transform: translateY(-3px); border-color: rgba(124,155,255,.5); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.emoji { font-size: 30px; }
.card h3 { font-size: 18px; letter-spacing: -0.3px; }
.card p { color: #b6bdd6; font-size: 14px; flex: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.actions { display: flex; gap: 8px; margin-top: 6px; }
.open, .code {
  flex: 1; text-align: center; text-decoration: none; padding: 9px; border-radius: 10px;
  font-size: 13px; font-weight: 600; transition: .14s;
}
.open { background: var(--accent); color: #0a0f24; }
.open:hover { filter: brightness(1.08); }
.open.soon { background: transparent; border: 1px dashed var(--line); color: var(--muted); cursor: default; }
.code { border: 1px solid var(--line); color: var(--ink); }
.code:hover { border-color: var(--accent); color: var(--accent); }

footer { padding: 40px 24px 70px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); margin-top: 40px; text-align: center; }
footer em { color: var(--ink); font-style: normal; }
@media (max-width: 560px) { header { padding-top: 56px; } }