:root {
  --line-soft: rgba(33, 37, 30, 0.32);
  --mark: #efe3a6;
  --theme-progress-track: rgba(33, 37, 30, 0.12);
}
:root[data-theme="dark"] {
  --paper: #171a15;
  --ink: #e8eadf;
  --muted: #aeb3a6;
  --line: rgba(232, 234, 223, 0.18);
  --line-soft: rgba(232, 234, 223, 0.38);
  --mark: #5b5427;
  --dim: #92978c;
  --running: #86c49e;
  --building: #dfbf72;
  --steady: #aebee0;
  --theme-progress-track: rgba(232, 234, 223, 0.14);
}
html[data-theme="dark"] { color-scheme: dark; }
html { scrollbar-gutter: stable; }
::selection { background: var(--mark); color: var(--ink); }
html[data-theme="dark"] a { text-decoration-color: var(--line-soft); }
html[data-theme="dark"] .reading-progress { background: var(--theme-progress-track); }
header { position: relative; }
header h1 { font-family: var(--serif); font-weight: 600 !important; font-synthesis: none; }
header h1 > .masthead-home { color: inherit; font: inherit; text-decoration: none; }
header > h1, header > .name { padding-right: 2.5rem; }
.theme-toggle {
  position: absolute;
  top: 0;
  right: max(0px, calc(100% - 42rem));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: block; }