/* Swoop themes (Cooper 10/10; colours only since 11/09). GENERATED by scripts/build-themes.mjs from js/skins.js: edit
   those, not this. An achievement or a code unlocks one; Settings > Theme picks it: html[data-skin], set before the
   first paint by index.html. Each theme sets every colour token in both modes (nothing leaks from dark into light).
   js/themes.js draws Fall's and Winter's pixel sprites and places them. */

/* Summer: Teal water, coral and a sandy page */
:root[data-skin='summer'] {
  --bg: #0b1f2a;
  --bg2: #11303f;
  --bg3: #194356;
  --text: #f6fbff;
  --muted: #a9c6d4;
  --tile: #fbf0d6;
  --lip: #d0c7b2;
  --panel: #0a6570;
  --panel-lip: #064148;
  --pink: #ff6f8f;
  --pink-lip: #bd526a;
  --pink-ink: #ff9db4;
  --blue: #5b9bf0;
  --blue-lip: #164992;
  --blue-btn: #1f68d0;
  --sun: #ffd23f;
  --sun-lip: #cca832;
  --sun-ink: #ffd23f;
  --sel: #ffd9c2;
  --sel-lip: #ccae9b;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #ff9a3d;
  --bloom-b: #2fc6d9;
  --line: rgba(246, 251, 255, 0.09); --line2: rgba(246, 251, 255, 0.18);
  color-scheme: dark;
}
:root[data-skin='summer'][data-theme='light'] {
  --bg: #fbf1dc;
  --bg2: #fffaf0;
  --bg3: #f1e1c0;
  --text: #10262f;
  --muted: #4d5f63;
  --tile: #fbf0d6;
  --lip: #d0c7b2;
  --panel: #0a6570;
  --panel-lip: #064148;
  --pink: #ff6f8f;
  --pink-lip: #bd526a;
  --pink-ink: #b3173f;
  --blue: #1f68d0;
  --blue-lip: #164992;
  --blue-btn: #1f68d0;
  --sun: #ffd23f;
  --sun-lip: #cca832;
  --sun-ink: #7a5200;
  --sel: #ffd9c2;
  --sel-lip: #ccae9b;
  --shadow: rgba(16, 38, 47, 0.17);
  --bloom-a: #ff9a3d;
  --bloom-b: #2fc6d9;
  --line: rgba(16, 38, 47, 0.1); --line2: rgba(16, 38, 47, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='summer']:not([data-theme='dark']) {
    --bg: #fbf1dc;
    --bg2: #fffaf0;
    --bg3: #f1e1c0;
    --text: #10262f;
    --muted: #4d5f63;
    --tile: #fbf0d6;
    --lip: #d0c7b2;
    --panel: #0a6570;
    --panel-lip: #064148;
    --pink: #ff6f8f;
    --pink-lip: #bd526a;
    --pink-ink: #b3173f;
    --blue: #1f68d0;
    --blue-lip: #164992;
    --blue-btn: #1f68d0;
    --sun: #ffd23f;
    --sun-lip: #cca832;
    --sun-ink: #7a5200;
    --sel: #ffd9c2;
    --sel-lip: #ccae9b;
    --shadow: rgba(16, 38, 47, 0.17);
    --bloom-a: #ff9a3d;
    --bloom-b: #2fc6d9;
    --line: rgba(16, 38, 47, 0.1); --line2: rgba(16, 38, 47, 0.2);
    color-scheme: light;
  }
}

/* Fall: Maple leaves on a rust board */
:root[data-skin='fall'] {
  --bg: #1a1310;
  --bg2: #251b16;
  --bg3: #32251d;
  --text: #f8ecdc;
  --muted: #bba893;
  --tile: #fbefd9;
  --lip: #d8b985;
  --panel: #9e4419;
  --panel-lip: #6b2c0f;
  --pink: #f45d7a;
  --pink-lip: #b83a52;
  --pink-ink: #ff8399;
  --blue: #5378e0;
  --blue-lip: #3550a8;
  --blue-btn: #3e60c4;
  --sun: #f5b02e;
  --sun-lip: #c4800a;
  --sun-ink: #f5b02e;
  --sel: #ffd8ae;
  --sel-lip: #e6a560;
  --shadow: rgba(0, 0, 0, 0.4);
  --bloom-a: #f28b30;
  --bloom-b: #d4462a;
  --line: rgba(248, 236, 220, 0.09); --line2: rgba(248, 236, 220, 0.18);
  color-scheme: dark;
}
:root[data-skin='fall'][data-theme='light'] {
  --bg: #f6e9d6;
  --bg2: #fdf6ea;
  --bg3: #eedcc2;
  --text: #22160f;
  --muted: #625242;
  --tile: #fffaf0;
  --lip: #ddc08f;
  --panel: #9e4419;
  --panel-lip: #6b2c0f;
  --pink: #e8456c;
  --pink-lip: #ad2c4b;
  --pink-ink: #a8173f;
  --blue: #3a5fc8;
  --blue-lip: #284594;
  --blue-btn: #3a5fc8;
  --sun: #f2ad25;
  --sun-lip: #bf7e00;
  --sun-ink: #7a4f00;
  --sel: #ffd6a8;
  --sel-lip: #e39f55;
  --shadow: rgba(70, 35, 10, 0.2);
  --bloom-a: #e8762a;
  --bloom-b: #c2402a;
  --line: rgba(34, 22, 15, 0.1); --line2: rgba(34, 22, 15, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='fall']:not([data-theme='dark']) {
    --bg: #f6e9d6;
    --bg2: #fdf6ea;
    --bg3: #eedcc2;
    --text: #22160f;
    --muted: #625242;
    --tile: #fffaf0;
    --lip: #ddc08f;
    --panel: #9e4419;
    --panel-lip: #6b2c0f;
    --pink: #e8456c;
    --pink-lip: #ad2c4b;
    --pink-ink: #a8173f;
    --blue: #3a5fc8;
    --blue-lip: #284594;
    --blue-btn: #3a5fc8;
    --sun: #f2ad25;
    --sun-lip: #bf7e00;
    --sun-ink: #7a4f00;
    --sel: #ffd6a8;
    --sel-lip: #e39f55;
    --shadow: rgba(70, 35, 10, 0.2);
    --bloom-a: #e8762a;
    --bloom-b: #c2402a;
    --line: rgba(34, 22, 15, 0.1); --line2: rgba(34, 22, 15, 0.2);
    color-scheme: light;
  }
}

/* Winter: Snowflakes and an icy board */
:root[data-skin='winter'] {
  --bg: #0c1220;
  --bg2: #141c2f;
  --bg3: #1e2841;
  --text: #eef4ff;
  --muted: #aebbd1;
  --tile: #f3f7ff;
  --lip: #b6c7e2;
  --panel: #25619e;
  --panel-lip: #173f6b;
  --pink: #ff6aa8;
  --pink-lip: #c9417f;
  --pink-ink: #ff9ac6;
  --blue: #6a8cff;
  --blue-lip: #4058c4;
  --blue-btn: #4360df;
  --sun: #ffd866;
  --sun-lip: #d1a92a;
  --sun-ink: #ffd866;
  --sel: #d6e8ff;
  --sel-lip: #a1c0ea;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #8fd3ff;
  --bloom-b: #a98bff;
  --line: rgba(238, 244, 255, 0.09); --line2: rgba(238, 244, 255, 0.18);
  color-scheme: dark;
}
:root[data-skin='winter'][data-theme='light'] {
  --bg: #edf2f9;
  --bg2: #f9fbff;
  --bg3: #e0e8f4;
  --text: #141c30;
  --muted: #4e596f;
  --tile: #ffffff;
  --lip: #c3d2ea;
  --panel: #25619e;
  --panel-lip: #173f6b;
  --pink: #ef3f8e;
  --pink-lip: #b4256a;
  --pink-ink: #b0155f;
  --blue: #3f63e0;
  --blue-lip: #2a47b0;
  --blue-btn: #3f63e0;
  --sun: #ffcf3a;
  --sun-lip: #cc9d00;
  --sun-ink: #6e5200;
  --sel: #d2e6ff;
  --sel-lip: #98bde8;
  --shadow: rgba(20, 40, 80, 0.16);
  --bloom-a: #5aa8e8;
  --bloom-b: #8a6cf0;
  --line: rgba(20, 28, 48, 0.1); --line2: rgba(20, 28, 48, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='winter']:not([data-theme='dark']) {
    --bg: #edf2f9;
    --bg2: #f9fbff;
    --bg3: #e0e8f4;
    --text: #141c30;
    --muted: #4e596f;
    --tile: #ffffff;
    --lip: #c3d2ea;
    --panel: #25619e;
    --panel-lip: #173f6b;
    --pink: #ef3f8e;
    --pink-lip: #b4256a;
    --pink-ink: #b0155f;
    --blue: #3f63e0;
    --blue-lip: #2a47b0;
    --blue-btn: #3f63e0;
    --sun: #ffcf3a;
    --sun-lip: #cc9d00;
    --sun-ink: #6e5200;
    --sel: #d2e6ff;
    --sel-lip: #98bde8;
    --shadow: rgba(20, 40, 80, 0.16);
    --bloom-a: #5aa8e8;
    --bloom-b: #8a6cf0;
    --line: rgba(20, 28, 48, 0.1); --line2: rgba(20, 28, 48, 0.2);
    color-scheme: light;
  }
}

/* Spring: Lilac, blossom pink and fresh green */
:root[data-skin='spring'] {
  --bg: #17131f;
  --bg2: #211b2d;
  --bg3: #2e2640;
  --text: #f7f2ff;
  --muted: #b6aacb;
  --tile: #fffaf0;
  --lip: #d4d0c7;
  --panel: #6541bd;
  --panel-lip: #412a79;
  --pink: #ff7ab0;
  --pink-lip: #bd5a82;
  --pink-ink: #ff9cc8;
  --blue: #7f9aff;
  --blue-lip: #29429d;
  --blue-btn: #3a5ee0;
  --sun: #ffd84a;
  --sun-lip: #ccad3b;
  --sun-ink: #ffd84a;
  --sel: #ffd3e6;
  --sel-lip: #cca9b8;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #f06aa8;
  --bloom-b: #3faa50;
  --line: rgba(247, 242, 255, 0.09); --line2: rgba(247, 242, 255, 0.18);
  color-scheme: dark;
}
:root[data-skin='spring'][data-theme='light'] {
  --bg: #f4f0fa;
  --bg2: #ffffff;
  --bg3: #e6dcf5;
  --text: #2a1e3a;
  --muted: #5a4a6a;
  --tile: #fffaf0;
  --lip: #d4d0c7;
  --panel: #6541bd;
  --panel-lip: #412a79;
  --pink: #ff7ab0;
  --pink-lip: #bd5a82;
  --pink-ink: #b0185e;
  --blue: #3a5ee0;
  --blue-lip: #29429d;
  --blue-btn: #3a5ee0;
  --sun: #ffd84a;
  --sun-lip: #ccad3b;
  --sun-ink: #6b5500;
  --sel: #ffd3e6;
  --sel-lip: #cca9b8;
  --shadow: rgba(42, 30, 58, 0.17);
  --bloom-a: #f06aa8;
  --bloom-b: #3faa50;
  --line: rgba(42, 30, 58, 0.1); --line2: rgba(42, 30, 58, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='spring']:not([data-theme='dark']) {
    --bg: #f4f0fa;
    --bg2: #ffffff;
    --bg3: #e6dcf5;
    --text: #2a1e3a;
    --muted: #5a4a6a;
    --tile: #fffaf0;
    --lip: #d4d0c7;
    --panel: #6541bd;
    --panel-lip: #412a79;
    --pink: #ff7ab0;
    --pink-lip: #bd5a82;
    --pink-ink: #b0185e;
    --blue: #3a5ee0;
    --blue-lip: #29429d;
    --blue-btn: #3a5ee0;
    --sun: #ffd84a;
    --sun-lip: #ccad3b;
    --sun-ink: #6b5500;
    --sel: #ffd3e6;
    --sel-lip: #cca9b8;
    --shadow: rgba(42, 30, 58, 0.17);
    --bloom-a: #f06aa8;
    --bloom-b: #3faa50;
    --line: rgba(42, 30, 58, 0.1); --line2: rgba(42, 30, 58, 0.2);
    color-scheme: light;
  }
}

