:root {
  --green: #00C805;
  --jade: #00C805;
  --ink: #0b0f0c;
  --paper: #f4f1e8;
  --surface: #fbfaf4;
  --sunken: #ece7d8;
  --muted: #5c675e;
  --line: #d5d2c4;
  --on-green: #041106;
  --loss: #FF5000;
  --gold: #c2a35a;
  --cinnabar: #9a2b1f;
  --display: "Noto Serif SC", "Songti SC", "Newsreader", Georgia, serif;
  --sans: "Noto Sans SC", "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #070908;
  --surface: #101511;
  --sunken: #161c18;
  --ink: #e8eee6;
  --muted: #9aa894;
  --line: #2a332c;
  --on-green: #041106;
  --green: #00C805;
  --jade: #00C805;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--green); }
button { cursor: pointer; }

.file-hint {
  display: none;
  margin: 0;
  padding: 14px 20px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
}
html[data-protocol="file"] .file-hint { display: block; }

.lattice {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.35;
}