:root {
  --bg: #FFF9F0;
  --card: #FFFEFA;
  --line: #D8D0C5;
  --text: #39342F;
  --text2: #827970;
  --accent: #F5A65B;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 32px 16px 64px;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.65 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
main {
  max-width: 44rem;
  margin: 0 auto;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 36px 34px 44px;
}
h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 4px; }
h2 {
  font-size: 1.15rem;
  margin: 2.2em 0 .5em;
  padding-bottom: .3em;
  border-bottom: 2px solid var(--line);
}
.date { color: var(--text2); font-size: .95rem; margin: 0 0 1.5em; }
.lang { float: right; font-size: .9rem; }
a { color: #0b6b86; }
ul { padding-left: 1.3em; }
li { margin: .35em 0; }
code {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .1em .35em;
  font-size: .9em;
}
.todo {
  background: #F7D774;
  border: 2px solid var(--accent);
  border-radius: 6px;
  padding: .15em .5em;
  font-weight: 700;
}
footer { color: var(--text2); font-size: .9rem; margin-top: 2.5em; }
@media (max-width: 480px) {
  body { padding: 16px 12px 48px; }
  main { padding: 24px 20px 32px; border-radius: 10px; }
}