/* Arcade: Neon pink and cabinet indigo */
:root[data-skin='arcade'] {
  --bg: #0a0718;
  --bg2: #140f30;
  --bg3: #231c4a;
  --text: #ffffff;
  --muted: #b4aee0;
  --tile: #f4f4f8;
  --lip: #cbcbce;
  --panel: #2a1f6e;
  --panel-lip: #1b1446;
  --pink: #ff4fb4;
  --pink-lip: #bd3a85;
  --pink-ink: #ff7ac8;
  --blue: #6f8cff;
  --blue-lip: #243ba2;
  --blue-btn: #3355e8;
  --sun: #ffe23f;
  --sun-lip: #ccb532;
  --sun-ink: #ffe23f;
  --sel: #ffd7ea;
  --sel-lip: #ccacbb;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #ff3fb0;
  --bloom-b: #3ff0ff;
  --line: rgba(255, 255, 255, 0.09); --line2: rgba(255, 255, 255, 0.18);
  color-scheme: dark;
}
:root[data-skin='arcade'][data-theme='light'] {
  --bg: #efedfb;
  --bg2: #fbfaff;
  --bg3: #ddd9f4;
  --text: #150f33;
  --muted: #514a7a;
  --tile: #f4f4f8;
  --lip: #cbcbce;
  --panel: #2a1f6e;
  --panel-lip: #1b1446;
  --pink: #ff4fb4;
  --pink-lip: #bd3a85;
  --pink-ink: #b3157a;
  --blue: #3355e8;
  --blue-lip: #243ba2;
  --blue-btn: #3355e8;
  --sun: #ffe23f;
  --sun-lip: #ccb532;
  --sun-ink: #6b5600;
  --sel: #ffd7ea;
  --sel-lip: #ccacbb;
  --shadow: rgba(21, 15, 51, 0.17);
  --bloom-a: #ff3fb0;
  --bloom-b: #3f6aff;
  --line: rgba(21, 15, 51, 0.1); --line2: rgba(21, 15, 51, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='arcade']:not([data-theme='dark']) {
    --bg: #efedfb;
    --bg2: #fbfaff;
    --bg3: #ddd9f4;
    --text: #150f33;
    --muted: #514a7a;
    --tile: #f4f4f8;
    --lip: #cbcbce;
    --panel: #2a1f6e;
    --panel-lip: #1b1446;
    --pink: #ff4fb4;
    --pink-lip: #bd3a85;
    --pink-ink: #b3157a;
    --blue: #3355e8;
    --blue-lip: #243ba2;
    --blue-btn: #3355e8;
    --sun: #ffe23f;
    --sun-lip: #ccb532;
    --sun-ink: #6b5600;
    --sel: #ffd7ea;
    --sel-lip: #ccacbb;
    --shadow: rgba(21, 15, 51, 0.17);
    --bloom-a: #ff3fb0;
    --bloom-b: #3f6aff;
    --line: rgba(21, 15, 51, 0.1); --line2: rgba(21, 15, 51, 0.2);
    color-scheme: light;
  }
}

/* Deep Reef: Deep-sea teal with a coral pop */
:root[data-skin='reef'] {
  --bg: #071a33;
  --bg2: #0c2848;
  --bg3: #143a62;
  --text: #f4fbff;
  --muted: #a8c8de;
  --tile: #f7ecd2;
  --lip: #cdc4ae;
  --panel: #0c5666;
  --panel-lip: #083741;
  --pink: #ff7f9f;
  --pink-lip: #bd5e76;
  --pink-ink: #ff9ab8;
  --blue: #5fa3f5;
  --blue-lip: #164a92;
  --blue-btn: #1f6ad0;
  --sun: #ffd23f;
  --sun-lip: #cca832;
  --sun-ink: #ffd23f;
  --sel: #ffd9e6;
  --sel-lip: #ccaeb8;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #ff6f9a;
  --bloom-b: #4ec0ea;
  --line: rgba(244, 251, 255, 0.09); --line2: rgba(244, 251, 255, 0.18);
  color-scheme: dark;
}
:root[data-skin='reef'][data-theme='light'] {
  --bg: #e7f5fa;
  --bg2: #f8fdff;
  --bg3: #cfe8f1;
  --text: #082338;
  --muted: #43606f;
  --tile: #f7ecd2;
  --lip: #cdc4ae;
  --panel: #0c5666;
  --panel-lip: #083741;
  --pink: #ff7f9f;
  --pink-lip: #bd5e76;
  --pink-ink: #ad1d4d;
  --blue: #1f6ad0;
  --blue-lip: #164a92;
  --blue-btn: #1f6ad0;
  --sun: #ffd23f;
  --sun-lip: #cca832;
  --sun-ink: #735200;
  --sel: #ffd9e6;
  --sel-lip: #ccaeb8;
  --shadow: rgba(8, 35, 56, 0.17);
  --bloom-a: #ff6f9a;
  --bloom-b: #4ec0ea;
  --line: rgba(8, 35, 56, 0.1); --line2: rgba(8, 35, 56, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='reef']:not([data-theme='dark']) {
    --bg: #e7f5fa;
    --bg2: #f8fdff;
    --bg3: #cfe8f1;
    --text: #082338;
    --muted: #43606f;
    --tile: #f7ecd2;
    --lip: #cdc4ae;
    --panel: #0c5666;
    --panel-lip: #083741;
    --pink: #ff7f9f;
    --pink-lip: #bd5e76;
    --pink-ink: #ad1d4d;
    --blue: #1f6ad0;
    --blue-lip: #164a92;
    --blue-btn: #1f6ad0;
    --sun: #ffd23f;
    --sun-lip: #cca832;
    --sun-ink: #735200;
    --sel: #ffd9e6;
    --sel-lip: #ccaeb8;
    --shadow: rgba(8, 35, 56, 0.17);
    --bloom-a: #ff6f9a;
    --bloom-b: #4ec0ea;
    --line: rgba(8, 35, 56, 0.1); --line2: rgba(8, 35, 56, 0.2);
    color-scheme: light;
  }
}

/* Orbit: Starlight on a deep-space board */
:root[data-skin='orbit'] {
  --bg: #07051a;
  --bg2: #10122a;
  --bg3: #1c2046;
  --text: #ffffff;
  --muted: #aab3d0;
  --tile: #eef2fa;
  --lip: #c6c9d0;
  --panel: #262d4a;
  --panel-lip: #181d2f;
  --pink: #ff5fa2;
  --pink-lip: #bd4678;
  --pink-ink: #ff86b8;
  --blue: #7391ff;
  --blue-lip: #243ea8;
  --blue-btn: #3358f0;
  --sun: #ffc93f;
  --sun-lip: #cca132;
  --sun-ink: #ffc93f;
  --sel: #d9e3ff;
  --sel-lip: #aeb6cc;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #8a4ad0;
  --bloom-b: #3b6cff;
  --line: rgba(255, 255, 255, 0.09); --line2: rgba(255, 255, 255, 0.18);
  color-scheme: dark;
}
:root[data-skin='orbit'][data-theme='light'] {
  --bg: #eceef7;
  --bg2: #fafbff;
  --bg3: #d9ddee;
  --text: #0f1230;
  --muted: #4b5273;
  --tile: #eef2fa;
  --lip: #c6c9d0;
  --panel: #262d4a;
  --panel-lip: #181d2f;
  --pink: #ff5fa2;
  --pink-lip: #bd4678;
  --pink-ink: #b3185f;
  --blue: #3358f0;
  --blue-lip: #243ea8;
  --blue-btn: #3358f0;
  --sun: #ffc93f;
  --sun-lip: #cca132;
  --sun-ink: #6f5000;
  --sel: #d9e3ff;
  --sel-lip: #aeb6cc;
  --shadow: rgba(15, 18, 48, 0.17);
  --bloom-a: #8a4ad0;
  --bloom-b: #3b6cff;
  --line: rgba(15, 18, 48, 0.1); --line2: rgba(15, 18, 48, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='orbit']:not([data-theme='dark']) {
    --bg: #eceef7;
    --bg2: #fafbff;
    --bg3: #d9ddee;
    --text: #0f1230;
    --muted: #4b5273;
    --tile: #eef2fa;
    --lip: #c6c9d0;
    --panel: #262d4a;
    --panel-lip: #181d2f;
    --pink: #ff5fa2;
    --pink-lip: #bd4678;
    --pink-ink: #b3185f;
    --blue: #3358f0;
    --blue-lip: #243ea8;
    --blue-btn: #3358f0;
    --sun: #ffc93f;
    --sun-lip: #cca132;
    --sun-ink: #6f5000;
    --sel: #d9e3ff;
    --sel-lip: #aeb6cc;
    --shadow: rgba(15, 18, 48, 0.17);
    --bloom-a: #8a4ad0;
    --bloom-b: #3b6cff;
    --line: rgba(15, 18, 48, 0.1); --line2: rgba(15, 18, 48, 0.2);
    color-scheme: light;
  }
}

/* Dungeon: Torch gold on stone and parchment */
:root[data-skin='dungeon'] {
  --bg: #17141c;
  --bg2: #201c27;
  --bg3: #2e2a38;
  --text: #fff0d0;
  --muted: #c2b39c;
  --tile: #f1e2b8;
  --lip: #c8bc99;
  --panel: #3b3148;
  --panel-lip: #261f2e;
  --pink: #f0648f;
  --pink-lip: #b24a6a;
  --pink-ink: #ff8aa8;
  --blue: #7f95f0;
  --blue-lip: #293e97;
  --blue-btn: #3a58d8;
  --sun: #f2c040;
  --sun-lip: #c29a33;
  --sun-ink: #f2c040;
  --sel: #ffe0b8;
  --sel-lip: #ccb393;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #ff8a1a;
  --bloom-b: #a03a5a;
  --line: rgba(255, 240, 208, 0.09); --line2: rgba(255, 240, 208, 0.18);
  color-scheme: dark;
}
:root[data-skin='dungeon'][data-theme='light'] {
  --bg: #efe6d3;
  --bg2: #faf4e6;
  --bg3: #e0d3b8;
  --text: #241c14;
  --muted: #5c5040;
  --tile: #f1e2b8;
  --lip: #c8bc99;
  --panel: #3b3148;
  --panel-lip: #261f2e;
  --pink: #f0648f;
  --pink-lip: #b24a6a;
  --pink-ink: #a51848;
  --blue: #3a58d8;
  --blue-lip: #293e97;
  --blue-btn: #3a58d8;
  --sun: #f2c040;
  --sun-lip: #c29a33;
  --sun-ink: #6f4d00;
  --sel: #ffe0b8;
  --sel-lip: #ccb393;
  --shadow: rgba(36, 28, 20, 0.17);
  --bloom-a: #ff8a1a;
  --bloom-b: #a03a5a;
  --line: rgba(36, 28, 20, 0.1); --line2: rgba(36, 28, 20, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='dungeon']:not([data-theme='dark']) {
    --bg: #efe6d3;
    --bg2: #faf4e6;
    --bg3: #e0d3b8;
    --text: #241c14;
    --muted: #5c5040;
    --tile: #f1e2b8;
    --lip: #c8bc99;
    --panel: #3b3148;
    --panel-lip: #261f2e;
    --pink: #f0648f;
    --pink-lip: #b24a6a;
    --pink-ink: #a51848;
    --blue: #3a58d8;
    --blue-lip: #293e97;
    --blue-btn: #3a58d8;
    --sun: #f2c040;
    --sun-lip: #c29a33;
    --sun-ink: #6f4d00;
    --sel: #ffe0b8;
    --sel-lip: #ccb393;
    --shadow: rgba(36, 28, 20, 0.17);
    --bloom-a: #ff8a1a;
    --bloom-b: #a03a5a;
    --line: rgba(36, 28, 20, 0.1); --line2: rgba(36, 28, 20, 0.2);
    color-scheme: light;
  }
}

