:root {
  --cream: #F2F0EA;
  --card: #FBFAF7;
  --ink: #211E19;
  --acc: #D2814F;
  --acc-dark: #B25A2C;
  --mute: #6E675C;
  --faint: #9A937F;
  --line: #E9E5DC;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #E5E1D6;
  color: var(--ink);
  font-family: 'Figtree', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}
a { color: var(--acc-dark); }
main { max-width: 680px; margin: 0 auto; padding: 40px 24px 80px; }
.logo { display: flex; align-items: center; gap: 0; margin-bottom: 10px; }
.logo .disc { width: 36px; height: 36px; border-radius: 50%; background: var(--acc); }
.logo .ring { width: 36px; height: 36px; border-radius: 50%; border: 5px solid var(--ink); margin-left: -14px; }
.wordmark { font-size: 22px; font-weight: 800; letter-spacing: -1px; margin-left: 10px; }
.card { background: var(--card); border-radius: 22px; padding: 36px 34px; box-shadow: 0 16px 50px rgba(33,30,25,.10); }
h1 { font-size: 30px; letter-spacing: -0.8px; margin: 8px 0 4px; }
.updated { color: var(--faint); font-size: 13.5px; margin: 0 0 26px; }
h2 { font-size: 19px; letter-spacing: -0.3px; margin: 30px 0 6px; }
p, li { color: #3d3831; font-size: 15.5px; }
ul { padding-left: 20px; }
code { background: var(--line); border-radius: 7px; padding: 2px 7px; font-size: 14px; }
.btn { display: inline-block; background: var(--acc); color: var(--ink); font-weight: 700; text-decoration: none; padding: 12px 22px; border-radius: 24px; margin-top: 10px; }
.foot { text-align: center; color: var(--faint); font-size: 12.5px; margin-top: 30px; }
.nav { display: flex; gap: 18px; margin-top: 22px; font-size: 14px; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  body { background: #16140f; color: #ECE8DE; }
  .card { background: #201d17; box-shadow: none; }
  h1, .wordmark { color: #F2F0EA; }
  p, li { color: #C9C3B5; }
  code { background: #2c281f; }
  .logo .ring { border-color: #F2F0EA; }
}