:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0; padding: 1rem;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  max-width: 900px; margin-inline: auto;
}
h1 { font-size: 1.4rem; text-align: center; }
.expires { text-align: center; opacity: .7; font-size: .85rem; margin-top: -.4rem; }
.msg { text-align: center; padding: 3rem 1rem; opacity: .8; }
.grid {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.card { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.card img, .card video { width: 100%; height: auto; border-radius: .5rem; background: #0001; }
.dl {
  text-align: center; text-decoration: none; padding: .5rem;
  border-radius: .5rem; background: #0a84ff; color: #fff; font-weight: 600;
}