/* Sugar Rush: Candy pink, cream and a blueberry button */
:root[data-skin='sugar'] {
  --bg: #1f1119;
  --bg2: #2b1823;
  --bg3: #3b2231;
  --text: #fff1f6;
  --muted: #d0aebd;
  --tile: #fff6ea;
  --lip: #d4ccc2;
  --panel: #a12a6b;
  --panel-lip: #671b44;
  --pink: #ff6fae;
  --pink-lip: #bd5281;
  --pink-ink: #ff9cc4;
  --blue: #7fa0ff;
  --blue-lip: #29479d;
  --blue-btn: #3a66e0;
  --sun: #ffd84a;
  --sun-lip: #ccad3b;
  --sun-ink: #ffd84a;
  --sel: #ffd7ea;
  --sel-lip: #ccacbb;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #ff5aa0;
  --bloom-b: #5ac8ff;
  --line: rgba(255, 241, 246, 0.09); --line2: rgba(255, 241, 246, 0.18);
  color-scheme: dark;
}
:root[data-skin='sugar'][data-theme='light'] {
  --bg: #ffeef4;
  --bg2: #fffaf5;
  --bg3: #ffdbe8;
  --text: #3d1a22;
  --muted: #74454f;
  --tile: #fff6ea;
  --lip: #d4ccc2;
  --panel: #a12a6b;
  --panel-lip: #671b44;
  --pink: #ff6fae;
  --pink-lip: #bd5281;
  --pink-ink: #b01a5a;
  --blue: #3a66e0;
  --blue-lip: #29479d;
  --blue-btn: #3a66e0;
  --sun: #ffd84a;
  --sun-lip: #ccad3b;
  --sun-ink: #7a5400;
  --sel: #ffd7ea;
  --sel-lip: #ccacbb;
  --shadow: rgba(61, 26, 34, 0.17);
  --bloom-a: #ff5aa0;
  --bloom-b: #5ac8ff;
  --line: rgba(61, 26, 34, 0.1); --line2: rgba(61, 26, 34, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='sugar']:not([data-theme='dark']) {
    --bg: #ffeef4;
    --bg2: #fffaf5;
    --bg3: #ffdbe8;
    --text: #3d1a22;
    --muted: #74454f;
    --tile: #fff6ea;
    --lip: #d4ccc2;
    --panel: #a12a6b;
    --panel-lip: #671b44;
    --pink: #ff6fae;
    --pink-lip: #bd5281;
    --pink-ink: #b01a5a;
    --blue: #3a66e0;
    --blue-lip: #29479d;
    --blue-btn: #3a66e0;
    --sun: #ffd84a;
    --sun-lip: #ccad3b;
    --sun-ink: #7a5400;
    --sel: #ffd7ea;
    --sel-lip: #ccacbb;
    --shadow: rgba(61, 26, 34, 0.17);
    --bloom-a: #ff5aa0;
    --bloom-b: #5ac8ff;
    --line: rgba(61, 26, 34, 0.1); --line2: rgba(61, 26, 34, 0.2);
    color-scheme: light;
  }
}

/* Paper: Ink blue on warm paper */
:root[data-skin='paper'] {
  --bg: #181715;
  --bg2: #22201d;
  --bg3: #2f2c28;
  --text: #f5efe2;
  --muted: #b0a898;
  --tile: #fbf7ee;
  --lip: #d0cdc6;
  --panel: #2f4470;
  --panel-lip: #1e2c48;
  --pink: #f08a9c;
  --pink-lip: #b26673;
  --pink-ink: #f7a3b2;
  --blue: #8fa9e6;
  --blue-lip: #243964;
  --blue-btn: #34518f;
  --sun: #f0c95a;
  --sun-lip: #c0a148;
  --sun-ink: #f0c95a;
  --sel: #dfe7fb;
  --sel-lip: #b2b9c9;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #8a7a5a;
  --bloom-b: #8fa3cf;
  --line: rgba(245, 239, 226, 0.09); --line2: rgba(245, 239, 226, 0.18);
  color-scheme: dark;
}
:root[data-skin='paper'][data-theme='light'] {
  --bg: #f6f1e6;
  --bg2: #fffdf8;
  --bg3: #e9e1d0;
  --text: #22201c;
  --muted: #5c564b;
  --tile: #fbf7ee;
  --lip: #d0cdc6;
  --panel: #2f4470;
  --panel-lip: #1e2c48;
  --pink: #f08a9c;
  --pink-lip: #b26673;
  --pink-ink: #a32342;
  --blue: #34518f;
  --blue-lip: #243964;
  --blue-btn: #34518f;
  --sun: #f0c95a;
  --sun-lip: #c0a148;
  --sun-ink: #6d5200;
  --sel: #dfe7fb;
  --sel-lip: #b2b9c9;
  --shadow: rgba(34, 32, 28, 0.17);
  --bloom-a: #c9b48a;
  --bloom-b: #8fa3cf;
  --line: rgba(34, 32, 28, 0.1); --line2: rgba(34, 32, 28, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='paper']:not([data-theme='dark']) {
    --bg: #f6f1e6;
    --bg2: #fffdf8;
    --bg3: #e9e1d0;
    --text: #22201c;
    --muted: #5c564b;
    --tile: #fbf7ee;
    --lip: #d0cdc6;
    --panel: #2f4470;
    --panel-lip: #1e2c48;
    --pink: #f08a9c;
    --pink-lip: #b26673;
    --pink-ink: #a32342;
    --blue: #34518f;
    --blue-lip: #243964;
    --blue-btn: #34518f;
    --sun: #f0c95a;
    --sun-lip: #c0a148;
    --sun-ink: #6d5200;
    --sel: #dfe7fb;
    --sel-lip: #b2b9c9;
    --shadow: rgba(34, 32, 28, 0.17);
    --bloom-a: #c9b48a;
    --bloom-b: #8fa3cf;
    --line: rgba(34, 32, 28, 0.1); --line2: rgba(34, 32, 28, 0.2);
    color-scheme: light;
  }
}

/* Slate: Cool grey, quiet colour */
:root[data-skin='slate'] {
  --bg: #14171c;
  --bg2: #1c2027;
  --bg3: #282e38;
  --text: #eef2f7;
  --muted: #a3adba;
  --tile: #f3f5f8;
  --lip: #cacbce;
  --panel: #3c4a5c;
  --panel-lip: #262f3b;
  --pink: #f08ca6;
  --pink-lip: #b2687b;
  --pink-ink: #f7a5ba;
  --blue: #8eb0ea;
  --blue-lip: #2c4779;
  --blue-btn: #3f66ad;
  --sun: #ecc766;
  --sun-lip: #bd9f52;
  --sun-ink: #ecc766;
  --sel: #d6e4f5;
  --sel-lip: #abb6c4;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #7f8ea3;
  --bloom-b: #5f7fb0;
  --line: rgba(238, 242, 247, 0.09); --line2: rgba(238, 242, 247, 0.18);
  color-scheme: dark;
}
:root[data-skin='slate'][data-theme='light'] {
  --bg: #edf0f4;
  --bg2: #fbfcfd;
  --bg3: #dce1e8;
  --text: #1a1f27;
  --muted: #4f5866;
  --tile: #f3f5f8;
  --lip: #cacbce;
  --panel: #3c4a5c;
  --panel-lip: #262f3b;
  --pink: #f08ca6;
  --pink-lip: #b2687b;
  --pink-ink: #a52548;
  --blue: #3f66ad;
  --blue-lip: #2c4779;
  --blue-btn: #3f66ad;
  --sun: #ecc766;
  --sun-lip: #bd9f52;
  --sun-ink: #6b5100;
  --sel: #d6e4f5;
  --sel-lip: #abb6c4;
  --shadow: rgba(26, 31, 39, 0.17);
  --bloom-a: #7f8ea3;
  --bloom-b: #5f7fb0;
  --line: rgba(26, 31, 39, 0.1); --line2: rgba(26, 31, 39, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='slate']:not([data-theme='dark']) {
    --bg: #edf0f4;
    --bg2: #fbfcfd;
    --bg3: #dce1e8;
    --text: #1a1f27;
    --muted: #4f5866;
    --tile: #f3f5f8;
    --lip: #cacbce;
    --panel: #3c4a5c;
    --panel-lip: #262f3b;
    --pink: #f08ca6;
    --pink-lip: #b2687b;
    --pink-ink: #a52548;
    --blue: #3f66ad;
    --blue-lip: #2c4779;
    --blue-btn: #3f66ad;
    --sun: #ecc766;
    --sun-lip: #bd9f52;
    --sun-ink: #6b5100;
    --sel: #d6e4f5;
    --sel-lip: #abb6c4;
    --shadow: rgba(26, 31, 39, 0.17);
    --bloom-a: #7f8ea3;
    --bloom-b: #5f7fb0;
    --line: rgba(26, 31, 39, 0.1); --line2: rgba(26, 31, 39, 0.2);
    color-scheme: light;
  }
}

/* Midnight: Deep navy and a little moonlight */
:root[data-skin='midnight'] {
  --bg: #060914;
  --bg2: #0d1224;
  --bg3: #182040;
  --text: #eef1ff;
  --muted: #a3abcc;
  --tile: #f2f4ff;
  --lip: #c9cbd4;
  --panel: #1f2f7a;
  --panel-lip: #141e4e;
  --pink: #ff6fa8;
  --pink-lip: #bd527c;
  --pink-ink: #ff94c0;
  --blue: #7f97ff;
  --blue-lip: #29409d;
  --blue-btn: #3a5be0;
  --sun: #ffd866;
  --sun-lip: #ccad52;
  --sun-ink: #ffd866;
  --sel: #d5dcff;
  --sel-lip: #aab0cc;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #5a6fe0;
  --bloom-b: #8a6cf0;
  --line: rgba(238, 241, 255, 0.09); --line2: rgba(238, 241, 255, 0.18);
  color-scheme: dark;
}
:root[data-skin='midnight'][data-theme='light'] {
  --bg: #e8ecf8;
  --bg2: #f9faff;
  --bg3: #d4dbf0;
  --text: #0c1230;
  --muted: #4a5277;
  --tile: #f2f4ff;
  --lip: #c9cbd4;
  --panel: #1f2f7a;
  --panel-lip: #141e4e;
  --pink: #ff6fa8;
  --pink-lip: #bd527c;
  --pink-ink: #b01a60;
  --blue: #3a5be0;
  --blue-lip: #29409d;
  --blue-btn: #3a5be0;
  --sun: #ffd866;
  --sun-lip: #ccad52;
  --sun-ink: #6b5200;
  --sel: #d5dcff;
  --sel-lip: #aab0cc;
  --shadow: rgba(12, 18, 48, 0.17);
  --bloom-a: #5a6fe0;
  --bloom-b: #8a6cf0;
  --line: rgba(12, 18, 48, 0.1); --line2: rgba(12, 18, 48, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='midnight']:not([data-theme='dark']) {
    --bg: #e8ecf8;
    --bg2: #f9faff;
    --bg3: #d4dbf0;
    --text: #0c1230;
    --muted: #4a5277;
    --tile: #f2f4ff;
    --lip: #c9cbd4;
    --panel: #1f2f7a;
    --panel-lip: #141e4e;
    --pink: #ff6fa8;
    --pink-lip: #bd527c;
    --pink-ink: #b01a60;
    --blue: #3a5be0;
    --blue-lip: #29409d;
    --blue-btn: #3a5be0;
    --sun: #ffd866;
    --sun-lip: #ccad52;
    --sun-ink: #6b5200;
    --sel: #d5dcff;
    --sel-lip: #aab0cc;
    --shadow: rgba(12, 18, 48, 0.17);
    --bloom-a: #5a6fe0;
    --bloom-b: #8a6cf0;
    --line: rgba(12, 18, 48, 0.1); --line2: rgba(12, 18, 48, 0.2);
    color-scheme: light;
  }
}

/* Mint: Fresh green, clean and calm */
:root[data-skin='mint'] {
  --bg: #0d1613;
  --bg2: #14211c;
  --bg3: #1e3029;
  --text: #eefaf3;
  --muted: #a0b8ad;
  --tile: #f6fbf3;
  --lip: #ccd0ca;
  --panel: #0d6149;
  --panel-lip: #083e2f;
  --pink: #ff7a9a;
  --pink-lip: #bd5a72;
  --pink-ink: #ff9db5;
  --blue: #74a4f2;
  --blue-lip: #214a92;
  --blue-btn: #2f6ad0;
  --sun: #ffd75e;
  --sun-lip: #ccac4b;
  --sun-ink: #ffd75e;
  --sel: #cdf3de;
  --sel-lip: #a4c2b2;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #2fd09a;
  --bloom-b: #6fc8b0;
  --line: rgba(238, 250, 243, 0.09); --line2: rgba(238, 250, 243, 0.18);
  color-scheme: dark;
}
:root[data-skin='mint'][data-theme='light'] {
  --bg: #e9f6ef;
  --bg2: #f9fefb;
  --bg3: #d3ebdf;
  --text: #0f231b;
  --muted: #466055;
  --tile: #f6fbf3;
  --lip: #ccd0ca;
  --panel: #0d6149;
  --panel-lip: #083e2f;
  --pink: #ff7a9a;
  --pink-lip: #bd5a72;
  --pink-ink: #ae1c47;
  --blue: #2f6ad0;
  --blue-lip: #214a92;
  --blue-btn: #2f6ad0;
  --sun: #ffd75e;
  --sun-lip: #ccac4b;
  --sun-ink: #6b5300;
  --sel: #cdf3de;
  --sel-lip: #a4c2b2;
  --shadow: rgba(15, 35, 27, 0.17);
  --bloom-a: #2fd09a;
  --bloom-b: #6fc8b0;
  --line: rgba(15, 35, 27, 0.1); --line2: rgba(15, 35, 27, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='mint']:not([data-theme='dark']) {
    --bg: #e9f6ef;
    --bg2: #f9fefb;
    --bg3: #d3ebdf;
    --text: #0f231b;
    --muted: #466055;
    --tile: #f6fbf3;
    --lip: #ccd0ca;
    --panel: #0d6149;
    --panel-lip: #083e2f;
    --pink: #ff7a9a;
    --pink-lip: #bd5a72;
    --pink-ink: #ae1c47;
    --blue: #2f6ad0;
    --blue-lip: #214a92;
    --blue-btn: #2f6ad0;
    --sun: #ffd75e;
    --sun-lip: #ccac4b;
    --sun-ink: #6b5300;
    --sel: #cdf3de;
    --sel-lip: #a4c2b2;
    --shadow: rgba(15, 35, 27, 0.17);
    --bloom-a: #2fd09a;
    --bloom-b: #6fc8b0;
    --line: rgba(15, 35, 27, 0.1); --line2: rgba(15, 35, 27, 0.2);
    color-scheme: light;
  }
}

