body{margin:0;font-family:system-ui,sans-serif;background:#1b1f1a;color:#e8eee4}a{color:#7fd36b}
nav{display:flex;gap:1.2rem;padding:.9rem 1.5rem;background:#2b3a26;border-bottom:4px solid #5a3d22}nav a:first-child{font-weight:800;margin-right:auto}
main{max-width:1000px;margin:auto;padding:1.5rem}.hero{text-align:center;padding:2.5rem 1rem;background:linear-gradient(#3c6b2f,#2b3a26);border:4px solid #5a3d22;border-radius:6px}
.hero h1{font-size:2.8rem;margin:0}.btn{display:inline-block;background:#7fd36b;color:#111;padding:.6rem 1.2rem;font-weight:700;text-decoration:none;border-radius:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem}.card,.box{background:#262d23;border:2px solid #3f4d38;border-radius:6px;padding:1rem;margin:1rem 0}
.card{margin:0}.card h3{margin-top:0}.tag{font-size:.7rem;background:#5a3d22;padding:2px 6px;border-radius:3px;vertical-align:middle}
dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;font-size:.85rem}dt{color:#9aa}dd{margin:0}.featured{border-color:#e3b341}
input,textarea,button{padding:.5rem;border-radius:4px;border:1px solid #556;font:inherit}button{background:#7fd36b;border:0;font-weight:700}
label{display:block;margin:.6rem 0}label input,label textarea{display:block;width:100%;box-sizing:border-box}#q{width:100%;margin-bottom:1rem;box-sizing:border-box}
.note{color:#e3b341}footer{text-align:center;padding:2rem;color:#888;font-size:.8rem}
pre{background:#111;padding:.8rem;border-radius:4px;overflow:auto}code{color:#cde}.src{font-size:.85rem;color:#9aa}
table{border-collapse:collapse}td,th{border:1px solid #3f4d38;padding:.3rem .6rem;text-align:left}

/* ---------- Responsive / mobile (added 2026-10-17) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
nav{flex-wrap:wrap;align-items:center;row-gap:.25rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:.35rem}
.hero p{margin:.8rem 0 1rem}
input,textarea,button{min-height:44px;max-width:100%}
button{padding:.5rem 1.1rem;cursor:pointer}
#newsletter form{display:flex;flex-wrap:wrap;gap:.5rem}
#newsletter input[type=email]{flex:1 1 220px}
pre{max-width:100%;white-space:pre}
code{overflow-wrap:anywhere}
table{display:block;max-width:100%;overflow-x:auto}
.card{min-width:0}
.card h3 a{display:inline-block;padding:.6rem 0}
.host a{display:inline-block;padding:.7rem 0}
footer a{display:inline-block;padding:.6rem .2rem}
@media (max-width:600px){
  nav{padding:.5rem .75rem;gap:0 .9rem}
  nav a{padding:.6rem .1rem;min-height:44px;display:inline-flex;align-items:center}
  nav a:first-child{flex-basis:100%;margin-right:0;font-size:1.1rem;padding-bottom:.2rem}
  main{padding:1rem .9rem}
  .hero{padding:1.75rem 1rem}
  .hero h1{font-size:2.1rem}
  .hero .btn{display:flex;width:100%;margin:.75rem 0 0}
  .box{padding:1rem .9rem}
  .featured .btn{display:flex;width:100%;margin:.75rem 0 0;text-align:center}
  .grid{grid-template-columns:1fr}
  #newsletter button{flex:1 1 100%}
  .box form button,form.box button{width:100%}
  dl{grid-template-columns:max-content 1fr}
  footer{padding:1.5rem 1rem;line-height:1.6}
}
.tag{white-space:nowrap;display:inline-block}