:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0; padding: 0; background: #F4FAFA; color: #12312E; }
@media (prefers-color-scheme: dark) { body { background: #0E1B1A; color: #DDEBE9; } }
header { background: linear-gradient(180deg, #4FB3A9, #246861); color: #fff; padding: 40px 20px 32px; }
header .wrap, main { max-width: 640px; margin: 0 auto; padding: 0 20px; }
header h1 { margin: 0 0 4px; font-size: 30px; letter-spacing: -0.3px; }
header p { margin: 0; opacity: 0.9; }
main { padding: 28px 20px 60px; }
h2 { font-size: 21px; margin: 28px 0 8px; }
a { color: #2E8078; }
@media (prefers-color-scheme: dark) { a { color: #7ED0C6; } }
nav a { margin-right: 14px; }
footer { max-width: 640px; margin: 0 auto; padding: 0 20px 40px; font-size: 14px; opacity: 0.7; }
.grid { display: inline-grid; grid-template-columns: repeat(3, 12px); gap: 3px; margin-right: 10px; vertical-align: -2px; }
.grid i { width: 12px; height: 12px; border-radius: 4px; background: rgba(255,255,255,.35); }
.grid i.f { background: #fff; } .grid i.a { background: #FFD166; }