/* Light and dark for the demo pages, in the colours of the HaTeX project
   page. The rendered documents follow through HaTeX's data-theme, which
   theme.js sets on <html>. */
:root {
  color-scheme: light;
  --bg: #fff;
  --fg: #111;
  --ink: #000;
  --soft: #f6f6f6;
  --line: #ddd;
  --grey: #555;
  --paper: #fbf8f1;   /* the leaves of vertical text */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-color="light"]) {
    color-scheme: dark;
    --bg: #191817; --fg: #e8e6e3; --ink: #eee; --soft: #242220; --line: #3a3835; --grey: #a8a39c; --paper: #221f1b;
  }
}
:root[data-color="dark"] {
  color-scheme: dark;
  --bg: #191817; --fg: #e8e6e3; --ink: #eee; --soft: #242220; --line: #3a3835; --grey: #a8a39c; --paper: #221f1b;
}

/* GitHub and theme buttons at the window's top right, as on the HaTeX
   project page: the same icons, sizes and place. */
body { position: relative; }
.corner { position: absolute; top: 1rem; right: 1.25rem; z-index: 5; display: flex; gap: 0.5rem; }
.theme, .gh {
  width: 2.1rem; height: 2.1rem; padding: 0;
  display: grid; place-items: center;
  color: var(--grey); background: transparent;
  border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer; transition: color 0.15s, border-color 0.15s, background-color 0.15s;
  box-sizing: border-box; font: inherit;
}
.theme:hover, .gh:hover { color: var(--fg); border-color: var(--grey); background: var(--soft); }
.theme:focus-visible, .gh:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
a.gh { text-decoration: none; }
.gh svg { width: 1.1rem; height: 1.1rem; display: block; }
.theme svg { width: 1.05rem; height: 1.05rem; display: none; }
.theme[data-mode="light"] .i-light, .theme[data-mode="dark"] .i-dark { display: block; }