:root{
  color-scheme:dark;
  --bg:#07111f;
  --panel:#101c2d;
  --text:#eef5ff;
  --muted:#a8b6ca;
  --accent:#7dd3fc;
  --line:#26374d;
  --warn:#fbbf24;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(circle at 85% 5%,rgba(125,211,252,.12),transparent 25rem),
    var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
}
main{
  width:min(920px,calc(100% - 2rem));
  margin:0 auto;
  padding:3rem 0 5rem;
}
nav{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-bottom:2rem;
}
nav a,.button{
  display:inline-block;
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:.75rem;
  padding:.6rem .9rem;
  background:rgba(16,28,45,.82);
}
article,.card{
  background:rgba(16,28,45,.82);
  border:1px solid var(--line);
  border-radius:1rem;
  padding:1.35rem;
  margin:1rem 0;
}
h1,h2,h3{line-height:1.25}
h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{margin-top:2rem}
a{color:var(--accent)}
small,.muted{color:var(--muted)}
.notice{
  border-left:.35rem solid var(--warn);
  padding:1rem;
  background:rgba(251,191,36,.08);
}
code{
  background:#040a12;
  border:1px solid var(--line);
  border-radius:.35rem;
  padding:.1rem .35rem;
}
footer{
  margin-top:3rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
  color:var(--muted);
}