:root{
  --cream:#fff8e8;
  --gold:#f5c64b;
  --brown:#5b321a;
  --brown2:#7a4b28;
  --green:#5e9b45;
  --ink:#2a211a;
  --card:#fffdf7;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(#96d8ff 0 24%, #8fcf68 24% 100%);
  min-height:100vh;
}
.wrap{max-width:900px;margin:0 auto;padding:28px 18px 48px}
.hero{
  text-align:center;
  background:rgba(255,253,247,.94);
  border:5px solid var(--brown2);
  border-radius:26px;
  padding:24px;
  box-shadow:0 8px 0 rgba(91,50,26,.22);
}
.hero img{width:150px;height:150px;object-fit:cover;border-radius:28px}
h1{margin:14px 0 4px;font-size:42px;color:var(--brown)}
.tag{font-size:18px;margin:0;color:#4e4a42}
.nav{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:22px 0 0}
.nav a,.button{
  text-decoration:none;color:#fff;background:var(--brown2);font-weight:700;
  padding:11px 16px;border-radius:12px;display:inline-block
}
.nav a:hover,.button:hover{background:var(--brown)}
.card{
  margin-top:22px;background:rgba(255,253,247,.96);
  border:3px solid #a86e37;border-radius:20px;padding:24px;
  box-shadow:0 6px 18px rgba(47,35,20,.12);
}
h2{color:var(--brown);margin-top:0}
h3{color:var(--brown2);margin-bottom:6px}
p,li{line-height:1.6}
.small{font-size:14px;color:#686158}
.note{background:#fff3c9;border-left:5px solid var(--gold);padding:12px 14px;border-radius:8px}
footer{text-align:center;margin-top:28px;color:#3f4a35;font-size:13px}
code{background:#f5eee2;padding:2px 5px;border-radius:4px}
@media(max-width:600px){h1{font-size:34px}.hero img{width:120px;height:120px}}