:root {
  --ground: #edf1ef; --paper: #fafbfa; --ink: #13302c; --ink-2: #4c615d; --line: #d5dedb;
  --aqua: #1fb5b0; --btn: #0b6f6b; --display: "Fraunces", Georgia, serif;
  --body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark; --ground: #0e1917; --paper: #142321; --ink: #e4eeeb; --ink-2: #9db3ae;
    --line: #25403c; --aqua: #37c9c3; --btn: #37c9c3;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.65 var(--body); }
header, main, footer { max-width: 760px; margin: 0 auto; padding: 0 16px; }
header { padding-top: 24px; padding-bottom: 8px; }
.logo { font: 600 24px var(--display); color: var(--ink); text-decoration: none; }
.logo b { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); margin-left: 2px; }
main { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 32px 28px; margin-top: 16px; }
h1 { font: 500 34px/1.2 var(--display); margin: 0 0 6px; }
h2 { font: 500 22px/1.3 var(--display); margin: 32px 0 8px; }
p, li { color: var(--ink-2); }
p { margin: 0 0 12px; }
ul, ol { padding-left: 22px; margin: 0 0 12px; }
a { color: var(--btn); }
.updated { font-size: 14px; color: var(--ink-2); margin-bottom: 24px; }
.box { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin: 12px 0; }
.box p:last-child { margin: 0; }
footer { padding-top: 24px; padding-bottom: 40px; font-size: 14px; color: var(--ink-2); }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }
@media (max-width: 560px) { main { padding: 24px 18px; } h1 { font-size: 28px; } }