:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #171717;
  background: #fff;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(600px, calc(100% - 40px)); margin: 64px auto 100px; }

/* Plain underlines, inverted on hover, following aarnphm.xyz's link treatment. */
a { color: #6f6e69; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: #fff; background: #171717; }
a:focus-visible, button:focus-visible { outline: 1px solid #171717; outline-offset: 3px; }
::selection { background: #171717; color: #fff; }

h1, h2, h3, h4 { font-family: inherit; line-height: 1.35; }
h1 { margin: 0 0 20px; font-size: 26px; font-weight: 600; }
h2 { margin: 32px 0 12px; font-size: 18px; font-weight: 600; }
h3 { margin: 24px 0 10px; font-size: 16px; }
p { margin: 0 0 18px; }
hr { border: 0; border-top: 1px solid #dededb; margin: 28px 0; }
.home h1 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; }
.name-avatar { width: 36px; height: 36px; object-fit: contain; }
.project-image { display: block; width: 100%; height: auto; margin: 24px 0; }
.project-image-small { width: 85%; margin-inline: auto; }
.home h2 { font-size: 16px; font-weight: 400; margin: 0 0 15px; }
.back { margin-bottom: 30px; }
.meta, .post-date { font-size: 13px; color: #777; }
.meta { margin: -8px 0 26px; }
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { margin: 0 0 16px; }
.post-date { display: block; margin-top: 1px; }
.post-footer, .related-notes { margin-top: 32px; }
.related-notes p { margin-bottom: 8px; }

.article-body { overflow-wrap: anywhere; }
.article-body p { margin: 0 0 20px; }
.article-body ul, .article-body ol { padding-left: 24px; margin: 0 0 20px; }
.article-body li { margin: 5px 0; }
.article-body blockquote { margin: 24px 0; padding-left: 18px; border-left: 1px solid #aaa; }
.article-body blockquote p { margin-bottom: 10px; }
.callout-title { display: block; font-weight: 600; }
.article-body code { font-family: Consolas, "Courier New", monospace; font-size: .85em; }
.article-body pre { overflow: auto; padding: 0 0 0 18px; margin: 24px 0; border-left: 1px solid #aaa; line-height: 1.6; }
.article-body pre code { font-size: 13px; }
.article-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.article-body th, .article-body td { padding: 8px 14px 8px 0; text-align: left; border-bottom: 1px solid #dededb; vertical-align: top; }
.article-body img { display: block; max-width: 100%; height: auto; margin: 24px 0; }
.article-body input[type="checkbox"] { margin: 0 8px 0 0; accent-color: #171717; }
.article-body li:has(> input) { list-style: none; margin-left: -22px; }
.footnotes { font-size: 13px; }
.hljs-comment, .hljs-quote { color: #777; }
.hljs-keyword, .hljs-selector-tag { font-weight: 600; }

.recording { margin: 24px 0; }
.video-tabs { margin-bottom: 10px; }
.video-tabs button { font: inherit; padding: 0; border: 0; background: none; color: #6f6e69; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.video-tabs button:hover { color: #fff; background: #171717; }
.video-tabs button[aria-pressed="true"] { color: #171717; text-decoration: none; cursor: default; }
.video-frame { position: relative; aspect-ratio: 16 / 9; min-height: 200px; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.twitch-frame { min-height: 300px; }
.video-links { font-size: 13px; margin-top: 10px; }
.inline-video { display: block; margin: 24px 0; }
.inline-video .video-frame { display: block; }

.skip-link { position: fixed; top: -100px; left: 20px; background: #fff; }
.skip-link:focus { top: 10px; }

@media (max-width: 640px) {
  main { margin-top: 30px; margin-bottom: 60px; }
  h1 { font-size: 24px; }
  .twitch-frame { display: none; }
}