:root {
  color-scheme: light dark;
  --about-bg: #fff;
  --about-text: #1f2328;
  --about-muted: #59636e;
  --about-border: #d1d9e0;
  --about-link: #0969da;
  --about-logo: #fff;
  --about-weight-bold: 700;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--about-bg); color: var(--about-text); font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px max(20px, calc((100% - 960px) / 2)); border-block-start: 3px solid #964322; border-block-end: 1px solid var(--about-border); }
.brand { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: var(--about-weight-bold); color: var(--about-text); text-decoration: none; }
.brand img { background: var(--about-logo); border-radius: 50%; }
nav { display: flex; gap: 20px; }
main { max-width: 880px; margin-inline: auto; padding: 32px 20px; }
section { padding-block: 8px 40px; scroll-margin-block-start: 24px; }
section + section { padding-block-start: 40px; border-block-start: 1px solid var(--about-border); }
h1 { font-size: clamp(26px, 5vw, 36px); line-height: 1.2; }
h2 { margin-block-start: 32px; font-size: 21px; }
.lead { color: var(--about-muted); font-size: 18px; }
a { color: var(--about-link); text-underline-offset: 3px; overflow-wrap: anywhere; }
a:focus-visible { outline: 3px solid var(--about-link); outline-offset: 4px; }
.links { padding-inline-start: 24px; }
.links li { margin-block: 8px; }
@media (prefers-color-scheme: dark) {
  :root { --about-bg: #0d1117; --about-text: #e6edf3; --about-muted: #9198a1; --about-border: #3d444d; --about-link: #4493f8; }
}