@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #121213;
    --text: #f8f8f8;
    --border: #3a3a3c;
    --empty-border: #565758;
    --key: #818384;
    --key-text: #f8f8f8;
    --correct: #538d4e;
    --present: #b59f3b;
    --absent: #3a3a3c;
    --muted: #b7b7b8;
    --message-bg: #f8f8f8;
    --message-text: #121213;
    --previous-link: #f8f8f8;
    --select-bg: #1f1f20;
    --select-border: #3a3a3c;
  }
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --text: #1a1a1b;
  --border: #d3d6da;
  --empty-border: #878a8c;
  --key: #d3d6da;
  --key-text: #1a1a1b;
  --correct: #6aaa64;
  --present: #c9b458;
  --absent: #787c7e;
  --muted: #565758;
  --message-bg: #1a1a1b;
  --message-text: #ffffff;
  --previous-link: #1a1a1b;
  --select-bg: #ffffff;
  --select-border: #d3d6da;
}

:root[data-theme="dark"] {
  --bg: #121213;
  --text: #f8f8f8;
  --border: #3a3a3c;
  --empty-border: #565758;
  --key: #818384;
  --key-text: #f8f8f8;
  --correct: #538d4e;
  --present: #b59f3b;
  --absent: #3a3a3c;
  --muted: #b7b7b8;
  --message-bg: #f8f8f8;
  --message-text: #121213;
  --previous-link: #f8f8f8;
  --select-bg: #1f1f20;
  --select-border: #3a3a3c;
}

:root[data-theme="matrix"] {
  --bg: #020802;
  --text: #d8ffd8;
  --border: #0f5f24;
  --empty-border: #1c9a3d;
  --key: #041f0b;
  --key-text: #70ff70;
  --correct: #00c853;
  --present: #00a336;
  --absent: #063012;
  --muted: #55cc66;
  --message-bg: #70ff70;
  --message-text: #020802;
  --previous-link: #70ff70;
  --select-bg: #041f0b;
  --select-border: #1c9a3d;
}

:root[data-theme="matrix"] body {
  text-shadow: 0 0 5px rgba(112, 255, 112, 0.38);
}

:root[data-theme="matrix"] .tile,
:root[data-theme="matrix"] button.key,
:root[data-theme="matrix"] #theme-select {
  box-shadow: 0 0 8px rgba(0, 200, 83, 0.24);
}

:root[data-theme="sakura"] {
  --bg: #f3e1df;
  --text: #3a2522;
  --border: #ddb2ac;
  --empty-border: #b86f68;
  --key: #e6c0bb;
  --key-text: #3a2522;
  --correct: #c85f75;
  --present: #e09a9a;
  --absent: #8f716d;
  --muted: #805c57;
  --message-bg: #3a2522;
  --message-text: #fbefed;
  --previous-link: #9c444e;
  --select-bg: #ecd0cc;
  --select-border: #cf938b;
}

:root[data-theme="sakura"] header {
  background: #ecd0cc;
}

:root[data-theme="sakura"] .tile.filled {
  background: #fbefed;
}

:root[data-theme="futaba"] {
  --bg: #eef2ff;
  --text: #000000;
  --border: #b7c5d9;
  --empty-border: #7890b0;
  --key: #d6daf0;
  --key-text: #000000;
  --correct: #34345c;
  --present: #7890b0;
  --absent: #707070;
  --muted: #34345c;
  --message-bg: #34345c;
  --message-text: #ffffff;
  --previous-link: #34345c;
  --select-bg: #d6daf0;
  --select-border: #b7c5d9;
}

:root[data-theme="futaba"] header {
  background: #d6daf0;
}

:root[data-theme="futaba"] .tile.filled {
  background: #f7f8ff;
}

:root[data-theme="yotsuba"] {
  --bg: #ffffee;
  --text: #800000;
  --border: #d9bfb7;
  --empty-border: #b07a70;
  --key: #f0e0d6;
  --key-text: #800000;
  --correct: #800000;
  --present: #d47f2f;
  --absent: #7b6d65;
  --muted: #b35b43;
  --message-bg: #800000;
  --message-text: #ffffee;
  --previous-link: #0000ee;
  --select-bg: #f0e0d6;
  --select-border: #d9bfb7;
}

:root[data-theme="yotsuba"] header {
  background: #f0e0d6;
}

:root[data-theme="yotsuba"] .tile.filled {
  background: #fff8e8;
}

:root[data-theme="dark-blue"] {
  --bg: #071525;
  --text: #e8f2ff;
  --border: #25415f;
  --empty-border: #4d78a1;
  --key: #18324d;
  --key-text: #e8f2ff;
  --correct: #2f80c2;
  --present: #5f71c8;
  --absent: #32465c;
  --muted: #9db7d1;
  --message-bg: #e8f2ff;
  --message-text: #071525;
  --previous-link: #9dcbff;
  --select-bg: #102840;
  --select-border: #25415f;
}

:root[data-theme="dark-blue"] header {
  background: #0b1d31;
}

:root[data-theme="dark-blue"] .tile.filled {
  background: #0d2238;
}

:root[data-theme="win2k"] {
  --bg: #3a6ea5;
  --text: #000000;
  --border: #808080;
  --empty-border: #404040;
  --key: #c0c0c0;
  --key-text: #000000;
  --correct: #008000;
  --present: #000080;
  --absent: #808080;
  --muted: #000080;
  --message-bg: #000080;
  --message-text: #ffffff;
  --previous-link: #000080;
  --select-bg: #ffffff;
  --select-border: #808080;
}

:root[data-theme="win2k"] header,
:root[data-theme="win2k"] main {
  background: #c0c0c0;
}