/* Sand: Terracotta on warm dunes */
:root[data-skin='sand'] {
  --bg: #1a1511;
  --bg2: #251d17;
  --bg3: #33281f;
  --text: #f8eddc;
  --muted: #baa892;
  --tile: #fff6e6;
  --lip: #d4ccbf;
  --panel: #8a4526;
  --panel-lip: #582c18;
  --pink: #f47c92;
  --pink-lip: #b55c6c;
  --pink-ink: #fa9aac;
  --blue: #8aa6ec;
  --blue-lip: #2c4584;
  --blue-btn: #3f62bd;
  --sun: #f6bd45;
  --sun-lip: #c59737;
  --sun-ink: #f6bd45;
  --sel: #ffdcba;
  --sel-lip: #ccb095;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #c08048;
  --bloom-b: #c9744a;
  --line: rgba(248, 237, 220, 0.09); --line2: rgba(248, 237, 220, 0.18);
  color-scheme: dark;
}
:root[data-skin='sand'][data-theme='light'] {
  --bg: #f4e8d2;
  --bg2: #fdf7ea;
  --bg3: #e8d6b6;
  --text: #261a10;
  --muted: #62513f;
  --tile: #fff6e6;
  --lip: #d4ccbf;
  --panel: #8a4526;
  --panel-lip: #582c18;
  --pink: #f47c92;
  --pink-lip: #b55c6c;
  --pink-ink: #a61f42;
  --blue: #3f62bd;
  --blue-lip: #2c4584;
  --blue-btn: #3f62bd;
  --sun: #f6bd45;
  --sun-lip: #c59737;
  --sun-ink: #704c00;
  --sel: #ffdcba;
  --sel-lip: #ccb095;
  --shadow: rgba(38, 26, 16, 0.17);
  --bloom-a: #e8a060;
  --bloom-b: #c9744a;
  --line: rgba(38, 26, 16, 0.1); --line2: rgba(38, 26, 16, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='sand']:not([data-theme='dark']) {
    --bg: #f4e8d2;
    --bg2: #fdf7ea;
    --bg3: #e8d6b6;
    --text: #261a10;
    --muted: #62513f;
    --tile: #fff6e6;
    --lip: #d4ccbf;
    --panel: #8a4526;
    --panel-lip: #582c18;
    --pink: #f47c92;
    --pink-lip: #b55c6c;
    --pink-ink: #a61f42;
    --blue: #3f62bd;
    --blue-lip: #2c4584;
    --blue-btn: #3f62bd;
    --sun: #f6bd45;
    --sun-lip: #c59737;
    --sun-ink: #704c00;
    --sel: #ffdcba;
    --sel-lip: #ccb095;
    --shadow: rgba(38, 26, 16, 0.17);
    --bloom-a: #e8a060;
    --bloom-b: #c9744a;
    --line: rgba(38, 26, 16, 0.1); --line2: rgba(38, 26, 16, 0.2);
    color-scheme: light;
  }
}

/* Mono: Black, white and nothing else */
:root[data-skin='mono'] {
  --bg: #0e0e0e;
  --bg2: #181818;
  --bg3: #262626;
  --text: #f4f4f4;
  --muted: #a8a8a8;
  --tile: #fafafa;
  --lip: #d0d0d0;
  --panel: #303030;
  --panel-lip: #1f1f1f;
  --pink: #d9d9d9;
  --pink-lip: #a1a1a1;
  --pink-ink: #e2e2e2;
  --blue: #c4c4c4;
  --blue-lip: #2a2a2a;
  --blue-btn: #3c3c3c;
  --sun: #f2f2f2;
  --sun-lip: #c2c2c2;
  --sun-ink: #f2f2f2;
  --sel: #d8d8d8;
  --sel-lip: #adadad;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #8a8a8a;
  --bloom-b: #6a6a6a;
  --line: rgba(244, 244, 244, 0.09); --line2: rgba(244, 244, 244, 0.18);
  color-scheme: dark;
}
:root[data-skin='mono'][data-theme='light'] {
  --bg: #e9e9e9;
  --bg2: #f8f8f8;
  --bg3: #d8d8d8;
  --text: #141414;
  --muted: #505050;
  --tile: #fafafa;
  --lip: #d0d0d0;
  --panel: #303030;
  --panel-lip: #1f1f1f;
  --pink: #d9d9d9;
  --pink-lip: #a1a1a1;
  --pink-ink: #3a3a3a;
  --blue: #3c3c3c;
  --blue-lip: #2a2a2a;
  --blue-btn: #3c3c3c;
  --sun: #f2f2f2;
  --sun-lip: #c2c2c2;
  --sun-ink: #4a4a4a;
  --sel: #d8d8d8;
  --sel-lip: #adadad;
  --shadow: rgba(20, 20, 20, 0.17);
  --bloom-a: #8a8a8a;
  --bloom-b: #6a6a6a;
  --line: rgba(20, 20, 20, 0.1); --line2: rgba(20, 20, 20, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='mono']:not([data-theme='dark']) {
    --bg: #e9e9e9;
    --bg2: #f8f8f8;
    --bg3: #d8d8d8;
    --text: #141414;
    --muted: #505050;
    --tile: #fafafa;
    --lip: #d0d0d0;
    --panel: #303030;
    --panel-lip: #1f1f1f;
    --pink: #d9d9d9;
    --pink-lip: #a1a1a1;
    --pink-ink: #3a3a3a;
    --blue: #3c3c3c;
    --blue-lip: #2a2a2a;
    --blue-btn: #3c3c3c;
    --sun: #f2f2f2;
    --sun-lip: #c2c2c2;
    --sun-ink: #4a4a4a;
    --sel: #d8d8d8;
    --sel-lip: #adadad;
    --shadow: rgba(20, 20, 20, 0.17);
    --bloom-a: #8a8a8a;
    --bloom-b: #6a6a6a;
    --line: rgba(20, 20, 20, 0.1); --line2: rgba(20, 20, 20, 0.2);
    color-scheme: light;
  }
}

/* Keyboard: Mechanical keycaps on a deck. Press them */
:root[data-skin='keyboard'] {
  --bg: #141517;
  --bg2: #1d1f22;
  --bg3: #2a2d31;
  --text: #f1ece0;
  --muted: #a9a69d;
  --tile: #f1ece0;
  --lip: #bdb6a6;
  --panel: #3e4147;
  --panel-lip: #1f2125;
  --pink: #ff8a5c;
  --pink-lip: #bd6644;
  --pink-ink: #ffa582;
  --blue: #7fb6d6;
  --blue-lip: #254a62;
  --blue-btn: #356a8c;
  --sun: #f2c94c;
  --sun-lip: #c2a13d;
  --sun-ink: #f2c94c;
  --sel: #ffd2a6;
  --sel-lip: #cca885;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #d0683e;
  --bloom-b: #5f9ab8;
  --line: rgba(241, 236, 224, 0.09); --line2: rgba(241, 236, 224, 0.18);
  color-scheme: dark;
}
:root[data-skin='keyboard'][data-theme='light'] {
  --bg: #e6e2d8;
  --bg2: #f6f3ec;
  --bg3: #d6d1c4;
  --text: #1c1d20;
  --muted: #55544e;
  --tile: #f1ece0;
  --lip: #bdb6a6;
  --panel: #3e4147;
  --panel-lip: #1f2125;
  --pink: #ff8a5c;
  --pink-lip: #bd6644;
  --pink-ink: #a8380f;
  --blue: #356a8c;
  --blue-lip: #254a62;
  --blue-btn: #356a8c;
  --sun: #f2c94c;
  --sun-lip: #c2a13d;
  --sun-ink: #6b5000;
  --sel: #ffd2a6;
  --sel-lip: #cca885;
  --shadow: rgba(28, 29, 32, 0.17);
  --bloom-a: #ff8a5c;
  --bloom-b: #5f9ab8;
  --line: rgba(28, 29, 32, 0.1); --line2: rgba(28, 29, 32, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='keyboard']:not([data-theme='dark']) {
    --bg: #e6e2d8;
    --bg2: #f6f3ec;
    --bg3: #d6d1c4;
    --text: #1c1d20;
    --muted: #55544e;
    --tile: #f1ece0;
    --lip: #bdb6a6;
    --panel: #3e4147;
    --panel-lip: #1f2125;
    --pink: #ff8a5c;
    --pink-lip: #bd6644;
    --pink-ink: #a8380f;
    --blue: #356a8c;
    --blue-lip: #254a62;
    --blue-btn: #356a8c;
    --sun: #f2c94c;
    --sun-lip: #c2a13d;
    --sun-ink: #6b5000;
    --sel: #ffd2a6;
    --sel-lip: #cca885;
    --shadow: rgba(28, 29, 32, 0.17);
    --bloom-a: #ff8a5c;
    --bloom-b: #5f9ab8;
    --line: rgba(28, 29, 32, 0.1); --line2: rgba(28, 29, 32, 0.2);
    color-scheme: light;
  }
}

/* Neon: Glowing cyan and magenta on black */
:root[data-skin='neon'] {
  --bg: #05050f;
  --bg2: #0e0e20;
  --bg3: #1a1a34;
  --text: #f2fbff;
  --muted: #a6b4cc;
  --tile: #14142c;
  --lip: #0e0e22;
  --panel: #0a0a1a;
  --panel-lip: #03030a;
  --pink: #ff4fd8;
  --pink-lip: #bd3aa0;
  --pink-ink: #ff7ae2;
  --blue: #39f3ff;
  --blue-lip: #26319d;
  --blue-btn: #3646e0;
  --sun: #ffe94a;
  --sun-lip: #ccba3b;
  --sun-ink: #ffe94a;
  --sel: #2a0f38;
  --sel-lip: #220c2d;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #ff4fd8;
  --bloom-b: #39f3ff;
  --line: rgba(242, 251, 255, 0.09); --line2: rgba(242, 251, 255, 0.18);
  color-scheme: dark;
}
:root[data-skin='neon'][data-theme='light'] {
  --bg: #eceaf6;
  --bg2: #fbfaff;
  --bg3: #dcd9ee;
  --text: #0c0b22;
  --muted: #4c4a6e;
  --tile: #14142c;
  --lip: #0e0e22;
  --panel: #0a0a1a;
  --panel-lip: #03030a;
  --pink: #ff4fd8;
  --pink-lip: #bd3aa0;
  --pink-ink: #b0158f;
  --blue: #2a5fd8;
  --blue-lip: #26319d;
  --blue-btn: #3646e0;
  --sun: #ffe94a;
  --sun-lip: #ccba3b;
  --sun-ink: #6b5600;
  --sel: #2a0f38;
  --sel-lip: #220c2d;
  --shadow: rgba(12, 11, 34, 0.17);
  --bloom-a: #ff4fd8;
  --bloom-b: #2a6fe0;
  --line: rgba(12, 11, 34, 0.1); --line2: rgba(12, 11, 34, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='neon']:not([data-theme='dark']) {
    --bg: #eceaf6;
    --bg2: #fbfaff;
    --bg3: #dcd9ee;
    --text: #0c0b22;
    --muted: #4c4a6e;
    --tile: #14142c;
    --lip: #0e0e22;
    --panel: #0a0a1a;
    --panel-lip: #03030a;
    --pink: #ff4fd8;
    --pink-lip: #bd3aa0;
    --pink-ink: #b0158f;
    --blue: #2a5fd8;
    --blue-lip: #26319d;
    --blue-btn: #3646e0;
    --sun: #ffe94a;
    --sun-lip: #ccba3b;
    --sun-ink: #6b5600;
    --sel: #2a0f38;
    --sel-lip: #220c2d;
    --shadow: rgba(12, 11, 34, 0.17);
    --bloom-a: #ff4fd8;
    --bloom-b: #2a6fe0;
    --line: rgba(12, 11, 34, 0.1); --line2: rgba(12, 11, 34, 0.2);
    color-scheme: light;
  }
}

