:root{--g:#2f6f5e;--o:#c96f3b;--ink:#1d2422;--bg:#f7f6f2}*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:var(--g)}nav{display:flex;justify-content:space-between;align-items:center;max-width:1080px;margin:auto;padding:1rem 1.5rem;flex-wrap:wrap;gap:.5rem}
nav b{font-size:1.1rem}nav div a{margin-left:1rem;white-space:nowrap;text-decoration:none;color:var(--ink)}
.wrap{max-width:1080px;margin:auto;padding:0 1.5rem}.hero{padding:4rem 0 3rem}.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.15;margin:0 0 1rem}
.lead{font-size:1.15rem;max-width:640px;color:#45504c}.btn{display:inline-block;background:var(--g);color:#fff;padding:.75rem 1.4rem;border-radius:8px;text-decoration:none;margin-top:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}.card{background:#fff;border-radius:12px;padding:1.4rem;box-shadow:0 1px 6px #0000000f}
.card img{width:100%;height:170px;object-fit:cover;object-position:top;border-radius:8px;border:1px solid #e5e2da}.card h3{margin:.7rem 0 .3rem}
.tag{display:inline-block;font-size:.75rem;background:#e4efe9;color:var(--g);padding:.1rem .5rem;border-radius:999px;margin-right:.3rem}
section{padding:2.5rem 0}h2{font-size:1.6rem}.note{background:#fff4ea;border-left:4px solid var(--o);padding:1rem 1.2rem;border-radius:6px}
pre{background:#1d2422;color:#e8ece9;padding:1rem;border-radius:8px;overflow:auto;font-size:.85rem}.tw{overflow:auto}table{border-collapse:collapse;font-size:.85rem;background:#fff}
td,th{border:1px solid #ddd;padding:.35rem .6rem;text-align:left}th{background:#eef2ef}.shot{max-width:100%;border:1px solid #ddd;border-radius:8px}
@media(max-width:520px){nav div a{margin:0 .9rem 0 0}.hero{padding:2.5rem 0 2rem}pre{font-size:.78rem}.card img{height:140px}}
footer{padding:2rem 0;color:#6b7470;font-size:.9rem;border-top:1px solid #e3e0d8;margin-top:2rem}