:root{
  --bg:#0d0b12; --bg2:#151120; --ink:#f2ece2; --dim:#a89f92;
  --gold:#e8b44a; --jade:#4fb894; --line:#2a2436;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:720px; margin:0 auto; padding:40px 22px 80px}
header{border-bottom:1px solid var(--line); padding-bottom:26px; margin-bottom:32px}
.eyebrow{color:var(--gold); font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 10px}
h1{font-size:32px; line-height:1.2; margin:0 0 10px; font-weight:700}
h2{font-size:20px; margin:38px 0 12px; color:var(--gold); font-weight:650}
h3{font-size:16px; margin:26px 0 6px; font-weight:650}
.tag{color:var(--dim); margin:0; font-size:15px}
p{margin:0 0 14px}
ul{margin:0 0 14px; padding-left:20px}
li{margin-bottom:7px}
a{color:var(--jade)}
a:hover{color:var(--gold)}
.card{
  background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; margin:0 0 18px;
}
.card h3{margin-top:0}
.contact{
  background:linear-gradient(135deg,rgba(232,180,74,.12),rgba(79,184,148,.08));
  border:1px solid rgba(232,180,74,.32);
}
.mail{font-size:19px; font-weight:650; word-break:break-all}
footer{
  margin-top:52px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--dim); font-size:13px;
}
footer a{margin-right:16px}
code{background:#221c30; padding:2px 6px; border-radius:5px; font-size:14px}
@media (prefers-color-scheme:light){
  :root{--bg:#fbf8f3; --bg2:#fff; --ink:#221d18; --dim:#6a6158; --line:#e5ddd0; --gold:#9a6b12; --jade:#1c7a5c}
  code{background:#efe9dd}
}