:root {
  color-scheme: light;
  --paper: #f5f6f2;
  --surface: #ffffff;
  --soft: #e8efe9;
  --ink: #183c3c;
  --muted: #49635d;
  --green: #146b57;
  --link: #116353;
  --line: #b4c7bd;
  --selected: #d4e9de;
  --code: #e6ebe8;
  --notice: #fff1d7;
  --notice-border: #967125;
  --error: #9c3325;
  --focus: #225bbb;
  --button-ink: #ffffff;
  --button-hover: #0c5747;
  --header: #173e38;
  --header-ink: #ffffff;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121b22;
  --surface: #1e2c33;
  --soft: #26383e;
  --ink: #e6eee9;
  --muted: #b6c8c0;
  --green: #a0e4ca;
  --link: #a0e4ca;
  --line: #53685e;
  --selected: #2e4b42;
  --code: #25343c;
  --notice: #3e3522;
  --notice-border: #dbb967;
  --error: #ffb4a6;
  --focus: #f2ca78;
  --button-ink: #123a2b;
  --button-hover: #b9f2dc;
  --header: #18282d;
  --header-ink: #e6eee9;
}
/* With JavaScript unavailable, follow the device and leave the selector disabled. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --paper:#121b22;--surface:#1e2c33;--soft:#26383e;--ink:#e6eee9;
    --muted:#b6c8c0;--green:#a0e4ca;--link:#a0e4ca;--line:#53685e;
    --selected:#2e4b42;--code:#25343c;--notice:#3e3522;--notice-border:#dbb967;
    --error:#ffb4a6;--focus:#f2ca78;--button-ink:#123a2b;
    --button-hover:#b9f2dc;--header:#18282d;--header-ink:#e6eee9;
  }
}
.appearance { display:flex; align-items:center; gap:8px; font-size:14px; margin:0; }
.appearance select { min-height:44px; font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--surface); }
:where(a,button,input,select,summary,textarea):focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
::selection { background:var(--selected); color:var(--ink); }
@media print {
  :root, :root[data-theme="dark"] { color-scheme:light;--paper:#fff;--surface:#fff;--soft:#eee;--ink:#111;--muted:#333;--green:#145b48;--link:#145b48;--line:#888;--selected:#eee;--code:#eee;--notice:#eee;--error:#81271c;--button-ink:#fff;--header:#fff;--header-ink:#111; }
  .appearance { display:none; }
}