:root {
  color-scheme: light dark;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  --background: #fff;
  --text: #444;
  --heading: #222;
  --link: #3273dc;
  --muted: #666;
}
@media (prefers-color-scheme: dark) {
  :root { --background: #01242e; --text: #ddd; --heading: #eee; --link: #8cc2dd; --muted: #bbb; }
}
body { max-width: 720px; margin: auto; padding: 20px; background: var(--background); color: var(--text); line-height: 1.5; overflow-wrap: break-word; }
main { line-height: 1.6; }
h1, h2, h3, h4, strong { color: var(--heading); }
h1 { font-size: 2em; line-height: 1.3; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.identity { display: inline-block; color: var(--heading); font-size: 1.5em; font-weight: bold; margin: .83em 0; }
.identity:hover { text-decoration: none; }
nav a { margin-right: 8px; }
.social-links { margin: 1em 0; }
hr { border: 0; border-top: 1px dashed var(--muted); }
.project-list { padding-left: 40px; }
.project-list li { margin: .6em 0; }
.project-description { display: block; margin: .15em 0 0; }
.article-header { margin-bottom: 1.5em; }
.article-header h1 { margin-bottom: .4em; }
.eyebrow { font-size: .9em; }
.eyebrow { color: var(--muted); }
img { max-width: 100%; height: auto; border-radius: .5rem; }
figure { margin: 1.5em 0; }
figure img { display: block; }
figcaption { color: var(--muted); font-size: .875em; margin-top: .5em; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; }
.gallery figure:only-child { grid-column: 1 / -1; }
.gallery img { width: 100%; }
pre { overflow-x: auto; padding: 1em; border-radius: 3px; }
code { font-family: monospace; }
blockquote { border-left: 1px solid #999; padding-left: 20px; margin-left: 0; font-style: italic; }
.skip-link { position: absolute; top: -100px; background: var(--background); padding: 8px; }
.skip-link:focus { top: 10px; }
@media (max-width: 480px) { .gallery { grid-template-columns: 1fr; } }