:root {
  --ink: #21271E;
  --canvas: #EEEFE3;
  --card: #FCFBF6;
  --coral: #FF6B4A;
  --grey: #7E8676;
  --line: #DEE2D1;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.65;
  font-size: 17px;
}
.bar { height: 5px; background: linear-gradient(90deg, #FF7A1A, #FFC24B, #FF5470); }
header.site { max-width: 760px; margin: 0 auto; padding: 26px 22px 0; }
header.site a.brand {
  font-weight: 800; font-size: 20px; color: var(--ink);
  text-decoration: none; letter-spacing: -0.2px;
}
main { max-width: 760px; margin: 0 auto; padding: 8px 22px 40px; }
h1 { font-size: 32px; line-height: 1.2; font-weight: 800; letter-spacing: -0.5px; margin: 24px 0 6px; }
h2 { font-size: 21px; font-weight: 800; margin: 34px 0 8px; }
h3 { font-size: 17px; font-weight: 700; margin: 22px 0 4px; }
p, li { color: #2c3327; }
a { color: var(--coral); }
.eff { color: var(--grey); font-weight: 600; font-size: 14px; margin: 0 0 8px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
ul { padding-left: 22px; }
li { margin: 5px 0; }
pre {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; overflow-x: auto; font-size: 12.5px; line-height: 1.5; color: var(--grey);
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hero-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 24px; margin-top: 18px;
}
.lede { font-size: 19px; color: #2c3327; }
.cta { color: var(--grey); font-size: 14px; font-weight: 700; margin-bottom: 0; }
footer.site {
  max-width: 760px; margin: 30px auto 0; padding: 24px 22px 50px;
  border-top: 1px solid var(--line); color: var(--grey); font-size: 14px;
}
footer.site a { color: var(--grey); margin-right: 16px; font-weight: 600; }