:root[data-theme="win2k"] header {
  border-bottom-color: #404040;
  box-shadow: inset 0 1px #ffffff, inset 0 -1px #808080;
}

:root[data-theme="win2k"] h1 {
  color: #ffffff;
  background: #000080;
  padding: 3px 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
}

:root[data-theme="win2k"] .tile,
:root[data-theme="win2k"] button.key,
:root[data-theme="win2k"] #theme-select {
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  border-radius: 0;
}

:root[data-theme="win2k"] .tile.filled {
  background: #ffffff;
}

:root[data-theme="game-boy"] {
  --bg: #9bbc0f;
  --text: #0f380f;
  --border: #306230;
  --empty-border: #0f380f;
  --key: #8bac0f;
  --key-text: #0f380f;
  --correct: #0f380f;
  --present: #306230;
  --absent: #6b8e23;
  --muted: #306230;
  --message-bg: #0f380f;
  --message-text: #9bbc0f;
  --previous-link: #0f380f;
  --select-bg: #8bac0f;
  --select-border: #306230;
}

:root[data-theme="game-boy"] body {
  font-family: "Courier New", monospace;
}

:root[data-theme="game-boy"] header {
  background: #8bac0f;
  border-bottom: 4px solid #0f380f;
}

:root[data-theme="game-boy"] h1 {
  font-family: "Courier New", monospace;
  font-size: 30px;
}

:root[data-theme="game-boy"] .tile,
:root[data-theme="game-boy"] button.key,
:root[data-theme="game-boy"] #theme-select {
  border-radius: 0;
  border-width: 3px;
}

:root[data-theme="game-boy"] .tile.filled {
  background: #adc925;
}

:root[data-theme="mac-os-9"] {
  --bg: #d8d8d8;
  --text: #000000;
  --border: #777777;
  --empty-border: #444444;
  --key: #dddddd;
  --key-text: #000000;
  --correct: #3366cc;
  --present: #6699cc;
  --absent: #888888;
  --muted: #333333;
  --message-bg: #000000;
  --message-text: #ffffff;
  --previous-link: #0000cc;
  --select-bg: #ffffff;
  --select-border: #777777;
}

:root[data-theme="mac-os-9"] body {
  background:
    repeating-linear-gradient(
      0deg,
      #d8d8d8 0,
      #d8d8d8 2px,
      #cfcfcf 2px,
      #cfcfcf 4px
    );
  font-family: Geneva, Arial, Helvetica, sans-serif;
}

:root[data-theme="mac-os-9"] header {
  background:
    repeating-linear-gradient(
      0deg,
      #efefef 0,
      #efefef 2px,
      #d0d0d0 2px,
      #d0d0d0 4px
    );
  border-bottom: 2px solid #777777;
}

:root[data-theme="mac-os-9"] h1 {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 28px;
}

:root[data-theme="mac-os-9"] .tile,
:root[data-theme="mac-os-9"] button.key,
:root[data-theme="mac-os-9"] #theme-select {
  border: 2px solid;
  border-color: #ffffff #777777 #777777 #ffffff;
  border-radius: 3px;
}

:root[data-theme="mac-os-9"] .tile.filled {
  background: #eeeeee;
}

:root[data-theme="terminal"] {
  --bg: #050505;
  --text: #ffb000;
  --border: #5f4300;
  --empty-border: #ffb000;
  --key: #1a1200;
  --key-text: #ffb000;
  --correct: #00d75f;
  --present: #ffb000;
  --absent: #4a4a4a;
  --muted: #bf8500;
  --message-bg: #ffb000;
  --message-text: #050505;
  --previous-link: #ffb000;
  --select-bg: #1a1200;
  --select-border: #5f4300;
}

:root[data-theme="terminal"] body {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 176, 0, 0.08) 0,
      rgba(255, 176, 0, 0.08) 1px,
      transparent 1px,
      transparent 4px
    ),
    #050505;
  font-family: "Courier New", monospace;
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.35);
}

:root[data-theme="terminal"] h1,
:root[data-theme="terminal"] button.key,
:root[data-theme="terminal"] #theme-select {
  font-family: "Courier New", monospace;
}

:root[data-theme="terminal"] header {
  background: #0c0c0c;
}

:root[data-theme="terminal"] .tile,
:root[data-theme="terminal"] button.key,
:root[data-theme="terminal"] #theme-select {
  border-radius: 0;
}

:root[data-theme="terminal"] .tile.filled {
  background: #120d00;
}

:root[data-theme="newspaper"] {
  --bg: #f4eedf;
  --text: #171412;
  --border: #4b433a;
  --empty-border: #171412;
  --key: #e4dccb;
  --key-text: #171412;
  --correct: #171412;
  --present: #5e5348;
  --absent: #9a9186;
  --muted: #5e5348;
  --message-bg: #171412;
  --message-text: #f4eedf;
  --previous-link: #171412;
  --select-bg: #f4eedf;
  --select-border: #4b433a;
}

:root[data-theme="newspaper"] body {
  background:
    linear-gradient(rgba(23, 20, 18, 0.03), rgba(23, 20, 18, 0.03)),
    #f4eedf;
  font-family: Georgia, "Times New Roman", serif;
}

:root[data-theme="newspaper"] header {
  border-bottom: 3px double #171412;
}

:root[data-theme="newspaper"] h1 {
  font-size: 36px;
  font-variant: small-caps;
}

:root[data-theme="newspaper"] .tile,
:root[data-theme="newspaper"] button.key,
:root[data-theme="newspaper"] #theme-select {
  border-radius: 0;
}

:root[data-theme="newspaper"] .tile {
  border-style: double;
}

:root[data-theme="newspaper"] .tile.filled {
  background: #fbf7ec;
}