html { scrollbar-gutter: stable; }
:root { color-scheme: light; font-family: system-ui, sans-serif; }
body { margin: 0; padding: 0 1.25rem 2rem; color: #202124; background: #fff; font-size: 1.125rem; line-height: 1.7; }
a { color: inherit; }
.body a { color: #1d4ed8; }
.site-header { width: calc(100% + 2.5rem); margin: 0 -1.25rem 2rem; border-bottom: 1px solid #e5e7eb; }
.site-nav { max-width: 70rem; margin: 0 auto; padding: 1rem 1.25rem; display: flex; align-items: center; gap: .75rem; }
.site-nav a { font-weight: 700; text-decoration: none; }
.lang-menu { margin-left: auto; position: relative; font-size: .9rem; }
.lang-menu summary { cursor: pointer; list-style: none; color: #4b5563; padding: .15rem .5rem; border: 1px solid #d1d5db; border-radius: .375rem; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: " ▾"; }
.lang-menu[open] summary::after { content: " ▴"; }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + .25rem); z-index: 5; margin: 0; padding: .25rem 0; list-style: none; min-width: 7rem; background: #fff; border: 1px solid #d1d5db; border-radius: .375rem; box-shadow: 0 .25rem .75rem #0002; }
.lang-menu li > * { display: block; padding: .35rem .75rem; }
.lang-menu li > span[aria-current] { color: #9ca3af; }
.lang-menu li > a:hover { background: #f3f4f6; }
.frame { max-width: 70rem; margin: 0 auto; }
.feed { display: grid; gap: 1.25rem; }
.feed-item { position: relative; border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1rem 1.25rem; }
.feed-item:hover { border-color: #9ca3af; }
.item-link::after { content: ""; position: absolute; inset: 0; border-radius: .75rem; }
.feed-item .body a { position: relative; z-index: 1; }
.post { padding-bottom: 1.25rem; }
.post-title, .feed-title { margin: 0 0 .5rem; }
.item-footer { color: #6b7280; font-size: .875rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .75rem; }
.item-footer a { color: inherit; text-decoration: none; }
.item-footer a:hover { text-decoration: underline; }
.shares { display: inline-flex; gap: .5rem; align-items: center; }
.share-badge { position: relative; z-index: 1; display: inline-flex; margin: .25rem; color: #374151; }
.share-badge img { display: block; height: 1.1rem; width: auto; }
.share-badge img[src$="substack.png"] { height: 1.8rem; }
.tag-cloud { margin-top: 2rem; }
.tag-cloud h2 { font-size: 1rem; margin: 0 0 .75rem; color: #6b7280; }
.tag-cloud ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: baseline; }
.tag-cloud .count { color: #9ca3af; font-size: .75rem; margin-left: .15rem; }
.tags a { color: inherit; }
.tag-reason { color: #6b7280; font-size: .875rem; margin: .5rem 0 0; }
@media (min-width: 64rem) {
  .feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 2.5rem; align-items: start; }
  .tag-cloud { margin-top: 4.5rem; position: sticky; top: 2rem; }
}
.type { font-size: .8rem; color: #6b7280; }
.tags { margin-top: .75rem; color: #6b7280; font-size: .9rem; }
.body { margin-top: 1.25rem; line-height: 1.7; }
.patch-controls { margin-top: 1rem; }
.patch-view-toggle { border: 1px solid #9ca3af; border-radius: .25rem; padding: .35rem .6rem; background: #fff; color: inherit; cursor: pointer; }
.patch-region { position: relative; border-radius: .15rem; }
.patch-view-on .patch-region { outline: 2px solid #2563eb; outline-offset: 1px; }
.patch-view-on .patch-region[data-patch-deleted="true"] { display: inline-block; width: 0; height: 1.1em; vertical-align: text-bottom; background: #dbeafe; }
.patch-history { position: absolute; z-index: 2; min-width: 14rem; max-width: 24rem; padding: .65rem .8rem; border: 1px solid #9ca3af; border-radius: .25rem; background: #fff; box-shadow: 0 .25rem .75rem #0002; color: #202124; font-size: .85rem; line-height: 1.4; }
.patch-history ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.patch-history li + li { margin-top: .35rem; }
img { max-width: 100%; height: auto; }
.image-zoom { cursor: zoom-in; }
.zoom-overlay { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); cursor: zoom-out; }
.zoom-overlay img { max-width: 100vw; max-height: 100vh; width: auto; height: auto; }
blockquote { border-left: .25rem solid #d1d5db; margin: 1rem 0; padding-left: 1rem; color: #4b5563; }
code { background: #f3f4f6; padding: .1rem .25rem; }