:root { --paper: #F6F8F4; --teal: #0E2A24; --teal-soft: #17544A; --gold: #B88C2E; --ink: #14201C; --ink-soft: #55635E; --card: #FFFFFF; }
* { box-sizing: border-box; }
body { margin: 0; padding: 0 16px; font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink);
  background: linear-gradient(180deg, #FDF2E0 0%, #E6F2EB 100%); background-attachment: fixed; min-height: 100vh; }
.wrap { max-width: 720px; margin: 0 auto; padding-block: 48px 72px; }
header { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.mark { width: 54px; height: 54px; border-radius: 14px; flex: none; background: linear-gradient(180deg, #0A2422, #185648); display: grid; place-items: center; }
.mark svg { width: 34px; height: 34px; }
h1 { font-size: 30px; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 21px; margin: 36px 0 10px; }
.lede { color: var(--ink-soft); margin-top: 4px; }
.card { background: var(--card); border-radius: 18px; padding: 24px 26px; margin-top: 26px; }
a { color: var(--teal-soft); }
footer { margin-top: 40px; color: var(--ink-soft); font-size: 15px; }
nav { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
nav a { background: rgba(14,42,36,.08); padding: 9px 15px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15px; }
ul { padding-left: 22px; }
.badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.badge { background: var(--teal); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; }