html[data-theme="walnut"] {
  color-scheme: light;
  --ink: #2b241d; --paper: #f4eee3; --panel: #faf6ee; --field: #fff; --line: #e4d3be; --muted: #7a6a5c;
  --light: #efdab6; --dark: #a06a42; --last: #d7c56a; --select: #e6d27a; --mark: rgba(43, 36, 29, 0.32);
  --piece-w: #faf6ee; --piece-b: #2b241d; --rim-w: #2b241d; --rim-b: #2b241d;
  --accent: #8c5a36; --on-accent: #faf6ee;
}
html[data-theme="pine"] {
  color-scheme: light;
  --ink: #232a1e; --paper: #e9eee3; --panel: #f8f9f4; --field: #fff; --line: #d3ddc8; --muted: #66725d;
  --light: #eef0d6; --dark: #6c8a4f; --last: #e4e07a; --select: #d5de62; --mark: rgba(35, 42, 30, 0.32);
  --piece-w: #f8f9f4; --piece-b: #232a1e; --rim-w: #232a1e; --rim-b: #232a1e;
  --accent: #58753f; --on-accent: #f8f9f4;
}
html[data-theme="ink"] {
  color-scheme: light;
  --ink: #111418; --paper: #f6f6f4; --panel: #fff; --field: #fff; --line: #d9dce1; --muted: #66707d;
  --light: #fff; --dark: #66707d; --last: #d5de8a; --select: #e4d27a; --mark: rgba(17, 20, 24, 0.28);
  --piece-w: #fff; --piece-b: #111418; --rim-w: #111418; --rim-b: #111418;
  --accent: #111418; --on-accent: #fff;
}
html[data-theme="night"] {
  color-scheme: dark;
  --ink: #edeff4; --paper: #14161a; --panel: #1c1f26; --field: #23262e; --line: #343844; --muted: #a7adba;
  --light: #828a99; --dark: #3e4450; --last: #8d7a48; --select: #c6a15b; --mark: rgba(237, 239, 244, 0.4);
  --piece-w: #edeff4; --piece-b: #0d0f13; --rim-w: #0d0f13; --rim-b: #edeff4;
  --accent: #c6a15b; --on-accent: #14161a;
}
.themes { display: flex; }
.swatch {
  width: 44px; height: 44px; padding: 13px; border: 0; border-radius: 50%;
  background-clip: content-box; background-origin: content-box;
}
.swatch[data-pick="walnut"] { background-image: linear-gradient(135deg, #efdab6 50%, #a06a42 50%); }
.swatch[data-pick="night"] { background-image: linear-gradient(135deg, #828a99 50%, #3e4450 50%); }
.swatch[data-pick="pine"] { background-image: linear-gradient(135deg, #eef0d6 50%, #6c8a4f 50%); }
.swatch[data-pick="ink"] { background-image: linear-gradient(135deg, #fff 50%, #66707d 50%); }
.swatch.on { outline: 2px solid var(--accent); outline-offset: -6px; }