:root {
  color-scheme: light dark;
  --ink: light-dark(#14171f, #eef1f7);
  --muted: light-dark(#5a6170, #a3abbb);
  --canvas: light-dark(#ffffff, #0d1016);
  --rule: light-dark(#e3e6ed, #262b36);
  --accent: light-dark(#2d4f9a, #aac4ff);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-contrast: more) {
  :root { --accent: light-dark(#193b83, #c7d8ff); --muted: var(--ink); }
}
body { margin: 0; }
.masthead, main, .foot { max-inline-size: 42rem; margin-inline: auto; padding-inline: 1.25rem; }
.masthead { display: flex; align-items: baseline; gap: 0.6rem; padding-block: 1.5rem 0.5rem; border-block-end: 1px solid var(--rule); }
.brand { font-weight: 800; font-size: 1.15rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.by { color: var(--muted); font-size: 0.9rem; }
main { padding-block: 1.5rem 2.5rem; }
h1 { font-size: 2rem; line-height: 1.15; letter-spacing: -0.02em; margin-block: 0.5rem 0.25rem; }
h2 { font-size: 1.15rem; line-height: 1.3; margin-block: 2rem 0.5rem; }
p { margin-block: 0 0.9rem; overflow-wrap: anywhere; }
.meta { color: var(--muted); font-size: 0.95rem; margin-block-end: 1.5rem; }
a { color: var(--accent); text-underline-offset: 0.15em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.foot { border-block-start: 1px solid var(--rule); padding-block: 1.25rem 2.5rem; color: var(--muted); font-size: 0.9rem; }
.foot p { margin: 0 0 0.25rem; }