:root { --bg: #f6f7f9; --surface: #fff; --text: #1a1d23; --muted: #6b7280; --border: #e3e6eb; --accent: #6366f1; color-scheme: light; }
:root.dark { --bg: #0f1115; --surface: #171a20; --text: #e7e9ee; --muted: #8b92a0; --border: #2a2f38; color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.65 Inter, system-ui, -apple-system, sans-serif; }
main { max-width: 760px; margin: 40px auto; padding: 36px 40px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
a { color: var(--accent); }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: 17px; margin-bottom: 24px; }
.mark { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 14px; }
h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: -0.02em; }
h2 { font-size: 17px; margin: 28px 0 6px; }
.muted { color: var(--muted); margin-top: 0; }
hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; }
footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; color: var(--muted); }
@media (max-width: 700px) { main { margin: 0; border-radius: 0; border: none; padding: 24px 16px; } }