:root { font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; color: #172019; background: #f5f4ee; line-height: 1.6; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(760px, calc(100% - 36px)); margin: 0 auto; padding: 54px 0 80px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 800; }
.mark { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: #285e3e; color: #fff; }
header { margin: 56px 0 40px; }
.eyebrow { margin: 0 0 8px; color: #285e3e; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0 0 14px; font-size: clamp(2.4rem, 8vw, 4.5rem); line-height: 1; letter-spacing: -.045em; }
h2 { margin: 35px 0 8px; font-size: 1.35rem; letter-spacing: -.025em; }
p, li { color: #566158; }
ul { padding-left: 22px; }
.note { padding: 18px 20px; border: 1px solid #d7ddd4; border-radius: 15px; background: #fffefa; }
a { color: #285e3e; }
footer { margin-top: 48px; padding-top: 22px; border-top: 1px solid #d7ddd4; font-size: .9rem; }
@media (prefers-color-scheme: dark) {
  :root { color: #f2f4ee; background: #111512; }
  .mark { background: #9fdbb1; color: #111512; }
  .eyebrow, a { color: #9fdbb1; }
  p, li { color: #a9b2aa; }
  .note { background: #181e1a; border-color: #344038; }
  footer { border-color: #344038; }
}