html {
  --base-color: #fff;
  --base-color-contrast: #121212;
  --color: #fffa;
  --background: var(--base-color-contrast);
  --underlayer: #202020;
  --emphatic-color: #fffc;
  --focus-color: #64a0fd;
  --focus-color-contrast: var(--base-color-contrast);
  --focus-color-2: #b379f9;
  --focus-color-2-contrast: #fffa;
  --shape-color: #e748fe;
  --shape-color-contrast: #000d;
  --mark-color: #000d;
  --mark-background: #abee69;
  --lq: -0.5; /* HSL lightness correction factor */
}
html[data-color-scheme="light"] {
  --base-color: #000;
  --base-color-contrast: #fff;
  --color: #000d;
  --background: var(--base-color-contrast);
  --underlayer: #eee;
  --emphatic-color: #000d;
  --focus-color: #0f45e5;
  --focus-color-2: #a0019e; /* #cd32cb; #d13efb; */
  --focus-color-2-contrast: #fff;
  --shape-color: #e324e1;
  --shape-color-contrast: #fff;
  --mark-color: #000d;
  --mark-background: #c8ffaa;
  --lq: 1;
}
html {
  --font-size: 14px;
  --font-family: sans-serif;
  --line-height: 1.4;

  --border-width: 0.5px;
  --dashed-border-width: calc(1.25 * var(--border-width));
  --input-border-width: 1px;

  --active-link-color: var(--focus-color);
  --inactive-link-color: var(--focus-color);
  --visited-link-color: var(--focus-color);

  font: normal var(--font-size) / var(--line-height) var(--font-family);
  color: var(--color);
  background: var(--background);
}
body {
  padding: 0;
  margin: 0;
}
a:link,
a:visited,
a:focus,
a:hover,
a:active {
  color: var(--inactive-link-color);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 0.18em;
  transition: color 0.25s;
}
a:visited {
  color: var(--visited-link-color);
}
a:hover {
  color: var(--active-link-color);
}
.unemphatic-links {
  --inactive-link-color: var(--color);
  --visited-link-color: var(--color);
}
p,
ul,
table,
pre {
  margin: 1em 0;
}
input,
button,
select,
table,
svg {
  font: inherit;
  color: inherit;
}
.signature {
  font-size: 0.85rem;
}
.signature .sep {
  margin: 0 0.25em;
}
mark {
  color: var(--mark-color);
  background: var(--mark-background);
}
@media print {
  mark {
    font-weight: bold;
    color: inherit;
    background: transparent;
  }
}
