:root {
  color-scheme: light;
  --forest-950: #14180f;
  --forest: #1e2618;
  --sage: #b8d4a4;
  --sage-bright: #d2e6c2;
  --sage-dim: #8fb07c;
  --paper: #faf9f4;
  --card: #ffffff;
  --grey: #71716a;
  --amber: #a8741d;
  --bg: var(--paper);
  --panel: #ffffff;
  --panel-soft: #f2f3ed;
  --ink: #1b2015;
  --ink-soft: #71716a;
  --ink-faint: #93958e;
  --line: #d8dad3;
  --line-soft: #ecece6;
  --accent: var(--forest);
  --accent-strong: var(--forest-950);
  --accent-soft: #e7efe1;
  --group-fill: var(--forest);
  --group-ink: var(--sage);
  --c-anim: #252a22;
  --c-geo: #596057;
  --c-tex: #858b82;
  --c-skin: #b8d4a4;
  --c-other: #cfd1cb;
  --c-unacc: #ecece6;
  --shadow: none;
  --mono: "JetBrains Mono", monospace;
  --sans: "Space Grotesk", system-ui, sans-serif;
  --radius: 0;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--forest-950);
  --panel: #1e2618;
  --panel-soft: #192014;
  --ink: var(--sage-bright);
  --ink-soft: var(--sage);
  --ink-faint: var(--sage-dim);
  --line: #46543d;
  --line-soft: #303b29;
  --accent: var(--sage);
  --accent-strong: var(--sage-bright);
  --accent-soft: #34432c;
  --group-fill: var(--sage);
  --group-ink: var(--forest);
  --c-anim: #d2e6c2;
  --c-geo: #b1b7ad;
  --c-tex: #878e83;
  --c-skin: #718565;
  --c-other: #4b5148;
  --c-unacc: #30362d;
  --shadow: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--forest-950);
    --panel: #1e2618;
    --panel-soft: #192014;
    --ink: var(--sage-bright);
    --ink-soft: var(--sage);
    --ink-faint: var(--sage-dim);
    --line: #46543d;
    --line-soft: #303b29;
    --accent: var(--sage);
    --accent-strong: var(--sage-bright);
    --accent-soft: #34432c;
    --group-fill: var(--sage);
    --group-ink: var(--forest);
    --c-anim: #d2e6c2;
    --c-geo: #b1b7ad;
    --c-tex: #878e83;
    --c-skin: #718565;
    --c-other: #4b5148;
    --c-unacc: #30362d;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button {
  color: inherit;
  transition: color .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease, fill .14s ease, stroke .14s ease;
}
button svg, button svg * { transition: fill .14s ease, stroke .14s ease; }
details > summary { transition: color .14s ease, background-color .14s ease, border-color .14s ease; }
code { font-family: var(--mono); font-size: .92em; }