:root { --bg: #fff; --fg: #000; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000; --fg: #e6e6e6; color-scheme: dark; } }
:root[data-theme="dark"] { --bg: #000; --fg: #e6e6e6; color-scheme: dark; }
html { background: var(--bg); }
body {
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 36em; margin: 0 auto; padding: 2.5em 1.25em 4em; }
a { color: var(--fg); }
a:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
header.site { margin-bottom: 3em; }
header.site .name { font-weight: bold; text-decoration: none; }
header.site .nav { list-style: none; margin: .25em 0 0; padding: 0; }
header.site .nav li { display: inline; margin-right: 1em; }
h1 { font-size: 1.6em; line-height: 1.25; font-weight: bold; margin: 0 0 .3em; }
h2 { font-size: 1.25em; margin: 2em 0 .5em; }
h3 { font-size: 1.05em; margin: 1.75em 0 .5em; }
.intro { margin: 0 0 2.5em; }
.date { color: var(--fg); font-size: .85em; white-space: nowrap; }
p.date { margin: 0 0 2em; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { margin: 0 0 .9em; }
.content img { max-width: 100%; height: auto; }
.content blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 2px solid var(--fg); }
.content figure { margin: 1.5em 0; }
.content figcaption { font-size: .85em; }
.pagination { margin-top: 2em; }
.kg-width-wide, .kg-width-full { max-width: 100%; }
.kg-width-wide img, .kg-width-full img { width: 100%; }
footer.site { margin-top: 4em; font-size: .9em; }
footer.site .nav { list-style: none; margin: 0; padding: 0; }
footer.site .nav li { display: inline; margin-right: 1em; }
.top { display: flex; justify-content: space-between; align-items: center; }
.switch { position: relative; width: 40px; height: 22px; flex: none; border: 1.5px solid var(--fg); border-radius: 11px; background: none; padding: 0; cursor: pointer; }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--fg); transition: transform .15s; }
.switch[aria-checked="true"] .knob { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch .knob { transition: none; } }
.more { margin-top: 3em; }
.more h2 { font-size: 1.15em; margin: 2em 0 .6em; }
.more ul { margin: 0; padding-left: 1.2em; }
.more li { margin: 0 0 .5em; }