:root{
  --bg:#ffffff; --ink:#1c1c1e; --ink-soft:#6b6b6b; --ink-faint:#9b9b97;
  --green:#2e9e5b; --green-dark:#278a4f; --blue:#4169f1; --line:#ece9e0; --radius:18px;
}
*{font-family:'Nunito',system-ui,-apple-system,sans-serif; margin:0; padding:0; box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); line-height:1.7; font-size:17px; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Baloo 2',sans-serif; font-weight:800; line-height:1.2; letter-spacing:-.01em}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
code{background:#f3f2ec; padding:1px 6px; border-radius:5px; font-size:.92em}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}

.topbar{position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--line); z-index:10}
.topbar .wrap{max-width:680px; margin:0 auto; padding:0 20px; height:56px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); font-family:'Baloo 2',sans-serif; font-weight:800}
.brand .badge{width:30px; height:30px; border-radius:8px; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:14px}
.topbar nav{display:flex; gap:14px; font-size:14px}
.topbar nav a{color:var(--ink-soft); font-weight:700}
.topbar nav a:hover{color:var(--ink); text-decoration:none}

main{max-width:680px; margin:0 auto; padding:40px 20px 24px}
h1{font-size:clamp(28px,6vw,36px); margin-bottom:8px}
.updated{color:var(--ink-faint); font-size:14px; margin-bottom:32px}
h2{font-size:22px; margin:32px 0 10px}
p{margin-bottom:14px; color:var(--ink-soft)}
ul{margin:0 0 14px 22px; color:var(--ink-soft)}
li{margin-bottom:6px}
strong{color:var(--ink)}

.contact-card{background:#f3f8f4; border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin:22px 0; text-align:center}
.contact-card a.email{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:clamp(20px,5vw,26px); color:var(--green)}

.foot{max-width:680px; margin:0 auto; padding:24px 20px 56px; border-top:1px solid var(--line); display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-family:'Baloo 2',sans-serif; font-size:13px; color:var(--ink-faint)}
.foot a{color:var(--ink-faint)}
.foot a:hover{color:var(--ink); text-decoration:none}