:root{
  color-scheme: dark;
  --bg:#101310;
  --card:#181d18;
  --text:#f3f0e8;
  --muted:#a5a89f;
  --border:#30372f;
  --sage:#74856e;
  --sage-soft:#242c22;
  --danger:#d88278;
  --max:860px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
}
a{color:#a8bea0}
a:hover{color:#c6d6c1}
header{
  border-bottom:1px solid var(--border);
  background:rgba(16,19,16,.94);
  position:sticky;
  top:0;
  backdrop-filter:blur(10px);
  z-index:10;
}
.nav{
  max-width:var(--max);
  margin:0 auto;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{font-weight:900;font-size:24px;letter-spacing:-1px;text-decoration:none;color:var(--text)}
.brand span{color:var(--sage)}
nav{display:flex;gap:14px;flex-wrap:wrap}
nav a{font-size:13px;text-decoration:none;color:var(--muted)}
main{max-width:var(--max);margin:0 auto;padding:42px 20px 64px}
.hero{
  background:linear-gradient(145deg,var(--card),var(--sage-soft));
  border:1px solid var(--border);
  border-radius:18px;
  padding:28px;
  margin-bottom:24px;
}
h1{font-size:34px;line-height:1.15;margin:0 0 10px;letter-spacing:-1px}
h2{font-size:22px;margin:34px 0 10px}
h3{font-size:17px;margin:24px 0 8px}
p,li{color:var(--text)}
.muted{color:var(--muted)}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
  margin:16px 0;
}
.button{
  display:inline-block;
  background:var(--sage);
  color:white;
  text-decoration:none;
  font-weight:800;
  padding:12px 16px;
  border-radius:10px;
  margin:8px 8px 0 0;
}
.button.secondary{background:transparent;border:1px solid var(--border);color:var(--text)}
ul{padding-left:22px}
code{background:var(--sage-soft);padding:2px 6px;border-radius:6px}
footer{border-top:1px solid var(--border);color:var(--muted);padding:28px 20px;text-align:center;font-size:12px}
.notice{border-left:3px solid var(--sage);padding-left:14px;color:var(--muted)}
@media(max-width:700px){
  .nav{align-items:flex-start;flex-direction:column}
  nav{gap:10px 14px}
  main{padding-top:28px}
  h1{font-size:29px}
}