:root {
  --bg: #0a0a0a;
  --text: #e5e5e5;
  --muted: #cfcfcf;
  --green: #22c55e; /* Tailwind green-500 */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; line-height: 1.65; }
#maincontent { max-width: 720px; margin: 70px auto 80px; padding: 0 16px; }
h1, h2 { font-weight: 600; }
h1 { font-size: 28px; margin: 0 0 16px; }
h2 { font-size: 26px; margin: 0 0 16px; }
p { margin: 14px 0; color: var(--muted); }
b { color: var(--text); }
a { color: var(--green); text-decoration: none; margin-right: 18px; }
a:hover { text-decoration: underline; }
footer { margin-top: 48px; font-size: 12px; color: #9a9a9a; border-top: 1px solid #1f1f1f; padding-top: 16px; }
hr { border: none; border-top: 1px solid #1f1f1f; margin: 28px 0; }
ul { color: var(--muted); padding-left: 20px; }
.meta { color: #9a9a9a; font-size: 14px; }

.brand { display: inline-block; margin-bottom: 12px; }
.brand a { margin-right: 0; }
.brand img { height: 28px; width: auto; display: block; }

/* bottom nav links */
.nav { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.nav a { margin-right: 0; }
