:root {
  --canvas: #171716;
  --bg: #30302E;
  --card: #262624;
  --elevated: #494945;
  --border: #3C3C3A;
  --fg: #FFFFFF;
  --muted: #9A9A97;
  --segment-muted: #C9C9C6;
  --placeholder: #8E8E8B;
  --primary: #4B9C78;
  --soft: #E5F5EF;
  --accent-fg: #29503F;
  --info: #4E88D7;
  --protein: #6FA8FF;
  --carbs: #7FE0C6;
  --fat: #B79CFF;
  --warm: #FF9A3D;
  --rose: #FF5FA2;
  --caution: #E4A345;
  --inset: 64px;
}

body {
  background: var(--canvas);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

header, .sitefoot { max-width: 1240px; margin: 0 auto; }

.sitenav { display: flex; justify-content: space-between; align-items: center; padding: 24px var(--inset); }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg);
  text-decoration: none;
}
.brand:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.brand svg { width: 28px; height: 28px; }
.b-field { fill: var(--primary); }
.b-mark { fill: none; stroke: #fff; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }

.navlinks { display: flex; gap: 28px; }
.navlinks a { font-size: 14px; color: var(--muted); text-decoration: none; }
.navlinks a:hover { color: var(--fg); }
.navlinks a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.soonpill {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px; color: var(--muted);
  white-space: nowrap;
}
.soonpill.big {
  border-color: rgba(75, 156, 120, 0.55);
  background: rgba(75, 156, 120, 0.10);
  color: var(--soft);
  font-size: 13.5px;
  padding: 11px 18px;
}
.pill-short { display: none; }

.sitefoot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 26px var(--inset);
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted);
}
.footlinks { display: flex; gap: 22px; }
.sitefoot a { color: var(--muted); text-decoration: none; }
.sitefoot a:hover { color: var(--fg); }

@media (max-width: 1193px) {
  :root { --inset: 22px; }
  .sitenav { padding: 16px var(--inset); }
  .navlinks { display: none; }
  .pill-long { display: none; }
  .pill-short { display: inline; }
  .sitefoot { padding: 20px var(--inset); flex-wrap: wrap; gap: 10px; }
}