:root{
  --maxw: 980px;
  --pad: 18px;
  --radius: 12px;
  --border: rgba(0,0,0,.12);
  --muted: rgba(0,0,0,.65);
  --bg: #ffffff;
  --bg2: #f7f7f8;
  --link: #0b57d0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.55; background:var(--bg); color:#111;}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
header{position:sticky; top:0; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border); z-index:10;}
.wrap{max-width:var(--maxw); margin:0 auto; padding: 0 var(--pad);}
.brand{display:flex; align-items:center; gap:12px; padding:14px 0;}
.logo{width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#111,#444); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px;}
.brand h1{font-size:16px; margin:0}
.brand small{display:block; color:var(--muted); font-size:12px; margin-top:2px}
nav{display:flex; gap:14px; flex-wrap:wrap; padding:0 0 14px 0;}
nav a{font-size:13px; color:#111; padding:6px 10px; border-radius:999px; border:1px solid transparent;}
nav a.active{background:var(--bg2); border-color:var(--border);}
main{padding:28px 0 40px 0;}
.hero{background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:22px;}
.hero h2{margin:0 0 8px 0; font-size:28px; letter-spacing:-.02em}
.hero p{margin:0; color:var(--muted); font-size:16px; max-width: 70ch;}
.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:14px;}
.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px;}
.card h3{margin:0 0 6px 0; font-size:16px}
.card p{margin:0; color:var(--muted); font-size:14px}
@media (max-width: 860px){ .grid{grid-template-columns: 1fr;} }
h2{font-size:22px; margin: 0 0 10px 0;}
h3{font-size:16px; margin: 18px 0 6px 0;}
p{margin: 0 0 12px 0;}
ul{margin: 0 0 12px 18px;}
ol{margin: 0 0 12px 18px;}
hr{border:none; border-top:1px solid var(--border); margin: 22px 0;}
.footer{border-top:1px solid var(--border); padding:18px 0; color:var(--muted); font-size:12px;}
.kv{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;}
.kv span{background:#fff; border:1px solid var(--border); border-radius:999px; padding:6px 10px; font-size:12px; color:#222;}
.notice{background:#fff7e6; border:1px solid #f2d39a; padding:12px 14px; border-radius: var(--radius); color:#5a3b00;}
code{background:var(--bg2); padding: 2px 6px; border-radius:6px}