/* Synthwave: Hot pink glow on a purple night */
:root[data-skin='synthwave'] {
  --bg: #0d0618;
  --bg2: #1a0d2c;
  --bg3: #2a1642;
  --text: #fff0fb;
  --muted: #c0a8d6;
  --tile: #24103d;
  --lip: #170828;
  --panel: #1a0b2e;
  --panel-lip: #0b0416;
  --pink: #ff3fa4;
  --pink-lip: #bd2f79;
  --pink-ink: #ff8ad0;
  --blue: #a58cff;
  --blue-lip: #4a2aa8;
  --blue-btn: #6a3cf0;
  --sun: #ffc23f;
  --sun-lip: #cc9b32;
  --sun-ink: #ffc23f;
  --sel: #3d0f3a;
  --sel-lip: #310c2e;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #ff3fa4;
  --bloom-b: #8a5cff;
  --line: rgba(255, 240, 251, 0.09); --line2: rgba(255, 240, 251, 0.18);
  color-scheme: dark;
}
:root[data-skin='synthwave'][data-theme='light'] {
  --bg: #f3ecfa;
  --bg2: #fdfaff;
  --bg3: #e4d8f2;
  --text: #1c0b2e;
  --muted: #5c4a72;
  --tile: #24103d;
  --lip: #170828;
  --panel: #1a0b2e;
  --panel-lip: #0b0416;
  --pink: #ff3fa4;
  --pink-lip: #bd2f79;
  --pink-ink: #b0157a;
  --blue: #5a35d0;
  --blue-lip: #4a2aa8;
  --blue-btn: #6a3cf0;
  --sun: #ffc23f;
  --sun-lip: #cc9b32;
  --sun-ink: #6b5000;
  --sel: #3d0f3a;
  --sel-lip: #310c2e;
  --shadow: rgba(28, 11, 46, 0.17);
  --bloom-a: #ff3fa4;
  --bloom-b: #6a3cf0;
  --line: rgba(28, 11, 46, 0.1); --line2: rgba(28, 11, 46, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='synthwave']:not([data-theme='dark']) {
    --bg: #f3ecfa;
    --bg2: #fdfaff;
    --bg3: #e4d8f2;
    --text: #1c0b2e;
    --muted: #5c4a72;
    --tile: #24103d;
    --lip: #170828;
    --panel: #1a0b2e;
    --panel-lip: #0b0416;
    --pink: #ff3fa4;
    --pink-lip: #bd2f79;
    --pink-ink: #b0157a;
    --blue: #5a35d0;
    --blue-lip: #4a2aa8;
    --blue-btn: #6a3cf0;
    --sun: #ffc23f;
    --sun-lip: #cc9b32;
    --sun-ink: #6b5000;
    --sel: #3d0f3a;
    --sel-lip: #310c2e;
    --shadow: rgba(28, 11, 46, 0.17);
    --bloom-a: #ff3fa4;
    --bloom-b: #6a3cf0;
    --line: rgba(28, 11, 46, 0.1); --line2: rgba(28, 11, 46, 0.2);
    color-scheme: light;
  }
}

/* Terminal: Green phosphor on black */
:root[data-skin='terminal'] {
  --bg: #020502;
  --bg2: #081308;
  --bg3: #0f220f;
  --text: #d8ffe0;
  --muted: #86c896;
  --tile: #061006;
  --lip: #020602;
  --panel: #030803;
  --panel-lip: #000000;
  --pink: #3dff6e;
  --pink-lip: #2dbd51;
  --pink-ink: #5dff86;
  --blue: #62e0a0;
  --blue-lip: #0f4a21;
  --blue-btn: #16692f;
  --sun: #d9ff5a;
  --sun-lip: #aecc48;
  --sun-ink: #d9ff5a;
  --sel: #3dff6e;
  --sel-lip: #31cc58;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #3dff6e;
  --bloom-b: #16a34a;
  --line: rgba(216, 255, 224, 0.09); --line2: rgba(216, 255, 224, 0.18);
  color-scheme: dark;
}
:root[data-skin='terminal'][data-theme='light'] {
  --bg: #e6f2e6;
  --bg2: #f6fbf6;
  --bg3: #d2e6d2;
  --text: #06200c;
  --muted: #3c5c44;
  --tile: #061006;
  --lip: #020602;
  --panel: #030803;
  --panel-lip: #000000;
  --pink: #3dff6e;
  --pink-lip: #2dbd51;
  --pink-ink: #0f6b2a;
  --blue: #14633a;
  --blue-lip: #0f4a21;
  --blue-btn: #16692f;
  --sun: #d9ff5a;
  --sun-lip: #aecc48;
  --sun-ink: #4f5600;
  --sel: #3dff6e;
  --sel-lip: #31cc58;
  --shadow: rgba(6, 32, 12, 0.17);
  --bloom-a: #3dff6e;
  --bloom-b: #0f8a3a;
  --line: rgba(6, 32, 12, 0.1); --line2: rgba(6, 32, 12, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='terminal']:not([data-theme='dark']) {
    --bg: #e6f2e6;
    --bg2: #f6fbf6;
    --bg3: #d2e6d2;
    --text: #06200c;
    --muted: #3c5c44;
    --tile: #061006;
    --lip: #020602;
    --panel: #030803;
    --panel-lip: #000000;
    --pink: #3dff6e;
    --pink-lip: #2dbd51;
    --pink-ink: #0f6b2a;
    --blue: #14633a;
    --blue-lip: #0f4a21;
    --blue-btn: #16692f;
    --sun: #d9ff5a;
    --sun-lip: #aecc48;
    --sun-ink: #4f5600;
    --sel: #3dff6e;
    --sel-lip: #31cc58;
    --shadow: rgba(6, 32, 12, 0.17);
    --bloom-a: #3dff6e;
    --bloom-b: #0f8a3a;
    --line: rgba(6, 32, 12, 0.1); --line2: rgba(6, 32, 12, 0.2);
    color-scheme: light;
  }
}

/* Gold: Brushed gold keys on black */
:root[data-skin='gold'] {
  --bg: #080706;
  --bg2: #141210;
  --bg3: #211d17;
  --text: #f7ecd2;
  --muted: #b9a985;
  --tile: #ecce7c;
  --lip: #9c7a2c;
  --panel: #0c0b09;
  --panel-lip: #000000;
  --pink: #e9c46a;
  --pink-lip: #ac914e;
  --pink-ink: #e9c46a;
  --blue: #dcc48e;
  --blue-lip: #362c10;
  --blue-btn: #4d3f17;
  --sun: #f6e7b4;
  --sun-lip: #c5b990;
  --sun-ink: #f6e7b4;
  --sel: #17130a;
  --sel-lip: #120f08;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #e9c46a;
  --bloom-b: #9c7a2c;
  --line: rgba(247, 236, 210, 0.09); --line2: rgba(247, 236, 210, 0.18);
  color-scheme: dark;
}
:root[data-skin='gold'][data-theme='light'] {
  --bg: #f2ede2;
  --bg2: #fcfaf5;
  --bg3: #e3dacb;
  --text: #17130a;
  --muted: #55492f;
  --tile: #ecce7c;
  --lip: #9c7a2c;
  --panel: #0c0b09;
  --panel-lip: #000000;
  --pink: #e9c46a;
  --pink-lip: #ac914e;
  --pink-ink: #7a5a10;
  --blue: #6a5420;
  --blue-lip: #362c10;
  --blue-btn: #4d3f17;
  --sun: #f6e7b4;
  --sun-lip: #c5b990;
  --sun-ink: #5f4a00;
  --sel: #17130a;
  --sel-lip: #120f08;
  --shadow: rgba(23, 19, 10, 0.17);
  --bloom-a: #e9c46a;
  --bloom-b: #9c7a2c;
  --line: rgba(23, 19, 10, 0.1); --line2: rgba(23, 19, 10, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='gold']:not([data-theme='dark']) {
    --bg: #f2ede2;
    --bg2: #fcfaf5;
    --bg3: #e3dacb;
    --text: #17130a;
    --muted: #55492f;
    --tile: #ecce7c;
    --lip: #9c7a2c;
    --panel: #0c0b09;
    --panel-lip: #000000;
    --pink: #e9c46a;
    --pink-lip: #ac914e;
    --pink-ink: #7a5a10;
    --blue: #6a5420;
    --blue-lip: #362c10;
    --blue-btn: #4d3f17;
    --sun: #f6e7b4;
    --sun-lip: #c5b990;
    --sun-ink: #5f4a00;
    --sel: #17130a;
    --sel-lip: #120f08;
    --shadow: rgba(23, 19, 10, 0.17);
    --bloom-a: #e9c46a;
    --bloom-b: #9c7a2c;
    --line: rgba(23, 19, 10, 0.1); --line2: rgba(23, 19, 10, 0.2);
    color-scheme: light;
  }
}

/* Lava: Embers glowing in charcoal */
:root[data-skin='lava'] {
  --bg: #0e0c0b;
  --bg2: #1a1614;
  --bg3: #27211d;
  --text: #fff2e6;
  --muted: #c4ad9a;
  --tile: #211b17;
  --lip: #120e0b;
  --panel: #16120f;
  --panel-lip: #080605;
  --pink: #ff6a1a;
  --pink-lip: #bd4e13;
  --pink-ink: #ff9a5c;
  --blue: #ffb07a;
  --blue-lip: #7b2412;
  --blue-btn: #b0341a;
  --sun: #ffc23a;
  --sun-lip: #cc9b2e;
  --sun-ink: #ffc23a;
  --sel: #3a160a;
  --sel-lip: #2e1208;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #ff6a1a;
  --bloom-b: #d1301a;
  --line: rgba(255, 242, 230, 0.09); --line2: rgba(255, 242, 230, 0.18);
  color-scheme: dark;
}
:root[data-skin='lava'][data-theme='light'] {
  --bg: #f1ebe6;
  --bg2: #fcf9f6;
  --bg3: #e4dad2;
  --text: #1c1410;
  --muted: #5e5047;
  --tile: #211b17;
  --lip: #120e0b;
  --panel: #16120f;
  --panel-lip: #080605;
  --pink: #ff6a1a;
  --pink-lip: #bd4e13;
  --pink-ink: #a8380a;
  --blue: #9a3412;
  --blue-lip: #7b2412;
  --blue-btn: #b0341a;
  --sun: #ffc23a;
  --sun-lip: #cc9b2e;
  --sun-ink: #6b4a00;
  --sel: #3a160a;
  --sel-lip: #2e1208;
  --shadow: rgba(28, 20, 16, 0.17);
  --bloom-a: #ff6a1a;
  --bloom-b: #d1301a;
  --line: rgba(28, 20, 16, 0.1); --line2: rgba(28, 20, 16, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='lava']:not([data-theme='dark']) {
    --bg: #f1ebe6;
    --bg2: #fcf9f6;
    --bg3: #e4dad2;
    --text: #1c1410;
    --muted: #5e5047;
    --tile: #211b17;
    --lip: #120e0b;
    --panel: #16120f;
    --panel-lip: #080605;
    --pink: #ff6a1a;
    --pink-lip: #bd4e13;
    --pink-ink: #a8380a;
    --blue: #9a3412;
    --blue-lip: #7b2412;
    --blue-btn: #b0341a;
    --sun: #ffc23a;
    --sun-lip: #cc9b2e;
    --sun-ink: #6b4a00;
    --sel: #3a160a;
    --sel-lip: #2e1208;
    --shadow: rgba(28, 20, 16, 0.17);
    --bloom-a: #ff6a1a;
    --bloom-b: #d1301a;
    --line: rgba(28, 20, 16, 0.1); --line2: rgba(28, 20, 16, 0.2);
    color-scheme: light;
  }
}

