:root {
  color-scheme: light;
  --background: #fff;
  --text: #222;
  --muted: #666;
  --line: #ccc;
  --code-background: #f3f3f3;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #1c1c1b;
  --text: #ddd;
  --muted: #aaa;
  --line: #555;
  --code-background: #282828;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); line-height: 1.6; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.shell { max-width: 792px; margin: 0 auto; padding: 32px 32px 64px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.wordmark { font-size: 24px; font-weight: bold; text-decoration: none; }
#theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; }
h1 { font-size: 26px; line-height: 1.3; margin: 0 0 20px; }
.entries { padding-left: 24px; margin: 0; }
.entries li { margin: 8px 0; }
.post-header { margin-bottom: 28px; }
.post-header time { display: block; color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.post-header h1, .prose { overflow-wrap: anywhere; }
.prose p { margin: 0 0 24px; }
.prose h2, .prose h3, .prose h4 { margin: 32px 0 16px; line-height: 1.3; }
.prose ul, .prose ol { padding-left: 24px; margin: 0 0 24px; }
.prose li { margin: 5px 0; }
.prose li > ul, .prose li > ol { margin-bottom: 10px; }
.prose img { display: inline-block; max-width: 100%; height: auto; vertical-align: top; border-radius: 3px; }
.prose img[width][height] { height: revert; }
.image-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; margin: 30px 0 24px; }
.image-row img { flex: 0 1 auto; min-width: 0; }
.prose pre { padding: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 3px; font-size: 13px; line-height: 1.6; background: var(--code-background); }
.prose code { font-family: monospace; }
.prose :not(pre) > code { background: var(--code-background); padding: 2px 5px; border-radius: 3px; font-size: .9em; }
.prose blockquote { border-left: 2px solid var(--line); margin: 24px 0; padding-left: 20px; color: var(--muted); }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; margin: 24px 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; }
.skip-link { position: absolute; top: -100px; left: 16px; background: var(--background); padding: 8px; }
.skip-link:focus { top: 8px; }
@media (max-width: 560px) {
  .shell { padding: 24px 22px 48px; }
}