:root { color-scheme: light; }
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.6;
  color:#121212;
  background:#ffffff;
}
header{
  position:sticky;
  top:0;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(255,255,255,.92);
  border-bottom:1px solid #e9e9e9;
  z-index:10;
}
.header-inner{
  max-width: 980px;
  margin:0 auto;
  padding: 16px 16px 14px;
}
.brand{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.brand h1{
  font-size: 22px;
  margin:0;
}
.brand small{
  color:#555;
}
nav{
  margin-top:10px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
nav a{
  text-decoration:none;
  color:#0b57d0;
  font-weight:600;
  font-size:14px;
}
nav a:hover{ text-decoration:underline; }

main{
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 16px 50px;
}
h2{ margin-top: 30px; font-size: 20px; }
h3{ margin-top: 18px; font-size: 16px; }
p{ margin: 10px 0; }
ul{ padding-left: 22px; margin: 10px 0; }
.card{
  border:1px solid #ececec;
  background:#fafafa;
  border-radius:14px;
  padding:16px;
  margin: 14px 0;
}
.muted{ color:#555; }
kbd{
  background:#f2f2f2;
  border:1px solid #e1e1e1;
  border-radius:8px;
  padding:2px 8px;
  font-size: 12px;
}
footer{
  border-top:1px solid #e9e9e9;
  color:#555;
  padding: 18px 16px;
}
.footer-inner{
  max-width: 980px;
  margin: 0 auto;
}
a{ color:#0b57d0; }
small{ color:#555; }