:root{
  --bg:#F7F9FA;
  --fg:#0A0A0A;
  --muted:#6B7280;
  --accent:#00A859;
  --card:#FFFFFF;
  --border:#E5E7EB;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
}

.header{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(120%) blur(4px);
}

.container{max-width:860px;margin:0 auto;padding:16px}
.brand{font-weight:700; letter-spacing:0.2px;}

.nav{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.nav a{
  text-decoration:none;
  color:var(--fg);
  border:1px solid var(--border);
  background:var(--card);
  padding:8px 12px;
  border-radius:999px;
  font-size:14px;
}
.nav a:hover{border-color:var(--accent)}
.nav a.active{border-color:var(--accent); outline:2px solid color-mix(in srgb, var(--accent) 30%, transparent)}

main{max-width:860px;margin:0 auto;padding:24px 16px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
}

.small{color:var(--muted); font-size:0.95rem}
footer{border-top:1px solid var(--border); padding:24px 16px; text-align:center; color:var(--muted)}
ul,ol{margin:0 0 1rem 1.2rem}
h1,h2,h3{line-height:1.25; margin:0 0 0.2rem}
h1{font-size:1.6rem}
h2{font-size:1.2rem; margin-top:1rem}