/* Landing page for the deck library. The decks themselves use deck.css. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#05060f; --card:#0d1124; --line:#1e2647; --ink:#eef2ff; --dim:#9aa6cc;
  --gold:#f5b93a; --gold-2:#ffd772;
}
html,body{min-height:100%}
body{
  background:
    radial-gradient(1100px 620px at 12% -8%, #16204a 0%, transparent 62%),
    radial-gradient(900px 560px at 92% 4%, #1b1636 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;
}
main{max-width:1060px;margin:0 auto;padding:64px 24px 96px}
header{margin-bottom:44px}
.brandmark{
  width:132px;height:57px;margin-bottom:26px;
  background:url("assets/brandmark.png") no-repeat left center;background-size:contain;
}
h1{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:46px;font-weight:800;letter-spacing:-.025em;line-height:1.15;
  padding-bottom:.08em;
  background:linear-gradient(96deg,#ffffff 0%,#ffe9b8 52%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{margin-top:10px;color:var(--dim);font-size:16px}
kbd{
  font:600 12.5px/1 'Inter',sans-serif;color:var(--ink);
  background:#161d3b;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;padding:3px 6px;
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.card{
  display:block;text-decoration:none;color:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:14px;padding:24px 24px 20px;
  transition:border-color .16s ease, transform .16s ease, background .16s ease;
}
.card:hover{border-color:rgba(245,185,58,.55);transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(245,185,58,.10),rgba(255,255,255,.02))}
.card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.card h2{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:20px;font-weight:700;letter-spacing:-.012em;margin-bottom:8px;
}
.card p{color:var(--dim);font-size:14.5px;line-height:1.55;margin-bottom:16px}
.meta{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gold-2);opacity:.85}
@media (max-width:640px){
  main{padding:40px 18px 72px}
  h1{font-size:34px}
}