/* Frost: Frosted glass with an icy glow */
:root[data-skin='frost'] {
  --bg: #070f1a;
  --bg2: #0f1c2c;
  --bg3: #182a40;
  --text: #eef8ff;
  --muted: #b2c6d8;
  --tile: #1b3048;
  --lip: #10203a;
  --panel: #0c1a2c;
  --panel-lip: #050d18;
  --pink: #9fdcff;
  --pink-lip: #76a3bd;
  --pink-ink: #9fdcff;
  --blue: #8fb8ff;
  --blue-lip: #214586;
  --blue-btn: #2f62c0;
  --sun: #e6f4ff;
  --sun-lip: #b8c3cc;
  --sun-ink: #e6f4ff;
  --sel: #d4ecff;
  --sel-lip: #aabdcc;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #9fdcff;
  --bloom-b: #c8e8ff;
  --line: rgba(238, 248, 255, 0.09); --line2: rgba(238, 248, 255, 0.18);
  color-scheme: dark;
}
:root[data-skin='frost'][data-theme='light'] {
  --bg: #eaf3fa;
  --bg2: #fafdff;
  --bg3: #d6e6f2;
  --text: #0a1a2a;
  --muted: #435a6e;
  --tile: #1b3048;
  --lip: #10203a;
  --panel: #0c1a2c;
  --panel-lip: #050d18;
  --pink: #9fdcff;
  --pink-lip: #76a3bd;
  --pink-ink: #155a8a;
  --blue: #2a5fb0;
  --blue-lip: #214586;
  --blue-btn: #2f62c0;
  --sun: #e6f4ff;
  --sun-lip: #b8c3cc;
  --sun-ink: #4a5560;
  --sel: #d4ecff;
  --sel-lip: #aabdcc;
  --shadow: rgba(10, 26, 42, 0.17);
  --bloom-a: #5fb4e8;
  --bloom-b: #8fc8f0;
  --line: rgba(10, 26, 42, 0.1); --line2: rgba(10, 26, 42, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='frost']:not([data-theme='dark']) {
    --bg: #eaf3fa;
    --bg2: #fafdff;
    --bg3: #d6e6f2;
    --text: #0a1a2a;
    --muted: #435a6e;
    --tile: #1b3048;
    --lip: #10203a;
    --panel: #0c1a2c;
    --panel-lip: #050d18;
    --pink: #9fdcff;
    --pink-lip: #76a3bd;
    --pink-ink: #155a8a;
    --blue: #2a5fb0;
    --blue-lip: #214586;
    --blue-btn: #2f62c0;
    --sun: #e6f4ff;
    --sun-lip: #b8c3cc;
    --sun-ink: #4a5560;
    --sel: #d4ecff;
    --sel-lip: #aabdcc;
    --shadow: rgba(10, 26, 42, 0.17);
    --bloom-a: #5fb4e8;
    --bloom-b: #8fc8f0;
    --line: rgba(10, 26, 42, 0.1); --line2: rgba(10, 26, 42, 0.2);
    color-scheme: light;
  }
}

/* Blueprint: White lines on a navy grid */
:root[data-skin='blueprint'] {
  --bg: #08142a;
  --bg2: #0f1f3d;
  --bg3: #182c52;
  --text: #f2f6ff;
  --muted: #a6b6d6;
  --tile: #0c2a62;
  --lip: #0c2a62;
  --panel: #0c2a62;
  --panel-lip: #071a40;
  --pink: #ffffff;
  --pink-lip: #bdbdbd;
  --pink-ink: #9fc0ff;
  --blue: #9fc0ff;
  --blue-lip: #1d4392;
  --blue-btn: #2a5fd0;
  --sun: #ffd84a;
  --sun-lip: #ccad3b;
  --sun-ink: #ffd84a;
  --sel: #f6f9ff;
  --sel-lip: #c5c7cc;
  --shadow: rgba(0, 0, 0, 0.42);
  --bloom-a: #5f8fe0;
  --bloom-b: #9fbff5;
  --line: rgba(242, 246, 255, 0.09); --line2: rgba(242, 246, 255, 0.18);
  color-scheme: dark;
}
:root[data-skin='blueprint'][data-theme='light'] {
  --bg: #e9eff9;
  --bg2: #fafcff;
  --bg3: #d5e0f2;
  --text: #0b1a36;
  --muted: #46587a;
  --tile: #0c2a62;
  --lip: #0c2a62;
  --panel: #0c2a62;
  --panel-lip: #071a40;
  --pink: #ffffff;
  --pink-lip: #bdbdbd;
  --pink-ink: #1d4fb0;
  --blue: #1d4fb0;
  --blue-lip: #1d4392;
  --blue-btn: #2a5fd0;
  --sun: #ffd84a;
  --sun-lip: #ccad3b;
  --sun-ink: #6b5000;
  --sel: #f6f9ff;
  --sel-lip: #c5c7cc;
  --shadow: rgba(11, 26, 54, 0.17);
  --bloom-a: #3f6fd0;
  --bloom-b: #7fa3e8;
  --line: rgba(11, 26, 54, 0.1); --line2: rgba(11, 26, 54, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin='blueprint']:not([data-theme='dark']) {
    --bg: #e9eff9;
    --bg2: #fafcff;
    --bg3: #d5e0f2;
    --text: #0b1a36;
    --muted: #46587a;
    --tile: #0c2a62;
    --lip: #0c2a62;
    --panel: #0c2a62;
    --panel-lip: #071a40;
    --pink: #ffffff;
    --pink-lip: #bdbdbd;
    --pink-ink: #1d4fb0;
    --blue: #1d4fb0;
    --blue-lip: #1d4392;
    --blue-btn: #2a5fd0;
    --sun: #ffd84a;
    --sun-lip: #ccad3b;
    --sun-ink: #6b5000;
    --sel: #f6f9ff;
    --sel-lip: #c5c7cc;
    --shadow: rgba(11, 26, 54, 0.17);
    --bloom-a: #3f6fd0;
    --bloom-b: #7fa3e8;
    --line: rgba(11, 26, 54, 0.1); --line2: rgba(11, 26, 54, 0.2);
    color-scheme: light;
  }
}

/* ---------- shared ----------
   The two halftone blooms take the season's colours. The sprites live in the paper layer (behind everything:
   cards, rows, the board and sheets cover them); js/themes.js measures the empty paper on home (under the tools,
   over "Have a code?") and in a round (under the board) and turns a sprite on (.on, at left/top) only where it
   fits whole, so they never sit under text. Every other screen keeps just the season's dots and colours.
   On home they take a one-pixel step now and then; Reduce Motion keeps them still. */
:root[data-skin] .paper::before { color: var(--bloom-a); }
:root[data-skin] .paper::after { color: var(--bloom-b); }
.spr { display: none; position: absolute; left: 0; top: 0; background: center / 100% 100% no-repeat; }
:root[data-skin] .spr.on { display: block; }
:root[data-skin] .spr.s1 { width: var(--spr1-w); height: var(--spr1-h); background-image: var(--spr1); --bob: calc(var(--spr1-px) * -1); }
:root[data-skin] .spr.s2 { width: var(--spr2-w); height: var(--spr2-h); background-image: var(--spr2); --bob: calc(var(--spr2-px) * -1); }
:root[data-skin] .spr.s3 { width: var(--spr3-w); height: var(--spr3-h); background-image: var(--spr3); --bob: calc(var(--spr3-px) * -1); }
@media (prefers-reduced-motion: no-preference) {
  [data-screen='home'] .spr.on { animation: sprBob 3.6s steps(1, end) infinite; }
  [data-screen='home'] .spr.s2.on { animation-duration: 4.4s; animation-delay: -1.5s; }
  [data-screen='home'] .spr.s3.on { animation-duration: 3.1s; animation-delay: -2.4s; }
}
@keyframes sprBob { 50% { transform: translateY(var(--bob)); } }
/* the sticker: resting on top of the wordmark's last tile (the P; the seasons only) */
:root[data-skin] .hero::after {
  content: ''; position: absolute; z-index: 4; pointer-events: none;
  width: var(--stk-w, 0px); height: var(--stk-h, 0px); background: var(--stk, none) center / 100% 100% no-repeat;
  left: calc(90% - var(--stk-w, 0px) / 2); top: calc(34.4% - var(--stk-h, 0px) + var(--stk-px, 0px) * 2);
}

