:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #12231E;
  margin: 0;
  background: #F4F7F6;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 40px 20px 72px; }
a { color: #15937F; }
h1 { color: #0C453A; margin-bottom: 4px; }
h2 { color: #15937F; margin-top: 32px; }
.muted { color: #5C6B66; font-size: 14px; }
code { background: #E7F4EF; padding: 1px 5px; border-radius: 4px; }
.note {
  background: #FEF5E4; border-radius: 10px; padding: 14px 18px; color: #7A4F0E; margin-top: 24px;
}
.brand {
  display: flex; align-items: center; gap: 10px; margin-bottom: 24px;
}
.brand .dot { width: 14px; height: 14px; border-radius: 50%; background: #2FB46E; }
.brand strong { color: #0C453A; font-size: 18px; }
nav a { margin-right: 18px; font-weight: 600; }
footer { margin-top: 48px; font-size: 13px; color: #9AA8A3; }
.hero { padding: 24px 0 8px; }
.hero p { font-size: 18px; color: #5C6B66; }
.lights { display: flex; gap: 12px; margin: 20px 0; }
.light { padding: 10px 14px; border-radius: 10px; font-weight: 700; color: #fff; font-size: 14px; }
.g { background: #2FB46E; } .a { background: #F2A52A; } .r { background: #E25749; }