/* Sun-study palette: warm light, slate shadow, concrete ground. */
:root {
  --page: #e4e6e2; --ink: #1b2024; --muted: #5c666c; --rule: #c7ccc8;
  --lit: #fff8ea; --shadow: #4f5a62; --partial: #a3aaad; --grass: #c6d2bf; --dirt: #d8c8ae; --sun: #f0a516;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #191d20; --ink: #eef0ec; --muted: #9aa3a7; --rule: #2e3438;
    --lit: #f3e6c6; --shadow: #3a444b; --partial: #8a8f8c; --grass: #26302a; --dirt: #3a352c; --sun: #f5b43a;
  }
}
:root[data-theme="dark"] {
  --page: #191d20; --ink: #eef0ec; --muted: #9aa3a7; --rule: #2e3438;
  --lit: #f3e6c6; --shadow: #3a444b; --partial: #8a8f8c; --grass: #26302a; --dirt: #3a352c; --sun: #f5b43a;
}
* { box-sizing: border-box; }
html { background: var(--page); }
body { margin: 0; color: var(--ink); background: var(--page); font: 17px/1.5 Archivo, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
canvas { display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.wordmark { font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; font-size: 20px; }
.muted { color: var(--muted); }
.field { border: 0; border-bottom: 2px solid var(--ink); background: transparent; padding: 8px 2px; }
.field::placeholder { color: var(--muted); }
select.field { padding-right: 4px; cursor: pointer; }
.go { border: 0; background: var(--ink); color: var(--page); padding: 9px 16px; font-weight: 700; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }