:root {
  color-scheme: light;
  --page-bg: #fff;
  --page-text: #363838;
  --heading-text: #242525;
  --muted-text: #737373;
  --date-text: #737373;
  --credit-text: #595959;
  --page-accent: #f22939;
  --panel-bg: #f7f7f7;
  --page-border: #e5e5e5;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #191919;
  --page-text: #b8b8b8;
  --heading-text: #c4c4c4;
  --muted-text: #999999;
  --date-text: #999999;
  --credit-text: #999999;
  --page-accent: #f44352;
  --panel-bg: #222222;
  --page-border: #3a3a3a;
}

html,
body {
  background-color: var(--page-bg);
  color: var(--page-text);
}

h1,
h2,
h3,
h4,
.project-title {
  color: var(--heading-text);
}

.home-page h1 {
  color: var(--page-text);
}

.accent,
article a,
article h2 {
  color: var(--page-accent);
}

.t svg path,
.logo-internal svg path {
  stroke: var(--page-accent);
}

hr {
  background-color: var(--page-accent);
}

.authors,
.authors a,
.venue,
.publication-venue,
.publinks,
.absbutton {
  color: var(--muted-text);
}

.dated-page .lhs,
.dated-page .fixed-date {
  color: var(--date-text);
}

.home-page .site-credits {
  color: var(--credit-text);
  border-color: var(--page-border);
}

.abstract,
.bibtex {
  background-color: var(--panel-bg);
  color: var(--page-text);
  border-color: var(--page-border);
  border-left-color: var(--page-accent);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--page-accent);
  outline-offset: 3px;
}

:root[data-theme="dark"] .name-initial {
  filter: brightness(0) invert(72%);
}

.theme-toggle {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--page-bg);
  color: var(--muted-text);
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--panel-bg);
  color: var(--page-text);
  border-color: var(--page-border);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--page-accent);
  outline-offset: 3px;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle .theme-sun,
[data-theme="dark"] .theme-toggle .theme-moon {
  display: none;
}

[data-theme="dark"] .theme-toggle .theme-sun {
  display: block;
}

@media (max-width: 1080px) {
  .theme-toggle {
    position: absolute;
    top: 8px;
    right: 12px;
  }
}

@media (max-width: 780px) {
  /* Keep the control above the portrait on small screens. */
  [data-theme] .home-page .logo {
    padding-top: 52px;
  }
}

@media print {
  :root[data-theme] {
    color-scheme: light;
    --page-bg: #fff;
    --page-text: #363838;
    --heading-text: #242525;
    --muted-text: #595959;
    --date-text: #595959;
    --credit-text: #595959;
    --page-accent: #f22939;
    --panel-bg: #f7f7f7;
    --page-border: #e5e5e5;
  }

  .theme-toggle {
    display: none;
  }

  :root[data-theme="dark"] .name-initial {
    filter: none;
  }
}