:root{
  --night-top:#0d0f29; --night-mid:#1b1740; --night-bot:#2e2050;
  --gold:#fcd17d; --gold-deep:#f2a347; --cream:#ffedbf;
  --text:#f4f3fb; --muted:#b9bcd6; --soft:#cdd0ea;
  --card:rgba(255,255,255,.04); --border:rgba(255,255,255,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); line-height:1.7;
  background:linear-gradient(180deg,var(--night-top) 0%,var(--night-mid) 55%,var(--night-bot) 100%);
  background-attachment:fixed; min-height:100vh;
}
.wrap{max-width:760px; margin:0 auto; padding:32px 22px 80px}
header.site{display:flex; align-items:center; gap:12px; padding:22px 0 8px}
header.site .logo{font-size:30px}
header.site .name{font-size:24px; font-weight:800; letter-spacing:.5px}
header.site .name span{color:var(--gold)}
nav{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 30px}
nav a{color:var(--soft); text-decoration:none; font-size:14px; font-weight:600;
  padding:7px 14px; border:1px solid var(--border); border-radius:999px}
nav a:hover{color:var(--night-top); background:var(--gold); border-color:var(--gold)}
h1{font-size:30px; line-height:1.25; margin:18px 0 6px}
h1 .g{color:var(--gold)}
h2{font-size:20px; margin:34px 0 10px; color:var(--cream)}
.updated{color:var(--muted); font-size:13px; margin-bottom:26px}
p,li{color:var(--soft)}
a{color:var(--gold)}
ul{padding-left:20px}
.card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:20px 22px; margin:18px 0}
.lead{font-size:18px; color:var(--text)}
.btn{display:inline-block; background:linear-gradient(180deg,var(--cream),var(--gold) 55%,var(--gold-deep));
  color:var(--night-top); font-weight:700; text-decoration:none; padding:13px 22px; border-radius:14px; margin-top:8px}
.grid{display:grid; gap:14px; grid-template-columns:1fr 1fr; margin-top:18px}
.grid a{display:block; text-decoration:none; color:var(--text); background:var(--card);
  border:1px solid var(--border); border-radius:16px; padding:18px}
.grid a:hover{border-color:var(--gold)}
.grid a b{display:block; color:var(--cream); margin-bottom:4px}
.grid a span{font-size:14px; color:var(--muted)}
footer{margin-top:50px; padding-top:22px; border-top:1px solid var(--border); color:var(--muted); font-size:13px}
footer a{color:var(--soft)}
.mail{font-weight:700; color:var(--gold)}
@media(max-width:560px){ .grid{grid-template-columns:1fr} h1{font-size:25px} }