:root{
  --bg:#fbfaf7; --panel:#ffffff; --txt:#1b1b1b; --muted:#6b675e;
  --accent:#2f6f5e; --accent-soft:#eaf2ee; --line:#e6dfd0;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.top{
  border-bottom:1px solid var(--line); background:rgba(251,250,247,.92);
  position:sticky; top:0; z-index:20; backdrop-filter:blur(8px);
}
.top-in{max-width:860px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:14px}
.brand{font-weight:700; letter-spacing:-.01em; color:var(--txt)}
.brand span{color:var(--accent)}
.top nav{margin-left:auto; display:flex; gap:16px; flex-wrap:wrap}
.top nav a{font-size:14px; color:var(--muted)}
.top nav a:hover{color:var(--accent); text-decoration:none}

main{max-width:860px; margin:0 auto; padding:40px 20px 72px}

.hero{margin-bottom:36px}
.kicker{font-size:13px; text-transform:uppercase; letter-spacing:.09em; color:var(--accent); font-weight:600}
h1{font-size:34px; line-height:1.2; letter-spacing:-.02em; margin:10px 0 12px}
.sub{color:var(--muted); font-size:15px; margin:0}
.meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; font-size:13px; color:var(--muted)}
.meta span{background:var(--accent-soft); color:#2b5c4e; padding:4px 10px; border-radius:999px}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin:24px 0 8px}
.card{
  display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px 16px; transition:transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.card:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(31,45,38,.08); border-color:#d8cfba; text-decoration:none}
.card h3{margin:0 0 6px; font-size:16px; color:var(--txt)}
.card p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.5}
.card .ico{font-size:19px; display:block; margin-bottom:8px}

article h2{font-size:21px; margin:34px 0 10px; letter-spacing:-.01em; padding-top:6px}
article h3{font-size:16.5px; margin:22px 0 8px}
article p, article li{margin:0 0 10px}
article ol, article ul{padding-left:22px}
article li{margin-bottom:6px}
article small{color:var(--muted)}
hr{border:0; border-top:1px solid var(--line); margin:30px 0}

.note{
  background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:8px;
  padding:12px 16px; margin:18px 0; font-size:14.5px; color:#264a3f;
}
.warn{background:#fdf3e7; border-left-color:#d08a2c; color:#6b4a13}

.toc{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 20px; margin:22px 0 6px; font-size:14.5px}
.toc b{display:block; font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:8px}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:26px}
.toc li{margin:0 0 4px}

.req{width:100%; border-collapse:collapse; margin:14px 0 6px; font-size:14.5px; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.req th, .req td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.req tr:last-child td{border-bottom:0}
.req th{width:36%; color:var(--muted); font-weight:500; background:#faf8f3}

.btn{
  display:inline-block; background:var(--accent); color:#fff; padding:10px 18px; border-radius:10px;
  font-size:14.5px; font-weight:600; margin:6px 8px 6px 0;
}
.btn:hover{background:#275c4e; text-decoration:none; color:#fff}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent)}
.btn.ghost:hover{background:var(--accent-soft)}

.backlink{display:inline-block; font-size:14px; color:var(--muted); margin-bottom:18px}
.backlink:hover{color:var(--accent); text-decoration:none}

footer{border-top:1px solid var(--line); margin-top:48px; padding:22px 20px 40px; color:var(--muted); font-size:13.5px}
footer .f-in{max-width:860px; margin:0 auto; display:flex; gap:18px; flex-wrap:wrap}
footer a{color:var(--muted)}
footer a:hover{color:var(--accent)}
footer .sep{margin-left:auto}

@media (max-width:620px){
  h1{font-size:27px}
  .toc ol{columns:1}
  .top nav{display:none}
  main{padding:28px 16px 56px}
}
@media print{
  .top, footer, .backlink, .btn{display:none}
  body{background:#fff}
  main{padding:0}
  a{color:#000}
}