:root {
  --bg: #f6f7f9; --panel: #ffffff; --ink: #1b1f24; --muted: #5d6673; --line: #dfe3e8;
  --accent: #1f6feb; --accent-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1216; --panel: #171b21; --ink: #e6e9ed; --muted: #9aa4b1; --line: #2a313a;
    --accent: #4c8dff; --accent-ink: #0b0d10;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
.nav { max-width: 760px; margin: 0 auto; padding: 18px 16px 0; display: flex; gap: 6px 18px;
  flex-wrap: wrap; align-items: baseline; font-size: 15px; }
.nav .brand { font-weight: 750; font-size: 19px; color: var(--ink); text-decoration: none; margin-right: auto; }
.nav a:not(.brand) { color: var(--muted); text-decoration: none; }
.nav a:not(.brand):hover { color: var(--accent); }
.article { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; }
.article h1 { font-size: 34px; line-height: 1.2; letter-spacing: -0.5px; margin: 12px 0 14px; }
.article h2 { font-size: 22px; margin: 34px 0 10px; }
.article li { margin: 6px 0; }
.lede { font-size: 19px; color: var(--muted); }
.answer { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 8px; padding: 14px 16px; }
.updated { color: var(--muted); font-size: 15px; margin-top: 30px; }
.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none;
  font-weight: 650; padding: 12px 20px; border-radius: 8px; }
.cta { margin: 22px 0; }
.faq { display: flex; flex-direction: column; gap: 8px; }
.qa { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0 16px; }
.qa summary { cursor: pointer; font-weight: 650; padding: 14px 0; }
.qa p { margin: 0 0 14px; color: var(--ink); }
.site-footer { border-top: 1px solid var(--line); margin-top: 20px; }
.site-footer .in { max-width: 760px; margin: 0 auto; padding: 20px 16px 40px; color: var(--muted); font-size: 14px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
.site-footer a { color: var(--muted); }
@media (max-width: 600px) {
  .article h1 { font-size: 28px; }
}