:root{
  --bg:#ffffff; --fg:#12151a; --muted:#5b6572; --line:#e4e8ee;
  --accent:#1b48d6; --card:#f7f9fc;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0d1117; --fg:#e8edf4; --muted:#98a3b3; --line:#232b36;
         --accent:#7aa2ff; --card:#141b24; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; justify-content:center;
  padding:clamp(28px,6vw,72px) 24px;
}
main{width:100%; max-width:720px}
.mark{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px;
}
.mark a{color:var(--muted); text-decoration:none}
.mark a:hover{color:var(--fg)}
h1{
  font-size:clamp(26px,4.6vw,36px); line-height:1.15;
  letter-spacing:-.02em; margin:0 0 6px; font-weight:640;
}
.updated{color:var(--muted); font-size:14px; margin:0 0 36px}
h2{
  font-size:clamp(18px,2.6vw,21px); margin:34px 0 10px; font-weight:620;
  letter-spacing:-.01em;
}
p{margin:0 0 14px}
ul{margin:0 0 14px; padding-left:22px}
li{margin:0 0 7px}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
a:hover{border-bottom-color:var(--accent)}
.callout{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:18px 22px; margin:0 0 20px;
}
.callout strong{color:var(--fg)}
address{font-style:normal; line-height:1.6; color:var(--muted)}
footer{
  border-top:1px solid var(--line); margin-top:44px; padding-top:20px;
  display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center;
  color:var(--muted); font-size:14px;
}
footer a{color:var(--muted); border-bottom:1px solid transparent}
footer a:hover{color:var(--fg); border-bottom-color:var(--line)}
footer .spacer{margin-left:auto}
@media (max-width:520px){ footer .spacer{margin-left:0; width:100%} }