/* ---------- Keyboard: mechanical keycaps on a deck ---------- */
:root[data-skin='keyboard'] .board {
  border-radius: 7%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, #fff) 0, var(--panel) 12%, color-mix(in srgb, var(--panel) 86%, #000) 100%);
  box-shadow: 0 8px 0 var(--panel-lip), inset 0 0 0 2px color-mix(in srgb, var(--panel) 70%, #fff), inset 0 0 0 7px color-mix(in srgb, var(--panel) 62%, #000);
}
:root[data-skin='keyboard'] .face {
  border-radius: 13%; background: var(--lip);
  box-shadow: inset 0 calc(var(--pitch) * -0.06) 0 color-mix(in srgb, var(--lip) 78%, #000), 0 calc(var(--pitch) * 0.07) 0 rgba(0, 0, 0, 0.42);
  transition: transform 0.14s cubic-bezier(.3, 1.6, .5, 1), box-shadow 0.14s ease-out;
}
:root[data-skin='keyboard'] .face::before {
  content: ''; position: absolute; inset: 5% 9% 15%; border-radius: 16%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tile) 94%, #000) 0, var(--tile) 55%) var(--tile);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 0 rgba(0, 0, 0, 0.12);
}
:root[data-skin='keyboard'] .glyph { font-size: calc(var(--pitch) * 0.42); transform: translateY(calc(var(--pitch) * -0.05)); transition: transform 0.14s cubic-bezier(.3, 1.6, .5, 1); }
:root[data-skin='keyboard'] .tile.on .face {
  background: var(--sel-lip); transform: translateY(calc(var(--pitch) * 0.06)); transition-duration: 0.07s; transition-timing-function: ease-out;
  box-shadow: inset 0 calc(var(--pitch) * -0.02) 0 color-mix(in srgb, var(--sel-lip) 78%, #000), 0 calc(var(--pitch) * 0.015) 0 rgba(0, 0, 0, 0.42);
}
:root[data-skin='keyboard'] .tile.on .face::before { background: var(--sel); }
:root[data-skin='keyboard'] .tile.on .glyph { transform: translateY(calc(var(--pitch) * 0.01)); transition-duration: 0.07s; transition-timing-function: ease-out; }
:root[data-skin='keyboard'] .tile.good .face { background: var(--mint-lip); box-shadow: inset 0 calc(var(--pitch) * -0.03) 0 color-mix(in srgb, var(--mint-lip) 78%, #000), 0 calc(var(--pitch) * 0.03) 0 rgba(0, 0, 0, 0.42); }
:root[data-skin='keyboard'] .tile.good .face::before { background: var(--mint); }
:root[data-skin='keyboard'] .tile.dupe .face { background: var(--sun-lip); box-shadow: inset 0 calc(var(--pitch) * -0.03) 0 color-mix(in srgb, var(--sun-lip) 78%, #000), 0 calc(var(--pitch) * 0.03) 0 rgba(0, 0, 0, 0.42); }
:root[data-skin='keyboard'] .tile.dupe .face::before { background: var(--sun); }
:root[data-skin='keyboard'] .tile.flash-good .face::before { animation: kbGood 0.5s ease-out; }
:root[data-skin='keyboard'] .tile.flash-dupe .face::before { animation: kbDupe 0.5s ease-out; }
:root[data-skin='keyboard'] .tile.flash-bad .face::before { animation: kbBad 0.45s ease-out; }
@keyframes kbGood { 0%, 55% { background: var(--mint); } }
@keyframes kbDupe { 0%, 55% { background: var(--sun); } }
@keyframes kbBad { 0%, 55% { background: var(--red); } }
:root[data-skin='keyboard'] #game:not(.revealed) .face { background: var(--lip); }
:root[data-skin='keyboard'] #game:not(.revealed) .face::before { background: repeating-linear-gradient(135deg, var(--tile) 0 6px, var(--sel) 6px 12px); }
/* the wordmark's five keys and the earned achievement keys are keycaps too */
:root[data-skin='keyboard'] .htile::before { border-radius: 16%; background: linear-gradient(180deg, var(--tile) 0 78%, var(--lip) 78%); box-shadow: inset 0 0 0 3px var(--lip), inset 0 -9px 0 var(--lip), 0 5px 0 var(--shadow); }
:root[data-skin='keyboard'] .achv-badge.got .achv-key, :root[data-skin='keyboard'] .achv-key.big.got { border-radius: 8px; box-shadow: inset 0 0 0 2px var(--lip), inset 0 -6px 0 var(--lip), 0 2px 0 rgba(0, 0, 0, 0.3); }
@media (prefers-reduced-motion: reduce) {
  :root[data-skin='keyboard'] .face, :root[data-skin='keyboard'] .glyph { transition: none; }
  :root[data-skin='keyboard'] .tile.flash-good .face::before { animation: none; background: var(--mint); }
  :root[data-skin='keyboard'] .tile.flash-dupe .face::before { animation: none; background: var(--sun); }
  :root[data-skin='keyboard'] .tile.flash-bad .face::before { animation: none; background: var(--red); }
}

/* ---------- Neon: glowing edges on black ---------- */
:root[data-skin='neon'] { --n-edge: #39f3ff; --n-sel-edge: #ff4fd8; --n-glyph: #e6feff; }
:root[data-skin='neon'] .board { background: var(--panel); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--n-edge) 45%, transparent), 0 0 28px color-mix(in srgb, var(--n-edge) 16%, transparent), 0 18px 40px var(--shadow); }
:root[data-skin='neon'] .face { border-radius: 22%; background: var(--tile); box-shadow: inset 0 0 0 2px var(--n-edge), inset 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--n-edge) 24%, transparent), 0 0 calc(var(--pitch) * 0.1) color-mix(in srgb, var(--n-edge) 55%, transparent); }
:root[data-skin='neon'] .glyph { color: var(--n-glyph); text-shadow: 0 0 calc(var(--pitch) * 0.06) color-mix(in srgb, var(--n-edge) 80%, transparent), 0 0 calc(var(--pitch) * 0.18) color-mix(in srgb, var(--n-edge) 40%, transparent); }
:root[data-skin='neon'] .tile.on .face { background: var(--sel); box-shadow: inset 0 0 0 2px var(--n-sel-edge), inset 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--n-sel-edge) 24%, transparent), 0 0 calc(var(--pitch) * 0.18) color-mix(in srgb, var(--n-sel-edge) 55%, transparent); }
:root[data-skin='neon'] .tile.on .glyph { text-shadow: 0 0 calc(var(--pitch) * 0.06) color-mix(in srgb, var(--n-sel-edge) 85%, transparent), 0 0 calc(var(--pitch) * 0.2) color-mix(in srgb, var(--n-sel-edge) 45%, transparent); }
:root[data-skin='neon'] .tile.good .face { background: var(--mint); box-shadow: 0 0 calc(var(--pitch) * 0.12) color-mix(in srgb, var(--mint) 55%, transparent); }
:root[data-skin='neon'] .tile.dupe .face { background: var(--sun); box-shadow: 0 0 calc(var(--pitch) * 0.12) color-mix(in srgb, var(--sun) 55%, transparent); }
:root[data-skin='neon'] .tile.good .glyph, :root[data-skin='neon'] .tile.dupe .glyph { color: var(--ink); text-shadow: none; }
:root[data-skin='neon'] .tile.flash-good .face { animation: nGood 0.5s ease-out; }
:root[data-skin='neon'] .tile.flash-dupe .face { animation: nDupe 0.5s ease-out; }
:root[data-skin='neon'] .tile.flash-bad .face { animation: nBad 0.45s ease-out; }
@keyframes nGood { 0%, 40% { box-shadow: inset 0 0 0 2px var(--mint), inset 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--mint) 24%, transparent), 0 0 calc(var(--pitch) * 0.24) color-mix(in srgb, var(--mint) 55%, transparent); } }
@keyframes nDupe { 0%, 40% { box-shadow: inset 0 0 0 2px var(--sun), inset 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--sun) 24%, transparent), 0 0 calc(var(--pitch) * 0.24) color-mix(in srgb, var(--sun) 55%, transparent); } }
@keyframes nBad { 0%, 40% { box-shadow: inset 0 0 0 2px var(--red), inset 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--red) 24%, transparent), 0 0 calc(var(--pitch) * 0.24) color-mix(in srgb, var(--red) 55%, transparent); } }
:root[data-skin='neon'] .trail, :root[data-skin='neon'] .hero-trail { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--pink) 60%, transparent)); }
:root[data-skin='neon'] .htile::before { background: var(--tile); box-shadow: inset 0 0 0 2.5px var(--n-edge), 0 0 12px color-mix(in srgb, var(--n-edge) 50%, transparent); }
:root[data-skin='neon'] .htile::after { color: var(--n-glyph); text-shadow: 0 0 5px color-mix(in srgb, var(--n-edge) 80%, transparent), 0 0 14px color-mix(in srgb, var(--n-edge) 40%, transparent); }
@media (prefers-reduced-motion: reduce) {
  :root[data-skin='neon'] .tile.flash-good .face, :root[data-skin='neon'] .tile.flash-dupe .face, :root[data-skin='neon'] .tile.flash-bad .face { animation: none; }
}

