/* Design tokens, reset and page shell */
/* Light colours. Dark mode (below) swaps the same names, so every stylesheet uses var(--name), never a colour. */
:root{
  color-scheme:light;
  --paper:#eef1f4;--dot:#c2cbd5;--bar:#fbfcfd;--surface:#fff;--subtle:#f5f7f9;
  --ink:#17212b;--ink2:#36444f;--muted:#6a7885;--ph:#a3afbb;--faint:#9aa7b4;--line:#2b3a4a;
  --bd:#cdd6df;--hover:#e6ebf0;
  --accent:#1f5eff;--accent-hover:#174dd6;--sel:#e3ebff;--sel-bd:#bcd0ff;--sel-ink:#1448c8;
  --linked:#f7f9ff;--lbar-bg:#e8eeff;--lbar-fg:#2a4fb8;--lbar-bd:#b7c9f7;
  --warn-bg:#fff1c9;--warn-fg:#8a5a00;--unset-bg:#fff6d6;--unset-bd:#dcb84d;
  --danger:#d9304f;--err:#a1223a;
  --shadow:rgba(23,33,43,.22);--backdrop:rgba(23,33,43,.35);
}
/* Dark mode: set on <html> by js/mode.js (Settings → Appearance → Mode) */
:root[data-mode=dark]{
  color-scheme:dark;
  --paper:#12181f;--dot:#2d3844;--bar:#1a222b;--surface:#222c36;--subtle:#1e2730;
  --ink:#e4e9ee;--ink2:#c2cbd4;--muted:#8d9aa6;--ph:#66737f;--faint:#5b6873;--line:#a3b0bd;
  --bd:#33404d;--hover:#2d3945;
  --accent:#5b8cff;--accent-hover:#4a7cf5;--sel:#24345a;--sel-bd:#3b5591;--sel-ink:#a9c1ff;
  --linked:#1f2938;--lbar-bg:#25324c;--lbar-fg:#a9c1ff;--lbar-bd:#3b5591;
  --warn-bg:#3a3018;--warn-fg:#f0c463;--unset-bg:#3a3218;--unset-bd:#7a6224;
  --danger:#ff6b83;--err:#ff8a9b;
  --shadow:rgba(0,0,0,.5);--backdrop:rgba(0,0,0,.55);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{display:flex;flex-direction:column;font:14px/1.4 "Avenir Next","Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--paper)}
button{font:inherit;color:inherit;cursor:pointer}