:root { color-scheme: light; --bg: #fff; --text: #222; --muted: #555; --border: #ddd; --link: #315d91; font-family: system-ui, sans-serif; color: var(--text); background: var(--bg); }
:root[data-theme="dark"] { color-scheme: dark; --bg: #161819; --text: #e9edeb; --muted: #b3beb8; --border: #3b4540; --link: #9ac8ff; }
.theme-control { display: flex; justify-content: flex-end; margin-bottom: 24px; font-size: 14px; }
.theme-control label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.theme-control input { accent-color: var(--link); width: 18px; height: 18px; }
:root[data-theme="dark"] figure img { filter: invert(1) hue-rotate(180deg); }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(1440px, calc(100% - 64px)); margin: 48px auto 64px; }
h1 { font-size: 32px; line-height: 1.2; font-weight: 600; margin: 0 0 16px; }
.intro { color: var(--muted); margin-bottom: 40px; }
section { padding: 28px 0 36px; border-top: 1px solid var(--border); }
h2 { font-size: 22px; line-height: 1.4; font-weight: 600; margin: 0 0 24px; }
figure { margin: 0 0 24px; }
img { display: block; width: 100%; height: auto; color-scheme: light; }
figcaption { padding-top: 12px; font-size: 13px; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, input:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
p { max-width: 900px; font-size: 16px; line-height: 1.8; margin: 12px 0; }
code { font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  main { width: calc(100% - 32px); margin-top: 28px; }
  h1 { font-size: 28px; }
  h2 { font-size: 20px; }
  p { font-size: 15px; }
}