/* ---------- synthwave (glow) ---------- */
:root[data-skin='synthwave'] { --n-edge: #ff3fa4; --n-sel-edge: #ffb347; --n-glyph: #ffe8f7; }
:root[data-skin='synthwave'] .board { background: var(--panel); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--n-edge) 45%, transparent), 0 0 28px color-mix(in srgb, var(--n-edge) 16%, transparent), 0 18px 40px var(--shadow); }
:root[data-skin='synthwave'] .face { border-radius: 22%; background: var(--tile); box-shadow: inset 0 0 0 2px var(--n-edge), inset 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--n-edge) 24%, transparent), 0 0 calc(var(--pitch) * 0.1) color-mix(in srgb, var(--n-edge) 55%, transparent); }
:root[data-skin='synthwave'] .glyph { color: var(--n-glyph); text-shadow: 0 0 calc(var(--pitch) * 0.06) color-mix(in srgb, var(--n-edge) 80%, transparent), 0 0 calc(var(--pitch) * 0.18) color-mix(in srgb, var(--n-edge) 40%, transparent); }
:root[data-skin='synthwave'] .tile.on .face { background: var(--sel); box-shadow: inset 0 0 0 2px var(--n-sel-edge), inset 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--n-sel-edge) 24%, transparent), 0 0 calc(var(--pitch) * 0.18) color-mix(in srgb, var(--n-sel-edge) 55%, transparent); }
:root[data-skin='synthwave'] .tile.on .glyph { text-shadow: 0 0 calc(var(--pitch) * 0.06) color-mix(in srgb, var(--n-sel-edge) 85%, transparent), 0 0 calc(var(--pitch) * 0.2) color-mix(in srgb, var(--n-sel-edge) 45%, transparent); }
:root[data-skin='synthwave'] .tile.good .face { background: var(--mint); box-shadow: 0 0 calc(var(--pitch) * 0.12) color-mix(in srgb, var(--mint) 55%, transparent); }
:root[data-skin='synthwave'] .tile.dupe .face { background: var(--sun); box-shadow: 0 0 calc(var(--pitch) * 0.12) color-mix(in srgb, var(--sun) 55%, transparent); }
:root[data-skin='synthwave'] .tile.good .glyph, :root[data-skin='synthwave'] .tile.dupe .glyph { color: var(--ink); text-shadow: none; }
:root[data-skin='synthwave'] .tile.flash-good .face { animation: syGood 0.5s ease-out; }
:root[data-skin='synthwave'] .tile.flash-dupe .face { animation: syDupe 0.5s ease-out; }
:root[data-skin='synthwave'] .tile.flash-bad .face { animation: syBad 0.45s ease-out; }
@keyframes syGood { 0%, 40% { box-shadow: inset 0 0 0 2px var(--mint), inset 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--mint) 24%, transparent), 0 0 calc(var(--pitch) * 0.24) color-mix(in srgb, var(--mint) 55%, transparent); } }
@keyframes syDupe { 0%, 40% { box-shadow: inset 0 0 0 2px var(--sun), inset 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--sun) 24%, transparent), 0 0 calc(var(--pitch) * 0.24) color-mix(in srgb, var(--sun) 55%, transparent); } }
@keyframes syBad { 0%, 40% { box-shadow: inset 0 0 0 2px var(--red), inset 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--red) 24%, transparent), 0 0 calc(var(--pitch) * 0.24) color-mix(in srgb, var(--red) 55%, transparent); } }
:root[data-skin='synthwave'] .trail, :root[data-skin='synthwave'] .hero-trail { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--pink) 60%, transparent)); }
:root[data-skin='synthwave'] .htile::before { background: var(--tile); box-shadow: inset 0 0 0 2.5px var(--n-edge), 0 0 12px color-mix(in srgb, var(--n-edge) 50%, transparent); }
:root[data-skin='synthwave'] .htile::after { color: var(--n-glyph); text-shadow: 0 0 5px color-mix(in srgb, var(--n-edge) 80%, transparent), 0 0 14px color-mix(in srgb, var(--n-edge) 40%, transparent); }
@media (prefers-reduced-motion: reduce) {
  :root[data-skin='synthwave'] .tile.flash-good .face, :root[data-skin='synthwave'] .tile.flash-dupe .face, :root[data-skin='synthwave'] .tile.flash-bad .face { animation: none; }
}
:root[data-skin='synthwave'] .board { background: linear-gradient(180deg, var(--panel) 0, var(--panel) 55%, color-mix(in srgb, var(--panel) 72%, #ff3fa4) 100%); }

/* ---------- terminal (terminal) ---------- */
:root[data-skin='terminal'] { --n-edge: #2fbf55; --n-sel-edge: #3dff6e; --n-glyph: #4dff7c; --n-sel-glyph: #021a07; }
:root[data-skin='terminal'] .board { background: repeating-linear-gradient(180deg, rgba(61, 255, 110, 0.035) 0 1px, transparent 1px 3px), var(--panel); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--n-edge) 55%, transparent), 0 18px 40px var(--shadow); border-radius: 5%; }
:root[data-skin='terminal'] .face { border-radius: 8%; background: var(--tile); box-shadow: inset 0 0 0 1.5px var(--n-edge); }
:root[data-skin='terminal'] .glyph { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-weight: 700; color: var(--n-glyph); text-shadow: 0 0 calc(var(--pitch) * 0.08) color-mix(in srgb, var(--n-glyph) 55%, transparent); }
:root[data-skin='terminal'] .tile.on .face { background: var(--sel); box-shadow: 0 0 calc(var(--pitch) * 0.16) color-mix(in srgb, var(--sel) 50%, transparent); }
:root[data-skin='terminal'] .tile.on .glyph { color: var(--n-sel-glyph); text-shadow: none; }
:root[data-skin='terminal'] .tile.good .face { background: var(--mint); box-shadow: none; }
:root[data-skin='terminal'] .tile.dupe .face { background: var(--sun); box-shadow: none; }
:root[data-skin='terminal'] .tile.good .glyph, :root[data-skin='terminal'] .tile.dupe .glyph { color: var(--ink); text-shadow: none; }
:root[data-skin='terminal'] .tile.flash-good .face { animation: teGood 0.5s ease-out; }
:root[data-skin='terminal'] .tile.flash-dupe .face { animation: teDupe 0.5s ease-out; }
:root[data-skin='terminal'] .tile.flash-bad .face { animation: teBad 0.45s ease-out; }
@keyframes teGood { 0%, 40% { box-shadow: inset 0 0 0 2px var(--mint), 0 0 calc(var(--pitch) * 0.2) color-mix(in srgb, var(--mint) 50%, transparent); } }
@keyframes teDupe { 0%, 40% { box-shadow: inset 0 0 0 2px var(--sun), 0 0 calc(var(--pitch) * 0.2) color-mix(in srgb, var(--sun) 50%, transparent); } }
@keyframes teBad { 0%, 40% { box-shadow: inset 0 0 0 2px var(--red), 0 0 calc(var(--pitch) * 0.2) color-mix(in srgb, var(--red) 50%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  :root[data-skin='terminal'] .tile.flash-good .face, :root[data-skin='terminal'] .tile.flash-dupe .face, :root[data-skin='terminal'] .tile.flash-bad .face { animation: none; }
}
:root[data-skin='terminal'] .htile::before { border-radius: 10%; background: var(--tile); box-shadow: inset 0 0 0 2px var(--n-edge); }
:root[data-skin='terminal'] .htile::after { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-weight: 700; color: var(--n-glyph); text-shadow: 0 0 8px color-mix(in srgb, var(--n-glyph) 55%, transparent); }

/* ---------- gold (gold) ---------- */
:root[data-skin='gold'] { --n-edge: #ecce7c; --n-sel-edge: #f2cf6b; --n-glyph: #120c02; --n-sel-glyph: #f2cf6b; }
:root[data-skin='gold'] .board { background: var(--panel); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--n-edge) 35%, transparent), 0 18px 40px var(--shadow); }
:root[data-skin='gold'] .face { border-radius: 16%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 1px, rgba(0, 0, 0, 0.035) 1px 2px, transparent 2px 4px), linear-gradient(160deg, color-mix(in srgb, var(--tile) 70%, #fff) 0, var(--tile) 45%, color-mix(in srgb, var(--tile) 90%, #000) 100%) var(--tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 calc(var(--pitch) * -0.06) 0 var(--lip), 0 calc(var(--pitch) * 0.03) 0 rgba(0, 0, 0, 0.5); }
:root[data-skin='gold'] .glyph { color: var(--n-glyph); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
:root[data-skin='gold'] .tile.on .face { background: var(--sel); box-shadow: inset 0 0 0 2px var(--n-sel-edge), 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--n-sel-edge) 40%, transparent); }
:root[data-skin='gold'] .tile.on .glyph { color: var(--n-sel-glyph); text-shadow: none; }
:root[data-skin='gold'] .tile.good .face { background: var(--mint); box-shadow: none; }
:root[data-skin='gold'] .tile.dupe .face { background: var(--sun); box-shadow: none; }
:root[data-skin='gold'] .tile.good .glyph, :root[data-skin='gold'] .tile.dupe .glyph { color: var(--ink); text-shadow: none; }
:root[data-skin='gold'] .htile::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 1px, rgba(0, 0, 0, 0.035) 1px 2px, transparent 2px 4px), linear-gradient(160deg, color-mix(in srgb, var(--tile) 70%, #fff) 0, var(--tile) 45%, color-mix(in srgb, var(--tile) 90%, #000) 100%) var(--tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 -6px 0 var(--lip), 0 5px 0 var(--shadow); }
:root[data-skin='gold'] .htile::after { color: var(--n-glyph); }

/* ---------- lava (glow) ---------- */
:root[data-skin='lava'] { --n-edge: #ff6a1a; --n-sel-edge: #ffd23a; --n-glyph: #fff1e2; }
:root[data-skin='lava'] .board { background: var(--panel); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--n-edge) 45%, transparent), 0 0 28px color-mix(in srgb, var(--n-edge) 16%, transparent), 0 18px 40px var(--shadow); }
:root[data-skin='lava'] .face { border-radius: 22%; background: var(--tile); box-shadow: inset 0 0 0 2px var(--n-edge), inset 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--n-edge) 24%, transparent), 0 0 calc(var(--pitch) * 0.1) color-mix(in srgb, var(--n-edge) 55%, transparent); }
:root[data-skin='lava'] .glyph { color: var(--n-glyph); text-shadow: 0 0 calc(var(--pitch) * 0.06) color-mix(in srgb, var(--n-edge) 80%, transparent), 0 0 calc(var(--pitch) * 0.18) color-mix(in srgb, var(--n-edge) 40%, transparent); }
:root[data-skin='lava'] .tile.on .face { background: var(--sel); box-shadow: inset 0 0 0 2px var(--n-sel-edge), inset 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--n-sel-edge) 24%, transparent), 0 0 calc(var(--pitch) * 0.18) color-mix(in srgb, var(--n-sel-edge) 55%, transparent); }
:root[data-skin='lava'] .tile.on .glyph { text-shadow: 0 0 calc(var(--pitch) * 0.06) color-mix(in srgb, var(--n-sel-edge) 85%, transparent), 0 0 calc(var(--pitch) * 0.2) color-mix(in srgb, var(--n-sel-edge) 45%, transparent); }
:root[data-skin='lava'] .tile.good .face { background: var(--mint); box-shadow: 0 0 calc(var(--pitch) * 0.12) color-mix(in srgb, var(--mint) 55%, transparent); }
:root[data-skin='lava'] .tile.dupe .face { background: var(--sun); box-shadow: 0 0 calc(var(--pitch) * 0.12) color-mix(in srgb, var(--sun) 55%, transparent); }
:root[data-skin='lava'] .tile.good .glyph, :root[data-skin='lava'] .tile.dupe .glyph { color: var(--ink); text-shadow: none; }
:root[data-skin='lava'] .tile.flash-good .face { animation: laGood 0.5s ease-out; }
:root[data-skin='lava'] .tile.flash-dupe .face { animation: laDupe 0.5s ease-out; }
:root[data-skin='lava'] .tile.flash-bad .face { animation: laBad 0.45s ease-out; }
@keyframes laGood { 0%, 40% { box-shadow: inset 0 0 0 2px var(--mint), inset 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--mint) 24%, transparent), 0 0 calc(var(--pitch) * 0.24) color-mix(in srgb, var(--mint) 55%, transparent); } }
@keyframes laDupe { 0%, 40% { box-shadow: inset 0 0 0 2px var(--sun), inset 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--sun) 24%, transparent), 0 0 calc(var(--pitch) * 0.24) color-mix(in srgb, var(--sun) 55%, transparent); } }
@keyframes laBad { 0%, 40% { box-shadow: inset 0 0 0 2px var(--red), inset 0 0 calc(var(--pitch) * 0.14) color-mix(in srgb, var(--red) 24%, transparent), 0 0 calc(var(--pitch) * 0.24) color-mix(in srgb, var(--red) 55%, transparent); } }
:root[data-skin='lava'] .trail, :root[data-skin='lava'] .hero-trail { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--pink) 60%, transparent)); }
:root[data-skin='lava'] .htile::before { background: var(--tile); box-shadow: inset 0 0 0 2.5px var(--n-edge), 0 0 12px color-mix(in srgb, var(--n-edge) 50%, transparent); }
:root[data-skin='lava'] .htile::after { color: var(--n-glyph); text-shadow: 0 0 5px color-mix(in srgb, var(--n-edge) 80%, transparent), 0 0 14px color-mix(in srgb, var(--n-edge) 40%, transparent); }
@media (prefers-reduced-motion: reduce) {
  :root[data-skin='lava'] .tile.flash-good .face, :root[data-skin='lava'] .tile.flash-dupe .face, :root[data-skin='lava'] .tile.flash-bad .face { animation: none; }
}
:root[data-skin='lava'] .board { background: radial-gradient(120% 70% at 50% 108%, color-mix(in srgb, var(--panel) 70%, #ff6a1a) 0, var(--panel) 70%); }

/* ---------- frost (frost) ---------- */
:root[data-skin='frost'] { --n-edge: #9fdcff; --n-sel-edge: #e6f6ff; --n-glyph: #f4fbff; --n-sel-glyph: #0c1a2c; }
:root[data-skin='frost'] .board { background: radial-gradient(90% 60% at 30% 0, color-mix(in srgb, var(--panel) 80%, var(--n-edge)) 0, var(--panel) 70%); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--n-edge) 40%, transparent), 0 0 26px color-mix(in srgb, var(--n-edge) 14%, transparent), 0 18px 40px var(--shadow); }
:root[data-skin='frost'] .face { border-radius: 20%; background: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0) 70%), var(--tile); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--n-edge) 85%, transparent), 0 0 calc(var(--pitch) * 0.08) color-mix(in srgb, color-mix(in srgb, var(--n-edge) 85%, transparent) 50%, transparent); }
:root[data-skin='frost'] .glyph { color: var(--n-glyph); text-shadow: 0 0 calc(var(--pitch) * 0.1) color-mix(in srgb, var(--n-edge) 50%, transparent); }
:root[data-skin='frost'] .tile.on .face { background: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0) 70%), var(--sel); box-shadow: inset 0 0 0 2px var(--n-sel-edge), 0 0 calc(var(--pitch) * 0.18) color-mix(in srgb, var(--n-sel-edge) 50%, transparent); }
:root[data-skin='frost'] .tile.on .glyph { color: var(--n-sel-glyph); text-shadow: none; }
:root[data-skin='frost'] .tile.good .face { background: var(--mint); box-shadow: none; }
:root[data-skin='frost'] .tile.dupe .face { background: var(--sun); box-shadow: none; }
:root[data-skin='frost'] .tile.good .glyph, :root[data-skin='frost'] .tile.dupe .glyph { color: var(--ink); text-shadow: none; }
:root[data-skin='frost'] .tile.flash-good .face { animation: frGood 0.5s ease-out; }
:root[data-skin='frost'] .tile.flash-dupe .face { animation: frDupe 0.5s ease-out; }
:root[data-skin='frost'] .tile.flash-bad .face { animation: frBad 0.45s ease-out; }
@keyframes frGood { 0%, 40% { box-shadow: inset 0 0 0 2px var(--mint), 0 0 calc(var(--pitch) * 0.2) color-mix(in srgb, var(--mint) 50%, transparent); } }
@keyframes frDupe { 0%, 40% { box-shadow: inset 0 0 0 2px var(--sun), 0 0 calc(var(--pitch) * 0.2) color-mix(in srgb, var(--sun) 50%, transparent); } }
@keyframes frBad { 0%, 40% { box-shadow: inset 0 0 0 2px var(--red), 0 0 calc(var(--pitch) * 0.2) color-mix(in srgb, var(--red) 50%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  :root[data-skin='frost'] .tile.flash-good .face, :root[data-skin='frost'] .tile.flash-dupe .face, :root[data-skin='frost'] .tile.flash-bad .face { animation: none; }
}
:root[data-skin='frost'] .htile::before { background: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0) 70%), var(--tile); box-shadow: inset 0 0 0 2px var(--n-edge), 0 0 12px color-mix(in srgb, var(--n-edge) 40%, transparent); }
:root[data-skin='frost'] .htile::after { color: var(--n-glyph); }

/* ---------- blueprint (blueprint) ---------- */
:root[data-skin='blueprint'] { --n-edge: #e8f0ff; --n-sel-edge: #ffffff; --n-glyph: #ffffff; --n-sel-glyph: #0c2a62; }
:root[data-skin='blueprint'] .board {
  background:
    linear-gradient(rgba(232, 240, 255, 0.07) 1px, transparent 1px) 0 0 / 100% calc(var(--pitch) / 4),
    linear-gradient(90deg, rgba(232, 240, 255, 0.07) 1px, transparent 1px) 0 0 / calc(var(--pitch) / 4) 100%,
    var(--panel);
  border-radius: 4%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--n-edge) 55%, transparent), 0 18px 40px var(--shadow);
}
:root[data-skin='blueprint'] .face { border-radius: 10%; background: var(--tile); box-shadow: inset 0 0 0 2px var(--n-edge); }
:root[data-skin='blueprint'] .glyph { font-weight: 700; color: var(--n-glyph); }
:root[data-skin='blueprint'] .tile.on .face { background: var(--sel); box-shadow: inset 0 0 0 2px var(--n-sel-edge); }
:root[data-skin='blueprint'] .tile.on .glyph { color: var(--n-sel-glyph); }
:root[data-skin='blueprint'] .tile.good .face { background: var(--mint); box-shadow: none; }
:root[data-skin='blueprint'] .tile.dupe .face { background: var(--sun); box-shadow: none; }
:root[data-skin='blueprint'] .tile.good .glyph, :root[data-skin='blueprint'] .tile.dupe .glyph { color: var(--ink); text-shadow: none; }
:root[data-skin='blueprint'] .tile.flash-good .face { animation: blGood 0.5s ease-out; }
:root[data-skin='blueprint'] .tile.flash-dupe .face { animation: blDupe 0.5s ease-out; }
:root[data-skin='blueprint'] .tile.flash-bad .face { animation: blBad 0.45s ease-out; }
@keyframes blGood { 0%, 40% { box-shadow: inset 0 0 0 2px var(--mint), 0 0 calc(var(--pitch) * 0.2) color-mix(in srgb, var(--mint) 50%, transparent); } }
@keyframes blDupe { 0%, 40% { box-shadow: inset 0 0 0 2px var(--sun), 0 0 calc(var(--pitch) * 0.2) color-mix(in srgb, var(--sun) 50%, transparent); } }
@keyframes blBad { 0%, 40% { box-shadow: inset 0 0 0 2px var(--red), 0 0 calc(var(--pitch) * 0.2) color-mix(in srgb, var(--red) 50%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  :root[data-skin='blueprint'] .tile.flash-good .face, :root[data-skin='blueprint'] .tile.flash-dupe .face, :root[data-skin='blueprint'] .tile.flash-bad .face { animation: none; }
}
:root[data-skin='blueprint'] .htile::before { border-radius: 12%; background: var(--tile); box-shadow: inset 0 0 0 2.5px var(--n-edge); }
:root[data-skin='blueprint'] .htile::after { font-weight: 700; color: var(--n-glyph); }