:root {
  --bg: #f5f2ec;
  --ink: #1b1a18;
  --muted: #6f6a62;
  --faint: #d9d3c8;
  --accent: #2a8c5c;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121110; --ink: #ece8e1; --muted: #8f897f; --faint: #2c2a27; }
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-font-smoothing: antialiased; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.7 Inter, system-ui, sans-serif;
  padding: 72px 20px 96px;
}
main {
  max-width: 38rem;
  margin: 0 auto;
  animation: rise .9s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.back {
  display: inline-block;
  font: 400 12.5px/1 "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color .3s, transform .5s var(--ease);
}
.back:hover { color: var(--accent); transform: translateX(-3px); }
h1 {
  font: 400 clamp(40px, 8vw, 56px)/1.05 "Instrument Serif", Georgia, serif;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.updated {
  font: 400 12.5px/1.5 "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted);
  margin-bottom: 36px;
}
h2 {
  font: 400 24px/1.3 "Instrument Serif", Georgia, serif;
  margin: 36px 0 10px;
}
p, ul { margin-bottom: 14px; text-wrap: pretty; }
ul { padding-left: 1.2em; }
li { margin-bottom: 6px; }
li::marker { color: var(--accent); }
a { color: inherit; text-decoration-color: var(--faint); text-underline-offset: 3px; transition: text-decoration-color .3s; }
a:hover { text-decoration-color: var(--accent); }
footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--faint);
  font: 400 12px/1.5 "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted);
}
footer a { margin-right: 16px; }
@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  .back { transition: none; }
}