:root {
  --ground: #C9BDE0; --card: #D8CFEA; --ink: #292433; --muted: #41394F;
  --accent: #625078; --rule: #B2A1CB;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --ground: #302D47; --card: #3A374F; --ink: #F1EDF8; --muted: #C4BFD8;
          --accent: #B8A2EC; --rule: #46415E; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink);
       font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 40px 20px 64px; }
header.site { display: flex; align-items: center; justify-content: space-between; gap: 16px;
              max-width: 720px; margin: 0 auto; padding: 20px 20px 0; flex-wrap: wrap; }
header.site a.brand { font-weight: 800; font-size: 20px; color: var(--ink); text-decoration: none; }
nav a { color: var(--accent); text-decoration: none; margin-left: 18px; font-weight: 600; }
nav a:first-child { margin-left: 0; }
h1 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; }
h2 { font-size: 22px; margin: 36px 0 8px; }
p, li { color: var(--ink); }
.muted { color: var(--muted); }
a { color: var(--accent); }
.card { background: var(--card); border-radius: 18px; padding: 20px 22px; margin: 20px 0; }
.tiles { display: flex; gap: 10px; margin: 8px 0 24px; }
.tiles span { width: 34px; height: 34px; border-radius: 9px; display: block;
              box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
footer { max-width: 720px; margin: 0 auto; padding: 0 20px 40px; font-size: 14px; color: var(--muted); }